/* 
    Document   : style
    Created on : 29-Oct-2013, 11:01:32
    Author     : Emm
    Description: Purpose of the stylesheet follows.
*/

root {
    display: block;
}

.ui-widget, .ui-widget .ui-widget {
    font-size: 1em;
}
.ui-icon { margin-top: 3px;}

button span.ui-icon{
    display: inline-block;
}

.alert{
    white-space: pre;
    max-height: 300px !important;
}

html {
    box-sizing: border-box;
}

*, *::before, *::after {
    box-sizing: inherit;
}

body{
    margin:0;
    line-height: 30px;
    font-size: 16px;
    background-color: #F7FAFA;
    color: #252525;
    font-family: Arial, sans-serif;
    /*    min-width: 640px;*/
}

.container.swap-container{
    margin-top: 30px;
}

.container.blank{
    margin: 0px !important;
    padding: 0px !important;
}

table{
    font-size: 16px;
    /*font-family: Arial, sans-serif;*/
}

h1, h2, h3, h4, h5, h6{
    font-family: Arial, sans-serif;
    font-weight: normal;
}

h3{
    font-size: 19px;
}

#content-container{
    padding-top: 5px;
}

#contentdiv{
    padding-top: 60px;
    /*width: 80%;
    max-width: 900px;*/
    margin: auto;
}

@media screen and (max-width: 1000px){
    #contentdiv{
        /*width: 90%;*/
    }
}

#fat_content{
    padding-top: 20px;
}

.page-heading{
    font-size: 25px;
    font-weight: bold;
    color: #7fb545;
    width: 200px;
    margin-bottom: 10px;
    margin-top: 10px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.table-menu{
    border: 1px solid #73b8d7;
    padding: 5px;
    margin-top: 5px;
    margin-bottom: 5px;
}

.ui-datatable-data td{
    text-align: center;
}

.panelgrid{
    border-spacing: 4px;
}

.panelgrid td{
    padding: 5px;
}

.hidden{
    display: none !important;
    visibility: hidden; /*For some ie versions*/
}

.ui-menuitem-text{
    font-weight: bold;
}

.ui-menu, .ui-menubar, .menuBar{
    border-radius: 0px;
    border-right-width: 0px;
    border-left-width: 0px;
}

.ui-commandlink, .ui-datatable a{
    color: #045491;
    font-weight : bold;
    text-decoration: none;
}

#sidepane.ui-layout-north{
    height: 100px;
}

#menubar{
    width: 100%;
    margin: 0;
    height: 32px;
    border-bottom: solid 1px grey;
}

span#logotext{
    list-style-type:none;
    margin:0;
    padding:0;
}

#menu li{
    float: left;
    padding: 4px;    
}

#menu li a, .header-link{
    text-decoration: none;
    font-weight: bold;
    color:white;
}

#menu li a:hover{
    color: black;
}

#menubar{
    border:none;
}

.action-link{
    text-decoration: none;
    font-weight: bold;
    color: #0078ae
}

.action-link:hover{
    color: #df2227;
}

#patient_list_list{
    width: 300px;
    margin: auto;
}

#login-container {
    width: 100%;
    padding-top: 20px;
}

#login-box{
    width: 400px;
    margin:auto;
}

#item-table .ui-button-text{
    padding: 0px;
    font-weight: bold;
}

#item-table .ui-button{
    width: 30px;
    height: 30px;
}

#item-table .ui-button.ui-state-hover{
    border-color: black;
}

#item-table .ui-button.ui-state-active{
    border-color: black;
}

#item-table .ui-button.ui-state-focus{
    border-color: black;
}

#item-table td.actions{
    text-align: center;
}

#item-table td.item_type{
    text-transform: capitalize;
}

.spinner{
    height: 30px;
}

.two-col-form-table button{
    width: 45%;
    margin: auto;
}

.panel{
    margin: 10px 0px;
}

.small-input{
    width: 100px;
}

.medium-input{
    width: 150px;
}

.large-input{
    width: 250px;
}

.pui-splitbutton{
    display: inline;
}

#document-menu-space{
    width: 100%;
    border: solid 1px lightgray;
    padding: 2px;
    margin-bottom: 5px;
}

.document-icon{
    font-size: 15px;
    margin: 10px;
    padding:5px;
    text-decoration:none;
    display: inline-block;
}

.document-thumbnail{
    display: inline-block;
    width: 60px;
    border: solid grey 1px;
    height: 80px;
}

.document-info{
    display: inline-block;
    width: 200px;
    font-size: 12px;
    padding-left: 5px;
}

.document-icon:hover {
    background-color:        #8bb3d4;
}

.document-info .document-name{
    font-size: 14px;
}

.dual-form input:disabled{
    background: white;
    border: solid 1px lightgray;
    color: black;
}

.dual-form select:disabled{
    background: white;
    border: solid 1px lightgray;
    color: black;
}

.dual-form textarea:disabled{
    background: white;
    border: solid 1px lightgray;
    color: black;
}

.image-document{
    border: solid 1px;
    margin: 10px;
    width: 97%;
}

.small-thumbnail{
    border: solid 1px;
    width: 60px;
    margin: 3px;
}

.selected{
    border-color: red;
}

.medium-image{
    border: solid 1px;
    width: 300px;
}

.document-div{
    width: 97%;
    border: solid 1px lightgray;
    border-radius: 4px;
    padding: 0.5%;
    margin: 1% auto;
    padding-bottom: 23px;
    background-color: white;
    position: relative;
    overflow-x: auto;
}


/*Not making 'input' generic because, then, it would cover input[type='button'];
we don't want it to.
Not using 'cursive' as final font type people default cursive on some 
devices (ipad 5 and some android versions) are illegible (too italic).*/
.document-div,
.document-div input[type='text'],
.document-div input[type='number']{
    /*    Not using 'cursive' as final font type people default cursive on some 
        devices (ipad 5 and some android versions) are illegible (too italic).*/
    font-family: "Comic Sans MS", "Monotype Corsiva", "URW Chancery L", sans-serif;
}

.document-bundle.folder-doc{
    padding-top: 0px;
    margin-top: 0px;
}

.default-document-footer{
    position: absolute;
    bottom: 0px;
    left: 0px;
    right: 0px;
    display: inline-block;
    height: 18px;
    max-height: 18px;
    line-height: 18px;
    overflow: hidden;
    margin: 0px;
    padding: 0px 3px 1px 0px;
    font-size: 0.8em;
    text-align: right;
    opacity: .8;
}

.default-document-footer:hover{
    opacity: 1;
}

.document-bundle.document-div{
    background-color: inherit;
}

.document-edit-button{
    float: right;
}

.form-layout-container{
    clear: both;
    margin-top: 15px;
}

.form-layout-table{
    width: 100%;
    /*border: solid 1px lightgrey;*/    
}

.form-table{
    border-collapse: collapse;
    text-align: center;
}

.form-table thead tr{
    background-color: lightgrey;
    font-weight: bold;
}

.form-table td{
    padding: 5px 5px;
}

.form-table-div{
    padding-top: 10px;
    padding-bottom: 10px;
}

.add-row-button{
    margin-top: 2px;
    margin-bottom: 2px;
}

.table-input-row{
    height: 36px;
}

.table-input-row.even{
    background-color: #E2E4FF;
}

.input-table{
    width: 100%;
}

.template-link{
    line-height: 30px !important;
}

.css_right {float:right}

#menu{
    display: block;
    margin: 0px;
    height: 100%;
    float: left;
    padding: 0px;
}

#menu li{
    display: inline-block;
    margin: 0px;
    height: 100%;
    padding: 0px;
}

#menu li a{
    display: inline-block;
    padding-left: 12px;
    padding-right: 12px;
    padding-top: 4px;
    height: 100%;
}

.ui-button.command-link{
    height: 36px;
    width: 36px;
}

.ui-button.command-link .ui-button-icon-primary{
    margin-left: 3px;
}

