.desktoptable {
   width: 100% !important;
}

body {
   font-size: 0.76rem !important;
}

.left-sidebar {
   width: 220px;
}

@media (min-width: 768px) {


   #main-wrapper[data-sidebartype=full] .topbar .top-navbar .navbar-header {
      width: 220px;
   }

   #main-wrapper.mini-sidebar .topbar .top-navbar .navbar-header {
      width: 220px;
   }

   .expand-logo {

      width: 220px !important;
   }

   #main-wrapper.mini-sidebar .left-sidebar {
      width: 80px;
   }

   #main-wrapper.mini-sidebar .left-sidebar:hover {
      width: 80px;
   }

}

.topbar .top-navbar .navbar-header {
   width: 220px
}



th.cul12>a.txtActions {

   display: none;
}


thead.fixedHeader tr th {
   font-size: 0.6vw;

}

html>body tbody.scrollContent tr td {
   font-size: 0.65vw;
}

.fa-sort {
   margin: 0 !important;
   float: none;
   /* margin: 0px 3px !important; */
}

.filter input {
   width: 90%;
}

tbody .fa-star {
   margin: 0 !important
}

table {

   table-layout: fixed;
}

#id01 button,
#id02 button {

   font-size: 0.6vw;
}

.actioncol a {
   font-size: 0.65vw;
}

span.upgrade {
   color: #7cbe50;

   border: 1px solid #7cbe50;

   width: 60px;

   font-size: 0.6vw;
}

thead.fixedHeader tr th.cul2,
thead.fixedHeader tr th.cul1 {

   padding: 0
}

.rankup span {

   background: #f2f8ee url('../../assets/images/up-arrow.png') no-repeat 3px 50%;
   width: 100%;
   background-size: 0.7vw;
   font-size: 0.5vw;
   padding-top: 3px;
}

.rankdown span {

   background: #f2f8ee url('../../assets/images/down-arrow.png') no-repeat 3px 50%;
   width: 100%;
   background-size: 0.7vw;
   font-size: 0.5vw;
   padding-top: 3px;


}

.rankgrey span {

   border-radius: 3px;
   overflow: hidden;
   display: block;

   font-weight: 600;

   background: #f2f8ee url(../../assets/images/up-arrow.png) no-repeat 8px 50%;
   width: 40px;

   padding: 1px 0 1px 15px;
   font-size: 0.5vw;





   background: #f1f1f1 url('../../assets/images/up-arrowgrey.png') no-repeat 3px 50%;
   width: 100%;
   background-size: 0.7vw;
   color: #5a5a5a;
   border: 1px solid #808080;
   font-size: 0.6vw;
   padding-top: 3px;
}

.rankgrey {
   display: inline-block;
   margin: 0px;
   width: 50%;
}

.rankdown {
   margin: 0px;
   width: 50%;
}

.rankup {
   margin: 0px;
   width: 50%;
}





.PagePosition {
   position: relative;
}


.PagePosition div {
   position: absolute;
   top: 4px;
   right: 1%;
}

.PagePosition a {
   position: absolute;
   top: 7px;
   left: 11px;
}

.RankPage {
   position: relative;
}


.RankPage div {
   position: absolute;
   top: 4px;
   right: 1%;

}

.cul7 div {
   position: absolute;
   top: 4px;
   left: 20%;

}

.RankPage a {
   position: absolute;
   top: 7px;
   left: 10px;
}


input[type="checkbox"] {
   width: 10px;
   height: 10px;
}

.contentTR .table-bordered td {
   padding: 5px 7px;
}

tbody>tr>input[type="checkbox"] {


   margin-left: 5px;

}

thead.fixedHeader tr th {
   text-align: center;

}

thead.fixedHeader tr th {
   padding: 2px 0px;
}

.ml14 {
   font-size: 10px !important;
}

.sidebar-nav ul .sidebar-item .first-level li a {
   font-size: 0.63vw;
}

.slideDiv {
   height: 0px !important;
}

.slideDiv1 {
   height: 135px !important;
}

.slideDiv3 {
   height: 47px !important;
}
.slideDiv4 {
   height: 130px !important;
}
.slideDiv5 {
   height: 120px !important;
}

.cul10 {
   width: 7.09%;
}

