/* GLOBAL - SCROLLBARS */
/* Let's get this party started */
::-webkit-scrollbar {
    width:10px;
    height:10px;
}
/*:hover::-webkit-scrollbar {
    width:10px;
    height:10px;
}*/
 
    /* Track */
::-webkit-scrollbar-track {
    -webkit-box-shadow:inset 0 0 6px rgba(255, 255, 255, .4); 
    -webkit-border-radius:10px;
    border-radius:5px;
}
 
    /* Handle */
::-webkit-scrollbar-thumb {
    -webkit-border-radius:10px;
    border:1px solid #bbb;
    border-radius:5px;
    background:#ccc; 
    -webkit-box-shadow:inset 0 0 6px #c0c0c0; 
}
::-webkit-scrollbar-thumb:window-inactive {
	background:#c0c0c0; 
}

/* GLOBAL - COLORS */
.text-gray-700 {
    color:#5c6873 !important;
}

.bg-gray-0 {
    background-color:#83878a !important;
}
.bg-gray-1 {
    background-color:#5c6873 !important;
}
.bg-gray-2 {
    background-color:#4c4d4e !important;
}
.bg-gray-3 {
    background-color:#333334 !important;
}

.bg-red-0 {
    background-color:#f74c4b !important;
}

.bg-yellow-0 {
    background-color:#ffbf00 !important;
}
.bg-yellow-1 {
    background-color:#c39711 !important;
}
.bg-yellow-2 {
    background-color:#ffd861 !important;
}

.bg-blue-0 {
    background-color:#1b91bb !important;
}
.bg-blue-1 {
    background-color:#0f7498 !important;
}
.bg-blue-2 {
    background-color:#96c2d2 !important;
}
.bg-blue-3 {
    background-color:#2a505f !important;
}
.bg-blue-4 {
    background-color:#105d79 !important;
}
.bg-blue-5 {
    background-color:#8098a0 !important;
}

.bg-green-0 {
    background-color:#2dd868 !important;
}
.bg-green-1 {
    background-color:#1c8a42 !important;
}

/* GLOBAL - DATE PICKER - for the browsers that don't have date-time picker */
.ui-datepicker {
    z-index:999999 !important;
}

/* GLOBAL - INPUT DATES */
input[type="date"] {
    min-width:150px;
}
input[type="datetime"], input[type="datetime-local"] {
    min-width:200px;
}

/* GLOBAL - MESSAGES */
.module_messages {
    padding-top:20vh;
    position:fixed;
    left:0;
    top:0;
    right:0;
    bottom:0;
    background:#eee;
    background:rgba(0, 0, 0, .3);
    z-index:9999;
}
.module_messages .module_message {
    width:500px;
    max-width:90vw;
    margin:0 auto;
    padding:0;
    border:0;
    background:none;
}
.module_messages .module_message:only-child {
    margin-top:20%;
    margin-top:calc(30vh - 100px);
}
.module_messages .module_ok_message + .module_error_message {
    margin:40px auto 0;
}
.module_messages .module_message .module_message_header {
    margin:0;
    padding:10px 15px;
    text-align:left;
    border:0;
    border-top-left-radius:5px;
    border-top-right-radius:5px;
}
.module_messages .module_ok_message .module_message_header {
    background:green;
}
.module_messages .module_error_message .module_message_header {
    background:red;
}
.module_messages .module_message .module_message_header label {
    margin:0;
    padding:0;
    color:#fff;
    text-transform:capitalize;
    font-weight:500;
    font-size:120%;
    cursor:default;
}
.module_messages .module_message .module_message_header .close {
    margin:5px 0 0;
    padding:0;
    color:#333;
    background:none;
    text-indent:initial;
    font-size:120%;
    font-weight:bold;
    float:right;
    opacity:.6;
    
    display:block;
    width:20px;
    height:20px;
    cursor:pointer;
}
.module_messages .module_message .module_message_header .close:after {
    content:"X";
}
.module_messages .module_message .module_message_body {
    margin:0;
    padding:20px 15px;
    text-align:center;
    font-weight:300;
    color:#555;
    background:#fff;
    border:0;
    border-bottom-left-radius:5px;
    border-bottom-right-radius:5px;
}