.DataTables_sort_wrapper{
    cursor: pointer;
    font-weight: 500;
}

.clickable, .edit-button, .cancel-button, .click-table tr{
    cursor: pointer;
}

.done-button{
    background-color: black;
}

.clickable:hover, .clickable td:hover, .edit-button:hover, .cancel-button:hover{
    background-color: lightgrey !important; 
}

.click-table tr:hover{
    background-color: lightgrey !important; 
}

#logout button{
    height: 100%;
    border-radius: 0px;
    margin-right: 0px;
    margin-left: 5px;
}

.ui-layout-pane{
    background: inherit;
    padding: 0px !important;
    margin: 0px !important;
    border: none !important;
}

.visit-link{
    display: block;
    padding: 15px;
    height: 15px;
    background-color: #c0dbf1;
    border-width: 1px 0px;
    border-style: solid;
    border-color: #00e8f4;
    text-decoration: none;
}

.visit-link:hover{
    background-color: #8bb3d4;
    text-decoration: none;
}

.services-container{
    clear: both;
}

.services-container .head div,
.services-container .body div,
.service-row div{
    display: inline-block;
}

.services-container div.service-row-container{
    /*height: 26px;*/
    margin: 4px 0px;
}

.services-container div.service-row-container,
.services-container div.service-row,
.services-container div.service-request-row,
.doc-visit_folder div.service-row-container,
.doc-visit_folder div.service-row,
.doc-visit_folder div.service-request-row{
    display: block;
    clear: both;
}

.services-container .service-controls-container,
.doc-visit_folder .service-controls-container{
    float: right;
    text-align: right;
}

.service-request-row,
.service-controls-container,
.service-type-payment{
    height: 100%;
}

.services-container .service-name,
.doc-visit_folder .service-name{
    vertical-align: top;
}

.services-container .bill-action,
.doc-visit_folder .bill-action{
    display: inline-block;
    width: 30px;
    text-align: center;
    font-size: 20px;
}

.service-row.cancelled *{
    text-decoration: line-through;
    opacity: 0.9;
}

.service-row .quantity{
    white-space: pre;
    font-style: italic
}

.payment-row{
    font-weight: bold;
}

.payment-row .service-type{
    color: #26BDA9;
}

.services-container .service,
.doc-visit_folder .service{
    width: 50%;
}

.services-container .cost,
.services-container .service-date,
.services-container .note,
.doc-visit_folder .cost,
.doc-visit_folder .service-date,
.doc-visit_folder .note{
    width: 10%;
    min-width: 50px;
}

.services-container .quantity,
.doc-visit_folder .quantity{
    width: 5%;
    min-width: 80px;
}

.service-row-container .check{
    width: 2%;
    margin-right: 8px;
    display: inline-block;
}

.services-table, .print-table{
    border-collapse: collapse;
    width: 100%;
}

.services-table thead tr{
    background-color: lightgrey;
}

.services-table thead tr, .print-table thead tr{
    font-weight: bold;    
}

.services-table td, .print-table td{
    text-align: center;
    padding: 6px 0px;
}

.services-table thead tr{
    background-color: grey;
    color: white;
}

.services-table tr.even{
    background-color: white;
}

.services-table tr.odd{
    background-color: #E2E4FF;
}

.services-table .quantity{
    width: 20%;
}

.services-table .cost{
    width: 20%;
}

#billing-div-header{
    margin: auto;
    clear: both;
    position: sticky;
    top: 2px;
    z-index: 3;
    opacity: 0.9;
}

#billing-div-header table {
    border: solid 2px #e7efef;
    color: white;
    border-collapse: collapse;
    margin-bottom: 20px;
}

#billing-div-header table tr{
    height: 35px;
}

#billing-div-header table .cell-right{
    border-right: solid 1px white;
}

#billing-div-header table tr{
    border: solid 1px white;
}

#billing-div-header .act-bal.negative-balance{
    color: red;
}

#menubox{
    margin: 15px 0px;
    padding: 20px 0px;
    width: 80%;
}

#bill-total{
    font-size: 25px;
    float: right;
}

.faded{
    opacity: 0.2;
}

.faded-service{
    cursor: not-allowed;
}

.blocked{
    position: relative;
}

.node-block{
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    background-color: rgba(230, 230, 230, 0.5);
}

.selected{
    background-color: skyblue;
}

.subform-header,
.embed-header{
    padding: 3px 0px 3px 40px;
    background-color: #e3e2e2;
    border: solid 1px #e3e2e2;
    margin: 3px 0px;    
}

.subform-title,
.embed-title{
    font-weight: bold;
    color: #045491;
}

.subform-header:hover
.embed-header:hover{
    color: grey !important;
}

.subform-header:active,
.subform-header:active td{
    background-color: white !important;
    border: solid 1px grey;
}

.subform-header .ui-multiselect{
    background-color: #26BDA9 !important;
    color: white;
}

.subform-menu{
    float: right;
    display: inline-block;
    margin-top: -3px;
}

.subform-body > .collapsed{
    display: none !important;
}

/*Remove this if we're no longer using jqx menu'*/
.jqx-menu-item a:link{
    display: block;
}

.required-star{
    color: red;
}

button,
input[type='submit'],
input[type='reset']{
    padding: 4px 15px;
    color: white;
    background-color: rgba(128, 128, 128, 0.6);
    border: solid grey 1px;
}
button:hover,
input[type='submit']:hover{
    background-color: rgb(128, 128, 128);
    color: #fff;
}

button:disabled{
    background-color: #a5bbd6;
}

button:disabled:hover{
    background-color: #a5bbd6;
}

.save-btn,
input[type='submit'].save-btn{
    background-color: #26BDA9;
}

.cancel-btn{
    margin-left: 20px;
    background-color: #e74c3c;
}

.info-block{
    margin-bottom: 10px;
    clear: both;
}

.jsonform-label, .form-label{
    display: inline-block;
    text-align: right;
    padding-right: 1%;
    vertical-align: top;
}

.jsonform-label{
    width: 30%;
    margin-right: 5%;
}

.jsonform-label-info{
    font-size: 0.8em;
}

.jsonform-label.jsonform-label-empty{
    display: none;
}

.control-container{
    display: inline-block;
    vertical-align: middle;
    width: 60%;
    padding-left: 1%;
    padding-right: 1%;
}

.control-container.wide{
    width: 100%;
    padding-left: 1%;
    padding-right: 1%;
}

.ui-layout-north { 
    z-index: 3 !important;
    overflow: visible !important;
}

.form-container{
    padding-top: 20px;
}

.document-title-div{
    padding-left: 5px;
    margin-bottom: 5px;
    clear: both;
}

.document-title{
    font-weight: bold; 
}

.bill-total-row{
    /* font-weight: bold; */
    /* font-size: 1.2em; */
}

.fin-positive{
    color: green;
}

.fin-negative{
    color: red;
}

.block-menu a{
    text-decoration: none;
    font-weight: bold;
    padding: 2px 10px;
}

.block-menu a:hover{
    color: black;    
}

.add-bill-item-btn{
    margin: 5px 0px;
}

.restricted{
    cursor: not-allowed;
}

a.restricted,
.block-menu a.restricted,
.block-menu a.restricted:hover{
    color: rgb(181, 181, 181);
}

#payment-comp-table tr{
    /* height: 35px;**/
}

.visit-bill-header{
    background: #00e8f4;
    width: 280px;
    overflow: visible;
    padding-left: 15px;
}

.visit-bill-comp{
    margin: 20px 0px;
}

#settle-bills-header-table{
    width: 100%;
    font-size: 1.2em;
}

.cell-left{
    text-align: right;
    padding-right: 10px;
}

.cell-right{
    text-align: left;
    padding-left: 10px;
}

.visit-summary-page{
    width: 620px;
    font-family: monospace;
    font-size: 10px;
    margin: auto;
    position: relative;
}

.visit-summary-page .block{
    position: relative;
    page-break-inside: avoid;
    page-break-before: avoid;
}

