@import url('https://fonts.googleapis.com/css?family=Roboto:400,500,700&display=swap&subset=latin-ext');
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600,700&display=swap&subset=latin-ext');
html.appointment, body{ width: 100%; height: 100%}
body{
  font-family: 'Fira Sans', sans-serif, Arial,  Helvetica, sans-serif;
  font-size: 14px;
  color: #000000;
  margin:0; padding:0;
  background-color:#f0f2f5 ;
}
body.menu-active::before {
  content: "";
  display: block;
  background-color: rgba(0,0,0,.5);
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: 99;
}

a{ color:#1d7fa7; text-decoration:none}
a:hover{ color:#27ace3}
a img {border:0}
form{ padding:0; margin:0}
STRONG{ font-weight:700}

table.admin_content {width: 100%;  background-color: #FFF;}
thead{ position: relative; z-index: 10}
table.admin_content tr{ cursor: pointer}
table.admin_content td {
  font-family: 'Fira Sans', sans-serif, Arial, Helvetica, sans-serif;
  font-size: 15px;
  color: #3E4B5B;
  border-bottom: 1px solid rgba(83,101,140,0.08);
  padding: .75rem;
  box-sizing: border-box;
  vertical-align: middle;
}
table.admin_content thead td {
  font-size: 14px;
  font-weight: 600;
  vertical-align: middle;
  border-bottom:1px solid #999;
  background-color: #FFF;

}
table.admin_content.edit {
  margin: 0 0 20px 0;
  background-color: #FFF;
  -moz-border-radius: 10px 10px 10px 10px;
  -webkit-border-radius: 10px 10px 10px 10px;
  border-radius: 10px 10px 10px 10px;
  box-sizing: border-box;
  padding: 10px;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.12);
  text-align: left;
  flex: 1;
}

table.admin_content.edit td{
  font-family: 'Fira Sans', sans-serif, Arial, Helvetica, sans-serif;
  font-size: 14px;
  border: 0px;
  padding: 0;
  padding-bottom: 10px;
}

table.admin_content tbody tr:hover {
  box-shadow: 0px 2px 5px rgba(69,101,173,0.1);
  -webkit-transform: translateY(-1px) scale(1.01);
  transform: translateY(-1px) scale(1.01);
}
HTML.appointment  table.admin_content tbody tr:hover {
  box-shadow: none;
  -webkit-transform:none;
  transform: none;
}

/*
table.admin_content tr:hover{ background-color:#ccffcc !important; cursor:pointer }
table.admin_content tr:nth-child(even) {
  background-color: #fafafa;
}
table.admin_content.edit tr:nth-child(even) {
  background-color: #FFF;
}*/

.admin_content .subhead{ background-color:#C9E2FC !important; line-height:15px; vertical-align:top;}
.admin_content .subhead STRONG{ width:100px; float:left; text-align:left; padding-right:5px}
.admin_content .subhead TD{ border:0px}

.admin_content .submenu{ background-image:url(images/submenu_bg.png); background-repeat:repeat-x; background-position:top; background-color:#dddddd   !important}
.admin_content .submenu TD{ height:24px; font-size:12px}

.admin_content .total{ background-color:#f2f2f2  !important;}
.admin_content .total TD{ height:24px; font-size:15px; font-weight:bold; vertical-align:top; padding-top: 5px}
.fixHead thead{  position: sticky; top:44px }

/*
table.rota_daily, .rota_daily thead td {
  border: 1px solid #ccc;
}
.rota_daily td{ position: relative; border-left:1px solid #DFDFDF }
.rota_daily .rota{position: absolute; left: 0; top: 0; width: 100%; height: 0; background-color: rgba(116,195,24,1); padding: 5px; box-sizing: border-box; box-shadow: 0 0 7px rgba(0,0,0,.5); z-index: 1; overflow: hidden}
.rota_daily .conflict{ background-color: rgba(255,255,102,1)}
.rota_daily .not_cover{ background-color: #00FFFF}
.rota_daily .rota .close{ position: absolute; right: 5px; top: -5px; font-size: 26px}
.rota_daily .holiday {
  background-color: #C0C;
  color: #000;
}
.rota_daily .availb {
  background-color: #e5b266;
  color: #000;
}

#parent-rota-daily{ height: calc(100vh - 75px); overflow: hidden; display: flex}
#parent-rota-daily .list-name-rota{ display: flex; flex-direction: column; width: 150px; flex: 0 0 auto; overflow: auto; position: relative; height: 100%; box-sizing: border-box; border: 1px solid #CCC; border-right: 0; background-color: #FFF   }
#parent-rota-daily .list-names{flex: 1}
#parent-rota-daily .list-names a{ display: block; padding: 5px; border-bottom: 1px solid #CCC; }
#parent-rota-daily .list-names a.selected{ background-color: #27ace3; color: #FFF}
#parent-rota-daily .rota-table{  flex: 1; overflow: auto; position: relative; height: 100% }

#parent-rota-daily .filter-date{ display: flex}
#parent-rota-daily .filter-date input { flex: 1}
#parent-rota-daily .filter-date .arrows { flex: 0 0 auto; width: 30px; overflow: hidden; display: flex; flex-direction: column}
#parent-rota-daily .filter-date .arrows a{ text-align: center; border: 1px solid #CCC}
#parent-rota-daily #filter-staffs,#parent-rota-daily #filter-wards{ width: 100% }
*/


.logo{ font-size: 30px;  font-weight: 400;  color: #74c318;  padding: 15px; padding-bottom: 5px;text-align: center;  border-bottom: 1px solid #ccc;  box-sizing: border-box;  margin-bottom: 15px;}
.logo IMG{ width: 70%}
.page-head{ margin:0 -15px; margin-bottom:15px; padding:0 15px 10px 15px; font-size:26px; border-bottom:1px solid #DDD; clear: both}
.page-head .header_menu{ float:right}

#group-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  flex-wrap: nowrap;
  align-items: center;
  padding:0 15px 10px 15px;
  border-bottom:1px solid #DDD;
  margin:0 -15px; margin-bottom:15px;
}
#group-header h3 {
  font-size: 26px;
  color: #333;
  font-weight: normal;
  margin:0;
}

.footer .header_menu{ margin-top: 15px}
.header_menu {
  list-style: none;
  margin: 0;
  padding: 0;
  margin-bottom:0;
  display: flex;
  justify-content: flex-end;
}
.header_menu a:link, .header_menu a:active, .header_menu a:visited {
  text-transform:uppercase;
  text-decoration: none;
  font-weight: 500;
  color: #000;
  display: inline-block;
  padding: 0 10px;
  font-family: 'Fira Sans', sans-serif;
  text-align: center;
  font-size: 14px;
  display: block; line-height: normal
}
.header_menu A I{ font-size:16px;  display: block; margin-bottom: 4px}
.header_menu a:hover {
  color: #999;
}
.header_menu LI{ list-style-type:none !important; margin: 0px}
.footer .header_menu li{ margin-left: 0; margin-right: 10px}

/*------------------DIV OVER traker--------------------*/
#divTrakes{background-color:#FFF; overflow:auto; position:absolute; top:5%; left:20%; width:600px; height:400px; border:1px solid #CCC; display:none; z-index:100}
#divTrakes .top{  background-color:#92B9CA; height:30px; padding-left:10px; padding-right:10px; padding-top:3px }
#divTrakes .body{ padding:10px}
#divTrakes .bottom { background-color:#f2f2f2; border-top:1px solid #CCC; height:30px; padding-left:10px; padding-right:10px; padding-top:3px }

#header{position:fixed; width: 100%; top: 0; z-index: 9; padding:5px 15px; font-weight:normal; background-color:#FFF; color:#000; border-bottom: 1px solid #ccc; box-sizing: border-box; display: flex; justify-content: space-between;}
#header a{ color:#000}
html.appointment #header .welcome{ display: none}
#slider-header {display: none;}
html.appointment #slider-header{ display: flex}
.company{ font-size: 16px; font-weight: 600; display: inline-block;vertical-align: middle;  }

.account{display: none; padding: 13px;border-top: 1px solid #CCC;border-bottom: 1px solid #CCC;margin-top: 15px;font-weight: bold;}

#container{padding:60px 15px 15px 15px;  position: relative; box-sizing: border-box; min-height: 100% }
html.appointment #container{height: 100%; padding: 44px 0 0 0 }
.home #container{ height: 100%; overflow: hidden; padding-top: 0}
.chat #container{ height: 100%; overflow: hidden; padding-bottom: 0}

.title {
  margin: 0 -15px;
  margin-bottom: 10px;
  padding: 15px; padding-top: 0;
  font-size: 22px;
  display: flex;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
.title .back {
  padding-right: 10px;
  color: #000; display: flex; align-items: center;
}
.title .back svg{
  width: 30px; height: 30px; fill: #000;
}
.title > span{ flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center}
.title .header_menu {
  justify-content: flex-end;
  display: flex;
}

#burger{ font-size: 28px; display:inline-block; margin-right: 10px; vertical-align: middle; position: relative}
#burger span{ background-color: #FF0000; color: #FFF; border-radius: 100%; width: 25px; height: 25px; text-align: center; line-height: 25px; position: absolute; top: 2px; right: -12px; font-size: 16px}

/*------------------MENU--------------------*/
/*------------------MENU--------------------*/
#navigation {
  position: fixed;
  height: 100%;
  left: -400px;
  top: 0;
  background-color: #fff;
  width: 250px;
  z-index: 99;
  border-right: 1px solid #ccc;
  overflow: auto;
  -moz-transition: left 0.5s, -moz-transform 0.5s;
  -webkit-transition: left 0.5s, -webkit-transform 0.5s;
  -o-transition: left 0.5s, -o-transform 0.5s;
}

body.menu-active #navigation, body.menu-open #navigation {
  left: 0;
}
body.menu-active #container, body.menu-open #container {
  margin-left: 250px;
}

#navigation .close {
  font-size: 40px;
  line-height: 28px;
  font-style: normal;
  font-weight: bold;
  font-family: 'arial';
  position: absolute;
  right: 10px;
  top: 10px;
}
#navigation UL {
  padding: 0;
  margin: 0;
}
#navigation LI A {
  font-size: 16px;
  display: block;
  padding: 10px 15px;
  font-weight: 400;
  color: #000;
  position: relative;
  padding-left: 57px;
  box-sizing: border-box;
  line-height: 22px;
  font-family: 'Fira Sans';
}
#navigation LI A:hover {
  background-color: #eee;
}

