@import "complications2025constant.css";
@import "partials/layout.css";
@import "partials/default.css";
@import "partials/navbar.css";
@import "partials/table.css";
@import "partials/home-faculty.css";
@import "partials/social-footer.css";
@import "partials/program-at-a-glance.css";
@import "partials/components.css";
@import url("https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@100..900&display=swap");

.font-robo {
    font-family: "Roboto Slab", serif;
}

.green {
    color: #C1DF88 !important;
}

.darkblue {
    color: #002480 !important;
}

strong {
    font-weight: 600;

    &.w500 {
        font-weight: 500;
    }
}

#pageHeader {
    h1 {
        padding-bottom: 0;
    }

    > div {
        border-radius: 25px;
        overflow: hidden;
        border: 3px solid #d40572;
        padding: 10px 0;
        background: url("https://assets.crfconnect.com/meetings/complications2025/theme/h1_bgnd_right.png") right center no-repeat;
        position: relative;

        &::after {
            content: "";
            display: block;
            background: url("https://assets.crfconnect.com/meetings/complications2025/theme/h1_bgnd_left_2.png") left center no-repeat;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 0;
        }
    }
}

.page--crf-events-app #pageHeader h1,
.page--social-media-policy #pageHeader h1 {
    font-size: 22px;
}


@media screen and (max-width: 1156px) {
    .page--crf-events-app #pageHeader, .page--hands-on-training-workshop #pageHeader,
    .page--social-media-policy #pageHeader {
        > div {
            background: none;
            //border: none;

            &::after {
                background: none;
            }
        }
    }
}

@media screen and (max-width: 832px) {
    #pageHeader {
        > div {
            background: none;
            //border: none;

            &::after {
                background: none;
            }
        }
    }
}

@media screen and (max-width: 965px) {
    .page--logos-and-templates #pageHeader,
    .page--on-site-presenter #pageHeader {
        > div {
            background: none;
            //border: none;

            &::after {
                background: none;
            }
        }
    }
}

@media screen and (max-width: 1139px) {
    .page--presenter-resources #pageHeader {
        > div {
            background: none;
            //border: none;

            &::after {
                background: none;
            }
        }
    }
}

@media screen and (max-width: 832px) {
    .page--social-images-for-sharing .box.mt-20-mobile {
        margin-top: 20px;
    }
}

@media screen and (max-width: 1051px) {
    .page--social-images-for-sharing #pageHeader {
        > div {
            background: none;
            //border: none;

            &::after {
                background: none;
            }
        }
    }
}

/*For longer headers*/
@media screen and (max-width: 1184px) {
    .page--about-complications,
    .page--register {
        #pageHeader {
            > div {
                background: none;
                //border: none;

                &::after {
                    background: none;
                }
            }
        }
    }
}

#pageHeader h1 {
    text-align: center;
    z-index: 10;
    position: relative;
}

th.headGray {
    background-color: #676e75 !important;
    color: white !important;
}

th.headBlue {
    background-color: #3872c9 !important;
    color: white !important;
}

th.headGreen {
    background-color: #b8e17c !important;
    color: white !important;
}

th.headTeal {
    background-color: #2a7590 !important;
    color: white !important;
}

td.bodyGray1 {
    background-color: #dadfe6 !important;
    color: white !important;

    h4 {
        color: #575e66 !important;
    }
}

td.bodyGray2 {
    background-color: #e7eff6 !important;
    color: white !important;

    h4 {
        color: #575e66 !important;
    }
}

td.bodyBlue {
    background-color: #3872c9 !important;
    color: white !important;
    font-weight: 600;
    /*background-color: #7ba1dc !important;*/
}

td.bodyGreen {
    /*background-color: #daecb9 !important;*/
    background-color: #b8e17c !important;
    color: white !important;
    font-weight: 600;
}

td.bodyTeal {
    /*background-color: #8dabbb !important;*/
    background-color: #2a7590 !important;
    color: white !important;
    font-weight: 600;
}

/*table header*/
.table--borders thead tr,
.table--borders thead th,
.table--borders tbody th {
    border-color: var(--table-border-color) !important;
}

.table th:not(:last-child) {
    border-right: 1px solid var(--table-border-color) !important;
}

/*table borders*/

.body .table--borders {
    border: 1px solid var(--table-border-color) !important;
}