.cul12 {
   width: 3.7777%;
}

.cul3 {
   width: 25.65555%;

}

.cul4 {
   width: 9.122222%;
}

.cul4 {

   position: relative;

}

.cul4 i {

   position: absolute;
   left: 9%;
   top: 12px;
}


.cul4 {

   position: relative;

}

.cul4 i {

   position: absolute;
   left: 9%;
   top: 12px;
}


thead .cul4 a {


   position: absolute;
   left: 25%;
   top: 10px;
}


.cul5 {

   position: relative;

}

.cul5 i {

   position: absolute;
   left: 1%;
   top: 12px;
}

thead .cul5 a {

   position: absolute;
   left: 25%;
   top: 10px;
}



.cul6 {

   position: relative;

}

.cul6 i {

   position: absolute;
   left: 1%;
   top: 12px;
}




.cul7 {

   position: relative;

}

.cul7 i {

   position: absolute;
   left: 1%;
   top: 10px;
}

thead .cul7 a {


   position: absolute;
   left: 25%;
   top: 10px;
}


.cul8 {

   position: relative;

}

.cul8 i {

   position: absolute;
   left: 1%;
   top: 12px;
}


thead .cul8 a {


   position: absolute;
   left: 25%;
   top: 10px;
}

.cul9 {

   position: relative;

}

.cul9 i {

   position: absolute;
   left: 1%;
   top: 12px;
}

thead .cul9 a {


   position: absolute;
   left: 15%;
   top: 10px;
}

.cul10 {

   position: relative;

}

.cul10 i {

   position: absolute;
   left: 1%;
   top: 12px;
}

thead .cul10 a {


   position: absolute;
   left: 25%;
   top: 10px;
}

.cul12 {


   position: relative;
}

.cul12 .txtActions {
   color: #3e5569;
   ;
   position: absolute;
   left: 10px;
   top: 8px;
}

td.cul12 .Action1 {
   color: #3e5569;
   ;

   position: absolute;
   right: 55%;
   top: 8px;
}

td.cul12 .Action2 {
   color: #3e5569;
   ;

   position: absolute;
   right: 7px;
   top: 8px;
}

th.cul12 .Action1 {
   color: #3e5569;
   ;

   position: absolute;
   right: 58%;
   top: 8px;
}

th.cul12 .Action2 {
   color: #3e5569;
   ;

   position: absolute;
   right: 8px;
   top: 8px;
}

.cul2 {


   position: relative;


}

.cul1 {

   position: relative;
}

.cul1 input[type="checkbox"] {
   position: absolute;
   right: 2px !important;
   top: 9px;
}

thead .cul1 input[type="checkbox"] {

   right: 2.5px !important;
   padding: 0px !important;
   margin: 0px !important;
   position: absolute !important;
   top: 10px !important;

}

thead .cul1 input[type="checkbox"] {

   position: absolute;
   right: 9.8px;
   top: 8px;
   right: 0.8px;
   bottom: 11px;
}

tbody .cul2 i.fa-star {
   position: absolute;
   left: 40%;
   top: 10px;
}

thead .cul2 i.fa-star {
   position: absolute;
   left: 40%;
   top: 11px;
}

.cul5 {

   position: relative;

}

.cul5 i {

   position: absolute;
   left: 9%;
   top: 12px;
}


.cul5 {

   position: relative;

}

.cul5 i {

   position: absolute;
   left: 9%;
   top: 12px;
}

.rankTrackerTable table tr.contentTR td {
   padding: 5px 0px;
}

.actioncol {

   padding: 0 0 0 15%;
}

.preloader {
   width: 100%;
   height: 100%;
   top: 10px;
   position: absolute;
   z-index: 99999;
   background: #fff;
   display: block;
}

.preloader>div {
   width: 100%;
   height: 100vh;
   top: 10px;
   position: absolute;
   z-index: 99999;
   background: #fff;
   display: flex;
   align-items: center;
   justify-content: center;
}


.rankTrackerTable table tr.contentTR {

   border-bottom: none;
   box-shadow: 0 1px 3px #666;
   box-shadow: 0 0px 4px #666;
}

