/*
 *  Created: @vision_vietnam
 *  Website: http://vision-vietnam.com/
 *
 *  ---------------------------------------
 *  ---------- TABLE OF CONTENTS ----------
 *  ---------------------------------------
 *
 *  1.  FILE IMPORTS
 *  2.  CUSTOM STYLES
 *  3.  HEADER
 *  4.  ROOMS
 *  5.  CUSTOM DATATABLE
 *
 */
.grecaptcha-badge { visibility: hidden; }
/*----------- Cursor ---------*/
.cursor-pointer{cursor: pointer;}
.cursor-croshair{cursor: crosshair;}
.cursor-eresize{cursor: e-resize;}
.cursor-move{cursor: move;}
.cursor-text{cursor: text;}
.table-routes .no-sort{background-color: lightgray !important;}
.no-drag{cursor:not-allowed !important;}

/* ---------- Fix CSS --------*/
/*hide red triangle after user*/
.owl-stage{min-width: 250px;}
.owl-item{min-width:110px !important;}
.fc-future{background-color: #fff;}
.select2-selection__arrow{display: none !important;color: #fff !important;}
.fc-day-header {background-color: #d9edf7 !important;}
.pad15{padding: 0 15px !important;}
.user-timesheet2{ color: #3897f0; border-bottom: 2px solid #429CF1;font-size: 16px;height: 28px; };
.mobile-hidden .header-lb{color: #000 !important;font-size: 10px !important;}

.input-ck{min-width: 100px;}
/********** 1. FILE IMPORTS **********/
/*************************************/
/* We like off-black for text. */
body, select, input, textarea { color: black; }
body { font-size: 13px; }

a {color: #337ab7; cursor: pointer; }
a:hover {color: #0085A7;}

/* Custom text-selection colors (remove any text shadows: http://twitter.com/miketaylr/status/12228805301) */
::-moz-selection{background: #fcd700; color: #fff; text-shadow: none;}
::selection {background: #fcd700; color: #fff; text-shadow: none;}

/*  j.mp/webkit-tap-highlight-color */
a:link {-webkit-tap-highlight-color: #fcd700;}

ins {background-color: #fcd700; color: #000; text-decoration: none;}
mark {background-color: #fcd700; color: #000; font-style: italic; font-weight: bold;}

/* Mozilla dosen't style placeholders by default */
input:-moz-placeholder { color:#a9a9a9; }
textarea:-moz-placeholder { color:#a9a9a9; }

/* let's give blockquotes *some* default styling, because unstyled blockquotes are dangerous */
blockquote {padding: 16px; background: #eee;}

@font-face { font-family: 'roboto-thin'; src: url('../../fonts/roboto-thin.ttf'); }
@font-face { font-family: 'roboto-m'; src: url('../../fonts/roboto-m.ttf'); }

:root {
	--main-color: #1f718f;
	--main-bg-color: #20718f;
	--sub-bg-color: #124f64;
	--text-color: #59b1c5;
}
/********** 2. CUSTOM STYLES **********/
/**************************************/
.mw50{min-width: 50px;}
.mw80{min-width: 80px;}
.mw90{min-width: 90px;}
.mw100{min-width:100px;}
.mw120{min-width:120px;}
.mw140{min-width:140px;}
.mw160{min-width:160px;}
.mw190{min-width:190px;}

.mb4 { margin-bottom: 4px; }
.mb5 { margin-bottom: 5px; }
.mb10 { margin-bottom: 10px; }
.mb15 { margin-bottom: 15px; }
.mb20 { margin-bottom: 20px; }
.mb25 { margin-bottom: 25px; }
.mb30 { margin-bottom: 30px; }
.mb40 { margin-bottom: 40px; }
.mr5 { margin-right: 5px; }
.mr10 { margin-right: 10px; }
.mr20 { margin-right: 20px; }
.mr30 { margin-right: 30px; }
.mt4 { margin-top: 4px; }
.mt5 { margin-top: 5px; }
.mt10 { margin-top: 10px; }
.mt15 { margin-top: 15px; }
.mt20 { margin-top: 20px; }
.mt25 { margin-top: 25px; }
.mt30 { margin-top: 30px; }
.mt40 { margin-top: 40px; }
.mt50 { margin-top: 50px; }
.ml5 { margin-left: 5px; }
.ml10 { margin-left: 10px; }
.ml15 { margin-left: 15px; }
.ml20 { margin-left: 20px; }
.ml30 { margin-left: 30px; }
.ml40 { margin-left: 40px; }
.ml100 { margin-left: 100px; }
.mr10 { margin-right: 10px; }
.mr5 { margin-right: 5px; }
.ml5 { margin-left: 5px; }

.pl10 { padding-left: 10px; }
.pl15 { padding-left: 15px; }
.pl20 { padding-left: 20px; }
.pl25 { padding-left: 25px; }
.pl30 { padding-left: 30px; }
.pl40 { padding-left: 40px; }
.pl50 { padding-left: 50px; }
.pb5 { padding-bottom: 5px; }
.pb10 { padding-bottom: 10px; }
.pb15 { padding-bottom: 15px; }
.pb20 { padding-bottom: 20px; }
.pb30 { padding-bottom: 30px; }
.pb40 { padding-bottom: 40px; }
.pr5 { padding-right: 5px; }
.pr10 { padding-right: 10px; }
.pr20 { padding-right: 20px; }
.pr30 { padding-right: 30px; }
.pt5 { padding-top: 5px; }
.pt8 { padding-top: 8px; }
.pt10 { padding-top: 10px; }
.pt15 { padding-top: 15px; }
.pt20 { padding-top: 20px; }
.pt30 { padding-top: 30px; }
.pt40 { padding-top: 40px; }
.pt50 { padding-top: 50px; }

.nomargin { margin: 0; }
.noshadow { -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; }
.br0 { border-right: 0; }
.bl0 { border-left: 0; }
.nopadding { padding: 0 !important; }
.pt0 { padding-top: 0; }
.p5 { padding: 5px; }
.p10 { padding: 10px; }
.italic { font-style: italic; }
.dark { color: #333; }
.width100p { width: 100%; }
.width20 { width: 20px; }
.width30 { width: 30px; }
.width120 { width: 120px; }
.inblock { display: inline-block; }

/********** Z-INDEX  **********/
.z1 { z-index: 1; }
.z2 { z-index: 200; }
.z3 { z-index: 300; }
.z4 { z-index: 400; }
.z5 { z-index: 500; }
.z6 { z-index: 600; }
.z7 { z-index: 700; }
.z8 { z-index: 800; }
.z9 { z-index: 900; }
.z10 { z-index: 1000; }

/********** ALIGN **********/
.align-l { text-align: left; }
.align-r { text-align: right; }
.align-c { text-align: center; }
.align-m { vertical-align: middle; }
.align-t { vertical-align: top; }

/********** VH WIDTH **********/
.vw5{width:5vw;}
.vw10{width:10vw;}
.vw15{width:15vw;}
.vw20{width:20vw;}
.vw25{width:25vw;}
.vw30{width:30vw;}
.vw35{width:35vw;}
.vw40{width:40vw;}
.vw45{width:45vw;}
.vw50{width:50vw;}
.vw55{width:55vw;}
.vw60{width:60vw;}
.vw65{width:65vw;}
.vw70{width:70vw;}
.vw75{width:75vw;}
.vw80{width:80vw;}
.vw85{width:85vw;}
.vw90{width:90vw;}
.vw95{width:95vw;}
.vw100{width:100vw;}

/********** % WIDTH **********/
.w5{width:5%;}
.w9{width:9%;}
.w10{width:10%;}
.w15{width:15%;}
.w20{width:20%;}
.w25{width:25%;}
.w28{width:28%;}
.w27{width:27%;}
.w30{width:30%;}
.w31{width:31%;}
.w35{width:35%;}
.w40{width:40%;}
.w45{width:45%;}
.w50{width:50%;}
.w55{width:55%;}
.w58{width:58%;}
.w60{width:60%;}
.w65{width:65%;}
.w70{width:70%;}
.w75{width:75%;}
.w80{width:80%;}
.w85{width:85%;}
.w90{width:90%;}
.w95{width:95%;}
.w100{width:100%;}

/********** PX WIDTH **********/
.width5{width:5px;}
.width10{width:10px;}
.width15{width:15px;}
.width20{width:20px;}
.width25{width:25px;}
.width30{width:30px;}
.width35{width:35px;}
.width40{width:40px;}
.width45{width:45px;}
.width50{width:50px;}
.width55{width:55px;}
.width60{width:60px;}
.width65{width:65px;}
.width70{width:70px;}
.width75{width:75px;}
.width80{width:80px;}
.width85{width:85px;}
.width90{width:90px;}
.width95{width:95px;}
.width100{width:100px;}
.width120{width:120px;}
.width150{width:150px;}
.width180{width:180px;}
.width200{width:200px;}
.width220{width:220px;}
.width230{width:230px;}
.width240{width:240px;}
.width250{width:250px;}
.width300{width:300px;}
.width320{width:320px;}
.width350{width:350px;}

/********** MAX WIDTH **********/
.pax-w5{max-width:5%;}
.max-w10{max-width:10%;}
.max-w15{max-width:15%;}
.max-w20{max-width:20%;}
.max-w25{max-width:25%;}
.max-w30{max-width:30%;}
.max-w35{max-width:35%;}
.max-w40{max-width:40%;}
.max-w45{max-width:45%;}
.max-w50{max-width:50%;}
.max-w55{max-width:55%;}
.max-w60{max-width:60%;}
.max-w65{max-width:65%;}
.max-w70{max-width:70%;}
.max-w75{max-width:75%;}
.max-w80{max-width:80%;}
.max-w85{max-width:85%;}
.max-w90{max-width:90%;}
.max-w95{max-width:95%;}
.max-w100{max-width:100%;}

/********** MIN WIDTH **********/
.min-w5{min-width:5%;}
.min-w10{min-width:10%;}
.min-w15{min-width:15%;}
.min-w20{min-width:20%;}
.min-w25{min-width:25%;}
.min-w30{min-width:30%;}
.min-w35{min-width:35%;}
.min-w40{min-width:40%;}
.min-w45{min-width:45%;}
.min-w50{min-width:50%;}
.min-w55{min-width:55%;}
.min-w60{min-width:60%;}
.min-w65{min-width:65%;}
.min-w70{min-width:70%;}
.min-w75{min-width:75%;}
.min-w80{min-width:80%;}
.min-w85{min-width:85%;}
.min-w90{min-width:90%;}
.min-w95{min-width:95%;}
.min-w100{min-width:100%;}

/********** VH HEIGHT **********/
.h-auto{height:auto!important;}
.h-inherit{height:inherit!important;}
.h-initial{height:initial!important;}
.vh5{height:5vh;}
.vh10{height:10vh;}
.vh15{height:15vh;}
.vh20{height:20vh;}
.vh25{height:25vh;}
.vh30{height:30vh;}
.vh35{height:35vh;}
.vh40{height:40vh;}
.vh45{height:45vh;}
.vh50{height:50vh;}
.vh55{height:55vh;}
.vh60{height:60vh;}
.vh65{height:65vh;}
.vh70{height:70vh;}
.vh75{height:75vh;}
.vh80{height:80vh;}
.vh85{height:85vh;}
.vh90{height:90vh;}
.vh95{height:95vh;}
.vh100{height:100vh;}

/********** % HEIGHT **********/
.h5{height:5%;}
.h10{height:10%;}
.h15{height:15%;}
.h20{height:20%;}
.h25{height:25%;}
.h30{height:30%;}
.h35{height:35%;}
.h40{height:40%;}
.h45{height:45%;}
.h50{height:50%;}
.h55{height:55%;}
.h60{height:60%;}
.h65{height:65%;}
.h70{height:70%;}
.h75{height:75%;}
.h80{height:80%;}
.h85{height:85%;}
.h90{height:90%;}
.h95{height:95%;}
.h100{height:100%;}
/********** % Font-size **********/
.fs15{font-size: 15px;}
.fs35{font-size: 30px;}
/* ------------------------------------------------------------------------------
*
*  # Uniform form inputs plugin
*
*  Styles for uniform.min.js - form components styling
*
*  Version: 1.2
*  Latest update: Aug 10, 2016
*
* ---------------------------------------------------------------------------- */
.checker {
  position: relative;
  display: inline-block;
  cursor: pointer;
  vertical-align: middle;
}
.checker,
.checker span,
.checker input {
  width: 18px;
  height: 18px;
}
.checker span {
  color: #455A64;
  border: 2px solid #607D8B;
  display: inline-block;
  text-align: center;
  position: relative;
  border-radius: 2px;
}
.checker span:after {
  content: "\e600";
  font-family: 'icomoon';
  font-size: 16px;
  line-height: 1;
  position: absolute;
  top: -1px;
  left: -1px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  opacity: 0;
  filter: alpha(opacity=0);
}
.checker span.checked:after {
  opacity: 1;
  filter: alpha(opacity=100);
}
.checker input[type=checkbox],
.choice input[type=radio] {
  border: none;
  background: none;
  display: -moz-inline-box;
  display: inline-block;
  margin: 0;
  vertical-align: top;
  cursor: pointer;
  position: absolute;
  top: -2px;
  left: -2px;
  z-index: 2;
  opacity: 0;
  filter: alpha(opacity=0);
}
.checkbox .checker,
.checkbox-inline .checker {
  position: absolute;
  top: 1px;
  left: 0;
}
.form-horizontal .checkbox .checker,
.form-horizontal .checkbox-inline .checker {
  top: 9px;
}
.checkbox-right .checker {
  left: auto;
  right: 0;
}
.checker.disabled {
  opacity: 0.5;
  filter: alpha(opacity=50);
}
.checker.disabled,
.checker.disabled input[type=checkbox] {
  cursor: not-allowed;
}
.checkbox > label:active .checker.disabled span:after,
.checkbox-inline:active .checker.disabled span:after {
  opacity: 0;
  filter: alpha(opacity=0);
}
.checkbox > label:active .checker.disabled span.checked:after,
.checkbox-inline:active .checker.disabled span.checked:after {
  opacity: 1;
  filter: alpha(opacity=100);
}
.checker[class*=border-] span {
  border-color: inherit;
  color: inherit;
}
.dropdown-menu > .active:not(.disabled) .checker span,
.dropdown-menu[class*=bg-] .checker span,
.page-header-inverse .form-group > .checkbox .checker span,
.page-header-inverse .form-group > .checkbox-inline .checker span,
.navbar-inverse .navbar-form .form-group > .checkbox .checker span,
.navbar-inverse .navbar-form .form-group > .checkbox-inline .checker span,
.sidebar:not(.sidebar-default) .checkbox .checker span,
.sidebar:not(.sidebar-default) .checkbox-inline .checker span {
  border-color: #fff;
  color: #fff;
}
.choice {
  position: relative;
  display: inline-block;
  cursor: pointer;
  vertical-align: middle;
  border-radius: 100%;
}
.choice,
.choice span,
.choice input {
  width: 18px;
  height: 18px;
}
.choice span {
  border: 2px solid #607D8B;
  display: -moz-inline-box;
  display: inline-block;
  border-radius: 100%;
  text-align: center;
  position: relative;
}
.choice span:after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  border: 4px solid;
  border-color: inherit;
  width: 0;
  height: 0;
  border-radius: 100%;
  opacity: 0;
  filter: alpha(opacity=0);
}
.choice span.checked:after {
  opacity: 1;
  filter: alpha(opacity=100);
}
.radio .choice,
.radio-inline .choice {
  position: absolute;
  top: 1px;
  left: 0;
}
.form-horizontal .radio .choice,
.form-horizontal .radio-inline .choice {
  top: 9px;
}
.radio-right .choice {
  left: auto;
  right: 0;
}
.choice.disabled {
  opacity: 0.5;
  filter: alpha(opacity=50);
}
.choice.disabled,
.choice.disabled input[type=radio] {
  cursor: not-allowed;
}
.radio > label:active .choice.disabled span:after,
.radio-inline:active .choice.disabled span:after {
  opacity: 0;
  filter: alpha(opacity=0);
}
.radio > label:active .choice.disabled span.checked:after,
.radio-inline:active .choice.disabled span.checked:after {
  opacity: 1;
  filter: alpha(opacity=100);
}
.choice[class*=border-] span {
  border-color: inherit;
}
.choice[class*=border-] span:after {
  border-color: inherit;
}
.dropdown-menu > .active .choice span,
.dropdown-menu[class*=bg-] .choice span,
.page-header-inverse .form-group > .radio .choice span,
.page-header-inverse .form-group > .radio-inline .choice span,
.navbar-inverse .navbar-form .form-group > .radio .choice span,
.navbar-inverse .navbar-form .form-group > .radio-inline .choice span,
.sidebar:not(.sidebar-default) .radio .choice span,
.sidebar:not(.sidebar-default) .radio-inline .choice span {
  border-color: #fff;
}
.uploader {
  width: 100%;
  position: relative;
  display: table;
}
.uploader .filename {
  color: #999999;
  height: 36px;
  padding: 8px 12px 6px 12px;
  cursor: pointer;
  width: 100%;
  display: table-cell;
  cursor: default;
  border: 1px solid #ddd;
  border-right: 0;
  background-color: #fff;
  text-align: left;
  word-break: break-word;
  border-bottom-left-radius: 3px;
  border-top-left-radius: 3px;

  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.uploader .action {
  display: table-cell;
  cursor: pointer;
  z-index: 1;
  border-radius: 0;
  border-bottom-right-radius: 3px;
  border-top-right-radius: 3px;
}
.uploader .action.btn {
  margin-top: 0;
}
.uploader:hover .action,
.uploader:focus .action {
  -webkit-box-shadow: 0 0 0 100px rgba(0, 0, 0, 0.05) inset;
  box-shadow: 0 0 0 100px rgba(0, 0, 0, 0.05) inset;
}
.uploader:hover .action.btn-default,
.uploader:focus .action.btn-default {
  -webkit-box-shadow: 0 0 0 100px rgba(0, 0, 0, 0.01) inset;
  box-shadow: 0 0 0 100px rgba(0, 0, 0, 0.01) inset;
}
.uploader:active .action {
  -webkit-box-shadow: 0 0 0 100px rgba(0, 0, 0, 0.1) inset;
  box-shadow: 0 0 0 100px rgba(0, 0, 0, 0.1) inset;
}
.uploader:active .action.btn-default {
  -webkit-box-shadow: 0 0 0 100px rgba(0, 0, 0, 0.03) inset;
  box-shadow: 0 0 0 100px rgba(0, 0, 0, 0.03) inset;
}
.uploader input[type=file] {
  width: 100%;
  margin-top: 0;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  height: 36px;
  border: 0;
  cursor: pointer;
  z-index: 10;
  opacity: 0;
  filter: alpha(opacity=0);
}
.uploader.disabled .filename {
  background-color: #fafafa;
  cursor: not-allowed;
}
.uploader-lg input[type=file],
.uploader-lg .action,
.uploader-lg .filename {
  height: 40px;
}
.uploader-lg .filename {
  padding: 9px 15px;
  font-size: 14px;
  line-height: 1.4285715;
}
.uploader-sm input[type=file],
.uploader-sm .action,
.uploader-sm .filename {
  height: 34px;
}
.uploader-sm .filename {
  padding: 6px 11px;
  font-size: 12px;
  line-height: 1.6666667;
}
.uploader-xs input[type=file],
.uploader-xs .action,
.uploader-xs .filename {
  height: 32px;
}
.uploader-xs .filename {
  padding: 5px 10px;
  font-size: 12px;
  line-height: 1.6666667;
}

/********** FLEX **********/
.flex-wrp,
.flex-tl,
.flex-tc,
.flex-tr,
.flex-cc,
.flex-cl,
.flex-cr,
.flex-bc,
.flex-bl,
.flex-br {
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}
.flex-tl {
  /* flex-start | flex-end | center | space-between | space-around */
  -webkit-justify-content: flex-start; justify-content: flex-start;
  /* flex-start | flex-end | center | baseline | stretch */
  -webkit-align-items: flex-start; align-items: flex-start;
}
.flex-tc {
  /* flex-start | flex-end | center | space-between | space-around */
  -webkit-justify-content: center; justify-content: center;
  /* flex-start | flex-end | center | baseline | stretch */
  -webkit-align-items: flex-start; align-items: flex-start;
}
.flex-tr {
  /* flex-start | flex-end | center | space-between | space-around */
  -webkit-justify-content: flex-end; justify-content: flex-end;
  /* flex-start | flex-end | center | baseline | stretch */
  -webkit-align-items: flex-start; align-items: flex-start;
}
.flex-cl {
  /* flex-start | flex-end | center | space-between | space-around */
  -webkit-justify-content: flex-start; justify-content: flex-start;
  /* flex-start | flex-end | center | baseline | stretch */
  -webkit-align-items: center; align-items: center;
}
.flex-cc {
  /* flex-start | flex-end | center | space-between | space-around */
  justify-content: center;
  -webkit-justify-content: center;
  /* flex-start | flex-end | center | baseline | stretch */
  align-items: center;
  -webkit-align-items: center;
  -ms-flex-pack: center;
}
.flex-cr {
  /* flex-start | flex-end | center | space-between | space-around */
  -webkit-justify-content: flex-end; justify-content: flex-end;
  /* flex-start | flex-end | center | baseline | stretch */
  -webkit-align-items: center; align-items: center;
}
.flex-bc {
  /* flex-start | flex-end | center | space-between | space-around */
  -webkit-justify-content: center; justify-content: center;
  /* flex-start | flex-end | center | baseline | stretch */
  -webkit-align-items: flex-end; align-items: flex-end;
}
.flex-bl {
  /* flex-start | flex-end | center | space-between | space-around */
  -webkit-justify-content: flex-start; justify-content: flex-start;
  /* flex-start | flex-end | center | baseline | stretch */
  -webkit-align-items: flex-end; align-items: flex-end;
}
.flex-br {
  /* flex-start | flex-end | center | space-between | space-around */
  -webkit-justify-content: flex-end; justify-content: flex-end;
  /* flex-start | flex-end | center | baseline | stretch */
  -webkit-align-items: flex-end; align-items: flex-end;
}
.flex-item-bc {
  -webkit-align-self: flex-end;
      -ms-flex-item-align: end;
          align-self: flex-end;
}
.flex-item-cl {
  -webkit-align-self: flex-start;
      -ms-flex-item-align: start;
          align-self: flex-start;
}

/********** SWITCH **********/
 /* The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-block;
  width: 34px;
  height: 12px;
}

/* Hide default HTML checkbox */
.switch input {display:none;}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #bbb;
  -webkit-transition: .3s;
  transition: .3s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 0px;
  bottom: -3px;
  box-shadow: 0px 1px 2px rgba(51, 51, 51, 0.45);
  background-color: white;
  -webkit-transition: .3s;
  transition: .3s;
}

input:checked + .slider {
  background-color: #77c2bb;
}

input:focus + .slider {
  box-shadow: 0 0 1px #77c2bb;
}

input:checked + .slider:before {
  background-color: #009688;
  -webkit-transform: translateX(18px);
  -ms-transform: translateX(18px);
  transform: translateX(18px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 18px;
}

.slider.round:before {
  border-radius: 50%;
}


/********** ANIMATIONS **********/
@-o-keyframes cssload-rotate {
  100% {
    -o-transform: rotate(360deg);
  }
}

@-ms-keyframes cssload-rotate {
  100% {
    -ms-transform: rotate(360deg);
  }
}

@-webkit-keyframes cssload-rotate {
  100% {
    -webkit-transform: rotate(360deg);
  }
}

@-moz-keyframes cssload-rotate {
  100% {
    -moz-transform: rotate(360deg);
  }
}

@keyframes cssload-rotate {
  100% {
    transform: rotate(360deg);
  }
}

/* BELL */

@-webkit-keyframes ring {
  0% {
    -webkit-transform: rotate(-15deg);
    transform: rotate(-15deg);
  }

  2% {
    -webkit-transform: rotate(15deg);
    transform: rotate(15deg);
  }

  4% {
    -webkit-transform: rotate(-18deg);
    transform: rotate(-18deg);
  }

  6% {
    -webkit-transform: rotate(18deg);
    transform: rotate(18deg);
  }

  8% {
    -webkit-transform: rotate(-22deg);
    transform: rotate(-22deg);
  }

  10% {
    -webkit-transform: rotate(22deg);
    transform: rotate(22deg);
  }

  12% {
    -webkit-transform: rotate(-18deg);
    transform: rotate(-18deg);
  }

  14% {
    -webkit-transform: rotate(18deg);
    transform: rotate(18deg);
  }

  16% {
    -webkit-transform: rotate(-12deg);
    transform: rotate(-12deg);
  }

  18% {
    -webkit-transform: rotate(12deg);
    transform: rotate(12deg);
  }

  20% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}

@keyframes ring {
  0% {
    -webkit-transform: rotate(-15deg);
    -ms-transform: rotate(-15deg);
    transform: rotate(-15deg);
  }

  2% {
    -webkit-transform: rotate(15deg);
    -ms-transform: rotate(15deg);
    transform: rotate(15deg);
  }

  4% {
    -webkit-transform: rotate(-18deg);
    -ms-transform: rotate(-18deg);
    transform: rotate(-18deg);
  }

  6% {
    -webkit-transform: rotate(18deg);
    -ms-transform: rotate(18deg);
    transform: rotate(18deg);
  }

  8% {
    -webkit-transform: rotate(-22deg);
    -ms-transform: rotate(-22deg);
    transform: rotate(-22deg);
  }

  10% {
    -webkit-transform: rotate(22deg);
    -ms-transform: rotate(22deg);
    transform: rotate(22deg);
  }

  12% {
    -webkit-transform: rotate(-18deg);
    -ms-transform: rotate(-18deg);
    transform: rotate(-18deg);
  }

  14% {
    -webkit-transform: rotate(18deg);
    -ms-transform: rotate(18deg);
    transform: rotate(18deg);
  }

  16% {
    -webkit-transform: rotate(-12deg);
    -ms-transform: rotate(-12deg);
    transform: rotate(-12deg);
  }

  18% {
    -webkit-transform: rotate(12deg);
    -ms-transform: rotate(12deg);
    transform: rotate(12deg);
  }

  20% {
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}

.animated-ring {
  -webkit-animation: ring 2s ease infinite;
  animation: ring 2s ease infinite;
  transform-origin-x: 50%;
  transform-origin-y: 0px;
  transform-origin-z: initial;
}


/********** LOADING **********/
.cssload { width: 40px; height: 40px; position: absolute; left: 0; right: 0; top: 0; bottom: 0; display: inline-block; margin: auto; }

.cssload span, .cssload span::before, .cssload span::after { top: 0; left: 0; position: absolute; border-bottom: 2px solid transparent !important; border: 2px solid #007F73; border-radius: 50%; -o-border-radius: 50%; -ms-border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; width: 100% !important; height: 100% !important; display: inline-block; }

.cssload span {
  margin: -2px 0 0 -2px;
  animation: cssload-rotate 1150ms linear infinite;
  -o-animation: cssload-rotate 1150ms linear infinite;
  -ms-animation: cssload-rotate 1150ms linear infinite;
  -webkit-animation: cssload-rotate 1150ms linear infinite;
  -moz-animation: cssload-rotate 1150ms linear infinite;
}

.cssload span, .cssload span::before, .cssload span::after {
  top: 0;
  left: 0;
  position: absolute;
  border-bottom: 2px solid transparent !important;
  border: 2px solid #007F73;
  border-radius: 50%;
  -o-border-radius: 50%;
  -ms-border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  width: 100% !important;
  height: 100% !important;
  display: inline-block;
}

.cssload span::before {
  content: "";
  margin: 5% 0 0 5%;
  height: 90% !important;
  width: 90% !important;
  animation: cssload-rotate 1150ms linear infinite;
  -o-animation: cssload-rotate 1150ms linear infinite;
  -ms-animation: cssload-rotate 1150ms linear infinite;
  -webkit-animation: cssload-rotate 1150ms linear infinite;
  -moz-animation: cssload-rotate 1150ms linear infinite;
}

.cssload span::after {
  content: "";
  position: absolute;
  top: 15%;
  left: 15%;
  height: 70% !important;
  width: 70% !important;
  animation: cssload-rotate 2300ms linear infinite;
  -o-animation: cssload-rotate 2300ms linear infinite;
  -ms-animation: cssload-rotate 2300ms linear infinite;
  -webkit-animation: cssload-rotate 2300ms linear infinite;
  -moz-animation: cssload-rotate 2300ms linear infinite;
}

.spinner {
  -o-animation: rotation 1s linear infinite;
  animation: rotation 1s linear infinite
}


@-webkit-keyframes rotation {
  0% {
    -webkit-transform: rotate(0)
  }
  100% {
    -webkit-transform: rotate(360deg)
  }
}

@-moz-keyframes rotation {
  0% {
    -moz-transform: rotate(0)
  }
  100% {
    -moz-transform: rotate(360deg)
  }
}

@-ms-keyframes rotation {
  0% {
    -ms-transform: rotate(0)
  }
  100% {
    -ms-transform: rotate(360deg)
  }
}

@-o-keyframes rotation {
  0% {
    -o-transform: rotate(0)
  }
  100% {
    -o-transform: rotate(360deg)
  }
}

/********** 4. GENERAL **********/
/********************************/



.input-group-btn > .btn-style { font-size: 14px; }

.can-not-select { background: #c1c1c1 !important; }
.can-select { background: #D9EDF7 !important; cursor: pointer; position: relative; }
.can-select:after { position: absolute; content: '\f067'; top: 9px; right: 2px; font-family: 'FontAwesome'; font-size: 10px;  }
.selecting { color: #fff; background: #4387f5 !important; cursor: pointer; position: relative; }
p.selecting:after { position: absolute; content: '\f068'; top: 9px; right: 2px; font-family: 'FontAwesome'; font-size: 10px;  }

.highlighted { background: #fff1c7; cursor: pointer; }
.highlighted:hover { background: #bf9a29; }

.tag-general { padding: 3px 10px 2px 10px; border-radius: 3px; color: #fff; background: #337ab7; font-size: 12px; }
.tag-primary { background: #337ab7; }
.tag-success { background: #5cb85c; }
.tag-info { background: #5bc0de; }
.tag-warning { background: #f0ad4e; }
.tag-danger { background: #d9534f; }
.tag-gray { background: rgb(221, 221, 221); color: #000 }

.color-purple { color: #9575CD; }
.color-red { color: #FF5722; }

.item-wrapper { margin: -6px; border-bottom: 1px solid #ddd; padding: 6px; }
.item-header { font-weight: bold; font-size: 13px; }
.item-body { font-style: italic; color: #666; font-size: 12px; }
.select2-container--default .select2-results__option--highlighted[aria-selected] p { background-color: #5897fb; color: white; }

.pointer { cursor: pointer; }
.form-control { padding: 6px 10px;min-width: 50px; max-width: 1000px; }
.error { color: red; padding-top: 7px; display: block; }
.form-control.has-error { border-color: red; }

[class^="icon-"], [class*=" icon-"] {
  font-family: 'icomoon';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  min-width: 1em;
  display: inline-block;
  text-align: center;
  font-size: 16px;
  vertical-align: middle;
  position: relative;
  top: -1px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


main { padding-top: 30px; padding-bottom: 30px; }


/* Field */
.g-row { margin: 0px -5px; }
.field { float: left; padding: 5px; }
.field > label { width: 200px; float: left; margin-right: 10px; min-height: 34px; border-radius: 3px; padding-top: 8px; padding-bottom: 7px; padding-right: 20px; position: relative; cursor: unset; position: relative; word-wrap: break-word; }
.field > div { width: calc(100% - 210px); float: left; min-height: 34px; }
.field > label .help-text { position: absolute; top: 7px; right: 5px; }
.field > label .help-text i { font-size: 15px; color: #FF8300; }
.field > label .help-text > div { position: absolute; bottom: 25px; left: 0px; width: 280px; background: #666666; color: #ffffff; padding: 7px; border-radius: 3px; border-bottom-left-radius: 0px; display: none; z-index: 999; }
.field > label .help-text:hover > div { display: block; }
.field > label .help-text > div:before { content: ""; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 6px solid #666666; position: absolute; bottom: -6px; left: 0px; }
.note { color: red; }


.g-button { padding: 10px 0px 10px 0px; }
.g-table-button { padding: 0px 0px 10px 0px; }
.g-button .btn-style { margin: 5px 2px; border-radius: 5px; }
.btn { font-size: 13px; }
.btn-style { background: #0192B7; color: #fff; margin: 0px 2px; font-weight: bold; font-size: 13px; }
.btn-style > span { margin: 0px 2px; font-weight: bold; font-size: 13px; }
.btn-style:hover { color: #fff; }
.btn-style.btn-back { color: #333; background: #f5f5f5; border: 1px solid #ddd; -webkit-box-shadow: inset 2px 2px 10px rgba(204, 204, 204, 0.35); box-shadow: inset 2px 2px 10px rgba(204, 204, 204, 0.35); }
.btn-close { color: #333; background: #f5f5f5; border: 1px solid #ddd; -webkit-box-shadow: inset 2px 2px 10px rgba(204, 204, 204, 0.35); box-shadow: inset 2px 2px 10px rgba(204, 204, 204, 0.35); }

.field > div.g-date-from-to > div { float: left; }
.field > div.g-date-from-to > div.input-group { width: 47%; }
.field > div.g-date-from-to > div:nth-child(2) { width: 6%; }
.field > div.g-date-from-to > div.input-100 { width: 100%; }

.field > div > div.g-date-from-to > div { float: left; }
.field > div > div.g-date-from-to > div.g-datetime { width: 47%; }
.field > div > div.g-date-from-to > div.g-datetime > div:first-child { width: 58%; float: left; }
.field > div > div.g-date-from-to > div.g-datetime > div:last-child { width: 40%; float: right; }
.field > div > div.g-date-from-to > div:nth-child(2) { width: 6%; }

.input-group-addon {
  padding: 8px 6px;
}

.field .g-date-from-to .input-group-addon,
.input-group .input-group-addon { cursor: pointer; }

.icon-date { padding-top: 5px; }

.section-title { text-transform: uppercase; border-left: 5px solid #3897F0; font-size: 15px; padding-left: 5px; padding-top: 4px; font-weight: bold; color: #3897f0; }

textarea { resize: vertical; min-height: 30px; max-height: 300px; }

.field .g-radio,
.field .g-checkbox { padding-top: 10px; min-height: 34px; }

.checkbox-inline, .radio-inline { padding-left: 25px; padding-bottom: 8px; }
.checkbox-inline input[type="checkbox"], .radio-inline input[type="radio"] { display: none; }
.checkbox-inline .check { position: absolute; top: -2px; left: 0px; width: 18px; height: 18px; border: 2px solid #666; box-sizing: border-box; }
.radio-inline .check { position: absolute; top: 0px; left: 0px; width: 18px; height: 18px; border-radius: 100%; border: 2px solid #666; }
.checkbox-inline .check:before { position: absolute; top: 0px; left: 1px; background: none; content: ""; display: block; font-family: "FontAwesome"; font-size: 11px; width: 9px; height: 9px; }
.radio-inline .check:before { position: absolute; top: 3px; left: 3px; width: 8px; height: 8px; border-radius: 100%; background: none; content: ""; display: block; }
.not-allowed { cursor: not-allowed; color: #999; }
.radio-inline.not-allowed .check { border: 2px solid #999; }

.checkbox-inline input[type="checkbox"]:checked ~ .check, .radio-inline input[type="radio"]:checked ~ .check { border: 2px solid #0085A7 }
.radio-inline input[type="radio"]:checked ~ .check::before { background: #0085A7; }
.checkbox-inline input[type="checkbox"]:checked ~ .check::before { background: none; color: #0085A7; content: "\f00c"; }

.radio-inline.not-allowed input[type="radio"]:checked ~ .check::before { background: #999; }

.checkbox-inline, .radio-inline { margin-left: 0px !important; margin-right: 20px !important; float: left; }
.field-checkbox-radio { padding-top: 7px; }

.repeat-summary { float: left; }
.repeat-summary a { color: #4387F5; padding: 0px 5px; font-size: 12px; display: inline-block; border-radius: 2px; }
.repeat-summary a:hover { color: #fff; background: #4387F5; }

.no-select {
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Chrome/Safari/Opera */
  -khtml-user-select: none; /* Konqueror */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  user-select: none; /* Non-prefixed version, currently
  not supported by any browser */
}

.approve-form .checkbox-inline, .approve-form .radio-inline { cursor: not-allowed; }
.approve-form .check { border: 2px solid #bbb !important; }
.approve-form .radio-inline input[type="radio"]:checked ~ .check::before { background: #bbb; }
.approve-form .checkbox-inline input[type="checkbox"]:checked ~ .check::before { color: #bbb; }


/********** 3. HEADER **********/
/*******************************/
.navbar-default { background-color: #f5f5f5; }
.navbar { border: 0px; }
.navbar-inverse { background-color: #0085A7; border-color: #0085A7; }

.navbar-inverse { border-bottom-color: rgba(255,255,255,.1); color: #fff; }
.nav-justified > li > a, .navbar { margin-bottom: 0; }
.navbar { border-radius: 0; }
.navbar { border-width: 1px 0; padding-left: 0; padding-right: 0; }



/* menu-icons */
.menu-icons { float: left; margin-left: 10px; }
.menu-icons ul {}
.menu-icons ul li { float: left; }
.menu-icons ul li a {
  display: block;
  width: 95px;
  height: 50px;
  line-height: 50px;
  color: #fff;
  text-align: center;
  text-decoration: none; }
.menu-icons ul li a i { font-size: 22px; }
.menu-icons ul li a span { font-size: 11px; color: #000; }
.menu-icons ul li a.active ,
.menu-icons ul li a:hover  { border-bottom: 3px solid #3897F0; }
.menu-icons ul li a img { width: 28px; padding-top: 12px; }
.menu-icons ul li:blank {
  display: none;
}

/* menu-icons on user */
.menu-icons-user {
  margin-left: 190px;
}






/* dropdown-time */
.dropdown-time { float: left; }
.dropdown-time > a { font-family: 'roboto-thin'; font-size: 35px; background: #03728F; margin-right: 1px; color: #fff; display: block; padding: 0px 15px; margin-left: 15px;}
.dropdown-time > a:hover { background: #03728F !important; text-decoration: none; }
.dropdown-time > a div { float: left; }
.dropdown-time > a div:last-child { padding-top: 9px; margin-left: 10px; font-family: arial; font-size: 14px; line-height: 16px; }
.dropdown-time > a div:last-child span { display: block; }
/*.dropdown-time > a .time-12 { font-size: 20px; line-height: 0px; color: #fff; }*/
.dropdown-time .dropdown-menu strong { font-size: 13px; display: block; margin-bottom: 5px; }
.dropdown-time .dropdown-menu { padding-left: 15px; padding-right: 15px; }

.mb-time { display: none !important; }


/* dropdown-user */
.dropdown-menu { min-width: 200px; padding: 7px 0; color: #333; -webkit-box-shadow: 0 1px 3px rgba(0,0,0,.1); box-shadow: 0 1px 3px rgba(0,0,0,.1); }
.navbar-nav > li > .dropdown-menu { margin-top: 1px; border-top-width: 0; }
.dropdown-menu > li { position: relative; margin-bottom: 1px; }
.dropdown-menu > .dropdown-header > i, .dropdown-menu > .dropdown-header > img, .dropdown-menu > li > a > i, .dropdown-menu > li > a > img { margin-right: 12px; float: left; margin-top: 2px; top: 0; }

.dropdown-menu > li > a { padding: 8px 15px; overflow: hidden; text-overflow: ellipsis; }

.navbar-nav>.dropdown-user img { max-width: 35px; border-radius: 50%; vertical-align: middle; }
.navbar-nav > .dropdown-user > a > span { display: inline-block; padding-left: 7px; }

.dropdown-user .dropdown-menu > li > a > i { width: 22px; }

/* language */
.position-left { margin-right: 7px; }


.navbar-nav > li > .dropdown-menu .item-list {max-height: 340px; overflow-y: auto; }
.dropdown-noti .dropdown-menu { padding: 0px; }
.navbar-nav > li > a > .badge { position: absolute; top: 2px; right: 2px; }
.bg-warning-400 { background-color: #EF5350; border-color: #EF5350; color: #fff; }

.item-list .item { border-bottom: 1px solid #e5e5e5; font-size: 13px; }
.item-list .item.notification:hover { background: #E4E9F2; border-bottom: 1px solid #dddfe2; }
.item-list .item:last-child { border-bottom: 0px; }
.item-list .item.unread { background: #E4E9F2; border-bottom: 1px solid #dddfe2; }
.item-list .item a { display: block; color: #333;  padding: 7px 15px; }
.item-list .item p { margin-bottom: 3px; }
.item-list .item a:hover { text-decoration: none; }
.item-list .item span { font-style: italic; font-size: 12px; color: #999; }

.dropdown-noti .dropdown-content-footer { text-align: center; padding: 10px; border-top: 1px solid #ddd; font-size: 12px; }
.dropdown-noti .dropdown-content-footer a:hover { text-decoration: none; }

.position-right { margin-left: 7px; }



/* navbar-second-toggle */
#navbar-second-toggle {}
#navbar-second-toggle ul { text-align: center; }
#navbar-second-toggle ul li { display: inline-block; }
#navbar-second-toggle ul li a { display: block; height: 50px; line-height: 50px; padding: 0px 15px; text-decoration: none; text-transform: uppercase; color: #333; border-top: 3px solid transparent; border-bottom: 3px solid transparent; font-size: 13px; -webkit-font-smoothing: antialiased !important; outline: none; }
#navbar-second-toggle ul li.active a, #navbar-second-toggle ul li:hover a { text-decoration: none;  border-bottom: 3px solid #0085A7; color: #0085A7; }

.owl-menu { }
.owl-stage { margin: 0px auto; }
.owl-menu .item { text-align: center; }
.owl-menu .item a { display: block; height: 50px; line-height: 50px; padding: 0px 15px; text-decoration: none; text-transform: uppercase; color: #333; border-top: 3px solid transparent; border-bottom: 3px solid transparent; font-size: 13px; -webkit-font-smoothing: antialiased !important; outline: none; }
.owl-menu .item.active a,
.owl-menu .item:hover a { text-decoration: none;  border-bottom: 3px solid #0085A7; color: #0085A7; }

.owl-menu .owl-nav{ margin-top: 0px; }
.owl-menu .owl-nav div { position: absolute; top: 0px; width: 30px; height: 100%; margin: 0px; text-indent: -9999px; opacity: 1; }
.owl-menu .owl-nav .owl-prev { left: -30px; background: url(../../img/arrow-left.png) no-repeat center center; background-size: 20px; }
.owl-menu .owl-nav .owl-next { right: -30px; background: url(../../img/arrow-right.png) no-repeat center center; background-size: 20px;}


.navbar-inverse .navbar-nav > li > a { color: #fff; }
.navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form { border-color: transparent; }
.navbar-inverse .navbar-nav > .open > a, .navbar-inverse .navbar-nav > .open > a:focus, .navbar-inverse .navbar-nav > .open > a:hover {
    color: #fff;
    background-color: #03728F;
}

.module-auths canvas { width: 100% !important; height: 100% !important; }



/********** 6. FOOTER **********/
/*******************************/

.footer { background: #3897F0; color: #fff; height: 69px; line-height: 34px; }
.footer p { font-style: italic; line-height: 70px;}

#toTopHover { opacity: 0; position: fixed; right: 15px; bottom: 50px; color: #fff; cursor: pointer; font-size: 18px; padding: 8px 10px; z-index: 5; background: #379DB7; transition: all 0.5s ease-out 0s; }
#toTopHover:hover { background: #0085A7; color: #fff; }




/********** 5. CUSTOM DATATABLE **********/
/*****************************************/
.reception table.dataTable thead th { font-weight: normal; font-size: 16px; }
table.dataTable.no-footer {border-bottom: 1px solid #ddd; }
table.dataTable thead th { border-top: 1px solid #ddd; border-right: 1px solid #ddd; border-bottom: 1px solid #ddd; background: #D9EDF7; white-space: nowrap; }
table.dataTable thead th:first-child { border-left: 1px solid #ddd; }
table td.actions { white-space: nowrap; }
/* table td.actions a { color: #3897F0; text-decoration: none; } */
table td.actions a { color: var(--main-bg-color); text-decoration: none; }
.datatable-footer { padding: 10px 0px; }
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  color: #fff !important;
  border: 1px solid #0192B7;
  background: #0192B7;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:active,
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  color: #fff !important;
  border: 1px solid #0192B7;
  background: #0192B7;
}
.dataTables_wrapper .dataTables_paginate .paginate_button { padding: 0.3em 0.75em }
.datatable-scroll td, .datatable-scroll th { vertical-align: middle; }
.datatable-scroll { position: relative; margin-bottom: 0px; }
.dataTables_wrapper .dataTables_processing { background: rgba(255, 255, 255, 0.5); top: 0px; left: 0px; width: 100%; height: 100%; margin-left: 0px; margin-top: 0px; }
.dataTables_wrapper .dataTables_processing .box-loading { width: 100%; height: 100%;margin-top: 0px; }
.dataTables_wrapper .dataTables_processing .cssload { top: 0%; left: 50%; margin-top: -15px; margin-left: -20px; bottom: auto; right: auto; }

/* DataTable Loading */
.datatable-scroll { position: relative; }
.dataTables_wrapper .dataTables_processing { background: rgba(255, 255, 255, 0.5); top: 0px; left: 0px; width: 100%; height: 100%; margin-left: 0px; margin-top: 0px; }
.dataTables_wrapper .dataTables_processing .box-loading { width: 100%; height: 100%;margin-top: 0px; }
.dataTables_wrapper .dataTables_processing .cssload { top: 50%; left: 50%; margin-top: -15px; margin-left: -20px; bottom: auto; right: auto; }





/********** 7. CUSTOM DATETIMEPICKER **********/
/**********************************************/
.bootstrap-datetimepicker-widget {
  list-style: none;
}
.bootstrap-datetimepicker-widget.dropdown-menu {
  margin: 2px 0;
  padding: 16px;
  width: 20em;
  box-shadow: 0 1px 3px rgba(0,0,0,.1);
  border: 1px solid #ddd;
  border-radius: 3px;
}

.bootstrap-datetimepicker-widget table th.disabled,
.bootstrap-datetimepicker-widget table th.disabled:hover {
  background: none;
  color: #ccc;
  cursor: not-allowed;
}

.bootstrap-datetimepicker-widget table td.cw {
  font-size: .8em;
  height: 20px;
  line-height: 20px;
  color: #ccc;
}

.bootstrap-datetimepicker-widget table td.old,
.bootstrap-datetimepicker-widget table td.new {
  color: #ccc;
}

.bootstrap-datetimepicker-widget table td.disabled,
.bootstrap-datetimepicker-widget table td.disabled:hover {
  background: none;
  color: #ccc;
  cursor: not-allowed;
}

.bootstrap-datetimepicker-widget table td span.old {
  color: #ccc;
}
.bootstrap-datetimepicker-widget table td span.disabled,
.bootstrap-datetimepicker-widget table td span.disabled:hover {
  background: none;
  color: #ccc;
  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: 2px;
}

.bootstrap-datetimepicker-widget table td.today:before {
  content: '';
  display: inline-block;
  border: solid transparent;
  border-width: 0 0 7px 7px;
  border-bottom-color: #26A69A;
  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: #26A69A;
  color: #fff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}

.bootstrap-datetimepicker-widget table td span.active {
  background-color: #26A69A;
  color: #fff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}

.bootstrap-datetimepicker-widget table td,
.bootstrap-datetimepicker-widget table th {
  text-align: center;
  border-radius: 2px;
  font-size: 13px;
}


/********** 7. CUSTOM SELECT2 **********/
/***************************************/
.input-select2 {
  font: 99% sans-serif;
    font-size: 14px;
}
.input-select2 select option {
  font: 99% sans-serif;
  font-size: 14px;
}
.select2-container {
  font: 99% sans-serif;
  font-size: 14px;
	display: inline-block !important;
}
.input-select2 .select2-container .select2-selection--single {
  height: 34px; border-radius: 4px;
  font: 99% sans-serif;
  font-size: 14px;
}
.input-select2 .select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 34px;
  font-size: 14px;
  padding-left: 13px;
}
.input-select2 .select2-container--default .select2-selection--single .select2-selection__arrow { height: 32px; }
.input-select2 .select2-container--default .select2-selection--single { border: 1px solid #ccc; -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075); -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.075); box-shadow: inset 0 1px 1px rgba(0,0,0,.075); }
.select2-container--default .select2-selection--single .select2-selection__placeholder { font-size: 14px; }

.select2-container .select2-search--inline .select2-search__field { margin-top: 8px; padding-left: 0px; }
.input-select2 .select2-container .select2-selection--multiple { min-height: 34px; border-radius: 4px; }
.select2-container--default.select2-container--focus .select2-selection--multiple {
  border-color: #66afe9;
  outline: 0;
  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
  box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
}
.select2-container--default .select2-selection--multiple .select2-selection__choice { margin-top: 5px; height: 28px; border: 0px; line-height: 28px; padding: 0px 10px; background: #0192B7; color: #fff; }
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove { margin-right: 5px; color: #fff; }
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover { color: #f5f5f5; }
.select2-results__option {
  -moz-transition: all 0.2s ease-out 0s;
  -webkit-transition: all 0.2s ease-out 0s;
  transition: all 0.2s ease-out 0s;
}
.select2-container--default .select2-selection--multiple { border: 1px solid #ccc; }
.select2-container .select2-selection--multiple { min-height: 34px; }

.g-item-equipment {}
.g-item-equipment table { width: 100%; }
.g-item-equipment table td { padding-top: 10px; vertical-align: middle; }
.g-item-equipment table td:first-child { width: 60px; max-width: 60px; }
.g-item-equipment table td:last-child { width: 15px; max-width: 15px; }
.g-item-equipment table td:nth-child(2) { padding-left: 5px; padding-right: 5px; }
.g-item-equipment table td:last-child a { color: red; }

.g-item-local-number {}
.g-item-local-number table { width: 100%; }
.g-item-local-number table td { padding-top: 10px; vertical-align: middle; }
.g-item-local-number table td:last-child { width: 15px; max-width: 15px; }
.g-item-local-number table td:last-child a { color: red; }

.edit-record:hover { color: #4387F5; }
.del-record:hover,
.delete-record:hover { color: red; }
.his-record:hover { color: #0085A7; }
.approve-record:hover { color: #4dba3f; }

/* .btn-show-map { text-decoration: none; font-weight: bold; color: #4387F5; outline: 0px; } */
.btn-show-map { text-decoration: none; font-weight: bold; color: var(--text-color); outline: 0px; }
.btn-show-map:hover, .btn-show-map:focus { text-decoration: none; outline: 0px; }
.btn-show-map i { font-size: 30px; vertical-align: middle; }

.tbl-invite-people table { border-collapse: collapse; margin-bottom: 0px; margin-top: 15px; }
.tbl-invite-people table:first-child { margin-top: 5px; }
.tbl-invite-people table { border-collapse: collapse; margin-bottom: 0px; }
.tbl-invite-people table th { background: #f5f5f5; }
.tbl-invite-people table th,
.tbl-invite-people table td { text-align: center; white-space: normal !important; vertical-align: middle !important; }
.tbl-invite-people table th:first-child,
.tbl-invite-people table td:first-child { text-align: left; }
.tbl-invite-people table th:nth-child(2),
.tbl-invite-people table th:nth-child(3) { max-width: 70px; width: 70px; }
.tbl-invite-people table th:last-child { width: 40px; max-width: 40px; }
.tbl-invite-people table th:last-child a,
.tbl-invite-people table td:last-child a { color: red; }
.tbl-invite-people table tr:last-child td {}
.tbl-invite-people table th:first-child > div { display: table; width: 100%; }
.tbl-invite-people table th:first-child > div > div { display: table-cell; vertical-align: middle; }
.tbl-invite-people table th:first-child > div > div:first-child {  width: 45px; }
.tbl-invite-people table th:first-child span { font-weight: bold; }
.tbl-invite-people table th:first-child a { vertical-align: middle; display: inline-block; outline: 0px; }
.tbl-invite-people table th:first-child a:active { outline: 0px; }
.tbl-invite-people table th:first-child a img { width: 35px; }
.table-bordered > thead > tr > th { border-bottom-width: 1px; }
.btn-switch { padding: 5px; border: 0px; border-radius: 100%; margin-right: 10px; width: 40px; height: 40px; }
.btn-switch:hover { background: #0184a5; }
.btn-switch img { display: block; }

.room-equipments { margin-top: 5px; }
.room-equipments img { height: 22px; margin-right: 15px; }

.cal-palette { padding-top: 6px; }
.palette { width: 18px; height: 18px; border: 1px solid #fff; float: left; margin: 2px; position: relative; cursor: pointer; }
.palette:hover { border: 1px solid #999; }
.bcp-selected { width: 10px; height: 10px; position: absolute; top: 3px; left: 3px; background: url(../../img/combined_v46_vr.png) no-repeat -95px -50px; z-index: 999; }

.select-a-room { width: calc(100% - 250px); float: left; }
.select-multiple-room { width: 250px; float: right; margin-bottom: 20px; }
.select-multiple-room > div:first-child { width: 70px; float: left; line-height: 34px; height: 34px; }
.select-multiple-room > div:last-child { width: calc(100% - 70px); float: left; }
.select-multiple-room > div:last-child button { width: 100%; margin: 0px; height: 34px; }


.schedule-details-title { padding: 5px 0px; border-bottom: 1px solid #ddd; margin-bottom: 10px; }
.schedule-details-title h2 { border-left: 5px solid #333; padding-left: 5px; text-transform: uppercase; font-weight: bold; padding-top: 2px; }
section div .font-mei {font-family: Meiryo UI;}
.width-80 {width: 80%;}



.g-datetime-repeat { display: none; }
.date-repeat { width: 253px; float: left; margin-right: 10px; }
.time-repeat { width: 456px !important; float: left; }
.time-repeat > .g-datetime { width: 47%; float: left; }
.time-repeat > .icon-date { width: 6%; float: left; }



/********** 7. CUSTOM MODAL **********/
/*************************************/
.modal-header { padding: 10px 15px; border-bottom: 0px solid #e5e5e5; background: #0085A7; color: #fff; border-top-left-radius: 2px; border-top-right-radius: 2px; }
.modal-title { font-size: 13px; color: #fff; font-weight: bold; }
.modal-header .close { margin-top: 0px; color: #fff; opacity: 0.75; }
.modal-header .close:hover { opacity: 1; }
.modal-footer { padding-top: 0px; border-top: 0px solid #e5e5e5; }
.modal-content { border-radius: 3px; }

#modalMap .modal-title { text-transform: uppercase; }
#modalMap .modal-dialog { max-width: 1140px; width: 100%; margin: 30px auto; }
#modalMap p { margin-bottom: 15px; }



#modalRepeat .modal-dialog { max-width: 500px; width: 100%; margin: 30px auto; }
#modalRepeat .modal-body { padding-bottom: 10px; }
#modalRepeat .modal-footer { text-align: center; }

#modalRepeat .g-row { margin: 0px -5px; }
#modalRepeat .field { float: left; padding: 3px 5px; }
#modalRepeat .field > label { width: 100px; float: left; margin-right: 10px; min-height: 34px; border-radius: 3px; padding-top: 9px; padding-bottom: 7px; position: relative; cursor: unset; }
#modalRepeat .field > div { width: calc(100% - 110px); float: left; min-height: 34px; }
#modalRepeat .checkbox-inline, #modalRepeat .radio-inline { float: left; margin-left: 0 !important; margin-right: 10px !important; }

.repeat-every select { display: inline-block; }



#modalSelectMultipleRooms .modal-dialog { max-width: 1167px; width: 100%; margin: 30px auto; }
#modalSelectMultipleRooms .field > label { width: 100px; float: left; margin-right: 10px; min-height: 34px; border-radius: 3px; padding-top: 9px; padding-bottom: 7px; position: relative; cursor: unset; text-align: right; }
#modalSelectMultipleRooms .field > div { width: calc(100% - 110px); float: left; min-height: 34px; }
#modalSelectMultipleRooms .field-filter { display: none; }
#modalSelectMultipleRooms .field-filter > div { padding: 5px 0px; float: left; margin-right: 1%; }
#modalSelectMultipleRooms .field-filter > div:nth-child(1),
#modalSelectMultipleRooms .field-filter > div:nth-child(2) { width: 23%; }
#modalSelectMultipleRooms .field-filter > div:nth-child(3) { width: 38%; }
#modalSelectMultipleRooms .field-filter > div:nth-child(4) { width: 13%; margin-right: 0px; }
#modalSelectMultipleRooms .field-note { float: none; margin-top: 10px; }
#modalSelectMultipleRooms .field-note p { color: red; font-style: italic; font-weight: bold; }
#modalSelectMultipleRooms .field-note div { line-height: 34px; float: none; }
#modalSelectMultipleRooms .field-note div span { margin-right: 20px; }
#modalSelectMultipleRooms .field-note div span:before { content: ""; display: inline-block; width: 16px; height: 16px; margin-right: 5px; vertical-align: middle; }
#modalSelectMultipleRooms .field-note div span:nth-child(1):before { background: #c1c1c1; border: 1px solid; }
#modalSelectMultipleRooms .field-note div span:nth-child(2):before { background: #D9EDF7; border: 1px solid; }
#modalSelectMultipleRooms .field-note div span:nth-child(3):before { background: #4387f5; border: 1px solid; }

#modalSelectMultipleRooms .field-table .table-w { max-height: 343px; overflow-y: scroll !important; -webkit-overflow-scrolling: auto; margin-bottom: 10px; margin-top: 5px; }
#modalSelectMultipleRooms .field-table { float: none; }
#modalSelectMultipleRooms .field-table .table { border-collapse: collapse; margin-bottom: 0px; font-size: 12px; }
#modalSelectMultipleRooms .field-table .table th:first-child { width: 200px; min-width: 200px; }
#modalSelectMultipleRooms .field-table .table th { text-align: center; white-space: nowrap; }
#modalSelectMultipleRooms .field-table .table th p { font-weight: bold; padding: 8px 12px; }
#modalSelectMultipleRooms .field-table .table th:first-child { z-index: 2 !important; }
#modalSelectMultipleRooms .field-table .table th { z-index: 1; }
#modalSelectMultipleRooms .field-table .table th,
#modalSelectMultipleRooms .field-table .table td { padding: 0px; }
#modalSelectMultipleRooms .field-table .table p { background: #efefef; padding: 8px 2px; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; margin: -1px 0px; }
#modalSelectMultipleRooms .field-table .table td p {
  margin: -1px;
  border-left: 1px solid #ddd;
  border-right: 1px solid #ddd;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 205px;
}

#modalSelectMultipleRooms .field-table .table td.not-found { position: static !important; }
#modalSelectMultipleRooms .field-table .table td.not-found p {
  margin: -1px;
  border-left: 1px solid #ddd;
  border-right: 1px solid #ddd;
  width: auto;
  font-weight: bold;
  text-align: center;
}

#modalSwapPeople .modal-dialog { max-width: 960px; width: 100%; }
#modalSwapPeople .modal-title { text-transform: uppercase; }
.swap-people {}
.column { width: calc(50% - 60px); float: left; }
.column .field-swap { margin-bottom: 15px; }
.column label { font-weight: bold; margin-bottom: 5px; }
.switch-icon { width: 120px; float: left; padding-top: 200px; }
.switch-icon img { width: 40px; }
.switch-icon .icon-pc a { display: block; }
.switch-icon .icon-mb { display: none; }

.column .table-people { height: 300px; border: 1px solid #ddd; border-radius: 3px; overflow-x: hidden; overflow-y: auto; }
.column .table-people table { width: 100%; }
.column .table-people table th { text-align: center; background: #EFEFEF; }
.column .table-people table th:first-child,
.column .table-people table td:first-child { width: 30px; text-align: center; border-right: 1px solid #ddd; }
.column .table-people table th,
.column .table-people table td { padding: 7px; }
.column .table-people table th,
.column .table-people table td { border-bottom: 1px solid #ddd; vertical-align: middle; }
.column .table-people table input[type="checkbox"] {  vertical-align: middle; margin-top: 0px; }
.column .table-people table tr.selected td { background: #FCF8E3; }



#modalEmailConfig .field { float: left; padding: 3px 5px; }
#modalEmailConfig .field > label { width: 100px; float: left; margin-right: 10px; min-height: 34px; border-radius: 3px; padding-top: 9px; padding-bottom: 7px; position: relative; cursor: unset; }
#modalEmailConfig .field > div { width: calc(100% - 110px); float: left; min-height: 34px; }

/* ------------------------------------------------------------------------------
*
*  # Navs related component
*
*  Overrides for navs related bootstrap component
*
*  Version: 1.3
*  Latest update: Aug 10, 2016
*
* ---------------------------------------------------------------------------- */
.nav > li > a:focus {
  outline: 0;
}
.nav > li.disabled > a > .badge,
.nav > li.disabled > a > .label,
.nav > li.disabled > a > .status-mark,
.nav > li.disabled > a > img {
  opacity: 0.75;
  filter: alpha(opacity=75);
}
.nav .open > a,
.nav .open > a:hover,
.nav .open > a:focus {
  background-color: transparent;
  border-color: transparent;
  color: #333333;
}
.nav.nav-lg > li > a {
  padding: 11px 20px;
}
.nav.nav-sm > li > a {
  padding: 7px 15px;
}
.nav.nav-xs > li > a {
  padding: 5px 10px;
}
.nav .tab-img {
  max-height: 20px;
  display: inline-block;
  vertical-align: top;
}
.nav-tabs {
  margin-bottom: 20px;
}
.nav-tabs > li {
  float: none;
}
.nav-tabs > li > a {
  margin-right: 0;
  color: #888;
  border-radius: 0;
}
.nav-tabs > li > a:hover,
.nav-tabs > li > a:focus {
  background-color: transparent;
  border-color: transparent;
  color: #333333;
}
.nav-tabs > li > a > [class*=icon-].pull-right {
  float: right;
  margin-top: 2px;
}
.nav-tabs.nav-justified > li > a {
  border-radius: 0;
  margin-bottom: 0;
}
.nav-tabs.nav-justified > li > a:hover,
.nav-tabs.nav-justified > li > a:focus {
  border-bottom-color: #ddd;
}

.nav-tabs[class*=bg-] {
  border-bottom: 0;
}
.nav-tabs[class*=bg-] > li {
  margin-bottom: 0;
}
.nav-tabs[class*=bg-] > li > a {
  color: #fff;
  border-width: 0;
}
.nav-tabs[class*=bg-] > li > a:hover,
.nav-tabs[class*=bg-] > li > a:focus {
  background-color: rgba(0, 0, 0, 0.05);
}
.nav-tabs[class*=bg-] > li.open:not(.active) > a {
  color: #fff;
  background-color: rgba(0, 0, 0, 0.05);
}
.nav-tabs[class*=bg-] > .active > a,
.nav-tabs[class*=bg-] > .active > a:hover,
.nav-tabs[class*=bg-] > .active > a:focus {
  background-color: rgba(0, 0, 0, 0.1);
  border-width: 0;
  color: #fff;
}
.nav-tabs[class*=bg-] > .disabled > a,
.nav-tabs[class*=bg-] > .disabled > a:hover,
.nav-tabs[class*=bg-] > .disabled > a:focus {
  color: rgba(255, 255, 255, 0.5);
}

.nav-tabs.nav-tabs-solid > li > a {
  color: #333333;
}
.nav-tabs.nav-tabs-solid > li > a,
.nav-tabs.nav-tabs-solid > li > a:hover,
.nav-tabs.nav-tabs-solid > li > a:focus {
  border-color: transparent;
}
.nav-tabs.nav-tabs-solid > .active > a,
.nav-tabs.nav-tabs-solid > .active > a:hover,
.nav-tabs.nav-tabs-solid > .active > a:focus {
  background-color: #2196F3;
  border-color: #2196F3;
  color: #fff;
}

.nav-tabs.nav-tabs-icon > li > a > i {
  margin-right: 7px;
}




.nav-pills {
  margin-bottom: 20px;
}
.nav-pills > li {
  float: none;
}
.nav-pills > li > a {
  color: #333333;
}
.nav-pills > li + li {
  margin-left: 0;
}
.nav-pills > li + li > a {
  margin-top: 2px;
}
.nav-pills .open > a,
.nav-pills .open > a:hover,
.nav-pills .open > a:focus {
  background-color: #f5f5f5;
}
.nav-pills.nav-pills-bordered > li > a,
.nav-pills.nav-pills-toolbar > li > a,
.nav-pills.nav-pills-bordered > .open > a,
.nav-pills.nav-pills-toolbar > .open > a {
  border: 1px solid #ddd;
}
.nav-pills.nav-pills-bordered > .active > a,
.nav-pills.nav-pills-toolbar > .active > a,
.nav-pills.nav-pills-bordered > .active > a:hover,
.nav-pills.nav-pills-toolbar > .active > a:hover,
.nav-pills.nav-pills-bordered > .active > a:focus,
.nav-pills.nav-pills-toolbar > .active > a:focus {
  border-color: #2196F3;
}


.nav-stacked > li {
  display: block;
}
.nav-stacked > li > a .pull-right[class*=icon-] {
  float: right;
  margin-top: 2px;
}
.nav-stacked > li > a .pull-right.label,
.nav-stacked > li > a .pull-right.badge {
  float: right;
}
.nav-stacked > li + li > a {
  margin-left: 0;
}
.nav-justified > li > a {
  margin-bottom: 0;
}
.nav-tabs-justified > li > a {
  border-radius: 0;
  margin-bottom: 0;
}
.nav-tabs-justified > li > a:hover,
.nav-tabs-justified > li > a:focus {
  border-bottom-color: #ddd;
}



.tab-content-bordered .tab-content > .has-padding {
  padding: 20px;
}
.panel-flat > .panel-heading + .tab-content > .has-padding {
  padding-top: 0;
}

.panel-tab-content > .has-padding {
  padding: 20px;
}
.tab-content-bordered .tab-content {
  border-radius: 3px;
  border: 1px solid transparent;
}
.tab-content-bordered .tab-content:not([class*=bg-]) {
  border-color: #ddd;
  background-color: #fff;
}

/********** 7. DROPZONE UPLOAD FILE **********/
/*********************************************/
.dropzone .dz-default.dz-message,
.dropzone .dz-message {
  opacity: 1;
  filter: alpha(opacity=100)
}

.dropzone {
  position: relative;
  border: 3px dashed #eee;
  min-height: 230px;
  border-radius: 2px;
  background-color: #fcfcfc;
  padding: 5px
}

.dropzone.dz-clickable,
.dropzone.dz-clickable .dz-message,
.dropzone.dz-clickable .dz-message span {
  cursor: pointer
}

.dropzone.dz-clickable * {
  cursor: default
}

.dropzone.dz-drag-hover {
  border-color: rgba(0, 0, 0, .15);
  background: rgba(0, 0, 0, .04)
}

.sidebar .dropzone {
  min-height: 190px;
  text-align: center;
  border-width: 2px
}

.sidebar .dropzone .dz-default.dz-message:before {
  font-size: 64px;
  width: 64px;
  height: 64px;
  margin-left: -32px;
  top: 50px
}

.sidebar .dropzone .dz-default.dz-message span {
  font-size: 15px
}

.sidebar .dropzone .dz-default.dz-message>span {
  margin-top: 130px
}

.dropzone .dz-default.dz-message {
  position: absolute;
  height: 230px;
  width: 100%;
  margin-top: -115px;
  top: 50%;
  left: 0;
  padding: 20px;
  text-align: center;
  border-radius: 5px;
  -webkit-transition: opacity .3s ease-in-out;
  -o-transition: opacity .3s ease-in-out;
  transition: opacity .3s ease-in-out
}

.dropzone .dz-default.dz-message:before {
  font-family: 'FontAwesome';
  content: '\f0f6';
  font-size: 50px;
  position: absolute;
  top: 60px;
  width: 64px;
  height: 64px;
  display: inline-block;
  left: 50%;
  margin-left: -32px;
  line-height: 1;
  z-index: 2;
  color: #ddd;
  text-indent: 0;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale
}

.dropzone .dz-default.dz-message span {
  font-size: 15px;
  color: #bbb;
  text-align: center;
  margin-top: 110px;
  display: block;
  font-weight: 500;
  text-shadow: 0 1px 1px #fff
}

.dropzone .dz-default.dz-message span>span {
  margin-top: 2px;
  display: block;
  color: #ccc;
  font-size: 15px
}

.dropzone.dz-drag-hover .dz-message {
  opacity: .15;
  filter: alpha(opacity=15)
}

.dropzone.dz-started .dz-message {
  display: block;
  opacity: 0;
  filter: alpha(opacity=0)
}

.dropzone .dz-preview,
.dropzone-previews .dz-preview {
  background-color: #fff;
  position: relative;
  display: inline-block;
  margin: 10px;
  vertical-align: top;
  border: 1px solid #ddd;
  padding: 8px;
  border-radius: 2px
}

.dropzone .dz-preview.dz-file-preview [data-dz-thumbnail],
.dropzone .dz-preview:hover .dz-details img,
.dropzone-previews .dz-preview.dz-file-preview [data-dz-thumbnail],
.dropzone-previews .dz-preview:hover .dz-details img {
  display: none
}

.dropzone .dz-preview .dz-details,
.dropzone-previews .dz-preview .dz-details {
  width: 140px;
  position: relative;
  background-color: #fafafa;
  padding: 8px;
  margin-bottom: 25px;
  margin-top: 10px;
}

.dropzone .dz-preview .dz-details .dz-filename,
.dropzone-previews .dz-preview .dz-details .dz-filename {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  height: 100%
}

.dropzone .dz-preview .dz-details img,
.dropzone-previews .dz-preview .dz-details img {
  position: absolute;
  top: 0;
  left: 0;
  width: 140px;
  height: 140px
}

.dropzone .dz-preview .dz-details .dz-size,
.dropzone-previews .dz-preview .dz-details .dz-size {
  position: absolute;
  bottom: -26px;
  left: 0
}

.dropzone .dz-preview .dz-error-mark,
.dropzone .dz-preview .dz-success-mark,
.dropzone-previews .dz-preview .dz-error-mark,
.dropzone-previews .dz-preview .dz-success-mark {
  display: none;
  position: absolute;
  z-index: 9;
  right: 8px
}

.dropzone .dz-preview .dz-error-mark:after,
.dropzone .dz-preview .dz-success-mark:after,
.dropzone-previews .dz-preview .dz-error-mark:after,
.dropzone-previews .dz-preview .dz-success-mark:after {
  font-family: icomoon;
  display: block;
  position: absolute;
  right: 0;
  bottom: 3px;
  font-size: 12px;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale
}

.dropzone .dz-preview .dz-error-mark span,
.dropzone .dz-preview .dz-error-mark svg,
.dropzone .dz-preview .dz-success-mark span,
.dropzone .dz-preview .dz-success-mark svg,
.dropzone-previews .dz-preview .dz-error-mark span,
.dropzone-previews .dz-preview .dz-error-mark svg,
.dropzone-previews .dz-preview .dz-success-mark span,
.dropzone-previews .dz-preview .dz-success-mark svg {
  display: none
}

.dropzone .dz-preview .dz-error-mark,
.dropzone-previews .dz-preview .dz-error-mark {
  color: #F44336
}

.dropzone .dz-preview .dz-error-mark:after,
.dropzone-previews .dz-preview .dz-error-mark:after {
  content: '\ed6a'
}

.dropzone .dz-preview .dz-success-mark,
.dropzone-previews .dz-preview .dz-success-mark {
  color: #4CAF50
}

.dropzone .dz-preview .dz-success-mark:after,
.dropzone-previews .dz-preview .dz-success-mark:after {
  content: '\ed6e'
}

.dropzone .dz-preview.dz-error .dz-error-mark,
.dropzone .dz-preview.dz-success .dz-success-mark,
.dropzone-previews .dz-preview.dz-error .dz-error-mark,
.dropzone-previews .dz-preview.dz-success .dz-success-mark {
  display: block;
  opacity: 1;
  filter: alpha(opacity=100)
}

.dropzone .dz-preview .dz-progress,
.dropzone-previews .dz-preview .dz-progress {
  position: absolute;
  top: 118px;
  left: 8px;
  right: 8px;
  height: 4px;
  background-color: #eee;
  display: none;
  border-radius: 2px
}

.dropzone .dz-preview .dz-progress .dz-upload,
.dropzone-previews .dz-preview .dz-progress .dz-upload {
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 0;
  height: 100%;
  background-color: #00BCD4;
  -webkit-transition: width .3s ease-in-out;
  -o-transition: width .3s ease-in-out;
  transition: width .3s ease-in-out
}

.dropzone .dz-preview.dz-processing .dz-progress,
.dropzone-previews .dz-preview.dz-processing .dz-progress {
  display: block
}

.dropzone .dz-preview.dz-success .dz-progress,
.dropzone-previews .dz-preview.dz-success .dz-progress {
  display: block;
  opacity: 0;
  filter: alpha(opacity=0);
  -webkit-transition: opacity .4s ease-in-out;
  -o-transition: opacity .4s ease-in-out;
  transition: opacity .4s ease-in-out
}

.dropzone .dz-preview .dz-error-message,
.dropzone-previews .dz-preview .dz-error-message {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(245, 245, 245, .8);
  margin: 8px;
  padding: 8px;
  color: #F44336;
  max-width: 100%;
  height: 140px;
  z-index: 5;
  opacity: 0;
  filter: alpha(opacity=0);
  -webkit-transition: opacity .3s ease-in-out;
  -o-transition: opacity .3s ease-in-out;
  transition: opacity .3s ease-in-out
}

.dropzone .dz-preview.dz-error:hover .dz-error-message,
.dropzone-previews .dz-preview.dz-error:hover .dz-error-message {
  display: block;
  opacity: 1;
  filter: alpha(opacity=100)
}

.dropzone .dz-preview.dz-error .dz-progress .dz-upload,
.dropzone-previews .dz-preview.dz-error .dz-progress .dz-upload {
  background: #F44336
}

.cropper-bg,
.image-cropper-container {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC)
}

.dropzone .dz-preview.dz-image-preview:hover .dz-details img,
.dropzone-previews .dz-preview.dz-image-preview:hover .dz-details img {
  display: block;
  opacity: .1;
  filter: alpha(opacity=10)
}

.dropzone .dz-preview a.dz-remove,
.dropzone-previews .dz-preview a.dz-remove {
  background-color: #fafafa;
  border-radius: 2px;
  border: 1px solid #eee;
  display: block;
  padding: 5px;
  text-align: center;
  color: #999;
  margin-top: 35px;
  cursor: pointer
}

.dropzone .dz-preview a.dz-remove:hover,
.dropzone-previews .dz-preview a.dz-remove:hover {
  color: #333;
  background-color: #f5f5f5
}

.dropzone .dz-image { width: 140px; height: 140px; background: linear-gradient(to bottom, #eee, #ddd); position: relative; overflow: hidden; }
.dropzone .dz-image img { position: absolute; top: 50%; left: 50%; margin-right: -50%; transform: translate(-50%, -50%); width: 100%; }
.dropzone .dz-image img.min-height { max-height: 100%; max-width: none; }
.dropzone .dz-image img.min-width { max-width: 100%; max-height: none; }

/********** 7. PICKER **********/
/*******************************/

.picker {
  text-align: left;
  top: 100%;
  margin-top: -1px;
  z-index: 990;
  -webkit-user-select: none;
  user-select: none
}

.picker, .picker__holder {
    width: 100%;
    position: absolute;
}

.AnyTime-pkr,
.picker--time .picker__button--clear,
.picker__footer,
.picker__header,
.picker__table,
.picker__weekday {
  text-align: center
}

.noUi-target,
.noUi-target *,
.ui-slider-pips .ui-slider-pip {
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none
}

.picker__input {
  cursor: default
}

.picker__holder {
  overflow-y: auto;
  display: none;
  background-color: #fff;
  border: 1px solid #ddd;
  border-top-width: 0;
  border-bottom-width: 0;
  max-width: 290px;
  max-height: 0;
  outline: 0;
  -webkit-overflow-scrolling: touch;
  border-bottom-right-radius: 3px;
  border-bottom-left-radius: 3px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .1)
}

.picker--opened .picker__holder {
  max-height: 480px;
  border-top-width: 1px;
  border-bottom-width: 1px;
  display: block
}

.picker__box {
  padding: 14px
}

.picker__header {
  position: relative;
  font-size: 15px;
  line-height: 1;
  padding-top: 15px;
  padding-bottom: 15px
}

.picker__month,
.picker__year {
  font-weight: 500;
  display: inline-block;
  margin-left: 5px;
  margin-right: 5px
}

.picker__year {
  color: #999;
  font-size: 12px;
  font-weight: 400
}

.picker__select--month,
.picker__select--year {
  border-color: #ddd;
  height: 32px;
  font-size: 13px;
  line-height: 1.6666667;
  margin-left: 5px;
  margin-right: 5px;
  outline: 0
}

.picker__select--month {
  width: 35%
}

.picker__select--year {
  width: 22.5%
}

.picker__nav--next,
.picker__nav--prev {
  position: absolute;
  padding: 8px;
  top: 50%;
  margin-top: -16px;
  border-radius: 2px;
  line-height: 1
}

.picker__nav--next:before,
.picker__nav--prev:before {
  display: block;
  font-size: 16px;
  width: 16px;
  text-align: center
}

.picker__button--clear:before,
.picker__button--close:before,
.picker__button--today:before {
  display: inline-block;
  margin-right: 5px;
  position: relative
}

.picker__nav--next:hover,
.picker__nav--prev:hover {
  cursor: pointer;
  background-color: #f5f5f5
}

.picker__nav--prev {
  left: 0
}

.picker__nav--prev:before {
  content: '\e9c8'
}

.picker__nav--next {
  right: 0
}

.picker__nav--next:before {
  content: '\e9cb'
}

.picker__nav--disabled,
.picker__nav--disabled:before,
.picker__nav--disabled:before:hover,
.picker__nav--disabled:hover {
  cursor: default;
  background: 0 0;
  border-right-color: #f5f5f5;
  border-left-color: #f5f5f5
}

.picker__table {
  font-size: inherit;
  width: 100%;
  margin-bottom: 14px
}

.picker__table td {
  margin: 0;
  padding: 0
}

.picker__weekday {
  width: 14.285714286%;
  font-size: 12px;
  padding-bottom: 10px;
  padding-top: 14px;
  color: #999;
  font-weight: 400
}

.picker__day {
  padding: 7px
}

.picker__day--today {
  position: relative;
  background-color: #f5f5f5
}

.picker__day--today:before {
  content: "";
  position: absolute;
  top: 2px;
  right: 2px;
  width: 0;
  height: 0;
  border-top: 6px solid #26A69A;
  border-left: 6px solid transparent
}

.picker__day--outfocus {
  color: #ccc
}

.picker__day--infocus:hover,
.picker__day--outfocus:hover {
  cursor: pointer;
  color: #333;
  background-color: #f5f5f5
}

.picker__day--highlighted:before {
  border-top-color: #fff
}

.picker__day--highlighted,
.picker__day--selected {
  border-radius: 3px
}

.picker--focused .picker__day--highlighted,
.picker__day--highlighted,
.picker__day--highlighted:hover {
  cursor: pointer;
  color: #fff;
  background-color: #26A69A
}

.picker--focused .picker__day--selected,
.picker__day--selected,
.picker__day--selected:hover {
  background-color: #26A69A;
  color: #fff
}

.picker__day--disabled,
.picker__day--disabled:hover {
  background: #fafafa;
  color: #999;
  cursor: default
}

.picker__day--disabled:before {
  border-top-color: #999
}

.picker__day--highlighted .picker__day--disabled,
.picker__day--highlighted .picker__day--disabled:hover {
  background-color: #bbb
}

.picker__footer button {
  border: 0;
  background: #fff;
  padding: 6px 11px;
  border-radius: 3px;
  font-weight: 500;
  cursor: pointer;
  display: inline-block
}

.picker__footer button:focus,
.picker__footer button:hover {
  outline: 0;
  background-color: #f5f5f5
}

.picker__footer button:before {
  height: 0
}

.picker__button--today:before {
  content: '';
  top: -1px;
  width: 0;
  border-top: 6px solid #2196F3;
  border-left: 6px solid transparent
}

.picker__button--close:before {
  content: '\D7';
  top: 1px;
  line-height: 1;
  font-size: 16px
}

.picker__button--clear:before {
  content: '';
  top: -3px;
  width: 8px;
  border-top: 2px solid #F44336
}

.picker--time {
  min-width: 100px;
  max-width: 320px
}

.picker--time .picker__box {
  padding: 0
}

.picker__list {
  list-style: none;
  padding: 7px 0;
  margin: 0;
  max-height: 250px;
  overflow-y: auto
}

.picker__list-item {
  position: relative;
  padding: 7px 12px
}

.picker__list-item:focus,
.picker__list-item:hover {
  cursor: pointer;
  background-color: #f5f5f5;
  z-index: 10
}

.picker--time .picker__button--clear {
  display: block;
  width: 100%;
  margin: 7px 0 -7px;
  padding: 6px 11px;
  background-color: #fcfcfc;
  outline: 0;
  border: 0;
  border-top: 1px solid #eee
}

.picker--time .picker__button--clear:focus,
.picker--time .picker__button--clear:hover {
  background-color: #f5f5f5
}

.picker__list-item--highlighted {
  z-index: 10
}

.picker--focused .picker__list-item--highlighted,
.picker__list-item--highlighted,
.picker__list-item--highlighted:hover {
  cursor: pointer;
  color: #fff;
  /* background-color: #26A69A; */
  background-color: var(--text-color);

}

.picker--focused .picker__list-item--selected,
.picker__list-item--selected,
.picker__list-item--selected:hover {
  /* background-color: #26A69A; */
  background-color: var(--text-color);
  color: #fff;
  z-index: 10
}

.picker--focused .picker__list-item--disabled,
.picker__list-item--disabled,
.picker__list-item--disabled:hover {
  background-color: #fafafa;
  color: #999;
  cursor: not-allowed;
  z-index: auto
}


/********** 7. CUSTOM SEARCH BOX GOOGLE MAP **********/
/*****************************************************/
.controls {
  margin-top: 10px;
  border: 1px solid transparent;
  border-radius: 2px 0 0 2px;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  height: 32px;
  outline: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

#pac-input {
  background-color: #fff;
  font-family: Roboto;
  font-size: 15px;
  font-weight: 300;
  margin-left: 12px;
  padding: 0 11px 0 13px;
  text-overflow: ellipsis;
  width: 300px;
}

#pac-input:focus { border-color: #4d90fe; }
.pac-container { font-family: Roboto; }
.pac-container { z-index: 1051; }

#type-selector { color: #fff; background-color: #4d90fe; padding: 5px 11px 0px 11px; }
#type-selector label { font-family: Roboto; font-size: 13px; font-weight: 300; }
#target { width: 345px; }


/********** 7. SCHEDULES **********/
/**********************************/
.schedule-notify { width: 100%; overflow: hidden; background: #e8f5e9; margin-bottom: 20px; }
.schedule-notify.no-schedule { background: none; padding: 0; margin-bottom: 0px; }

tr.fc-list-item span.noti-time { font-weight: bold; color: red; margin-right: 10px; }

.view-schedule,
.book-schedule { max-width: 520px; padding: 10px; padding-top: 20px; width: 100%; background: #fff; position: absolute; display: none; z-index: 999; box-shadow: 0 2px 4px rgba(0,0,0,.2); border: 1px solid #ccc; }
.book-schedule { max-width: 400px; padding: 15px; }
.btn-close-t-tooltip { position: absolute; top: 10px; right: 10px; font-size: 12px; color: #999; }
.btn-close-t-tooltip:hover { color: #333; }

.view-schedule { padding-bottom: 20px; }
.view-schedule .book-datetime { border-bottom: 1px solid #ddd; padding-bottom: 10px; }

#modalViewSchedule .book-datetime { border-bottom: 1px solid #ddd; padding-bottom: 10px; margin-top: 10px; }
.book-detail-item { border-bottom: 1px solid #ddd; padding: 7px 0px 2px 0px; }

.book-datetime .field, .book-detail-item .field,
.book-going .field { float: none; padding: 5px 0px; }

.book-datetime > label, .book-detail-item .field > label,
.book-going .field > label { width: 95px;  float: left; margin-right: 5px; min-height: 20px; border-radius: 3px; padding-top: 0px; padding-bottom: 0px; position: relative; cursor: unset; font-weight: bold; color: #999; }

.book-datetime .field > div, .book-detail-item .field > div,
.book-going .field > div { width: calc(100% - 100px); min-height: 20px; }

.book-detail-item > div table { width: 100%; }
.book-detail-item > div table td { padding-right: 5px;padding-bottom: 5px; }
.book-detail-item > div table td:nth-child(3) { width: 70px; max-width: 70px; text-align: center; padding-right: 0px; }
.book-detail-item > div table td:nth-child(2) { width: 20px; max-width: 20px; text-align: center; }

.book-going, .book-expand { padding-top: 7px; }

.book-going a { margin-right: 15px; text-decoration: underline; }

.book-going a.active { color: green; text-decoration: none; cursor: default; }

#modalViewSchedule .view-buttons { margin-top: 10px; }
.view-schedule .view-buttons { margin-top: 10px; }
.view-buttons button, .view-buttons a { padding: 4px 12px; border-radius: 2px; margin: 2px auto; font-weight: normal; }
.btn-checkin { background: #4c9b23; }
.btn-checkout { background: #f83b00; }
.btn-meeting-ended { background: #666; cursor: not-allowed; }

.book-schedule {}
.t-title { font-weight: bold; font-size: 13px; margin-bottom: 15px; }
.book-input-title {}

.book-datetime { margin-top: 20px;}

.book-datetime h3, .book-reason h3 { color: #999; font-weight: bold; margin-bottom: 8px; }

.book-datetime p, .book-reason p { word-spacing: 1px; }

.book-buttons { margin-top: 40px; }
.book-buttons button { padding: 4px 12px; border-radius: 2px; margin: 2px auto; font-weight: normal; }

.block-expand { border: 1px solid #ddd; padding: 10px; }
.block-expand .field { float: none; }
.block-expand .field > label {
  width: 130px; font-weight: bold;
  padding-right: 0px;
}
/* .block-expand .field > div { width: calc(100% - 200px); } */
.block-expand .field > div { width: 120px; float: right; margin-right: 20%;}

.block-expand { display: none; }
.book-empty { padding-top: 9px; }
.book-list { width: 100% !important; float: none !important; }

.book-list table { border-collapse: collapse; margin-bottom: 0px; }
.book-list table td > div { float: none; padding: 2px 0px; }
.book-list table td > div { font-style: italic; }
.book-list table td > div > label { width: 110px; font-weight: normal; font-style: normal; cursor: default; }

.book-expand-buttons { padding-top: 5px; }
.book-expand-buttons button { height: 30px; border-radius: 3px;  line-height: 30px; padding: 0px; }



/* caret */
.no-prong, .top-prong, .bottom-prong {position: absolute;height: 9px;width: 18px;overflow: hidden;}
.bottom-prong {bottom: -9px;}
.top-prong {top: -9px;}
.bottom-prong .prong-dk, .bottom-prong .prong-lt {border-bottom-width: 0;}
.prong-dk, .prong-lt {position: absolute;left: 0;}
.prong-lt {border: 8px solid;border-color: #fff transparent;left: 1px;}
.prong-dk {border: 9px solid;border-color: #ccc transparent;}


/* user-setting */
.user-setting { position: fixed; left: -250px; top: 120px; z-index: 999; transition: all 0.5s; }
.user-setting.active { left: 0px; }
.btn-user-setting { display:  block; width: 40px; height: 40px; line-height: 45px; background: #0085A7; text-align: center; outline: none; position: absolute; left: 100%; }
.btn-user-setting i { color: #fff; font-size: 20px; }

.calList { border: 1px solid #ccc; width: 250px; padding: 10px; background: #fff; z-index: 9999; float: right; font-size: 12px; font-family: Arial, sans-serif;}
.calListBox { max-height: 220px; overflow-y: auto; }
.calListRow { height: 22px; line-height: 22px; position: relative; }
.calListLabelOuter { cursor: pointer; padding: 0px 5px;  }
.calListLabelOuter-hvr { background: #eee; }
.calListLabel { white-space: nowrap; }
.inline-block { display: inline-block; position: relative; }
.calListSquare { background: #fff; border: 1px solid #dcdcdc; border-radius: 1px; height: 14px; margin-right: 4px; top: 3px; width: 14px; }

.calListImg { position: absolute; top: 5px; right: 5px; cursor: pointer; border: 1px solid #b5b5b5; width: 13px; height: 13px; background: url(../../img/combined_v46_vr.png) no-repeat -217px 0px; }
/*.calListImg-sel { border: 1px solid #b5b5b5; width: 13px; height: 13px; background: url(../../img/combined_v46_vr.png) no-repeat -217px 0px; }
.calListImg-hvr { background: url(../../img/combined_v46_vr.png) no-repeat -217px 0px; border-color: #666; box-shadow: -5px 0 5px 1px #eee; }*/

.select2-search--dropdown .select2-search__field { padding-right: 22px; }

.calHeader { padding: 2px 0; font-size: 14px; margin: 0px; height: 25px; line-height: 23px; cursor: pointer; margin-bottom: 5px; }
.calHeader:hover { background: #eee; }
.zippy-arrow { display: -moz-inline-box; display: inline-block; line-height: 0; vertical-align: middle; background: url(../../img/combined_v46_vr.png) no-repeat -141px -81px; }
.calHeader .zippy-arrow { height: 12px; position: relative; top: -1px; vertical-align: middle; width: 12px; }
.calHeader.zippy-expanded .zippy-arrow { background-position: -153px -81px; }
.calListItem { padding-left: 15px; }
.calList .calListItem > div { margin: 4px 0px; }

/* User-setting-popup */
.cal-list-menu-popup { box-shadow: 0 2px 4px rgba(0,0,0,.2); border: 1px solid #ccc; width: 275px; padding: 0px; display: block; z-index: 9999; background: #fff; position: fixed; display: none; }
.cal-list-menu-popup .cal-list-actions { padding: 10px 15px; margin: 0px; border-bottom: 1px solid #ddd;  }
.cal-list-menu-popup .cal-list-actions li { height: 26px; line-height: 26px; padding: 0px 5px; }
.cal-list-menu-popup .cal-list-actions li:hover { background: #eee; }
.cal-list-menu-popup a { font-family: Arial, sans-serif; font-size: 13px; text-decoration: none; color: #333; }

.cal-list-menu-popup .cal-palette { padding: 10px 15px; }
.calListBox .mCSB_inside > .mCSB_container { margin-right: 3px; }
.calListBox .mCS-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { background-color: rgba(0, 0, 0, 0.5) }


.bootbox { z-index: 1054; }
.bootbox + .modal-backdrop { z-index: 1053; }

.modalRecurringSchedule table { width: 100%; }
.modalRecurringSchedule table td { padding: 5px 0px; vertical-align: middle; }
.modalRecurringSchedule table td:first-child { width: 160px; }
.modalRecurringSchedule .modal-body button,
.modalRecurringSchedule .modal-footer button { color: #444; background: #f5f5f5; border: 1px solid #ddd; -webkit-box-shadow: inset 2px 2px 10px rgba(204, 204, 204, 0.35); box-shadow: inset 2px 2px 10px rgba(204, 204, 204, 0.35); font-size: 11px; min-height: 30px; }
.modalRecurringSchedule .modal-body button span,
.modalRecurringSchedule .modal-footer button span { font-weight: bold; }
.modalRecurringSchedule button.btn-edit-all-schedules:hover,
.modalRecurringSchedule button.btn-edit-only-this-schedule:hover { color: #fff; background: #4387f5; }


/********** 7. FULL CALENDAR **********/
/**************************************/
.fc th { padding: 7px 0px; }
.fc th span { font-weight: bold; }
.fc button { box-sizing: border-box; height: auto; padding: 7px 12px; font-size: 13px; white-space: nowrap; cursor: pointer; }
.fc-state-default { border: 1px solid #ddd; background-color: #fcfcfc; background-image: none; }
.fc-state-default.fc-corner-left { border-bottom-left-radius: 3px; border-top-left-radius: 3px; }
.fc-state-default.fc-corner-right { border-top-right-radius: 3px; border-bottom-right-radius: 3px; }
.fc-state-active, .fc-state-down { background: #f1f1f1; border-color: #ddd; -webkit-box-shadow: 0 1px 3px rgba(0,0,0,.05) inset; box-shadow: 0 1px 3px rgba(0,0,0,.05) inset; }
.fc-state-hover { background: #f1f1f1; }
.fc-toolbar h2 { margin: 5px 0; font-size: 17px; }
.fc-day-top a { color: #333; }
.fc-day-grid-event { margin: 2px 2px 0; padding: 2px; }
.fc-event, a.fc-more { font-size: 12px;  }
a.fc-more { margin: 2px; }

td.fc-day.fc-past { background-color: #ffffff !important; }


/********** 7. RECEPTION **********/
/**********************************/
.reception {
  /* background: #8e9eab;
  background: -webkit-linear-gradient(#eef2f3, #8e9eab);
  background: -o-linear-gradient(#eef2f3, #8e9eab);
  background: -moz-linear-gradient(#eef2f3, #8e9eab);
  background: linear-gradient(#eef2f3, #8e9eab);*/
  background:  url(../../img/ipad-bg.jpg) no-repeat center center; background-size: cover;
  /*background:  url(../../img/800.jpg) no-repeat center center; background-size: cover;*/
}
.reception::after { background: rgba(255, 255, 255, 0.5); position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; z-index: 0; content: ''; }
.reception .reception-inner { max-width: 768px; width: 100%; padding: 0px 20px; position: relative; z-index: 9; color: #333; margin: 0px auto; }

.reception-header {}
.vis-logo { float: left; width: 180px; display: block; padding-top: 3px; }
.reception-header .language-switch {}
.reception-header .language-switch .dropdown-menu { margin: 0px; border: 0px; border-radius: 0px; }
.reception-header .nav .open > a, .reception-header .nav .open > a:focus, .reception-header .nav .open > a:hover { background-color: rgba(0, 0, 0, 0.5); border-color: #337ab7; color: #fff; border-bottom: 3px solid #0068B7;
}
.reception-header .nav > li > a {  }
.reception-header .nav > li > a:focus, .reception-header .nav > li > a:hover {
    text-decoration: none;
    background-color: transparent;
}


.reception .block-lang {  }
.reception .block-lang a img {
  filter: grayscale(1);
  -webkit-filter: grayscale(1);
}
.reception .block-lang a.active img,
.reception .block-lang a:hover img {
  filter: grayscale(0);
  -webkit-filter: grayscale(0);
}
.reception .block-lang img { width: 45px; height: auto; }

.reception .tbl-intro { margin-top: 40px; width: 100%; text-align: center; }
/*.reception .tbl-intro td:first-child { width: 50%; padding-right: 20px; border-right: 1px solid #ddd; }
.reception .tbl-intro td:last-child { width: 50%; padding-left: 20px; }*/

.reception .block-title { font-weight: bold; font-size: 24px; margin-top: 40px; line-height: 32px; }
.reception .block-intro-1 li,
.reception .block-intro-2 li { padding: 5px 0px; }

.reception .block-qr-code { margin: 40px auto 0px auto; max-width: 500px; width: 100%; }
.reception .block-qr-code table { margin: 0px auto; width: 100%; }
.reception .block-qr-code table td { vertical-align: middle; text-align: center; }
.reception .block-qr-code table td.text-right {  }
.reception .block-qr-code table td.text-right a{ text-align: center; margin: 0px auto; }
.reception .block-qr-code a { border-radius: 4px; display: block; width: 180px; }
.reception .block-qr-code a:hover { text-decoration: none; }
.reception .block-qr-code a img { border-radius: 4px; width: 180px; height: auto; }
.reception .block-qr-code input { width: 180px; height: 40px; border: 1px solid #006FBC; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-bottom: 0px; text-align: center; margin: 0px auto; }
.reception .block-qr-code a.submit-qr-code { background: #006FBC; color: #fff; font-weight: bold; height: 39px; line-height: 39px;  border-top-left-radius: 0px; border-top-right-radius: 0px; }

.reception .block-local-number { margin-top: 40px; }
.reception .block-local-number p { font-size: 16px; margin-bottom: 5px; }
.tbl-local-number { background: rgba(255,255,255, 0.3); border-radius: 4px;  overflow: hidden; }
.tbl-local-number table { margin-bottom: 0px !important; }
.tbl-local-number table tr td { padding: 6px !important; border-top: 1px solid rgba(255,255,255,0.2); }
.tbl-local-number table td:first-child {  }
.tbl-local-number table tr:first-child td { border-top: 0px; }

.reception .tbl-local-number .datatable-footer { display: none; }
.reception .table.dataTable thead th,
.reception .table.dataTable thead td,
.reception table.dataTable tbody tr { background: transparent; }
.reception .table.dataTable thead th { border-left: 0px; border-right: 0px; color: #fff; background: #006FBC;  }

.room-status .tbl-local-number .datatable-footer { display: none; }
.room-status .table.dataTable thead th,
.room-status .table.dataTable thead td,
.room-status table.dataTable tbody tr { background: transparent; }
.room-status .table.dataTable thead th { border-left: 0px; border-right: 0px; border-bottom: 1px solid rgba(255, 255, 255, 0.5); padding: 9px 15px; background: #8E9EAB; color: #fff; }

.reception .dataTables_wrapper.no-footer .dataTables_scrollBody,
.room-status .dataTables_wrapper.no-footer .dataTables_scrollBody { border-bottom: 0px; }


/********** 7. ROOM STATUS **********/
/************************************/

main.room-status {
  padding: 0px;
  /*background: -webkit-linear-gradient(#eef2f3, #8e9eab);
  background: -o-linear-gradient(#eef2f3, #8e9eab);
  background: -moz-linear-gradient(#eef2f3, #8e9eab);
  background: linear-gradient(#eef2f3, #8e9eab);*/
  position: relative;
  background:  url(../../img/ipad-bg.jpg) no-repeat center center; background-size: cover;
}
main.room-status::after { background: rgba(255, 255, 255, 0.5); position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; z-index: 0; content: ''; }
.room-container { max-width: 1024px; width: 100%; margin: 0px auto; padding: 0px 30px; }

.clock-divider {
  /*animation: blink-animation 1s steps(5, start) infinite;
  -webkit-animation: blink-animation 1s steps(5, start) infinite;*/
  animation: blink-animation 2s steps(2, start) infinite;
  -webkit-animation: blink-animation 2s steps(2, start) infinite;
}
@keyframes blink-animation {
  to {
    visibility: hidden;
  }
}
@-webkit-keyframes blink-animation {
  to {
    visibility: hidden;
  }
}
.room-header, .room-body, .room-footer { position: relative; z-index: 9; }
.room-header { min-height: 68px; line-height: 68px; padding-bottom: 3px; border-bottom: 1px solid rgba(255,255,255,0.2); box-shadow: 0 3px 10px 0 rgba(0,0,0,0.1); }
.room-status-info { }
.room-status-time { font-size: 22px; font-weight: bold; color: #000; text-shadow: 1px 2px 3px rgba(51, 51, 51, 0.2); -webkit-text-shadow: 1px 2px 3px rgba(51, 51, 51, 0.2); float: left; }
.room-status-time span { font-weight: bold; }
.room-status-time .time { color: #fff; border-radius: 3px; padding: 2px 3px; padding: 2px 10px; font-size: 40px; vertical-align: middle;
  /*background: #FC612A;
  background: -webkit-radial-gradient(circle, #FC612A, #f83600);
  background: -o-radial-gradient(circle, #FC612A, #f83600);
  background: -moz-radial-gradient(circle, #FC612A, #f83600);
  background: radial-gradient(circle, #FC612A, #f83600);*/

  background: #000;
  background: -webkit-linear-gradient(circle, #a2a2a2, #7d7d7d);
  background: -o-linear-gradient(circle, #a2a2a2, #7d7d7d);
  background: -moz-linear-gradient(circle, #a2a2a2, #7d7d7d);
  background: linear-gradient(circle, #a2a2a2, #7d7d7d);

  /*background-color: rgba(255,255,255,0.1);
  border-radius: 5px;
  box-shadow: 0 3px 10px 0 rgba(0,0,0,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  border-width: 1px 0px 0px 0px;*/
}
.room-status-name { font-size: 22px; float: right; }

.room-status-name span { font-weight: bold; color: #000; }
.room-status-name a { margin-left: 10px;  padding: 6px 5px 4px 5px; border-radius: 3px; display: inline-flex; background: #a2a2a2;
  /*background-color: rgba(255,255,255,0.1);
  border-radius: 5px;
  box-shadow: 0 3px 10px 0 rgba(0,0,0,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  border-width: 1px 0px 0px 0px;*/
}
.room-status-name a:hover,
.room-status-name a:focus,
.room-status-name a:active { text-decoration: none; }
.room-status-name a i { font-size: 25px; color: #fff;  }

.room-container { position: relative;}
.room-container .block-lang { position: absolute; top: 30px; right: 30px; }
/* .room-container .block-lang img { width: 40px; filter: grayscale(1); -webkit-filter: grayscale(1); }
.room-container .block-lang a.active img,
.room-container .block-lang a:hover img {
  filter: grayscale(0);
  -webkit-filter: grayscale(0);
}*/
.room-container .block-lang > ul .dropdown-menu{ left: auto; right: 0; }
.room-container .block-lang .language-switch > a { color: #337ab7; }
.room-container .block-lang .language-switch > a:hover { text-decoration: none; }


.room-body {  }
.status { float: left; width: 50%; padding-right: 15px; }
.room-status-title { font-size: 14px; text-transform: uppercase; }
.status-room-title { float: left; text-transform: uppercase; }
.btn-room-comment { float: right; color: #337ab7; outline: none; text-transform: uppercase; }
.btn-room-comment i { border-bottom: 2px solid #337ab7; }
.btn-room-comment:hover, .btn-room-comment:focus, .btn-room-comment:active { text-decoration: none; outline: none; color: #fff; }
.block-status {}
.block-status h1, .block-status h2 { height: 180px; line-height: 180px; font-weight: bold; font-size: 55px; color: #fff; background: red; text-align: center;
  -webkit-box-shadow: inset 1px 2px 3px 20px rgba(102, 102, 102, 0.35);
  box-shadow: inset 1px 5px 20px rgba(102, 102, 102, 0.35);
  text-transform: uppercase;
}
.block-status h1.room-is-busy, .block-status h2.room-is-busy {
  background: #fe8900;
  background: -webkit-radial-gradient(circle, #fe8900, #f83600);
  background: -o-radial-gradient(circle, #fe8900, #f83600);
  background: -moz-radial-gradient(circle, #fe8900, #f83600);
  background: radial-gradient(circle, #fe8900, #f83600);

  /*background-color: rgba(255,255,255,0.1);
  border-radius: 5px;
  box-shadow: 0 3px 10px 0 rgba(0,0,0,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  border-width: 1px 0px 0px 0px;*/

}
.block-status h1.room-is-empty, .block-status h2.room-is-empty {
   background: #a1d760;
  background: -webkit-radial-gradient(circle, #a1d760, #43951d);
  background: -o-radial-gradient(circle, #a1d760, #43951d);
  background: -moz-radial-gradient(circle, #a1d760, #43951d);
  background: radial-gradient(circle, #a1d760, #43951d);

  /*background-color: rgba(255,255,255,0.1);
  border-radius: 5px;
  box-shadow: 0 3px 10px 0 rgba(0,0,0,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  border-width: 1px 0px 0px 0px;*/
}
.g-status-buttons {  }
.g-status-buttons > div { width: 50%; float: left; }
.g-status-buttons .btn-left { padding-right: 5px; }
.g-status-buttons .btn-right { padding-left: 5px; }
.g-status-buttons button { width: 100%; text-transform: uppercase; font-weight: bold; font-size: 15px; height: 60px; color: #fff; border-radius: 6px; text-shadow: 1px 3px 5px rgba(51, 51, 51, 0.45); -webkit-text-shadow: 1px 3px 5px rgba(51, 51, 51, 0.45);
  box-shadow: 1px 2px 3px rgba(51, 51, 51, 0.45); -webkit-box-shadow: 1px 2px 3px rgba(51, 51, 51, 0.45);
}
.g-status-buttons button:hover, .g-status-buttons button:focus { color: #fff; }
.g-status-buttons button img { vertical-align: middle; width: 30px; margin-right: 5px; }
.btn-check-in, .btn-check-in:hover, .btn-check-in:focus {
   background: #457fca;
  background: -webkit-linear-gradient(#457fca, #5590c8);
  background: -o-linear-gradient(#457fca, #5590c8);
  background: -moz-linear-gradient(#457fca, #5590c8);
  background: linear-gradient(#457fca, #5590c8);

  /*background-color: rgba(255,255,255,0.1);
  border-radius: 5px;
  box-shadow: 0 3px 10px 0 rgba(0,0,0,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  border-width: 1px 0px 0px 0px;*/

}
.btn-check-in[disabled] {
  background: #a2a2a2; /* For browsers that do not support gradients */
  background: -webkit-radial-gradient(circle, #a2a2a2, #7d7d7d); /* Safari */
  background: -o-radial-gradient(circle, #a2a2a2, #7d7d7d); /* Opera 11.6 to 12.0 */
  background: -moz-radial-gradient(circle, #a2a2a2, #7d7d7d); /* Firefox 3.6 to 15 */
  background: radial-gradient(circle, #a2a2a2, #7d7d7d); /* Standard syntax */
}

.btn-check-out, .btn-check-out:hover, .btn-check-out:focus {
  background: #b41317;
  background: -webkit-linear-gradient(#b41317, #e22c26);
  background: -o-linear-gradient(#b41317, #e22c26);
  background: -moz-linear-gradient(#b41317, #e22c26);
  background: linear-gradient(#b41317, #e22c26);

  /*background-color: rgba(255,255,255,0.1);
  border-radius: 5px;
  box-shadow: 0 3px 10px 0 rgba(0,0,0,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  border-width: 1px 0px 0px 0px;*/

}

/*.btn-check-out:hover , .btn-check-out:focus {
  background: #fff;
  color: #333;
}*/
.btn-book-now, .btn-book-now:hover, .btn-book-now:focus {
   background: #457fca;
  background: -webkit-linear-gradient(#457fca, #5590c8);
  background: -o-linear-gradient(#457fca, #5590c8);
  background: -moz-linear-gradient(#457fca, #5590c8);
  background: linear-gradient(#457fca, #5590c8);

  /*background-color: rgba(255,255,255,0.1);
  border-radius: 5px;
  box-shadow: 0 3px 10px 0 rgba(0,0,0,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  border-width: 1px 0px 0px 0px;*/
}

.block-local-number {}

.next-schedule { float: left; width: 50%; padding-left: 15px; }

.block-text-empty h2 {
  margin-top: 61px;
  height: 100px;
  line-height: 100px;
  font-weight: bold;
  font-size: 24px;
  color: #fff;
  background: red;
  text-align: center;
  -webkit-box-shadow: inset 1px 2px 3px 20px rgba(102, 102, 102, 0.35);
  box-shadow: inset 1px 5px 20px rgba(102, 102, 102, 0.35);
  text-transform: uppercase;

    background: #a2a2a2;
  background: -webkit-radial-gradient(circle, #a2a2a2, #7d7d7d);
  background: -o-radial-gradient(circle, #a2a2a2, #7d7d7d);
  background: -moz-radial-gradient(circle, #a2a2a2, #7d7d7d);
  background: radial-gradient(circle, #a2a2a2, #7d7d7d);

  /*background-color: rgba(255,255,255,0.1);
  border-radius: 5px;
  box-shadow: 0 3px 10px 0 rgba(0,0,0,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  border-width: 1px 0px 0px 0px;*/
}

.block-time { margin-top: 61px; }
.block-time > div { height: 60px; text-align: center; background: #fff; position: relative; padding-top: 7px; }
.block-time > div.from-time { width: 49%; float: left; }
.block-time > div.from-time:after { content: ''; border-left: 12px solid #fff; border-top: 30px solid transparent; border-bottom: 30px solid transparent; position: absolute; right: -12px; top: 0px; z-index: 2; }
.block-time > div.to-time { width: 49%; float: right; }
.block-time > div.to-time:after { content: ''; border-left: 12px solid #CFDEE4; border-top: 30px solid #fff; border-bottom: 30px solid #fff; position: absolute; left: 0px; top: 0px; }
.block-time > div span { font-weight: bold; font-size: 20px; color: #f83900; }
.block-time > div p { font-size: 15px; color: #f83900; }


.block-title {}
.block-title table { width: 100%; }
.block-title table td { padding: 10px 0px; vertical-align: middle; font-weight: bold; font-size: 20px;  }
.block-title table td:last-child { text-align: right; white-space: nowrap; }

/* #btnExpandTime { text-transform: uppercase; } */
#btnExpandTime span { color: #f44336; }
#btnExpandTime:hover,
#btnExpandTime:focus { text-decoration: none; }

.block-people {}

.room-footer { position: absolute; bottom: 0px; left: 0px; right: 0px; }
.tbl-room-status { border-collapse: collapse; text-align: center;  }
.tbl-room-status td { padding: 2px !important; }
.tbl-room-status tbody tr td { background: #fff; cursor: default; border: 1px solid #aaa;  }
.tbl-room-status tbody tr:first-child td:not(:nth-child(4n)) { border-right: 1px solid #ddd;  }
.tbl-room-status tbody tr:first-child td:last-child { border-right: 1px solid #aaa !important; }
.tbl-room-status tbody tr:first-child td { height: 40px; border-bottom: 1px solid #ddd; }
.tbl-room-status tbody tr:last-child td { background: #000; border-top: 1px solid #ddd; color: #fff; }

.booked { background: #f83b00 !important; cursor: not-allowed; }

.tbl-people-item { background: rgba(255, 255, 255, 0.3); padding: 0px 10px; border-radius: 4px; }
.tbl-people-item h3 { padding: 11px 10px; font-weight: bold; color: #fff; border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom: 1px solid rgba(255, 255, 255, 0.5); background: #8E9EAB; }
.tbl-people-item table {  }
.tbl-people-item table td { padding: 6px 0px !important; }
main.room-status .tbl-people-item { padding: 0px; }
main.room-status .tbl-people-item table tr td { border-top: 1px solid rgba(255,255,255,0.2); padding: 6px 10px !important; }
main.room-status .tbl-people-item table tr:first-child td { border-top: 0px; }
.tbl-people-item table td:first-child label { display: block; }
.tbl-people-item table td:last-child { width: 40px; text-align: right; }
.reception-complete .tbl-people-item table td:last-child { width: auto; text-align: left; }

#modalBooking { font-size: 14px; }
#modalBooking .modal-title, #modalComment .modal-title { text-transform: uppercase; }
#modalBooking .modal-dialog, #modalComment .modal-dialog { max-width: 700px; width: 100%; margin: 30px auto; }
#modalBooking .book-now { max-width: 550px; width: 100%; margin: 0px auto; }
#modalBooking .field {  }
#modalBooking .field label { text-align: right; width: 120px; }
#modalBooking .field > div { width: calc(100% - 130px); }

.g-item-people table { width: 100%; }
.g-item-people table td { padding-top: 10px; vertical-align: middle; }
.g-item-people table td:first-child { width: 20px; max-width: 20px; }
.g-item-people table td:first-child a { color: #333; }
.g-item-people table td:last-child { width: 15px; max-width: 15px; }
.g-item-people table td:last-child a { color: red; }

.btn-style.btn-cancel { color: #333; background: #f5f5f5; border: 1px solid #ddd; -webkit-box-shadow: inset 2px 2px 10px rgba(204, 204, 204, 0.35); box-shadow: inset 2px 2px 10px rgba(204, 204, 204, 0.35); }

#modalBooking .book-list {  }
#modalBooking .book-list h3 { border-left: 5px solid #333; padding-left: 5px; text-transform: uppercase; font-size: 14px; margin-top: 5px; margin-bottom: 10px; background: #fff; display: inline-block; background: #fff; position: relative; z-index: 1; font-size: 15px; }
#modalBooking .book-list table { width: 100%; }
#modalBooking .book-list table td { padding: 3px 0px; line-height: 15px; }
#modalBooking .book-list table td:first-child { width: 120px; max-width: 120px; font-weight: bold; color: #f44336; }
#modalBooking .book-list table td:last-child { font-size: 13px; font-style: italic; }
#modalBooking .book-list table td:last-child span { font-weight: bold; font-size: 13px; font-style: normal; }
#modalBooking .line { border-top: 1px solid #ddd; position: relative; top: -11px; z-index: 0; }


.space65 { height: 65px; }

.mbsc-fr-w { width: 260px !important; }
.mbsc-android-holo .mbsc-fr-hdr {
  color: #009688;
  padding: 0 .5em;
  min-height: 2em;
  line-height: 2em;
  border-bottom: 2px solid #009688;
  font-size: 1.125em;
}

.mbsc-android-holo-light .mbsc-fr-hdr {
  color: #009688;
  border-color: #009688;
}

.mbsc-android-holo .mbsc-sc-whl-l {
  border-top: 2px solid #009688;
  border-bottom: 2px solid #009688;
}

.mbsc-android-holo-light .mbsc-sc-whl-l {
  border-color: #009688;
}

.mbsc-android-holo .mbsc-sc-lbl { color: #999; }

.mbsc-android-holo-light.mbsc-no-touch .mbsc-fr-btn-e:not(.mbsc-fr-btn-d), .mbsc-android-holo-light .mbsc-fr-btn-a {
  text-transform: uppercase;
  background: #f0f0f0;
}

.mbsc-android-holo-light.mbsc-no-touch .mbsc-fr-btn-e:hover:not(.mbsc-fr-btn-d), .mbsc-android-holo-light .mbsc-fr-btn-a {
  background: #009688;
  color: #fff;
}

.mbsc-android-holo .mbsc-fr-hdr { font-size: 26px; }

/********** 8. RECEPTION-COMPLETE **********/
/*******************************************/
.reception-complete h1 { text-align: center; font-size: 25px; font-weight: bold; padding: 35px 15px; margin-top: 35px; border: 1px solid #ccc; background: #8E9EAB; color: #fff; }

.reception-complete h1 p { font-size: 15px; font-style: italic; color: #dfdfdf; padding-top: 5px; }
.reception-complete h1 p a { color: #0c2bcc; font-weight: bold; text-decoration: underline; }

.reception-complete .tbl-local-number { max-height: 150px; }
.reception-complete .schedule-title { padding: 22px 0px 20px 0px !important; }

/********** 7. LOGIN **********/
/******************************/
/*.login { padding: 0px; background: url(../../img/800.jpg) no-repeat center center; background-size: cover; }
.login:after {
  z-index: 0;
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: rgba(17, 17, 17, 0.9);
}
.login .login-inner { max-width: 330px; width: 100%; padding: 0px 15px; margin-top: -50px;  z-index: 999; }
.login .logo { width: 280px; margin: 0px auto; margin-bottom: 30px; position: relative; z-index: 999; text-align: center; }
.login .logo span { display: block; position: absolute; top: -1px; left: -1px; width: 200px; height: 25px; overflow: hidden; z-index: -1; }
.login .logo span:after {
  content: ''; position: absolute; top: 0; left: 0; background: rgba(17, 17, 17, 0.9); width: 100%; height: 100%;
  -webkit-animation: animated-logo 3s linear infinite;
  animation: animated-logo 3s linear infinite;
}
.login-inner .form-group { margin-bottom: 20px; }
.login-inner .input-g { position: relative; }
.login-inner .input-g i { position: absolute; top: 9px; left: 8px; color: #666; }
.login-inner .input-g input { width: 100%; height: 34px; border: 0px; outline: 0px; border-bottom: 1px solid #555; background: transparent; padding-left: 28px; padding-right: 10px; color: #fff; }
.login-inner .btn-login { width: 100%; background: #ed1c24; color: #fff; border-radius: 4px; margin-top: 5px; height: 40px; font-weight: bold; }
.login-inner .a-forgot a { color: #666; }
.login-inner .a-forgot a:hover { text-decoration: none; color: #fff; }

::-webkit-input-placeholder {
  color: #999;
}

:-moz-placeholder {
  color: #999;
}

::-moz-placeholder {
  color: #999;
}

:-ms-input-placeholder {
  color: #999;
}


.login-inner .select2-container--default .select2-selection--single { background: transparent; border: 0px; border-bottom: 1px solid #555; border-radius: 0px; }
.login-inner .select2-container .select2-selection--single .select2-selection__rendered { padding-left: 28px; color: #fff; }

.other-sign-in {}
.other-sign-in a { display: block; width: 100%; height: 40px; background: url(../../img/vws.png) no-repeat 4px 2px #21538D; color: #fff; background-size: 36px; border-radius: 4px; line-height: 40px; font-weight: bold; padding-left: 44px; }
.other-sign-in a:hover { text-decoration: none; }
.other-sign-in span { border-left: 1px solid rgba(255, 255, 255, 0.1); display: block; font-weight: bold; }

.link-forgot-pw { color: #999; text-decoration: none; }
.link-forgot-pw:hover { text-decoration: underline; color: #999; } */


/********** 12. LOG IN **********/

/* body::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

body::-webkit-scrollbar-track {
    background: #f1f1f1;
}

body::-webkit-scrollbar-thumb {
    background: #888;
}

body::-webkit-scrollbar-thumb:hover {
    background: #555;
}

body {
  overflow: scroll;
} */

.text-center {text-align: center;}
.auth-page {
  /* position: relative; */
  /* height: 100vh; */
  /* width: 100vw; */
  background-color: #f1f1f1;
  /* overflow: scroll; */
}
.auth-page::before { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 1; }

.login {

}

.login-inner {
  position: absolute;
  margin-left: auto;
  margin-right: auto;
  right: 0px;
  left: 0px;
  bottom: 30%;
  background: none;
  box-shadow: 7px 19px 40px -2px #ccc;
  background-color: #ffffff;
  max-width: 400px;
  /* width: 100%; */
  width: 70%;
  max-height: 600px;
  /* height: 60%; */
  /* height: calc(80% - 150px); */
  padding-bottom: 0px;
  /* margin-top: -9%; */
  /* margin-bottom: 8%; */
  /* margin-bottom: 40px; */
}
/* background: linear-gradient(rgba(0, 0, 0, 0.1) 5%, rgba(255,255,255, 0.3) 95%); */
.login-inner .top-div {
  width: 100%;
  padding: 0px;
}
.login-inner header {
  margin-top: -5%;
  margin-bottom: 10%;
}
.login-inner header img {
  max-width: 100%;
  width: 30%;
  height: auto;
}
.login-inner form {
  /* padding: 50px; */
  padding: 10%;
  padding-bottom: 2%;
  margin-top: 2%;
}
.login-inner form .field {
  margin: 0 auto;
  padding: 15px 0px;
  float: none;
  /* max-width: 375px; */
  width: 80%;
  height: 100%;
  /* margin-bottom: inherit; */
  /* margin-top: 15%; */
  /* margin-bottom: 10%; */
  /* margin-bottom: 15%; */
  margin-bottom: 5%;
  max-font-size: 14pt;
  font-size: 90%;
}
.login-inner form .field input.form-control {
  box-shadow: none;
  border-radius: 0px;
  /* height: 40px; */
  /* height: 10%; */
  color: #4a4a4a;
  transition: all 0.30s ease-out;
  border: none;
  border-bottom: 1px solid #404040;
  width: 100%;
  height: 100%;
}
.login-inner form .field input.form-control:focus, .login-inner form .field input.form-control:hover {
  border: none;
  border-bottom: 2px solid #404040;
}

.login-inner .btn {
  text-transform: uppercase; font-family: 'roboto-c-b';
  font-size: 14px;
  max-font-size: 14pt;
  font-size: 90%;
  color: #4a4a4a;
  background-image: url(assets/img/btn-img.png);
  height: 60px;
  /* max-height: 60px; */
  /* height: 80%; */
  /* height: 20%; */
  margin: 0 auto;
  vertical-align: middle;
  width: 80%;
  /* margin-bottom: 10%; */
}
.btn-auth {
  /* height: 40px; */
  height: 10%;
  text-transform: uppercase; font-family: 'roboto-c-b';
  border-radius: 0px;
  width: 100%;
  font-size: 14px;
  color: #4a4a4a;
  background-size: cover;
  border: 1px solid #fff;
}

/* .login-inner form .field input.form-control { background: none; border: 1px solid #fff; color: #fff; font-family: AppleGothic;} */
.btn:hover { color: black; background: #33587d; }

.keep-forgot {
  display: table;
  vertical-align: middle;
  width: 100%;
}
.keep { display: table-cell; vertical-align: middle; width: 50%; padding: 5px 0px; }
.keep label { color: #4a4a4a; }

/* .forgotten a:hover, .forgotten a:focus, .forgotten a:active{color: #bbb} */
.forgotten { display: table-cell; vertical-align: middle; width: 50%; text-align: right; padding: 5px 0px; }
.forgotten a { color: #4a4a4a; }
.forgotten a:hover,
.forgotten a:focus,
.forgotten a:active { text-decoration: none; color: #337ab7; }


#modalResetPassword .modal-header { background: #333; }
#modalResetPassword .modal-body { padding: 40px; text-align: center; }
#modalResetPassword .modal-dialog { max-width: 450px; width: 100%; margin: auto; }
#modalResetPassword h2 { font-size: 25px; font-weight: bold; text-transform: uppercase; margin-bottom: 20px; }
#modalResetPassword p { font-size: 14px; }
#modalResetPassword form { margin-top: 20px; }
#modalResetPassword form input { height: 40px; }
#modalResetPassword form .btn { background: #ED1C24; height: 40px; color: #fff; display: block; width: 100%; font-weight: bold; font-size: 13px; }
#modalResetPassword form .form-group:last-child { margin-bottom: 0px; }
#modalResetPassword.modal { text-align: center; }


.login-inner .btn-reset-pw {
  width: 100%; background: #ed1c24;
  color: #61ec47 !important; border-radius: 4px;
  margin-top: 5px; height: 40px; font-weight: bold;
  border-color: #fff; }


/********** 13. RESET PASSWORD **********/
.form-reset-pw { text-align: center; }
.form-reset-pw span { color: #fff; }
.form-reset-pw span a { color: #0085A7; }
.form-reset-pw p { font-size: 15px; color: #fff; text-align: center; }


.footer-login {
  margin: 0 auto;
  background-color: transparent;
  position: absolute;
  bottom: 0px;
  right: 0px;
  left: 0px;
  padding-bottom: 15px;
}

.footer-login p {
  max-font-size: 15pt;
  font-size: 105%;
  margin-top: 0%;
}
.footer-login p:last {
  margin-top: 1px;
  margin-bottom:-4px;
}

#ggauth_otp { 
  /* font-size: 25px;  */
  /* font-weight: bold;  */
  /* text-transform: uppercase;  */
  /* width:80%;  */
  display:inline
}


/* origin LOGIN */

/* end origin login */



/********** 7. SETTINGS **********/
/*********************************/
.settings { border: 1px solid #ddd; width: 100%; background: #f5f5f5; }
.settings-menu { width: 280px; border-right: 1px solid #ddd; float: left; }
.settings-menu ul {}
.settings-menu ul li {}
.settings-menu ul li a { display: block; height: 40px; line-height: 40px; padding: 0px 10px; width: 100%; font-weight: bold; color: #333; border-bottom: 1px solid #ddd; text-decoration: none; -webkit-transition: all 200ms; -moz-transition: all 200ms; transition: all 200ms; }
.settings-menu ul li a.active, .settings-menu ul li a:hover { background: #0192B7; text-decoration: none; color: #f5f5f5  ; }


.settings-panel { overflow: hidden; }
.settings-panel-inner { padding: 0px 15px; }
.settings-header {  }
.settings-header h1 { padding: 12px 0px; border-bottom: 1px solid #ddd; font-weight: bold;}
.change-pw { padding: 15px 0px; max-width: 500px; }
.change-pw .field { float: none; }
.change-pw .field > label { width: 120px; }
.change-pw .field > div { width: calc(100% - 130px); }
.change-pw .field-submit { padding: 15px 0px; }

.general { padding: 15px 0px; }
.general .item { padding: 5px 0px; min-height: 34px; }
.general .item > label { width: 150px; padding-right: 10px; font-weight: bold; float: left;  }
.general .item > div { width: calc(100% - 150px); float: left; }
.general .item > div p { margin-bottom: 5px; }
.general .item .checkbox-inline,
.general .item .radio-inline { padding-bottom: 0px; }
.general .item .checkbox { margin: 0px; }

.change-password { padding: 15px 0px; }
.change-password .item { padding: 5px 0px; min-height: 34px; }
.change-password .item > label { width: 150px; padding-right: 10px; font-weight: bold; float: left;  }
.change-password .item > div { width: calc(100% - 150px); float: left; }
.change-password .item > div p { margin-bottom: 5px; }
.change-password .item .checkbox-inline,
.change-password .item .radio-inline { padding-bottom: 0px; }
.change-password .item .checkbox { margin: 0px; }

.navbar-brand img { width: 210px; }
/*.navbar-brand:after { content: ''; display: block; width: 180px; height: 23.5px; background: url(../img/logo_1.png) no-repeat 0px 0px; background-size: cover; position: absolute; top: 13px; left: 0px; z-index: -2; }*/
.navbar-brand span { display: block; position: absolute; top: 13px; left: 0px; z-index: -1; width: 180px; height: 23.5px; overflow: hidden; }
.navbar-brand span:after {
  content: ''; position: absolute; top: 0; left: 0; background: #0085A7; width: 100%; height: 100%;
  -webkit-animation: animated-logo 3s linear infinite;
  animation: animated-logo 3s linear infinite;
}

@-o-keyframes animated-logo {
  0% { left: 0px; }
  50% { left: 100%; }
  100% { left: 0px; }
}

@-ms-keyframes animated-logo {
  0% { left: 0px; }
  50% { left: 100%; }
  100% { left: 0px; }
}

@-webkit-keyframes animated-logo {
  0% { left: 0px; }
  50% { left: 100%; }
  100% { left: 0px; }
}

@-moz-keyframes animated-logo {
  0% { left: 0px; }
  50% { left: 100%; }
  100% { left: 0px; }
}

@keyframes animated-logo {
  0% { left: 0px; }
  50% { left: 100%; }
  100% { left: 0px; }
}

/********** 7. CONFIGS **********/
/*********************************/
.configs { border: 1px solid #ddd; width: 100%; background: #f5f5f5; }
.configs-menu { width: 280px; float: left; }
.configs-menu ul {}
.configs-menu ul li {}
.configs-menu ul li a {
  display: block;
  height: 40px;
  line-height: 40px;
  padding: 0px 10px;
  width: 100%;
  font-weight: bold;
  color: #333;
  border-bottom: 1px solid #ddd;
  text-decoration: none;
  -webkit-transition: all 200ms;
  -moz-transition: all 200ms;
  transition: all 200ms;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.configs-menu ul li a.active, .configs-menu ul li a:hover { 
  /* background: #0192B7;  */
  background: var(--main-bg-color); 
  text-decoration: none; color: #f5f5f5  ; }


.configs-panel { overflow: hidden; border-left: 1px solid #ddd; }
.configs-panel-inner { padding: 0px 15px; }
.configs-header {  }
.configs-header h1 { padding: 12px 0px; border-bottom: 1px solid #ddd; font-weight: bold;}
.change-pw { padding: 15px 0px; max-width: 500px; }
.change-pw .field { float: none; }
.change-pw .field > label { width: 120px; }
.change-pw .field > div { width: calc(100% - 130px); }
.change-pw .field-submit { padding: 15px 0px; }

.general { padding: 15px 0px; }
.general .item { padding: 5px 0px; min-height: 34px; }
.general .item > label { width: 150px; padding-right: 10px; font-weight: bold; float: left;  }
.general .item > div { width: calc(100% - 150px); float: left; }
.general .item > div p { margin-bottom: 5px; }
.general .item .checkbox-inline,
.general .item .radio-inline { padding-bottom: 0px; }
.general .item .checkbox { margin: 0px; }

.general .btn-edit-email { color: #3897F0; border-bottom: 1px solid #0085a7; }

.booking-room-email { padding: 15px 0px; }
.booking-room-email .item { padding: 5px 0px; min-height: 34px; }
.booking-room-email .item > label { width: 150px; padding-right: 10px; font-weight: bold; float: left;  }
.booking-room-email .item > div { width: calc(100% - 150px); float: left; }
.booking-room-email .item > div p { margin-bottom: 5px; }
.booking-room-email .item .checkbox-inline,
.booking-room-email .item .radio-inline { padding-bottom: 0px; }
.booking-room-email .item .checkbox { margin: 0px; }

.field-file {  }
.field-file .uploader { float: left; width: calc(100% - 130px); }
.field-file .btn-upload { float: right; width: 120px; display: block; height: 36px; font-weight: bold; font-size: 13px; }

.navbar-brand { padding: 0px; margin-left: 0px !important; position: relative; z-index: 999; font-weight: bold; font-size: 22px; }
.navbar-brand img { width: 180px; }
/*.navbar-brand:after { content: ''; display: block; width: 180px; height: 23.5px; background: url(../img/logo_1.png) no-repeat 0px 0px; background-size: cover; position: absolute; top: 13px; left: 0px; z-index: -2; }*/
.navbar-brand span { display: block; position: absolute; top: 13px; left: 0px; z-index: -1; width: 180px; height: 23.5px; overflow: hidden; }
.navbar-brand span:after {
  content: ''; position: absolute; top: 0; left: 0; background: #0085A7; width: 100%; height: 100%;
  -webkit-animation: animated-logo 3s linear infinite;
  animation: animated-logo 3s linear infinite;
}

@-o-keyframes animated-logo {
  0% { left: 0px; }
  50% { left: 100%; }
  100% { left: 0px; }
}

@-ms-keyframes animated-logo {
  0% { left: 0px; }
  50% { left: 100%; }
  100% { left: 0px; }
}

@-webkit-keyframes animated-logo {
  0% { left: 0px; }
  50% { left: 100%; }
  100% { left: 0px; }
}

@-moz-keyframes animated-logo {
  0% { left: 0px; }
  50% { left: 100%; }
  100% { left: 0px; }
}

@keyframes animated-logo {
  0% { left: 0px; }
  50% { left: 100%; }
  100% { left: 0px; }
}

/********** 7. RECEPTION **********/
/**********************************/
.confirmation {
  background:  url(../../img/ipad-bg.jpg) no-repeat center center;
  background-size: cover;
}
.confirmation::after{ background: rgba(255, 255, 255, 0.5); position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; z-index: 0; content: ''; }
.confirmation-inner { border: 1px solid #ddd; padding: 50px; max-width: 500px; width: 100%; box-shadow: 0 2px 4px rgba(0,0,0,.2); border: 1px solid #ccc;z-index: 9; background: #fff; }
.confirmation-header { display: table; width: 100%; vertical-align: middle; }
.confirmation-title { display: table-cell; vertical-align: middle; }
.confirmation-title h1 { font-size: 20px; font-weight: bold; text-transform: capitalize; }
.confirmation-lang { display: table-cell; min-width: 80px; }
.confirmation-lang .nav > li > a { padding: 7px; }
.confirmation-lang .navbar-nav > li > .dropdown-menu { border-top: 1px solid #ccc; }

/********** 8. TIMESHEET **********/
/**********************************/
.timesheet {}
.timesheet-aside { width: 300px; float: left; }
.timesheet-aside .aside-main { border: 1px solid #ddd; margin-bottom: 20px; }
.timesheet-aside .aside-main .date-time { background: #0085A7; color: #fff; text-align: center; padding: 15px 0px 12px 0px; }
.timesheet-aside .aside-main .date-time p { font-size: 16px; font-family: 'gothic'; }
.timesheet-aside .aside-main .date-time p span {}
.timesheet-aside .aside-main .date-time h1 { font-size: 34px; font-family: 'gothic'; }
.timesheet-aside .aside-main .btn-controls { padding: 20px; }

section.timesheet-calendar .dataTables_wrapper .DTFC_ScrollWrapper .DTFC_LeftWrapper .DTFC_LeftBodyWrapper .DTFC_LeftBodyLiner {
overflow-y: hidden !important;
width: auto !important;
}


.btnCheckIn,
.btnCheckOut { width: 120px; height: 120px; border-radius: 5px; display: block; color: #fff; }
.btnCheckIn { float: left; }
.btnCheckIn[disabled] { filter: grayscale(0.5); }
.btnCheckOut { float: right; }
.btnCheckOut[disabled] { filter: grayscale(0.5); }
.btnCheckIn i,
.btnCheckOut i { display: block; font-size: 50px; margin-bottom: 5px; }
.btnCheckIn span,
.btnCheckOut span { font-size: 16px; }
.btnCheckIn { background: #4C9B23; }
.btnCheckOut { background: #F83B00; }
.btnCheckIn:hover, .btnCheckIn:focus, .btnCheckIn:active,
.btnCheckOut:hover, .btnCheckOut:focus, .btnCheckOut:active { color: #fff; }


.aside-statistic {}
.aside-statistic table {}
.aside-statistic table th { color: #fff; background: #0085A7; text-align: center; }
.aside-statistic table td span { font-weight: bold; color: red; }
.aside-statistic table td { width: 50%; }

.table-header { text-align: center; padding: 8px; background: #0085A7; border-bottom: 0px; }
.table-header .fc-left { float: left; }
.table-header .fc-right { float: right; }
.table-header .fc-center { display: inline-block; }
.table-header .fc-clear { clear: both; }
.table-header .btn,
.table-header .form-control { height: 28px; }
.table-header .btn { padding: 0px 12px; }
.btn-excel { background: #4C9B23; color: #fff; }
.btn-excel:hover,
.btn-excel:focus,
.btn-excel:active { color: #fff; }
.btn-prev { border-right: 1px solid #999; }
.btn-next { border-left: 1px solid #999; }
.btn-prev:focus, .btn-prev:active,
.btn-next:focus, .btn-next:active { background: #fff; border-color: #999; outline: 0; }

.timesheet-calendar { width: calc(100% - 310px); float: right; }
.table-timesheet thead tr th { text-align: center; background: #d9edf7; padding: 6px 8px; }
.table-timesheet thead tr th:nth-child(1) { width: 70px; }
.table-timesheet thead tr th:nth-child(2),
.table-timesheet thead tr th:nth-child(3),
.table-timesheet thead tr th:nth-child(4) { width: 120px; }
.table-timesheet tbody tr td { padding: 4px 8px; cursor: pointer; }
.table-timesheet tbody tr td:nth-child(2),
.table-timesheet tbody tr td:nth-child(3),
.table-timesheet tbody tr td:nth-child(4) { text-align: center; }
.table-timesheet tbody tr td:nth-child(2) { text-transform: uppercase; }

tr.date-off td { background: #f5f5f5; color: red; }
tr.date-missing td { background: #f8dada; }
tr.date-off-paid td { background: #ffccbc; }

.dataTables_wrapper.no-footer .dataTables_scrollBody {
  border-bottom: 1px solid #ddd;
}

.timesheet .dataTables_scrollHeadInner { width: 100% !important; padding-right: 0px !important; }
.timesheet .table-timesheet { width: 100% !important; }

.user-timesheet { display: inline-block; min-width: 230px; }
.user-timesheet .select2-container .select2-selection--single { height: 28px; }
.user-timesheet .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 28px; font-size: 16px; color: #fff; }
.user-timesheet .select2-container--default .select2-selection--single .select2-selection__arrow { height: 28px; }
.user-timesheet .select2-container--default .select2-selection--single { background-color: transparent; border: 0px solid #ccc; border-bottom: 1px solid #fff; border-radius: 0px; min-width: 230px; }

.divider-timesheet { display: inline-block; padding-left: 5px; padding-right: 5px; }
.divider-timesheet span { display: inline-block; width: 4px; height: 4px; border-radius: 1.5px; background: red; }

.month-timesheet { display: inline-block; }
#month-picker { position: static; text-align: center; background: transparent; color: #fff; font-size: 16px; border: 0px; border-bottom: 1px solid #fff; border-radius: 0px; box-shadow: none; }
.month-picker { position: static; }
.month-picker .ui-state-disabled, .ui-widget-content .ui-state-disabled, .ui-widget-header .ui-state-disabled { opacity: 0.35; }
.month-picker .month-picker-month-table .ui-button { width: 4.9em; }
.month-picker .month-picker-year-table .ui-button { width: auto; }
.month-picker .month-picker-title .ui-button { border: 0px; background: transparent; box-shadow: none; }
.month-picker .ui-button .ui-icon { margin-top: -10px; }
.month-picker .ui-button { border: 1px solid #ddd; border-radius: 2px !important; cursor: pointer !important; }


#modalEditTimeSheet .modal-dialog { max-width: 540px; width: 100%; margin: 30px auto; }
#modalEditTimeSheet .field > label { width: 120px; }
#modalEditTimeSheet .field > div { width: calc(100% - 130px); }
#modalEditTimeSheet .field > div label { padding-top: 8px; font-weight: bold; }
#modalEditTimeSheet .modal-footer { text-align: center; }

#modalExport .field > label { width: 120px; }
#modalExport .field > div { width: calc(100% - 130px); }


/********** 9. MASTER-CALENDAR **********/
/****************************************/
.master-calendar {}
.master-calendar .calendar { overflow: hidden; border: 1px solid #ddd; padding: 0px; border-radius: 2px; }
.master-calendar .calendar-header { border: 0px; border-bottom: 1px solid #ddd; border-radius: 2px; background: #d9edf7; }

.calendar .year-title {
  border-left: 1px solid transparent;
  border-right: 1px solid transparent;
  color: #0085a7;
  background: #c3e2ef;
}

.calendar .year-neighbor { color: #55a6bb; }
.calendar .year-neighbor2 { color: #9cc7d9; }
.calendar .year-neighbor,
.calendar .year-neighbor2 {
    background: #d9edf7;
}

.calendar .calendar-header table th:hover {
    background: #c3e2ef;
    cursor: pointer;
}

.calendar .calendar-header table th.prev, .calendar .calendar-header table th.next { color: #0085a7; }
.calendar table.month th.month-title { padding-bottom: 5px; padding-top: 5px; font-size: 14px; text-transform: uppercase; font-weight: normal; color: #fff; background: #0085a7; }
.calendar table.month { border: 1px solid #ddd; }
.calendar table.month td, .calendar table.month th { width: 41px; height: 22px; border-right: 1px solid #ddd; border-bottom: 1px solid #ddd; }
.calendar table.month th.day-header { font-weight: normal; background: #ffffff; }
.calendar table.month td.day .day-content { border-radius: 0px; }
.calendar table.month td.day.range.range-start .day-content,
.calendar table.month td.day.range.range-end .day-content { border-radius: 0px; }
.calendar .month-container { height: 250px; width: 33%; float: left; }
.calendar table.month tr td.old .day-content,
.calendar table.month tr td.new .day-content { color: #ddd; }

/*.calendar table.month td:first-child,
.calendar table.month td:last-child { background: #ffccbc !important; }*/

.calendar table.month td .day_off { color: #ff0000; background: #ffffff !important; }
.calendar table.month td .day_work { background: #ffffff !important; }

.calendar table.month td.old .day-content,
.calendar table.month td.new .day-content { background: #ffffff !important; }
/*.calendar table.month td.old:first-child .day-content,
.calendar table.month td.old:first-child .day_off,
.calendar table.month td.old:last-child .day_off,
.calendar table.month td.new:first-child .day_off,
.calendar table.month td.new:last-child .day_off,
.calendar table.month td.old:first-child .day_work,
.calendar table.month td.old:last-child .day_work,
.calendar table.month td.new:first-child .day_work,
.calendar table.month td.new:last-child .day_work { background: #ffccbc !important; }*/

.master-calendar .calendar table.month td:not(.old):not(.new).day .day-content:hover,
.master-calendar .calendar table.month td.day.range .day-content { background: #d9edf7 !important; }

.months-container{ opacity: 0; height: 100%; overflow-y: auto; }

#modalSetUpDate .modal-dialog { max-width: 520px; width: 100%; margin: 30px auto; }
#modalSetUpDate .field > label { width: 100px; }
#modalSetUpDate .field > div { width: calc(100% - 110px); }
#modalSetUpDate .field > div label { padding-top: 8px; font-weight: bold; }
#modalSetUpDate .modal-footer { text-align: center; }
#modalSetUpDate .g-date-from-to {}
#modalSetUpDate .g-date-from-to .g-date { width: 47%; float: left; }
#modalSetUpDate .g-date-from-to .g-icon-to { width: 6%; float: left; padding-top: 8px; }

/********** 9. ADMIN FORM **********/
/***********************************/
.form-admin .table-responsive,
.form-admin .table { margin-bottom: 0px; }
.table-admin-routes th:first-child,
.table-admin-routes th:last-child,
.table-admin-routes td:first-child,
.table-admin-routes td:last-child { text-align: center; width: 60px; }
.table-admin-routes td:last-child a { color: red; }
.box-select { border: 1px solid #ddd; padding: 8px; border-bottom: 0px; }

.form-control.w50 { width: 50%; }
.form-control.w70 { width: 70%; }

[class*=" icon-"]:before, [class^=icon-]:before { font-family: 'icomoon' !important; }

.form-builder .cb-wrap { width: 210px; }
.form-builder .stage-wrap { width: calc(100% - 215px); }
.form-builder .frmb,
.form-builder .empty .frmb { border: 2px dashed #ccc; }
.frmb-control li { display: block; font-family: arial; font-size: 13px; }
.form-builder [class*=" icon-"]:before, .form-builder [class^=icon-]:before { font-family: 'form-builder-font' !important; }
.form-builder .file-field [class*=" icon-"]:before, .form-builder .file-field [class^=icon-]:before { font-family: 'icomoon' !important; }
.form-builder .file-field .field-actions [class*=" icon-"]:before, .form-builder .file-field .field-actions [class^=icon-]:before { font-family: 'form-builder-font' !important; }
.form-builder .singleFile-field span i[class*=" icon-"]:before, .form-builder .singleFile-field span i[class^=icon-]:before { font-family: 'icomoon' !important; }
.form-builder .frmb>li:hover { border: 1px dashed #66afe9; box-shadow: none; border-radius: 0px; }

.form-builder .frmb li { padding: 5px; margin-bottom: 0px; }
.frmb li:after { content: " "; display: block; clear: both; }
.form-builder .frmb .field-label { font-size: 13px !important; font-family: arial; width: 200px; float: left; padding-right: 10px; margin-bottom: 0px; padding-top: 8px; padding-bottom: 7px; line-height: 17px !important; position: relative; word-wrap: break-word; }
.form-builder .frmb .field-label span.required-asterisk { color: red; }
.form-builder .frmb .field-label span.tooltip-element { position: absolute; top: 50%; right: 5px; margin-top: -8px; }

.form-builder .frmb .prev-holder { float: left; width: calc(100% - 200px); }

.form-builder .frmb .header-field .prev-holder { width: 100%; }
/*.form-builder .frmb .header-field .prev-holder .fb-header { border-bottom: 1px solid #ddd; margin-bottom: 5px; }*/
.header-field h1,
.header-title { text-transform: uppercase; font-weight: bold; border-left: 5px solid #333; padding-left: 5px; padding-top: 2px; margin-bottom: 10px !important; margin-top: 10px !important; }

.form-builder .frmb li .close-field { background: red; color: #fff; padding-top: 3px; border: 0px; }

.form-builder .frmb .field-actions { z-index: 97; }
.form-builder .frmb .field-actions:after { content: " "; display: block; clear: both; }
.form-builder .frmb .field-actions .btn { float: left; display: block; width: 34px; height: 34px; border-radius: 0px !important; }
.form-builder .frmb .field-actions .btn:first-child { position: relative; top: 0px; line-height: 31px; font-size: 15px; }
.form-builder .frmb .field-actions .btn:nth-child(2) { display: none; }
.form-builder .frmb .field-actions .del-button { line-height: 35px; font-size: 20px; }
.form-builder input[type=checkbox], .form-builder input[type=radio] {margin-top: 2px; }

.frmb .form-elements .false-label:first-child, .frmb .form-elements label:first-child { padding-top: 0px !important; }
.frmb .form-elements .input-wrap>input[type=checkbox] { margin-top: 0px !important; vertical-align: middle; }


.form-builder .copy-button{display: none !important;}

.form-builder .checkbox,
.form-builder .radio { float: left; margin-top: 10px; margin-right: 30px; }
.form-builder .radio input ~ label,
.form-builder .checkbox input ~ label { position: relative; padding-left: 25px !important; }
.form-builder .radio input,
.form-builder .checkbox input  {
  -moz-appearance : none;
  -webkit-appearance : none;
  appearance : none;
  -moz-visibility : hidden;
  -webkit-visibility : hidden;
  visibility : hidden;
}
.form-builder .radio input ~ label:before,
.form-builder .radio input ~ label:after,
.form-builder .checkbox input ~ label:before,
.form-builder .checkbox input ~ label:after { position: absolute; font-family: "FontAwesome"; visibility: visible; }
.form-builder .radio input ~ label:before { top: -2px; left: 0px; content: ""; display: block !important; width: 18px; height: 18px; border: 2px solid #999; border-radius: 100%; line-height: 14px; text-align: center; }
.form-builder .radio input:checked ~ label:before { content: "\f111"; font-size: 10px; color: #0085a7; border: 2px solid #0085a7; }
.form-builder .checkbox input ~ label:before { top: -3px; left: 0px; content: ""; display: block !important; width: 18px; height: 18px; border: 2px solid #999; border-radius: 2px; line-height: 14px; text-align: center; }
.form-builder .checkbox input:checked ~ label:before { content: "\f00c"; font-size: 10px; color: #0085a7; border: 2px solid #0085a7; }



/* New Lib Form Builder */
.form-wrap.form-builder .frmb .field-label, .form-wrap.form-builder .frmb .legend,
.form-wrap.form-builder .frmb li { margin-bottom: 0px !important;}
.form-builder .frmb li {padding: 5px !important}


.icon-singleFile:before { content: "\E80A"; }

.ui-state-default { background: #fff; border: 0px; /*cursor: move;*/ }
.ui-sortable-helper { border: 0px; }

.sortable-handle:hover i {
  cursor: move;
}

.tooltip-element { width: 15px !important; height: 15px !important; line-height: 16px !important; background: #FF8300 !important; }
[tooltip]:hover:after { background: #666 !important; text-align: left !important; padding: 10px !important; }
[tooltip]:hover:before { border-top-color: #666 !important; border-bottom-color: #666 !important; }

/********** 9. REQUEST FORM **********/
/*************************************/
.g-time-from-to {}
.g-time-from-to .g-time { width: 46%; float: left; }
.g-time-from-to .g-icon-to { width: 8%; float: left; padding-top: 8px; }

.has-unit {}
.has-unit > .form-control { float: left; width: calc(100% - 60px); }
.has-unit > span { float: right; display: block; width: 60px; text-align: right; height: 34px; line-height: 34px; }

.special-text > div { float: left; width: calc(50% - 170px); }
.special-text > div input { border-radius: 4px !important; }
.special-text > span.unit { float: left; display: block; width: 60px; text-align: center; height: 34px; line-height: 34px; }

.table-user-routes td:first-child { text-align: center; width: 150px; }
.table-user-routes th, td { text-align: center;}
.tbl-data th, td {text-align: center;}
.table-transport td{text-align:center;}

.table-routes th { text-align: center; background: #D9EDF7; }

.table-approve-routes td:first-child { text-align: center; width: 60px; }
.table-approve-routes td:last-child { width: 80px; text-align: center; }

.form-group.access-wrap, .form-group.id-wrap, .form-group.maxlength-wrap, .form-group.other-wrap, .form-group.className-wrap,
.form-group.multiple-wrap, .form-group.subtype-wrap, .form-group.name-wrap, .form-group.rows-wrap, .form-group.toggle-wrap {
  display: none !important;
}

.special-date { width: calc(50% - 110px); }

/********** 10. HISTORY FORM **********/
/**************************************/
#tbl-form-history .tag-general,
.approve-form .tag-general{ display: inline-block; min-width: 65px; }

.item-reply { background: #eee; padding: 10px 15px; margin-bottom: 10px; border-radius: 3px; }
.item-reply .item-name { margin-bottom: 5px; }
.item-reply .item-name .name { font-weight: bold; font-size: 13px; color: #0085A7; }
.item-reply .item-name .date { font-style: italic; color: #999; }
.item-reply .text { color: #666; }
.item-reply .more { font-weight: bold; font-size: 11px; }
.item-reply .more .answer-comment { color: #0085A7; }
.item-reply .more .delete-comment { color: red; }

.comment-form { border: 1px solid #ddd; }
.comment-form form > div { padding: 5px 10px; }
.comment-form form > div:first-child { border-bottom: 1px solid #ddd; }
.comment-form form > div textarea { border: 0px; outline: 0px; box-shadow: none; -webkit-box-shadow: none; resize: vertical; min-height: 55px; }
.comment-form form > div textarea:focus { box-shadow: none; -webkit-box-shadow: none; }
.btn-send-msg { margin: 0px !important; width: 150px; }

.list-reply { margin-left: 40px; }

.discuss { max-height: 400px; overflow-y: auto; margin-bottom: 10px;
  /* background-color: white; */
}

select.has-error + span .select2-selection { border: 1px solid red !important; }

.sortable-options li > input:nth-of-type(1) {
  display: none;
}

.sortable-options li > input:nth-of-type(2) {
  width: 90% !important;
  margin: 0px !important;
}

.sortable-options li > input:nth-of-type(3) {
  display: none;
}

/* 24-08-2017 */
.pull-left .bootstrap-datetimepicker-widget:not(.admin-page-datepicker) { left: 0px !important; right: auto !important; } /* 14-12-2020 add not(.admin-page-datepicker) : fix postion datepicker in admin_page ; */
.pull-left .bootstrap-datetimepicker-widget:before { left: 6px !important; right: auto !important; }
.pull-left .bootstrap-datetimepicker-widget:after { left: 7px !important; right: auto !important; }

/* 02-10-2017 - Dat Rom timesheet style  */
.sub_statistic .row {
  margin-right: 0px;
margin-left: 0px;

}
.user-timesheet .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 26px;
}

/*06/10/2017*/
.info_customer .field > label {
    padding-right: 0px;
    padding-left: 15px;
}
.info_customer .group .field {
    float: none;
    width: 90%;
}
.info_customer .div_left {
    float: left;
    width: 50%;
}
.info_customer .div_right {
    float: right;
    width: 50%;
}
.info_customer .div_left .field{
    float: left;
}
.info_customer .div_right .field{
    float: right;
}
.info_customer .section-title {
    text-transform: uppercase;
    border-left: 5px solid #3897F0;
    font-size: 15px;
    padding-left: 5px;
    padding-top: 4px;
    font-weight: bold;
    color: #3897f0;
}
.info_customer .div_right .section{
    float: right;
    width: 89%;
    margin:10px 0px 10px 6px;

}
.info_customer .div_left  .section{
    float: left;
    width: 90%;
    margin:10px 0px 10px 6px;
}
.info_customer .group .person_ci {
    float: left;
    width: 90%;
    margin:93px 0px 10px 6px;
}
.w50pt {
    width: 50%;
}
.w48pt {
    width: 48%;
}
.info_customer .w50pt {
    float: left;
}
.btn_ci, .btn_out {
    width: 100%;

}
.aside-main .btn {
    border-radius: 14px;
}
.export-button .btn-excel {
    border-radius: 8px;
}
.btn_ci img {
    float: left;
    width: 30%;
    height:100%;
    margin-top: 3px;
}
.btn_ci span {
    float: right;
    width: 70%;
}
.btn_out img {
    float: left;
    width: 30%;
    height:100%;
    margin-top: 3px;
}
.btn_out span {
    float: right;
    width: 70%;
}
.dataTable  td {
    text-align: center;
}
.black{color: black; font-family: Meiryo UI;}
th, tr, td, .font-mei {
    font-family: AppleGothic;
}
.left{
    float: left;
}
.right{ float: right;}
.boder05px{border-bottom: 0.5px solid #ccc;}
.mrgtop_4px{margin-top: -4px;}
.hour_timesheet{font-family: 'Anton', sans-serif ; font-weight: bold;font-size: 50px;}
/* margin-right: -5px; */

.menu-icons ul li a i {
    color: #373737;
}

.navbar-mobile, li#mobile-show{display: none}

.menu-icons ul li{outline: none}
.menu-icons ul li a:focus {
    outline:none;
}
.aside-statistic {
    margin-top: -3px;
}

.am_pm {
    list-style: none;
    display: inline-block;
    font-size: 30px;
}

#DataTables_Table_0_wrapper .date-off_paid td{background: #f5f5f5;}
.display_none{display: none; position: absolute; margin-top: -35px;margin-left: 8px; background: #ccc;color: graytext;}
.hover_show_email:hover .display_none{display: block;}

/* reason-textarea */
.reason-textarea {
   border: none;
   border-top: none;
   resize: none;
   padding-left: 0px;
   font-family: AppleGothic;
   font-size: 13px;
   width: 100%;
 }

 .reason-textarea:disabled{
   /*background-color: transparent;*/
   cursor: default;
 }

/* end reason-textarea */

/* edit-reason-textarea */
 .edit-reason-textarea::-webkit-scrollbar {
     width: 7px;
 }
 .edit-reason-textarea::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px #ccc;
 }

 .edit-reason-textarea::-webkit-scrollbar-thumb {
  background-color: darkgrey;
  outline: 1px solid slategrey;
 }
 /* end edit-reason-textarea */

.comment-approve{
  width: 100%;
  border: none;
  resize: none;
}
.comment-approve:disabled{
  cursor: default;
  background-color: #eee;
}
.comment-approve::-webkit-scrollbar {
    width: 3px;
}
.comment-approve::-webkit-scrollbar-track {
   -webkit-box-shadow: inset 0 0 6px #ccc;
}

.comment-approve::-webkit-scrollbar-thumb {
 background-color: darkgrey;
 outline: 1px solid slategrey;
}
.table-timesheet .fa-check {color: #95ff7a}
.table-timesheet .fa-times {color: red;}
.table-timesheet .fa-wpforms {background: #f6eded;; color: #120101;}
textarea:disabled {
    background: white;
    opacity: 1 !important;
    filter: Alpha(opacity=50);
    color: black;
    resize: none !important;
    min-height: 35px;
}
@media screen and (max-width: 450px) {
    textarea:disabled {
        overflow-y: scroll !important;
    }
}
.tbl_customer table.dataTable thead .sorting_asc {
    background-image: none !important;
}
.input-group-addon {cursor: default  !important}
.comment-approve {background: #eee !important}
.comment-form .form-control {max-width: 100% !important}
.comment_roll {max-height: 200px;}

.discuss{ overflow: hidden;}
@media screen and (max-width: 1100px) {
    .discuss{ overflow: auto !important;}
}
.next_back_form {
    background: #C3E5F6 !important;
}

.hidden_fc_time .fc-content .fc-time {
  display: none;
}

.show_fc_time .fc-content .fc-time {
  display: inline-block;
}
#modalViewSchedule .tbl-data th, td {
    text-align: left;
}

/** module help **********************************************************/
#help-container .section-title-help{
    text-transform: uppercase;
    font-size: 15px;
    padding-left: 5px;
    padding-top: 4px;
    font-weight: bold;
    color: #3897f0;
    border-bottom: 1px solid #e7e7e7;
    height: 35px
}
#help-container .ui-widget-content{
    border: none !important
}
#help-container #help_accordion{
    padding-left: 10px;
    height: 440px;
    overflow-y: hidden
}
#help-container .manual_content{
    padding-left: 20px;
    padding-bottom: 10px
}
#help-container .help_content{
    padding-left: 20px;
    margin-bottom: 10px
}
#help-container .help_accordion{

}
#help-container{
    border-bottom: 1px solid #e7e7e7
}
#help-container .manual_content>div.row {
    padding-bottom: 5px
}
#help-container>section:first-child
{
    border-bottom: 1px solid #e7e7e7;
    margin-bottom: 13px
}
#help-container .manual_content a {
    color: #3897f0;
}
/**drop zone - timesheet popup *******************************************/
#modalEditTimeSheet .dropzone .dz-image{
    width: 122px !important;
    height: 122px !important;
}
#modalEditTimeSheet .dropzone .dz-preview .dz-details, .dropzone-previews .dz-preview .dz-details{
    width: 122px !important;
}

.haveAttach:last-child{
    position: relative
}
.haveAttach:last-child:before {
    content: "\eca9";
     position: absolute;
     width: 15px;
     height: 15px;
     font-family: 'icomoon';
     left: -12px;
     top: 2px;
     color: white;
     background: #2b98c9;
     padding: 2px;
     border: 2px solid #bcbbbb;
     border-radius: 100%;
}
/*************************************************************************/
.calendar_detail_setting{
    padding: 8px 0px;
}

#configs_profile .item label{
    padding-top: 10px;
}

.background_red{
    background-color: #f3dfdf;
}
#timesheet_ck .table-timesheet {font-size: 88%;}
#timesheet_ck .table-timesheet thead tr th { text-align: center; background: white; padding: 1px 8px; }
#timesheet_ck  .table-timesheet thead tr th:nth-child(1) { width: 70px; }
#timesheet_ck  .table-timesheet thead tr th:nth-child(2),
#timesheet_ck  .table-timesheet thead tr th:nth-child(3),
#timesheet_ck  .table-timesheet thead tr th:nth-child(4) { width: 40px; }
#timesheet_ck  .table-timesheet thead tr th:nth-child(5),
#timesheet_ck  .table-timesheet thead tr th:nth-child(6) { width: 40px; }
#timesheet_ck  .table-timesheet thead tr th:nth-child(7) { width: 55px; }
#timesheet_ck  .table-timesheet thead tr th:nth-child(8) { width: 60px; }
#timesheet_ck  .table-timesheet tbody tr td { padding: 1px 5px; cursor: pointer; }
#timesheet_ck  .table-timesheet tbody tr td:nth-child(2),
#timesheet_ck  .table-timesheet tbody tr td:nth-child(3),
#timesheet_ck  .table-timesheet tbody tr td:nth-child(4) { text-align: center; }
#timesheet_ck  .table-timesheet tbody tr td:nth-child(2) { text-transform: uppercase; }
.float_left{float: left}
.employee_export .select2-selection__rendered{padding: 0px !important}
.radio_ex .check {
    position: absolute;
    top: 9px;
    left: 0px;
    width: 18px;
    height: 18px;
    border-radius: 100%;
    border: 2px solid #666;
}
.radio_ex input[type="checkbox"], .radio_ex input[type="radio"] {
    display: none;
}
.radio_ex span{padding-left: 25px;}
.radio_ex input[type="checkbox"]:checked ~ .check, .radio_ex input[type="radio"]:checked ~ .check {
    /* border-color: #3897f0; */
    border-color: #0085A7;
}
.radio_ex input[type="radio"]:checked ~ .check::before {
    /* background: #3897f0; */
    background: #0085A7;
}
radio_ex{cursor: pointer}
.radio_ex .check::before {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 8px;
    height: 8px;
    border-radius: 100%;
    background: none;
    content: "";
    display: block;
}
#modalExport .select2-container .select2-search--inline .select2-search__field {
    padding-left: 5px;
    width: 100% !important;
}

#modalUpdateAll .select2-container .select2-search--inline .select2-search__field {
  padding-left: 10px;
  width: 100% !important;
}

/******************* Tootip style *******************/

.ui-tooltip, .arrow:after {

    background: rgba(0, 0, 0, 0.8);
    border: 1px solid #C90;
}
.ui-tooltip {
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
    font: bold 13px "Helvetica Neue", Sans-Serif;
    /*text-transform: uppercase;*/
    box-shadow: 0 0 7px white;
}
.ui-tooltip_2 {
    max-width: 1000px !important;
    /*width: 220px !important;*/
    border-radius: 5px !important;

}
.arrow {
    width: 30px;
    height: 10px;
    overflow: hidden;
    position: absolute;
    top: 50%;
    /*margin-left: -35px;
    bottom: -16px;*/
}
.arrow.top {
    top: -10px;
    bottom: auto;
}
.arrow.left {
/*left: 20%;*/
}
.arrow:after {
    content: "";
    position: absolute;
/*        left: 20px;
    top: -20px;*/
    width: 25px;
    height: 25px;
    box-shadow: 6px 5px 9px -9px white;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    tranform: rotate(45deg);
}
.arrow.top:after {
    bottom: -20px;
    top: auto;
}

.item_tip{
  font-size: 15px !important;
  /* color: #3897f0 !important; */
  color: #0085A7 !important;
}
/******************* End tooltip *******************/
.tp_view_name {width: 78px;}
i.active, i.inactive {font-size:40px;cursor:pointer;}
i.active {color: #3897F0;}
i.inactive {color: #ccc;}
.table-timesheet th,
.table-timesheet td {min-width: 68px; max-width: 68px;}
.table-timesheet .timesheet-note {min-width: 300px; max-width: 300px}

.shift-form {}
.shift-form label {text-align: center;}
.shift-form > div.field > div {width: 100%; text-align: center;}
.shift-form > div.field > div input,
.shift-form > div.field > div select {margin: 0 auto; width: 100px;}
.shift-form > div.field > div div.picker {margin: 0 auto; width: 100px; top:auto; position: relative;}

.td_dq{
    vertical-align: middle;
    border: 1px solid #bcbbbb;
}
.has-error .select2-selection--single {
    border-color: #a94442 !important;
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
}
.disable_check{
  background: #ccc;
  color: #ccc;
  cursor: not-allowed;
}
.error_input {
  border-color: #a94442;
  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
  box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
}

.picker__list-item--disabled {
    display: none;
}

.free{
    font-weight: bold;
    background-color: #90b502;
}
.premium{
    font-weight: bold;
    background-color: #009fe2;
}
.enterprise{
    font-weight: bold;
    background-color: #08384e;
}
.dropdown-disabled{
    cursor: not-allowed;
    background:#eee;
}

/*Dossier*/
.dossier-container {

}

.dossier-container .position-relative {
  display: flex;
  flex-direction: row;
  margin-top: 15px;
}

.dossier-preview {
  width: 50%;
  order: 1;
  padding-right: 20px;
}

.dossier-controller {
  width: 50%;
  order: 2;
}

.dossier-title {
  margin-bottom: 10px;
}

.dossier-files {

}

.dossier-files .title {

}

.dossier-files .dossier-list {

}

.dossier-files .dossier-list .dossier-item {
}

.dossier-files .dossier-list .dossier-item a {
  color: #333;
  padding: 8px;
  display: block;
  text-decoration: none;
  min-width: 100px;
  width: fit-content;
}

.dossier-files .dossier-list .dossier-item a.active,
.dossier-files .dossier-list .dossier-item a:hover,
.dossier-files .dossier-list .dossier-item a:active,
.dossier-files .dossier-list .dossier-item a:focus {
  color: #039be5;
  padding: 8px;
  display: block; 
  text-decoration: none;
  border-radius: 6px;
  background-color: #e1f5ff;
  transition: all .15s ease;
}

.dossier-list {
  padding-top: 10px;

}

.dossier-item {
  margin-bottom: 10px;
}

.dossier-signs {
  border-top: 1px solid #e1e1e1;
  border-bottom: 1px solid #e1e1e1;
  padding-top: 10px;
  padding-bottom: 10px;
}

.dossier-signs .dossier-item {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.dossier-signs .dossier-item .no {
  border-radius: 50%;
  width: 37px;
  height: 37px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-weight: 700;
}

.dossier-signs .dossier-item .content {
  margin-left: 10px;
}

.dossier-signs .dossier-item .email {
  color: #777;
}

.dossier-signs .dossier-item.is-success .no {
  background-color: #2eda8f;
}

.dossier-signs .dossier-item.is-warning .no {
  background-color: #ff2f45;
}

.dossier-signs .dossier-item.is-danger .no {
  background-color: #ffa200;
}

.dossier-sender {

}

.dossier-function {
  margin-top: 20px;
}
.cm_327AB7.cm a{color: #fff}
.cm_327AB7.cm a:hover{color: #fff}
.cm_327AB7{background: #327AB7;}
.cm_5BC0DE{background: #5BC0DE;}
.cm_F1AD4E{background: #F1AD4E;}
.cm_808080{background: #808080;}
.cm_5CB85C{background: #5CB85C;}
.cm_d9534e{background: #d9534e;}
.cm_expire_dt .cm_red{color: red;}
.cm_expire_dt .cm_yellow{color: #F9C847;}
#tbl-cmsign tbody td.dosiser_state span{word-break: keep-all;}
/*#tbl-cmsign .tag-general{display: flex;}*/

@media only screen and (max-width: 1024px) and (orientation: portrait) {

  .dossier-container .position-relative {
    flex-direction: column;
  }

  .dossier-preview,
  .dossier-controller {
    width: 100%;
  }

  .dossier-preview {
    order: 2;
    padding-right: 0;
    padding-top: 20px;
  }

  .dossier-controller {
    order: 1;
  }
}
/*End Dossier*/

.btn-danger:hover {
  color: #fff;
  background-color: #c9302c;
  border-color: #ac2925;
}

.btn-success:hover {
  color: #fff;
  background-color: #449d44;
  border-color: #398439;
}

.bold{
  font-weight: bold;
}