/* Start of helpers */
.mya21-main .max-width-708 {
    max-width: 708px;
}
/* END of helpers */

/* Start of top component */
.manage-appointment .t-content-2 {
    border-left: 4px solid #00549A;
    padding-left: 20px;
}
.manage-appointment.mya21-main .max-w-sm-274 {
    max-width: none;
}
.manage-appointment .mya-img-wrapper.ch-img-wrapper {
    width: 208.53px;
    height: auto;
}
.manage-appointment .t-box > div:first-child {
    border-right: 1px solid #d4d4d4;
}
.manage-appointment .t-box > div {
    width: 50%;
}
.manage-appointment .t-box a:not(.btn):focus {
    outline-offset: 1px !important;
}
/* End of top component */

/* Start of intercept */
.manage-appointment .ch-mya-img-wrapper {
    height: 210px;
}
.manage-appointment .ch-mya-img-wrapper img {
    width: auto;
    height: 100%;
}
.manage-appointment .self-intercept-img-wrapper {
    height: 479px;
}
.manage-appointment .self-intercept-img-wrapper img {
    height: 100%;
    width: auto;
    border-radius: 10px;
    box-shadow: 0 6px 25px 0 rgba(0,0,0,0.12);
}
.manage-appointment .ch-steps-img-wrapper {
    height: 70px;
    margin-bottom: 15px;
}
.manage-appointment .ch-steps-img-wrapper img {
    height: 100%;
    width: auto;
}
.manage-appointment .self-intercept-qr-wrapper {
    height: 136px;
}
.manage-appointment .self-intercept-qr-wrapper img {
    height: 100%;
    width: auto;
}
/* End of intercept */

/*Start of add info*/
.manage-appointment.mya21-main .mya-appointment-info-only > div > div:first-child {
    margin-right: 0;
}
/*End of add info*/

.manage-appointment section .icon-user-profile-solid {
    font-size: 36px;
}

.mya21-main .mya21-select-chkbox:hover {
    border: 1px solid #E1E1E1;
}

.manage-appointment .technician-img {
    height: 50px;
    width: auto;
}

/* Start of reaction form */
.mya21-main .reaction-radio-grp .selected .mya-ctrl_element {
    background: #00549A;
    color: #FFFFFF;
}
.mya21-main .reaction-radio-grp input[type=radio] {
    height: 0;
    width: 0;
    opacity: 0;
    position: absolute;
}
.mya21-main .reaction-radio-grp .mya-react-btn.focused .mya-ctrl_element:after {
    content: "";
    outline: 2px solid #0075FF !important;
    outline-offset: 4px !important;
    border-radius: 5px;
    box-shadow: none !important;
    position: absolute;
    top: 0;
    height: 100%;
    width: calc(100% - 10px);
    left: 50%;
    transform: translateX(-50%);
}
/* End of reaction form */

/* Start of step ribbon */

.manage-appointment.mya21-main .mya-state-ribbon .mya-state-indicator:first-child .mya-state-dots {
    margin-left: -2px;
}

.manage-appointment.mya21-main .mya-state-ribbon .mya-state-indicator:last-child .mya-state-dots {
    margin-right: -2px;
}
/* End of step ribbon */