#navigation LI.activ A {
  background-color: #eee;
  background-image: none;
}
#navigation LI I,
#navigation LI svg{
  position: absolute;
  left: 22px;
  top: 12px;
  transition: 0.3s;
}
#navigation LI span{
  position: absolute;
  left: 20px;
  top: 8px;
  transition: 0.3s;
}
#navigation LI svg {
  max-width: 15px;
}
#navigation A:hover I,
#navigation A:hover svg {
  left: 27px;
}
#navigation LI:hover span{
  left: 27px;
}
#navigation LI svg {
  height: 16px;
}

#navigation LI:hover UL {
  display: block;
}
#navigation LI UL {
  background-color: #fff;
  border: 1px solid #a4c9dc;
  display: none;
  position: absolute;
  left: 140px;
  top: 0px;
  z-index: 10;
  -moz-border-radius: 10px /*{global-radii-buttons}*/;
  -webkit-border-radius: 10px /*{global-radii-buttons}*/;
  border-radius: 10px /*{global-radii-buttons}*/;
}
#navigation LI UL LI {
  white-space: nowrap;
  background-image: none;
  margin-bottom: 0px;
}
#navigation LI UL LI A:hover {
  background-color: #a4c9dc;
  color: #000;
}
#navigation LI.section {
  padding: 10px 15px;
  padding-bottom: 0;
  border-top: 1px solid #ccc;
  color: #80868b;
  font-weight: 600;
  box-sizing: border-box;
}
#navigation LI.section span {
  background-color: #ff0000;
  color: #fff;
  border-radius: 100%;
  width: 25px;
  height: 25px;
  text-align: center;
  line-height: 25px;
  font-size: 16px;
  display: inline-block;
  margin-left: 5px;
}