.visit-summary-page table{
    width: 100%;
    border-collapse: collapse;
}

.visit-summary-page table td{
    padding-left: 2px;
    line-height: 16px;
    font-size: 12px;
}

.visit-summary-page table thead{
    background-color: lightgrey;
}

.visit-summary-page table td{
    border: solid 1px skyblue;
    width: 100px;
}

.visit-summary-page div.section-title{
    font-size: 13px;
    font-family: initial;
    /*margin: 8px 0px 2px;*/
    font-weight: bold;
    line-height: 24px;
}

.visit-summary-page .provider-name,
.visit-summary-page .tariff-name,
.visit-summary-page .patient-name{
    font-weight: bold;
    font-size: 14px;
}

.normal-width-page{
    max-width: 950px;
    margin: auto;
}

a.user-in-office{
    color: #10F410 !important;
}

a.user-outside-office{
    color: grey !important;
    font-style: italic;
}

.office-queue{
    width: 500px;
    height: 400px;
}

.queue-item-row{
    height: 30px;
    font-size: 16px;
}

.queue-item-row td{
    padding: 5px 15px;    
}

.command-link, .command-link:visited, .command-link:link{
    text-decoration: none;
    color: #0078ae ;
}

.ui-autocomplete.ui-menu{
    border: solid 1px;
}

.ui-effects-transfer { 
    border: 2px dotted gray; 
}

.folder-header .folder-image{
    float: right;
    width: 47px;
    height: 47px;
    margin-top : -5px;
    margin-right : -20px;
    background: url("/resources/images/dark_blue_closed_folder.png");
    background-size: 47px 47px;
    display: block;
}

.folder-header.active-doc{
    cursor: default;    
}

.folder-header.active-doc div.date{
    color: white   
}

.folder-header.active-doc .folder-image{
    background: url("/resources/images/red_folder.png");
}

.folder-header:not(.active-doc):hover .folder-image{
    background-size: 75px 75px;
    margin-top: -10px;
    margin-bottom: -5px;
    margin-right: -20px;
}

.ui-layout-resizer{
    display: none !important;
}

.borderless{
    border: none !important;
}

#sidebar{/*kingzy*/
    /*    padding: 0px !important;
        width: 121px !important;
        height: 100% !important;
        //border-right: 1px solid rgba(211, 211, 211, 0.88);
        margin: 0px;*/
}

#sidebar .product-name{
    /* display: inline-block;
     width: 121px;*/
    text-align: center;
    padding: 15px 0px;
    font-size: 20px;
    font-family: serif;
}

#sidebar .product-name .blue{
    color: #0078ae;
}

#sidebar .product-name .red{
    color: #df2227;
}

.external-sidepane,
#sidepane{
    width: 121px !important;
    padding: 0px !important;
    margin: 0px !important;
    overflow: visible !important;
    z-index: 2 !important;
}
/*
.sidetext{    
    font-family: Arial, sans-serif;
    font-size: 15px;
    color: inherit;
    white-space: nowrap;
}*/

.sidemenu{
    /*background: rgba(235,235,235,0.3);*/
    background: #CCCDCD;
    /*background: rgb(181, 177, 177);*/
}

#sidebar.sidemenu .parent-active{

}

.sideiconlink{
    color: white;
    text-decoration: none;
    text-align: center;
    display: block;
    width: 100%;
    height: 98px;
    padding: 14px 10%;
    margin: 0px;
    position: relative;text-decoration: none;z-index: 1;
    transition-duration: .3s;
    transition-timing-function: ease-out;
    /*border-bottom: 2px groove white;*/
}

.sideiconlink:hover{
    width: 120%;text-decoration: none;
}

.sideiconlink:active{
    color: black !important;
}

.sideiconlink > i{
    font-size: 3em;
}

.sideiconlink:last-child{
    /*border-bottom: none;*/
}
.sideiconlink > span{    
    font-family: Arial, sans-serif;
    font-size: 15px;
    color: inherit;
    white-space: nowrap;
    margin-top: -6px;
    display: block;
}

#menubar #logo{
    padding-right: 4px;
    padding-left: 4px;
    margin-right: 100px;
}

#menubar #logotext{
    padding-top: 4px;    
    height: 100%;
    display: inline-block;
}

.swappable{
    display: none;
}

h3{
    color: #df2227;
}

.bold{
    font-weight: bold;
}

.current-page a{
    background-color: #F7FAFA !important;
    color: #0078ae !important;
}

.ui-autocomplete{
    max-height: 200px;
    overflow-y: auto;
    overflow-x: hidden;
}

.na-label{
    margin-right: 17px;
}

.na-div input[type=radio]{
    margin-left: 0px;
}

table.dataTable tr{
    height: 40px;
}

#print-div{
    width: 800px;
    margin: auto;
}

.print-bill-div{
    width: 600px;
    font-size: 20px;
    margin: auto;
}

.print-bill-header,
.print-bill-table{
    width: 100%;
}

.print-bill-div,
.print-bill-header,
.print-bill-table{
    width: 100%;
    border-collapse: collapse;
    margin: 30px 0px;
}

.print-bill-header td,
.print-bill-table td{
    width: 50%;
}

.print-bill-table tr td:first-child,
.print-bill-header tr td:first-child{
    text-align: right;
    padding-right: 10px;
}

.print-bill-table tr td:last-child,
.print-bill-header tr td:last-child{
    text-align: left;
    padding-left: 10px;
}

.print-bill-div thead{
    font-weight: bold;
}

.print-bill-div .timestamp{
    margin-top: 20px;
    font-size: 0.7em;
    text-align: center;
}

.patient-in-queue{
    color: #2E7650 !important;
    font-weight: bold !important;
}

.already-queued{
    color: green;
}

.not-queued{
    color: red;
}

.invalid-input{
    border: solid 1px;
    border-color: red;
}

.payment-view td{
    text-align: center;
}

.payment-view-table{
    border-top: solid 8px grey;
}

.bill-payment-comp-title{
    background-color: #BBCCEF;
    display: inline-block;
    padding: 0px 10px;
}

.small-title{
    font-size: 1em;
    font-weight: bold;
}

.medium-title{
    color: #df2227;
    font-size: 1.17em;
    font-weight: bold;
}
/*
#attachment-bar{
    float: left;
    margin-top: 20px;
}*/

.attachment{
    padding: 0px 9px;
    line-height: 1em;
    text-align: center;
    font-size: 3em;
    color: #3C88D6;
}
/*
#attachment-bar .attachment:first-child{
    padding-top: 0px;
}*/

.ui-autocomplete.ui-front{
    z-index: 130;
}

.edit-button{
    background-color: #0078ae;
}

input[type="reset"], button[type="reset"], input.cancel-button, button.cancel-button{
    background-color: #df2227;
}

#tag-div, .tag-cloud{
    display: inline-block;
    font-size: 0.9em;
}

.tag{
    border: solid 1px darkgrey;
    border-radius: 3px;
    font-weight: bold;
    font-size: 0.9em;
    background-color: black;
    color: white;
    padding: 0px 2px;
    height: 24px;
    display: inline-block;
    margin: 0px 5px;
    line-height: 24px;
}

.tag-retired{
    background-color: lightgrey;
}

.table-input-row td *{
    /*max-width: 200px;*/
}

.justify-table th,
.justify-table td{
    text-align: center;
}

.no-wrap{
    white-space: nowrap;
}

.pre-text{
    white-space: pre-line;
}

td.center-td{
    text-align:center; 
    vertical-align:middle;
}

.visit-drugs tr td:nth-child(3),
.visit-drugs tr td:nth-child(4){
    width: 18%;
    max-width: 18%;
}

.med-chart{
    border-collapse: collapse;
    width: 100%;
    margin-bottom: 15px;
    margin-top: 15px;
    background-color: grey;
    color: white;
    font-size: 15px;
}

.med-chart thead td,
.med-chart thead th{
    padding: 4px 0px;
    border: solid 1px;
}

