body{background-color: #fff;}
.bgwhite{background: #fff;}
.bgprimary{background: #4cc2f0;}
.bgsoftblue{background:#f3fbff;}
.maincolor{color: #0fb0f8;}
.bgsecondary{background: rgb(241,166,18);background: linear-gradient(90deg, rgba(241,166,18,1) 0%, rgba(250,209,72,1) 100%);}
.bgthird{background: rgb(52,56,133);background: linear-gradient(90deg, rgba(52,56,133,1) 0%, rgba(71,158,223,1) 100%);}
.bgsoft1{background-color: #f7ebd9!important;}
.font16{font-size: 16px;}
.font14{font-size: 14px;}
.font13{font-size: 13px;}
.cp{cursor: pointer;}
.pr{position: relative;}
.fw400{font-weight: 400!important;}
.fw600{font-weight: 600!important;}
.scroll-y{overflow-y:auto}
.pd0{padding: 0!important;}
.pt0{padding-top: 0!important;}
.pt10{padding-top: 10px;}
.pt15{padding-top: 15px;}
.pb10{padding-bottom: 10px;}
.pl20r20{padding-left: 20px; padding-right: 20px;}
.mb0{margin-bottom: 0!important;}
.m15{margin:15px;}
.m20{margin: 20px;}
.mb0{margin-bottom: 0;}
.mr5{margin-right: 5px;}
.mr10{margin-right: 10px;}
.mr20{margin-right: 20px;}
.mt8{margin-top: 8px!important;}
.mt13{margin-top: 13px;}
.mt20{margin-top: 20px;}
.mb20{margin-bottom: 20px;}
.mtb20{margin-top: 20px; margin-bottom: 20px;}
.pdc510{padding: 5px 10px!important;}
.profile-pic{width: 120px; height: 150px;object-fit: contain;}
.bluext-invert{color: #0FB0F8;border: 1px solid #0FB0F8; border-radius: 4px; padding: 15px 30px; font-size: 14px;}
.bluext-invert-capsule{width:max-content; color: #0FB0F8;  background: #fff;  border: 1px solid #0FB0F8; border-radius: 30px; padding: 5px; font-size: 12px;}
.bluext-invert-capsule:hover{background: #0FB0F8; color: #fff; text-decoration: none;}
.bluext-invert-capsule.extrawidth{padding: 5px 15px;}
.bluext-invert-capsule:focus{color: #0FB0F8;}
.gray-invert-capsule{color: #807e7f;  background: #fff;  border: 1px solid #807e7f; border-radius: 30px; padding: 5px; font-size: 12px;}
.gray-invert-capsule:hover{background: #807e7f; color: #fff; text-decoration: none;}
.gray-invert-capsule:focus{color: #807e7f;}
.bluext-invert-capsule:hover,.bluext-invert-capsule:hover label,.bluext-invert-capsule:hover fa {color: #fff; text-decoration: none;}
.bluext-invert-capsule label, .bluext-invert-capsule fa{font-weight: 400;}
.bluext{color: #fff; border: 1px solid #0FB0F8; background: #0FB0F8; border-radius: 4px; padding: 15px 30px; font-size: 14px;}
.bluext:hover{text-decoration: none; color: #fff; background-color: #0fa8eb;}
.squarext{padding: 0; width: 40px; height: 40px; text-align: center; border: none; overflow: hidden;}
.squarext .fa,.squarext .fas{padding-top: 13px; }
.squarext2:hover{background-color: #0fa8eb;}
.squarext2{padding: 0; width: 40px; height: 40px; font-size: 14px; text-align: center; border: none;border-radius: 4px; overflow: hidden;background: #0FB0F8;}
.squarext2 .fa,.squarext2 .fas{color: #fff;}
a.squarext2 .fa-user{padding-top: 12px;}
button.squarext2 .fa-user{padding-top: 0;}
.btn-image{border-radius:4px; background:#e9e9ed; color:#312675;margin:8px 0;padding:15px 0px; width:100%;}
.btn-image .input-image{position:absolute;z-index:2;top:0;left:0;filter: alpha(opacity=0);-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";opacity:0;background-color:transparent;color:transparent;}
.btnxt{color: #312675; border: 1px solid #C1C1C1; background: #fff; border-radius: 4px; padding: 13px 15px; font-size: 14px;}
.btnxt .caret{margin-left: 55px;}
.btnxt-capsule{color: #0FB0F8; background: #fff; border: 1px solid #0FB0F8; border-radius: 30px; padding: 10px 10px; font-size: 14px;}
.btnxt-noborder{color: #312675; background: #fff; border: none; padding: 10px 10px; font-size: 14px;}
.btnxt-noborder2{color: #312675; background:none; border: none; padding: 0; font-size: 14px;}
/* .btn-group{font-size: 12px; font-weight: 400; padding:2px 10px;background: rgb(75,207,203);background: linear-gradient(90deg, rgba(75,207,203,1) 0%, rgba(77,191,249,1) 100%); color: #fff; border-radius: 20px;} */
.btn-group{font-size: 12px; font-weight: 400; padding:2px 10px;background: linear-gradient(90deg, rgba(49,45,123,1) 0%, rgba(75,181,243,1) 100%); color: #fff; border-radius: 20px;}
.btn-group.active, .btn-group:hover{background: rgb(49,45,123); background: linear-gradient(90deg, rgba(49,45,123,1) 0%, rgba(75,181,243,1) 100%);}
.btn-group.more{color: #312675; background: #fff; border:1px solid #312675}
.btn-group .fa{cursor: pointer;}

.btn-group2{font-size: 12px; font-weight: 400; padding:2px 10px;background: #332d73; color: #fff; border-radius: 20px;}
.btn-group2.active, .btn-group2:hover{background: rgb(49,45,123); background: linear-gradient(90deg, rgba(49,45,123,1) 0%, rgba(75,181,243,1) 100%);}
.btn-group2.more{color: #312675; background: #fff; border:1px solid #312675}
.btn-group2 .fa{cursor: pointer;}
.btn-class{font-size: 12px; font-weight: 400; padding:2px 10px;background: #312675; color: #fff; border-radius: 20px;}
.btn-class .fa{cursor: pointer;}
.fl{float: left;}
.fr{float: right;}

a.effect[aria-expanded=true] .openxt {display: none;}
a.effect[aria-expanded=false] .closext {display: none;}

.nav.opf li{background: #f6f6f6;}
.nav.opf li.active a{border:none;}
.nav.opf li a {padding: 25px 30px; color: #312675; border: none;}
.nav.opf li.active a::after, .nav.opf li:last-child a::after{border:none;}
.nav.opf li a::after {content: ""; border-right: 1px solid #c1c1c1; position: absolute; right: 0; height: 24px;}
.nav-tabs.opf {border: none;font-family: 'Lato', sans-serif;font-size: 14px;}

.nav.opf2{margin-top: 15px; border:none;}
.nav.opf2 li{width: 50%; text-align: center; font-size: 16px; font-weight: 600;}
.nav.opf2 li a{border:none; padding: 15px 0 23px 0;}
.nav.opf2 li a:hover{border:none;}
.nav.opf2 li.active a{background: #f3fbff;}
.nav.opf2 li.active a::after{content: ""; border-bottom: 2px solid #0fb0f8; width: 75px; height: 2px; margin: auto; display: block; top:8px; position: relative;}
.tabopf2 {border-bottom: 1px solid #d5dde1;background: #f3fbff!important;}
.tabopf2 a{color:#312675;}
.tabopf2 a:hover{color: #65abdc; text-decoration: none;}

.nav.opf3 li{}
.nav.opf3 li.active a{border:none; color: #0fb0f8;}
.nav.opf3 li a {padding: 0x 15px; color: #9892ba; border: none;}
.nav.opf3 li.active a::after {content: ""; border-bottom: 2px solid #0fb0f8; left: 50%; bottom: 5px; width: 70px; height: 2px; margin-left: -35px; position: absolute;}
.nav-tabs.opf3 {border: none;font-family: 'Source Sans Pro', sans-serif;font-size: 16px; font-weight: 600;}

.tabopf4 {border-bottom: 1px solid #d5dde1;background: #edf3f6!important; margin: 0 0 10px;}
.tabopf4 a{color:#312675;}
.tabopf4 a:hover{color: #65abdc; text-decoration: none;}

.tabopf{font-family: 'Source Sans Pro', sans-serif;}

.largext{font-weight: 700; font-size: 20px; float: left; padding:15px 20px}
.searchxt button{background: #fff; border:1px solid #c1c1c1; border-right-width: 0; border-radius: 4px 0 0 4px; padding:12px 20px; float: left;}
.searchxt input{padding:12px 20px 12px 0; border:1px solid #c1c1c1;border-left-width: 0; border-radius: 0 4px 4px 0;}

.tab-content{background: #fff;}

.table.xt{color: #312675;}
.table.xt thead tr th{border-bottom: 1px solid #e0e0e0;}
.table.xt thead th{font-size: 16px; font-weight: 600;}
/* .table.xt tbody td{font-size: 14px; font-weight: 600; padding:10px;} */
.table.xt tbody td{padding:10px;}
.table.xt .thumbsxt{width: 30px; height: 30px; object-fit: contain; border-radius: 50%; margin-right: 10px;}
.table.xt tbody{border-top: none;}
.table.xt .subm{background-color: #d1ffd9; border-radius: 4px; display: inline; padding: 5px 10px;}
.table.xt .subm2{background-color: #fff1da; border-radius: 4px; display: inline; padding: 7px 10px 8px 10px; color:#000; font-size: 13px;}
.table.xt .subm3{padding: 4px 10px;width: max-content;background: #fff1da;border-radius: 18px;color: #000;font-size: 11px; display: inline;}
.table.oddeven tbody tr.showQuizRecord:nth-child(even){background-color: #fbfbfb;}
.profile_table_quiz {background-color: #f3fbff!important;}
.profile_table_quiz thead tr th{background-color: #fbfbfb!important;padding: 20px 20px;}
.profile_table_quiz tr:nth-child(odd){background-color: #f8f8f8;}
.profile_table_quiz tr:nth-child(even){background-color: #fbfbfb;}
.profile_table_quiz tr td{padding:8px 20px!important;}
.showWorksheetAttemptRecord{border-top: 2px solid #fafafb; box-shadow: 0px 1px 10px 0px rgba(241,241,241,1);}

.table.xtnd{background: none; margin-bottom: 10px;}
.table.xtnd thead{border-bottom: none;}
/* .table.xtnd thead th{font-size: 12px;} */
.table.xtnd tbody td{font-size: 16px; font-weight: 400; padding: 10px;}
.table.xtnd tbody td span{color: #9e9dc2; padding-left: 10px;}
.table.xtnd tbody td span.caret{padding-left: 0;}
.table.xtnd tbody tr:nth-child(even){background-color: #fff;}
.table.xtnd .progress{height: 13px; margin-bottom: 0; width: 90%; background: #dfecf6;box-shadow:none;border-radius: 10px;}
.table.xtnd .progress-bar{font-size: 12px; line-height: 12px;border-radius: 0 10px 10px 0;}
.table.xtnd tbody tr:nth-child(2){border-bottom: none;}

.table.profile_tables{background-color: #f3fbff;}
.table.profile_tables tr th{background-color: #f3fbff!important; border-bottom: 1px solid #e0e0e0;}
.newlabel{margin-top: 10px;}
.newlabel .popup-label {width: 48.5% !important;}
.newlabel .group_label {border-radius: 3px;padding: 0px 5px;height: 32px;line-height: 32px;margin: 0 8px 8px 0;float: left;font-weight: 590;font-size: 14px;overflow: hidden;color: #FFFFFF !important;}
.newlabel .group_label:hover {overflow: visible;z-index: 9999;position: relative;opacity: 0.8;}
.newlabel .group_label .edit-mode{float: right; margin: 10px 0 0 0;}

/* .clear-filter{background:#fff; border:1px solid #adadad} */
.daterange-xt{background: #fff; cursor: pointer; border-radius: 4px;border: 1px solid #c1c1c1; padding: 12px 15px 10px 15px; background: #fff; color: #312675; margin:15px}
.daterange-xt span{padding-left:0!important;}
.opt-ext{padding:10px!important; background:#fff; border:none;}
.iconxt{float:right; padding:0px 10px 0 0;font-size:16px;}

.start-filter{font-size:14px;}
.accordion-xt{width:250px; position:absolute;z-index: 1000; display:none; right:0; font-size:13px;top:42px;}
.accordion-xt .btn{font-size:13px;}
.accordion-xt .checkbox{box-shadow: 0px 10px 20px rgb(48 48 48 / 30%); background:#fff;border-radius:4px}
.accordion-xt .list-group-item{background:none; padding: 10px 0;}
.accordion-xt .list-group input{margin-left:0px;}
.accordion-xt .list-group span{padding-left:25px;}

.list-group.ext {margin-bottom:0px; padding:10px 0 0 0;}
/* .list-group.ext .list-group-item{border:none; background:#f7fafc; padding:10px 0 !important; border-top: 1px solid #ddd;} */
.list-group.ext .list-group-item{border:none; padding:10px 0 !important; border-top: 1px solid #ddd;}
.list-group.ext .list-group-item input{margin:0px 0 0 30px !important}
.list-group.ext .list-group-item span{padding: 0 0 0 10px!important;}
.list-group.ext .list-group-item:last-child{padding-bottom: 0!important;}

/* The container */
.container-filter, .container-filter-sub {display: block; position: relative;cursor: pointer;-webkit-user-select: none; -moz-user-select: none;-ms-user-select: none;user-select: none;}
/* Hide the browser's default checkbox */
.container-filter input, .container-filter-sub input{opacity: 0;cursor: pointer;height: 0;}
/* Create a custom checkbox */
.checkmark {position: absolute;top: 0;left: 10px;height: 19px;width: 19px;background-color: #fff;border-radius: 3px;border: 1px solid #ccc;}
.checkmark_small {position: absolute;top: 2px;left: 10px;height: 14px;width: 14px;background-color: #fff;border-radius: 3px;border: 1px solid #ccc;}
/* On mouse-over, add a grey background color */
.container-filter:hover input~.checkmark,.container-filter:hover input~.checkmark_small, .container-filter-sub:hover input~.checkmark,.container-filter-sub:hover input~.checkmark_small {background-color: #fff;}
/* When the checkbox is checked, add a blue background */
.container-filter input:checked~.checkmark,.container-filter input:checked~.checkmark_small, .container-filter-sub input:checked~.checkmark,.container-filter-sub input:checked~.checkmark_small {background-color: #0FB0F8;border: 0;}
/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after,.checkmark_small:after {content: "";position: absolute;display: none;}
/* Show the checkmark when checked */
.container-filter input:checked~.checkmark:after,.container-filter input:checked~.checkmark_small:after,.container-filter-sub input:checked~.checkmark:after,.container-filter-sub input:checked~.checkmark_small:after {display: block;}
/* Style the checkmark/indicator */
.container-filter .checkmark:after, .container-filter-sub .checkmark:after {left: 6px;top: 1px;width: 7px;height: 14px;border: solid white;border-width: 0 3px 3px 0;-webkit-transform: rotate(45deg);-ms-transform: rotate(45deg);transform: rotate(45deg);}
.container-filter .checkmark_small:after, .container-filter-sub .checkmark_small:after {left: 4px;top: 1px;width: 6px;height: 11px;border: solid white;border-width: 0 3px 3px 0;-webkit-transform: rotate(45deg);-ms-transform: rotate(45deg);transform: rotate(45deg);}
.container-filter-sub .checkmark{top:9px;left: 32px;}
.container-filter-sub .checkbox_filter{width: 19px; height:18px; z-index: 1001;}

.edit_worksheet_name{border-radius: 4px; border:1px solid #c1c1c1}
.top-preview-question div{display: block;}

.btn-tree-dot{border-radius: 50%; position: relative;margin:0 0 0 1em;background: white !important;border: none;font-size: .875rem;font-weight: 400;padding: 0px;box-shadow: 0px 5px 10px rgb(11 31 132 / 10%);}
.btn-tree-dot .fa-ellipsis-h{color: #312675;vertical-align: middle;padding: 8px;}
.drop-left{right: 0; left: auto;}
.icon-adapt{background: url('../img/icon_adaptive.png') no-repeat center; width: 46px;}

/* RESPONSIVE SIDE */
@media screen and (max-width:767px) {
    .searchxt input{width: 140px;}
    .table.xt .bluext.squarext{margin-bottom: 10px;}
}

.walking{position: relative;}
.walking span {background: #fff1da;color: #222;font-size: 14px;position:  absolute;bottom: 0;left: -37px;padding: 5px 7px;visibility: visible;opacity: 0;-webkit-transition: all .4s;-moz-transition: all .4s;transition: all .4s;white-space:nowrap;width: 125px;border-radius: 4px;}
.walking span:before {content: '';border-left: 5px solid transparent;border-right: 5px solid transparent;border-top: 5px solid #fff1da;position: absolute;bottom: -5px;left: 61px;}
.walking:hover span {bottom: 40px;visibility: visible;opacity: 1;} 

@media screen and (max-width:360px) {
  .searchxt button{padding:12px 10px 12px 10px}
  .searchxt input{width: 110px;}
}