@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.fullscreen, HTML.fullscreen body { height: 100%; width: 100%; overflow: auto }
body {
    font-family: 'Fira Sans', 'Open Sans', sans-serif, Arial, Helvetica, sans-serif;
    font-size: 15px;
    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;
}
h2{font-weight: 400; font-size: 20px; margin-top: 0; font-family: 'Fira Sans', sans-serif, Arial, Helvetica, sans-serif; display: flex; align-items: center}
h2 SPAN{ margin-right: 10px}
table {
    width: 100%;
    background-color: #fff;
}
table.fixed-width{ table-layout:fixed}
td {
    font-family:  'Fira Sans','Open Sans', sans-serif, Arial, Helvetica, sans-serif;
    font-size: 15px;
    color: #444;
    border-bottom: 1px solid #dfdfdf;
    padding: 10px 3px;
    vertical-align: top;
    box-sizing: border-box;
}
td.number
{
    text-align: right;
    white-space: nowrap;
}
td:first-of-type{ padding-left: 15px}
td:last-of-type{ padding-right: 15px}
tr:hover {
    background-color: #ccffcc;
    cursor: pointer;
}

.info_tooltip {
    background-image: url('../images/i.svg');
    background-repeat: no-repeat;
    background-position: center center;
    background-color: #fe0000;
    color: #FFF;
    border-radius: 15px;
    display: inline-table;
    width: 22px;
    height: 22px;
    text-indent: -99999px;
    overflow: hidden;
}
/*tr:nth-child(even) {
    background-color: #fafafa;
}*/
table thead{ height: 45px}
.fixHead thead {
    position: sticky;
    top: 44px;
    z-index: 8;
}

table thead td {
    /*
    font-size: 14px;
    font-weight: bold;
    vertical-align: middle;
    background-color: #EEE;
    z-index: 10;
    color: #4b6069;
    border-top: 1px solid #dfdfdf;
    */
    font-size: 14px;
    font-weight: bold;
    vertical-align: middle;
    border-bottom: 1px solid #999;
    background-color: #FFF;
    z-index: 10;
}

table tr.total {
    font-size: 16px;
    font-weight: bold;
}