.med-chart .drug,
.med-chart .prescription{
    width: 150px;
    vertical-align: middle;
}

.med-chart > tbody > tr{
    border-top: solid 1px;
    border-bottom: solid 1px;
}

.med-chart tbody tr:last-child{
    border: none;
}

.med-chart td.medication,
.med-chart td.drug{
    padding: 0px 3px;
    text-align: left;
}

.med-chart > tbody > tr > td{
    margin: 0px;
    vertical-align: top;
    border: solid 1px;
    padding-bottom: 20px;
}

.med-chart td{
    text-align: center;    
}

.med-chart table.time-table{
    margin: 0px;
    padding: 0px;
    color: #F7BF1A;
    display: inline-block;
    text-align: center;
}

.med-chart table.time-table td{
    width: 90px;
    height: 25px;
    padding: 0px;
    vertical-align: middle;
    white-space: nowrap;
}
.med-chart .ui-datepicker-trigger{
    width: 20px;
    height: 20px;
    padding: 0px;
    margin: 0px 5px;
}

.med-chart table.time-table.on-edit{
    margin-bottom: 15px;
}

.med-chart .medication > td{
    position: relative;
}

.med-chart .medication .cancelled-time{
    opacity: 0.5;
    text-decoration: line-through;
}

.med-chart .medication .control{
    display: block;
    position: absolute;
    bottom: 2px;
}

.med-chart .prescription .fa{
    float: right;
    font-size: 1.2em;
    display: inline-block;
    padding: 3px;
}

.invalid-input{
    border-color: red !important;
}

.io-chart-container .controls{
    padding: 5px 0px;
}

.io-chart-container .controls button{
    margin-right: 5px;
}

.io-chart{
    width: 100%;
    margin: 5px 0px;
    border-collapse: collapse;
    color: white;
}

.io-chart thead tr td{
    border-bottom-color: grey;
}

.io-chart td,
.io-chart th{
    text-align: center;
    border: solid 1px white;
}

.io-chart th{
    background-color: lightgrey;
    color: #3E3E3E;
}

.io-chart td{
    color: #3E3E3E;
    background-color: white;
}

.io-chart .input td,
.io-chart td.input,
.io-chart th.input,
.io-chart-container .controls button.input{
    background-color: #16a085 !important;
    color: white !important;
}

.io-chart .cancelled-io{
    opacity: 0.5;
    text-decoration: line-through;
    color: black;
}

.io-chart .output td,
.io-chart th.output,
.io-chart td.output,
.io-chart-container .controls button.output{
    background-color: #2980b9 !important;
    color: white !important;
}

.io-chart-container .controls button.summary{
    background-color: #3E3E3E !important;
    color: white !important;
}

.round-button{
    width: 40px;
    height: 40px;
    margin: 0px;
    padding: 0px;
    border-radius: 100px;
    border: solid 4px #26B6BD;
    color: #26B6BD;
    background-color: transparent;
    transition: all ease .5s;
    vertical-align: middle;
}

.round-button:hover{
    width: 40px;
    height: 40px;
    border: none;
    color: white;
}

.round-button .fa{
    font-size: 1.5em;
    -webkit-text-stroke-width: 1px;
}

.button-name{
    display: none;
    vertical-align: middle;
    height: 25px;
    border: solid 2px #00e8f4;
    border-left: none;
    padding: 0px 10px;
    position: relative;
    left: -8px;
    background-color: #F7FAFA;
}

.button-name:hover{
    color: white;
    background-color: #00e8f4;
}

.sideiconlink.first-color,
.first-color-panel{
    color: white;
    background-color: #e74c3c;
}

.sideiconlink.second-color,
.second-color-panel{
    color: white;
    background-color: #3498db;
}

.sideiconlink.third-color,
.third-color-panel{
    color: white;
    background-color: #26BDA9;
}

.sideiconlink.fourth-color,
.fourth-color-panel{
    color: white;
    background-color: #f39c12;
}

.dark-color-panel{
    background-color: #000;
}

.light-color-panel{
    background-color: #fff;
    color: black;
}

.first-color-text{
    color: #e74c3c;
}

.second-color-text{
    color: #3498db;
}

.third-color-text{
    color: #26BDA9;
}

.fourth-color-text{
    color: #f39c12;
}

.fifth-color-text{
    color: #7fb545;
}

.user-message.first-color{
    color: white;
    background-color: #e74c3c;
}

.user-message.second-color{
    color: white;
    background-color: #3498db;
}

.user-message.third-color{
    color: white;
    background-color: #26BDA9;
}

.user-message.fourth-color{
    color: white;
    background-color: #f39c12;
}

.btn-first{

}

table.dataTable tr.odd,
table.dataTable tr.even{
    background: none;
    border-bottom: solid 1px rgba(0, 120, 174, 0.11);
}

table.dataTable .sorting_1{
    background: rgba(38, 182, 189, 0.05) !important;
}

.dataTables_wrapper .ui-toolbar.ui-widget-header{
    background: none;
    background-color: rgba(0, 120, 174, 0.74);
    color: white;
    font-weight: bold;
}

.ui-state-default{
    /*background: rgba(38, 189, 169, 0.25) !important;*/
}

#user-space{
    display: inline-block;
    float: right;
    font-weight: bold;
    vertical-align: baseline;
}

#user-space > span,
#user-space > a{
    padding: 0px 4px;
    display: inline-block;
}

#page-select{
    display: block;
    width: 94%;
    text-align: center;
    margin: 4px auto 20px;
    border: 1px inset #FFF;
    background-color: #F7FAFA;
    font-weight: bold;font-size: smaller;
}

#page-select option.default{
    display: block;
    font-style: italic;font-size: smaller;
}

.visit-control{
    /*display: inline-block;*/
}

.page-header{
    margin-bottom: 10px;
}

.page-title{
    font-size: 22px;
}

.page-controls{
    display: inline-block;
    float: right;
}

.fluid-text{
    border: solid 1px lightgrey;
    line-height: 30px;
    min-height: 30px;
}

.fluid-list{
    line-height: 30px;
}

.fluid-list-child-remove{
    color: #e74c3c;
}

.fluid-list tfoot .fluid-list-child-remove{
    display: none;
    color: #e74c3c;
}

.fluid-list-child-add{
    color: #26BDA9;
}

.fluid-list .fluid-list-child-add{
    display: none;
    color: #26BDA9;
}

.fluid-list-child-add:hover,
.fluid-list-child-remove:hover{
    color:#3498db;
}

.fluid-list-child-add,
.fluid-list-child-remove{
    font-size: 1.5em;
}

.fluid-list tfoot .fluid-list-child-add{
    display: inline;
}

.fluid-table{
    border-collapse: collapse;
}

.fluid-table td{
    padding: 5px 5px;
}

.fluid-list td:first-child{
    padding: 5px 0px;
}

.fluid-text-table {
    border-collapse: collapse;
    border-style: hidden;
}

.fluid-text-table td,
.fluid-text-table th {
    border: 1px solid black;
    min-width: 20px;
    text-align: center;
}

.fluid-text-table-input{
    width: 100px;
    margin-right: 23px;
}

.phrase{
    margin: 2px 3px;
    display: inline-block;
}

.phrase.list-item{
    display: block;
}

.phrase .option-set,
.phrase .option{
    display: inline;
}

.phrase.disabled{
    color: #A29797;
    cursor: pointer;
    background-color: rgb(241, 241, 241);
}

.phrase.disabled:hover{
    color: black;
}

.phrase.enabled{
    color: black;
    border: solid 1px rgb(211, 211, 211);
}

.phrase.pre-form{
    white-space: pre;
}

.fluid-textarea{
    display: block;
    width: 100%;
    margin-bottom: 10px;
}

.fluid-suggest-row > td{
    position: relative;
}

.fluid-suggest-row.disabled .fluid-list-control{
    display: none;
}

