@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, body { height: 100%; width: 100%; overflow: auto }
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: #00ad15;
    text-decoration: none;
}
a:hover {
    color: #0073aa;
}
a:focus-visible, a:focus, button:focus-visible, button:focus { outline: 0}
a img {
    border: 0;
}
form {
    padding: 0;
    margin: 0;
}
STRONG {
    font-weight: 700;
}

table {
    width: 100%;
    background-color: #fff;
}
td {
    font-family: 'Fira Sans', sans-serif, Arial, Helvetica, sans-serif;
    font-size: 15px;
    color: #3E4B5B;
    vertical-align: middle;
    box-sizing: border-box;
}
table.admin_content td{ padding: 10px 7px; border-bottom: 1px solid rgba(83,101,140,0.08);}
table.admin_content td:first-of-type{ padding-left: 15px}
table.admin_content td:last-of-type{ padding-right: 15px}
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);
}
BODY.appointment tbody tr:hover {
    box-shadow: none;
    -webkit-transform:none;
    transform: none;
}
table.admin_content tr {
    cursor: pointer;
}

table.admin_content thead{ height: 45px; z-index: 10}
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 .total{ font-size: 16px; font-weight: bold}

table.collapse, table.collapse td{ border: 1px solid #CCC;  border-collapse: collapse;}
.fixHead thead{  position: sticky; top:48px }
.logo {
    font-size: 30px;
    font-weight: 400;
    color: #74c318;
    padding: 15px 5px;
    text-align: center;
    border-bottom: 1px solid #ccc;
    box-sizing: border-box;
    margin-bottom: 15px;
}
.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;
    line-height: 0;
}
.header_menu li {
    display: inline-block;
    margin-left: 10px;
}
.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;
    box-sizing: border-box;
    border-bottom: 1px solid #ccc;
    display: flex;
    justify-content: space-between;
}
#header a {
    color: #000;
}
#header .welcome {
    float: right;
    margin-top: 8px;
}
.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%;
}
body.home #container{ height: 100%}
body.appointment #container{height: 100%;}

body.container-paddbottom #container{ padding-bottom: 50px}
.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;}
.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--------------------*/
#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 A: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 ;
    -webkit-border-radius: 10px ;
    border-radius: 10px ;
}
#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;
}

/*------------------FORM-------------------------*/
input,
select,
textarea,
div.value{
    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;
}
div.value{ color: #6d6d6d}
input[type='checkbox'] {
    width: auto;
}
.row_field_box {
    display: flex;
    flex-direction: row;
    gap: 20px;
}
.row-field {
    flex: 1;
}
.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 {
    display: inline-block;
    margin-bottom: 3px;
    font-weight: 400;
    vertical-align: top;
    color: rgba(0,0,0,.6);
    position: absolute;
    top: -8px;
    left: 7px;
    padding: 0 3px;
    font-family: 'Fira Sans', Helvetica, Arial, sans-serif;
    background-color: #FFF;
    color: #529604;
    font-size: 13px;
    letter-spacing: 1px;
    z-index: 1;
}
#page-form LABEL {
    width: 100%;
}

