@import url('https://fonts.googleapis.com/css2?family=Gaegu:wght@300;400;700&family=Open+Sans:wght@400;700&display=swap');
body{ background:url(../images/form.png); background-size: 100%; position: relative; font-size: 20px; overflow-x: hidden; font-family: 'Gaegu', cursive; color: #000; letter-spacing: 0; font-weight: 300; }
a, a:link, a:visited, a:hover, a:active, button, button:hover, i, i:hover, h6, h6:hover, img, .form-control:focus{ box-shadow: none; text-decoration:none; outline:none; -webkit-transition: all .3s ease-in-out; transition: all .3s ease-in-out; }
img{ max-width:100%;} input, textarea, button, input:focus, textarea:focus, button:focus{outline: none;}
a, a:hover, a:focus{color:inherit;}
ul{list-style: none; padding: 0px; margin: 0px;}
p{line-height: 24px; margin-bottom: 15px; color: #414141;}
h5, h4, h3, h2{letter-spacing: 0.5px; font-family: 'Gaegu', cursive;}
h1{font-size: 42px; color: #593812; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase;}
.cloud1{position: absolute; top: 180px; left: 20%; z-index: -1;}
.cloud2{position: absolute; top: 220px; right: 1%; z-index: -1;}
.cloud3{position: absolute; top: 350px; left: -1%; z-index: -1;}
.assignment{padding: 60px 0px;}
header{background:url(../images/form.png); background-size: cover; box-shadow: 0 3px 15px -6px rgb(0 0 0 / 15%);}
header .logo{max-height: 90px;}
.header-appear { position: fixed; width: 100%; top: 0px; z-index: 15; border: none;}
.sidebar{-webkit-transition: all .3s ease-in-out;-o-transition: all .3s ease-in-out;transition: all .3s ease-in-out;position: fixed; top: 90px; right: 0; height: 100%; width: 250px; background: url(../images/form.png); background-size: cover; box-shadow: 0px 8px 20px rgba(103, 103, 103, 0.10); z-index: 333333; display: block; -webkit-box-align: center; -ms-flex-align: center; align-items: center;  color: #e9e9e9; text-align: center;  overflow-y: auto;}
.sidebar-closed{-webkit-transform: translateX(100%); -ms-transform: translateX(100%); transform: translateX(100%);}
.sidebar-opened{	-webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0);}
.sidebar li{list-style: none; font-size: 20px;  color:#1e444e; font-weight: 700; padding: 8px 20px;}
.sidebar li:hover{color:#0498E4;}
#menu-wrapper{float: right; display: none;}
header nav ul{text-align: center;}
header nav ul li{display: inline-block; color: #3B3B3B; font-weight: 700; font-size: 24px; padding: 0px 20px;}
header nav ul li:hover{color: #74A4C8;}
header .dropdown-menu { padding:0px;font-size: 0.875rem;line-height: 22px; color: #5c5776; border: none; box-shadow: 0 10px 30px 0 rgba(31, 45, 61, 0.1); border-radius: 0.5rem; left: auto; right: 0; overflow: hidden;}
header .dropdown-menu { display: block; visibility: hidden; opacity: 0; transform: translateY(20px); transition: all 0.3s ease-in; }
header .dropdown:hover > .dropdown-menu { transform: scaleY(1); opacity: 1; visibility: visible; }
header .dropdown-submenu:hover > .dropdown-menu { transform: scaleY(1); opacity: 1; visibility: visible; }
.avatar-md { width: 56px; height: 56px;}
.avatar img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover;}
.avatar { position: relative; display: inline-block; width: 3rem; height: 3rem; font-size: 1rem; }
.avatar-online:before { background-color: green;}
.avatar-indicators:before { content: ""; position: absolute; bottom: 0px; right: 5%; width: 30%; height: 30%; border-radius: 50%; border: 2px solid #fff;display: table; }
.dropdown-divider{margin: 0px;}
.profile-dropdown{padding: 0px; text-align: left; margin: 0px; list-style: none; text-align: center;  font-family: 'Open Sans', sans-serif;}
.profile-dropdown li a{padding: 5px 25px; background: #36ADF2; color: #fff; border-bottom: 1px solid #fff;}
.profile-dropdown li i{padding-left: 8px;}
.profile-dropdown li:last-child a{border: none;}
header .dropdown{display: inline-block;}
.dropdown .dropdown-item h5{font-size: 16px;}
header .dropdown-item{padding:10px 10px 0px;}
.header-dp{background: #36ADF2;  border-radius: 15px; position: relative; color: #fff; font-weight: 700; font-size: 16px; padding: 6px 30px 6px 35px;}
.header-dp img{max-height: 40px; background: #fff; border-radius: 50%; border: 1px solid #fff; position: absolute; left: -12px; top: 0px;}
.header-dp label{margin-bottom: 0px; white-space: nowrap;}
.header-dp i{position: absolute; right: 0px; top:0px; border-left: 1px solid #fff; padding: 11px 5px; height: 38px;}
.over-viewtable{text-align: center; border-radius: 15px; background: #fff; overflow: hidden; margin-bottom: 30px;}
.over-viewtable th{background: #FFAA00; color: #fff; text-transform: uppercase; font-size: 24px; font-weight: 700; border: none !important;}
.over-viewtable td, .normal-table td{border: none; padding: 10px;  font-family: 'Open Sans', sans-serif; color: #737373;}
.assignment h1{margin-bottom: 30px;}
.over-viewtable td span, .normal-table td span{font-family: 'Gaegu', cursive; color: #593812; font-weight: 700; font-size: 20px;}
.assignment button, .assignment select{border: none; border-radius: 20px; text-transform: uppercase; color: #593812; font-size: 16px; font-weight: 700; background: #fff;
padding: 6px 16px; box-shadow: 0 6px 15px 6px rgb(0 0 0 / 5%); height: 38px;}
.assignment-table{text-align: center;  overflow: hidden; color: #593812; font-family: 'Open Sans', sans-serif; margin: 0px;}
.assignment-table th{background: #FFAA00; color: #593812; font-family: 'Gaegu', cursive; text-transform: capitalize; font-size: 15px; font-weight: 400; text-align: left;}
.assignment-table th, .assignment-table td{border:1px solid #755000;}
.assignment-table tfoot td:last-child{border: none;}
.assignment-table td:last-child{border-right: none;}
.assignment-table thead th{border: none; border-bottom: 1px solid #755000; border-right: 1px solid #755000;}
.assignment-table thead th:last-child{border: none;}
.assignment-table td i, .completedby td i{transform: rotate(112deg);}
.assignment-table tfoot{background: #FFAA00;}
button.back, .assignment button.next{background: rgba(255, 255, 255, 0.7);}
.assignment button:hover{background: #593812; color: #fff;}
footer{background: #d9f4fa; padding: 30px 0px;  font-family: 'Open Sans', sans-serif; position: absolute; bottom: 0px; width: 100%;}
footer h5{ font-family: 'Open Sans', sans-serif; color: #1e444e; font-size: 18px; text-transform: uppercase; margin-bottom: 20px;}
.download-app img{max-width: 130px;}
footer i{width: 35px; height: 35px; margin: 0 8px; line-height: 35px !important; background: #506ffe; border-radius: 50%; color: #fff;}
footer i:hover{background: #0498E4;}
footer .logo{max-width: 80px;}
.footer-address{color: #1e444e;}
.footer-address h6{font-weight: 700;}
.footer-address p{color: #1e444e; margin: 0px;}
#menu-wrapper div div{background-color: #1e444e !important;}
/* .custome-table{text-align: center; border:1px solid #755000; border-radius: 15px; background: #E6F2F5; overflow: hidden; margin-bottom: 30px; color: #593812; font-family: 'Open Sans', sans-serif;} */
.table-heading li{display:flex;}
.assignment .table-responsive>.table-bordered{border: none}
.table-scroll {position:relative; overflow:hidden; margin-bottom: 30px; }
.table-wrap {width:100%;overflow:auto; scrollbar-color: #b5b5b5 #fff; scrollbar-width: thin;}
.table-scroll table {width:100%; border-collapse:separate;border-spacing:0; }
.table-scroll th, .table-scroll td {padding:10px 20px;border: 1px solid rgb(117 80 0 / 6%); background: #f6f6f6; white-space:nowrap;vertical-align:top;}
.table-scroll thead td, .table-scroll tfoot td {background:#FFAA00;}
.clone {position:absolute;top:10px;left:0;pointer-events:none;}
.clone th, .clone td {visibility:hidden}
.clone td, .clone th {border-color:transparent}
.clone tbody th {visibility:visible;color:#593812;}
.clone .fixed-side {background: #ececec; color: #8c8c8c; border: 1px solid rgb(117 80 0 / 6%);visibility:visible; border-left: none; font-family: 'Open Sans', sans-serif;}
.clone thead, .clone tfoot td{background:#FFAA00;}
.brd-top0, .table-scroll tr:first-child td{border-top: none !important;}
.brd-bot0, .table-scroll tr:last-child td{border-bottom: none !important;}
.table-wrap::-webkit-scrollbar { height: 5px;}
.table-wrap::-webkit-scrollbar-track {background: #fff;  border-radius: 10px; }
.table-wrap::-webkit-scrollbar-thumb {background: #b5b5b5; border-radius: 10px; }
.line-1{width: 100%; height: 10px; background: #FFAA00; border-bottom-right-radius: 11px; border-bottom-left-radius: 11px;}
.line-2{width: 100%; height: 10px; background: #FFAA00; border-top-right-radius: 11px; border-top-left-radius: 11px; position: relative; z-index: 1;}
.normal-table{ text-align: center; background: #fff; overflow: hidden;margin-bottom: 0px;}
.mb-30{margin-bottom: 30px;}
.completedby{background: #FFAA00; border-radius: 11px; position: relative;}
.completedby h2{font-size: 24px; color: #fff; padding: 8px 20px; margin: 0px; text-transform: uppercase; font-weight: 700;}
.completedby .count{position: absolute; right:20px; font-size: 24px; color: #fff; top: 10px; font-weight: 700;}
.completedby .table{margin: 0px; font-family: 'Open Sans', sans-serif; background: #f6f6f6; color: #593812; text-align: center;}
.completedby .table th, .completedby .table td {padding: 10px 20px;border: 1px solid rgb(117 80 0 / 6%);vertical-align: middle;}
.completedby .table th{background: #8C7138; color: #fff; border: 1px solid rgba(117, 80, 0, 0.3);}
.completedby td i{color: #8C7138;}
.completedby .table td i, .completedby .table td i {transform: rotate(112deg);}
.width-80{width: 80%;}
.assignment-table  td.active{background: #593812; color: #fff;}
.completedby .table td:nth-child(2), .completedby .table th:nth-child(2){text-align: left;}
.class-report{padding: 60px 0px;}
.class-report label{font-size: 40px; font-weight: 700; color: #593812; text-transform: uppercase; margin-right: 5px;}
.class-report select{background: #593812; border: 1px solid #755000; padding: 5px 20px; color: #fff; border-radius: 5px; font-size: 24px; font-weight: 700; text-transform: uppercase; height: 44px;}
.student-profile, .student-overview{position: relative; overflow: hidden; border-radius: 11px; margin-top: 15px; margin-bottom: 30px;}
.student-profile-heading{background: #FFAA00; padding: 15px; color: #fff; position: relative;}
.student-profile-heading h3{margin: 0px; font-weight: 700; font-size: 24px; text-transform: uppercase;}
.student-profile-heading img{position: absolute; right: 10px; top: 10px; max-height: 42px;}
.student-profile-content{background: #f6f6f6; padding: 20px; float: left; width: 100%;}
.student-image{width: 20%; max-width: 300px; display: inline-block; float: left; margin-right: 30px;}
.student-name{display: inline-block; width: 77%; float: left;}
.student-name h5{font-size: 30px; color: #593812; margin-bottom: 30px; padding-top: 10px;}
.report-filter{margin-bottom: 30px;}
.report-filter select, .report-filter .datepkr{background: #E1FAFF; border: none; color: #6793B5; font-size: 24px; margin-bottom: 0px;}
.download{background: rgba(255, 255, 255, 0.7); border:none; margin-left: 40px; padding: 5px 16px; border-radius: 30px; font-size:18px; text-transform: uppercase; color: #593812;}
.download:hover, .download:focus{background: #593812; color: #fff;}
.student-overview-title{background: #FFAA00; color: #fff; text-align: center; text-transform: uppercase; font-weight: 700; padding: 7px 20px; font-size: 20px;}
.student-overview-content{background:#f6f6f6; padding: 15px;}
.student-details{font-family: 'Open Sans', sans-serif; color: #593812; float: left; width: 77%; font-size: 12px;}
.student-details ul{float: left; border-right: 1px solid #593812; width: 25%;}
.student-details ul:last-child{border: none;}
.student-details .subjects li{float: left; width: 50%;padding: 0px;  padding-bottom: 10px;}
.student-details .subjects{width: 48%;}
.student-details ul li{padding:0px 20px 10px 20px;}
.student-details ul li span{float: right;}
.pieID, .pieID2 { display: inline-block; vertical-align: top;}
.pie { height: 160px; width: 160px; position: relative; margin: 0 30px 10px 0;}
.pie::before { content: ""; display: block; position: absolute; z-index: 1; width: 120px; height: 120px; background: #EEE; border-radius: 50%; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.slice { position: absolute; width: 160px; height: 160px; clip: rect(0px, 160px, 160px, 80px); animation: bake-pie 1s;}
.slice span { display: block; position: absolute; top: 0; left: 0; background-color: black; width: 160px; height: 160px; border-radius: 50%;clip: rect(0px, 160px, 160px, 80px);}
.legend {list-style-type: none; padding: 0; margin: 0; width: 40%;}
.legend li { width: 35px; position: absolute; height: 35px; border-left: 35px solid black;  border-radius: 50%;  top: 5px; left: 5px;}
.legend div{position: relative; display: block; font-family: 'Open Sans', sans-serif; background: #fff; padding: 10px; border-radius: 8px;  padding-left: 50px; 
color: #593812;  box-shadow: 0 6px 15px 6px rgb(0 0 0 / 3%); margin-bottom: 10px;}
.legend div.active, .legend div:hover{background: #593812; color: #fff;}
.legend em {font-style: normal; position: absolute;}
.legend span {position: absolute; top: 50%; left: 0; transform: translate(-110%, -50%); color: #fff; width: 30px; }
.class-report .table-scroll .clone{top: 40px;}
.completedby-tittle{background: #FFAA00; border-top-left-radius: 11px; border-top-right-radius: 11px; position: relative;}
.completedby-tittle h2{font-size: 20px; color: #fff; padding: 8px 20px; margin: 0px; text-transform: uppercase; font-weight: 700;}
.completedby-tittle .count{position: absolute; right:20px; font-size: 24px; color: #fff; top: 10px; font-weight: 700;}
.class-report .table-scroll th, .class-report .table-scroll td{padding: 11px 20px;}
.class-report .assignment-table td.active{background: #8c7139;}
.subject-details .student-profile-heading{text-align: center;}
.subject-details .student-profile-content{font-family: 'Open Sans', sans-serif;}
.subject-details .student-profile-content p{color: #593812;}
.subject-details i{position: absolute; font-size: 50px; color: #FFAA00; top: 40%; left: -50px;}
.subject-details i.fa-caret-right{right: -50px; left: auto;}
.subject-details i:hover{color: #593812;}
.remarks h2{font-size: 32px; font-weight: 700; color: #593812; text-transform: uppercase;}
.remarks h2 img{max-height: 55px;}
.remarks-box{background: #577746; border-radius: 8px; overflow: hidden; position: relative; font-family: 'Open Sans', sans-serif; padding: 30px; margin-bottom: 30px; }
.remarks-box p{color: #fff; text-align: left; margin-bottom: 40px;}
.remarks-box h6{font-size: 14px; color: #81B67F; margin: 0px;}
.remarks-box h6 span{padding: 0px 60px;}
.remarks-box h6 i:hover{color: #fff;}
.class-report button, .lesson-plan-info button{border: none; border-radius: 20px; text-transform: uppercase; color: #593812; font-size: 16px; font-weight: 700; background: rgba(255, 255, 255, 0.7);
padding: 6px 16px; box-shadow: 0 6px 15px 6px rgb(0 0 0 / 5%); height: 38px;}
.class-report button:hover, .lesson-plan-info button:hover{background: #593812; color: #fff;}
.class-report2 .table-scroll .clone{top: 10px;}
.class-report2 .table-scroll th, .class-report2 .table-scroll td{padding: 15px 20px;}
.dashboard{padding: 60px 0px;}
.dashboard label{font-size: 40px; font-weight: 700; color: #6793B5; text-transform: uppercase; margin-right: 5px;}
.dashboard select{background: #E1FAFF; border: 1px solid #E1FAFF; padding: 5px 20px; color: #6793B5; border-radius: 5px; font-size: 24px; font-weight: 700; 
text-transform: uppercase; height: 44px; margin-bottom: 10px; box-shadow: 0 6px 15px 6px rgb(0 0 0 / 8%);}
.dashboard h6{font-family: 'Open Sans', sans-serif; font-size: 14px; color: #6793B5;}
.dashboard button{background: #fff; border-radius: 30px; border: none; box-shadow: 0 6px 15px 3px rgb(0 0 0 / 8%); text-transform: uppercase; padding: 6px 18px; 
color: #737373; font-weight: 700; font-size: 16px; margin-bottom: 15px; min-width: 175px;}
.dashboard button:hover{color: #fff; background: #6793B5;}
.dashboard button.tutorial{background: #ECEBEB;}
.dashboard button.tutorial:hover{background: #FFAA00;}
.teacher-details{width: 35%; float: left; font-family: 'Open Sans', sans-serif; color: #593812; border-right: 1px solid #593812;}
.dashboard .student-details{width: 42%;}
.dashboard .student-details ul{width: 50%;}
.teacher-details ul li{float: left; width: 35%; padding: 0px; padding-bottom: 10px;}
.invite-popup{background: #fff; border-radius: 11px; padding: 15px 8px; max-width: 480px; width: 100%; text-align: center !important;}
.invite-popup h4{color: #737373; text-transform: uppercase; font-size: 22px; margin-bottom: 15px; font-weight: 700;}
.invite-popup select{height: 38px; background: #ECEBEB; border-radius: 10px; color: #737373; font-size: 18px; font-weight: 700; border: none; min-width: 200px;}
.invite-popup input, .invite-popup input:focus, .invitelink{background: #ECEBEB; border: none; border-radius: 30px; height: 32px; line-height: 32px; padding-left: 10px; padding-right: 90px;}
.invite-popup .form-group{position: relative; text-align: left;}
.invite-popup .form-group button{position: absolute; top: 0px; right: 0px; border: none; background: #39ACE6; border-radius: 30px;
color: #fff; padding: 3px 16px; font-size: 16px; font-weight: 700; min-width: 80px;}
.invite-popup .invite-pop_close{position: absolute; color: #6a6a6a; cursor: pointer;  top: -5px; right: 5px;}
.share-via label{font-size: 18px; font-weight: 700; color: #737373; text-transform: uppercase; margin: 0px 8px;}
.share-via i{width:35px; height: 35px; background: #ECEBEB; border-radius: 50%; font-size: 18px; line-height: 35px; color: #737373;}
.share-via i:hover{background: #39ACE6; color: #fff;}
.studentDetails select{ background: #593812; padding: 8px 18px; border-radius: 8px; color: #fff; margin: 0px 20px 30px 20px;}
.give-assignment{padding: 60px 0px; padding-bottom: 30px;}
.give-assignment p{font-family: 'Open Sans', sans-serif; color: #33264d; margin-bottom: 20px;}
.give-assignment select, .give-assignment button{background: #593812; color: #fff; border-radius: 6px; width: 100%; height: 38px !important; font-size: 16px;
margin: 0px; font-weight: 700; text-transform: uppercase; padding: 8px 18px;}
.give-assignment button{background: #fff; color: #6793B5; border: none;}
.give-assignment button:hover, .give-assignment button:focus, .give-assignment button.active{background: #593812; color: #fff;}
.give-assignment .select2-container .select2-selection--multiple{height: 38px; text-transform: uppercase; overflow: hidden; border: none;}
.select2-container--open .select2-dropdown--above{text-transform: uppercase;}
.select2-container--default .select2-results__option--highlighted[aria-selected]{background-color: #593812;}
.select2-search__field::placeholder{color: #6793B5; font-size: 16px; font-weight: 700; text-align: center; text-transform: uppercase;}
.product-box{position: relative; border-radius: 12px; overflow: hidden; background: #f5f5f5; margin-top: 30px;}
.product-box-title{background: #ecebeb; box-shadow: 0 6px 15px 3px rgb(0 0 0 / 8%); position: relative;}
.product-box .nav-tabs .nav-item .nav-link{font-size: 24px; font-weight: 700; color: #593812; text-transform: uppercase; padding: 14px 20px;
border: none; border-radius: 0px; border-right: 1px solid #ddd;}
.product-box .nav-tabs .nav-item.active .nav-link{background: #ffaa00; color: #fff;}
.zero{margin: 0px; padding: 0px;}
.ds-filter{background: #fcfcfc; padding: 10px;}
.ds-filter label{position: relative; width: 100%; padding:0px 30px; font-size: 18px; color: #593812; font-weight: 700;}
.ds-filter input {position: absolute;opacity: 0;cursor: pointer;height: 0;width: 0;}
.ds-filter-checkmark {position: absolute;top: 4px;left: 0;height: 20px;width: 20px;background:none; border: 1px solid #ddd; border-radius: 4px;}
.ds-filter input:checked ~ .ds-filter-checkmark {background-color: #707070;}
.ds-filter-checkmark:after { content: ""; position: absolute; display: none;}
.ds-filter input:checked ~ .ds-filter-checkmark:after { display: block;}
.ds-filter .ds-filter-checkmark:after {left: 7px;top: 3px;width: 5px;height: 10px; border: solid white;
border-width: 0 2px 2px 0;-webkit-transform: rotate(45deg);-ms-transform: rotate(45deg); transform: rotate(45deg);}
.filter-list{background: #f6f6f6; padding: 8px; margin-top: 8px; font-family: 'Open Sans', sans-serif;}
.filter-list label{font-size: 12px; font-weight: normal; color: #707070;}
.filter-list .collapse label{padding: 0px; padding-left: 26px;}
.type{margin-bottom: 20px;}
.type-all{padding: 0px 8px;}
.type-all .ds-filter-checkmark{border-color: #593812;}
.type-all input:checked ~ .ds-filter-checkmark {background: none; }
.type-all input:checked ~ .ds-filter-checkmark::after {left: 7px;top: 3px;width: 5px;height: 10px; border: solid #593812;
    border-width: 0 2px 2px 0;-webkit-transform: rotate(45deg);-ms-transform: rotate(45deg); transform: rotate(45deg);}
.scrolls{overflow: auto; overflow-x: hidden; max-height: 180px; scrollbar-color: #FFAA00 #b5b5b5; scrollbar-width: thin;}
.scrolls::-webkit-scrollbar { width: 5px;}
.scrolls::-webkit-scrollbar-track {background: #b5b5b5;  border-radius: 10px; }
.scrolls::-webkit-scrollbar-thumb {background: #FFAA00; border-radius: 10px; }
.type:last-child{margin-bottom: 0px;}
.product-item{position: relative; padding: 15px; margin-bottom: 10px;}
.product-item img{margin-bottom: 15px;}
.product-item h6{display: inline-block; margin: 0px 2px; position: relative;  font-size: 12px;}
.product-item h6 i{width: 24px; height: 24px; background: #FFAA00; text-align: center; line-height: 24px; border-radius: 50%;
color: #fff;}
.select-btn{position: relative; text-align: center;}
/* .select-btn h5{ position: absolute; transform: translate(-50%, -50%); left: 50%; top: 50%; width: 24px; height: 24px;
border-radius: 50%; text-align: center; line-height: 26px; background: #33264d; font-size: 12px; color: #fff; margin: 0px;} */
.select-btn h5{ width: 24px; height: 24px; border-radius: 50%; text-align: center; background: #33264d; font-size: 12px; color: #fff; margin: 0px 2px; line-height: 26px; display: inline-block;}
.select-btn h5 i{padding-left: 2px;}
.select-btn button, .select-btn button:focus, .select-btn button.active{ width: 24px; height: 24px !important; line-height: 26px; border-radius: 50%; background: #d6d6d6;
    text-align: center; color:#fff; padding: 0px; font-size: 12px; margin: 0px 2px;}
.select-btn:hover button, .select-btn.active button{background: #58d45b; color: #fff;}
.books-popup{width: 100%; max-width: 450px; padding: 20px; border-radius: 10px; background: #faf9f9; text-align: center !important; color: #707070;}
.books-popup p{font-family: 'Open Sans', sans-serif; color: #707070;}
.books-popup button{border: none; border-radius: 30px; background: #fff; min-width: 150px; padding: 8px 20px; text-transform: uppercase;
font-weight: 700; color: #6793B5; box-shadow: 0 6px 15px 3px rgb(0 0 0 / 8%);}
.books-popup h4{border-bottom: 1px solid #ddd; padding-bottom: 12px; margin-bottom: 12px; }
.books-popup button:hover, .books-popup button:focus{background: #6793B5; color: #fff;}
.books-popup i{position: absolute; right: 0px; top: 0px; color: #982f33;}
.scrolls2{height: 650px; max-height: 650px;}
.footer-btn{padding-bottom: 60px;}
.footer-btn button{ border: none; border-radius: 30px; background: #e4f2f4; min-width: 150px; padding: 8px 20px; text-transform: uppercase;
    font-weight: 700; color: #707070; box-shadow: 0 6px 15px 3px rgb(0 0 0 / 8%); font-size: 16px;}
.footer-btn button:hover{background: #6793B5; color: #fff;}
.product-box .tab-pane.fade:not(.show){opacity: 1;}
.give-assignment .select-boxes .col-6{-ms-flex-preferred-size: 0; flex-basis: 0; -ms-flex-positive: 1; flex-grow: 1; max-width: 100%;}
.ds-none{display: none;}
.filter-icon{position: absolute; right: 0px; width: 54px; height: 54px; text-align: center; line-height: 54px; top: 0px; box-shadow: -4px 0px 5px 0px rgb(50 50 50 / 5%);}
.filter-icon:hover{background: #ffaa00;}
.filter-icon:hover img{filter: brightness(0) invert(1);}
.sidenav {scrollbar-color: #FFAA00 #b5b5b5; scrollbar-width: thin; height: 100%; width: 0; position: absolute; z-index: 3; top: 0; right: 0; background-color: #fff; overflow: auto; transition: 0.5s; }
.sidenav .closebtn {  position: absolute;  top: 15px;  right: 15px;  font-size: 36px; }
.sidenav h5{font-size: 20px; font-weight: 700; color: #593812; padding: 10px 10px; text-transform: uppercase; margin: 0px;}
.sidenav::-webkit-scrollbar { width: 5px;}
.sidenav::-webkit-scrollbar-track {background: #b5b5b5;  border-radius: 10px; }
.sidenav::-webkit-scrollbar-thumb {background: #FFAA00; border-radius: 10px; } 
.give-assignment .btn-group{display: block;}
.give-assignment .btn-group.open .dropdown-menu{display: block; width: 100%;}
.multiselect-container>li>a>label{padding: 3px 20px;}
.help, .manage-groups, .login{padding: 60px 0px; position: relative;}
.help p, .manage-groups p, .login p{color: #33264D; font-family: 'Open Sans', sans-serif;}
.help .students{position: relative;width: 100%;  max-width: 450px; left: -40px;}
.help-cloud{position: absolute; bottom: 0px;}
.help-form{background: #f4edf4; padding-bottom: 60px;}
.help-form input, .help-form textarea{background: #EAE3E6; border-radius: 30px; padding: 8px 18px; border: none; width: 100%; color: #737373; text-transform: uppercase; font-weight: 700;
box-shadow: 0 6px 6px 3px rgb(0 0 0 / 1%); margin-bottom: 20px;}
.help-form button{background: #593812; color: #fff; border-radius: 30px; border: none; padding: 8px 18px; min-width: 150px;
font-size: 16px; text-transform: uppercase; font-weight: 700; box-shadow: 0 6px 15px 3px rgb(0 0 0 / 16%);}
.help-form button:hover{background: #FFAA00; color: #fff; }
.manage-icons{margin: 30px 0px;}
.manage-icons img{max-width: 220px;}
.group-bg{position: absolute; bottom: 0px;}
.manage-groups{padding-bottom: 200px;}
.benifits{background: #f4edf4; padding: 60px 0px;}
.benifits h1{font-size: 48px; color: #FFAA00; text-shadow: 2px 2px #755000; -webkit-text-stroke-width: 1px; -webkit-text-stroke-color: #755000;}
.benifit-content p{font-family: 'Open Sans', sans-serif; color: #02839E; width: 49%; display: inline-block;}
.why-us{position: relative; padding: 60px 0px; background: #593812; color: #fff; padding-bottom: 250px;}
.why-us h1{color: #FFAA00;}
.collapse.in{display: block;}
.why-us .panel-title{font-size: 24px; font-weight: 700; margin: 0px; position: relative;}
.why-us .panel-body{font-family: 'Open Sans', sans-serif;}
.why-us .panel-default{padding-bottom: 15px; margin-bottom: 15px; border-bottom: 1px solid rgba(255, 255, 255, 0.5);}
.why-us .panel-group{margin-top: 30px; position: relative; z-index: 2;}
.why-us .panel-title i{position: absolute; right: 0px;}
.why-us .panel-title .collapsed i{-webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); transform: rotate(180deg);}
.whyus-box{margin-top: 30px; text-align: center;}
.whyus-box h4{display: inline-block; border-bottom: 1px solid rgba(255, 255, 255, 0.5); text-transform: uppercase; font-weight: 700; padding-bottom: 10px; margin-bottom: 10px;}
.whyus-box p{color: #fff; font-family: 'Open Sans', sans-serif;}
.login{padding-bottom: 230px;}
.login p{margin-bottom: 30px;}
.login input{width: 100%; background: #ECFBFF; border-radius: 30px; border: none; color: #02839E; font-weight: 700; font-size: 16px; margin-bottom: 15px;}
.login input::placeholder{color: #02839E;}
.login h6{text-align: center; font-family: 'Open Sans', sans-serif; color: #33264D; margin-top: 10px;}
.login-btn{width: 100%; height: 60px; background: #f3ecf3; text-align: center;}
.login .help-cloud{z-index: -1;}
.login h6:hover{text-decoration: underline; color: #02839E;}
.login-btn button{background: #39ACE6; border-radius: 8px; border: none; padding: 8px 16px; min-width: 150px; font-size: 16px;
font-weight: 700; color: #fff; text-transform: uppercase; box-shadow: 0 6px 15px 3px rgb(0 0 0 / 8%); position: relative; top: -70px;}
.login-btn button:hover{background: #02839E;}
.account header nav ul li{font-size: 20px; font-weight: normal;}
.account header button, .sidebar li button{background: #39ACE6; border-radius: 8px; border: none; color: #fff; padding: 6px 16px; font-weight: 700;
font-size: 18px;}
.account header button:hover{background: #FFAA00;}
.account header label{font-size: 18px; border-bottom: 2px solid #3B3B3B; color: #3B3B3B; margin-right: 10px; cursor: pointer; font-weight: 700;}
.account header label:hover{color: #02839E; border-color: #02839E;}
.account h1{color: #33264d;}
.owl-carousel .owl-nav button.owl-next, .owl-carousel .owl-nav button.owl-prev{font-size: 60px; color: #FFAA00; position: absolute;}
.owl-carousel .owl-nav button.owl-next{right: 20px;}
.owl-carousel .owl-nav button.owl-prev{left: 20px;}
.teacher-btn {text-align: center; margin-top: 20px;}
.teacher-btn button{background: #e4f0f3; border-radius: 15px; border: none; padding: 8px 16px; min-width: 150px; font-size: 16px;
font-weight: 700; color: #49575a; text-transform: uppercase; box-shadow: 0 6px 15px 3px rgb(0 0 0 / 8%); }
.teacher-btn button:hover{background: #FFAA00;}
.account.sign-up header  button, .sign-up .sidebar li button{background: #FFAA00;}
.account.sign-up header button:hover{background: #39ACE6;}
.account.sign-up h1{color: #FFAA00;}
.account.sign-up .login p{color: #02839E;}
.manage-teachers{padding: 80px 0px;}
.manage-teachers p{font-family: 'Open Sans', sans-serif; color: #33264D;}
.add-btn i{width: 70px; height: 70px; text-align: center; line-height: 70px; background: #fff; border-radius: 50%; box-shadow: 0 6px 15px 3px rgb(0 0 0 / 8%);
font-size: 28px; color: #FFAA00; margin-top: 20px; }
.add-btn i:hover{background: #FFAA00; color: #fff;}
.manage-teachers h6{text-transform: uppercase; font-size:20px; font-weight: 700; color: #593812;}
.manage-teachers button{background: #fff; border-radius: 30px; text-transform: uppercase; font-size: 16px; color: #593812;
border: none; padding: 8px 16px; font-weight: 700; margin-left: 10px; box-shadow: 0 6px 15px 3px rgb(0 0 0 / 8%);}
.manage-teachers button:hover{background: #593812; color: #fff;}
.manage-teachers .table-scroll{margin-top: 25px;}
.teachers-table{ text-align: center; overflow: hidden; color: #593812; font-family: 'Open Sans', sans-serif; margin: 0px;}
.teachers-table th{text-align: left; font-weight: normal;}
.teachers-table td i{width: 24px; height: 24px; line-height: 24px; background: #ecebeb; color: #fff; border-radius: 50%;}
.teachers-table td img{max-width: 24px;}
.teachers-table td button{font-size: 14px; font-weight: normal; font-family: 'Gaegu', cursive; padding: 0px 10px; height: 24px; line-height: 24px; box-shadow: none;}
.teachers-table td i.active{background: #58d45b;}
.delete-popup{width: 100%; max-width: 450px; border-radius: 12px; background: #fff; padding: 30px; text-align: center !important;}
.delete-popup h4{color: #737373; text-transform: uppercase; font-size: 18px; font-weight: 700;}
.delete-popup h3{text-transform: uppercase; color: #737373; font-weight: 700; margin: 20px 0px;}
.delete-popup button{border: none; background: #ecebeb; color: #737373; text-transform: uppercase; font-weight: 700; border-radius: 30px; padding: 6px 16px;
box-shadow: 0 6px 15px 3px rgb(0 0 0 / 4%); margin: 0px 5px;}
.delete-popup button:hover{background: #39ace6; color: #fff;}
    .delete-popup .form-group, .addgroup-popup .form-group, .addclass-popup {
        text-align: left;
        margin: 0px;
        margin-top: 10px;
        font-family: 'Open Sans', sans-serif;
        color: #737373;
    }
.delete-popup .form-group label{margin-right: 10px;}
.delete-popup .form-group input{border: none; margin-bottom: 0px; padding: 0px;}
.delete-popup .form-group select{margin: 0px; width: 100%; margin-bottom: 20px; background: #ecebeb; border-radius: 30px; border: none;}
.addgroup-popup{width: 100%; max-width: 650px; border-radius: 12px; background: #fff; padding: 20px 10px; text-align: center !important;}
.addgroup-popup h4{text-transform: uppercase;color: #737373; text-transform: uppercase; font-weight: 700; margin-bottom: 10px;}
.addgroup-popup input{width: 60%; margin: 0px; background: #ecebeb; border-radius: 30px; margin-left: 10px; border: none; padding: 3px 10px; float: right;}
.addgroup-popup select{border: none; float: right; width: 60%; background: #ecebeb; border-radius: 30px; margin: 0px; height: 32px; padding: 0px 8px;} 
.addgroup-popup button{border: none; margin: 0px 6px; margin-top: 40px; background:#ecebeb; color: #737373; font-size: 16px; text-transform: uppercase; padding: 4px 10px; border-radius: 30px;
font-weight: 700;}
    .addgroup-popup button:hover, .addclass-popup button:hover {
        background: #0498E4;
        color: #fff;
    }
.addgroup-popup table{margin: 0px; width: 100%; text-align: left; color: #737373;}
.addgroup-popup table, .addgroup-popup th, .addgroup-popup td{border: 1px solid #ddd;}
.addgroup-popup table th{background: #ecebeb; border: 1px solid #ddd; overflow: hidden; font-size: 16px;}
.addgroup-popup th, .addgroup-popup td{padding:4px;}
.addgroup-popup td{font-family: 'Open Sans', sans-serif; font-size: 12px; }
.addgroup-popup th:nth-child(even), .addgroup-popup td:nth-child(even){text-align: center;}
.addgroup-popup td i{width: 20px; height: 20px; background: #ecebeb; border-radius: 50%; text-align: center; line-height: 20px; color: #fff; font-size: 12px;}
.addgroup-popup td i.active{background: #58d45b;}
.teachers-table td span{transform: rotate(0deg);}
.teacher-popup label{font-family: 'Open Sans', sans-serif; color: #737373; border: none; padding-top: 8px;}
.teacher-popup input{color: #737373; border: none; font-size: 12px; font-family: 'Open Sans', sans-serif; padding: 6px 12px; border-radius: 30px; background: #ecebeb;
width: 100%;}
.mt-30{margin-top: 30px;}
.teacher-popup h6{display: inline-block; margin-left: 20px; text-transform: uppercase; color:#0498E4; font-weight: 700;}
.teacher-popup a button{background: #0498E4; color: #fff; padding: 5px 15px; min-width: 130px;}
.teacher-popup h6:hover{color: #FFAA00;}
.teacher-popup label{text-align: left; display: block;}
.option{background: #ecebeb; display: flex; align-items: center; justify-content: space-evenly; text-align: center !important;
 margin: 0 10px; border-radius: 30px; cursor: pointer; padding: 0 10px !important; border: 2px solid lightgrey; transition: all 0.3s ease; display: inline-block !important;}
.teacher-popup input[type="radio"]{display: none;}
#option-1:checked:checked ~ .option-1,
#option-2:checked:checked ~ .option-2{border-color: #58d45b;background: #58d45b;}
#option-1:checked:checked ~ .option-1 .dot::before, 
#option-2:checked:checked ~ .option-2 .dot::before{opacity: 1; transform: scale(1);}
.option span{font-size: 14px;color: #808080;}
#option-1:checked:checked ~ .option-1 span,
#option-2:checked:checked ~ .option-2 span{ color: #fff;}
.manage-license{padding: 40px 0px; min-height: 600px;}
.license-box{border-radius: 12px; overflow: hidden; position: relative; background: #f6f6f6; margin-top: 15px; box-shadow: 0 6px 15px 3px rgb(0 0 0 / 5%);}
.licence-box-header{background: #FFAA00; padding:12px 8px; box-shadow: 0 6px 15px 3px rgb(0 0 0 / 16%); height: 36px;}
.license-box-content{padding: 20px;}
.licence-box-footer{background: #FFAA00; box-shadow: 0 6px 15px 3px rgb(0 0 0 / 16%); height: 16px;}
.license-box-content h2{color: #593812;}
.license-box-content table{font-family: 'Open Sans', sans-serif; color: #593812;}
.license-box-content table td{border: none;}
.license-box-content button{min-width: 130px; border: none; padding: 6px 10px; border-radius: 30px; background: #ecebeb;
color: #737373; text-transform: uppercase; font-size: 16px; box-shadow: 0 6px 4px 0px rgb(0 0 0 / 4%); font-weight: 700;}
.license-box-content button.renew{margin-bottom: 30px; background: #39ace6; color: #fff;}
.license-box-content button:hover{opacity: 0.8;}
.clearfix{width: 100%; position: relative; height: 200px;}
.assignment, .class-report, .dashboard, .give-assignment, .help-form, .manage-teachers, .manage-license,
.account-hieght, .notification{min-height: 100vh;}
.clearfix2{width: 100%; position: relative; height: 150px;}
.notification{padding: 60px 0px;}
.message-count{display: inline-block;margin:20px;}
.message-count h5{font-family: 'Open Sans', sans-serif; color: #33264D; font-size: 16px;}
.message-count h3{font-weight: 700; font-size: 30px; color: #33264D; }
.notification .form-group{background: #fff; border-radius: 30px; padding: 4px 10px; box-shadow: 0 6px 4px 0px rgb(0 0 0 / 4%);}
.notification .form-group select{margin: 0px; font-family: 'Open Sans', sans-serif; background: #ecebeb; padding: 0px; color: #737373;
border: none; width: 70%;}
.notification .form-group label{font-size: 16px; color: #593812; font-weight: 700; text-transform: uppercase; margin: 0px;}
.notification button{border: none; background: #fff; color: #593812; font-weight: 700; font-size: 16px; text-transform: uppercase; padding: 6px 14px;
border-radius: 30px; min-width: 130px; box-shadow: 0 6px 4px 0px rgb(0 0 0 / 4%);}
.notification button:hover{background: #593812; color: #fff;}
.notification-box{position: relative; overflow: hidden; border-radius: 11px; margin-top: 20px;}
.notification-header{background: #FFAA00; min-height: 20px; text-align: center; color: #fff;}
.notification-footer{background: #FFAA00; height: 10px;}
.notification-content{background: #fff; font-family: 'Open Sans', sans-serif; color: #593812; height: 301px; overflow: auto;
scrollbar-color: #FFAA00 #f5f5f5; scrollbar-width: thin; position: relative;}
.notification-content table{width: 100%; margin: 0px;}
.notification-content table td{padding: 8px 10px; position: relative; border: 1px solid #ddd;}
.notification-content table input{margin: 0px;}
.notification-content input {position: absolute;opacity: 0;cursor: pointer;height: 0;width: 0;}
.notification-content-checkmark {cursor: pointer; position: absolute;top: 10px;left: 8px;height: 20px;width: 20px;background:#ecebeb; border-radius: 4px;}
.notification-content input:checked ~ .notification-content-checkmark {background-color: #707070;}
.notification-content-checkmark:after { content: ""; position: absolute; display: none;}
.notification-content input:checked ~ .notification-content-checkmark:after { display: block;}
.notification-content .notification-content-checkmark:after {left: 8px;top: 4px;width: 5px;height: 10px; border: solid white;
border-width: 0 2px 2px 0;-webkit-transform: rotate(45deg);-ms-transform: rotate(45deg); transform: rotate(45deg);}
.notification-content table .unread td{font-weight: 700;}
.notification-content table tr{box-shadow: 0 6px 4px 0px rgb(0 0 0 / 4%);}
.notification-content table tr:hover{box-shadow: 0 6px 4px 0px rgb(0 0 0 / 8%);}
.notification-content::-webkit-scrollbar { width: 5px;}
.notification-content::-webkit-scrollbar-track {background: #f5f5f5;  border-radius: 10px; }
.notification-content::-webkit-scrollbar-thumb {background: #FFAA00; border-radius: 10px; }
.notification-header h3{padding: 10px; margin: 0px; text-transform: uppercase; font-weight: 700;}
.notification-content h5{color: #737373; font-family: 'Open Sans', sans-serif; font-size: 16px; background: #f5f5f5;
padding: 15px 20px; padding-right: 60px; margin: 0px;}
.notifi-date{position: absolute; right:20px; top: 10px; font-size: 14px; color: #737373;}
.notification-content p, .notification-content h6{padding: 10px 20px;}
.notification-content h6{line-height: 24px;}
.notification-open .notification-content{height: auto;}
.notification-open button, .assignment-assigned button{margin-top: 20px; background: #e4f2f5; color: #737373;}
.notification-open button:hover, .assignment-assigned button:hover{background: #36ADF2;}
.notification-open button.previous, .assignment-assigned button.previous{float: left;}
.notification-open button.next, .assignment-assigned button.next{float: right;}
.notification-open .notification-content textarea{margin: 0px; border: none; background: #6793b5; color: #fff; width: 100%; height: 100%; padding: 10px 20px;
float: left;}
.notification-open .notification-content textarea::placeholder{color: #fff;}
.assignment-assigned{padding: 60px 0px;}
.assignment-assigned p{font-family: 'Open Sans', sans-serif; color: #33264d;}
.table-header{background: #FFAA00; padding: 10px 20px; border-top-left-radius: 11px; border-top-right-radius: 11px; margin-top: 30px;
position: relative;}
.table-header h3{margin: 0px; color: #593812; font-weight: 700; text-transform: uppercase;}
.assignment-assigned .clone{top: 0px;}
.assignment-assigned button{ border: none; font-weight: 700; font-size: 16px; text-transform: uppercase; padding: 6px 14px; border-radius: 30px;
min-width: 130px; box-shadow: 0 6px 4px 0px rgb(0 0 0 / 4%);}
.assignment-assigned button:hover{color: #fff;}
.assignment-assigned label{font-size: 20px; color: #593812; text-transform: uppercase; font-weight: 700; margin: 0px 20px;}
.assignment-assigned label span{border-bottom: 1px solid #593812; cursor: pointer;}
.assignment-assigned .form-group{background: #bcf1f9; padding: 6px 10px; border-radius: 10px;}
.assignment-assigned .form-group label{color: #755000; text-transform: capitalize; margin: 0px;}
.assignment-assigned .form-group select{background: #e4f2f5; border: none; border-radius: 8px; margin: 0px; width: 26%; box-shadow: 0 6px 4px 0px rgb(0 0 0 / 5%);}
.tutorial-popup{position: relative; width: 100%; max-width: 100vw; height: 100vh; padding: 10px;}
.tutorial-pop_close, .video-pop_close{position: absolute; top: 20px; left: 20px; color: #fff; cursor: pointer; font-size: 18px;}
.notification-content table i{transform: rotate(115deg); text-align: center; display: block;}
.error-popup{width: 100%; max-width: 450px; border-radius: 12px; background: #fff; padding: 30px; text-align: center !important;}
.error-popup h4{font-size: 32px; font-weight: 700; text-transform: uppercase; color: #737373;}
.error-popup p{font-size: 18px; font-weight: 700; color: #737373;}
.error-popup i{position: absolute; right: 0px; top: 0px; background: #f5f5f5; color: #898989; width: 32px; height: 32px; line-height: 32px; border-radius: 50%;
cursor: pointer;}
.error-popup i:hover{background: #ccc;}
.classreport-activity-table .fixed-side{background: #ececec; color: #8c8c8c; border: 1px solid rgb(117 80 0 / 6%); visibility: visible; border-left: none; font-family: 'Open Sans', sans-serif; text-align: left;}
.classreport-activity-table td i, .completedby td i {transform: rotate(112deg);}
.classreport2-activity-table .fixed-side{background: #ececec; color: #8c8c8c; border: 1px solid rgb(117 80 0 / 6%); visibility: visible; border-left: none; font-family: 'Open Sans', sans-serif; text-align: left;}
.classreport2-activity-table td i, .completedby td i {transform: rotate(0deg);}
.classreport-completed .fixed-side {
    background: #ececec;
    color: #8c8c8c;
    border: 1px solid rgb(117 80 0 / 6%);
    visibility: visible;
    border-left: none;
    font-family: 'Open Sans', sans-serif;
    text-align: left;
}
.assignment-completed .fixed-side {
    background: #ececec;
    color: #8c8c8c;
    border: 1px solid rgb(117 80 0 / 6%);
    visibility: visible;
    border-left: none;
    font-family: 'Open Sans', sans-serif;
    text-align: left;
}
.class-report .student-profile .student-details .subjects{width: 38%;}
.class-report .student-profile .student-details ul{width: 31%;}
#parentDashboard .student-details ul{width: 100%; border-left: 1px solid #593812;}
#parentDashboard .teacher-details{border: none;}
.give-assignment-table .fixed-side {background: #ececec; color: #8c8c8c; border: 1px solid rgb(117 80 0 / 6%); visibility: visible;
border-left: none;font-family: 'Open Sans', sans-serif;text-align: left;}
.teachers-table .fixed-side { background: #ececec; color: #8c8c8c; border: 1px solid rgb(117 80 0 / 6%);
 visibility: visible;border-left: none;font-family: 'Open Sans', sans-serif;text-align: left;}
.addclass-popup, .add-student-class {width: 100%;max-width: 450px;border-radius: 12px;background: #fff;padding: 15px 5px;}
.addclass-popup h4 { text-transform: uppercase; color: #737373;text-transform: uppercase; font-weight: 700;
 margin-bottom: 10px;text-align: center !important;}
.addclass-popup input { background: #ebebeb; width: 100%; padding: 5px 14px; border-radius: 20px; border: none;}
.addclass-popup input[type='file'] { font-size: 12px;}
.addclass-popup button {  padding: 4px 16px;  border-radius: 30px;  background: #ebebeb;  margin-top: 5px;  border: none;  text-transform: uppercase;
 color: #888; font-weight: 700; font-family: 'Gaegu', cursive;}
.addclass-popup .create-class {  background: #36aee2;  color: #fff;}
.select-boxes .multiselect-container>li>a>label{padding: 3px 10px; font-size: 14px;}
.edit-classroom h5{color: #593812; font-weight: 700; margin: 0px; font-size: 30px; margin: 0px; display: inline-block; margin-right: 30px;}
.edit-classroom h5:last-child{margin: 0px;}
.edit-classroom .teachers-table td button{margin: 0px; background: #593812; color: #fff;}
.edit-classroom button.save, .edit-classroom button.cancel{margin-top: 30px;}
.editname-popup{position: relative;}
.editname-popup h4{margin-bottom: 20px;}
.editname-popup i{position: absolute; right: 20px; top: 20px;}
.editname-popup p{font-size: 13px; color: #808080; line-height: 20px;}
.editname-popup h6{font-size: 12px; color: #39ace6; margin-bottom: 20px; }
.editname-popup h6 i{position: relative; top: 0px; right: 0px; width: 18px; height: 18px; background: #39ace6; color: #fff; border-radius: 50%; margin-right: 4px;
line-height: 18px; font-size: 10px;}
.confirm-delete-popoup {width: 100%; max-width: 450px; padding: 20px; border-radius: 10px; background: #faf9f9; text-align: center !important; color: #707070;}
.confirm-delete-popoup p{font-family: 'Open Sans', sans-serif; color: #707070;}
.confirm-delete-popoup button{border: none; border-radius: 30px; background: #fff; min-width: 150px; padding: 8px 20px; text-transform: uppercase;
font-weight: 700; color: #6793B5; box-shadow: 0 6px 15px 3px rgb(0 0 0 / 8%);}
.confirm-delete-popoup h4{border-bottom: 1px solid #ddd; padding-bottom: 12px; margin-bottom: 12px; }
.confirm-delete-popoup button:hover, .confirm-delete-popoup button:focus{background: #6793B5; color: #fff;}
.confirm-delete-popoup i{position: absolute; right: 0px; top: 0px; color: #982f33;}
.copied { position: absolute; background: #1266ae; color: #fff; font-weight: bold; z-index: 99; width: 100%;
top: 0;text-align: center;padding: 15px;display: none;font-size: 18px;}
/* .product-box-title .nav-tabs{margin-left: 54px;} */
.done-icon, .clear-icon{position: absolute; right: 64px; top: 0px; text-align: center; font-size: 18px; color: #593812;
box-shadow: -4px 0px 5px 0px rgba(50, 50, 50, 0.05); padding: 5px 15px;}
.done-icon i, .clear-icon i{display: block;}
.clear-icon{right: 125px;}
.done-icon:hover i, .clear-icon:hover i{font-weight: 700;}
.ds-filter .type-all label{padding-left: 0px;}
button.view-btn{background: #593812 ; color: #fff ;font-size: 14px ;font-weight: normal; font-family: 'Gaegu', cursive; padding: 0px 10px;
height: 24px; line-height: 24px; box-shadow: none;}
.add-student-class{padding: 30px 20px; text-align: center !important;}
.add-student-class h5{font-size: 22px; text-transform: uppercase; color: #6a6a6a; font-weight: 700; margin-bottom: 20px;}
.add-student-class i{position: absolute; right: -10px; top: -20px; color: #6a6a6a;}
.add-student-class button {  padding: 6px 16px;  border-radius: 30px;  background: #36aee2;  margin-top: 5px;  border: none;  text-transform: uppercase;
    color: #fff; font-weight: 700; font-family: 'Gaegu', cursive;}
.add-student-class button:hover{background: #0498E4;}
.report-filter .datepkr{padding: 8px 14px; display: inline-block; border-radius: 30px; font-size: 16px;}
.remarks textarea{padding: 15px; border-radius: 8px; border: 1px solid #ddd; margin-bottom: 20px; width: 100%; resize: none; font-family: 'Open Sans', sans-serif;}
.remarks button{background: #36aee2; color: #fff; float: right;}
button.save{min-width: 130px; background: #39ace6; color: #fff; border-radius: 15px; font-weight: 700; }
button.cancel{min-width: 130px; background: #ecebeb; color: #777; border-radius: 15px; font-weight: 700;}
.ps-sticky{padding: 0px; min-height: auto; position: sticky; top: 90px; z-index: 111; background: url(../images/form.png); background-size: cover;}
button.premium-btn{background: #33264D; color: #FFAA00; font-size: 12px; padding: 2px 12px; min-width: auto;margin: 0px;
font-weight: normal; float: right;}
.teacher-details ul li:nth-child(even) {width: 60% !important;}
.unsubscribed img, .unsubscribed .select-btn{filter: grayscale(100%);}
.unsubscribed .overlay-lock{position: absolute; left: 0px; right: 0; top: 0; bottom: 0;}
.unsubscribed .overlay-lock i{font-size: 48px; text-align: center; position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); color: #33264D;}
.unsub-popup{background: #33264D; position: relative; border-radius: 10px; width: 100%; max-width: 400px; text-align: center !important;
padding: 40px 20px; color: #FFAA00;}
.unsub-popup h2{font-size: 42px; font-weight: 700;}
.unsub-popup p{color: #FFAA00; font-family: 'Open Sans', sans-serif; letter-spacing: 1px;}
.unsub-popup button{border: none; background: #FFAA00; color: #33264D; border-radius: 30px; text-transform: uppercase;
font-weight: 700; min-width: 130px; padding: 5px; cursor: pointer;}
.unsub-popup button:nth-child(even){background: #737373; color: #fff;}
.audioplayer{position: relative; overflow: hidden;}
.audioplayer img{object-fit:cover; width: 100vw; height: 100vh;}
.audioplayer audio{width: 90%; position: absolute; bottom: 10px; z-index: 10; left: 5%; filter: invert(1);}
.pdf-view{width: 100vw; height: 100vh;}
i.close-btn{position: absolute; right: 10px; top: -5px; cursor: pointer; color: #6a6a6a;}
.pad-60{padding: 60px 0px;}
.tblst table{width: 100%; background: #fff; font-family: 'Open Sans', sans-serif; overflow-y: auto;  border-collapse: collapse;}
.tblst table th, table td {padding: 8px;}
.tblst table th {color: #593812; background: #f6f6f6; font-weight: 600; text-transform: capitalize; font-size: 16px;}
.mobile-accordion.table, .mobile-accordion2.table, .mobile-accordion3.table {border: 1px solid #ddd; -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box;overflow: hidden; background: #fff;
font-family: 'Open Sans', sans-serif;}
.mobile-accordion .th, .mobile-accordion .rh > span, .mobile-accordion2 .th, .mobile-accordion2 .rh > span, .mobile-accordion3 .th, .mobile-accordion3 .rh > span {background: #f6f6f6; color: #593812; font-weight: 600; font-size: 16px;}
.mobile-accordion .th, .mobile-accordion .tr .td, .mobile-accordion .rh, .mobile-accordion .rh.active:nth-last-child(2), .mobile-accordion2 .th, .mobile-accordion2 .tr .td, .mobile-accordion2 .rh, .mobile-accordion2 .rh.active:nth-last-child(2), 
.mobile-accordion3 .th, .mobile-accordion3 .tr .td, .mobile-accordion3 .rh, .mobile-accordion3 .rh.active:nth-last-child(2) { border-bottom: 1px solid #ddd;}
.mobile-accordion .rh:nth-last-child(2), .mobile-accordion2 .rh:nth-last-child(2), .mobile-accordion3 .rh:nth-last-child(2) { border-bottom: none;}
.mobile-accordion .rh > span, .mobile-accordion2 .rh > span, .mobile-accordion3 .rh > span { padding: 5px 15px; font-size: 14px; font-weight: 300;}
.mobile-accordion .rh > span, .mobile-accordion2 .rh > span, .mobile-accordion3 .rh > span { display: block;position: relative;}
.mobile-accordion .rh > span:after, .mobile-accordion2 .rh > span:after, .mobile-accordion3 .rh > span:after {content: ""; display: block; position: absolute; width: 0; height: 0; border: 7px solid transparent;
  border-top-color: #593812; z-index: 2; right: 15px; top: 14px; pointer-events: none;}
.mobile-accordion .rh.active > span:after, .mobile-accordion2 .rh.active > span:after, .mobile-accordion3 .rh.active > span:after {border-top-color: transparent;border-bottom-color: #593812;top: 5px;}
.mobile-accordion .td, .mobile-accordion2 .td, .mobile-accordion3 .td { padding: 5px 15px;}
.mobile-accordion .tr:first-child, .mobile-accordion .tr:last-child, .mobile-accordion2 .tr:first-child, .mobile-accordion2 .tr:last-child, .mobile-accordion3 .tr:first-child, .mobile-accordion3 .tr:last-child { border-bottom: none;}
.mobile-accordion .tr:last-child .td:last-child, .mobile-accordion2 .tr:last-child .td:last-child, .mobile-accordion3 .tr:last-child .td:last-child {border-bottom: none;}
.mobile-accordion .table, .mobile-accordion2 .table, .mobile-accordion3 .table {width: 100%;}
.mobile-accordion .tr:first-child, .mobile-accordion2 .tr:first-child, .mobile-accordion3 .tr:first-child {display: none;}
.mobile-accordion .td:before, .mobile-accordion2 .td:before, .mobile-accordion3 .td:before {content: attr(data-header);float: left;width: 50%;}
.data-checkbox{text-align: center; margin-top: 40px;}
.data-checkbox h5{display: inline-block; margin: 0px 15px;}
.data-checkbox [type="radio"]:checked, .data-checkbox [type="radio"]:not(:checked) {position: absolute; left: -9999px;}
.data-checkbox [type="radio"]:checked + label, .data-checkbox [type="radio"]:not(:checked) + label{ position: relative;
padding-left: 42px; cursor: pointer; line-height: 32px; display: inline-block; color: #6793B5; font-size: 28px;}
.data-checkbox [type="radio"]:checked + label:before, .data-checkbox [type="radio"]:not(:checked) + label:before {
content: ''; position: absolute; left: 0; top: 0; width: 32px; height: 32px; border: 1px solid #ddd; border-radius: 100%; background: #fff;}
.data-checkbox [type="radio"]:checked + label:after, .data-checkbox [type="radio"]:not(:checked) + label:after { content: ''; width: 22px;
height: 22px; background: #FFAA00; position: absolute; top: 5px; left: 5px; border-radius: 100%; -webkit-transition: all 0.2s ease; transition: all 0.2s ease;}
.data-checkbox [type="radio"]:not(:checked) + label:after { opacity: 0; -webkit-transform: scale(0); transform: scale(0);}
.data-checkbox[type="radio"]:checked + label:after { opacity: 1; -webkit-transform: scale(1); transform: scale(1);}
.data-checkbox button{border-radius: 11px; margin: 5px 12px; padding: 10px;}
.data-checkbox a:first-child button{background: #FFAA00; color: #fff;}
.data-checkbox a:last-child button{background: #593812; color: #fff;}
.min-height{min-height: 62vh;}
.stories-content{margin: 0px; padding: 20px;  font-family: 'Open Sans', sans-serif; border-bottom-left-radius: 11px; border-bottom-right-radius: 11px; background: #fff;}
.edit-stories{padding: 20px 0px 50px;}
.search-box{position: relative; }
.search-box input{width: 50%; border-radius: 4px;}
.search-box i{ width: 44px; height: 44px; background: #593812; border-radius: 4px; color: #fff; line-height: 44px; cursor: pointer;}
.stories-content .product-item button{border: none; text-align: center; border-radius: 30px; min-width: 80px; padding: 4px 8px; margin: 0px 5px; font-weight: 300; box-shadow: none; font-size: 14px; text-transform: none;}
.stories-content .product-item button.edit-btn, .stories-content .form-group button.add-btn{background: #FFAA00; color: #fff;}
.stories-content .product-item button.delete-btn{background: #593812; color: #fff;}
.stories-content .product-item button i{display: none;}
.stories-content .form-group{display: flex; align-items: center; width: 100%; flex-wrap: wrap; }
.stories-content .form-group .width-15{width: 17%;}
.stories-content .form-group .width-85{width: 83%;}
.stories-content .form-group input, .stories-content .form-group select{margin: 0px;}
.stories-content .form-group textarea{margin: 0px; text-align: left; text-indent: 0;}
.stories-content .form-group button{background: #E1FAFF; color: #6793B5; border: none; border-radius: 4px; padding: 3px 14px 3px 8px; position: relative;}
.stories-content .form-group button i{font-size: 12px; position: absolute; top: 3px; right: 3px; color: red; cursor: pointer;}
.update-btn{border: none; background: #593812; color: #fff; min-width: 160px; border-radius: 8px; padding: 10px;}
.update-btn:focus{background: #FFAA00;}
.stories-content .form-group p{margin: 0px 5px; display: inline-block;}
.custom-check input {padding: 0;height: initial;width: initial;margin-bottom: 0;display: none;cursor: pointer;}
.custom-check label { position: relative; cursor: pointer;}
.custom-check label:before {content:''; -webkit-appearance: none; background-color: transparent; border: 2px solid #593812;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05); padding: 7px; display: inline-block;
position: relative; vertical-align: middle;cursor: pointer;margin-right: 5px;}
.custom-check input:checked + label:after {content: '';display: block;position: absolute;top: 5px;left: 6px;width: 6px;height: 14px;
border: solid #593812; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.stories-content .form-group [type="radio"]:checked, .stories-content .form-group [type="radio"]:not(:checked) {position: absolute; left: -9999px;}
.stories-content .form-group [type="radio"]:checked + label, .stories-content .form-group [type="radio"]:not(:checked) + label{ position: relative;
padding-left: 24px; cursor: pointer; line-height: 20px; display: inline-block; color: #6793B5; font-size: 14px;}
.stories-content .form-group [type="radio"]:checked + label:before, .stories-content .form-group [type="radio"]:not(:checked) + label:before {
content: ''; position: absolute; left: 0; top: 0; width: 20px; height: 20px; border: 1px solid #ddd; border-radius: 100%; background: #fff;}
.stories-content .form-group [type="radio"]:checked + label:after, .stories-content .form-group [type="radio"]:not(:checked) + label:after { content: ''; width: 14px;
height: 14px; background: #FFAA00; position: absolute; top: 3px; left: 3px; border-radius: 100%; -webkit-transition: all 0.2s ease; transition: all 0.2s ease;}
.stories-content .form-group [type="radio"]:not(:checked) + label:after { opacity: 0; -webkit-transform: scale(0); transform: scale(0);}
.stories-content .form-group[type="radio"]:checked + label:after { opacity: 1; -webkit-transform: scale(1); transform: scale(1);}
.add-field{padding: 4px 8px; width: 85%; margin-top: 5px!important;}
.width-70{width: 70%;}
.storyID-popup table{ border-collapse: collapse; width: 100%; vertical-align: middle; margin-bottom: 12px;}
.storyID-popup table td, .storyID-popup table th { border: 1px solid #dddddd; text-align: left; padding: 8px; }
.storyID-popup table input{margin: 0px; cursor: pointer;}
.storyID-popup .form-group input{margin-bottom: 10px; width: 90%;}
.storyID-popup .form-group{position: relative; margin: 0px; text-align: left;}
.storyID-popup .form-group i{position: absolute; top: 0px; right: 0px; cursor: pointer; width: 36px; height: 36px; background: #39ace6;
color: #fff; line-height: 36px; text-align: center; border-radius: 50%;}
.fade:not(.show){opacity: 1;}
.dashboard .nav-tabs{border: none; text-align: center; display: block; margin-top: 30px;}
.dashboard .nav-tabs li{display: inline-block; font-size: 48px; margin: 0px 10px; font-weight: 700; background: #E1FAFF; color: #6793B5; padding: 15px 20px; border-radius: 11px;}
.dashboard .nav-tabs li.active{background: #33264D; color: #6793B5;}
.addstory-popup{background: #fff; overflow: hidden; position: relative; width: 100%; max-width: 650px; border-radius: 11px;}
.addstory-popup .table-header{margin-top: 0px; text-align: center;}
.stories-content .fa-times-circle{position: absolute; top: 15px; right: 15px; color: #fff; cursor: pointer; font-size: 16px;}
.storyID-popup{background: #f5f5f5;}
.product-no-img{position: relative; overflow: hidden;}
.no-img-title{position: absolute; top: 45%; left: 50%; transform: translate(-50%, -50%); width: 85%;}
.no-img-title h5{margin: 0px; font-size: 24px; font-weight: 700; color: #6793B5;}
.mobile-accordion.table img, .mobile-accordion2.table img, .mobile-accordion3.table img{max-width: 24px;}

/* /////////// Phase2   //////////////// */

.manage-assesment-pop{background: #fff; border-radius: 15px; position: relative; overflow: hidden; width: 100%; max-width: 400px; padding: 40px 20px; text-align: center !important;}
.manage-assesment-pop h2{ font-size: 24px; color: #737373; text-transform: uppercase; font-weight: 700; margin-bottom: 20px;}
.manage-assesment-pop button{background: #39ACE6; border-radius: 30px; padding: 5px 12px; color: #fff; border: none; min-width: 80px; box-shadow: 0 6px 15px 3px rgb(0 0 0 / 10%); margin: 0px 8px;}
.manage-assesment-pop button:hover{background: #fff; color: #414141;}
.manage-assesment-pop .close-btn{top: 15px; right: 15px; font-size: 16px;}
.over-viewtable td small{color: #6793B5;}
.report-class-box {position: relative;border-radius: 12px;overflow: hidden;background: #f5f5f5; margin-bottom: 30px;}
.report-class-box-title { background: #ECEBEB; box-shadow: 0 6px 15px 3px rgb(0 0 0 / 8%); position: relative;}
.report-class-box .nav-tabs .nav-item .nav-link { font-size: 24px; font-weight: 700; color: #593812; text-transform: uppercase; padding: 14px 20px;border: none; border-radius: 0px;}
.report-class-box .nav-tabs .nav-item.active .nav-link { background: #FFAA00; color: #fff;}
.report-class-box-content{padding: 30px;}
.report-class-box-content button{background: #ECEBEB; color: #593812; box-shadow: 0 2px 2px 2px rgb(0 0 0 / 5%); margin: 0px 6px;}
.report-class-box-content button.active{background: #593812; color: #FFAA00;}
.report-class-box-content .mobile-accordion.table{ margin-bottom: 0px; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; text-align: center; background: #fff;}
.report-class-box-content .mobile-accordion .th, .report-class-box-content .mobile-accordion .rh > span{background: #f6f6f6;}
.report-class-box-content .mobile-accordion button, .mobile-accordion .tr button, .mobile-accordion2 .tr button, .mobile-accordion3 .tr button{font-size: 12px; font-weight: 300; background: #593812; padding: 3px 8px; margin: 0px; min-width: 70px; height: auto; border-radius: 30px; border: none; color: #fff;}
.report-class-box-content .mobile-accordion img{max-height: 14px;}
.report-class-box-content .mobile-accordion button:hover, .mobile-accordion .tr button:hover, .mobile-accordion2 .tr button:hover, .mobile-accordion3 .tr button:hover{background: #ffae00;}
.report-class-box-content .mobile-accordion.table .tr.active{background: #593812; color: #fff;}
.report-class-box-content .mobile-accordion.table .tr.active img{filter: brightness(0) invert(1);}
.mobile-accordion .tr.active button, .mobile-accordion2 .tr.active button, .mobile-accordion3 .tr.active button{background: #fff; color: #593812;}
.report-class-box-content .scrolls{margin-top: 30px; max-height: 220px;}
.report-class-box-content .student-overview{margin-top: 20px;}
.report-class-box-content .student-overview-content{background: #fbfbfb; padding: 0px;}
.report-class-box-content .student-overview-title{text-align: left; color: #593812; font-size: 24px; padding: 12px 20px;}
.report-class-box-content .student-overview-content .legend{width: auto;}
.progress-studentlist table{background: #ECEBEB; border: 1px solid #ECEBEB; width: 100%; margin: 0px;}
.progress-studentlist table th{font-size: 20px; color: #737373;}
.progress-studentlist table tbody{background: #fff; font-size: 16px; display: block;}
.progress-studentlist table td, .progress-studentlist table th{padding: 6px 12px; position: relative;}
.progress-studentlist table tbody img{max-height: 18px; filter: grayscale(100%); opacity: .3;}
.progress-studentlist table tbody td:last-child, .progress-studentlist.quiz-result table thead th:last-child{text-align: right;}
.progress-studentlist table tfoot{text-align: center;}
.progress-studentlist table tfoot button{background: #fff;}
.progress-studentlist table tbody tr, .progress-studentlist table thead { display: table; width: 100%; table-layout: fixed;/* even columns width , fix width of table too*/}
.progress-studentlist table .scrolls{max-height: 180px; margin: 0px;}
.quiz-result-numbers{background: #737373; padding: 20px;}
.student-overview #myChart, .student-overview #linegraph{width:100%; margin: 0 auto;}
.progress-studentlist.quiz-result table .scrolls{max-height: 300px; height: 300px;}
.no-assessments{position: relative; padding: 30px; min-height: 250px; text-align: center;}
.no-assesments-icon{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80%;}
.no-assesments-icon p{font-size: 18px; margin-bottom: 30px;}
.no-assesments-icon i{width: 100px; height: 100px; line-height: 100px; background: #fff; border-radius: 100%; color: #FFAA00;
font-size: 30px;   box-shadow: 0 5px 2px 0px rgb(0 0 0 / 20%);}
.learning-outcome select{border: 1px solid #FFAA00; color: #593812; background: #fff; width: 100%; font-size: 20px; box-shadow: 0 2px 7px 0px rgb(0 0 0 / 10%); font-weight: normal;}
.learning-outcome-mark{text-align: center;  color: #593812;}
.learning-outcome-mark h5{ display: inline-block; margin: 0px 10px; font-family: 'Open Sans', sans-serif;}
.learning-outcome-mark h5 i{margin-right: 4px; color: #86EB9D;}
.learning-outcome-mark h5:nth-child(2) i{color: #F8D983;}
.learning-outcome-mark h5:last-child i{color: #EF8282;}
.verb-progress{font-family: 'Open Sans', sans-serif; width: 100%; color: #593812; margin: 0px;}
.verb-progress thead th{background: #737373; color: #fff; border: 1px solid #ffaa00;}
.verb-progress tbody td{border: 1px solid #ffaa00; background: #ECEBEB;}
.verb-progress tbody td span{width: 40px; height: 40px; text-align: center; line-height: 40px; border-radius: 50%; background: #ebebeb; display: inline-block;}
.verb-progress tbody td span.excellent{background: #86EB9D;}
.verb-progress tbody td span.satisfactory{background: #F8D983;}
.verb-progress tbody td span.needHelp{background: #EF8282;}
.verb-progress thead, .verb-progress tbody tr{display: table; width: 100%; table-layout: fixed;}
.verb-progress tbody{display: block; margin-top: 0px !important; max-height: 223px !important;}
.verb-progress tbody td.active{background: #593812;}
.assignmentDetails-pop{background: #fff; border-radius: 15px; padding: 20px 15px; font-family: 'Open Sans', sans-serif; width: 100%; max-width: 450px; text-align: center !important;}
.assignmentDetails-pop h5{color: #737373; margin-bottom: 20px;}
.assignmentDetails-pop i.close-btn{top: 15px; right: 15px;}
.assignmentDetails-pop table{width: 100%; border-radius: 10px; overflow: hidden; color: #593812; margin-bottom: 0px;}
.assignmentDetails-pop table th{background: #39ACE6; color: #fff; border: 1px solid #ECEBEB;}
.assignmentDetails-pop table td{border: 1px solid #ECEBEB;}
.assignmentDetails-pop table td:first-child, .assignmentDetails-pop table th:first-child{text-align: left;}
.over-viewtable td b{font-weight: normal;}
.quiz-result-numbers select{display: none; background: #ECEBEB; color: #593812; border: none; border-radius: 30px; box-shadow: 0 2px 2px 2px rgb(0 0 0 / 5%);
font-size: 14px;}
.booksRead-tbl{margin-bottom: 20px;}
.booksRead-tbl .mobile-accordion .th, .booksRead-tbl .mobile-accordion .rh > span{background: #737373; color: #fff;}
.bg-excellent{background: #86EB9D !important;}
.bg-satisfactory{background: #F8D983 !important;}
.bg-help{background: #EF8282 !important;}
.bg-help .qz-score, .bg-excellent .qz-score{color: #fff !important;}
.booksRead-tbl .student-overview-title{color: #fff;}
.report-class-box-content .booksRead-tbl .scrolls{margin-top: 0px; max-height: 180px;}
.quizScore-tbl{position: relative; overflow: hidden; display: block;  font-family: 'Open Sans', sans-serif; margin: 20px 0px; }
.quizScore-tbl table{width: 100%; text-align: center; margin: 0px; background: #ECEBEB; vertical-align: middle;}
.quizScore-tbl table th, .quizScore-tbl table td{border: 1px solid #cb9a31;}
.quizScore-tbl table thead th{background: #ffaa00; color: #593812; font-weight: 700 !important; font-size: 16px;}
.quizScore-tbl .qz-score{font-size: 72px; color: #593812;}
.quizScore-tbl table img{max-height: 16px;}
.report-class-box .remarks-box{margin-bottom: 0px;}
.report-class-box .student-profile-content{background: #fff;}
.report-class-box .student-profile{margin-bottom: 15px;}
.verb-progress td img{max-height: 16px;}
.verb-progress .qz-score, .verbProgress-tbl .qz-score{font-size: 30px; font-weight: 300; display: block;}
.verbProgress-tbl .mobile-accordion .th, .verbProgress-tbl .mobile-accordion .rh > span{background: #737373; color: #fff;
font-size: 16px; font-weight: 300;}
.verbProgress-tbl .scrolls{margin: 0px; max-height: 300px;}
.student-answersheet{position: relative; overflow: hidden; border-radius: 11px; background: #ecebeb; margin-top: 20px; border: 1px solid #cb9a31; margin-bottom: 20px;}
.student-answersheet .student-overview-title{font-size: 20px;}
.quizScore-tbl td.active{background: #593812;}
.quizScore-tbl td.active img{ filter: brightness(0) invert(1);}
.student-answersheet-content{ padding: 15px 40px; border-top: 1px solid #cb9a31; font-family: 'Open Sans', sans-serif;}
.student-answersheet-content h2{font-size: 42px; text-transform: uppercase; color: #593812; font-weight: 700;}
.student-answersheet-qs h5{font-family: 'Open Sans', sans-serif; color: #33264D; font-weight: 600; font-size: 16px;}
.student-answersheet-qs ul{padding-left: 40px; margin-top: 20px; position: relative;}
.student-answersheet-qs ul img{max-height: 150px; margin-bottom: 15px;}
.student-answersheet-qs ul li{position: relative; margin-bottom: 10px; padding-left: 20px; color: #737373;}
.student-answersheet-qs ul li::before{ content: "\f111"; font-family: "Font Awesome 5 Free"; font-weight: 400; position: absolute; left: 0px;}
.student-answersheet-qs ul li.wright{color: #159115; font-weight: 700;}
.student-answersheet-qs ul li.wrong{color: #D35324; font-weight: 700;}
.student-answersheet-qs ul li.wright::before, .student-answersheet-qs ul li.wrong::before{font-weight: 900;}
.qs-respond img{max-height: 45px !important;}
.qs-respond{position: absolute; left: 40%; top: 75%; transform: translate(-50%, -50%);}
.student-answersheet-qs{margin-bottom:40px;}
.student-answersheet-qs ul audio{margin-bottom: 15px;}
.student-answersheet-content.scrolls{max-height: 920px; margin-top: 0px;}
.seacrh-book{margin-top: 20px; position: relative;}
.seacrh-book input{width: 100%; border-radius: 11px;}
.seacrh-book i{width: 44px; height: 44px; background: #33264D; color: #fff; border-bottom-right-radius: 11px; border-top-right-radius: 11px;
text-align: center; line-height: 44px; font-size: 16px; cursor: pointer; position: absolute; right: 0px;}
.selectLesson-tbl .mobile-accordion .thead{ font-family: 'Gaegu', cursive;}
.selectLesson-tbl .mobile-accordion .th{ font-size: 20px;}
.selectLesson-tbl .mobile-accordion2 .thead {
    font-family: 'Gaegu', cursive;
}

.selectLesson-tbl .mobile-accordion2 .th {
    font-size: 20px;
}
.selectLesson-tbl .mobile-accordion .td{ color: #737373;}
.selectLesson-tbl .mobile-accordion .td i{font-size: 20px;}
.info-icon{color: #FFAA00;}
.select-icon{color: #ECEBEB;}
.select-icon.checked, .select-icon:hover{color: #5BE15F;}
.hgt-16{height: 16px;}
.createOwn-lesson{padding: 40px 20px; text-align: center;}
.createOwn-lesson button{max-width: 200px; font-size: 18px; height: auto !important; border-radius: 12px; margin: 0px 20px; color: #593812; box-shadow: 0 2px 2px 2px rgb(0 0 0 / 5%);}
.createOwn-lesson-plan, .createOwn-quiz{padding: 30px 20px;}
.createOwn-lesson-plan h2, .createOwn-quiz h2{text-align: center; text-transform: uppercase; color: #593812; font-weight: 700;}
.createOwn-lesson-plan h5, .createOwn-quiz h5{text-align: center; color: #8C7138; text-transform: uppercase;}
.createOwn-lesson-plan .createOwn-lesson-plan-details{margin-top: 30px;}
.createOwn-lesson-plan .createOwn-lesson-plan-details .form-group{margin-bottom: 20px; display: flex; flex-wrap: wrap;}
.createOwn-lesson-plan .createOwn-lesson-plan-details .form-group label{width: 30%; display: inline-block; font-size: 18px; color: #737373; font-weight: 700; position: relative;}
.createOwn-lesson-plan .createOwn-lesson-plan-details .form-group input, .createOwn-lesson-plan .createOwn-lesson-plan-details .form-group textarea{width: 68%; display: inline-block; border-radius: 11px; margin: 0px;}
.createOwn-lesson-plan .createOwn-lesson-plan-details .form-group select{width: 68%; display: inline-block; border-radius: 11px; background: #fff; color: #737373; margin: 0px;}
.createOwn-lesson-plan .createOwn-lesson-plan-details .form-group label sup{position: absolute; color: #6793B5; font-size: 12px; left:0px; top: 30px;}
.olp-btn{margin-top: 40px; text-align: center; position: relative; }
.olp-btn button{width: 100%; max-width: 150px; border-radius: 15px; background: #fff; color: #737373; margin: 0px 8px;  box-shadow: 0 2px 2px 2px rgb(0 0 0 / 5%);}
.cyolp-box{position: relative; overflow: hidden; margin-top: 20px; background: #fff; border-radius: 15px;}
.cyolp-box-title{background: #ecebeb; padding: 5px; border-radius: 15px; position: relative; overflow: hidden;}
.cyolp-box-title input{width: 75%; border-radius: 15px; margin-bottom: 0px;}
.cyolp-box form{margin-top: 0px;}
.cyolp-box h5 i{color: #fff;}
.cyolp-table{position: relative; overflow: hidden; border-radius: 15px; margin-top: 30px;}
.cyolp-table table{width: 100%; background: #fff; margin: 0px;}
.cyolp-table table thead th:last-child{text-align: right;}
.cyolp-table table thead th{background: #737373; font-size: 24px; color: #fff;}
.cyolp-table table thead th img{max-height: 45px;}
.cyolp-table table td{padding: 12px; border: none; color: #737373; font-size: 16px; font-weight: 700;}
.cyolp-table table td:last-child{font-family: 'Open Sans', sans-serif; font-size: 14px;}
.cyolp-table table td a{color: #39ACE6;}
.cyolp-table .mobile-accordion .th, .cyolp-table .mobile-accordion .rh > span{background: #737373; color: #fff;}
.cyolp-table .mobile-accordion.table img{max-width: 16px;}
.cyolp-table .scrolls{max-height: 250px;}
.cyolp-table .table{margin: 0px;}
.quiz-questions{margin-top: 30px;}
.quiz-questions h4{font-size: 24px; font-weight: 700; color: #737373;}
.quiz-questions input{width: 100%; border-radius: 10px; font-family: 'Open Sans', sans-serif; }
.quiz-question-add{font-family: 'Open Sans', sans-serif; color: #737373; display: flex;}
.quiz-question-file{display: inline-block; margin: 0px 20px;}
.quiz-question-file label{text-align: center; display: block;}
.quiz-question-file label i{font-size: 18px; display: block;}
.quiz-question-file audio{max-width: 200px;}
.quiz-question-file:first-child img{width: 80px; height: 60px; object-fit: cover; overflow: hidden;}
.custom-file-upload{cursor: pointer;}
.quiz-question-answer{margin-top: 20px;}
.quiz-answer-option [type="radio"]:checked, .quiz-answer-option [type="radio"]:not(:checked) {position: absolute; left: -9999px;}
.quiz-answer-option [type="radio"]:checked + label, .quiz-answer-option [type="radio"]:not(:checked) + label{ position: relative;
padding-left: 30px; cursor: pointer; line-height: 24px; display: inline-block; color: #737373; font-size: 14px;}
.quiz-answer-option [type="radio"]:checked + label:before, .quiz-answer-option [type="radio"]:not(:checked) + label:before {
content: ''; position: absolute; left: 0; top: 0; width: 24px; height: 24px; border: 1px solid #ddd; border-radius: 100%; background: #fff;}
.quiz-answer-option [type="radio"]:checked + label:after, .quiz-answer-option [type="radio"]:not(:checked) + label:after { content: ''; width: 16px;
height: 16px; background: #438F2E; position: absolute; top: 4px; left: 4px; border-radius: 100%; -webkit-transition: all 0.2s ease; transition: all 0.2s ease;}
.quiz-answer-option [type="radio"]:not(:checked) + label:after { opacity: 0; -webkit-transform: scale(0); transform: scale(0);}
.quiz-answer-option[type="radio"]:checked + label:after { opacity: 1; -webkit-transform: scale(1); transform: scale(1);}
.quiz-answer-option input{margin-bottom: 0px; width: 70%;}
.quiz-answer-option p{display: inline-block;}
.quiz-add-new{cursor: pointer; margin-top: 20px;}
.quiz-add-new button{background: #ecebeb; color: #737373;}
.grade-drop{position: relative;}
.grade-drop .fa-stack{position: absolute; right: 0px; top: 4px; font-size: 10px; font-weight: normal; color: #707070; cursor: pointer;}
.give-assessment .selectLesson-tbl{margin-top: 30px;}
.view-assessment{margin-bottom: 30px;}
.view-assessment .mobile-accordion .th, .view-assessment .mobile-accordion .rh > span{background: #FFAA00;}
.view-assessment .scrolls{max-height: 300px;}
.view-assessment .table{margin-bottom: 0px; border: none;}
.view-assessment .mobile-accordion.table button{font-family: 'Gaegu', cursive; background: #593812; color: #fff; padding: 2px 8px; height: auto; min-width: 80px;
box-shadow: none;}
.assessment-assignee-tbl{margin-bottom: 30px;}
.assessment-assignee-tbl .over-viewtable{margin-bottom: 0px; border-radius: 0px;}
.assessment .quizScore-tbl{margin-top: 0px;}
.assessment .quizScore-tbl .qz-score { font-size: 48px; color: #593812; padding-top: 18px; min-height: 72px; display: block;}
.assessment .student-overview-content{padding: 0px;}
.assessment .student-overview-title{font-size: 30px; padding: 10px 20px;}
.lesson-plan-info-box{background: #f5f5f5; position: relative; overflow: hidden; border-radius: 11px; margin-bottom: 30px;}
.lesson-plan-info-title{background: #FFAA00; color: #fff; text-transform: uppercase; padding: 10px; text-align: center;}
.lesson-plan-info{padding: 40px 0px;}
.lesson-plan-info h1{margin-bottom: 20px;}
.lesson-plan-info-title h4{margin: 0px; font-size: 30px; font-weight: 700; }
.lesson-plan-info-content{padding: 20px; font-family: 'Open Sans', sans-serif; }
.lesson-plan-info .panel-heading {position: relative; cursor: pointer; border-bottom: 1px solid #593812;}
.lesson-plan-info .panel-heading[data-toggle="collapse"]::after { font-family: "Font Awesome 5 Free"; content: "\f0d8"; /* "play" icon */
position: absolute; color: #593812; font-size: 18px; line-height: 22px; font-weight: 700; right: 20px; top: calc(50% - 10px);}
.lesson-plan-info .panel-heading[data-toggle="collapse"].collapsed::after {transform: rotate(180deg);}
.lesson-plan-info-content h4{font-family: 'Open Sans', sans-serif; color: #593812; font-weight: 500; font-size: 18px;}
.lesson-plan-info-content .panel-default{margin-bottom: 20px;}
.lesson-plan-info-content .panel-body{padding: 10px; background: #fff;}
.lesson-plan-info-content .panel-body ul li{position: relative; padding-left: 25px; padding-bottom: 8px;}
.lesson-plan-info-content .panel-body ul li::before{position: absolute; font-family: "Font Awesome 5 Free"; font-weight: 700; 
left: 0px; top: 0px; content: "\f111"; color: #33264D;}
.lesson-plan-info-content .panel-body ul:last-child li{padding-bottom: 0px;}
.lesson-plan-info-content .panel-body.scrolls{max-height: 350px;}
.mobile-accordion.table .tr.active, .mobile-accordion2.table .tr.active, .mobile-accordion3.table .tr.active {background: #593812; color: #fff;}
.mobile-accordion.table .tr.active img, .mobile-accordion2.table .tr.active img, .mobile-accordion3.table .tr.active img{filter: brightness(0) invert(1);}
.cmp-count{position: absolute; top: 10px; right: 10px; background: #fff; color: #593812; font-size: 28px; width: 35px; height: 35px;
line-height: 35px; text-align: center; border-radius: 50%; font-weight: 700;}
.select-assessment-tbl .mobile-accordion.table .thead .th:first-child{text-align: left;}
.select-assessment-tbl .mobile-accordion.table .tbody .td:first-child{text-align: left;}
.select-assessment-tbl .mobile-accordion2.table .thead .th:first-child { text-align: left;}
.select-assessment-tbl .mobile-accordion2.table .tbody .td:first-child {text-align: left;}
.select-assessment-tbl .table .thead .th:first-child{text-align: left;}
.select-assessment-tbl .table .tbody .td:first-child{text-align: left;}
.createOwn-lesson-plan .createOwn-lesson-plan-details .form-group input[type="checkbox"]{width: 20px;}
.edit-icon{max-width: 24px; margin: 0px !important;}
.quiz-assignment{position: relative; overflow: hidden; border-radius: 8px; margin-bottom: 15px;}
.quiz-assignment h4{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); margin: 0px; font-family: 'Open Sans', sans-serif;
color: #593812; font-weight: 700;}
.assignment-quiz .close2{position: absolute; right: 0px; top: 0px; color: #982f33; font-size: 16px;}
.quiz-assignment img{margin: 0px !important;}
.table{margin-bottom: 0px;}
.name-Assignment{margin-top: 30px;}
.name-Assignment label{font-size: 20px; width: 22%; margin: 0px;}
.name-Assignment input{border: none; border-radius: 5px; width: 77%; font-family: 'Open Sans', sans-serif; background: #f5f5f5;}
.pad-15{padding: 15px 0px;}
.seacrh-book-lesson { margin-top: 20px; position: relative;}
.seacrh-book-lesson input {   width: 85%; border-radius: 11px; }
.seacrh-book-lesson i {   width: 44px;   height: 44px;   background: #33264D;   color: #fff; border-bottom-right-radius: 11px; border-top-right-radius: 11px;
text-align: center; line-height: 44px; font-size: 16px; cursor: pointer; position: absolute; right: 150px;}
.quiz-result th i.fa-arrow-left{position: absolute; left: 10px; cursor: pointer;}
.quiz-result th i.fa-arrow-right{position: absolute; right: 10px; cursor: pointer;}
.quiz-result th span{font-weight: 700;}
.chart-scroll{position: relative; overflow: auto; overflow-y: hidden; width: 100%;  scrollbar-color: #FFAA00 #b5b5b5; scrollbar-width: thin;}
.chart-scroll2 #myChart2, .chart-scroll2 #myChart{ width: 800px!important;}
.chart-scroll::-webkit-scrollbar {width: 5px; height: 5px;}
.chart-scroll::-webkit-scrollbar-track { background: #b5b5b5; border-radius: 10px;}
.chart-scroll::-webkit-scrollbar-thumb { background: #FFAA00; border-radius: 10px;}
/* Add this CSS to your stylesheet to center align the image and set its width to 80% of the browser window */
.centered-banner {
    text-align: center;
}

.banner-image {
    width: 60%;
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}