.topbar {
  background-color: #6777ef;
      position: sticky;
   top: 0;
}
.react-sweet-progress-symbol {

   font-weight: 400 !important;
   color: #212529 !important;
}

a.sidebar-brand {
background-color: #111112 !important;
       padding-left: 0px !important;
} 
.view-dd {
   font-size: 13px !important;
   position: relative !important;
   top: 24px !important;
   border-radius: 0;
   color: #fff !important;
   width: 100%;
   background-color: #6777ef !important;
   padding: .375rem .75rem !important;
   line-height: 1.5 !important;
   border: 1px solid transparent !important;
   text-align: center !important;
   vertical-align: middle  !important;
   display: inline-block !important;
   font-weight: 400 !important;
} 
a.view-dd i {
 font-size: 12px !important;
}
ul
{
   list-style-type: none !important;
}
.sidebar-light hr.sidebar-divider {
  border-top: 1px solid #2e2e2e;
} 
img.img-profile.rounded-circle {
   border: 0px !important;
}
.col-auto.icon-4 i {
   color: #fecb32 !important;
}
.col-auto.icon-3 i {
   color: #6777ef !important;
}
.sidebar {
 width: 20rem!important;
 background-color: #111112 !important;
 height: 100%;
 z-index: 1;
 top: 0;
 left: 0;
 height: 500px;
 overflow: auto;
 font-size: 10px;
 height: 200pxpx !important;
 overflow-x: hidden;
 font-family: "sans-serif" !important;
 transition: 0.5s;
} 

.sidebar a {
 text-decoration: none;
 font-size: 10px;
 color: #f1f1f1;
 font-family: "sans-serif" !important;
 display: block;
 transition: 0.3s;

}
.sidebar a:hover {
 color: #6777ef ;
 font-size: 10px;
 font-family: "sans-serif" !important;
} 
/* .active{
 color: #6777ef !important;
} */

img.logo-2 {
   display: none;
}
.toggled img.logo-1
{
 display: none;
}
.toggled img.logo-2
{
 display: block !important;
 position: relative;
 left: 30px;
}


.sidebar .nav-item .nav-link {
   width: 14rem;
   color: #e1e1e1;
    margin-left: 20px;
   margin-right: 20px;
   margin-top: 10px;
   border-radius: 6px;
   padding-top: 10px;
   padding-bottom: 10px;
   margin-bottom: 10px; 
}

.sidebar-light .nav-item.active .nav-link {
        color: #6777ef;
       font-weight: 300;
}

.sidebar-brand-icon {
 position: relative;
 right: 15px;
}
button#sidebarToggleTop i {
   color: #fff;
   font-size: 22px !important;
}
button#sidebarToggleTop:hover {
   color: #000;
   font-size: 22px !important;
}
.topbar #sidebarToggleTop:hover {
 background-color: transparent !important;
   padding: 4px !important;
}
.topbar #sidebarToggleTop {
   padding: 4px !important;
   margin: 0px !important;
}

.sidebar-light .nav-item .nav-link:active, .sidebar-light .nav-item .nav-link:focus, .sidebar-light .nav-item .nav-link:hover {
       color: #6777ef;
      background-color: transparent;
}
div#example_filter input {
   border: 1px solid #e1d9d9;
}
div#example_filter {
   display: inline-block;
   float: right;
} 
div#example_length {
   display: inline-block;
}

.sidebar .nav-item .nav-link span {

   font-size: 14px;

}
.topbar.navbar-light .navbar-nav .nav-item .nav-link {
      color: #fff;

}

.main-body {
   padding: 15px;
}
.profile-img img {
   width: 90px;
}
.profile-img h4 {
   font-size: 17px;
}
.profile-img p {
   font-size: 14px;
   margin-bottom: 10px !important;
}
.card-body.card-info hr {
   margin: 7px !important;
}
.card-info p {
   margin: 0px !important;
   font-size: 14px;
}
.card-info .row {
   border-bottom: 1px solid #f2efef;
   padding-bottom: 12px;
   padding-top: 12px;
}
.card-info span {
   color: #000;
}

