button[name="add-to-cart"] {

}

.modal-container {
    display          : flex;
    align-items      : start;
    justify-content  : center;
    position         : fixed;
    z-index          : 999;
    left             : 0;
    top              : 0;
    width            : 100%;
    height           : 100%;
    overflow         : auto;
    background-color : rgba(0, 0, 0, 0.4);
    padding-top      : 40px;
}

.screen-content {
    position        : fixed;
    left            : 50%;
    top             : 40%;
    transform       : translate(-50%, -50%);
    margin          : 10% auto;
    padding         : 20px;
    width           : 100%;
    max-width       : 600px;
    display         : flex;
    justify-content : center;
    flex-direction  : column;
    align-items     : start;
}

.login.popup-content {
    background-color : transparent;
}

.error.screen-content,
.recover.screen-content {
    z-index          : 1001;
    color            : #3f190e;
    background-color : white;
    border           : 1px solid #ffa82f;
    border-radius    : 15px;
    box-shadow       : 0 0 10px rgba(0, 0, 0, 0.5);
    max-height       : 80vh;
    overflow-y       : auto;
}

.error-popup {
    overflow-y : auto;
}

.error-popup-content {
    overflow-y : auto;
}

.error-popup-content h1 {
    font-size : 1.25em;
}

.error-popup-content p {
    font-size   : 0.8em;
    line-height : 1.2;
}

.error-popup-content ul {
    font-size : 0.75em;
}

.close-button-container {
    display         : flex;
    justify-content : end;
    width           : 100%;
    line-height     : 1;
}

.close-button-container.registration-container {
    padding          : 5px;
    background-color : #ebeef1;
    border-radius    : 5px;
}

.close-btn {
    color            : white;
    background-color : #ff2b15;
    width            : 20px;
    height           : 20px;
    font-size        : 20px;
    font-weight      : bold;
    text-align       : center;
    line-height      : 0.9;
    border-radius    : 50%;
}

.close-btn:hover,
.close-btn:focus {
    color  : black;
    cursor : pointer;
}

.read-and-comply {
    display         : flex;
    justify-content : center;
}

#i-read-and-will-comply {
    font-family      : Roboto, verdana, Arial, sans-serif;
    font-size        : x-small;
    background-color : #b7b7b7;
    color            : black;
    padding          : 5px 10px;
    border           : solid black 1px;
    border-radius    : 3px;
}

#i-read-and-will-comply:hover {
    background-color : black;
    color            : #a7abb2;
}

.login-section, .signup-section {
    width : 45%;
}

.forgot-password {
    display     : flex;
    margin      : 5px 2px;
    align-items : end;
    font-family : Lato, Verdana, Arial, Helvetica, sans-serif;
    font-size   : small;
    font-style  : italic;
    font-weight : 600;
}

.forgot-password-link {
    color            : #2c1f19;
    background-color : transparent;
}

.forgot-password-link:hover {
    color  : #b64b13;
    cursor : pointer;
}

.action-btn,
.availability-close-btn {
    font-size        : small;
    font-weight      : 800;
    margin           : 10px 5px 10px 5px;
    background-color : #ffa82f;
    border           : solid 1px white;
    border-radius    : 5px;
}

.availability-close-btn {
    padding : 5px 10px;
}

.action-btn.form-btn {
    width   : 82px;
    padding : 5px;
}

.availability-close-btn:hover {
    filter : brightness(120%);
    cursor : pointer;
}

#create-account:disabled,
#create-account:disabled:hover {
    font-size        : small;
    font-weight      : 800;
    margin           : 10px 5px 10px 5px;
    background-color : #ffa82f;
    border           : solid 1px white;
    border-radius    : 5px;
    padding          : 5px 10px;
    display          : unset;
    color            : white;
    cursor           : unset;
    opacity          : 50%;
}

.edit-profile-btn-area {
    flex       : 1;
    margin-top : 20px;
}

.center-btn {
    display         : flex;
    justify-content : center;
}