/* ALERT STATUS MESSAGE */
.alert.status-message {
    margin:0;
    position:fixed;
    bottom:0px;
    left:0px;
    right:0px;
    z-index:9999;
    display: none;
}

/* GLOBAL - MODAL */
/* 
 * iframe in bootstrap modal cannot scroll in IOS. Iframes cannot scroll in IOS. 
 * Parece que o ios faz o parse das iframes como um div mas sem scroll. 
 * No entanto as iframes não ficam com o height correcto do seu Body, nao mostrando correctamente todo o seu conteudo ou aparecendo cortado. 
 * Então é necessário encapsular as iframes num div com overflow:scroll e dar o height correcto de acordo com o seu conteudo.
 * De acordo com os testes que foram feitos, atribuindo 100vh and height das iframes dentro de um popup, elas ficam com o height correcto e todo o conteudo é mostrado.
*/
    .touch .modal .modal-window-size .modal-body { 
        -webkit-overflow-scrolling: touch;
        overflow-y:auto;
    }
    .touch .modal .modal-window-size .modal-body iframe {
        height:100vh !important; /* Nao percebo porque é que isto funciona, mas funciona! A iframe no IOS fica com o height total do seu conteudo. */
    }
/* -- */

.modal-window-size {
    max-width:calc(100% - 0.5rem);
    height:calc(100% - 0.8rem);
}
@media (min-width: 576px) {
    .modal-window-size {
        max-width:calc(100% - 3.5rem);
        height:calc(100% - 3.5rem);
    }
}
.modal-window-size .modal-content {
    height:100%;
}

/* GLOBAL - TEMPLATE */
.app-header .nav.navbar-nav .nav-item .dropdown-menu {
    border-radius: 0 0 0.25rem 0.25rem;
    border-top: 0;
    margin-top: .6rem;
}

.main .container-fluid .nav-tabs {
    overflow-x: auto;
    overflow-y: hidden;
    display: -webkit-box;  
    display: -moz-box;   
}
/*.main .container-fluid .nav-tabs > li {
    float:none;
}*/

.app .app-header .navbar-toggler.aside-menu-toggler .icon-bell {
    color:#666;
}
.app .app-header .navbar-toggler.aside-menu-toggler .badge {
    margin:-5px 0 0 -12px;
    position:absolute;
    font-size: .65rem
}

.app-header .nav-item .nav-link > .username, .app-header .nav-item .avatar.nav-link > .username {
    width: 80px;
    display: inline-block;
    text-align: right;
}

@media (max-width: 330px) {
    .app .app-footer {
        display:block;
        text-align:center;
    }
}

@media (max-width: 440px) {
    .app-header .nav-item .nav-link > .username, .app-header .nav-item .avatar.nav-link > .username {
        display:none;
    }
}

/* TOOLTIP */
.tooltip {
    min-width:200px;
    max-width:100vw;
}
/* otherwise the tooltip text appears blury */
.tooltip.calendar-event-tooltip.show {
    font-size: .875rem;
    -webkit-filter: blur(0.00000000000000001px); 
}
.tooltip.calendar-event-tooltip .tooltip-inner {
    max-width:350px;
}

/* CURSOR */
.cursor-pointer {
    cursor:pointer;
}

/* CALENDAR-CONTAINER */
.calendar-container {
    overflow-x:auto;
}
.calendar-container > .col-12 > .card {
    min-width:250px;
}
.calendar-container .card .card-header strong {
    cursor:pointer;
}

@media (max-width: 500px) {
    .calendar-container .calendar {
        overflow:hidden;
    }
    .calendar-container .calendar > .fc-view-container {
        overflow-x:auto;
    }
    .calendar-container .calendar > .fc-view-container > .fc-view {
        min-width:500px;
    }
}

@media (max-width: 359px) {
    .calendar-container .card .card-header {
        text-align:center !important;
    }
    .calendar-container .card .card-header strong {
        float:none !important;
    }
}