.fluid-suggest-mask{
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    height: 100%;
    width: 100%;
    opacity: .4;
    background-color: grey;
    transition: all ease .3s;
}

.fluid-suggest-mask:hover{
    opacity: .2;
}

.form-header{
    font-size: 19px;
    color: #26BDA9;
    padding-left: 50px;
}

/*Override default close button size for jquery dialog - too small for mobile*/
.ui-dialog button.ui-dialog-titlebar-close{
    height: 30px;
    width: 30px;
}

/*select, input[type=text],
input[type=number],
input[type=password]{
    height: 30px;
}*/

.jsonform-table-wrapper{
    overflow-x: auto;
}

.jsonform-loaded-input{
    color: green;
}

.vericaltext{
    width:1px;
    word-wrap: break-word;
    font-family: monospace; /* this is just for good looks */
    display: block;
}

#message-dialog{
    font-size: 18px;
    text-align: center;
    width: 450px;
    height: 300px;
}

.ui-dialog{
    padding: 0px;
    border: none;z-index: 2;
}

.ui-dialog-titlebar{
    background: none;
    background-color: black;
    border: none;
    border-radius: 0px;
}

.ui-dialog-titlebar .ui-dialog-titlebar-close{
    top: inherit;
    margin: 0px;
    opacity: 1;
    background: white !important;
    border: 1px solid white;
    color: white;
}

.ui-widget-overlay{
    background: #333;
    opacity: .5;
}

#visit-tabs{
    background: inherit;
    border: none;
}

#visit-tabs .ui-tabs-nav.ui-widget-header{
    background: #ddd;
    border: 1px solid #ccc;
}

#visit-tabs .ui-tabs-nav .ui-tabs-anchor,
.tab-tray li{
    color: white;
}

#visit-tabs .ui-tabs-nav li{
    border: none;
    line-height: 30px;
}

#visit-tabs .ui-tabs-nav li:nth-child(1) .ui-tabs-anchor,
.tab-tray li:nth-child(1){
    background: #e74c3c;
}

#visit-tabs .ui-tabs-nav li:nth-child(2) .ui-tabs-anchor,
.tab-tray li:nth-child(2){
    background: #3498db;
}

#visit-tabs .ui-tabs-nav li:nth-child(3) .ui-tabs-anchor,
.tab-tray li:nth-child(3){
    background: #f39c12;
}

#visit-tabs .ui-tabs-nav li:nth-child(4) .ui-tabs-anchor,
.tab-tray li:nth-child(4){
    background: #26BDA9;
}

#visit-tabs .ui-tabs-nav li:nth-child(5) .ui-tabs-anchor,
.tab-tray li:nth-child(5){
    background: grey;
}

#visit-tabs .ui-tabs-nav li:nth-child(6) .ui-tabs-anchor,
.tab-tray li:nth-child(6){
    background: grey;
}

#visit-tabs .ui-tabs-nav li:nth-child(7) .ui-tabs-anchor,
.tab-tray li:nth-child(7){
    background: grey;
}

#visit-tabs .ui-tabs-nav .ui-tabs-active a.ui-tabs-anchor,
.tab-tray li.active{
    color: black;
    border-bottom: 1px solid #F7FAFA;
    z-index: 10;
    margin-bottom: -1px;
    background: #F7FAFA
}

.org-page-title-info{
    text-align: center;
    /*width: 400px;*/
}

.org-page-title-info,
.org-page-title-logo{
    display: inline-block;
}

.org-page-title-logo{
    vertical-align: top;
}

.org-page-title-logo .placeholder{
    font-size: 120px;
}

.ui-corner-tl,
.ui-corner-tr,
.ui-corner-bl,
.ui-corner-br{
    border-radius: 0px;
}

.ColVis{
    width: auto;
}

.ColVis_collection.TableTools_collection{
    height: 300px;
    overflow-y: auto;
    overflow-x: hidden;
}

.ColVis_Button.TableTools_Button{
    white-space: nowrap;
}

.confirm-dialog .ui-dialog-buttonset button.ui-button{
    background: none !important;
    color: white !important;
    border: none !important;
}

.confirm-dialog .ui-dialog-buttonset button.ui-button:first-child{
    background-color: #26BDA9 !important;
}

.confirm-dialog .ui-dialog-buttonset button.ui-button:last-child{
    background-color: #e74c3c !important;
}

.confirm-dialog .ui-dialog-buttonset button.ui-button:hover{
    background-color: black !important;
}

#billing-tariff-services-table td:last-child{
    white-space: nowrap;
}

#sync-container{
    display: none;
    position: fixed;
    top: 0px;
    width: 200px;
    margin-left: calc(50% - 100px);
    height: 30px;
    background: rgba(0, 255, 0 , 0.4);
    z-index: 100;
    text-align: center;
}

#sync-container.loaded{
    background: rgba(255, 0, 0 , 0.4);
}

#sync-container .refresh{
    margin-left: 30px;
    color: white;
}

.ui-progressbar{
    height: 5px;
}

#view-order-table .item-select{
    width: 200px;
}

#view-order-table .quantity-input,
#dispense-table .dispense-input{
    width: 60px;
}



/* 
    Document   : stylesheet
    Created on : 06-Feb-2016, 09:17:32 PM
    Author     : kezenwere
    Description: Doc Refactor and Addendum.
*/
main, #content{
    /*padding-bottom: 30px;*/
}
.text-aquila-red{
    color: #df2227;
}
.text-aquila-blue{
    color: #0078ae;
}

.page-clip-control-container{
    display: inline-block;
    margin-left: 10px;
    background-color: grey;
    border-radius: 2px;
}

.page-clip-control{
    padding: 2px 8px;
    color: white;
}

.text-white{
    color: #ffffff;
}
a.sideiconlink.active:after{
    position: absolute;
    width: 0px;
    height: 0px;
    content: "";
    border-top: 14px solid transparent;
    border-bottom: 14px solid transparent;
    border-right: 14px solid #F7FAFA;;
    right: 0px;
    top: 28px;

}
ul.inner-sidebar{
    display: block;
    list-style-type: none;
    margin: 0;
    padding: 0;
}

ul.inner-sidebar li{
    margin-bottom: 4px;
}

@media (max-width: 768px) {
    ul.inner-sidebar li{
        display: inline-block;
        margin-bottom: 4px;
        margin-right: 4px;
        float: left;
    }
}
#info-bar{
    border-bottom: 2px solid #2980b9;
}
#info-bar:empty{
    display: none;
}
ul#latest-vital-signs{
    list-style-type: none;
    text-align: center;
    margin: 0;
    padding: 0;
}
ul#latest-vital-signs li{
    display: inline-block;
    padding: 2px 8px;
    font-size: 14px;
    font-weight: bold;
    position: relative;
    color: #2980b9;
}
ul#latest-vital-signs li > span {
    font-size: smaller;
    font-weight: normal;

}
ul#latest-vital-signs li:first-child{
    color: red;
}
ul#latest-vital-signs li:after{
    position: absolute;
    top: 0px;
    right: -4px;
    color: #cacaca;
}
ul#latest-vital-signs li:last-child:after, ul#latest-vital-signs li:first-child:after{
    content: "";
}
@media (max-width: 992px) {
    ul#latest-vital-signs li{
        padding: 0px 2px;
        font-size: 12px;
    }
}
.jsonform-input-row.has-success .input-control {
    border-color: #5cb85c;
    background-image:none;
}
.jsonform-input-row.has-success .jsonform-label, .has-success .value{
    color: #5cb85c;
}
.jsonform-input-row.has-warning .input-control {
    border-color: #f0ad4e;
    background-image:none;
}
.jsonform-input-row.has-warning .jsonform-label, .has-warning .value {
    color: #f0ad4e;
}
.jsonform-input-row.has-danger .input-control {
    border-color: #d9534f;
    background-image:none;
}
.jsonform-input-row.has-danger .jsonform-label, .has-danger .value{
    color: #d9534f;
}



