html {
    font-size: 10px;
}

@media (min-width: 1200px) {
    html {
        font-size: 12px;
    }
}

html {
    position: relative;
    min-height: 100%;
}

body {
    margin-bottom: 60px;
}

.StaffIndex tr:hover {
    background-color: yellow;
}

.table-full-width {
    width: 100%;
}

.table-center {
    margin-left: auto;
    margin-right: auto;
}

.table-left {
    margin-left: 0;
    margin-right: auto;
}

textarea {
    overflow: auto;
    contain-intrinsic-height: auto;
}



table .w-10 {
    width: 10%;
}

table .w-75 {
    width: 75%;
}
/*
table .w-30 {
    width: 30%;
}

table .w-50 {
    width: 50%;
}

    */

tr:nth-child(even) {
    background-color: #f2f2f2;
}

.center {
    margin-left: auto;
    margin-right: auto;
}

td.client-index-td {
    padding: 5px;
    border-top: 1px solid red;
}

td.client-SCindex-td {
    padding: 10px;
    border: 1px solid black;
}

dl {
    /*width: 750px;
    border: 2px solid saddlebrown;
    padding: 10px;*/
}

dt {
    /*float: left;
    clear: left;
     width: 200px;
    text-align: left;
    border: 2px solid saddlebrown;*/
    padding: 10px;
    text-align: left;
    vertical-align: middle;
    /*border-radius: 0.25rem !important;*/
}

/*dt::after {
        content: " - ";
    }*/

hr.initial-incident {
    border-top: 2px solid;
    border-color: blue;
    padding: 1px;
    background-color: white;
}

/*Client Editing CSS*/

#min {
    display: inline;
}

a:hover {
    background-color: lightskyblue;
    /*color: white;*/
    /* text-transform: uppercase; */
}

.Client-input-table {
    float: left;
    clear: left;
    text-align: left;
    border: 3px solid Red;
    padding: 10px;
}

tr.clienthover:hover {
    background-color: paleturquoise;
}

tr.clientrow {
    /*height: 100px;
    background-color: beige;*/
}

tr.clientHeader {
    height: 100px;
    background-color: aliceblue;
}

label {
    /*display: flex;*/
    flex-direction: column;
    text-align: center;
    font-weight: bold;
    color: royalblue;
}

input {
    display: flex;
    flex-direction: column;
}

.container iir-index {
    font-size: 5vw;
}

.content-right {
    max-height: 80vh;
    overflow-y: auto;
}
/**************INCIDENT EDIT CSS ONLY ****************/

#btn-hidden {
    visibility: hidden;
}

.incident-display-only {
    /*background-color: ghostwhite;*/
    font-weight: bold;
}

.incident-center-display {
    text-align: center;
    padding: 10px;
}

.incident-heading {
    /*font-weight: bold;*/
    /*color: blue;*/
    text-align: center
}

.allow-center {
    display: inline-block;
}

.hidden {
    visibility: hidden;
}

.td-index-item {
    /*border-radius: 0.25rem !important;*/
    /*border-color: red !important;*/
}

label.incident-label0 {
    text-decoration: underline;
    color: darkblue;
}

label.incident-label1 {
    background-color: rgb(242, 242, 242);
    text-decoration: underline;
    color: darkblue;
}

div.incident-label1 {
    background-color: rgb(242, 242, 242);
    text-align: center;
    border: solid 1px;
    padding: 5px;
}

div.incident-label2 {
    background-color: rgb(242, 242, 242);
    text-align: justify-all;
    border: solid 1px;
    padding: 5px;
}

div.incident-label3 {
    background-color: rgb(242, 242, 242);
    text-align: center;
    border: solid 1px;
    padding: 5px;
}

div.incident-label4 {
    text-align: center;
    padding: 5px;
}

/*

    TABS styling

*/

.ui-tabs .ui-tabs-active {
    background-color: blue;
}

tabs-nohdr {
    padding: 0px;
    background: none;
    border-width: 0px;
}

    tabs-nohdr .ui-tabs-nav {
        padding-left: 0px;
        background: transparent;
        border-width: 0px 0px 1px 0px;
        -moz-border-radius: 0px;
        -webkit-border-radius: 0px;
        border-radius: 0px;
    }

    tabs-nohdr .ui-tabs-panel {
        background: #f5f3e5 url(https://code.jquery.com/ui/1.8.23/themes/south-street/images/ui-bg_highlight-hard_100_f5f3e5_1x100.png) repeat-x scroll 50% top;
        border-width: 0px 1px 1px 1px;
    }


