@font-face {
    font-family: 'Poppins-Regular';
    src: url('/fonts/Poppins/Poppins-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'Roboto-SemiBold';
    src: url('/fonts/Roboto/Roboto-SemiBold.ttf') format('truetype');
}

@font-face {
    font-family: 'Poppins-Bold';
    src: url('/fonts/Poppins/Poppins-Bold.ttf') format('truetype');
}


:root {
    --footer-bg-light: #000000;
    --footer-bg-dark: #343a40;
    --footer-text-light: #ffffff;
    --footer-text-dark: #f8f9fa;
    --topbar-bg-light: #f8f9fa;
    --topbar-bg-dark: #343a40;
    --topbar-text-light: #212529;
    --topbar-text-dark: #f8f9fa;
}

[data-bs-theme="light"] {
    --footer-bg: var(--footer-bg-light);
    --footer-text: var(--footer-text-light);
    --topbar-bg: var(--topbar-bg-light);
    --topbar-text: var(--topbar-text-light);
}

[data-bs-theme="dark"] {
    --footer-bg: var(--footer-bg-dark);
    --footer-text: var(--footer-text-dark);
    --topbar-bg: var(--topbar-bg-dark);
    --topbar-text: var(--topbar-text-dark);
}

* {
    font-family: "Poppins-Regular", Helvetica;
}

html,
body,
#app {
    padding: 0;
    margin: 0;
    overflow: hidden;
    overscroll-behavior: none;
}

#app,
.content-container,
.content-container > .layout-content,
.layout-content > div:not(.modal-backdrop) {
    background-color: var(--bs-body-bg);
}

    #app.root {
        min-width: 393px; /* Mobile width */
    }

/* Header */
.nav-header, /*navigation header*/
.nav-header .dxbl-menu-nav, /*navigation header menu*/
.nav-header .dxbl-menu ul, /*navigation header menu list*/
.nav-header .dxbl-menu a, /*navigation header menu link*/
.nav-header .dxbl-menu .dxbl-menu-bar, /*navigation header menu bar*/
.nav-header .dxbl-menu .dxbl-menu-bar .dxbl-menu-title, /*navigation header title*/
.menu-dropdown, /*navigation header menu adaptive dropdown*/
.menu-dropdown ul, /*navigation header menu adaptive list*/
.menu-dropdown a, /*navigation header menu adaptive link*/
.nav-menu-dropdown, /*user menu dropdown*/
.nav-menu-dropdown ul, /*user menu dropdown list*/
.nav-menu-dropdown a, /*user menu dropdown link*/
.nav-menu-dropdown .dxbl-dropdown-body .dxbl-text-edit, /*user menu dropdown edit input*/
.nav-menu-dropdown .dxbl-dropdown-body .dxbl-text-edit button, /*user menu dropdown edit button*/
.theme-switcher-dropdown, /*theme switcher dropdown*/
.theme-switcher-dropdown ul, /*theme switcher dropdown list*/
.theme-switcher-dropdown a /*theme switcher dropdown link*/ {
    background-color: var(--topbar-bg) !important;
    color: var(--topbar-text) !important;
}

.dxmenu-container {
    background-color: inherit;
    color: inherit;
}

.nav-header.navbar {
    margin: 0 auto;
    position: relative;
    height: 3.5rem;
    flex-wrap: nowrap;
    justify-content: flex-start;
    border: none;
    background-color: inherit;
    border-radius: 0;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1); /* Shadow effect */
    margin-bottom: 25px;
}

/* Footer */
.footer-container {
    background-color: var(--footer-bg);
    color: var(--footer-text);
    padding: 10px 0 10px 120px;
    text-align: left;
    position: relative;
    width: 100%;
    box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.1);
}
    .footer-container .info-wrapper {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
    }

/* Start New Layout */
.content-container {
    background-color: #ffffff;
    display: flex;
    flex-direction: row;
    justify-content: center;
    width: 100%;
    height: 100vh;
    overflow: auto;
    margin-bottom: 15px;
    padding-top: 15px;
}

