/**************************************
 * custom default styling (SciWalker) *
 **************************************/

html {
    scroll-behavior: smooth;
}

body {
    background: #ffffff;
    height: 100%;
    width: 100%;
    display: table;
}

/**
 * top bar
 */

.layout-wrapper .layout-main .layout-topbar {
    z-index: 500;
    height: 60px;
}

.layout-wrapper .layout-main .layout-topbar .layout-topbar-menu-wrapper .topbar-menu>li.profile-item {
    padding-top: 15px;
}

.layout-wrapper.layout-menu-horizontal .layout-main .layout-topbar .topbar-logo {
    margin-right: 15px;
}

.layout-wrapper.layout-menu-horizontal .layout-sidebar {
    /*top: 60px;*/
    z-index: 101;
}

.layout-wrapper.layout-menu-horizontal .layout-main .layout-breadcrumb {
    padding-top: 104px;
}

/**
 * page layout
 */

#root, .layout-wrapper {
    height: 100%;
    min-height: 100vh;
}

.layout-wrapper .layout-main .layout-topbar .mobile-logo {
    height: 50px;
}

/* ??? */

.layout-wrapper .layout-main .layout-content {
    padding: 17px 17px 10px 17px;
}

/*
.layout-content {
    background: white;
    min-height: calc(100vh - 150px);
}
*/

.layout-wrapper .layout-main {
    min-height: 100%;
    position: relative;
    margin: auto;
    /*padding-bottom: 40px;*/
}

.layout-wrapper .layout-main .layout-footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 50px;
    padding: 10px;
}

.layout-wrapper .layout-main .layout-footer .footer-text-left {
    float: left;
    margin-top: 4px;
}

.layout-wrapper .layout-main .layout-footer .footer-text-left span {
    vertical-align: middle;
}

.layout-wrapper .layout-main .layout-footer .footer-text-right {
    margin-top: 4px;
}

/**
 * page before configs are loaded: e.g. loading info, error message
 */

#initial-content {
    height: 100vh;
    width: 100vw;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    gap: 1rem;
    background-color: #F5F5F5;
}

#initial-content>div {
    font-size: 18px;
}

/**
 * panels
 */

body .p-panel .p-panel-titlebar {
    background-color: #455A64;
}

/**
 * buttons
 */

.buttonSmall.p-button, .buttonSmall>.p-button {
    height: 1.7em;
}

.buttonSmall.p-button .p-button-text, .buttonSmall>.p-button .p-button-text {
    line-height: 1.7em;
}

.buttonMedium.p-button, .buttonMedium>.p-button {
    height: 1.9em;
}

.buttonMedium.p-button .p-button-text, .buttonMedium>.p-button .p-button-text {
    line-height: 1.7em;
}

/**
 * table styles
 */

.oddRowStyle {
    background: white;
}

.evenRowStyle {
    background: #f4f4f4;
    border-top: 1px solid #cacaca;
    border-bottom: 1px solid #cacaca;
}

/**
 * width, height
 */

.width90perc {
    width: 90%;
}

.width100perc {
    width: 100%;
}

.widthAuto {
    width: auto;
}

.height100perc {
    height: 100%;
}

.overflowAuto {
    overflow: auto;
}

/**
 * undefined material icons
 */

.p-tree-loading-content .pi-spin {
    -webkit-animation: fa-spin 2s linear infinite;
    animation: fa-spin 2s linear infinite;
    animation: spin 2s linear infinite;
}

/*.pi.pi-spinner:before {
     "camera" | "rotate_right" | "sync"
    content: "sync";
}*/

.pi-spinner {
    font-family: "Material Icons";
    font-weight: normal;
    font-style: normal;
    font-size: 1em;
    display: inline-block;
    width: 1em;
    height: 1em;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
    font-feature-settings: "liga";
}

.pi.pi-face, .pi-bullet-filled, .pi-bubble-chart, .pi-ontology, .pi-check-circle, .pi-stop, .pi-info {
    font-family: "Material Icons";
    font-weight: normal;
    font-style: normal;
    font-size: 1em;
    display: inline-block;
    width: 1em;
    height: 1em;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "liga";
}

.pi.pi-bullet-filled:before {
    content: "fiber_manual_record";
}

.pi.pi-bubble-chart:before {
    content: "bubble_chart";
}

.pi.pi-bullet-outlined:before {
    content: "fiber_manual_record";
}

.pi.pi-ontology:before {
    content: "device_hub";
}

.pi.pi-check-circle:before {
    content: "check_circle";
}

.pi.pi-stop:before {
    content: "stop";
}

.pi.pi-info:before {
    content: "pi-info";
}

.pi.pi-restore:before {
    content: "restore";
}

.pi.pi-edit:before {
    content: "edit";
}

.pi.pi-library_books:before {
    content: "library_books";
}

.pi.pi-delete:before {
    content: "delete";
}

.pi.pi-translate:before {
    content: "translate";
}

.pi.pi-keyboard_arrow_left:before {
    content: "keyboard_arrow_left";
}

.pi.pi-keyboard_arrow_right:before {
    content: "keyboard_arrow_right";
}

/**
 * Background colors
 */

.bg-pink {
    background-color: #e91e63;
}

.bg-green {
    background-color: #7CB342;
}

.bg-yellow {
    background-color: #FFAC07;
}

.bg-orange {
    background-color: #FF9800;
}

.bg-dark-blue {
    background-color: #005594;
}

.bg-light-blue {
    background-color: #52a8e5;
}

.bg-dark-gray {
    background-color: #607D8B;
}

.bg-light-red {
    background-color: #F44336;
}

/**
 * boxes with colored headers
 */

