:root {
    --kumon-lt-blue: #6dcff6;
    --kumon-blue: #3d59a8;
    --kumon-variant-blue: #3e59a8;
    --kumon-purple: #8061ab;
    --kumon-dark-purple: #3d336b;
    --kumon-green: #33b8a6;
    --kumon-dark-green: #1b8577;
    --kumon-greendark-os: #2F7961;
    --kumon-green-os: #329877;
    --kumon-dark-blue-green: #0E7F90;
    --kumon-yellow: #fae366;
    --kumon-orange: #f26b4a;
    --kumon-dark-orange: #e27353;
    --kumon-mid-green: #359877;
    --kumon-pink: #fac9d1;
    --neutral-gray: #facad2;
    --neutral-light: #fff;
    --neutral-dark: #000;
    --neutral-dark-gray: #f8f5f5;
    --neutral-dark2: #707070;
    --footer-blue: #519cc9;
    --color-alert: #E00606;
}

/*-------
  styles used in Center Appointment pages
------*/
.fa-user-plus:before {
    content: "\f234";
}

html[lang=en-ca] [data-lang=en], html[lang=fr-ca] [data-lang=fr] {
    text-decoration: underline;
}
.scheduler p.txt-under-header,
.scheduler p.txt-under-block {
    text-align: center;
    line-height: 1.3;
    font-weight:400;
    color:#111;
    margin-top:1.65em;
}


.page.page--scheduler .scheduler__footer p.txt-under-block {
    
    font-weight: 500!important;
    color: #111!important;
    margin-top: 1.65em;
}

.scheduler.confirm .confirm-details-2 p.txt-under-block {
    margin-top: 0.65em;
    text-align: left;
}

    @media only screen and (max-width : 576px) {
        .page.page--scheduler .scheduler {
            max-width: calc(100% - 40px);
        }

        .page.page--scheduler .content-wrapper {
            clear: both;
            margin: 18px auto;
        }
    }

    .page.page--scheduler .scheduler {
        max-width: 100%;
    }

    .content-wrapper, .single-content-wrapper {
        clear: both;
        margin: 18px auto;
        padding-left: 1.6em;
        padding-right: 1.6em;
    }

    .page.page--scheduler .scheduler.confirmed {
        max-width: 755px;
    
    }

.scheduler.contact a:link,
.scheduler.confirm a:link,
.scheduler.confirmed a:link {
    color: #1D7DA3;
}



    .scheduler a.link-add {
        color: #1D7DA3;
    }

    .scheduler p {
        font-size: 1.0rem;
    }
.scheduler p > b{
    font-weight: bold;
}
        .scheduler p > a:link,
        .scheduler p > a:link:visited {
            color: #176FB5;
        }

        .scheduler p.txt-message-em {
            font-size: 1.0rem;
            font-weight: 400;
            padding: 1.25em;
        }

    /*-------
    calendar overwrite--*/


    .scheduler .k-calendar td.k-state-disabled a.k-link {
        cursor: default;
    }
td:not(.k-state-disabled) .k-link {
    
    font-weight: 600;
}
 
/*--Futura font fix--*/

    div.form-modal div.form-modal-title h1,
    .scheduler h1.pagetitle-scheduler,
    .scheduler.confirm h2 {
        font-family: Futura PT,Arial,Helvetica,sans-serif;
    }
    /*----------*/
    .scheduler h1.pagetitle-scheduler {
        font-family: "Futura PT", Arial, Helvetica, sans-serif;
        font-style: normal;
        font-weight: bold;
        margin: 0 0 16px;
        text-align: center;
        color: #0f0f0f;
        font-size: 24px;
    }


.scheduler.confirm .confirm-top h2,
.scheduler.confirm .h2-subheader {
    text-align: center;
}

    .scheduler.confirm .confirm-top .h2-subheader {
        font-size: 1.3rem;
        line-height: 1.1em;
        
        margin-top: 0.6em;
        
    }

        .scheduler.confirm .confirm-top .h2-subheader b {
            font-weight: 900;
        }

    .details {
        color: #333;
    }

