@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;400;500&display=swap');

:root{
    --primary: #1aa6c9;
    --secondary: #F8F8F8;
    --accent: #639FDB;
    --primary-fg: #191A31;
  
    --body-fg: #333;
    --body-bg: #fff;
    --body-quiet-color: #666;
    --body-loud-color: #000;
    
    /* CSS SOCIAL */
    --custom-facebook: #4267B2;
    --custom-twitter: #1DA1F2;
    --custom-reddit: #FF5700;
    --custom-pinterest: #E60023;
    --custom-linkedin: #0E76A8;
    --custom-instagram: #E1306C;

    /* CSS SCREEN SIZE */
    --custom-sm: 576px;
    --custom-md: 768px;
    --custom-lg: 992px;
    --custom-xl: 1200px;
    --custom-xxl: 1400px;
}

/* Base Styles */
.base-body{
    height: 100vh!important;
}

.wrapper-padding{
    padding-top: 6rem!important;
    display: flex;
    align-items: center;
    justify-content: center;
}


#alert-board{
    position: fixed;
    bottom: 0;
    right: 0;
    z-index: 99;
}

/* Custom background */

.bg-transparent{
    border: none!important;
    background-color: transparent!important;
}

.bg-custom-primary{
    background-color: var(--secondary)!important;
}

.bg-custom-dark{
    background-color: var(--body-quiet-color)!important;
}

/* Custom fonts */
.ubuntu-light{
    font-family: 'Ubuntu', sans-serif!important;
    font-weight: 300!important;
}

.ubuntu{
    font-family: 'Ubuntu', sans-serif!important;
    font-weight: 400!important;
}

.ubuntu-medium{
    font-family: 'Ubuntu', sans-serif!important;
    font-weight: 500!important;
}

/* Language button widget */

.btn-lang{
    background:none;
	border: none;
    border-radius: 2.5em;
	padding: 0;
    margin: 2px;
}

.btn-lang:focus-visible{
    background:none;
	border: none;
    border-radius: 2.5em;
	padding: 0;
    margin: 0;
}

.img-lang{
    height: 2.5em;
    border-radius: 2.5em;
}

/* Navbar Custom */
.navbar-img{
    height: 5rem;
    width: auto;
}

.navbar-custom .navbar-brand{
    text-transform:capitalize!important;
    font-size: 14px!important;
    font-family: 'Ubuntu', sans-serif!important;
    font-weight: 800!important;
    color: var(--primary-fg);
}

.navbar-custom .nav-link{
    text-transform:capitalize!important;
    font-size: 14px!important;
    font-family: 'Ubuntu', sans-serif!important;
    font-weight: 700!important;
    color: var(--primary-fg)!important;
}

.navbar-custom .nav-link:hover{
    color: var(--primary)!important;
}

/* .navbar-custom .navbar-collapse{
    background-color: var(--custom-ultramarine-blue)!important;
} */

/* .navbar-custom .navbar-collapse::after{
    background-color: var(--custom-byzantine)!important;
} */

/* .navbar-custom .nav-link:hover::before{
    content: ">";
    position: absolute;
    left:5px;
    z-index: 100;
}
.navbar-custom .nav-link:hover::after{
    content: "<";
    position: absolute;
    right: 5px;
    z-index: 100;
} */


/* Social-Share Widget */

.social{
    align-items: center;
}

.social-share{
    align-items: center;
}

.social-share a{
    padding: 0 0.5rem 0 0.5rem ;
}

.fa-reddit{
    color: var(--custom-reddit);
}

.fa-reddit:hover{
    opacity: 70%;
}

.fa-facebook{
    color: var(--custom-facebook);
}

.fa-facebook:hover{
    opacity: 70%;
}

.fa-twitter{
    color: var(--custom-twitter);
}

.fa-twitter:hover{
    opacity: 70%;
}

.fa-pinterest{
    color: var(--custom-pinterest);
}

.fa-pinterest:hover{
    opacity: 70%;
}

.fa-linkedin{
    color: var(--custom-linkedin);
}

.fa-linkedin:hover{
    opacity: 70%;
}

.fa-instagram{
    color: var(--custom-instagram);
}

.fa-instagram:hover{
    opacity: 70%;
}


/* Login Form */

.login-title{
    margin-bottom: 20px;
    padding: 0;
}

.login-img{
    height: 10rem;
    width: auto;
}

