@media (max-width: 767px) {
.row_footer{height: auto!important;
width: 100%!important;
overflow: hidden;position: relative!important;}
 .left_section, .main_login_section{ width: 100%!important; }
 
  .top_header p{font-size: 13px!important;}
  .top_header{width: 100%!important;}
  .right_section{width: 100%!important;}
  .right_section table{width: 100%!important;}
}

@font-face {
    font-family: 'Calibri';
    src: url('fonts/Calibri.eot');
    src: url('fonts/Calibri.eot') format('embedded-opentype'),
         url('fonts/Calibri.woff2') format('woff2'),
         url('fonts/Calibri.woff') format('woff'),
         url('fonts/Calibri.ttf') format('truetype'),
         url('fonts/Calibri.svg#Calibri') format('svg');
}

@font-face {
    font-family: 'BrandonGrotesqueRegular';
    src: url('fonts/BrandonGrotesqueRegular.eot');
    src: url('fonts/BrandonGrotesqueRegular.eot') format('embedded-opentype'),
         url('fonts/BrandonGrotesqueRegular.woff2') format('woff2'),
         url('fonts/BrandonGrotesqueRegular.woff') format('woff'),
         url('fonts/BrandonGrotesqueRegular.ttf') format('truetype'),
         url('fonts/BrandonGrotesqueRegular.svg#BrandonGrotesqueRegular') format('svg');
}

.file-images { cursor: pointer; }

.logo-area h3{ color: #fff; }
thead tr th{ cursor: pointer; }
.loader {
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background: url("../images/status.gif") 50% 50% no-repeat #f9f9f9;
  opacity: 1; }

.eventclander{ text-align: left; }
.allcalnder{text-align: right;}
.fc-dayGridMonth-button{ display: none!important; }
body .fc{ font-size: 0.8em!important; }
 body{ font-size: 12px!important; }
.custom_pagination{position: absolute;
width: 565px;
margin-left: 377px!important;
top: -60px;}

.final_date_hide{ display: none!important;}
   @media print {
         #data-table-basic1 thead tr{background-color: #2f609c!important;}
         #data-table-basic1 thead tr th{ color: #fff!important; font-size: 10px!important;}


#data-table-basic2 .common_hide{ display: none!important; }
.final_date_hide{ display: block!important; }
.calendertd{ display: none!important; }

      }


.datepicker{position: absolute;
top: -260px;
display: block;
background-color: #fff;
width: 203px;}

.table-condensed{width: 100%!important;}

.bootstrap-datetimepicker-widget{background-color: transparent!important;
border: none!important;
padding: 0px!important;}

#final_date{width: 123px;float: left;}

/*.bootstrap-datetimepicker-widget{top: 477.417px!important;right: 381.4px!important;}*/

.swal2-modal{width: 356px!important;padding: 10px!important;}

.calendertd .fa-calendar{font-size: 20px;}
.calendertd .finaldate{height: 25px;
float: left;}

#depart_calender #calendar{width: 60%;
margin-top: 0px; float: right;}
#calendar_all{width: 60%;
float: left;
margin-top: 0px;background-color: #d4f5f9;}


#depart_calender #calendar_all{width: 60%;
float: left;
margin-top: 0px;}

.custome_style{ width: 14%; }
.custome_style2{ width: 13%; }
.widhbig{ width: 32%; }

.form-signin .input{padding: 5px 15px;
text-align: left;}
.form-signin label{ color: #fff; }

.form-signin .form-group{ margin-bottom: 0px; }

.new_btnds{background-color: #6c2418;
border: none;
color: #fff;
margin-top: 45px!important;width: 160px;
margin: 0px auto; margin-bottom: 0px!important;}

.loghere{background-color: #813d32;
border: none;
color: #fff;
padding: 10px 15px;}

#cleners_ig #calendar{width: 60%;
margin-top: 0px; float: right;}

#os_calender #calendar{width: 60%;
margin-top: 0px; float: right;}