.row{ display: flex; justify-content: space-between }
.row .column{ flex: 1}
.row-pad-15 .column{ width: calc(50% - 15px); flex: 0 0 auto}
/*------------------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; flex-wrap: wrap; 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);
}

/*------------------LIST--------------------*/
.listview{ background-color: #FFF; display: flex; flex-direction: column; padding: 0; margin: 0; margin-bottom: 20px; border:1px solid #DCDCE9;}
.listview > LI{ padding: 11px 16px; border-bottom:1px solid #DCDCE9; box-sizing: border-box; list-style-type: none;  min-height: 50px}
.listview > LI:last-child{ border-bottom: 0}
.link-listview >LI, .nopad-listview >LI{ padding: 0;  min-height: 0}
.listview.outset, .field_box.outset{ margin-left: -15px; margin-right: -15px; border-radius: 0}
.link-listview LI A{ display: block; font-size: 16px; padding: 6px 16px}
.listview > LI .textarea-input{ padding: 0 10px 10px 0}

.preanestezic{ padding-left: 10px}
.preanestezic UL{ border: 0; border-left: 1px solid #CCC;}
.preanestezic, .preanestezic > LI > UL, .preanestezic > LI > UL > LI > UL{ border: 0}
.preanestezic LI{ border: 0;}
.preanestezic UL UL{ padding-left: 20px}
.preanestezic .status1 UL LI, .preanestezic .status2 UL LI{ border: 0}
.preanestezic LABEL, .preanestezic LABEL{ padding-left: 0; padding-right: 0}

.preanestezic .pad10-left-bottom{ padding: 0 10px 10px 0}

.firts_level_preanestezic > LI{ list-style-type: none}
.firts_level_preanestezic UL{ padding: 0; margin: 0; padding-left: 20px}
UL.firts_level_preanestezic{ padding: 0; margin: 0}

/*------------------BTN-------------------------*/
.btn {
    display: inline-block;
    padding: 10px 14px;
    color: #fff;
    background-color: #74c318;
    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:'Open Sans', sans-serif, Arial, Helvetica, sans-serif;
    width: auto;
}

.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 {
    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;
}

.client_link_extern{ font-size: 27px; position: absolute; right: 0; top: 0; height: 47px; overflow: hidden}

div.view {
    font-family:  'Fira Sans', 'Open Sans',  sans-serif, Arial, Helvetica, sans-serif;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    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;
    background-color: #f1f1f1;
}
.timing LI.remove{ position: relative; background-color: #dee7f8; padding: 10px; cursor: pointer}
.timing LI.remove::after {
    content: 'x';
    position: absolute;
    right: 7px;
    top: 3px;

}
/*------------------CALENDAR--------------------*/
#box_calendar table {
    margin:0;
    padding:0;
    border:none;
    font-size:14px;
    background-color: #FFF;
    border: 1px solid #CCC;
}
#box_calendar tr {
    margin:0;
    padding:0;
    border:none;
}
#box_calendar tr.first {
    background-color:#DDD;
}
#box_calendar tr.first TD{
    color:#000;
}
#box_calendar #bg_grey {
    background-color:#CCC;
    display: flex;
}
#box_calendar #bg_grey span{ flex: 1; align-items: center; display: flex;justify-content: center}
#box_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}
#box_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;
}
#box_calendar td a {
    height:40px;
    width:100%;
    line-height: 40px;
    display:block;
    color: #000;
    font-family: 'Fira Sans';
}
#box_calendar td a:hover {
    background:rgba(127,212,255,1);
}
#box_calendar td a.selected {
    background-color: #74c318;color: #FFF
}

#box_calendar select{ font-family:'Fira Sans', sans-serif;  text-transform: uppercase; padding: 5px}

#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; }

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

/*------------------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 tr.first TD{
    color:#000;
    border: 0;
}
.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;
}
.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 select{ font-family:'Fira Sans', sans-serif;  text-transform: uppercase; padding: 5px}

#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: 10px;
    font-family:'Fira Sans', 'Open 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: 10px;
    font-family:'Fira Sans', 'Open Sans', sans-serif, Verdana, Geneva, sans-serif;
    color: #333;
}

#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(255,255,255,.7);
    z-index: 100;
    top: 0px;
    left: 0px;
}

#box_email{
    position: fixed;
    left: 0;
    display: none;
    z-index: 200;
    background-color: #f7f7f7;
    padding: 0;
    top: 0; width: 100%; height: 100%; overflow: hidden;
    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{ display: block;}
#box_email A.close { display: none}

/*#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;
    padding: 15px;
    right: -22px;
    top: -25px;
    font-size: 32px;
    line-height: 17px;
    color: #fff;
    background-color: #333;
    font-family:"Times New Roman";
    -moz-border-radius: 100% ;
    -webkit-border-radius: 100%;
    border-radius: 100% ;
}*/

.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}

/*----------------theme jquery ui-----------------------*/
.ui-widget.ui-widget-content {

}
.ui-tabs .ui-tabs-panel {
    padding: 0px;
    padding-top: 15px;
}
.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%;
}

.ui-widget.ui-widget-content {
    background: none;
    background-color: #fff;
}
.custom-combobox-input.ui-widget.ui-widget-content {
    border: 1px solid #ccc;
    font-family: 'Open Sans', sans-serif, Arial, Helvetica, sans-serif;
    font-size: 16px;
    padding: 12px 10px;
    font-weight: normal;
    color: #000;
}
.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}

/*----------------openbox overlay-----------------------*/

.overlay-loading {
    position: absolute;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(3px);
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;

    display: flex;
    align-items: center;
    justify-content: center;
}

.overlay-loading svg {
    position: relative;
    width: 150px;
    height: 150px;
    animation: rotate 2s linear infinite;
}