.layout-content {
    position: relative;
}

    .layout-content .title-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 20px;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }

.title-container .title {
    font-family: "Roboto-SemiBold", Helvetica;
    font-weight: 600;
    color: #000000;
    font-size: 32px;
    text-align: center;
    line-height: 20px;
    position: relative;
    align-self: center;
    margin-top: -1.00px;
    letter-spacing: 0;
    width: 100%;
    display: block;
}

.title-container .subtitle {
    font-family: "Poppins-Regular", Helvetica;
    font-weight: 400;
    color: #4e4e4e;
    text-align: center;
    letter-spacing: 0;
    line-height: 22px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    display: block;
}

    .layout-content .item {
        padding: 6px 8px;
    }

.layout-content .info-container {
    display: flex;
    flex-direction: column;
    align-items: center; 
    justify-content: center; 
    gap: 12px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    background-color: #ffffff;
    border-radius: 4px 4px 0px 0px;
    border: 0px none;
    padding: 20px 20px 16px;
    max-width: 700px;
}

.info-container .info-content {
    display: flex;
    flex-direction: row; 
    align-items: center; 
    justify-content: center; 
    width: 100%;
}

.info-content .info-wrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.info-container .info-icon {
    display: flex;
    align-items: center;
    font-size: 24px;
    color: #007bff; 
    margin-right: 8px;
}

.info-content .info-text {
    font-family: "Poppins-Regular", Helvetica;
    font-weight: 400;
    color: #4e4e4e;
    font-size: 16px;
    line-height: 22px;
    letter-spacing: 0;
    text-align: left;
    margin: 0;
    flex: 1;
    display: block;
}

.layout-content .thank-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    background-color: #ffffff;
    border-radius: 4px 4px 0px 0px;
    border: 0px none;
    padding: 20px 20px 16px;
}

.thank-container .thank-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.thank-content .thank-wrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.thank-container .thank-icon {
    display: flex;
    align-items: center;
    font-size: 50px;
    color: #007bff;
    margin-right: 8px;
    margin-right: 0;
    margin-bottom: 8px;
    justify-content: center;
}

.thank-wrapper h1 {
    font-family: "Poppins-Bold", Helvetica;
    color: #4e4e4e;
    letter-spacing: 0;
    text-align: center;
    margin: 0;
    flex: 1;
    display: block;
}

.thank-wrapper p {
    font-family: "Poppins-Regular", Helvetica;
    font-weight: 400;
    color: #4e4e4e;
    font-size: 16px;
    line-height: 22px;
    letter-spacing: 0;
    text-align: center;
    margin: 0;
    flex: 1;
    display: block;
}

/* Desktop: 1440px and up */
    @media (min-width: 1200px) {
        .layout-content {
            width: 1440px;
        }

            .layout-content .title-container {
                width: 725px;
            }

            .layout-content .subtitle {
                font-size: 16px;
            }
    }

    /* Tablet: 680px up to 1199px */
    @media (min-width: 680px) and (max-width: 1199px) {
        .layout-content {
            width: 900px;
        }

            .layout-content .title-container {
                width: 680px;
            }

            .layout-content .subtitle {
                font-size: 16px;
            }
    }

    /* Mobile: up to 679px */
    @media (max-width: 679px) {
        .layout-content {
            width: 470px;
        }

            .layout-content .title-container {
                width: 329px;
                height: 128px;
            }

            .layout-content .title {
                font-size: 20px;
            }

            .layout-content .subtitle {
                font-size: 14px;
            }

        .info-container .info-content {
            flex-direction: column;
            align-items: center;
        }

        .info-container .info-icon {
            margin-right: 0;
            margin-bottom: 8px;
            justify-content: center;
        }

        .info-content .info-text {
            text-align: center;
            font-size: 14px;
        }
    }