/**
 * @author kezenwere
 * @class KDate 
 * @description A custom date input element that integrates with jquery datetimepicker. It has an optional age field.
 * @version 0.0.1
 * @type date
 * @returns {date} The entered date.
 * @syntax <input type="date" id="[any_id]" name="any_name" data-with-age="yes | no" />
 */
ul.kdate{
    width:auto;
    display:inline-block;
    margin:0;
    padding:2px 4px;;
    list-style-type:none;
    border:1px solid #999;
    background-color: #fff;
}
ul.kdate li{
    position:relative;
    display:inline-block;
    margin:0;
}
ul.kdate li input{
    margin:0;
    border:none;
}
ul.kdate li input[name="day"]{
    width:38px;
}
ul.kdate li input[name="month"]{
    width:42px;
}
ul.kdate li input[name="year"]{
    width:56px;
}
ul.kdate li input[name="age"]{
    width:110px;
    margin: 0px 10px;
    background: #EEEEEE;
    text-align: center;
}
ul.kdate li:first-child:after, ul.kdate li:nth-child(2):after{
    position:absolute;
    top:0px;
    right:7px;
    content:"-";
    color:#ccc;			
}

ul.kdate li a.reset-values{
    margin: 0px 10px;
}

ul.kdate li:first-child:hover:after, ul.kdate li:nth-child(2):hover:after{
    content:"";		
}

ul.kdate li:nth-child(5), ul.kdate li:nth-child(6){
    padding: 0px 4px;
}

ul.kdate li:nth-child(5):hover, ul.kdate li:nth-child(6):hover{
    background-color:#ddd;
    cursor:pointer;	
}
ul.kdate li:last-child{
    position:relative;
}

ul.kdate li input.date{
    width:0;
    height:0;
    padding:15px 10px;
    position:absolute;
    top:1px;
    left:50%;
    margin-left:-9px;
    background-color:transparent;
    cursor:pointer;	
}

/* Bootstrap hack */
/*button,*/
input,
optgroup,
select,
textarea {
    margin: 4px 0px;
    font: inherit;
    color: #000;
}
/* Bootstrap hack */
[role="form"] ul.kdate,
[role="form"] button,
[role="form"] input,
[role="form"] optgroup,
[role="form"] select,
[role="form"] textarea {
    margin-bottom: 8px;
}
.table-hover tbody tr:hover {
    background-color: #f7fcff;
}
label{
    margin-bottom: 0;
}
legend{
    color: #ccc;
    margin-top: 8px;
}

thead th{
    background: #f5f5f2; 
    border: 1px solid #bfbfba;
    border-width: 1px 0;
    color: #333;
    text-transform: uppercase;
}

.bill-block, .payment-view{
    background: white;
    padding: 5px;
    box-shadow: 1px 1px 12px 1px lightgrey;
    position: relative;
    padding-bottom: 30px; /*To allow for footer*/
}

.bill-block .block-info span{
    margin-right: 20px;
}

.bill-block .block-info{
    display: inline-block;
    margin-bottom: 5px;
}

.payment-info{
    position: absolute;
    bottom: 0px;
    right: 2px;
    font-size: 0.8em;
    color: grey;
}

.money-text{
    font-family: monospace;
    white-space: pre;
}

#temp-space{
    padding-top: 50px;
}

#visit-control button{
    margin-bottom: 2px;
}
#visit-control button#history{
    padding: 0px 15px;
}
.required{
    color: #d9534f !important;
    font-size: large;
}



.btn-first-outline {
    color: #e74c3c;
    background-color: transparent;
    background-image: none;
    border-color: #e74c3c;
}

.btn-first-outline:focus, .btn-first-outline.focus, .btn-first-outline:active, .btn-first-outline.active,
.open > .btn-first-outline.dropdown-toggle {
    color: #fff;
    background-color: #e74c3c;
    border-color: #e74c3c;
}

.btn-first-outline:hover {
    color: #fff;
    background-color: #e74c3c;
    border-color: #e74c3c;
}

.btn-first-outline.disabled:focus, .btn-first-outline.disabled.focus, .btn-first-outline:disabled:focus, .btn-first-outline:disabled.focus {
    border-color: #43a7fd;
}

.btn-first-outline.disabled:hover, .btn-first-outline:disabled:hover {
    border-color: #43a7fd;
}


.btn-second-outline {
    color: #3498db;
    background-color: transparent;
    background-image: none;
    border-color: #3498db;
}

.btn-second-outline:focus, .btn-second-outline.focus, .btn-second-outline:active, .btn-second-outline.active,
.open > .btn-second-outline.dropdown-toggle {
    color: #fff;
    background-color: #3498db;
    border-color: #3498db;
}

.btn-second-outline:hover {
    color: #fff;
    background-color: #3498db;
    border-color: #3498db;
}

.btn-second-outline.disabled:focus, .btn-second-outline.disabled.focus, .btn-second-outline:disabled:focus, .btn-second-outline:disabled.focus {
    border-color: #43a7fd;
}

.btn-second-outline.disabled:hover, .btn-second-outline:disabled:hover {
    border-color: #43a7fd;
}




.btn-third-outline {
    color: #26BDA9;
    background-color: transparent;
    background-image: none;
    border-color: #26BDA9;
}

.btn-third-outline:focus, .btn-third-outline.focus, .btn-third-outline:active, .btn-third-outline.active,
.open > .btn-third-outline.dropdown-toggle {
    color: #fff;
    background-color: #26BDA9;
    border-color: #26BDA9;
}

.btn-third-outline:hover {
    color: #fff;
    background-color: #26BDA9;
    border-color: #26BDA9;
}

.btn-third-outline.disabled:focus, .btn-third-outline.disabled.focus, .btn-third-outline:disabled:focus, .btn-third-outline:disabled.focus {
    border-color: #43a7fd;
}

.btn-third-outline.disabled:hover, .btn-third-outline:disabled:hover {
    border-color: #43a7fd;
}




.btn-fourth-outline {
    color: #f39c12;
    background-color: transparent;
    background-image: none;
    border-color: #f39c12;
}

.btn-fourth-outline:focus, .btn-fourth-outline.focus, .btn-fourth-outline:active, .btn-fourth-outline.active,
.open > .btn-fourth-outline.dropdown-toggle {
    color: #fff;
    background-color: #f39c12;
    border-color: #f39c12;
}

.btn-fourth-outline:hover {
    color: #fff;
    background-color: #f39c12;
    border-color: #f39c12;
}

.btn-fourth-outline.disabled:focus, .btn-fourth-outline.disabled.focus, .btn-fourth-outline:disabled:focus, .btn-fourth-outline:disabled.focus {
    border-color: #43a7fd;
}

.btn-fourth-outline.disabled:hover, .btn-fourth-outline:disabled:hover {
    border-color: #43a7fd;
}

.x-scroll-div{
    /*overflow-x: auto;*/
}

.display-child-div-block > div {
    display: block;
    margin: 16px auto;
}
i.add-icon{
    color: #26BDA9;
    font-size: 1.5em;
    cursor: pointer;
}
i.add-icon:hover{
    color: #3498db;
}
i.remove-icon{
    color: #e74c3c;
    font-size: 1.5em;
    cursor: pointer;
}
i.remove-icon:hover{
    color: #3498db;
}
input.auto-filled{
    background-color: #faf2cc !important;
}
.chosen-container.auto-filled a{
    background-color: #faf2cc !important;
    background-image: none;
}

.json-image-control{
    width: 300px;
}

.json-image-menu{
    text-align: right;
    width: 100%;
    width: 220px;
}

.json-image-workspace{
    padding: 10px;
    border-top: 1px lightgrey solid;
    border-right: 1px lightgrey solid;
}

.json-image-canvas-container{
    position: relative;
    margin: 0px;
    padding: 0px;
    height: 220px;
    width: 220px;
}

.layered{
    position : absolute;
    top: 0px;
    left: 0px;
}

.json-image-canvas-background{
    background-color: #fbf9ee;
}

