/* Authentication button styles */
#authentication {
    display: inline-block;
	position: relative;
	margin-right: 12px;
    z-index: 26;
}

/* Preflight replacement */
/* See https://tailwindcss.com/docs/preflight */
.customer-portal * {
    border-width: 0;
    border-style: solid;
}

/* Component-level overrides */
@media only screen and (max-width: 767px) {
    #authentication .tw-tooltip-arrow-top:before,
    #authentication .tw-tooltip-arrow-top:after {
        right: 5.2rem !important;
        left: auto !important;
    }
    
    #appointment > div {
        padding: 0 !important;
    }
}

/* Overrides for theme settings */
@media only screen and (max-width: 767px) {
    .header__customer {
        display: flex;
        margin: 0 -8px;
        width: calc(100% + 20px);
        flex-wrap: wrap;
        align-items: start;
        justify-content: flex-end;
    }
    
    .header__customer #authentication {
        margin-bottom: 15px;
    }
    
    /* Home Tabs */
    .tab-group--with-appointments .tab-group__navigation {
        flex-wrap: wrap;
    }
    
    .tab-group--with-appointments .tab-group__navigation__item {
        flex-basis: 50%;
        max-width: 50%;
        transition: opacity .3s ease;
    }
    
   .tab-group--with-appointments .tab-group__panel-group button[data-action=close-modal] {
       opacity: 1;
       pointer-events: auto;
       top: 100px;
       right: 25px;
   }
   
   .tab-group--with-appointments[data-current-tab-index="1"] .tab-group__navigation__item[data-tab-index="3"],
   .tab-group--with-appointments[data-current-tab-index="1"] .tab-group__navigation__item[data-tab-index="4"],
   .tab-group--with-appointments[data-current-tab-index="2"] .tab-group__navigation__item[data-tab-index="3"],
   .tab-group--with-appointments[data-current-tab-index="2"] .tab-group__navigation__item[data-tab-index="4"] {
       opacity: 0;
       pointer-events: none;
   }
   
   .tab-group--with-appointments .tab-group__panel[data-tab-index="4"] .section__headline {
        inline-size: 230px;
        overflow-wrap: break-word;
        hyphens: manual;
        margin-left: auto;
        margin-right: auto;
   }
}

/* Home Tabs */
.tab-group--with-appointments {
    transition: height .3s ease;
}

.tab-group--with-appointments[data-current-tab-index=""] .tab-group__panel-group,
.tab-group--with-appointments:not([data-current-tab-index]) .tab-group__panel-group {
    pointer-events: none;
}

.tab-group--with-appointments .tab-group__navigation__item {
    cursor: pointer;
}

.tab-group--with-appointments .tab-group__navigation__item p {
    margin-top: auto;
    margin-bottom: 0 !important;
}

.tab-group--with-appointments .tab-group__navigation__item .icon-box svg {
    transition: transform .3s ease, fill .5s;
}

.tab-group--with-appointments .tab-group__navigation__item:hover .icon-box svg {
    transform: translate3d(-50%, -50%, 0) scale(1.1);
}

.tab-group__navigation__cta {
    color: #219F7A;
    display: block;
    margin-top: 2px;
}

.tab-group__navigation__cta svg {
    margin-left: 5px;
}

@media (min-width: 768px) {
    .tab-group--with-appointments .tab-group__navigation__item {
        flex-basis: 25%;
        max-width: 25%;
    }
    
    .tab-group--with-appointments .tab-group__navigation {
        max-width: 1170px;
    }
}

.site-search input {
    z-index: 27;
}

@media (min-width: 992px) {
    .tab-group--with-appointments .tab-group__navigation__item {
        padding-left: 5px;
        padding-right: 5px;
    }
    
    .site-search input {
        transform: translateY(-1px);
    }
    
    .site-search button {
        transform: translateY(-1px);
    }
    
    .appointment__sticky-message {
        top: calc(60px + 15px) !important;
    }
}

.customer-portal hr {
    margin: 0 !important;
}

.header__customer #authentication {
    text-align: left;
}

.header__customer #authentication a {
    width: auto;
    border: none;
    padding: 0;
}

.header__customer #authentication a:hover {
    background-color: transparent;
}

.customer-portal [class*=table] {
    overflow: initial !important;
}

/* IE11 hack to center elements where the Tailwind custom properties don't work */
[iecp-needed="true"].tw-transform[class*="tw--translate-x-1"][class*="tw--translate-y-1"] {
    transform: translate(-50%,-50%)
}