table.table--borders.table-rounded {
    //border-color: var(--divider-color) !important;

    &.table--borders-head-only {
        border-bottom-left-radius: 20px !important;
        border-bottom-right-radius: 20px !important;

        th,
        td {
            border-bottom: none !important;

            &:first-child {
                border-bottom-left-radius: 20px !important;
            }

            &:last-child {
                border-bottom-right-radius: 20px !important;
            }
        }
    }

    thead {
        color: var(--table-header-color) !important;

        th,
        td {
            color: var(--table-header-color) !important;
            border-top: none !important;
            border-bottom: 1px solid var(--divider-color) !important;
            border-left: none !important;
            border-right: 1px solid var(--divider-color) !important;

            &:last-child {
                border-right: none !important;
            }

            h4,
            strong {
                font-weight: 600;
                color: var(--table-header-color) !important;
            }

            a {
                color: var(--a-link) !important;
            }
        }
    }

    tbody {
        tr {
            &:last-child {
                td {
                    border-bottom: none !important;
                }
            }

            td {
                border-top: none !important;
                border-bottom: 1px solid var(--divider-color) !important;
                border-left: none !important;
                border-right: 1px solid var(--divider-color) !important;

                &:first-child {
                    font-weight: 600 !important;
                    color: var(--table-first-col-color) !important;

                    p {
                        color: var(--table-first-col-color) !important;
                        font-weight: 500 !important;
                    }
                }

                &:last-child {
                    border-right: none !important;
                }
            }
        }
    }
}

.body .table--first th:first-child strong,
.body .table--first td:first-child strong {
    font-size: 22px;
}

.page--contact-us {
    table.table--borders {
        thead th,
        tbody td {
            a {
                color: #d40572 !important;
            }
        }
    }
}

table.table-smallHeads {
    thead h2 {
        font-size: 22px !important;
    }
}

/*about crf*/
.logo-lockup {
    img {
        border-radius: none;
        max-width: 250px;
    }

    .box-33 {
        display: flex;

        align-content: center;
        flex-wrap: wrap;
    }
}

/*agenda bg*/
.page--hands-on-training-workshop main .pageWrapper__outer,
.page--satellite-program-guide main .pageWrapper__outer,
.page--live-cases main .pageWrapper__outer,
.page--satellites-program-guide main .pageWrapper__outer {
    background-color: var(--body-bgcolor);

    .program__session {
        background-color: white;
    }
}

/* nav fix


.menubar, .menu > ul li {


} */

div.menu > ul > li {
    line-height: 14px !important;
}

/* home upcoming dates section */

#upcoming-home {
    padding: 0;

    .pageWrapper__inner {
        max-width: 100%;
    }
}

.highlight {
    font-weight: 500;
    color: #c1df88;
}

.btn {
    border-radius: 50px;
    font-weight: 500;
}


.slick-dots {
    bottom: -28px;
}

.slick-dots li {
    margin: 0px;
}

.slick-dots li button:before {
    color: #0cb2e4;
    opacity: 1;
}

.slick-dots li.slick-active button:before {
    color: white;
    opacity: 1;
}

.body h1.large {
    font-size: 50px;
    margin-top: 35px;
    line-height: 55px;
}

.h2-alt {
    font-family: "Roboto Slab", serif;
    font-weight: 400;
    text-transform: uppercase;
    color: #0cb2e4;
}

.h2-alt-heavy {
    font-family: "Roboto Slab", serif;
    font-weight: 500;
    text-transform: uppercase;
    color: #0cb2e4;
}

.image-rounded-border {
    overflow: hidden;
    border-radius: 50px;
    border: 4px solid #0cb2e4;
}

.logoWrapper {
    align-items: flex-start;
    padding-top: 50px;
}

@media screen and (max-width: 950px) {
    .logoWrapper img {
        max-width: 60% !important;
    }

    .hero > div:first-child {
        max-height: 330px;
    }
}

@media screen and (max-width: 600px) {
    .logoWrapper img {
        max-width: 90% !important;
    }

    .hero > div:first-child {
        max-height: 200px;

        img {
            object-fit: none;
        }
    }
}

.home main .pageWrapper__outer:first-child {
    padding-top: 0px;
}

.img-border {
    border: solid 4px #36bde9;
    border-radius: 100px;
}

