@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;
}
/*-------------------------------------------------------------*/
body{font-family: 'Open Sans'; line-height:24px}
.form-control{border:1px solid #e2e2e2; border-radius:0; min-height:40px;}
.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/panel/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;}
/*-------------------------------------------------------------*/
.logo{ background:#000; line-height:50px; padding:0;} 
.logo {
    background: #253b80;
    line-height: 50px;
    padding: 0;
}

.logo a{color:#fff !important; padding-top:4px}
#myNavbar{ background: #179bd7;} .collapse a{color:#fff !important;} .navbar-nav .active a{  background: #253b80 !important;}
/*-------------------------------------------------------------*/
.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;}
/*-------------------------------------------------------------*/
#main{border-left:1px solid #eee; min-height:100vh; padding:15px 45px; box-shadow: -6px 0px 6px 1px #f7f7f7;}
.content{max-height:240px; 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;}
#menu .content .active, .content .active a{color:#fff !important; background-color: #1dba73; text-decoration:none;}
#page{ border:1px solid #eee;}
/*-------------------------------------------------------------*/
#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/panel/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}
.table{border-bottom:1px solid #ddd; width:1000px;}
.navbar-header{margin:0 !important}
.navbar-brand{padding:0;}
.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;}
#menu .col-sm-4{padding:0; margin-bottom:30px;}
.navbar-nav{padding-left:15px;}
.navbar-nav li{border-bottom: 1px solid #0073c6;
    font-size: 16px;}
.navbar-default .navbar-toggle:hover{ background:#009554}
.logo{padding:0 15px;}
.page-content{padding:0 !important;}
.page-content2{padding:0 10px 0 25px !important}
}


/* custom style */
.error-state {
    border: 1px solid red;
}
.error-text {
    color: red;
}
.bootstrap-tagsinput {
    width: 100%;
    border:1px solid #e2e2e2; 
    border-radius:0; 
    min-height:70px;
}
.navbar-brand img{height:auto; width:110px; line-height:50px}



/*----------Loader----------------------	*/
	@keyframes dot-keyframes {
  0% {
    opacity: 0.4;
    transform: scale(1, 1);
  }
  50% {
    opacity: 1;
    transform: scale(1.2, 1.2);
  }
  100% {
    opacity: 0.4;
    transform: scale(1, 1);
  }
}
.loading-dots {
  text-align: center;
  width: 100%;
 
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.loading-dots--dot {
  animation: dot-keyframes 1.5s infinite ease-in-out;
  background-color: #000;
  border-radius: 10px;
  display: inline-block;
  height: 10px;
  width: 10px;
}
.loading-dots--dot:nth-child(2) {
  animation-delay: 0.5s;
}
.loading-dots--dot:nth-child(3) {
  animation-delay: 1s;
}
/*----------Loader----------------------*/	

.current {
    background: #004cb5 !important;
    color: #fff !important;
}
.link {
    padding: 5px 12px;
    background: transparent;
    border: #004cb5 1px solid;
        border-left-width: 1px;
        border-left-style: solid;
        border-left-color: rgb(0, 76, 181);

    cursor: pointer;
    color: #004cb5;
}
.page_nav{text-align:right; max-height:40px; margin:10px 20px; font-size:12px;}




.croppie-container {
    width: 100%;
    height: 100%;
}

.croppie-container .cr-image {
    z-index: -1;
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: 0 0;
    max-height: none;
    max-width: none;
}

.croppie-container .cr-boundary {
    position: relative;
    overflow: hidden;
    margin: 0 auto;
    z-index: 1;
    width: 100%;
    height: 100%;
}

.croppie-container .cr-viewport,
.croppie-container .cr-resizer {
    position: absolute;
    border: 2px solid #fff;
    margin: auto;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    box-shadow: 0 0 2000px 2000px rgba(0, 0, 0, 0.5);
    z-index: 0;
}

.croppie-container .cr-resizer {
  z-index: 2;
  box-shadow: none;
  pointer-events: none;
}

.croppie-container .cr-resizer-vertical,
.croppie-container .cr-resizer-horisontal {
  position: absolute;
  pointer-events: all;
}

.croppie-container .cr-resizer-vertical::after,
.croppie-container .cr-resizer-horisontal::after {
    display: block;
    position: absolute;
    box-sizing: border-box;
    border: 1px solid black;
    background: #fff;
    width: 10px;
    height: 10px;
    content: '';
}

.croppie-container .cr-resizer-vertical {
  bottom: -5px;
  cursor: row-resize;
  width: 100%;
  height: 10px;
}

.croppie-container .cr-resizer-vertical::after {
    left: 50%;
    margin-left: -5px;
}

.croppie-container .cr-resizer-horisontal {
  right: -5px;
  cursor: col-resize;
  width: 10px;
  height: 100%;
}

.croppie-container .cr-resizer-horisontal::after {
    top: 50%;
    margin-top: -5px;
}

.croppie-container .cr-original-image {
    display: none;
}

.croppie-container .cr-vp-circle {
    border-radius: 50%;
}

.croppie-container .cr-overlay {
    z-index: 1;
    position: absolute;
    cursor: move;
    touch-action: none;
}

.croppie-container .cr-slider-wrap {
    width: 75%;
    margin: 15px auto;
    text-align: center;
}

.croppie-result {
    position: relative;
    overflow: hidden;
}

.croppie-result img {
    position: absolute;
}

.croppie-container .cr-image,
.croppie-container .cr-overlay,
.croppie-container .cr-viewport {
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
}

/*************************************/
/***** STYLING RANGE INPUT ***********/
/*************************************/
/*http://brennaobrien.com/blog/2014/05/style-input-type-range-in-every-browser.html */
/*************************************/

.cr-slider {
    -webkit-appearance: none;
/*removes default webkit styles*/
	/*border: 1px solid white; *//*fix for FF unable to apply focus style bug */
    width: 300px;
/*required for proper track sizing in FF*/
    max-width: 100%;
    padding-top: 8px;
    padding-bottom: 8px;
    background-color: transparent;
}

.cr-slider::-webkit-slider-runnable-track {
    width: 100%;
    height: 3px;
    background: rgba(0, 0, 0, 0.5);
    border: 0;
    border-radius: 3px;
}

.cr-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    border: none;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background: #ddd;
    margin-top: -6px;
}

.cr-slider:focus {
    outline: none;
}
/*
.cr-slider:focus::-webkit-slider-runnable-track {
background: #ccc;
}
*/

.cr-slider::-moz-range-track {
    width: 100%;
    height: 3px;
    background: rgba(0, 0, 0, 0.5);
    border: 0;
    border-radius: 3px;
}

.cr-slider::-moz-range-thumb {
    border: none;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background: #ddd;
    margin-top: -6px;
}

/*hide the outline behind the border*/
.cr-slider:-moz-focusring {
    outline: 1px solid white;
    outline-offset: -1px;
}

.cr-slider::-ms-track {
    width: 100%;
    height: 5px;
    background: transparent;
/*remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead */
	border-color: transparent;/*leave room for the larger thumb to overflow with a transparent border */
	border-width: 6px 0;
	color: transparent;/*remove default tick marks*/
}
.cr-slider::-ms-fill-lower {
	background: rgba(0, 0, 0, 0.5);
	border-radius: 10px;
}
.cr-slider::-ms-fill-upper {
	background: rgba(0, 0, 0, 0.5);
	border-radius: 10px;
}
.cr-slider::-ms-thumb {
	border: none;
	height: 16px;
	width: 16px;
	border-radius: 50%;
	background: #ddd;
	margin-top:1px;
}
.cr-slider:focus::-ms-fill-lower {
	background: rgba(0, 0, 0, 0.5);
}
.cr-slider:focus::-ms-fill-upper {
	background: rgba(0, 0, 0, 0.5);
}
/*******************************************/

/***********************************/
/* Rotation Tools */
/***********************************/
.cr-rotate-controls {
	position: absolute;
	bottom: 5px;
	left: 5px;
	z-index: 1;
}
.cr-rotate-controls button {
	border: 0;
	background: none;
}
.cr-rotate-controls i:before {
	display: inline-block;
	font-style: normal;
	font-weight: 900;
	font-size: 22px;
}
.cr-rotate-l i:before {
	content: '↺';
}
.cr-rotate-r i:before {
	content: '↻';
}
.d-none{display:none}