@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');

html, body {
    font-family: Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

app {
    display: flex;
    flex-flow: column nowrap;
    height: 100vh;
}

.navbar.header-navbar {
    flex-grow: 0;
    flex-wrap: nowrap;
    border: none;
    background-color: inherit;
    border-radius: 0;
    height: 3.5rem;
    min-height: 3.5rem;
    box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.12);
    justify-content: flex-start;
}

.header-navbar .navbar-toggler {
    outline: none;
    border-radius: 0;
    padding-left: .75rem;
    padding-right: .75rem;
    align-self: stretch;
}

.header-navbar .navbar-toggler .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
    background-color: transparent !important;
    height: 2rem;
    width: 2rem;
}

.main {
    display: flex;
    flex-flow: row nowrap;
    flex-grow: 1;
    overflow: auto;
}

.sidebar {
    min-width: 300px;
    max-width: 300px;
    box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.16);
    transition: transform 0.1s ease-out;
    max-height: calc(100vh - 3.5rem);
    overflow: auto;
}

.content {
    /*max-width: 1100px; */
    max-width: 100%;
    padding: 1.1rem 2rem 0 2rem;
    flex: 1 1 auto;
}

.sidebar.collapse {
    display: none;
}

.sidebar.expand {
    display: block;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

.title {
    font-size: 1.1rem;
    text-overflow: ellipsis;
    overflow: hidden;
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

.app-sidebar > .nav-pills > .nav-item:first-of-type {
    /*padding-top: 1rem;*/
}

.app-sidebar > .nav-pills > .nav-item:last-of-type {
    padding-bottom: 1rem;
}

.app-sidebar .nav-pills > .nav-item a {
    border-radius: 0px;
    display: flex;
    align-items: center;
}

.app-sidebar > .nav-pills > .nav-item > a {
    font-size: 1rem !important;
    font-weight: 600 !important;
    padding: .25rem 1rem .25rem .125rem;
}

.fit-width {
    max-width: 100%;
}

@media (max-width: 1199.98px) {
    .main {
        min-width: 100vw;
        display: flex;
        flex-flow: column nowrap;
    }

    .sidebar {
        display: none;
    }

    .sidebar.expand {
        position: fixed;
        top: 3.5rem;
        left: 0;
        min-width: 100vw; 
        background-color: #fff;
        z-index: 1050;
    }

    .app-sidebar > .nav-pills > .nav-item:last-of-type {
        padding-bottom: 0;
    }
}

@media (max-width: 350px) {
    .title {
        font-size: inherit;
    }
}

/* Additions from here down */
/* Additions from here down */
/* Additions from here down */
/* Additions from here down */
/* Additions from here down */
/* Additions from here down */
/* Additions from here down */

/* hide and show */
.hidden { 
    display: none;
}

.unhidden {
    display: inline-block;
}

/* portal dashboard  */
.gridlayout-item, .gridlayout-table-item {
    font-size: 1.2em;
    font-weight: 500;
    text-align: center;
    height: 100%;
    padding: 0.5rem;
    text-align: center;
    position: relative;
    z-index: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .gridlayout-item:before, .gridlayout-table-item:before {
        content: " ";
        position: absolute;
        z-index: -1;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        opacity: 0.4;
    }

.gridlayout-table-item {
    width: 100%;
}

.gridlayout-header:before {
    background-color: var(--red);
}

.gridlayout-content:before {
    /*background-color: var(--yellow); */
    background-color: #f0f0f0;
}

.gridlayout-left-side-bar:before {
    background-color: var(--green);
}

.gridlayout-right-side-bar:before {
    background-color: var(--info);
}

.gridlayout-footer:before {
    /*background-color: var(--blue);
    opacity: 0.5;*/
    background-color: #f0f0f0;
}

@media (max-width: 575.98px) {
    .gridlayout-item {
        font-size: 0.9em;
    }
}

.dashitem {
    display: block;
    color: #555555;
    text-align: center;
    padding: 20px;
    margin-bottom: 20px;
}

.dashitem-counter {
    font-size: 2em;
    font-weight: bold;
}

.dashitem-title {
    text-transform: uppercase;
    font-size: 1.5em;
    font-weight: bold;
    color: #555555;
}

.dashitem-img {
    margin: 10px auto 10px auto;
    width: 50px;
}

.dashtitle {
    color: #555555;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 1.5em;
}

/* navigator logout button area */
.nav-logout-area
{
    padding: 15px 0 15px 35px;
}

/* navigator farm selector */
.nav-farm-selector
{
    padding: 15px;
    margin-bottom: 20px;
}

/* colours */
.tgs-lighter-font {
    color: #555555;
}

.fullwidth { width: 100%; }

/* tgs backgrounds */
.tgs-bg-green {
    background-color: #629d42;
}

.tgs-bg-banana {
    background-color: #f0ff00;
}

.tgs-bg-metagen {
    background-color: #90e0ef;
}

.tgs-bg-mcs {
    background-color: #97d003;
}

.tgs-bg-sample {
    background-color: #f7f7f7;
}
/* grids */

/*
.tgs-grid th {
    background-color: #c0c0c0;
    color: #555555;
    text-align: left;
    font-size: 1.2em;
}

.tgs-grid th span {
    color: #555555;
}

.tgs-grid td {
    font-size: 1.1em;
}
*/

/* cards */
/*
.tgs .card
{
    background-color: transparent;
    border: none;
}

.tgs .card-header
{
    background-color: #555555;
    font-weight: bold;
    color: #f7f7f7;
}
    */

/* fixed sizes */
.fixed-height-md
{
    height: 220px !important;
}

.fixed-height-lg
{
    height: 320px !important;
}

/* selection bars */
.selection-header
{
    background-color: rgba(0,0,0,0.5);
    color: #ffffff;
}

.selection-bg
{
    background-color: rgba(0,0,0, 0.1);
}

.same-line{
    display: inline-block;
    margin-right: 20px;
}

.max-width-form-control {
    max-width: 300px;
}

.force-uppercase { 
    text-transform: uppercase;
}

.pest-summary-grid, .rts-grid {

}

    .pest-summary-grid thead, .rts-grid thead 
    { 
        /* set a background colour here */

    }

        .pest-summary-grid thead > tr th, .rts-grid thead > tr th {
            -ms-writing-mode: tb-rl;
            -webkit-writing-mode: vertical-rl;
            -moz-writing-mode: vertical-rl;
            -ms-writing-mode: vertical-rl;
            writing-mode: vertical-rl;
            transform: rotate(-180deg);
        }

.dxbs-gridview > .card .dxbs-table > thead {
    border: 3px solid #dee2e6;
}

    .dxbs-gridview > .card .dxbs-table > thead > tr > th {
        height: 180px;
        border: 2px solid #dee2e6;
    }


.tgs-grid > .card .dxbs-table > thead > tr > th {
    height: 40px;
}

.tgs-grid > .card .dxbs-table {

}

    .tgs-grid > .card .dxbs-table > thead {
        border: 5px solid #dee2e6;
    }
        .tgs-grid > .card .dxbs-table > thead > tr > th {
            border: 3px solid #dee2e6;
            background-color: #dee2e6;
        }



.pest-summary-grid thead > tr th:nth-child(1) {
    /*
            text-align: left;
            -ms-writing-mode: lr-tb;
            -webkit-writing-mode: horizontal-tb;
            -moz-writing-mode: horizontal-tb;
            -ms-writing-mode: horizontal-tb;
            writing-mode: horizontal-tb; */
}

button.accordion-button, button.accordion-button.collapsed {
    font-size: 0.7em;
}

.action-group {
    font-weight: bold;
    padding: 0 0 5px 0;
    margin: 0;
}

.action {
    padding: 0 0 10px 10px;
    margin: 0;
}

.tgs-column-legend {
    border: 1px solid silver;
    margin-top: 10px;
}

.tgs-key {
    line-height: 25px;
    padding: 10px;
    border: 1px solid silver;
    display: inline-block;
}

.tgs-key-colour
{
    display: inline-block;
    width: 25px;
    height: 25px;
    vertical-align: middle;
    text-align: center;
}

.tgs-key-desc {
    display: inline-block;
    margin-left: 10px;
    font-size: 0.8em;
}

.dashitem a {
    text-decoration: none;
}

.dashitem a:hover {
    text-decoration: underline;
}


/* survey selector combobox */
.cb-survey-item-template {
    display: flex;
    align-items: center;
}

.cb-survey-item-template-text {
    display: flex;
    flex-flow: column;
}

.cb-survey-item-template-text-major {
    font-weight: bold;
}

.cb-survey-item-template-text-minor {
    opacity: 0.65;
}

/* page buttons */
.pab-item {
    margin: 5px;
}

/* drag drop file */
.custom-drop-zone {
    padding: 0 !important;
    border-style: dashed !important;
    border-width: 2px !important;
    height: 230px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

    .custom-drop-zone.custom-drag-over {
        background-color: #868A8D;
    }

    .custom-drop-zone img {
        width: 42px;
        height: 42px;
    }