.department_main .curpointer{ cursor: pointer !important;
padding: 10px 17px !important;
font-weight: bold;
color: #000 !important; }

.centerdiv ul .active a{background-color: #0d1d62!important;
color: #fff!important;}

.centerdiv{width: 400px;
margin: 0px auto;
padding-bottom: 15px;padding-top: 20px;}

.todaydataclick{text-align: right;
padding-right: 15px;
cursor: pointer;}

#menu3 .ul_class_pagination, #menu3 .data-table-list{ padding: 5px; }

#calendar{width: 60%;
margin-top: 0px; float: left;background-color: #d3d3ea;}

.table.table-striped > thead > tr > th{ padding: 5px 5px;overflow: hidden;
white-space: nowrap; }


.data-table-basic thead tr{background-color: #2f609c;}
.data-table-basic thead tr th{ color: #fff!important; }
.pupu_custom_contnet{width: 71%;
margin: 0px auto;}
.pupu_custom_contnet .form-group{ overflow: hidden;  }
.tablewidth{ width: 50%; margin: 0px auto; }
.main_top_container{ margin-top: 45px; }
.footer-copy-right{overflow: hidden;
display: block;
width: 100%;
height: 50px;}

.awak_class{ text-align: right; }

.top_header{width: 1100px;
margin: 0px auto;height: 70px;
background-color: #803c32;
color: #fff;padding: 5px 25px;}

.main_login_section{width: 1100px;
margin: 0px auto;}

.left_section{width: 60%;
float: left;
margin-top: 55px;}
.left_section img{ width: 100%;  }


.right_section{float: left;
width: 40%;}

.footer-copyright-area {bottom: 0;}

#class_D1{background-color:#f96167;}
#class_D2{background-color:#f9d342;}
#class_D3{background-color:#df678c;}
#class_D4-D4A{background-color:#ccf380;}
#class_D5{background-color:#dd51f6;}
#class_D6{background-color:#eb4d37;}
#class_D7{background-color:#8bd8bd;}
#class_D8A-D8B{background-color:#a0f9ba;}
#class_D9{background-color:#89a9e4;}
#class_D10{background-color:#f5ec8b;;}
#class_D11{background-color:#eb2088;}
#class_D12{background-color:#f6db9b;;}
#class_D13{background-color:#f9c4c6;;}
#class_SB{background-color:#b1b0bd;}
#class_D8B{background-color:#846433e6;}
#class_D8A{background-color:#e39e96e6;}
#class_D4A{background-color:#60d4fbe6;}
#class_D4B{background-color:#9bbd0fe6;}



.main_disv{overflow: hidden;

display: block;

width: 100%;

margin-bottom: 10px;
border-bottom: 1px solid #f5f0f0;}

.main_disv:last-child{ border-bottom: none; }

.main_view_container{ margin-top: 35px; }
.main_view_container .common_divs strong{ font-size: 15px; }
.main_view_container .common_divs div { text-align: left; }
.main_view_container .common_divs label{ text-align: right; }
.footer-copyright-area {    overflow: hidden;
    display: block;
    width: 100%;
}

.main-menu-area .nav-tabs .active a,
.main-menu-area .nav-tabs .active a:focus, 
.main-menu-area .nav-tabs .active a:hover{background-color: #2f609c!important; color: #fff!important;}

.main-menu-area .nav-tabs li a{ background-color: #a5c2e6e0;
color: #000;
border-radius: 0px;
border: 1px solid #123d93;}
.main-menu-area .nav-tabs li { margin-right: 10px; margin-bottom: 15px;}



.header-top-menu .nav.notika-top-nav li .message-dd.notification-dd{left: -80px;}
.header-top-menu .nav.notika-top-nav li .message-dd{width: 200px;padding: 10px 0px;}
.nav.navbar-nav.notika-top-nav li a{ font-size: 16px;}
.ntd-ctn, .spinner-4{ display: none; }
.container{ width: 100%; }
.data-table-list{ margin-top: 0px; padding: 0px;}
.report_submit{overflow: hidden;

display: block;

width: 100%;

text-align: center;

padding-top: 20px;}
.datepicker-days .table-condensed thead tr:first-child{ height: auto!important; }
.florisht{text-align: right;
padding-top: 6px;}
.input-append{ float: right; }
#from, #to, #from_register, #to_register, .finaldate ,#letter_date{width: 75%; float: left;}

.fa-calendar{font-size: 30px;

background-color: #e9e6e6;

padding: 2px;

border-radius: 5px;
 cursor: pointer;
margin-left: -5px;}
.form-element-area{ min-height: 375px; }
.table.table-striped > tbody > tr > td, .table.table-striped > tbody > tr > th, .table.table-striped > tfoot > tr > td,
 .table.table-striped > tfoot > tr > th, .table.table-striped > thead > tr > td, .table.table-striped > thead > tr > th
{font-size: 11px;}
.data-table-basic .btn-group-sm > .btn, .btn-sm{padding: 3px 8px;}
.basic-tb-hd{ margin-bottom: 10px; }
.table.table-striped > tbody > tr > td{padding: 5px 15px!important;}

.entery_row .form-group_new{overflow: hidden;
width: 100%;
display: block;
margin-bottom: 0px;}

#myModalone .form-group{ overflow: hidden; }
.model_sms{padding: 40px 50px!important;}

.new_rbtn{background: #2f609c;
outline: none;
color: #fff;
border-radius: 3px;
border: none;}
.new_rbtn:hover, .new_rbtn:focus{background: #2f609c;
outline: none;
color: #fff;
border-radius: 3px;
border: none;}

#contextMenu{ width: 117px;
left: -104px;
min-width: 117px;
top: 0px;}

.ul_class_pagination{margin: 0px;
padding: 15px;
overflow: hidden;
display: block;}

.pagination_section{ text-align: right;}
.ul_class_pagination{ list-style: none;}
.list_float_left{ float: left;}
.list_float_right{ float: right;}


.submit_button {background-color: #2f609c;

border-color: #2f609c;

font-size: 18px;

padding: 5px 30px;}
.submit_button:focus, .submit_button:active,.submit_button:hover{background-color: #19467d;
border-color: #2f609c;}


.entery_row label{font-size: 11px!important; margin-bottom: 0px;}

.curpointer{ cursor: pointer!important; padding: 5px 10px!important;}

.common_footer_bottom{position: absolute;
width: 100%;
bottom: 0px;}

.error_msg_btn{background-color: transparent;

text-align: center;

color: red;

font-weight: normal;

font-size: 14px;}
.parsley-required{color: #f59a9a;

font-weight: normal;

font-size: 12px;

text-transform: capitalize;}
.top_header p{text-align: right;
padding-top: 22px;
font-size: 30px;
text-transform: uppercase;}
.left{ float: left; }
.right{ float: right; }
.row_footer{background-color: rgba(40,57,101,.9);
    color: #fff;
    padding: 25px 15px 0px 15px;
    position: absolute;
    bottom: 0;
    height: 50px;
        width: 100%;

}
.body{
    margin:0;
    color:#6a6f8c;
    background:#fff;
    font:600 16px/18px 'Open Sans',sans-serif;
}
*,:after,:before{box-sizing:border-box}
.clearfix:after,.clearfix:before{content:'';display:table}
.clearfix:after{clear:both;display:block}
a{color:inherit;text-decoration:none}




.login-wrap{
    width:100%;
    margin:auto;max-width: 525px;

min-height: 438px;

position: relative;

margin-top: 50px;

margin-bottom: 50px;
}
.login-html{
   width: 100%;

height: 100%;

position: absolute;

padding: 60px 70px 70px 70px;

background: rgba(40,57,101,.9);

margin-top: 5px;
}

.login-html .sign-up-htm{
    top:0;
    left:0;
    right:0;
    bottom:0;
   
    transition:all .4s linear;
}
.login-html .sign-in,
.login-form .group .check{
    display:none;
}
.login-html .tab,
.login-form .group .label,
.login-form .group .button{
    text-transform:uppercase;
}
.login-html .tab{
    font-size:24px;
    margin-right:15px;
    padding-bottom:5px;
    margin:0 15px 10px 0;
    display:inline-block;
    border-bottom:2px solid transparent;
}
.login-html .sign-in:checked + .tab,
.login-html .sign-up:checked + .tab{
    color:#fff;
    border-color:#1161ee;
}
.login-form{
    min-height:345px;
    position:relative;
    perspective:1000px;
    transform-style:preserve-3d;
}
.login-form .group{
    margin-bottom:15px;
}
.login-form .group .input{
    height: 40px;
}
.login-form .group .label,
.login-form .group .input,
.login-form .group .button{
    width:100%;
    color:#fff;
    display:block;
}
.login-form .group .input,
.login-form .group .button{
    border:none;
    padding:15px 20px;
    border-radius:5px;
    background:rgba(255,255,255,.1);
}
.login-form .group input[data-type="password"]{
    text-security:circle;
    -webkit-text-security:circle;
}
.login-form .group .label{
    color:#aaa;
    font-size:12px;
    text-align: left;
}
.login-form .group .button{
    background:#1161ee;
}
.login-form .group label .icon{
    width:15px;
    height:15px;
    border-radius:2px;
    position:relative;
    display:inline-block;
    background:rgba(255,255,255,.1);
}
.login-form .group label .icon:before,
.login-form .group label .icon:after{
    content:'';
    width:10px;
    height:2px;
    background:#fff;
    position:absolute;
    transition:all .2s ease-in-out 0s;
}
.login-form .group label .icon:before{
    left:3px;
    width:5px;
    bottom:6px;
    transform:scale(0) rotate(0);
}
.login-form .group label .icon:after{
    top:6px;
    right:0;
    transform:scale(0) rotate(0);
}
.login-form .group .check:checked + label{
    color:#fff;
}
.login-form .group .check:checked + label .icon{
    background:#1161ee;
}
.login-form .group .check:checked + label .icon:before{
    transform:scale(1) rotate(45deg);
}
.login-form .group .check:checked + label .icon:after{
    transform:scale(1) rotate(-45deg);
}



.col-xs-12{}

@media (min-width: 320px) and (max-width: 480px) {
  /* For mobile phones: */
  .custome_style, .widhbig, .custome_style2 {
    width: 100%!important;
  }
}


@media (min-width: 481px) and (max-width: 767px) {
.custome_style, .widhbig, .custome_style2 {
    width: 100%!important;
  }
}