ul.ul-ai li {
   font-size: 14px;
   line-height: 27px;
}
ul.ul-ai {
   padding-left: 0px !important;
}
.card.card-2 {
   padding: 20px;
}
ul.ul-ai li span {
   color: #000;
   padding-right: 6px;
}
h3.h3-title {
   font-size: 16px;
   color: #000;
   font-weight: 600;
   padding-bottom: 10px;
}
.card-body.profile-img .btn {
   font-size: 14px;
   font-size: 14px;
   background-color: #6777ef !important;
   border: 0px !important;
}

table#example th {
   font-size: 13px !important;
   padding: 10px !important;
}

table#example td {
   font-size: 14px;
   padding: 10px !important;
}
thead.thead-light th {
      font-size: 14px;
   padding: 15px;
   color: #fff;
 
}
thead.tb-header th {
   color: #fff;
}
table.table.table-interview td {
   font-size: 14px;
   padding: 12px;
}

table.table.table-interview th {
   font-size: 14px;
   padding: 15px;
}
.btn.btn-sm.btn-primary {
   background-color: #6777ef !important;
   border: 0px !important;
}
table.table.table-interview p {
   margin: 0px !important;
}
.sidebar-light .nav-item .nav-link i {
   color: #fecb32;
}
thead.tb-header {
   background-color: #111112;
}
td.input-text {
   width: 170px;
}
td.input-text input {
   height: 30px;
       background-color: #f4f6f8;
}
td.input-text textarea
{
background-color: #f4f6f8;
}

td.input-text select {
   height: 30px;
       background-color: #f4f6f8;
       font-size: 13px;
}

@-webkit-keyframes animate-width {
 0% {
   width: 0;
 }
 100% {
   visibility: visible;
 }
}
@-moz-keyframes animate-width {
 0% {
   width: 0;
 }
 100% {
   visibility: visible;
 }
}
@keyframes animate-width {
 0% {
   width: 0;
 }
 100% {
   visibility: visible;
 }
}
@-webkit-keyframes animate-height {
 0% {
   height: 0;
 }
 100% {
   visibility: visible;
 }
}
@-moz-keyframes animate-height {
 0% {
   height: 0;
 }
 100% {
   visibility: visible;
 }
}
@keyframes animate-height {
 0% {
   height: 0;
 }
 100% {
   visibility: visible;
 }
}