/* Mobile */
@media (max-width:767.98px) {
    /* START of helpers */
    .mya21-main .flex-xs-column {
        flex-direction: column;
    }
    .mya21-main .w-xs-100 {
        width: 100%;
        max-width: 100%;
    }

    .mya21-main .margin-h-xs-neg-15 {
        margin-left: -15px;
        margin-right: -15px;
    }
    /* END of helpers */

    .mya21-footer > .container {
        padding-left: 0;
        padding-right: 0;
    }

    /* Start of top component */
    .manage-appointment .mya-img-wrapper.ch-img-wrapper {
        width: auto;
        height: 114px;
        display: flex;
        justify-content: center;
        margin-top: 15px;
    }
    .manage-appointment .mya-img-wrapper.ch-img-wrapper img {
        height: inherit;
        width: auto;
    }
    .manage-appointment .t-box > div:first-child {
        border-right: none;
        border-bottom: 1px solid #d4d4d4;
    }
    .manage-appointment .t-box > div {
        width: 100%;
    }
    /* End of top component */

    /* Start of intercept */
    .manage-appointment .self-intercept-img-wrapper {
        height: 212.08px;
    }
    .manage-appointment .ch-mya-img-wrapper {
        height: 151px;
    }
    .manage-appointment .ch-steps-img-wrapper {
        height: 60px;
    .manage-appointment .fr-ch-steps-img-wrapper.ch-steps-img-wrapper {
        height: 78px;
    }
    .manage-appointment .fr-ch-steps-img-wrapper.ch-steps-img-wrapper img {
        transform: translateX(-5px);
    }
    /* End of intercept */

    /* Start of modal */
    .manage-appointment.mya21-main .connection-appointment-dialog .modal-header {
        padding: 15px;
    }
    /* End of modal */

    /*Start of add info*/
    .mya21-main .mya-appointment-inclusion {
        border-bottom: 1px solid #d4d4d4;
        border-radius: 0;
        max-width: none;
        margin-left: 15px;
        margin-right: 15px;
        padding-left: 0;
        padding-right: 0;
        border-radius: 0;
    }
    .mya21-main .mya-appointment-inclusion.mya-appointment-info-only {
        border-top: 1px solid #d4d4d4;
        margin-top: 30px;
    }
    .manage-appointment.mya21-main .mya-appointment-info-only .flex-basis-auto .margin-t-xs-30 {
        margin-top: 0;
    }
    .mya21-main .border-gray2-top.d-sm-none {
        display: none;
    }
    .mya21-main .mya-appointment-info-only.mya-appointment-inclusion .border-1-top-GrayLight6.d-sm-none {
        display: none;
    }
    .mya21-main .mya-appointment-inclusion .border-1-top-GrayLight6.d-sm-none {
        display: block;
    }
    .mya21-main .border-1-top-GrayLight6.d-sm-none {
        display: none;
    }
    .mya21-main .mya-vertical-border + .border-1-top-GrayLight6.d-sm-none {
        display: block;
    }
    /*End of add info*/

    /* Start of step ribbon */
    .mya21-main.manage-appointment .mya-state-dots .mya-state-text {
        width: 79px;
        white-space: normal;
        padding-left: 3px;
        padding-right: 3px;
    }
    .mya21-main.manage-appointment .mya-state-ribbon {
        padding-bottom: 20px;
    }
    /* End of step ribbon */
}

/* Tablet and up */
@media (min-width:768px) {

    /* Start of helpers */
    .mya21-main .max-width-sm-313 {
        max-width: 313px;
    }
    /* End of helpers */

    /*Start of add info*/
    .manage-appointment.mya21-main .mya-appointment-info-only {
        max-width: 300px;
    }
    .manage-appointment.mya21-main .mya-appointment-info-only.has-list {
        max-width: 313px;
    }
    .manage-appointment.mya21-main .mya-appointment-info-only .margin-l-30.margin-l-sm-50 {
        margin-left: 0;
    }
    /*End of add info*/
    
    /* Start of modal */
    .manage-appointment.mya21-main .connection-appointment-dialog .modal-header {
        min-height: 96px;
        height: auto;
    }
    .manage-appointment.mya21-main .connection-appointment-dialog .modal-content {
        border-radius: 10px;
    }
    /* End of modal */
    .manage-appointment .fr-ch-steps-img-wrapper.ch-steps-img-wrapper {
        height: 86px;
    }
}

/* Tablet only */
@media (min-width:768px) and (max-width: 991px) {
    /* Start of helpers */
    .mya21-main .pad-h-30-t {
        padding-left: 30px;
        padding-right: 30px;
    }
    .manage-appointment .B-pad-b-sm-15 {
        padding-bottom: 15px;
    }
    /* End of helpers */
}
/* Desktop */
@media (min-width:992px) {
    /* Start of helpers */
    .mya21-main .pad-h-md-35 {
        padding-left: 35px;
        padding-right: 35px;
    }
    /* End of helpers */

    .mya21-main .mya-react-btn-list {
        margin-bottom: -15px;
    }

    /* Start of step ribbon */
    .manage-appointment.mya21-main .mya-state-indicator:last-of-type .mya-state-text {
        white-space: normal;
        width: 105px;
    }
    .manage-appointment.mya21-main .mya-state-ribbon {
        padding-bottom: 20px;
        max-width: 552px;
        margin-left: auto;
        margin-right: auto;
    }
    /* End of step ribbon */
}

/* Focus outline */
.manage-appointment .connection-appointment-dialog button:focus {
    outline: 2px solid #0075FF !important;
    outline-offset: 2px !important;
    box-shadow: none !important;
}
.manage-appointment.mya21-main p a:focus {
    outline-offset: 0 !important;
}