.buttons-area {
    display         : flex;
    justify-content : space-between;
}

#login-process-main-container .input-area {
    display        : flex;
    flex-direction : column;
    margin         : 0 5px;
}

#login-process-main-container input.input-field {
    font-family   : Lato, Verdana, Arial, Helvetica, sans-serif;
    font-size     : small;
    line-height   : 1.1;
    margin-bottom : 8px;
    border-radius : 3px;
    max-width     : unset;
    border        : solid 1px #ddd;
    box-shadow    : unset;
}

button.tablink {
    font-family      : Lato, Verdana, sans-serif;
    background-color : #ded3c4;
    color            : white;
    float            : left;
    border           : none;
    outline          : none;
    cursor           : pointer;
    padding          : 3px 10px;
    font-size        : 15px;
    width            : 50%;
    opacity          : 1;
}

button.tablink:hover {
    background-color : #ad6501;
}

/* Tab content style  */
.tabcontent {
    margin           : 0;
    width            : 100%;
    border           : #ffa82f solid 1px;
    border-radius    : 0 15px 15px 15px;
    color            : #3f190e;
    background-color : white;
    padding          : 15px 20px;
    height           : 100%;
}

.tabcontent h3 {
    color  : #3f190e;
    margin : 0 0 0 5px;
}

button.tablink.active {
    font-weight      : 900;
    background-color : #ffa82f;
}

.left-tab {
    border-radius : 10px 0 0 0;
}

.right-tab {
    border-radius : 0 10px 0 0;
}

.new-password-container {
    display         : flex;
    flex-wrap       : wrap;
    gap             : 4px;
    justify-content : space-between;
}

.new-password {
    flex-grow  : 1;
    flex-basis : calc(50% - 2px);
    min-width  : 200px;
}

#recover-password-content {
    width : 100%;
}

.description-text {
    font-family : Lato, Verdana, Arial, Helvetica, sans-serif;
    font-size   : medium;
    font-style  : italic;
    text-align  : justify;
    font-weight : 600;
    color       : #2c1f19;
    padding     : 5px 3px 10px 3px;
}

.back-in-text {
    display          : inline-block;
    background-color : #ffa82f;
    color            : white;
    padding          : 1px 5px;
    border-radius    : 5px;
    font-size        : 13px;
    font-weight      : 800;
    line-height      : 1.5;
}

.feedback-text {
    font-family   : Lato, Verdana, Arial, Helvetica, sans-serif;
    font-size     : 15px;
    text-align    : justify;
    font-weight   : 400;
    margin-bottom : 15px
}

#registration-main-container input,
#registration-main-container select,
#registration-main-container textarea {
    line-height : normal;
}

#registration-main-container select {
    height : 32px;
}

#registration-main-container .section {
    display        : flex;
    flex-direction : column;
    align-items    : center;
    margin-top     : 10px;
    border         : solid #7bb8bd 1px;
    border-radius  : 5px;
    padding        : 5px;
}

.subcontainer {
    height        : fit-content;
    max-width     : 1024px;
    padding       : 5px;
    border-radius : 5px;
    background    : white;
}

#registration-main-container .section-title {
    font-family    : Lato, Verdana, Arial, Helvetica, sans-serif;
    font-size      : x-large;
    text-align     : center;
    text-transform : uppercase;
    font-weight    : 800;
}

.separation-line {
    border-bottom : #7bb8bd solid 1px;
    height        : 1px;
    width         : 80%;
    margin        : 0 0 10px 0;
}

.infobox {
    padding          : 8px;
    margin-top       : 10px;
    border           : solid #3f190e 1px;
    border-radius    : 5px;
    background-color : #ffedc1;
    color            : #3f190e;
}

.infobox-text-content {
    font-family : Lato, Verdana, Arial, Helvetica, sans-serif;
    font-size   : medium;
    font-style  : italic;
    text-align  : center;
    margin      : 0 20px 10px 20px;
}