/*****************************************************/
.dt-label {
    display: block;
}

.dt-input {
    clear: left;
    text-align: left;
    /*border: 3px solid Red;*/
    padding: 10px;
    /* display: block;*/
}

.dt-inputright {
    float: right;
    /* clear: left;*/
    text-align: right;
    /*border: 3px solid Red;*/
    padding: 10px;
    display: block;
}

.dt-inputcenter {
    /*margin: auto;
    width: 80%;*/
    /* clear: left;*/
    /*display:block;*/
    text-align: center;
    /*border: 3px solid Red;*/
    padding: 10px;
}

.dtw-100p {
    width: 100px;
    /*border: 1px solid Red;*/
}

.dtw-150p {
    width: 150px;
    /*border: 1px solid Blue;*/
}

.dtw-200p {
    width: 200px;
    /*border: 1px solid Green;*/
}

.dtw-250p {
    width: 250px;
    /*border: 1px solid Yellow;*/
}

.dtw-300p {
    width: 300px;
    /*border: 1px solid Orange;*/
}

.dtw-400p {
    width: 300px;
    /*border: 1px solid Orange;*/
}

.dtw-500p {
    width: 300px;
    /*border: 1px solid Orange;*/
}

/*dd {
    border: 2px solid saddlebrown;
    padding: 10px;
    text-align: left;
}*/


thead.sticky2 tr {
    padding: 5px;
    font-size: 12px;
    text-align: center;
}
/* The sticky class is added to the header with JS when it reaches its scroll position */
.stickyx {
    position: -webkit-sticky;
    position: sticky;
    background-color: white;
    top: 0;
    width: 100%;
}

#myBtn {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 30px;
    z-index: 99;
    font-size: 18px;
    border: none;
    outline: none;
    background-color: red;
    color: white;
    cursor: pointer;
    padding: 15px;
    border-radius: 4px;
}

    #myBtn:hover {
        background-color: #555;
    }

.RBDiv {
    display: grid;
    grid-template-columns: auto auto auto auto auto auto auto
}

    .RBDiv > button {
        grid-area: 4/4;
    }

._fillModal {
    padding-right: 10px;
}

.clientInfoRow {
    padding-top: 2px;
    padding-bottom: 2px;
}

.table-font-12 {
    font-size: smaller;
}

@media only screen and (max-width: 600) {
    body {
        background-color: lightblue;
        width: 1280px;
        max-width: 100%;
        overflow: visible;
        overflow: auto
    }
}

@media screen {
    p.bodyText {
        font-family: verdana, arial, sans-serif;
    }
}

@media print {
    p.bodyText {
        font-family: verdana, arial, sans-serif;
        font-size: smaller;
    }

    .pagination {
        clear: both;
        page-break-after: always;
    }

    .noPrint {
        display: none;
    }

    .printMe {
        display: block;
    }
}

.scroll_me {
    overflow-x: auto;
}

.underline {
    text-decoration: underline;
}

.strong {
    font-weight: bold;
}

.td-index-item {
    padding: 5px;
}

.window-overflow {
    /*overflow-x: auto;
    overflow-y: auto;*/
    max-height: 95vh;
    max-width: 100%;
    white-space: nowrap;
    overflow: visible;
    overflow: auto;
}

#rosterTable {
    width: 200%;
    table-layout: fixed;
    max-height: 95vh;
    max-width: 100%;
    white-space: nowrap;
    overflow: visible;
    overflow: auto;
}

.dt-date-column {
    width: 5% !important;
    /*border: 2px solid blue;*/
}

.dt-notes-column {
    width: 8% !important;
    /*border: 2px solid red;*/
}

.systemBackground {
    background-color: azure;
}

/*@media (max-width: 768px) {
    html, body {
        width: 1920px !important;
        overflow-x: hidden !important;
    }
}*/

/* Tooltip container */
.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}

    /* Tooltip text */
    .tooltip .tooltiptext {
        visibility: visible;
        /*//width: 120px;*/
        background-color: palegoldenrod;
        color: red;
        text-align: center;
        padding: 5px 0;
        border-radius: 6px;
        /* Position the tooltip text - see examples below! */
        position: absolute;
        z-index: 1;
    }

    /* Show the tooltip text when you mouse over the tooltip container */
    .tooltip:hover .tooltiptext {
        visibility: visible;
    }