table table {
   box-shadow: 0 -3px 7px #666;
   box-shadow: 0 -4px 7px #000;
}
.table-responsive {
   overflow: hidden
}
.HideRow {
   display: none
}
.MarketAnalyticsTable .thtitle{
   font-size: 0.6vw;
   height: fit-content!important;
   width: 100%!important;
   left:0px!important;

}

.MarketAnalyticsTable tbody td{
   border-bottom: 1px solid rgb(232, 233, 237);
   border-top: 1px solid rgb(232, 233, 237);

}


.MarketAnalyticsTable  .sortarrow{
   font-size: 0.4vw

}

.rankTrackerTable table tr.titleTR {

   box-shadow: 1px 0px 10px -3px #666;
   border-bottom: none;
}

.rankTrackerTable table tr.titleTR td {
   border-bottom: none;
}

.table {

   margin-bottom: 2px;




}

.AddedMsgDiv {
   z-index: 500;
   background-color: white;
   color: #696c6f;
   padding: 10px 15px;
   margin: 8px 0;
   border: none;
   cursor: pointer;
   font-weight: 600;
   text-align: center;
   width: 250px;
   -moz-box-shadow: inset 0px 1px 0px 0px #ffffff;
   -webkit-box-shadow: inset 0px 1px 0px 0px #ffffff;
   box-shadow: inset 0px 1px 0px 0px #ffffff;
   background-color: #ffffff;
   -moz-border-radius: 6px;
   box-shadow: 0px 1px 5px #999;
   -webkit-border-radius: 4px;
   border-radius: 4px;
   display: inline-block;
   cursor: pointer;
   color: #696c6f;
   font-family: Arial;
   font-size: 0.65vw;
   font-weight: bold;
   padding: 6px 24px;
   text-decoration: none;
   text-shadow: 0px 1px 0px #ffffff;
}

.xCancelFilter {
   position: absolute;
   top: 4px;
   left: calc(80% + 14px + 3px);
   padding: 0.3vw 0.5vw;
   border-radius: 50%;
   background-color: #efecec;
   color: black;
   font-size: 0.5vw;

}

.btnClose {
   background-color: white;
   color: #696c6f;
   padding: 10px 15px;
   margin: 8px 0;
   border: none;
   cursor: pointer;
   font-weight: 600;
   text-align: center;

   -moz-box-shadow: inset 0px 1px 0px 0px #ffffff;
   -webkit-box-shadow: inset 0px 1px 0px 0px #ffffff;
   box-shadow: inset 0px 1px 0px 0px #ffffff;
   background-color: #ffffff;
   -moz-border-radius: 6px;
   box-shadow: 0px 1px 5px #999;
   -webkit-border-radius: 4px;
   border-radius: 4px;
   display: inline-block;
   cursor: pointer;
   color: #696c6f;
   font-family: Arial;
   font-size: 0.65vw;
   font-weight: bold;
   padding: 6px 24px;
   text-decoration: none;
   text-shadow: 0px 1px 0px #ffffff;
}

.PopupToAddTracking {

   /* background-color: white; */
   /* color: #696c6f; */
   /* padding: 10px 15px; */
   /* margin: 8px 0; */
   border: none !important;
   /* cursor: pointer; */
   /* font-weight: 600; */
   /* text-align: center; */
   /* width: 250px; */
   -moz-box-shadow: inset 0px 1px 0px 0px #ffffff;
   -webkit-box-shadow: inset 0px 1px 0px 0px #ffffff;
   box-shadow: inset 0px 1px 0px 0px #ffffff;
   background-color: #ffffff;
   -moz-border-radius: 6px;
   box-shadow: 0px 1px 5px #999;
   -webkit-border-radius: 4px;
   border-radius: 4px;
   /* display: inline-block; */
   /* cursor: pointer; */
   color: #696c6f;
   font-family: Arial;
   font-size: 0.65vw;
   font-weight: bold;
   padding: 6px 24px;
   text-decoration: none;
   text-shadow: 0px 1px 0px #ffffff;
}

#main-wrapper[data-sidebartype=full] .page-wrapper {
   margin-left: 230px;
}

#main-wrapper {


   min-height: 860px;
}

#main-wrapper .page-wrapper {
   min-height: 59vw;
}