#lost-password-in-error-feedback {
    color : #3f190e;
}

#lost-password-in-error-feedback:hover {
    color           : #ffefa6;
    text-decoration : underline;
    cursor          : pointer;
}

#registration-subcontainer {
    margin : 15px;
    width  : 100%;
}

.details {
    background-color : #d2d2d257;
    border           : #fdf7f7 solid 2px;
    border-radius    : 5px;
    margin           : 0;
    width            : 100%;
    display          : flex;
    flex-wrap        : wrap;
    gap              : 3px;
    padding          : 3px;
}

.details-block {
    display          : flex;
    flex-wrap        : wrap;
    flex             : 1;
    min-width        : 300px;
    border           : solid #ffffff 1px;
    border-radius    : 5px;
    margin           : 3px;
    background-color : #7bb8bd;
    padding          : 3px;
    align-items      : flex-start;
    align-content    : flex-start
}

.fieldbox {
    font-family : Lato, Verdana, Arial, Helvetica, sans-serif;
    font-size   : small;
    margin      : 3px;
    flex        : 1;
}

.fieldbox input,
.fieldbox select,
.fieldbox textarea {
    font-size     : small;
    color         : #3f190e;
    border        : solid 1px white;
    border-radius : 3px;
}

.fieldbox input::placeholder,
.fieldbox select::placeholder,
.fieldbox textarea::placeholder {
    color : #b3b3b3;
}

.fieldbox input:disabled,
.fieldbox select:disabled,
.fieldbox textarea:disabled {
    background-color : #f8f3ef;
    color            : #b3b3b3;
}

.short-field-03.fieldbox {
    flex : 0.3;
}

.short-field-06.fieldbox {
    flex : 0.6;
}

.parent_niss.fieldbox,
.child_niss.fieldbox {
    flex : 0.45;
}

.min50 {
    width     : 100%;
    min-width : 50px;
}

.min120 {
    width     : 100%;
    min-width : 120px;
}

.min180 {
    width     : 100%;
    min-width : 180px;
}

.min290 {
    width     : 100%;
    min-width : 290px;
}

.break {
    width : 100%;
}

.spacer {
    width  : 100%;
    height : 10px;
}

.child.selector {
    flex        : 0.45;
    margin      : 4px;
    font-family : Lato, Verdana, Arial, Helvetica, sans-serif;
    font-size   : small;
}

.select-or-create-child-profile {
    justify-content : center;
    align-items     : center;
}

.details-overlay {
    position         : absolute;
    top              : 0;
    left             : 0;
    width            : 100%;
    height           : 100%;
    background-color : rgb(33 26 26 / 34%);
    display          : flex;
    justify-content  : center;
    align-items      : center;
    z-index          : 2000;
}

/* Animation Keyframes */
@keyframes spin {
    from {
        transform : rotate(0deg);
    }
    to {
        transform : rotate(360deg);
    }
}

/* Animation style*/
.spinner {
    border            : 4px solid rgba(0, 0, 0, .1);
    width             : 40px;
    height            : 40px;
    border-radius     : 50%;
    border-left-color : #09f;
    animation         : spin 1s linear infinite;
}

/* Animation style*/
.spinnner {
    border             : 8px solid #0099FF80;
    width              : 40px;
    height             : 40px;
    border-radius      : 50%;
    border-left-color  : #0099FFFF;
    border-right-color : #0099FF60;
    animation          : spin 1s linear infinite;
}

.nn-bcss {
    font-family : Lato, Verdana, Arial, Helvetica, sans-serif;
    font-size   : small;
}

#create-child-btn:disabled {
    cursor  : unset;
    opacity : 0.7;
}

.notif-box {
    margin     : 0 30px;
    box-shadow : 7px 7px 7px #5c4f4f;
}

#notif-box-inner-container {
    background    : #ffffff;
    border-radius : 5px;
    border        : solid #ff9e53 1px;
    padding       : 10px;
}

