:root{
    --VS-primary-color: #55555e;
    --VS-secondary-color: #000;
    --VS-ternary-color: #f9f8f9;
    --VS-context:#FBB54B;
    --VS-context-menu:#f7eee1;
    --VS-context-dark:#F09205;
    --VS-context-light : #FDD69D;
    --VS-context-lighter : #FEE6C3;
    --VS-second-color: #38302E;
    --VS-white:#FFFF;
    --VS-header:#ebebeb;
    --VS-modal-header:#7C0A02;
    --VS-main-body:#d2d0d04d;
    --VS-button:#F09205;
    --VS-text-danger : #ff0000;
    /* New Color Variables */
    --VS-swal-cancel-button-bg: #5c5c76; /* Usage: SweetAlert cancel button background */
    --VS-swal-cancel-button-color: rgb(255, 255, 255); /* Usage: SweetAlert cancel button text color */
    --VS-modal-body-bg: #ebedf1; /* Usage: Modal body background */
    --VS-notification-hover-bg: #f6f7fc; /* Usage: Notification section hover background */
    --VS-company-switch-bg: #2c2f41; /* Usage: Company switch notification ripple background */
    --VS-user-photo-bg: rgb(241, 241, 241); /* Usage: User photo input label background */
    --VS-supplier-success-color: green; /* Usage: Supplier success message color */
    --VS-step-icon-border: #dae1e5; /* Usage: Supplier step icon border/background */
    --VS-step-icon-done-bg: #7cc576; /* Usage: Supplier step icon background when done */
    --VS-step-icon-active-bg: #09f; /* Usage: Supplier step icon background when active */
    --VS-swal-warning-icon-color: #e64942; /* Usage: SweetAlert warning icon color */
    --VS-upload-btn-bg: rgb(37, 55, 139); /* Usage: Upload button background */
    --VS-buyer-step-icon-border: #ddd; /* Usage: Buyer step icon border */
    --VS-buyer-step-icon-bg: #fff; /* Usage: Buyer step icon background */
    --VS-buyer-modal-select-color: #0D6EFD; /* Usage: Buyer modal select color */
    --VS-bullet-line-list-color: #bbb; /* Usage: Bullet line list color */
    --VS-alert-warning-color: #6e5400; /* Usage: Alert warning text color */
    --VS-modal-footer-bg: #f5f5f6; /* Usage: Modal footer background */
    --VS-badge-color: #0D6EFD; /* Usage: Badge color */
    --VS-nav-link-color: #5a5a5a; /* Usage: Nav link color */
    --VS-nav-link-active-color: #000; /* Usage: Nav link active color */
    --VS-tab-content-bg: #f9f9f9; /* Usage: Tab content background */
    --VS-btn-secondary-bg: #b7b7b7; /* Usage: Secondary button background */
    --VS-grey-tab-bg: rgb(123, 123, 123); /* Usage: Grey tab background */
    --VS-table-border: #c7ceeb; /* Usage: Table border color */
    --VS-new-table-head-bg: #eef1ff; /* Usage: New table header background */
    --VS-new-table-body-bg: #fff; /* Usage: New table body background */
    --VS-new-table-trash-color: #d9534f; /* Usage: New table trash icon color */
    --VS-new-table-light-bg: #e9ecef; /* Usage: New table light background */
    --VS-new-table-row-bg: #f6f6f6; /* Usage: New table row background */
    --VS-new-table-border-df: #dfdfdf; /* Usage: New table border color */
    --VS-new-table-control-border: #dee2e6; /* Usage: New table form control border */
    --VS-hover-underline-color: #0067ff; /* Usage: Hover underline color */
    --VS-filter-multi-select-item-bg: #7C0A02; /* Usage: Filter multi-select item background */
    --VS-toolbar-bottom-bg: #fff; /* Usage: Toolbar bottom background */
    --VS-bg-opacity-10: #f7f8ff; /* Usage: Background with opacity 10 */
    --VS-dtsp-top-row-bg: #eef1ff; /* Usage: DataTables search pane top row background */
    --VS-dtsp-clear-all-bg: #5c5c76; /* Usage: DataTables search pane clear all button background */
    --VS-dtsp-clear-all-color: #fff; /* Usage: DataTables search pane clear all button text color */
    --VS-notsupplier-bg: #f2f3f5; /* Usage: Not supplier background */
    --VS-pro-est-input-color: #7e7e7e; /* Usage: Professional estimate input color */
    --VS-select2-arrow-color: #343a40; /* Usage: Select2 arrow color */
    --VS-category-tags-bg: #CFE2FF; /* Usage: Category tags background */
    --VS-category-tags-border: #B6D4FE; /* Usage: Category tags border */
    --VS-category-tags-color: #20232a; /* Usage: Category tags text color */
    --VS-uploaded-files-list-bg: #fff; /* Usage: Uploaded files list background */
    --VS-uploaded-files-list-border: #ccc; /* Usage: Uploaded files list border */
    --VS-tabel-product-display-bg: #E2DEDE; /* Usage: Table product display background */
    --VS-comment-header-bg: #fff; /* Usage: Comment header background */
    --VS-user-line-list-hover-bg: var(--VS-header); /* Usage: User line list hover background */
    --VS-user-line-list-active-bg: var(--VS-context); /* Usage: User line list active background */
    --VS-user-line-list-active-color: #FFF; /* Usage: User line list active text color */
    --VS-supplier-prof-btn-bg: #0d6efd; /* Usage: Supplier professional button background */
    --VS-supplier-prof-btn-color: #fff; /* Usage: Supplier professional button text color */
    --VS-light-gallery-bg: #d7d9df; /* Usage: Light gallery background */
    --VS-light-gallery-border: #ccc; /* Usage: Light gallery border */
    --VS-light-gallery-active-border: #23af47; /* Usage: Light gallery active border */
    --VS-light-gallery-inactive-border: #1c2c42; /* Usage: Light gallery inactive border */
    --VS-group-image-edit-bg: #fbfbfb; /* Usage: Group image edit background */
    --VS-search-rfq-list-bg: #fff; /* Usage: Search RFQ list background */
    --VS-search-rfq-list-border: #ccc; /* Usage: Search RFQ list border */
    --VS-search-rfq-list-item-border: #ccc; /* Usage: Search RFQ list item border */
    --VS-category-popup-bg: #fff; /* Usage: Category popup background */
    --VS-category-popup-shadow: rgba(0, 0, 0, 0.08); /* Usage: Category popup shadow */
    --VS-category-popup-border: #ccc; /* Usage: Category popup border */
    --VS-progress-done-gradient-start: #FF9472; /* Usage: Progress done gradient start color */
    --VS-progress-done-gradient-end: #FF9472; /* Usage: Progress done gradient end color */
    --VS-progress-done-shadow-start: #FF9472; /* Usage: Progress done shadow start color */
    --VS-progress-done-shadow-end: #FF9472; /* Usage: Progress done shadow end color */
    --VS-kanban-initials-bg: #f748591c; /* Usage: Kanban initials background */
    --VS-kanban-initials-border: #f748591c; /* Usage: Kanban initials border */
    --VS-print-icon-inner-bg: #feebef; /* Usage: Print icon inner background */
    --VS-global-loader-color: #CF000F; /* Usage: Global loader color */
    --VS-chat-new-design-bg: #000; /* Usage: New chat design background */
    --VS-chat-new-design-shadow: rgba(0, 0, 0, 0.075); /* Usage: New chat design shadow */
    --VS-chat-new-design-sub-menu-bg: #000; /* Usage: New chat design sub menu background */
    --VS-uploaded-document-bg: #fff; /* Usage: Uploaded document background */
    --VS-uploaded-document-border: #ccc; /* Usage: Uploaded document border */
    --VS-action-main-tab-active-color: #FFFFFF; /* Usage: Action main tab active text color */
    --VS-action-main-tab-after-border: #cfcfcf; /* Usage: Action main tab after border */
    --VS-skip-button-color: #cf000f; /* Usage: Skip button color */
    --VS-tree-border: #ddd; /* Usage: Tree structure border */
    --VS-tree-text-color: #666666; /* Usage: Tree structure text color */
    --VS-tree-hover-border: #474747; /* Usage: Tree structure hover border */
    --VS-mobile-verification-icon-color: #cf000f; /* Usage: Mobile verification icon color */
    --VS-dashboard-tagline-bg: #E91E63; /* Usage: Dashboard tagline background */
    --VS-invoice-quantity-border: #cfcfcf; /* Usage: Invoice quantity border */
    --VS-search-cancel-button-color: red; /* Usage: Search cancel button color */
    --VS-livewire-loader-bg: rgba(0, 0, 0, 0.5); /* Usage: Livewire loader background */
    --VS-customer-tab-border-bg: #FFF; /* Usage: Customer tab border background */
    --VS-linear-header-gradient-start-1: #000; /* Usage: Linear header gradient start color 1 */
    --VS-linear-header-gradient-start-2: #Cf000F; /* Usage: Linear header gradient start color 2 */
    --VS-linear-header-gradient-start-3: #FBB54B; /* Usage: Linear header gradient start color 3 */
    --VS-linear-header-gradient-end: #FFF; /* Usage: Linear header gradient end color */
}