/* for usage of icons with span tags instead of i tags */

.dashboard .task-box .task-box-header span.material-icons {
    float: right;
}

.task-box.shadowMedium {
    box-shadow: 1px 1px 5px #607D8B;
}

.task-box-header {
    color: white;
    font-weight: bold;
    font-size: larger;
}

.task-box .task-box-header.medium {
    padding: 5px 10px;
}

.task-box .task-box-header.small {
    padding: 3px 10px;
}

.task-box.task-box-pink .task-box-header {
    background-color: #e91e63;
}

.task-box.task-box-green .task-box-header {
    background-color: #40710A;
    /*#7CB342; #4a771a;*/
}

.task-box.task-box-yellow .task-box-header {
    background-color: #fc7e00;
    /*#FFAC07; #fc7e00*/
}

.task-box.task-box-orange .task-box-header {
    background-color: #FF9800;
}

.task-box.task-box-dark-blue .task-box-header {
    background-color: #005594;
}

.task-box.task-box-light-blue .task-box-header {
    background-color: #52a8e5;
}

.task-box.task-box-dark-gray .task-box-header {
    background-color: #455A64;
    /* #607D8B; */
}

.task-box.task-box-red .task-box-header {
    background-color: #F44336;
}

/**
 * accordion
 */

body .p-accordion .p-accordion-content {
    padding: 10px;
}

/**
 * links
 */

body a {
    cursor: pointer;
    color: #007fdb;
}

/*
body footer a, body main a {
    font-weight: bold;
}
*/

body a:hover {
    text-decoration: underline;
}

/** Focus: links */

/*
body a:focus {
    box-shadow: 0px 0px 3px #005594;
}
*/

/** Focus: buttons */

/*
body button:focus {
    border: 1px solid #005594;
    box-shadow: 0px 0px 3px #005594;
}

body div.tabview a[role='tab']:focus {
    border: 1px solid #005594;
    box-shadow: 0px 0px 3px red;
}
*/

/** Focus: Dropdown */

/*
body div.p-dropdown.p-component.dropdown.p-focus {
    padding: 3px;
    border: 1px solid #005594;
    border-bottom: none;
    box-shadow: 0px 0px 3px #005594;
}
*/

/** Focus: Calendar input field */

/**/

body .p-inputtext:focus {
    /*padding: 3px;*/
    border: 1px solid #005594;
    border-bottom: none;
    box-shadow: 0px 0px 3px #005594;
}

body .p-datatable .p-datatable-tbody>tr.p-highlight a, body .p-highlight a {
    color: white;
}

/**
 * spans looking like links
 */

span.link {
    color: #607D8B;
    cursor: pointer;
    text-decoration: none;
}

span.link:hover {
    text-decoration: underline;
}

/**
 * line breaks, line heights
 */

.breakWord {
    white-space: normal;
    /* IE */
    white-space: initial;
    /* Chrome, FF */
    overflow-wrap: break-word;
    /* IE, Chrome */
    word-wrap: break-word;
    /* FF */
}

.breakAll {
    word-break: break-all;
}

.increasedLineHeight {
    line-height: 1.5;
}

/**
 * other
 */

.overline {
    text-decoration: overline;
}

.displayNone {
    display: none;
}

.noBorder {
    border: none;
}

.overflowHidden {
    overflow: hidden;
}

.errorMessageBox {
    color: red;
    padding: 10px;
}

.infoMessageBox {
    color: #6D7C99;
    padding: 10px;
}

table tbody, table thead {
    white-space: normal;
    /* IE */
    white-space: initial;
    /* Chrome, FF */
    overflow-wrap: break-word;
    /* IE, Chrome */
    word-wrap: break-word;
    /* FF */
}

/**
 * Custom chem button icon.
 */

button.customAddChemIcon img {
    position: relative;
    top: -25px;
    left: -8px;
}

button.customAddConceptIcon img {
    /*position: relative;*/
    top: -23px;
    height: 14px;
    width: 14px;
    left: -5px;
}

/* input text placeholders */

input::placeholder {
    /*opacity: 0.5;*/
    color: #D6D6D6;
}

input.p-inputtext.p-component::placeholder {
    /*opacity: 0.1;*/
    color: #aaa;
}

ul.paddingSmall {
    padding-left: 20px;
    margin-top: 0px;
}

/**
 * Dropdown
 */

/*
 div.p-dropdown.p-component.dropdown.p-focus {
    padding: 3px;
    border: 1px solid #40710A;
    border-bottom: none;
 }
*/

body .p-highlight, body .p-datepicker table td>span.p-highlight {
    background-color: #40710A;
}

/*
 * progress bar
 */

body .p-progressbar .p-progressbar-value {
    background-color: #7CB342;
    color: #ffffff;
    border: 5px solid #607D8B;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    height: 10px;
}

body .p-progressbar {
    height: 10px;
}

.breakRow {
    width: 100%;
}


/**
 * Mini info overlay, e.g. for number of added structures.
 */

/* parent: <div style={{ display: 'inline-block', position: 'absolute' }}> ... */

/*
 .miniInfoOverlay {
    position: relative;
    top: -40px;
    left: 24px;
    width: intrinsic;
    width: -moz-max-content;
    width: -webkit-max-content;
    width: fit-content;
    height: 20px;
    font-size: 14px;
    text-align: center;
    z-index: 1000;
    border-radius: 20px;
    padding: 1px 5px;
    background: #FF9800;
    color: white;
    box-shadow: 1px 1px 3px #888;
 }
 */

/* REMOVE if fixed in preimereact/serenity */

/*
body .p-component-overlay {
    opacity: 1;
}
*/