.calendar-container .script-warning {
    margin:0;
    position:fixed;
    bottom:0px;
    left:0px;
    right:0px;
    z-index:9999;
    display: none;
}
.calendar-container .loading {
    display: none;
    position: absolute;
    top: 10px;
    left: 48%;
    background: white;
}

.calendar-container .calendar {
    min-width:100px;
    margin: 0 auto;
}

.calendar-container .calendar .fc-resourceTimelineMonth-view .fc-timeline-event {
    overflow:hidden;
}
.calendar-container .calendar .fc-resourceTimelineMonth-view .fc-timeline-event .fc-content .fc-title {
    position:relative !important;
}

.calendar-container .calendar .fc-resourceTimeGridDay-view .fc-time-grid-event.fc-short .fc-time:before {
    content: attr(data-full);
}
.calendar-container .calendar .fc-resourceTimeGridDay-view .fc-time-grid-event.fc-short .fc-time:after {
    content: "\000A0:\000A0";
}

.calendar-container .calendar .fc-button-primary:not(:disabled):active:focus, 
  .calendar-container .calendar .fc-button-primary:not(:disabled).fc-button-active:focus,
  .calendar-container .calendar .fc-button-primary:focus {
    -webkit-box-shadow:none;
    box-shadow:none;
}
.calendar-container .calendar .fc-scroller.fc-day-grid-container:hover::-webkit-scrollbar,
  .calendar-container .calendar .fc-scroller.fc-time-grid-container:hover::-webkit-scrollbar,
  .calendar-container .calendar .fc-scroller.fc-time-grid:hover::-webkit-scrollbar {
    width:5px;
}
.calendar-container .calendar .fc-toolbar.fc-header-toolbar .fc-center > h2 {
    margin:0 5px 5px;
    font-size:120%;
    text-align:center;
}
.calendar-container .calendar .fc-toolbar.fc-header-toolbar .fc-right > .fc-button {
    margin:0 5px 5px;
}
.calendar-container .calendar .fc-toolbar.fc-footer-toolbar .fc-left > .fc-button-group {
    margin:0 5px 5px;
}
.calendar-container .calendar .fc-toolbar.fc-footer-toolbar .fc-right {
    text-align:center;
}
.calendar-container .calendar .fc-toolbar.fc-footer-toolbar .fc-right > .fc-button,
  .calendar-container .calendar .fc-toolbar.fc-footer-toolbar .fc-right > .fc-button-group {
    margin:0 5px 5px;
}
@media (max-width: 359px) {
    .calendar-container .calendar .fc-toolbar.fc-header-toolbar {
        display:block;
        text-align:center;
    }
}
@media (max-width: 500px) {
    .calendar-container .calendar .fc-toolbar.fc-footer-toolbar {
        display:block;
        text-align:center;
    }
}
@media (max-width: 330px) {
    .calendar-container .calendar .fc-toolbar.fc-footer-toolbar .fc-button-group {
        display:block;
    }
}

/* TABLE */
.table > tbody > tr > td {
     vertical-align: middle;
}

/* ALL-NOTES */
.panel-full-screen {
    margin: 0 !important;
    padding: 0 !important;
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    z-index: 9999;
    background:white;
}
.panel-full-screen > .editor {
    height:100%;
    margin:0;
}
.panel-full-screen > .editor > i { /* for the private/doctor_department/appointment_details */
    margin-top:10px;
    margin-left:20px;
}
.panel-full-screen > .editor > label { /* for the private/doctor_department/appointment_details */
    margin-top:10px;
}
.panel-full-screen > .editor > .all-notes {
    height:100%;
}