#bar-chart {
 height: 380px;
 width: 75%;
 position: relative;
 margin: 50px auto 0;
}
#bar-chart * {
 box-sizing: border-box;
}
#bar-chart .graph {
 height: 283px;
 position: relative; 
}
#bar-chart .bars {
 height: 253px;
 padding: 0 2%;
 position: absolute;
 width: 100%;
 z-index: 10;
}
#bar-chart .bar-group {
 display: block;
 float: left;
 height: 100%;
 position: relative;
 width: 12%;
 margin-right: 10%;
}
#bar-chart .bar-group:last-child {
 margin-right: 0;
}
#bar-chart .bar-group .bar {
 visibility: hidden;
 height: 0;
 -webkit-animation: animate-height;
 -moz-animation: animate-height;
 animation: animate-height;
 animation-timing-function: cubic-bezier(0.35, 0.95, 0.67, 0.99);
 -webkit-animation-timing-function: cubic-bezier(0.35, 0.95, 0.67, 0.99);
 -moz-animation-timing-function: cubic-bezier(0.35, 0.95, 0.67, 0.99);
 animation-duration: 0.4s;
 -webkit-animation-duration: 0.4s;
 -moz-animation-duration: 0.4s;
 animation-fill-mode: forwards;
 -webkit-animation-fill-mode: forwards;
 box-shadow: 1px 0 2px rgba(0, 0, 0, 0.15);
 border-radius: 3px 3px 0 0;
 bottom: 0;
 cursor: pointer;
 height: 0;
 position: absolute;
 text-align: center;
 width: 25%;
}
#bar-chart .bar-group .bar:nth-child(2) {
 left: 35%;
}
#bar-chart .bar-group .bar:nth-child(3) {
 left: 70%;
}
#bar-chart .bar-group .bar span {
 display: none;
}
#bar-chart .bar-group .bar-1 {
 animation-delay: 0.3s;
 -webkit-animation-delay: 0.3s;
}
#bar-chart .bar-group .bar-2 {
 animation-delay: 0.4s;
 -webkit-animation-delay: 0.4s;
}
#bar-chart .bar-group .bar-3 {
 animation-delay: 0.5s;
 -webkit-animation-delay: 0.5s;
}
#bar-chart .bar-group .bar-4 {
 animation-delay: 0.6s;
 -webkit-animation-delay: 0.6s;
}
#bar-chart .bar-group .bar-5 {
 animation-delay: 0.7s;
 -webkit-animation-delay: 0.7s;
}
#bar-chart .bar-group .bar-6 {
 animation-delay: 0.8s;
 -webkit-animation-delay: 0.8s;
}
#bar-chart .bar-group .bar-7 {
 animation-delay: 0.9s;
 -webkit-animation-delay: 0.9s;
}
#bar-chart .bar-group .bar-8 {
 animation-delay: 1s;
 -webkit-animation-delay: 1s;
}
#bar-chart .bar-group .bar-9 {
 animation-delay: 1.1s;
 -webkit-animation-delay: 1.1s;
}
#bar-chart .bar-group .bar-10 {
 animation-delay: 1.2s;
 -webkit-animation-delay: 1.2s;
}
#bar-chart .bar-group .bar-11 {
 animation-delay: 1.3s;
 -webkit-animation-delay: 1.3s;
}
#bar-chart .bar-group .bar-12 {
 animation-delay: 1.4s;
 -webkit-animation-delay: 1.4s;
}
#bar-chart .bar-group .bar-13 {
 animation-delay: 1.5s;
 -webkit-animation-delay: 1.5s;
}
#bar-chart .bar-group .bar-14 {
 animation-delay: 1.6s;
 -webkit-animation-delay: 1.6s;
}
#bar-chart .bar-group .bar-15 {
 animation-delay: 1.7s;
 -webkit-animation-delay: 1.7s;
}
#bar-chart ul {
 list-style: none;
 margin: 0;
 padding: 0;
}
#bar-chart .x-axis {
 bottom: 0;
 position: absolute;
 text-align: center;
 width: 100%;
}
#bar-chart .x-axis li {
 float: left;
 margin-right: 10.5%;
 font-size: 11px;
 width: 11.5%;
}
#bar-chart .x-axis li:last-child {
 margin-right: 0;
}
#bar-chart .y-axis {
 position: absolute;
 text-align: right;
 width: 100%;
}
#bar-chart .y-axis li {
 border-top: 1px solid #4e5464;
 display: block;
 height: 63.25px;
 width: 100%;
}
#bar-chart .y-axis li span {
 display: block;
 font-size: 11px;
 margin: -10px 0 0 -60px;
 padding: 0 10px;
 width: 40px;
}
#bar-chart .stat-1 {
 background-image: -webkit-linear-gradient(left, #ff4500 0%, #ff4500 47%, #cf3a02 50%, #cf3a02 100%);
 background-image: linear-gradient(to right, #ff4500 0%, #ff4500 47%, #cf3a02 50%, #cf3a02 100%);
}
#bar-chart .stat-2 {
 background-image: -webkit-linear-gradient(left, #b8f123 0%, #b8f123 47%, #79a602 50%, #79a602 100%);
 background-image: linear-gradient(to right, #b8f123 0%, #b8f123 47%, #79a602 50%, #79a602 100%);
}
#bar-chart .stat-3 {
 background-image: -webkit-linear-gradient(left, #00c5ff 0%, #00c5ff 47%, #0383a9 50%, #0383a9 100%);
 background-image: linear-gradient(to right, #00c5ff 0%, #00c5ff 47%, #0383a9 50%, #0383a9 100%);
}
.box-title {
   padding: 25px;
   border: 1px solid #ddd;
   border-radius: 6px;
       margin-bottom: 20px;
}
.box-title h3 {
 font-size: 16px;
   color: #000;
   padding-bottom: 12px;
   font-weight: 600;
}
.box-title .row {
   margin-bottom: 12px;
}
.box-title label {
   color: #000;
   font-size: 14px;
}
.box-title input {
   height: 29px;
}
.profile-edit {
   margin: 18px;
}
.box-title span {
   font-size: 14px;
}


.video-play {
   margin-top: 25px;
}


.user-progress .progress-bar {
 width: 100%;
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(20px, 1fr));
 background-color: #fff;
}

.user-progress .progress-step {
 text-align: center;
 position: relative;
     z-index: 1; 
}
.user-progress .progress-step:before, .progress-step:after {
 background-color: #6777ef;
 content: "";
 height: 2px;
 position: absolute;
 z-index: 10;
 top: 18px;
}
.user-progress .progress-step:after {
 left: 50%;
 width: 100%;
}
.user-progress .progress-step:last-of-type.is-active:after {
 background-color: #c0a359;
}
@media screen and (min-width: 640px) {
 .user-progress .progress-step:first-of-type:before {
   right: 50%;
   width: 50%;
 }
}
@media screen and (max-width: 640px) {
 .user-progress .progress-step:first-of-type:before, .progress-step:last-of-type:after {
   background-color: white !important;
 }
}

.user-progress .progress-step:last-of-type:after {
 left: 50%;
 width: 50%;
}
.user-progress .progress-step .step-count {
      background-color: #6777ef;
   height: 35px;
   width: 35px;
   margin: 0 auto;
   border-radius: 100px;
   color: white;
   line-height: 30px;
   z-index: 100; 
   border: 4px solid #ececec;
   font-size: 0.8rem;
   font-weight: 500;
   z-index: 100;
   position: relative;
}
.user-progress .progress-step.is-active .step-description {
 font-weight: 500;
 color: #878585;
}
.user-progress .progress-step.is-active:after {
 background-color: #dad6ce;
}
.user-progress .progress-step.is-active ~ .progress-step .step-count {
 background-color: #dad6ce;
}
.user-progress .progress-step.is-active ~ .progress-step:after {
 background-color: #dad6ce;
}

.user-progress .step-description {
 font-size: 0.8rem;
   color: #878585;
}
thead.tb-header th {
   padding-top: 10px !important;
   padding-bottom: 10px !important;
} 

i.fas.fa-square.green {
   color: #79a602;
}
i.fas.fa-square.blue {
   color: #0383a9;
}
ul.ul-color li {
   display: inline-block; 
   font-size: 13px;
   margin-right: 15px;
   margin-bottom: 10px;
}
ul.ul-color {
   padding-left: 0px !important;
}
i.fas.fa-square.red {
   color: #cf3a02;
}

.filter-div button {
   background-color: #fff;
}

.btn-apply {
 width: 100%;
 border-color: #e3eaef !important;
 box-shadow: 0 .125rem .25rem 0 rgba(58,59,69,.2)!important;
 border-radius: .25rem !important;
 padding: 17px 40px 16px 41px !important;
 border-radius: 0px !important;
 background-color: #6777ef !important;
 border: 1px solid #6777ef !important;
 font-size: 1rem !important;
 font-weight: 400 !important;
 color: #fff !important;
 line-height: 4px !important;
 margin-bottom: 20px !important;
}

.input-icon input[type="text"] {
 padding-left: 34px;
}

.input-icon {
 position: relative;
}
form.slider-form input {
   border-radius: 0px !important;
   border: 0px;
 
   height: 52px;
}

.input-icon i {
 position: absolute;
   left: 4px;
   top: 4px;
 padding: 9px 8px;
    color: #6777ef;
 transition: 0.3s;
 font-size: 15px;
}

.input-icon input {
   background-color: #fff;
   border-color: #e3eaef;
   -webkit-box-shadow: 0 .125rem .25rem 0 rgba(58,59,69,.2)!important;
   box-shadow: 0 .125rem .25rem 0 rgba(58,59,69,.2)!important;
   border-radius: .25rem;
   height: 40px;
       font-size: 14px;
}

.ui.icon.input input {
   padding-right: 2.67142857em!important;
   background-color: #fff;
   border-color: #e3eaef;
   -webkit-box-shadow: 0 .125rem .25rem 0 rgba(58,59,69,.2)!important;
   box-shadow: 0 .125rem .25rem 0 rgba(58,59,69,.2)!important;
   border-radius: .25rem;
   height: 40px;
   font-size: 14px;
   width: 100% !important;
}

ul.nav.nav-tabs.tab-ttt li a {
   font-size: 14px;
   padding: 10px;
}

ul.list-item {
   padding-left: 0px !important;
}
.img-user img {
   border-radius: 100px;
}
p.num {
   font-size: 13px;
       font-size: 13px;
   margin: 0px !important;
   margin-top: 10px !important;
}
.form-check {
   margin-bottom: 6px;
}




/*score progress css code....*/

ul.ul-score {
 padding-left: 0px !important;
}
ul.ul-score li {
 float: left;
 width: 25%;
}
ul.ul-score li span {
font-size: 11px;
 color: #757575;
 font-weight: 600;
}
li.mark-label span {
 font-size: 13px !important;
 color: #6777ef !important;
 font-weight: 600 !important;
}
li.max span {
 float: right;
}
label.label-bar {
 font-size: 13px;
 color: #787878;
 font-weight: 600;
 margin-bottom: 2px;
}
.user-score {
 margin-bottom: 0px;
 border-bottom: 1;
box-shadow: 0px 2px 4px rgb(221 221 221 / 47%);
 clear: both;
 float: left;
 width: 100%; 
 padding: 10px;
}

.score-tech {
 margin-bottom: 10px;
 border-bottom: 1px solid #ddd;
}
li.mark-label {
 position: relative !important;
}
li.mark-label {
 position: absolute;
 top: -35px;
 left: 155px;
}
li.mark-label span {
 position: relative;
 right: 54px;
}
li.mark-label:before {
 content: "";
 position: absolute;
 left: 7px;
 width: 2px;
 height: 13px;
 background-color: #6777ef;
 top: 19px;
} 

li.avg {
 position: relative !important;
 top: -35px;
} 
li.avg:before {
 content: "";
 position: absolute;
 left: 7px;
 width: 2px;
 height: 13px;
 background-color: #6777ef;
 top: 19px;
} 


ul.ul-score.ul-bar li {
 width: 33%;
}
/*score progress css code....*/

div#wrapper {
   position: fixed;
   width:100%;
}
.card {
 height: auto !important;
}
#wrapper #content-wrapper {
   background-color: #fafdfb;
   width: 100%;
   overflow: scroll;
   height: 100vh;
   overflow-x: hidden;
}

