body{font-family: 'Roboto', sans-serif;font-size: 14px;line-height: 1.42857143;color: #333;background: url('../images/main_bg.jpg');background-position: center center;background-size: cover;background-repeat: no-repeat;}
.main-container{max-width: 768px;margin: 0px auto;}
#main-header{text-align: center;background:  #fff;/*height: 100vh;display: flex;flex-direction: column;flex-wrap: wrap;*/}
.main-icon img{width: 30%;}
.main-hdr{top: 35px;position: relative;height: 80vh;/*margin-bottom: auto;*/}
/*.main-ftr{margin-top: auto;}*/
.main-ftr img{width:  100%;}
.logo{padding: 20px 0px;}
.logo img{width: 50%;}
.main-btn .btn{background: #ff3d00;font-weight: 500;border: 0px;letter-spacing: 1px;}
.main-btn .btn-primary:hover{background: #4f469f;}
.main-btn .btn-secondary{background: #4f469f;color: #fff;}
.main-btn .btn-secondary:hover{background: #ff3d00;}
.main-btn a{margin: 0px 5px;}
#registration-pg{/*background: url('images/reg-bg.jpg');background-position: center center;background-size: cover;background-repeat: no-repeat;height: 100vh;display: flex;flex-direction: column;justify-content: space-between;*/background: #cacaca;}
.reg-logo{text-align: center;} 
#reg-header{display: flex;align-items: center;background: #fff;border-top: 6px solid #4f469f;padding: 10px 0px;vertical-align: middle;}
.reg-account img{width: 100%;}
#main-reg-area{padding: 0px;background: #fff;margin: 20px 30px 0px 30px;padding-bottom: 30px;/*height: 80vh;display: flex;flex-direction: column;overflow-y: scroll;*/}
#main-reg-area h2{text-align: center;font-weight: 400;color: #2a2a2c;padding: 15px 0px;border-bottom: 1px solid #d1d2d3;margin: 0px;}
#main-reg-area input{background: #f2f2f2;border: 0px;}
.reg-form-area, .btn-area{padding-top: 15px;}
.reg-form-area .input{padding-left:  0px;}
.reg-form-area .custom-select{border: 0px;background: #f2f2f2;height: 34px;padding: 6px 12px 6px 6px;width: 100%;}
.reg-form-area .btn, .btn-area .btn-primary{background: #4f469f;font-weight: 500;border: 0px;padding: 5px 10px;letter-spacing: 1px;}
.reg-form-area .btn:hover{background: #ff3d00;}
.child-img img{width: 100%;}
.mn-img{text-align: center;}
.mn-img img{width: 60%;}
.mn-text{border-left: 1px solid #d1d1d1;}
.mn-video{border-right: 1px solid #d1d1d1;}
.mn-text .fruit{text-align: center;border: 1px solid #ccc;padding: 10px 0px;font-size:  20px;}
.mn-text td:first-child, .mn-text td:last-child{font-size: 18px;color: #4f469f;font-weight: 700;}
.mn-text .hd{font-weight: 700;}
#cnt .reg-form-area{padding: 0px;}
.mn-aud{text-align: center;}
.mn-btns .btn{width: 100%;}
/* The side navigation menu */
.sidenav {height: 100%;width: 0;position: fixed; z-index: 1; top: 0; left: auto;background-color: #4e459e; overflow-x: hidden;padding-top: 60px; transition: 0.5s;}
.sidenavnew {height: 100%;width: 0;position: fixed; z-index: 1; top: 0; left: auto;background-color: #f15a26; overflow-x: hidden;padding-top: 60px; transition: 0.5s;}
.sidenav a, .sidenavnew a{padding: 8px 16px 8px 16px;text-decoration: none;font-size: 20px;color: #fff;display: block;transition: 0.3s;}
.sidenav a:hover, .sidenavnew a:hover{color: #f1f1f1;}
.sidenav .closebtn, .sidenavnew .closebtn{position: absolute;top: 0;right: 25px;font-size: 36px;margin-left: 50px;}
.lgn{text-align: center;margin: 10px 0px;}
.lgn a{color: #181819;text-decoration: underline;}
.login-area{margin: auto 0px;}
.login-bx{border: 1px solid #4f469f;padding: 30px 10px;border-radius: 10px;box-shadow: 0 0 20px #cecece;}
.table td{border: 0px !important; padding: 6px 8px !important;}
.table input{height:  24px;}
.bottom-links{list-style: none;margin: 0px;padding: 0px;}
.bottom-links li{display: inline-block;padding:  0px 10px;}
select{width: 100%;height: 34px;}
.btn-area .btn{margin-bottom:  5px;width: 100%;}
.btn-area .btn-sm{background: #ff3d00;}
.btn-area .btn-sm:hover{background: #4f469f;}
.btn-area .btn-info{background: #4f469f;}
.online-form{padding: 15px 0px !important;}
.answers audio{width: 100px;height: 20px;}
.bx{border-right: 1px solid #d1d1d1;text-align:  center;padding-bottom: 20px;}
.bx img{margin-bottom: 10px;width: 50%;}
.bx span{margin-right: 10px;}
.red{color: red; margin: 0px;}
.green{color: green; margin:  0px;}
#myCanvas {cursor: crosshair;/*position: fixed;*/border:  1px solid #000; border-radius:  5px;width:  100%;}
/*#reg-footer{background: #fff;}*/
#reg-footer img{width:  100%;}
.txt-rght{text-align: right;}
.circle h4{font-size: 30px;border: 2px solid #4f469f;border-radius: 50%;width: 100px;height: 100px;line-height: 100px;
text-align: center;display: block;margin: 0px auto;color: #0cade4;}
.marks-circle{text-align: center;border-left: 1px solid #e3e3e3;}
.marks-circle h3{margin-top:  0px;}
.circle h4:hover{border: 2px solid #0cade4;color: #fff;background: #28b60b;}
.marks-content{text-align:  center;}
.marks-content h3{font-size:  30px;    color: #4f469f;}
.marks-content h4{font-size:  24px;    color: #f15a26;}
.reg-menu img{width:  24px;}
.table-striped>tbody>tr:nth-of-type(odd) {background-color: #f1f1f1;}
.mdl{text-decoration: underline;color: #4f469f;font-weight: bold;padding-top: 10px;display: block;cursor: pointer;}
.brd ul{margin: 0px ; list-style: none; text-align: center;padding: 0px;}
.brd li{display: inline-block; padding: 0px 5px;}
.results td{font-size: 16px;font-weight: 500;}
.marks-content img{width: 10%;}
:focus-visible {outline: 0px !important;}
canvas {display: block;border: 1px solid gray;}
.reg-menu img:hover, .reg-account img:hover{cursor: pointer;}
.drawing-area {box-shadow: 0 0 6px 0 #999;}
.clear-button {margin: 2em;font-size: 16px;}
#erase{display: block;background: #4f469f;color: #fff;border: 0px;padding: 5px 20px;margin: 10px auto;border-radius: 5px;}
.mn{font-size: 20px;}
/***************** Media Queries ********************/
@media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
@media screen and (min-width: 320px) and (max-width: 767px){
.main-icon img {width: 80%;}
.logo img {width: 80%;}
#main-reg-area {margin: 20px 10px 0px 10px;}
.login-area {margin: auto 15px;}
.lgn-btn{text-align:  center;}
.txt-rght{text-align:  center;}
.reg-logo img{width:  100%;}
.child-img{display:  none;}
.mn-img, .mn-video{padding-bottom:  10px;}
.answers audio {width: 50px;}
.brd li{padding: 0px 3px;}
}
@media screen and (min-width: 768px) and (max-width: 1023px){
.main-icon img {width: 50%;}
.logo img {width: 50%;}
.reg-account{text-align:  center;}
.reg-account img{width:  auto;}
}
@media screen and (min-width: 1024px) and (max-width: 1279px){
.main-icon img {width: 50%;padding-top: 50px;}
.logo img {width: 80%;}
}
@media screen and (min-width: 1280px) and (max-width: 1365px){

}
@media screen and (min-width: 1366px) and (max-width: 1439px){
.main-hdr{height: 55vh;}
}
@media screen and (min-width: 1440px) and (max-width: 1535px){
.main-hdr{height: 60vh;}
}
@media screen and (min-width: 1536px) and (max-width: 1599px){

}
@media screen and (min-width: 1600px) and (max-width: 1640px){
.main-hdr{height: 60vh;}
}
@media screen and (min-width: 1641px) and (max-width: 1679px){

}
@media screen and (min-width: 1680px) and (max-width: 1920px){
.main-icon img {width: 50%;}
.logo img {width: 80%;}
}
/*************** Canvas Styes ******************/

.order-card {color: #fff;}
.bg-c-blue {background: linear-gradient(45deg,#4099ff,#73b4ff);}
.bg-c-green {background: linear-gradient(45deg,#2ed8b6,#59e0c5);}
.bg-c-yellow {background: linear-gradient(45deg,#FFB64D,#ffcb80);}
.bg-c-pink {background: linear-gradient(45deg,#FF5370,#ff869a);}
.bg-c-lime-green{background: linear-gradient(45deg,#d5e5a3,#b8db4a);}
.bg-c-violet{background: linear-gradient(45deg,#baa9ba,#eba2eb);}
.card {border-radius: 5px;-webkit-box-shadow: 0 1px 2.94px 0.06px rgba(4,26,55,0.16);box-shadow: 0 1px 2.94px 0.06px rgba(4,26,55,0.16);border: none;margin-bottom: 30px;-webkit-transition: all 0.3s ease-in-out;transition: all 0.3s ease-in-out;text-align: center;}
.card .card-block {padding: 25px;}
.order-card i {font-size: 26px;color: #fff;text-align:center;}
.f-left {float: left;}
.f-right {float: right;}
.dashboard a{text-decoration: none;}
.dashboard a:hover .card{box-shadow: 0 0 20px #cecece;}
.more-less {float: right;color: #fff;}
#accordion a{color: #fff;}
#accordion a:hover{text-decoration: none;}
#accordion .panel-heading{background: #ff4200;}
.panel-body {padding: 15px 0px;}
.panel-title {font-size: 22px;font-weight: 600;}
#accordion .col-xs-6{padding-left:10px;padding-right:10px;}
#accordion.btn-group-lg>.btn, .btn-lg {padding: 10px 0px;}