.headless .ui-dialog-titlebar{
    display: none;
}

.headless .ui-dialog-content{
    padding: 0px;
}

/* Custom Input (im-input)*/
.im-input-wrapper{
    position: relative;
    margin-top: 16px;
    margin-bottom: 40px;
}
.im-input-wrapper .im-input{
    display: inline-table;
    width: 100%;
    vertical-align: bottom;
}
.im-input-wrapper .im-input  > * {
    display: table-cell;
}
.im-input-wrapper .im-input-prefix{
    /*Not implemented yet.*/
}
.im-input-wrapper .im-input-infix{
    position: relative;
}
.im-input-wrapper .im-input-suffix{
    text-align: right;
}
.im-input-wrapper .im-input-element{
    font: inherit;
    background: transparent;
    border: none;
    outline: none;
    padding: 0;
    width: 100%;
}
.im-input-wrapper .im-input-placeholder{
    position: absolute;
    left: 0;
    top: 0;
    /*                visibility: hidden;*/
    font-size: 100%;
    pointer-events: none;
    color: rgba(0, 0, 0, 0.38);
    z-index: 1;
    width: 100%;
    display: block;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow-x: hidden;
    -webkit-transform: translateY(0);
    transform: translateY(0);
    -webkit-transform-origin: bottom left;
    transform-origin: bottom left;
    -webkit-transition: scale 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), color 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), -webkit-transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    transition: scale 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), color 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), -webkit-transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), scale 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), color 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), scale 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), color 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), -webkit-transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.im-input-wrapper.focused .im-input-placeholder,
.im-input-wrapper .im-input-infix.dirty .im-input-placeholder{
    visibility: visible;
    padding-bottom: 5px;
    -webkit-transform: translateY(-100%) scale(0.75);
    transform: translateY(-100%) scale(0.75);
}
.im-input-wrapper.focused .im-input-placeholder{
    color: #009688;
}
.im-input-wrapper.has-success .im-input-placeholder,
.jsonform-input-row.has-success .im-input-placeholder{
    color: #5cb85c;
}
.im-input-wrapper.has-warning .im-input-placeholder,
.jsonform-input-row.has-warning .im-input-placeholder{
    color: #f0ad4e;
}
.im-input-wrapper.has-danger .im-input-placeholder,
.jsonform-input-row.has-danger .im-input-placeholder{
    color: #d9534f;
}
.im-input-wrapper .im-input-placeholder i{
    margin-right: 4px;
    margin-left: -20px !important;
}
.im-input-wrapper .underline{
    position: absolute;
    height: 1px;
    width: 100%;
    margin-top: 4px;
    border-top: 1px solid rgba(0, 0, 0, 0.38);
}
.im-input-wrapper.has-success .underline,
.jsonform-input-row.has-success .underline{
    border-top: 1px solid #5cb85c;
}
.im-input-wrapper.has-warning .underline,
.jsonform-input-row.has-warning .underline{
    border-top: 1px solid #f0ad4e;
}
.im-input-wrapper.has-danger .underline,
.jsonform-input-row.has-danger .underline{
    border-top: 1px solid #d9534f;
}
.im-input-wrapper .underline .im-input-ripple{
    position: absolute;
    height: 2px;
    z-index: 1;
    background-color: #009688;
    top: -1px;
    width: 100%;
    -webkit-transform-origin: top;
    transform-origin: top;
    opacity: 0;
    -webkit-transform: scaleY(0);
    transform: scaleY(0);
    -webkit-transition: opacity 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), -webkit-transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    transition: opacity 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), -webkit-transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), -webkit-transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.im-input-wrapper.focused .underline .im-input-ripple{
    opacity: 1;
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
}
.im-input-wrapper.has-success .underline .im-input-ripple,
.jsonform-input-row.has-success .underline .im-input-ripple{
    background-color: #5cb85c;
}
.im-input-wrapper.has-warning .underline .im-input-ripple,
.jsonform-input-row.has-warning .underline .im-input-ripple{
    background-color: #f0ad4e;
}
.im-input-wrapper.has-danger .underline .im-input-ripple,
.jsonform-input-row.has-danger .underline .im-input-ripple{
    background-color: #d9534f;
}
.im-input-wrapper .hint{
    position: absolute;
    left: 0;
    bottom: -40px;
    color: #818a91;
    font-size: 80%;
}
/* End Custom Input (im-input)*/

.json-number-range{
    display: inline;
    font-size: 0.9em;
    font-style: italic;
    margin-left: 40px;
}

.dashboard{
    font-family: 'ProximaNovaAlt', serif;
    font-size: 18px;
}
.dashboard h4{
    text-transform: capitalize;
    font-weight: normal;

}  
.dashboard .wrapper{
    border: 1px solid #ccc;
    margin-bottom: 20px;

}  
.dashboard .total{
    padding: 8px;
    border-bottom: 1px solid #ccc;

}
.dashboard .table{
    display: table;
    margin-bottom: 0;
}
.dashboard .table-row{
    display: table-row;
}
.dashboard .table-row li{
    display: table-cell;
    text-align: left;
    padding: 8px;
    vertical-align: bottom;
    position: relative;
}
.dashboard .table-row li:after{
    position: absolute;
    border-right: 1px solid #ccc;
    height: 80%;
    content: " ";
    top: 10%;
    right: 0;
}

.dashboard .table-row li:last-child:after{
    border-right: none;
}

.dashboard ul{
    list-style: none;
}

.dashboard-widget{
    display: inline-block;
    width: 300px;
    height: 250px;
    margin: 0 5px 10px;
    vertical-align:top;
    background-color: #f5f5f5;
    /*border: solid blue 1px;*/
}

#chat-bar{
    position: fixed;
    bottom: 0px;
    right: 80px;
}

div#new-chat-action{
    border: none;
    bottom: 0px;
    right: 4px;
    position: absolute;
    right: 15px;
    font-size: 35px;
}

#new-chat-action a{
    text-decoration: none;
    color: black;
    /*display: none;*/
}

#new-chat-action span{
    vertical-align: bottom;
    display: block;
}

#new-chat-action{
    margin-top: 275px;
}

.chat-window{
    float: right;
    margin-left: 10px;
    position: relative;
    max-height: 320px;
    width: 250px;
    padding: 0px;
}

.chat-window-body{
    height: 290px;
    border-top: none;
    border-bottom: solid 1px #1D878C;
    border-left: solid 1px #1D878C;
    border-right: solid 1px #1D878C;
    background: white;
}

.chat-window.minimized{
    width: 150px;
    /*margin-top: 270px;*/
}

.chat-window.minimized .chat-window-body{
    display: none;
}

.chat-window-messages, .chat-window-input-div{
    width: 240px;
    margin: 0px 5px;
}

.chat-window-messages{
    height: 226px;
    padding: 5px 0px;
    max-height: 226px;
    overflow-y: auto;
    line-height: 19px;  
}

.chat-window-header{
    margin: 0px;
    height: 30px;
    vertical-align: middle;
    line-height: 30px;
    background: #1EB2A6;
}

.chat-window-title{
    font-weight: bold;
    color: white;
    padding-left: 10px;
}

.chat-window-close-action{
    float: right;
    height: 100%;
    width: 40px;
    margin: 0px;
    padding: 0px;
    border-left: solid 1px;
}

.chat-window.minimized .chat-window-close-action{
    display: none;
}

.chat-window-input-div{
    height: 70px;
    padding: 2px 0px;
}

.chat-window-input{
    width: 100%;
    height: 66px;
}

.message.from-me{
    text-align: left;
    background-color: #F7FAFA;
    margin: 1px 20px 1px 0px;
    padding: 3px 2px;
    border-radius: 0px 15px 15px 0px;
}

.message.from-other{
    text-align: right;
    background-color: #E2E4FF;
    margin: 1px 0px 1px 20px;
    padding: 3px 0px;
    border-radius: 15px 0px 0px 15px;
}