/* =============Footer Css============ */
/* .footer{
 background-color: #fff;
 width: 100vw;
 height:5rem;
 margin-top: 10px;
 display: block;
}

.footer p{
 color: #757575;
 text-align:center !important;
 line-height: 5rem;
 font-size: 15px;

} */

/* Copy Right Footer */
.footer-copyright 
{ 
 display: block;
 height:4rem;
}
.footer-copyright .logo {    display: inherit;}
.footer-copyright nav {    float: right;    margin-top: 5px;}
.footer-copyright nav ul {  list-style: none; margin: 0;  padding: 0;}
.footer-copyright nav ul li { border-left: 1px solid #505050; display: inline-block;  line-height: 12px;  margin: 0;  padding: 0 8px;}
.footer-copyright nav ul li a{  color: #969696;}
.footer-copyright nav ul li:first-child { border: medium none;  padding-left: 0;}
.footer-copyright p 
{ color: #757575; margin: 2px 0 0;text-align:center !important;
 line-height: 4rem;
 font-size: 12px;
}
footer.main-footer{
 box-shadow: 0 0.15rem 1.75rem 0 rgb(58 59 69 / 15%);
}
.bg-white{
 background-color: #fff!important;
}


@media(max-width: 480px)
{
   .sidebar {
   width: 0rem!important;
}
}






/* @media  screen and (max-width: 100%) {
     .fix{
       overflow-x: scroll;
     }

     .fix::-webkit-scrollbar{
       width: 5px;
       height: 6px;
     }

     .fix::-webkit-scrollbar-thumb{
       background-color: #888;
     }
     .fix::-webkit-scrollbar-track{
       background-color: #f1f1f1;
     }
} */