/*------------------PAYROLL--------------------*/
.payroll .flex{ display: flex; flex-wrap: nowrap; align-items: center; border-bottom: 1px solid #DDD; padding: 3px 0}
.payroll .flex:last-child{ border-bottom: 0}
.payroll .W90{ flex: 0 0 auto; width: 90px}
.payroll .W45{ flex: 0 0 auto; width: 50px}
.payroll .BR {  border-right: 1px solid #ccc;}
.payroll input, .payroll select{ width: 100%; padding: 5px; font-size: 13px}

/*------------------FORM-------------------------*/
input,
select,
textarea {
  font-family: 'Fira Sans', sans-serif, Arial, Helvetica, sans-serif !important;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background-color: #fff;
  border: 1px solid #c2c2c2;
  box-shadow: 1px 1px 4px #ebebeb;
  -moz-box-shadow: 1px 1px 4px #ebebeb;
  -webkit-box-shadow: 1px 1px 4px #ebebeb;
  border-radius: 3px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  padding: 12px 10px;
  outline: none;
  font-size: 16px;
  width: 100%;
  display: block;
}
input[type='checkbox'], input[type='radio'] {
  width: auto;
}
.row_field_box{ display: flex; flex-direction: row; gap: 20px;}
.row-field{ flex: 1}

/*------------------TOAST--------------------*/
#toast-container {
  position: fixed;
  z-index: 99;
  pointer-events: none;
  top: 12px;
  right: 12px;
}
#toast-container .toast{position:relative;pointer-events:auto;overflow:hidden;margin:0 0 6px;padding:15px 15px 15px 50px;width:300px;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;-moz-box-shadow:0 0 12px #999;-webkit-box-shadow:0 0 12px #999;box-shadow:0 0 12px #999;color:#fff; background-color: rgba(189,54,47,.8); font-size:14px; background-image:url(../images/calendarIcon.png); background-repeat:no-repeat; background-position:12px 17px;}
#toast-container .close{position:relative;right:-.3em;top:-.3em;float:right;font-size:20px;font-weight:700;color:#fff;-webkit-text-shadow:0 1px 0 #fff;text-shadow:0 1px 0 #fff;opacity:.8;-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=80);filter:alpha(opacity=80)}
#toast-container .close:hover{ color:#000}
  #toast-container .title_toast{ font-weight:bold; clear: none}
#toast-container .toast.yellow{  background-color: rgba(248,148,6,.8); background-image:url('../images/warning.png')}

.field_box {
  margin: 0 0 20px 0;
  background-color: #fff;
  -moz-border-radius: 10px 10px 10px 10px /*{global-radii-buttons}*/;
  -webkit-border-radius: 10px 10px 10px 10px /*{global-radii-buttons}*/;
  border-radius: 10px 10px 10px 10px /*{global-radii-buttons}*/;
  box-sizing: border-box;
  padding: 15px;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.12);
  text-align: left;
  flex: 1;
}
.field_box .form-line {
  margin-bottom: 20px;
  position: relative;
  display: block;
  width: 100%;
}
.field_box > .form-line:last-child {
  margin-bottom: 0;
}
.field_box .form-line LABEL {
  margin-bottom: 3px;
  font-weight: 400;
  vertical-align: top;
  color: rgb(46, 110, 158);
  position: absolute;
  top: -8px;
  left: 7px;
  padding: 0 3px;
  font-family: 'Fira Sans', Helvetica, Arial, sans-serif;
  background-color: #FFF;
  font-size: 13px;
  letter-spacing: 1px;
  z-index: 1;
}
.field_box .form-line  input, .field_box .form-line  select,  .field_box .form-line  textarea {
  border: 1px solid #c2c2c2;
  padding: 12px 10px;
  border-radius: 3px;
  font-size: 16px;
  background: none;
  font-weight: normal;
  color: #000;
}

/*------------------BTN-------------------------*/
.btn {
  display: inline-block;
  padding: 10px 14px;
  color: #FFF !important;
  background-color: #27ace3;
  border:0;
  font-size: 14px;
  font-weight: 600;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  cursor: pointer;
  box-sizing: border-box;
  -webkit-appearance: none;
  font-family: 'Fira Sans', sans-serif, Arial, Helvetica, sans-serif;
  width: auto;
  line-height: normal;
}