.message .message-time{
    font-size: 10px;
    height: 12px;
    line-height: 12px;
}

.log-object{
    border-bottom: blue solid 1px;
}

.log-message{
    border-bottom: 1px solid lightgrey;
}

.log-message.red{
    color: red
}

.fluid-text-container.disabled .ql-toolbar{
    display: none;
}

.fluid-text-container.disabled .ql-container.ql-snow{
    border: none;
}

.live-form.passive .input,
.live-form.passive .submit,
.live-form.passive .cancel{
    display:none;
}

.live-form .data{
    display: inline-block;
}

.live-form.active .data, .live-form.active .edit{
    display: none;
}

.clickable-label{
    cursor: pointer;
}

.tab-tray{
    padding-top: 5px;
    padding-left: 5px;
    margin-bottom: 10px;
    border-bottom: solid 1px grey;
    background: lightgray;
}

.tab-tray li{
    list-style: none;
    display: inline-block;
    position: relative;
    padding: 7px 20px;
    background: grey;
    margin: 0px 1px;
}

.tab-tray li.active{

}

.folder-doc-container{
    height: 100%;
    overflow-y: auto;
    padding-top: 20px;
}

.inner-sidebar-container{
    padding-top: 20px;
}

.fluid-text-btn{
    border: solid 1px lightgrey !important;
    height: auto !important;
    width: auto !important;
    color: black !important;
    border-radius: 4px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    margin: 0px 2px;
}

.fluid-text-btn:hover{
    border-color: black !important;
    color: lightgrey !important;
}

.lean-dialog.ui-dialog.ui-widget{
    overflow: visible;
}

.lean-dialog.ui-dialog.ui-widget .ui-dialog-content{
    padding: 0px;
    position: relative;
    overflow: visible;
}

.lean-dialog.ui-dialog.ui-widget .ui-dialog-titlebar{
    display: none;
}

.lean-dialog.ui-dialog.ui-widget .hanging-options{
    position: absolute;
    width: 120px;
    right: 0px;
    top: 100px;
    margin-right: -120px;
    background: white;
    text-align: center;
}

.lean-dialog.ui-dialog.ui-widget .hanging-toolbox{
    position: absolute;
    width: 90px;
    left: 0px;
    top: 100px;
    margin-left: -90px;
    background: white;
    text-align: center;
    height: 200px;
}

.lean-dialog.ui-dialog.ui-widget .hanging-options button,
.lean-dialog.ui-dialog.ui-widget .hanging-toolbox button{
    width: 80px;
    display: inline-block;
    margin: 5px auto;
}

.image-editor .ui-tabs-panel{
    padding: 5px;
}

.image-editor-menu{
    height: 50px;
}

.image-editor-menu > div{
    display: inline-block;
}

.video-panel{
    display: inline-block;
    margin: 15px;
    float: left;
}

.video-thumbnail{
    display: inline-block;
    width: 150px;
    height: 100px;
    padding: 5px;
    margin-right: 15px;
    background-color: black;
    float: left;
    text-align: center;
    color: white;
}

.video-thumbnail .default-play-icon{
    font-size: 85px;
}

.video-desc{
    display: inline-block;
    padding: 5px;
    float: left;
    width: 300px;
}

.server-access-status{
    width: 200px;
    padding: 3px;
    position: absolute;
    top: 0px;
    left: calc(50% - 100px);
}

.status-message{
    position: absolute;
    top: 0px;
    left: calc(50% - 100px);
    background-color: #EEEEEE;
    border: #AAAAAA;
    padding: 2px 4px;
}

.status-message.bold{
    background-color: #555;
    color: white;
}

#server-accessible{
    background-color: #10F410
}

#server-inaccessible{
    background-color: red;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

#help-tips{
    width: 80%;
    margin: auto
}

#help-tips .section {
    border: solid 1px black;
    padding: 15px;
    background-color: lightgrey;
    margin-top: 10px;
    margin-bottom: 10px;
}

#help-tips .section-title{
    font-size: 1.8em;
    margin: 10px 0px;
}

#help-tips .task .title{
    font-size: 1.2em;
}

#help-tips .task .actionset{
    padding: 10px;
    margin: 0px;
}

#help-tips .task .action{
}

.template-list-container{
    height: 300px;
    overflow: auto;
}

.child-template-option{
    width: 250px;
    height: 30px;
    border: solid 1px grey;
    overflow: hidden;
    margin: 5px 5px 5px 0px;
    text-align: center;
    vertical-align: middle;
    line-height: 30px;
    display: inline-block;
    background-color: lightgray;
    opacity: 0.8
}

.child-template-option:hover{
    border-color: black;
    opacity: 1
}

.child-template-option:active{
    border-color: grey;
    opacity: 0.8
}

#office-slide{
    background-color: rgba(0,0,0,0.9);
    width: 450px;
    height: 100%;
    position: fixed;
    right: 0px;
    top: 0px;
    z-index: 10;
    padding-top: 20px;
    color: white;
    overflow: auto;
}

#office-slide .panel{
    background-color: rgba(0,0,0,0.8);
    color: white;
}

.bill-item-container{
    margin-bottom: 5px;
}

.bill-item-info{
    display: inline-block;
    padding-right: 10px;
    width: 20%;
    min-width: 30px;
}

.bill-item-service-name{
    width: 38%;
    min-width: 150px;
}

.jsonform-stretchable-wrapper{
    position: relative;
    height: 500px;
    width: 90%;
}

.jsonform-stretchable-wrapper.stretched{
    position: fixed;
    z-index: 15;
    top: 20px;
    bottom: 20px;
    left: 20px;
    right: 20px;
    background-color: white;
    border: solid 2px black;
    height: auto;
}

.jsonform-stretchable-wrapper .header{
    width: 100%;
    height: 35px;
    background-color: #020202;
    margin-top: 0px;
}

.jsonform-stretchable-wrapper .header button{
    float: right;
    background-color: #0078ae;
    color: white;
    height: 100%;
}

.stretch-div{ 
    position: fixed;
    height: 100%;
    top: 0px;
    left: 0px;
    width: 100%;
    /* right: 0px; */
    /* bottom: 0px; */
    z-index: 3;
}

.stretch-div iframe{
    width: 100%;
    height: 100%;
    border: none;
}

.jsonform-file-upload-label{
    display: inline-block;
    border: solid 1px black;
    border-radius: 2px;
    padding: 5px;
}

.jsonform-file-upload-label:hover{
    background-color: grey;
}

.jsonform-file-upload-label input[type="file"] {
    display: none;
}

.jsonform-overlay{
    display: none;
    background-color: #333;
    position: fixed;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
}

.block-template{
    display: none;
}

.labelled-input-set > label{
    display: block;
}

.labelled-input-set > label > span{
    width: 300px;
    display: inline-block;
    text-align: right;
}

.labelled-input-set textarea{
    vertical-align: middle;
}

.chat-select-user-container{
    display: block;
    text-decoration: none !important;
    padding: 5px 10px;
    background-color: #1EB2A6;
    color: white !important;
    margin-bottom: 5px;
    border-radius: 3px;
}

.chat-select-user-container:hover,
.chat-select-user-container:active,
.chat-select-user-container:visited{
    text-decoration: none;
}

.chat-select-office{
    text-align: right;
    font-size: 12px;
    line-height: 13px;
    color: black;
}

.jsonform-type-list tbody.sortable tr:hover{
    cursor: move;
}

.jsonform-phrase-group-good{
    background-color: #17fb1763;
}

.jsonform-phrase-group-warn{
    background-color: #ffff0073;
}

.lab-requested-service.paid{
    color: green;
    font-weight: bold;
}

button.store-action{
    width: 30px;
    height: 30px;
    padding: 0px;
    margin: 0px 4px;
    border-radius: 50%;
    background: none;
    color: black;
}

button.store-action:hover{
    background: grey;
    color: white;
}

.nav .menu-active{
    color: red;
}