: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-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
------*/
@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;
    }
 
/*--Futura font fix--*/

    div.form-modal div.form-modal-title h1,
    .scheduler h1.pagetitle-scheduler,
    .scheduler.confirm h2,
    div.form-modal div.form-modal-details .buttons .button {
        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: var(--kumon-mid-green);
        font-size: 24px;
    }

.scheduler.confirm h2 {
    color: #CD3594;
    
}
.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;
        color: #C93792;
        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;
    }
        @media (min-width: 1024px) {
            .scheduler .steps {
                padding: 40px 0;
            }
        }


    .scheduler .steps li {
        display: inline-block;
    }

    .scheduler .steps li > div {
        display: inline-block;
        width: 88px;
        height: 88px;
        border-radius: 44px;
        border: solid 8px #fff1d5;
        position: relative;
        margin-right: 25px;
        margin-left: 25px;
        padding-top: 24px;
        font-size: 13px;
        font-family: "Fira Sans";
        font-weight: bold;
        color: #fdb92d;
        line-height: 1;
    }

        .scheduler .steps li > div > div {
            width: 26px;
            height: 26px;
            border-radius: 13px;
            background-color: #F86505; /*#fdb92d;*/
            display: block;
            position: absolute;
            left: -14px;
            top: -4px;
            font-size: 19px;
            font-family: "Futura PT", Arial, Helvetica, sans-serif;
            color: #fff;
            line-height: 26px;
        }


        /* yellow */
        .scheduler .steps li > div.yellow {
            border-color: #fff1d5;
            color: #C64E00; /*#C38300;*/
        }

        .scheduler .steps li > div.yelow > div {
            background-color: #C38300;
        }


        /* green */
        .scheduler .steps li > div.green {
            border-color: #e8f3db;
            color: #488306;
        }

            .scheduler .steps li > div.green > div {
                background-color: #488306;
            }


        /* purple */
        .scheduler .steps li > div.purple {
            border-color: #f4deec;
            color: #BA4C91;
        }

            .scheduler .steps li > div.purple > div {
                background-color: #BA4C91;
            }


        /* grey */
        .scheduler .steps li > div.grey {
            border-color: #f1f1f1;
            color: #737373;
        }

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

    .scheduler .steps li > div.grey,
    .scheduler .steps li.step-current > div {
        opacity: 1;
    }
    /*------------*/

    .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: #F86505;
        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 label,
        .scheduler .form-label {
            display: inline-block;
            font-weight: 500;
            color: #666;
        }

        .scheduler.contact label, scheduler.contact .form-label {
            margin-bottom: 5px;
            font-size: 1rem;
        }
        /*----*/
  
/*----end checkbox kumon IT--*/
        .scheduler .button {
            font-family: "Futura PT", Arial, Helvetica, sans-serif;
        }

        .page.page--scheduler .scheduler__footer .button {
            font-size: 20px;
            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 #8bc34d;
        }

        .scheduler .button.yellow {
            color: #F86505 !important;
            background-color: #fff;
            border: solid 4px #F86505;
        }

        .scheduler .button.yellow:hover {
            background-color: #F86505;
            color: #fff !important;
        }

        .scheduler .button.yellow:focus {
            outline-offset: 2px;
            outline: 2px dotted #F86505;
        }

        .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: #85868a;
            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: 680px;
        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;
                font-size: 25px;
                font-weight: 700;
                line-height: 52px;
                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: 20px;
            }

            .time-label .dt-location {
                font-size: 16px;
            }
        }

        @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;
}