/*

 - General
 - - Header
 - - Menu
 - - Breadcrump
 - - Content
 - - - Portlet
 - - - Button
 - - - Table
 - - - Form
 - - - - DatetimePicker
 - - - - Checkbox / Rdaio


 - Alert
 - Modal
 - Form
 - - Login-Form
*/

/***********************************************************/
/* General 												   */
/***********************************************************/

body{
	background-color: #eff3f8;
}

.fa{
	min-width: 18px;
}

.display-none{
	display:none;
}
.display-block{
	display:block;
}

/***********************************************************/
/* Header 												   */
/***********************************************************/

.page-wrapper .page-header-wrapper{
	background-color: #fff;
}
.page-wrapper .page-header-wrapper .page-header{
   	padding: 14px 0px;
}

@media (max-width: 1412px){
	.page-wrapper .page-header-wrapper .page-header{
	    padding-left: 14px;
	    padding-rigth: 14px;
	}
}
/***********************************************************/
/* Menu 												   */
/***********************************************************/

.page-wrapper .page-menu-wrapper,
.page-wrapper .page-menu-wrapper .navbar{
	background-color: #444d58 !important;
}
.page-wrapper .page-menu-wrapper .navbar{
    padding: 0px;
}
.page-wrapper .page-menu-wrapper .navbar .navbar-brand{
    color: #BCC2CB !important;
}
.page-wrapper .page-menu-wrapper .navbar-nav>li>a {
    font-size: 14px;
    font-weight: 400;
    padding: 16px 18px 15px !important;
    color: #BCC2CB !important;
}
.page-wrapper .page-menu-wrapper .navbar-nav>li>a.active,
.page-wrapper .page-menu-wrapper .navbar-nav>li>a:hover {
    color: #fff !important;
    background: #55616f!important;
}
.page-wrapper .page-menu-wrapper .navbar-nav>li>a .fa {
	width: 16px;
}
.page-wrapper .page-menu-wrapper .navbar .navbar-toggler:focus{
	border: 0px !important;
}
.dropdown-item.active, .dropdown-item:active {
    color: #fff;
    text-decoration: none;
    background-color: #67809F;
}

@media (max-width: 1412px){
	.page-wrapper .page-menu-wrapper .navbar .navbar-brand{
    	padding: 12px 14px;
	}
}

/***********************************************************/
/* Breadcrump 											   */
/***********************************************************/

.page-wrapper .page-breadcrumpp-wrapper{
	background-color: #fff;	
}
.page-wrapper .page-breadcrumpp-wrapper .page-breadcrumpp .page-title {
    padding: 17px 0;
}
.page-wrapper .page-breadcrumpp-wrapper .page-breadcrumpp .page-title h1{
    color: #697882;
    font-size: 22px;
    font-weight: 400;
    margin: 0px;
    display: inline-block;
    height: 26px;
}
.page-wrapper .page-breadcrumpp-wrapper .page-breadcrumpp .page-title small{
    color: #9eacb4;
    font-size: 15px;
    font-weight: 400;
}

@media (max-width: 1412px){
	.page-wrapper .page-breadcrumpp-wrapper .page-breadcrumpp .page-title h1{
	    padding-left: 14px;
	    padding-rigth: 14px;
	}
}

/***********************************************************/
/* Content 											   */
/***********************************************************/

.page-block{
	max-width: 1412px;
	margin-left: auto;
	margin-right: auto;
}
.page-wrapper .page-content-wrapper{
    padding-top: 14px;
}

/***********************************************************/
/* Portlet 												   */
/***********************************************************/

.portlet{
	background-color: #fff;
}
.portlet>.portlet-title{
	padding: 15px 20px 10px;
	min-height: 48px;
	border-bottom: 1px solid #eee;
    min-height: 48px;
}
.portlet>.portlet-title>.caption {
    float: left;
    display: inline-block;
    font-size: 18px;
    line-height: 18px;
    padding: 10px 0;
}
.portlet>.portlet-title>.actions {
    padding: 6px 0 14px;
    float: right;
    display: inline-block;
    padding: 6px 0;
}
.portlet>.portlet-title>.actions>*{
    display: inline-block;
}
.portlet>.portlet-title::after {
    content: "";
    clear: both;
    display: table;
}
.portlet>.portlet-body{
	padding: 15px 20px 10px;
}

/***********************************************************/
/* Button 												   */
/***********************************************************/

