:root {
    --ops-color: #C4AC5D;
    --neutral-state-color: #6B757C;
    --negative-state-color: #FA3E3E;
    --positive-state-color: #89BE49;
    --warning-state-color: #F6C33A;
    --primary-button-color: #383838;
    --list-hover-color: #DAD3AA;
    --list-header-color: #E3E3E3;
    --list-default-color: #CED4DA;

    --focus-color: var(--primary-button-color);
    --edit-section-color : var(--list-hover-color);
}

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;

    font-family: Roboto, RobotoDraft, Helvetica, Arial, sans-serif;
    font-size: 14px;
}

/** Base Styles for Flex panels */
.resizer {
    background-color: var(--ops-color);
    cursor: ew-resize;
    height: 100%;
    width: 5px;
    /*opacity: 0.5;*/
}

.wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    max-height: 100vh;
    padding: 0px 5px 0px 5px;
    box-sizing: border-box;
}

.flex-left-panel {
    display: flex;
    flex-direction: column;
    overflow: auto;
    width: 100%;
    padding-right: 10px;
    box-sizing: border-box;
}

.row-wrapper {
    flex-grow: 1;
    display: flex;
    flex-direction: row;
    /* added */
    min-height: 0;
}

.footer {
    height: 40px;
    background-color: red;
}

.col-wrapper {
    width: 400px;
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    overflow: auto;
    padding-left: 10px;
    padding-right: 5px;
    box-sizing: border-box;
}

.content {
    flex-grow: 1;
}

/** Standard Elements */

select {
    font: 13px "Helvetica Neue", HelveticaNeue, Verdana, Arial, Helvetica, sans-serif;
}

button[button-type] {
    background-color: transparent;
    border-color: transparent;
}

button[button-type]:hover {
    cursor: pointer;
}

button {
    border-color: var(--ops-color);
    border-style: solid;
    border-width: 1px;
    border-radius: 4px;
    padding: 5px;
    background-color: white;
}

button:hover {
    background-color: var(--list-hover-color);
    border-color: var(--list-header-color);
    cursor: pointer;
}

button:hover:disabled {
    /*background-color: var(--list-hover-color);*/
    /*border-color: var(--list-header-color);*/
    /*cursor: pointer;*/
}



textarea {
    font-size: 13px;
    /*padding: 0px;*/
}

textarea.dragover {
    border: solid 2px #89BE49;
}

.icon-button:hover {
    cursor: pointer;
    color: var(--ops-color);
}

button.state-positive {
    background-color: var(--neutral-state-color);
    border-color: var(--primary-button-color);
    color: white;
}

button.state-positive:hover {
    opacity: 60%;
}

i.state-positive {
    color: var(--positive-state-color);
}

i.state-neutral {
    color: var(--neutral-state-color);
}

i.state-negative {
    color: var(--negative-state-color);
}

i.state-warning {
    color: var(--warning-state-color);
}

i.medium-icon {
    font-size: 20px;
}

span.state-positive {
    background-color: var(--positive-state-color);
}

.fa.fa-asterisk {
   color: var(--negative-state-color);
   font-size: 8px;
}

.notice-empty-text {
    font-style: italic;
    color: var(--neutral-state-color);
}

.header-tab {
    display: inline-block;
    padding: 4px 10px 2px 10px;
    background: var(--neutral-state-color);
    border: 1px solid #C0C0C0;
    border-bottom: none;
    border-radius: 4px 4px 0 0;
    margin-right: 1px;
    color: white;
    text-decoration: none
}

/* Data table styles */

.datatable {
    font: 12px "Helvetica Neue", HelveticaNeue, Verdana, Arial, Helvetica, sans-serif;
}

.datatable tbody tr:nth-child(even):hover td,
.datatable tbody tr:nth-child(odd):hover td {
    background-color: var(--list-hover-color);
    cursor: pointer;
}