#notif-box-message {
    font-family : Lato, Verdana, Arial, Helvetica, sans-serif;
    font-size   : medium;
    font-weight : 600;
    text-align  : center;
    color       : black;
    padding     : 5px 10px;
}

#notif-box-btn-area {
    display         : flex;
    justify-content : center;
}

.notif-box-btn {
    font-family   : Lato, Verdana, Arial, Helvetica, sans-serif;
    font-size     : small;
    background    : #5e5f5e;
    color         : white;
    font-weight   : 800;
    margin        : 5px;
    border-radius : 5px;
    padding       : 5px 10px;
    border        : solid black 1px;
}

.global-overlay {
    position         : absolute;
    top              : 0;
    left             : 0;
    width            : 100%;
    height           : 100%;
    background-color : rgba(50, 99, 129, 0.4);
    display          : flex;
    justify-content  : center;
    align-items      : center;
    z-index          : 3000;
}

.empty_mandatory_field {
    background-color : #ffdbe3;
}

.empty_mandatory_field::placeholder,
.warning-red-text {
    color : #cb0000 !important;
}

.password_element {
    font-weight : 800;
}

.password_element.red_element {
    color : #CB0000;
}

.password_element.green_element {
    color : #47d221;
}

.field-label {
    font-size    : x-small;
    color        : white;
    padding-left : 8px;
}

.field-label-new_pw,
.field-label-pw {
    font-size    : x-small;
    padding-left : 8px;
    color        : #4c3b1f;
}

#password_requirements {
    color       : #4c3b1f;
    font-size   : small;
    font-style  : italic;
    text-align  : center;
    line-height : 1.25;
}

.red_field,
.wrong_pw_confirmation,
.invalid_password {
    background-color : #ff0e0e;
    color            : white !important;
}

.new-password-subcontainer {
    display        : flex;
    flex           : 1;
    flex-direction : column;
    color          : #b64b13;
}

.editing {
    border : solid 2px #cb0000;
}

.unchanged {
    border : solid 2px #008ba0;
}

.text-testing {
    background-color : yellow !important;
}

.title-group {
    display         : flex;
    flex-direction  : row;
    justify-content : center;
    align-items     : center;
}

.toggle-arrow {
    width         : 0;
    height        : 0;
    border-left   : 5px solid transparent;
    border-right  : 5px solid transparent;
    border-bottom : 10px solid #18373a;
    cursor        : pointer;
    transition    : transform 0.3s ease;
    margin-left   : 10px;
}

.toggle-arrow.up {
    transform : rotate(180deg);
}

.small-title {
    font-size : medium !important;
}

.tooltip {
    color            : #4f4848;
    background-color : #ffedc1;
    padding          : 4px 8px;
    border-radius    : 4px;
    position         : fixed;
    z-index          : 10;
    display          : none;
    opacity          : 1;
    transition       : opacity 2s ease-out;
    width            : fit-content;
}

.center-selector {
    width      : 100%;
    text-align : center;
}

#child-selector {
    min-width : 300px;
}

.green-bg {
    background-color : #8fff94;
    transition       : background-color 1s ease;
}

.fade-out {
    transition       : background-color 1s ease;
    background-color : transparent !important;
}

/*Availabilities styles*/

#availabilities-container {
    position        : relative;
    display         : flex;
    justify-content : space-around;
    width           : 100%;
    margin          : 20px 0;
    height          : auto;
}

#grid-container {
    position        : relative;
    display         : flex;
    justify-content : space-around;
    width           : 100%;
    height          : auto;
}

.availabilities-day_col {
    flex           : 1;
    display        : flex;
    flex-direction : column;
}

.availabilities-day_header {
    font-family      : Lato, Verdana, Arial, Helvetica, sans-serif;
    font-size        : small;
    font-weight      : 800;
    text-align       : center;
    background-color : #96b1b9;
    color            : white;
    padding          : 0 5px;
    border           : solid 1px grey;
}

