@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
:root {
  /* --bs-blue: #0165BB;*/
   --bs-darkblue: #0C1E5B;
   --bs-blue: #0165BB;
   --bs-warning: #ff8c00;
   --bs-secondary-rgb: 116, 115, 115;
   --bs-primary-rgb: 1, 101, 187;
   --bs-success-rgb: 0, 199, 44;
   --bs-darkblue-rgb: 12, 30, 91;
   --bs-warning-rgb: 255,140, 0;
   --bs-font-sans-serif: 'Poppins';
   --bs-body-font-size: 0.8rem;
   --bs-body-line-height: 22px;
   --bs-body-bg: #fff;
   --bs-breadcrumb-divider: "\f105";
   /*font-family: 'Poppins', sans-serif;*/
}
body{
   letter-spacing: 0.02em;
   font-family: 'Poppins';
   font-weight:normal;
   line-height: 1.6;
   font-size: 0.9rem;
}

.blink_me {
  animation: blinker 1s linear infinite;
}

@keyframes blinker {
  50% {
    opacity: 0;
  }
}


.w-20{
    width:20%;
}

#image-detail{
    position:fixed;
    width:25%;
}

.desc-items p{
    width:100%;
    line-height:5px;
}

.section-container {
   display: flex;
   height: 100vh;
 }


 .section-sidebar,
 .section-main {
   flex: 1 auto;
   overflow-y: scroll;
   overflow-x: hidden;
 }
 
/****** bootstrap overwritten *****/
.btn-primary, .btn-outline-primary:hover{
 background: var(--bs-blue);
 border-color: var(--bs-blue);
}
.btn-outline-primary {
   color: var(--bs-blue);
   border-color: var(--bs-blue);
}

.btn-outline-tertiary {
   color: #0165BB;
   border-color: #0165BB;
   border-radius: 50px !important;
   box-shadow: #000;
}

.btn-outline-tertiary:hover {
   background-color: #0165BB;
   color: #fff;
}
.btn-normalblue{
   background-color: #0165BB;
   color: #fff;
   border-radius: 50px !important;
}
.btn-normalblue:hover{
   background-color: #153df0;
   color: #fff;

}

.btn-darkblue{
 background: var(--bs-darkblue);
 border-color: var(--bs-darkblue);
 color: #FFF;
}
.btn-darkblue:hover{
 background: rgba(var(--bs-darkblue-rgb), 0.8);
 color: #FFF;
}
.btn-success{
 background: #198754 !important;
 border-color: #198754 !important;
 font-size: 16px;
 color: #fff;
}

.btn-outline-success{
 border-color: #00C72C !important;
}

.btn-outline-success:hover{
     background: #00C72C !important;
}

.btn-outline-warning{
   color: #ff8c00;
   border-color: #ff8c00;
}
.btn-outline-warning:hover{
   background-color: #ff8c00;
   border-color: #ff8c00;
}
.btn-outline-purple {
   color: #d407ff;
   border-color: #d407ff;
}
.text-purple{
   color: #d407ff;
}
.text-orange{
   color: #F67935;
}

.bg-purple{
   background-color: #d407ff !important;
}
.btn-outline-purple:hover,.btn-purple {
   color: #FFF;
   background-color: #d407ff;
   border-color: #d407ff;
}
.form-control, .form-select{
   font-size: 0.75rem;
}
.breadcrumb-item+.breadcrumb-item::before {
   font-family: var(--fa-style-family,"Font Awesome 6 Free");
   font-weight: var(--fa-style,900);
}
.form-control-search, .form-select-search{
   font-size: 0.9rem;
   line-height: 2;
   font-weight: normal;
}
.btn-outline-warning:hover{
   color: #FFF;
}
.text-success{
 color: #00C72C !important;
}
.form-label{
   font-weight: 400;
}
.small, small {
   font-size: .6rem;
}
.navbar{
   background-color: var(--bs-body-bg);   
}
.navbar-expand-lg .navbar-nav .nav-link{
   color: var(--bs-darkblue);
   padding-right: 1.5rem;
   padding-left: 1.5rem;
   font-weight: bold;
}
.navbar-expand-lg .navbar-nav .nav-link.active{
   background-color:#28ABE3;
   color: #fff;
   border-radius: 0.3rem;
}
.progress{
   height: 5px;
}
.progress.uploadProgress{
   height: 1rem;
}
.pointer-event-none {
   pointer-events: none;
}
.slider.slider-horizontal{
 width: 100%;
}
.btn-outline-info:hover{
 color: #fff;
}
.disabled, .cursor-not-allowed {
 cursor: not-allowed !important;
}
.cursor-pointer{
 cursor: pointer;
}