.page-wrapper>.container-fluid {
   padding-left: 0px;
   padding-top: 20px;

}


footer ul {
   width: unset;
   float: right;

}

footer ul {
   margin: 0;
   padding: 0;
   display: block;
}

footer ul li:first-child {
   border: none;
}

footer ul li:first-child {
   line-height: 18px;
}

footer ul li:first-child a {
   padding-left: 0;
}

footer ul li {
   border-right: 1px solid #ccc !important;
   ;
   padding-right: 6px;
   padding-left: 6px;
   display: block;
   list-style: none;
   float: left;
}

footer ul li:last-child {
   border-right: none !important;
}

footer ul li {
   display: block;
   list-style: none;
   float: left;
}

footer ul li:last-child a {
   border-right: none;
   color: #3ea0eb;
}

footer ul li a {
   font-size: 0.65vw;
   color: #737373;
   font-weight: 200;
}

footer ul li:last-child a {
   border-right: none;
   color: #3ea0eb;
}

footer p {
   font-size: 0.65vw;
   color: #737373;

   font-weight: 200;
}





.topbar .top-navbar .navbar-nav>.nav-item:hover {
   background: none;
}

.keeptrack{
   width: calc(100vw - 650px);
}
.keeptrack span {

   padding-top: 17px !important;
   height:100%
}

.contentTR .table-bordered td {
   padding: 0px;
   height: 30px;
}



.table thead th {

   border-right: none;
}

thead>tr>th.cul1:hover,
thead>tr>th.cul2:hover,
thead>tr>th.cul3:hover,
thead>tr>th.cul4:hover,
thead>tr>th.cul5:hover,
thead>tr>th.cul6:hover,
thead>tr>th.cul7:hover,
thead>tr>th.cul8:hover,
thead>tr>th.cul9:hover,
thead>tr>th.cul10:hover,
thead>tr>th.cul11:hover {
   cursor: pointer;
   color: #5d9fe4;
}

thead>tr>th.cul12>.Action1:hover {
   color: #7cbe50;
}

thead>tr>th.cul12>.Action2:hover {
   color: #d9625e;
}

tbody>tr>td.cul12>.Action1:hover {
   color: #7cbe50;
}

tbody>tr>td.cul12>.Action2:hover {
   color: #d9625e;
}

.pagination {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   padding-left: 0;
   list-style: none;
   border-radius: .25rem;
}

.page-item:first-child .page-link {
   margin-left: 0;
   border-top-left-radius: .25rem;
   border-bottom-left-radius: .25rem;
}

.page-item:last-child .page-link {
   border-top-right-radius: .25rem;
   border-bottom-right-radius: .25rem;
}

.pagination-rounded .page-link {
   border-radius: 30px !important;
   margin: 0 3px;
   border: none;
}

.page-item.active .page-link {
   z-index: 1;
   color: #fff;
   background-color: #5d9fe4;

   border-color: #5d9fe4;
}

.page-link {
   position: relative;
   display: block;
   padding: .5rem .75rem;
   margin-left: -1px;
   line-height: 1.25;
   color: #313a46;
   background-color: #fff;
   border: 1px solid #dee2e6;
}

.page-link:hover {
   z-index: 2;
   color: #313a46;
   text-decoration: none;
   background-color: #e9ecef;
   border-color: #dee2e6;
}


.sr-only {
   position: absolute;
   width: 1px;
   height: 1px;
   padding: 0;
   overflow: hidden;
   clip: rect(0, 0, 0, 0);
   white-space: nowrap;
   border: 0;
}
.letters{

   font-size: 0.55vw!important
}
.lol{
   font-size: 0.55vw!important
}


@media (max-width: 1400px) {
   .letters{

      font-size: 0.65vw!important
   }
   .lol{
      font-size: 0.65vw!important
   }
   
}
.chneonbigg a,.chneonbig a{

   font-size: 0.5vw!important

}
.tooltipIMG:hover{
   opacity: 1 !important;
   cursor:pointer

}
.greenProfit{

   color:#7ebc56!important
}
.redProfit{

   color:#eb7573 !important
}
.yellowProfit{

   color:#FFB144 !important
}
.TOPAMSKRKW{
   
   color:#5a9ee7;
   cursor: initial;

}
tr.noBorder td {
   border: 0!important;
 }
 tr.noBorder {
   border: 0!important;
 }