.availabilities-slot {
    font-family : Lato, Verdana, Arial, Helvetica, sans-serif;
    font-size   : small;
    margin      : 0;
    padding     : 0 5px;
    text-align  : center;
    height      : 24px;
}

.green_slot {
    background-color : #2fe1b0;
    color            : #48797f;
    border           : solid 1px #48797f;
}

.orange_slot {
    background-color : #ff843e;
    color            : #fdebe2;
    border           : solid 1px #e75702;
}

.orange_slot:hover,
.green_slot:hover {
    cursor : pointer;
    filter : brightness(120%);
}

.red_slot {
    background-color : #ef5555;
    color            : #f6b8b8;
    border           : solid 1px #ce1f37;
}

.red_slot:hover {
    cursor : not-allowed;
}

.empty_slot {
    background-color : #b6bdbf;
    color            : white;
    border           : dashed 1px #b0b7b7;
}

#availabilities-loader {
    position        : absolute;
    top             : 0;
    left            : 0;
    width           : 100%;
    height          : 100%;
    background      : rgba(255, 255, 255, 0.8);
    display         : flex;
    justify-content : center;
    align-items     : center;
    z-index         : 100;
}

.spinner {
    border            : 4px solid rgba(0, 0, 0, 0.1);
    width             : 36px;
    height            : 36px;
    border-radius     : 50%;
    border-left-color : #09f;
    animation         : spinning 1s infinite linear;
}

@keyframes spinning {
    0% {
        transform : rotate(0deg);
    }
    100% {
        transform : rotate(360deg);
    }
}

#availability-error-popup {
    position        : absolute;
    top             : 0;
    left            : 0;
    width           : 100%;
    height          : 100%;
    background      : rgba(0, 0, 0, 0.2);
    display         : flex;
    justify-content : center;
    align-items     : center;
    z-index         : 200;
}

.availability-popup-content {
    font-size     : medium;
    background    : white;
    padding       : 20px;
    border-radius : 5px;
    box-shadow    : 0 0 15px rgba(0, 0, 0, 0.8);
    text-align    : center;
}

#availability-error-message {
    margin-bottom : 20px;
}

.checkbox-field-label {
    width       : fit-content;
    font-size   : small;
    margin-left : 5px;
    color       : white;
}

.modified {
    border : 1px solid #ff01d9 !important;
}

.form-overlay {
    position         : absolute;
    top              : 0;
    left             : 0;
    width            : 100%;
    height           : 100%;
    background-color : rgb(33 26 26 / 34%);
    display          : flex;
    justify-content  : center;
    align-items      : center;
    z-index          : 2000;
}

#parent_tax_doc_request {
    width : fit-content;
}

.tax_doc_request_container {
    display         : flex;
    align-items     : center;
    justify-content : start;
    height          : 55px;
}

#tax-certificate-container {
    height      : 60px;
    display     : flex;
    align-items : start;
}

.tax-certificate {
    display         : flex;
    justify-content : left;
    align-items     : center;
    width           : 100%;
}

.tax-certificate input {
    margin-left : 5px;
}

.tax_certificate_area {
    justify-content : end;
    display         : flex;
    width           : 100%;
    align-items     : center;
    height          : 55px;
}

.niss_area {
    flex : 0.8;
}

/* Animation Keyframes */
@keyframes spin {
    from {
        transform : rotate(0deg);
    }
    to {
        transform : rotate(360deg);
    }
}

/* Animation style*/
.spinner {
    border            : 4px solid rgba(0, 0, 0, .1);
    width             : 40px;
    height            : 40px;
    border-radius     : 50%;
    border-left-color : #09f;
    animation         : spin 1s linear infinite;
}

.tooltip {
    color            : #4f4848;
    background-color : #ffedc1;
    padding          : 4px 8px;
    border-radius    : 4px;
    position         : fixed;
    z-index          : 10;
    display          : none;
    opacity          : 1;
    transition       : opacity 2s ease-out;
    width            : fit-content;
}