.scheduler.confirmed .confirmation-details-copy {
    text-align: left;
}
    .scheduler.confirmed .confirmation-details-copy p {
        line-height: 1.6em;
        margin-bottom:0;
    }
    .scheduler.confirmed .confirmation-email {
        font-size: 19px;
        background-color: var(--kumon-dark-blue-green);
    }
    .scheduler.confirmed .confirmation-get-ready p {
        margin-bottom: 5px;
        text-align: left;
    }
    .scheduler.confirmed a.add-to-calendar {
        color: #0E8193
    }

    .scheduler.confirmed a.add-to-calendar:hover {
        background-color: #15a0b6;
        color:#fff;
    }

    @media only screen and (max-width : 767px) {
        .scheduler h2 {
            margin-top: 30px;
        }
    }

    @media screen and (min-width: 768px) {
        .scheduler h1.pagetitle-scheduler {
            font-size: 34px;
            line-height: 1;
            margin: 0 0 0.4em;
        }
    }
 /*-------steps--------*/
    .scheduler .steps {
        list-style: none;
        text-align: center;
        margin-top: 1.2em;
        margin-bottom: 3em;
        background: transparent;
        padding: 40px 0 0;
    }
        @media (min-width: 1024px) {
            .scheduler .steps {
                padding: 40px 0;
            }
        }