.fs-10{
   font-size: 12px;
}
.fs-7{
   font-size: 18px !important;
}
.fs-8{
   font-size:16px !important;
}
.fs-9{
   font-size: 14px;
}

.fs-11{
   font-size: 10px !important;
   line-height: 14px !important;
}
.fs-12, .btn-sm {
   font-size: 12px !important;
   line-height: 14px !important;
}
.fs-18 {
   font-size: 18px;
}
.fs-17 {
   font-size: 17px;
}

.w-5 {
    width: 5%!important;
}
.w-10 {
    width: 10%!important;
}

.w-15 {
    width: 15%!important;
}
.w-20 {
    width: 20%!important;
}

.btn.rounded-plane{
   border-radius: 0 !important;
}
.btn.rounded-normal,.product-wrap .btn {
   border-radius: 0.25rem ;
}
/********* loading **********/
.water{
   width: 112px;
   height: 112px;
   background-color: #0165bb;
   border-radius: 50%;
   position: relative;
   box-shadow: inset 0 0 30px 0 rgba(0,0,0,.5), 0 4px 10px 0 rgba(0,0,0,.5);
   --wlevel: defaultValue;
   overflow: hidden;
   transform: rotate(-90deg);
}
.water:before, .water:after{
   content:'';
   position: absolute;
   width: 112px;
   height: 112px;
   top: var(--wlevel);
   background-color: #fff;
}
.water:before{
   border-radius: 40%;
   background:rgba(255,255,255,.7);
   animation:wave 5s linear infinite;
}
.water:after{
   border-radius: 29%;
   background:rgba(255,255,255,.3);
   animation:wave 5s linear infinite;
}
.spinner-grow {
   color: #0165bb;
   font-size: 10px;
   height: 5px;
   width: 5px;
   margin: 0 2.5px 4px 2.5px;
}
@keyframes wave{
   0%{
       transform: rotate(0);
   }
   100%{
       transform: rotate(360deg);
   }
}
.chapter-actions{
   top: 14px;
   z-index: 12;
}
.loadingScreen {
   z-index: 1024;
   top: 0;
   left: 0;
}
.qp-loading{
   height: 100%;
   width: 100%;
   position: fixed;
   left: 0;
   top: 0;
}
.loader-center {
   position: absolute;
   top: calc(50% - 2px);
   left: calc(50% - 17px);
   -ms-transform: translateX(-50%) translateY(-50%);
   -webkit-transform: translate(-50%,-50%);
   transform: translate(-50%,-50%);
}
.qp-loading-logo{
   background: url('/static/images/hirebo_logo.svg') no-repeat;
   height: 245px;
   width: 240px;
   background-size: cover;
   position: absolute;
   top: 50%;
   left: 50%;
   -ms-transform: translateX(-50%) translateY(-50%);
   -webkit-transform: translate(-50%,-50%);
   transform: translate(-50%,-50%);
}
.loader-text{
   margin-top: 10px;
   font-weight: bolder;
   font-size: large;
   color: #28aae2;
}
.loader-text .spinner-grow{
   width: 0.2rem !important;
   height: 0.2rem !important;
}
/********** header *************/