@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.overlay-loading svg circle {
    width: 100%;
    height: 100%;
    fill: none;
    stroke-width: 10;
    stroke: #74c318;
    stroke-linecap: round;
    transform: translate(5px, 5px);
    stroke-dasharray: 440;
    stroke-dashoffset: 440;
    animation: animate 4s linear infinite;
}

@keyframes animate {
    0%,
    100% {
        stroke-dashoffset: 440;
    }

    50% {
        stroke-dashoffset: 0;
    }

    50.1% {
        stroke-dashoffset: 880;
    }
}

/* -------------------------------- TABLE FLEX -----------------------------------*/
.row-flex {
    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.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;
}

.col-flex a {
    text-decoration: none;
    color: #000;
}
.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;
}

.d-none {
    display: none;
}

.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;
}
.center {
    text-align: center;
}

/*-----------------------------PRE ANESTZIE--------------------------------------------------------*/
.level0{ font-size: 26px; display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px}
.level1{ font-size: 20px; margin-bottom: 10px;}
.level2{ font-size: 16px; margin-bottom: 5px}

.ident1{ font-size: 20px; margin-bottom: 10px}
.ident2{ font-size: 14px;}
.ident3{ font-size: 14px; margin-left: 10px}
.ident4{ font-size: 14px; margin-left: 20px}

/*-----------------------------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; z-index: 9}
.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}


/*-----------------------------FLOATING ADD MENU--------------------------------------------------------*/
#floating-add-menu{ position: fixed; right: 15px; bottom: 15px; z-index: 2}
#floating-add-menu.open #close-menu{ display: none}
#floating-add-menu #open-menu{ display: none; flex-direction: column; align-items: flex-end}
#floating-add-menu #open-menu .btn{ margin-bottom: 15px}
#floating-add-menu.open #open-menu{ display: flex}
#floating-add-menu svg{ width: 30px; height: 30px; fill: #FFF}

.search{ background-image: url("/static/images/search.svg");
    background-position: 10px center;
    background-size: 15px; padding-left: 35px; background-repeat: no-repeat}

.ajax-add .title{ display: none}
.ajax-add #container{ padding-top: 0}
.ajax-add .search-container{ margin-top:0 }
#iframe.appointment-add{ position: absolute; top: 55px; bottom: 0;  left: 0; right: 0;}
.fixed-bottom{ position: fixed; left: 0; bottom: 0; width: 100%; display: flex}
IFRAME{ display: block}