.textarea {
    border: 1px solid #ccc;
    font-family: inherit;
    font-size: inherit;
    padding: 5px 5px;
}

.width-machine {
    /*   Sort of a magic number to add extra space for number spinner */
    padding: 0 1rem;
}

.textarea {
    display: block;
    width: 100%;
    overflow: hidden;
    resize: both;
    min-height: 40px;
    //line-height: 20px;
    height:auto;
}

    .textarea[contenteditable]:empty::before {
        /*content: "Placeholder still possible";*/
        /*color: gray;*/
    }

.circle {
    height: 100px;
    width: 100px;
    background-color: #555;
    border-radius: 100%;
}

.btn-circle.btn-sm {
    width: 30px;
    height: 30px;
    padding: 6px 0px;
    border-radius: 15px;
    font-size: 8px;
    text-align: center;
}

.btn-circle.btn-md {
    width: 50px;
    height: 50px;
    padding: 7px 10px;
    border-radius: 25px;
    font-size: 10px;
    text-align: center;
}

.btn-circle.btn-lg {
    width: 100px;
    height: 100px;
    padding: 7px 10px;
    border-radius: 50px;
    font-size: 20px;
    text-align: center;
}

.btn-circle.btn-xl {
    width: 200px;
    height: 200px;
    padding: 10px 16px;
    border-radius: 100px;
    font-size: 48px;
    text-align: center;
}

.sideBySide {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.MinWidthWrapper {
    min-width: 1200px;
}

.Padding5 {
    padding-left: 10px;
    padding-right: 10px;
}

.Padding5Top {
    padding: 10px;
}

.ColBackGroundLightGrey {
    background-color: lightgray;
}

/* Personal Profile CSS*/
.pp_textarea {
    border: 1px solid lightskyblue;
    background-color: whitesmoke;
}

.pp_textarea {
    display: block;
    width: 100%;
    overflow: hidden;
    resize: both;
}

/* ***********************************************

    FOR CANVAS 
    **********************************************
*/
canvas {
   /* box-shadow: -3px 2px 9px 6px black;*/
    border: 1px solid black;
    cursor: pointer;
}

.tools {
    display: flex;
    justify-content: left;
    flex-direction: row;
    margin-top: 15px;
    }

    .tools .color-field {
        height: 40px;
        width: 40px;
        min-height: 40px;
        min-width: 40px;
        cursor: pointer;
        display: inline-block;
        box-sizing: border-box;
        border-radius: 50%;
        border: 2px solid white;
        margin: 0 5px;
        padding-right: 25px;
    }

    .tools .button {
        align-self: start;
        width: 50px;
        height: 30px;
        border: 2px solid white;
        color: white;
        cursor: pointer;
        background: royalblue;
        font-weight: bold;
        padding-right: 25px;
        margin-right: 25px;
    }

.color-picker {
    align-self: center;
    margin: 0 10px;
    height: 50px;
}

.pen-range {
    align-self: center;
    margin: 0 10px;
}


/* ***********************************************

    FOR TEXTAREA  - SupportPlanDetals
    **********************************************
*/


textarea {
    field-sizing: content;
}

/* ***********************************************/

/* for the Incident Reporting Table*/

/* ***********************************************/
.ir-table {
    /*table-layout: fixed;*/
    width: 150%;
    overflow: scroll;
    white-space: normal;
    font-size: 10px;
}
.ir-header {
        max-width: 30%;
        background-color: aqua !important;
}
.ir-col {
    max-width: 20%;
    white-space:pre-line !important;
    vertical-align: middle !important;
}
.ir-col-colour0 {
    color: black;
    background:white !important;   
}
.ir-col-colour1 {
    color: black;
    background-color: #d1ffcd !important;
}
.ir-col-colour2 {
    color: black;
    background-color: #c8fcfc !important;
}

/******************************

    For Bodymap inside initial incident
*/
/*.BodyMapImage {
    position: relative;
    left: 50%;
    -ms-transform: translateX(-50%);*/ /** old IE **/
    /*-webkit-transform: translateX(-50%);*/ /** iOS safari ***/
    /*transform: translateX(-50%);
}*/

    /* for ISupport Input*/
.iSupport-Input {
    font-family: arial, Tahoma, sans-serif;
    font-size: smaller;
}