.btn{
    display: inline-block;
    margin-bottom: 0;
    font-weight: 400;
    text-align: center;
    cursor: pointer;
    border: 1px solid transparent;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857;
    border-radius: 0px;
    cursor: pointer;
}
.btn:focus{
     box-shadow: none;
}
.btn.btn-outline{
    border-color: #67809F;
    color: #67809F;
    background: 0 0;
}
.btn.btn-outline:hover{
    background-color: #67809F;
    color: #fff;
}
.btn.default{
    color: #666;
    background-color: #e1e5ec;
    border-color: #e1e5ec;
}
/***********************************************************/
/* Table 											  	   */
/***********************************************************/

.table-wrapper .dataTables_info, 
.table-wrapper .dataTables_length, 
.table-wrapper .dataTables_paginate{
    display: inline-block;
    float: none!important;
    padding: 0!important;
    margin: 0!important;
    font-size: 13px;
}
.table-wrapper .seperator{
      margin: 0px 7px;
}
.table-wrapper .alert{
      margin: 0px 7px;
}
.dataTables_extended_wrapper div.dataTables_length label {
    margin: 0!important;
    padding: 0!important;
    font-size: 13px;
    float: none!important;
    display: inline-block!important;
}

.table-wrapper .dataTables_length select,
.table-wrapper .pagination-panel .pagination-panel-input{
	width: 60px;
	display: inline-block;
	border-radius: 0px;
	padding: 2px 4px;
	height: auto !important;
	position: relative;
    top: 3px;
}	
.table-wrapper .dataTables_paginate .btn{
    height: 31px;
}
.table-wrapper .table{
     margin-top: 1rem;
}
.table-wrapper .table .heading{
	background-color: #fbfcfd;
}
.table-wrapper .table .heading th{
    vertical-align: top;
	padding: 7px 7px 7px;
    font-weight: normal;
}
.table-wrapper .table .filter td .form-group{    
	margin-top: 0px;
	margin-bottom: 4px;
}
.table-wrapper .table .filter td .btn{  
    padding: 8px 12px;
    width: 141px;
}
.table-wrapper .table tr.odd{
	background-color: #fff;
}
.table-wrapper .table tr.even{
	background-color: #fbfcfd;
}
.table-wrapper .table td{
    padding: 5px 5px 0px 7px;
}
.table-wrapper .table td .btn{
	margin-right: 4px;
	margin-bottom: 4px;
    padding: 4px 12px;
}
.table-wrapper .table td .fa{
    width: 16px;
}
.table-wrapper .table td .mt-checkbox{
	position: relative;
	top: 6px;
}

/***********************************************************/
/* Form 												   */
/***********************************************************/

.has-error .help-block{
	opacity: 1 !important;
}
.tooltip{
	z-index: 1000000;
}
.form .form-actions{
    padding-bottom: 0px;
    padding-top: 23px;
    margin-top: 30px;
    border-top: 1px solid #ddd;
}
.form .form-body{
    padding-top: 0;
    padding-bottom: 0px;
}
.form .form-body .display-hide{
	display: none;
}
.form .form-body .form-group>label{
	padding-top: 4px;
    padding-right: 10px;
}
.form .form-body .form-group{
    margin-bottom: 0px;
    margin-top: 14px;
}
.form .form-body .form-group .input-icon > .fa{
	float: right;
    position: relative;
    top: 11px;
    height: 1px;
    right: -19px;
}
.form .form-body .form-group .mt-checkbox{
	margin-top: 9px;
}
.form .form-body .form-group select,
.form .form-body .form-group input{
    border: 1px solid #bcbcbc;
	border-radius: 0px;
    -webkit-border-radius: 0px;
	-moz-border-radius: 0px;
}
.form .form-body .form-group select:focus,
.form .form-body .form-group input:focus{
     border: 1px solid #67809F;
	 box-shadow: none !important;
     -moz-box-shadow: none !important;
	 -webkit-box-shadow: none !important;
}
.form .form-body .form-group .input-icon .fa-warning{
    color: rgb(173,33,26);
}
.form .form-body .form-group .input-icon .fa-check{
    color: #00b000;
}
.form .form-body .form-group {
    margin-bottom: 0px; 
}
.form .form-group.form-md-line-input.has-success label{
	color: #888;
}
@media (min-width: 768px){
	.form .form-body .form-group>label{
	    text-align: right;
	}	
}