.TOPAMSKRKW:hover{
   
   color:rgb(62, 85, 105);
   cursor: pointer;

}
.thhash {
   padding: 0px !important;
   margin: 0px !important;
   position: absolute !important;
}

.sortarrow {
   left: 4px !important;
   padding: 0px !important;
   margin: 0px !important;
   position: absolute !important;
   top: 11px !important;

   top: 0!important;
    bottom: 0!important;
    margin: auto!important;
    height: 0.5vw;

}

.thcheckbox {
   padding: 0px !important;
   margin: 0px !important;
   position: absolute !important;
}

.thtitle {
   padding: 0px !important;
   
   position: absolute !important;
   
   left: 0.7vw !important;
      width: calc(100% - 10px) !important;
   white-space: nowrap!important;
   text-align: center!important;
   overflow: hidden;

   top: 0!important;
    bottom: 0!important;
    margin: auto!important;
    height: 0.7vw!important;
    height: fit-content!important
}
.thtitle2{
   
   top: 1.6vw!important;
}
.thtitle3{
   
   top: 2.6vw!important;
}
.thtitle4{
   
   top: 3.6vw!important;
}
.thicons {
   padding: 0px !important;
   margin: 0px !important;
   position: absolute !important;
   top: 8px !important;
}

.topth {
   position: absolute;
   top: 11px !important;
}

.checkboks {
   position: absolute;
   left: 27px !important;
}

.thstar {
   left: 4px !important;
   padding: 0px !important;
   margin: 0px !important;
   position: absolute !important;
   top: 11px !important;
   left: 15px !important;
}

.filtertext {
   padding: 7px !important;
   margin: 0px !important;
   position: absolute !important;
   top: 0px !important;
   left: 14px !important;
}

.cul1>span {
   position: absolute;
   top: 6px;
   left: 5px;
}

.vimeo-wrapper .Title {
   position: absolute;
   z-index: 1000;
   display: block;
   width: 100%;
   top: -15%;
   color: #5d9fe4;
   word-wrap: break-word;
}

.vimeo-wrapper .Description {
   position: absolute;
   z-index: 1000;
   display: block;
   width: 100%;
   top: 105%;
   word-wrap: break-word;
}

@media (min-width: 1900px) {
   .dpifix {
      margin-top: 2px;
   }

   .sortarrow {
      left: 4px !important;
      padding: 0px !important;
      margin: 0px !important;
      position: absolute !important;
      top: 9px !important;

   }



   .thicons {
      padding: 0px !important;
      margin: 0px !important;
      position: absolute !important;
      top: 6px !important;
   }

   thead .cul2 i.fa-star {
      position: absolute;
      left: 40%;
      top: 9px;
   }
}

@media (min-width: 1850px) {
   .letters {
      font-size: 10px !important;
   }

   .lol {
      font-size: 10px !important;
   }

   .slideDiv1 {
      height: 180px !important;
   }
   .slideDiv4 {
      height: 130px !important;
  }
   .slideDiv5 {
   height: 120px !important;
  }
   .chneonbigg a {
      padding: 0.79vw 5px !important;
      font-size: 0.5vw !important;
   }
   
   .chneonbig a {
      padding: 0.3vw 5px !important;
      font-size: 0.5vw !important;
   }
}
@media (min-width: 1600px) {

   .slideDiv4 {
      height: 130px !important;
  }
}
@media (min-width: 1600px) {

   .slideDiv5 {
      height: 120px !important;
  }
}

.page-wrapper>.container-fluid {
   padding: 20px;
   min-height: calc(100vh - 70px);
}

.sidebar-nav .has-arrow:after {
   top: 22px !important;
}
.pricingtableTab li a.active {
    background: #409feb !important;
    color: #fff !important;
}
.sub-link.active {
   color: #5a9ee7 !important;;
}