.modal {
    display          : none;
    position         : fixed;
    z-index          : 10000;
    left             : 0;
    top              : 0;
    width            : 100%;
    height           : 100%;
    overflow         : auto;
    background-color : rgb(0, 0, 0);
    background-color : rgba(0, 0, 0, 0.4);
    align-items      : center;
    justify-content  : center;
}

.modal-content {
    display          : flex;
    flex-direction   : column;
    justify-content  : center;
    background-color : #fffed3;
    margin           : 15% auto;
    padding          : 20px;
    border           : 1px solid #888;
    border-radius    : 5px;
    width            : 400px;
}

#modal-title {
    text-align  : center;
    font-size   : large;
    font-weight : 800;
}

#modal-message {
    font-size  : 14px;
    text-align : justify;
}

.modal-button {
    margin-top       : 20px;
    padding          : 3px 20px;
    background-color : #505360;
    color            : #fff;
    border           : none;
    border-radius    : 5px;
    cursor           : pointer;
    font-size        : 16px;
    width            : fit-content;
}

#modal-message p {
    padding     : 0 0 0.7em;
    line-height : 1.6;
}

#modal-button-div {
    display         : flex;
    justify-content : center;
}

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

input.invalid,
select.invalid {
    color            : #de5932;
    background-color : #f4e6e6;
}

/* Placeholder color for modern browsers */
input.invalid::placeholder {
    color   : #de5932;
    opacity : 1;
}

/* Placeholder color for Edge */
input.invalid::-ms-input-placeholder {
    color : #de5932;
}

/* Placeholder color for Firefox */
input.invalid::-moz-placeholder {
    color   : #de5932;
    opacity : 1;
}

/* Placeholder color for older WebKit browsers */
input.invalid::-webkit-input-placeholder {
    color : #de5932;
}

#check-invalid-fields {
    background    : #f4e6e6;
    color         : #de5932;
    font-weight   : 800;
    text-align    : center;
    border-radius : 3px;
    font-style    : italic;
}

#notice-container {
    height : 25px;
    width  : 100%;
}

#debug-box {
    position         : fixed;
    top              : 200px;
    left             : 30px;
    width            : 300px;
    height           : auto;
    background-color : rgba(0, 0, 0, 0.8);
    color            : white;
    padding          : 10px;
    border-radius    : 5px;
    box-shadow       : 0 0 10px rgba(0, 0, 0, 0.5);
    font-family      : Arial, sans-serif;
    font-size        : 12px;
    z-index          : 1000;
}

#debug-box h4 {
    margin         : 0;
    padding-bottom : 5px;
    border-bottom  : 1px solid #444;
    text-align     : center;
    color          : wheat;
}

#debug-content {
    max-height : 600px;
    overflow-y : auto;
}

#debug-content p {
    line-height : 0.8;
}

.redBull {
    color : red;
}

.blueBull {
    color : #4f81fc;
}

.greenBull {
    color : green;
}

.orangeBull {
    color : orangered;
}

.debugValid {
    background-color : #deffb4 !important;
}

.debugInvalid {
    background-color : #ffad63 !important;
}

.form_container {
    border-radius : 4px;
    padding       : 1px;
}

.valid_form {
    border : #008ba0 solid 2px;
}

.invalid_form {
    border : orangered solid 2px;
}

.modified_form {
    border : #ff01d9 solid 2px;
}

.warning_modal {
    display          : flex;
    justify-content  : center;
    align-items      : center;
    position         : fixed;
    z-index          : 1000;
    left             : 0;
    top              : 0;
    width            : 100%;
    height           : 100%;
    overflow         : auto;
    background-color : rgba(0, 0, 0, 0.4);
}

.warning_modal_content {
    font-family      : "Lato", sans-serif;
    font-size        : small;
    background-color : #FFFFFF;
    padding          : 10px 15px 15px 15px;
    text-align       : center;
    border-radius    : 5px;
}

.warning_modal_footer {
    display         : flex;
    justify-content : center;
    padding         : 0 0 10px 0;
}

