/* General Style */
@font-face {
    font-family: "LamaRounded";
    src: url("./font/Lama-Rounded/Fonts/Web/Standard/LamaRounded-Regular.woff") format("woff");
    font-style: normal;
}
:root{
    --primary-color: #52B788;
    --secondary-color: #00416B;
    --light-color: #fafafa;
    --white-color: #ffffff;
    --dark-color: #1e1e1e;
    --gray-color: #e9ecef; 
    /* --gray-dark-color: #C7C9D9; */
}
*{
    padding: 0;
    margin: 0;
}
body{
    width: 100%;
    height: 100%;
    background-color: var(--white-color);
    color: var(--secondary-color);
    font-family: "LamaRounded" , sans-serif !important;
}
h1{
    font-size: 18pt;
}
h2{
    font-size: 17pt;
}
h3{
    font-size: 16pt;
}
h4{
    font-size: 15pt;
}
h5{
    font-size: 14pt;
}
h6{
    font-size: 13pt;
}
p{
    font-size: 15pt;
}
small{
    font-size: 10pt;
}
label{
    font-size: 11pt;
}
span{
    font-size: 11pt;
}
b{
    font-size: 11pt;
}
.text-primary{
    color: var(--primary-color) !important;
}
.text-secondary{
    color: var(--secondary-color) !important;
}
.text-light{
    color: var(--light-color) !important;
}
.text-dark{
    color: var(--dark-color) !important;
}
.text-gray{
    color: var(--gray-color) !important;
}
.text-gray-dark{
    color: var(--gray-color) !important;
}
.bg-primary{
    background-color: var(--primary-color) !important;
}
.bg-secondary{
    background-color: var(--secondary-color) !important;
}
.bg-gray{
    background-color: var(--gray-color) !important;
}
.btn-primary{
    background-color: var(--primary-color);
    border: 1px solid var(--primary-color);
    transition: all ease-in-out 0.4s;
}
.btn-secondary{
    background-color: var(--secondary-color);
    border: 1px solid var(--secondary-color);
    transition: all ease-in-out 0.4s;
}
.btn-gradient{
    background-image: linear-gradient(to right, rgba(82, 183, 136, 1), rgba(0, 65, 107, 1));
    color: white;
    border: 0;
    border-radius: 10px;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active , .btn-primary:visited{
    background-color: var(--primary-color);
    border: 1px solid var(--primary-color);
}
.btn-secondary:hover , .btn-secondary:focus , .btn-secondary:active , .btn-secondary:visited{
    background-color: var(--secondary-color);
    border: 1px solid var(--secondary-color);
}
.cursor-pointer{
    cursor: pointer;
}
.form-check-input:checked {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}
/* Login Style */
.auth-image-section, .auth-form-section{
    width: 100%;
    min-height: 100vh;
    height: 100%;
}
.auth-form-section{
    background-color: var(--light-color);
    align-content: center;
    padding: 30px;
}
.auth-image-section{
    background-image: linear-gradient(to bottom right, var(--primary-color),var(--secondary-color));
    color: var(--white-color);         
}
.auth-image-section .auth-text{
    height: 50vh;
    text-align: center;
    align-content: center;
}
.auth-image-section .auth-text hr{
    width: 50px;
    height: 2px;
    background-color: var(--white-color);
    justify-self: center;
}
.auth-image-section .image{
    width: 100%;
    height: 50vh;
    background-image: url(../../uploads/pages/auth-image.svg);
    background-size: contain;
    background-repeat: no-repeat;
    /* background-position: center left; */
}
input[type="text"],input[type="email"],input[type="password"],
input[type="number"],input[type="url"],input[type="search"],
input[type="phone"],input[type="file"],input[type="date"],
textarea,select, .input-group-text{
    background-color: var(--gray-color) !important;
}
input[type="text"],input[type="email"],input[type="password"],
input[type="number"],input[type="url"],input[type="search"],
input[type="phone"],input[type="file"],input[type="date"],
textarea,select{
    /* height: 45px !important; */
}
textarea{
    height: 110px !important;
}
/* Dashboard Style */
.sidebar{
    width: 250px;
    max-width: 250px;
    height: 100%;
    overflow: auto;
    position: fixed;
    top: 0px;
    right: 0px;
    transition: all ease-in-out .5s;
    z-index: 1000;
}
.sidebar.inactive{
    right: -250px;
}
.navbar{
    position: fixed;
    top: 0px;
    width: inherit;
    /* width: auto; */
    height: 65px;
    padding: 10px;
    margin-right: 250px;
    transition: all ease-in-out .5s;
    z-index: 990;
}
.navbar.inactive{
    margin-right: 0px;
}
.main{
    width: auto;
    margin-right: 250px;
    transition: all ease-in-out .5s;
}
.main.inactive{
    margin-right: 0px;
}
.first-section{
    margin-top: 1.5cm;
}
#toggleNavBtn{
    font-size: 25px;
    cursor: pointer;
}
.navbar-toggler{
    color: var(--secondary-color);
}
.navbar-logo{
    width: 150px;
}
.nav-item{
    margin-top: 10px;
}
.nav-link {
    width: 100%;
    /* background-color: var(--white-color); */
    padding: 10px;
    border-radius: 15px;
    color: var(--secondary-color);
}
.nav-link:hover {
    width: 100%;
    background-color: var(--white-color);
    padding: 10px;
    border-radius: 15px;
    color: var(--primary-color);
}
.navbar-nav .nav-link.active, .navbar-nav .nav-link.show {
    width: 100%;
    background-color: var(--white-color);
    padding: 10px;
    border-radius: 15px;
    color: var(--primary-color);
}
.box{
    width: 100%;
    height: 100%;
    min-height: 120px;
    padding: 15px;
    border-radius: 15px;
    /*align-content: center;*/
}
.indicator{
    direction: rtl;
    width: 100%;
    height: 100%;
    /* padding: 15px 30px 15px 30px; */
    border-radius: 15px;
    align-items: center;
    overflow-x: auto;
    overflow-y: hidden;
    position: relative;
}
.user-image{
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
}
.shadowing{
    box-shadow: 10px 10px 12px -11px rgba(0,0,0,0.75);
    -webkit-box-shadow: 0px 0px 18px -7px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 0px 0px 18px -7px rgba(0, 0, 0, 0.75);
}
.welcome-banner{
    background-image: url(../../uploads/pages/welcome-banner.svg);
    background-size: 25% 110%;
    /* background-size: contain; */
    background-position: left bottom;
    background-repeat: no-repeat;
    align-content: center;
}
.welcome-banner-teacher{
    background-image: url(../../uploads/pages/welcome-banner-teacher.webp);
    background-size: contain;
    background-position: left bottom;
    background-repeat: no-repeat;
    align-content: center;
}
.learning-hour{
    position: relative;
}
/*.learning-hour span{*/
/*    position: absolute;*/
/*    align-self: center;*/
/*    justify-self: anchor-center;*/
/*    text-align: center;*/
/*}*/
 .learning-hour span{
    position: absolute;
    top: 35%;
    left: 35%;
    text-align: center;
} 
.points-earning{
    position: relative;
}
.points-earning img{
    width: 92px;
    position: absolute;
    top: 100%;
    left: 0%;
    text-align: center;
}
.bg-folder{
    background-image: url(../../uploads/pages/folder.svg);
    background-size: 120px;
    background-position: left top;
    background-repeat: no-repeat;
}
.bg-bag{
    background-image: url(../../uploads/pages/bag.svg);
    background-size: 120px;
    background-position: left top;
    background-repeat: no-repeat;
}
.bg-students{
    background-image: url(../../uploads/pages/students.svg);
    background-size: 120px;
    background-position: left top;
    background-repeat: no-repeat;
}
.bg-group{
    background-image: url(../../uploads/pages/group.svg);
    background-size: 120px;
    background-position: left center;
    background-repeat: no-repeat;
}
.bg-projects{
    background-image: url(../../uploads/pages/projects.svg);
    background-size: 120px;
    background-position: left top;
    background-repeat: no-repeat;
}
/* Roadmap Style */
.indicator .roadmap-steps .step .circle{
    width: 50px;
    height: 50px;
    border-radius: 50%;
    align-content: center;
    text-align: center;
    flex-shrink: 0;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}