/* Add this attribute to the element that needs a tooltip */
[data-tooltip] {
   position: relative;
   cursor: pointer;
   z-index: 1050;
 }
 
 /* Hide the tooltip content by default */
 [data-tooltip] span.before{

   text-align: left;
   font-size: 0.65vw;
   color: #737373;
   font-weight: 200;
 }

 [data-tooltip] span.before,
 [data-tooltip]:after {
   visibility: hidden;
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
   opacity: 0;
   pointer-events: none;

 }
 
 /* Position tooltip above the element */
 [data-tooltip] span.before {
   position: absolute;
   bottom: 150%;
   left: 50%;
   margin-bottom: 5px;
   margin-left: -80px;
   padding: 7px;
   width: 160px;
   -webkit-border-radius: 3px;
   -moz-border-radius: 3px;
   border-radius: 3px;
   background-color:  rgba(232,233,237,.9) ;
   color: rgb(62, 85, 105);
   border: solid 1px #e8e9ed;
   text-align: left;
   font-size: 14px;
   line-height: 1.2;
   font-size: 0.65vw;
   font-family: 'Montserrat', sans-serif;
 }
 
 /* Triangle hack to make tooltip look like a speech bubble */
 [data-tooltip]:after {
   position: absolute;
    bottom: 140%;
    left: 50%;
    margin-left: -10px;
    width: 0;
    border-top: 10px solid   rgba(232,233,237,.9);
    border-right: 10px solid transparent;
    border-left: 10px solid transparent;
    content: " ";
    font-size: 0;
    line-height: 0;
    z-index: 100;
 }
 
 /* Show tooltip content on hover */
 [data-tooltip]:hover span.before,
 [data-tooltip]:hover:after {
   visibility: visible;
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100);
   opacity: 1;
 }
 .table-bordered td, .table-bordered th {
    border: 1px solid #dee2e600;
}

[data-tooltip].bottom span.before{

bottom:unset;
top:20px
}
[data-tooltip].bottom:after{

   top:10px;
   bottom:unset;
   visibility: hidden;
   border-bottom: 10px solid   rgba(232,233,237,.9);
   border-right: 10px solid transparent;
   border-left: 10px solid transparent;



}