.all-notes {
    height:200px;
    max-height:90vh;
    max-height:calc(100vh - 40px);
    overflow:scroll;
}
.all-notes.all-treatments-notes {
    height:300px;
}
.all-notes > ul {
    min-height:200px;   
}
.all-notes.all-treatments-notes > ul {
    min-height:300px;   
}
.all-notes .notes-title,
 .all-notes .appointment-sessions-count {
    font-size:80%;
}
.all-notes .notes-text {
    min-height:24px;
}
.all-notes .notes-text.inline-editor {
    min-height:200px;
    background-image: 
        -webkit-linear-gradient(right, rgba(247,247,247,1) 0%, rgba(247,247,247,1) 50%, rgba(247,247,247,0) 51%,rgba(247,247,247,0) 100%),
        -webkit-linear-gradient(bottom, rgba(128,128,128,1) 0%, rgba(128,128,128,0) 8%, rgba(128,128,128,0) 100%);
    background-image: 
        -moz-linear-gradient(right, rgba(247,247,247,1) 0%, rgba(247,247,247,1) 50%, rgba(247,247,247,0) 51%,rgba(247,247,247,0) 100%),
        -moz-linear-gradient(bottom, rgba(128,128,128,1) 0%, rgba(128,128,128,0) 8%, rgba(128,128,128,0) 100%);
    background-image: 
        -ms-linear-gradient(right, rgba(247,247,247,1) 0%, rgba(247,247,247,1) 50%, rgba(247,247,247,0) 51%,rgba(247,247,247,0) 100%),
        -ms-linear-gradient(bottom, rgba(128,128,128,1) 0%, rgba(128,128,128,0) 8%, rgba(128,128,128,0) 100%);
    background-image: 
        -o-linear-gradient(right, rgba(247,247,247,1) 0%, rgba(247,247,247,1) 50%, rgba(247,247,247,0) 51%,rgba(247,247,247,0) 100%),
        -o-linear-gradient(bottom, rgba(128,128,128,1) 0%, rgba(128,128,128,0) 8%, rgba(128,128,128,0) 100%);
    background-image: 
        linear-gradient(right, rgba(247,247,247,1) 0%, rgba(247,247,247,1) 50%, rgba(247,247,247,0) 51%,rgba(247,247,247,0) 100%),
        linear-gradient(bottom, rgba(128,128,128,1) 0%, rgba(128,128,128,0) 8%, rgba(128,128,128,0) 100%);
}
.all-notes.all-treatments-notes .notes-text.inline-editor {
    min-height:180px;
}
.all-notes .notes-text.inline-editor.mce-edit-focus {
    outline:1px dotted #ddd;
}
.all-notes .notes-text {
    line-height: 24px;
    background-image: 
        -webkit-linear-gradient(right, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,0) 51%,rgba(255,255,255,0) 100%),
        -webkit-linear-gradient(bottom, rgba(128,128,128,1) 0%, rgba(128,128,128,0) 8%, rgba(128,128,128,0) 100%);
    background-image: 
        -moz-linear-gradient(right, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,0) 51%,rgba(255,255,255,0) 100%),
        -moz-linear-gradient(bottom, rgba(128,128,128,1) 0%, rgba(128,128,128,0) 8%, rgba(128,128,128,0) 100%);
    background-image: 
        -ms-linear-gradient(right, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,0) 51%,rgba(255,255,255,0) 100%),
        -ms-linear-gradient(bottom, rgba(128,128,128,1) 0%, rgba(128,128,128,0) 8%, rgba(128,128,128,0) 100%);
    background-image: 
        -o-linear-gradient(right, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,0) 51%,rgba(255,255,255,0) 100%),
        -o-linear-gradient(bottom, rgba(128,128,128,1) 0%, rgba(128,128,128,0) 8%, rgba(128,128,128,0) 100%);
    background-image: 
        linear-gradient(right, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,0) 51%,rgba(255,255,255,0) 100%),
        linear-gradient(bottom, rgba(128,128,128,1) 0%, rgba(128,128,128,0) 8%, rgba(128,128,128,0) 100%);
    
    -webkit-background-size: 2px 24px;
    -moz-background-size: 2px 24px;
    -ms-background-size: 2px 24px;
    -o-background-size: 2px 24px;
    background-size: 2px 24px;
}
.all-notes .notes-text p {
    margin:0;
}
.all-notes .notes-scroll-up,
  .all-notes .notes-scroll-down {
    height:40px;
}
.all-notes > ul > li:first-child {
    margin-top:0 !important;
}
.all-notes .appointment-treatments .sessions .form-control {
    min-width:70px;
}
.all-notes .appointment-treatments .custom-combobox-select .custom-combobox-input {
    color:#2f353a;
}