/* Background styles */

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;1,100;1,300;1,400;1,500;1,700&display=swap');



.btn, nav {
 
    font-weight: 500;
}

h1, h2 {
   
}


h3, h4, h5 {
    
}

a {
    color: #378a9c;
}


.navbar-brand img {
    max-width: 5vw;
}


.wash {
    filter: grayscale(1);
}

.btn-success {
    background-color: #92C022 !important;
    border-color: #92C022 !important;
    box-shadow: 0px 2px 8px rgb(0 0 0 / 5%);
    transition: 0.2s ease-in-out;
    white-space: nowrap;
}

.border-green {
    border: 2px solid #92C022;
}


body_old {
    background-color: #378a9c;
    background-image: radial-gradient(at 47% 33%, hsl(54.06, 85%, 56.00000000000001%) 0, transparent 59%), radial-gradient(at 82% 65%, hsl(23.17, 77%, 48%) 0, transparent 55%);
    background-attachment: fixed;
    font-family: 'Montserrat', sans-serif;
}

body {
    /*background-color: #f3f2f1;*/
    /*background-color: #C6D5DC;*/
    /*#F5D0B5*/

    font-family: 'Roboto', sans-serif;
}




/* Glassmorphism card effect */
.card {
    /*    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    background-color: rgba(255, 255, 255, 0.75);
    border-radius: 12px;
    border: 1px solid rgba(209, 213, 219, 0.3);
*/
    /* From https://css.glass */
    margin-bottom: 10px;
    /*background: rgba(255, 255, 255, 0.2);*/
    border-radius: 16px;
/*    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);*/
    /*border: 1px solid rgba(255, 255, 255, 0.3);*/
}


.accordion {
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    background-color: rgba(255, 255, 255, 0.75);
    border: 1px solid rgba(209, 213, 219, 0.3);
    margin-bottom: 10px;
}

.accordion-body {
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);

}

.accordion-button:not(.collapsed) {
    background-color: #378A9C;
    color:white;
}

.accordion-header {
    background-color: #737275;
}

nav {
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    background-color: rgba(255, 255, 255, 0.75);
    border-radius: 12px;
    border: 1px solid rgba(209, 213, 219, 0.3);
    margin-left: 1rem;
    margin-top: 2rem;
    margin-right: 1rem;
    padding: 20px;
}


#navspacer {
    padding-top: 120px;
}

footer {
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    background-color: rgba(255, 255, 255, 0.75);
    border-radius: 12px;
    border: 1px solid rgba(209, 213, 219, 0.3);
    margin-left: 1rem;
    margin-right: 1rem;
    padding: 20px;
    margin-bottom: 2rem;
    font-size: .8rem;
}



.raised-sm {
    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.05) !important
}


.btn-primary {
    /*    background-color: #734C90;
    border-color: #734C90;*/
    background-color: #EEDB2E;
    border-color: #EEDB2E;
    box-shadow: 0px 2px 8px rgb(0 0 0 / 5%);
    transition: 0.2s ease-in-out;
    white-space: nowrap;
}

.btn-primary:hover {
    /*    background-color: #734C90;
    border-color: #734C90;*/
    background-color: #EEDB2E;
    border-color: #EEDB2E;
    box-shadow: 0px 2px 8px rgb(0 0 0 / 5%);
    transition: 0.2s ease-in-out;
    white-space: nowrap;
}


.roleicon {
}

    .roleicon img {
        width: 5rem;
        margin-right: 5px;
    }

.progress {
    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.05) !important;
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    background-color: rgba(255, 255, 255, 0.25);
}

.progress-incomplete {
    background-color: #DA661D;
}

.progress-complete {
    background-color: #92C022;
}

.tt {
    width: inherit;
}
.biteindicator {
    width: 100%;
}

.biteindicator-half {
    width: 25%;
}
.success {
    width: 100%;
}

.fill {
    width: 100%;
    border-radius: 16px;
}

/* Generated by https://generator.ui.glass/ */


.login-card {
    margin-top: 15vh;
    margin-bottom: 15vh;
}

.loginlabel {
    text-align: right;
}

.tenbelow {
    padding-bottom: 10px;
}





.videofact {
    color: #737275;
}

#videoplayer {
    width: 100%;
}


.footericon {
    color: #378A9C;
}

footer a{

    text-decoration:none;
}

.category {
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    text-decoration: none;
}

.document {
    text-decoration: none;
    text-align:center;
}
.documenticon {
    font-size: 3em;
    color: #734C90;
}



div.anim {
    display: block;

    animation-name: animateIn;
    animation-duration: 700ms;
    animation-delay: calc(var(--animation-order) * 200ms);
    animation-fill-mode: both;
    animation-timing-function: ease-in-out;
}

img.anim {
    display: block;
    animation-name: animateIn;
    animation-duration: 700ms;
    animation-delay: calc(var(--animation-order) * 200ms);
    animation-fill-mode: both;
    animation-timing-function: ease-in-out;
}

/*    li + li {
        margin-top: 16px;
    }*/

@keyframes animateIn {
    0% {
        opacity: 0;
        transform: scale(0.6) translateY(-8px);
    }

    100% {
        opacity: 1;
    }
}


/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
    .navbar-brand img {
        max-width: 25vw;
    }
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {

}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
  
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {

}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
 
}