.dropdown {
   padding: 20px 40px;
   position: relative;
   perspective: 1000px;
   z-index: 100;
 }
 .dropdown_menu {
   position: absolute;
   top: 100%;
   left: 0;
   width: 100%;
   perspective: 1000px;
   z-index: -1;
 }
 .dropdown_menu li {
   display: none;
   color: #333;
   background-color: #FFF;
   opacity: 0;
   border-bottom: 1px solid #eee;
 }
 .dropdown_menu li a {
   padding: 12px 16px;
   display: block;
 }
 .dropdown:hover .dropdown_menu li {
   display: block;
 }
 .notificationDropDown{
   padding: 12px 14px 8px 14px;
 }
 .welcomeUser{
   font-size: 12px;
 }
 .welcomeUser .dropdown_menu {
   width: 200px;
   left: auto;
   right: 0;
 }
 .welcomeUser .dropdown_menu li:hover {
   background: #e1e1e1;
 }
 .translateX-single .dropdown_item-1 {
   transform-origin: top center;
   animation: translateX 300ms 60ms ease-in-out forwards;
 }
 .translateX-single .dropdown_item-2 {
   transform-origin: top center;
   animation: translateX 300ms 120ms ease-in-out forwards;
 }
 .translateX-single .dropdown_item-3 {
   transform-origin: top center;
   animation: translateX 300ms 180ms ease-in-out forwards;
 }
 .translateX-single .dropdown_item-4 {
   transform-origin: top center;
   animation: translateX 300ms 240ms ease-in-out forwards;
 }
 .translateX-single .dropdown_item-5 {
   transform-origin: top center;
   animation: translateX 300ms 300ms ease-in-out forwards;
 }
 @-moz-keyframes translateX {
   0% {
     opacity: 0;
     transform: translateX(60px);
   }
   80% {
     transform: translateX(-5px);
   }
   100% {
     opacity: 1;
     transform: translateX(0px);
   }
 }
 @-webkit-keyframes translateX {
   0% {
     opacity: 0;
     transform: translateX(60px);
   }
   80% {
     transform: translateX(-5px);
   }
   100% {
     opacity: 1;
     transform: translateX(0px);
   }
 }
 @-o-keyframes translateX {
   0% {
     opacity: 0;
     transform: translateX(60px);
   }
   80% {
     transform: translateX(-5px);
   }
   100% {
     opacity: 1;
     transform: translateX(0px);
   }
 }
 @keyframes translateX {
   0% {
     opacity: 0;
     transform: translateX(60px);
   }
   80% {
     transform: translateX(-5px);
   }
   100% {
     opacity: 1;
     transform: translateX(0px);
   }
 }
 .profile-img{
   height: 120px;
   width: 120px;
   display: inline-block;
   text-align: center;
   position: relative;
   background: #e5e5e5;
 }
 .head-profile-img{
   height: 40px;
   width: 40px;
   display: inline-block;
   text-align: center;
   position: relative;
   background: #e5e5e5;
 }
 .head-profile-img img, .profile-img img{
   padding: 0;
   display: block;
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   margin: auto;
   height: auto;
   width: 100%;
   max-width: 100%;
 }
 @keyframes blinker {  
   0% { opacity: 1.0; }
   50% { opacity: 0.0; }
   100% { opacity: 1.0; }
 }
 @-webkit-keyframes blinker {  
   0% { opacity: 1.0; }
   50% { opacity: 0.0; }
   100% { opacity: 1.0; }
 }
  .blink {
   width: 10px;
   height: 10px;
   border-radius: 10px;
   animation: blinker 1s linear infinite;
   background-color: red;
   margin-right: 5px;
   position: absolute;
   right: 7px;
 }
 .blink-once {
   animation: blinker 2s linear;
 }
 .notificationDropDown ul.dropdown-menu {
   left: auto;
   right: 0;
   font-size: 14px;
}
/****** custom *****/
.text-darkblue{
   color: var(--bs-darkblue);
}
.bg-light-primary{
   background-color: #6599e6;
}

.bg-light-danger{
   background-color: #f797a4;
}

.bg-light-success{
   background-color: #70e38e;
}

.bg-light-warning{
   background-color: #e4c57c;
}