/* Standard custom components */

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: #000;
    opacity: 0.5;
    z-index: 2;
    display: none
}

.progress {
    width: 100%;
    background-color: gray;
}

.progress-bar {
    width: 100%;
    background-color: #89BE49;
}


/** Standard editable section styles */
div.editable-section:hover {
    background-color: var(--list-hover-color)
}

div.editing, div.editing:hover {
    z-index: 1000;
    background-color:var(--list-hover-color);
    position: relative;
    box-shadow: 5px 5px 5px #C4AC5D;
}

div.editable-section:hover button[button-type="view"],
div.editable-section:hover button[button-type="start-edit"],
div.editable-section:hover button[button-type="delete"]
{
    display: inline;
}

div.editable-section button[button-type="view"],
div.editable-section button[button-type="start-edit"],
div.editable-section button[button-type="delete"],
div.editable-section button[button-type="cancel-edit"],
div.editable-section button[button-type="save-edit"],
div.creation-mode button[button-type="view"],
div.creation-mode button[button-type="start-edit"],
div.creation-mode button[button-type="delete"],
div.creation-mode button[button-type="cancel-edit"],
div.creation-mode button[button-type="save-edit"]
{
    display: none;
}

div.editable-section.editing button[button-type="cancel-edit"],
div.editable-section.editing button[button-type="save-edit"]
{
    display: inline;
}

div.editable-section.editing button[button-type="view"],
div.editable-section.editing button[button-type="start-edit"],
div.editable-section.editing button[button-type="delete"]
{
    display: none;
}

div.editable-section input,
div.editable-section select {
    border: 0px;
    background-color: transparent;
    font-size: 15px;
    font-weight: bold;
}

div.editable-section.editing input,
div.editable-section.editing select {
    font-size: 15px;
    border: 1px;
    background-color: white;
    font-weight: normal;
}

/* Base Fields */
#pane-base-assessment-fields {
    padding: 5px;
}

select.form-select.changed {
    background-color: var(--list-hover-color);
}

select.form-select {
    flex-grow: 1;
    padding: 5px;
    border-style: solid;
    border-color: var(--list-hover-color);
    border-width: 2px;
}

/* Comments section */
.comment-section {
    border-style: solid;
    border-width: 1px;
    /*border-color: #CACACA;*/
    border-color: #CACACA;
    border-radius: 3px;
    padding: 5px;
    margin-bottom: 7px;
    z-index: 1000;
    box-shadow: 5px 5px 5px #f1ecec;
}

.comment-section.comment-treated {
    background-color: #D5D5D5;
}

.comment-section:hover {
}

.comment-section-title {
    font-size: 13px;
}

.comment-text {
    padding-left: 12px;
    margin-top: 15px;
    padding-top: 8px;
    padding-bottom: 8px;
    margin-bottom: 10px;
}

.therapist-comment {
    border-color: var(--neutral-state-color);
    border-width: 1px;
    margin-inline-start: 10px;
}

#panel-add-comment {
    padding-right: 5px;
    padding-bottom: 10px;
    box-sizing: border-box;
}

.comment-controls {
    float: right;
}

.comments-attachments {
    margin-top: 4px;
    padding: 3px;
}

.comments-attachments a {
    font-size: 12px;
}

.comments-attachments:empty {
    display: none;
}

/** Assessment Upload Sections */
div.pane-assessment-file.creation-mode .content-view
{
    display: none;
}

div.pane-assessment-file.editable-section .content-edit
{
    display: none;
}

div.pane-assessment-file.editable-section.editing .content-edit,
div.pane-assessment-file.editable-section.creation-mode .content-edit
{
    display: inline;
}

div.editable-section.editing .file-type-icon {
    display: none;
}
div.editable-section.editing .file-type-icon.upload-icon {
    display: inline;
}

.pane-assessment-file {
    padding: 15px 5px;
}

div.pane-assessment-file a {
    font-size: 14px
}

