@font-face {
    font-display: swap;
    /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Quicksand';
    font-style: normal;
    font-weight: 300;
    src: url('/assets/fonts/quicksand-v31-latin_vietnamese-300.woff2') format('woff2');
    /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

@font-face {
    font-display: swap;
    font-family: 'Quicksand';
    font-style: normal;
    font-weight: 400;
    src: url('/assets/fonts/quicksand-v31-latin_vietnamese-regular.woff2') format('woff2');
    /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

@font-face {
    font-display: swap;
    font-family: 'Quicksand';
    font-style: normal;
    font-weight: 500;
    src: url('/assets/fonts/quicksand-v31-latin_vietnamese-500.woff2') format('woff2');
    /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

@font-face {
    font-display: swap;
    font-family: 'Quicksand';
    font-style: normal;
    font-weight: 600;
    src: url('/assets/fonts/quicksand-v31-latin_vietnamese-600.woff2') format('woff2');
    /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

@font-face {
    font-display: swap;
    font-family: 'Quicksand';
    font-style: normal;
    font-weight: 700;
    src: url('/assets/fonts/quicksand-v31-latin_vietnamese-700.woff2') format('woff2');
}

:root {
    --text-color: #ffff;
    --color-bg: #FFAF4C;
    --text-yellow: #ffea7d;
    --text-color-primary: #401500;
}

body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Quicksand', sans-serif !important;
    font-optical-sizing: auto;
    -webkit-font-smoothing: antialiased;
    background-color: #b3afaf;
}

a {
    text-decoration: none;
    color: var(--text-color);
}

p {
    margin: 10px 0;
    padding: 0;
}

.content {
    width: 40%;
    background-color: #FF5601;
    min-height: 100vh;
    max-height: 100%;
    border-radius: 20px;
}

.content-header img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 10px;
}

.content-body{
    min-height: 100vh;
}

.custom-navbar {
    border: 5px solid #561D00;
}

.nav-item {
    display: flex;
    justify-content: center;
    align-items: center;
}

.nav-item a {
    color: var(--text-yellow);
}

.nav-item:hover,
.nav-item:hover a {
    background-color: var(--color-bg);
    color: #401500 !important;
    cursor: pointer;
}

.nav-item.active,
.nav-item.active a {
    background-color: var(--color-bg);
    color: #401500 !important;
}

.download-button {
    display: flex;
    justify-content: center;
    align-items: center;
}

.download-button a img {
    width: 100px;
    height: auto;
    display: block;
    margin: 5px 0;
    user-select: none;
}

.new-notification,
.intro {
    position: relative;
    color: var(--text-color-primary);
    background-color: var(--color-bg);
    border: 3px solid #561D00;
    font-size: 15px;
}

.new-notification h3,
.intro h3 {
    font-size: 18px;
    color: #E73D1B;
    font-weight: 600;
}

.text-yellow {
    color: var(--text-yellow);
}

.text-brown {
    color: #401500;
}

/* Styles for mobile devices */
@media (max-width: 678px) {
    .content {
        width: 100% !important;
    }
}

/* Styles for tablets */
@media (min-width: 679px) and (max-width: 1024px) {
    .content {
        width: 75%;
    }
}

.login-form {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    ;
    top: 20px;
}

.login-form label {
    color: #ffffff;
    font-size: 15px;
    font-weight: 600;
}

.login-form button {
    background-color: #E73D1B;
    border-color: #401500;
}

.login-form button:hover {
    background-color: #401500;
    border-color: #E73D1B;
}

.login-form button:active {
    background-color: #864625 !important;
    border-color: #dd9384 !important;
}

.bottom {
    display: flex;
    flex-direction: column;
}

.bottom-text {
    display: inline-flex;
    margin-top: 5px;
}

.card-user-info {
    background-color: #ffffff00;
    color: #ffffff;
    border: none;
}

.fill-container img {
    width: 100%;
    height: 100%;
}

.custom-navbar a {
    width: 100%;
    text-align: center;
}

.flex-download {
    flex-direction: row !important;
    align-items: center !important;
    justify-items: center;
    gap: 10px;
}

.download-app {
    margin-bottom: 0px;
    height: fit-content;
}

.login-form{
    background-color: #ffaf4c;
    padding: 20px;
    border-radius: 10px;
}

.login-form>form {
    width: 40%;
}

.list-group{
    margin-bottom: 40px;
}

.list-group-item{
    background-color: transparent !important;
    border: 2px solid #401500 !important;
    height: 40px;
}

.list-group-item:first-child{
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
}

.list-group-item:last-child{
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.page-pagination{
    position: absolute;
    bottom: 0;
    right: 10px;
    height: 30px;
}

.page-pagination li{
    width: 20px;
    height: 25px;
    border-radius: 5px;
    background-color: #401500;
    border: 1px solid #000000 !important;
    text-align: center !important;
    justify-content: center !important;
    align-items: center !important;
}

.page-pagination a{
    background-color: transparent !important;
}


@media (max-width: 678px) {

    .download-button {
        display: flex;
        padding-right: 2rem !important;
    }

    .flex-download a img {
        width: 50px;
        height: auto;
    }

    .gif-image a img {
        width: 100px;
        height: auto;
    }

    .login-form>form {
        width: 80%;
    }

    .content{
        border-radius: 0px;
    }

    body{
        min-height: auto;
    }

    .custom-navbar a{
        font-size: 13px;
    }
}

/* Styles for tablets */
@media (min-width: 679px) and (max-width: 1024px) {
    .download-button {
        position: relative;
    }

    .new-notification {
        position: relative;
        top: 0;
    }

    .flex-download a img {
        width: 120px;
        height: auto;
    }

    .login-form>form {
        width: 60%;
    }

    
}

@media (max-width: 768px){
    .content{
        border-radius: 0px;
    }

    body{
        min-height: auto;
    }

    .custom-navbar a{
        font-size: 13px;
    }
}

.container-info{
    background-color: #ffaf4c;
    min-height: 100vh;
    border-radius: 10px;
}