.btn:hover{ background-color:#00ad00; color:#FFF}
.btn i{ margin-right: 6px}
.btn.block{ display: block; width: 100%}

.btn.small { padding:3px 7px; font-size:11px}
.btn.large { padding:10px 20px; font-size:16px}

.btn.green{ background-color:#060}
.btn.green:hover{ background-color:#00ad00}
.btn.green SPAN{ font-size:13px;}

.btn-danger, input[type='button'].btn-danger, input[type='submit'].btn-danger {
  color: #fff;
  background-color: #dc3545;
  border-color: #dc3545;
}
.btn-danger:hover {
  color: #fff;
  background-color: #c82333;
  border-color: #bd2130;
}
.btn-info {
  color: #fff;
  background-color: #17a2b8;
  border-color: #17a2b8;
}
.btn-info:hover {
  color: #fff;
  background-color: #138496;
  border-color: #117a8b;
}
.btn_filter{  margin-bottom: 10px}
.btn.btn-grey {
  color: #333;
  background-color:transparent;
  border: 1px solid #999;
}
.btn.btn-grey:hover {
  color: #000;
  background-color:transparent;
  border: 1px solid #666;
}
.alert {
  padding: 10px 15px;
  margin-bottom: 17px;
  border: 1px solid transparent;
  border-radius: 3px;
}

.alert-warning {
  background-color: #FFEFA4;
  border-color: #FFEFA4;
  color: #574802;
}
.alert-danger {
  color: #721c24;
  background-color: #f8d7da;
  border-color: #f5c6cb;
}
.alert-success {
  color: #155724;
  background-color: #d4edda;
  border-color: #c3e6cb;
}

.bg_090 {
  background-color: #090;
}
.bg_F00 {
  background-color: #f00;
}
.bg_FF0 {
  background-color: #ff0;
}
.bg_00F {
  background-color: #00f;
}
.bg_F0F {
  background-color: #f0f;
}
.competencie{  background-image:url(../images/live.gif); background-repeat:no-repeat; background-position:center center }
.need{ background-image:url(../images/live.gif); background-repeat:no-repeat; background-position:center center }
.conflict, 	#rota .rotas.conflict{ background-color:#FF6; color:#000 }
.conflict_red{ background-color:#F00}
.sel{ background-color:#093; color:#FFF}
.rotasT{ margin-bottom:5px}

.cell{border-left:1px solid #DFDFDF}
.cell .new{ display:none}
.cell:hover .new{ display:block}
.cell.training_conflict{ background-color:#00C; color:#FFF }
.cell.holiday{ background-color:#C0C; color:#000}
.cell.holiday_brown{ background-color:#654320; color:#FFF}
.cell.holiday_grey{ background-color:#999; color:#FFF}

.tool_name{ position:absolute;
  z-index: 3000;
  border: 1px solid #111;
  background-color: #eee;
  padding: 5px;
  opacity: 0.85;
  left:0px; top:15px;
  display:none;
  white-space:nowrap
}


.admin_content.top{ background-color:#FFF1F2; margin-bottom:10px;
  -moz-border-radius:  				10px /*{global-radii-buttons}*/;
  -webkit-border-radius: 				10px /*{global-radii-buttons}*/;
  border-radius: 						10px /*{global-radii-buttons}*/;
}
.admin_content.top TD{ height:24px; font-size:13px; border:0px}
.admin_content.top.border TD{ border-bottom:1px solid; font-size:11px; padding-top:7px; padding-bottom:7px}
.admin_content.top.border TD A{ margin-left:10px; }
.admin_content.top TD .allocated{ color:#666; margin-top:5px}
.admin_content.top TD .allocated:nth-of-type(1){ margin-top:0px}
.admin_content.top TD A{ display:block; margin-bottom:30px}

.mov, .admin_content .mov TD{ }

.admin_content .color_930 TD{ color:#930; font-weight:bold}
.admin_content .color_F60 TD{ color:#F60; font-weight:bold}
.admin_content .color_C0C TD{ color:#C0C; font-weight:bold}
.admin_content .color_00C TD{ color:#00C; font-weight:bold}

.tdred, .red, .admin_content .red TD{ color:#F00; font-weight:bold}
.admin_content .green TD{ color:#0C3; font-weight:bold}

.admin_content TD.color_930{ color:#930; font-weight:bold}
.admin_content TD.color_F60{ color:#F60; font-weight:bold}
.admin_content TD.color_C0C{ color:#C0C; font-weight:bold}
.admin_content TD.color_00C{ color:#00C; font-weight:bold}
.admin_content TD.red_exp{ color:#F00; font-weight:bold}


.green2 {color:#6BAD6B}
.eaf4fd,.eaf4fd TR{ background-color: #eaf4fd !important; }

  /* -------------------------------- CHAT -----------------------------------*/
.msgList{
  overflow: hidden;
  position: relative;
  margin: 0;
  padding: 0;
}
.msgList LI{ padding: 0 ; display:flex; margin:0; margin-bottom: 12px; flex-wrap: wrap; text-align: left}
.msgList LI.me{ justify-content: flex-end}
.msgList LI.same{ margin-bottom: 2px}
.msgList LI .line{ display: inline-block; width: 95px; vertical-align: middle}
.msgList LI .date1{ position: absolute; right: 13px; bottom: 4px; color: #D6E5EF; font-size: 12px}
.msgList LI div.msg{ max-width: 85%}
.msgList .name{ display:block; font-family:'Fira Sans', sans-serif, Arial; font-size:14px; font-weight:bold}
.msgList .arrow {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid #3498D8;
  margin-left:10px;
  display:block;
}
.msgList .text{ position: relative; color:#FFF; font-family:'Fira Sans', sans-serif, Arial; font-size:16px;  border-radius:10px; padding:7px 10px 10px 10px; display:block; white-space:pre-wrap; word-break: break-all; background-color: rgba(52,152,219,.8) }

.msgList LI.me .name{ color:#27ae60}
.msgList LI.me .text{ background-color:rgba(39,174,96,.8)}

/*------------------CALENDAR--------------------*/
table.table_calendar {
  margin:0;
  padding:0;
  border:none;
  font-size:14px;
  background-color: #FFF;
  border: 1px solid #CCC;
}
.table_calendar tr {
  margin:0;
  padding:0;
  border:none;
}
.table_calendar tr.first {
  background-color:#DDD;
}

.table_calendar_bg_grey {
  background-color:#CCC;
  display: flex;
}
.table_calendar_bg_grey span{ flex: 1; align-items: center; display: flex;justify-content: center}
.table_calendar_bg_grey a{font-size: 25px; font-family: 'Fira Sans', Helvetica, Arial, sans-serif; line-height: 16px; font-weight: bold; width: 50px; height: 40px; flex: 0 0 auto; display: flex; justify-content: center; align-items: center}
.table_calendar td {
  height:40px;
  width:14.2%;
  margin:0;
  padding:0;
  border:none;
  text-align:center;
  color: rgba(57,57,57,0.1);
  vertical-align: middle;
  position: relative;
  border: 1px solid #f1f1f194;
  vertical-align: top;
}

.table_calendar td a {
  height:40px;
  width:100%;
  line-height: 40px;
  display:block;
  color: #000;
  font-family: 'Fira Sans';
}
.table_calendar td a:hover {
  background:rgba(127,212,255,1);
}
.table_calendar td a.selected {
  background-color: #74c318;color: #FFF
}
.table_calendar td DIV{ padding: 5px; color: #000; text-align: left; cursor: pointer; margin-bottom: 1px}
.table_calendar td DIV:hover{opacity: .8}
.table_calendar td DIV
.table_calendar select{ font-family:'Fira Sans', sans-serif;  text-transform: uppercase; padding: 5px}
.table_calendar tr.first TD{
  color:#000;
  border: 0;
  vertical-align: middle;
}

#hours .hours-content{ display: grid; grid-template-columns: repeat(auto-fill, minmax(65px, 1fr)); gap: 10px;}
#hours .hours-content span {background-color:rgba(127,212,255,0.5); text-align: center; padding: 5px; box-sizing: border-box; font-size: 14px; cursor: pointer}
#hours .hours-content span.selected {background-color:#74c318; color: #FFF}

#box_calendar_container{ position: fixed; top: -400px; left: 50%; width: 90%; z-index: 100; max-width: 400px; transform: translateX(-50%);
  -moz-transition: top 0.5s, -moz-transform 0.5s;
  -webkit-transition: top 0.5s, -webkit-transform 0.5s;
  -o-transition: top 0.5s, -o-transform 0.5s;}
#box_calendar_container.show{ top: 50px; }

.table_calendar TD span{ display: block; position: absolute; right: 0; bottom: 0; background-color: #74c318; line-height: normal; padding: 1px 4px; font-size: 12px; color: #FFF}
.table_calendar td a{ height: 45px}

/*------------------CALENDAR MONTH--------------------*/
.table_calendar.month{}
.table_calendar.month .top TD{ font:12px}
.table_calendar.month TD{ font-size:12px}

/*------------------AUTOCOMPLETE--------------------*/
.autocomplete_results {
  /*max-height:100px; overflow:auto*/
}
.autocomplete_results A {
  background-color: #dee7f8;
  border: 1px solid #cad8f3;
  padding-left: 5px;
  padding-right: 5px;
  color: #000;
  line-height: 20px;
  white-space: nowrap;
  display: block;
  margin-bottom: 5px;
}
.autocomplete_results A STRONG {
  font-size: 11px;
  font-family: 'Fira Sans', sans-serif, Verdana, Geneva, sans-serif;
  color: #999;
}
.autocomplete_results a:hover {
  background-color: #bbcef1;
  border: 1px solid #6d95e0;
}
.autocomplete_results a:hover STRONG {
  font-size: 11px;
  font-family: 'Fira Sans', sans-serif, Verdana, Geneva, sans-serif;
  color: #333;
}

.ui-autocomplete{ max-height:300px; overflow: hidden; overflow-y:scroll; max-width: 80%}
.ui-menu .ui-menu-item-wrapper { min-height: 18px; font-size: 14px; padding: 5px 1em 5px .4em; border-bottom: 1px solid #CCC}
.ui-menu .ui-menu-item-wrapper.ui-state-active{ font-weight:normal}

/*------------------CUSTOM COMBOBOX--------------------*/
.selected_options a {
  display: block;
  background-color: #dee7f8;
  margin-bottom: 2px;
  padding: 3px 5px;
  padding-right: 15px;
  position: relative;
  color: #000;
}

.custom-combobox {
  display: flex;
}

.custom-combobox input {
  width: 100%;
}

.selected_options a::after {
  content: 'x';
  position: absolute;
  right: 7px;
  top: 3px;
}

.selected_options a {
  display: block;
  background-color: #dee7f8;
  margin-bottom: 2px;
  padding: 3px 5px;
  padding-right: 15px;
  position: relative;
  color: #000;
}
.selected_options a::after {
  content: 'x';
  position: absolute;
  right: 7px;
  top: 3px;
}

.filter{ margin-bottom: 15px}
.filter table{ table-layout:fixed;}
.filter .custom-combobox{ width: 100% !important;}
/*.selected_options a{ display: block; background-color: #DEE7F8; margin-bottom: 2px; padding: 3px 5px; padding-right: 15px; position: relative; color: #000}
.selected_options a::after{ content: 'x'; position: absolute; right: 7px; top: 3px}*/

#add{display:none; position:absolute; background-image:url(images/arrow.gif); background-repeat:no-repeat; background-position:top right; padding-top:30px; z-index:1000;}
#overlay{ display:none; position:fixed; width:100%; height:100%; background-color:rgba(0,0,0,.5); z-index:100; top:0px; left:0px}
#box_email{
  position:fixed; left:5%; top:5%;
  background-color:#f7f7f7; padding:0px; width:90%; height:90%; display:none; z-index:200;
  -moz-box-shadow: 0px 0px 14px #000;
  -webkit-box-shadow: 0px 0px 14px #000;
  box-shadow: 0px 0px 14px #000;
  box-sizing: border-box;
  -moz-border-radius:  				10px 10px 10px 10px /*{global-radii-buttons}*/;
  -webkit-border-radius: 				10px 10px 10px 10px /*{global-radii-buttons}*/;
  border-radius: 						10px 10px 10px 10px /*{global-radii-buttons}*/;
}
#box_email.active{ display: block}
#box_email A.close{ position:absolute; display:block; right:-25px; top:-25px;
  background-color: #000;

  border-radius: 100%;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}
#box_email A.close svg{width: 30px;
  height: 30px;
  fill: #FFF;}

.popup{position:absolute; left:160px; background-color:#a4c9dc; width:600px; height:400px; display:none; z-index:200; padding:10px;
  -moz-box-shadow: 0px 0px 14px #000;
  -webkit-box-shadow: 0px 0px 14px #000;
  box-shadow: 0px 0px 14px #000;

  -moz-border-radius:  				10px 10px 10px 10px /*{global-radii-buttons}*/;
  -webkit-border-radius: 				10px 10px 10px 10px /*{global-radii-buttons}*/;
  border-radius: 						10px 10px 10px 10px /*{global-radii-buttons}*/;
}
.popup_int{
  -moz-border-radius:  				10px 10px 10px 10px /*{global-radii-buttons}*/;
  -webkit-border-radius: 				10px 10px 10px 10px /*{global-radii-buttons}*/;
  border-radius: 						10px 10px 10px 10px /*{global-radii-buttons}*/;
  background-color:#FFF;
  height:100%;
  overflow:auto;
}
.popup .close{ text-align:right; line-height:30px}

/*------------------TABS--------------------*/
.tabs{ padding:0; margin:0; display: flex; margin-bottom:15px; border-bottom: 1px solid #CCC}
.tabs LI.activ{ background-image:none; border-bottom: 2px solid #1d7fa7 }
.tabs LI{ list-style-type:none; flex: 0 0 auto; text-align: center; }
.tabs LI A{ display: block; color:#1d7fa7; padding: 10px 20px; font-size:14px; font-weight: 600}
.tabs LI A:hover{ background-color: #f9f9f9}

/*------------------CUSTOM CHECKBOX--------------------*/
/* Customize the label (the container) */
.custom-checkbox {
  position: relative;
  padding: 6px 16px;
  cursor: pointer;
  font-size: 16px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  min-height: 50px; box-sizing: border-box; display: flex; align-items: center; width: 100%;
}
.custom-checkbox.inline{ float: left; background-color: #74c318; border-radius: 3px; padding: 10px 10px; padding-left:45px; margin-right: 10px; color: #FFF}
/* Hide the browser's default checkbox */
.custom-checkbox input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmark {
  position: relative;
  height: 25px;
  width: 25px;
  background-color: #eee;
  order: -1; margin-right: 10px; flex: 0 0 auto;
}
.custom-checkbox input[type='radio'] ~ .checkmark { border-radius: 100% }
.custom-checkbox.inline  .checkmark{ left: 10px; top: 8px}
/* On mouse-over, add a grey background color */
.custom-checkbox:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.custom-checkbox input:checked ~ .checkmark {
  background-color: #2196F3;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.custom-checkbox input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.custom-checkbox .checkmark:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}


/*-----------------------------SCHEDUAL--------------------------------------------------------*/
/*table.rota_daily{ table-layout: fixed}*/
.rota_daily thead{height: auto; position: sticky; top: 0}
table.rota_daily, .rota_daily thead td {
  border: 1px solid #ccc;
}
.rota_daily td{ position: relative; border-left:1px solid #DFDFDF; padding: 10px 3px }

.rota_daily tr{ display: flex; flex-wrap: nowrap}
.rota_daily td{ flex: 1; min-width: 100px}
.rota_daily td.h{ width: 40px; min-width: 40px; flex: 0 0 auto; font-weight: 600; border: 0; background-color: #FFF; text-align: center; position: sticky; left: 0}
.rota_daily thead td{ background-color: #EEE !important; padding: 3px}

.rota_daily .columns_table{ width: 100px}
.rota_daily .rota{position: absolute; left: 0; top: 0; width: 100%; height: 0; box-sizing: border-box; z-index: 1; overflow: hidden; border: 1px solid #FFF; background-color: #a5dff8; border-radius: 4px; cursor: pointer}
.rota_daily .rota-int{ width: 100%; height: 100%; padding: 5px; box-sizing: border-box; overflow: hidden}

.rota_daily .conflict{ background-color: rgba(255,255,102,1)}
.rota_daily .rota.surgery{ background-color: #6cd5cb}

.rota_daily .not_cover{ background-color: #00FFFF}
.rota_daily .rota .close{ position: absolute; right: 5px; top: -5px; font-size: 26px}
.rota_daily .holiday {
  background-color: #C0C;
  color: #000;
}
.rota_daily .availb {
  touch-action: pan-y;
  width: 100%;
  height: 100%;
  position: relative;
  background-size: 8px 8px;
  background-image: linear-gradient(45deg, transparent 46%, #d5d7da 49%, #d5d7da 51%, transparent 55%);
  background-color: #f2f2f7;
}
#parent-rota-daily{ height: 100%; overflow: hidden; display: flex}
#parent-rota-daily .list-name-rota{ display: flex; flex-direction: column; width: 200px; flex: 0 0 auto; overflow: auto; position: relative; height: 100%; box-sizing: border-box; border: 1px solid #CCC; border-right: 0; background-color: #FFF   }
#parent-rota-daily .list-names{flex: 1; overflow: auto}
#parent-rota-daily .list-names a{ display: block; padding:10px; border-bottom: 1px solid #CCC; font-size: 16px }
#parent-rota-daily .list-names a.selected{ background-color: #27ace3; color: #FFF}
#parent-rota-daily .rota-table{  flex: 1; overflow: auto; position: relative; height: 100% }

.filter-date{ display: flex; height: 40px; position: fixed;    z-index: 10;    left: 50%;    top: 0;    transform: translateX(-50%);}
.filter-date button{ border: 0; background-color: #FFF}
.filter-date #date-button{ min-width: 150px; font-size: 16px}
.filter-date svg{width: 40px}

#parent-rota-daily #filter-employees,#parent-rota-daily #filter-clients{ width: 100% }
#parent-rota-daily .subtitle{ font-size: 16px; font-weight: 500; padding: 10px}

.days{ display: flex; flex-direction: row; justify-content: space-evenly; margin-bottom: 15px}
.days a{ display: flex; flex-direction: column; color: #000; align-items: center}
.days a SPAN{border: 1px solid #CCC;
  border-radius: 100%;
  width: 45px;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
}
.days a.selected SPAN{ background-color: #27ace3; color: #FFF}

/* LEGENDLEGEND */
.legend{float:right; width:300px; font-weight:bold}
.legend  LI{ list-style-type: none; display: flex;}
.legend  LI span{ width:225px; display:inline-block; margin-right:15px; font-weight:normal}
.legend  LI B{ width: 15px; height: 15px; margin-right: 5px}


/* -------------------------------- TABLE FLEX -----------------------------------*/
.row-flex{ cursor: pointer; display: flex; flex-direction: row; flex-wrap: nowrap; width: 100%; border-bottom: 1px solid #ebebeb; padding: 4px 0px; align-items: center; min-height: 40px;box-sizing: border-box;}
.row-flex.error_upload{ background-color: #FF8587}
.row-flex.table-head{ font-weight: 600}
.col-flex{ box-sizing: border-box; padding: 0px 4px}
.col-flex.group{ display: flex; flex-wrap: nowrap; flex-direction: row; flex: 1; padding: 0px; align-items: center}
.col-flex i{ font-size: 13px; margin:0px 5px;}
.col-flex i.fa-edit{ color: #0073b5}
.col-flex i.fa-trash-alt{ color: #ff0000}

/* -------------------------------- ASSETS -----------------------------------*/
.assetmanager-container{ display:flex; flex-direction: column; width: 100%; background-color: #FFF}
.assetmanager-container .assetmanager-head{ height: 48px; border-bottom: 1px solid #ccc; display: flex; flex-wrap: nowrap; flex-direction: row; align-items: center; box-sizing: border-box; padding: 0px 15px; padding-right: 30px}
.assetmanager-container .assetmanager-head .location{ flex:1}
.assetmanager-container .assetmanager-head .actions{ display: flex}
.assetmanager-container .assetmanager-head .actions form{ margin-right: 10px; position: relative}
.assetmanager-container .assetmanager-head .actions svg{ position: absolute; left: 7px; top: 7px; height: 17px; fill:#666}
.assetmanager-container .assetmanager-head .actions .search{ padding: 8px; padding-left: 30px; box-sizing: border-box}
.assetmanager-container .assetmanager-head .actions I.fa-plus{ font-size: 15px}
.assetmanager-container .assetmanager-body{ flex: 1; overflow-y: scroll; font-size: 13px}

.col-flex a{ text-decoration: none; color: #000}
.col-flex a:hover{ text-decoration: underline}
.col-flex.icn I{ font-size: 40px; color: #555}
.col-flex.icn img{ height: 30px; cursor: pointer}
.col-flex I.fa-folder{ color: #0073b5}
.col-flex.icn{ width:96px; text-align: center}
.col-flex.name, .col-flex .label-name{ flex:2; word-break:break-all}
.col-flex.loc, .col-flex .label-location{ flex:2; word-break:break-all}
.col-flex.size, .col-flex .label-size{ flex:1}
.col-flex.data, .col-flex .label-data{ flex:1}
.col-flex .label-name, .col-flex .label-size,.col-flex .label-location, .col-flex .label-data{ padding: 0px 4px; box-sizing: border-box}
.col-flex.preview{ width: 80px}
.col-flex.action{ width: 70px; display: flex; flex-direction: row ;flex-wrap: nowrap}
.col-flex i.fa-edit, .col-flex i.fa-trash-alt,.col-flex i.fa-eye{ visibility: hidden}
.row-flex:hover i{ visibility:visible}

/* -------------------------------- DRPDOWN -----------------------------------*/
.dropdown{ position:relative}
.dropdown-content{ position: absolute; right: 0px; display: none}
.dropdown-content.show{ display: flex}
.dropdown-content{ flex-direction: column; box-shadow: 0 4px 8px 0 rgba(34,47,62,.1); background-color: #FFF; border: 1px solid #CCC}
.dropdown-content a{display: block; text-align: left; min-width: 200px; padding: 8px 16px; color: #000; font-size: 15px}
.dropdown-content a:hover{ background-color: #ccc}
.dropdown-content a.disable{color: #666}
.dropdown-content a.disable:hover{background-color:transparent}
.dropdown-content a i{ margin-right: 10px; font-size: 20px; color: #333}

/* -------------------------------- DIALOG -----------------------------------*/
.dialog{ position: fixed; left: 0px; top: 0px; width: 100%; height: 100%;  align-items: center; justify-content: center; box-sizing: border-box; z-index: 100; background-color: rgba(255,255,255,.5); display: none}
.dialog.show{ display:flex;}
.dialog .dialog-content{box-shadow: 0 16px 16px -10px rgba(34,47,62,.15),0 0 40px 1px rgba(34,47,62,.15);border: 1px solid #ccc;border-radius:4px; background-color: #FFF; width: 100%; max-width: 380px; padding: 15px;max-height: 90%; overflow: auto;}

/* -------------------------------- DIALOG -----------------------------------*/
.location{ color:#000; font-size: 24px; display: flex; flex-wrap: wrap; align-items: center}
.location a{ color:#666; font-size: 16px}
.location SPAN{ line-height: 20px; margin: 0px 5px; padding-bottom: 3px}
.location SPAN:last-child{ display:none}
.location .fa-arrow-left{ margin-right: 10px}

/*----------------theme jquery ui-----------------------*/
#ui-datepicker-div{ z-index: 20!important;}

.ui-widget.ui-widget-content {

}

.ui-widget-header {
  background: none;
  background-color: #74c318;
  border: 0px;
  border-radius: 0px;
}

.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default,
.ui-button,
html .ui-button.ui-state-disabled:hover,
html .ui-button.ui-state-disabled:active {
  background: none;
  background-color: #ccffcc;
}
.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active,
a.ui-button:active,
.ui-button:active,
.ui-button.ui-state-active:hover {
  background: none;
  background-color: #fff;
}
.ui-state-default a,
.ui-state-default a:link,
.ui-state-default a:visited,
a.ui-button,
a:link.ui-button,
a:visited.ui-button,
.ui-button {
  color: #333;
}
.ui-helper-reset {
  font-size: 90%;
}

.custom-combobox-input.ui-widget.ui-widget-content {
  border: 1px solid #ccc;
  font-family: 'Fira Sans', sans-serif, Arial, Helvetica, sans-serif;
  font-size: 16px;
  padding: 12px 10px;
  font-weight: normal;
  color: #000;
  background: none;
}
.ui-state-active {
  font-weight: normal !important;
}
#ui-datepicker-div{ z-index: 1000 !important;}
.clear {
  clear: both;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 none !important;
  line-height: 0 !important;
  height: 0 !important;
  font-size: 0 !important;
}

.ui-autocomplete{ max-height:400px; overflow: hidden; overflow-y:scroll; max-width: 80%; background: none; background-color: #FFF; box-shadow: 1px 1px 4px #ebebeb }
.ui-menu .ui-menu-item-wrapper { min-height: 18px; font-size: 14px; padding: 5px 1em 5px .4em; border-bottom: 0}
.ui-menu .ui-menu-item-wrapper.ui-state-active{ font-weight:normal; background-color: #EEE}

.ui-tabs{ background: none !important; border: 0 !important;}
.ui-tabs .ui-tabs-panel {
  padding: 0px;
  padding-top: 15px;
}
.ui-tabs-nav{ background: none; border-bottom: 1px solid #CCC}
.ui-tabs .ui-tabs-nav li{ background: none; border: 0}
.ui-tabs .ui-tabs-nav li a{ color: #1d7fa7; font-family: 'Fira Sans', sans-serif, Arial, Helvetica, sans-serif; font-size: 14px; font-weight: 600}
.ui-tabs .ui-tabs-nav li a:hover{ background-color:#f9f9f9 }
.ui-tabs .ui-tabs-nav li.ui-tabs-active{ border-bottom: 2px solid #1d7fa7}


.check svg{ width: 20px; height: 20px; vertical-align: middle}
table.admin_content td.check_simb{ font-size: 26px; color: green; text-align: center}
i.fa-trash-alt{ color: #FF0000}
i.fa-edit{ color: #00ad15}
.clear{clear:both; margin:0 !important; padding:0 !important; border:0 none !important; line-height:0 !important; height:0 !important; font-size:0 !important}

.row{ display: flex; }
.row .column{ flex: 1}

@media screen and (min-width: 769px) {
  .title {
    font-size: 28px;
  }
}
@media screen and (max-width: 768px) {
  html.appointment #container{padding: 44px 0 0 0}
  #box_email{ left: -130%; top: 0; width: 100%; height: 100%; padding-top: 50px; background-color: #FFF; border-radius: 0; display: block;
    transition:        	 left 0.5s, transform .5s;
    -moz-transition:	 left 0.5s, -moz-transform .5s;
    -webkit-transition:	 left 0.5s, -webkit-transform .5s;
    -o-transition:		 left 0.5s, -o-transform .5s;}
  #box_email.active{ left: 0% }
  #box_email A.close{ background-color: transparent; right: 0; top: 0}
  #box_email A.close svg{ fill: #000}
  #parent-rota-daily {
    flex-direction: column
  }

  #parent-rota-daily .list-name-rota {
    position: fixed;
    right: 0;
    top: 0;
    z-index: 101;
    height: 100%;
    display: none;
    width: 80%;
  }

  HTML.show-list-names #overlay{ display: block !important;}
  HTML.show-list-names #list-employees{ display: flex}

  .ui-autocomplete{ max-height:100%; max-width: 100%; position: fixed; left: 0 !important; top: 0 !important; width: 100%; height: 100%}
  .ui-menu .ui-menu-item-wrapper { min-height: 18px; font-size: 20px; padding: 10px 20px; border-bottom: 1px solid #CCC}
  .ui-menu .ui-menu-item-wrapper.ui-state-active{ font-weight:normal}
}