@font-face {
    font-family: 'Open Sans';
    src: url('../fonts/subset-OpenSans-Regular.woff2') format('woff2'),
        url('../fonts/subset-OpenSans-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Open Sans';
    src: url('../fonts/subset-OpenSans-Bold.woff2') format('woff2'),
        url('../fonts/subset-OpenSans-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}
@font-face {
    font-family: 'Open Sans';
    src: url('subset-OpenSans-SemiBold.woff2') format('woff2'),
        url('subset-OpenSans-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
}

/*-------------------------------------------------------------*/
a:hover{text-transform:none;}
body{font-family:'Noto Sans Malayalam', 'Open Sans'; line-height:24px}
.form-control{border:1px solid #e2e2e2; border-radius:0; min-height:40px; font-weight:normal}
.btn{border-radius:0; min-height:40px; line-height:25px;}
.btn-primary{background:#702dcb; border-color:#702dcb} .btn-primary:hover{background:#31007a;}
.btn-success{background:#1dba73;border-color:#1dba73} .btn-success:hover{background:#009250;}
.nav-tabs .active a{ color:#fff !important; background:#1dba73 !important; cursor:pointer !important;}
.nav-tabs a{ color:#fff !important; font-weight:bold; background:#ccc; cursor:pointer;}
.fa-trash-o{cursor:pointer;}
.navbar{margin-bottom:0;}
.navbar-brand{padding:0; padding-left:15px}
big a .fa{color:#333;}
.image-label{width:60px; height:60px; background-color:#f2f2f2; border:1px dashed #ddd; background-image:url(../images/add.jpg); cursor:pointer; float:left; margin-right:15px;}
.history-remark{line-height:20px !important; font-size:13px; height:60px; overflow:hidden; overflow-y:scroll; margin-top:10px;}
.ui-state-default{background:#fff; border:none !important; border-bottom:1px solid #eee !important;}
.ui-state-default .active{background:#1dba73 !important; color:#fff !important;}
#datepicker{display:block; cursor:pointer;}
#ui-datepicker-div .ui-state-default{text-align:center;}
.ui-state-active{background:#1dba73 !important; color:#fff !important;}
.survey-box{border:1px solid #ddd; border-bottom: none; padding:20px; display:block; color:#333; text-align: center; box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important;}
.survey-box h4 {font-size: 30px; font-weight: bold; margin: 0}
.survey-box:hover{text-decoration:none; color: #000}
.excellent, .excellent:hover{color:#390;}
.very-good, .very-good:hover{color:#3C3}
.good, .good:hover{color:#98b900}
.average, .average:hover{color:#888}
.poor, .poor:hover{color:#F60}
.very-poor, .very-poor:hover{color:#C00}
.bar-wrap{height:300px; position: relative;}
.bar-graph{width:80%; margin-left: 10%; margin-bottom:15px; display:block; position: absolute;bottom: 80px;}
.emo-txt{position: absolute; bottom: 0; margin-bottom: 0; width: 100%; height: 80px}
.panel-title a {display: block; font-size: 14px}
.survey-name{background:#1dba73; padding:15px; margin: 0; color: #fff; line-height: 1.2rem}
.survey-name .max-name-char{white-space: nowrap; width:27ch; height: 16px; display: block; overflow: hidden; text-overflow: ellipsis; clear: both; margin-bottom: 5px}
.survey-toggle{border:1px solid #ddd; background-color: #fff; min-height: 40px}
.question-report-padding{padding-left: 15px}
.loader{width: 100%; height: 100vh; position: fixed; z-index: 99999; background-color: rgba(0,0,0,0.1); text-align: center; display: none}
.loader .material-icons{font-size: 60px !important; position: absolute; top: 50%; left: auto; background-color: #fcc21b; color: #000; border-radius: 50%; padding: 0;}
.stat{font-size: 16px; text-align:center; padding: 0; }
.stat span{width: 150px; height:150px; line-height: 150px; font-size: 40px; font-weight: bold; color: #fff !important; border-radius: 50%; text-align: center; display: block; margin: auto}
.section-transform{ position: absolute; width: 100%; height: 90px; left:15px; top:50%; -ms-transform: rotate(-90deg); transform: rotate(-90deg); white-space: nowrap; display: block;}
.section-transform h2{font-size: 50px; margin: 0; padding: 0;}
.pl-5{padding-left: 45px}
.row-bs4{display: flex; flex-wrap:wrap; margin:0; margin-bottom:60px}
.d-none{display: none}

/*-------------------------------------------------------------*/
.logo{ background:#000; line-height:50px; padding:0;} .logo a{color:#fff !important; padding-top:4px}
#myNavbar{background:#31007a} .collapse a{color:#fff !important;} 
.navbar-nav .active a{background:#702dcb !important}
.navbar-brand img{height:40px; width:auto; margin-top:5px; margin-left:5px; margin-right:5px; line-height:50px}
/*-------------------------------------------------------------*/
.table{border-bottom:1px solid #ddd;}
.table a{color:#333}
.table td{line-height:40px !important; padding:0 15px !important; vertical-align:middle !important; color:#333;}
.table thead tr{border-top:1px solid #ddd; background:#fff !important;}
.table thead th{line-height:50px !important; border-bottom:1px solid #ddd !important; font-size:12px;  padding:0 15px !important;}
.table thead th:first-child{border-left:1px solid #ddd !important;}
.table thead th:last-child{border-right:1px solid #ddd !important;}
.table td .fa{font-size:20px; color:#333;}
.tabled-list{width:100%; overflow:hidden; overflow-x:auto; max-height:423px; overflow-y:auto;}
/*-------------------------------------------------------------*/
.switch {position: relative;display: inline-block;width: 40px;height: 22px;margin-top:10px;}
.switch input {display:none;}
.slider {position:absolute;cursor:pointer;top:0;left:0;right:0;bottom: 0;background-color: #ccc;-webkit-transition: .4s;transition:.4s;}
.slider:before { position: absolute;content: ""; height: 18px; width: 18px; left: 2px; bottom: 2px; background-color:#fff; white-webkit-transition: .4s;transition: .4s;}
input:checked + .slider {background-color: #1dba73;}
input:focus + .slider {box-shadow: 0 0 1px #1dba73;}
.active input:checked + .slider {background-color: #702dcb;}
.active input:focus + .slider {box-shadow: 0 0 1px #702dcb;}
input:checked + .slider:before {-webkit-transform: translateX(18px);-ms-transform: translateX(18px);transform: translateX(18px);}
/* Rounded sliders */
.slider.round {border-radius: 34px;}
.slider.round:before {border-radius: 50%;}
/*-------------------------------------------------------------*/

#sideNav ul{margin:0; margin-top:15px; padding:0; text-align:center} 
#sideNav li{list-style:none; line-height:26px;font-size:14px; border-bottom:1px solid #eee;}
#sideNav li ul { margin:0; margin-bottom:15px;} 
#sideNav li ul li{border:1px dashed #e2e2e2; margin-bottom:2px}    
#sideNav li a{color:#666; text-decoration:none; display:block}
#sideNav h1{margin-bottom:0; margin-top:10px; font-size:30px}
#sideNav .active li a{background:#1dba73; color:#fff;}
/*-------------------------------------------------------------*/
#contentField, #contentField li{ margin:15px 0 0 0 !important; padding:0 !important;}
#contentField .ui-state-default{background:#fff !important;}
#contentField li{list-style:none; border-bottom:1px solid #eee;}
#contentField li a{color:#333; text-decoration:none; position:relative;}
#contentField .switch{margin-top: 0;}
/*-------------------------------------------------------------*/
#main{border-left:1px solid #eee; min-height:100vh; padding:15px 45px; box-shadow: -6px 0px 6px 1px #f7f7f7;}
.content{max-height:350px; min-height:240px; overflow:hidden; overflow-y:auto; padding:20px 15px 15px 0; border-bottom:1px solid #eee; vertical-align:baseline;}
.content2{max-height:380px; min-height:240px; overflow:hidden; overflow-y:auto; padding:20px 15px 15px 0; vertical-align:baseline;}
#menu .content ul{margin:0; padding:0;} 
#menu .content li{margin:0; padding:0 15px; list-style:none; border:1px solid #eee; margin-bottom:3px; line-height:40px; background:#fff;}
#menu .content li a{color:#333; text-decoration:none; position:relative;}
#menu .content .active, .content .active a{color:#fff !important; background-color: #1dba73; text-decoration:none;}

/*-------------------------------------------------------------*/
#dash .col-sm-3{padding:0 4px;}
#dash .thumbnail {padding-bottom:15px; border-color:#eee; box-shadow: 2px 2px 6px #ddd; margin-bottom:8px; background-color: #1dba73; color:#fff;}
#dash a:hover{text-decoration:none !important;}
/*-------------------------------------------------------------*/
#history{margin:0; padding:0;}
#history li{background:url(../images/location-itinary.jpg) left center no-repeat; padding:10px 0 10px 50px; border-bottom:1px dashed #ddd; list-style:none; }
/*-------------------------------------------------------------*/
.footer a{color:#333}
/*-------------------------------------------------------------*/



@media (min-width:320px) and (max-width:800px){
.icon-bar{background-color:#fff !important}
.tabled-list .table{border-bottom:1px solid #ddd; width:1000px;}
.navbar-header{margin:0 !important; background:#31007a}
.navbar-brand{padding:0;}
.navbar-brand img{height:40px; width:auto; margin-top:5px; margin-left:5px; margin-right:0px; line-height:50px}
.navbar-toggle{margin-right:0; border-width:0px;}
#sideNav{display:none;}
#main{height:auto; padding:0 15px;}
.half{padding:0}
#menu h4{margin-bottom:0px; padding-bottom:0;}
#menu .col-sm-6{padding:0; margin-bottom:30px;}
#menu .col-sm-12{margin-top:0px;}
.navbar-nav{padding-left:15px;}
.navbar-nav li{border-bottom:1px solid #19003a; font-size:16px}
.navbar-default .navbar-toggle:hover{ background:#31007a}
.logo{padding:0 15px;}
.page-content{padding:0 !important;}
.page-content2{padding:0 10px 0 25px !important}
.question-report-padding{padding-left: 0px}
.stat{font-size: 12px; text-align:center; padding: 0; }
.stat span{width: 50px; height:50px; line-height: 50px; font-size: 18px; margin:auto;}
.section-transform{ position: static; width: 100%; height: 63px; padding: 15px; -ms-transform: rotate(0deg); transform: rotate(0deg); white-space: nowrap; display: block; margin-bottom: 30px}
.section-transform h2{font-size: 30px; margin: 0; padding: 0; display: block; text-align: center;}
.row-bs4{display: block; flex-wrap:nowrap; margin:0; margin-bottom:60px}
.pl-5{padding-left: 15px}
}
@media print {
      body {-webkit-print-color-adjust: exact;}

       body * {
    visibility: hidden;
  }
  #basic, #basic * {
    visibility: visible;
  }
  #basic {
    position: absolute;
    left: 0;
    top: 0;
    max-width: 1000px !important;
  }

  .stat span{
    width: 120px !important; 
    height:120px !important; 
    line-height: 120px !important; 
    font-size: 40px !important; 
    font-weight: bold !important; 
    color: #fff !important;
    }

      }