.indicator .roadmap-steps .step .circle:not(:last-child)::after{
    content: '';
    position: absolute;
    top: 50%;
    right: 100%;
    transform: translateY(-50%);
    width: 170px;
    height: 2px;
    background-color: var(--primary-color, black);
}
.roadmap-steps .step:last-child .circle::after {
    display: none;
}
.roadmap-steps{
    display: flex;
    white-space: nowrap;
    flex-direction: row;
    gap: 30px;
}
.roadmap-steps .step{
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    gap: 10px;
    align-items: center;
}
.alert{
    border-radius: 15px;
    padding: 10px;
}
.roadmap-unit-circle{
    width: 50px;
    height: 50px;
    border-radius: 50%;
    align-content: center;
    text-align: center;
    flex-shrink: 0;
    position: relative;
}
.roadmap-unit-circle::after{
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 3px;
    min-height: 16cm;
    height: 100%;
    background-color: var(--primary-color, black);
}
.roadmap-unit-circle.last-circle::after {
    display: none;
}
.unit-number-icon{
    width: 50px;
}
.unit-info{
    width: 100%;
    height: auto;
    border: 1px solid var(--dark-color);
    border-radius: 15px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0px;
    overflow: auto;
}
.unit-info .part{
    width: 100%;
    padding: 20px;
}
@media only screen and (max-width: 600px) {
    .unit-info{
        grid-template-columns: 1fr;
    }
    /*.unit-info .part {
        min-width: max-content;
        width: -webkit-fill-available;
        padding: 20px;
    }*/
}
.border-primary{
    border: 2px solid var(--primary-color) !important;
}
.border-secondary{
    border: 2px solid var(--secondary-color) !important;
}
.border-gray{
    border: 2px solid var(--gray-color) !important;
}
.border-left-primary{
    border-left: 2px solid var(--primary-color) !important;
}
.border-left-secondary{
    border-left: 2px solid var(--secondary-color) !important;
}
.border-left-gray{
    border-left: 2px solid var(--gray-color) !important;
}
.border-right-primary{
    border-right: 2px solid var(--primary-color) !important;
}
.border-right-secondary{
    border-right: 2px solid var(--secondary-color) !important;
}
.border-right-gray{
    border-right: 2px solid var(--gray-color) !important;
}
.primary-unit-uploads{
    width: 100%;
    height: auto;
    border: 2px dashed var(--primary-color);
    padding: 20px;
    border-radius: 15px;
}
.primary-unit-uploads .unit-modal {
    width: 100%;
    height: auto;
    border: 2px dashed var(--primary-color);
    padding: 25px;
    border-radius: 15px;
    text-align: -webkit-center;
    align-items: center;
}
.gray-unit-uploads{
    width: 100%;
    height: auto;
    border: 2px dashed var(--gray-color);
    padding: 20px;
    border-radius: 15px;
}
.gray-unit-uploads .unit-modal {
    width: 100%;
    height: auto;
    border: 2px dashed var(--gray-color);
    padding: 25px;
    border-radius: 15px;
    text-align: -webkit-center;
    align-items: center;
}
/* Asessments Page */
.test-icon{
    width: 30px;
    height: auto;
}
.question-circle {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    padding-right: 20px;
    background-color: var(--gray-color);
    padding-top: 10px;
}
.question-number {
    position: relative;
    right: 10px;
}
.question-number h1{
    color: var(--primary-color);
    font-weight: bold;
}
.assessment-desc{
    min-height: 7cm;
    max-height: 7cm;
    overflow: auto;
}
/* Courses Page */
.course-image {
    /* padding: 0;
    margin: 0; */
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 15px 15px 0px 0px;
}
.course-details{
    width: 100%;
    height: auto;
    padding: 0px 20px 20px 20px;
}
/* Table Design */
table {
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--gray-color);
  border-radius: 15px;
  overflow: hidden;
}
table thead tr th, table tbody tr td{
    color: var(--secondary-color) !important;
}
table thead tr th{
    text-align: center;
    white-space: nowrap;
}
table tbody tr td{
    width: 100px;
    white-space: nowrap;
}
/* Splash Page */
#splash{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color:#e9ecef4b;
    /* background-color: #8dddc84d; */
    display: flex;
    flex-direction: column;
    gap: 30px;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    backdrop-filter: blur(50px);
}
#splash > img{
    width: 80px;
    height: 80px;
}
/* Tasks */
.task-frame{
    border: 3px solid var(--gray-color);
    padding: 10px;
    border-radius: 15px;
}

.bg-yellow-folder-full{
    background-image: url(../../../uploads/pages/folder.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100%;
    width: 100%;
    height: 100%;
}