/*Site fonts*/
@font-face {
    font-family: 'BryantProRegular';
    src: url('../fonts/BryantPro-Medium.otf'); /* IE9 Compat Modes */
    font-weight: 500;
}

@font-face {
    font-family: 'BryantProRegular';
    src: url('../fonts/BryantPro-Bold.otf'); /* IE9 Compat Modes */
    font-weight: 700;
}

@font-face {
    font-family: 'BryantProRegular';
    src: url('../fonts/BryantPro-Light.otf'); /* IE9 Compat Modes */
    font-weight: 100;
}

@font-face {
    font-family: 'BryantProRegular';
    src: url('../fonts/BryantPro-Regular.otf'); /* IE9 Compat Modes */
    font-weight: 400;
}

* {
    box-sizing: border-box;
}

::-webkit-scrollbar {
    width: 5px;
    border-radius: 25px;
}

.checkbox-container-content::-webkit-scrollbar, .user-account-left::-webkit-scrollbar, .appointment-product::-webkit-scrollbar, .user-document-list-content::-webkit-scrollbar, .notification-right-message-body::-webkit-scrollbar, .notification-left-side::-webkit-scrollbar {
    width: 4px;
}

/* Track */
::-webkit-scrollbar-track {
    background: #F0F0F0;
    border-radius: 25px;
}

/* Handle */
::-webkit-scrollbar-thumb {
    border-radius: 25px;
    background: #989898;
}

/* Handle */
.checkbox-container-content::-webkit-scrollbar-thumb, .appointment-product::-webkit-scrollbar-thumb, .user-document-list-content::-webkit-scrollbar-thumb, .notification-right-message-body::-webkit-scrollbar-thumb, .notification-left-side::-webkit-scrollbar-thumb {
    border-radius: 25px;
    background: #D4D4D4;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    border-radius: 25px;
    background: #989;
}

input[type='date'].form-control::-webkit-datetime-edit {
    color: #D4D4D4;
    text-transform: uppercase;
}

.text-center {
    text-align: center;
}

.font-weight-bold {
    font-weight: bold !important;
}

.text-decoration-underline {
    text-decoration: underline !important;
}

.d-flex {
    display: flex;
}

.justify-content-between {
    justify-content: space-between;
}

.align-self-center {
    align-self: center;
}

.text-align-right {
    text-align: right;
}

.overflow-hidden {
    overflow: hidden !important;
}

body {
    font-family: "BryantProRegular", sans-serif;
    margin: 0;
    font-weight: 500;
}

.container {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
}

.container-large {
    width: 100%;
    max-width: 1700px;
    margin: 0 auto;
}

label.error-message.optional {
    opacity: 0;
}

meter {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0 auto 1em;
    width: 100%;
    height: .5em;
    display: none;
}

label.error-message {
    opacity: 0;
    margin-bottom: 0 !important;
    color: red !important;
    margin-top: 8px !important;
    width: 100%;
}

label.datepicker-error.error-message {
    padding-top: 4px;
    display: inline-block;
    margin-left: 18px;
}

label.error-message:before {
    content: "* ";
}

label.warning-message {
    color: #FFAA00 !important;
    margin-top: 8px !important;
    margin-bottom: 0 !important;
}

    label.warning-message:before {
        content: "*";
    }

label.success-message {
    color: #A9CA28 !important;
    margin-top: 8px !important;
    margin-bottom: 0 !important;
}

    label.success-message:before {
        content: "*";
    }

/*Tooltip Code Start*/
button#first-submit + span.form-fill-message, button#second-submit + span.form-fill-message, button#third-submit + span.form-fill-message {
    background: #D6F1E3;
    border-radius: 8px;
    display: none;
    font-size: 12px;
    line-height: 16px;
    color: #3B3B3B;
    padding: 10px;
    position: absolute;
    top: -70px;
    right: 10px;
    width: 260px;
    text-align: left;
    border: 1px solid #94D9C1;
    box-shadow: 0 4px 8px rgba(44, 60, 47, 0.2);
}

a.form-fill-message-close-btn {
    position: absolute;
    top: -18px;
    right: -18px;
    background: #3FBC7F;
    color: #fff;
    border-radius: 50%;
    font-size: 24px;
    width: 30px;
    text-decoration: none;
    height: 30px;
    text-align: center;
    line-height: 30px;
    font-weight: normal;
}

button#first-submit + span.form-fill-message:after, button#second-submit + span.form-fill-message:after, button#third-submit + span.form-fill-message:after {
    position: absolute;
    content: "";
    right: 81px;
    bottom: -15px;
    border-style: solid;
    border-width: 15px 15px 0 15px;
    border-color: #D6F1E3 transparent transparent transparent;
}

button#first-submit + span.form-fill-message:before, button#second-submit + span.form-fill-message:before, button#third-submit + span.form-fill-message:before {
    content: "";
    position: absolute;
    right: 80px;
    bottom: -17px;
    border-style: solid;
    border-width: 16px 16px 0 16px;
    border-color: #94D9C1 transparent transparent transparent;
}

/* Tooltip Code End */

/*Accordion Code Start*/
.accordion {
    background: #fff;
    color: #4F4F4F;
    position: relative;
    border: 1px solid #F0F0F0;
    border-left: 4px solid #fff;
    border-right: 0;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    text-align: left;
    outline: none;
    font-family: "BryantProRegular", sans-serif;
    transition: 0.4s;
    font-weight: 700;
    font-size: 16px;
    line-height: 20px;
}

    .accordion.active, .accordion:hover {
        background: #E9F7F3;
        border-left: 4px solid #00A651;
        color: #00A651;
    }

.panel .active {
    color: #3FBC7F !important;
}

.panel.active {
    max-height: initial;
}

.accordion:after {
    content: '';
    background: url(../images/chevron_down-icon.svg) no-repeat right 0 center/20px 14px;
    position: absolute;
    right: 16px;
    top: 0;
    bottom: 0;
    margin: auto;
    height: 22px;
    width: 22px;
}

.accordion.active:after {
    background: url(../images/chevron_up-icon.svg) no-repeat right 0 center/20px 14px;
}

.panel {
    padding: 0 18px;
    background-color: white;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
}

/*Accordion Code End*/
/*FILE UPLOAD CONTROLLER START*/
.file-upload1, .file-upload2 {
    background-color: #ffffff;
    width: 100%;
    margin: 0 auto;
    height: 360px;
}

.file-upload-content1, .file-upload-content2 {
    display: none;
    text-align: center;
    height: 330px;
    width: 100%;
    background: #fff;
}

.file-upload-input1, .file-upload-input2 {
    position: absolute;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    outline: none;
    opacity: 0;
    cursor: pointer;
}

.image-upload-wrap1, .image-upload-wrap2 {
    border: 1px dashed #989898;
    box-sizing: border-box;
    border-radius: 2px;
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.image-title-wrap1, .image-title-wrap2 {
    padding: 8px 16px 0;
    font-weight: 500;
    font-size: 16px;
    line-height: 20px;
    display: flex;
    color: #989898;
    justify-content: space-between;
    align-items: center;
    background: #fff;
}

.drag-text1, .drag-text2 {
    text-align: center;
}

    .drag-text1 h3, .drag-text2 h3 {
        padding: 20px 0;
        font-weight: bold;
        font-size: 16px;
        line-height: 16px;
        text-align: center;
        letter-spacing: 0.0357143em;
        color: #00A651;
    }

.file-upload-image1, .file-upload-image2 {
    height: 100%;
    width: auto;
    margin: auto;
}

.file-upload-p {
    font-weight: 500;
    font-size: 16px;
    line-height: 20px;
    text-align: center;
    color: #989898;
}

span.image-title1, span.image-title2 {
    width: 55%;
    height: 22px;
    overflow: hidden;
}

span.rotate-left-icon1, span.rotate-right-icon1, span.remove-icon1, span.rotate-left-icon2, span.rotate-right-icon2, span.remove-icon2 {
    width: 10%;
    cursor: pointer;
}

span.rotate-text {
    width: 15%;
}

.image-load-time {
    display: none;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
}

span.progress-bar {
    width: 50%;
    background: #E9F7F3;
    border-radius: 12px;
    height: 8px;
    z-index: 0;
    position: relative;
}

.image-load-time span.image-title1 {
    width: 40%;
    font-weight: 500;
    font-size: 16px;
    line-height: 20px;
    color: #989898;
}

span.progress-bar:after {
    background: #3FBC7F;
    border-radius: 12px;
    width: 35%;
    height: 8px;
    z-index: 1;
    content: '';
    position: absolute;
}

.image-load-time .fa-times {
    font-weight: 500;
    font-size: 16px;
    line-height: 20px;
    color: #989898;
}

/*FILE UPLOAD CONTROLLER END*/
/* Style the tab */
.tab-menu {
    position: relative;
}

.tab {
    overflow: hidden;
    display: flex;
    align-items: flex-end;
}

    /* Style the buttons that are used to open the tab content */
    .tab button {
        font-weight: 500;
        font-size: 14px;
        line-height: 20px;
        color: #989898;
        border: none;
        outline: none;
        cursor: pointer;
        padding: 4px 8px;
        transition: 0.3s;
        border-bottom: 2px solid #D4D4D4;
        margin-bottom: 8px;
        background: transparent;
        font-family: "BryantProRegular", sans-serif;
        margin-left: 2px;
        margin-right: 2px;
    }

        /* Change background color of buttons on hover */
        .tab button:hover {
            background-color: #dddddd4f;
            border-color: #3FBC7F;
        }

        /* Create an active/current tablink class */
        .tab button.active {
            border-color: #3FBC7F;
            color: #4F4F4F;
        }

/* Style the tab content */
.tabcontent {
    display: none;
}

.tabcontent {
    animation: fadeEffect 1s; /* Fading effect takes 1 second */
}

/* Go from zero to full opacity */
@keyframes fadeEffect {
    from {
        position: absolute;
        top: 1000%;
    }

    50% {
        top: 0;
    }

    to {
        position: unset;
    }
}


/*Modal code start*/
.modal {
    display: none;
    position: fixed;
    padding-top: 60px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0, 0, 0);
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 99;
}

.modal-content {
    margin: 0 auto 140px;
    position: relative;
    background-color: #fefefe;
    border: 1px solid #F0F0F0;
    width: 95%;
    max-width: 500px;
    -webkit-animation-name: animatetop;
    -webkit-animation-duration: 0.4s;
    animation-name: animatetop;
    animation-duration: 0.4s;
    box-shadow: 0 8px 8px rgba(44, 60, 47, 0.1);
    border-radius: 24px;
}

@-webkit-keyframes animatetop {
    from {
        top: -300px;
        opacity: 0
    }

    to {
        top: 0;
        opacity: 1
    }
}

@keyframes animatetop {
    from {
        top: -300px;
        opacity: 0
    }

    to {
        top: 0;
        opacity: 1
    }
}

.close, .make-appointment-close-btn {
    padding: 0;
    margin-left: 20px;
    background-color: transparent;
    border: 0;
    font-size: 32px;
    outline: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

    .close:hover,
    .close:focus {
        color: #000;
        text-decoration: none;
        cursor: pointer;
    }

.modal-header {
    padding: 8px 22px 1rem 2rem;
    color: white;
    display: flex;
    text-align: right;
    flex-direction: column;
    align-items: flex-end;
}

.modal-body {
    padding: 1rem 2rem;
}

    .modal-body p {
        margin: 24px 0 0;
        font-weight: 500;
        font-size: 16px;
        line-height: 20px;
        color: #4F4F4F;
    }

.form-success-image img {
    width: 140px;
    height: auto;
}

.modal-footer {
    padding: 1rem 2rem;
    color: white;
    border-top: 1px solid #D4D4D4;
    text-align: center;
}

.modal-title {
    font-weight: 700;
    font-size: 22px;
    line-height: 24px;
    color: #4F4F4F;
    margin-bottom: 0;
}

.modal-footer .checkbox-button {
    padding-bottom: 40px;
}

.modal-lg {
    max-width: 700px !important;
}

.modal-x-lg {
    max-width: 1000px !important;
}

.modal-body p:last-child {
    margin-bottom: 24px;
}

.modal-body a {
    margin-bottom: 24px;
    display: inline-block;
}

.modal-link {
    text-decoration: underline;
    font-weight: bold;
    color: #4f4f4f;
}

.modal-v-center .modal-content {
    margin: auto;
    max-width: 610px;
}

.modal-v-center {
    padding: 40px;
}

    .modal-v-center .modal-footer {
        padding: 16px 0 32px;
        border: 0;
    }

.modal-content.modal-sm {
    max-width: 522px;
    margin: auto;
}

/*Modal code end*/

/*Login Page*/
.deactive span.progressbar-line-text {
    color: #989898;
}

.deactive span.progressbar-line-numbers {
    background: #d4d4d4;
}

.navigation-btn {
    display: none;
}

.header-wrapper {
    background: #00A651;
    box-shadow: 0 4px 8px rgba(44, 60, 47, 0.2);
}

header.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 74px;
}

.unordered-list {
    display: flex;
    align-items: center;
}

ul.navigation-menu {
    display: flex;
    margin: 0;
    list-style: none;
}

a.account-cancel-modal-link {
    font-weight: bold;
    font-size: 16px;
    line-height: 16px;
    text-align: center;
    letter-spacing: 0.0357143em;
    color: #00A651;
    text-decoration: none;
    margin: 24px;
    display: inline-block;
}

a.register-btn {
    border: 1px solid #FFFFFF;
    box-sizing: border-box;
    border-radius: 50px;
    font-size: 16px;
    line-height: 16px;
    font-weight: 500;
    text-align: center;
    letter-spacing: 0.0357143em;
    color: #FFFFFF;
    text-decoration: none;
    padding: 10px 30px;
    transition: all 0.4s;
}

    a.register-btn:hover {
        background: #007D39;
        border-color: #007D39;
    }

.btn {
    border-radius: 50px;
    font-size: 16px;
    padding: 12px 52px;
    cursor: pointer;
    font-weight: 500;
    line-height: 16px;
    text-align: center;
    letter-spacing: 0.0357143em;
    color: #FFFFFF;
    transform: rotate(-0.11deg);
    text-decoration: none;
    outline: 0;
    font-family: "BryantProRegular", sans-serif;
    border: 0;
    transition: all 0.25s linear;
}

.btn-rounded-disable {
    border: 1px solid #989898;
    background: transparent;
    color: #989898;
}

.login-form-bg {
    background-image: url(../images/login-page-bg.svg);
    background-repeat: no-repeat;
    background-position: right bottom;
}

.login-page-content {
    display: flex;
    justify-content: space-between;
    height: 90vh;
}

.login-page-left-content {
    width: 48%;
}

.login-page-right-content {
    width: 48%;
    display: flex;
    align-items: center;
}

h1.login-page-left-title {
    font-size: 48px;
    line-height: 46px;
    color: #3B3B3B;
    font-weight: 500;
}

p.login-page-left-description {
    font-size: 16px;
    line-height: 20px;
    font-weight: 500;
    color: #3B3B3B;
}

.login-page-login-form {
    background: #FFFFFF;
    border: 1px solid #F0F0F0;
    box-sizing: border-box;
    box-shadow: 0 8px 8px rgba(44, 60, 47, 0.1);
    border-radius: 24px;
    width: 480px;
    padding: 64px 80px;
}

p.form-title {
    font-weight: 700;
    font-size: 22px;
    line-height: 24px;
    text-align: center;
    color: #4F4F4F;
    margin: 0 0 40px;
}

.btn-disable {
    background: #989898;
}

a.nav-link {
    margin-left: 20px;
    font-weight: 500;
    font-size: 16px;
    line-height: 32px;
    color: #FFFFFF;
    text-decoration: none;
}

.form-group {
    padding: 0 8px;
    margin-bottom: 24px;
    position: relative;
    /*display: flex;*/
    flex-direction: column;
    /*justify-content: flex-end;*/
}

    .form-group label {
        font-size: 16px;
        line-height: 20px;
        margin: 0 0 8px 18px;
        color: #4F4F4F;
        font-weight: 500;
        display: inline-block;
    }

.checkbox-data .form-group label {
    font-weight: 700;
}

input[type='text'].form-control, input[type='password'].form-control, input[type='date'].form-control, input[type='email'].form-control, textarea, select, input[type="search"] {
    background-color: #FFFFFF;
    border: 1px solid #D4D4D4;
    border-radius: 50px;
    font-size: 16px;
    line-height: 20px;
    color: #D4D4D4;
    font-weight: 500;
    width: 100%;
    padding: 10px 40px 10px 18px;
    transition: 0.2s linear;
    letter-spacing: 0.8px;
    outline: 0;
    font-family: "BryantProRegular", sans-serif;
}

input[type='date'].form-control, input[type='text'].date-control {
    padding-right: 0;
    background: url(../images/calender-dark.svg) no-repeat right 14px center/19px;
    filter: invert(1);
    border-color: #2b2b2b;
    height: 42px;
}

    input[type='text'].date-control:disabled {
        filter: invert(0);
        border-color: #D4D4D4;
    }

    input[type='text'].date-control:valid {
        filter: invert(0);
        border-color: #D4D4D4;
    }

    input[type='date'].form-control:disabled {
        filter: unset;
        border: 1px solid #D4D4D4 !important;
    }

    input[type='date'].form-control:focus {
        border-color: #c4c4c4 !important;
    }

input[type="date"]::-webkit-calendar-picker-indicator {
    background: url(../images/calender-dark.svg) no-repeat right 14px center/19px;
}

input[type="search"] {
    border: 1px solid #F0F0F0;
    box-shadow: 0 4px 8px #2c3c2f1a;
    border-radius: 26px;
    font-size: 18px;
    line-height: 22px;
    padding-left: 40px;
    padding-right: 16px;
    background: url(../images/search-icon.svg) no-repeat left 0.6rem center/24px 32px #fff;
}

    input[type="search"]::-webkit-search-cancel-button {
        appearance: none;
        background-image: url(images/modal-close-icon.svg);
        height: 16px;
        width: 16px;
        background-size: 100%;
        background-position: cover;
        background-repeat: no-repeat;
        cursor: pointer;
    }

textarea {
    letter-spacing: -0.4px;
}

input.password-field, input.password-field-directory {
    transition: unset !important;
}

input[type='text'].form-control:valid, input[type=date]:valid::-webkit-datetime-edit, input[type='password'].form-control:valid, input[type='email'].form-control:valid, textarea {
    color: #4F4F4F;
}

    input[type='text'].form-control:disabled, select:disabled, input[type='password'].form-control:disabled, input[type='email'].form-control:disabled, input[type='radio'].form-control:disabled, textarea:disabled, input[type='date'].form-control:disabled {
        background-color: #F0F0F0;
        color: #D4D4D4;
    }

input[type='password'].form-control:valid {
    padding: 4px 40px 4px 20px;
    letter-spacing: 1px;
    font-size: 28px;
}

span.forgot-username img {
    margin-left: 4px;
}

span.forgot-username {
    margin: 4px 18px 0 0;
    color: #4F4F4F;
    display: flex;
    align-items: center;
    font-weight: 700;
    font-size: 12px;
    justify-content: flex-end;
}

.page-link-parent {
    text-align: center;
    margin: 30px 0 35px;
}

a.page-link, label.page-link {
    line-height: 16px;
    text-align: center;
    letter-spacing: 0.0357143em;
    color: #00A654;
    text-decoration: none;
    font-weight: 500;
}

    a.page-link:hover {
        color: #007D39;
    }

.form-button {
    text-align: center;
}

p.register-link-content {
    font-size: 16px;
    line-height: 20px;
    color: #4F4F4F;
    text-align: center;
    margin: 40px 0 0;
    font-weight: 500;
}

input.form-control:focus, textarea:focus, select:focus {
    outline: 0;
    border: 1px solid #3B3B3B;
    color: #4F4F4F;
}

.append-icon, .append-icon-directory {
    position: absolute;
    top: 30px;
    right: 24px;
    cursor: pointer;
    padding: 6px 2px;
}

.terms-and-condition label {
    color: #D4D4D4;
}

button#third-submit, button#first-submit, button#second-submit, .user-info-form-submit-button, .faq-dislike-submit-button {
    width: 240px;
    padding-left: 16px;
    padding-right: 16px;
    text-align: center;
    max-width: 100%;
}

.append-icon img, .append-icon-directory img {
    height: 24px;
    width: 24px;
}

.login-page-right-side-content .login-page-login-form {
    width: 580px;
}

.forgot-username-parent {
    text-align: right;
}

    .forgot-username-parent span.forgot-username {
        display: inline-flex;
    }

.login-page-form-bg .login-page-content {
    height: 103vh;
}

/*.login-form-bg .login-page-content {
    margin: 50px 10px;
    height: auto;
}*/

/*Create new for Company*/
.register-page-wrapper {
    background-image: url(../images/register1-page-bg.svg);
    background-repeat: no-repeat;
    background-position: left 200px;
    padding-bottom: 80px;
}

span.prev-button a.prev-button-icon {
    position: relative;
    top: 0;
    font-size: 16px;
    line-height: 20px;
    color: #00A651;
    display: flex;
    align-items: center;
    width: 60px;
    justify-content: space-between;
    margin: 24px 0 8px 0px;
    text-decoration: none;
    font-weight: 500;
}

    span.prev-button a.prev-button-icon i, a.prev-button-icon i {
        margin-right: 8px;
    }

    span.prev-button a.prev-button-icon:hover {
        color: #007D39 !important;
    }

    span.prev-button a.prev-button-icon.disabled {
        color: #989898 !important;
    }

h2.new-account-organization-title {
    margin: 0 auto;
    font-weight: bold;
    font-size: 26px;
    line-height: 30px;
    text-align: center;
    color: #4F4F4F;
    width: 40%;
}

.new-account-organization-heading {
    padding: 40px 0 20px;
    position: relative;
}

.progressbar-line {
    width: 46%;
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
    padding: 0 0 8px;
    position: relative;
}

span.progressbar-line-numbers {
    display: flex;
    align-items: center;
    text-align: center;
    justify-content: center;
    font-weight: 500;
    color: #FFFFFF;
    background-color: #6ACBA0;
    width: 30px;
    height: 30px;
    margin-bottom: 8px;
    margin-right: 10px;
    border-radius: 50%;
}

span.progressbar-line-text {
    margin-bottom: 8px;
    color: #4F4F4F;
    font-weight: 500;
}

.progressbar-line-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: row;
}

.progressbar-line:before {
    content: '';
    border: 4px solid transparent;
    border-radius: 20px;
    position: absolute;
    background-color: #f0f0f0;
    width: 100%;
    bottom: -10px;
    left: 0;
}

.progressbar-line:after {
    content: '';
    position: absolute;
    bottom: -10px;
    border: 4px solid transparent;
    width: 4%;
    background-color: #6acba0;
    left: 0;
    border-radius: 20px;
}

.registration-form {
    background: #FFFFFF;
    border: 1px solid #F0F0F0;
    box-shadow: 0 4px 8px rgba(44, 60, 47, 0.2);
    border-radius: 30px;
    width: 100%;
    max-width: 826px;
    margin: 40px auto 0;
    padding: 32px 60px 60px;
}