.login-form-wrapper{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    background-color: var(--body-quiet-color);
}

.login-box{
    display: inline-flex;
    flex-direction: column;
    color: var(--primary);
    padding: 20px;
    width: 40%;
    height: fit-content;
    border-radius: 15px;
    background-color: var(--secondary);
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.login-form{
    display: flex!important;
    flex-direction: column;
    justify-content: center;
    width: 80%;
}

.login-form-control{
    width: 100%;
    border-radius: 20px;
    padding: 10px;
    margin-bottom: 10px;
}


.login-btn{
    align-self: center;
    width: fit-content;
    margin-top: 1rem;
    padding: 0.5rem 4rem;
    background-color: var(--primary);
    border-color: (var(--primary));
    color: var(--secondary);
    opacity: 1;
    text-transform: capitalize;
}

.login-btn:hover{
    background-color: var(--primary);
    border-color: (var(--primary));
    opacity: 0.8;
}

/* Registration Form */

.registration-title{
    margin-bottom: 20px;
    padding: 0;
}

.registration-form-wrapper{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    background-color: var(--secondary);
}

.registration-box{
    display: inline-flex;
    flex-direction: column;
    color: var(--secondary);
    padding: 20px;
    width: 40%;
    height: fit-content;
    border-radius: 30px;
    background-color: var(--body-quiet-color);
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.registration-form{
    display: flex!important;
    flex-direction: column;
    justify-content: center;
    width: 80%;
}

.registration-form-control{
    width: 100%;
    border-radius: 20px;
    padding: 10px;
    margin-bottom: 10px;
}


/* Upload Form */
.upload-table-box{
    display: inline-flex;
    flex-direction: column;
    min-width: 50vw;
    max-height: 80vh;
    width: fit-content;
    background-color: var(--secondary);
    border-radius: 1rem;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    overflow: scroll;
}

.upload-table-box h3{
    font-weight: 700;
    color: var(--primary-fg);
    align-self: center;
}

.upload-table{
    align-self: center;
    min-width: var(--custom-sm);
    width: 90%;
    color: #212529;
}

.upload-table tr a{
    font-weight: 400;
    color: var(--primary);
}

.upload-table tr a:hover{
    font-weight: 400;
    color: var(--primary-fg);
}


.upload-form{
    display: inline-flex!important;
    flex-direction: column;
    justify-content: center;
    width: 100%;
}

.upload-btn{
    align-self: center;
    width: fit-content;
    margin-top: 1rem;
    margin-bottom: 1rem;
    padding: 0.5rem 4rem;
    background-color: var(--primary);
    border-color: (var(--primary));
    color: var(--secondary);
    opacity: 1;
    text-transform: capitalize;
}

.upload-btn:hover{
    background-color: var(--primary);
    border-color: (var(--primary));
    opacity: 0.8;
}

.upload-btn:focus{
    align-self: center;
    width: fit-content;
    margin-top: 1rem;
    margin-bottom: 1rem;
    padding: 0.5rem 4rem;
    background-color: var(--primary);
    border-color: (var(--primary));
    color: var(--secondary);
    opacity: 1;
    text-transform: capitalize;
}


@media (max-width: 600px) { 
    .login-box{
        width: 300px;
    }
    .registration-box{
        width: 300px;
    }
 }



/* Aws Upload */

 .aws-upload-box{
    display: flex;
    height: 100%;
    flex-wrap: nowrap;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    padding: 20px;
 }

 .aws-upload-box form {
     display: flex;
     align-items: center;
     justify-content: flex-start;
     flex-direction: column;
     flex-wrap: nowrap;
 }

 .aws-upload-job{
     display: flex;
     align-items: center;
     justify-content: flex-start;
     flex-direction: column;
     flex-wrap: nowrap;
 }

.aws-upload-entry{
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    align-items: flex-start;
    justify-content: left;
    background-color: var(--body-fg);
    padding: 1rem;
    margin: 1rem;
    border-radius: 1rem;
    color: var(--secondary);
}

.aws-progress{
    background-color: var(--body-quiet-color)!important;
    height: 1.5rem!important;
    width: 100%;
    border-radius: 1rem;

}

.aws-progress-bar{
    background-color: var(--primary)!important;
    height: 1.5rem!important;
    color: var(--secondary);
    border-radius: 1rem;

}