@import "tct2025constant.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 "tct2025-menu.css";
@import "tct2025-header.css";
@import url("https://use.typekit.net/owl3kcp.css");

/* lettering */
.font-kallisto {
    font-family: "kallisto", sans-serif !important;
}


    h1, h2, h3, h4 {
        font-family: "kallisto", sans-serif;
    }


.font-gibson {
    font-family: canada-type-gibson, Arial, sans-serif !important;
}

strong {
    color: var(--bold, inherit);
    font-weight: 600;
}

.white {
    color: white !important;
}

.teal {
    color: #04A6E2 !important;
}

.blue {
    color: #0E6FBC !important;
}

.pink, .blue strong {
    color: #E30083 !important;
}

.bg-light-blue2 {
    background: #F0F7FC;
}

.bg-light-blue {
    background-color: #EDF7FA;
}

.bg-yellow {
    background-color: #FDFAED;
}

.bg-purple {
    background-color: #6F0E8D;
}

.bg-blue {
    background-color: #0E6FBC;
}

.gray-text, h2.gray-text {
    color: gray!important;
}

@property --per1 {
    syntax: '<percentage>';
    inherits: true;
    initial-value: 50%;
}

@property --per2 {
    syntax: '<percentage>';
    inherits: true;
    initial-value: 51%;
}

@property --per1a {
    syntax: '<percentage>';
    inherits: true;
    initial-value: 50%;
}

@property --per2a {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 75%;
}

@property --rotation {
    syntax: '<angle>';
    inherits: true;
    initial-value: 135%;
}

@property --colorA {
    syntax: '<color>';
    inherits: true;
    initial-value: #04e3fd;
}


.btn-3d {
    border-radius: 30px;
    width: 100%;
    max-width: none;
    display: inline-block;
    padding: 5px 5px;
    text-align: center;
    transition: --per1a 250ms, --per2a 250ms, --rotation 250ms, --colorA 250ms;
    background: linear-gradient(135deg, #02d2fb 0%, var(--colorA) var(--per1a), #FFFFFF var(--per2a), #04A6E2 100%);
    //background: linear-gradient(135deg, #04A6E2 0%, #FFFFFF 25%, #04A6E2 50%, #FFFFFF 75%, #04A6E2 100%);
}

@media screen and (max-width: 600px) {
    .btn-3d.mobile-hide {
        display: none;
    }

    br + .btn-3d.mobile-hide, .btn-red-plain + br {
        display: none;
    }

}

.btn-3d:hover {
    transition: --per1a 250ms, --per2a 250ms, --rotation 250ms, --colorA 250ms;
    //--rotation: 90%;
    --per1a: 40%;
    --per2a: 80%;
    --colorA: #ffffff;
}

.btn-3d span {
    display: inline-block;
    border-radius: 30px;
    width: 100%;
    padding: 15px 50px;
    transition: --per1 250ms, --per2 250ms;
    background: linear-gradient(90deg, #0024a6 0%, #04A6E2 var(--per1), #04A6E2 var(--per2), #0024a6 100%);
}

.btn-3d:hover span {
    transition: --per1 250ms, --per2 250ms;
    --per1: 0%;
    --per2: 100%;
}

.rounded-corners > img, .rounded-corners {
    border-radius: 30px !important;
}

.two-column > div > div {
    display: flex;
    gap: 30px;
}

@media screen and (max-width: 831px) {
    .two-column > div > div {
        flex-direction: column;
    }
}

.page--register main > div:first-child.pageWrapper__outer,
.page--contact-us main > div:first-child.pageWrapper__outer {
    display: none;
}


.courseDirectorsMatrix__outer > div:first-child {
    padding-top: 20px !important;
}

.courseDirectorsMatrix__outer .pageWrapper__outer {
    padding-bottom: 0px;
}

.pageBody {
    background-color: white;
}

.socialMediaHome {
    background-color: var(--social-bgcolor);
}

.alert-box {
    background: red;
    color: white !important;
    border-radius: 50px;
    text-align: center;
    padding: 10px 0px;

    strong {
        color: white !important;
    }

    a {

        color: white !important;
        font-weight: normal;
        text-transform: uppercase;
    }
}


/* rounded corner table styles */

.body .table--borders.table-rounded {
    box-shadow: 1px 1px 3px rgba(0, 0, 0, .4);
    border: 1px solid #B7C0D1 !important;


}

.body .table--borders.table-rounded td {
    border-right: 1px solid #B7C0D1 !important;
    border-bottom: 1px solid #B7C0D1 !important;
    border-color: #B7C0D1 !important;
}

.body .table--borders.table-rounded th {
    text-transform: uppercase;
    text-align: center;
}

th {
    height: 64px;
    padding: 0px;
}


.body .table--borders.table-rounded td {
    border: none !important;
    border-right: 1px solid #B7C0D1 !important;
    border-bottom: 1px solid #B7C0D1 !important;
    border-color: #B7C0D1 !important;
}

.body .table--borders.table-rounded th {
    text-transform: uppercase;
    text-align: center;
}


.table-rounded .space-between {
    text-transform: uppercase;
}

.small {
    line-height: 20px;
    display: inline-block;
}

.body .table--borders.table-rounded .table--blank {
    margin-top: 0px !important;
    margin-bottom: 0px !important;

    td {
        border: none !important;
        border-color: transparent !important;
        padding: 10px !important;

        h4 {
            margin: 0px !important;
        }
    }
}

/* Notebox */

.body .notebox {
    //border: 1px solid #d4d8db;
    border: solid thin #C2CAD8 !important;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, .4);
    border-radius: 30px 30px;
    background-color: white;
}

.body .maxW.notebox {
    width: 100%;
    max-width: 100%;
}

/* Call for Science Topics, Categories, and Guidelines Circle Divs */

.circle-flex-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 30px;
}

.cfs-circle {
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    display: flex;
    align-items: center;
    text-align: center;
    color: #FFFFFF;
    border: 8px solid #FFFFFF;
    font-size: 16px;
    line-height: 22px;
    font-weight: 500;
    padding: 30px;
    margin-left: -30px;

    .cfs-circle-lead-text {
        display: block;
        text-transform: uppercase;
    }

    &.yellow-circle {
        width: 175px;
        height: 175px;
        background-color: #F3BC00;
        z-index: 20;
        margin-left: 0 !important;
    }

    &.teal-circle {
        width: 200px;
        height: 200px;
        background-color: #00D1DE;
        z-index: 30;
    }

    &.purple-circle {
        width: 225px;
        height: 225px;
        background-color: #130038;
        z-index: 40;
    }

    &.blue-circle {
        width: 250px;
        height: 250px;
        background-color: #003558;
        z-index: 60;
    }

    &.red-circle {
        width: 250px;
        height: 250px;
        background-color: #EE3D2C;
        z-index: 80;
    }

    &.purple-circle2 {
        width: 250px;
        height: 250px;
        background-color: #2C18C7;
        z-index: 100;
    }
}

@media screen and (max-width: 1232px) {
    .circle-flex-container {
        justify-content: center;
        margin-top: 30px;
    }

    .cfs-circle {
        margin-left: 0 !important;
        width: 283px !important;
        height: 283px !important;
    }
}


/* Call for Science Topics, Categories, and Guidelines Submission Deadlines Divs */

.sd-flex-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;

    margin-top: 30px;
    justify-content: space-between;
}