.tdcentreyes > .table > tbody > tr > td {border: 0px !important;padding: 5px 15px 5px 15px;border-top: none;text-align: center !important;font-weight: 500;font-size: 13px !important;color: #13110e;line-height: 25px;letter-spacing: -0.3px;}
.tdcentreyes > .table > thead > tr > td {border: 0px !important;}
.tdcentreyes > .table > tfoot > tr > td {border: 0px !important;}
.tdcentreyes > .table > thead > th {background-color: #fff !important;}
.tdcentreyes > .table > tbody > tr {background-color: #fff !important;}
.tdcentreyes > .table > tfoot > tr {background-color: #fff !important;}
.tdcentreyes > .table > tfoot > tr > td .btn > .first-face {background-color: #409feb;color: #fff;transform: translateY(0);-webkit-transform: translateY(0);}
.tdcentreyes > .table > tfoot > tr > td .btn > .second-face {position: absolute;top: 0;right: 0;bottom: 0;left: 0;z-index: 1;color: #409feb;background-color: #ffffff;transform: translateY(100%);-webkit-transform: translateY(100%);padding:7px 0;}
.tdcentreyes > .table > thead > tr > th {text-align: center !important;border:0px !important;}
.tdcentreyes > .table > thead > tr > th { background: none !important;}
.butn {background-color: #409feb !important;}

.tdcentreyes > .table > thead > tr > th strong {
   display: block;
   margin-bottom: -3px;
   text-transform: uppercase;
   font-weight: 600;
   font-size: 0.9vw;
}


/* CheckList */

.section-accordion-group {
   margin: 20px 0 40px 0;
   position: relative;
   display: -webkit-box;
   display: -moz-box;
   display: -ms-flexbox;
   display: -webkit-flex;
   display: flex;
}
.section-left {
   order: 1;
   width: 60px;
   flex: 1 60px;
   min-width: 60px;
   max-width: 60px;
   position: relative;
}


.section-left:before,.section-left:after {
   display: block;
   left: 10px;
   width: 20px;
   height: 20px;
   margin: 0 auto;
   position: absolute;
   background: #c8c8c8;
   -moz-border-radius: 50%;
   -webkit-border-radius: 50%;
   border-radius: 50%;
   content: "";  
}
.section-left:before {
   
   top: 2px;
}
.section-left:after {
   
   bottom: -18px;
}
.section-left span {
   left: 15px;
   width: 10px;
   top: 5px;
   bottom: -15px;
   margin: 0 auto;
   display: block;
   position: absolute;
   background: #c8c8c8;
}


.section-right {
   order: 2;
   flex: 1 auto;
   width: calc(100% - 60px);
}



.lesson-accordion-group {
   
   position: relative;
   margin: 0 0 25px 0;
   border-radius: 20px!important;
}


.ui-accordion-header{
   
   border-top-left-radius: 20px!important;
   border-top-right-radius: 20px!important;

   border: 1px solid #409feb!important;
   border-bottom: none !important;
   
   transition: border 0.45s cubic-bezier(0.23, 1, 0.32, 1);

   padding: 15px 106px 15px 16px!important;
   background: #F4F6F8!important;
   cursor: pointer;
}

.notActive .ui-accordion-header{
   
   border-radius: 20px!important;

   border: none!important;

}

.ui-accordion-header>.lesson-heading {
   color: #474953!important;
   font-size: 18px!important;
   font-weight: 800!important;
}

.puncte {
   background-position: left;
   background-size: 20px 20px;
   background-repeat: no-repeat;
   padding-left: 26px;
   font-family: "Roboto", sans-serif;
   font-size: 18px;
   position: absolute;
   top: 15px;
   right: 58px;
}
.puncte:before {
   font-weight: 900;
   position: absolute;
   content: "";
   top: 0;
   left: 0px;
   color: #409feb;
}

.ui-accordion-header .lesson-head-icon {
   top: 10px;
   right: 0;
   margin: 0;
   padding: 0;
   width: 50px;
   height: 46px;
   display: block;
   position: absolute;
   text-align: center;
}
.lesson-head-icon .contain-icon {
   width: 33px!important;
   height: 33px!important;
   border: 2px solid #4C90FF!important;
   border: 2px solid #409feb!important;
   margin: 0 auto!important;
   background-repeat: no-repeat!important;
   border-radius: 50%!important;
   position: relative!important;
   display: block;
   bottom: -5px;
}
.notActive .ui-accordion-header .lesson-head-icon:before {
   content: "+";
   top: 10px;
   position: absolute;
   left: 0;
   line-height: 1;
   text-align: center;
   right: 0;
   color: #409feb;
}
.ui-accordion-header .lesson-head-icon:before {
   content: "-";
   top: 8px;
   position: absolute;
   left: 0;
   line-height: 1;
   text-align: center;
   right: 0;
   color: #409feb;
}

.lesson-accordion-group h3 {
   margin:0
}
.lesson-accordion-group>.checkbox {
   top: 50%;
   left: -60px;
   cursor: pointer;
   position: absolute;
   -ms-transform: translateY(-50%);
   -webkit-transform: translateY(-50%);
   transform: translateY(-50%);
}
.checkbox input {
   display: none!important;
}

.checkbox .checkboxclass1 {
   margin: 0;
   padding: 0;
   float: left;
   width: 36px;
   height: 36px;
   color: #c8c8c8;
   text-align: center;
   background: #ffffff;
   border: 2px solid #c8c8c8;
   -moz-border-radius: 50%;
   -webkit-border-radius: 50%;
   border-radius: 50%;
   -webkit-transition: all 0.45s cubic-bezier(0.23, 1, 0.32, 1);
   -moz-transition: all 0.45s cubic-bezier(0.23, 1, 0.32, 1);
   -o-transition: all 0.45s cubic-bezier(0.23, 1, 0.32, 1);
   transition: all 0.45s cubic-bezier(0.23, 1, 0.32, 1);
   font-size: 18px!important;
   font-weight: 600!important;
   line-height: 37px!important;
}
.checkbox .checkboxclass1:before {
   top: 50%;
   left: 100%;
   width: 24px;
   content: "";
   height: 1px;
   position: absolute;
   background: #c8c8c8;
   -webkit-transition: all 0.45s cubic-bezier(0.23, 1, 0.32, 1);
   -moz-transition: all 0.45s cubic-bezier(0.23, 1, 0.32, 1);
   -o-transition: all 0.45s cubic-bezier(0.23, 1, 0.32, 1);
   transition: all 0.45s cubic-bezier(0.23, 1, 0.32, 1);
}
.checkbox .checkboxclass1:after {
   background: #409feb;
}
.checkbox .checkboxclass1:after {
   top: 50%;
   left: 0;
   right: 0;
   float: left;
   content: "";
   width: 0.001%;
   height: 0.001%;
   display: block;
   margin: 0 auto;
   position: absolute;
   -moz-border-radius: 50%;
   -webkit-border-radius: 50%;
   border-radius: 50%;
   -ms-transform: translateY(-50%);
   -webkit-transform: translateY(-50%);
   transform: translateY(-50%);
   -webkit-transition: all 0.45s cubic-bezier(0.23, 1, 0.32, 1);
   -moz-transition: all 0.45s cubic-bezier(0.23, 1, 0.32, 1);
   -o-transition: all 0.45s cubic-bezier(0.23, 1, 0.32, 1);
   transition: all 0.45s cubic-bezier(0.23, 1, 0.32, 1);
   box-sizing: border-box;

}

.checkbox svg {
   margin: 0;
   padding: 0;
   left: 11px;
   width: 17px;
   height: 22px;
   -ms-transform: translateY(-50%);
   -webkit-transform: translateY(-50%);
   transform: translateY(-50%);
}
.checkbox>svg {
   top: 50%;
   left: 4px;
   width: 12px;
   height: 12px;
   margin-top: -6px;
   position: absolute;
   pointer-events: none;
}
.wpep-content-from-editor{
   border: 1px solid #409feb !important;
   border-top: none !important;
   padding: 15px;
   border-radius: 0px 0px 20px 20px;
}
.wpep-content-from-editor:before {
   clear: both;
   content: "";
   display: block;
}

.notActive .wpep-content-from-editor{
   display: none;
}
.wpep-content-from-editor p {
   color: #454545!important;
   text-align: left;
   font-weight: 400 !important;
   margin:0;
   font-size: 14px !important;
}
.check-lesson {
   float: right;
}
.check-lesson span:hover {
   color: white;
   background: #409feb;

}
.check-lesson span {
   font-size: 17px;
   color: #409feb;
   font-weight: 600;
   text-align: center;
   width: 250px;
   border: 2px solid #409feb;
   border-radius: 30px;
   margin-top: 0;
   padding: 8px;
   cursor: pointer;
   text-transform: uppercase;
   margin-left: 16px;
}

.lesson-completed .check-lesson span {
   color: #eb7573 ;
   background: white;
   border-color: #eb7573 ;


}

.lesson-completed .check-lesson span:hover {
   color: white;
   background: #eb7573;
   border-color: #eb7573 ;


}
.wpep-clearfix {
   clear: both!important;
   -webkit-box-sizing: border-box!important;
   -moz-box-sizing: border-box!important;
   box-sizing: border-box!important;
}
.wpep-clearfix:before {
   clear: both;
   content: "";
   display: block;
}




.lesson-completed .side-checkbox span{
   
   background: #409feb;
   border-color: #409feb;
   color: white;
}


.yesDone{
   display: inline;
}

.notYet{
   display: none;
}

.lesson-completed .yesDone{
   display: none;
}

.lesson-completed .notYet{
   display: inline;
}

.page-wrapper>.container-fluid {
   padding: 20px;
   min-height: calc(150vh - 70px);
}
.IsVisiblee > .section-left > span{
   display: none;
}
.IsVisiblee > .section-right >.lesson-accordion{
   display: none;
}
.IsVisiblee > .section-left:before {
   top: 8px;
}
.IsVisiblee > .section-left:after {
   visibility: hidden;
}

.onhoverwrap:hover{
   color: #409feb;
   cursor: pointer;
}

/* End CheckList */

.vertical-center {
   margin: 0 !important;
   position: absolute !important;
   left: 50% !important;
   -ms-transform: translate(-50%, 0%) !important;
   transform: translate(-50%, 0%) !important;
}

.center {
   margin: 0 !important;
   position: absolute !important;
   top: 50% !important;
   left: 50% !important;
   -ms-transform: translate(-50%, -50%) !important;
   transform: translate(-50%, -50%) !important;
}