.registration-form-heading {
    display: flex;
    align-items: center;
    margin: 0 0 32px 26px;
}

h1.registration-form-heading-title {
    margin: 0;
    font-size: 26px;
    line-height: 30px;
    color: #4F4F4F;
    font-weight: 700;
}

span.registration-form-heading-image {
    margin-right: 20px;
    display: flex;
}

p.registration-form-content {
    font-size: 16px;
    line-height: 24px;
    color: #7B7B7B;
    margin-bottom: 24px;
    margin-left: 26px;
    font-weight: 500;
}

.registration-form-title {
    font-weight: bold;
    font-size: 22px;
    line-height: 24px;
    color: #4F4F4F;
    margin: 0 0 40px 26px;
}

input[type="radio"] + label, input[type="checkbox"] + label {
    cursor: pointer;
}

.dark-radio-btn input[type="radio"], .radio-button input[type="radio"], .checkbox-button input[type="checkbox"] {
    opacity: 0;
}

    .dark-radio-btn input[type="radio"] + label:after, .radio-button input[type="radio"] + label:after {
        content: "";
        position: absolute;
        border: 1px solid #d4d4d4;
        left: 10px;
        top: -2px;
        border-radius: 50%;
        width: 22px;
        height: 22px;
        transform: scale(1);
        transition: transform 8s cubic-bezier(0.8, -0.33, 0.2, 1.33), -webkit-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
    }

    .dark-radio-btn input[type="radio"] + label:before, .radio-button input[type="radio"] + label:before {
        content: "";
        position: absolute;
        background-color: #fff;
        border-radius: 50%;
        left: 10px;
        top: -2px;
        border: 1px solid transparent;
        height: 12px;
        width: 12px;
        transform: scale(0);
        margin: 5px;
        transition: transform 8s cubic-bezier(0.8, -0.33, 0.2, 1.33), -webkit-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
    }

    .dark-radio-btn input[type="radio"]:checked + label:after, .radio-button input[type="radio"]:checked + label:after {
        border-color: #00a651;
    }

.radio-button {
    margin: 8px 16px 8px 0;
    display: block;
}

    .dark-radio-btn input[type="radio"]:checked + label:before, .radio-button input[type="radio"]:checked + label:before {
        background-color: #00a651;
        transform: scale(1);
    }

label.registration-form-label {
    font-size: 16px;
    line-height: 20px;
    color: #4F4F4F;
    font-weight: 500;
    margin-left: 26px;
}

.company-person {
    display: flex;
    align-items: center;
    justify-content: start;
    margin: 10px 0 8px 8px;
}

    .company-person label {
        margin-left: 8px !important;
    }

    .company-person.dark-radio label {
        margin-left: 12px !important;
    }

.tipo-de-identification {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 44px;
}

p.tipo-de-identification-title {
    font-size: 16px;
    line-height: 12px;
    color: #4F4F4F;
    margin: 0 0 12px 26px;
    font-weight: 500;
}

.tipo-de-identification-content {
    width: 48.5%;
}

    .tipo-de-identification-content .radio-button {
        padding: 0 8px;
        margin-left: 12px;
        font-weight: bold;
    }

.tipo-de-identification-ract {
    width: 100%;
    border: 1px solid #D4D4D4;
    border-radius: 8px;
    padding: 1.5em 2em 0;
    margin: 0 8px;
}

.width-33 {
    width: calc(33% - 16px);
}

.width-50 {
    width: 48.5%;
}

.width-100 {
    width: 100%;
}

select {
    appearance: none;
    background: url(~/Content/images/chevron_down-icon.svg) no-repeat right 1.2rem center/16px 8px;
}

.half-element {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

textarea {
    border-radius: 10px;
}

span.chracter-length {
    font-weight: bold;
    font-size: 12px;
    line-height: 16px;
    color: #989898;
    margin-left: 20px;
    margin-top: 8px;
}

img.info-green-label-image {
    width: 20px;
    vertical-align: bottom;
    margin: 0 4px;
}

::placeholder {
    color: #d4d4d4;
}

textarea::placeholder {
    color: #d4d4d4;
    font-family: "BryantProRegular", sans-serif;
    letter-spacing: 0.2px;
}

.form-submit-button {
    margin-top: 8px;
    text-align: right;
    position: relative;
}

span.optional-input, .obligatoria-input {
    font-weight: bold;
    font-size: 14px;
    line-height: 20px;
    color: #989898;
    float: right;
    margin-right: 16px;
    background: #ffffff;
    position: absolute;
    right: 8px;
    top: 0;
}

span.image-upload-obligatoria-input, span.image-upload-optional-input {
    font-weight: bold;
    font-size: 14px;
    line-height: 20px;
    color: #989898;
    float: right;
    margin-left: 16px;
    background: #ffffff;
}

.telephon-icon {
    background: url(../images/call-icon.svg) no-repeat left 1rem center/16px 16px;
    padding-left: 48px !important;
}

    .telephon-icon:focus {
        background: url(../images/call-green-icon.svg) no-repeat left 1rem center/16px 16px !important;
        padding-left: 48px !important;
    }

/*Contact Info*/
form.page-form-2 {
    margin-top: 34px;
}

.form-submit-button-2 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 64px 0 4px;
    position: relative;
}

span.form-prev-button {
    position: relative;
}

img.form-back-image {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}

a.prev-button-icon {
    font-size: 16px;
    line-height: 16px;
    letter-spacing: 0.0357143em;
    color: #4F4F4F;
    margin: 12px 0 10px 16px;
    display: inline-block;
    text-decoration: none;
    font-weight: 700;
}

span.capital-letters-and-numbers {
    font-size: 12px;
    line-height: 16px;
    color: #989898;
    margin: 8px 18px 0;
    display: block;
    font-weight: 700;
}

/* Account Confirmation */
.checkbox-button input[type="checkbox"] + label:after {
    content: "";
    position: absolute;
    border: 1px solid #d4d4d4;
    left: -32px;
    border-radius: 3px;
    top: -2px;
    width: 22px;
    height: 22px;
    transform: scale(1);
    transition: transform 8s cubic-bezier(0.8, -0.33, 0.2, 1.33), -webkit-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
}

.checkbox-button input[type="checkbox"] + label:before {
    content: '';
    background: url(../images/correct-icon.svg) no-repeat right 0 center/20px 14px;
    position: absolute;
    color: #fff;
    background-color: #fff;
    left: -32px;
    top: -2px;
    border-radius: 3px;
    border: 1px solid transparent;
    height: 22px;
    width: 22px;
    transform: scale(0);
    transition: transform 8s cubic-bezier(0.8, -0.33, 0.2, 1.33), -webkit-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
}

.checkbox-button input[type="checkbox"]:checked + label:after {
    border-color: #00a651;
}