.sd-tile {
    background-color: #FFFFFF;
    border: 1px solid #C2CAD8;
    box-shadow: 2px 2px 8px rgba(80, 80, 80, .4);
    border-radius: 20px 20px;
    text-align: center;
    align-items: center;
    padding: 20px 24px;
    color: #003558 !important;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 18px;
    line-height: 24px;
    height: 324px;
    max-width: 282px;
    margin-bottom: 30px;

    .sd-title {
        height: 134px;
    }

    a {
        color: #003558 !important;
        font-weight: 600;
        text-decoration: none;
    }

    .sd-atc-img {
        width: 106px;
        height: 106px;
        margin: 0 auto 16px auto;
    }
}

@media screen and (max-width: 1232px) {

    .sd-flex-container {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        align-items: center;

        margin-top: 30px;
        justify-content: space-between;
    }

    .sd-tile {
        align-content: stretch !important;
        max-width: 100% !important;
        width: 100% !important;
        height: auto !important;

        .sd-title {
            height: auto !important;
            margin-bottom: 20px !important;
        }
    }
}

/* Home PD*/
@media screen and (min-width: 1200px) {
    .home .courseDirectorsMatrix__outer .pageWrapper__outer {
        max-width: 1500px;
        margin: 0 auto;
        align-items: flex-start;
    }

    .home .courseDirectorsMatrix__outer .pageWrapper__inner {
        width: 100%;
        padding: 0 20px;
    }
}

@media screen and (min-width: 1280px) and (max-width: 1540px) {
    .home .courseDirectorsMatrix__outer .pageWrapper__inner {
        padding: 0 30px;
    }
}

//@media screen and (max-width: 1279px) {
//    .home .courseDirectorsMatrix__outer .pageWrapper__inner div.slick-list div {
//        justify-content: center !important;
//    }
//}


/* new pd circle*/
.newActive {
    background: #04A6E2;
    display: block;
}

.courseDirectors__role.active {
    font-weight: 600;
}


//@media screen and (max-width: 600px) {
//    .courseDirectors__card {
//        width: 44%
//    }
//}

.home .courseDirectorsMatrix__outer .pageWrapper__inner {
    width: 100%;
}

.courseDirectors__role {
    font-weight: 500;
    padding-bottom: 0px;
    text-transform: uppercase;
}


/* rounded corner table styles for contact us page  */

table.table-rounded--contact-us {
    border-collapse: collapse !important;
    border-spacing: initial !important;
    border-top-left-radius: 20px !important;
    border-top-right-radius: 20px !important;
    border-bottom-left-radius: 20px !important;
    border-bottom-right-radius: 20px !important;

    tr:first-of-type {
        th:first-of-type {
            border-top-left-radius: 20px !important;
        }

        th:last-of-type {
            border-top-right-radius: 20px !important;
        }
    }

    tr:last-of-type {
        th:first-of-type {
            border-bottom-left-radius: 20px !important;
        }

        th:last-of-type {
            border-bottom-right-radius: 20px !important;
        }
    }
}


.verticalDivider {
    width: 1px;
    height: 100%;
    background-color: var(--hr, black);
}

/* TCT Dropdown (drop longer link titles to second line to avoid cropping)*/

.css-sgd74x {
    padding-right: 50px;
}

/*grid swirl -reference about-crf page*/
.grid-swirl-alt {
    grid-template-columns:  1fr 20px !important;
}