.text-grey{
   color: #bdbdbe;
}
.required{
   color: #f00;
   position: relative;
}
.required input[type="text"], .required input[type="file"], .required textarea, .required input[type="password"]{
   border-color: #f00;
}
.bg-lightblue{
 background-color:#28ABE3 !important
}
.border-lightblue{
 border-color:#28ABE3 !important;  
}
.text-lightblue{
 color:#28ABE3 !important;  
}
.qp-lh-6{
 line-height: 3rem;
}
.stopScroll {
   overflow: hidden;
}
.rounded-4{
   border-radius: 8px;
}
.progressWrap{
   position: relative;
   min-height: 200px;
}
.floatErrMsg{
   position: absolute;
   bottom: -18px;
   left: 2px
}
.progressWrap:after {
   content: "";
   position: absolute;
   height: 94%;
   width: 2px;
   background: #C4C4C4;
   top: 4px;
}
.progressWrap strong {
   padding-left: 20px;
   position: relative;
}
.progressWrap strong:after, .questionsProgressWrap strong:after {
   content: "";
   height: 14px;
   width: 14px;
   background: #C4C4C4;
   position: absolute;
   left: -6px;
   top: 3px;
   border-radius: 10px;
   z-index: 1;
   outline: 5px solid #FFF;
}
.activeStepBar:before {
   content: "";
   background: #00e2ac;
   position: absolute;
   top: 4px;
   width: 2px;
   height: 0;
   z-index: 1;
}
.reviewStep:before {
   height: 50%;
}
.stepFour:before{
   height: 100%;
}
.progressWrap strong.active:after {
   background: #00E2AC;
}
.bg-lightgreen{
   background-color: #00E2AC;
}
.questionsProgressWrap{
   position: relative;
}
.questionsProgressWrap strong.addQ {
   color: #c4c4c4;
}
.questionsProgressWrap strong.addQ:after{
   background: #C4C4C4;
}
.questionsProgressWrap strong.addQ:before {
   display: none;
}
.questionsProgressWrap strong {
   padding: 0 0 30px 20px;
   position: relative;
   cursor: pointer;
}
.questionsProgressWrap strong:after{
   background: #00C72C;
}
.questionsProgressWrap strong.active {
   color: #00c72c;
}
.questionsProgressWrap strong:before {
   height: 100%;
   width: 2px;
   top: 5px;
   content: "";
   background: #00c72c;
   position: absolute;
   left: 0;
}
.sort-handle {
   cursor: move;
}
.slide-block{
   width: 90vw;
   height: 100vh;
   top: 0;
   right: 0;
   z-index: 1022;
   overflow: auto;
}
.purchases-slide-block{
   width: 100vw;
}
.slide-fade-enter-active {
   transition: all .3s ease;
}
.slide-fade-leave-active {
   transition: all .5s ease;
}
.slide-fade-enter, .slide-fade-leave-to{
   transform: translateX(90vw);
   opacity: 0;
}
.site-overlay {
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background: rgba(0, 0, 0, 0.2);
   z-index: 1021;
}
.questionLine span{
   color: #28ABE3
}
.questionWrap .qNum {
   flex: 1 0 34px;
   height: 28px;
   max-width: 38px;
   line-height: 30px;
   border-radius: 4px;
   margin: 5px;
   background: #e4e4e4;
   cursor: pointer;
   font-size: 12px;
   transition: 0.3s all ease-in-out;
}
.questionWrap .qNum:hover {
   flex: 1 0 40px;
   height: 34px;
   max-width: 45px;
   margin: 3px 3px 0px 3px;
   line-height: 36px;
   font-size: 16px;
}
.questionWrap .qNum.q-active {
   background-color: #0165BB;
   color: #FFF;
}
.questionWrap .qNum.q-completed {
   background-color: #17BB09;
   color: #FFF;
}
.questionWrap .qNum.q-markForReview {
   background-color: #ff8c00;
   color: #FFF;
}.questionWrap .qNum.q-notAnswred {
   background-color: #dc3545;
   color: #FFF;
}
.bg-yellow {
   background-color: #ffa600 !important;
}
.truncate-3{
   height: 42px;
   display: -webkit-box;
   -webkit-line-clamp: 3;
   -webkit-box-orient: vertical;
   overflow: hidden;
   text-overflow: ellipsis;
}
.truncate-4{
   height: 60px;
   display: -webkit-box;
   -webkit-line-clamp: 3;
   -webkit-box-orient: vertical;
   overflow: hidden;
   text-overflow: ellipsis;
}
.truncate-5{
   height: 30px;
   width: 90%;
   display: -webkit-box;
   -webkit-line-clamp: 3;
   -webkit-box-orient: vertical;
   overflow: hidden;
   line-height: 17px;
   text-overflow: ellipsis;
}
.product-wrap button span:not(.small){
   font-size: 10px;
   text-transform: capitalize;
}
.product-wrap button span.small{
   width: 24px;
   text-align: center;
   flex: 0 0 24px;
}
.attachQuestionsBtnWrap {
   position: fixed;
   right: 0;
   bottom: 0;
   width: 90vw;
   padding: 10px 0 10px 30px;
   background: #FFF;
   box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.4);
}
/*************** custom checkbox **************/
.checklist {
 --background: #ffffff;
 --text: #414856;
 --check: #28ABE3;
 --disabled: #C3C8DE;
 background: var(--background);
 width: 100%;
 position: relative;
 padding: 4px;
 display: flex;
 align-items: center;
}
.checklist label {
 color: var(--text);
 position: relative;
 cursor: pointer;
 display: flex;
 align-items: flex-start;
 width: -webkit-fit-content;
 width: -moz-fit-content;
 width: fit-content;
 transition: color 0.3s ease;
 flex-direction: column;
}
.checklist label::before, .checklist label::after {
 content: "";
 position: absolute;
}
.checklist label::before {
 height: 2px;
 width: 8px;
 left: -27px;
 top: 48%;
 background: var(--check);
 border-radius: 2px;
 transition: background 0.3s ease;
}
.checklist label:after {
 height: 4px;
 width: 4px;
 top: 48%;
 left: -25px;
 border-radius: 50%;
}
.checklist input[type=checkbox] {
 -webkit-appearance: none;
 -moz-appearance: none;
 position: relative;
 height: 15px;
 width: 15px;
 outline: none;
 border: 0;
 margin: 0 15px 0 0;
 cursor: pointer;
 background: var(--background);
 display: flex;
 align-items: center;
}
.checklist input[type=checkbox]::before, .checklist input[type=checkbox]::after {
 content: "";
 position: absolute;
 height: 2px;
 top: auto;
 background: var(--check);
 border-radius: 2px;
}
.checklist input[type=checkbox]::before {
 width: 0px;
 right: 60%;
 transform-origin: right bottom;
}
.checklist input[type=checkbox]::after {
 width: 0px;
 left: 40%;
 transform-origin: left bottom;
}
.checklist input[type=checkbox]:checked::before {
 -webkit-animation: check-01 0.4s ease forwards;
         animation: check-01 0.4s ease forwards;
}
.checklist input[type=checkbox]:checked::after {
 -webkit-animation: check-02 0.4s ease forwards;
         animation: check-02 0.4s ease forwards;
}
.checklist input[type=checkbox]:checked + label {
 color: var(--disabled);
 -webkit-animation: move 0.3s ease 0.1s forwards;
         animation: move 0.3s ease 0.1s forwards;
}
.checklist input[type=checkbox]:checked + label p{
 color: var(--disabled) !important;
}
.checklist input[type=checkbox]:checked + label::before {
 background: var(--disabled);
 -webkit-animation: slice 0.4s ease forwards;
         animation: slice 0.4s ease forwards;
}
.checklist input[type=checkbox]:checked + label::after {
 -webkit-animation: firework 0.5s ease forwards 0.1s;
         animation: firework 0.5s ease forwards 0.1s;
}