.steps-status {
    display: flex;
    gap: 0;
    justify-content: center;
}
.scheduler .steps li {
    margin-bottom: 0;
    background: linear-gradient(#ccc, #ccc) 0 calc(100% - 20px) / 100% 2px no-repeat, white;
}

.scheduler .steps li > div {
    font-family: "Fira Sans";
    font-weight: bold;
    line-height: 1;
}

.scheduler .steps li > div {
    display: flex;
    flex-direction: column-reverse;
    gap: 0.65em;
    align-items: center;
    margin: 0 32px;
    background: #fff;
    min-width:4.6em;
}
.scheduler .steps li:first-child > div {
    margin-left: 0;
}
.scheduler .steps li:last-child > div {
    margin-right: 0;
}
.scheduler .steps .counter {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background-color: #f0f0f0;
    font-size: 18px;
    color: #666;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
}


.scheduler .steps .step-counter {
    color: #666;
    font-size: 14px;
    font-weight: 500;
}
/* -----grey
        .scheduler .steps li > div.grey {
            border-color: #f1f1f1;
            color: #737373;
        }

            .scheduler .steps li > div.grey > div {
                background-color: #737373;
            }
            ----- */
/* current */
.scheduler .steps li {
    /*  opacity: 0.4;*/
}

.scheduler .steps li > div.grey,
.scheduler .steps li.step-current div {
    .counter
        {
            background-color: #0f0f0f;
            color:#fff;
        }
    .step-counter {
            color: #0f0f0f;
        }

}
@media only screen and (max-width : 768px) {
    .lang--es-mx  .scheduler .steps .step-counter {
        max-width: 90px;
        min-height: 32px;
    }
}
    /*------------*/

    .scheduler .header {
        text-align: center;
        color: #737373;
        font-family: "Fira Sans";
        font-weight: 500;
        margin-bottom: 12px;
        font-size: 18px;
        position: relative;
        max-width: 900px;
        margin-left: auto;
        margin-right: auto;
    }

    .scheduler .error-info .header {
        color: #222;
    }

    .scheduler .header h2 {
        display: inline-block;
        text-align: center;
        color: #737373;
        font-family: "Fira Sans";
        font-weight: 500;
        margin-bottom: 6px;
        font-size: 18px;
        position: relative;
    }

    .scheduler .select-a-day .header h2 {
        display: block;
    }

    .scheduler .header i {
        color: #329877;
        font-size: 24px;
        margin-right: 10px;
        display: inline-block;
        vertical-align: middle;
        padding-bottom: 5px;
    }

    /* .scheduler.contact .header i {
        color: #8bc34c;
    }*/

    .scheduler .header .select-another {
        position: absolute;
        left: 0;
        top: -28px;
    }

        .scheduler .header .select-another a {
            color: #3379B1;
            font-family: "Fira Sans";
            font-weight: 200;
            text-decoration: underline;
            font-size: 16px;
        }

            .scheduler .header .select-another a i {
                color: #3379B1;
                font-size: 24px;
            }

    /*--calendar overwrite--*/
    .page.page--scheduler .scheduler .calendar {
        margin-top: 0;
        max-width: 640px;
        width: 100%;
        flex-basis: auto;
    }

    @media only screen and (max-width : 767px) {
        .page.page--scheduler .scheduler .calendar {
            max-width: 520px;
        }
    }



    /*------------
    added 2025
----------*/
    /*--asp input button style for iOS-*/
    input[type='button'], input[type='reset'], input[type='submit'] {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        cursor: pointer;
    }


    .form-control {
        font-family: 'fira sans', verdana, helvetica, sans-serif;
        background-color: #FFFDF7;
        color: #333;
        border-radius: 0.32rem;
        -webkit-box-shadow: none;
        box-shadow: 4px;
        padding: 11px 10px;
        line-height: 23px;
        width: 100%;
        height: auto;
    }
    /*--*/


    .scheduler .form-label {
        display: inline-block;
        font-weight: 500;
        color: #666;
    }

    .scheduler.contact label, scheduler.contact .form-label {
        margin-bottom: 5px;
        font-size: 1rem;
    }
    /*--overwrite 2026 confirmation success--*/
    .page--scheduler.page--scheduler-confirmation .scheduler label.tb-title {
        display: block;
    }
    /*----end checkbox kumon IT--*/
    .scheduler .button {
        font-family: "Futura PT", Arial, Helvetica, sans-serif;
    }

    .page.page--scheduler .scheduler__footer .button {
        font-size: 24px;
        margin-top: 8px;
    }

    .confirmation-passed h3 {
        color: #222;
        font-size: 24px;
        font-weight: 700;
    }

    .scheduler .button:hover {
        background-color: inherit;
        color: #fff;
        outline-offset: 2px;
    }

    .scheduler .button:focus {
        background-color: inherit;
        outline-offset: 2px;
    }

    .scheduler .button.purple {
        color: #CD3594 !important;
        border: solid 4px #CD3594;
    }

    .scheduler .button:not(:hover).purple {
        color: #CD3594;
        border: solid 4px #CD3594;
    }


    .scheduler .button.purple:hover,
    .scheduler .button.purple:focus {
        background-color: #CD3594;
        color: #fff !important;
    }

    .scheduler .button.purple:focus {
        outline-offset: 2px;
        outline: 2px dotted #CD3594;
    }

    .scheduler .button.blue {
        background-color: #fff;
        border: solid 4px #15A0B6;
    }


        .scheduler .button.blue:hover,
        .scheduler .button.blue:focus {
            background-color: #15A0B6;
            color: #fff;
        }

    .scheduler .button.blue {
        color: var(--kumon-dark-blue-green);
    }

        .scheduler .button.blue.disabled,
        .scheduler .button.blue.disabled:hover {
            color: #737373;
        }

    /* .scheduler .button:not(:hover).green {
            color: #168701 !important;
        }

.page.page--scheduler .scheduler__footer .button.green:hover,
        .scheduler .button.green:hover {
            background-color: #168701;
            color: #fff;
        }*/

    .scheduler .button.green:focus {
        outline-offset: 2px;
        outline: 2px dotted var(--kumon-green-os);
    }


    .scheduler .button.green {
        color: var(--kumon-green-os);
        background-color: #fff;
        border: solid 4px var(--kumon-green-os);
    }

        .scheduler .button.green:hover {
            background-color: var(--kumon-green-os);
            color: #fff !important;
        }

        .scheduler .button.green:focus {
            outline-offset: 2px;
            outline: 2px dotted var(--kumon-green-os);
        }



    .scheduler .button.disabled {
        color: #737373;
        border: solid 4px Gray;
    }

        .scheduler .button.disabled:hover {
            color: #737373;
            background-color: White;
            border: solid 4px #737373;
        }
    /*-- btn animation image path modified--*/

    .scheduler input#btnNext.button.st-disabled {
        background: #FB9A5B url(../../images/site/btn-loading2.gif) no-repeat 2% 50%;
        background-size: 32px;
        color: #fff;
        cursor: not-allowed;
        pointer-events: none;
    }

    .scheduler input#btnNext.button.yellow.st-disabled {
        background: #FECCAC url(../images/site/btn-loading2.gif) no-repeat 2% 50%;
        color: #C25900 !important;
    }

    .scheduler input#btnNext.button.green.st-disabled {
        background: #ADCF86 url(../images/site/btn-loading2.gif) no-repeat 2% 50%;
        color: #DDF5C2;
    }

    .scheduler input#btnNext.button.purple.st-disabled {
        background: #D854A6 url(../images/site/btn-loading2.gif) no-repeat 2% 50%;
        color: #F8D1E9;
    }



    .scheduler .countDown {
        background-color: #f1f1f1;
        padding-top: 42px;
        padding-bottom: 42px;
        padding-left: 10px;
        padding-right: 10px;
        border-radius: 5px;
        margin-right: 0.5em;
        margin-left: 1em;
        margin-top: 1em;
    }

        .scheduler .countDown.top {
            margin-bottom: 30px;
        }

        .scheduler .countDown .time {
            color: #666;
            font-size: 45px;
            font-family: "Futura PT", Arial, Helvetica, sans-serif;
            text-align: center;
        }

        .scheduler .countDown .time-info {
            margin-top: 10px;
            color: #6D6C6C;
            font-size: 16px;
            font-family: "Futura PT", Arial, Helvetica, sans-serif;
            text-align: center;
        }



    .scheduler .txt-alert {
        color: var(--color-alert);
        display: none;
    }

    .scheduler .txt-note {
        color: #666;
        font-size: 0.92rem;
    }

    .scheduler-video {
        margin: 1.25rem auto 0;
        text-align: center;
    }

        .scheduler-video iframe {
            width: 100%;
            max-width: 65.6875rem;
            height: auto;
            aspect-ratio: 16 / 9;
        }

    /*--*/
    #form-modal-overlay, .form-modal-overlay {
        max-height: 100vh;
    }


    .child-items-top:empty, .child-items-top .child-info-note:empty {
        display: none;
    }

    .child-items-top .child-info-note {
        font-size: 15px;
        font-weight: 500;
        background-color: #ffeb9c;
        border-color: #bee5eb;
        color: #0c5460;
        display: block;
        padding: 6px;
        text-align: center;
        margin: 0 0.65rem 1.25rem 0.65em;
    }

    /*-------------
    CALENDAR

--------------*/
    .days {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: center;
    }

    /*----timeslots---*/


    .select-timeslot {
        padding: 0;
    }

    #time-items,
    .time-slots {
        display: flex;
        justify-content: space-between;
        /* flex-direction: column; */
        flex-wrap: wrap;
    }

    .times .time-col {
        max-width: 640px;
    }

        .times .time-col .time,
        .time-slots .radio-set {
            /*margin-bottom: 15px;*/
            flex: 0 0 48%;
            max-width: 300px;
        }

    .time-slots .radio-set {
        position: relative;
    }

    .time-label {
        /*color: #85868a;*/
        background-color: #f1f1f1;
        font-family: "Fira Sans";
        font-weight: bold;
        text-align: center;
        cursor: pointer;
        border-radius: 5px;
        font-size: 26px;
        margin-bottom: 15px;
        width: 100%;
    }

    /*  .time-label .dt-time {
                display: block;
                
                height: 36px;
            }

            .time-label .dt-location {
                display: inline-block;
                font-size: 19px;
                font-weight: 400;
                height: 28px;
            }*/

    /*.time-label:hover .dt-time,
            .time-label:hover .dt-location {
                color: #EB5D01;
            }

        input.radio-tab:focus + .time-label {
            outline: 2px dashed #F86505;
            outline-offset: 2px;
        }

        input.radio-tab:checked + .time-label {
            background: #F86505;
            color: #fff;
            outline: none;
        }

            input.radio-tab:checked + .time-label:hover .dt-time,
            input.radio-tab:checked + .time-label:hover .dt-location {
                color: #fff;
            }

*/

    .time-slots .radio-set input.radio-tab {
        position: absolute;
        top: 25%;
        left: 1em;
    }

    .time-slots .radio-set input.radio-tab {
        position: absolute;
        left: -99999rem;
    }


    @media only screen and (max-width : 576px) {
        .time-label .dt-time {
            font-size: 16px;
            height: 30px;
            line-height: 46px;
            letter-spacing: -0.5px;
        }


        .time-label .dt-location {
            font-size: 15px;
            height: 24px;
        }

        .time-label:hover .dt-location,
        .time-label:hover .dt-time {
            color: var(--kumon-greendark-os);
        }
    }

    @media only screen and (max-width: 767px) {
        .times .time-col {
            max-width: 520px;
        }
    }

    /*---------------
overwrite
-----------------*/
    /*--fix fr&mx label height--*/
    body.lang--fr-ca .scheduler.contact .child-info .child-row label,
    body.lang--es-mx .scheduler.contact .child-info .child-row label {
        min-height: 38px;
        display: flex;
        align-items: flex-end;
    }
    /**----*/
    .page.page--scheduler .scheduler__footer {
        margin-top: 3.26em;
    }

    .scheduler .form-row.form-submit {
        margin-top: 0;
    }

    .page.page--scheduler .scheduler__footer span.txt-alert {
        margin-bottom: 0.65em;
        display: none;
    }

    .page.page--scheduler .scheduler__footer input[type="submit"].btn {
        font-size: 1.25rem
    }

    .page.page--scheduler .scheduler__footer .btn:hover {
        border-color: transparent;
    }

    .page.page--scheduler .scheduler__footer .btn:focus {
        border-color: transparent;
        outline-offset: 2px;
        outline: 3px dotted #F86505;
    }

    .scheduler__video iframe {
        height: auto;
        width: 100%;
    }

    .scheduler__video iframe {
        min-height: 320px;
        width: 100%;
    }

    .confirmation-buttons .button {
        font-size: 20px;
        font-family: "Futura PT", Arial, Helvetica, sans-serif;
    }

    div.form-modal div.form-modal-details .buttons .button.green {
        font-size: 18pt;
    }

    /*--overwrite 2026 confirmation-success--*/
    .page--scheduler.page--scheduler-confirmation .scheduler__buttons .btn {
        border: 0;
        font-size: 16px;
    }

    /*-------
    2026 header edited
---- --*/

    div.form-modal div.form-modal-details .buttons .button.invert {
        background-color: #3b3468;
        color: #fff;
    }

        div.form-modal div.form-modal-details .buttons .button.invert:hover {
            background-color: #fff;
            color: #3b3468;
        }

    .page.page--scheduler .scheduler__call {
        margin-top: 0.86em;
        margin-bottom: 3.2em;
        font-weight: normal;
    }

        .page.page--scheduler .scheduler__call span {
            line-height: 1.3;
        }

    .footer-center-info {
        display: none;
        border-bottom: 1px solid #fff;
        a {font-weight:700;
                  color:#fff;
                 }
}


@media only screen and (max-width : 576px) {
    
    .scheduler .header .select-another {
        
        top: -32px;
    }
    .page.page--scheduler .hdr__info {
        margin-top:0.26rem;
    }
    .page.page--scheduler .scheduler__footer > span
    .page.page--scheduler .scheduler__footer span.txt-alert {
        line-height: 1.3;
    }
        .hdr__info .hdr__info-phone, 
        .hdr__info .hdr__info-address, 
        .hdr__info .hdr__info-social {
        display:none;
    }
     .hdr__info-centerinfo-link {display:none;}
     .hdr__info-centerinfo-link a {
        color: #3379B1;
        font-family: "Fira Sans";
        font-weight: 200;
        text-decoration: underline;
        font-size: 16px;
    }
    .scheduler .steps {
       padding-bottom:0;
        margin-bottom: 0;
    }
        .scheduler .steps li > div {
        
        margin-right: 6px;
        margin-left: 6px;
    }
    .footer-center-info {
        display: block;
        margin-bottom: 2.6em;
        
        padding: 0 2.6em 6.2em;
    }
}

@media only screen and (min-width : 576px) {
     .hdr__info-centerinfo-link {
        display: none;
    }
}