/***********************************************************/
/* DatetimePicker										   */
/***********************************************************/

.form .form-body .form-group.date span.input-group-addon{
	padding: 5px 6px 5px 7px;
    background-color: #e1e5ec;
    border-color: #bcbcbc;
    border-width: 1px 1px 1px 0px;
    border-style: solid;
}
.form .form-body .form-group.date span.input-group-addon:focus,
.form .form-body .form-group.date span.input-group-addon:hover{
    background-color: #c2cad8;
}

/***********************************************************/
/* Checkbox / Radio										   */
/***********************************************************/

.mt-checkbox, .mt-radio{
    cursor: pointer;
    font-size: 14px;
	height: 18px !important;
	width: 18px !important;
    border: 1px solid #bcbcbc;
    overflow: hidden;
}
.mt-checkbox input, .mt-radio input{
	position: absolute;
    z-index: -1;
    opacity: 0;
}
.mt-checkbox>span{
	display: block;
	width: 1px !important;
	height: 1px !important;
}
.mt-checkbox>span:after {
    font-family: "FontAwesome";
    content: "\f00c";
    color: #333;
    font-size: 12px;
    position: relative;
    left: 2px;
    top: -3px;
}

/***********************************************************/
/* Alert 												   */
/***********************************************************/

.alert{
	padding: 10px;
    border-radius: 0px; 
    -webkit-border-radius: 0px; 
    -moz-border-radius: 0px; 
}
.alert-success {
    background-color: rgb(220, 243, 214);
    border-color: rgb(161, 198, 152);
    color: rgb(87, 112, 80) !important;
}
.alert-danger {
    background-color: rgb(238, 200, 197);
    border-color: rgb(213, 166, 165);
    color: rgb(173,33,26) !important;
}
.alert-danger .fa,
.alert-danger span{
    color: rgb(173,33,26) !important;
}

/***********************************************************/
/* Modal 												   */
/***********************************************************/

.modal .modal-content{
	-webkit-box-shadow: 0px 0px 7px -1px rgba(0,0,0,0.27);
	-moz-box-shadow: 0px 0px 7px -1px rgba(0,0,0,0.27);
	box-shadow: 0px 0px 7px -1px rgba(0,0,0,0.27);
}
.modal-backdrop.in {
    opacity: .2;
}
.modal .modal-content .modal-body > .portlet{
    padding-bottom: 0px;
    margin-bottom: 0px;
}

/***********************************************************/
/* Login-Form 											   */
/***********************************************************/

.login-form-wrapper{
    width: 100%;
    height: 100%;
    position:absolute;
    left: 0px;
    top: 0px;
    display: table;
    overflow: auto;
    background-color: #465568;
}
.login-form-wrapper .login-form-wrapper-inner{
    display: table-cell;
    vertical-align: middle;
}
.login-form-wrapper .control-label,
.login-form-wrapper .required,
.login-form-wrapper .alert{
     color: #dbe2ea !important;
}
.login-form-wrapper input:-webkit-autofill,
.login-form-wrapper input:-webkit-autofill:hover,
.login-form-wrapper input:-webkit-autofill:focus,
.login-form-wrapper input:-webkit-autofill:active {
    transition: background-color 5000s ease-in-out 0s;
    -webkit-text-fill-color: #bbb !important;
}
.login-form-wrapper .portlet{
    background-color: #3a4554;
    max-width: 450px;
    margin: 14px !important;
}
.login-form-wrapper .portlet .portlet-title{
    background-color: #323d4b;
    padding: 7px 20px !important;
    border: 0px;
}
.login-form-wrapper .portlet .portlet-title .fa,
.login-form-wrapper .portlet .portlet-title .caption-subject{
    color: #4db3a5 !important;
}
.login-form-wrapper .portlet .form{
	padding: 0px;
}
.login-form-wrapper .portlet .form .form-group .form-control {
    background-color: #303a48 !important;
    outline: 0 !important;
    color: #bbb !important;
    border: 1px solid #555 !important;
}
.login-form-wrapper .portlet .form .form-body{
	padding: 14px 28px 0px 28px;
}
.login-form-wrapper .portlet .form .form-actions{
     background-color: #323d4b !important;
     padding-right: 22px !important;
     border: 0px;
     padding-bottom: 21px !important;
}
.login-form-wrapper .portlet .form .form-actions>div>div{
    flex: none;
    width: 100%;
    max-width: 100%;	
}
.login-form-wrapper .portlet .form .form-actions .btn,
.login-form-wrapper .portlet .form .form-actions .btn:focus{
    background-color: #323d4b;
	border: 1px solid #4db3a5;
	color: #4db3a5;
	width: 125px;
}
.login-form-wrapper .portlet .form .form-actions .btn:hover{
    background-color: #4db3a5 !important;
	color: #323d4b !important;
}
@media (min-width: 480px){
	.login-form-wrapper .portlet{
	    margin: auto !important;
	}
}



