@media only screen and (max-width:1319px){
.container{width: 100%; max-width: 100%;}
.demographic-questionnaire-bg.mt-5{margin-top: 0 !important;}
}

@media only screen and (max-width:1280px){
.form-bg{background-size:150px auto;}
.form-logo a{max-width: 100px;}
.form-head h2{font-size: 24px;}
.start-task-des{min-height: 10px;}
.start-task-des .jspsych-display-element{height: auto !important; min-height: 10px;}
}

@media only screen and (max-width:991px){
.navbar{margin-left: auto; margin-right: 15px; position: inherit;}
.navbar-collapse{position: absolute; left: 0; top: 100px; margin-left: 15px; margin-right: 15px; width: calc(100% - 30px); background: #fff;padding: 15px; border-radius: 10px; box-shadow: 0 0 10px rgba(0,0,0,0.1);}
}

@media only screen and (max-width:1023px){
.start-task-des img{max-width: 70px;}
.start-task-des p{font-size: 14px;}
}

@media only screen and (max-width:767px) {
.form-bg{background-size:100px auto;}
.form-logo{padding-bottom: 30px;}
.form-content-box{padding: 20px;}
.form-head p{font-size: 14px;}
.form-control{font-size: 14px;}
.form-foot{margin-top: 30px;}
footer p{font-size: 14px;}
.statistics-box h3{font-size: 18px;}
.padd30{padding: 15px;}
.courses-invitations-box h3{font-size: 18px;}
.month-navigation{margin-top: 15px;}
.page-head h2{font-size: 18px;}
p{font-size: 14px;}
.date-list ul{flex-wrap: wrap;}
.date-list ul li{width: 100%; margin-bottom: 15px;}
.date-list ul li a{font-size: 14px;}
.date-list ul li a.active{font-weight: 600;}
.progress-box{flex-wrap: wrap;}
.progress-box h3{font-size: 18px;}
.progress-box p{font-size: 14px;}
.progress-box .progress{height: 10px;}
.progress-box .progress-bar{height: 10px;}
.progress-box .progress-bar span{font-size: 14px;}
.jspsych-display-element{padding: 0;}
.start-task-des{padding-left: 0; padding-right: 0;}
.my-profile-box{width: 100%;}
.site-bg .site-bg{padding: 0;}
.my-profile-head img{max-width: 70px;}
.name-email-box h3{font-size: 16px;}
.dashboard-head h3{font-size: 18px;}
.notifications-list ul li{flex-wrap: wrap;}
.notifications-left{flex: auto; padding-right: 0; margin-bottom: 15px;}
.notifications-left h3{font-size: 14px;}
.notifications-right{flex: auto; padding-left: 0;}
.notifications-right h3{font-size: 14px;}
.notifications-right p{font-size: 14px;}
.notifications-right a{font-size: 14px;}
.notifications-right a i{font-size: 14px;}
.notifications-right a:hover{background: var(--light-orange);}
.notifications-right a:hover i{color: var(--white);}
.dashboard-list ul{grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));}
.dashboard-list ul li h3{font-size: 14px;}
.dashboard-list ul li p{font-size: 14px;}
.dashboard-list ul li a{font-size: 14px;}
.dashboard-list ul li a i{font-size: 14px;}
.dashboard-list ul li a:hover{background: var(--light-orange);}
.dashboard-list ul li a:hover i{color: var(--white);}
.dashboard-box figure img{max-width: 65px;}
.dashboard-box figure figcaption p{font-size: 14px;}
.dashboard-box figure figcaption a{font-size: 14px;}
.dashboard-box figure figcaption a i{font-size: 14px;}
.dashboard-box figure figcaption a:hover{background: var(--light-orange);}
.dashboard-box figure figcaption a:hover i{color: var(--white);}
.btn{padding: 0px 15px;}
.courses-action-btn{flex-wrap: wrap; gap: 10px;}
.courses-action-btn a i{font-size: 14px;}
.courses-action-btn a:hover{background: var(--light-orange);}
.courses-action-btn a:hover i{color: var(--white);}
.courses-des .courses-user{margin-bottom: 10px;}
.progress-box{display: flex; align-items: center; margin-bottom: 10px;}
.progress-box .progress{width: 280px; max-width: 280px; margin-right: 10px;}
.progress-bar{background-color: var(--brown);}
.progress{background: var(--light-orange);}
.courses-action-btn a{margin-right: 0;}
.courses-list-head{flex-wrap: wrap;}
.courses-list-head-left{flex: auto; padding-right: 0; margin-bottom: 15px; width: 100%;}
.courses-list-head-left h3{font-size: 14px;}
.courses-list-head-right{flex: auto; padding-left: 0; width: 100%;}
.courses-list-head-right h3{font-size: 14px;}
.courses-list-head-right p{font-size: 14px;}
.courses-list-head-right a{font-size: 14px;}
.courses-list-head-right a i{font-size: 14px;}
.courses-list-head-right a:hover{background: var(--light-orange);}
.courses-list-head-right a:hover i{color: var(--white);}
.courses-level ul{flex-wrap: wrap; gap: 10px;}
.courses-level ul li{margin-right: 0;}
.courses-level ul li a{font-size: 14px;}
.courses-level ul li a i{font-size: 14px;}
.courses-level ul li a:hover{background: var(--light-orange);}
.courses-level ul li a:hover i{color: var(--white);}
.copy-code-box{width: 100%; padding: 0;}
.copy-code-box h3{font-size: 14px;}
.copy-code-box p{font-size: 14px;}
.copy-code-box a{font-size: 14px;}
.copy-code-box a i{font-size: 14px;}
.copy-code-box a:hover{background: var(--light-orange);}
.copy-code-box a:hover i{color: var(--white);}
.form-content-box h1{font-size: 22px;}
.form-content-box h2{font-size: 20px;}
.form-content-box h3{font-size: 18px;}
.form-content-box h4{font-size: 16px;}
.form-content-box h5{font-size: 14px;}
.form-content-box h6{font-size: 12px;}
.task-students-tab ul.nav{flex-wrap: inherit;white-space:nowrap;}
.task-students-tab ul.nav li{width: auto;}
.task-students-tab ul.nav li a{font-size: 14px;}
.task-students-tab ul.nav li a i{font-size: 14px;}
.task-students-tab ul.nav li a:hover{background: var(--light-orange);}
.task-students-tab ul.nav li a:hover i{color: var(--white);}
.task-students-tab{overflow: auto;}
.table-responsive .table{width: 600px;}
.search-bar input{width: 100%; float: none;}
}