.heightFull { height: 100vh; }
.loginArea .form-control {border: 1px solid #000;
border-radius: 35px;
height: 52px;font-size: 22px;}
.form-control:focus {
	box-shadow: 0 0 0 .2rem rgba(0,0,0,.10);
}

.show-add-child-modal{

    background: #F70;
    color: #fff;
    padding: 15px 50px;
    border-radius: 40px;
    text-decoration: none;
    margin-top: 20px;
    border: none;
    width: 88%;
    margin: auto;
    font-size: 25px;
}

.modal-body.text-center {
    max-width: 350;
   margin: auto;
    width: 100%;
    padding-bottom: 65px;
    display: inline-block;
}

.material-switch > input[type="checkbox"] {
    display: none;   
}

.material-switch > label {
    cursor: pointer;
    height: 0px;
    position: relative; 
    width: 40px;  
}

.material-switch > label::before {
    background: rgb(0, 0, 0);
    box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 0.5);
    border-radius: 8px;
    content: '';
    height: 16px;
    margin-top: -8px;
    position:absolute;
    opacity: 0.3;
    transition: all 0.4s ease-in-out;
    width: 40px;
}
.material-switch > label::after {
    background: rgb(255, 255, 255);
    border-radius: 16px;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
    content: '';
    height: 24px;
    left: -4px;
    margin-top: -8px;
    position: absolute;
    top: -4px;
    transition: all 0.3s ease-in-out;
    width: 24px;
}
.material-switch > input[type="checkbox"]:checked + label::before {
    background: inherit;
    opacity: 0.5;
}
.material-switch > input[type="checkbox"]:checked + label::after {
    background: inherit;
    left: 20px;
}