.grid-swirl {
    display: grid;
    grid-template-rows: 20px 1fr 20px;
    grid-template-columns: 20px 1fr;

    .swirl-left, .swirl-bottom, .swirl-right {
        grid-column-start: 1;
        grid-column-end: 3;
        grid-row-end: 5;
        z-index: 0;
        display: flex;
        justify-content: flex-start;

        & > div {
            background-color: #F3BC00;
            height: 100%;
        }
    }

    .swirl-left {
        justify-content: flex-start;
    }

    .swirl-right {
        justify-content: flex-end;
    }

    .swirl-red {
        & > div {
            background-color: #F05142;
        }

    }

    .swirl-left, .swirl-right {
        grid-row-start: 1;

        & > div {
            max-width: 300px;
            width: 100%;
            border-radius: 60px 60px 60px 60px;
        }
    }


    .swirl-bottom {
        grid-row-start: 2;

        & > div {
            width: 90%;
            border-radius: 85px;
        }
    }

    .white-box, .white-box-right { /*right*/
        grid-column-start: 2;
        grid-column-end: 3;
        grid-row-start: 2;
        grid-row-end: 3;
        z-index: 1;

        & > div {
            background-color: #FFFCF0;
            height: 100%;
            color: black;
            width: 100%;
            border-radius: 50px;
            padding: 40px;
            border: solid thin #C2CAD8;
            box-shadow: 1px 1px 3px rgba(0, 0, 0, .4);
        }
    }

    .white-box-left {
        grid-column-start: 1;
        grid-column-end: 2;
    }

    .white-box > div {
        background: white;
    }

    .white-box-red > div {
        background-color: #FFFAFA;
    }
}

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

    .box-33 {
        width: 33.33%;
        max-width: 33.33%;
        display: flex;
        justify-content: center;
    }

    img {
        border-radius: 0;
        max-width: 250px;
    }

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

@media screen and (max-width: 800px) {
    .logo-lockup {
        .row {
            row-gap: 55px;
            flex-direction: column;
        }

        hr {
            border-color: transparent !important;
        }
    }
}

.three-col {
    td {
        padding-left: 0px !important;
        text-align: left;
    }
}

//table
.three-col table.table--plain tr > td:first-child {
    width: 75px;
}

.three-col table.table--plain tr > td:nth-child(2) {
    width: 290px;
}

@media screen and (max-width: 600px) {
    .three-col .justify-center {
        justify-content: flex-start;
    }
}

.course-director-header {
    font-size: 32px; //48px;
    line-height: 32px; //48px;
}

@media screen and (max-width: 576px) {
    .course-director-header {
        font-size: 28px; //36px;
        line-height: 28px; //36px;
    }
}

.page--crf-ced-leadership main .pageWrapper__inner .chakra-image,
.page--social-media-ambassadors main .pageWrapper__inner .chakra-image {
    border-radius: 50%;
}


.Slider-flex .slick-list {
    display: flex;
}


.whiteBox {
    background-color: #CCD6DD;
    padding: 2px;
}

.whiteBox > div {
    background-color: #fff;
    padding: 20px;
    box-shadow: 2px 2px 2px rgba(0, 0, 0, .3);
}

.page--airline-discounts main > div {
    background-color: #effbfc;
}

/*flip box*/

/* The flip box container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
.flip-box {
    background-color: transparent;
    position: relative;
    width: 100%;
    aspect-ratio: 1/1;
    perspective: 1000px; /* Remove this if you don't want the 3D effect */
}

/* This container is needed to position the front and back side */
.flip-box-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.8s;
    transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-box:hover .flip-box-inner {
    transform: rotateY(180deg);
}

/* Position the front and back side */
.flip-box-front, .flip-box-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden; /* Safari */
    backface-visibility: hidden;
}


/* Style the back side */
.flip-box-back {
    transform: rotateY(180deg);
}

/*program at a glance*/
.atAGlance__event {
    background: #194969;
    color: var(--button-color, white);

    p {
        color: var(--button-color, white);
    }
}

.atAGlance__formatSelectorButton.active, .atAGlance__groupSelectorButton.active {
    background-color: #194969 !important;
    color: var(--button-color, black);
    border-color: #194969 !important;
}

.chakra-slide.chakra-modal__content {
    button {
        background: #194969;
        color: var(--button-color, white);
    }

}

//.atAGlance__event:hover {
//    background: var(--button-bgcolor-hover);
//    color: var(--button-color-hover, white);
//
//    p {
//        color: var(--button-color-hover, white);
//    }
//}

/*tabs*/
.table--nosides tr td:first-child {
    border-left: 1px solid transparent !important;
    width: 50%;
}

.table--nosides tr td:last-child {
    border-right: 1px solid transparent !important;
}


.chakra-tabs-parent {
    background-color: #ccf5f7;
    padding: 20px;
    border-radius: 20px;
}

.chakra-tabs__tab.__tab_button[aria-selected=true],
.chakra-tabs__tab.__tab_button[data-selected], .chakra-tabs__list {

    border-color: red;
}

.page--late-breaking-research .chakra-tabs__list {
    justify-content: space-between;
}

.facultyIndex__page {
    .facultyIndex__aboveDirectors {
        display: none;
    }

    .facultyIndex__courseDirectorsHeader {
        display: none;
    }

    h1.chakra-heading {
        padding-bottom: 10px;
        padding-top: 0px;
    }

}


.program__page h1.chakra-heading {
    padding-bottom: 0px;
}

.program__message {
    margin-top: 20px;
}


.border-middle > div.box-50:first-child {
    border-right: solid 1px #B7C0D1;
    padding-right: 20px;
    @media screen and (max-width: 600px) {
        border-right: none;
    }

}

.chakra-tabs-parent .program__body {
    margin-top: 0;
}


.accordion-label-large {
    color: #EE3D2C !important;
}

.accordion-label {
    font-weight: 500;
}

/*home page*/
.slick-dots {
    bottom: 30px;
}

.slick-dot li {
    margin: 0 2px;
}

.slick-dots li.slick-active button:before {
    opacity: 1 !important;
    color: #04A6E2 !important;
}

.slick-dots li button:before {
    opacity: 1 !important;
    color: #C4C4C4 !important;
}

main .courseDirectors-btn {
    max-width: 200px;
    padding: 10px 5px;
    border-radius: 20px;
}

.home .keyDates .slick-track {
    gap: 10px;
    align-items: flex-start;
    display: flex;
}

@media screen and (max-width: 600px) {
    .home .keyDates .slick-track {
        display: block;
    }
}

.home .keyDates .slick-slide {
    //min-height: 330px;
    //height: 330px;
    //flex: 1 1 16.66%;
    //aspect-ratio: 2/ 2.5;
    height: 310px;
}