.login{ position: absolute; left: 50%; top: 40%; transform: translateX(-50%) translateY(-50%); display: block; }
.documents-list{table-layout: fixed;}
.documents-list td{word-break: break-all;}
.documents-list td:first-of-type{ padding-left: 3px}
i.fa-trash-alt{ color: #FF0000}
.header_menu i.fa-trash-alt{ color: #FFF}

.modal{ display: flex; position: fixed; width: 100%; height: 100%; top:0 ; left: 0; background-color: rgba(255,255,255,.7); display: flex; align-items: center; justify-content: center; z-index: 100}
.modal_container{background-color: #FFF; box-shadow: 0px 0px 14px #000}
.modal_text{ padding: 30px}
.modal_buttons{ padding: 10px 30px;  background-color: #f1f1f1; display: flex; justify-content: flex-end}
#slider-header{ display: none}

.switch { position: relative; display: inline-block; vertical-align: middle; font-size: 13px; font-weight: 600;}
.slider { position: relative; width: 60px;  height: 34px; display: inline-block; vertical-align: middle; cursor: pointer;  background-color: #6edc5f;  -webkit-transition: .4s;  transition: .4s; border-radius: 34px; }
.slider:before { position: absolute;  content: "";  height: 26px;  width: 26px;  left: 4px;  bottom: 4px;  background-color: white;  -webkit-transition: .4s;  transition: .4s; border-radius: 50%; -webkit-transform: translateX(26px);  -ms-transform: translateX(26px);  transform: translateX(26px);}
.switch.closed .slider{ background-color: #ccc}
.switch.closed .slider:before { -webkit-transform: translateX(0px);  -ms-transform: translateX(0px);  transform: translateX(0px);}

.stats{ overflow:hidden; margin: 0px -15px; }
.stats .item{ width:25%; box-sizing:border-box; float:left; padding:0 15px;}
.stats .item .int{ background-color:#4fc3f7; padding: 20px 30px; color:#FFF; border-radius: 5px; position:relative; overflow:hidden}
.stats .item .int.cls2{ background-color:#33db9e}
.stats .item .int.cls3{ background-color:#f0466b}
.stats .item .int.cls4{ background-color:#ff8a65}
.stats .item .int::before {
    width: 130px;
    height: 130px;
    bottom: -50px;
}
.stats .item .int::after {
    width: 85px;
    height: 85px;
    bottom: 50px;
}
.stats .item .int::before, .stats .item .int::after {
    content: "";
    position: absolute;
    background: rgba(255,255,255,.2);
    border-radius: 50%;
    right: -50px;
}

.stats .item .item-value{ font-size:26px; font-weight:bold}
.stats .item .item-title{ font-size:24px}
.stats .item:last-child{ border:0px}

/*-----------------------------TIMESHEET--------------------------------------------------------*/
.timesheet_list td{ vertical-align: middle}
.timesheet_list .day{ font-size: 16px; font-weight: bold; text-align: center; width: 30px}
.timesheet_list .day span{ display: block; font-size: 12px; font-weight: normal}
.timesheet_list .details{ width: 100%}
.timesheet_list .total_h{ font-size: 16px; font-weight: bold; text-align: center}
.timesheet_list .row .h{ flex:  0 0 auto; width: 30px; font-weight: bold}
.timesheet_list .row{ border-bottom: 1px solid #EEE; padding: 5px; justify-content: flex-start}
.timesheet_list .row:last-of-type{ border-bottom: 0}
.timesheet_list .row .project{  font-size:14px; font-weight: 500}
.timesheet_list .row em{ font-weight: 400; display: block; font-size: 12px; color: #666}
table.admin_content.timesheet_list td{border-bottom: 1px solid #333}


@media screen and (min-width: 769px) {
    .title {
        font-size: 28px
    }
}
@media screen and (max-width: 768px) {
    body.appointment #container{padding: 44px 0 0 0}
    #header{ display:none}
    .home  #header{ display: flex}
    body.appointment #header{ display: flex}
   body.menu-open #navigation {
        left: -400px;
    }
    #container{ width: 100%; }
    body.home #container{padding: 44px 0 0 0}
    body.menu-active #navigation{
        left: 0;
    }
    body.menu-active #container, body.menu-open #container  {
        margin-left: 0;
    }
    .title {
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        margin: 0;
        padding: 10px 15px;
        box-sizing: border-box;
        background-color: #FFF;
        z-index: 10;
    }
    .title .header_menu{ margin: -10px -15px; margin-left: 0}
    .title .header_menu  .btn{
         padding: 0 10px;
         height: 100%;
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: center;
        line-height: normal;
        border-radius: 0;
        border-left: 1px solid #FFF;
        min-width: 50px;
    }
    .title .header_menu  .btn.btn-danger span, .title .header_menu  .btn.btn-info span{
        display: none;
    }
    .header_menu li{ margin-left: 0}
    .title .header_menu  .btn i{ margin-right: 0}

    #box_email{ left: -130%; top: 0; width: 100%; height: 100%; overflow: hidden;
        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; display: block;
        -moz-border-radius:  		0px /*{global-radii-buttons}*/;
        -webkit-border-radius: 		0px /*{global-radii-buttons}*/;
        border-radius: 				0px /*{global-radii-buttons}*/;
    }
    #box_email.active{ left: 0% }
    #box_email A.close { display: none}

    #iframe.appointment-add{ position: absolute; top: 51px; bottom: 0;  left: 0; right: 0;}
    .login TD{ display: block}

    #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}

    #slider-header{ display: flex}
    body.show-list-names #overlay{ display: block !important;}
    body.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: 14px; padding: 10px 20px; border-bottom: 1px solid #CCC}
    .ui-menu .ui-menu-item-wrapper.ui-state-active{ font-weight:normal}

    #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%;
    }
    BODY.show-list-names #overlay{ display: block !important;}
    BODY.show-list-names #list-employees{ display: flex}

}


@media print {
    html, body, #container{ height: unset; min-height: unset; padding: 0 !important; margin: 0 !important; background-color: #FFF !important;}
    @page {
        size: landscape;
    }
    .noprint, .filter, #header, .header_menu,#navigation,.back, .btn{ display: none !important;}
    .title{ position: relative !important}
    td{ font-size: 12px; padding: 3px !important;}
}