/*TDP Style*/
body {
    background-color: #FFFFFF;
    padding: 5px;
    padding-bottom: 20px;
}


.tdp-menu-item-active {
    background-color: #41B9CC;
    border-radius: 12px;
}

.tdp-aside.aside-menu .menu-nav > .menu-item.tdp-menu-item-active .menu-submenu .menu-subnav {
    background-color: white !important;
}

.tdp-aside.aside-menu .menu-nav > .menu-item.menu-item-open > .menu-heading,
.tdp-aside.aside-menu .menu-nav > .menu-item.menu-item-open > .menu-link {
    background-color: #41B9CC;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}

    .tdp-aside.aside-menu .menu-nav > .menu-item.menu-item-open > .menu-heading .menu-text,
    .tdp-aside.aside-menu .menu-nav > .menu-item.menu-item-open > .menu-link .menu-text {
        color: #FFFFFF;
    }

.tdp-aside.aside-menu .menu-nav > .menu-item.tdp-menu-item-active.menu-item-open > .menu-heading,
.tdp-aside.aside-menu .menu-nav > .menu-item.tdp-menu-item-active.menu-item-open > .menu-link {
    background-color: #41B9CC;
    border-radius: 12px;
}

.tdp-aside.aside-menu .menu-nav > .menu-item .menu-submenu .menu-subnav {
    background-color: #F8F8F8;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
}

.tdp-aside.aside-menu .menu-nav > .menu-item.tdp-menu-item-active > .menu-heading .menu-text,
.tdp-aside.aside-menu .menu-nav > .menu-item.tdp-menu-item-active > .menu-link .menu-text {
    color: #FFFFFF !important;
}

.tdp-aside.aside-menu .menu-nav > .menu-item:not(.menu-item-parent):not(.menu-item-open):not(.menu-item-here):not(.menu-item-active) > .menu-heading,
.tdp-aside.aside-menu .menu-nav > .menu-item:not(.menu-item-parent):not(.menu-item-open):not(.menu-item-here):not(.menu-item-active) > .menu-link {
    border-radius: 12px;
}

.tdp-aside.aside-menu .menu-nav > .menu-item:not(.menu-item-parent):not(.menu-item-open):not(.menu-item-here):not(.menu-item-active):hover > .menu-heading,
.tdp-aside.aside-menu .menu-nav > .menu-item:not(.menu-item-parent):not(.menu-item-open):not(.menu-item-here):not(.menu-item-active):hover > .menu-link {
    background-color: #41B9CC;
    border-radius: 12px;
}

    .tdp-aside.aside-menu .menu-nav > .menu-item:not(.menu-item-parent):not(.menu-item-open):not(.menu-item-here):not(.menu-item-active):hover > .menu-heading .menu-text,
    .tdp-aside.aside-menu .menu-nav > .menu-item:not(.menu-item-parent):not(.menu-item-open):not(.menu-item-here):not(.menu-item-active):hover > .menu-link .menu-text {
        color: #FFFFFF;
    }

/*.tdp-menu-item-active svg path {
    fill: #FFFFFF;
}*/

.tdp-menu-item-active .svg-icon.menu-icon svg path {
    fill: #FFFFFF;
}

.tdp-aside.aside-menu .menu-nav > .menu-item:not(.menu-item-parent):not(.menu-item-open):not(.menu-item-here):not(.menu-item-active):hover > .menu-heading .tdp-arrow.menu-arrow,
.tdp-aside.aside-menu .menu-nav > .menu-item:not(.menu-item-parent):not(.menu-item-open):not(.menu-item-here):not(.menu-item-active):hover > .menu-link .tdp-arrow.menu-arrow {
    color: #FFFFFF;
}

.tdp-aside.aside-menu .menu-nav > .menu-item.menu-item-open > .menu-heading .tdp-arrow.menu-arrow,
.tdp-aside.aside-menu .menu-nav > .menu-item.menu-item-open > .menu-link .tdp-arrow.menu-arrow {
    color: #FFFFFF;
}

.tdp-aside.aside-menu .menu-nav > .menu-item .menu-submenu .menu-item:not(.menu-item-parent):not(.menu-item-open):not(.menu-item-here):not(.menu-item-active):hover > .menu-heading .menu-text,
.tdp-aside.aside-menu .menu-nav > .menu-item .menu-submenu .menu-item:not(.menu-item-parent):not(.menu-item-open):not(.menu-item-here):not(.menu-item-active):hover > .menu-link .menu-text {
    color: #41B9CC;
}

.aside-menu .menu-nav > .menu-item > .menu-submenu .menu-subnav > .menu-item > .menu-link svg.tdp-submenu-icon.img-icon {
    margin: auto 10px auto auto;
}

.tdp-aside.aside-menu .menu-nav > .menu-item:not(.menu-item-parent):not(.menu-item-open):not(.menu-item-here):not(.menu-item-active):hover > .menu-heading .menu-icon svg rect,
.tdp-aside.aside-menu .menu-nav > .menu-item:not(.menu-item-parent):not(.menu-item-open):not(.menu-item-here):not(.menu-item-active):hover > .menu-link .menu-icon svg rect {
    fill: #FFFFFF !important;
}

    .tdp-aside.aside-menu .menu-nav > .menu-item:not(.menu-item-parent):not(.menu-item-open):not(.menu-item-here):not(.menu-item-active):hover > .menu-heading .menu-icon svg rect.tdp.svg-rect,
    .tdp-aside.aside-menu .menu-nav > .menu-item:not(.menu-item-parent):not(.menu-item-open):not(.menu-item-here):not(.menu-item-active):hover > .menu-link .menu-icon svg rect.tdp.svg-rect {
        fill: #41B9CC !important;
        stroke: #FFFFFF !important;
    }

.tdp-aside.aside-menu .menu-nav > .menu-item.menu-item-open > .menu-heading .menu-icon svg rect,
.tdp-aside.aside-menu .menu-nav > .menu-item.menu-item-open > .menu-link .menu-icon svg rect {
    fill: #FFFFFF !important;
}

    .tdp-aside.aside-menu .menu-nav > .menu-item.menu-item-open > .menu-heading .menu-icon svg rect.tdp.svg-rect,
    .tdp-aside.aside-menu .menu-nav > .menu-item.menu-item-open > .menu-link .menu-icon svg rect.tdp.svg-rect {
        fill: #41B9CC !important;
        stroke: #FFFFFF !important;
    }

.tdp-aside.aside-menu .menu-nav > .menu-item:not(.menu-item-parent):not(.menu-item-open):not(.menu-item-here):not(.menu-item-active):hover > .menu-heading .menu-icon svg path,
.tdp-aside.aside-menu .menu-nav > .menu-item:not(.menu-item-parent):not(.menu-item-open):not(.menu-item-here):not(.menu-item-active):hover > .menu-link .menu-icon svg path {
    fill: #FFFFFF !important;
}

.tdp-aside.aside-menu .menu-nav > .menu-item.menu-item-open > .menu-heading .menu-icon svg path,
.tdp-aside.aside-menu .menu-nav > .menu-item.menu-item-open > .menu-link .menu-icon svg path {
    fill: #FFFFFF !important;
}

.tdp-aside.aside-menu .menu-nav > .menu-item:not(.menu-item-parent):not(.menu-item-open):not(.menu-item-here):not(.menu-item-active):hover > .menu-heading .menu-icon .tdp.img-icone,
.tdp-aside.aside-menu .menu-nav > .menu-item:not(.menu-item-parent):not(.menu-item-open):not(.menu-item-here):not(.menu-item-active):hover > .menu-link .menu-icon .tdp.img-icon {
    display: none !important;
}

.tdp-aside.aside-menu .menu-nav > .menu-item.menu-item-open > .menu-heading .menu-icon .tdp.img-icon,
.tdp-aside.aside-menu .menu-nav > .menu-item.menu-item-open > .menu-link .menu-icon .tdp.img-icon {
    display: none !important;
}

.tdp-aside.aside-menu .menu-nav > .menu-item:not(.menu-item-parent):not(.menu-item-open):not(.menu-item-here):not(.menu-item-active):hover > .menu-heading .menu-icon img.tdp.img-icon-hover.d-none,
.tdp-aside.aside-menu .menu-nav > .menu-item:not(.menu-item-parent):not(.menu-item-open):not(.menu-item-here):not(.menu-item-active):hover > .menu-link .menu-icon img.tdp.img-icon-hover.d-none {
    display: inline !important;
    height: 23px;
    width: 23px;
    margin-left: -2px;
}

.tdp-aside.aside-menu .menu-nav > .menu-item.menu-item-open > .menu-heading .menu-icon img.tdp.img-icon-hover.d-none,
.tdp-aside.aside-menu .menu-nav > .menu-item.menu-item-open > .menu-link .menu-icon img.tdp.img-icon-hover.d-none {
    display: inline !important;
    height: 23px;
    width: 23px;
    margin-left: -2px;
}

.tdp-top-div {
    background-color: #FFFFFF;
    height: 12vh;
}

    .tdp-top-div img {
        float: left;
        height: 100%;
    }

.tdp-bottom-div {
    background-image: url('../assets/media/tdp/account//TDP-Auth-Background.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
    height: 115vh;
    border-radius: 20px;
}

@media screen and (min-width: 1000px) {
    .tdp-overlay-content {
        /* position: absolute;*/
        top: 50%;
        left: 50%;
        /* transform: translate(-50%, -50%);*/
        color: white;
        text-align: center;
        width: 40vw;
        max-width: 100%;
    }

        .tdp-overlay-content label {
            color: #AEAEAE;
            display: block;
            margin-bottom: 5px;
            text-align: left;
        }

        .tdp-overlay-content p {
            font-size: 2vw;
        }
}

@media screen and (max-width: 1000px) {
    .tdp-overlay-content {
        top: 50%;
        left: 50%;
        color: white;
        text-align: center;
        width: 90vw;
        max-width: 50rem;
    }

        .tdp-overlay-content label {
            color: #AEAEAE;
            display: block;
            margin-bottom: 5px;
            text-align: left;
        }

        .tdp-overlay-content p {
            font-size: 2vw;
        }
}

@media screen and (min-width: 1000px) {

    .tdp-account-card {
        border-radius: 25px;
    }

        .tdp-account-card h1 {
            color: #41B9CC;
        }

        .tdp-account-card input[type="text"] {
            background-color: #F6F6F6;
            border-color: #F6F6F6;
        }

        .tdp-account-card input[type="password"] {
            background-color: #F6F6F6;
            border-color: #F6F6F6;
        }

        .tdp-account-card button:not(.facilitator) {
            width: 15vw;
            background-color: #41B9CC;
            color: #FFFFFF;
            font-weight: bold;
            font-size: 20px;
            font-family: 'Century Gothic'
        }
}

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

    .tdp-account-card {
        border-radius: 25px;
    }

        .tdp-account-card h1 {
            color: #41B9CC;
        }

        .tdp-account-card input[type="text"] {
            background-color: #F6F6F6;
            border-color: #F6F6F6;
        }

        .tdp-account-card input[type="password"] {
            background-color: #F6F6F6;
            border-color: #F6F6F6;
        }

        .tdp-account-card button:not(.facilitator) {
            width: 40vw;
            background-color: #41B9CC;
            color: #FFFFFF;
            font-weight: bold;
            font-size: 20px;
            font-family: 'Century Gothic'
        }
}

    .tdp-link-container {
        display: flex;
        justify-content: space-between;
        width: 100%;
        margin-top: 5px;
    }

        .tdp-link-container a,
        .tdp-link-container i {
            text-decoration: none;
            color: #41B9CC;
            position: relative;
        }


    .col label {
        font-size: 20px;
    }

    .tdp-heading-blue {
        color: #41B9CC !important;
    }

    .tdp-p {
        line-height: 1.8rem;
        font-weight: 300 !important;
        font-size: 1.1rem !important
    }

    .accordion.accordion-toggle-arrow .card .card-header .card-title::after {
        content: none !important;
    }

    .tdp-accordion-title {
        color: #007BFF;
        text-decoration: underline;
    }

    .tdp-txt-green {
        color: #78CF70;
    }

        .tdp-txt-green i {
            color: #78CF70;
        }

    .tdp-link-with-icon .tdp-info-icon {
        position: absolute;
        top: -8px;
        right: -12px;
        width: 13px;
        height: 13px;
        background-color: #41B9CC;
        color: white;
        text-align: center;
        line-height: 24px;
        border-radius: 50%;
        font-family: Arial, sans-serif;
        font-weight: bold;
        font-size: 20px;
        padding-top: -10px;
        box-sizing: border-box;
    }

    .tdp-info-icon-reg {
        position: absolute;
        top: -5px;
        width: 15px;
        height: 15px;
        background-color: #41B9CC; /* Background color of the circle */
        color: white; /* Text color inside the circle */
        border-radius: 50%; /* Makes the span round */
        justify-content: center;
        align-items: center;
        font-size: 12px; /* Adjust the font size */
        cursor: pointer; /* Optional: makes the icon look clickable */
    }

    .tdp-btn-blue {
        background-color: #41B9CC !important;
    }

    .tdp-btn-orange {
        background-color: #FF9A24 !important;
    }

    .tdp-btn-green {
        background-color: #78CF70 !important;
    }

    .tdp-btn-purple {
        background-color: #CB62F0 !important;
    }

    .btn-outline-info:hover {
        background-color: #41B9CC !important;
    }

    .btn.btn-outline-info:hover:not(.btn-text):not(:disabled):not(.disabled), .btn.btn-outline-info:focus:not(.btn-text), .btn.btn-outline-info.focus:not(.btn-text) {
        background-color: #41B9CC !important;
    }

    .btn-outline-orange {
        color: #ff9a24 !important;
        background-color: transparent;
        border-color: #ff9a24 !important;
    }

        .btn-outline-orange i {
            color: #ff9a24;
        }

        .btn-outline-orange:hover {
            background-color: #ff9a24 !important;
        }

    .btn.btn-outline-orange:hover:not(.btn-text):not(:disabled):not(.disabled), .btn.btn-outline-orange:focus:not(.btn-text), .btn.btn-outline-orange.focus:not(.btn-text) {
        background-color: #ff9a24 !important;
    }

    .btn.btn-outline-purple:hover:not(.btn-text):not(:disabled):not(.disabled), .btn.btn-outline-purple:focus:not(.btn-text), .btn.btn-outline-purple.focus:not(.btn-text) {
        background-color: #CB62F0 !important;
    }

    .btn.btn-outline-purple:hover i:not(.btn-text):not(:disabled):not(.disabled),
    .btn.btn-outline-purple:focus i:not(.btn-text),
    .btn.btn-outline-purple.focus i:not(.btn-text) {
        color: #FFFFFF !important;
    }

    .btn.btn-outline-orange:hover i:not(.btn-text):not(:disabled):not(.disabled),
    .btn.btn-outline-orange:focus i:not(.btn-text),
    .btn.btn-outline-orange.focus i:not(.btn-text) {
        color: #FFFFFF !important;
    }

    .btn.btn-outline-danger1:hover:not(.btn-text):not(:disabled):not(.disabled), .btn.btn-outline-danger:focus:not(.btn-text), .btn.btn-outline-danger.focus:not(.btn-text) {
        background-color: crimson !important;
        border-color: crimson !important;
    }

    .btn.btn-outline-danger2:hover:not(.btn-text):not(:disabled):not(.disabled), .btn.btn-outline-danger:focus:not(.btn-text), .btn.btn-outline-danger.focus:not(.btn-text) {
        background-color: mediumvioletred !important;
        border-color: mediumvioletred !important;
    }

    .tdp-btn-red-close {
        border-radius: 50px;
        width: 35px;
        height: 35px;
        background-color: red;
        border: 0px;
        margin-top: -40px;
        margin-right: -52px;
    }

        .tdp-btn-red-close span {
            font-size: 21px;
        }

    .search-container {
        display: flex;
        align-items: center;
        background-color: #f9f9f9;
        border-radius: 50px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        padding: 5px;
        max-width: 100%;
        margin: 20px auto;
    }

    .search-icon {
        margin-left: 10px;
        font-size: 18px;
        color: #ccc;
    }

    .search-input {
        flex-grow: 1;
        border: none;
        outline: none;
        padding: 10px;
        font-size: 16px;
        background: none;
    }

    .search-button {
        background-color: #41B9CC;
        color: white;
        border: none;
        border-radius: 50px;
        padding: 10px 20px;
        cursor: pointer;
        font-size: 16px;
        margin-right: 10px;
    }

        .search-button:hover {
            background-color: #36a2b5;
        }

    .ui-autocomplete {
        max-height: 200px; /* Adjust height as needed */
        overflow-y: auto; /* Enables vertical scrolling */
        overflow-x: hidden; /* Hides horizontal scroll */
        border: 1px solid #ccc; /* Optional: Adds a border */
        background-color: #fff; /* Optional: Ensures background is visible */
    }

    .input-container {
        position: relative;
        width: 100%;
    }

    .clearable-input {
        width: 100%;
        padding-right: 30px;
        height: 35px;
        background-color: #F8F8F8;
        border: 1px solid #F8F8F8;
        box-sizing: border-box;
    }

    .clear-button {
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
        cursor: pointer;
        color: #999;
        font-size: 18px;
    }

    .wizard-label {
        font-size: 1.2em !important;
        color: #41b9cc !important;
    }

    .wizard-body-title {
        font-size: 1.8em !important;
        color: #41b9cc !important;
    }

    .eventDisplayName {
        color: #41b9cc !important;
        background-color: #e5f3f5;
        border-radius: 8px;
        padding: 10px;
        display: inline-block;
    }

    .wizard.wizard-1.tdp .wizard-nav .wizard-steps .wizard-step .wizard-label {
        margin-left: 0px;
        margin-right: 0px;
    }

    .wizard.wizard-1.tdp .wizard-nav .wizard-steps .wizard-step[data-wizard-state="done"] .wizard-label .wizard-title,
    .wizard.wizard-1.tdp .wizard-nav .wizard-steps .wizard-step[data-wizard-state="current"] .wizard-label .wizard-title {
        color: black;
    }

    .wizard.wizard-1.tdp .wizard-nav .wizard-steps .wizard-step[data-wizard-state="done"] .wizard-label .wizard-icon .parent-svg,
    .wizard.wizard-1.tdp .wizard-nav .wizard-steps .wizard-step[data-wizard-state="current"] .wizard-label .wizard-icon .parent-svg {
        fill: #78CF70;
    }

    .wizard.wizard-1.tdp .wizard-nav .wizard-steps .wizard-step[data-wizard-state="done"] .wizard-label .wizard-icon .nested-svg,
    .wizard.wizard-1.tdp .wizard-nav .wizard-steps .wizard-step[data-wizard-state="current"] .wizard-label .wizard-icon .nested-svg {
        display: none !important;
    }

    .wizard.wizard-1.tdp .wizard-nav .wizard-steps .wizard-step[data-wizard-state="done"] .wizard-label .wizard-icon .nested-svg-done.d-none,
    .wizard.wizard-1.tdp .wizard-nav .wizard-steps .wizard-step[data-wizard-state="current"] .wizard-label .wizard-icon .nested-svg-done.d-none {
        display: inline !important;
    }

    .wizard.wizard-1.tdp .wizard-nav .wizard-steps .wizard-step .svg-icon.svg-icon-xl.wizard-arrow svg {
        width: 8rem !important;
    }

    .wizard.wizard-1.tdp .wizard-nav .wizard-steps .wizard-step .wizard-arrow {
        top: -16px !important;
        position: relative !important;
    }

    .wizard.wizard-1.tdp .wizard-nav .wizard-steps .wizard-step[data-wizard-state="done"] .wizard-arrow,
    .wizard.wizard-1.tdp .wizard-nav .wizard-steps .wizard-step[data-wizard-state="current"] .wizard-arrow {
        color: #78CF70;
    }

        .wizard.wizard-1.tdp .wizard-nav .wizard-steps .wizard-step[data-wizard-state="done"] .wizard-arrow svg line,
        .wizard.wizard-1.tdp .wizard-nav .wizard-steps .wizard-step[data-wizard-state="current"] .wizard-arrow svg line {
            stroke: #78CF70;
        }

    .ql-hidden {
        display: none !important;
    }

    .invalid-inputbox {
        border-color: red !important;
    }