table.admin_content td.check_simb {
    font-size: 26px;
    color: green;
    text-align: center;
}
.logo {
    font-size: 30px;
    font-weight: 400;
    color: #74c318;
    padding: 10px 5px !important;
    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{ position: fixed; bottom: 0;  z-index: 9; width: 100%}
.footer .header_menu {
    background-color: #FFF;
    padding: 15px;
    margin:0 -15px;
    border-top: 1px solid #CCC;

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

form.filter td{ padding: 3px !important; border: 0}

/*------------------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%;
}
HTML.fullscreen #container{ height: 100%}
HTML.show_down_buttons #container{ padding: 60px 15px 115px 15px;}

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; font-family: 'Open Sans'}
.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;
}
#navigation LI{ list-style-type: none}
#navigation div{ padding: 0 15px; padding-top:14px;  padding-left: 20px; font-weight: 600; font-size: 16px; color: #00ad15; font-family: 'Open Sans'}
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: 15px;
    display: block;
    padding: 8px 15px;
    font-weight: 400;
    color: #000;
    position: relative;
    padding-left: 57px;
    box-sizing: border-box;
    line-height: 19px;
    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 {
    font-family: 'Open 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:disabled{ background-color: #f0f2f5}
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.error INPUT{ border: 1px solid #cd0000; background-color: rgba(255,0,0,.1)}
.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;
}
.field_box .value
{
    border: 1px solid #c2c2c2;
    padding: 12px 10px;
    border-radius: 3px;
    font-size: 16px;
    background: none;
    font-weight: normal;
    color: #000;
    color: #555;
}
#page-form LABEL {
    width: 100%;
}

.row{ display: flex; }
.row .column{ flex: 1; margin-right: 40px; box-sizing: border-box}
.row .column:last-child{ margin-right: 0}
/*------------------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);
}

.flex-labels{ display: flex; justify-content:flex-start; flex-wrap: wrap; 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: 0px;
}
.flex-labels .custom-checkbox{ flex: 1;  padding: 10px 16px; min-height: 46px  }
.flex-labels.cols3 .custom-checkbox{ width: 33%; flex: 0 0 auto}

/*------------------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}

/*------------------PAGINATION--------------------*/
.pagination { padding:5px;  font-size:0.9em; display: flex; align-items: center}
.pagination A{ padding:10px 15px; background-color: #00ad15; color: #FFF; margin-right: 10px; font-size: 16px}
.pagination A.activ{ color:#000; font-weight:bold; background-color: #ccc}
.pagination EM{ color:#BDBDBD}
.pagination A STRONG{ font-size:16px; font-weight:normal;}
.pagination INPUT{ margin-right:10px; width:60px}

/*------------------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: 14px;
    position: absolute;
    left: 9px;
    top: 40px;
    overflow: hidden;
    align-items: center;
    padding: 4px 10px;
    display: none;
}
.personal_injury{ display: none !important}
.client_link_extern span{ font-size: 20px; margin-left: 10px}
.client-box.show .client_link_extern{ display: flex;}
.client-box.show input{ padding-bottom: 45px; font-weight: 600}
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;
}
.client-box.show.view{ padding-bottom: 45px; font-weight: 600}
.timing LI.remove{ position: relative; background-color: #dee7f8; padding: 10px; cursor: pointer}
.timing LI.remove::after {
    content: 'x';
    position: absolute;
    right: 7px;
    top: 3px;

}

/*--------------------BREADCRUMB-----------------------------------*/
.cd-breadcrumb li::after, .cd-multi-steps li::after {
    display: inline-block;
    content: '\00bb';
    margin: 0 .6em;
    color: #959fa5;
}
.cd-breadcrumb LI.visited A{ background-color: #74c318; border-color: #74c318; color: #FFF}
.cd-breadcrumb LI.visited .btn{background-color: #FFF}
.cd-breadcrumb.triangle li {
    position: relative;
    padding: 0;
    margin: 4px 4px 4px 0;

    display: inline-block;
    float: left;
}

.cd-breadcrumb li > *, .cd-multi-steps li > * {
    display: inline-block;
    color: #2c3f4c;
    font-size: 17px; font-weight: bold; height: 57px; box-sizing: border-box;
}

.cd-breadcrumb.triangle li > * {
    position: relative;
    padding: 1em .8em 1em 2.5em;
    padding-left: 2.5em;
    color: #2c3f4c;
    background-color: #fff;
    border-color: #fff;
}

.cd-breadcrumb.triangle li:first-of-type > * {
    padding-left: 1.6em;
    border-radius: .25em 0 0 .25em;
}


.cd-breadcrumb.triangle li::after, .cd-breadcrumb.triangle li > ::after {
    content: '';
    position: absolute;
    top: 0;
    left: 100%;
    height: 0;
    width: 0;
    border: 28px solid transparent;
    border-right-width: 0;
    border-left-width: 20px;
}


.cd-breadcrumb.triangle li > ::after {
    z-index: 2;
    border-left-color: inherit;
}


.cd-breadcrumb.triangle li::after {
    z-index: 1;
    -webkit-transform: translateX(4px);
    -moz-transform: translateX(4px);
    -ms-transform: translateX(4px);
    -o-transform: translateX(4px);
    transform: translateX(4px);
    border-left-color: #f0f2f5;
    margin: 0;
}

.cd-breadcrumb.triangle li::after, .cd-breadcrumb.triangle li > ::after {
    border-left-style: dashed;
}

.cd-breadcrumb.triangle li::after, .cd-breadcrumb.triangle li > ::after {
    border-left-style: dashed;
}

/* -------------------------------- 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 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.3);
    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}

#rota-table-employes .table_calendar tr{ display: flex; flex-wrap: wrap}
#rota-table-employes .table_calendar td{ vertical-align: top; flex: 1; height: auto;  overflow: hidden; }
#rota-table-employes .table_calendar td .rota{position: relative; border: 1px solid #FFF; border-radius: 4px;    cursor: pointer; height: auto;    line-height: 21px;    padding: 5px;    text-align: left;    box-sizing: border-box; color: #000}

/*------------------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{ font-family: 'Fira Sans', 'Open Sans', sans-serif, Arial, Helvetica, sans-serif; font-size: 15px}
.ui-widget.ui-widget-content {

}
.ui-widget-content a{ color: #00ad15}
.ui-widget-content a.btn{ color: #FFF}
.ui-widget-content a.btn.btn-grey{ color: #000}
.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;
}
.ui-tabs.ui-widget.ui-widget-content
{
    background-color: transparent;
    border: 0;
}
.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: 8px 10px;
    font-weight: normal;
    color: #000;
}

.total .custom-combobox-input.ui-widget.ui-widget-content { padding: 3px 6px}

.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: 16px; padding: 5px 1em 5px .4em; border-bottom: 0}
.ui-menu .ui-menu-item-wrapper.ui-state-active{ font-weight:normal; background-color: #EEE}

.ui-tooltip{ max-width: 700px}
.ui-droppable-hover{ background-color: #fed635}

/*------------------QUIZ--------------------*/
#quiz H2{ margin: 0px; margin-bottom: 5px; font-weight: 600; font-size: 18px}
/*#quiz LABEL{ display: block; margin-bottom: 2px; position: relative; padding: 8px 10px 8px  27px; background-color: rgba(0,173,21,.1); font-size: 15px; font-weight: bold}
#quiz LABEL INPUT{ position: absolute; left: 0px; top: 8px; }*/
#quiz .btn{ margin-top: 20px; width: 100%}
#quiz .question {margin: 0px 5px 10px 5px; 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);}
#quiz input[type=text], #quiz textarea{ display:block; width: 100%}
#quiz .listview.outset, #quiz .field_box.outset{ margin-right: -10px; margin-left: -10px}

/*----------------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: #00ad15;
}
.col-flex i.fa-trash-alt {
    color: #ff0000;
}

.col-flex a {
    text-decoration: none;
}
.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: 70px;
    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}
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}
.rota_daily thead td{ background-color: #EEE !important; padding: 3px}

.rota_daily .columns_table{ width: 100px}
.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.conflict{ background-color: rgba(255,255,102,1)}
.rota.surgery{ background-color: #6cd5cb}
.rota.auxiliary_lists{ background-color: #FBE1E3}
.rota.pending{ background-color: #FF6600}
.rota.emergency{ background-color: #ff9cbb}
#rota-table-employes .table_calendar td .rota.not_my{ background-color: #d485ea
}

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

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

/*-----------------------------BEDS daily--------------------------------------------------------*/
.beds_daily tr{ display: flex; flex-wrap: nowrap}
.beds_daily td{ flex: 0 0 auto; width: 70px; position: relative; border-left: 1px solid #DFDFDF; height: 60px}
.beds_daily .rota{ height: 60px}
.beds_daily .rota-int{ padding-left: 3px}

/*-----------------------------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: fixed; top: 55px; bottom: 0;  left: 0; right: 0; z-index: 10}
.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);}
/* -------------------------------- 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;}

/* -------------------------------- PROFILE -----------------------------------*/
.client-profile{}
.client-profile .name{ font-size: 20px; font-weight: 600; display: block; margin-bottom: 5px  }
.client-profile .list-subsection{ display: flex; flex-direction: row; margin: 0; padding: 0}
.client-profile .list-subsection LI{ list-style-type: none;  padding: 0; margin:0 ; margin-right: 40px; display: flex ;align-items: center}
.client-profile .list-subsection span{ margin-right: 5px}
.client-profile  .metakey{ display: block; color: #888; font-weight: 400; font-family: 'Fira Sans', 'Open Sans', sans-serif, Arial, Helvetica, sans-serif; font-size: 15px}
.client-profile  .metavalue{ display: block; font-size: 15px; font-weight: 600}

/* -------------------------------- STATS -----------------------------------*/
.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}

.welcome{ color: #CD0000}

@media screen and (min-width: 769px) {
    /* Works on Firefox */
    * {
        scrollbar-width: thin;
        scrollbar-color: #000 #EEE;
    }

    /* Works on Chrome, Edge, and Safari */
    *::-webkit-scrollbar {
        width: 15px;
    }

    *::-webkit-scrollbar-track {
        background: #EEE;
    }

    *::-webkit-scrollbar-thumb {
        background-color:#EEE;
        border-radius: 20px;
        border: 3px solid #888;
    }

    .title {
        font-size: 28px
    }

    .client-box.show .material-symbols-outlined.personal_injury
    {
        display: block !important;
        position: absolute;
        left: 1px;
        top: 11px;
        font-size: 65px;
        color: #00000061;
        font-weight: 200;
    }
    .client-box.show input{ padding-left: 64px}
    .client-box.show .client_link_extern{ left: 66px}

    .client-box.show.view{ padding-left: 64px}


    #box_email.medium{ width: 90%; height: 90%; left: 5%; top: 5%; overflow: unset; box-shadow: 0px 0px 14px #000}
    #box_email.medium   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% ;

    }
}
@media screen and (max-width: 768px) {
    HTML, BODY{ width: 100%; }
    HTML,BODY{overflow: auto}
    #header{ display:none}
    HTML.fullscreen  #header,  HTML.show-header  #header{ display: flex}
   body.menu-open #navigation {
        left: -400px;
    }
    #container{ width: 100%; }
    HTML.fullscreen #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: fixed; 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}
    .row{ flex-wrap: wrap}
    .row .column{ flex:  0 0 auto; width: 100% !important; }


    .col-flex.group{ flex-direction: column; align-items: flex-start}
    .col-flex .label-name{ flex: 1}
    .col-flex.icn{ width: 50px;}
    .col-flex.action{ width: 50px; flex-direction: column}
    .col-flex.action A{ display: flex; width: 50px; height: 40px;  align-items: center; justify-content: center}
    .col-flex.action A i{ font-size: 17px}

    .footer{ display: none}

    .stats{margin: 0}
    .stats .item{ width: 100%; margin-bottom: 20px}

    .row-pad-15 .column{  padding: 0 15px}

    .welcome{ display: none}
}


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