@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');

html{margin: 0px; padding: 0px; overflow-x: hidden;}
body{background-color: #DDE0E8; padding: 0px; margin: 0px; overflow-x: hidden;}
.wrapper{background-color: #DDE0E8; font-size: 10px; line-height: 1.5; color: #666666; font-family: 'Montserrat', sans-serif; font-weight: 500;overflow-x: hidden; height: 100vh; overflow-y: auto;}
a, a:hover{color: #666666; text-decoration: none;}
.wrapper > .header{background-color: #ffffff;}
.logo{min-width: 210px;}
.logo img{cursor: pointer;}
.separator{width: 2px; height: 45px; background-color: #dcdcdc;margin: 0px 15px;}
.header .title{align-items: center; text-transform: uppercase; position: relative; padding: 0px 15px; position: relative;}
.header .title > a{display: flex;align-items: center;}
.header .title i{font-size: 16px; margin-left: 10px; transition: all 1s; text-align: center; width: 20px;}
.header .title > a > i{ background-color: #dcdcdc; border-radius: 4px; color: #000;}
.wrapper > .header .title.mouseover{background-color: #dcdcdc; cursor: pointer;}
.wrapper > .header .title.mouseover > a{color: #000;}
.title .SumoSelect>.CaptionCont>span{white-space: normal; padding-right: 10px;}
.title .SumoSelect>.CaptionCont, .title .SumoSelect:hover>.CaptionCont{border: 0px none transparent;box-shadow:0 0 0px transparent;}
.title .SumoSelect{width: 120px;}
.title .SumoSelect>.CaptionCont>label{height: 30px; margin: auto;}
.title .SumoSelect:hover>.CaptionCont>label{border: 1px solid rgba(119, 153, 208, 0.5); border-radius: 10px;}
.title .SumoSelect>.CaptionCont>label>i{/*background-image: url("../images/caretdown.svg");*/ transition: all 0.3s; height: 20px; width: 20px;}
.title .SumoSelect:hover>.CaptionCont>label>i{transform: scale(1.2);}

.profile .profilename{padding: 0px 10px;}
.profile .profileimg{border-radius: 50%;}
.profile .profileimg:hover {border-radius: 50%; box-shadow: 0 0 10px #5c578e; cursor: pointer;}
.tooltip {position: absolute;top: 0px; font-size: 15px;}
.tooltip .tooltip-inner{background-color: #5c578e; font-size: 0.7em;}
.tooltip .arrow::before{border-bottom-color: #5c578e;} 

.btngrey{background-color: #778696; border-radius: 10px; color: #FFFFFF; font-weight: 700; text-transform: uppercase; padding: 8px 15px; text-decoration: none; position: relative;border: 1px solid #778696;}
.btngrey:hover, .btngrey.inactive{background-color:#ffffff; color: #42586D; border: 1px solid #42586D; text-decoration: none; cursor: pointer;}
.btngrey .unreadcounter{position: absolute; top: -10px; right: -5px;}
.container{background-color: #DDE0E8; padding-top: 45px; max-width:100%;}

.menu{width: 170px;}
.menuitemparent{position: relative; display: flex; align-items: center; margin-bottom: 8px;width: 95%; cursor: pointer;}
.menuitemparent .menubg{width: 40px; height: 35px;background-color: #fff;border-radius: 18px;box-shadow: 1px 2px 2px #bbb5b5;position: absolute;
top: 0px; left: 0px; transition: all 0.5s;} 
.menu a:link .menubg{background-color: #fff;}
.menu a:focus .menubg{background-color: #c9cbd0;}
.menuitemparent .menubg.active{width: 100%;}
.menuitemparent .menuimg, .menuitemparent .menutxt, .menuitemparent .unreadcounter{z-index: 1;}
.menuitemparent .menuimg{width: 40px; height: 35px; text-align: center;}
.menuitemparent .menutxt{text-transform: uppercase; padding-left: 10px;}
.menuitemparent:hover .menubg{width: 100%;}
.unreadcounter{border-radius: 50%; background-color: #b20000; color: #ffffff; font-weight: 600; width: 20px; height: 20px; text-align: center; line-height: 20px;}
.menuitemparent .unreadcounter{margin-left: auto; margin-right: 8px;}
.maincontent{padding: 0px 85px 0px 0px; display: flex; flex-direction: column;}
.homeslide .hslide{position: relative;}
.homeslide .slideone{/*background: url("../images/home/bg_index.jpg") no-repeat;*/ background-size: cover;}
.homeslide .slidetwo{background-color: rgba(0,94,184, 0.7);}
.homeslide .slidethree{ background-image: linear-gradient(to right, rgba(214, 135, 94, 0.7) , rgba(204, 131, 94, 0.7));}
.homeslide .slidefour{background-color:#38C1D5;}
.homeslide .slidefive{ background-image: radial-gradient(#00A6BF, #42D1E2);}
.homecontent .homefooter{background-color: #ffffff; height: 80px; display: flex; flex-direction: row; align-items: center; padding: 0px 40px 0px 65px;}
.homeslide .slidetitle{/*background: url("../images/home/orderbooking.svg") no-repeat;*/ height: 21px; color: #ffffff; text-transform: uppercase; padding-left: 35px;  padding-top: 8px; margin-left: 65px; font-size: 1.2em;}
/*.homeslide #primaryscore.slidetitle{background: url("../images/home/icon_primary.svg") no-repeat;}*/
/*.homeslide #orderbook01.slidetitle, .homeslide #orderbook03.slidetitle{background: url("../images/home/icon_primary.svg") no-repeat;}*/
.homeslide #orderbook02.slidetitle{/*background: url("../images/home/icon_badge.svg") no-repeat;*/ padding-top: 8px;}
.homeslide #allobj.slidetitle{/*background: url("../images/home/icon_obj.svg") no-repeat;*/ padding-left: 40px;}
.homeslide #primarychart.slidetitle{/*background: url("../images/home/icon_chart.svg") no-repeat;*/ padding-left: 45px;}
.homeslide .slidecontainer{padding: 50px 0px 0px 0px; height: 330px;width: 100%; min-width: 100%;}
.homecontent{border-radius: 10px; overflow-x: hidden; box-shadow: 1px 2px 2px #bbb5b5; position: relative;}
.homeslide .slidecontainer .row{height: 100%; margin: 0 auto;padding-left: 65px;}
.homeslide .col-md-6, .homeslide .col-sm-12{padding: 0px;}
.homeheader {position: relative; z-index: 2;}
.homeheader .mycoach{/*background: url("../images/home/mycoach.svg") no-repeat;*/ height: 41px; width: 121px; color: #ffffff; font-weight: 800; text-align: center; text-transform: uppercase;position: absolute; top: -7px; left: 60px;letter-spacing: 2px;padding-top: 13px;}
.homenotification{display: flex; flex-direction: row; position: absolute; right: 90px; top:0px; border-left: 1px solid rgba(255,255,255,0.25); border-right: 1px solid rgba(255,255,255,0.25); border-bottom: 1px solid rgba(255,255,255,0.25); border-radius: 0px 0px 10px 10px;}
.homenotification a{color: #ffffff; text-transform: uppercase; border-bottom: 1px solid #fff;}
.homenotification .tabs{display: flex; flex-direction: row;align-items: center; padding: 5px 15px;}
.homenotification .tabs:first-child{border-right: 1px solid rgba(255,255,255,0.25);}
.homenotification .tabs:last-child{border-left: 1px solid rgba(255,255,255,0.25);}
.homenotification .unreadcounter{background-color: #296084; color: #ffffff; }
.homenotification .SumoSelect{width: 65px;border: 0px none;}
.homenotification .SumoSelect>.CaptionCont>label{top:5px;}
.homenotification .SelectBox{background-color: transparent; color: #ffffff; border: 0px none; padding: 0px; text-transform: uppercase;}
.homenotification .SumoSelect>.CaptionCont>label>i{/*background-image: url("../images/home/down-arrow_white.svg");*/ background-size: 11px 15px; background-position: 3px 2px; opacity: 1;}
.homenotification .SumoSelect > .optWrapper > .options li.opt{color: #000000;}
.homenotification .SumoSelect.open > .optWrapper{top:20px;}
.homenotification .SelectBox  option{color: #000000;}
.homenotification .SelectBox  option:checked {color: #000000; display: none;}
.homenotification .SumoSelect>.CaptionCont>label{width: 15px;}
.homenotification .SumoSelect>.CaptionCont>span{padding-right: 0px;}

.homefooter .social{width: 29px; height: 29px; display: inline-block;}
/*.homefooter .social#socialinfo {background: url("../images/home/social_i.svg") no-repeat 0px 0px;}
.homefooter .social#socialinfo:hover {background: url("../images/home/social_i_02.svg") no-repeat 0px 0px;}
.homefooter .social#sociallike {background: url("../images/home/social_like.svg") no-repeat 0px 0px;}
.homefooter .social#sociallike:hover {background: url("../images/home/social_like_02.svg") no-repeat 0px 0px;}
.homefooter .social#socialdislike {background: url("../images/home/social_dislike.svg") no-repeat 0px 0px;}
.homefooter .social#socialdislike:hover {background: url("../images/home/social_dislike_02.svg") no-repeat 0px 0px;}*/
.homefooter a{display: inline-block; text-align: center; font-size: 0.7em; padding-left: 10px;}
.homefooter .socialparent{margin-left: auto; }
.homefooter .footerdate{align-self: flex-end; padding-bottom: 15px;}
.homeslide .flickity-button{background: none; color: #ffffff;}
.homeslide .flickity-prev-next-button .flickity-button-icon{height: 15px;}
.cbp-spmenu{    box-shadow: -1px 2px 2px #bbb5b5;}

.navarrow{ position: absolute; top: 45%; cursor: pointer;}
.navarrow.arrowright{right: 10px;}
.navarrow.arrowleft{left: 10px;}
.navarrow i{color: rgba(255,255,255, 0.7); font-size: 2.5em;}
.navarrow:hover i{color: rgba(255,255,255, 1);}

.flashnotification{position: absolute; top: -35px; padding: 0px; margin: 0px;font-size: 1.25em; width: 100%; padding-right: 85px; text-align: center;}

.dashboard{position: relative; display: flex; flex-direction: column;min-height: calc(100vh - 155px);}

.dscroll-pane{height: calc(100vh - 155px); }
.dashboard .col-sm-4{min-width: 318px; }
.dashtabs {border-radius: 10px; background-color: #FCFCFC; box-shadow:1px 2px 2px #bbb5b5; overflow: hidden;margin-bottom: 15px;}
.dashtabs:hover{}
.dashboard .green{border-left: 10px #38AF4A solid;}
.dashboard .lightgreen{border-left: 10px #b3bb66 solid;}
.dashboard .orange{border-left: 10px #FFBF00 solid;}
.dashboard .lightorange{border-left: 10px #ff7400 solid;}
.dashboard .red{border-left: 10px #ED3024 solid;}
.dashboard .grey{border-left: 10px #C0C0C0 solid;}
.dashboard .amber{border-left: 10px #FAA919 solid;}
.dashboard .ltgreen{border-left: 10px #C7D341 solid;}
.dashtabs .header{display: flex; flex-direction: row; align-items: center; padding: 0 15px 0 10px !important;height: 60px; cursor: pointer; }
.dashtabs .header:hover{background-color: #EEF0F5;}
.dashtabs .header.open{background-color: #EEF0F5;}
.dashtabs .header .dasharrow img.close{display: block;}
.dashtabs .header .dasharrow img.open{display: none;}
.dashtabs .header.open .dasharrow img.close{display: none;}
.dashtabs .header.open .dasharrow img.open{display: block;}
.dashtabs .header.open .kpivalue {display: none;}
.dashtabs .header.open .points {display: block;}
.dashtabs .header .kpivalue {display: block;}
.dashtabs .header .points {display: none;}
.dashtabs .header .title{font-weight: 600; text-transform: uppercase; line-height: 1.2;}
.dashtabs .header .title span{font-size: 8px; font-weight: normal; text-transform: none;}
.dashtabs .header .val{margin-left: auto;  font-size: 1.5em; text-align: center; line-height: 1;}
.dashtabs .header .val span{font-size: 0.7em;}
.dashtabs .header .expandtool{padding-left: 10px; width: 10px; height: 10px; padding-right: 5px;}
.dashtabs .contentcontainer{max-height: 0px; opacity: 0; background-color: #FFFFFF; display: flex; flex-direction: column;  transition: all 1s;}
.dashtabs .contentcontainer.open{max-height: 1000px; opacity: 1;}
.dashtabs .contentcontainer .no-target{font-size: 12px; padding: 10px 0px;}
.dasharrow{display: flex;}
.dashtabs .bottomtxt{border-top: 1px solid #A8A8A8; padding: 10px; margin-top: auto; font-size: 0.9em;}
.dashtabs .bottomtxt.hidden {display: none;}
.dashtabs .content{padding: 10px 20px 10px 20px; margin-top: auto; text-align: center;}
.dashtabs .contentcontainer .content p{margin-bottom: 5px;}
.dashboard .kmtslider{border: solid 1px rgba(97,96,96, 0.5); border-radius: 20px; height: 15px; width: 100%; position: relative;
 overflow: hidden;}
.dashboard .kmtslider span{width: 24%; display: inline-block; text-align: center; z-index: 2; position: relative;}
.dashboard .kmtslider .kmtfill{width: 0%; background-color: #C4C4C4; height: 15px; position: absolute; top:0px; transition: all 0.8s;}
.dashboard .kmtanim {padding-bottom: 8px;}
.dashboard .kmtanim div{align-items: center;justify-content: flex-end;display: flex; flex-direction: column;}
.dashboard .kmtanim .col-3 img.active{display: block;}
.dashboard .kmtanim .col-3 span{font-weight: 700; color: #000; font-size: 1.3em;}
.dashboard .kmtanim .col-3.pc25 span{color: #ED3024;}
.dashboard .kmtanim .col-3.pc50 span{color: #FFBF00;}
.dashboard .kmtanim .col-3.pc75 span{color: #38AF4A !important;}
.dashboard .kmtanim .col-3.pc100 span{color: #38AF4A !important;}
.dashboard .card{flex-direction: row; background-color: transparent; border:0px none transparent;}
.dashboard .calendarcontainer{background-color: #F1F6FC; border-radius: 10px;  box-shadow:1px 2px 2px #bbb5b5; margin:20px 15px 15px;}
.dashboard .calendarcontainer .calendarstubs{text-align: center; margin: -10px auto;}
.dashboard .calendarcontainer .calendartab {margin-top: 20px; width: 90%; text-align: center;}
.dashboard .calendarcontainer .calendartab th{font-weight: 600; font-size: 0.9em; color: #7D7D7D; text-align: center;}
.dashboard .calendarcontainer .calendartab td{padding: 4px;}
.dashboard .calendarcontainer .calendartab span{font-weight: 600; color: #000000; border-radius: 50%; width: 20px; height: 20px;  display: inline-block; line-height: 21px; text-align: center; border: 1px solid #C0C0C0;}
.dashboard .calendarcontainer .calendartab .mon{font-weight: 700; font-size: 1.2em; color: #ffffff; background-color: #AEAEAF; border-radius: 10px; padding: 5px 15px; display: inline;}
.dashboard .calendarcontainer .dateltgrey{background-color: #E1E1E1 !important; border:0px none !important;}
.dashboard .calendarcontainer .dategrey{background-color: #C0C0C0 !important; border:0px none !important;}
.dashboard .calendarcontainer .dategreen{background-color:#38AF4A !important;  border:0px none !important;}
.dashboard .calendarcontainer .dateorange{background-color: #F48E06 !important;  border:0px none !important;}
.dashboard .calendarcontainer span:empty{display: none;}
.dashboard .dashtabs .ticketscontainer.contentcontainer .content{color: #606060;}
.dashboard .dashtabs .ticketscontainer.contentcontainer .content div{text-align: center;}
.dashboard .dashtabs .ticketscontainer.contentcontainer .content span{font-size: 1.4em;}
.dashboard .dashtabs .ticketscontainer.contentcontainer .content span.ticketgo{font-weight: 600;}
.dashboard .dashtabs .ticketscontainer.contentcontainer .content div:nth-of-type(3){color: #000000;}
.dashboard .donut{ border-radius: 50%; height: 75px; width: 75px; position: relative; left: -25px;}
.dashboard .donut svg{margin-left: 0px; margin-top: -8px;}
.dashboard #donutval, .dashboard .donutval{position: absolute; top: 32%; font-size: 16px; color: #606161; font-weight: 700; left: 0; right: 0; margin: auto;}

.dashboard .barcontainer{width: 90px; height: 11px;margin-left: auto; display: flex;}
.dashboard .hbarcontainer{width: 260px; display: flex; flex-direction: column; justify-content: center;}
.dashboard .hbarcontainer a, .dashboard .hbarcontainer div{display: flex; align-items: center; transition: all 1s; height: 0px; opacity: 0; cursor: pointer;}
.dashboard .hbarcontainer div{cursor: default;}
.dashboard .hbarcontainer a.show, .dashboard .hbarcontainer div.show{height: 21px; opacity: 1;}
.dashboard .hbarcontainer a > * , .dashboard .hbarcontainer div > *{margin-right: 10px;}
.dashboard .hbarcontainer .hbartext{font-weight: 600; font-size: 1.4em; color: #606161;}
.dashboard .hbarcontainer .bar{height: 12px; display: inline-block; transition: all 1s; max-width: 200px;}
.dashboard .bar{width: 0; height: 100%;}
.dashboard .bargrey{background-color: #C0C0C0;}
.dashboard .barred{background-color: #ED3024;}
.dashboard .barorange{background-color: #FFBF00;}
.dashboard .baryellow{background-color: #F4A60C;}
.dashboard .barltgreen{background-color: #B3BB66;}
.dashboard .bargreen{background-color: #38AF4A;}
.dashboard .dashtabs .gaugeval{text-align: center; font-weight: 700; font-size: 1.2em; color: #7F7F7F; width: 250px; margin: 0 auto;}
.dashtop{position:  absolute; right: 85px; top: -35px; display: flex; z-index: 2;}
.contentpages.supervisorcontainer .dashtop, .contentpages.managercontainer .dashtop, .contentpages.manager.m03 .dashtop{top: -15px;}
.dashtop .dashpoints {font-size: 1em; color: #494949;}
.dashtop .dashpoints span{font-size: 1.45em;}
.dashtop div{padding: 0 10px;}
.dashtop .btngridcontainer{display: flex; background-color: #ffffff; border-radius: 8px; padding: 3px 5px 0px; position: relative; height:25px;}
.dashtop .btngridcontainer div{padding: 0px 10px; border-radius: 4px; z-index: 2; margin-top: 2px;}
.dashtop .btngridcontainer div:first-child{margin-right: 5px;}
.dashtop .btngridcontainer .toggledash{position: absolute; width: 33px; height: 18px; top:2px;background-color: #DCE0EC; z-index: 1; left: 5px; transition: all 0.3s; padding: 0px;}
.dashtop .btngridcontainer .toggledash.gridopen{left:43px}
.dashtop .btngridcontainer .btncollapse, .btnopen{cursor: pointer;color:#494949;}
.dashtop .btngridcontainer .btncollapse-manager, .btnopen-manager{cursor: pointer;color:#494949;}

.dashtop .btngridcontainer-performance{display: flex; background-color: #ffffff; border-radius: 8px; padding: 3px 5px 0px; position: relative; height:25px; color:#fff;margin-right: 10px;}
.dashtop .btngridcontainer-performance div{padding: 0px 10px; border-radius: 4px; z-index: 2; margin-top: 2px;}
.dashtop .btngridcontainer-performance div:first-child{margin-right: 5px;}
.dashtop .btngridcontainer-performance .toggledashperformance{position: absolute; width: 70px; height: 18px; top:2px;background-color: #5c578e; z-index: 1; left: 5px; transition: all 0.3s; padding: 0px; color:#ffffff;}
.dashtop .btngridcontainer-performance .toggledashperformance.gridopen{left:81px;}
.dashtop .btngridcontainer-performance .btncollapse, .btnopen{cursor: pointer;}
.dashtop .btngridcontainer-performance .btncollapse-manager, .btnopen-manager{cursor: pointer;}
.dashtop .btngridcontainer-performance .btncollapse, .btnopen{color: #494949;}
.dashtop .btngridcontainer-performance .color-dark {color:#494949;}
.dashtop .btngridcontainer-performance .color-light {color:#ffffff;}

.dashbottom{align-self: flex-end; margin-top: auto;}
.dashtabs .header .updatetxt{display: none;}
.dashtabs .header.open .updatetxt{display: inline;}




.header-login{padding: 24px 0px 0px 12%; background-color: #ffffff;}
.wrapper.login{background-color: #ffffff;}
.msg-login{color: #7f7f7f; font-size:3em; text-align: center; font-weight: normal;}
.img-login{text-align: center; margin-bottom: -2px;}
.container.login{border-top-left-radius: 40px; border-top-right-radius: 40px; position: relative; min-height: calc(100vh - 230px); padding-top: 45px;}
.loginbox{width: 33vw; max-width: 600px; min-width: 400px;}
.logintabs {padding: 0px 30px;}
.logintabs input[type="radio"] {display: none;}
.logintabs a, .logintabs label{font-weight: 600; color: #939393; font-size: 1.4em; text-transform: uppercase; cursor: pointer; margin-bottom: 0px;}
.logintabs a.active,  .logintabs label:active{color:#414141;}
.logintabs input[type="radio"]:checked + label{color:#414141;}
.logincontainer #arrow{height: 0; width: 0; border-bottom: 16px solid #fff; border-left: 10px solid transparent; border-right: 10px solid transparent; position: relative; left: 10%; transition: 1s all;}
.logincontainer #arrow.login{left: 10%;}
.logincontainer #arrow.register{left:35%;}
.logincontainer #arrow.fpwd{left:60%;}
.logincontainer input{width: 100%; padding: 20px 40px 20px 30px; border:none 1px; border-radius: 10px; font-weight: 500; font-size: 1.3em;outline: none; margin-bottom: 15px;}
.logincontainer a.btn{color: #ffffff; background-color: #5c578e; width: 100%; border-radius: 10px; text-transform: uppercase; font-size: 1.8em; font-weight: 600; display: block; text-align: center; padding: 15px 0px; }
.logincontainer .login_btn{color: #ffffff; background-color: #5c578e; width: 100%; border-radius: 10px; text-transform: uppercase; font-size: 1.8em; font-weight: 600; display: block; text-align: center; padding: 15px 0px; }
.msgError{font-weight: 500; color: #ec1c24; font-size: 1.5em; text-align: center; padding: 10px 0px 0px; }
.logincontainer .chkbox {position: relative; cursor: pointer; font-size: 1.3em; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; padding-left: 20px;}
.logincontainer .chkbox input {position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0;}
.logincontainer .checkmark {position: absolute; top: 0; left: 0; height: 15px; width: 15px; background-color: #fff;}
.logincontainer .checkmark:after {content: ""; position: absolute; display: none; }
.logincontainer input:checked ~ .checkmark:after {display: block;}
.logincontainer .checkmark:after {left: 4px; top: 0px; width: 8px; height: 11px; border: solid #000; border-width: 0 2px 2px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); }
.logincontainer .logtabs{display: none;}
.logincontainer .showpwd{position: absolute; top: 25%;right: 10px;}

.container.login .licenseboxcontainer{position: absolute; top: 10%; left: 0; right: 0; margin: 0 auto; border-radius: 20px; background-color: #ffffff; width: 90%; display: none;}
.container.login .licenseboxcontainerlogin{position: absolute; top: 10%; left: 0; right: 0; margin: 0 auto; border-radius: 20px; background-color: #ffffff; width: 90%;}
.container.login .licensebox{ padding: 2% 5%;}
.container.login .licensebox h4{text-decoration: underline;}
.hidepwdimg{display: none;}

.licensebox .chkbox {position: relative; cursor: pointer; font-size: 1.3em;  -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; padding-left: 25px;}
.licensebox .chkbox input {position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0;}
.licensebox .checkmark {position: absolute; top: 0; left: 0; height: 20px; width: 20px; background-color: #414141; border-radius: 5px;}
.licensebox .checkmark:after {content: ""; position: absolute; display: none; }
.licensebox input:checked ~ .checkmark:after {display: block;}
.licensebox .checkmark:after {left: 6px; top: 2px; width: 8px; height: 11px; border: solid #fff; border-width: 0 2px 2px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); }
.licensebox .btn{border-radius: 10px; border: 1px solid #414141; background-color: #fff; color: #414141; padding: 10px 20px;}
.licensebox .btn.sub{background-color: #355389; border-radius: 10px; border:none transparent; color: #fff; margin-right: 20px;}
.licensebox .licensetxt{height: 100px;}

.line{border: solid 1px #414141;}
.copyright{font-size: 1em; color: #231f20; text-align: center; bottom: 0px;}

.innerpages{position: relative; display: flex; flex-direction: column;}
.contentpages .maincontent{min-height: calc(100vh - 155px);}

.dashtabs.updates{max-width: 475px;}
.dashtabs.updates .header{padding-left: 30px !important;}
.dashtabs.updates .header i{color: #494949; font-size: 1.6em;}
.dashtabs.updates .header .title{font-size: 1.4em;color: #494949; padding-left: 15px; font-weight: 600;}
.dashtabs.updates .header .unreadcounter{margin-left: auto; font-size: 1.2em; width: 28px; height: 28px; line-height: 28px;}

.tabscroll-pane{height: 270px;}
.uptabcontent{display: flex; flex-direction:  row; border-bottom: 1px solid rgba(0,0,0,0.3);margin-bottom: 20px; margin-right: 20px; margin-top: 20px;}
.uptabcontent div:first-child{padding-right: 15px;}
.uptabcontent div:last-child{padding-right: 15px; padding-left: 15px; margin-left: auto;}
.uptabcontent p{font-size: 1.2em; text-align: left; margin-bottom: 20px;}
.uptabcontent span{font-size: 0.85em; font-weight: 300;}
.newmsg, .newmsg:hover{background-color: #5c578e; display: inline-block; color: #ffffff; font-size: 1.2em !important; padding: 3px 11px; border-radius: 10px; text-transform: capitalize; font-weight: 500 !important; width: 50px; text-align: center; cursor: pointer;}
.newdetail, .newdetail:hover { background-color: #fff; color: #5c578e; display: inline-block; border-radius: 4px; font-size: 1.2em !important;  border: 1px solid #5c578e; padding: 3px 11px; border-radius: 10px; text-transform: capitalize; font-weight: 500 !important; width: 50px; text-align: center; cursor: pointer; }
.newnotice, .newnotice:hover{background-color: #5c578e; display: inline-block; color: #ffffff; font-size: 1.2em !important; padding: 3px 11px; border-radius: 10px; text-transform: capitalize; font-weight: 500 !important; width: 80px; text-align: center; cursor: pointer;align-self: start;}

.uptabcontent a{color: #5c578e; font-size: 9px; text-align: left;display: block;}
.dashtabs .contentcontainer.deskopen{max-height: 500px; opacity: 1;}
.dashtabs .header.deskopen{background-color: #EEF0F5;}
.mobshow{display: none;}
.mobshow p{text-transform: uppercase; font-size: 1.2em; color: #606060; margin-bottom: 40px;}


.breadcrumb{background-color: #fefefe; border-radius: 10px; font-size: 0.9em; color: #a19e9d; padding: 0px 10px; margin: 0px; position: fixed; top: 80px; height: 20px; align-items: center; min-width: 90px; z-index: 2; display: none;}
.breadcrumb i, .breadcrumb img{color: #666361;margin-right: 10px;}
.horimob{height: 1px; width: 100%; background-color: #fff; position: fixed; left: 0; top: 106px; z-index: 2; display: none;}
.horiline{height: 1px; width: 100%; background-color: #dce0ec;}
.horiline02{height: 1px; width: 100%; background-color: rgba(151,151,151,0.5);}
.horiline03{height: 1px; width: 100%; background-color: rgba(0,0,0,0.5);}

.dashtabs.leaderboard{max-width: 665px;}
.dashtabs.leaderboard .header{cursor: auto;}
.dashtabs.leaderboard .tabscroll-pane{height: 415px; white-space: nowrap;}
.dashtabs.leaderboard .tableader{width: 95%;}
.dashtabs.leaderboard .header .tableader{margin-left: 10px;}
.dashtabs.leaderboard .tableader th{color: #494949; font-size: 1.4em;font-weight: 500;}
.dashtabs.leaderboard .tableader th:first-child, .dashtabs.leaderboard .tableader th:last-child, .dashtabs.leaderboard .tableader td:first-child, .dashtabs.leaderboard .tableader td:last-child{width: 15%;}
.dashtabs.leaderboard .tableader th:first-child, .dashtabs.leaderboard .tableader th:last-child{text-align: center;}
.dashtabs.leaderboard .tableader th:nth-child(2){padding-left: 70px;}
.dashtabs.leaderboard .tableader td:nth-child(2){padding: 10px;}
.dashtabs.leaderboard .tableader td{border-bottom: 1px solid rgba(151,151,151,0.5);}
.dashtabs.leaderboard .tableader .leadername img{width: 40px; height: 40px;}
.dashtabs.leaderboard .leaderpos{font-size: 1.4em; font-weight: 500;color: #494949;  display: inline-block; line-height: 30px;}
.dashtabs.leaderboard .leaderpos.badge{background: url("/images/leaderboard/badge_big.svg") no-repeat; background-size: cover; background-position:  0 1px; width: 36px; height: 36px;}
.dashtabs.leaderboard .leaderpos.sm{font-size: 1.2em;line-height: 20px;}
.dashtabs.leaderboard .leaderpos.badge.sm{ width: 26px; height: 26px; background-size: 26px 26px;}
.dashtabs.leaderboard .leadername{display: flex; flex-direction: row;}
.dashtabs.leaderboard .leadername p{color: #494949; font-size: 1.2em; margin: 0px; text-align: left; padding-left: 10px;}
.dashtabs.leaderboard .leadername p span{color: #888888; font-size: 0.85em; font-weight: 400;}
.dashtabs.leaderboard .tableader .leaderpoint{color: #494949; font-size: 1.2em;}
.dashtabs.leaderboard .leaderprofile{padding-top: 10px;}
.dashtabs.leaderboard .leaderprofile p{color: #494949; font-size: 1.6em; text-transform: uppercase; margin: 10px 0px;}
.dashtabs.leaderboard .leaderprofile p span{color: #888888; font-size:0.8em; text-transform: none;}

.leaderheadercontainer{display: flex; max-width: 665px; align-items: center; padding-bottom: 15px; margin-top: -30px; padding-right: 25px;}
.leaderselect{border-radius: 8px; background-color: #5c578e; padding: 5px 8px; color: #ffffff; font-size: 1.2em; margin-right: 20px; min-width: 165px; min-height: 45px; justify-content:center; display: flex; flex-direction: column; cursor: pointer; position: relative;}
.leaderselect i{position: absolute; right: 10px;}
.leaderselect.active{background-color: #fff; color: #5c578e; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; z-index: 2;}
.leaderselect.active i::before{content: "\f0d8";}
.leaderselect.active span{display: none;}
.leaderselect span{font-family: 'Roboto'; }
.leadertoggle{display: flex; background-color: #ffffff; border-radius: 13px; padding:2px; margin-left: auto; height: 26px; align-items: center;position: relative; width: 86px;}

.leadertoggle div{padding: 2px 7px; z-index: 2;}
.leadertoggle div:first-child{margin-right: 5px;}
.leadertoggle div a{color: #5c578e;}
.leadertoggle div.active{font-size: 1.2em; border-radius: 13px;}
.leadertoggle div.active a{color: #ffffff; }
.leadertoggle .togglebgpurple{position: absolute; top: 2px;background-color: #5c578e; height: 22px; width: 42px;z-index: 1;border-radius: 13px; transition: 0.3s all;left: 2px;}
.leadertoggle .togglebgpurple.ytd{left: 42px;}

.switchtoggle{display: flex; border-radius: 8px; margin-right: 10px; align-items: center;position: relative; width: 161px; height: 35px; padding: 3px; border: solid 1px #bfbebe; background-color: #fff;}
.switchtoggle.mobile{background-color: #ffffff; margin: auto;}
.switchtoggle div{padding: 2px 5px; z-index: 2;}
.switchtoggle .btnswitch{font-size: 0.8em; border-radius: 8px; text-align: center; cursor: pointer; color: #494949;}
.switchtoggle .btnswitch.active{background-color: #5c578e; color: #ffffff; cursor: default;}

.leaderheaderdropdown{background-color: #fff; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; box-shadow: 1px 2px 2px #bbb5b5; padding: 10px 0px 0px 0px; min-width: 255px; position: absolute; z-index: 1; overflow: hidden; max-height: 0; opacity: 0; transition: all 1s;}
#selfilter.leaderheaderdropdown{right: 11%;}
.leaderheaderdropdown.open{max-height: 400px; opacity: 1;}
.leaderheaderdropdown .tabscroll-pane{height: 245px; margin-left: 20px; margin-right: 10px;}
.leadersearch{border-radius: 5px; border: solid 1px #d3dade; width: 190px; height: 28px; padding: 2px 10px; margin-bottom: 10px; margin-left: 20px; margin-right: 10px;}
.leadersearch i{font-size: 1.2em; color: #666666; padding-right: 5px;}
.leadersearch input{border: none; font-family: 'Roboto'; font-size: 1.4em; color: #999999;width: 150px;}
.leadersearch input:focus{border: none; outline: none;}
.leaderradio {display: block; position: relative; padding-left: 20px;margin-bottom: 8px; cursor: pointer; font-size: 1em;color: #333333; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; text-align: left;}
.leaderradio input {position: absolute; opacity: 0; cursor: pointer;}
.leaderradio .checkmark {position: absolute; top: 0; left: 0; height: 12px; width: 12px; border-radius: 50%; border: 1px solid #5c578e;}
.leaderradio .checkmark::after {content: "";position: absolute;display: none;}
.leaderradio input:checked ~ .checkmark::after {display: block;}
.leaderradio .checkmark::after{top: 2px;left: 0; right: 0; margin: auto; width: 6px; height: 6px; border-radius: 50%; background: #5c578e;}
.btnleaderapply, .btnleaderapply:hover, .btnleaderapply:active{background-color: #5c578e; color: #fff; font-weight: 700; font-family: 'Roboto'; font-size: 1.4em; padding: 12px 30px; border:1px solid #5c578e;}
.btnleaderclear, .btnleaderclear:hover, .btnleaderclear:active{font-weight: 500; font-family: 'Roboto'; font-size: 1.3em; color: #5c578e; padding: 10px 13px;}
.leaderfilter{padding:7px 12px 0px 0px !important; cursor: pointer; display: none;}
.leaderfilter i{font-size: 20px; color: #5c578e;}
.col-sm-4 .dashtabs.leaderboard{min-height: 480px;}
.leaderheadercontainermob{width: 230px; box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5); height: 100%;background-color: #f1f1f1; padding: 15px;position: fixed;z-index: 3;right: -250px;display: flex; flex-direction: column; transition: 1s all;}
.leaderheadercontainermob.open{right: 0px;}
.leaderheadercontainermob .title{color: #666361; font-size: 1.1em; text-transform: uppercase;}
.leaderheadercontainermob i{font-size: 1.45em; color: #1d1d1b;}
.leaderheaderfiltermob{width: 100%;  border: solid 1px #83807f; border-radius: 15px; background-color: #fff; overflow: hidden;}
.leaderselectmob{color: #666361; font-size: 1.12em; padding: 15px; display: flex; cursor: pointer;}
.leaderselectmob.active{background-color: #eef0f5;}
.leaderselectmob i.fa-caret-up{display: none;}
.leaderselectmob.active i.fa-caret-up{display: block;}
.leaderselectmob.active i.fa-caret-down{display: none;}
.leaderheaderdropdownmob{padding-left: 12px; padding-right: 5px;max-height: 0; opacity: 0; transition:1s all;}
.leaderheaderdropdownmob.open{max-height: 200px; opacity: 1;}
.leaderheaderdropdownmob .tabscroll-pane{height: 170px; margin-bottom: 20px;}
.leaderheaderdropdownmob label.leaderradio{border-bottom: 1px solid rgba(102, 99, 97, 0.5);font-size: 0.9em;padding-bottom: 10px;padding-left: 18px;    margin-top: 10px;}
.leaderheaderdropdownmob label.leaderradio .checkmark{width: 11px; height: 11px;}
.leaderheaderdropdownmob label.leaderradio .checkmark::after{top: 2px; width: 5px; height: 5px;background-color: #666361;}
.leadertogglemob{display: flex; background-color: #ffffff; border-radius: 13px; padding:2px; width: 86px; height: 26px; align-items: center;}
.leaderheadercontainermob .leadertoggle{margin: 0 auto; margin-top: 30px;}
.leaderheadercontainermob .btnleaderapply{margin-top: 40px;  border-radius: 6px; width: 97px; align-self: center;}
.badge.anim01{animation-name: scaleanim;  animation-duration: 0.5s;  animation-delay:1s;}
.badge.anim02{animation-name: scaleanim;  animation-duration: 0.5s;  animation-delay:1.5s;}
.badge.anim03{animation-name: scaleanim;  animation-duration: 0.5s;  animation-delay:2s;}

@keyframes scaleanim {
  0% {transform:scale(1,1);}
  50% {transform:scale(1.5,1.5);}
  100%  {transform:scale(1,1);}
}

.rewardstab{display: flex; justify-content: center; border-bottom: 1px solid rgba(92, 87, 142, 0.5); align-items: flex-end; margin-top: -20px; }
.rewardstab div.tab{color: #5c578e; font-size: 1.4em; cursor: pointer; padding: 0px 5px 10px; width: 160px; text-align: center; text-transform: uppercase;}
.rewardstab .unreadcounter{font-size: 10px; color: #ffffff; width: 16px; height: 16px; line-height: 16px; padding: 0px; margin-left: 5px;}
.rewardstab div.active{font-weight: 500;}
.rewardstab .activeborder{height: 2px; width: 130px; background-color: #5c578e; position: absolute; bottom: 0; left: 11px; transition: all 1s;}
.rewardstab .activeborder.tab02{left: 175px;}
.rewardstab .activeborder.tab03{left: 340px;}
.rewardcard{width: 285px; height: 150px; position: absolute; top: 0px; left: 0px;  overflow: hidden;background-position: 210px 63px !important; background-repeat: no-repeat;border-radius: 10px;}
.rewardcardcontainer{ transition: transform 0.6s; transform-style: preserve-3d; /*margin-bottom: 30px; border-radius: 10px;*/ width: 285px; height: 165px; position: relative; background-color: #fff;/*box-shadow: 1px 2px 2px #bbb5b5;*/}
.rewardcontainer-quizcard{margin-bottom: 30px; border-radius: 10px;box-shadow: 1px 2px 2px #bbb5b5;}
.rewardcardcontainer.rotate{ transform: rotateY(180deg);}
.rewardcard, .rewardview{ -webkit-backface-visibility: hidden;
  backface-visibility: hidden;}
.rewardcardcontainer.green .rewardcard{background-color: #68c0ba;}
.rewardcardcontainer.brown .rewardcard{background-color: #c0b468;}
.rewardcardcontainer.blue .rewardcard{background-color: #689bc0;}
.rewardcardcontainer.pink .rewardcard{background-color: #e1afc7;}
.rewardcardcontainer.cardgrey .rewardcard{background-color: #eeeeee;}
.rewardcardcontainer.cardgrey img{filter: grayscale(1);}
.rewardcardcontainer.cardgrey .rewardtitle, .rewardcardcontainer.cardgrey .rewarditems p, .rewardcardcontainer.cardgrey .rewarddate, .rewardcardcontainer.cardgrey .rewarditems .progressval{color: #999;}
.rewardcardcontainer.cardgrey .rewarditems .progressbar .progressbarval{background-color: #999;}


.lottie{position: absolute; top: -50%;}
.rewardnew{background-color:#5c578e; color: #fafafa; font-size: 1.5em; position: absolute; top: 6px; right: -25px; padding: 5px 10px; transform: rotate(45deg);width: 95px; text-align: center; text-transform: uppercase;}
.rewarditems{padding-top: 20px; padding-left: 30px; padding-bottom: 5px; padding-right: 30px;display: flex; flex-direction: column; height: 100%; }
.rewarditems p{color: #5c578e; font-size: 1em; margin: 0px; padding: 0px;min-height: 54px;}
.rewarditems .progressbar{width: 100px; height: 2px; border-radius: 2.5px;background-color: #ffffff; overflow: hidden; position: relative; margin-top: 10px;}
.rewarditems .progressbar .progressbarval{background-color: #5c578e; position: absolute; top: 0px; left: 0px; transition: 2s all; width: 0%; height: 2px;}
.rewarditems .progressval{ color: #5c578e; font-size: 1.4em; padding-left: 4px;}
.rewardtitle{color: #5c578e; font-size: 1.6em; font-weight: 600; line-height: 1.2; text-transform: uppercase;padding-top: 2px;}
.rewarddate{color: #ffffff; font-weight: 400; font-size: 1em;display: inline-block; padding-top: 1px;}

.rewardcardcontainer .rewardview{width: 285px; height: 150px; position: absolute; top:0; left: 0px; padding: 12px 10px 10px; display: flex; flex-direction: column; align-items: center; text-align: center; transition: 1s all;transform: rotateY(180deg);border-radius: 10px;}

.rewardcardcontainer .rewardview h6{color: #5c578e;font-size: 1.6em; margin: 0px;}
.rewardcardcontainer .rewardview p{font-size: 1.2em; font-weight: 400; color: #5c578e;margin: 0px;}
.rewardcardcontainer .rewardview i{color: #ffffff; background-color: #5c578e; font-size: 1.5em; border-radius: 50%; padding: 5px;}
.rewardcardcontainer .rewardview a{margin-top: auto;}
.rewardcardcontainer.green .rewardview{ background: linear-gradient(180deg, #68c0ba 24%, #ffffff 24%);}
.rewardcardcontainer.brown .rewardview{ background: linear-gradient(180deg, #c0b468 24%, #ffffff 24%);}
.rewardcardcontainer.blue .rewardview{ background: linear-gradient(180deg, #689bc0 24%, #ffffff 24%);}
.rewardcardcontainer.pink .rewardview{ background: linear-gradient(180deg, #e1afc7 24%, #ffffff 24%);}
.rewardcardcontainer.bgposbottom .rewardcard{background-position: 220px 86px !important; }
.rewardcardcontainer.bgposbottom .rewarditems{padding-left: 20px; padding-right: 15px;}
.rewardcardcontainer.rotate .rewardcard{z-index: 1;}
.rewardcardcontainer.rotate .rewardview{z-index: 2;}

.gamecardcontainer{max-width: 475px; position: relative; margin-bottom: 20px;}
.gamecardmain{padding: 20px; height: 100%; background-color: #ffffff; display: flex; box-shadow:1px 2px 2px #bbb5b5; border-radius: 8px; position: relative; z-index: 1;height: 120px;}
.gamecardmain>div{display: flex; flex-direction: column;}
.gamecardmain>div:first-child{flex-basis: 80%;}
.gamecardmain>div:last-child{flex-basis: 20%;}
.gamecardmain p.title{font-size: 1em; font-weight: 400; margin: 0px; color: #494949;}
.gamecardmain p.titlename{font-size: 1.2em; margin: 0px; color: #494949;}
.gamecardmain p.titlename span{font-size: 0.8em;}
.gamecardmain>div:first-child  p.titlename{padding-right: 30px;}
.gamecardmain .newmsg, .quizcard .newmsg{width: 85px; font-size: 1em !important; font-weight: 400 !important; border-radius: 4px; margin-top: auto;}
.gamecarddetail{border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; background-color: #f3f2ff; padding: 10px; height: 0px;  width: 100%; transition: all 1s; opacity: 0; margin-top: -10px;}
.gamecarddetail.open{height: 165px; opacity: 1;}
.gamecarddetail .tabscroll-pane{height: 120px;}
.gamecarddetail table{width: 100%;}
.gamecarddetail th:first-child, .gamecarddetail td:first-child{width: 75%;}
.gamecarddetail th{font-size: 1.2em; color: #235653; padding: 5px 0px; border-bottom: 1px solid rgba(151,151,151,0.5);}
.gamecarddetail td{font-size: 1em; color: #494949; padding: 10px 0px; border-bottom: 1px solid rgba(151,151,151,0.5); vertical-align: top}
.gamecarddetail td:first-child{padding-right: 15px;}
.gamecardmain .gamecardhidedetail{display: none;}

.quizcard{padding: 10px 20px 20px;}
.quizcard p{color: #494949; font-size: 1em; margin-bottom: 10px;}
.quizcard .quiztitle{color: #494949; font-size: 1.4em; margin: 0px;}
.quizcard .no_of_quiz_attempts{font-size: 9px;background-color: #788895;width: 100px;padding: 2px 10px 2px 10px;color: white;border-radius: 15px;position: fixed;top: 5px;right: 9px;}
.quizcard .qdt{color: #333333; font-size: 1em;}
.quizcard .qdt span{color: #888888; font-weight: 400;}
.quizcard i{font-size: 1.7em;}
.quizcard i.fa-frown{color: #cf1103;}
.quizcard i.fa-meh{color: #00aaff;}
.quizcard i.fa-smile{color: #38AF4A;}
.quizcard .quizresult{font-size: 0.9em; padding-left: 3px;}
.quizcard .quizresult.fail{color: #cf1103;}
.quizcard .quizresult.notattempt{color: #00aaff;}
.quizcard .quizresult.notsubmit{color: #ff9028;}
.quizcard .quizresult.pass{color: #38AF4A;}

.quizstartcontainer{width: 500px; min-height: 195px; align-self: center; background-color: #ffffff; border-radius: 8px; overflow: hidden; margin-top: 100px; display: flex; flex-direction: column;}
.quizstartcontainer .title{background-color: #eef0f5; text-align: center;font-size: 1.4em;color: #494949; padding: 15px 0px; text-transform: capitalize;}
.quizstartcontainer p{font-size: 1.4em; color: #737373; margin: 0px; font-weight: 400;}
.quizstartcontainer p span{font-size: 1.4em; color: #494949; font-weight: 500;}
.quizstartcontainer a, .quizcontainer .modal-content a{font-size: 1.6em; font-weight: 400; padding: 15px; text-transform: uppercase; display: inline-block; border:0px none;}
.quizstartcontainer a.btnback{color: #5c578e; }
.quizstartcontainer a.btnstart{color: #ffffff; background-color: #5c578e;}
.quizstartcontainer a.btnreviewanswer{color: #ffffff; background-color: #5c578e;}
#quizstartconfirm.quizstartcontainer, #quizstart{display: none; position: relative;}
#quizstartconfirm.quizstartcontainer p{color: #494949; font-weight: 500; font-size: 1.6em; text-align: center;}
#quizstartconfirm.quizstartcontainer p span{color: #737373; font-weight: 400; font-size: 1em;}
#quizstartconfirm.quizstartcontainer a, .quizcontainer .modal-content a{border-radius: 4px; width: 80px; padding: 8px 0px; text-align: center;}
#quizstartconfirm.quizstartcontainer .btnno, .quizcontainer .modal-content .btnno{ color: #5c578e; border: solid 1px #5c578e; }
#quizstartconfirm.quizstartcontainer .btnyes, .quizcontainer .modal-content .btnyes{ color: #ffffff; background-color: #5c578e; margin-left: 40px;}
.quizcontainer .timercontainer{background-color: #ffffff; border-radius: 8px; padding: 5px; width: 85px; margin-right: 80px;}
.quizcontainer .timercontainer td{color: #5c578e; font-size: 1em; font-weight: 400; text-align: center; line-height: 1;}
.quizcontainer .timercontainer td:first-child, .quizcontainer .timercontainer td:last-child{width: 40%;}
.quizcontainer .timercontainer .timercount{font-size: 1.6em; font-weight: 600; color: #5c578e;}
.quizcontainer .timercontainer .timerprogresscontainer{border-radius: 2px; background-color: #cccccc; width: 100%; position: relative; height: 3px; overflow: hidden;}
.quizcontainer .timercontainer .timerprogresscontainer .timerprogress{position: absolute; background-color: #5c578e; top: 0px; left: 0px; transition: all 1s; height: 3px;}
.quizcontainer h6{color: #5c578e;font-size: 1.4em; text-transform: uppercase;}
.quizquestioncontainer {width: 800px; margin: 0 auto; padding-top: 20px;}
.quizquestioncontainer .quizbreadcrumbmain{color: #5c578e;font-size: 1.6em; display: flex;}

.quizquestioncontainer .quizbreadcrumbcontainer{display: flex; width: 250px; justify-content:space-between; position: relative; align-items: center; margin-left: 20px; margin-bottom: 10px;}
.quizquestioncontainer .quizbreadcrumbcontainer::before{border-bottom: 1px solid #5c578e; position: absolute;top: 50%; left: 0;width: 100%; content: " ";}
.quizquestioncontainer .quizbreadcrumbcontainer .quizbreadcrumb{width: 16px; height: 16px; font-size: 9px;  border-radius: 50%; text-align: center; line-height: 15px;  border: 1px solid #5c578e; color: #5c578e; background-color: #dce0ec; z-index: 1;}
.quizquestioncontainer .quizbreadcrumbcontainer .quizbreadcrumb.active{background-color: #5c578e; color: #ffffff; border: none;}
.quizquestioncontainer .quizqt{color: #5c578e; font-size: 1.4em; position: relative; padding-left: 20px;}
.quizquestioncontainer .quizqt span{position: absolute; left: 0;top: 0px;}

.quizquestioncontainer .quizansradio{display: block; position: relative; margin-bottom: 8px; cursor: pointer; font-size: 1.2em; color: #5c578e; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; background-color: #ffffff; border-radius: 8px;box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1); padding: 8px 5px 8px 50px;}
/* text-transform: capitalize; */
.quizquestioncontainer .quizansradio:hover, .quizquestioncontainer .quizansradio.checked{background-color: #f1f4fb;}
.quizquestioncontainer .quizansradio.checked{border: 2px solid #5c578e;}
.quizquestioncontainer .quizreview .quizansradio:hover{background-color: transparent;}
.quizquestioncontainer .quizansradio input {position: absolute; opacity: 0; cursor: pointer;}
.quizquestioncontainer .quizansradio span{background-color: #dce0ec; border-radius: 50%; width: 20px; height: 20px;text-align: center; display: inline-block; position: absolute; left: 15px;}
.quizquestioncontainer .quizansradio input:checked{}
.quizquestioncontainer .btnquiznav{text-transform: uppercase; font-size: 1.2em; border-radius: 4px; padding: 5px 9px; font-weight: 400; display: flex; align-items: center;}
.quizquestioncontainer .btnquiznav i{font-size: 1.3em}
.quizquestioncontainer .btnquiznav.btnquizprev{border: solid 1px #5c578e; color: #5c578e; margin-right: 20px;}
.quizquestioncontainer .btnquiznav.btnquizprev i{padding-right: 10px;}
.quizquestioncontainer .btnquiznav.btnquiznext{background-color: #5c578e; color: #ffffff; }
.quizquestioncontainer .btnquiznav.btnquiznext i{padding-left: 10px;}
.quizquestioncontainer .btnquizsubmit{border-radius: 8px; background-color: #5c578e; padding: 8px 20px;color: #ffffff;font-size: 1.4em; font-weight: 400; display: inline-block;}
.modal-content{border-radius: 8px;overflow: hidden;}
 .modal-content .modal-header{background-color: #eef0f5; justify-content: center;border-radius: 8px; border-bottom: none 0px;}
 .modal-content .modal-header h5{color: #494949; font-size: 1.4em; font-weight: 500;}
 .modal-content .modal-body{text-align: center; color: #494949; padding: 40px 20px;}
.modal-content .modal-body p{font-size: 1.6em; margin: 0px;}
 .modal-content .modal-footer{border-top: none 0px; justify-content: center;}
.quizcontainer #modalresultdetails .modal-content .modal-footer{border-top: 1px solid rgba(0, 0, 0, 0.6); justify-content: flex-end; padding: 0px;}
.quizcontainer #modalresultdetails .modal-content .modal-footer > *{margin: 0px; border-radius: 0px; border: none;}
.quizcontainer .resulttext{color:#3b8f7b;font-size: 14px;font-weight: 600;}
.quizcontainer .resulttext.failed{color: #DB4544;}
.quizcontainer .resultmarks{font-size: 1.4em !important; color: #737373; font-weight: 400;}
.quizcontainer .resultmarks span{font-size: 1.4em !important; color: #494949; font-weight: 500;}
#quizreview #quizqt .quizansradio:hover{background-color: #fff;}
#quizreview #quizqt .quizansradio.checked:hover{background-color:#f1f4fb;}
#quizreview #quizqt .quizansradio.checked{margin-bottom: 8px; }
.quizcontainer #quizqt .useranswertext{color: #DB4544; font-weight: 400; font-size: 1.2em; margin-bottom: 5px;
    /* margin-left: 60px; */
}
.quizcontainer #quizqt .correctanswertext{color: #3b8f7b; font-weight: 400; font-size: 1.2em; margin-bottom: 5px;
    /* margin-left: 60px; */
}
.quizquestioncontainer #quizqt .quizansradio.correctanswer, .quizquestioncontainer #quizqt .quizansradio.correctanswer:hover{background-color: #3b8f7b !important; margin-bottom: 0px; color: #ffffff; }
.quizquestioncontainer #quizqt .quizansradio.correctanswer span, .quizquestioncontainer #quizqt .quizansradio.useranswer span{background-color: #ffffff; color: #5c578e;}
.quizquestioncontainer #quizqt .quizansradio.useranswer, .quizquestioncontainer #quizqt .quizansradio.useranswer:hover{background-color: #DB4544 !important; margin-bottom: 0px; color: #ffffff; }
quizquestioncontainer .tabscroll-pane{height: 260px;}



.performtooltipcontainer{position: relative; z-index: 2;}
.performtooltip{background-color: #5c578e;  border-radius: 8px; position: absolute; top: 10%; padding: 5px 10px; left: 0; right: 0; margin: 0 auto; width: 300px; color: #ffffff; padding: 0px 20px 20px; z-index: -4; opacity: 0; max-height: 0px; transition: all 1s;}
.performtooltip i{color: #ffffff; font-size: 1.1em;}
.performtooltip.show{opacity: 1; max-height: 80px;z-index: 4 !important;}




.dscroll-pane.noticepage{height: calc(100vh - 295px);}
.noticetabcard{max-width: 285px; min-height: 60px; height: 84px; border-radius: 6px; background-color: #f2f5ff; padding: 15px 20px; cursor: pointer;}
.noticetabcard p{color: #5c578e; margin: 0px;}
.noticetabcard p.ntitle{ font-size: 1.6em;}
.noticetabcard p.ntext{font-size: 1.2em;}
.noticetabcard p.ntext02{font-size: 1.4em;}
.noticetabcard .card02{display: none;}
#noticetab div.active .noticetabcard{border-bottom: 6px solid #5c578e; background-color: #ffffff;}

#noticetab > div{margin-right: 10px;}
#noticetab > div:last-child{margin-right: 0px;}

.noticetoggle{display: flex; background-color: #ffffff; border-radius: 13px; padding:2px; margin-left: auto; height: 26px; align-items: center;position: relative; width: 170px; margin-right: 80px; margin-bottom: 10px;}
.noticetoggle div{padding: 2px 7px; z-index: 2;}
.noticetoggle div:first-child{margin-right: 5px;}
.noticetoggle div a{color: #5c578e;}
.noticetoggle div.active{font-size: 1.2em;  border-radius: 13px;}
.noticetoggle div.active a{color: #ffffff; }
.noticetoggle .togglebgpurple{position: absolute; top: 2px;background-color: #5c578e; height: 22px; width:88px;z-index: 1;border-radius: 13px; transition: 0.3s all;left: 2px;}
.noticetoggle .togglebgpurple.oldest{left: 80px;}

.noticecard{cursor: pointer; border-radius: 8px; padding: 8px; background-color: #ffffff; display: flex;color: #5c578e; margin-bottom: 10px;}
.noticecard p{margin-bottom: 0px;}
.noticecard p.noticetitle{font-size: 1.6em; font-weight: 600;}
.noticecard p.noticedesc{font-size: 1.2em;text-align: justify;margin-bottom: 10px;}
.noticecard p.noticedate{font-size: 1em; margin-top: auto;}
.noticecard div:last-child{padding-left: 20px; display: flex; flex-direction: column; }
#noticemodalvideo i{color: #ffffff; font-size: 2em; position: absolute; right: 0px; top: 0px;}
#noticemodalvideo .modal-dialog{max-width: 90vw; height: 90vh;}
#noticemodalvideo .modal-content{background-color: transparent; border:0px none; height: 100%;}
#noticemodalvideo .modal-content .modal-body{padding:10px;}

.noticecard-no-content{border-radius: 8px; padding: 8px; background-color: #ffffff;margin-bottom: 10px;text-align:center;}

.noticecard-no-content p.noticetitle{font-size: 1.6em;}
.noticecard-no-content p.noticedesc{font-size: 1.4em;}
.noticecard-imageDiv{ width: 100px;min-width: 100px;height: 100px;overflow: hidden;}
.noticecard-videoDiv{ width: 100px;min-width: 100px;height: 100px;}
.noticecard-imageDiv img {width: 100%;height: 80%}
.noticecard-videoDiv img {width: 100%;}
.noticecard-playicon { position: absolute;height: 45px;width: 45px;top: 50%;transform: translate(-150%, -50%);-ms-transform: translate(-50%, -50%); }
.noticesection-counter {position: absolute;right: 0;top: 0px;margin-top: -8px;}
.notice-content-pl{ padding-left: 20px; display: flex; flex-direction: column;}

.updatesuperselect{width: 160px; min-height: 35px; text-align: left;}
.updatesuperselect i{right: 10px; font-size: 1.5em;}
.updatesuperselect.active{border-top: 1px solid rgba(0,0,0,0.2);border-left: 1px solid rgba(0,0,0,0.2); border-right: 1px solid rgba(0,0,0,0.2); z-index: 2;}
.updatesuperdropdown{border: 1px solid rgba(0,0,0,0.2); margin-top: -1px;}
.updatesuperdropdown .tabscroll-pane{height: 160px;}

.updatecheckbox {display: block; position: relative; padding-left: 20px; margin-bottom: 8px; cursor: pointer; font-size: 1em; color: #333333; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; text-align: left;}
.updatecheckbox input {position: absolute; opacity: 0; cursor: pointer;}
.updatecheckbox .checkmark {position: absolute; top: 0; left: 0; height: 14px; width: 14px;border: 1px solid #5c578e; border-radius: 3px;}
.updatecheckbox .checkmark::after {content: "";position: absolute;display: none;}
.updatecheckbox input:checked ~ .checkmark::after {display: block; }
.updatecheckbox input:checked ~ .checkmark{background-color:#5c578e; }
.updatecheckbox .checkmark::after{
  left: 4px;
  top: 1px;
  width: 4px;
  height: 8px;
  border: solid #fff;
  border-width:0 1px 1px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
#modalsendmsg i{color: #ffffff; font-size: 2em; position: absolute; right: -8px; top: -10px; background-color: #0b486b; border-radius: 50%;}
#modalsendmsg .modal-content{overflow: visible; background-color: transparent; border:0px none;}
#modalsendmsg .tabscroll-pane{height: 150px;}
#modalsendmsg .modal-content .modal-body{padding: 0px; background-color: #ffffff; border-bottom-right-radius: 8px; border-bottom-left-radius: 8px;}
#modalsendmsg .modal-content .modal-header{border-bottom-right-radius: 0px; border-bottom-left-radius: 0px;}
#modalsendmsg .msgtext{text-align: left; font-size: 1.4em; color: 737373;}
[contenteditable] {outline: 0px solid transparent;}
.btnmodalsendmsg{margin-top: 20px; background-color: #ffffff; width: 100%; text-align: center;color: #5c578e; font-size: 1.4em; text-transform: uppercase;border-radius: 8px; padding: 12px 0px; z-index: 1; position: relative;border:0;}
.sendmsgicon{width: 70px; position: absolute; top: -13px; right: 27%;}
.btnmodalsendmsg img{margin: 0 10px;}
#sendmsgtab.row{border-top: 1px solid rgba(151,151,151,0.5); margin: 0px;}
#sendmsgtab .col-4{color: #5c578e; font-size: 1.2em; text-transform: uppercase; text-align: center; border-right:  1px solid rgba(151,151,151,0.5); padding: 10px 0px; cursor: pointer;}
#sendmsgtab .col-4:last-child{border-right: 0px none;}
#sendmsgtab .col-4.active{background-color: #e8e8e8;}
#sendmsgcontainer{padding: 10px 20px;  text-align: left;}

.msgradio {position: relative; margin-bottom: 5px; cursor: pointer;  -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}
.msgradio input {position: absolute; opacity: 0; cursor: pointer;}
.msgradio p{padding:8px 10px; font-size: 1em !important; color: #737373; background-color: #f1f1f1;  border-radius: 5px;}
.msgradio input:checked + p{ border: solid 1px #5c578e;}
.sendmsgicon{width: 70px;}

.dashboard.supervisor .dashtabs .content{text-align: left;}
.dashdetails-s.dashtabs{max-width: 950px;}

.searchbox{border-radius: 25px; background-color: #ffffff; padding: 10px 15px; width: 265px; margin-left: auto; margin-bottom: 10px; }
.searchbox i{font-size: 1.4em;}
.searchbox input{margin-left: 10px; width: 85%; border:0px none;}
.searchbox input:focus{outline: none 0px;}


.dashtabs.leaderboard.dashdetails-s .tabscroll-pane{height: 380px;}
.dashtableheader{  background-color: #eef0f5; height: 60px; display: flex; align-items: center;}
.dashdetails-s .checkmark{width: 16px; height: 16px;}
.dashdetails-s .updatecheckbox{padding-left: 0px; margin: 0px; height: 16px; width: 16px;}
.dashdetails-s td{color: #494949; font-size: 1.2em;}
.dashdetails-s td.username{white-space: normal; word-break: break-word;}
.dashdetails-s a, .dashdetails-s a:hover{font-size: 1em !important; border-radius: 4px; width: auto;}
.dashdetails-s .tableader th:nth-child(2){padding-left: 10px !important;}
.dashdetails-s .tableader td:nth-child(2){padding: 15px 10px;}
.dashdetails-s .tableader th:last-child{width: 21% !important; text-align: left !important;}


.btnconnect{background-color: #5c578e; font-size: 1.4em; text-transform: uppercase; border: 1px solid #5c578e; border-radius: 8px; color: #ffffff; padding: 10px 12px;width: 105px; text-align: center; cursor: pointer;}
.btnconnect:hover{color:#fff; cursor: pointer;}
.btndetails{border-radius: 8px; background-color: #fff; color: #5c578e;font-size: 1.4em; padding: 10px 12px; text-transform: uppercase; text-align: center; margin-left: 30px;}
.btnback{background-color: #ffffff; border-radius: 6px; border: solid 1px #5c578e; font-size: 1em; text-transform: uppercase;color: #5c578e; padding: 3px 8px; cursor: pointer;}
.btnback i{padding-right: 5px; font-size: 1.2em;}


.supervisorcontainer .dscroll-pane, .managercontainer .dscroll-pane{height: calc(100vh - 295px);}
.supervisorcontainer.contentpages .maincontent, .managercontainer.contentpages .maincontent{min-height: calc(100vh - 295px);}

.dashlegendcontainer{display: flex; margin-bottom: 40px;}
.dashlegendcontainer .dashlegends{width: 100px;  margin-right: 10px; cursor: pointer;}
.dashlegendcontainer .dashlegends:last-child{margin-right: 0px;}
.dashlegendcontainer .legendscontent{background-color: #ffffff; display: flex; height: 100%; align-items: center; justify-content: center; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px;}
.dashlegendcontainer .legendscontent p{ color: #000000; font-size: 1em;text-align: center; margin:0px; padding: 0px 5px;}
.dashlegendcontainer .legendsheader{height: 5px; border-top-left-radius: 8px; border-top-right-radius: 8px;}
.dashlegendcontainer .legendsheader.red{background-color: #d92128;}
.dashlegendcontainer .legendsheader.orange{background-color: #f28900;}
.dashlegendcontainer .legendsheader.yellow{background-color: #ffbe00;}
.dashlegendcontainer .legendsheader.ltgreen{background-color: #a6d921;}
.dashlegendcontainer .legendsheader.green{background-color: #00a71b;}
.dashlegendcontainer .legendsheader.blue{background-color: #0063ff;}

.dashlegendcontainer .dashlegends.active .legendsheader.red + .legendscontent{background-color:#d92128; }
.dashlegendcontainer .dashlegends.active .legendsheader.orange + .legendscontent{background-color:#f28900; }
.dashlegendcontainer .dashlegends.active .legendsheader.yellow + .legendscontent{background-color:#ffbe00; }
.dashlegendcontainer .dashlegends.active .legendsheader.ltgreen + .legendscontent{background-color:#a6d921; }
.dashlegendcontainer .dashlegends.active .legendsheader.green + .legendscontent{background-color:#00a71b; }
.dashlegendcontainer .dashlegends.active .legendsheader.blue + .legendscontent{background-color:#0063ff; }
.dashlegendcontainer .dashlegends.active .legendscontent p{color: #ffffff;}


.supervisorcontainer .leaderselect.active{z-index: 2; border-top: 1px solid rgba(0,0,0,0.2); border-left: 1px solid rgba(0,0,0,0.2); border-right: 1px solid rgba(0,0,0,0.2);}

.rewardsupercard{height: auto; overflow: hidden;}
.rewardsupercard .rtitle{display: flex; padding: 20px; border-bottom: 1px solid #dce0ec; align-items: center;}
.rewardsupercard .rname{font-size: 1.2em;color: #494949; margin-left: 10px; margin-bottom: 0px; margin-right: 5px;}
.rewardsupercard .rpoints{font-size: 1.4em;color: #494949; margin-left: auto; margin-bottom: 0px; line-height: 1;}
.rewardsupercard .rpoints span{font-size: 0.75em; color: #888888;}
.rewardsupercard .fa-stack{height: 30px; width: 1em; line-height: 1em; color: #5c578e;}
.rewardsupercard .fa-award{font-size: 1.5em;}
.rewardsupercard .fa-star{font-size: 0.45em; padding-left: 2px;}
.rewardsupercard .fa-thumbs-up{font-size: 2em;color: #5c578e;}
.rewardsupercard .rcontent{ overflow: hidden;}
.rewardsupercard .rcontenttitle{cursor: pointer; border-bottom: solid 1px #dce0ec; padding: 12px 0px; }
.rewardsupercard .rcontenttitle .unreadcounter{margin-left: auto;}
.rewardsupercard .rcontenttext{max-height: 0px; opacity: 0; transition: all 1s;}
.rewardsupercard .rcontenttext a, .rewardsupercard .rcontenttext a:hover{color: #5c578e; margin:0px; text-transform: uppercase; padding: 15px 10px;border-bottom: 1px solid rgba(204, 204, 204, 0.5); display: block; text-decoration: none;}
.rewardsupercard .rcontenttitle.open{}
.rewardsupercard .rcontenttitle.open + .rcontenttext{max-height: 200px; opacity: 1;}
.rewardsupercard .rcontenttitle .dasharrow .close{display: block;}
.rewardsupercard .rcontenttitle .dasharrow .open{display: none;}
.rewardsupercard .rcontenttitle.open .dasharrow .close{display: none;}
.rewardsupercard .rcontenttitle.open .dasharrow .open{display: block;}
.rewardsupercard .rcontentitems{display: flex; align-items: center; padding: 15px 10px; border-bottom: 1px solid rgba(204, 204, 204, 0.5);}
.rewardsupercard .rcontentitems p{color: #333333; font-size: 1.2em; margin: 0px; padding-left: 10px;}
.rewardsupercard .rcontentitems span{font-size: 0.9em;color: #666666;}
.rewardsupercard .rcontenttext .tabscroll-pane{height: 100px;}
.rewardsupercard .rcontenttext .tabscroll-pane.ht160px{height: 160px;}
.modalawardcontainer .modal-dialog{width: 285px; height: 190px; margin: 0 auto;}
.modalawardcontainer .modal-content{background: linear-gradient(180deg, #5c578e 24%, #ffffff 24%); border: 0px none;}
.modalawardcontainer .atitle{color: #5c578e; text-transform: uppercase; font-size: 1.4em !important;}
.modalawardcontainer .atext{color: #5c578e; font-size: 1em !important;}
.modalawardcontainer .fa-reply{color: #ffffff; background-color: #5c578e; font-size: 1.5em; border-radius: 50%; padding: 5px; margin-top: 15px;}
.modalawardcontainer .modal-content .modal-body{padding: 10px !important;}

.profilecontainer{width: 730px; height: 370px;border-radius: 8px; background-color: #ffffff; margin: 0 auto;}
.profilecontainer .profileimage{text-align: center; position: relative; width: 120px; padding-top: 30px; margin: 0 auto;}
.profilecontainer .profileimage i.fa-camera{font-size: 1.7em; background-color: #502c7a; color: #ffffff; border-radius: 50%; padding: 10px; }
.profilecontainer .profileimage a{position: absolute; right: -14px; top: 55%;}
.profilecontainer .profileimage p{font-size: 1.6em; color: #494949; line-height: 1; padding-top: 5px;}
.profilecontainer .profileimage span{font-size: 0.9em; color: #888888;}
.profilecontainer .profilecontent{font-size: 1.4em; color: #494949; margin: 0px; word-break: break-all;}
.profilecontainer .profilecontent span{font-size: 0.75em; color: #888888;}
.profilecontainer .col-6{padding: 0px 25px; margin: 20px 0px;}
.profilecontainer .col-6:first-child{border-right: solid 1px rgba(151,151,151,0.5);}
.btnchgpwd, .btnchgpwd:hover{border-radius: 8px; background-color: #5c578e; font-size: 1.4em; color: #ffffff; padding: 10px 40px; display: inline-block; text-transform: uppercase;}

.chgpwdcontainer{width: 600px; height: 370px;border-radius: 8px; background-color: #ffffff; margin: 0 auto;}
.chgpwdcontainer .chgpwdcontent{width: 310px; margin: 0 auto;padding: 70px 0px;}
.chgpwdcontainer .ctitle{font-size: 2em;  color: #502c7a; font-weight: 600;  padding-bottom: 25px; text-align: center;} 
.chgpwdcontainer .inputcontainer{border: solid 1px #979797; padding: 10px 20px;  border-radius: 8px; margin: 0 auto 20px; position: relative;}
.chgpwdcontainer .inputcontainer input{border: none 0px; color: #494949; font-size: 1.2em; outline: none 0px; width: 90%;}
.chgpwdcontainer .inputcontainer .showpwd{position: absolute; right: 10px; top: 30%;}

.chgpwdcontainer .inputcontainer input::placeholder { color: #cccccc; opacity: 1; }
.chgpwdcontainer .inputcontainer input:-ms-input-placeholder {  color: #cccccc;}
.chgpwdcontainer .inputcontainer input::-ms-input-placeholder { color: #cccccc;}

.btnchgpwd02, .btnchgpwd02:hover{border-radius: 8px; background-color: #5c578e; font-size: 1.2em; color: #ffffff; padding: 8px 20px; display: inline-block; }
.btncancelpwd, .btncancelpwd:hover{ font-size: 1.2em; color: #5c578e; background-color: #ffffff;border-radius: 8px; border: solid 1px #5c578e;padding: 8px 40px; margin-left: 32px;}

.lottiefullscreen{position: absolute; top: 0px; right: 0px; z-index: 1; }

#animfullscreen02.lottiefullscreen{left: 0px; right: auto;}

.bordertop{border-top: 1px solid rgba(0, 0, 0, 0.5);}
.borbottompurple{border-bottom: 1px solid rgba(92, 87, 142, 0.5); }
.borbotwhite{border-bottom: 1px solid #fff;}
#daterange{width: 70px; min-width: 70px;}
.borderright::before{content: ""; background-color:rgba(151,151,151,0.7); height: 100%; position: absolute; right: 0px; width: 1px;}

.hoverwhite:hover{color: rgba(255,255,255,0.7);}
.homenotification .SumoSelect>.CaptionCont>span:hover{color: rgba(255,255,255,0.7);}

h6{ color: #494949;    font-size: 1.6em; margin-top: 10px;}


.businessunit{position: absolute; width: 325px; background-color: #ffffff;top: 60px;left: -4px;  z-index: 4;  border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; overflow: hidden; transition: all 0.5s; max-height: 0px; opacity: 0; border-left: 2px solid #dcdcdc;border-right: 2px solid #dcdcdc; border-bottom: 2px solid #dcdcdc;}
/*.businessunit.show::before{content: ""; border-left: 2px solid #dcdcdc;height: 75px;position: fixed;top: 2px;}*/
/*.businessunit.show::after{content: ""; border-right: 2px solid #dcdcdc;height: 74px;position: fixed;top: 2px; margin-left: 139px;}*/
.businessunit.show{max-height: 400px;  opacity: 1;}
.businessunit .tabscroll-pane{max-height: 250px;height: auto; margin: 0px 5px 0px 15px;}
.businessunit .unittab{display: flex; border-bottom: 1px solid rgba(151,151,151,0.5); padding-top:10px; padding-bottom: 10px; align-items: center; cursor: pointer;}
.businessunit .unittab:hover{background-color: #EEF0F5;}
/*.businessunit .unittab:first-child{padding-top: 0px;}*/
.businessunit .unittab p{font-size: 1.2em; color: #494949; padding-left: 15px; margin: 0px;}
.businessunit .unittab p span{font-size: 0.8em; color: #888888;}
.businessunit .unittab i{color: #5c578e; margin-left: auto;}
.businessunit .btnchangesetting{font-size: 1.4em; color: #ffffff; text-transform: uppercase; text-align: center; background-color: #5c578e; padding: 10px 0px; display: block; cursor: pointer;}

#modalbusinessunit p.title{font-size: 10px; color: #000; text-align: left;}
#modalbusinessunit .modal-dialog{width: 375px; margin: 0px auto;}
#modalbusinessunit  .modal-body{padding: 0px;}
#modalbusinessunit .business-content{max-height: 385px; width: auto; min-height: 80px;}
#modalbusinessunit .business-content .jspVerticalBar{width: 2px;}

#modalbusinessunit .searchbusinessunit{border-radius: 5px; background-color: #ffffff; padding: 3px 0px; width: 100%; border: 1px solid #d3dade;}
#modalbusinessunit .searchbusinessunit i{font-size: 12px; color: #666666;}
#modalbusinessunit .searchbusinessunit input{margin-left: 10px; width: 85%; border:0px none; font-size: 14px;}
#modalbusinessunit .searchbusinessunit input:focus{outline: none 0px;}
#modalbusinessunit .businessunititem {border-bottom: 1px solid rgba(151,151,151,0.5); text-align: left; padding-bottom: 10px; margin: 4px 0px; display: flex;}
#modalbusinessunit .businessunititem p {font-size: 12px; color: #494949; font-weight: 500;}
#modalbusinessunit .businessunititem span {font-weight: 400;}
#modalbusinessunit .businessunititem a {font-size: 10px; color: #5c578e; border:1px solid #5c578e; border-radius: 5px; padding: 3px 5px; margin-top: 2px;}
#modalbusinessunit .businessunititem a.active{color: #ffffff; background-color: #5c578e;}

#modalbusinessunit .btnunit, #modalbusinessunit .btnunit:hover{text-transform: uppercase; font-size: 14px; color: #5c578e; width: 50%; text-align: center; text-decoration: none; display: inline-block; padding: 10px 0px; cursor: pointer;}
/*#modalbusinessunit .btnunit:last-child{border-left: 1px solid #979797;}*/
#modalbusinessunit .btnunit.select{color: #ffffff; background-color: #5c578e; border-left: 0px none;}
#modalbusinessunit .btnunit.btn-cancel{float: left; border-right: 1px solid #979797;}
#modalbusinessunit .btnunit:disabled, #modalbusinessunit .btnunit[disabled]{color: #cccccc; cursor: default; pointer-events: none;}

.homehistory, .homehistory:hover{text-decoration: none; border-bottom: 0px none !important; position: relative;}
.homehistory i{font-size: 12px; margin-left: 4px; color: #ffffff;}


.historytabcontainer.active .homehistory{color: #5c578e;}

.historytabcontainer.active {background-color: #ffffff;}
.historytabcontainer.active .homehistory i{color: #333333;}

.historytab{position: absolute; background-color: #ffffff;box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5); border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; top: 30px; left: 0px; width: 170px; transition: all 0.5s; max-height: 0px; opacity: 0; z-index: -1;}
.historytab.show{max-height: 250px; opacity: 1; z-index: 2;}
.historytab > div{font-size: 1em; color: #333333; border-bottom: 1px solid rgba(102,102,102,0.5);  max-height: 0px; transition: all 0.3s;}
.historytab.show >div{max-height: 50px;padding:10px 0px 10px 20px;}

.dashtabs .contentcontainer .content .btndashdetails{display: table; margin-left: auto;}
.dashtabs .contentcontainer .content .btndashdetails i{background-color: #5c578e; color: #ffffff; border-radius: 50%; font-size: 15px; width: 20px; height: 20px; text-align: center; line-height: 20px;}

.bellnotification{position: absolute; top: 0px; width: 100%; height: 100%; background:linear-gradient(180deg, #8e93ac 12%, #ffffff 12%); display: none; padding: 50px 80px 0px; overflow: hidden;}
.bellnotification .belldate{font-size: 1.2em; color: #5c578e; font-weight: 700; margin-top: 15px;}
.bellnotification .uptabcontent p{color: #333333; font-weight: 400; margin-bottom: 10px;}
.bellnotification i{font-size: 14px; color: #606161; margin-left: 20px;}
.bellnotification .tabscroll-pane{height: 350px;}
.bellnotification .notificationtext{font-size: 1.2em; color: #333333; font-weight: 400; opacity:0; max-height: 0px; transition: all 0.3s; margin: 0px;}
.bellnotification .notificationtext.show{opacity:1; max-height:100px; margin-bottom: 10px;}
.bellnotification .uptabcontent{cursor: pointer;}
.bellnotification .uptabcontent div:last-child{display: flex;}
.bellnotification .uptabcontent .newmsg{height: 24px;}

.mname{color: #5c578e; font-weight: 400; font-size: 1.2em; margin: 0px; padding: 0px 0px 10px; display: inline-block;}
.dashboardname{font-size: 1.4em; text-align: center;color: #5c578e;}

.btncall, .btncall:hover{background-color: #5c578e; border-radius: 50% !important; color: #ffffff; margin-right: 5px; width: 20px !important; height: 20px !important; line-height: 20px; display: none; text-align: center; text-decoration: none;}

.likeconfirm{position: absolute; top: -30px; left: 0px; background-color: #ffffff; padding: 3px 10px; font-size: 1.2em; color: #5c578e; width: 44%; border-radius: 4px; align-items: center; display: none;}
.likeconfirm i.fa-info-circle{color: #008f1b; margin-right: 10px;}
.likeconfirm i.fa-times{color: #5c578e; }
.likeconfirm a{margin-left: auto;}
.likeconfirm.show{display: flex; }

.likeerror{position: absolute; top: -30px; left: 0px; background-color: #ffffff; padding: 3px 10px; font-size: 1.2em; color: #ff0d0d; width: 44%; border-radius: 4px; align-items: center; display: none;}
.likeerror i.fa-info-circle{color: #ff0d0d; margin-right: 10px;}
.likeerror i.fa-times{color: #5c578e; }
.likeerror a{margin-left: auto;}
.likeerror.show{display: flex; }

.ajaxerror{position: absolute; top: -30px; left: 0px; background-color: #ffffff; padding: 3px 10px; font-size: 1.2em; color: #ff0d0d; width: 44%; border-radius: 4px; align-items: center; display: none;}
.ajaxerror i.fa-info-circle{color: #ff0d0d; margin-right: 10px;}
.ajaxerror i.fa-times{color: #5c578e; }
.ajaxerror a{margin-left: auto;}
.ajaxerror.show{display: flex; }

.hidden{visibility: hidden;}
.box_orange{background-color: #F79508; border-radius: 10px; color: #000000; padding: 15px;     display: inline-block; font-size: 1.4em; margin-bottom: 10px;}
.box_red{background-color: #CD3227; border-radius: 10px; color: #ffffff; padding: 15px;     display: inline-block; font-size: 1.4em; margin-bottom: 10px;}
.box_white50{background-color: rgba(255,255,255,0.5);border-radius: 10px; color: #000000; padding: 15px;     display: inline-block; font-size: 1.4em; margin-bottom: 10px;}
.bg-purple{background-color: #5c578e !important;}
.bg-grey{background-color: #eeeeee;}
.txtdarkblue{color: #21184D;}
.txtblack{color: #000000;}
.txtgrey{color: #3F3F3F;}
.txt49{color: #494949;}
.txt60{color: #606060;}
.ftwt600{font-weight: 600;}
.font9px{font-size: 9px;}
.font075{font-size: 0.75em !important;}
.font1{font-size: 1em !important;}
.font11{font-size: 1.1em;}
.font125{font-size: 1.25em;}
.font13{font-size: 1.3em;}
.font135{font-size: 1.35em;}
.font14{font-size: 1.4em;}
.font15{font-size: 1.5em;}
.font16{font-size: 1.6em !important;}
.font175{font-size: 1.75em;}
.font18px{font-size: 18px;}
.font18{font-size: 1.8em;}
.font19{font-size: 1.9em;}
.font21{font-size: 2.1em;}
.font25{font-size: 2.5em;}
.padL10{padding-left: 10px;}
.padL15{padding-left: 15px;}
.padL20{padding-left: 20px;}
.padL30{padding-left: 30px;}
.padL40{padding-left: 40px;}
.padT20{padding-top: 20px;}
.padT30{padding-top: 30px;}
.padR20{padding-right: 20px;}
.padR80{padding-right: 80px;}
.padR100{padding-right: 100px;}
.marB4{margin-bottom: 4px;}
.marB3{margin-bottom: 3px;}
.marB40{margin-bottom: 40px;}
.marTauto{margin-top: auto;}
.marT3{margin-top: 3px;}
.marT10{margin-top: 10px;}
.marT15{margin-top: 15px;}
.marT30{margin-top: 30px;}
.marT40 {margin-top: 40px;}
.marLauto{margin-left: auto;}
.marL5{margin-left: 5px;}
.marL20{margin-left: 20px;}
.flaligncenter{align-self: center;}
.flalignend{align-self: flex-end;}
.alignC{text-align: center;}
.disinlineblock{display: inline-block;}
.nobor{border:0px none !important;}
.floatL{float:left;}
.clr{float: none; clear: both;}
.posAb{position: absolute;}
.mar0auto{margin: 0 auto;}
.wid60pc{width: 60%;}
.wid92px{width: 92px !important;}
.wid100px{width:100px !important;}
.wid130px{width: 130px !important;}
.wid160px{width: 160px !important;}
.wid165px{width: 165px !important;}
.wid180px{width: 180px !important;}
.wid730max{max-width: 730px;}
.wid950max{max-width: 950px;}
.wid365max{max-width: 365px;}
.h-85{height: 85%!important;}
.mh-35px{min-height: 35px;}
.op03{opacity: 0.3;}
.flex33pc{flex: 0 0 33%;}



#mobdaterange{display: none; font-size: 0.9em; color: #000000; font-weight: 600;}
#mobdaterangeupdate{display: none; font-size: 0.9em; flex: 0 0 100%; text-align: right; padding-bottom: 3px;}
.mobmenuslider{display: none;}

.tabscroll-pane .jspVerticalBar{width: 2px;}


.mobmenu {
    display: none;
    padding: 0px 15px;
}

.scrollmobmenu {
    overflow: auto;
    height: 95vh;
}

.menu-button {
    width: 20px;
    border-radius: 6px;
    position: relative;
    cursor: pointer;
    transition: all linear .3s;
    padding: 0;
    z-index: 1;
    float: right;
}

#line-1,
#line-2,
#line-3 {
    width: 100%;
    background: #606161;
    height: 2px;
    margin: 4px auto;
    border-radius: 2px;
    transition: all linear .3s;
}

.cbp-spmenu {
    background: #DDE0E8;
    position: fixed;
    
}

    .cbp-spmenu .mainMenu li {
        
    }

        .cbp-spmenu .mainMenu li .subMenu {
            display: none;
        }

            .cbp-spmenu .mainMenu li .subMenu li {
                
                border-bottom: none;
            }

                .cbp-spmenu .mainMenu li .subMenu li a {
                    
                }

        .cbp-spmenu .mainMenu li .menuTitle {
            
        }

            .cbp-spmenu .mainMenu li .menuTitle:hover {
                
            }

.cbp-spmenu {
    cursor: pointer;
}

    .cbp-spmenu a {
        
    }

        .cbp-spmenu a:hover {
            
        }

        .cbp-spmenu a:active {
            
        }



.cbp-spmenu-vertical {
    width: 240px;
    height: 100%;
    top: 0;
   
    z-index: 9999;
}

.cbp-spmenu-horizontal {
    width: 100%;
    height: 150px;
    left: 0;
    z-index: 1000;
    overflow: hidden;
}

    .cbp-spmenu-horizontal h3 {
        height: 100%;
        width: 20%;
        float: left;
    }

    .cbp-spmenu-horizontal a {
        float: left;
        width: 20%;
        padding: 0.8em;
        border-left: 1px solid #258ecd;
    }


.cbp-spmenu-right {
    right: -240px
}

.cbp-spmenu-left.cbp-spmenu-open {
    left: 0px;
}

.cbp-spmenu-right.cbp-spmenu-open {
    right: 0px;
}



.cbp-spmenu-top {
    top: -150px;
}

.cbp-spmenu-bottom {
    bottom: -150px;
}

.cbp-spmenu-top.cbp-spmenu-open {
    top: 0px;
}

.cbp-spmenu-bottom.cbp-spmenu-open {
    bottom: 0px;
}



.cbp-spmenu-push {
    overflow-x: hidden;
    position: relative;
    left: 0;
}

.cbp-spmenu-push-toright {
    left: 240px;
}

.cbp-spmenu-push-toleft {
    left: -240px;
}



.cbp-spmenu,
.cbp-spmenu-push {
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    transition: all 0.3s ease;
}



@media screen and (max-width: 55.1875em) {

    .cbp-spmenu-horizontal {
        font-size: 75%;
        height: 110px;
    }

    .cbp-spmenu-top {
        top: -110px;
    }

    .cbp-spmenu-bottom {
        bottom: -110px;
    }
}

@media screen and (max-height: 26.375em) {

    .cbp-spmenu-vertical {
        font-size: 90%;
        width: 190px;
    }

    .cbp-spmenu-left,
    .cbp-spmenu-push-toleft {
        left: -190px;
    }

    .cbp-spmenu-right {
        right: -190px;
    }

    .cbp-spmenu-push-toright {
        left: 190px;
    }
}


.navClose {
    color: #606262;
    font-size: 30px;
    font-family: Arial;
    
    left: -58px;
    padding: 8px 30px 0px 0px;
    height: 40px;
    width: 58px;
    display: none;
    cursor: pointer;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -ms-transition: all .5s ease;
    -o-transition: all .5s ease;
    transition: all .5s ease;
    width: 100%;
    text-align: right;
    width:100%
}

.closeOpen {
    display: block;
}


@media only screen and (max-width: 1920px) and (min-width:1290px) {
    .col-md-2 {max-width: 210px;}
    .col-md-10{ max-width: calc(100vw - 250px); flex: calc(100vw - 250px);}
    .maincontent{padding:  0px 65px 0px 0px;}
}

@media only screen and (max-width: 1366px) {
    .container.login{padding-top: 25px;}
    .quizcontainer .timercontainer{background-color: #ffffff; border-radius: 8px; padding: 5px; width: 85px;margin-right: 0;}

}


@media only screen and (max-width: 1260px) {
    .maincontent{padding:10px 10px 0px 0px;}
    .container .col-md-2{-ms-flex: 0 0 19%; flex: 0 0 19%; max-width: 19%;}
    .container .col-md-10{-ms-flex: 0 0 80%; flex: 0 0 80%; max-width: 80%;}
    .slidecontainer .col-sm-6{padding: 0px;}
    .logo {min-width: calc(100vw * 19/100);}
    .header .col-md-6:last-child.padR100{padding-right: 40px;}
    .flashnotification{padding-right: 10px;}
    .quizcontainer .timercontainer{background-color: #ffffff; border-radius: 8px; padding: 5px; width: 85px;margin-right: 0;}

}


@media only screen and (max-width: 1180px) {
    #rewardcontainer .col-sm-4, .srewardspage .col-sm-4{max-width: 315px;}
    .dashtop{right: 5px;}
    .quizquestioncontainer{width: 100%;}
    .loginbox{width: 45vw;}
    .logincontainer input, .logincontainer a.btn{padding-top: 10px; padding-bottom: 10px;}
    #noticetab{padding-right: 0px;}
    .noticetoggle{margin-right: 0px;}
}

@media (min-width: 1024px) {
    .mt-20 { margin-top: 20px; }
}

@media screen and (max-height: 650px) and (min-width:900px) and (max-width:1260px){
    .loginbox{width: 40vw;}
    
}

@media only screen and (width: 900px) {
    .noticetabcard{
        min-width: 230px;
    }
}

@media only screen and (max-width: 800px) {
    .container .col-md-2{display: none;}
    .mainpagecontent { margin-top: 0px !important; }
    
    .header .logo{min-width: auto; padding-left: 15px;}
    .header .separator{margin: 0px 10px;}
    .header .SelectBox{padding-left: 0px; padding-right: 0px;}
    #daterange{display: none;}
    #mobdaterange{display: block;}
    #mobdaterange + .separator{display: none;}
    #mobdaterangeupdate{display: block;}
    #daterangeupdate{display: none;}
    .header .col-md-6:last-child .separator{display: none;}
    .header .col-md-6:last-child{flex-wrap: wrap; width: 230px;}
    .header .col-md-6:last-child .profile{padding-right: 10px; padding-left: 10px;}
    .header .col-md-6:last-child .profile .profilename{display: none;}
    .header .switchtoggle.desktop{display: none;}
    .mobmenu {display: block;}
    .maincontent {padding: 10px 15px 0px 0px;}
    .maincontent.dashboard{padding-top: 0px;}
    .scrollmobmenu .menu{padding-left: 20px;}
    .scrollmobmenu .menuitemparent .menubg{width: 100%; border-radius: 14px;}
    .scrollmobmenu .menu{width: 220px;}
    .container{padding-top: 25px;}
    .container .col-md-10{-ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%;}
    .mobmenuslider{display: block; padding-top: 30px;}
    .mobmenuslider .menuitemparent{width: auto;flex-direction: column; min-width: 75px;  padding-top: 10px; font-size: 0.9em; padding-right: 10px;}
    .mobmenuslider .menuimg{width: 65px; height: 50px; background-color: #fff; border-radius: 16px;  box-shadow: 1px 2px 2px #bbb5b5; }
    .mobmenuslider .menuitemparent .menutxt{padding: 5px 0px; text-align: center;}
    .mobmenuslider .menuitemparent .unreadcounter{position: absolute; right: 5px;  top:0px; background-color: #D32027; color: #ffffff;}
    .slidecontainer .col-md-6:last-child img, .slidecontainer .col-sm-12 img{max-width: 100%; height: auto;}
    .homeheader .mycoach{left: 27px;}
    .homenotification{right: 30px;}
    .homeslide .slidetitle{margin-left: 35px;}
    .homeslide .slidecontainer .row{padding-left: 35px;padding-right: 35px;}
    .flickity-prev-next-button.previous {left: -10px;}
    .flickity-prev-next-button.next {right: -10px;}
    
    .homecontent .homefooter{padding: 0px 30px 0px 35px;}
    
    .scrollmobmenu .menuprofileimg{ z-index: 1;}
    .scrollmobmenu .menuprofileimg img{border:2px solid #ffffff; border-radius: 50%;}
    .scrollmobmenu .menuprofilename{color: #ffffff; background-color: #512C79; border-radius: 10px; width: 100%; text-align: center; padding-top: 18px; padding-bottom: 5px; margin-top: -12px;}
    .scrollmobmenu .menuprofilename a{color: #fff; text-decoration: underline; font-size: 0.8em;}
    .header .col-md-6:last-child.padR100 {padding-right: 30px;}
    
    .flashnotification{ width: 100%; font-size: 1em; position: relative; top: auto;}
    .dashboard .row{}
    
    .dscroll-pane{margin-top: 20px;}
    .dscroll-pane.updates-content{margin-top: 30px;}
    .likeconfirm{top:6px;}
    .likeerror{top:6px;}
    .ajaxerror{top:6px;}
    
    .contentpages{padding-top: 0px;margin-top: 25px;overflow-y: scroll;}
    .dashtop{top: 110px;right: 10px;position: fixed;width: 100%;background-color: #DDE0E8;justify-content: flex-end; padding-bottom: 10px;}
    .breadcrumb{display: flex;top: 110px;}
    .horimob{display: block;top: 140px;}
    .dashtabs .contentcontainer.deskopen{max-height: 0px; opacity: 0;}
    .dashtabs .header.deskopen{background-color: #FCFCFC;}
    .dashtabs .contentcontainer.deskopen.open{max-height: 500px; opacity: 1;}
    .dashtabs .header.deskopen.open{background-color: #EEF0F5;}
    .mobshow{display: block;}
    .leaderheadercontainer{display: none;}
    .leadercontainer{flex-direction: column-reverse;}
    .leadercontainer .col-sm-8, .leadercontainer .col-sm-4{-ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%;}
    .leadercontainer .col-sm-4 .contentcontainer {display: flex; flex-direction: row; flex-wrap: wrap; }
    .leadercontainer .col-sm-4 .contentcontainer .content{width: 50%;position: relative;}
    .leadercontainer .col-sm-4 .contentcontainer .horiline{display: none;}
    .leadercontainer .col-sm-4 .contentcontainer .horiline.mob800{display: block;margin-top: 10px;}
    .dashtabs.leaderboard{max-width: 100%; margin-right: 5px;}
    .leaderprofile{display: flex;}
    .leaderprofile img{width: 60px; height: 60px;}
    .leaderprofile p{align-self: center; padding-left: 10px;}
    .leaderfilter{display: block;}
    .col-sm-4 .dashtabs.leaderboard{min-height: auto;}
    .dashtabs.leaderboard .leaderprofile p{font-size: 1.4em; text-align: left;}
    .dashtabs.leaderboard .leaderprofile p span{font-size: 1em;}
    .borderleftmob::before{content: ""; background-color:rgba(151,151,151,0.7); height: 48px; position: absolute; left: 0px; width: 1px;}
    .padL0mob{padding-left: 0px !important;}
    .padR0mob{padding-right: 0px !important;}
    .leadercontainer .col-sm-4 .contentcontainer .content.padL0mob .leadername{justify-content: flex-end;}
    #rewardcontainer .carousel-inner{padding-top: 0px !important;}
    #rewardcontainer .carousel-item .row, .srewardspage .row{justify-content: center;}
    .rewardstab{margin-top: 4px; position: fixed; background-color: #DDE0E8; z-index: 1; width: 100%; left: 0;}
    .rewardspage.dscroll-pane{margin-top: 50px;}
    .btngrey .unreadcounter{right: auto; left: -5px;}
    .navarrow{background-color: rgba(255,255,255, 0.5); border-radius: 50%; width: 25px; height: 25px; text-align: center;}
    .navarrow.arrowright{right: 1px;}
    .navarrow.arrowleft{left: 1px;}
    .navarrow i.fa-caret-right{padding-left: 3px;}
    .navarrow i.fa-caret-left{padding-right: 5px;}
    .dscroll-pane.quiz{margin-top: -10px;}
    .loginbox{width: 90%;}
    
    /*NEW FOR DEMO*/
    /*#noticetab{display: block !important;} */ 
    /*#noticetab .carouselbtn{ margin-right: 10px; margin-bottom: 5px;}
    #noticecontainer .carousel-inner{padding-top: 0px !important;}*/
    /*.noticetabcard{padding: 10px; min-height: auto;}*/
    
    
    .noticetabcard p.ntitle {font-size: 1.4em;}
    
    
    .searchbox{margin-top: 10px; margin-right: 10px;}
    .supervisorcontainer .btnback{margin-top: 10px; display: inline-block;}
    
    .profilepage .col-12.ml-4{margin: 0px !important;}
    .profilecontainer{width: 100%;}
    .contentpages.supervisorcontainer .dashtop{top: 75px;}
    .contentpages.supervisorcontainer, .contentpages.noticeboardcontainer{overflow-y:hidden}
    .contentpages.supervisorcontainer .dscroll-pane, .contentpages.noticeboardcontainer .dscroll-pane {overflow-y:scroll;}
    .dashlegendcontainer { display: block; margin-bottom: 10px;}
    .dashlegendcontainer .legendscontent{min-height: 50px;}
    .contentpages.supervisorcontainer .dashtop{width:auto;padding-bottom:0px;}
    .contentpages.manager .d-flex.mb-2.mt-n3{margin-top: 0px !important;}
    .contentpages.manager {overflow-y: hidden;}
    .contentpages.manager .dscroll-pane{overflow-y: scroll;}
    .contentpages.manager .dashtop{padding-bottom: 0px;}
    .contentpages.manager.managercontainer .dashtop, .contentpages.manager .dashtop, .contentpages.manager.m03 .dashtop{width: auto;top: 110px;}
    .contentpages.mt-n4.manager.managercontainer, .contentpages.mt-n4.manager{margin-top: -5px !important;}
    .btnback{display: inline-block;}
    .btncall{display: inline-block !important;}
    .rewardscontainer.contentpages{overflow-y: hidden;}
    .rewardscontainer.contentpages .dscroll-pane{overflow-y: scroll;}
    .quizcontainer .timercontainer{background-color: #ffffff; border-radius: 8px; padding: 5px; width: 85px;margin-right: 0;}


    /*NEW FOR DEMO*/
    .header .logo{display: none;}
    .header .logo + .separator{display: none;}
    .moblogo{position: absolute; top: 10px; left: 55px; }
    .scrollmobmenu{height: 90vh; margin-top: 20px;}
}


@media only screen and (max-width: 768px) {
    .slidecontainer .col-md-6 span.txtgrey.disinlineblock, .slidecontainer .col-md-6 span.txtdarkblue.disinlineblock{display: block; padding-left: 0; padding-top: 10px;}
    .slidecontainer .col-md-6 span.txtblack {padding-top: 0px;}
    .homecontent{max-height: calc(100vh - 250px);}
    .title .SumoSelect:hover>.CaptionCont>label{border: none; border-radius: 0px;}
    .copyright{bottom: 0vh;}
    .dashtop{top: 100px;}
    .contentpages.manager.managercontainer .dashtop, .contentpages.manager .dashtop{top: 83px;}
    .breadcrumb{top: 105px;}
    .horimob{top: 130px;}
    .rewardstab{margin-top: -15px;}
    #quiztab.rewardstab{margin-top: -10px;}
}

@media only screen and (max-width: 760px) {
    .homeslide .slidetitle{position: relative;margin-bottom: 8px; margin-left: 50px}
    .slidecontainer .col-sm-12{align-self: center;}
    .container{padding-bottom: 0px;}
    .slidecontainer .col-md-6 span.txtgrey.disinlineblock, .slidecontainer .col-md-6 span.txtdarkblue.disinlineblock{display: inline-block; 
     padding-left: 10px; padding-top: 0px;}
    .slidecontainer .col-md-6:first-child {align-self: start !important; padding-top: 10px;}
    .container{padding-top: 15px;}
    .homecontent .homefooter{height: 60px;}
    .mobmenuslider{padding-top: 10px;}
    .header{padding: 5px 0px !important;}
    
    .homeslide .slidecontainer{height:calc(100vh - 300px); }
    .homeslide.shownotification .slidecontainer{height:calc(100vh - 330px); }
    .bellnotification .tabscroll-pane{height:calc(100vh - 300px);}
    .bellnotification{background: linear-gradient(180deg, #8e93ac 8%, #ffffff 8%); padding-left: 30px; padding-right: 30px;}
    
    .homeslide .slidecontainer .row{padding-left: 45px; height: 95%;}
    .homeslide .slidecontainer .col-md-6:last-child{max-height:  50%; height: 50%;}
    .homeslide .slidecontainer .col-md-6:last-child img{ width: auto; max-height:  100%;}
    .homecontent {max-height: 100%;}
    .slidecontainer .font18px, .slidecontainer .box_white50.font18px{font-size: 16px;}
    .slidecontainer .box_orange, .slidecontainer .box_white50 {font-size: 1.2em;}
    .slidecontainer .font25{font-size: 2em;}
    .slidecontainer .font18{font-size: 1.6em;}
    .homeslide .slidecontainer{padding-top: 40px;}
    /*.homeslide .slideone{background: url("../images/home/bg_index_mob.jpg") no-repeat; background-size: 100% 100%;}*/
    
     .dashtop{top: 80px;}
    .breadcrumb{top: 85px;}
    .horimob{top: 112px;}
    .dscroll-pane {margin-top: 10px;}
    .dscroll-pane.updates-content{margin-top: 30px;}
    .likeconfirm{width: 95%;top: 6px;}
    .likeerror{width: 95%;top: 6px;}
    .ajaxerror{width: 95%;top: 6px;}
    .searchbox{margin-top: 15px;}
    .dashboard.supervisor .d-flex.mr-5.wid950max{margin-right: 0px !important;}
    .contentpages.manager.m03 .dashtop{top: 75px;}
    .quizcontainer .timercontainer{background-color: #ffffff; border-radius: 8px; padding: 5px; width: 85px;margin-right: 0;}

}

@media only screen and (max-width: 635px) {
    .dashboard .row{justify-content: center;}
    .dashboard .dashbottom{width: 100%;}
    .dashboard .dashbottom img{width: 100%;}
    
    .gamecardmain p.titlename{font-size: 1.4em;}
    .gamecardmain p.titlename span{font-size: 1em;}
    .gamecardmain {padding: 20px;}
    .gamecardmain>div:first-child p.titlename{padding-right: 20px;}
    .gamecardmain>div:first-child {flex-basis: 73%;}
    .gamecardmain>div:last-child{flex-basis: 27%;}
    .rewardstab {margin-top: -4px;} 
    #quiztab.rewardstab{margin-top: -1px;}
    .dscroll-pane.quiz{margin-top: -6px; height: calc(100vh - 130px);}
    .quizquestioncontainer .quizqt{font-size: 1.4em;}
    .quizquestioncontainer .quizansradio{font-size: 1.2em; padding: 10px 10px 10px 50px;}
    .quizquestioncontainer .quizansradio span{width: 20px; height: 20px;}
    #quizqt{margin-top: 10px;}
    .quizquestioncontainer .d-flex.justify-content-end.pt-3.mb-3{justify-content: center !important;}
    .quizquestioncontainer .btnquizsubmit{display: block; text-align: center;}
    /* .quizquestioncontainer .tabscroll-pane{height: 0; min-height: 280px;} */
    .quizquestioncontainer .tabscroll-pane{height: 0; min-height: 160px;}
    .dashboard.supervisor .btnconnect.wid165px{margin: 0 auto;}
    .supervisorcontainer .btnback{    margin-top: 20px;}
    .chgpwdcontainer{width: 100%;}
    .contentpages.profilepage{margin-top: 0px;}
    .profilecontainer .col-6{-ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; padding-left: 25px !important; margin: 10px 0px;}
    .profilecontainer .col-6:first-child{border-right: 0px none;}
    .profilecontainer{height: auto;}
    .wid950max.d-flex.mobflexcol{flex-direction: column; margin-top: 10px;}
    .searchbox{margin-top: 0px;margin-bottom: 0px;}
    .quizcontainer .timercontainer{background-color: #ffffff; border-radius: 8px; padding: 5px; width: 85px;margin-right: 0;}
}

@media only screen and (max-width: 600px) and (max-height:1024x) {
    .quizcontainer .timercontainer{background-color: #ffffff; border-radius: 8px; padding: 5px; width: 85px;margin-right: 0;}

}

@media only screen and (max-width: 560px) {
    .supervisor .dashtabs.leaderboard .tableader th:first-child, .supervisor .dashtabs.leaderboard .tableader td:first-child{width: 5% !important;}
    .supervisor .dashtabs.leaderboard .tableader th:nth-child(2), .supervisor .dashtabs.leaderboard .tableader td:nth-child(2){white-space: normal;width: 50% !important;}
    .supervisor .dashtabs.leaderboard .tableader th:last-child, .supervisor .dashtabs.leaderboard .tableader td:last-child{width: 40% !important;}

}


@media only screen and (max-width: 515px) {
    .rewardstab{margin-top: 6px;}
    .rewardstab div.tab{ font-size: 1.2em; width: auto;}
    
    #quiztab.rewardstab .activeborder{width: 100px;}
    .rewardstab>div{width: 100%; justify-content: space-around;}
    .rewardstab .activeborder{left: 5%; width: 100px;}
    .rewardstab .activeborder.tab02{left:34%;}
    .rewardstab .activeborder.tab03{left: 69%; width: 120px;}

    #quiztab.rewardstab .activeborder{left: 7%; width: 100px;}
    #quiztab.rewardstab .activeborder.tab02{left:41%;}
    #quiztab.rewardstab .activeborder.tab03{left: 71%; width: 120px;}

    .loginbox{width:100%;}

}



@media only screen and (max-width: 480px) {
    .title .SumoSelect>.CaptionCont{font-size: 0.9em;}
    .separator{margin: 0 5px;}
    #mobdaterange, #mobdaterangeupdate{font-size: 0.8em;}
    
    .btngrey{font-size: 0.9em;}
    .header .col-md-6:last-child{width: 210px;}
    .homenotification{font-size: 0.9em;right: 17px; padding: 0px 10px;}
    .homecontent .homefooter{padding: 0px 20px 0px 20px;}
    .homecontent .homefooter .footerdate{font-size: 0.9em;}
    .slidecontainer .col-sm-12 img{width: 95%; height: auto;}
    .title .SumoSelect>.CaptionCont>span{padding-right: 19px;}
    .homeheader .mycoach {left: 16px;}
    .homeslide .slidecontainer .row{padding-left: 40px; padding-right: 20px;}
    .homeslide .slidetitle {margin-left: 40px;}
    .homenotification .tabs{padding: 2px 7px;}
    .mobmenuslider .menuitemparent{width: 23%;}
    .slidecontainer .font25 {font-size: 1.8em;}
    .slidecontainer .font18 {font-size: 1.4em;}
    .slidecontainer .font16 {font-size: 1.4em;}
    .dashtop {top: 75px;}
    .breadcrumb{top: 80px;}
    .horimob{top: 107px;}
    .quizquestioncontainer .quizbreadcrumbmain, .quizquestioncontainer .quizqt{font-size: 1.4em;}
    .quizquestioncontainer .quizansradio{font-size: 1.2em; padding: 10px 10px 10px 50px;}
    .quizquestioncontainer .quizbreadcrumbmain{flex-direction: column;}
    .quizquestioncontainer .quizbreadcrumbcontainer{width: 100%;margin-left: 0px; margin-top: 5px;}
    .quizquestioncontainer{padding-top: 5px;}
    .quizquestioncontainer .d-flex.justify-content-end.pt-2.mb-2{justify-content: center !important;}
    .quizquestioncontainer .btnquiznav{width: 100%;    justify-content: center;}    
    .contentpages.manager.managercontainer .dashtop, .contentpages.manager .dashtop{top: 75px;}
    .historytab{left: auto; right: 0px; top: 22px;}
    .sendmsgicon{right: 25%;}
    .quizcontainer .timercontainer{background-color: #ffffff; border-radius: 8px; padding: 5px; width: 85px;margin-right: 0;}

}

@media only screen and (max-width: 460px) {
    .title .SumoSelect {width: 100px;}
    .title .SumoSelect>.CaptionCont>label{width: 15px;}
    .title .SumoSelect>.CaptionCont{padding-left: 5px; padding-right: 0px;}
    #mobdaterange{padding-left: 5px;}
    .title .SumoSelect>.CaptionCont>span{padding-right: 10px;}
    .btngrey{padding: 8px 10px;}
    .header .col-md-6:last-child{width: 51%;}
    .homeheader .mycoach{width:110px; padding-left: 5px; padding-right: 5px; background-size: contain; top: -6px; padding-top: 10px;}
    .homenotification .SumoSelect>.CaptionCont>label{ width: 5px;}
    .homenotification .SumoSelect>.CaptionCont>span{padding-right: 5px;}
    .homenotification .SumoSelect{width: 50px;}
    .box_white50, .box_red, .box_orange{padding: 10px;}
    .homeslide .slidecontainer .row{padding-top: 10px; width: 95%;}
    
    
    .header .separator {margin: 0px 5px; width: 1px;}
    .homeslide .slidecontainer .row {padding-left: 25px; padding-right: 10px;}
    .homeslide .slidetitle {margin-left: 35px;}
    .header .col-md-6:first-child{padding-right: 0px;}
    .loginbox{min-width: auto;}
    .logintabs label{font-size: 1.2em;}
    .logincontainer #arrow.register {left: 32%;}
    .logincontainer #arrow.fpwd {left: 70%;}
    .licensebox .licensetxt {height: 25vh;}
    .profilecontainer .col-6:first-child{padding-left: 10px;}
    .profilecontainer .col-6:last-child{padding-right: 10px;}
    .profilecontainer .profilecontent{font-size: 1.2em;}
    .quizcontainer .timercontainer{background-color: #ffffff; border-radius: 8px; padding: 5px; width: 85px;margin-right: 0;}

}

@media only screen and (max-width: 440px) {
    .rewardstab .activeborder{left: 4%; }
    .rewardstab .activeborder.tab02{left:36%;}
    .rewardstab .activeborder.tab03{left: 68%;}
    .sendmsgicon{right: 22%;}

}

@media only screen and (max-width: 420px) {
    .quizstartcontainer{width: 90%;}
    .logintabs {padding: 0px 10px;}
    .logincontainer #arrow{left: 5%;}
    .logincontainer #arrow.register {left: 25%;}
    .rewardstab .activeborder{left: 7%; }
    .rewardstab .activeborder.tab02{left:43%;}
    .rewardstab .activeborder.tab03{left: 74%;}

}

@media only screen and (max-width: 412px) {
    .rewardstab div.tab{padding-left: 5px; padding-right: 5px;}
    .businessunit{width: 300px;}
    #modalbusinessunit .modal-dialog{width: 90%;}

}

@media only screen and (max-width: 380px) {
    .title .SumoSelect>.CaptionCont {font-size: 0.8em;}
    .title .SumoSelect {width: 90px;}
    #mobdaterange, #mobdaterangeupdate {font-size: 0.7em;}
    .btngrey{padding: 5px 8px; border-radius: 5px;}
    .btngrey .unreadcounter{top: -14px;}
    
    
    .homenotification{padding: 0px;}
    
    .mobmenuslider .menuitemparent .menutxt{font-size: 0.8em; padding-top: 5px;}
    
    .mobmenuslider .menuitemparent .unreadcounter{right: 0px;}
    
    .homeslide .slidecontainer .row{padding-top: 5px;}
    .homenotification .tabs{padding: 2px 6px;}
    .homenotification .SumoSelect>.CaptionCont>label{right: 3px;}
    .homeslide .slidetitle{margin-bottom: 5px;}
    .rewardstab{margin-top: 10px;}
    /* #quiztab.rewardstab {margin-top: 10px;} */
    .dscroll-pane.quiz{margin-top: 0px;}
    .quizquestioncontainer .btnquiznav{font-size: 1.1em;}
    .supervisorcontainer .leaderselect{min-width: 130px}
    .businessunit{top: 60px; width: 280px;}
    .leaderselect{min-width: 150px;}
    .contentpages.manager.m03 .dashtop{top: 70px;}  
    .rewardstab .activeborder.tab02{left:42%;}
    .rewardstab .activeborder.tab03{left: 73%;}
    .sendmsgicon{right: 20%;}
    .quizcontainer .timercontainer{background-color: #ffffff; border-radius: 8px; padding: 5px; width: 85px;}

}

@media only screen and (max-width: 380px) and (max-height:700px) {
    .col-sm-4 .leaderboard.dashtabs .content {padding: 10px;}
    .col-sm-4 .dashtabs.leaderboard .leaderprofile p{font-size: 1.2em;}
    .col-sm-4 .dashtabs.leaderboard .leaderprofile p span {font-size: 0.8em;}
    .col-sm-4 .dashtabs.leaderboard .leadername p.font16{font-size: 1.4em !important;}
    .col-sm-8 .dashtabs.leaderboard .tableader th{font-size: 1.4em;}
    .col-sm-8 .dashtabs.leaderboard .header{height: 40px;}
    .dashtabs.leaderboard .tableader .leaderpoint{font-size: 1.4em;}
    .dashtabs.leaderboard .tableader td:nth-child(2){padding: 10px 0px 10px 5px;}
}

@media only screen and (max-width: 360px) {
    .header .col-6:last-child{padding-left: 0px;}
    
    .homenotification .tabs .SumoSelect>.CaptionCont>label{right: 2px;}
    .rewardstab div.tab{font-size: 1.1em;}
    .bellnotification{background: linear-gradient(180deg, #8e93ac 12%, #ffffff 12%);}
    .sendmsgicon{right: 18%;}
}

@media screen and (max-height: 670px){
    .scrollmobmenu .menuprofilename{padding-bottom: 15px; padding-top: 15px;}
    .scrollmobmenu .menuitemparent{margin-bottom: 10px;}
    .scrollmobmenu .menuitemparent .menubg, .scrollmobmenu .menuitemparent .menuimg{height: 35px;}
    .scrollmobmenu .menuitemparent .menubg{border-radius: 14px;}
}
@media screen and (max-height: 600px){
    .slidecontainer .font25 {font-size: 1.6em;}
    .slidecontainer .font18 {font-size: 1.2em;}
    .slidecontainer .font18px, .slidecontainer .box_white50.font18px {font-size: 14px;} 
}

@media screen and (max-height: 550px){
    .slidecontainer .col-md-6:last-child{height: 90px !important; max-height: 90px !important;}
    
    .slidecontainer .font25{font-size: 1.4em;}
    .slidecontainer .font16 {font-size: 1.2em;}
    .slidecontainer .font18px, .slidecontainer .box_white50.font18px {font-size: 12px;}
    .box_white50, .box_red, .box_orange {padding: 8px;}
    .homeslide .slidecontainer{height: calc(100vh - 330px);}
    .msg-login{font-size: 2.5em;}
    .logincontainer input, .logincontainer a.btn{padding-top: 10px; padding-bottom: 10px;}
    .logincontainer input{margin-bottom: 10px;}
    .msgError{font-size: 1.2em;}
    .img-login img{width: 100px; height: auto;}
    .container.login{min-height: calc(100vh - 170px);}
    
}

@media screen and (max-height: 650px) and (max-width:440px){
    
}

@media screen and (min-width: 320px) and (max-width:500px){
    #noticemodalvideo .modal-dialog {
        min-height: 90vh;
        height: auto;
    }
}

.custom-close{
    z-index: 99999;
    position: absolute;
    right: 7px;
    top: 5px;
    font-size: 27px;
    background-color: white !important;
    border-radius: 50% !important;
    border: solid black 1px !important;
    padding: 0 5px !important;
}

#noticeboardVideoModal .modal-content .modal-body{
    padding: 0px 0px !important;
}

#noticeboardVideoModal .modal-header{
    padding: 5px 1rem;
}

textarea.update-text-area:focus{
    box-shadow:none !important;
}

.btnmodalsendmsg:focus{
    border:0 !important;
    outline: none !important;
    box-shadow: none !important;
}

/* .update-card-height-likes {
    height: 135px;
}


.update-card-height {
    height: 185px;
} */

.update-no-content-card-height {
    height: 200px;
}

.emp-card-height{
    height: 70px !important;
}

.btn-stop-shadowing{
    color: #ffffff;
    background-color: #5c578e;
    margin-left: 8px;
    border-radius: 4px;
    padding: 9px 10px;
    text-align: center;
    font-weight: 500;
    border: 0px none;
}

.read-more{
    text-decoration: underline;
    color: #0000EE !important;
}

.read-less{
    text-decoration: underline;
    color: #0000EE !important;
}

.read-more:hover{
    text-decoration: underline;
}

.read-less:hover{
    text-decoration: underline;
}

.btngrey.inactive:hover {
    background: #42586D !important;
    color: #fff !important;
}

@media screen and (max-height: 570px){
    .scrollmobmenu .menuitemparent {
        margin-bottom: 4px !important;
    }
}

.menu .jspTrack {
    background: #cccccc9e !important;
}

.menu .jspDrag {
    background: #6666664a !important;
}



@media only screen and (max-width: 380px) {
    #mobdaterange {
        padding-left: 0px !important;
    }

    .wrapper > .header .title {
        min-width: 125px !important;
        max-width: 125px !important;
    }
}


@media only screen and (max-width: 330px) {
    #mobdaterange {
        padding-left: 0px !important;
    }

    .header .col-md-6:last-child .profile {
        padding: 4px !important;
    }

    .wrapper > .header .title {
        min-width: 125px !important;
        max-width: 125px !important;
    }
}


.jspVerticalBar{
    transition: all 0.3s;
}

.jspContainer:hover .jspDrag, .jspContainer:focus .jspDrag {
    /*height: 20% !important;*/
    transition: height 0.3s;
}
.jspContainer:active .jspDrag {
    /*height: 20% !important;*/
    transition: height 0.3s;
}

.jspContainer:hover > .jspVerticalBar, .jspContainer:focus > .jspVerticalBar {
    width: 7px !important;
    transition: all 0.3s;
}
.jspContainer:active > .jspVerticalBar {
    width: 7px !important;
    transition: all 0.3s;
}

.thumbnail-label {
    padding: 3px !important;
    text-align: center;
    background-color: #af3519;
    border-radius: 0px 0px 4px 4px;
    font-weight: 600;
    color: #fff;
}