.margintop30 { margin-top: 30px; }
.opacity8 { opacity: 0.8; }
.opacity3 { opacity: 0.3; }
.hint-panel { position: relative; bottom: 110px;}
.hint-panel.hintDisable {
    opacity: 0.5;
}
.hint-panel a { color: #333; text-decoration: none; font-weight: 500;}
.hint {position: absolute;
    right: 20px;
    text-align: right;
    color: #333;
    font-weight: 400;
    font-size: 20px;
    width: auto;
    float: right;
    border: 1px solid #00a2fc;
    border-radius: 50px;
    padding: 6px 8px 6px 16px;
    z-index: 9;
}
.hint span { background: #00a2fc;
    border-radius: 50%;
    padding: 1px 10px 2px;
    color: #fff;
    margin-left: 6px;
}
.hintimg {position: absolute;
    text-align: center;
    right: 5px;
}
.hintimg img {width: 50%;
    margin-top: 43px;
}

/*svg container*/
.questionText .svg-container {
    min-height: 270px;
}

.svg-container { 
    display: inline-block;
    position: relative;
    /*width: 100%;*/
   
    vertical-align: middle; 
    overflow: hidden; 
}
.svg-content { 
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
}
/*end*/

.btn-custom {
	background: #e28644;
	border-color: #e28644;
	border-radius: 50px;
}
button:focus { outline: none; }

.loginArea { border:1px solid #eeeeee; border-radius: 15px; margin:15px 0;  } 
.loginBg { background: url(../images/bg.jpg) left top repeat-x; background-size: cover;  }

header { text-align: center; padding:5px 0; background:rgba(245, 245, 245, 0.6);  }
.leftDetailPanel {
	width: 100%;
	display: inline-block;
}
.red, .reportIcon.text-secondary:hover {color: #ff0000 !important;}
.green, .suffleIcon.text-secondary:hover {color: #2baf2a!important;}
.grey { background: #d7d7d7; }

.left_headerCircleIcon { display: inline-block; width: 100%; margin-top: 20px; }
.left_headerCircleIcon ul { padding: 0px; text-align: center; }
.left_headerCircleIcon ul li { list-style: none; display: inline-block; padding: 0 20px; }
.left_headerCircleIcon ul li a { display: inline-block;transition: all 0.5s; }
.left_headerCircleIcon ul li a span { display: block; color: #000; text-align: center; }
.left_headerCircleIcon ul li a img { width: 100px; text-decoration: none; }
.left_headerCircleIcon ul li a:hover { text-decoration: none; }
/*.left_headerCircleIcon ul li a:hover span.spanimg { background: #ccc;}*/
.left_headerCircleIcon ul li a:hover img { transition: all 0.5s; /*transform: rotate(25deg);*/ text-decoration: none; }
.leftMidCircleCont { display: inline-block; width: 100%; text-align: center; padding: 30px 0;  }
/*.circleOuter { background: #fff; display: inline-block; padding-top: 50px; width: 320px; height: 320px; max-width: 100%; border-radius: 50%; border:15px solid #efeff4;   }*/
.circleOuter { max-width: 100%;}

    .circleOuter span { margin: 0;}
    .circleOuter span.blueColorCoin { margin-bottom: 3px; }
.circleOuter span { display: block; text-align: center; font-size: 14px; color: #b9b9b9; margin: 0; /*position: absolute; *//*width: 100% !important; left: 0 !important;*/ }
.circleOuter span.blueColorCoin { color: #69c0f8; /*margin-bottom: 25px;*/ font-size: 14px; font-weight: 300; }
.circleOuter span.blueColorCoin a { cursor: pointer; }
.circleOuter span.collectCoinHead { color: #000; font-size: 15px; font-weight: bold;/*left: 368px; top: 211px;*/}
.circleOuter span.collectedCoin { color: #000; font-size: 50px; /*top: 210px; left: 47.3%; */}
.circleOuter span.collectedTotal { margin:0; font-weight: 300; font-size: 12px; }
.circleOuter span.collectedMonthText { margin:0; font-weight: 300; font-size: 12px; }

.diamonArea { display: inline-block; width: 100%; margin-top: 10px; }
.diamonArea ul { padding: 0px; text-align: center; }
.diamonArea ul li { list-style: none; display: inline-block; padding: 0 20px; }
.diamonArea ul li span { display: block; color: #000; text-align: center; font-size: 50px; }
.diamonArea ul li img { height: 100px; text-decoration: none; }

.leftFootergiftsArea_Outer { display: inline-block; width: 100%; text-align: center; margin-bottom: 30px; }
.leftFootergiftsArea { width: 550px; display: inline-block; max-width: 96%; background: #fbfbfb; border-radius: 60px; padding: 15px 25px; }
.leftFootergiftsArea p { font-size: 22px; text-align: left; margin-bottom: 0px; background: url(../images/gift.png) left top no-repeat; 
	padding-left: 70px; background-size: 65px 68px; }

li.startNow { background: #f7fbfe; }
li.startNow p { color: #1c1a36;  }

#workli0 { background: #fff; }

.listDeletBtn {
  display: inline-block;
    margin: -10px 0 0;
    position: absolute;
    right: 20px;  
    top: 50%;
    width: 50px;
}
.listDeletBtn img {
    height: 20px !important;
    margin: 0 !important;
    width: 20px !important;
}

/** schoolDashboard **/
header.schoolDashboard  { text-align: left; display: inline-block; width: 100%; }
.schoolDashboard nav {
    display: inline-block;
    margin-top: 3px;
}
.schoolDashboard nav ul { padding: 0; margin: 5px 0 0; }
.schoolDashboard nav ul li { list-style: none; display: inline-block; }
.schoolDashboard nav ul li a { line-height: 20px; }

.customHeaderMenu .btn-custom {
    padding: 5px 19px 8px;
}
.addTeacherArea { display: inline-block; width: 100%; margin-top: 50px; }
.addTeacherArea  h2 { margin-bottom: 20px; }
.customeInput input { border: 1px solid #000; border-radius: 35px; height: 62px; font-size: 22px; margin-bottom: 30px; padding: 0 30px; }


.modal-content { border-radius: 12px; }
.rightdetailSingleLine li img { top: 50%; background: #fff; border-radius: 50%; font-size: 32px; margin-top: -22.5px; }
.rightdetailSingleLine li.worksheet-row img { border-radius: 0; background: transparent; }

/****/
.paddingZero { padding: 0px !important;  }

.danger#reportFlagModal input.male-rad[type="radio"] + label.css-label + label {
    line-height: 25px;
}
.danger#reportFlagModal input.css-radio.male-rad[type="radio"] + label.css-label {
    height: 100%;
}

#reportFlagModal .male-fem-radio {
    margin: 0 0 8px 0;
    height: auto;
    background: #e7e7e7;
    /*width: 205px;*/
    width: 100%;
    padding: 0 15px;
    text-align: left;
    position: relative;
}

#reportFlagModal input.male-rad[type="radio"] + label.css-label + label {
    color: #000;
    margin: 0;
    line-height: 40px;
    min-height: 40px;
    position: relative;
    cursor: pointer;
    font-size: 15px;
}
#reportFlagModal input.other { height: 28px; margin: 5px 0 5px 5px; }
#reportFlagModal input.css-radio.male-rad[type="radio"] + label.css-label {
    text-align: left;
    margin: 0;
    padding: 0;
    position: absolute;
    color: #fff;
    line-height: 30px;
    min-height: 40px;
    height: auto;
    left: 0px;
    width: 100%;
}
#reportFlagModal input.male-rad[type="radio"]:checked + label.css-label + label { color: #ffffff; }
#reportFlagModal input.male-rad[type="radio"]:checked + label.css-label + label:before {
    content: "\f00c";
    margin-right: 5px;
    font-family: 'FontAwesome';
}
#reportFlagModal input.male-rad[type="radio"]:checked + label.css-label { background: #000; }

input.male-rad[type="radio"], input.css-radio.male-rad[type="radio"] {
    border: 0 none;
    clip: rect(0px, 0px, 0px, 0px);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}
input.css-radio.male-rad[type="radio"] + label.css-label, input.css-radio.male-rad[type="radio"] + input + label.css-label {
  background-position: center 0;
  background-repeat: no-repeat;
  color: #333333;
  content: "";
  cursor: pointer;
  display: inline-block;
  font-size: 19px;
  font-weight: 400;
  height: 100px;
  line-height: 100px;
  margin-bottom: 5px;
  margin-top: 5px;
  overflow: hidden;
  padding-left: 58px;
  position: relative;
  text-overflow: ellipsis;
  vertical-align: middle;
  white-space: nowrap;
  width: 100%;
  
}

input.male-rad[type="radio"]:checked + label.css-label, input.male-rad[type="radio"]:checked + input + label.css-label {
    background-position: center -100px;
}
input.male-rad[type="radio"] + label.css-label + label { font-weight:normal; font-size:19px; color:#6d6f72; }
input.male-rad[type="radio"]:checked + label.css-label + label { color:#24a5df; }
.css-label.male-lab {
    background-image: url(../images/male.png);
}

.css-label.female-lab {
    background-image: url(../images/female.png);
}

.male-fem-radio { width:100px; text-align:center; display:inline-block; margin:0 50px 0 0;}
.addTeacherArea .customeInput input {
    border: 1px solid #000;
    border-radius: 35px;
    height: 50px;
    font-size: 20px;
    margin-bottom: 20px;
    padding: 0 22px;
}

.customHeaderMenu ul { display: inline-block; }
.customHeaderMenu form {
    display: inline-block;
    margin-bottom: 0;
}
.customHeaderMenu form  button{ background: none; border:none; cursor: pointer; }
.rightAreaTAb { border-bottom: medium none;
    display: inline-block;
    text-align: left;padding-left: 55px;
    width: 100%; margin-top: 25px; border-bottom: 1px solid #0062cc;  }
  .rightAreaTAb li { display: inline-block; margin-right: 10px; margin-bottom: 0px !important; min-width: 20%; }
    .rightAreaTAb li a { line-height: 28px; border-top-left-radius: 0.5rem  !important;
    border-top-right-radius: 0.5rem !important; text-align: center; }
.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
    background-color: #fff;
    /*border-bottom: 1px solid #fff;*/
    border-color: #ececec #ececec #fff;
    color: #0062cc;
    position: relative;
    z-index: 999;
    border-width: 2px;
}

.nav-tabs .nav-link { border: 2px solid transparent}
.nav-tabs.rightAreaTAb { border-bottom: none; position: relative; }
.nav-tabs.rightAreaTAb:after { position: absolute; bottom: 0px; height: 2px; background: #ececec; content: ""; left: 55px; right: 0px; }
.pad-r0 { padding-right: 0px; } 
.startNow.teacherToggleOpen { background: none; }
/*.rightDetailTAbOuter { overflow: auto; }*/
.rightDetailTAbOuter .tab-pane { position: relative; min-height: 100%;  }
.workSheetArea .rightDetailTAbOuter .tab-pane { position: relative; min-height: auto;}

.loadMoreBtn {background: #58bbef; color: #fff; padding: 8px 25px; font-size: 16px; border-radius: 30px;     margin: 20px 0 20px 50px; display: inline-block; }
.loadMoreBtn:hover {background: #ddd; color: #333;text-decoration: none;   }
.LogoRScholName { font-size: 18px; font-weight: 500; margin: 0 0 3px 20px; display: inline-block;}
.ContLoading { position: absolute; margin: 50px 0 0 -50px; left: 50%; }

#contact-form .form-group{
    position:relative;
    margin-bottom:1.5rem
}
#contact-form .form-control-placeholder{
    position:absolute;
    top:0;
    padding:21px 0 0 50px;
    transition:all .2s;
    -webkit-transition:all .2s;
    opacity:.5;
    font-weight:400;
    color:#666;
    left:0
}
#contact-form .form-control.error .form-control-placeholder,#contact-form .form-control:focus+.form-control-placeholder,#contact-form .form-control:valid+.form-control-placeholder{
    font-size:80%;
    transform:translate3d(0,-35%,0);
    opacity:1;
    left:0;
    padding:10px 0 0 50px
}
#contact-form .form-control:focus+.error+.form-control-placeholder,#contact-form .form-control:valid+.error+.form-control-placeholder{
    font-size:100%;
    transform:translate3d(0,-35%,0);
    opacity:1;
    left:0;
    padding:10px 0 0 50px!important
}
#getInTouchEmail.error~label.form-control-placeholder,#parentRegisterEmail.error~label.form-control-placeholder,#schoolRegisterEmail.error~label.form-control-placeholder,#txtArrangeEmail.error~label.form-control-placeholder,#txtDemoEmail.error~label.form-control-placeholder{
    font-size:13px!important;
    padding-top:0!important
}
#contact-form .form-control{
    padding:25px 15px 15px 50px;
    height:auto;
    border-radius:0;
    font-size:18px;
    box-shadow:none;
    border:1px solid #ccc;
    left:0;
    background:#fff
}
#contact-form .fa{
    position:absolute;
    top:0;
    padding: 0 0 0 15px;
    transition:all .2s;
    opacity:.5;
    font-size:24px;
    left:0
}
#contact-form .form-control:focus+.fa,#contact-form .form-control:valid+.fa{
    font-size:90%;
    transform:translate3d(0,0,0);
    opacity:1;
    left:0
}
#contact-form .form-control:focus{
    border:1px solid #000;
    box-shadow:none;
    left:0
}
#contact-form .form-control:focus+label+.fa,#contact-form .form-control:focus+label+label+.fa{
    color:#000!important;
    opacity:1;
    left:0
}
label.form-control-placeholder { pointer-events: none; }

.modal {
    z-index: 9999;
}
.logoHeader {
   display: inline-block;
    margin-top: 3px;
    vertical-align: bottom;
}

.barmenuIcon {font-size: 20px; color: #999; display: inline-block;
    margin: -10px 0 0;
    position: absolute;
    right: 5px;  
    top: 50%;
    width: 15px;  
}
.barmenuIcon i { color: #999; font-size: 15px; }
.barmenuIcon.resumeSpan { width: auto; margin: -18px 0 0; }
ul.InnerRowMenu {
  background: #fff none repeat scroll 0 0;
  border-radius: 8px;
  box-shadow: 0 0 4px 2px #ddd;
  display: block;
  margin-top: -10px;
  max-width: 175px;
  min-width: 175px;
  padding: 10px 0;
  position: absolute;
  right: 15px;
  z-index: 999;
}
.InnerRowMenu li {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    display: inline-block;
    list-style: outside none none;
    margin: 0 !important;
    padding: 0 0px 0 0;
    text-align: left;
    width: 100%;
}
.InnerRowMenu li a i { margin-right: 5px; }
.InnerRowMenu li a {
    display: inline-block;
    font-size: 16px;
    font-weight: 400;
    line-height: 14px !important;
    padding: 8px 10px;
    text-decoration: none;
    width: 100%;
}
.InnerRowMenu li a:hover { background: #f1f1f1; }
.menuActive i, .barmenuIcon:hover i { color: #007bff; }

ul.InnerRowMenu.TouchBottom {
    margin-top: 0;
    margin-bottom: 15px;
    bottom: 50%;
}

.workSheetArea .nav.nav-tabs.rightAreaTAb {
    margin: 0;
    padding: 0;
}
.workSheetArea .nav-tabs.rightAreaTAb::after{left: 0; width:100%;}


.innerRadioOuter input.css-radio.male-rad[type="radio"] + label.css-label, input.css-radio.male-rad[type="radio"] + input + label.css-label
{background: transparent; height:0px; margin:0px;  }
.innerRadioOuter input.male-rad[type="radio"] + label.css-label + label {
   background: #278abe none repeat scroll 0 0;
    border: 1px solid #278abe;
    border-radius: 0;
    color: #fff;
    font-size: 20px;
    line-height: 25px;
    padding: 50px 15px;
    text-transform: uppercase;
    width: 100%;
    margin: 0 4px 4px;
    font-weight: 300;
}
 .innerRadioOuter input.male-rad[type="radio"] + label.css-label + label:hover{background: #f70;
  color: #fff;
  border-color: #f70; cursor: pointer;} 
.innerRadioOuter input.male-rad[type="radio"]:checked + label.css-label + label {
  background: #f70 ;
  color: #fff;
  border-color: #f70;
  
}
.innerRadioOuter .male-fem-radio {
   /* float: left;*/
    margin: 0 2px;
    padding: 0;
    position: relative;
    width: 32.5%;
}
.innerRadioOuter .male-fem-radio{margin-top: 0; margin-bottom: 0;}
.innerRadioOuter > h5 {
    font-size: 20px;
    margin-bottom: 10;
    margin-top: 20px;
}

.workSheetArea .nav.nav-tabs.rightAreaTAb { display: none; }


.innerRadioOuter #div-subjects input.male-rad[type="radio"] + label.css-label + label {
    font-weight: 600;
    padding: 20px 40px;
    background: none;
    border: none;
    color: #737373;
}
.innerRadioOuter #div-subjects input.male-rad[type="radio"] + label.css-label + label img {
margin-bottom: 10px;
}
/** step-wizard **/


.stepwizard-step p {
    margin-top: 10px;
}

.stepwizard-row {
    display: table-row;
}

.stepwizard {
    display: table;
    width: 100%;
    position: relative;
    margin: 15px 0 20px;
}

.stepwizard-step button[disabled] {
    opacity: 1 !important;
    filter: alpha(opacity=100) !important;
}

.stepwizard-row:before {
    background-color: #ccc;
    bottom: 0;
    content: " ";
    height: 2px;
    left: 0;
    position: absolute;
    top: 19px;
    width: 100%;

}

.stepwizard-step {
    display: table-cell;
    text-align: center;
    position: relative;
}

.btn-circle {
    border-radius: 40px;
    font-size: 16px;
    font-weight: 600;
    height: 40px;
    line-height: 25px;
    padding: 6px 0;
    text-align: center;
    width: 40px;
    background: #fff;
    border: 1px solid #ddd;
}
.btn-circle.btn-primary {
	background: #02A1E3;
	border-color: #02A1E3;
}
.suffleClass{
    cursor: no-drop;
    opacity: 0.8;
    color: #fff !important;
}

.setup-content, .setup-content1 { height: 370px; overflow-y: auto; }
.setup-content h3, .setup-content1 h3 { text-align: center; margin: 10px 0 46px; color:#333;}
.modal-title  { width: 100%; font-size: 22px; }

.innerRadioOuter { position: relative; }
.innerRadioOuter .nextprevBtn a { position: fixed; top: 50%; z-index: 9999; color: #333; font-size: 30px; }
.innerRadioOuter .nextprevBtn a.inactive { color: #eee;pointer-events: none;cursor: no-drop; }
.innerRadioOuter .nextprevBtn a.PrevStepBtn { left: 7px; }
.innerRadioOuter .nextprevBtn a.NextStepBtn { right:17px; }

.step3-count .male-fem-radio { width: 50%; float: left; padding: 2px; margin: 0;}
.innerRadioOuter .step3-count input.male-rad[type="radio"] + label.css-label + label { font-size: 15px; text-transform: none; border:0px; padding: 15px 15px; background: #eee; color: #333; }
.innerRadioOuter .step3-count input.male-rad[type="radio"]:checked + label.css-label + label, .innerRadioOuter input.male-rad[type="radio"] + label.css-label + label:hover {
  background: #f70;
  border-color: #f70;
  color: #fff;

}
.step4Btns { padding: 0 50px;}
.step4Btns .male-fem-radio { width: 100%; float: none; padding: 2px; display: inline-block; margin-bottom: 10px; }
.innerRadioOuter .step4Btns input.male-rad[type="radio"] + label.css-label + label { padding: 20px 15px; }
.innerRadioOuter #step-3 .nextprevBtn a.NextStepBtn {
    right: 25px;
}
h5.step4-AddQue { margin-bottom: 40px; font-weight: normal; }
h5.step4-AddQue span { color:green; font-weight: 500; }

.blueBox .form-control { border-color: #278abe !important;  }
.blueBox label { color: #278abe !important;  }
.blueBox i { color: #278abe !important;  }
#contact-form .form-control:focus+label, #contact-form .form-control:focus+label+.fa, #contact-form .form-control:focus+label+label+.fa { color: #f70 !important;  }
#contact-form .form-control:focus {  border-color: #f70 !important; }
.BlackBox .form-control { border-color: #278abe !important;  }
.BlackBox label { color: #278abe !important;  }
.BlackBox i { color: #278abe !important;  }

.addworksheet { margin-top: 50px; }
.addworksheet .btn-circle {
    border-radius: 40px;
    font-size: 20px;
    height: 45px;
    line-height: 28px;
    padding: 6px 0;
    width: 45px;
}
.addworksheetQUE { width: 100%; }
.addworksheetQUE h3 { text-align: left;  }
.addworksheetQUE .setup-content { height: auto; }
.pointernone{pointer-events: none;}
.padd-r0 { padding-right: 0px; }

/*.RightSideBarOuter { width: 100%; padding:20px; min-height: 100vh; background: rgba(245, 245, 245, 0.6); }*/
.RightSideBarBtns a { display: inline-block; width: 100%; text-align: center; margin-bottom: 15px; background: #278abe; border-radius: 7px; padding: 6px 10px; color: #fff; font-size: 14px;  }
.RightSideBarBtns a:hover { background: #f70; text-decoration: none; }
.RightSideBarOuter p { font-size: 14px }
.RightSideBarBtns p { margin-bottom: 9px; }
.RightSideBarBtns div.cloud { padding: 40px;}
.RightSideBarBtns div.cloud img { width: 200px;}
.formClass { padding:40px 100px; border-bottom: 1px solid #ddd; }
.borderheight { margin:40px 0 40px 100px; border: 4px dashed #ddd; padding: 20px 0; }
.titlename {color: #666; font-size: small;}
.form-group pre { font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol" }
.QueBox { /*background: #f1f1f1;*/ padding:15px 20px; padding-top: 45px; position: relative; }
.QueBox label { margin: 0px; font-size: 18px; font-weight: 400;  }
.QueCount { position: absolute; top: 10px; left: 0px; font-size: 18px; padding: 0px 10px; color: #212529; background: #f8f9fa;/*background: #f70;*/ }
.SolveQueCount { background: #278abe;  }
.QueBox.SolveBox {
    background: #f4fbff;
    border: 1px solid #278abe;
    max-height: 250px;
    overflow: auto;
}
#contact-form .ansBoxOut .form-control {
    background: #f3fff4;
    border: 1px solid #69d870;
    max-height: 250px;
    overflow: auto;
    padding-bottom: 10px;
}
.QueConterNum { border:1px solid #f70; padding:0 0 15px 0; text-align: center; font-size: 35px; line-height: 30px; vertical-align: top;   }
.QueConterNum span { line-height: 18px; vertical-align: top; background: #f70; font-size: 12px; margin-bottom: 5px; color: #fff; width: 100%; text-align: center; display: inline-block; } 
.ansBoxOut i.fa { color: #43d04e !important; opacity: 0.8 !important; }
.ansBoxOut.wrongAnsBox i.fa { color: #f70 !important; opacity: 0.8 !important; }
#contact-form .ansBoxOut.wrongAnsBox .form-control {
    border: 1px solid #ff7700;
    background: #fffbf8;
}
.workSheetName { width: 100%; display: inline-block; }
.workSheetName #sp-edit { color: #333; font-size: 26px; text-decoration: none;/*width:100%;display: block */}
.workSheetName label { display: block; }
.RightSideBarOuter {
    width: 250px;
    /*padding: 20px;*/ padding: 18px;
    /* min-height: 100vh; */
    position: fixed;
    right: 10px;
     margin-top: 15px;
    background: rgba(245, 245, 245, 0.6);
}
.workSheetOuter {
  padding-bottom: 0px;
border: medium none;
padding-top: 20px;
}
.QueBox .suffleIcon, .QueBox .reportIcon { color: #278abe; position: absolute; top: 8px; right: 8px; } 
.QueBox .suffleIcon .fa, .QueBox .reportIcon .fa {font-size: 18px !important; opacity: 1 !important; padding: 0 !important; position: static !important;}
.textboxAslabel {
    border:1px solid #fff;
    background-color:#FFF;
    border-color:#FFF;
  }
.width60{width:60%; outline: none; padding: 0px;}
.edit-name{position: static!important;}

.QueConterNum .innerPadmange { padding: 0 15px; }
/*.QueConterNum.danger { border-color: #c53228; }
.QueConterNum.danger span {  background: #c53228; }*/
.QueConterNum.danger a { margin:10px 0 0 0; background: #dc3545;  }

.PageNavDot { position: fixed; top: 100px; left: 10px; height: 80%; }
.PageNavDot ul { padding: 0px; }
.PageNavDot ul li { display: block; list-style: none; height: 8%; }
.PageNavDot ul li a { width: 14px; height: 14px; border-radius: 15px; background:#fff;  border:2px solid #999; display: inline-block; margin-bottom: 10px; }
.PageNavDot ul li a:hover, .PageNavDot ul li.active a { background:#278abe;  border:2px solid #278abe;}
  
.split { width: 15px;
    height: 10px;
    border-top: 3px solid #00a2fc;
    display: inline-block;
    margin: 0 -5px;
}

.bottomPanal ul.InnerRowMenu { margin-top: 2px; background: #505050 none repeat scroll 0 0; border-radius: 4px; min-width: 300px; padding: 0; right: 10px; z-index: 99999; border: 1px solid #817878;box-shadow: none; }
.bottomPanal ul.InnerRowMenu li { border-bottom:1px solid #fff; 
    background: #505050 none repeat scroll 0 0; border-radius: 4px; padding: 0; right: 8px;}

.bottomPanal ul.InnerRowMenu li a {
    display: inline-block;
    font-size: 21px;
    font-weight: 400;
    line-height: 14px !important;
    padding: 20px 20px;
    text-decoration: none;
    width: 100%;
    text-align: left;
    background: none;
    margin:0;
    color: #ffffff;
}
.bottomPanal ul.InnerRowMenu li:hover { background: #333; }
.bottomPanal ul.InnerRowMenu.TouchBottom {bottom: 10%; }
.dropDownBtn { display: inline-block; width: 47%; text-align: center; }
.dropDownBtn i {color: #dc3545; margin-left: 3px; font-size:50px; }
#speakerBtn { color: #ffffff; }

.toast-blue {
  background-color: #007bff !important;
}

/*Summary Page*/
.diamonArea.rightCollected { padding: 15px 0; margin-top:0;/*margin-top: 60px;*/ }
.diamonArea.rightCollected ul li {
    list-style: none;
    display: inline-block;
    padding: 0 0px;
    /*text-align: left;*/
    width: 100%;
    margin-bottom: 10px;
}
.diamonArea.rightCollected ul li span {
    display: inline-block;
    color: #000;
    text-align: center;
    font-size: 50px;
}
.diamonArea.rightCollected ul li img {
    height: 70px;
    text-decoration: none;
}

.mb-30 {
    margin-bottom: 30px;
}
.summary .questiondigit .circle {/*pointer-events: none;*/}
/*End*/

/*student page*/
#worksheetlisting .progresscircles {
    width: 60px;
    position: absolute;
    right: 20px;
    top: 10px;
}
#worksheetlisting .progresscircles strong {
    margin-top: 0;
    position: absolute;
    right: 0;/*right: 136px;*/
    top: 20px;
    font-size: 15px;
    text-align: center;
    width: 100%;/*width: 7%;*/
    font-weight: normal;
}

label.label-success {
    background: #5cb85c;
    border-radius: .25em;
    color: #fff;
    margin: 0px 0;
    font-size: 14px;
    line-height: 20px;
}
.resumeSpan label.label-success {font-size: 20px; padding: 11px 18px; line-height: 28px;}
/*end*/

/*diamond modal*/
#modalRetake { text-align: center; }
#modalRetake h2 { width: 100%; }
#modalRetake p { font-size: 25px; }
#modalRetake .btn-default.retakeBtn {background: #bbbbbb;}
#modalRetake .btn-default.retakeBtn:hover {background: #ccc;}
.retakeBtn {
    width: 160px;
    padding: 15px;
    margin: 0 15px;
    border-radius: 30px;
    font-size: 20px;
    color: #fff;
}

.modal_transparent .modal-content{background:rgba(255,255,255,0.82) none repeat scroll 0 0;border:8px solid #ccc;border-radius:13px;height:auto!important;overflow:visible}
.modal_transparent .close{color:#686868;float:right;font-size:40px;font-weight:700;line-height:1;opacity:9;text-shadow:0 1px 0 #fff}
.modal_transparent .modal-header{border-bottom:0; background-color:transparent;}
.modal_transparent .popupLeftContent{text-align:center}
.modal_transparent .popupLeftContent img{height:auto;margin:0 auto;width:80%}
.modal_transparent .popupLeftContent h2{font-size: 26px; color: #000; margin-top: 15px; font-weight: 400;}
.modal_transparent .popupLeftContent h2 span{display:block;margin-top:15px;font-weight:700}
.modal_transparent .popupRightContent h2{font-size:30px;color:#000;text-align:left; font-weight: 400;}
.modal_transparent .popupRightContent p{display:block;margin-top:30px;font-size:18px; line-height: 25px;}

.modal_bg_black {background:rgba(0,0,0,0.6);
/*end*/

/*float animation for diamond*/
@keyframes float {
    0% {
        /*box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6);*/
        transform: translatey(0px);
    }
    50% {
        /*box-shadow: 0 25px 15px 0px rgba(0,0,0,0.2);*/
        transform: translatey(-20px);
    }
    100% {
        /*box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6);*/
        transform: translatey(0px);
    }
}
/*end*/

/*git page css*/
.prizeReedemOuter{padding:20px; float:left; width:100%; background:#f9f9f9;margin: 30px 0;}
.prizeReedemOuter h2{margin:0;}
.prizeReedemOuter span {
  color: #a1a0a1;
  display: inline-block;
  font-size: 20px;
  font-style: italic;
  margin: 5px 0;
}
.prizeReedemOuter p {color: #a1a0a1;font-size: 25px; margin-bottom:0;}
.blockDisplay{float:left; width:100%; border-radius:6px; border:1px solid #ebebeb; text-align:center;}
.blockOne{background:#e9d7ae;}
.blockTwo{background:#bce0db;}
.blockBottomText {
  background: #ffffff none repeat scroll 0 0;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  padding-top: 20px;
  padding-bottom: 20px;
  /*float: left;
  padding: 20px 0;*/
  width: 100%;
}
.blockBottomText .LeftSideText{text-align:left;}
.blockBottomText .LeftSideText h2{color:#000; margin-bottom:35px; margin-top:0;}
.blockBottomText .LeftSideText p{color: #a1a0a1; margin-bottom:0;}
.blockBottomText .RightSideText{text-align:center;}
.blockBottomText .RightSideText h2{color:#000; margin-bottom:35px;margin-top: 8px; text-transform:uppercase; font-size: 25px;}
.blockBottomText .RightSideText p{color: #f18030;margin-bottom:0;}
/*end of gift page*/


@media (max-width: 1766px) {
    
  .left_headerCircleIcon ul li a img {
        text-decoration: none;
        width: 80px;
    }

    .circleOuter span { margin: 10px 0;}
    .circleOuter span.blueColorCoin { margin-bottom: 3px; }

    .circleOuter span.collectCoinHead {
        font-size: 15px; top:180px;
    }
    
    .diamonArea ul li img {
        height: 60px;
    }
    .diamonArea ul li span {
        font-size: 30px;
    }
    .leftFootergiftsArea p {
        background: rgba(0, 0, 0, 0) url("../images/gift.png") no-repeat scroll left top / 57px 58px;
        font-size: 17px;
    }
    .leftMidCircleCont {
        padding: 15px 0;
    }
    .circleOuter span.collectedCoin {
        color: #000;
        font-size: 50px;
        line-height: 40px;
    }
}

@media (max-width: 1366px) {
	/*.left_headerCircleIcon ul li a span.spanimg{ width: 55px;}*/
    .left_headerCircleIcon ul li a img {width: 55px;}
    
    .left_headerCircleIcon ul li a span {
        font-size: 14px;
    }
    .left_headerCircleIcon ul li {
        padding: 0 12px;
    }
}
    
@media (max-width: 1199px) {
  /*.left_headerCircleIcon ul li a span.spanimg{ width: 50px;}*/
    .left_headerCircleIcon ul li a img {width: 50px;}
    .left_headerCircleIcon ul li a span {font-size: 13px;}
}

.lSAction{text-align: center; height: 20px;}
.lSPrev{border: solid black;
  border-width: 0 3px 3px 0;
  display: inline-block;
  padding: 5px; margin-right: 10px; }
  .lSPrev{transform: rotate(135deg);
  -webkit-transform: rotate(135deg);}
  .lSNext{border: solid black;
  border-width: 0 3px 3px 0;
  display: inline-block;
  padding: 5px; }
  .lSNext{transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);}

  .saveavatar{    background: #007bff;
    color: #fff;
    padding: 10px 20px;
    border-radius: 31px;}
    .saveavatar:hover{color: #fff; text-decoration: none;}
    .savebtn{text-align: center; display: initial;}
 
 .modal-dialog-centered h5 {
    text-align: center;
}