body { background-color: #fdfdfd;/* font-family: 'Montserrat', sans-serif;*/  font-family: 'Quicksand', sans-serif;}
a {color: #1a1818;  text-decoration: underline;}
a:hover {color: #ff5b57; }
a:focus {color: #ff5b57;  }
.logo {display:block; text-align:center;}
.register.register-with-news-feed .register-container { margin: 0 auto;}
.login.login-v1 .login-container .login-body { background-color: #d32027;}
.login.login-v1 .login-container .login-body .login-content .form-control { background: #fff; color: #000;}
.login.login-v1 .login-container .login-body .login-content .form-control:focus {  box-shadow: 0 0 0 3px #fff;}
.login.login-v1 .login-container .login-body .login-content { color: #393939 !important;}
.login.login-v1 .login-container .login-body .login-content .form-check-input { background-color: #fff;  border-color: transparent;}
.form-check-label { color: #fff;}
.form-check-input:focus {  border-color: #67abe9;  outline: 0;  box-shadow: 0 0 0 .25rem rgba(226, 52, 52, 0.25);}
.pace .pace-activity {  border-top-color: #d32027;  border-left-color: #d32027; display: none;}
.pace .pace-progress { background-color: #d32027;  transition: all .2s linear;  display: none;}

.login.login-v1 .login-container .login-body .login-content { color: #f1f2f2;}
.login.login-with-news-feed, .register.register-with-news-feed { background-image:url(../images/login-bg-15.jpg); background-repeat:no-repeat; background-size:cover;}
.form-check-input:checked { background-color: #ff5b57;  border-color: #ff5b57;}
.login.login-v1 .login-container .login-body .login-content .form-check-input:checked { background-color: var(--bs-danger);}
.register.register-with-news-feed .register-container { padding: 20px 50px 50px 50px;}


.register-content .form-check-label{color: rgba(var(--app-component-color-rgb),.65);}

.app-header .navbar-nav .navbar-item .navbar-link .badge {  background-color:#ff5b57;}
.app-header .navbar-nav .navbar-item .navbar-link .badge { color: #fff !important;}
.app-sidebar .menu .menu-profile .menu-profile-cover { background-image: none;}
.menu{color:#000;  margin: 18px 0px;}
.app-sidebar .menu .menu-profile { color:#000;  background-color: #fff;}
.app-sidebar .menu .menu-profile .menu-profile-cover.with-shadow::before {  background-color: #fff;}
.app-sidebar .menu .menu-profile .menu-profile-link { color:#000;}
.app-sidebar .menu .menu-profile .menu-profile-image { width: 0px;  height: 0px;  margin-bottom: 0px;}
.app-sidebar .menu .menu-item .menu-link { color:#000;}
.app-sidebar .menu .menu-item .menu-link:focus, .app-sidebar .menu .menu-item .menu-link:hover {color:#ff5b57;}
.app-sidebar .menu .menu-item.active > .menu-link {  color: #fff;  background-color: #ff5b57;}
.app-sidebar .menu .menu-item.active > .menu-link .menu-icon { color: #fff;}

.app-sidebar {  background-color: #f9f8f9; font-size: 14px; font-weight: 500;}
.app-loader { background-color: #fbfbfb;}
.table {   color: #fff;  font-size: 14px;  border: 0px;}

.table > :not(caption) > * > * { border-bottom-width: 0px;}
.color_table{color: #55b0a9}
.red_table{color: #c43855}
.text-black-500 { line-height: 13px;}

.navbar-nav .dropdown-menu { position: absolute;}
.dropdown-menu { position: absolute !important;}
.dropdown:hover>.dropdown-menu { display: block; }
.app-header .navbar-nav .navbar-item.dropdown .dropdown-menu { margin: 0;  top: 50px !important; }
 
.btn-darkRed{background-color: #d32027; color: #fff; border-color: #d32027;  display: block;}
.btn-darkRed:hover{background-color: #a80f0b; color: #fff; border-color: #a80f0b; box-shadow: 0 0 0 .25rem rgba(255,116,112,.5); display: block;}
.btn-darkRed:focus{background-color: #a80f0b; color: #fff; border-color: #a80f0b; box-shadow: 0 0 0 .25rem rgba(255,116,112,.5); display: block;}

.btn-dangers{background-color: #d32027; color: #fff; border-color: #d32027; }
.btn-dangers:hover{background-color: #a80f0b; color: #fff; border-color: #a80f0b; box-shadow: 0 0 0 .25rem rgba(255,116,112,.5); }
.btn-dangers:focus{background-color: #a80f0b; color: #fff; border-color: #a80f0b; box-shadow: 0 0 0 .25rem rgba(255,116,112,.5);}

.btn-white { background-color: #fff; color: #d32027; border-color: #d32027;}
.btn-white:hover{background-color: #fff; color: #a2191e; border-color: #a2191e; box-shadow: 0 0 0 .25rem rgba(255,116,112,.5); }
.btn-white:focus{background-color: #fff; color: #a2191e; border-color: #a2191e; box-shadow: 0 0 0 .2rem rgba(255,116,112,.1); }

.button_base{ position: relative;}
.icon_right{ font-size: 30px; position: absolute; top: 1px; right: 18px;}
.icon_rights{ font-size: 30px; position: absolute; top: 2px; right: 18px;}

.radio_base{  background-color: #f3f3f1;}
.checkbox-round {  width: 1.4em;  height: 1.4em;  background-color: #fff;  border-radius:5px;  vertical-align: middle;  border: 1px solid #AAA;  appearance: none;  -webkit-appearance: none;  outline: none;  cursor: pointer;  position: relative;  margin-right: 5px;}
.checkbox-round:checked {  background-color: #CA3C1A;  opacity: 1;  border: 1px solid #CA3C1A;}
input[type="checkbox"], input[type="radio"] {  box-sizing: border-box;  padding: 0;}
.checkbox-round::after {  border: 2px solid #fff;  border-top: none;  border-right: none;  content: "";  height: 8px;  left: 6px;  opacity: 2;  position: absolute;  top: 7px;  transform: rotate(-45deg);  width: 14px;}

.result_holder{ }
.result_holder p {font-size: 16px;  font-weight: 500;}
.result_holder ul li {font-size: 16px;  font-weight: 500;}
.result_base #pie-chart{ width:50%; margin: 0 auto;}


.check_base{}
.check_btn{ position: relative;}
.check_btn .checkbox-btn {  width: 1.2em;  height: 1.2em;  background-color: #fff;  border-radius:30px; vertical-align: middle;  appearance: none;  -webkit-appearance: none;  outline: none;  cursor: pointer;  position: absolute; right:15px; }
.check_btn .checkbox-btn:checked {  background-color: #CA3C1A;  opacity: 1;  border: 1px solid #CA3C1A;}
.check_btn .checkbox-btn::after {  border: 2px solid #fff;  border-top: none;  border-right: none;  content: ""; content: "";
  height: 6px;
  left: 3px;
  opacity: 2;
  position: absolute;
  top: 3px;
  transform: rotate(-45deg);
  width: 9px;}


.check_modude{}
.check_pre{ position: relative;}
.check_pre .checkPre-btn {  width: 1.4em;  height: 1.4em;  background-color: #fff;  border-radius:30px; vertical-align: middle;  appearance: none;  -webkit-appearance: none;  outline: none;  cursor: pointer;  position: absolute; right:15px; }
.check_pre .checkPre-btn:checked {  background-color: #CA3C1A;  opacity: 1;  border: 1px solid #CA3C1A;}
.check_pre .checkPre-btn::after {  border: 2px solid #fff;  border-top: none;  border-right: none;  content: ""; height: 6px; left: 5px; opacity: 2; position: absolute;top: 7px; transform: rotate(-45deg); width: 10px;}

.resuls_page{}
.resuls_page .table{  font-weight: 500 !important;}
.resuls_page .table thead th{ color: #515151 !important; font-weight: 700 !important; font-size: 16px;}
.resuls_page .table tbody td{ color: #464646  !important; font-weight: 500 !important; font-size: 15px;}
.resuls_page .table > :not(caption) > * > * { padding: .8rem .8rem;}
.result_list{ background-image: url('../images/result_big.png'); background-repeat: no-repeat; background-size: 45%; min-height: 100vh; background-position: center center;}

.page-header{ color: #292929;}


.cssProgress { width: 50%;  margin-bottom:0px; margin:0 auto; }
.cssProgress .progress2{ position: relative;  overflow: hidden;  width: 99.1%; }
.cssProgress .cssProgress-bar {display: block; float: left;  width: 0%;  height: 100%;  background: #3798d9;  box-shadow: inset 0px -1px 2px rgba(0, 0, 0, 0.1);
  -webkit-transition: width 0.8s ease-in-out;  transition: width 0.8s ease-in-out;}


  
  
  
.cssProgress .cssProgress-label {  position: absolute;  overflow: hidden;  left: 0px;  right: 0px;  color: rgba(0, 0, 0, 0.6);  font-size: 0.7em;  text-align: center;
  text-shadow: 0px 1px rgba(0, 0, 0, 0.3);}
  
.cssProgress .cssProgress-danger { background-color: #ef5350 !important;}
.cssProgress .cssProgress-right { float: right !important;}
.cssProgress .cssProgress-label-left { margin-left: 10px; text-align: left !important;}
.cssProgress .cssProgress-label-right { margin-right: 10px; text-align: right !important;}
.cssProgress .cssProgress-label2 { display: block;  margin: 2px 0; padding: 0 8px;  font-size: 0.8em;}
.cssProgress .cssProgress-label2.cssProgress-label2-right {text-align: right;}
.cssProgress .cssProgress-label2.cssProgress-label2-center {text-align: left;}
.cssProgress .cssProgress-stripes, .cssProgress .cssProgress-active,
.cssProgress .cssProgress-active-right { background-image: -webkit-linear-gradient(135deg, rgba(255, 255, 255, 0.125) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.125) 50%, rgba(255, 255, 255, 0.125) 75%, transparent 75%, transparent);
  background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.125) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.125) 50%, rgba(255, 255, 255, 0.125) 75%, transparent 75%, transparent);  background-size: 35px 35px;}
.cssProgress .cssProgress-active { -webkit-animation: cssProgressActive 2s linear infinite;  -ms-animation: cssProgressActive 2s linear infinite;  animation: cssProgressActive 2s linear infinite;}
.cssProgress .cssProgress-active-right {-webkit-animation: cssProgressActiveRight 2s linear infinite; -ms-animation: cssProgressActiveRight 2s linear infinite; animation:cssProgressActiveRight 2s linear infinite;}
@-webkit-keyframes cssProgressActive {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 35px 35px;
  }
}
@-ms-keyframes cssProgressActive {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 35px 35px;
  }
}
@keyframes cssProgressActive {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 35px 35px;
  }
}
@-webkit-keyframes cssProgressActiveRight {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -35px -35px;
  }
}
@-ms-keyframes cssProgressActiveRight {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -35px -35px;
  }
}
@keyframes cssProgressActiveRight {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -35px -35px;
  }
}
.progress2 { background-color: #EEE;  border-radius: 0px;  box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.2);}
.progress2 .cssProgress-bar { height: 80px;  border-radius: 0px;}
.progress2 .cssProgress-label {  line-height: 18px; position: relative; font-size: 18px; }
.label_box { position: relative; font-size: 13px; padding: 0px 0px 5px;  margin: 0px; line-height: 13px; background-color: #fff; width:100%; margin:0 auto; }
.label_box .beginer{ width: 49%; float: left; font-weight:500; }
.label_box .beginer img{ width:100%; display: block; }
.label_box .beginer p{margin-bottom:0px; font-size:12px; display: block; text-align: center; }

.label_box .intermediate{ width: 30%; float: left; font-weight:500;}
.label_box .intermediate img{ width:100%; display: block; }
.label_box .intermediate p{margin-bottom:0px; font-size:12px; display: block; text-align: center; }

.label_box .elite{ width: 20%; float: left; font-weight:500;}
.label_box .elite img{width:100%; display: block; }
.label_box .elite p{margin-bottom:0px; font-size:12px; display: block; text-align: center; }

.result_base{width: 100%; margin: 0 auto;}

.beginer_label{
  padding: 20px 42px;
}

.stacked-bar-graph {
	 width: 100%;
	 height: 38px;
	 color: #414042;
   margin: 0 auto;
}
 .stacked-bar-graph span {
	 display: inline-block;
	 height: 100%;
	 box-sizing: border-box;
	 float: left;
	 font-weight: bold;
	 font-family: arial, sans-serif;
	 padding: 10px;
}
 .stacked-bar-graph .bar-1 {
	 background: #f7b334;
}
 .stacked-bar-graph .bar-2 {
	 background: #a7a9ac;
}
 .stacked-bar-graph .bar-3 {
	 background: #d57e00;
}
 
.progress{
  width: 50%;
  margin: 0 auto;
  height: 50px;
}
.progress-bar {
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  color: #000;
  text-align: center;
  white-space: nowrap;
  background-color: #348fe2;
  transition: width .6s ease;
  font-size: 15px;
  font-weight: 500;
}

.bar-lebel2{ display: none;}
.bar-lebel{ display: block;}

@media (max-width: 1590.98px){
.cssProgress { width: 50%;} 
.progress2 .cssProgress-bar { height: 42px; border-radius: 0px;}
}


@media (max-width: 1210.98px){
.cssProgress { width: 75%;} 
.progress2 .cssProgress-bar { height: 42px; border-radius: 0px;}
}
@media (max-width: 767.98px){
.login.login-v1 {  background: #1a1a1a;}
.login.login-v1 .login-container .login-body { padding: 30px;}
.progress2 .cssProgress-bar { height: 42px; border-radius: 0px;}
.cssProgress {  width: 100%;  margin-bottom: 0px;  margin: 0 auto;}
.label_box {font-size: 12px;}
}

@media (max-width:575.98px) {
.mb-20px { margin-bottom: 10px !important;}
.table { font-size: 13px;}
.cssProgress {  width: 100%;  margin-bottom: 0px;  margin: 0 auto;}
.label_box {font-size: 12px;}
.beginer_label { padding: 10px 0px;}
.progress2 .cssProgress-bar { height: 42px; border-radius: 0px;}
}


.form-select:focus {border-color: #b3b3b3; outline: 0; box-shadow: 0 0 0 .25rem rgba(52, 143, 226, 0);}
.form-control, .form-select { border-color: #b3b3b3;}

/*custom additions during coding */

.alert-dismissable .close, .alert-dismissible .close {

    position: relative;
    top: -2px;
   /* right: -21px;*/
    color: inherit;

}
.close {
	float: right;
	font-size: 21px;
	font-weight: bold;
	line-height: 1;
	color: #000;
	text-shadow: 0 1px 0 #fff;
	filter: alpha(opacity=20);
	opacity: .2;
}
.close:hover, .close:focus {
	color: #000;
	text-decoration: none;
	cursor: pointer;
	filter: alpha(opacity=50);
	opacity: .5;
}
button.close {
	-webkit-appearance: none;
	padding: 0;
	cursor: pointer;
	background: transparent;
	border: 0;
}

/*Pagination related*/
.pagination{ float: right;}
.pagination ul { padding: 0; margin: 0px; list-style-type: none; }
.pagination ul li { position: relative; display: inline-block; margin-left: -1px; line-height: 1.25; color: #060606;  background-color: #fff; border: 1px solid #dee2e6; font-size: 14px; }
.pagination ul li a { line-height: 1.25; color: #060606; text-decoration: none; padding: 8px 15px; display: inline-block; }
.pagination ul li a:hover { line-height: 1.25; color: #fff; text-decoration: none; padding: 8px 15px; display: inline-block; background-color: #c83d24; }
.pagination ul li.active a{ line-height: 1.25; color:#fff; text-decoration: none;display: inline-block; background-color: #c83d24; }


.date_submit{ padding: 7px 15px;  border: solid 1px #ff5b57;    border-radius: 6px; background-color: #ff5b57;  font-size: 15px; font-weight: 500; color: #fff;}
.date_submit:hover{ padding: 7px 15px;  border: solid 1px #ff5b57;    border-radius: 6px; background-color: #fff;  font-size: 15px; font-weight: 500; color: #ff5b57;}

/* Added by KM for multiple level dropdown   */

.multiselect-wrapper {        white-space: nowrap;}
.multiselect-wrapper .multiselect-input {        width: 100%;        padding-right: 50px;}
.multiselect-wrapper .multiselect-list {        z-index: 1;        position: absolute;        display: none;        background-color: white;        border: 1px solid #b3b3b3a6;        border-bottom-left-radius: 2px;        border-bottom-right-radius: 2px;        margin-top: -2px; font-weight: 600;}
.multiselect-wrapper .multiselect-list.active {        display: block;  font-size: 14px;}
.multiselect-wrapper .multiselect-list > span {font-weight: 600;  font-size: 14px;}
.multiselect-wrapper .multiselect-list .multiselect-checkbox {margin-right: 2px;  font-size: 14px; accent-color: #CA3C1A;}
hr {  margin: 0rem 0 !important;  color: #fff;  background-color: currentColor;  border: 0;  opacity: .4;}
.multiselect-wrapper .multiselect-list {padding: 5px;        min-width: 268px;}
.multiselect-wrapper ul {        list-style: none;        display: block;        position: relative;        padding: 0px;        margin: 0px;overflow-y: auto;        overflow-x: hidden; accent-color: #CA3C1A;}
.multiselect-wrapper ul li {padding-right: 20px; display: block; }
.multiselect-wrapper ul li:hover {background-color: #ff5b57; color: #fff;}
.multiselect-input-div input{        border: 1px solid #ababab;        background:#fff; margin:0;         padding: 8px; vertical-align:middle; font-size: 14px;  font-weight: 500;
 border-radius: 6px; outline: 0px;}
.multiselect-count {position: relative;        text-align: center;        border-radius: 2px;        display: inline-block !important;        padding: 2px 7px;        left: -45px;}
.multiselect-wrapper.disabled .multiselect-dropdown-arrow {        border-top: 5px solid lightgray;}
.multiselect-wrapper.disabled .multiselect-count {background-color: lightgray;}
.multiselect-dropdown-arrow {        width: 0;        height: 0;        border-left: 5px solid transparent;        border-right: 5px solid transparent;border-top: 5px solid black;        position: absolute;        line-height: 20px;        text-align: center;        display: inline-block !important;        margin-top: 17px;        margin-left: -42px;}



.worksheetTable .table {color: #000 !important; font-size: 14px; border: 1px;}


.worksheetTable .table {
  color: red;
  font-size: 14px;
}

.fa-cloud:hover{color: #ff5b57 !important; }

.progressBar{
  display: block;
  height: 1rem;
  overflow: hidden;
  font-size: .5625rem;
  background-color: var(--app-component-secondary-bg);
  border-radius: 4px;
  
}

.progressBar p{
  display:block !important;
  height: auto; 
  font-size:12px;
  
}