div.pane-assessment-file .file-type-icon {
    font-size:35px;
    vertical-align: middle;
    padding-right: 5px;
}

.pane-assessment-file[file-type='pdf-report'] .file-type-icon:after {
    content: "\f1c1"; /* fa-file-pdf-o */
    color:red;
}
.pane-assessment-file[file-type='word-report'] .file-type-icon:after {
    content: "\f1c2"; /* fa-file-word-o */
    color:blue;
}

.pane-assessment-file[file-type='purchase-order'] .file-type-icon:after {
    content: "\f07a"; /* fa-file-pdf-o */
    color: var(--neutral-state-color);
}

.pane-assessment-file[file-type='footprint'] .file-type-icon:after {
    content: url(icon-footprint.png);
}

.pane-assessment-file[file-type='medical-prescription'] .file-type-icon:after {
    content: "\f0f1"; /* fa-stethoscope */
    color: var(--neutral-state-color);
}

.icon-ops-team {
    content: url(icon-ops.png);
    width: 22px;
    alignment: center;
}

.history-section {
    border-style: solid;
    border-width: 1px;
    border-color: #CACACA;
    border-radius: 3px;
    padding: 5px;
    margin-bottom: 7px;
    box-shadow: 5px 5px 5px #f1ecec;
}

.history-section-title {
    font-size: 13px;
}

.history-section-content {
    margin-top: 12px;
    font-size: 13px;
}

/* Style the tab */
.tab {
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
    padding: 5px;
}

/* Style the buttons that are used to open the tab content */
/*.tab button {*/
/*    background-color: inherit;*/
/*    float: left;*/
/*    border: none;*/
/*    outline: none;*/
/*    cursor: pointer;*/
/*    padding: 12px 12px;*/
/*    transition: 0.3s;*/
/*}*/

/* Change background color of buttons on hover */
.tab button:hover {
    background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
    background-color: var(--list-hover-color);
}

.order-section-header {
    background-color: #F5F5F5;
    padding: 5px 0px 5px 5px;
    border: var(--list-hover-color) solid 1px;
}

.order-section-title {
    font-weight: bold;
    font-size: 14px
}

.order-section-content {
    padding: 10px 0px 0px 10px
}

#pane-order-files.mixed-order {
    border: var(--warning-state-color) 2px solid;
}

.product-table {
    border-spacing: 15px;
    border-collapse: collapse;
    width: 100%;
}

.product-table th {
    padding: 6px 4px 6px 4px;
    text-align: left;
    background-color: var(--list-hover-color)
}

.product-table tr {
    border: 1px solid black;
}

.product-table tr td {
    padding: 10px 4px 10px 4px
}

.badge {
    font-size: 12px;
    border-radius: 15px;
    padding: 2px 6px;
    color: white;
    font-weight: bold;
    background-color: var(--neutral-state-color);
    user-select: none;
}

.badge.user {
    font-size: 13px;
    font-family: monospace;
    padding: 3px 4px;
    border-radius: 25px;
}

.badge.state-positive {
    background-color: var(--positive-state-color);
}

.badge.state-negative {
    background-color: var(--negative-state-color);
}

.cliquable:hover {
    cursor: pointer;
    opacity: 0.7;
}

/* Print the Order Data */
@media print {
    #top-bar,
    #flex-left-panel,
    #new-assessment-form,
    #pane-task-detail,
    #pane-order-details,
    #pane-erp-order-medical-prescription-file,
    #pane-erp-order-footprint-file,
    .medium-icon,
    hr,
    .tab {
        display: none;
    }
}

/* User status feedback */
.user-status-feedback {
    display: none;
    margin-left: 10px;
    font-size: 12px;
    font-style: italic;
    vertical-align: middle;
}

.user-status-feedback--success {
    color: var(--positive-state-color);
}

.user-status-feedback--error {
    color: var(--negative-state-color);
}