.wide-rounded-background {
    background-color: #f9fcf3;
    border-radius: 80px 80px 0 0;
}

.topImage--less-padding {
    > div > div {
        padding: 40px;
    }
}

.two-column-borders.no-corners > div > div {
    > div {
        border-radius: 50px;
    }
}

.row-fixed {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    align-items: center;
}

.comp2025TopImage {
    a {
        text-decoration: underline;
    }
}

.page--international-travel {
    .comp2025TopImage {
        a {
            color: #c1df88;
        }
    }
}

/* book your hotel page */
@media screen and (max-width: 831px) {
    .page--book-your-hotel .comp2025TopImage {
        > div > div {
            grid-template-rows: 1fr 50px 500px;
        }

        .comp2025TopImage__right {
            grid-row-start: 1;
            grid-row-end: 3;
        }

        .comp2025TopImage__left {
            grid-row-start: 2;
            grid-row-end: end;
        }
    }
}

@media screen and (min-width: 832px) {
    .page--book-your-hotel .comp2025TopImage {
        > div > div {
            grid-template-columns: 4fr 50px 3fr;
        }
    }
}

/*about crf*/
.logo-lockup {
    .row {
        row-gap: 60px;
        align-items: center;
    }

    img {
        max-width: 250px;
    }

    hr {
        margin-top: 30px !important;
        border-color: transparent !important;
    }

    @media screen and (min-width: 832px) {
        hr {
            border-color: #b2bcce !important;
        }
    }
}

@media screen and (min-width: 832px) {
    .topImage--spearhead {
        > div > div {
            grid-template-columns: 2fr 50px 1fr;
        }

        a {
            text-decoration: underline;
            color: #0cb2e4;
        }
    }

    .topImage--advance {
        > div > div {
            grid-template-columns: 1fr 50px 2fr;
        }

        a {
            text-decoration: underline;
            color: #0cb2e4;
        }
    }
}

@media screen and (max-width: 600px) {
    .slick-dots {
        bottom: -15px !important;
    }
}

main p a {
    color: var(--a-link);
}

.atAGlance__pageMain,
.program__pageMain,
.page--crf-events-app {
    .email-box {
        text-align: center;
    }

    .signup-container {
        margin-left: auto;
        margin-right: auto;
    }
}

.program__page,
.atAGlance__page,
.facultyIndex__page {
    h1 {
        text-align: center;
    }
}

.section-banner {
    .pageWrapper__outer {
        padding-top: 25px;
        padding-bottom: 25px;
    }
}

.social-4-col > div > div:first-child {
    flex-wrap: wrap;
}

/*Faculty*/
.filterableFaculty__results {
    margin-top: 0px;
}

.filterableFaculty__filters {
    padding-top: 0px;
}

.filterableFaculty__activeRefiners {
    padding: 0px;
}

.facultyIndex__facultyHeader h2 {
    padding-top: 30px;
    margin-bottom: 0px;
}

.home .courseDirectorsMatrix__outer .pageWrapper__inner {
    margin: 0 auto;
}

@media screen and (max-width: 600px) {
    .atAGlance__message {
        text-align: center;
    }
}

.signup-container {
    margin: 10px auto;
}


//countdown clock
.countdownClock {

}

.countdown--container {
    margin: 0 auto;
    border-radius: 30px;
    border: 3px solid #d40572;
    color: #00205c;
}

.countdown--container > div:first-child {

}

.blue-border {
    border: solid 4px #36BDE9;
    border-radius: 50px;
    padding: 25px 18px 30px 18px;
}

.row-2-2-3 {
    flex-wrap: wrap;

    .box-0 {
        flex: 3 3 25%;
    }

    .box-1 {
        flex: 4 4 40%;
    }

    .box-2 {
        flex: 4 4 33%;
    }
}

@media screen and (max-width: 1158px) {
    .row-2-2-3 .pageWrapper__inner > div:first-child {
        flex-direction: column;
    }
}

/*Upcoming Card*/
.upcoming-title {
    font-size: 34px !important;
    line-height: 34px !important;

}

.event-box-title {
    text-transform: uppercase;
}

.event-box {
    border-radius: 30px 30px 30px 30px;
    border: solid 3px #BCD7FF;
}

.cal-icon {
    border-radius: 30px;
    padding-left: 4px;
}