.warning_modal_close_btn {
    background-color : #4CAF50;
    color            : white;
    padding          : 5px 10px;
    border           : none;
    border-radius    : 5px;
    cursor           : pointer;
}

.warning_modal_close_btn:hover {
    background-color : #45a049;
}

.warning_modal_box {
    width            : 40%;
    border-radius    : 5px;
    background-color : #FFFFFF;
}

.boldy_span {
    font-weight : 800;
}

.action-btn {
    font-size     : small;
    font-weight   : 800;
    margin        : 10px 15px;
    border-radius : 5px;
    padding       : 5px 10px;
    cursor        : pointer;
}

.action-btn.registration {
    width : 90px;
}

.action-btn.update {
    background-color : #ffb243;
}

.action-btn.cancel {
    background-color : #e57373;
}

.action-btn.cancel:hover {
    background-color : #f34242;
}

.action-btn.proceed {
    background-color : #74da8c;
}

.action-btn.proceed:hover {
    background-color : #53ff7c;
}

.action-btn:hover {
    background-color : #fc9203;
    opacity          : unset;
}


.action-btn.cancel:disabled,
.action-btn.proceed:disabled,
.action-btn:disabled {
    background-color : #B1B1B1;
    cursor           : unset;
}

.action-btn.cancel:disabled:hover,
.action-btn.proceed:disabled:hover,
.action-btn:disabled:hover {
    opacity : unset;
}

.custom-price-box {
    font-size    : 1em;
    color        : #010e29;
    height       : 40px;
    visibility   : hidden;
    padding-left : 7px;
}

.ckic-price {
    font-weight : 800;
    font-size   : 1.2em;
}

.ckic-price.off {
    opacity : 0.5;
}

.ckic-product-title {
    color       : #4e5057;
    text-align  : center;
    font-family : "Apple SD Gothic Neo", "Malgun Gothic", "Nanum Gothic", Dotum, sans-serif;
    font-weight : 800;
    font-size   : 1.6em;
}

.variations tbody tr:first-child {
    background-color : #b6bdbf;
    border-radius    : 3px;
}

.variations tbody tr:first-child .label {
    text-align     : end;
    color          : black;
    vertical-align : middle !important;
}

#payment-option {
    padding          : 5px;
    background-color : white;
}

.clickable {
    color       : #0101a5;
    cursor      : pointer;
    font-weight : bold;
}

.included-lessons-popup-overlay {
    position        : fixed;
    top             : 0;
    left            : 0;
    width           : 100%;
    height          : 100%;
    background      : rgba(0, 0, 0, 0.5);
    display         : flex;
    align-items     : center;
    justify-content : center;
    z-index         : 1000;
}

.ckic-date-list-frame {
    display         : flex;
    gap             : 4px;
    flex-wrap       : wrap;
    justify-content : center;
    align-items     : center;
    width           : 100%;
    height          : 100%;
}

.ckic-lesson-date {
    font-family   : Lato, Verdana, Arial, Helvetica, sans-serif;
    flex          : 0 0 auto;
    font-size     : 0.7em;
    color         : #010e29;
    border        : 1px solid #010e29;
    border-radius : 3px;
    width         : 80px;
    background    : #e5e7f1;
    text-align    : center;
}

.popup-content {
    background    : white;
    padding       : 20px;
    border-radius : 8px;
    text-align    : center;
    box-shadow    : 0 0 10px rgba(0, 0, 0, 0.3);
    max-width     : 400px;
}

.popup-content h2 {
    font-family   : Lato, Verdana, Arial, Helvetica, sans-serif;
    margin-top    : 0;
    margin-bottom : 10px;
    font-size     : 1.5em;
    font-weight   : 800;
    color         : #010e29;
}

.popup-content button {
    margin-top    : 15px;
    padding       : 8px 12px;
    border        : none;
    background    : #007bff;
    color         : white;
    cursor        : pointer;
    border-radius : 5px;
}