//@media screen and (max-width: 600px) {
//    .home .keyDates .slick-slide {
//        height: auto;
//    }
//
//}

.home .keyDates .slick-slide > div {
    height: 100% !important;
    padding: 5px;
}

.home .keyDates .slick-slide > div > div:first-child {
    height: 100% !important;
}

.body .btn, main .btn {
    border-radius: 30px;
}

.body .btn-auto, main .btn-auto {
    border-radius: 30px;
    width: auto;
    max-width: none;
    display: inline-block;
    padding: 15px 50px;

}


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

.main-gradient {
    background: linear-gradient(90deg, #04A5E2, #8A00F2);
}

.main-gradient-alt {
    background-blend-mode: overlay;
    background: no-repeat bottom right/60% url("https://assets.crfconnect.com/meetings/tct2025/page-content/tct2025_rounded_shapes1_30.png"),
    linear-gradient(90deg, #1F1C83, #04A5E2);
}

@media screen and (max-width: 600px) {
    .main-gradient-alt {
        background: no-repeat bottom right -150px/100% url("https://assets.crfconnect.com/meetings/tct2025/page-content/tct2025_rounded_shapes1_30.png"),
        linear-gradient(90deg, #1F1C83, #04A5E2);
    }
}

.main-gradient, .main-gradient-alt {
    p {
        color: white;

        a {
            color: white !important;
        }
    }

    h3, h4 {
        font-family: canada-type-gibson, Arial;
        color: white !important;

    }

    .btn-clear {
        border: solid 2px white;
        background-color: transparent;
        color: white;

        &:hover {
            color: #0E6FBC !important;
            background-color: white;
        }
    }

    ul {
        color: white;

        li {
            color: white;

            &::marker {
                color: white !important;
            }
        }
    }

}

.aboutButtons {
    background: linear-gradient(90deg, #04A5E2, #8A00F2);
}

.aboutButtons ul li::marker {
    color: var(--bullet-color);
}

@property --c {
    syntax: '<color>';
    inherits: true;
    initial-value: white;
}

@property --p1 {
    syntax: '<percentage>';
    inherits: true;
    initial-value: 0%;
}

@property --p2 {
    syntax: '<percentage>';
    inherits: true;
    initial-value: 100%;
}

.body a.btn-white {
    background: linear-gradient(45deg, #ffffff 85%, #8A00F2 85%, #8A00F2 90%, #ffffff 90%);
    text-transform: uppercase;
    border-radius: 30px;
    color: #19245B !important;
    text-decoration: none !important;
    font-weight: 600;
    width: 100%;
    max-width: none;
    padding: 10px 50px;
    text-align: center;
    display: block;
    transition: all 1s;
}


.body a.btn-red-plain {
    color: #19245B !important;
    background: linear-gradient(45deg, white 85%, #E30083 85%, #E30083 90%, white 90%);
}

.body a.btn-purple-plain {
    color: #19245B !important;
    background: linear-gradient(45deg, white 85%, #8A00F2 85%, #8A00F2 90%, white 90%);
}

.body a.btn-teal-plain {
    color: #19245B !important;
    background: linear-gradient(45deg, white 85%, #04A6E2 85%, #04A6E2 90%, white 90%);
}

.body a.btn-blue-plain {
    color: #19245B !important;
    background: linear-gradient(45deg, white 85%, #0E6FBC 85%, #0E6FBC 90%, white 90%);
}

.body a.btn-pink-plain {
    color: #19245B !important;
    background: linear-gradient(45deg, white 85%, #E30083 85%, #E30083 90%, white 90%);
}

.body a.btn-green-plain {
    color: #19245B !important;
    background: linear-gradient(45deg, white 85%, #004F5F 85%, #004F5F 90%, white 90%);
}

.btn-white2 {
    border-radius: 30px;
    color: #19245B !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    //display: block;
    transition: all 1s;
    text-transform: inherit !important;
    text-align: left !important;
    padding: 12px 40px 12px 25px !important;
    height: 100%;
    font-size: 18px;
    line-height: 22px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    max-width: 200px !important;
    width: 200px !important;
}

.medtech-buttons {
    .box {
        display: flex;
        justify-content: center;
    }

    a.btn-pink-plain {
        color: #19245B !important;
        background: linear-gradient(45deg, white 77%, #E30083 77%, #E30083 85%, white 85%) !important;
    }

    a.btn-purple-plain {
        color: #19245B !important;
        background: linear-gradient(45deg, white 77%, #8A00F2 77%, #8A00F2 85%, white 85%) !important;
    }

    a.btn-green-plain {
        color: #19245B !important;
        background: linear-gradient(45deg, white 77%, #004F5F 77%, #004F5F 85%, white 85%) !important;
    }

    a.btn-orange-plain {
        color: #19245B !important;
        background: linear-gradient(45deg, white 77%, #EE3D2C 77%, #EE3D2C 85%, white 85%) !important;
    }
}

.mobile-show-885 {
    display: none;
}

@media screen and (max-width: 885px) {
    .mobile-show-885 {
        display: block;

        img {
            width: 100%;
            max-width: 580px;
            margin: 20px auto;
        }
    }

    .page--medtech .border-box-yellow-stripe .box-50:first-child {
        display: none;
    }

    .page--medtech .border-box-yellow-stripe .box-50 {
        width: 100%;
        max-width: 100%;
    }
}

@media screen and (max-width: 600px) {
    .page--medtech .rowMatrixBlock h4 {
        font-size: 22px !important;
    }
}

.body a.btn-red {
    --c: #19245B;
    --p1: 85%;
    --p2: 90%;
    color: var(--c) !important;
    transition: --p1 250ms, --p2 250ms, --c 50ms;
    background: linear-gradient(45deg, white var(--p1), #E30083 var(--p1), #E30083 var(--p2), white var(--p2));
}

.body a.btn-purple {
    --c: #19245B;
    --p1: 85%;
    --p2: 90%;
    color: var(--c) !important;
    transition: --p1 250ms, --p2 250ms, --c 50ms;
    background: linear-gradient(45deg, white var(--p1), #8A00F2 var(--p1), #8A00F2 var(--p2), white var(--p2));
}

.body a.btn-teal {
    --c: #19245B;
    --p1: 85%;
    --p2: 90%;
    color: var(--c) !important;
    transition: --p1 250ms, --p2 250ms, --c 50ms;
    background: linear-gradient(45deg, white var(--p1), #04A6E2 var(--p1), #04A6E2 var(--p2), white var(--p2));
}

.body a.btn-blue {
    --c: #19245B;
    --p1: 85%;
    --p2: 90%;
    color: var(--c) !important;
    transition: --p1 250ms, --p2 250ms, --c 50ms;
    background: linear-gradient(45deg, white var(--p1), #0E6FBC var(--p1), #0E6FBC var(--p2), white var(--p2));
}

.body a.btn-orange {
    --c: #19245B;
    --p1: 85%;
    --p2: 90%;
    color: var(--c) !important;
    transition: --p1 250ms, --p2 250ms, --c 50ms;
    background: linear-gradient(45deg, white var(--p1), #EE3D2C var(--p1), #EE3D2C var(--p2), white var(--p2));
}

.body a.btn-red:hover, .body a.btn-purple:hover, .body a.btn-teal:hover, .body a.btn-blue:hover, .body a.btn-orange:hover {
    --c: #FFFFFF;
    --p1: 0%;
    --p2: 100%;
    color: var(--c) !important;
    transition: --p1 250ms, --p2 250ms, --c 50ms;
}

body .btn.btn-teal-outline {
    color: #04A6E2 !important;
    background-color: transparent;
    border: 4px solid #04A6E2;

    &:hover {
        color: #fff;
        background-color: #04A6E2;
        border-color: #04A6E2;
    }
}

.teal-links {
    a {
        color: #04A6E2 !important;
    }
}

.gray-box-purple-stripe > .pageWrapper__inner,
.gray-box-yellow-stripe > .pageWrapper__inner {
    background-color: #F5F5F7;
}

.white-box-purple-stripe > .pageWrapper__inner,
.white-box-yellow-stripe > .pageWrapper__inner {
    background-color: #FFFFFF;
}

.gray-box-purple-stripe > .pageWrapper__inner,
.gray-box-yellow-stripe > .pageWrapper__inner,
.white-box-purple-stripe > .pageWrapper__inner,
.white-box-yellow-stripe > .pageWrapper__inner,
.border-box-yellow-stripe > .pageWrapper__inner {
    padding: 40px;
    border-radius: 30px;
    //--p1: 85%;
    //--p2: 90%;

    /*143px 146*/
    background-size: 107px 107px;
    background-repeat: no-repeat;
    background-position: top right;
}

.gray-box-purple-stripe > .pageWrapper__inner {
    background-image: url("https://assets.crfconnect.com/meetings/tct2025/page-content/tct2025_contact_purple_accent1.png");
}

.gray-box-yellow-stripe > .pageWrapper__inner {
    background-image: url("https://assets.crfconnect.com/meetings/tct2025/page-content/tct2025_contact_yellow_accent1.png");
}

.white-box-purple-stripe > .pageWrapper__inner {
    background-image: url("https://assets.crfconnect.com/meetings/tct2025/page-content/tct2025_contact_purple_accent1.png");
}

.white-box-yellow-stripe > .pageWrapper__inner {
    background-image: url("https://assets.crfconnect.com/meetings/tct2025/page-content/tct2025_contact_yellow_accent1.png");
}


.border-box-yellow-stripe > .pageWrapper__inner {
    background-image: url("https://assets.crfconnect.com/meetings/tct2025/page-content/tct2025_contact_yellow_accent1.png");
    border: solid 4px #F5F5F7;
    border-radius: 30px;
}

.purple-stripe-gray-alt {
    background-repeat: no-repeat;
    background-position: top right;
    background-size: 107px 107px;
    background-color: #F5F5F7;
    padding: 40px;
    border-radius: 30px;
    background-image: url("https://assets.crfconnect.com/meetings/tct2025/page-content/tct2025_contact_purple_accent1.png");

}

.red-stripe-gray-alt {
    background-repeat: no-repeat;
    background-position: top right;
    background-size: 107px 107px;
    background-color: #F5F5F7;
    padding: 40px;
    border-radius: 30px;
    background-image: url("https://assets.crfconnect.com/meetings/tct2025/page-content/tct2025_contact_red_accent1.png");
}

/*table*/
.body .table--first td:first-child strong {
    font-weight: 600;
}

@media screen and (max-width: 600px) {
    .body .table--first th:first-child, .body .table--first td:first-child {
        width: 200px !important;
        padding-left: 30px !important;
        padding-top: 15px !important;
    }
}


.table--first tr td:first-child {
    padding-left: 50px;
    vertical-align: top;
}

.table--first tr td:nth-child(2) {
    strong {
        font-weight: normal;
    }

    padding-left: 50px;
}

table.table--first {
    margin-top: 50px !important;
    margin-bottom: 50px !important;
}

.body .table--borders.table-rounded td {
    border-right: 1px solid #B7C0D1 !important;
    border-bottom: none !important;
}

.body .table--borders.table-rounded td:first-child p {

    font-weight: 500 !important;
}

.body .table--borders.table-rounded td p {

    color: #031537 !important;
}

.body .table--borders.table-rounded td a {
    color: #0e6fbc !important;

}

.body .table--borders.table-rounded td {
    border-right: 1px solid #B7C0D1 !important;
    border-bottom: none !important;
}

.body .table--borders.table-rounded thead td:first-child {
    border-right: 1px solid white !important;
}

.indent-body .pageWrapper__inner {
    max-width: 1000px;
}

.body .table--borders.table-rounded th {
    text-transform: uppercase;
    text-align: left;
    font-size: 26px !important;
    line-height: 26px !important;
}

.body .table--borders thead tr, .body .table--borders thead th, .body .table--borders tbody th {
    background: var(--table-header-bgcolor);
    color: var(--table-header-color, white);
    font-weight: 500 !important;
    border-color: white !important;
    text-align: left;


    strong {
        color: var(--table-header-color, white) !important;


    }

    p {
        color: var(--table-header-color, white) !important;
        //font-weight: 600 !important;
    }
}


.image.rounded-corners {
    img {
        border-radius: 30px;
    }
}

.imageText__gradient {
    padding-top: 40px;
    padding-bottom: 40px;
    background: linear-gradient(90deg, #04A5E2, #8A00F2);

    h2, p, a {
        color: #fff !important;
    }

    a {
        color: #04A6E2;
    }
}

.rounded-grey-bgnd {
    background: #F5F5F7;
    padding: 30px;
    border-radius: 30px;
}

.gray-box-purple-stripe > .pageWrapper__inner,
.gray-box-darkgreen-stripe > .pageWrapper__inner,
.gray-box-red-stripe > .pageWrapper__inner {
    padding: 40px;
    border-radius: 30px;
    background-color: #F5F5F7;
    background-size: 107px 107px;
    background-repeat: no-repeat;
    background-position: top right;
}

.gray-box-red-stripe > .pageWrapper__inner {
    background-image: url("https://assets.crfconnect.com/meetings/tct2025/page-content/tct2025_contact_red_accent.png");
}

.gray-box-purple-stripe > .pageWrapper__inner {
    background-image: url("https://assets.crfconnect.com/meetings/tct2025/page-content/tct2025_contact_purple_accent1.png");
}

.gray-box-darkgreen-stripe > .pageWrapper__inner {
    background-image: url("https://assets.crfconnect.com/meetings/tct2025/page-content/tct2025_contact_darkgreen_accent.png");
}


@media screen and (max-width: 600px) {
    .gray-box-purple-stripe > .pageWrapper__inner,
    .gray-box-darkgreen-stripe > .pageWrapper__inner,
    .gray-box-red-stripe > .pageWrapper__inner {
        padding: 40px 70px 40px 40px;
    }

}

/*table*/
.body .table--first td:first-child strong {
    font-weight: 600;
}

.body .table--borders th strong {
    color: white !important;
    font-size: 24px;
    line-height: 26px;
}

.table--first tr td:first-child {
    padding-left: 50px;
    vertical-align: top;
    padding-top: 26px;
}

.table--first tr td:nth-child(2) {
    strong {
        font-weight: normal;
    }

    padding-left: 50px;
}

table.table--first {
    margin-top: 0px !important;
    margin-bottom: 50px !important;
}

.body .table--borders.table-rounded td {
    border-right: 1px solid #B7C0D1 !important;
    border-bottom: none !important;
}

.body .table--borders.table-rounded thead td:first-child {
    border-right: 1px solid white !important;
}

.indent-body .pageWrapper__inner {
    max-width: 1000px;
}


/*page--about-tct*/
.page--about-tct {
    .bg-pink-hills {
        /* 1274px 72px */
        background-image: url("https://assets.crfconnect.com/meetings/tct2025/page-content/tct2025_about_tct_pink_shapes.png");
        background-size: calc(1275px * .7) calc(178px * .7);
        background-repeat: no-repeat;
        background-position: right bottom;
        padding: 20px 15px;
    }
    
    @media screen and (max-width: 600px) {
        .body h1 {
            margin-top: 0px !important;
            text-align: center;
        }

        .body h2, .body h3, .body p {
            text-align: center;

        }

        .body h2 {
            font-size: 20px !important;
            line-height: 22px !important;
        }

        .main-gradient h2 {
            font-size: 18px !important;
            line-height: 22px !important;
        }

        .bg-pink-hills {
            background-image: url("https://assets.crfconnect.com/meetings/tct2025/page-content/tct2025_about_tct_pink_mobile.png");
            padding: 30px 15px;
            background-size: auto;
            background-size: calc(602px * .6) calc(156px * .6);

        }
    }
}

.page--topics-categories-guidelines {
    h1, h2, h3, h4, h5 {
        font-family: canada-type-gibson, Arial;

    }
}


.img-slider .slick-slider {
    padding-bottom: 0px;
}

/*tct attendance*/
.white-box {
    background-color: white;
    border-radius: 30px;
    padding: 20px 10px;
    height: 100%;

    strong {
        color: #0E6FBC;
        text-transform: uppercase;
        text-align: center;
        font-weight: 600;
        display: inline-block;
        padding: 0px 10px;
    }

    p {
        color: black;
        text-align: center;
        margin-top: 5px;

    }

    p:first-child {
        margin-top: 0px;
        line-height: 20px;
    }
}

.benefit-white-bg .box-1 {
    padding: 30px 10px;
    background-color: white;
    border-radius: 30px;
    border: solid 1px #EFF2F5;
}

@media screen and (max-width: 1077px) {
    .row-white-box .pageWrapper__inner > div:first-child {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .row-white-box .pageWrapper__inner .body {
        flex: 1 1 48%;
    }
}

.accordions-no-border {
    .chakra-accordion__item:first-of-type {
        border-top: none;
    }

    .chakra-accordion__item:last-of-type {
        border-bottom: none;
    }
}

.two-column.rounded-grey-borders .pageWrapper__inner {
    .box-0, .box-1 {
        padding: 30px;
        border-radius: 30px;
        border: 2px solid #EFF2F5;
    }
}

.right-column-rounded-grey-border .box-1 .pageWrapper__inner {
    padding: 30px;
    border-radius: 30px;
    border: 2px solid #EFF2F5;
}

/* featured on International Travel page */
.right-column-rounded-grey-border-alt .box-1 .pageWrapper__inner {
    padding: 20px 20px;
    border-radius: 30px;
    border: 3px solid #EFF2F5;

}

.right-column-rounded-grey-border-alt .box-1 .pageWrapper__inner .chakra-accordion__item {
    border-color: #EFF2F5;
}

.right-column-rounded-grey-border-alt .box-1 .pageWrapper__inner .accordion-label {
    color: var(--a-link, #0E6FBC)

}

.left-column-no-padding .box-0 div div div {
    padding-left: 0 !important;
    padding-right: 0 !important;

}

/* Gray border container around content block (i.e. press pages) */

.border-radius-gray-border-container {
    > .pageWrapper__inner {
        border-radius: 30px;
        border: 3px solid #EFF2F5;
        padding: 0px 30px;
        margin-bottom: 30px;
        margin-top: 30px;
        /* this is to remove padding added from Craft wrapper block with separate content entry  */

        .body {
            padding-left: 0;
            padding-right: 0;
        }
    }

    &.gray-border-no-mt {
        > .pageWrapper__inner {
            margin-top: 0 !important;
        }
    }
}

@media screen and (max-width: 425px) {
    .border-radius-gray-border-container > .pageWrapper__inner {
        border-radius: 0;
        border: none;
        padding: 0px 0px;
        margin-bottom: 0px;
        margin-top: 0px;
    }

}

/* Gray background-color container around content block (i.e. wire payment page) */

.border-radius-gray-background-container > .pageWrapper__inner {
    border-radius: 30px;
    background-color: #F5F5F7;
    background: linear-gradient(45deg, rgb(245, 245, 247) 92%, #F3B200 86%, #F3B200 95%, rgb(245, 245, 247) 81%);
    padding: 0px 30px 30px;
    margin-bottom: 30px;
    /* this is to remove padding added from Craft wrapper block with separate content entry  */

    .body {
        padding-left: 0;
        padding-right: 0;
    }
}

/* register page */

@media screen and (min-width: 1200px) {
    div.rowMatrixBlock.do-not-register-row {
        div.pageWrapper__inner {
            div {
                div.body {
                    &:nth-child(3) {
                        /* This makes center row wider to fit body text on one line for desktop - "Do Not Register" row */
                        flex: 1 0 260px !important;
                    }
                }
            }
        }
    }

}

@media screen and (max-width: 800px) {
    .tab-overflow-scroll-mobile {
        overflow: scroll !important;
        padding-right: 30px !important;

    }

    div.chakra-tabs__tab-panel:has(div.tab-overflow-scroll-mobile) {
        padding-right: 0px !important;;
    }

}

.red-stripe, .yellow-stripe, .blue-stripe {
    color: black;
    border-radius: 30px;
    border: solid 2px #E6EBEE;
    padding: 20px 70px 30px 30px;
    background: white;
    //background: linear-gradient(45deg, rgb(255, 255, 255) 86%, #EE3D2C 86%, #EE3D2C 91%, rgb(255, 255, 255) 91%);
    background-size: 107px 107px;
    background-repeat: no-repeat;
    background-position: top right;
}

.red-stripe {
    background-image: url("https://assets.crfconnect.com/meetings/tct2025/page-content/tct2025_contact_red_accent.png");
}

.yellow-stripe {
    background-image: url("https://assets.crfconnect.com/meetings/tct2025/page-content/tct2025_contact_yellow_accent.png ");
}

.blue-stripe {
    background-image: url("https://assets.crfconnect.com/meetings/tct2025/page-content/tct2025_contact_blue_accent.png");
}

.two-stripe-layout {
    .blue-stripe, .red-stripe {
        display: flex;
        padding: 10px 70px 20px 30px;
        flex-direction: column;
        justify-content: center;

    }
}

@media screen and (max-width: 830px) {
    .two-stripe-layout {
        .blue-stripe, .red-stripe {
            padding: 20px 50px 30px 30px;

        }
    }
}

.yellow-stripe-gray, .purple-stripe-gray, .red-stripe-gray {
    color: black;
    border-radius: 30px;
    border: solid 2px #E6EBEE;
    padding: 20px 50px 30px 30px;
    height: 100%;

}

.yellow-stripe-gray {
    background: linear-gradient(45deg, #F5F5F7 86%, #F3B200 86%, #F3B200 91%, #F5F5F7 91%);
}

.purple-stripe-gray {
    background: linear-gradient(45deg, #F5F5F7 86%, #6F0E8D 86%, #6F0E8D 91%, #F5F5F7 91%);
}

.red-stripe-gray {
    background: linear-gradient(45deg, #F5F5F7 86%, #EE3D2C 86%, #EE3D2C 91%, #F5F5F7 91%);
}


.right-column-border .box-1 {
    border: 2px solid #EFF2F5;
    //box-shadow: 1px 1px 3px rgba(0, 0, 0, .4);
    border-radius: 30px 30px;
    background-color: white;
    padding: 30px;
}

/*Shapes Componeent*/
@media screen and (max-width: 990px) {
    .shapeWrapper > div > div {
        flex-direction: column;
    }
}


.h0 {
    transition: all 0.8s;
    max-height: 0px;
}

.hShow {
    transition: all 0.8s;
    max-height: 70px;
}


@media screen and (max-width: 700px) {
    .tctOneImageLayout {
        padding: 0px;
    }
}

.discountBoxes .body {
    width: auto;
}

@media screen and (max-width: 863px) {
    .startup-buttons {
        flex-direction: column;
        align-items: center;
    }

    .btn-white, .btn-3d {
        max-width: 300px !important;
    }


    .startup-buttons p {
        display: block;
        margin: 0px;
    }

    .startup-buttons p.mobile-hide {
        display: none;
    }
}


@media screen and (max-width: 1125px) {
    .discountBoxes .pageWrapper__inner > div:first-child {
        flex-direction: column;
        align-items: center;
    }

    .discountBoxes .pageWrapper__inner > div:first-child .body {
        max-width: 400px;
    }

    .discountBox__body {
        max-width: 230px;
    }

    span.mobile-break {
        display: block;
    }
}

@media screen and (min-width: 832px) {
    .discountBoxes .pageWrapper__inner > div:first-of-type .discountBox__content {
        max-width: 300px;
    }
}

.discountBox {
    height: 100%;
    border-radius: 30px;
    border: solid 2px #E6EBEE;
    padding: 20px 80px 30px 30px;
    background: linear-gradient(45deg, #fff 86%, #F3B200 86%, #F3B200 91%, #fff 91%);

}

.discountBox__green {
    background: linear-gradient(45deg, #fff 86%, #139166 86%, #139166 91%, #fff 91%);

    .discountBox__body {
        margin-top: 10px;
        color: #139166;
    }
}

.discountBox__purple {
    background: linear-gradient(45deg, #fff 86%, #6F0E90 86%, #6F0E90 91%, #fff 91%);

    .discountBox__percent {
        color: #E30083;
    }

    .discountBox__body {
        color: #E30083;
    }
}

.discountBox__leader {
    width: max-content;
    color: #19245B;
    font-weight: 600;
    font-size: 24px;
    line-height: 26px;
    text-transform: uppercase;
}

.discountBox__content {

}

.discountBox__percent {
    font-size: 70px;
    line-height: 70px;
    color: #04A6E2;
    font-family: "kallisto", sans-serif;
    font-weight: 600;
}

.discountBox__body {
    margin-top: 5px;
    font-size: 16px;
    line-height: 18px;
    color: #04A6E2;
}

.worldLinkBoxes {
    .box-0, .box-1, .box-2 {
        flex: 1 1 33%;
        max-width: 33%;
    }

    .discountBox {
        background-color: gray;
        padding: 20px 30px 30px 30px;

    }


    .discountBox__leader {
        width: auto;
        color: #0e6fbc;
        font-weight: 600;
        font-size: 24px;
        line-height: 26px;
        text-transform: inherit;
        margin-right: 30px;
    }


    .discountBox__content {
        color: black;
        margin-top: 20px;
    }

    .discountBox__pink {
        background: linear-gradient(45deg, #F5F5F7 86%, #E30083 86%, #E30083 91%, #F5F5F7 91%);
    }

    .discountBox__purple {
        background: linear-gradient(45deg, #F5F5F7 86%, #6F0E8D 86%, #6F0E8D 91%, #F5F5F7 91%);
    }

    .discountBox__yellow {
        background: linear-gradient(45deg, #F5F5F7 86%, #F3BC00 86%, #F3BC00 91%, #F5F5F7 91%);
    }
}

@media screen and (max-width: 900px) {

    .worldLinkBoxes {
        .box-0, .box-1, .box-2 {
            flex: 1 1 100%;
            max-width: 100%;
        }
    }
}

/* single page styles for coming soon*/
.program__page, .atAGlance__page {
    .section-banner, .breadcrumbs {
        display: none;
    }

    h1.chakra-heading {
        padding-bottom: 0px;
        font-family: "kallisto", sans-serif;
    }

    h3 {
        font-family: canada-type-gibson, Arial;
    }

}


/* Spacing styling for when content blocks stack */

@media screen and (max-width: 831px) {

    .gap-10-two-columns-stacked {
        .twoColumnMatrixBlock {
            gap: 10px !important;

            > div:nth-child(2) {
                padding: 0 !important;
            }
        }
    }

    .gap-0-two-columns-stacked {
        .twoColumnMatrixBlock {
            gap: 0 !important;
        }
    }

    .do-not-register-row {

        .pageWrapper__inner {
            div {
                gap: 15px;

                .verticalDivider {
                    width: 30%;
                    margin: 0 auto;
                    border-color: black;
                    height: 1px;
                }
            }

        }
    }
}

@media screen and (max-width: 600px) {
    .page--topics-categories-guidelines .tct2025Hero .tct2025HeroTitle {
        font-size: 32px !important;
        line-height: 34px;
    }

    .page--topics-categories-guidelines .tct2025Hero span.font-kallisto {
        font-size: 30px !important;
        line-height: 32px;

    }

}

@media screen and (max-width: 600px) {
    .mobile-column-count-1 {
        column-count: 1 !important;
    }
}

/* FAQ */
.page--faq {
    .chakra-accordion__item:last-child {
        border-bottom: none;
    }
}

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

/* Career Achievement Award */

/* margin above H2 once right quotation mark overlaps into white space */
@media screen and (max-width: 1450px) {
    .page--tct-career-achievement-award {
        .mt-20-below-quotation-mark {
            margin-top: 20px !important;
        }
    }
}

.award-list {
    p {
        text-decoration: underline;
    }

    strong {
        text-decoration: none;
        margin-right: 20px;
        display: inline-block;
    }

    u {
        color: black !important;
    }
}

ul.black li {
    color: black;

    &::marker {
        color: #E30083 !important;
    }
}

.nurse-row {
    .pageWrapper__inner {
        padding: 30px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    h2 {
        margin-right: 20px;
        font-family: canada-type-gibson, Arial;
    }

    .btn {
        padding: 1rem 1rem !important;
        width: 100%;

    }

    .box-0 {
        flex: 3;
    }

    .box-1 {

        flex: 4;
        flex-grow: 4;

        div {
            height: 100%;
        }
    }

    .box-2 {
        flex: 3;
    }
}