@-webkit-keyframes move {
 50% {
   padding-left: 8px;
   padding-right: 0px;
 }
 100% {
   padding-right: 4px;
 }
}

@keyframes move {
 50% {
   padding-left: 8px;
   padding-right: 0px;
 }
 100% {
   padding-right: 4px;
 }
}
@-webkit-keyframes slice {
 60% {
   width: 100%;
   left: 4px;
 }
 100% {
   width: 100%;
   left: -2px;
   padding-left: 0;
 }
}
@keyframes slice {
 60% {
   width: 100%;
   left: 4px;
 }
 100% {
   width: 100%;
   left: -2px;
   padding-left: 0;
 }
}
@-webkit-keyframes check-01 {
 0% {
   width: 4px;
   top: auto;
   transform: rotate(0);
 }
 50% {
   width: 0px;
   top: auto;
   transform: rotate(0);
 }
 51% {
   width: 0px;
   top: 8px;
   transform: rotate(45deg);
 }
 100% {
   width: 5px;
   top: 8px;
   transform: rotate(45deg);
 }
}
@keyframes check-01 {
 0% {
   width: 4px;
   top: auto;
   transform: rotate(0);
 }
 50% {
   width: 0px;
   top: auto;
   transform: rotate(0);
 }
 51% {
   width: 0px;
   top: 8px;
   transform: rotate(45deg);
 }
 100% {
   width: 5px;
   top: 8px;
   transform: rotate(45deg);
 }
}
@-webkit-keyframes check-02 {
 0% {
   width: 4px;
   top: auto;
   transform: rotate(0);
 }
 50% {
   width: 0px;
   top: auto;
   transform: rotate(0);
 }
 51% {
   width: 0px;
   top: 8px;
   transform: rotate(-45deg);
 }
 100% {
   width: 10px;
   top: 8px;
   transform: rotate(-45deg);
 }
}
@keyframes check-02 {
 0% {
   width: 4px;
   top: auto;
   transform: rotate(0);
 }
 50% {
   width: 0px;
   top: auto;
   transform: rotate(0);
 }
 51% {
   width: 0px;
   top: 8px;
   transform: rotate(-45deg);
 }
 100% {
   width: 10px;
   top: 8px;
   transform: rotate(-45deg);
 }
}
@-webkit-keyframes firework {
 0% {
   opacity: 1;
   box-shadow: 0 0 0 -2px #4F29F0, 0 0 0 -2px #4F29F0, 0 0 0 -2px #4F29F0, 0 0 0 -2px #4F29F0, 0 0 0 -2px #4F29F0, 0 0 0 -2px #4F29F0;
 }
 30% {
   opacity: 1;
 }
 100% {
   opacity: 0;
   box-shadow: 0 -15px 0 0px #4F29F0, 14px -8px 0 0px #4F29F0, 14px 8px 0 0px #4F29F0, 0 15px 0 0px #4F29F0, -14px 8px 0 0px #4F29F0, -14px -8px 0 0px #4F29F0;
 }
}
@keyframes firework {
 0% {
   opacity: 1;
   box-shadow: 0 0 0 -2px #4F29F0, 0 0 0 -2px #4F29F0, 0 0 0 -2px #4F29F0, 0 0 0 -2px #4F29F0, 0 0 0 -2px #4F29F0, 0 0 0 -2px #4F29F0;
 }
 30% {
   opacity: 1;
 }
 100% {
   opacity: 0;
   box-shadow: 0 -15px 0 0px #4F29F0, 14px -8px 0 0px #4F29F0, 14px 8px 0 0px #4F29F0, 0 15px 0 0px #4F29F0, -14px 8px 0 0px #4F29F0, -14px -8px 0 0px #4F29F0;
 }
}
/*************** custom checkbox end **************/
.questionsProgressWrap.questionsReviewProgress p:last-child strong:before {
 display: none;
}
/******************** checkbox switch ********************/
.qp-switch {
 position: relative;
 display: inline-block;
 width: 80px;
 height: 21px;
 background-color: #FFF;
 border-radius: 18px;
 cursor: pointer;
}
.qp-switch.publish {
  width: 116px;
  height: 21px;
}
.qp-switch.paid {
   width: 52px;
   height: 16px;
   padding: 0px;
}
.paid.qp-switch .qp-switch-handle {
    top: 3px;
    left: 3px;
    width: 10px;
    height: 10px;
}
.paid.qp-switch .qp-switch-input:checked ~ .qp-switch-handle {
    left: 39px;
}
.qp-switch.publish .qp-switch-handle{
   top: 6px;
   left: 7px;
   width: 15px;
   height: 15px;
}
.qp-switch.publish .qp-switch-input:checked ~ .qp-switch-handle{
   left: 95px;
}
.qp-switch-input {
 position: absolute;
 top: 0;
 left: 0;
 opacity: 0;
}
.qp-switch-label {
 position: relative;
 display: block;
 height: inherit;
 font-size: 10px;
 background:#bdc3c7;
 border-radius: inherit;
 -webkit-transition: 0.15s ease-out;
 -moz-transition: 0.15s ease-out;
 -o-transition: 0.15s ease-out;
 transition: 0.15s ease-out;
 -webkit-transition-property: opacity background border;
 -moz-transition-property: opacity background border;
 -o-transition-property: opacity background border;
 transition-property: opacity background border;
}
.qp-switch-label:before, .qp-switch-label:after {
 position: absolute;
 top: 52%;
 margin-top: -.5em;
 line-height: 1;
 -webkit-transition: inherit;
 -moz-transition: inherit;
 -o-transition: inherit;
 transition: inherit;
 font-size:11px;
}
.qp-switch-label:before {
 content: attr(data-off);
 right: 11px;
 color: #000;
}
.qp-switch-label:after {
 content: attr(data-on);
 left: 11px;
 color: white;
 opacity: 0;
}
.qp-switch-input:checked ~ .qp-switch-label {
 background: #00C72C;
}
.qp-switch-input:checked ~ .qp-switch-label:before {
 opacity: 0;
}
.qp-switch-input:checked ~ .qp-switch-label:after {
 opacity: 1;
}
.qp-switch-handle {
 position: absolute;
 top: 7px;
 left: 7px;
 width: 14px;
 height: 14px;
 background: white;
 -moz-border-radius: 10px;
 -webkit-border-radius: 10px;
 border-radius: 10px;
 -webkit-transition: left 0.3s ease-out;
 -moz-transition: left 0.3s ease-out;
 -o-transition: left 0.3s ease-out;
 transition: left 0.3s ease-out;
}
.qp-switch-handle:before {
 content: '';
 position: absolute;
 top: 50%;
 left: 50%;
 margin: -6px 0 0 -6px;
 width: 12px;
 height: 12px;
 background: #f9f9f9;
 -moz-border-radius: 6px;
 -webkit-border-radius: 6px;
 border-radius: 6px;
 -moz-box-shadow: inset 0 1px rgba(0, 0, 0, 0.02);
 -webkit-box-shadow: inset 0 1px rgba(0, 0, 0, 0.02);
 box-shadow: inset 0 1px rgba(0, 0, 0, 0.02);
 background-image: -webkit-linear-gradient(top, #eeeeee, white);
 background-image: -moz-linear-gradient(top, #eeeeee, white);
 background-image: -o-linear-gradient(top, #eeeeee, white);
 background-image: linear-gradient(to bottom, #eeeeee, white);
}
.qp-switch-input:checked ~ .qp-switch-handle {
 background:#FFF;
 left: 60px;
 -moz-box-shadow: -1px 1px 5px rgba(0, 0, 0, 0.2);
 -webkit-box-shadow: -1px 1px 5px rgba(0, 0, 0, 0.2);
 box-shadow: -1px 1px 5px rgba(0, 0, 0, 0.2);
}
.qp-switch-input:checked ~	.qp-switch-handle:before{
 background:#FFF;
}
.qp-switch-green > .qp-switch-input:checked ~ .qp-switch-label {
 background: #4fb845;
}
.reviewVideo-dimensions{
   width:100%;
}
.product-img{
    height:200px;
    width:100%;
}
.product-img-edit {
   width: 210px;
   position: relative;

}
.product-img-edit .btn{
   position: absolute;
   right: 0;
}
.addProductImage {
   background: #28ABE3;
   color: #FFF;
   font-weight: 600;
   height: 80px;
   width: 110px;
   display: flex;
   justify-content: center;
   align-items: center;
   cursor: pointer;
}
.accordion-button{
   font-size: 0.8rem;
}
.video-js .vjs-big-play-button {
   top: 50%;
   left: 50%;
   margin-left: -25px;
   margin-top: -25px;
   border-radius: 50%;
   background: #28ABE3;
   height: 50px;
   width: 50px;
   border: 0;
   pointer-events: none;
}
.video-js .vjs-tech {
   cursor: pointer;
}
.video-js .vjs-big-play-button .vjs-icon-placeholder:before{
   top: 3px;
}
.vjs-user-active.video-js .vjs-big-play-button{
   display: inline-block;
}
.vjs-playing.video-js .vjs-big-play-button .vjs-icon-placeholder:before {
   content: "\f103";
}
.custom-tooltip .tooltip-inner {
   background-color: #28ABE3;
}
.custom-tooltip.tooltip .tooltip-arrow::before {
   border-bottom-color: #28ABE3;
}
.questionsReviewProgress p {
   margin-bottom: 0px;
}
.questionsReviewProgress strong{
   padding: 0 0 20px 20px;
}
.accordion-body a {
   text-decoration: none;
   font-weight: 400;
}
.accordion-body a.active {
   text-decoration: underline;
   font-weight: 600;
   color: #004ec0;
}
.accordion-body a:hover {
   text-decoration: underline;
}
.resultNitemCount{
   flex: 0 1 40px;
   text-align: right;
}
.table tbody td, .table tbody td a,.table tbody td .btn {
   text-transform: initial;
}
.chart-area {
   height: 110px;
   width: 110px;
   margin: 10px auto 0px auto;
}
/******************** checkbox switch end ********************/
/*************** custom checkbox ******************/
.form-check {
   position: relative;
   display: block;
   padding-left: 22px;
   cursor: pointer;
   line-height: 16px;
   margin-bottom: 5px;
}
.form-check input[type="checkbox"] {
   display: none;
}
.form-check input[type="checkbox"] + label:before {
   content: "";
   background: #fff;
   position: absolute;
   height: 0px;
   width: 3px;
   top: 6px;
   left: 5px;
   -ms-transform: rotate(45deg);
   -webkit-transform: rotate(45deg);
   transform: rotate(45deg);
   z-index: 1;
   -webkit-box-sizing: content-box;
   -moz-box-sizing: content-box;
   box-sizing: content-box;
   -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
   -ms-transition: all 0.2s ease-in-out;
   transition: all 0.2s ease-in-out;
}
.form-check input[type="checkbox"] + label:after {
   content: "";
   position: absolute;
   width: 14px;
   display: block;
   height: 14px;
   border: 2px solid #A1A1A1;
   top: 0px;
   left: 0px;
   border-radius: 4px;
   background: #fff;
   -webkit-box-sizing: content-box;
   -moz-box-sizing: content-box;
   box-sizing: content-box;
   -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
   -ms-transition: all 0.2s ease-in-out;
   transition: all 0.2s ease-in-out;
}
.form-check input[type="checkbox"]:checked + label:after {
   border: 2px solid #0C1E5B;
   background: #0C1E5B;
   -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
   -ms-transition: all 0.2s ease-in-out;
   transition: all 0.2s ease-in-out;
}
.form-check input[type="checkbox"]:checked + label:before {
   background: #0C1E5B;
   -ms-transform: rotate(45deg);
   -webkit-transform: rotate(45deg);
   transform: rotate(45deg);
   height: 9px;
   top: 2px;
   border-bottom: 2px solid #fff;
   border-right: 2px solid #fff;
   -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
   -ms-transition: all 0.2s ease-in-out;
   transition: all 0.2s ease-in-out;
}

.form-check input[type="checkbox"]:disabled + label:after {
   border: 2px solid #d2d2d2;
   cursor: not-allowed;
}

.form-check input[type="checkbox"]:disabled + label:before {
   background: #fff;
   top: 1px;
   left: 1px;
   -ms-transform: rotate(45deg);
   -webkit-transform: rotate(45deg);
   transform: rotate(0deg);
   height: 14px;
   width: 14px;
   cursor: not-allowed;
}
.domianAccessForm{
   z-index: 1021;
   bottom: -200px;
   transition: .3s all ease-in-out;
}
.domianAccessForm.active{
   bottom: 0;
}
.category-badge {
   background: #eee;
   padding: 0px 8px;
   border-radius: 15px;
   margin: 6px 6px 0 0;
   display: inline-block;
   font-weight: 400;
}
.category-badge i {
   margin-left: 5px;
   cursor: pointer;
}
.category-badge-0 {
   background: #F5B8FF;
   color: #492050;
}
.category-badge-1 {
   background: #ABECFF;
   color: #1D3640;
}
.category-badge-2 {
   background: #8FCBFF;
   color: #000000;
}
.category-badge-3 {
   background: #FFDA9B;
   color: #514133;
}
.category-badge-4 {
   background: #DCF5D6;
   color: #164909;
}
.category-badge-5{
   background: #ff8c00;
   color: #221302;
}
.category-badge-6 {
   background: #00C72C;
   color: #004710;
}
.product-list:hover{
   background-color: #e9f1fa;
}

@media screen and (max-width: 992px) {
   .progressWrap {
       min-height: auto;
   }
   .progressWrap strong {
       padding: 20px 0 0 0;
       max-width: 145px;
       width: 145px;
       text-align: center;
   }
   .progressWrap:after {
       height: 2px;
       width: 75%;
       top: 5px;
       left: 12.5%;
   }
   .progressWrap strong:after,
   .questionsProgressWrap strong:after {
       left: calc(50% - 7px);
       top: 0px;
   }
   .activeStepBar:before {
       top: 5px;
       height: 2px;
       width: 0;
       left: 10%;
   }
   .reviewStep:before {
       width: 40%;
   }
   .stepFour:before{
       width: 75%;
   }
   .questionsProgressWrap strong {
       padding: 20px 0 0 0;
       width: 40px;
       display: inline-block;
       text-align: center;
   }
   .questionsProgressWrap p {
       margin: 0 15px 0 0;
   }
   .questionsProgressWrap strong:before {
       height: 2px;
       width: 55px;
       top: 5px;
       left: 33px;
   }
   .questionsProgressWrap strong.addQ{
       width: 55px;
   }
 }
@media screen and (max-width: 768px) {
   .progressWrap:after {
       height: 2px;
       width: 60%;
       top: 5px;
       left: 20%;
   }
   .activeStepBar:before {
       left: 20%;
   }
   .reviewStep:before {
       width: 30%;
   }
   .stepFour:before{
       width: 60%;
   }
}
@media screen and (min-width: 1400px) {
   :root {
   --bs-body-font-size: 1rem;
      --bs-body-font-weight: 300;
      --bs-body-line-height: 22px;
   }
   .form-control, .form-select{
      font-size: 1rem;
   }
   .small, small {
      font-size: .8rem;
   }
    .fs-10, .btn-sm {
      font-size: 14px !important;
      line-height: 17px !important;
   }
   .qp-switch-label:before, .qp-switch-label:after{
      font-size: 14px;
   }
   .qp-switch.publish {
      width: 135px;
      height: 28px;
   }
   .qp-switch.publish .qp-switch-handle{
      top: 9px;
   }
   .qp-switch.publish .qp-switch-input:checked ~ .qp-switch-handle{
      left: 112px;
   }
}
@media screen and (max-width: 1300px) {
   .result-tab-content h5 {
     font-size: .8rem;
   }
   .result-tab-content h6 {
       font-size: .65rem;
   }
 }


.button {
  display: block;
  position: relative;
  margin: 50px auto 0;
  padding: 10px 0;
  color: #fff;
  text-align: center;
  text-transform: uppercase;
  background-color: #0099cc;
  border: none;
}
 .button.one:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background-color: rgba(255,255,255,0.4);
	-webkit-transition: none;
	   -moz-transition: none;
	        transition: none;
}
.button.one:hover:after {
  width: 120%;
  background-color: rgba(255,255,255,0);

	-webkit-transition: all 0.4s ease-in-out;
	   -moz-transition: all 0.4s ease-in-out;
	        transition: all 0.4s ease-in-out;
}

.panel-heading{
  padding-right:3px;
}