.brand_logo_reg {position: absolute; top: 25px; left: 25px; z-index: 99; height: 90px; width: 350px;}
.new_page_reg .reg-above_txt {
    text-transform: none;
    font-weight: 700;
    font-size: 2rem;
    font-style: normal;
    line-height: 1.2;
}

.new_page_reg .reg_salute {
    width: 40%;
    z-index: 1;
    background-color: #f748591c;
    padding: 0.375rem 0.25rem 0.375rem 0.75rem;
    border-radius: 0px;
    font-size: 0.8750rem;
    font-style: normal;
    font-weight: 400;
}

.ap-otp-input{padding:10px;border:none;border-bottom:2px solid #000;margin:0 5px;width:40px;font-weight:700;text-align:center}
.ap-otp-input:focus{outline:0!important;border-bottom:1px solid #1f6feb;transition:.12s ease-in}
.pop-up-header {
    background-color: #7C0A02 !important;
    color: #fff;
    font-weight: 500;
}
.new_page_reg .form-group {
    position: relative !important;
}

.new_page_reg label {
    color: rgba(161, 168, 158, 1);
    font-size: 1rem;
    font-weight: 400;
    font-style: normal;
}

.new_page_reg input {
    background-color: rgba(255, 255, 255, 1);
    border: 1px solid rgba(161, 168, 158, 0.631) !important;
    height: 3.1250rem !important;
    border-radius: 0px !important;

}

/* --star-dust-3: rgba(161, 168, 158, 0.298) ;
--star-dust-2: rgba(161, 168, 158, 0.631); */
    #email.form-control:focus, #password.form-control:focus, .new_page_reg .reg_btn:focus{box-shadow: none !important;}

.new_page_reg .reg_btn {
    color: white;
    border-radius: 0px !important;
    width: 100%;
    height: 50px !important;
    display: grid;
    place-items: center;
    font-size: 1rem;
    font-weight: 700;
}
.new_page_reg .reg_btn:focus{box-shadow: none !important;}


.new_page_reg .video_txt {
    font-size: 1rem;
    font-weight: 400;
}

.new_page_reg .login_txt {
    color: #222222;
    font-size: 1rem;
    font-weight: 400;
    font-style: normal;
}

.new_page_reg .dropdown_new.show {
    transform: translate(-15px, 48px) !important;
}

.new_page_reg .dropdown-item {
    color: #222222;
    font-size: 14px;
    font-weight: 400;
}
.new_page_reg .dropdown-toggle[aria-expanded="false"]::after {
    border: 0 !important;
    background: none;
    margin-left: 0.5em;
    vertical-align: 0em;
}
.new_page_reg .dropdown-toggle[aria-expanded="true"]::after {
    border: 0 !important;
    background: none;
    margin-left: 0.5em;
    vertical-align: 0em;
}

.new_page_reg .input_img {
    height: 1.875rem;
    left: 6px;
    object-fit: cover;
    position: absolute;
    top: 43px;
    max-width: 50px;

}

.new_page_reg .input_img_2 {
    height: 1.5rem;
    right: 12px;
    object-fit: cover;
    position: absolute;
    top: 46px;
    width: 30px;
}

.new_page_reg .reg_salute_1 {
    width: 15%;
    z-index: 1;
    background-color: rgba(161, 168, 158, 0.631);
    padding: 0.375rem 0.25rem 0.375rem 0.75rem;
    border-radius: 0px;
    font-size: 0.8750rem;
    font-style: normal;
    font-weight: 400;
}

.new_page_reg .forgot-password .forgot,
.new_page_reg .login_with {
    font-size: 1rem;
    text-decoration: none;
    color: #000;
    font-weight: 400;
    font-style: normal;
}

.new_page_reg .forgot-password .forgot:hover,
.new_page_reg .login_with:hover{color: #be1f2e;}

@media (min-width: 1401px) and (max-width: 1700px) {
    .new_page_reg .reg_salute { width: 55%;}
    .new_page_reg .reg_salute_1 { width: 20%;}
    .brand_logo_reg { height: 64px; width: 180px;}

 }

@media only screen and (max-width: 1400px) {
    .new_page_reg .reg_salute { width: 55%;}
    .new_page_reg .reg_salute_1 { width: 24%;}
    .brand_logo_reg { height: 64px; width: 180px;}
    .new_page_reg .input_img {top: 43px}
    .suppside .input_img {top: 41px}
    .new_page_reg .input_img_2 {top: 46px}
}

@media (min-width: 1024px) and (max-width: 1270px) {
    .brand_logo_reg { height: 46px; width: 130px;}
}

@media only screen and (max-width: 991px) {
    .new_page_reg .reg_salute_1 { width: 15%; }
    .new_page_reg .reg_salute { width: 15%;}
    .brand_logo_reg { height: 54px; width: 150px;}
    .new_page_reg input, .new_page_reg label{
        font-size: 1rem;
    }
    .new_page_reg .input_img {top: 43px}
    .new_page_reg .input_img_2 {top: 46px}
}

@media only screen and (max-width: 567px) {
    .new_page_reg .reg_salute{ width: 30%; }
    .new_page_reg .reg_salute_1 { width: 30%;}
    .new_page_reg .reg-above_txt {font-size: 1.5rem;}
    .new_page_reg input, .new_page_reg label{
        font-size: 1rem;
    }
    .new_page_reg .input_img {top: 43px}
    .new_page_reg .input_img_2 {top: 46px}

}
.success{color: green;}
.success-icon {
    display: inline-block;
    width: 2.5em;
    height: 2.5em;
    font-size: 20px;
    border-radius: 50%;
    border: 4px solid #198754;
    background-color: #fff;
    position: relative;
    overflow: hidden;
    transform-origin: center;
    animation: showSuccess 180ms ease-in-out;
    transform: scale(1);
}
.success-icon__tip,
.success-icon__long {
    display: block;
    position: absolute;
    height: 4px;
    background-color: #198754;
    border-radius: 10px;
}
.success-icon__tip {
    width: 0.8em;
    top: 22px;
    left: 3px;
    transform: rotate(45deg);
    animation: tipInPlace 300ms ease-in-out;
    animation-fill-mode: forwards;
    animation-delay: 180ms;
    visibility: hidden;
}
.success-icon__long {
    width: 1.5em;
    transform: rotate(-45deg);
    top: 19px;
    left: 11px;
    animation: longInPlace 140ms ease-in-out;
    animation-fill-mode: forwards;
    visibility: hidden;
    animation-delay: 440ms;
}
@keyframes showSuccess {
    from {
        transform: scale(0);
    }

    to {
        transform: scale(1);
    }
}
@keyframes tipInPlace {
    from {
        width: 0em;
        top: 0em;
        left: -3px;
    }

    to {
        width: 0.8em;
        top: 22px;
        left: 3px;

        visibility: visible;
    }
}

@keyframes longInPlace {
    from {
        width: 0em;
        top: 19px;
        left: 11px;
    }

    to {
        width: 1.5em;
        top: 19px;
        left: 11px;
        visibility: visible;
    }
}

.new_page_reg .iti.iti--allow-dropdown.iti--separate-dial-code{
    width: 100% !important;}

.new_page_reg .iti__flag-container{
padding: 0 !important;
}

.registration-img{ background: url(../images/signin.png); background-repeat: no-repeat; background-size: 100% 100%; }
.registration-blk{min-height: 100vh;}
.home_lenguage{
    top: 0;
    right: 0;
}

.home_lenguage span {width: 25px;  display: inline-block;}



.supplier-registration-img{
    background: url(../images/Supplier-registration.jpg) center center;
    background-size: cover;
    background-repeat: no-repeat;
}

.supplier-Login-Image{
    background: url(../images/supplier-Login.png) no-repeat;
    background-size: 100% 100%;
}

.supplier-registration-img::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, .5);
}
ul.parsley-errors-list {
    list-style-type: none;
}
.parsley-errors-list li {
    color: red;
}
.parsley-errors-list{position: absolute; bottom: -37px;}
input{background-color: white;}
.js-validation{
    position: absolute;
    bottom: -18px;
    left: 0;
}
.registration-img1 {
    background: url(../images/thank-you.jpg) center center no-repeat;
    background-size: cover;
}

.thank-you-header{
    font-size: 4vw;
    text-transform: none;
}
.thank-you-subText{
    font-size: 1.5vw;
}
.bannerbtn{
    font-size: 1.2rem;
}
.otp-input{
    display: flex;
    width: 100%;
}

.otp-input #password{
    border: none !important;
    border-bottom: 1px solid #1e1e1e !important;
    margin-left: 15px;
    margin-right: 15px;
    text-align: center;
}