/*!
 * Datetimepicker for Bootstrap 3
 * version : 4.15.35
 * https://github.com/Eonasdan/bootstrap-datetimepicker/
 */
.bootstrap-datetimepicker-widget {
  list-style: none;
}
.bootstrap-datetimepicker-widget.dropdown-menu {
  margin: 2px 0;
  padding: 4px;
  width: 19em;
}
@media (min-width: 768px) {
  .bootstrap-datetimepicker-widget.dropdown-menu.timepicker-sbs {
    width: 38em;
  }
}
@media (min-width: 992px) {
  .bootstrap-datetimepicker-widget.dropdown-menu.timepicker-sbs {
    width: 38em;
  }
}
@media (min-width: 1200px) {
  .bootstrap-datetimepicker-widget.dropdown-menu.timepicker-sbs {
    width: 38em;
  }
}
.bootstrap-datetimepicker-widget.dropdown-menu:before,
.bootstrap-datetimepicker-widget.dropdown-menu:after {
  content: '';
  display: inline-block;
  position: absolute;
}
.bootstrap-datetimepicker-widget.dropdown-menu.bottom:before {
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 7px solid #cccccc;
  border-bottom-color: rgba(0, 0, 0, 0.2);
  top: -7px;
  left: 7px;
}
.bootstrap-datetimepicker-widget.dropdown-menu.bottom:after {
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid white;
  top: -6px;
  left: 8px;
}
.bootstrap-datetimepicker-widget.dropdown-menu.top:before {
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 7px solid #cccccc;
  border-top-color: rgba(0, 0, 0, 0.2);
  bottom: -7px;
  left: 6px;
}
.bootstrap-datetimepicker-widget.dropdown-menu.top:after {
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid white;
  bottom: -6px;
  left: 7px;
}
.bootstrap-datetimepicker-widget.dropdown-menu.pull-right:before {
  left: auto;
  right: 6px;
}
.bootstrap-datetimepicker-widget.dropdown-menu.pull-right:after {
  left: auto;
  right: 7px;
}
.bootstrap-datetimepicker-widget .list-unstyled {
  margin: 0;
}
.bootstrap-datetimepicker-widget a[data-action] {
  padding: 6px 0;
}
.bootstrap-datetimepicker-widget a[data-action]:active {
  box-shadow: none;
}
.bootstrap-datetimepicker-widget .timepicker-hour,
.bootstrap-datetimepicker-widget .timepicker-minute,
.bootstrap-datetimepicker-widget .timepicker-second {
  width: 54px;
  font-weight: bold;
  font-size: 1.2em;
  margin: 0;
}
.bootstrap-datetimepicker-widget button[data-action] {
  padding: 6px;
}
.bootstrap-datetimepicker-widget .btn[data-action="incrementHours"]::after {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
  content: "Increment Hours";
}
.bootstrap-datetimepicker-widget .btn[data-action="incrementMinutes"]::after {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
  content: "Increment Minutes";
}
.bootstrap-datetimepicker-widget .btn[data-action="decrementHours"]::after {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
  content: "Decrement Hours";
}
.bootstrap-datetimepicker-widget .btn[data-action="decrementMinutes"]::after {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
  content: "Decrement Minutes";
}
.bootstrap-datetimepicker-widget .btn[data-action="showHours"]::after {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
  content: "Show Hours";
}
.bootstrap-datetimepicker-widget .btn[data-action="showMinutes"]::after {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
  content: "Show Minutes";
}
.bootstrap-datetimepicker-widget .btn[data-action="togglePeriod"]::after {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
  content: "Toggle AM/PM";
}
.bootstrap-datetimepicker-widget .btn[data-action="clear"]::after {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
  content: "Clear the picker";
}
.bootstrap-datetimepicker-widget .btn[data-action="today"]::after {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
  content: "Set the date to today";
}
.bootstrap-datetimepicker-widget .picker-switch {
  text-align: center;
}
.bootstrap-datetimepicker-widget .picker-switch::after {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
  content: "Toggle Date and Time Screens";
}
.bootstrap-datetimepicker-widget .picker-switch td {
  padding: 0;
  margin: 0;
  height: auto;
  width: auto;
  line-height: inherit;
}
.bootstrap-datetimepicker-widget .picker-switch td span {
  line-height: 2.5;
  height: 2.5em;
  width: 100%;
}
.bootstrap-datetimepicker-widget table {
  width: 100%;
  margin: 0;
}
.bootstrap-datetimepicker-widget table td,
.bootstrap-datetimepicker-widget table th {
  text-align: center;
  border-radius: 4px;
}
.bootstrap-datetimepicker-widget table th {
  height: 20px;
  line-height: 20px;
  width: 20px;
}
.bootstrap-datetimepicker-widget table th.picker-switch {
  width: 145px;
}
.bootstrap-datetimepicker-widget table th.disabled,
.bootstrap-datetimepicker-widget table th.disabled:hover {
  background: none;
  color: #777777;
  cursor: not-allowed;
}
.bootstrap-datetimepicker-widget table th.prev::after {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
  content: "Previous Month";
}
.bootstrap-datetimepicker-widget table th.next::after {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
  content: "Next Month";
}
.bootstrap-datetimepicker-widget table thead tr:first-child th {
  cursor: pointer;
}
.bootstrap-datetimepicker-widget table thead tr:first-child th:hover {
  background: #eeeeee;
}
.bootstrap-datetimepicker-widget table td {
  height: 54px;
  line-height: 54px;
  width: 54px;
}
.bootstrap-datetimepicker-widget table td.cw {
  font-size: .8em;
  height: 20px;
  line-height: 20px;
  color: #777777;
}
.bootstrap-datetimepicker-widget table td.day {
  height: 20px;
  line-height: 20px;
  width: 20px;
}
.bootstrap-datetimepicker-widget table td.day:hover,
.bootstrap-datetimepicker-widget table td.hour:hover,
.bootstrap-datetimepicker-widget table td.minute:hover,
.bootstrap-datetimepicker-widget table td.second:hover {
  background: #eeeeee;
  cursor: pointer;
}
.bootstrap-datetimepicker-widget table td.old,
.bootstrap-datetimepicker-widget table td.new {
  color: #777777;
}
.bootstrap-datetimepicker-widget table td.today {
  position: relative;
}
.bootstrap-datetimepicker-widget table td.today:before {
  content: '';
  display: inline-block;
  border: solid transparent;
  border-width: 0 0 7px 7px;
  border-bottom-color: #337ab7;
  border-top-color: rgba(0, 0, 0, 0.2);
  position: absolute;
  bottom: 4px;
  right: 4px;
}
.bootstrap-datetimepicker-widget table td.active,
.bootstrap-datetimepicker-widget table td.active:hover {
  background-color: #337ab7;
  color: #ffffff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
.bootstrap-datetimepicker-widget table td.active.today:before {
  border-bottom-color: #fff;
}
.bootstrap-datetimepicker-widget table td.disabled,
.bootstrap-datetimepicker-widget table td.disabled:hover {
  background: none;
  color: #777777;
  cursor: not-allowed;
}
.bootstrap-datetimepicker-widget table td span {
  display: inline-block;
  width: 54px;
  height: 54px;
  line-height: 54px;
  margin: 2px 1.5px;
  cursor: pointer;
  border-radius: 4px;
}
.bootstrap-datetimepicker-widget table td span:hover {
  background: #eeeeee;
}
.bootstrap-datetimepicker-widget table td span.active {
  background-color: #337ab7;
  color: #ffffff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
.bootstrap-datetimepicker-widget table td span.old {
  color: #777777;
}
.bootstrap-datetimepicker-widget table td span.disabled,
.bootstrap-datetimepicker-widget table td span.disabled:hover {
  background: none;
  color: #777777;
  cursor: not-allowed;
}
.bootstrap-datetimepicker-widget.usetwentyfour td.hour {
  height: 27px;
  line-height: 27px;
}
.bootstrap-datetimepicker-widget.wider {
  width: 21em;
}
.bootstrap-datetimepicker-widget .datepicker-decades .decade {
  line-height: 1.8em !important;
}
.input-group.date .input-group-addon {
  cursor: pointer;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}