.checkbox-button {
    margin: 8px 16px 8px 0;
    display: block;
}

    .checkbox-button input[type="checkbox"]:checked + label:before {
        background-color: #00a651;
        transform: scale(1);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .checkbox-button label {
        position: relative;
    }

.btn-success {
    background: #00A651;
}

    .btn-success:hover {
        background: #007D39;
        color: #fff;
    }

a.terms-condition-modal-link {
    font-weight: 500;
    font-size: 14px;
    line-height: 14px;
    letter-spacing: 0.0357143em;
    color: #4F4F4F;
}

label.terms-condition-modal-label {
    font-size: 14px;
    margin-top: 26px;
    margin-bottom: 4px;
}

.terms-and-condition-modal-body {
    height: 330px;
    overflow: auto;
    margin: 1rem 2rem 0;
    padding: 0;
    border-bottom: 1px solid #D4D4D4;
}

/*Supplier Page Css Start*/
/*Progress bar*/
.groceries-introduction {
    background: #FFFFFF;
    border: 1px solid #F0F0F0;
    box-shadow: 0 4px 8px rgba(44, 60, 47, 0.2);
    border-radius: 30px;
    width: 88%;
    margin: 40px auto 0;
    padding: 44px 60px 60px;
}

.deactive span.progress-tab-text {
    color: #B5B5B5;
}

.deactive span.progress-tab-numbers {
    background: #D4D4D4;
}

.active span.progress-tab-text {
    color: #fff !important;
}

.active span.progress-tab-numbers {
    background: #94D9C1;
}

.completed span.progress-tab-text {
    color: #00A651;
}

.completed span.progress-tab-numbers {
    background: #94D9C1;
}

.progress-tab {
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
    width: 85%;
    position: relative;
    border-radius: 28px;
    background: #F0F0F0;
}

span.progress-tab-numbers {
    display: flex;
    align-items: center;
    text-align: center;
    justify-content: center;
    color: #FFFFFF;
    background-color: #6ACBA0;
    width: 30px;
    height: 30px;
    margin-right: 10px;
    border-radius: 50%;
}

.progress-tab-heading {
    display: flex;
    align-items: center;
    padding: 8px 26px;
    border-radius: 26px;
    z-index: 2;
    font-weight: 500;
}

    .progress-tab-heading:last-child {
        padding-right: 22px !important;
    }

/*Progress bar end*/
/*Index page Start*/
img.noti-image {
    height: 18px;
}

.supplier-registration-button {
    text-align: right;
    position: relative;
    width: 80%;
    margin: 32px auto;
}

.supplier-registration {
    display: flex;
}

h1.product-submit-confirm-title {
    margin: 0 0 -12px 26px;
    font-size: 26px;
    line-height: 30px;
    color: #4F4F4F;
}

p.product-registration-form-content {
    font-size: 16px;
    line-height: 24px;
    color: #7B7B7B;
    margin-bottom: 24px;
}

.user-account-left {
    width: 22%;
    border: 1px solid #F0F0F0;
    background: #fff;
    position: relative;
}

.registration-body-right {
    width: 78%;
    background: #fbfbfb;
}

.logo {
    text-align: center;
    padding: 24px 0 8px;
    margin: 24px 0 8px;
}

.user-detail {
    text-align: center;
    padding: 10px 0;
}

p.user-post {
    font-size: 12px;
    line-height: 16px;
    text-align: center;
    color: #989898;
    font-weight: 500;
    margin: 8px 0;
}

h1.user-name {
    font-weight: bold;
    font-size: 16px;
    line-height: 20px;
    text-align: center;
    color: #4F4F4F;
    margin: 8px 0;
}

.notification-icons {
    display: flex;
    justify-content: center;
    padding: 15px 0 48px;
}

a.notification-link {
    position: relative;
    width: 64px;
    text-decoration: none;
    text-align: center;
    height: 28px;
}

span.notification-count {
    position: absolute;
    top: -12px;
    right: 12px;
    background: #F45F56;
    border: 1px solid #FFFFFF;
    color: #FFFFFF;
    text-decoration: none;
    font-weight: bold;
    font-size: 10px;
    line-height: 20px;
    height: 22px;
    width: 22px;
    border-radius: 50%;
    text-align: center;
}

.panel .page-link {
    margin: 8px 0 8px 54px;
    padding: 8px 0;
    display: block;
    text-align: left;
    font-weight: 500;
    line-height: 20px;
    color: #989898;
}

    .panel .page-link:hover {
        color: #00A651;
    }

h1.form-title {
    font-weight: bold;
    font-size: 32px;
    line-height: 34px;
    color: #4F4F4F;
    margin: 48px 0;
}

p.body-title {
    font-weight: bold;
    font-size: 22px;
    line-height: 24px;
    color: #4F4F4F;
    margin: 16px 0;
}

.register-product-description {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.register-product-description-content {
    width: 48%;
    display: flex;
    justify-content: space-between;
    margin: 16px 0;
}

img.register-product-description-image {
    margin-right: 16px;
}

p.register-product-description-desc {
    font-weight: 500;
    font-size: 16px;
    line-height: 20px;
    color: #4F4F4F;
}

.product {
    background: #FFFFFF;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    width: 29%;
    margin: 16px 20px 40px;
    padding-bottom: 24px;
    position: relative;
}

.product-name-and-link {
    display: flex;
    flex-wrap: wrap;
    padding: 32px 0;
}

img.product-image {
    width: 100%;
    height: 100%;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    object-fit: cover;
}

.product-image-and-title {
    position: relative;
    height: 216px;
}

span.product-title {
    position: absolute;
    top: 0;
    left: 0;
    font-weight: bold;
    font-size: 22px;
    line-height: 24px;
    text-align: center;
    color: #FFFFFF;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.62) 27.33%, rgba(0, 0, 0, 0) 100%);
    padding: 24px 48px;
}

p.product-content {
    font-weight: 500;
    font-size: 16px;
    line-height: 20px;
    color: #4F4F4F;
    margin: 32px 30px 24px;
    height: 64px;
    overflow: hidden;
}

a.product-more-info-link {
    font-weight: 500;
    font-size: 16px;
    line-height: 20px;
    color: #4F4F4F;
    margin: 0 0 28px;
    display: inline-block;
    text-decoration: underline;
}

.btn-outline-green {
    border: 1px solid #00A651;
    color: #00A651;
}

.product-button {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.btn-outline-green:hover {
    background: #007D39;
    color: #fff;
    border-color: #007D39;
}

p.product-review-dates {
    position: absolute;
    bottom: -44px;
    margin: 0;
    font-weight: bold;
    font-size: 14px;
    line-height: 18px;
    height: 36px;
    text-align: center;
    color: #989898;
    width: 100%;
    overflow: hidden;
}

.pending-forms {
    background: #FFFFFF;
    border: 1px solid #F0F0F0;
    box-shadow: 0 4px 8px rgba(44, 60, 47, 0.2);
    border-radius: 8px;
    margin: 10px;
    padding: 8px 20px;
    display: flex;
    align-items: center;
    width: 450px;
}

.pending-form-parent {
    display: flex;
    flex-direction: column;
}

p.pending-forms-title {
    margin: 10px 0;
    font-weight: bold;
    font-size: 16px;
    line-height: 20px;
    color: #4F4F4F;
}

p.pending-forms-desc {
    margin: 10px 0;
    font-weight: 500;
    font-size: 14px;
    line-height: 18px;
    color: #989898;
}

.title-and-desc {
    width: calc(100% - 120px);
}

a.to-complete-btn, a.to-complete-delete-btn {
    display: inline-flex;
    align-items: center;
    margin: 8px 0;
    transition: all 0.2s;
}

.edit-and-remove-pending-form {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    width: 120px;
}

a.to-complete-delete-btn {
    color: #989898;
}

    a.to-complete-btn svg, a.to-complete-delete-btn svg {
        margin-right: 8px;
    }

    a.to-complete-delete-btn:hover {
        color: #F45F56;
    }

        a.to-complete-delete-btn:hover svg path {
            stroke: #F45F56;
        }

span.icon-name {
    background: #E9F7F3;
    border-radius: 35px;
    padding: 5px 10px;
    opacity: 0;
    font-weight: 500;
    font-size: 12px;
    line-height: 16px;
    color: #3FBC7F;
    position: absolute;
    left: -18px;
    transition: all 0.5s linear;
    right: 0;
    width: 100px;
    bottom: -32px;
}

a.notification-link:hover .icon-name {
    opacity: 1;
    transition: all 0.5s linear;
}

span.icon-name:before {
    content: "";
    border-style: solid;
    border-width: 16px 16px 16px 16px;
    border-color: transparent transparent #e9f7f3 transparent;
    position: absolute;
    top: -28px;
    left: 34px;
    right: 0;
    width: 0;
}

p.abarrotes-modal-p {
    font-size: 16px;
    line-height: 20px;
    color: #4F4F4F;
}

div#abarrotes-modal .modal-footer {
    margin-bottom: 42px;
}

p.abarrotes-modal-title {
    font-size: 18px;
    font-weight: bold;
    line-height: 22px;
    color: #3B3B3B;
}

p.abarrotes-modal-main-title {
    font-weight: bold;
    font-size: 22px;
    line-height: 24px;
    text-align: center;
    color: #4F4F4F;
    margin: 0;
}

.momdal-warning-with-icon {
    display: flex;
    align-items: center;
    padding: 10px 16px;
}

img.modal-warning-icon {
    margin-right: 10px;
}

.momdal-warning-with-icon p {
    margin-left: 10px;
}

.groceries-introduction .registration-form-heading {
    flex-direction: column;
    align-items: flex-start;
}

    .groceries-introduction .registration-form-heading p {
        margin-bottom: 0;
        margin-left: 0;
    }

/*Index page End*/
/*Grocery Introduction page Start*/
.progress-tab-parent {
    background: #fff;
    padding: 20px 0;
}

.progress-tab:before {
    width: calc(17% - 10px);
    content: '';
    background: #3FBC7F;
    position: absolute;
    top: 0;
    left: 5px;
    height: 100%;
    border-radius: 28px;
    z-index: 000;
}

.progress-tab:after {
    width: calc(17% - 10px);
    content: '';
    background: #e9f7f3;
    position: absolute;
    top: 0;
    left: 5px;
    height: 100%;
    border-radius: 28px;
    z-index: 1;
}

.progress-tab-heading.completed {
    background: #E9F7F3;
}

.progress-tab-heading.active {
    background: #3FBC7F;
    color: #fff;
    padding-right: 11px;
    padding-left: 7px;
}

/*Grocery Introduction page End*/
/*Grocery Your Product page Start*/
.disable label {
    color: #D4D4D4;
}

.dark-radio-btn {
    margin: 8px 16px 8px 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
}

    .dark-radio-btn input[type="radio"]:not(:checked) + label:after {
        border-color: #d4d4d4;
    }

    .dark-radio-btn input[type="radio"]:not(:checked) + label:before {
        background-color: #d4d4d4;
        transform: scale(1);
    }

.dark-radio {
    display: block;
}

.dark-radio-btn label {
    margin: 0 0 8px 24px;
}

.form-group .product-hierarchy {
    font-weight: 500;
    font-size: 16px;
    line-height: 18px;
    color: #989898;
    margin: 0 0 8px 16px;
}

.width-50.checkbox-button {
    margin: 8px 6px 8px 0;
}

.form-group.text-border-bottom input[type='text'].form-control {
    border: 0;
    border-bottom: 1px solid #4F4F4F;
    border-radius: 0;
    width: auto;
    padding: 4px 10px 4px 10px;
    margin-left: 16px;
}

/*Grocery Your Product page End*/
/*Grocery Details page Start*/
.kilogramos-label {
    font-size: 14px;
    line-height: 20px;
    color: #4F4F4F;
    float: right;
    margin-right: 16px;
    position: absolute;
    top: 38px;
    right: 8px;
}

.form-group .form-control.valor {
    width: 25%;
}

.valor-label {
    font-size: 14px;
    line-height: 20px;
    color: #7B7B7B;
    margin-right: 16px;
    position: absolute;
    top: 40px;
    left: 18.5%;
}

.meter-label {
    font-weight: 500;
    font-size: 16px;
    line-height: 20px;
    color: #4F4F4F;
    margin-right: 16px;
    position: absolute;
    top: 12px;
    right: 8px;
}

.width-60 {
    width: 60%;
}

/*Grocery Details page End*/
/*Grocery Specification page Start*/
.price-label {
    position: absolute;
    top: 43px;
    left: 20px;
    font-weight: 500;
    font-size: 16px;
    line-height: 13px;
    color: #D4D4D4;
}

.price {
    padding-left: 58px !important;
    padding-right: 16px !important;
}

.checkbox-container-hading {
    display: flex;
    justify-content: space-between;
    background: #F0F0F0;
    border-radius: 8px 8px 0 0;
    padding: 0 45px;
}

.multiple-checkbox-container {
    margin: 16px 16px;
    border: 1px solid #C4C4C4;
    border-radius: 8px;
}

p.left-title-name, p.right-title-name {
    font-weight: bold;
    font-size: 16px;
    line-height: 20px;
    margin: 16px 0 10px;
    color: #4F4F4F;
}

p.left-title-specification, p.right-title-specification {
    font-weight: bold;
    font-size: 14px;
    line-height: 18px;
    color: #989898;
    margin: 10px 0 16px;
}

.checkbox-container-left-title {
    width: 69%;
}

.checkbox-container-right-title {
    width: 29%;
}

.checkbox-container-content {
    padding: 0 45px;
    height: 100%;
    max-height: 430px;
    overflow: auto;
    width: 100%;
}

.checkbox-data:last-child {
    border: 0;
}

.checkbox-data {
    border-bottom: 1px solid #D4D4D4;
    display: flex;
    justify-content: space-between;
    padding: 20px 0;
    flex-wrap: wrap;
}

.checkbox-data-left {
    width: 69%;
    font-weight: bold;
    margin: 0;
}

.checkbox-data-right {
    width: 29%;
    margin: 0;
    justify-content: flex-start;
}

    .checkbox-data-right .form-control {
        width: 100px !important;
        margin: 0 auto;
        padding-right: 24px !important;
        font-size: 14px !important;
    }

.percentage-icon {
    font-weight: 500;
    font-size: 16px;
    line-height: 20px;
    color: #D4D4D4;
    position: absolute;
    top: 12px;
    right: 29%;
}

.change-purchase-description span.percentage-icon {
    right: 33%;
}

p.checkbox-specification {
    font-size: 12px;
    line-height: 16px;
    color: #7B7B7B;
    margin: 0 0 0 40px;
    font-weight: 700;
}

p.important-message-content {
    font-weight: bold;
    font-size: 16px;
    line-height: 20px;
    text-align: right;
    color: #7B7B7B;
    margin: 0 16px 16px;
}

.triangle-icon-warning {
    border: 1px solid #F0F0F0;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    padding: 16px 32px;
    display: flex;
    align-items: center;
    margin: 16px 16px 0;
    font-weight: bold;
    font-size: 14px;
    line-height: 18px;
    color: #989898;
}

img.triangle-warning-icon {
    margin-right: 16px;
    width: 28px;
}

/*Grocery Specification page End*/
/*Supplier Page Css End*/

/*Product Page Css Start*/
/*Product Home Page*/
svg.logout-icon {
    margin-left: 8px;
}

.user-logout-btn {
    padding: 16px 0;
    text-align: center;
    /* position: absolute; */
    /* bottom: 16px; */
    width: 100%;
    background: #fff;
}

.accordion-and-logout-parent {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: calc(100% - 290px);
}

.user-logout-btn a {
    display: inline-flex;
    align-items: center;
}

.user-logout-btn .page-link {
    color: #7B7B7B;
    font-weight: 700;
    font-size: 14px;
    line-height: 18px;
    margin: 0 4px;
}

    .user-logout-btn .page-link:hover svg path {
        stroke: #007D39;
    }

.products-parent, .individual-change-parent {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.products, .register-products {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #fff;
    padding: 24px 8px 16px;
    width: 23%;
    margin: 8px;
    border: 1px solid #F0F0F0;
    box-shadow: 0 4px 8px rgba(44, 60, 47, 0.2);
    border-radius: 8px;
    transition: .2s linear;
    position: relative;
}

img.products-image, img.individual-change-image {
    height: 70px;
    width: auto;
}

p.product-title, p.product-type, p.individual-change-title {
    font-weight: bold;
    font-size: 18px;
    line-height: 22px;
    color: #4F4F4F;
}

p.product-creation-date, p.individual-change-desc {
    font-weight: 500;
    font-size: 14px;
    line-height: 18px;
    color: #989898;
    margin: 0 0 12px;
}

.request-change-btn {
    background-color: #FFFFFF;
    border: 1px solid #00A651;
    border-radius: 50px;
    font-weight: 500;
    font-size: 16px;
    line-height: 16px;
    letter-spacing: 0.0357143em;
    color: #00A651;
    text-decoration: none;
    padding: 12px 20px;
    transition: 0.2s linear;
    width: 100%;
    max-width: 252px;
    text-align: center;
}

.product-description-see-more-btn {
    color: #00A651;
    text-decoration: none;
    margin-left: 8px;
}

.change-history-parent .request-change-btn {
    width: 100%;
    max-width: 250px;
    text-align: center;
}

.individual-change a.request-change-btn {
    width: 100%;
    max-width: 200px;
    text-align: center;
}

.request-change-btn:hover {
    background-color: #00A651;
    color: #fff;
}

a.see-product-btn {
    margin-top: 12px;
    font-weight: 700;
}

    a.see-product-btn:hover {
        color: #007D39;
    }

p.product-title, p.individual-change-title {
    margin: 16px 0 8px;
}

p.product-type {
    margin: 8px 0 0;
}

button.massive-changes {
    display: flex;
    align-items: center;
    padding: 8px 20px;
    width: 194px;
    height: 44px;
    justify-content: center;
}

    button.massive-changes.big-width {
        width: 250px;
    }

    button.massive-changes img {
        margin-right: 16px;
    }

.type-of-product-filter {
    width: 450px;
    margin-left: auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
}

    .type-of-product-filter label {
        width: 150px;
        font-weight: 500;
        font-size: 16px;
        line-height: 20px;
        color: #989898;
    }

.nice-select.types-of-product-select {
    width: 195px;
    height: 44px;
}

.type-of-product-filter > div {
    width: auto;
    background: #fff;
    border-radius: 20px;
}

.product-body-right {
    width: 78%;
    background: #fbfbfb;
    padding: 0 48px 32px;
}

h1.product-title {
    font-weight: bold;
    font-size: 32px;
    line-height: 34px;
    color: #4F4F4F;
    margin: 48px 0 0;
}

.filter-code-or-name-changes-report-product {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 16px 0;
    flex-wrap: wrap;
}

.report-product-btn {
    width: 60%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

    .report-product-btn .report-product {
        display: flex;
        align-items: center;
        margin-left: 32px;
    }

        .report-product-btn .report-product img {
            margin-right: 8px;
        }

button.kind-of-family-btn {
    font-weight: bold;
    font-size: 16px;
    line-height: 20px;
    border: 1px solid #989898;
    border-radius: 40px;
    background: #fff;
    color: #989898;
    cursor: pointer;
    padding: 8px 16px;
    outline: 0;
    font-family: "BryantProRegular", sans-serif;
}

.assets-in .form-group input[type="checkbox"] {
    display: none;
}

button.kind-of-family-btn.active {
    background: #00A651;
    color: #fff;
    border: 1px solid #00A651;
}

.kind-of-family-parent {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #FFFFFF;
    border: 1px solid #D4D4D4;
    border-radius: 8px;
    margin: 16px 0;
}

.kind-of-family, .assets-in {
    display: flex;
    align-items: center;
    width: 47%;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 12px 16px;
}

.assets-in {
    width: 45%;
}

.kind-of-family {
    width: 54%;
}

.kind-of-family-child {
    font-weight: 500;
    font-size: 16px;
    line-height: 20px;
    color: #989898;
    margin-right: 4px;
}

img.product-info-icon {
    width: 16px;
    margin-right: 4px;
}

.product-info-icon-parent {
    display: flex;
    position: absolute;
    top: 16px;
    left: 16px;
    background: #D6F1E3;
    border-radius: 20px;
    font-weight: bold;
    font-size: 14px;
    line-height: 18px;
    padding: 4px 6px;
    color: #007D39;
}

.assets-in .form-group {
    margin: 0;
    padding-right: 0;
}

    .assets-in .form-group label {
        margin-bottom: 0;
        width: 100%;
    }

/*Single Product Page*/
.single-product-content {
    padding: 0 45px;
    height: 100%;
    max-height: 616px;
    overflow: auto;
}

h1.single-product-title {
    font-weight: bold;
    font-size: 32px;
    line-height: 34px;
    color: #4F4F4F;
    margin: 50px 0 0;
}

.change-history-parent {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

h2.change-history-title {
    font-weight: bold;
    font-size: 26px;
    line-height: 30px;
    color: #4F4F4F;
}

p.process-state {
    position: relative;
}

    p.process-state.accept:before, p.process-state.error:before, p.process-state.in-process:before {
        content: '';
        border-radius: 100%;
        height: 10px;
        width: 10px;
        display: inline-block;
        position: absolute;
        top: 0;
        bottom: 0;
        margin: auto;
        left: -20px;
    }

    p.process-state.accept:before {
        background: #00A651;
    }

    p.process-state.error:before {
        background: #943032;
    }

    p.process-state.in-process:before {
        background: #FFAA00;
    }

p.request-change-title, p.process-state {
    font-weight: bold;
    font-size: 16px;
    line-height: 20px;
    color: #4F4F4F;
    margin: 6px 0;
}

p.request-change-date {
    color: #989898;
    margin: 6px 0 10px;
}

.change-history-left {
    width: 69%;
}

.change-history-right {
    width: 27%;
}

.product-full-information {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 16px 0;
    border-radius: 20px;
    border: 1px solid #D4D4D4;
    background-color: #FFF;
    padding: 8px 32px 32px 8px;
}

.product-image img {
    width: 100%;
}

.product-image {
    width: 20%;
}

.product-detail-parent {
    color: #4F4F4F;
    width: calc(100% - 180px - 18px);
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.product-detail {
    width: calc(100% - 252px - 16px);
}

.product-list {
    width: 42%;
    color: #4F4F4F;
}

.product-description {
    width: 32%;
    padding: 0 4px;
    color: #4F4F4F;
}

p.no-request-data-message {
    font-weight: bold;
    font-size: 16px;
    line-height: 20px;
    color: #989898;
    width: 100%;
    height: 100%;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-body-right span.prev-button a.prev-button-icon {
    font-weight: 500;
    font-size: 16px;
    line-height: 18px;
    color: #00A651;
}

span.prev-button.change-user-data a.prev-button-icon {
    margin-left: 0;
}

/*Massive Changes page*/
.how-it-work-desc {
    font-weight: 500;
    font-size: 16px;
    line-height: 20px;
    color: #4F4F4F;
}

h5.how-it-work-title {
    color: #4F4F4F;
}

.step-how-it-work, .step-how-product-image-work {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.step-num {
    width: 24%;
}

.step-image {
    position: relative;
}

.step-num .step-image:after {
    content: '';
    position: absolute;
    top: -10px;
    bottom: 0;
    margin: auto;
    border-bottom: 2px dashed #94D9C1;
    width: 100%;
    height: 2px;
}

.step-num:last-child .step-image:after {
    display: none;
}

p.step-content {
    font-weight: 500;
    font-size: 14px;
    line-height: 18px;
    color: #4F4F4F;
}

p.change-request-possibilities-title {
    font-weight: bold;
    font-size: 16px;
    line-height: 20px;
    color: #4F4F4F;
    margin: 4px 0;
}

p.change-request-possibilities-desc {
    font-weight: 500;
    font-size: 14px;
    line-height: 18px;
    color: #4F4F4F;
    margin: 4px 0 8px;
    height: 54px;
    overflow: auto;
}

.product-image-option-section a.page-link img, .product-image-option-section .remove-link a img {
    margin-right: 6px;
}

.product-image-option-section a.page-link, .product-image-option-section .remove-link a {
    display: flex;
    align-items: center;
}

p.archive-link a {
    font-weight: bold;
    font-size: 16px;
    line-height: 20px;
    color: #989898;
    text-decoration: none;
}

/* span.change-request-possibilities-hover-content-desc, span.schedule-appointment-content { */
/* z-index: 999; */
/* font-size: 15px !important; */
/* } */

p.empty-link a {
    font-weight: 500;
    font-size: 14px;
    line-height: 18px;
    text-decoration: none;
    color: #989898;
}

p.empty-link, p.archive-link {
    margin: 4px 0;
}

.change-request-possibilities {
    border-bottom: 1px solid #D4D4D4;
    padding: 24px 0;
}

.change-request-possibilities-heading {
    margin-left: 0;
    margin-bottom: 20px;
    display: flex;
}

/* .change-request-possibilities-hover-content span.info-image { */
/* background-image: url(../images1/info-green-icon.svg); */
/* background-size: contain; */
/* width: 20px; */
/* display: inline-block; */
/* height: 20px; */
/* transition: all 0.2s linear; */
/* } */

/* .change-request-possibilities-hover-content:hover span.info-image { */
/* background-image: url(../images1/info-green-active.svg); */
/* } */

.change-request-possibilities:last-child {
    border: 0;
}

span.change-request-possibilities-hover-content-desc,
span.schedule-appointment-content {
    display: none;
    background: #e9f7f3;
    font-weight: 500;
    font-size: 16px;
    line-height: 20px;
    padding: 10px;
    position: absolute;
    top: 40px;
    left: -120px;
    width: 260px;
    border: 1px solid #94D9C1;
    box-shadow: 0 4px 8px rgba(44, 60, 47, 0.2);
    border-radius: 16px;
}

.change-request-possibilities-hover-content {
    position: relative;
    margin-left: 8px;
}

    .change-request-possibilities-hover-content:hover span.change-request-possibilities-hover-content-desc {
        display: block;
        padding: 20px 20px;
    }

span.change-request-possibilities-hover-content-desc:before,
span.schedule-appointment-content:before {
    position: absolute;
    content: "";
    right: 111px;
    top: -15px;
    border-style: solid;
    border-width: 0 15px 15px 15px;
    border-color: transparent transparent #94D9C1 transparent;
}

span.change-request-possibilities-hover-content-desc:after,
span.schedule-appointment-content:after {
    content: "";
    position: absolute;
    right: 110px;
    top: -13px;
    border-style: solid;
    border-width: 0 16px 16px 16px;
    border-color: transparent transparent #e9f7f3 transparent;
}

.change-request-possibilities-section a {
    display: inline-flex;
    align-items: center;
}

    .change-request-possibilities-section a img {
        margin-right: 8px;
    }

/*Individual Change page*/
.individual-change {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #fff;
    padding: 24px 16px 16px;
    width: 31%;
    margin: 8px 0;
    border: 1px solid #F0F0F0;
    box-shadow: 0 4px 8px rgba(44, 60, 47, 0.1);
    border-radius: 8px;
    position: relative;
}

p.individual-change-desc {
    margin-bottom: 16px;
    margin-top: 8px;
    color: #7b7b7b;
    height: 90px;
    overflow: auto;
}

p.individual-change-title {
    height: 44px;
    overflow: hidden;
}

.individual-change-progressbar {
    margin-top: 48px;
}

p.individual-change-product-content {
    font-weight: 500;
    font-size: 16px;
    line-height: 20px;
    color: #4F4F4F;
}

.individual-change-parent {
    margin-top: 32px;
}

/*Change Purchase Price Page*/
.price-change-table {
    margin: 16px 0;
    border: 1px solid #C4C4C4;
    border-radius: 8px;
}

.change-purchase-price-content {
    padding: 0 45px;
    height: 100%;
    max-height: 430px;
    overflow: auto;
}

.price-change-table-main-title, .change-purchase-detail {
    width: 50%;
}

.change-purchase-price-data:last-child {
    border: 0;
}

.change-purchase-price-data {
    border-bottom: 1px solid #D4D4D4;
    display: flex;
    justify-content: space-between;
    padding: 20px 0;
}

.change-purchase-detail h4 {
    margin: 8px 0;
    font-weight: bold;
    font-size: 16px;
    line-height: 20px;
    color: #4F4F4F;
}

.change-purchase-detail p {
    font-weight: bold;
    font-size: 12px;
    line-height: 16px;
    color: #7B7B7B;
}

.change-purchase-detail .form-group {
    margin-bottom: 4px;
}

    .change-purchase-detail .form-group span.price-label {
        position: absolute;
        top: 0;
        bottom: 0;
        margin: auto;
        height: 20px;
    }

.change-purchase-detail label {
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    margin: 0 0 8px 16px;
    color: #4F4F4F;
    display: inline-block;
}

.price-change-warning-section {
    border: 1px solid #F0F0F0;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    padding: 16px 32px;
    margin: 16px 0 0;
}

.warning-image-part {
    font-weight: bold;
    font-size: 14px;
    line-height: 18px;
    color: #4F4F4F;
    display: flex;
    align-items: center;
    margin: 0 0 16px;
}

.warning-items {
    font-weight: 500;
    font-size: 14px;
    line-height: 18px;
    color: #4F4F4F;
    margin: 4px 0;
}

    .warning-items.nota-warning {
        margin-top: 24px;
    }

p.page-important-message {
    font-weight: bold;
    font-size: 14px;
    line-height: 18px;
    text-align: center;
    color: #7B7B7B;
    margin: 24px 0 0;
}

/*Change Purchase Discount Page*/
.change-purchase-discount-container {
    border: 1px solid #C4C4C4;
    border-radius: 8px;
    margin-bottom: 24px;
}

p.change-purchase-description-title, p.change-purchase-description-desc {
    font-size: 16px;
    line-height: 20px;
    color: #4F4F4F;
}

p.change-purchase-description-desc {
    font-weight: 500;
    margin: 4px 0;
}

.change-purchase-description {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 12px 0;
}

.change-purchase-description-left {
    width: 65%;
}

p.change-purchase-description-title {
    font-weight: bold;
    margin: 4px 0;
}

.checkbox-data .start-date-end-date {
    width: 100%;
    padding: 16px 16px;
}

.start-date-end-date .form-group {
    justify-content: flex-start;
    margin: 0;
}

p.start-date-end-date-input-info {
    font-weight: bold;
    font-size: 12px;
    line-height: 16px;
    color: #989898;
    margin: 8px 0 0 16px;
}

/*Change Discount Different Product Page css*/
.combine-product-table {
    border: 1px solid #C4C4C4;
    border-radius: 8px;
    margin-bottom: 24px;
}

.combine-product-table-hading {
    display: flex;
    justify-content: space-between;
    background: #F0F0F0;
    border-radius: 8px 8px 0 0;
    padding: 0 45px;
    align-items: center;
}

p.combine-product-table-left-title-name {
    font-weight: bold;
    font-size: 16px;
    line-height: 20px;
    margin: 16px 0 10px;
    color: #4F4F4F;
}

p.combine-product-table-right-title-specification {
    font-weight: bold;
    font-size: 14px;
    line-height: 18px;
    color: #989898;
    margin: 10px 0 16px;
}

.combine-product-table-content {
    padding: 0 45px;
    height: 100%;
    max-height: 590px;
    overflow: auto;
}

.combine-product-table-data {
    border-bottom: 1px solid #D4D4D4;
    display: flex;
    justify-content: space-between;
    padding: 20px 0;
}

    .combine-product-table-data:last-child {
        border: 0;
    }

.combine-product-table-data-left {
    width: 4%;
    font-weight: bold;
    margin: 0 0 24px 24px;
    display: flex;
    align-items: center;
}

.combine-product-table-data-image {
    width: 14%;
}

.combine-product-table-data-center {
    width: 78%;
}

.combine-product-table-data-image img.combine-product-table-data-img {
    width: 100%;
    height: auto;
}

.combine-product-table-data-center label {
    font-weight: bold;
    font-size: 16px;
    line-height: 20px;
    color: #4F4F4F;
    display: block;
}

p.combine-product-table-items-desc {
    font-weight: 500;
    font-size: 14px;
    line-height: 18px;
    width: 49%;
    color: #7B7B7B;
    margin: 2px 0;
}

.combine-product-table-data-center-desc {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

/*Product Information Page css*/
.attach-files-main {
    margin: 24px 0;
}

.attach-files-list input[type=file] {
    opacity: 0;
    height: 0;
    outline: 0;
    width: 0;
    border: 0;
}

.attach-files-list label {
    font-weight: 500;
    font-size: 16px;
    line-height: 20px;
    color: #4F4F4F;
}

.attach-file-control label {
    display: inline-flex;
    align-items: center;
}

/*Product Image Page Css*/
.product-image-option {
    position: relative;
    border-top: 1px solid #D4D4D4;
    padding-top: 36px;
    margin-top: 24px;
}

.step-how-product-image-work .step-num {
    width: 32%;
}

.product-image-option-section {
    width: 31%;
}

.product-image-option-content-desc, .product-image-option-desc-content {
    display: flex;
    justify-content: space-between;
}

.product-image-option-main-title {
    font-weight: bold;
    font-size: 22px;
    line-height: 24px;
    color: #4F4F4F;
}

/* .product-change-image-option-main-title { */
/* font-weight: bold; */
/* font-size: 22px; */
/* line-height: 24px; */
/* color: #4F4F4F; */
/* margin-bottom:20px; */
/* } */


p.product-image-option-desc-title {
    font-weight: bold;
    font-size: 16px;
    line-height: 20px;
    color: #4F4F4F;
    margin: 0 0 8px;
}

.form-review-desc, span.form-review-file-upload-title {
    font-size: 16px;
    line-height: 20px;
    color: #4F4F4F;
    margin: 0 0;
}

.product-image-option-description p {
    font-size: 16px;
    line-height: 20px;
    color: #4F4F4F;
    margin: 0;
}

.product-image-option-description:first-child {
    width: 39%;
}

.product-image-option-description:last-child {
    width: 59%;
}

.product-image-option-image-desc {
    border: 1px solid #C4C4C4;
    box-sizing: border-box;
    border-radius: 8px;
    padding: 16px;
    margin: 20px 0;
}

p.empty-link {
    height: 50px;
    margin-bottom: 8px;
}

p.remove-link a {
    font-weight: 500;
    font-size: 16px;
    text-decoration: none;
    line-height: 20px;
    color: #272727;
}

p.remove-link {
    margin: 0;
}

span.product-image-option-optional {
    font-weight: bold;
    font-size: 22px;
    line-height: 42px;
    color: #989898;
    position: absolute;
    top: 24px;
    right: 0;
}

/*Product Page Css End*/

/*Registration Page CSS Start*/
.progress-tab.register-page .progress-tab-heading {
    margin-left: 24px;
}

    .progress-tab.register-page .progress-tab-heading:first-child {
        margin-left: 0;
    }

/*Tracking of Registration Page Css*/
img.site-logo {
    width: 106px;
    height: auto;
}

.registration-products-parent {
    display: flex;
    flex-wrap: wrap;
}

.register-product-child-search {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 260px;
    margin-right: 34px;
}

.register-product-child-radio {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 67%;
    border: 1px solid #D4D4D4;
    border-radius: 8px;
    background-color: #fff;
    padding: 8px 16px;
}

.registered-products-parent {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 16px 0 32px;
}

.register-product-child-radio label {
    margin-bottom: 0;
}

.register-product-child-radio .radio-button {
    margin-right: 0;
    padding: 0 4px 0 0;
}

    .register-product-child-radio .radio-button input[type="radio"] {
        height: 0;
        width: 8px;
    }

p.product-upload-information {
    display: flex;
    align-items: center;
    font-size: 16px;
    line-height: 20px;
    color: #4F4F4F;
    margin: 16px 0 8px;
    font-weight: 500;
}

    p.product-upload-information img {
        margin-right: 8px;
        width: 24px;
    }

.register-products:hover {
    border: 1px solid #6ACBA0;
}

.register-products p.product-title {
    margin: 16px 0 4px;
}

.register-products p.product-creation-date {
    margin: 4px 0;
}

    .register-products p.product-creation-date:nth-child(3) {
        font-weight: 700;
    }

.paginations {
    margin: 32px auto 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .paginations .left-arrow, .paginations .right-arrow {
        background: #D4D4D4;
        color: #fff;
        border-radius: 50%;
        text-decoration: none;
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 4px;
    }

        .paginations .left-arrow.active, .paginations .right-arrow.active {
            background: #00A651;
        }

    .paginations .page-numbers.active {
        border-radius: 5px;
        height: 32px;
        width: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #00a651;
        color: #fff;
    }

    .paginations .page-numbers {
        font-size: 14px;
        text-align: center;
        color: #4F4F4F;
        text-decoration: none;
        margin: 8px;
    }

.notify-icon {
    display: none;
    margin: auto 4px 3px auto;
    background: #3FBC7F;
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

span.notify-icon.active {
    display: inline-block;
}

.ready-for-commercialization-desc, .registration-products-content-not-found {
    margin: 16px;
    display: flex;
    align-items: flex-start;
    font-size: 16px;
    line-height: 20px;
}

.ready-for-commercialization-desc {
    color: #4F4F4F;
}

.registration-products-content-not-found {
    color: #989898;
}

    .ready-for-commercialization-desc img, .registration-products-content-not-found img {
        width: 20px;
        margin-right: 8px;
    }

.schedule-appointment-parent {
    position: relative;
}

/*Tracking of Registration Sorting Family Page Css*/
.sort-by-family-content-title {
    font-weight: bold;
    font-size: 22px;
    line-height: 24px;
    color: #000000;
    border-bottom: 2px solid #D4D4D4;
    padding-bottom: 8px;
    margin: 16px 16px;
}

.no-registration-data-found {
    font-size: 16px;
    line-height: 20px;
    color: #989898;
    margin: 0 16px;
}

span.product-info-icon-parent-specification {
    display: none;
    background: #fff;
    font-weight: bold;
    font-size: 14px;
    line-height: 18px;
    color: #4F4F4F;
    padding: 10px;
    position: absolute;
    top: 48px;
    left: -20px;
    width: 260px;
    border: 1px solid #F0F0F0;
    box-shadow: 0 4px 8px rgba(44, 60, 47, 0.2);
    border-radius: 16px;
}

    span.product-info-icon-parent-specification:before {
        position: absolute;
        content: "";
        left: 31px;
        top: -16px;
        border-style: solid;
        border-width: 0 15px 15px 15px;
        border-color: transparent transparent #F0F0F0 transparent;
    }

    span.product-info-icon-parent-specification:after {
        content: "";
        position: absolute;
        left: 30px;
        top: -13px;
        border-style: solid;
        border-width: 0 16px 16px 16px;
        border-color: transparent transparent #fff transparent;
    }

.product-info-icon-parent:hover span.product-info-icon-parent-specification,
button.schedule-appointment:hover + span.schedule-appointment-content {
    display: block;
    z-index: 1;
}

span.schedule-appointment-content {
    top: 60px;
    left: 0;
}

/*Make Appointment Page CSS*/
.appointment-product {
    background: #FFFFFF;
    border: 1px solid #F0F0F0;
    box-sizing: border-box;
    box-shadow: 0 4px 8px rgba(44, 60, 47, 0.2);
    border-radius: 8px;
    padding: 16px 0;
    height: 620px;
    overflow: auto;
}

.make-appointment-parent {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.make-appointment-child {
    width: 49%;
}

span.title-number {
    background: #94D9C1;
    display: inline-block;
    border-radius: 50%;
    text-align: center;
    padding: 6px;
    width: 20px;
    height: 20px;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    color: #FFFFFF;
    box-sizing: content-box;
    margin-right: 8px;
}

p.make-appointment-title {
    font-weight: bold;
    font-size: 16px;
    line-height: 20px;
    color: #4F4F4F;
    margin: 4px 0 8px;
}

p.make-appointment-contet {
    font-size: 16px;
    line-height: 20px;
    color: #989898;
    margin: 4px 0 8px;
    font-weight: 500;
}

.product-appointment-select-date {
    background: #FFFFFF;
    border: 1px solid #F0F0F0;
    box-shadow: 0 4px 8px rgba(44, 60, 47, 0.2);
    border-radius: 8px;
    height: 620px;
}

.calender-picker {
    width: 440px;
    height: 470px;
    margin: 16px auto;
}

.make-appointment-title-main-parent {
    display: flex;
    justify-content: space-between;
    margin-bottom: 24px;
}

.make-appointment-title-parent {
    width: 90%;
}

img.combine-product-table-data-img {
    width: 100%;
}

.appointment-product-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 16px;
}

.appointment-product-item-checkbox {
    width: 50px;
    text-align: center;
    margin: 0;
}

.appointment-product-item-image {
    width: 80px;
}

.appointment-product-item-title-desc {
    width: calc(100% - 100px - 60px);
}

p.appointment-product-item-title {
    font-weight: 700;
    font-size: 16px;
    line-height: 20px;
    color: #4F4F4F;
    margin: 8px 0;
}

p.appointment-product-item-desc {
    font-weight: 500;
    font-size: 16px;
    line-height: 20px;
    color: #989898;
    margin: 8px 0;
}

/*Scheduled Appointment Page Css*/
.scheduled-appointment {
    background: #FFFFFF;
    border: 1px solid #F0F0F0;
    box-sizing: border-box;
    box-shadow: 0 4px 8px rgba(44, 60, 47, 0.2);
    border-radius: 8px;
    padding: 12px 0;
    width: 48.5%;
    margin-bottom: 24px;
}

.scheduled-appointment-parent {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

/*.scheduled-appointment:hover {
    border: 1px solid #6ACBA0;
}*/

.scheduled-appointment-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 48px 8px 15px;
    position: relative;
}

.scheduled-appointment-image {
    width: 60px;
    margin: 0 8px;
}

    .scheduled-appointment-image img {
        width: 100%;
    }

.scheduled-appointment-title-desc {
    width: calc(100% - 92px);
}

span.scheduled-appointment-edit-btn {
    position: absolute;
    top: 8px;
    right: 18px;
}

span.scheduled-appointment-remove-btn {
    position: absolute;
    bottom: 2px;
    right: 18px;
}

a.scheduled-appointment-edit-link {
    display: inline-block;
    width: 20px;
    height: 16px;
    background: url(../images/edit-dark-icon.svg) no-repeat right 0 center/20px 16px;
}

a.scheduled-appointment-remove-link {
    display: inline-block;
    width: 20px;
    height: 20px;
    background: url(../images/remove-dark-icon.svg) no-repeat right 0 center/20px 18px;
}

a.scheduled-appointment-edit-link:hover, a.scheduled-appointment-edit-link:active {
    background: url(../images/edit-green-icon.svg) no-repeat right 0 center/20px 16px;
}

a.scheduled-appointment-remove-link:hover, a.scheduled-appointment-remove-link:active {
    background: url(../images/remove-red-icon.svg) no-repeat right 0 center/20px 18px;
}

p.scheduled-appointment-title {
    font-weight: bold;
    font-size: 18px;
    line-height: 22px;
    color: #4F4F4F;
    margin: 0 0 6px;
}

p.scheduled-appointment-desc {
    font-size: 14px;
    line-height: 18px;
    font-weight: 500;
    color: #989898;
    margin: 0;
}

a.schedule-appointment-item-modal-btn {
    font-size: 16px;
    line-height: 18px;
    color: #00A651;
    text-decoration: none;
    display: inline-block;
    margin: 6px 0 0;
    font-weight: 500;
}

    a.schedule-appointment-item-modal-btn:hover {
        color: #007D39;
    }

.scheduled-appointment-modal-btn {
    display: flex;
    justify-content: space-around;
}

    .scheduled-appointment-modal-btn button {
        width: 160px;
        padding: 12px 24px;
    }

    .scheduled-appointment-modal-btn .request-change-btn:hover {
        border: 1px solid #007D39;
        color: #007D39;
        background: transparent;
    }

/*Log Tracking Page CSS*/
.log-tracking-product {
    display: flex;
    align-items: center;
    margin: 16px 0;
}

p.log-tracking-product-title {
    font-weight: bold;
    font-size: 22px;
    line-height: 24px;
    color: #4F4F4F;
    margin: 8px 0;
}

p.log-tracking-product-desc {
    font-size: 16px;
    line-height: 20px;
    color: #989898;
    margin: 8px 0;
}

p.log-tracking-product-sub-title {
    font-size: 18px;
    line-height: 24px;
    color: #4f4f4f;
    margin: 8px 0;
}

.log-tracking-product-content {
    width: 43%;
    margin: 0 16px;
}

.form-review-types-parent {
    width: 75%;
}

/*Code for circle dot*/
li.inner-li:before {
    content: '';
    width: 11px;
    height: 11px;
    background: #D4D4D4;
    position: absolute;
    top: 0;
    left: 5px;
    bottom: 60px;
    margin: auto 0 32px;
    border-radius: 50%;
    z-index: 2;
}

/*Code for border*/
li.inner-li:after {
    content: '' !important;
    border-right: 1px solid #D4D4D4;
    position: absolute;
    left: 10px;
    bottom: 8px !important;
    height: 104% !important;
    z-index: 1;
}

/*Inner ul padding*/
ul.inner-ul {
    padding: 0;
}

li.form-review-types-item {
    padding: 17px 0 8px 32px;
    list-style: none;
    position: relative;
}

    li.form-review-types-item.justification, li.form-review-types-item.justification-border {
        padding-top: 0;
    }

    li.form-review-types-item.active:before {
        content: '';
        width: 19px;
        height: 19px;
        background: #6ACBA0;
        position: absolute;
        top: 0;
        left: 1px;
        bottom: 0;
        margin: auto;
        border-radius: 50%;
        z-index: 3;
    }

    li.form-review-types-item:first-child:before {
        margin: auto 0 8px;
    }

.form-review-types-item.active {
    font-weight: bold;
    font-size: 16px;
    line-height: 20px;
    color: #3FBC7F;
}

li.form-review-types-item:before {
    content: '';
    width: 11px;
    height: 11px;
    background: #D4D4D4;
    position: absolute;
    top: 0;
    left: 5px;
    bottom: 0;
    margin: auto 0 32px;
    border-radius: 50%;
    z-index: 2;
}

li.form-review-types-item:after {
    content: '';
    border-right: 1px solid #D4D4D4;
    position: absolute;
    left: 10px;
    bottom: 36px;
    height: 102%;
    z-index: 1;
}

.form-review-types-item:nth-child(2):after {
    height: 85%;
}

span.form-review-types-title {
    width: 100%;
    display: inline-block;
    font-weight: bold;
    font-size: 16px;
    line-height: 20px;
    color: #4F4F4F;
}

span.form-review-types-date {
    width: 100%;
    display: inline-block;
    font-weight: 500;
    font-size: 14px;
    line-height: 18px;
    color: #989898;
}

    span.form-review-types-date.dark-color {
        color: #4F4F4F;
    }

li.justification span.form-review-types-date, li.justification-border span.form-review-types-date {
    color: #4F4F4F;
}

li.form-review-types-item:first-child:after {
    content: unset;
}

li.form-review-types-item.approved:before {
    background: #3FBC7F;
}

li.form-review-types-item.rejected:before {
    background: #F45F56;
}

li.form-review-types-item.justification:before, li.form-review-types-item.justification:after,
li.form-review-types-item.warning-message:after, li.form-review-types-item.warning-message:before,
li.form-review-types-item.justification-border:before {
    content: unset;
}

li.form-review-types-item.warning-message.justification-border:after {
    content: '';
}

li.form-review-types-item.warning:before {
    background: #FFAA00;
}

li.form-review-types-item.warning-message {
    display: flex;
    align-items: center;
    padding-top: 4px;
}

    li.form-review-types-item.warning-message img {
        width: 24px;
        margin-right: 12px;
    }

/*Schedule Appoint Page Css*/
span.form-review-types-date a.scheduled-appointment-edit {
    color: #00A651;
    margin-left: 8px;
}

span.form-review-types-date a.scheduled-appointment-edit, span.form-review-types-date a.scheduled-appointment-remove {
    text-decoration: none;
    margin-right: 8px;
    font-weight: bold;
    font-size: 16px;
    line-height: 16px;
}

    span.form-review-types-date a.scheduled-appointment-edit:hover {
        color: #007D39;
    }

a.scheduled-appointment-remove {
    color: #989898;
    margin-left: 8px;
}

    a.scheduled-appointment-remove:hover, a.scheduled-appointment-remove:active {
        color: #F45F56;
    }

span.form-review-types-date a.scheduled-appointment-edit.link-disable {
    color: #D4D4D4;
}

/*Requirements Page CSS*/
.form-review-file-upload-container {
    margin: 16px 0;
    border: 1px solid #C4C4C4;
    border-radius: 8px;
    background: #fff;
}

.form-review-file-upload-content {
    padding: 0 45px;
    height: 100%;
    max-height: unset;
    overflow: auto;
}

    .form-review-file-upload-content .change-history-right {
        width: 29%;
    }

p.form-review-link:nth-child(3) {
    margin: 28px 0 24px 0;
}

p.form-review-link:nth-child(4) {
    margin: 6px 0 24px 0;
}

.form-review-file-upload {
    background: #FFFFFF;
    border: 1px solid #F0F0F0;
    box-shadow: 0 4px 8px rgba(44, 60, 47, 0.1);
    border-radius: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 16px;
    margin-bottom: 24px;
}

span.form-review-file-upload-progress-bar {
    width: calc(100% - 40px);
    display: inline-block;
    height: 8px;
    background: #E9F7F3;
    border-radius: 12px;
    margin-top: 16px;
}

span.form-review-file-upload-image {
    width: 48px;
}

span.form-review-file-upload-remove-icon {
    width: 32px;
    text-align: right;
    color: #989898;
}

span.form-review-file-upload-title {
    width: calc(100% - 90px);
    position: relative;
}

span.form-review-file-upload-check-arrow {
    position: absolute;
    bottom: 0;
    right: 0;
    color: #6ACBA0;
    font-size: 14px;
    line-height: 18px;
}

span.form-review-file-upload-inner-progress-bar {
    width: calc(100% - 40px);
    content: '';
    background: #3FBC7F;
    height: 8px;
    position: absolute;
    border-radius: 12px;
}

p.form-review-types-item.danger {
    color: #F45F56;
}

span.form-review-types-item-last-message {
    font-size: 16px;
    line-height: 20px;
    color: #4F4F4F;
}

/*Registration Page CSS End*/

@media only screen and (min-width: 1370px) {
    /*Product Page CSS Start*/
    /*Index Page Css*/
    .assets-in .form-group label {
        height: 50px;
    }

    .assets-in .form-group {
        height: 60px;
    }

    p.kind-of-family-child, .kind-of-family-btn, .assets-in label, .assets-in .form-group {
        width: 24%;
    }

        .assets-in .form-group img {
            width: 60%;
            height: 100%;
        }

    .assets-in .checkbox-button label:before, .assets-in .checkbox-button label:after {
        top: 0 !important;
        bottom: 0 !important;
        margin: auto;
    }

    .kind-of-family-btn {
        overflow: hidden;
        text-align: center;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .clock-icon .nice-select {
        width: 440px;
    }
}

@media only screen and (min-width: 1820px) {
    .dropdown-list {
        width: 100.5%;
        left: -1px;
    }

    .progressbar-line-heading .dropdown-list {
        width: 100.8%;
    }
}

@media only screen and (max-width: 1600px) {
    .progress-tab-heading {
        padding: 7px 6px;
    }
}

@media only screen and (max-width: 1400px) {
    .progress-tab {
        width: 95%;
    }

    .progress-tab-heading {
        padding: 7px 8px;
    }
}

@media only screen and (max-width: 1399px) {
    .dropdown-list {
        left: -1px;
        width: 100.7%;
    }

    img.navigation-menu-button {
        width: 35px;
    }

    .login-form-bg .login-page-content {
        margin: 50px 10px;
        height: auto;
    }

    .login-page-login-form {
        padding: 64px 16px;
        box-shadow: 0 0 BLACK;
        margin: auto;
    }

    .login-page-right-content {
        background: none;
    }

    span.capital-letters-and-numbers {
    }

    .container {
        padding: 0 16px;
    }

    .product {
        width: 45%;
        margin: 16px 16px 40px;
    }
}

@media only screen and (min-width: 1200px) and (max-width: 1369px) {
    /*Product Page CSS Start*/
    /*Index Page Css*/
    button.kind-of-family-btn {
        margin: 0;
    }

    .assets-in .form-group label img {
        width: 42px;
        height: 24px;
    }

    .assets-in, .kind-of-family {
        padding: 12px 8px;
    }

        .assets-in .form-group label {
            margin: 0 0 0 24px;
        }
}

@media only screen and (min-width: 992px) and (max-width: 1299px) {
    /*first form*/
    .groceries-introduction {
        width: 95%;
        padding: 32px 10px 60px;
    }

    .progress-tab-heading {
        padding: 8px 12px;
    }

    .progress-tab {
        width: 95%;
    }
}

@media only screen and (max-width: 991px) {
    .navigation-btn {
        display: block;
        cursor: pointer;
        border: 0;
        background: transparent;
        margin-left: 16px;
    }

    ul.navigation-menu {
        display: none;
    }

    ul.navigation-menu {
        position: absolute;
        top: 74px;
        background: #00a651;
        padding: 0 40px 10px 0;
        border-bottom-right-radius: 10px;
        border-bottom-left-radius: 10px;
        left: 100px;
    }

    .flex-lg-column {
        flex-direction: column;
    }

    .align-lg-flex-start {
        align-items: flex-start;
    }

    .dropdown-list {
        width: 100.3%;
        left: -1px;
    }

    .progressbar-line-heading .dropdown-list {
        width: 101%;
    }

    .login-page-content {
        flex-direction: column;
    }

    .login-page-login-form {
        padding: 64px 16px;
        box-shadow: 0 0 BLACK;
        margin: auto;
    }

    .login-page-left-content {
        width: 100%;
    }

    .width-50 {
        width: 100%;
    }

    .login-page-right-content {
        width: 100%;
        background: none;
        margin-bottom: 50px;
        margin-top: 50px;
    }

    .container {
        padding: 0 16px;
    }

    .tipo-de-identification-ract {
        padding: 1.5rem 0.8rem 0;
    }

    /*index page supplier*/
    .supplier-registration {
        flex-direction: column;
    }

    .registration-body-right {
        width: 100%;
        padding: 16px !important;
    }

    .user-account-left {
        width: 100%;
    }

    .registration-body-right {
        height: 100% !important;
    }

    /*supplier specification page*/
    .checkbox-container-hading {
        padding: 0 12px;
        flex-direction: column;
    }

    .checkbox-container-content {
        padding: 0 12px;
    }

    .checkbox-data {
        flex-direction: column;
    }

    .checkbox-container-left-title, .checkbox-container-right-title, .checkbox-data-left, .form-group.checkbox-data-right {
        width: 100%;
    }

    p.checkbox-specification {
        margin-bottom: 16px;
    }

    .triangle-icon-warning {
        margin: 0;
        padding: 16px 16px;
    }

    .multiple-checkbox-container, p.important-message-content {
        margin: 16px 0;
    }

    .percentage-icon {
        right: 30%;
    }

    /*Product Page CSS Start*/
    /*Index Page Css*/
    .product-body-right {
        width: 100%;
        padding: 0 16px;
    }

    .kind-of-family-parent {
        flex-direction: column;
    }

    .kind-of-family, .assets-in {
        width: 70%;
    }

    .products {
        width: 31%;
    }

    .products-parent {
        justify-content: flex-start;
    }

    h1.product-title {
        margin: 48px 0 16px;
    }

    /*Change Purchase Discount Page*/
    .product-image img, .change-purchase-description-left {
        width: 100%;
    }

    .start-date-end-date .form-group {
        margin-bottom: 24px;
    }

    /*Change Purchase Price*/
    .change-purchase-detail {
        width: 100%;
        margin-bottom: 8px;
    }

    .change-purchase-price-data {
        flex-direction: column;
    }

    .change-purchase-price-content {
        max-height: 760px;
        padding: 0 12px;
    }

    /*Combine Discount Different Product Page*/
    .combine-product-table-data-center {
        width: 100%;
    }

    .combine-product-table-data-image, .combine-product-table-data-image img.combine-product-table-data-img {
        width: 50%;
    }

    .checkbox-button.combine-product-table-data-left {
        width: 20%;
    }

    .combine-product-table-data {
        flex-wrap: wrap;
    }

    .combine-product-table-content, .combine-product-table-hading {
        padding: 0 12px 16px;
        flex-wrap: wrap;
    }

    /*Individual Changes Page*/
    .individual-change {
        width: 45%;
    }

    /*Single Product Page*/
    .change-history-parent, .multiple-checkbox-container {
        width: 100% !important;
    }

    /*Product Page CSS End*/
    /*Register Page CSS Start*/
    /*Tracking of Registration Page Css*/
    .register-products {
        width: 31%;
    }

    .register-product-child-search {
        margin-right: 16px;
    }

    .register-product-child-radio {
        flex-direction: column;
        align-items: flex-start;
    }

    .product-appointment-select-date .form-group {
        width: 100% !important;
    }

    .appointment-product-item-checkbox {
        width: 32px;
    }

    .appointment-product-item-image {
        width: 48px;
    }

    .appointment-product-item-title-desc {
        width: calc(100% - 100px);
    }

    /*Register Page CSS End*/
    .progress-tab-heading {
        padding: 8px 8px;
        font-size: 12px;
    }

    .progress-tab {
        width: 95%;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .checkbox-data-right .form-control {
        width: 70% !important;
    }

    p.product-review-dates {
        font-size: 12px;
    }

    /*Product Page CSS Start*/
    /*Index Page Css*/
    .kind-of-family-parent {
        flex-direction: column;
    }

    .kind-of-family, .assets-in {
        width: 80%;
    }

    .products {
        width: 30%;
    }

    .products-parent {
        justify-content: flex-start;
    }

    /*Change Purchase Discount*/
    .product-full-information {
        flex-direction: column;
    }

    .product-image, .product-list, .product-description {
        width: 70%;
    }

    .product-image {
        text-align: center;
    }

    .registration-form {
        width: 100%;
        padding: 32px;
    }

    .start-date-end-date {
        align-items: flex-start;
    }

    /*Individual Changes Page*/
    .individual-change {
        width: 30%;
    }

    /*Massive Changes Page*/
    .change-request-possibilities-section {
        width: 48%;
    }

    .change-request-possibilities-content {
        flex-wrap: wrap;
    }

    /*Product Page CSS End*/
    /*Register Page CSS Start*/
    /*Tracking of Registration Page Css*/
    .register-products {
        width: 31%;
        margin: 6px;
    }

    .register-product-child-search {
        margin-right: 16px;
    }

    .register-product-child-radio {
        flex-direction: column;
        align-items: flex-start;
    }

    .product-appointment-select-date .form-group {
        width: 100% !important;
    }

    .appointment-product-item-title-desc {
        width: 100%;
    }

    .appointment-product-item {
        flex-wrap: wrap;
    }

    .appointment-product-item-checkbox {
        width: 49%;
    }

    .appointment-product-item-image {
        width: 49%;
    }

    img.combine-product-table-data-img {
        width: 60%;
    }

    /*Register Page End*/
    .progress-tab-heading {
        padding: 8px 10px;
        font-size: 12px;
    }

    .progress-tab {
        width: 95%;
    }
}

@media only screen and (max-width: 767px) {
    .groceries-introduction {
        width: 100%;
        padding: 16px 8px;
    }

    /* ul.navigation-menu { */
    /* position: absolute; */
    /* top: 74px; */
    /* background: #00a651; */
    /* padding: 0 40px 10px 0; */
    /* border-bottom-right-radius: 10px; */
    /* border-bottom-left-radius: 10px; */
    /* left: 100px; */
    /* } */

    /* .navigation-btn { */
    /* display: block; */
    /* cursor: pointer; */
    /* border: 0; */
    /* background: transparent; */
    /* margin-left: 16px; */
    /* } */

    .login-page-content {
        flex-direction: column;
    }

    .login-page-login-form {
        padding: 64px 16px;
        box-shadow: 0 0 BLACK;
        margin: auto;
    }

    .login-page-left-content {
        width: 100%;
    }

    span.capital-letters-and-numbers {
        font-size: 11px;
    }

    .progressbar-line {
        width: 80%;
    }

    .login-page-right-content {
        width: 100%;
        background: none;
        margin-bottom: 50px;
        margin-top: 50px;
    }

    /* ul.navigation-menu { */
    /* display: none; */
    /* } */

    .dropdown-list {
        width: 100.7%;
        left: -1px;
    }

    /*index page supplier*/
    .supplier-registration {
        flex-direction: column;
    }

    .registration-body-right {
        width: 100%;
        padding: 16px !important;
    }

    .product {
        width: 100%;
        margin: 0 0 40px;
    }

    .title-and-desc {
        width: 100%;
    }

    a.to-complete-btn.page-link {
        width: auto;
        margin-bottom: 8px;
    }

    span.product-title {
        padding: 16px;
    }

    .register-product-description-content {
        width: 100%;
        flex-direction: column;
    }

    img.register-product-description-image {
        object-fit: none !important;
        width: 100px !important;
        margin: auto;
    }

    /*Product Page CSS Start*/
    /*Index Page Css*/
    .products {
        width: 47%;
    }

    .products-parent {
        justify-content: space-between;
    }

    .kind-of-family, .assets-in {
        width: 100%;
    }

    /*Purchase Product Discount*/
    .product-full-information, .change-purchase-description {
        flex-direction: column;
    }

    .product-image, .product-list, .product-description, .log-tracking-product-content {
        width: 100%;
    }

        .product-image img {
            width: 50%;
        }

    /*Combine Discount Different Product*/
    .combine-product-table-data-image {
        width: 70%;
    }

    .checkbox-button.combine-product-table-data-left {
        width: 10%;
    }

    .combine-product-table-data-image img.combine-product-table-data-img {
        width: 80%;
    }

    p.combine-product-table-items-desc {
        width: 100%;
    }

    /*Individual Change Page*/
    .individual-change {
        width: 100%;
    }

    /*Massive Change Page*/
    .change-request-possibilities-section, .step-num, .step-how-product-image-work .step-num {
        width: 45%;
    }

        .step-num .step-image:after {
            content: unset;
        }

    .change-request-possibilities-content, .step-how-it-work, .step-how-product-image-work, .product-image-option-desc-content, .product-image-option-content-desc {
        flex-wrap: wrap;
    }

    .product-image-option-description:first-child, .product-image-option-description:last-child {
        width: 100%;
    }

    .product-image-option-section {
        width: 100%;
        margin-bottom: 16px;
    }

    /* .product-change-image-option-section { */
    /* margin-bottom: 16px; */
    /* width:18%; */
    /* } */

    p.change-request-possibilities-desc {
        height: auto;
    }

    /*Product Page CSS End*/
    /*Register Page CSS Start*/
    /*Approved Requirements Page Css*/
    .form-review-file-upload-content {
        padding: 0 12px;
    }

        .form-review-file-upload-content .change-history-left {
            width: 100%;
        }

    .log-tracking-product {
        flex-direction: column;
        align-items: flex-start;
    }

    /*Schedule Appointment Page Css*/
    .scheduled-appointment {
        width: 100%;
    }

    /*Tracking of Registration Page Css*/
    .register-products {
        width: 46%;
    }

    .registered-products-parent {
        flex-direction: column;
        align-items: flex-start;
    }

    .register-product-child-radio {
        width: 100%;
        margin: 16px 0 0;
    }

    /*Edit and Make Appointment Page*/
    .make-appointment-child {
        width: 100%;
        margin: 16px 0;
    }

    .appointment-product-item-image {
        width: 60px;
    }

    .appointment-product-item-title-desc {
        width: calc(100% - 128px);
    }

    .appointment-product-item-checkbox.checkbox-button {
        width: 48px;
    }

    .product-appointment-select-date .form-group {
        width: 280px !important;
    }

    /*Register Page CSS End*/
    span.progress-tab-text {
        display: none;
    }

    .progress-tab-heading span.progress-tab-numbers {
        margin: 0;
    }

    .progress-tab {
        width: 100%;
        max-width: 150px;
    }

    .progress-tab-heading:last-child {
        padding-right: 8px !important;
    }

    .progress-tab-heading {
        font-size: 16px;
    }

        .progress-tab-heading.active {
            padding-right: 8px;
            padding-left: 8px;
        }

    .tab button {
        width: 49% !important;
    }

    .tab {
        flex-wrap: wrap;
    }
}

@media only screen and (max-width: 575px) {
    .radio-button {
        margin: 8px 6px 8px 0;
    }

    .tipo-de-identification-ract {
        padding: 1.5em 1em 0;
    }

    .navigation-btn {
        display: block;
        cursor: pointer;
        border: 0;
        background: transparent;
        margin-left: 16px;
    }

    img.navigation-menu-button {
        width: 35px;
    }

    .login-page-content {
        flex-direction: column;
    }

    .login-page-login-form {
        width: 100%;
        padding: 64px 16px;
        box-shadow: 0 0 BLACK;
    }

    .login-page-left-content {
        width: 100%;
    }

    .login-page-right-content {
        width: 100%;
        background: none;
        margin-bottom: 50px;
    }

    ul.navigation-menu {
        display: none;
    }

    span.prev-button a.prev-button-icon {
        position: unset;
    }

    h2.new-account-organization-title {
        width: 100%;
    }

    span.prev-button {
        margin-bottom: 16px;
        display: inline-block;
    }

    .registration-form {
        width: 95%;
        padding: 32px 10px 60px;
    }

    h1.registration-form-heading-title {
        font-size: 23px;
    }

    span.registration-form-heading-image img {
        width: 36px;
    }

    .progressbar-line {
        width: 100%;
    }

    .progressbar-line-heading {
        flex-wrap: wrap;
    }

    .tipo-de-identification {
        flex-direction: column;
    }

    .progressbar-line-heading .dropdown-list {
        width: 100.5%;
    }

    .dropdown-list {
        width: 100.5%;
        left: -1px;
    }

    .tipo-de-identification-content {
        width: 100%;
        margin-bottom: 16px;
    }

    .form-submit-button-2 {
        flex-direction: column;
        margin-top: 16px;
    }

    span.capital-letters-and-numbers {
        font-size: 9px;
        bottom: -16px;
    }

    .text-align-right {
        text-align: unset;
    }

    .checkbox-button label {
        margin-left: 40px;
        margin-right: 0;
    }

    .modal-title {
        font-size: 15px;
    }

    .modal-body p {
        font-size: 13px;
    }

    /*index supplier start*/
    .pending-forms {
        width: 100%;
        flex-direction: column;
        margin: 0 0 16px;
    }

    /*Index page modal*/
    .modal-v-center {
        padding: 12px;
    }

    .momdal-warning-with-icon {
        flex-direction: column;
        padding: 10px 8px;
    }

    .modal-body {
        padding: 1rem;
    }

    .modal-header {
        padding: 1rem;
    }

    /*file upload*/
    .file-upload-image2, .file-upload-image1 {
        width: 100% !important;
    }

    /*form submit message*/
    button#first-submit + span.form-fill-message, button#second-submit + span.form-fill-message, button#third-submit + span.form-fill-message {
        right: 0;
        top: -40px;
    }

    /*Product Page CSS Start*/
    /*Index Page Css*/
    .product-body-right {
        width: 100%;
        padding: 0 16px 16px;
    }

    .type-of-product-filter {
        width: 100%;
    }

    .filter-code-or-name-changes-report-product {
        flex-direction: column;
        align-items: flex-start;
    }

        .filter-code-or-name-changes-report-product > div {
            margin-bottom: 16px !important;
        }

    .report-product-btn {
        flex-direction: column;
        width: 100%;
    }

        .report-product-btn .report-product {
            margin: 10px 0 0;
        }

    .kind-of-family-parent {
        flex-direction: revert;
    }

    .product-filters {
        margin: 16px 0;
    }

    .kind-of-family, .assets-in {
        width: 49%;
        flex-direction: column;
        align-items: flex-start;
        padding: 16px 8px;
    }

    p.kind-of-family-child, button.kind-of-family-btn {
        margin: 0 0 8px;
    }

    .assets-in > div {
        display: flex;
    }

    .assets-in input[type='checkbox'] {
        width: 0;
        height: 0;
    }

    .type-of-product-filter > div {
        width: 170px;
    }

    .products, .register-products {
        width: 100%;
    }

    /*Combine Discount Different Product*/
    .checkbox-button.combine-product-table-data-left, .combine-product-table-data-image {
        width: 100%;
    }

    .combine-product-table-data-image {
        text-align: center;
    }

    /*Massive Change*/
    .change-request-possibilities-section {
        width: 100%;
        margin-bottom: 8px;
    }

    .tab button {
        width: 100% !important;
    }

    span.change-request-possibilities-hover-content-desc:after {
        right: 13px;
    }

    span.change-request-possibilities-hover-content-desc:before {
        right: 14px;
    }

    span.change-request-possibilities-hover-content-desc {
        right: -20px;
        left: unset;
    }

    .change-request-possibilities-heading {
        justify-content: space-between;
    }

    /*Single Product Page*/
    .change-history-parent {
        flex-direction: column;
        align-items: flex-start;
    }

    /*Product Page CSS End*/
    /*Register Page CSS Start*/
    /*Approved Requirements Page Css*/
    ul.form-review-types {
        padding: 0;
    }

    .form-review-types-parent {
        width: 100%;
    }

    /*Scedule Appointment Page Css*/
    .scheduled-appointment-item {
        flex-direction: column;
    }

    .scheduled-appointment-title-desc {
        width: 100%;
        margin-top: 8px;
    }

    /*Tracking of Registration Page Css*/
    .register-products {
        width: 31%;
        margin: 6px;
    }

    .register-products {
        width: 100%;
    }

    /*Register Page CSS End*/
}

@media only screen and (max-width: 372px) {
    .progressbar-line-heading .dropdown-list {
        width: 100.8%;
    }

    .dropdown-list {
        width: 100.7%;
    }
}

@media only screen and (max-width: 388px) {
    .self-top .form-control.valor {
        width: 100%;
    }

    .self-top .valor-label {
        right: 10px;
        left: unset;
        top: 60px;
    }
}

@media only screen and (max-width: 328px) {
    .product-appointment-select-date .form-group {
        width: 100% !important;
    }

    .self-top .kilogramos-label {
        right: 10px;
        left: unset;
    }
}

/*User Edit Information page Css Start*/
.account-detail-page-title {
    font-weight: bold;
    font-size: 32px;
    line-height: 34px;
    color: #4F4F4F;
    margin-top: 74px;
}

.catalog-detail-page-title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
}

    .catalog-detail-page-title .request-times {
        position: unset;
    }

.account-detail-page-title.index-page {
    margin-top: 36px;
}

h3.user-name {
    font-weight: bold;
    font-size: 26px;
    line-height: 30px;
    color: #4F4F4F;
    margin: 0 0 6px;
}

p.user-information-post-title {
    font-weight: bold;
    font-size: 18px;
    line-height: 22px;
    color: #4F4F4F;
    margin: 0 0 2px;
}

p.user-information-u-name {
    font-weight: bold;
    font-size: 16px;
    line-height: 18px;
    color: #4F4F4F;
    margin: 0;
}

span.user-information-post, span.user-information-email, span.user-information-cellular, span.user-information-telephone {
    font-weight: 500;
    font-size: 16px;
    line-height: 20px;
    color: #7B7B7B;
    display: block;
    margin-bottom: 4px;
}

a.user-information-edit-btn {
    font-weight: bold;
    font-size: 16px;
    line-height: 16px;
    letter-spacing: 0.0357143em;
    color: #00A651;
    display: inline-block;
    margin: 14px 0;
    text-decoration: none;
}

    a.user-information-edit-btn:hover {
        color: #007D39;
    }

.user-information-message {
    font-weight: 500;
    font-size: 14px;
    line-height: 18px;
    color: #989898;
}

.user-information-award-title {
    font-weight: bold;
    font-size: 22px;
    line-height: 24px;
    color: #4F4F4F;
    margin-bottom: 2px;
}

.user-information-award-message {
    font-weight: bold;
    font-size: 16px;
    line-height: 16px;
    letter-spacing: 0.0357143em;
    color: #00A651;
}

p.documentation-title, p.account-setting-title {
    font-weight: bold;
    font-size: 18px;
    line-height: 22px;
    color: #4F4F4F;
    margin: 0 0 32px;
}

span.documentation-data-title, span.account-setting-data-title {
    font-weight: 500;
    font-size: 16px;
    line-height: 20px;
    color: #4F4F4F;
}

p.documentation-data-list a:hover path, p.documentation-data-list a:hover rect, p.account-setting-data-list a:hover path, p.account-setting-data-list a:hover rect {
    stroke: #00A651;
}

img.user-information-award-image {
    width: 60px;
    height: auto;
    margin-right: 8px;
}

img.user-information-warning-dark-image {
    width: 20px;
    height: auto;
    margin-right: 16px;
}

.documentation-data-image, .account-setting-data-image {
    width: 16px;
    height: auto;
    margin-right: 12px;
}

p.documentation-data-list:last-child, p.account-setting-data-list:last-child {
    margin: 0;
}

span.new-user-title {
    font-weight: bold;
    font-size: 18px;
    line-height: 22px;
    color: #4F4F4F;
}

p.new-user-description {
    font-weight: 500;
    font-size: 16px;
    line-height: 20px;
    color: #4F4F4F;
    margin: 0 0 30px;
}

p.added-user-name {
    font-weight: bold;
    font-size: 16px;
    line-height: 20px;
    color: #4F4F4F;
    margin: 8px 0 0;
}

span.added-user-detail-type, span.added-user-email, span.added-user-cellular, span.added-user-telephone {
    font-weight: 500;
    font-size: 16px;
    line-height: 20px;
    color: #7B7B7B;
    display: block;
    margin: 0;
}

span.edit-text, span.erase-text {
    font-weight: bold;
    font-size: 12px;
    line-height: 16px;
    color: #989898;
    margin-bottom: 6px;
}

span.add-new-user-title {
    font-weight: bold;
    font-size: 16px;
    line-height: 20px;
    display: flex;
    align-items: flex-end;
    color: #4F4F4F;
}

.add-new-user-image {
    width: 24px;
    height: auto;
    margin-right: 8px;
}

.account-detail-user-information {
    border: 1px solid #D4D4D4;
    border-radius: 8px;
    background: #fff;
    padding: 28px 32px 24px;
    margin-bottom: 32px;
    margin-top: 40px;
}

.documentation-user, .account-setting-user {
    background: #FFFFFF;
    border: 1px solid #D4D4D4;
    border-radius: 8px;
    padding: 28px 32px;
    width: 50%;
}

p.documentation-data-list a, p.account-setting-data-list a {
    margin: 0 0 28px;
    display: flex;
    align-items: center;
    text-decoration: none;
}

.new-user-contact-details {
    background: #FFFFFF;
    border: 1px solid #D4D4D4;
    border-radius: 8px;
    padding: 32px;
}

.documentation-and-account-setting {
    margin-bottom: 32px;
    display: flex;
    justify-content: space-between;
}

.documentation-user, .user-information-left, .add-new-user-parent:nth-child(odd) {
    margin-right: 16px;
}

.account-setting-user, .add-new-user-parent:nth-child(even) {
    margin-left: 16px;
}

.user-information-detail {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    border-bottom: 1px solid #F0F0F0;
}

.user-information-right {
    margin-left: 16px;
    display: flex;
    align-items: center;
}

.account-detail-user-information-message {
    display: flex;
    align-items: center;
    margin-top: 14px;
}

.add-new-user-parent {
    border: 1px dashed #989898;
    border-radius: 16px;
    width: calc(50% - 16px);
    padding: 24px 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin-bottom: 16px;
}

.user-icon-and-title {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
}

img.new-user-icon {
    margin-right: 8px;
}

.add-new-user-wrapper {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.added-user-image {
    align-self: flex-start;
    width: 60px;
}

.added-user-detail {
    align-self: flex-start;
    margin: 0 8px;
}

span.added-user-detail-type {
    margin-bottom: 12px;
}

span.added-user-email, span.added-user-cellular {
    margin-bottom: 4px;
}

.added-user-edit, .added-user-erase {
    position: absolute;
    top: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 38px;
    height: 48px;
    justify-content: space-between;
    background: #fff;
}

.added-user-edit {
    right: calc(24px + 40px);
    top: 24px;
}

.added-user-erase {
    top: 24px;
    right: 24px;
}

.edit-icon .edit-image:hover path {
    stroke: #00A651;
}

.erase-icon .erase-image:hover path {
    stroke: #F45F56;
}

img.added-user-img-tag {
    width: 100%;
    height: auto;
}

.add-new-user-parent.fill {
    border: 1px solid #989898;
    justify-content: flex-start;
}

.edit-user-info-form-modal {
    display: flex;
    overflow: hidden;
}

.edit-form-left {
    width: 29%;
    background-image: url(../images/edit-user-detail-image.png);
    background-size: cover;
    background-color: #e9f7f3;
    background-repeat: no-repeat;
}

.edit-form-right {
    width: 70%;
}

h2.edit-user-info-form-title {
    font-weight: 700;
    font-size: 22px;
    line-height: 24px;
    color: #4F4F4F;
    margin: -12px 0 32px;
    text-align: center;
}

.edit-form-right .form-group {
    margin-bottom: 32px;
    width: 49%;
}

.change-password-modal .form-group {
    margin-bottom: 12px;
}

.edit-form-right input[type='text'].form-control:disabled, .edit-form-right input[type='password'].form-control:disabled, .edit-form-right input[type='email'].form-control:disabled {
    color: #989898;
}

.user-info-form-submit-button-parent {
    text-align: center;
    margin-bottom: 44px;
    margin-top: 12px;
}

.edit-form-right .modal-body {
    padding-left: 56px;
    padding-right: 56px;
}

span.change-email-info {
    font-weight: bold;
    font-size: 12px;
    line-height: 16px;
    color: #989898;
    margin: 2px -12px 0 18px;
}

    span.change-email-info a:hover {
        color: #007D39;
    }

    span.change-email-info a {
        color: #00A654;
        text-decoration: none;
        margin: 0;
    }

p.change-user-data-main-content {
    font-weight: 500;
    font-size: 16px;
    line-height: 20px;
    color: #4F4F4F;
    margin-bottom: 28px;
}

    p.change-user-data-main-content a {
        color: #00A651;
    }

a.update-document-button, button.update-document-button {
    background: #FFFFFF;
    border: 1px solid #00A651;
    box-sizing: border-box;
    border-radius: 50px;
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    text-align: center;
    letter-spacing: 0.0357143em;
    color: #00A651;
    text-decoration: none;
    display: inline-block;
    padding: 10px 0;
    transition: all 0.2s;
}

.change-user-detail-search-and-update-doc {
    display: flex;
    justify-content: space-between;
    width: 90%;
    align-items: center;
    margin-bottom: 24px;
}

    .change-user-detail-search-and-update-doc .search-box {
        width: 40%;
    }

a.update-document-button:hover, button.update-document-button:hover {
    background: #00A651;
    color: #fff;
}

.user-document-list {
    background: #FFFFFF;
    border: 1px solid #C4C4C4;
    border-radius: 8px;
    overflow: hidden;
    width: 90%;
}

.user-document-list-heading {
    background: #F0F0F0;
    display: flex;
    justify-content: space-between;
    padding: 10px 50px 10px 42px;
}

.user-doc-list-my-doc, .user-doc-list-my-doc-code, .user-doc-list-my-doc-type, .user-doc-list-my-doc-date, .user-doc-list-content-items-my-doc {
    font-weight: bold;
    font-size: 16px;
    line-height: 20px;
    color: #4F4F4F;
}

.user-document-list-content {
    height: 100%;
    max-height: 630px;
    overflow: auto;
}

.user-doc-list-content-items-my-doc-code, .user-doc-list-content-items-my-doc-type, p.active-session-modal-description, .active-session-list-item-title {
    font-weight: 500;
    font-size: 16px;
    line-height: 20px;
    color: #4F4F4F;
}

.user-doc-list-my-doc-date, .user-doc-list-my-doc-type, .user-doc-list-my-doc-code, .user-doc-list-content-items-my-doc-type, .user-doc-list-content-items-my-doc-code, .user-doc-list-content-items-my-doc-date {
    width: 14%;
}

.user-doc-list-content-items-my-doc-date {
    font-weight: 500;
    font-size: 14px;
    line-height: 18px;
    color: #4F4F4F;
}

.user-doc-list-content-items-my-doc, .user-doc-list-my-doc {
    display: flex;
    align-items: center;
    width: 50%;
}

    .user-doc-list-content-items-my-doc img {
        margin-right: 6px;
        width: 32px;
    }

.user-document-list-content-items {
    display: flex;
    justify-content: space-between;
    padding: 28px 10px;
    align-items: center;
    border-bottom: 1px solid #D4D4D4;
    margin: 0 40px 0 30px;
}

    .user-document-list-content-items:last-child {
        border: 0;
    }

.user-document-list-no-content-found {
    font-weight: bold;
    font-size: 16px;
    line-height: 20px;
    text-align: center;
    color: #989898;
    align-items: center;
    height: 630px;
    display: flex;
    justify-content: center;
}

.active-session-list-item-desc {
    font-weight: bold;
    font-size: 12px;
    line-height: 16px;
    color: #989898;
}

.active-session-list-item {
    display: flex;
    align-items: center;
    width: 300px;
    margin: auto auto 24px;
    border-bottom: 1px solid #F0F0F0;
    padding-bottom: 20px;
}

.active-session-list-item-image {
    width: 50px;
    margin: 0 4px;
}

    .active-session-list-item-image img, .active-session-list-item-remove img {
        width: 100%;
        height: auto;
    }

.active-session-list-item-remove {
    width: 16px;
    margin: 0 4px;
}

.active-session-list-item-title-desc {
    width: calc(100% - 56px - 20px - 24px);
    margin: 0 4px;
}

p.active-session-modal-description {
    max-width: 320px;
    width: 100%;
    margin: 0 auto 38px;
}

a.active-session-footer-link {
    font-weight: bold;
    font-size: 16px;
    line-height: 16px;
    letter-spacing: 0.0357143em;
    color: #00A651;
    text-decoration: none;
    text-align: center;
    display: block;
    margin: 32px 0 50px;
}

.change-password-success-image {
    text-align: center;
    margin-bottom: 50px;
}

#add-new-contact {
    cursor: pointer;
    transition: all 0.2s;
    height: 180px;
}

    #add-new-contact:hover {
        border-color: #00A651;
        background-color: #E9F7F3;
    }

    #add-new-contact:active {
        border-color: #00A651;
        background-color: #fff;
    }

        #add-new-contact:hover span.add-new-user-title, #add-new-contact:active span.add-new-user-title {
            color: #00A651;
        }

        #add-new-contact:hover svg path, #add-new-contact:active svg path {
            stroke: #00A651;
        }

/*User Edit Information page Css End*/

/*Chat box css Start*/
.chat-box-content-wrapper {
    background: #FBFBFB;
    border: 0.988884px solid #D4D4D4;
    border-radius: 2px;
    width: 100%;
    max-width: 550px;
    overflow: hidden;
}

.chat-box-profile-name {
    background: #00A651;
    padding: 12px 32px;
    display: flex;
    align-items: center;
}

span.chat-box-user-name {
    font-weight: bold;
    font-size: 16px;
    line-height: 16px;
    letter-spacing: 0.0357143em;
    color: #FFFFFF;
}

img.chat-box-user-profile-image {
    width: 25px;
    height: 28px;
    object-fit: contain;
    margin-right: 12px;
}

.chat-message-sender-message, .chat-message-receiver-message {
    font-weight: 500;
    font-size: 16px;
    line-height: 20px;
    border-radius: 2px;
    padding: 8px 18px;
    width: 100%;
    max-width: 380px;
    position: relative;
}

.chat-message-sender-message {
    color: #3B3B3B;
    background: #E9F7F3;
    margin-left: 16px;
}

.chat-message-receiver-message {
    color: #FFFFFF;
    background: #3FBC7F;
}

span.chat-message-sender-message-send-time, span.chat-message-receiver-message-send-time {
    font-weight: bold;
    font-size: 14px;
    line-height: 18px;
    color: #989898;
    position: absolute;
    bottom: -20px;
}

span.chat-message-sender-message-send-time {
    left: 0;
}

span.chat-message-receiver-message-send-time {
    right: 0;
}

img.chat-message-sender-image {
    border-radius: 50%;
    width: 60px;
    height: 60px;
}

input.chat-box-message-type-box {
    font-weight: 500;
    font-size: 16px;
    line-height: 20px;
    color: #989898;
    border: 1px solid #D4D4D4;
    outline: 0;
    display: block;
    width: 100%;
    height: 55px;
    padding-left: 32px;
    padding-right: 48px;
    font-family: "BryantProRegular", sans-serif;
}

    input.chat-box-message-type-box:focus + .chat-box-message-send-button svg path {
        stroke: #00A651;
    }

.chat-box-send-message-image {
    width: 28px;
    cursor: pointer;
}

.chat-box-suggestion-item {
    background: #FFFFFF;
    border: 2px solid #00A651;
    font-weight: 500;
    font-size: 16px;
    line-height: 20px;
    color: #00A651;
    margin: 0 0 16px;
    width: 100%;
    max-width: 160px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "BryantProRegular", sans-serif;
    cursor: pointer;
    outline: 0;
    transition: all 0.2s;
}

    .chat-box-suggestion-item:hover {
        background: #00A651;
        color: #fff;
    }

    .chat-box-suggestion-item:nth-child(3n-1) {
        margin-left: 18px;
        margin-right: 18px;
    }

.chat-box-message-list {
    padding: 32px 16px 0;
    height: 520px;
    overflow: auto;
    margin-bottom: 32px;
}

.chat-box-message-sender-info, .chat-box-message-receiver-info {
    display: flex;
    align-items: flex-start;
    width: 100%;
    margin-bottom: 40px;
}

.chat-box-message-sender-info {
    justify-content: flex-start;
}

.chat-box-message-receiver-info {
    justify-content: flex-end;
}

.chat-box-suggestion-message {
    padding: 0 20px;
    display: flex;
    align-items: center;
    margin-bottom: 18px;
}

.chat-box-text-box {
    position: relative;
}

.chat-box-message-send-button {
    position: absolute;
    right: 22px;
    top: 0;
    height: 100%;
    display: flex;
    align-items: center;
}

/*Chat box css End*/

/*Notification Page Css Start*/
.notification-wrapper {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.notification-left-side {
    width: calc(40% - 24px);
    margin: 0 12px;
}

.notification-right-side {
    width: calc(60% - 24px);
    margin: 0 12px;
}

.notification-left-side, .notification-right-side {
    background: #FFFFFF;
    border: 1px solid #D4D4D4;
    border-radius: 2px;
    overflow: auto;
    max-height: 840px;
}

.notification-not-found-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
}

p.notification-not-found-description {
    font-weight: 500;
    font-size: 16px;
    line-height: 20px;
    color: #4F4F4F;
}

.notification-left-title, .notification-description {
    font-weight: 500;
    font-size: 16px;
    line-height: 20px;
    color: #4F4F4F;
}

.notification-receive-time {
    font-weight: 500;
    font-size: 14px;
    line-height: 18px;
    color: #4F4F4F;
    position: absolute;
    top: 32px;
    right: 32px;
}

.notification-items {
    padding: 28px 82px 28px 30px;
    border-bottom: 1px solid #F0F0F0;
    background: #F3F3F3;
    position: relative;
    cursor: pointer;
}

    .notification-items.new {
        background: #fff;
    }

        .notification-items.new .notification-left-title, .notification-items.new .notification-description {
            font-weight: bold;
            color: #3B3B3B;
        }

        .notification-items.new .notification-receive-time {
            color: #3B3B3B;
        }

        .notification-items.new .notification-left-title:before {
            content: '';
            width: 12px;
            height: 12px;
            background: #00A651;
            position: absolute;
            left: -20px;
            border-radius: 50%;
            display: inline-block;
            top: 0;
            bottom: 0;
            margin: auto;
        }

        .notification-items.new .notification-left-title {
            position: relative;
        }

    .notification-items:last-child {
        border: 0;
    }

    .notification-items.active, .notification-items:hover {
        background: #E9F7F3;
        border-left: 4px solid #00A651;
        padding-left: 26px;
    }

h2.notification-right-title {
    font-weight: bold;
    font-size: 30px;
    line-height: 32px;
    color: #4F4F4F;
    margin: 0 0 12px;
}

p.notification-right-date, span.notification-right-sender-name, p.notification-right-included-file-title {
    font-weight: bold;
    font-size: 16px;
    line-height: 20px;
    color: #4F4F4F;
    margin: 0;
}

span.notification-right-time {
    font-weight: 500;
    font-size: 14px;
    line-height: 18px;
    text-align: right;
    color: #4F4F4F;
    position: absolute;
    top: 56px;
    right: 40px;
}

img.notification-right-sender-image {
    width: 72px;
    height: 72px;
    object-fit: contain;
    margin-right: 16px;
}

.notification-right-message-body {
    height: 560px;
    overflow: auto;
}

p.notification-right-message-body-p, span.notification-right-included-file-name {
    font-weight: 500;
    font-size: 16px;
    line-height: 20px;
    color: #4F4F4F;
    margin: 0;
}

.notification-content-wrapper {
    position: relative;
    padding: 40px;
}

.notification-right-sender-name-image {
    display: flex;
    align-items: center;
    margin-bottom: 28px;
}

p.notification-right-date {
    margin-bottom: 22px;
}

p.notification-right-message-body-p {
    margin-bottom: 20px;
}

p.notification-right-included-file-title {
    margin-bottom: 30px;
}

.notification-right-message-body-included-file {
    background: #FFFFFF;
    border: 1px solid #F0F0F0;
    box-shadow: 0 4px 8px rgba(44, 60, 47, 0.1);
    border-radius: 8px;
    padding: 22px 28px;
    display: flex;
    align-items: center;
    margin: 0 8px 20px;
    justify-content: space-between;
}

img.notification-right-included-file-icon {
    margin-right: 28px;
}

.notification-right-included-download-icon {
    margin-left: 28px;
}

span.notification-right-included-file-name {
    width: calc(100% - 56px - 60px);
    overflow: hidden;
    margin-right: 12px;
}

.notification-right-included-file-icon, .notification-right-included-view-icon, .notification-right-included-download-icon {
    width: 20px;
}

    .notification-right-included-file-icon:hover path, .notification-right-included-view-icon:hover path, .notification-right-included-download-icon:hover path {
        stroke: #00A651;
    }

    .notification-right-included-view-icon:hover {
        cursor: pointer;
    }

    .notification-right-included-download-icon:hover {
        cursor: pointer;
    }

.notification-description {
    height: 42px;
    overflow: hidden;
}

/*Notification Page Css End*/

/*Notification Warning message*/
.chat-box-wrapper {
    display: flex;
    align-items: flex-start;
}

.chat-box-right-comment-box {
    max-width: 332px;
    width: 100%;
    background: #FFFFFF;
    border: 1px solid #F0F0F0;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 18px;
    margin-left: 16px;
}

    .chat-box-right-comment-box p.comment-box-content {
        font-weight: 500;
        font-size: 14px;
        line-height: 18px;
        color: #989898;
        margin: 0;
    }

    .chat-box-right-comment-box img.comment-box-warning-image {
        width: 20px;
        margin-right: 22px;
    }

/*Notification Warning message End*/

/*FAQ Page CSS Start*/
.accordion-parent.faq-accordion button.accordion {
    font-size: 18px;
    line-height: 22px;
    border: 1px solid #D4D4D4;
    border-radius: 8px;
    background: #fff;
    padding: 19px 58px 19px 24px;
    color: #4F4F4F;
    height: 84px;
}

.accordion-parent.faq-accordion, .accordion-parent.service-point-accordion {
    margin-bottom: 24px;
}

.tab.faq-tab-menu {
    margin-bottom: 32px;
    flex-wrap: wrap;
}

    .tab.faq-tab-menu button {
        /*width: 170px;
        max-width: 170px;*/
    }

p.faq-page-description {
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 20px;
    color: #4F4F4F;
    margin: 34px 0 32px;
}

.accordion-parent.faq-accordion .panel, .accordion-parent.service-point-accordion .panel {
    background: #fff;
}

p.faq-page-accordion-description {
    font-weight: 500;
    font-size: 16px;
    line-height: 20px;
    color: #989898;
    margin: 0;
}

.accordion-parent.faq-accordion button.accordion.active, .accordion-parent.service-point-accordion button.accordion.active {
    border-radius: 8px 8px 0 0;
    border-bottom: 0;
}

    .accordion-parent.faq-accordion button.accordion.active + .panel {
        border: 1px solid #D4D4D4;
        border-top: 0;
        border-radius: 0 0 8px 8px;
    }

span.faq-page-like-dislike-icon {
    display: flex;
    align-items: center;
    margin-bottom: 24px;
    margin-top: 28px;
}

.faq-page-like-icon, .faq-page-dislike-icon {
    margin-left: 24px;
    cursor: pointer;
}

    .faq-page-like-icon:hover path, .faq-page-like-icon.active path {
        stroke: #00A651;
    }

    svg.faq-page-dislike-icon:hover path, .faq-page-dislike-icon.active path {
        stroke: #F45F56;
    }

button.faq-dislike-submit-button {
    margin-bottom: 32px;
}

.comments-and-suggestions {
    background: #fff;
    padding: 32px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 38px;
}

h1.comments-and-suggestions-title {
    font-weight: bold;
    font-size: 32px;
    line-height: 34px;
    color: #4F4F4F;
    margin: 0 0 18px;
}

p.comments-and-suggestions-description {
    font-weight: 500;
    font-size: 16px;
    line-height: 20px;
    color: #4F4F4F;
    margin: 0 0 18px;
}

.comments-and-suggestions-right {
    width: calc(100% - 440px);
    padding-left: 26px;
    padding-right: 26px;
}

img.comments-and-suggestions-image {
    width: 334px;
}

.comments-and-suggestions-left {
    padding-left: 74px;
    padding-right: 26px;
}

.comments-and-suggestions-right .form-group {
    padding: 0;
}

.difficulty-knowing-section-tutorial {
    background: #E9F7F3;
    padding: 0 60px 24px;
    display: flex;
    justify-content: space-between;
}

h1.difficulty-knowing-section-tutorial-title {
    font-weight: bold;
    font-size: 32px;
    line-height: 34px;
    color: #4F4F4F;
    margin: 0 0 28px;
}

p.difficulty-knowing-section-tutorial-desc {
    font-weight: 500;
    font-size: 16px;
    line-height: 20px;
    color: #4F4F4F;
    margin: 0 0 24px;
}

.difficulty-knowing-section-tutorial-right {
    position: relative;
    width: 320px;
}

img.difficulty-knowing-section-tutorial-right-image {
    position: absolute;
    top: -34px;
}

.difficulty-knowing-section-tutorial-left {
    width: calc(100% - 320px);
    padding: 64px 16px 54px 0;
}

p.faq-thanks-message {
    font-weight: 500;
    font-size: 16px;
    line-height: 20px;
    color: #989898;
    margin: 0 0 20px;
}

/*FAQ Page CSS End*/

/*Contact Page Design Css Start*/
.contact-page-groceries {
    font-weight: bold;
    font-size: 22px;
    line-height: 24px;
    color: #000000;
    border-bottom: 2px solid #D4D4D4;
    padding-bottom: 6px;
    margin-bottom: 24px;
}

.contact-page-grocery-items {
    background: #FFFFFF;
    border: 1px solid #D4D4D4;
    border-radius: 8px;
    padding: 12px 22px;
    width: calc(33.3% - 22px);
    margin-bottom: 32px;
}

.contact-page-grocery-items-name {
    font-weight: bold;
    font-size: 18px;
    line-height: 22px;
    color: #4F4F4F;
}

.contact-page-grocery-items-email, .contact-page-grocery-items-assistant, .contact-page-grocery-items-telephone {
    font-weight: 500;
    font-size: 16px;
    line-height: 20px;
    color: #4F4F4F;
}

.contact-page-grocery-items-list {
    font-weight: 500;
    font-size: 16px;
    line-height: 20px;
    color: #989898;
}

.contact-page-grocery-items-parent {
    display: flex;
    flex-wrap: wrap;
}

.contact-page-grocery-items:nth-child(3n-1) {
    margin: 0 32px 32px;
}

.contact-page-groceries.perishable {
    margin-top: 28px;
}

.service-point-accordion-detail-title, .accordion-parent.service-point-accordion button.accordion {
    font-weight: bold;
    font-size: 16px;
    line-height: 20px;
    color: #4F4F4F;
}

p.service-point-accordion-detail-address {
    font-weight: 500;
    font-size: 16px;
    line-height: 20px;
    /* or 125% */
    /* Gris / 500 - base */
    color: #4F4F4F;
    margin: 0;
}

.service-point-accordion-detail {
    margin-bottom: 32px;
    width: calc(33.3% - 22px);
}

.service-point-accordion-detail-wrapper {
    display: flex;
    flex-wrap: wrap;
    margin-top: 16px;
}

.service-point-accordion-detail:nth-child(3n-1) {
    margin: 0 32px 32px;
}

button.service-point-buttons.active {
    font-weight: bold;
    font-size: 16px;
    line-height: 20px;
    /* or 125% */
    text-align: center;
    color: #FFFFFF;
    background: #00A651;
    border-radius: 40px;
    outline: 0;
    border: 0;
}

button.service-point-buttons {
    font-weight: bold;
    font-size: 16px;
    line-height: 20px;
    /* or 125% */
    text-align: center;
    /* Gris / 300 */
    color: #989898;
    border: 1px solid #989898;
    border-radius: 40px;
    background: transparent;
    width: 145px;
    height: 35px;
    margin: 0 4px;
    font-family: "BryantProRegular", sans-serif;
    outline: 0;
    cursor: pointer;
}

.service-point-section-buttons {
    margin-bottom: 46px;
}

.accordion-parent.service-point-accordion button.accordion {
    padding: 14px 22px;
    border-radius: 8px;
    background: #fff;
    border: 1px solid #D4D4D4;
}

    .accordion-parent.service-point-accordion button.accordion.active + .panel {
        padding-left: 22px;
        padding-right: 22px;
        border: 1px solid #D4D4D4;
        border-top: 0;
        border-radius: 0 0 8px 8px;
    }

.contact-page-grocery-items-details-wrapper {
    height: 160px;
    overflow: hidden;
    margin-bottom: 8px;
}

.contact-page-grocery-perecedoros-items-details-wrapper {
    height: 85px;
    overflow: hidden;
    margin-bottom: 8px;
}

/*Contact Page Design Css End*/

/*Responsive for three pages Change_user_data, Customer_Review and notification*/
@media screen and (min-width: 992px) and (max-width: 1149px) {
    .chat-box-wrapper {
        flex-wrap: wrap;
    }

    .chat-box-right-comment-box {
        margin: 16px 0 0;
    }
}

@media screen and (max-width: 991px) {
    .edit-form-right .form-group {
        width: 100%;
    }

    .chat-box-suggestion-message {
        flex-wrap: wrap;
        justify-content: space-evenly;
    }

    .chat-box-suggestion-item, .chat-box-suggestion-item:nth-child(3n-1) {
        margin-left: 8px;
        margin-right: 8px;
    }
}

@media screen and (max-width: 767px) {
    .user-information-detail, .documentation-and-account-setting, .add-new-user-wrapper, .chat-box-wrapper {
        flex-wrap: wrap;
    }

    .user-information-left, .user-information-right, .documentation-user, .account-setting-user, .add-new-user-parent, .add-new-user-parent:nth-child(odd), .add-new-user-parent:nth-child(even) {
        width: 100%;
        margin: 0 0 16px;
    }

        .add-new-user-parent.fill {
            padding-bottom: 56px;
        }

    .change-user-detail-search-and-update-doc {
        width: 100%;
    }

        .change-user-detail-search-and-update-doc .search-box {
            width: 50%;
        }

    .user-document-list-content-items {
        flex-wrap: wrap;
        align-items: flex-start;
        margin: 0 16px;
    }

    .user-doc-list-content-items-my-doc, .user-doc-list-content-items-my-doc-code, .user-doc-list-content-items-my-doc-type, .user-doc-list-content-items-my-doc-date, .user-doc-list-my-doc, .user-doc-list-my-doc-code, .user-doc-list-my-doc-type, .user-doc-list-my-doc-date {
        width: 48%;
        margin-bottom: 8px;
    }

    .user-document-list-heading {
        padding-left: 26px;
        padding-right: 26px;
        flex-wrap: wrap;
    }

    .chat-box-content-wrapper {
        margin-bottom: 16px;
    }

    .chat-box-right-comment-box {
        margin: 0;
    }

    .notification-left-side, .notification-right-side {
        width: 100%;
        margin: 0 0 16px;
    }

    span.notification-right-included-file-name {
        width: calc(100% - 120px);
        margin: 0;
    }

    img.notification-right-included-file-icon {
        margin-right: 8px;
    }

    .service-point-accordion-detail {
        width: calc(49% - 32px);
        margin-left: 16px;
        margin-right: 16px;
    }

        .service-point-accordion-detail:nth-child(3n-1) {
            margin: 0 16px 32px;
        }

    .contact-page-grocery-items {
        width: calc(50% - 32px);
        margin: 0 16px 32px;
    }

        .contact-page-grocery-items:nth-child(3n-1) {
            margin: 0 16px 32px;
        }
}

@media screen and (max-width: 575px) {
    .documentation-and-account-setting, .add-new-user-wrapper {
        flex-wrap: wrap;
    }

    .account-detail-user-information, .new-user-contact-details, .documentation-user, .account-setting-user, .edit-form-right .modal-body {
        padding-left: 16px;
        padding-right: 16px;
    }

    .documentation-user, .account-setting-user, .add-new-user-parent, .add-new-user-parent:nth-child(odd), .add-new-user-parent:nth-child(even) {
        width: 100%;
        margin: 0 0 16px;
    }

    .added-user-edit, .added-user-erase {
        top: unset;
        bottom: 4px;
        height: 48px;
    }

    .add-new-user-parent.fill {
        padding-bottom: 56px;
    }

    .edit-form-left, img.chat-message-sender-image {
        display: none;
    }

    .edit-form-right, .active-session-list-item, .user-doc-list-content-items-my-doc, .user-doc-list-content-items-my-doc-code, .user-doc-list-content-items-my-doc-type, .user-doc-list-content-items-my-doc-date, .user-doc-list-my-doc, .user-doc-list-my-doc-code, .user-doc-list-my-doc-type, .user-doc-list-my-doc-date {
        width: 100%;
    }

    .change-user-detail-search-and-update-doc {
        width: 100%;
        flex-wrap: wrap;
        justify-content: center;
    }

        .change-user-detail-search-and-update-doc .search-box {
            width: 100%;
            margin-bottom: 16px;
        }

    .chat-message-sender-message {
        margin: 0 16px 0 0;
    }

    .chat-message-receiver-message {
        margin-left: 16px;
    }

    .notification-content-wrapper {
        padding: 28px 8px 16px;
    }

    span.notification-right-time {
        top: 16px;
        right: 8px;
    }

    .notification-right-message-body-included-file {
        flex-wrap: wrap;
    }

    span.notification-right-included-file-name {
        width: calc(100% - 32px);
        margin: 0 0 8px;
    }

    img.notification-right-included-file-icon {
        margin-right: 8px;
        margin-bottom: 8px;
    }

    button.service-point-buttons {
        margin-bottom: 8px;
    }

    .service-point-accordion-detail {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }

        .service-point-accordion-detail:nth-child(3n-1) {
            margin: 0 0 32px;
        }

    .contact-page-grocery-items, .contact-page-grocery-items:nth-child(3n-1) {
        width: 100%;
        margin: 0 0 32px;
    }
}

/*Responsive for three pages Change_user_data, Customer_Review and notification End*/
/*Landing Page CSS*/
.white-header {
    background: #FFFFFF;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

    .white-header.sticky-header {
        position: fixed;
        top: 0;
        width: 100%;
        z-index: 9;
    }

a.navigation-link {
    font-weight: 500;
    font-size: 16px;
    line-height: 32px;
    color: #3B3B3B;
    text-decoration: none;
    margin-left: 24px;
}

.white-header a.navigation-link:hover {
    color: #007D39;
}

.white-header li.nav-item.active a.navigation-link:after {
    width: calc(100% + 16px);
    content: '';
    height: 1.8px;
    background: #00A651;
    position: absolute;
    left: -8px;
    bottom: -10px;
    border-radius: 100px;
}

.white-header li.nav-item.active a.navigation-link {
    position: relative;
}

a.register-page-btn {
    background: #FFFFFF;
    border: 1px solid #00A651;
    color: #00A651;
    box-sizing: border-box;
    border-radius: 50px;
    font-size: 16px;
    line-height: 16px;
    font-weight: 500;
    letter-spacing: 0.0357143em;
    text-decoration: none;
    padding: 10px 30px;
    transition: all 0.4s;
    width: 170px;
    display: inline-flex;
    height: 44px;
    justify-content: center;
    align-items: center;
}

    a.register-page-btn:hover {
        background: #00A651;
        color: #fff;
    }

a.login-page-btn {
    color: #00A651;
    margin-right: 36px;
    text-decoration: none;
}

.login-page-form-bg {
    background-image: url(../images1/top-bg.png);
    background-repeat: no-repeat;
    background-size: cover;
}

.login-page-right-side-content {
    display: flex;
    align-items: center;
}

h1.login-page-left-side-title {
    font-weight: bold;
    font-size: 36px;
    line-height: 38px;
    margin-bottom: 18px;
    color: #FFFFFF;
    margin-top: 76px;
}

p.login-page-left-side-description {
    font-weight: 500;
    font-size: 16px;
    line-height: 20px;
    color: #FFFFFF;
    margin-bottom: 50px;
}

.dynamic-image-wrapper {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    overflow: auto;
}

.dynamic-image {
    width: calc(33% - 22px);
    margin-right: 22px;
    margin-bottom: 16px;
}

.dynamic-image-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

h2.steps-of-auto-mercado-and-vindi-supplier-left-title {
    font-weight: bold;
    font-size: 32px;
    line-height: 34px;
    color: #3B3B3B;
    margin-bottom: 54px;
}

h3.step-title {
    font-weight: bold;
    font-size: 22px;
    line-height: 24px;
    color: #4F4F4F;
    margin-top: 12px;
    margin-bottom: 10px;
}

p.step-description {
    font-weight: 500;
    font-size: 16px;
    line-height: 20px;
    color: #4F4F4F;
    margin-top: 10px;
    margin-bottom: 50px;
}

.step-count img.step-image {
    width: 60px;
    height: 60px;
}

h2.steps-of-auto-mercado-and-vindi-supplier-right-title {
    font-weight: bold;
    font-size: 30px;
    line-height: 32px;
    color: #4F4F4F;
    margin-bottom: 36px;
}

.steps-of-auto-mercado-and-vindi-supplier-right ul li {
    font-weight: 500;
    font-size: 16px;
    line-height: 20px;
    color: #4F4F4F;
}

section.steps-of-auto-mercado-and-vindi-supplier {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 60px;
}

.steps-of-auto-mercado-and-vindi-supplier-left {
    width: 60%;
    padding-right: 10%;
}

.steps-of-auto-mercado-and-vindi-supplier-right {
    width: 40%;
    background: #E9F7F3;
    border-radius: 24px 0 0 24px;
    padding: 50px 96px 44px;
    position: absolute;
    right: 0;
}

.steps {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}

.step-count {
    width: 48%;
}

.steps-of-auto-mercado-and-vindi-supplier-right ul {
    padding-left: 20px;
}

.dynamic-image-wrapper::-webkit-scrollbar {
    width: 4px;
}

h1.our-quality-standards-title {
    font-weight: bold;
    font-size: 32px;
    line-height: 34px;
    color: #3B3B3B;
    margin-bottom: 50px;
}

.our-quality-standards-step-item h4.title {
    font-weight: bold;
    font-size: 22px;
    line-height: 24px;
    margin-bottom: 15px;
    color: #4F4F4F;
    margin-top: 0;
}

.our-quality-standards-step-item p.content {
    font-weight: 500;
    font-size: 16px;
    line-height: 20px;
    color: #4F4F4F;
    margin-top: 15px;
}

.our-quality-standards-steps {
    display: flex;
    justify-content: space-between;
}

.our-quality-standards-step-item {
    width: 23%;
}

    .our-quality-standards-step-item h4.title:before {
        background: #3FBC7F;
        content: "";
        width: 2px;
        height: 16px;
        display: inline-block;
        border-radius: 50px;
        margin-right: 6px;
    }

section.our-quality-standards {
    margin: 0 auto;
    padding-top: 60px;
}

section.benefits-of-being-supplier {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 100px;
}

.benefits-of-being-supplier-left {
    background: #3FBC7F;
    border-radius: 0 24px 24px 0;
    padding: 44px 16px 44px;
    width: calc(100% - 720px);
    z-index: 1;
}

h2.benefits-of-being-supplier-title {
    font-weight: bold;
    font-size: 30px;
    line-height: 32px;
    color: #FFFFFF;
    margin-bottom: 52px;
}

p.benefits-of-being-supplier-content {
    font-weight: 500;
    font-size: 16px;
    line-height: 20px;
    color: #FFFFFF;
    padding: 16px 0;
    position: relative;
}

button.benefits-transparent-button {
    border: 1px solid #FFFFFF;
    box-sizing: border-box;
    border-radius: 50px;
    outline: 0;
    width: 250px;
    height: 44px;
    background: transparent;
    text-align: center;
    font-weight: 500;
    cursor: pointer;
    font-size: 16px;
    line-height: 16px;
    letter-spacing: 0.0357143em;
    color: #FFFFFF;
    transition: all 0.2s;
}

p.benefits-of-being-supplier-content:before {
    content: "";
    border-top: 4px solid #6ACBA0;
    width: 44px;
    position: absolute;
    top: 0;
    border-radius: 8px;
}

.benefits-of-being-supplier-right {
    position: absolute;
    right: 0;
    display: flex;
    align-items: center;
}

img.men-image-in-benefits-section {
    width: 100%;
    height: 90%;
    object-fit: cover;
}

.benefits-of-being-supplier-container {
    max-width: 720px;
    margin: auto;
}

button.benefits-transparent-button:hover {
    background: #fff;
    color: #3fbc7f;
}

section.benefits-we-provide-you {
    padding-top: 120px;
    margin-bottom: 50px;
}

.benefits-we-provide-you-title {
    font-weight: bold;
    font-size: 32px;
    line-height: 34px;
    color: #272727;
    margin-bottom: 48px;
}

.steps-benefits-we-provide-you {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

    .steps-benefits-we-provide-you .step-item {
        width: 28%;
    }

    .steps-benefits-we-provide-you .image-title {
        display: flex;
        align-items: center;
    }

    .steps-benefits-we-provide-you .step-image {
        margin-right: 16px;
        width: 60px;
        height: 60px;
    }

    .steps-benefits-we-provide-you p.step-content {
        margin: 8px 0 32px 0;
        font-weight: 500;
        font-size: 16px;
        line-height: 20px;
        color: #4F4F4F;
    }

    .steps-benefits-we-provide-you h4.step-title {
        font-weight: bold;
        font-size: 22px;
        line-height: 24px;
        color: #4F4F4F;
        margin: 0;
    }

section.video-tutorial-find-where-product-placed {
    padding-top: 100px;
}

h2.video-tutorial-find-where-product-placed-title {
    font-weight: bold;
    font-size: 32px;
    line-height: 34px;
    color: #3B3B3B;
    margin-bottom: 48px;
    margin-top: 0;
}

.video-tutorial-section {
    background: #FFFFFF;
    border: 1px solid #C4C4C4;
    box-sizing: border-box;
    border-radius: 8px;
    padding: 33px 0 33px 33px;
    display: flex;
    justify-content: space-between;
}

    .video-tutorial-section .video-player {
        width: calc(100% - 33%);
    }

    .video-tutorial-section .video-list {
        width: 33%;
        height: 530px;
        overflow: auto;
    }

    .video-tutorial-section .video-player img {
        width: 100%;
        height: 100%;
    }

    .video-tutorial-section .list-item {
        display: flex;
        align-items: center;
        padding: 6px 32px 6px 46px;
        position: relative;
        transition: all 0.2s;
        cursor: pointer;
    }

    .video-tutorial-section h4.video-title {
        font-weight: 500;
        font-size: 16px;
        line-height: 20px;
        color: #3B3B3B;
        margin: 0 0 4px;
    }

    .video-tutorial-section p.video-description {
        font-weight: 500;
        font-size: 14px;
        line-height: 18px;
        color: #7B7B7B;
        margin: 0;
    }

    .video-tutorial-section img.video-image {
        height: 100%;
        margin-right: 8px;
    }

    .video-tutorial-section .list-item:hover, .video-tutorial-section .list-item.active {
        background: #E9F7F3;
    }

        .video-tutorial-section .list-item.active:before {
            content: '';
            background-image: url(../images1/active-player-icon.svg);
            position: absolute;
            width: 20px;
            height: 100%;
            left: 10px;
            background-repeat: no-repeat;
            background-position: center;
        }

button.go-to-top-button {
    font-family: "BryantProRegular", sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 20px;
    text-align: right;
    color: #00A651;
    background: transparent;
    border: 0;
    outline: 0;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}

.hide-show-button-parent {
    text-align: center;
    margin: 56px 0 118px;
}

button.go-to-top-button img {
    margin-left: 8px;
}

p.contact-footer, p.help-footer {
    font-weight: bold;
    font-size: 18px;
    line-height: 22px;
    color: #FFFFFF;
    margin: 0 0 24px;
}

a.contact-footer-menu, a.help-footer-menu {
    font-weight: 500;
    font-size: 16px;
    line-height: 20px;
    color: #FFFFFF;
    text-decoration: none;
    display: block;
    margin: 0 0 16px;
    transition: all 0.2s;
}

.copyright-text {
    font-weight: 500;
    font-size: 12px;
    line-height: 12px;
    letter-spacing: 0.0357143em;
    color: #FFFFFF;
    padding: 50px 0 64px;
}

footer.login-page-footer {
    background: #1A1A1A;
}

.footer-section-wrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}

.footer-three-section {
    width: 30%;
}

.footer-logo-image {
    padding-bottom: 28px;
    padding-top: 48px;
}

a.help-footer-menu:after {
    content: '';
    background-image: url(images1/greator-icon.svg);
    height: 12px;
    width: 12px;
    display: inline-block;
    background-repeat: no-repeat;
    margin-left: 4px;
}

a.contact-footer-menu:hover, a.help-footer-menu:hover {
    opacity: 0.8;
}

span.forgot-username:hover + .form-fill-message {
    display: block;
}

.forgot-username + span.form-fill-message {
    background: #D6F1E3;
    border-radius: 8px;
    display: none;
    font-size: 12px;
    line-height: 16px;
    color: #3B3B3B;
    padding: 10px;
    position: absolute;
    top: 8px;
    right: 10px;
    width: 260px;
    text-align: left;
    border: 1px solid #94D9C1;
    box-shadow: 0 4px 8px rgb(44 60 47 / 20%);
}

span.forgot-username + span.form-fill-message:after {
    position: absolute;
    content: "";
    right: 12px;
    bottom: -11px;
    border-style: solid;
    border-width: 11px 11px 0 11px;
    border-color: #D6F1E3 transparent transparent transparent;
}

span.forgot-username + span.form-fill-message:before {
    content: "";
    position: absolute;
    right: 11px;
    bottom: -12px;
    border-style: solid;
    border-width: 12px 12px 0 12px;
    border-color: #94D9C1 transparent transparent transparent;
}

input.password-field {
    height: 44px;
}

@media only screen and (max-width: 991px) {
    .login-page-content {
        height: unset !important;
    }

    .steps-of-auto-mercado-and-vindi-supplier-right {
        position: unset;
        padding: 16px 16px;
        border-radius: 0;
        width: 100%;
    }

    section.steps-of-auto-mercado-and-vindi-supplier, .our-quality-standards-steps, section.benefits-of-being-supplier {
        flex-wrap: wrap;
    }

    .our-quality-standards-step-item, .steps-benefits-we-provide-you .step-item {
        width: 45%;
    }

    .benefits-of-being-supplier-left, .benefits-of-being-supplier-right {
        width: 100%;
        border-radius: 0;
    }

    .benefits-of-being-supplier-right {
        position: unset;
    }

    .video-tutorial-section .video-player {
        width: 100%;
        height: auto;
        padding-bottom: 16px;
    }

    .video-tutorial-section .video-list {
        width: 100%;
        height: 360px;
    }

    .video-tutorial-section {
        flex-wrap: wrap;
        padding: 8px;
    }

    .steps-of-auto-mercado-and-vindi-supplier-left {
        width: 100%;
        padding: 0;
    }

    .video-tutorial-section img.video-image {
        width: 30%;
        height: auto;
    }

    .hide-show-button-parent {
        margin: 32px 0;
    }

    .footer-three-section {
        width: 49%;
        margin-bottom: 32px;
    }
}

@media only screen and (max-width: 767px) {
    .video-tutorial-section img.video-image {
        width: 30%;
        height: auto;
    }

    .video-tutorial-section .list-item {
        padding-left: 16px;
        padding-right: 8px;
    }

        .video-tutorial-section .list-item.active:before {
            background-size: 10px;
            left: 0;
        }

    img.dynamic-image {
        width: 30%;
        height: auto;
        margin-right: 12px;
    }

    .dynamic-image-wrapper {
        height: 330px;
        margin-bottom: 16px;
    }
}

@media only screen and (max-width: 575px) {
    .unordered-list {
        justify-content: space-between;
        width: 100%;
    }

    .step-count, .our-quality-standards-step-item, .steps-benefits-we-provide-you .step-item {
        width: 100%;
    }

    a.login-page-btn, a.register-page-btn {
        display: none;
    }

    .video-tutorial-section h4.video-title {
        font-size: 14px;
    }

    .video-tutorial-section p.video-description {
        font-size: 12px;
    }

    .footer-three-section {
        width: 100%;
        margin-bottom: 32px;
    }

    img.dynamic-image {
        width: 45%;
        height: auto;
        margin-right: 12px;
    }

    .dynamic-image-wrapper {
        height: 270px;
        margin-bottom: 16px;
    }
}

/*Landing Page CSS End*/

/*Modal Page CSS*/
#welcomeSliderOpenModal {
    background-image: url(../images/modal1-bg-image.svg);
    background-position: top;
    background-repeat: no-repeat;
}

p.modal-bg-1-title {
    font-weight: bold;
    font-size: 26px;
    line-height: 30px;
    text-align: center;
    color: #3B3B3B;
}

#welcomeSliderOpenModal .modal-body {
    height: 250px;
    overflow: auto;
}

.mySlides {
    display: none;
}

.slider-modal-dots-parent {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    bottom: -28px;
    left: 0;
    right: 0;
}

.demo {
    background: #E9F7F3;
    width: 10px;
    height: 10px;
    display: inline-block;
    margin: 0 4px;
    cursor: pointer;
    transition: all 0.2s;
    border-radius: 50%;
}





    .demo.active, .demo:hover {
        background: #6ACBA0;
    }
/*Modal Page CSS End*/

/*Product Tour JS CSS*/
p.product-tour-js-title {
    font-weight: bold;
    font-size: 26px;
    line-height: 30px;
    text-align: center;
    color: #4F4F4F;
}

img.tour-arrow-image {
    position: absolute;
    margin: auto;
}

.review-dates-first-tour {
    left: -120px;
    top: 120px;
}

.introjs-tooltip {
    right: 395px !important;
}

.review-dates-second-tour {
    top: 0;
    bottom: 0;
    right: -100px;
    transform: rotateY(190deg) rotateZ(295deg);
}

.search-filters-first-tour {
    top: 90px;
    right: -160px;
    transform: rotateY(180deg) rotateZ(-10deg);
}

.search-filters-second-tour, .search-filters-third-tour {
    top: 0;
    right: -110px;
    transform: rotateX(190deg) rotateZ(190deg);
}

.search-filters-fourth-tour {
    left: -120px;
    top: 300px;
    transform: unset;
    bottom: unset;
}

a.tour-js-success-button {
    width: 100%;
    max-width: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 20px;
    height: 44px;
    background: #00A651;
    color: #fff;
    border-radius: 50px;
    font-size: 16px;
    cursor: pointer;
    line-height: 16px;
    text-align: center;
    letter-spacing: 0.0357143em;
    outline: 0;
    border: 0;
    font-family: "BryantProRegular", sans-serif;
    transition: all 0.25s linear;
    margin: 32px auto 60px;
    text-decoration: none;
}

    a.tour-js-success-button:hover {
        background: #007D39;
    }

.pending-form-first-tour {
    left: -120px;
    top: 150px;
    transform: unset;
    bottom: unset;
}

@media only screen and (max-width: 1500px) {
    .introjs-tooltip {
        right: 525px !important;
    }
}

@media only screen and (max-width: 1365px) {
    .review-dates-first-tour {
        bottom: unset;
        top: -80px;
        right: -40px;
        left: unset;
        transform: rotateY(190deg) rotateZ(95deg);
    }
}

@media only screen and (max-width: 1099px) {
    .review-dates-first-tour {
        bottom: unset;
        top: -110px;
        right: 0;
        left: unset;
        transform: rotateY(190deg) rotateZ(85deg);
    }

    /* .review-dates-second-tour { */
    /* bottom: unset; */
    /* top: -110px; */
    /* right: 0; */
    /* left: unset; */
    /* transform: rotateY(190deg) rotateZ(85deg); */
    /* } */

    .review-dates-first-tour {
        top: -80px;
    }

    .introjs-tooltip {
        right: unset;
    }

        .introjs-tooltip.introjs-top-left-aligned {
            top: unset !important;
        }
}

@media only screen and (max-width: 1089px) {
    .search-filters-fourth-tour {
        left: -120px;
        top: 300px;
        transform: unset;
        bottom: unset;
    }
}

@media only screen and (max-width: 991px) {
    .review-dates-first-tour {
        bottom: -90px;
        top: unset;
        right: -20px;
        left: unset;
        transform: rotate(-75deg);
    }

    .review-dates-second-tour {
        top: -80px;
        left: -70px;
        right: unset;
        bottom: unset;
        transform: rotateY(0deg) rotateZ(80deg);
    }

    .search-filters-first-tour {
        top: -60px;
        left: -100px;
        right: unset;
        transform: rotateY(0deg) rotateZ(80deg);
    }

    .search-filters-third-tour {
        top: 100px;
    }
}

@media only screen and (max-width: 767px) {
    .review-dates-second-tour, .review-dates-first-tour, .search-filters-first-tour, .search-filters-second-tour, .search-filters-third-tour, .search-filters-fourth-tour {
        display: none;
    }
}

/*Product Tour JS CSS End*/

/*Report Page CSS*/
.report-page p.register-product-description-desc {
    font-weight: 400;
    margin-top: 24px;
    margin-bottom: 32px;
}

.report-page .scheduled-appointment-item {
    padding: 8px 15px;
}

.report-not-found-image {
    width: 100%;
    max-width: 360px;
    display: block;
    margin: auto auto 40px;
}

.report-not-found-text {
    font-family: 'Bryant Pro', sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 20px;
    text-align: center;
    color: #4F4F4F;
    width: 100%;
    max-width: 360px;
    margin: auto;
}

.report-page .tab.faq-tab-menu button {
    width: calc(50% - 6px);
    max-width: calc(50% - 6px);
}

@media only screen and (max-width: 575px) {
    .report-page .tab.faq-tab-menu button {
        width: 100%;
        max-width: 100%;
    }
}
/*Report Page CSS End*/

/*Report Page New Design CSS Start*/
.new-report-page .product-title {
    color: #3B3B3B;
    margin: 60px 0 16px;
}

.new-report-page .register-product-description-desc {
    font-weight: 400;
    margin: 0 0 40px;
}

.new-report-page h2.tus-reportes-title {
    font-weight: 700;
    font-size: 26px;
    line-height: 30px;
    color: #3B3B3B;
    margin: 0 0 24px;
}

.new-report-page .scheduled-appointment-item {
    flex-direction: column;
    align-items: flex-start;
    padding: 0;
}

.new-report-page .scheduled-appointment {
    width:456px;
    padding: 16px 24px;
}

.new-report-page .scheduled-appointment-title {
    margin-bottom: 8px;
}

.new-report-page .scheduled-appointment-desc {
    font-weight: 400;
    margin-bottom: 12px;
}

.new-report-page .schedule-appointment-item-modal-btn {
    margin: 0;
    font-weight: 400;
    line-height: 20px;
}

.new-report-page-card-list {
    display: flex;
    align-items: center;
    flex-wrap:wrap;
   
}

.new-report-card-item {
    background-color: #FFFFFF;
    border: 1px solid #F0F0F0;
    box-shadow: 0 4px 8px rgba(44, 60, 47, 0.1);
    border-radius: 8px;
    /* width: calc(25% - 24px);*/
    width:191px;
    height: 242px;
    padding: 16px;
    margin: 0 12px 25px;
}

img.new-report-card-icon-img {
    width: 60px;
    height: 60px;
    display: block;
    margin: 0 auto 16px;
}

p.new-report-card-title {
    font-weight: 700;
    font-size: 18px;
    line-height: 22px;
    text-align: center;
    color: #4F4F4F;
    margin: 0 0 16px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
p.new-report-card-description {
    font-weight: 400;
    font-size: 14px;
    line-height: 18px;
    color: #7B7B7B;
    margin: 0;
}

@media only screen and (max-width: 1199px) {
    .new-report-card-item {
        width: calc(33% - 24px);
    }
}

@media only screen and (max-width: 767px) {
    .new-report-card-item {
        width: calc(50% - 24px);
    }
}

@media only screen and (max-width: 575px) {
    .new-report-card-item {
        width: 100%;
    }
}
/*Report Page New Design CSS End*/


/*New report description Popup code Snippet*/
#rich-text-container {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

#new-report-card-description-text:hover {
    cursor: pointer;
}

/*.popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
    opacity: 0.3;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
}*/

/*#listado_de_condiciones_modal .new-report-card-description {
    font-weight: 400;
    font-size: 14px;
    line-height: 18px;
    color: #7B7B7B;
    margin: 0;
    overflow: auto;
    display: block;
}

#listado_de_condiciones_modal .card-description-text {
    max-height: 290px;
    overflow: auto;
    padding-bottom: 32px;
}

.listado_de_condiciones-btn {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0;
    cursor: pointer;
}*/


.show-popup-btn {
    font-size: 1em;
    color: #7B7B7B;
    border-radius: 20px/50px;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease-out;
}

.popup-overlay {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.7);
    transition: opacity 500ms;
    visibility: hidden;
    opacity: 0;
}

.popup-overlay:target {
    visibility: visible;
    opacity: 1;
}

.popup {
    margin: 70px auto 140px;
    position: relative;
    background-color: #fefefe;
    border: 1px solid #F0F0F0;
    width: 95%;
    max-width: 500px;
    -webkit-animation-name: animatetop;
    -webkit-animation-duration: 0.4s;
    animation-name: animatetop;
    animation-duration: 0.4s;
    box-shadow: 0 8px 8px rgb(44 60 47 / 10%);
    border-radius: 24px;
    padding: 7px;
}

.popup-header {
    padding: 27px 0rem 1rem 0rem;
    color: white;
    flex-direction: column;
    align-items: flex-end;
}

.popup h2 {
    margin-top: 17px;
    color: #333;
    margin-bottom: 0;
    text-align: center;
}

.popup .close-popup-btn {
    position: absolute;
    top: 10px;
    right: 20px;
    transition: all 200ms;
    font-size: 30px;
    font-weight: bold;
    text-decoration: none;
    color: #333;
    border: none;
    background:none;
    cursor: pointer;
}

.close-popup-btn:focus {
    outline: none;
}
    
.popup .popup-content {
    max-height: 290px;
    overflow-y: scroll;
    padding-bottom: 30px;
    padding-top: 20px;
    padding-left: 20px;
}
/*New report description Popup code Snippet End*/


/*=======================Catalog Section Start=======================*/
/*Product Catalog Page CSS*/
.filters-list {
    background-color: #FFFFFF;
    border: 1px solid #D4D4D4;
    border-radius: 8px;
    padding: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

.filters-list-title {
    margin: 4px 16px 4px 0;
    font-weight: 500;
    font-size: 16px;
    line-height: 22px;
    color: #989898;
}

.filters-list .form-group {
    margin: 4px 8px 4px 0;
    padding-left: 0;
}

    .filters-list .form-group label {
        margin-bottom: 0;
        font-weight: 500;
        font-size: 14px;
        line-height: 22px;
        color: #4F4F4F;
    }

.catalog-calender-results {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 10px 0 20px;
}

.catalog-list-total-results {
    font-weight: 400;
    font-size: 16px;
    line-height: 20px;
    color: #4F4F4F;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 10px 0 15px;
}

.service-calendar {
    font-weight: 700;
    font-size: 16px;
    line-height: 16px;
    letter-spacing: 0.0357143em;
    color: #00A651;
    margin: 18px 0 26px;
}

.catalog-lists {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 32px;
}

.catalog-list-item {
    width: calc(25% - 24px);
    background-color: #FFFFFF;
    border: 1px solid #F0F0F0;
    box-shadow: 0 4px 8px rgba(44, 60, 47, 0.2);
    border-radius: 8px;
    overflow: hidden;
    position: relative;
}

.catalog-image {
    width: 100%;
    height: 100px;
    object-fit: cover;
    display: block;
}

.catalog-list-title {
    font-weight: 700;
    font-size: 18px;
    line-height: 22px;
    text-align: center;
    color: #4F4F4F;
    margin: 16px 16px;
}

.catalog-list-request-button {
    background-color: #FFFFFF;
    border: 1px solid #00A651;
    border-radius: 50px;
    display: block;
    width: calc(100% - 32px);
    margin: 0 16px 16px;
    padding: 14px;
    font-weight: 400;
    font-size: 16px;
    line-height: 16px;
    text-align: center;
    letter-spacing: 0.0357143em;
    color: #00A651;
    transition: all 0.2s linear;
    cursor: pointer;
    z-index: 2;
    position: relative;
}

    .catalog-list-request-button:hover {
        background-color: #00A651;
        color: #ffffff;
    }

.catalog-list-details-button {
    display: block;
    width: calc(100% - 32px);
    font-weight: 700;
    font-size: 16px;
    line-height: 16px;
    text-align: center;
    letter-spacing: 0.0357143em;
    color: #00A651;
    background-color: transparent;
    border: 0;
    margin: 0 16px 32px;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s linear;
    z-index: 2;
    position: relative;
}

.catalog-list-details-page-button {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: block;
    margin: 0;
    z-index: 1;
    opacity: 0;
}

.catalog-list-details-button:hover {
    text-decoration: underline;
}

.catalog-not-found-section {
    width: 100%;
    max-width: 360px;
    text-align: center;
    margin: auto;
    padding: 16px;
}

.catalog-not-found-image {
    display: block;
    width: 100%;
    max-width: 300px;
    margin: 0 auto 24px;
}

.catalog-not-found-title {
    font-weight: 700;
    font-size: 16px;
    line-height: 20px;
    text-align: center;
    color: #4F4F4F;
}

.request-times {
    position: absolute;
    top: 8px;
    right: 8px;
    font-weight: 700;
    font-size: 14px;
    line-height: 18px;
    display: flex;
    align-items: center;
    gap: 6px;
    border-radius: 20px;
    padding: 0 8px;
}

    .request-times.request-blue {
        color: #009BF2;
        background-color: #CAECFF;
    }

        .request-times.request-blue svg {
            stroke: #009BF2;
        }

    .request-times.request-new {
        color: #24A58F;
        background-color: #D9F9F3;
    }

        .request-times.request-new svg {
            stroke: #24A58F;
        }

    .request-times.auto-layout {
        color: #FF7E08;
        background-color: #FFEBD5;
    }

        .request-times.auto-layout svg {
            stroke: #FF7E08;
        }

.catalog-list-price {
    font-weight: 400;
    font-size: 14px;
    line-height: 18px;
    color: #4F4F4F;
    width: calc(100% - 32px);
    margin: 0 auto 16px;
    text-align: center;
}

.back-to-top-button {
    background-color: #FFFFFF;
    padding: 20px;
}

@media only screen and (max-width: 1199px) {
    .catalog-list-item {
        width: calc(33% - 22px);
    }
}

@media only screen and (max-width: 767px) {
    .catalog-list-item {
        width: calc(50% - 16px);
    }
}

@media only screen and (max-width: 575px) {
    .filters-list {
        flex-direction: column;
        align-items: flex-start;
    }

    .catalog-lists {
        gap: 0;
    }

    .catalog-list-item {
        width: 100%;
        margin-bottom: 32px;
    }
}

/*Product Catalog Page CSS End*/

/*Product Catalog Detail Page CSS*/
.catalog-detail-information {
    display: flex;
    align-items: flex-start;
    gap: 32px;
    flex-wrap: wrap;
}

.catalog-images-slider {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    width: 100%;
    max-width: 556px;
   height: 360px;
}

/*.catalog-image-list {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 32px;
}*/

.catalog-carousel-container {
    width: 156px;
    height: 361px; /* Adjust the height to your desired value for up to three images */
    overflow-y: auto; /* Add a vertical scroll for the container if images exceed the maximum height */
}

.catalog-slider-image {
    width: 98px; /* Adjust the width as per your requirements */
    height: 98px; /* Adjust the height as per your requirements */
    display: block; /* Display images as a single column */
    margin-bottom: 29px; /* Add some space between the images */
    border: 1px solid #989898;
}

/*.catalog-slider-image {*/
    /*width: 98px;*/
    /*width: 88px;
    height: 98px;
    cursor: pointer;
    object-fit: cover;
}*/

.catalog-main-image {
    width: 100%;
    max-width: 420px;
    height: 358px;
    object-fit: contain;
    border: 1px solid #989898;
}

.catalog-main-image-popup {
    width: 100%;
    max-width: 434px;
    height: 358px;
    object-fit: contain;
    border: 1px solid #989898;
}

.catalog-information-description-wrapper {
    width: calc(100% - 556px - 32px);
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.catalog-information-title {
    font-weight: 700;
    font-size: 16px;
    line-height: 20px;
    color: #4F4F4F;
    margin: 0 0 4px;
}

.catalog-information-description {
    font-weight: 400;
    font-size: 16px;
    line-height: 20px;
    color: #4F4F4F;
    margin: 0 0 4px;
}

.catalog-information-size {
    display: flex;
    align-items: center;
    gap: 24px;
}

.catalog-description-price {
    font-weight: 700;
    font-size: 22px;
    line-height: 24px;
    color: #4F4F4F;
    margin: 4px 0 24px;
}

.request-benefit-btn {
    display: inline-block;
    text-decoration: none;
    background-color: #00A651;
    border-radius: 50px;
    font-weight: 400;
    font-size: 16px;
    line-height: 16px;
    text-align: center;
    letter-spacing: 0.0357143em;
    color: #FFFFFF;
    padding: 14px;
    border: 1px solid #00A651;
    width: 100%;
    max-width: 252px;
    transition: all 0.2s linear;
    cursor: pointer;
}

    .request-benefit-btn:hover {
        background-color: transparent;
        color: #00A651;
    }

.considerations-and-acquisition-benefits {
    display: flex;
    align-items: flex-start;
    gap: 32px;
    margin-top: 40px;
    flex-wrap: wrap;
}

.considerations-wrapper, .acquisition-benefits-wrapper {
    width: calc(50% - 16px);
}

.considerations-title, .acquisition-benefits-title {
    font-weight: 700;
    font-size: 16px;
    line-height: 20px;
    color: #4F4F4F;
    border-bottom: 2px solid #ADE2C7;
    padding-bottom: 8px;
    margin: 0 0 24px;
}

.considerations-lists, .acquisition-benefits-lists {
    list-style: decimal;
}

    .considerations-lists li, .acquisition-benefits-lists li {
        font-weight: 400;
        font-size: 16px;
        line-height: 20px;
        color: #4F4F4F;
        margin-bottom: 4px;
    }

@media only screen and (max-width: 1200px) {
    .catalog-images-slider {
        flex-direction: column;
        max-width: 350px;
    }

    .catalog-image-list {
        flex-direction: row;
        overflow: auto;
        width: 100%;
        justify-content: flex-start;
    }

    .catalog-slider-image {
        width: 80px;
        height: 80px;
    }

    .catalog-information-description-wrapper {
        width: calc(100% - 350px - 32px);
    }
}

@media only screen and (max-width: 991px) {
    .catalog-images-slider {
        flex-direction: column;
        max-width: 434px;
    }

    .catalog-information-description-wrapper {
        width: calc(100% - 434px - 32px);
    }

    .considerations-and-acquisition-benefits {
        gap: 0;
    }

    .considerations-wrapper, .acquisition-benefits-wrapper {
        width: 100%;
    }
}

@media only screen and (max-width: 767px) {
    .catalog-main-image {
        height: 250px;
    }

    .catalog-main-image-popup {
        height: 250px;
    }

    .catalog-slider-image {
        width: 60px;
        height: 60px;
    }

    .catalog-information-description-wrapper {
        width: 100%;
    }

    .catalog-information-size {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
}

/*Product Catalog Detail Page CSS End*/

/*Application Process Page*/
.download-catalog-form-section {
    background-color: #FFFFFF;
    border: 1px solid #F0F0F0;
    box-shadow: 0px 4px 8px rgba(44, 60, 47, 0.2);
    border-radius: 20px;
    padding: 32px 40px;
    margin: 0 0 24px;
    display: flex;
    align-items: center;
    gap: 16px;
}

.download-catalog-form-section-number {
    display: block;
    min-width: 60px;
    height: 60px;
    background-color: #E9F7F3;
    border-radius: 50%;
    font-weight: 700;
    font-size: 36px;
    line-height: 60px;
    color: #3FBC7F;
    text-align: center;
}

.download-catalog-form-title {
    font-weight: 700;
    font-size: 18px;
    line-height: 22px;
    color: #4F4F4F;
    margin: 0 0 8px;
}

.download-catalog-form-content {
    font-weight: 500;
    font-size: 16px;
    line-height: 20px;
    color: #4F4F4F;
    margin: 0;
}

.download-catalog-form-list-content {
    font-weight: 500;
    font-size: 16px;
    line-height: 20px;
    color: #4F4F4F;
    margin: 0 0 0 24px;
}

.download-catalog-btn {
    font-weight: 700;
    font-size: 16px;
    line-height: 16px;
    letter-spacing: 0.0357143em;
    color: #00A651;
    display: flex;
    align-items: center;
    text-decoration: none;
    width: 180px;
    gap: 8px;
}

.download-catalog-form-notice {
    font-weight: 400;
    font-size: 16px;
    line-height: 20px;
    color: #4F4F4F;
    margin: 10px 0 30px;
    display: flex;
    align-items: flex-start;
    gap: 4px;
}

    .download-catalog-form-notice a {
        color: #F45F56;
        text-decoration: none;
    }

.benefits-of-submitted-application {
    background-color: #FFFFFF;
    border: 1px solid #F0F0F0;
    box-shadow: 0 4px 8px rgba(44, 60, 47, 0.2);
    border-radius: 16px;
    padding: 32px 20px 32px 32px;
}

.benefits-of-submitted-application-section-title {
    font-weight: 700;
    font-size: 18px;
    line-height: 22px;
    color: #4F4F4F;
    display: inline-block;
    border-bottom: 2px solid #3FBC7F;
    padding-bottom: 5px;
    margin: 0 0 24px 16px;
}

.benefits-of-submitted-application-title {
    font-weight: 700;
    font-size: 18px;
    line-height: 22px;
    color: #4F4F4F;
    margin: 0 0 16px 16px;
}

.benefits-of-submitted-application-table-wrapper {
    width: 100%;
    overflow: hidden;
    padding-bottom: 56px;
    margin-bottom: 22px;
    border-bottom: 1px solid #D6F1E3;
    position: relative;
}

    .benefits-of-submitted-application-table-wrapper:last-child {
        /*border: 0;*/
        border-bottom: 1px solid #D6F1E3;
    }

    .benefits-of-submitted-application-table-wrapper::-webkit-scrollbar {
        width: 4px;
        height: 4px;
    }

.benefits-of-submitted-application-table {
    max-height: 110px;
    overflow: hidden;
    display: block;
    transition: height 0.2s linear;
}

.benefits-of-submitted-application-table-title {
    text-align: left;
    font-weight: 700;
    font-size: 16px;
    line-height: 20px;
    color: #4F4F4F;
    padding: 0 16px 12px;
}

.benefits-of-submitted-application-table-tab {
    font-weight: 400;
    font-size: 16px;
    line-height: 20px;
    color: #7B7B7B;
    padding: 0 16px 16px;
}

.benefits-of-submitted-application-no-benefits {
    font-weight: 700;
    font-size: 16px;
    line-height: 20px;
    color: #7B7B7B;
    text-align: center;
    margin: 32px 0;
}

.show-more-submitted-applications-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-weight: 400;
    font-size: 16px;
    line-height: 20px;
    color: #00A651;
    text-decoration: none;
    max-width: 140px;
    margin: auto;
    position: absolute;
    bottom: 24px;
    left: 0;
    right: 0;
}

.catalog-calendar-title {
    font-weight: 700;
    font-size: 22px;
    line-height: 24px;
    color: #4F4F4F;
    margin: 0 0 8px;
    padding-top: 32px;
    text-align: left;
}

.catalog-calendar-section .close {
    position: absolute;
    top: 8px;
    right: 0;
}

.catalog-list-details-modal .close {
    position: absolute;
    top: 8px;
    right: 24px;
    margin: 0;
}

.catalog-calendar-section {
    position: relative;
    padding: 0 8px 0 20px;
}

    .catalog-calendar-section .catalog-calendar-description {
        font-weight: 400;
        font-size: 16px;
        line-height: 20px;
        color: #4F4F4F;
        margin: 0 0 24px;
        text-align: left;
    }

.catalog-calendar-table-wrapper {
    width: 100%;
    overflow: auto;
    max-height: 580px;
}

.catalog-calendar-table {
    width: 100%;
    border-collapse: collapse;
}

.catalog-calendar-table-title {
    font-weight: 700;
    font-size: 16px;
    line-height: 20px;
    color: #000000;
    text-align: left;
    padding: 8px 16px;
}

.catalog-calendar-table-tab {
    font-weight: 700;
    font-size: 16px;
    line-height: 20px;
    color: #7B7B7B;
    text-align: left;
    padding: 8px 16px;
}

    .catalog-calendar-table-tab.number {
        color: #000000;
        text-align: center;
    }

.catalog-calendar-table-title.number {
    text-align: center;
}

.catalog-calendar-table > tbody > tr:nth-child(odd) {
    background: rgba(235, 248, 241, 0.5);
}

.catalog-benefits-included-in-package {
    margin: 40px 0 56px;
}

.catalog-benefits-included-in-package-title {
    font-weight: 700;
    font-size: 16px;
    line-height: 20px;
    color: #4F4F4F;
    padding: 0 0 8px;
    border-bottom: 2px solid #ADE2C7;
    margin: 0 0 24px;
}

.catalog-benefits-included-in-package-filters {
    display: flex;
    align-items: center;
    margin: 0 0 12px;
}

    .catalog-benefits-included-in-package-filters .radio-button input[type="radio"] + label:after {
        background-color: #ffffff;
        border-color: #989898;
    }

    .catalog-benefits-included-in-package-filters .radio-button input[type="radio"]:checked + label:before {
        background-color: #00A651;
        z-index: 1;
    }

    .catalog-benefits-included-in-package-filters .radio-button input[type="radio"]:checked + label:after {
        border-color: #00A651;
    }

.upload-catalog-form-progress {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.download-catalog-form-button {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width:30%;
}

.upload-catalog-form-progress .title-and-remove-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-direction: revert;
    font-weight: 500;
    font-size: 16px;
    line-height: 20px;
    color: #272727;
    overflow-wrap: anywhere;
}

.upload-catalog-form-progress .progress-bar-and-percentage {
    display: flex;
    align-items: center;
    gap: 16px;
    justify-content: space-between;
}

    .upload-catalog-form-progress .progress-bar-and-percentage .progress-full-width {
        width: calc(100% - 16px - 32px);
        display: block;
        background-color: #E9F7F3;
        border-radius: 12px;
        height: 8px;
    }

    .upload-catalog-form-progress .progress-bar-and-percentage .percentage {
        font-weight: 500;
        font-size: 14px;
        line-height: 18px;
        color: #6ACBA0;
    }

    .upload-catalog-form-progress .progress-bar-and-percentage .progress-full-width .progress-width {
        background-color: #3FBC7F;
        border-radius: 12px;
        display: block;
        height: 100%;
    }
/*Application Process Page End*/

/*Breadcrumb Code Start*/
.breadcrumb-wrapper {
    margin-top: 26px;
}

.breadcrumb {
    padding: 0;
    margin: 0;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 40px;
}

.breadcrumb-item {
    font-weight: 700;
    font-size: 16px;
    line-height: 20px;
    position: relative;
}

    .breadcrumb-item a {
        color: #7B7B7B;
        text-decoration: none;
    }

    .breadcrumb-item.active {
        color: #00A651;
    }

    .breadcrumb-item:after {
        content: '';
        width: 8px;
        height: 100%;
        background-image: url(../images/chevron_right-gray-icon.svg);
        position: absolute;
        left: -22px;
        background-repeat: no-repeat;
        background-position: center;
        background-size: 10px;
    }

    .breadcrumb-item.active:after {
        background-image: url(../images/chevron_right-green-icon.svg);
    }

    .breadcrumb-item:first-child:after {
        content: unset;
    }
/*Breadcrumb Code End*/
/*=======================Catalog Section End=======================*/

.download-catalog-form-description {
    width: 60%;
}

/*Product Details Page CSS*/
.your-change-is-here-tag-line {
    color: #4F4F4F;
    font-family: "BryantProRegular", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 20px;
    margin: 0 0 24px;
}

.exchange-rate-list-box .table {
    width: 100%;
    border-radius: 8px;
    border: 1px solid #C4C4C4;
    background-color: #FFF;
    margin-bottom: 32px;
    text-align: left;
}

    .exchange-rate-list-box .table th {
        color: #4F4F4F;
        font-family: "BryantProRegular", sans-serif;
        font-size: 16px;
        font-weight: 700;
        line-height: 20px;
        padding: 10px 42px;
        background-color: #F0F0F0;
    }

    .exchange-rate-list-box .table .not-found-message {
        color: #989898;
        text-align: center;
        font-family: "BryantProRegular", sans-serif;
        font-size: 16px;
        font-weight: 700;
        line-height: 20px;
        padding: 48px 16px;
    }

    .exchange-rate-list-box .table .exchange-rate-title {
        color: #4F4F4F;
        font-family: "BryantProRegular", sans-serif;
        font-size: 16px;
        font-weight: 700;
        line-height: 20px;
        margin: 0;
    }

    .exchange-rate-list-box .table .exchange-rate-date {
        color: #989898;
        font-family: "BryantProRegular", sans-serif;
        font-size: 14px;
        font-weight: 400;
        line-height: 18px;
        margin: 4px 0;
    }

    .exchange-rate-list-box .table .exchange-rate-link {
        color: #00A651;
        font-family: "BryantProRegular", sans-serif;
        font-size: 16px;
        font-weight: 400;
        line-height: 20px;
        text-decoration: none;
    }

    .exchange-rate-list-box .table td {
        padding: 16px 48px;
    }

    .exchange-rate-list-box .table .exchange-rate-last-update {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .exchange-rate-list-box .table .in-process {
        color: #4F4F4F;
        font-family: "BryantProRegular", sans-serif;
        font-size: 16px;
        font-weight: 700;
        line-height: 20px;
        margin: 0 0 4px;
    }

    .exchange-rate-list-box .table .in-process-date {
        color: #989898;
        font-family: "BryantProRegular", sans-serif;
        font-size: 14px;
        font-weight: 400;
        line-height: 18px;
        margin: 0;
    }

/*Product Details Page CSS End*/

/*Historical Changes (Pages) Design CSS*/
.product-detail-page-title {
    color: #4F4F4F;
    font-family: "BryantProRegular", sans-serif;
    font-size: 30px;
    font-weight: 700;
    line-height: 32px;
    width: 100%;
    max-width: 826px;
    margin: 50px 0 0;
}

.update-history-time-of-product {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 16px;
    flex-wrap: wrap;
    width: calc(100% - 32px);
    max-width: 664px;
    margin: 22px 82px;
}

.update-history-time-of-product-title {
    color: #4F4F4F;
    font-family: "BryantProRegular", sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 20px;
    margin: 0;
}

.update-history-time-of-product-application-date {
    color: #4F4F4F;
    font-family: "BryantProRegular", sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 20px;
    width: calc(100% - 32px);
    max-width: 664px;
    margin: 22px 82px auto;
}

.update-history-time-of-product-main-title {
    color: #4F4F4F;
    font-family: "BryantProRegular", sans-serif;
    font-size: 22px;
    font-weight: 700;
    line-height: 24px;
    margin: 0;
}

.change-purchase-price-table-wrapper {
    border-radius: 20px;
    border: 1px solid #D4D4D4;
    background: #FFF;
    width: 100%;
    /*max-width: 826px;*/
    margin: 40px auto 0;
    padding: 40px 0;
}

    .change-purchase-price-table-wrapper .registration-form-heading-title {
        width: calc(100% - 32px);
        max-width: 700px;
        margin: auto auto auto 80px;
    }

    .change-purchase-price-table-wrapper .product-full-information {
        width: 100%;
        max-width: 700px;
        margin: auto auto auto 80px;
    }

.change-purchase-price-table-wrapper-title {
    color: #4F4F4F;
    font-family: 'BryantProRegular', sans-serif;
    font-size: 22px;
    font-weight: 700;
    line-height: 24px;
    margin: 0;
    padding: 0 80px 34px;
}

.change-purchase-price-table .checkbox-container-hading, .change-purchase-price-table .change-purchase-price-content {
    padding: 0 80px;
    border-radius: 0;
    justify-content: flex-start;
}

.change-purchase-price-table .change-purchase-price-data {
    justify-content: flex-start;
    align-items: center;
}

.change-purchase-price-table-justification-text {
    color: #4F4F4F;
    font-family: "BryantProRegular", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 20px;
    margin: 0 82px 20px;
}

.service-points-discount {
    color: #4F4F4F;
    font-family: 'BryantProRegular', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 20px;
    margin: 0 82px 8px;
    width: 100%;
    max-width: 664px;
}

    .service-points-discount span {
        font-weight: 700;
    }

.service-points-discount-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /*gap: 32px;*/
    width: 100%;
    /*max-width: 664px;*/
    max-width: 820px;
    /*margin: 0 80px 8px;*/
}

.service-points-discount-storetype {
    color: #4F4F4F;
    font-family: 'BryantProRegular', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 20px;
    margin: 0 82px 8px;
}

    .service-points-discount-storetype span {
        font-weight: 700;
    }

.service-points-discount-startdate {
    color: #4F4F4F;
    font-family: 'BryantProRegular', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 20px;
    margin: 0 82px 8px;
    width: 100%;
    max-width: 664px;
}

    .service-points-discount-startdate span {
        font-weight: 700;
    }

.service-points-discount-enddate {
    color: #4F4F4F;
    font-family: 'BryantProRegular', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 20px;
    margin: 0 82px 8px;
    width: 100%;
    max-width: 664px;
}

    .service-points-discount-enddate span {
        font-weight: 700;
    }

.change-purchase-price-table-wrapper .notification-right-message-body-included-file {
    width: 100%;
    max-width: 664px;
    margin: 0 82px 8px;
    padding: 22px 24px 22px 20px;
    gap: 24px;
}

.change-purchase-price-table-wrapper .notification-right-included-file-name {
    font-weight: 400;
    margin: 0;
}

.change-purchase-price-table-wrapper .notification-right-included-file-icon {
    margin: 0;
}

.single-product-page .product-full-information {
    padding: 32px;
    border: 1px solid #D4D4D4;
}

.exchange-rate-last-update {
    display: flex;
    align-items: center;
    gap: 12px;
}

.exchange-rate-last-update-in-process-date .in-process {
    color: #4F4F4F;
    font-family: "BryantProRegular", sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 20px;
    margin: 0 0 4px;
}

.exchange-rate-last-update-in-process-date .in-process-date {
    color: #989898;
    font-family: "BryantProRegular", sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 18px;
    margin: 0;
}

@media only screen and (max-width: 991px) {
    .single-product-page .product-full-information {
        padding: 16px;
        flex-direction: column;
        align-items: flex-start;
    }

    .single-product-page .product-detail-parent {
        width: 100%;
    }
}

@media only screen and (max-width: 767px) {
    .change-purchase-price-table .checkbox-container-hading, .change-purchase-price-table .change-purchase-price-content {
        padding: 0 16px;
    }

    .change-purchase-price-table .price-change-table-main-title, .change-purchase-price-table .change-purchase-detail {
        width: 100%;
    }

    .change-purchase-price-table-wrapper-title {
        padding: 40px 16px;
    }

    .change-purchase-price-table-justification-text {
        margin-left: 16px;
        margin-right: 16px;
    }

    .single-product-page .product-detail-parent {
        flex-direction: column;
        align-items: flex-start;
    }

    .single-product-page .product-detail {
        width: 100%;
    }

    .single-product-page .request-change-btn {
        max-width: 100%;
    }
}

/*Historical Changes (Pages) Design CSS End*/