.iti{
    display: block !important ;
}

.brand_logo_reg{ height: auto;}
@media (min-width: 1401px) and (max-width: 1700px){
    .brand_logo_reg {
        height: auto;
        width: 180px;
    }
}

.footerpowered{
    position: absolute; bottom: 1rem;
}
@media(max-height:860px) {
    .footerpowered{
        position: relative; bottom: inherit; padding-top: 1rem; padding-bottom: 1rem;
    }
}

/* _______23-02-2024 (FBI New Css)___________ */
.fb-otp-submit, .fb-continuebutton{background-color: #7C0A02 !important; border-color: #7C0A02 !important;}
.fb-otp-submit:hover, .fb-continuebutton:hover{background-color: #000 !important; border-color: #000 !important;}
#retry{color: #000 !important;}

.swal-button{background-color: var(--VS-context) !important;}
.swal-button:focus{box-shadow: 0 0 0 0.25rem rgba(190, 31, 46, .25) !important;}
.swal-button:hover{background-color: var(--VS-secondary-color) !important;}
.swal-button--cancel{background-color: var(--VS-primary-color) !important; color: var(--VS-white) !important;}
.swal-button--cancel:hover{background-color: var(--VS-secondary-color) !important; color: var(--VS-white) !important;}
.swal-button--cancel:focus{box-shadow: 0 0 0 0.25rem rgba(255, 255, 255, .5) !important;}

/* For Mobile Portrait View */
@media screen and (max-device-width: 480px)
    and (orientation: portrait) {
        .thank-you-subText{font-size: 3.5vw;}
        .bannerbtn{font-size: 1rem;}
        .parsley-errors-list li{text-wrap:nowrap;}
        #mobile:focus{box-shadow: none !important;}
        .forgot-password{margin-top: 20px !important;}
}

/* For Mobile Landscape View */
@media screen and (max-device-width: 640px)
    and (orientation: landscape) {
        .thank-you-subText{font-size: 3.5vw;}
        .bannerbtn{font-size: 1rem;}
        .parsley-errors-list li{text-wrap:nowrap;}
        #mobile:focus{box-shadow: none !important;}
        .forgot-password{margin-top: 20px !important;}
}

/* For Mobile Phones Portrait or Landscape View */
@media screen
    and (max-device-width: 640px) {
        .thank-you-subText{font-size: 3.5vw;}
        .bannerbtn{font-size: 1rem;}
        .parsley-errors-list li{text-wrap:nowrap;}
        #mobile:focus{box-shadow: none !important;}
        .forgot-password{margin-top: 20px !important;}
}

/* For iPhone 4 Portrait or Landscape View */
@media screen and (min-device-width: 320px)
    and (-webkit-min-device-pixel-ratio: 2) {
        .thank-you-subText{font-size: 3.5vw;}
        .bannerbtn{font-size: 1rem;}
        .parsley-errors-list li{text-wrap:nowrap;}
        #mobile:focus{box-shadow: none !important;}
        .forgot-password{margin-top: 20px !important;}
}

/* For iPhone 5 Portrait or Landscape View */
@media (device-height: 568px)
    and (device-width: 320px)
    and (-webkit-min-device-pixel-ratio: 2) {
        .thank-you-subText{font-size: 3.5vw;}
        .bannerbtn{font-size: 1rem;}
        .parsley-errors-list li{text-wrap:nowrap;}
        #mobile:focus{box-shadow: none !important;}
        .forgot-password{margin-top: 20px !important;}
    }

/* For iPhone 6 and 6 plus Portrait or Landscape View */
@media (min-device-height: 667px)
    and (min-device-width: 375px)
    and (-webkit-min-device-pixel-ratio: 3) {
        .thank-you-subText{font-size: 3.5vw;}
        .bannerbtn{font-size: 1rem;}
        .parsley-errors-list li{text-wrap:nowrap;}
        #mobile:focus{box-shadow: none !important;}
        .forgot-password{margin-top: 20px !important;}
}

/* {Whatsaap Template Css} */

span#captchaError>ul{
    position:relative !important;
    bottom : 0 !important;
    margin : 0 !important
}

.btn.btn-primary,.btn.btn-dark{background-color: var(--VS-secondary-color) !important; color: var(--VS-white) !important; border-color: var(--VS-secondary-color) !important;}
.btn:hover.btn-primary,.btn:hover.btn-dark{background-color: var(--VS-context) !important; color: var(--VS-white) !important; border-color: var(--VS-context) !important;}