@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&family=Nunito:ital,wght@0,200..1000;1,200..1000&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');


/* General */
:root {
    --col-blue: #00377d;
    --col-dblue: #001c41;
    --col-mblue: #00B8EF;
    --col-lblue: #cef3ff;
    --col-green: #008F45;
    --col-lgreen: #D6FFEA;
    --col-llgreen: #e5fff1;
    --col-dgreen: #006631;
    --col-purple: #be1d75;
    --col-dpurple: #6e0a41;
    --col-lpurple: #F9DCED;
    --col-dgrey: #232323;
    --col-grey: #7f7f7f;
    --col-lgrey: #e7e7e7;
    --col-llgrey: #fefefe;
    --col-mgrey: #cdcdcd;
    --col-red: #A2021A;
    --col-dred: #5a010e;
    --col-lred: #f8d7da;
    --col-white: #FCFCFC;
    --col-black: #2D3142;
    --col-orange: #EF3700;
    --col-dorange: #9e2500;
    --col-lorange: #FFE3C2;
    --col-llorange: #fff1e2;
    --col-teal: #31929B;
    --col-lteal: #7dccd3;
    --col-dteal: #1c5358;
    --col-lilac: #8D99AE;
    --col-llilac: #dcdfe4;
    --col-dlilac: #596780;
    --col-pink: #EF6C80;
    --col-lpink: #ffc2cb;
    --col-dpink: #d6243f;
    --col-gold: #FFBE0B;
    --col-lgold: #fce4a1;
    --col-dgold: #daa000;
    --col-burg: #7D1D3F;
    --col-lburg: #ffc9dc;
    --col-dburg: #640023;
    --col-basecol: var(--col-blue);
    --col-basecol-light: var(--col-lblue);
}

.dropdown-menu {
    --bs-dropdown-font-size: 1.17em;
}


@font-face {
    font-family: "LDNKono";
    font-style: normal;
    font-weight: 500;
    src: url("LDNKono-Medium.woff") format("woff");
}

@font-face {
    font-family: "LDNKono";
    font-style: italic;
    font-weight: 500;
    src: url("LDNKono-MediumItalic.woff") format("woff");
}

@font-face {
    font-family: "LDNKono Bold";
    font-style: normal;
    font-weight: normal;
    src: url("LDNKono-ExtraBold.woff") format("woff");
}

@font-face {
    font-family: "LDNKono";
    font-style: normal;
    font-weight: bold;
    src: url("LDNKono-Bold.woff") format("woff");
}

@font-face {
    font-family: "LDNKono";
    font-style: italic;
    font-weight: bold;
    src: url("LDNKono-BoldItalic.woff") format("woff");
}

html, body {
    height: 100%;
    font-family: 'Nunito Sans', 'Open Sans', Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-weight: normal;
}

body,
p,
text {
    color: var(--col-black);
    text-underline-offset: 2px;
}

/* @import url('https://fonts.googleapis.com/css?family=Quicksand:300,500'); */

/* @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap'); */
/* @import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@700&display=swap'); */

/* @import url('https://fonts.cdnfonts.com/css/segoe-pro');     */

/* @import url('smoothbox.css'); */

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--col-basecol);
    margin-bottom: 1vh;
    font-family: 'Nunito Sans', 'Open Sans', Arial, Helvetica, sans-serif;
    font-weight: bold;
}

th {
    font-family: 'Nunito Sans', 'Open Sans', Arial, Helvetica, sans-serif;
    font-weight: bold;
}

h1 {
    font-size: 2.125rem;
    color: var(--col-basecol);
}

h2 {
    font-size: 1.875rem;
    color: var(--col-basecol);
}

h3 {
    font-size: 1.5em;
    color: var(--col-basecol);
}

h4 {
    font-size: 1.25em;
    color: var(--col-basecol);
}

h5 {
    font-size: 0.83em;
    color: var(--col-basecol);
}

h6 {
    font-size: 0.67em;
    color: var(--col-basecol);
}

.fleft {
    float: left;
}

.fright {
    float: right;
}

a {
    color: var(--col-dblue);
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    /* text-decoration: none; */
    text-underline-offset: 2px;
    display: inline-block;
    padding: 2px;
}

a:hover {
    text-decoration: none;
    display: inline-block;
    background: var(--col-gold);
    color: var(--col-dblue);
}

a.list-group-item {
    text-decoration: underline;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

a.list-group-item:hover {
    text-decoration: none;
}

a.accordion-header,
a.accordion-header:hover {
    display: block;
    padding: 0;
    text-decoration: none;
}

a.fc-event,
a.fc-event:hover {
    display: block;
    text-decoration: none;
}

.fc-toolbar button {
    text-transform: capitalize;
}

.content-wrap {
    border-top: 3px solid var(--col-basecol);
}

.the-content :not(ul, li, tr, td, th, table) a:not([class]) {
    /* background: #f3f3f3;
    padding: 0;
    margin: 0;
    border-bottom: 2px solid #999;
    border-radius: 2px; */
}

.the-content :not(ul, li, tr, td, th, table) a:not([class]):hover {
    /* display: inline-block; */
    background: var(--col-gold);
    color: var(--col-black);
    /* border-bottom: 2px solid var(--col-black);
    padding: 5px;
    margin: -5px; */
}

.modal-backdrop {
    --bs-backdrop-bg: var(--col-dblue);
    --bs-backdrop-opacity: 0.9;
}


/* Command and Control */
.incident .row {
    border-bottom: 1px solid var(--col-mgrey);
}


/* .container {padding: 0; margin: 0;} */

.clr {
    clear: both;
}

#header23 .row {
    margin: 0;
}

#header23 .row.top {
    background: #ffffff;
    display: flex;
}

#header23 .row .cell {
    margin: 0 !important;
    padding: 5px 15px !important;
    text-align: center;
}

#header23 .search {
    width: auto;
}

#header23 .flex {
    display: flex;
    flex-direction: row;
    align-items: center;
    align-content: center;
    justify-content: center;
}

#bodyright {
    margin-left: 4.5rem;
}

#bodyleft.sidebar {
    width: 4.5rem;
    background: var(--col-dblue);
    display:block;
}

.fc .fc-daygrid-day-frame:hover {
    background: var(--col-lgold);
}

#favlinkst {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 5;
    background: none !important;
    border: none !important;
    padding: 0;
}

#favlinkst1 {
    position: absolute;
    top: 20px;
    right: 70px;
    z-index: 5;
    background: none !important;
    border: none !important;
    padding: 0;
}

#feedback {
    position: absolute;
    top: 20px;
    left: calc(20px + 4.5rem);
    z-index: 5;
    background: none !important;
    border: none !important;
    padding: 0;
}

#favlinkst:hover {
    background: rgb(231, 231, 231) !important;
    border: none !important;
}

#favlinkst1:hover {
    background: rgb(231, 231, 231) !important;
    border: none !important;
}

#feedback:hover {
    background: rgb(231, 231, 231) !important;
    border: none !important;
}

.iconcbox {
    padding: 1vh 2vh;
    margin: 1vh;
    color: #fff;
    border-radius: 5px;
    text-align: center;
    cursor: pointer;
}

.iconcbox i {
    font-size: 250%;
    padding-bottom: 1vh;
}

.iconcbox:hover {
    background: rgb(231, 231, 231) !important;
    color: #6f6f6f;
}

.iconcbox.active {
    background: #b8daff !important;
    color: var(--col-blue);
}

/* 2021 Styling */

.headertop {
    background: var(--col-white);
    min-height: 110px;
    display: flex;
    flex-wrap: wrap;
    text-align: center;
}

.headertop img {
    line-height: 110px;
}

.headerrow {
    padding: 10px;
    color: var(--col-white);
    text-align: center;
}

.the-content {
    background: var(--col-white);
    border-radius: 5px;
    padding: 40px;
    margin: 30px auto;
}

#autosubmenu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    row-gap: 3px;
}

#autosubmenu ul li {
    margin: 0;
    padding: 0;
}

#autosubmenu ul li a {
    text-align: center;
    color: var(--col-black);
    display: flex;
    background: var(--col-white);
    border: 1px solid var(--col-grey);
    padding: .375rem .75rem;
    /* font-size: 1.1rem; */
    margin: 0.25vh 0.25vw;
    border-radius: 5px;
    /* text-transform: uppercase; */
    height: 100%;
    justify-content: center;
    align-items: center;
}

#autosubmenu ul li a i {
    color: var(--col-white);
    border-radius: 100em;
    height: 50px;
    width: 50px;
    line-height: 50px;
}


#autosubmenu ul li a:hover,
#autosubmenu ul li a.active {
    background: var(--col-basecol) !important;
    text-decoration: none;
    color: var(--col-white) !important;
    border: 1px solid var(--col-grey);
}

#autosubmenu ul li a.current {
    background: var(--col-orange) !important;
    text-decoration: underline;
    color: var(--col-white);
    border: 1px solid var(--col-dorange);
}

#autosubmenu ul li a.current:hover {
    background: var(--col-dorange) !important;
    text-decoration: none;
    color: var(--col-white) !important;
    border: 1px solid var(--col-orange);
}

#autosubmenu ul li a.bg-basecol {
    background: var(--col-basecol);
    color: var(--col-white);
}

#autosubmenu ul li a.bg-black {
    background: var(--col-black);
    color: var(--col-white);
}

#autosubmenu ul li a.bg-blue {
    background: var(--col-blue);
    color: var(--col-white);
}

#autosubmenu ul li a.bg-lblue {
    background: var(--col-lblue);
    color: var(--col-white);
}

#autosubmenu ul li a.bg-green {
    background: var(--col-green);
    color: var(--col-white);
}

#autosubmenu ul li a.bg-lgreen {
    background: var(--col-lgreen);
    color: var(--col-grey);
}

#autosubmenu ul li a.bg-purple {
    background: var(--col-purple);
    color: var(--col-white);
}

#autosubmenu ul li a.bg-grey {
    background: var(--col-grey);
    color: var(--col-black);
}

#autosubmenu ul li a.bg-red {
    background: var(--col-red);
    color: var(--col-white);
}

#autosubmenu ul li a.bg-white {
    background: var(--col-white);
    color: var(--col-black);
}

#autosubmenu ul li a.bg-orange {
    background: var(--col-orange);
    color: var(--col-white);
}

#autosubmenu ul li a.bg-dgreen {
    background: var(--col-dgreen);
    color: var(--col-white);
}

#autosubmenu ul li a.bg-teal {
    background: var(--col-teal);
    color: var(--col-white);
}

#autosubmenu ul li a.bg-lilac {
    background: var(--col-lilac);
    color: var(--col-white);
}

#autosubmenu ul li a.bg-pink {
    background: var(--col-pink);
    color: var(--col-white);
}

#autosubmenu ul li a.bg-gold {
    background: var(--col-gold);
    color: var(--col-white);
}

#autosubmenu ul li a.bg-burg {
    background: var(--col-burg);
    color: var(--col-white);
}

#autosubmenu ul li a.bg-basecol:hover {
    background: var(--col-lgrey);
    color: var(--col-basecol);
}

#autosubmenu ul li a.bg-blue:hover {
    background: var(--col-lgrey);
    color: var(--col-blue);
}

#autosubmenu ul li a.bg-lblue:hover {
    background: var(--col-lgrey);
    color: var(--col-lblue);
}

#autosubmenu ul li a.bg-green:hover {
    background: var(--col-lgrey);
    color: var(--col-green);
}

#autosubmenu ul li a.bg-lgreen:hover {
    background: var(--col-lgrey);
    color: var(--col-lgreen);
}

#autosubmenu ul li a.bg-purple:hover {
    background: var(--col-lgrey);
    color: var(--col-purple);
}

#autosubmenu ul li a.bg-grey:hover {
    background: var(--col-lgrey);
    color: var(--col-grey);
}

#autosubmenu ul li a.bg-red:hover {
    background: var(--col-lgrey);
    color: var(--col-red);
}

#autosubmenu ul li a.bg-white:hover {
    background: var(--col-lgrey);
    color: var(--col-white);
}

#autosubmenu ul li a.bg-orange:hover {
    background: var(--col-lgrey);
    color: var(--col-orange);
}

#autosubmenu ul li a.bg-dgreen:hover {
    background: var(--col-lgrey);
    color: var(--col-dgreen);
}

#autosubmenu ul li a.bg-teal:hover {
    background: var(--col-lgrey);
    color: var(--col-teal);
}

#autosubmenu ul li a.bg-lilac:hover {
    background: var(--col-lgrey);
    color: var(--col-lilac);
}

#autosubmenu ul li a.bg-pink:hover {
    background: var(--col-lgrey);
    color: var(--col-pink);
}

#autosubmenu ul li a.bg-gold:hover {
    background: var(--col-lgrey);
    color: var(--col-gold);
}

#autosubmenu ul li a.bg-burg:hover {
    background: var(--col-lgrey);
    color: var(--col-burg);
}


.select2-container {
    display: block;
    background: var(--col-white);
}

#autosubmenu form {
    margin-left: 1em;
}

#autosubmenu form select {
    width: auto;
    height: calc(100% - 6px);
    margin-top: 3px;
}

.footer21 {
    background: var(--col-white);
    border-top: 5px solid var(--col-blue);
    min-height: 110px;
    display: flex;
    flex-wrap: wrap;
    text-align: center;
}

.d-flex.gap {
    gap: 10px;
}

.menu {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.menubtn {
    cursor: pointer;
    background: var(--col-orange);
    color: var(--col-white);
    padding: 0 2vh;
    border-radius: 100em;
    height: 2.25em;
    font-size: 1.5em;
}

.menubtn .wrap {
    height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.menubtn span {
    padding: 0;
    margin: 0 0 0 10px;
    color: var(--col-white);
}

.menubtn:hover,
.menubtn:hover span {
    background: none;
    color: rgba(0, 0, 0, 0.5);
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.menubtn:hover {
    background: var(--col-lorange);
}


/* Wraps */

.mainwrap {
    width: calc(100% - 60px)
}

.sidebar {
    height: 100%;
    position: fixed;
    overflow: auto;
    top: 0;
    left: 0;
    background: var(--col-blue);
    width: 60px;
    padding: 6px;
}

.footer {
    background-color: #dedede;
    padding: 1vh 1vw;
    text-align: center;
    color: #6f6f6f;
    font-size: 85%;
    margin-top: 50px;
}

.topbar {
    background: #999;
    height: 30px;
}

.topbar .logo {
    text-align: left;
    width: 20%;
    float: left;
    padding: 1.5px 1vh;
    height: 100%;
}

.topbar .logo img {
    height: 20px;
}

.topbar .search {
    width: 60%;
    height: 30px;
    float: left;
    text-align: center;
}

.topbar .search input {
    width: 70%;
    margin: 2px auto;
    height: 26px;
    text-align: center;
}

.topbar .links {
    width: 20%;
    padding: 2px;
    float: right;
    text-align: right;
}

.topbar .links a i {
    line-height: 16px;
    padding: 5px;
    color: var(--col-white);
}

.topbar .links a:hover i {
    background: var(--col-white);
    border-radius: 5px;
    color: var(--col-blue);
}

.tagwrap {
    border: 1px solid #999;
    width: 25%;
    z-index: 10000;
    position: absolute;
    top: calc(1vh + 30px);
    right: 1vh;
}


/* Tables */

.tableFixHead {
    overflow-y: auto;
    height: 100px;
}

.tableFixHead th {
    position: sticky;
    top: 0;
    background: var(--col-basecol);
    color: var(--col-white);
    text-align: center;
}

.table th,
.tableheader {
    background: var(--col-basecol);
    color: var(--col-white);
}

.table th {
    vertical-align: middle;
}


.table tbody tr th {
    background: var(--col-mgrey);
    color: var(--col-black);
}

table.hover tbody tr:hover > td,
table.display tbody tr:hover > td {
    background-color: #ffff009c;
}
table.hover2 tbody tr:hover > td {
    background-color: #ff6e0052;
}

/* table.dataTable.hover tbody tr:hover td,
table.dataTable.display tbody tr:hover td {
    background-color: #ff825c4f;
} */

.mark, mark {
    padding: 0;
    border: 3px solid var(--bs-table-active-bg);
}

.dataTables_wrapper .dataTables_info,
.dt-container .dt-info,
.dt-container .dt-paging,
.dataTables_wrapper .dataTables_paginate {
    background: #e9e9e9;
    border: 1px solid #dddddd;
    border-radius: 5px;
    padding: 1vh;
    margin-top: 1vh;
    display: inline-block !important;
}

table.dataTable.dtr-inline.collapsed>tbody>tr>td.dtr-control:before,
table.dataTable.dtr-inline.collapsed>tbody>tr>th.dtr-control:before {
    margin: 5px 10px 10px auto;
    border-top: 7px solid transparent;
    border-left: 14px solid var(--col-dblue);
    border-bottom: 7px solid transparent;
    display: inline-block;
}

table.dataTable.dtr-inline.collapsed>tbody>tr.dtr-expanded>td.dtr-control:before,
table.dataTable.dtr-inline.collapsed>tbody>tr.dtr-expanded>th.dtr-control:before {
    border-top: 14px solid var(--col-dgreen);
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    display: inline-block;
}

table.dataTable>tbody>tr.child ul.dtr-details,
table.dtr-inline {
    text-align: left;
}

.dt-paging {
    float: right;
}

.dt-info {
    font-size: 80%;
}

.dataTables_wrapper .dataTables_paginate .paginate_button,
div.dt-container .dt-paging .dt-paging-button {
    /* color: #333 !important; */
    border-radius: 5px !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover,
div.dt-container .dt-paging .dt-paging-button.current,
div.dt-container .dt-paging .dt-paging-button.current:hover,
button.dt-button,
div.dt-button,
a.dt-button,
button.dt-paging-button,
div.dt-paging-button,
a.dt-paging-button {
    color: var(--col-blue) !important;
    border: 1px solid var(--col-gold);
    background: var(--col-gold);
    border-radius: 5px;
    padding: 0.5rem 1.5rem;
    line-height: 1;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active,
div.dt-container .dt-paging .dt-paging-button.disabled,
div.dt-container .dt-paging .dt-paging-button.disabled:hover,
div.dt-container .dt-paging .dt-paging-button.disabled:active,
button.dt-button.disabled,
div.dt-button.disabled,
a.dt-button.disabled,
button.dt-paging-button.disabled,
div.dt-paging-button.disabled,
a.dt-paging-button.disabled {
    cursor: default;
    color: #CDCDCD !important;
    border: 1px solid transparent;
    background: transparent;
    box-shadow: none;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover,
div.dt-container .dt-paging .dt-paging-button:hover,
button.dt-button:active:not(.disabled):hover:not(.disabled),
button.dt-button.active:not(.disabled):hover:not(.disabled),
div.dt-button:active:not(.disabled):hover:not(.disabled),
div.dt-button.active:not(.disabled):hover:not(.disabled),
a.dt-button:active:not(.disabled):hover:not(.disabled),
a.dt-button.active:not(.disabled):hover:not(.disabled),
button.dt-button:hover:not(.disabled),
div.dt-button:hover:not(.disabled),
a.dt-button:hover:not(.disabled),
button.dt-paging-button:active:not(.disabled):hover:not(.disabled),
button.dt-paging-button.active:not(.disabled):hover:not(.disabled),
div.dt-paging-button:active:not(.disabled):hover:not(.disabled),
div.dt-paging-button.active:not(.disabled):hover:not(.disabled),
a.dt-paging-button:active:not(.disabled):hover:not(.disabled),
a.dt-paging-button.active:not(.disabled):hover:not(.disabled),
button.dt-paging-button:hover:not(.disabled),
div.dt-paging-button:hover:not(.disabled),
a.dt-paging-button:hover:not(.disabled) {
    color: var(--col-blue) !important;
    border: 1px solid var(--col-blue);
    background: #e8f1f8;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:active,
div.dt-container .dt-paging .dt-paging-button:active,
button.dt-button:active:not(.disabled),
button.dt-button.active:not(.disabled),
div.dt-button:active:not(.disabled),
div.dt-button.active:not(.disabled),
a.dt-button:active:not(.disabled),
a.dt-button.active:not(.disabled),
button.dt-button:focus:not(.disabled),
div.dt-button:focus:not(.disabled),
a.dt-button:focus:not(.disabled),
button.dt-paging-button:active:not(.disabled),
button.dt-paging-button.active:not(.disabled),
div.dt-paging-button:active:not(.disabled),
div.dt-paging-button.active:not(.disabled),
a.dt-paging-button:active:not(.disabled),
a.dt-paging-button.active:not(.disabled),
button.dt-paging-button:focus:not(.disabled),
div.dt-paging-button:focus:not(.disabled),
a.dt-paging-button:focus:not(.disabled) {
    outline: none;
    background: #e8f1f8;
    box-shadow: none;
}

.dt-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.dt-container table {
    width: 100% !important;
}

.dt-container .dt-length .dt-input {
    margin-right: var(--bs-border-radius-lg);
}


/* Inputs */

input:not(input[name=s]):not(input[type=submit]):not(input:disabled):not(input:read-only):not(input[type=select-one]),
textarea,
textarea.form-control,
select,
select.form-control,
.selectize-input,
input.form-control:not(input[name=s]):not(input[type=submit]):not(input:disabled):not(input:read-only) {
    background: var(--col-llorange);
    border: 3px solid var(--col-dgrey);
}

input.parsley-error {
    font-weight: bold;
    background: var(--col-lred) !important;
    border: 3px solid var(--col-red) !important;
    border-radius: 5px 5px 0 0 !important;
}

input.parsley-success {
    background: var(--col-llgreen) !important;
    border: 3px solid var(--col-green) !important;
}

.selectize-input {
    background: var(--col-llorange) !important;
    border: 3px solid var(--col-dgrey);
}
.multi .selectize-input .item {
    background: var(--col-llgreen) !important;
    border: 1px solid var(--col-dgreen) !important;
    font-weight:bold;
}
.single .selectize-input .item {
    background: var(--col-llgreen) !important;
    border: 1px solid var(--col-dgreen) !important;
    padding: 3px 10px;
    font-weight:bold;
    border-radius: 5px;
}
.selectize-input .item.active {
    background: var(--col-blue) !important;
}

.selectize-dropdown .selected {
    background: var(--col-dgreen) !important;
    color: var(--col-white);
}

select,
select.form-control {
    cursor: pointer;
}

.tox .tox-edit-area__iframe {
    background: var(--col-llorange);
    background-color: var(--col-llorange) !important;
}

.tox-tinymce,
.ck.ck-editor__main>.ck-editor__editable {
    border: 3px solid var(--col-dgrey);
    /* border-radius: 5px !important; */
    background: var(--col-llorange);
    background-color: var(--col-llorange) !important;
}

.form-control,
.form-select,
.form-check-input {
    font-size: 110%;
}

.form-select {
    cursor: pointer;
}

label:has(input[type=checkbox]) {
    cursor: pointer;
    text-align: center;
    font-size:110%;
}

input[type=checkbox]:not(:checked) {
    background: var(--col-llorange);
    border: 3px solid var(--col-dgrey);
}


.btn,
a.btn {
    background: var(--col-blue);
    border: 1px solid var(--col-blue);
    color: var(--col-white);
    margin: 0 0 1vh 0;
    /* font-weight: bold; */
    font-size: 110%;
    text-decoration: none;
}

.btn:hover,
a.btn:hover {
    /* font-weight: bold; */
    background: #e8f1f8 !important;
    text-decoration: none;
    color: var(--col-blue) !important;
    border: 1px solid var(--col-blue) !important;
}

.btn-nobg,
a.btn-nobg {
    display: inline-block;
    border: 1px solid var(--col-white);
    font-size: 110%;
    line-height: 1.5;
    border-radius: 5px;
    color: var(--col-white);
    margin: 0 0 1vh 0;
    /* font-weight: bold; */
    text-align: center;
    vertical-align: middle;
    padding: .375rem .75rem;
    text-decoration: none;
}

.btn-nobg:hover,
a.btn-nobg:hover {
    background: var(--col-white);
    border: 1px solid var(--col-white);
    color: var(--col-white);
    font-weight: bold;
    cursor: not-allowed;
}

.btn-micro,
a.btn-micro {
    border-radius: 5px;
    background: var(--col-blue);
    border: 1px solid var(--col-blue);
    color: var(--col-white);
    padding: 0.25vh 0.75vh;
    margin: -0.5vh 1vh 0 0;
    font-weight: normal;
    text-decoration: none;
}

.btn-micro i,
a.btn-micro i {
    margin-right: 0.5vh;
    font-size: 90%;
}

.btn-micro:hover,
a.btn-micro:hover {
    font-weight: normal;
    background: #e8f1f8 !important;
    text-decoration: none;
    color: var(--col-blue) !important;
    border: 1px solid var(--col-blue) !important;
}

.topnav .sync-form {
    width: 100%;
    margin: 1vh 0;
}

.sync-form {
    width: 100%;
    margin: 0 auto 0 0;
}

form strong {
    display: block;
}

.formbreak {
    display: block;
    clear: both;
    height: 1vh;
    border-bottom: 1px solid #c4cbe3;
    margin: 1vh 0;
}

form textarea {
    min-height: 150px;
    padding: 1vh 1vw;
    border-radius: 0;
    font-weight: bold;
    color: var(--col-black);
}


form .btn {
    background: var(--col-blue);
    color: var(--col-white);
    margin: 0 0 1vh 0;
    font-weight: normal;
    width: auto;
    border: 1px solid var(--col-blue);
    border-radius: 5px;
    padding: .375rem 2rem;
}

form .btn.remove {
    background: var(--col-red);
}

/* .sync-form .btn:hover {
    font-weight: normal;
    background: #e8f1f8 !important;
    text-decoration: none;
    color: var(--col-blue) !important;
    border: 1px solid var(--col-blue) !important;
} */

.sync-form input[type=checkbox]:not(:checked),
input[type=checkbox]:not(:checked),
input[type=radio]:not(:checked) {
    border: 3px solid var(--col-dgrey);
    background-color: var(--col-llorange);
    padding: 10px;
}

input[type=checkbox]:hover {
    cursor: pointer;
}

form .tableheader {
    background: var(--col-blue);
    color: var(--col-white);
    font-size: 120%;
    border: 1px solid var(--col-lgrey);
    border-radius: 5px;
    padding: 2vh 1vw;
    margin-bottom: 1vh;
}

form .backbox-w {
    margin-top: 1vh;
}

form .backbox-w:hover {
    background: var(--col-lgrey);
}

form .checkwrap {
    background: var(--col-white);
    padding: 2vh;
    border: 2px solid var(--col-blue);
    border-radius: 5px;
    width: 100%;
    cursor: pointer;
}

.table-responsive {
    clear: both;
}

.highlight_row td,
.highlight_row {
    background-color: var(--col-green)73 !important;
}

.highlight_row:hover td,
.highlight_row:hover {
    background-color: #ffff009c !important;
}

form select {
    cursor: pointer;
}

input[type=checkbox]:checked+label {
    background-color: #f00;
    font-style: normal;
    padding: 1vh 1vw;
}

.nav-link {
    color: var(--col-black);
}

.nav-tabs .nav-link {
    background-color: var(--col-gold);
}

.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
    background-color: var(--col-blue);
    color: var(--col-white);
}

.nav-gap {
    height: 0.5vh;
    background: white;
    opacity: 0.4;
    padding: 0;
    margin: 0 10px 1vh 10px;
    border-radius: 100vh;
}

ul .nav-gap:first-of-type {
    background: none;
}

#datatable_length,
#DataTables_Table_0_length {
    /* float: left; */
}

div.dt-buttons {
    /* margin-left: 2rem; */
}

a.card:hover {
    background: #ffff009c;
    text-decoration: none;
}

.navbar1 {
    display: flex;
    flex-wrap: wrap;
    height: auto;
    padding: 0;
    font-size: 110%;
    gap: 10px;
}

.navbar1 a.item {
    text-align: center;
    border-radius: 5px;
    margin: 0;
    padding: 1vh;
    color: var(--col-white);
    text-decoration: none;
    border: 1px solid var(--col-white);
    flex-grow: 1;
}

.navbar1 a.item:hover {
    background: #e8f1f8 !important;
    text-decoration: none;
    color: var(--col-blue) !important;
    border: 1px solid var(--col-blue) !important;
}

.navbar1 .item i {
    font-size: 150%;
    width: 50px;
    height: 50px;
    line-height: 50px;
}

.navbar1 .item.active {
    border: 5px solid var(--col-blue);
    box-shadow: 0px 0px 20px 2px #93cfff;
}

.form-select {
    background-color: var(--col-llorange);
    border: 3px solid var(--col-dgrey);
}


.form-check-input {
    height: 40px;
    width: 40px;
    display: block;
    margin-top: 0;
}

/* .sync-form input,
.sync-form select,
.dataTables_filter input,
.sync-form textarea,
.sync-form select {
    margin-bottom: 2vh;
    background-color: var(--col-llorange);
    box-shadow: none;
    border-radius: 5px;
    border: 3px solid var(--col-dgrey);
    padding: 1vh;
} */

.select2-selection {
    font-size: 110%;
    background: var(--col-llorange) !important;
    background-color: var(--col-llorange) !important;
    box-shadow: none;
    border-radius: 0;
    border: 3px solid var(--col-dgrey) !important;
    color: var(--col-black);
    padding: 1vh;
    min-height: calc(2.2rem + 2vh) !important;
    height: auto !important;
}

/* .sync-form strong {
    font-size: 95%;
} */

input.hasval,
textarea.hasval,
select.hasval {
    background: var(--col-lgreen) !important;
    color: var(--col-black);
    border: none;
    border-bottom: 3px solid var(--col-green);
    border-radius: 0;
}

input.hadval,
textarea.hadval,
select.hadval {
    background: var(--col-lorange);
    color: var(--col-black);
    border: none;
    border-bottom: 3px solid var(--col-blue);
    border-radius: 0;
}

form em {
    font-size: 80%;
}

input:disabled,
select:disabled,
textarea:disabled {
    cursor: not-allowed;
    /* background: var(--col-pink);
    background-color: var(--col-pink) !important;
    color: var(--col-white) !important; */
}

.ul--menu--blocks {
    list-style: none;
    margin: 0;
    display: flex;
    padding: 0;
    flex-wrap: wrap;
    background: var(--col-lgrey);
    border-radius: 5px;
    gap: 10px;
    padding: 10px;
}

.ul--menu--blocks li {
    list-style: none;
    margin: 0;
    flex-grow: 1;
}

.ul--menu--blocks a {
    border-radius: 5px;
    border: 1px solid #cdcdcd;
    background: #fff;
    text-align: center;
    font-size: 1.3rem;
    padding: 1rem;
    height: 100%;
    position: relative;
    border-left: 5px solid var(--col-basecol);
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    align-items: center;
    text-decoration: none;
}


.ul--menu--blocks a br {
    display: none;
}

.ul--menu--blocks span {
    position: absolute;
    top: 8px;
    left: 8px;
}

.ul--menu--blocks span.num {
    font-weight: bolder;
    background: var(--col-basecol);
    color: var(--col-white);
    border-radius: 100%;
    width: 2.5rem;
    height: 2.5rem;
    line-height: 2.5rem;
    text-align: center;
    overflow: hidden;
    font-size: 1.7rem;
}

.ul--menu--blocks span.mand i {
    font-size: 2.5rem;
    color: var(--col-orange);
}

.ul--menu--blocks span.done i {
    font-size: 2.5rem;
    color: var(--col-basecol);
}

.ul--menu--blocks i {
    margin-bottom: 0.5rem;
    font-size: 1.7rem;
    color: var(--col-basecol);
}

.ul--menu--blocks a.blue {
    background: var(--col-blue);
    color: var(--col-white);
    border-left: 5px solid var(--col-dblue);
}

.ul--menu--blocks a.mblue {
    background: var(--col-mblue);
    color: var(--col-white);
    border-left: 5px solid var(--col-dblue);
}

.ul--menu--blocks a.lblue {
    background: var(--col-lblue);
    color: var(--col-white);
    border-left: 5px solid var(--col-blue);
}

.ul--menu--blocks a.green {
    background: var(--col-green);
    color: var(--col-white);
    border-left: 5px solid var(--col-dgreen);
}

.ul--menu--blocks a.purple {
    background: var(--col-purple);
    color: var(--col-white);
    border-left: 5px solid var(--col-dpurple);
}

.ul--menu--blocks a.grey {
    background: var(--col-grey);
    color: var(--col-white);
    border-left: 5px solid var(--col-black);
}

.ul--menu--blocks a.red {
    background: var(--col-red);
    color: var(--col-white);
    border-left: 5px solid var(--col-dred);
}

.ul--menu--blocks a.lred {
    background: var(--col-lred);
    color: var(--col-black);
    border-left: 5px solid var(--col-red);
}

.ul--menu--blocks a.white {
    background: var(--col-white);
    color: var(--col-black);
    border-left: 5px solid var(--col-black);
}

.ul--menu--blocks a.orange {
    background: var(--col-orange);
    color: var(--col-white);
    border-left: 5px solid var(--col-dorange);
}

.ul--menu--blocks a.lorange {
    background: var(--col-lorange);
    color: var(--col-black);
    border-left: 5px solid var(--col-orange);
}

.ul--menu--blocks a.dgreen {
    background: var(--col-dgreen);
    color: var(--col-white);
    border-left: 5px solid var(--col-green);
}

.ul--menu--blocks a.lgreen {
    background: var(--col-lgreen);
    color: var(--col-black);
    border-left: 5px solid var(--col-green);
}

.ul--menu--blocks a.teal {
    background: var(--col-teal);
    color: var(--col-white);
    border-left: 5px solid var(--col-dteal);
}

.ul--menu--blocks a.lilac {
    background: var(--col-lilac);
    color: var(--col-white);
    border-left: 5px solid var(--col-dlilac);
}

.ul--menu--blocks a.pink {
    background: var(--col-pink);
    color: var(--col-white);
    border-left: 5px solid var(--col-dpink);
}

.ul--menu--blocks a.gold {
    background: var(--col-gold);
    /* color: var(--col-white); */
    border-left: 5px solid var(--col-dgold);
}

.ul--menu--blocks a.burg {
    background: var(--col-burg);
    color: var(--col-white);
    border-left: 5px solid var(--col-dburg);
}

.ul--menu--blocks a.blue i {
    color: var(--col-white);
}

.ul--menu--blocks a.lblue i {
    color: var(--col-white);
}

.ul--menu--blocks a.mblue i {
    color: var(--col-white);
}

.ul--menu--blocks a.green i {
    color: var(--col-white);
}

.ul--menu--blocks a.purple i {
    color: var(--col-white);
}

.ul--menu--blocks a.grey i {
    color: var(--col-black);
}

.ul--menu--blocks a.red i {
    color: var(--col-white);
}

.ul--menu--blocks a.lred i {
    color: var(--col-black);
}

.ul--menu--blocks a.white i {
    color: var(--col-black);
}

.ul--menu--blocks a.orange i {
    color: var(--col-white);
}

.ul--menu--blocks a.dgreen i {
    color: var(--col-white);
}

.ul--menu--blocks a.teal i {
    color: var(--col-white);
}

.ul--menu--blocks a.lilac i {
    color: var(--col-white);
}

.ul--menu--blocks a.pink i {
    color: var(--col-white);
}

.ul--menu--blocks a.gold i {
    /* color: var(--col-white); */
}

.ul--menu--blocks a.burg i {
    color: var(--col-white);
}


.ul--menu--blocks a.alert {
    background: var(--col-red);
    text-decoration: none;
    color: var(--col-white);
    border-left: 5px solid var(--col-dred);
}


.ul--menu--blocks a.alert i {
    color: var(--col-white);
}

.ul--menu--blocks a:hover,
.ul--menu--blocks a.active:hover,
.ul--menu--blocks a:active {
    background: var(--col-basecol-light);
    text-decoration: none;
    color: var(--col-grey);
    border-left-color: var(--col-basecol);
}

.ul--menu--blocks a.active {
    background: var(--col-basecol-light);
    text-decoration: none;
    color: var(--col-black);
    border-left-color: var(--col-basecol);
}
.ul--menu--blocks a.active:hover {
    text-decoration: underline;
}

.ul--menu--blocks a:hover span.num {
    background: var(--col-grey);
    color: var(--col-white);
}

.ul--menu--blocks a:hover i,
.ul--menu--blocks a.active:hover i,
.ul--menu--blocks a:active i {
    text-decoration: none;
    color: var(--col-grey);
}

.ul--menu--blocks a.active i {
    text-decoration: none;
    color: var(--col-basecol);
}

#epr-index .accordion-header button {
    background: #f3f3f3;
}

#epr-index .accordion-header button:hover {
    background: #cdcdcd;
}

#epr-index .accordion-button div span {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--col-basecol);
    display: block;
}

#epr-index .accordion-button:hover div span {
    color: var(--col-black);
}

#epr-index .accordion-button div {
    font-size: 1.2rem;
}


/* Time Picker */

.CP_hour {
    font-size: 100%;
}


/* CRM */

.crmbreak {
    display: block;
    clear: both;
    height: 1vh;
    border-bottom: 1px solid #c4cbe3;
    margin: 1vh 0;
}


/* Parsley */

ul.parsley-errors-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

ul.parsley-errors-list li {
    margin: 0;
    padding: 5px 10px;
    border-radius: 0 0 5px 5px;
    background: var(--col-dred);
    font-weight: bold;
    color: var(--col-white);
    font-size: 80%;
}

form .parsley-error {
    background: #ebbbc0;
    border: 1px solid var(--col-dred);
}

form .parsley-success {
    background: #b2e4ca;
}


/* Nav Bars and Links */

nav {
    /* height: 100%; */
    display: flex;
    flex-direction: column;
    justify-content: stretch;
}

.nav-link {
    color: var(--col-white);
    margin: 2px;
    border-radius: 3px;
    text-align: center;
    position: relative;
    flex-grow: 1;
}

.nav-link i {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.nav-link span.desc {
    display: none;
}

.nav-link:hover {
    background: var(--col-white);
    color: var(--col-blue);
}

.nav-link.active {
    background: var(--col-white);
    color: var(--col-blue);
}

.nav-link.active span.desc {
    display: none;
}

.navmob {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.navmob li {
    margin: 0;
    padding: 0;
    flex-grow: 1;
}

.nav-link-mob {
    text-align: center;
    color: var(--col-blue);
    text-decoration: none;
    display: block;
    padding: 1vh;
    border-radius: 5px;
    text-transform: capitalize;
    border: 2px solid var(--col-blue);
    font-size: 110%;
    height: 100%;
}

.nav-link-mob i {
    color: var(--col-white);
    border-radius: 100em;
    height: 50px;
    width: 50px;
    line-height: 50px;
}

.nav-link-mob:hover,
.nav-link-mob.active {
    background: #d1e3f1;
    text-decoration: none;
}

.topnav {
    background: #cecece;
    padding: 1vh;
    text-align: right;
}

.topnav ul,
.floatmenu {
    margin: 0 0 0 5px;
    padding: 0;
    list-style: none;
    font-size: 100%;
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
}

.topnav ul li,
.floatmenu li {
    margin: 0;
    padding: 0;
    list-style: none;
}

.topnav ul li a,
.floatmenu li a,
.floatmenu li .btn {
    display: block;
    font-weight: normal;
    font-size: 100%;
    float: left;
    border-radius: 5px;
    border: 1px solid var(--col-blue);
    margin: 0 0.5vw 0 0;
    padding: 1vh 1vw;
    background: var(--col-blue);
    text-decoration: none;
    color: var(--col-white);
    text-align: center;
}

.topnav ul li a:hover,
.topnav ul li a.current,
.floatmenu li a:hover,
.floatmenu li input:hover,
.floatmenu li .btn:hover,
.dropdown .btn:hover {
    background: #e8f1f8 !important;
    text-decoration: none;
    color: var(--col-blue) !important;
    border: 1px solid var(--col-blue) !important;
}

.navfooter {
    color: var(--col-white);
    text-align: center;
    width: calc(100% - 30px);
    margin: 0 auto;
    background: var(--col-blue);
}

.navfooter .col-6 {
    padding: 1vh 0 0 0;
    float: left;
    text-align: center;
}

.navfooter a {
    color: var(--col-white);
}

a:not([href]):not([tabindex]) {
    color: var(--col-white);
    cursor: pointer;
}

a:not([href]):not([tabindex]):focus,
a:not([href]):not([tabindex]):hover {
    color: var(--col-white);
    cursor: pointer;
}

.list-group-item-action > span:not(.badge),
.list-group-item:has(input) > span,
.list-group-item:has(select) > span,
.list-group-item:has(textarea) > span 
{
    color: var(--col-dlilac);
    font-size: 80%;
}

.badge {
    font-size: 100%;
    color: #fff;
    font-weight: normal;
    background: var(--col-basecol);
    white-space: wrap;
    line-height:1.2;
}

.badge.small {
    font-size: 80%;
    /* font-weight: bold; */
}

.accordion-button:not(.collapsed) .badge.small {
    background: var(--col-white) !important;
    color: var(--col-black) !important;
}

.fc-event .badge {
    font-size: 80%;
    font-weight: bold;
}

.list-group-item-action:focus,
.list-group-item-action:hover,
.list-group-item:has(input:focus),
.list-group-item:has(select:focus),
.list-group-item:has(textarea:focus),
.list-group-item:has(.ck-focused),
.list-group-item:has(input):hover,
.list-group-item:has(select):hover,
.list-group-item:has(textarea):hover,
.list-group-item:has(input:focus),
.list-group-item:has(select:focus),
.list-group-item:has(textarea:focus)
{
    background: var(--col-basecol-light) !important;
    text-decoration: none;
    color: var(--col-basecol) !important;
}

.dropdown .btn {
    display: block;
    font-weight: normal;
    font-size: 110%;
    border-radius: 5px;
    border: 1px solid var(--col-blue);
    margin: 0 0.5vw 1vh 0;
    padding: 1vh 1vw;
    text-decoration: none;
    /* color: var(--col-white); */
    text-align: center;
}

.icon-menu {
    margin: 0;
    padding: 0;
}

.icon-menu li {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

.icon-menu li a {
    display: block;
    height: 51px;
    line-height: 51px;
    padding: 0;
    float: left;
    margin: 0 10px 0 0;
    background: none;
    text-decoration: none;
}

.icon-menu li a:hover,
.icon-menu li input:hover {
    background: #CCC;
    color: var(--col-white);
    cursor: pointer;
}

/* Reports */

.reports-wrap {
    display: flex;
    flex-direction: row;
}

.reports {
    color: var(--col-white);
    margin: 1vh;
    padding: 3vh 0;
    border-radius: 3px;
    text-align: center;
    flex-grow: 1;
    font-size: 120%;
}

.reports:hover {
    background: #e8f1f8 !important;
    text-decoration: none;
    color: var(--col-blue) !important;
}

.reports.active {
    background: var(--col-blue);
    color: var(--col-white);
}


/* Pagination */

.Zebra_Pagination {
    margin-top: 2vh;
    margin-bottom: 0;
    list-style: none;
}

.Zebra_Pagination .z-pagination {
    margin-bottom: 0;
    padding: 0;
    list-style: none;
}

.Zebra_Pagination .z-pagination li {
    float: left;
}

.Zebra_Pagination .z-pagination li a,
.Zebra_Pagination .z-pagination li span {
    padding: 0.5vh 0.5vw;
    background: var(--col-white);
    border-top: 1px solid var(--col-blue);
    border-bottom: 1px solid var(--col-blue);
    display: block;
}

.Zebra_Pagination .z-pagination li a:hover {
    background: #e8f1f8 !important;
    text-decoration: none;
    color: var(--col-blue) !important;
}

.Zebra_Pagination .z-pagination li.active a {
    background: #0b515c;
    color: var(--col-white);
    text-decoration: none;
}

.Zebra_Pagination .z-pagination li.active a:hover {
    background: #e8f1f8 !important;
    text-decoration: none;
    color: var(--col-blue) !important;
}

.Zebra_Pagination .tableheader {
    background: var(--col-blue);
    color: var(--col-white);
    font-size: 120%;
    border: 1px solid #dddddd;
    border-radius: 5px;
    padding: 2vh 1vw;
    margin-bottom: 1vh;
}

.Zebra_Pagination .z-pagination li:first-child a {
    border-left: 5px solid var(--col-blue);
    border-radius: 5px 0 0 5px;
    background: var(--col-blue);
    color: var(--col-white);
}

.Zebra_Pagination .z-pagination li:last-child a {
    border-right: 1px solid var(--col-blue);
    border-radius: 0 5px 5px 0;
    background: var(--col-blue);
    color: var(--col-white);
}


/* Tool Tips */

.tooltiptext,
.tooltips .tooltiptext {
    visibility: hidden;
    width: calc(100% + 16px);
    background-color: var(--col-red);
    color: var(--col-white);
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;
    bottom: 100%;
    left: 50%;
    margin-left: calc(-50% - 8px);
    position: absolute;
    z-index: 1;
}

.tooltiptext::after,
.tooltips .tooltiptext::after {
    content: " ";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: var(--col-red) transparent transparent transparent;
}

.tooltiptext,
.tooltips:hover .tooltiptext {
    visibility: visible;
    cursor: pointer;
}
.tooltip {
--bs-tooltip-bg: var(--col-green);
}

.tooltip-inner {
    color: var(--col-white);
    font-size: 110%;
    padding: 10px;
    font-weight: bold;
}

.tooltip.show {
    opacity: 1;
}

.bs-tooltip-auto[x-placement^=right] .arrow::before,
.bs-tooltip-right .arrow::before {
    border-right-color: var(--col-green);
}


/* Home Block */

ul.home-ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
}

li.home-block {
    width: 25%;
    flex-grow: 1;
}

li.home-block a {
    color: var(--col-blue);
    padding: 1vh;
    display: block;
    text-align: center;
    border-radius: 5px;
    margin: 0 0.5vh;
    text-decoration: none;
}

li.home-block a:hover {
    background: var(--col-white);
    text-decoration: none;
}

li.home-block a span {
    font-weight: bold;
}

li.home-block a i {
    font-size: 150%;
    margin: 0 0 1vh 0;
    background: var(--col-blue);
    border-radius: 100em;
    color: var(--col-white);
    width: 60px;
    height: 60px;
    line-height: 60px;
}


/* Layout Boxes */

.backbox,
.crmlist-btm {
    background: #e9e9e9;
    border: 1px solid #dddddd;
    border-radius: 5px;
    padding: 1vh;
}

.backbox-w {
    background: var(--col-white);
    border: 1px solid #dddddd;
    border-radius: 5px;
    padding: 1vh;
}

.box-blue {
    background: var(--col-blue);
    color: var(--col-white);
    border: 1px solid var(--col-blue);
    border-radius: 5px;
    padding: 1vh;
    text-align: center;
    display: inline-block;
}

.box-grey {
    background: #e9e9e9;
    border: 1px solid #dddddd;
    border-radius: 5px;
    padding: 1vh;
    text-align: center;
    display: inline-block;
}

a.box-grey {
    display: block;
    margin-bottom: 1vh;
    color: #000;
}

a.box-grey:hover {
    background: #e8f1f8 !important;
    text-decoration: none;
    color: var(--col-blue) !important;
}

.masonry {
    grid-gap: 10px;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    grid-auto-rows: 0;
}


/* Search Box */

ul#mainsearchresult {
    display: none;
    position: absolute;
    width: 25vw;
    margin: 0;
    padding: 0;
    z-index: 99 !important;
    text-align: left;
    background: var(--col-blue);
    height: 70vh;
    overflow-y: auto;
}

ul#mainsearchresult li {
    margin: 0;
    list-style: none;
    line-height: 100%;
}

ul#mainsearchresult li a {
    padding: 10px;
    margin: 1vh 0.5vh 0 0.5vh;
    display: block;
    color: var(--col-white);
    border-radius: 5px;
    text-decoration: none;
    background: var(--col-blue);
    border: 1px solid var(--col-blue);
    transition: background-color .3s ease-in-out;
    -moz-transition: background-color .3s ease-in-out;
    -webkit-transition: background-color .3s ease-in-out;
    text-align: left;
}

ul#mainsearchresult li a:hover {
    background: #429be3;
    border: 1px solid var(--col-blue);
    color: #0f6674;
}

ul#mainsearchresult li:first-child {
    border-top: none;
}

ul#navsearchresult {
    display: none;
    position: absolute;
    width: 25vw;
    margin: 0;
    padding: 0;
    z-index: 99 !important;
    text-align: left;
    background: #cecece;
    height: 70vh;
    overflow-y: auto;
}

ul#navsearchresult li {
    margin: 0;
    list-style: none;
    line-height: 100%;
}

ul#navsearchresult li a {
    padding: 10px;
    margin: 1vh 1vw;
    display: block;
    color: var(--col-blue);
    border-radius: 5px;
    text-decoration: none;
    background: #F7F7F7;
    border: 1px solid var(--col-white);
    transition: background-color .3s ease-in-out;
    -moz-transition: background-color .3s ease-in-out;
    -webkit-transition: background-color .3s ease-in-out;
    text-align: left;
}

ul#navsearchresult li a:hover {
    background-color: #bfbfbf;
    color: var(--col-blue);
}

ul#navsearchresult li:first-child {
    border-top: none;
}

ul#mainsearchresult li.closeresult,
ul#navsearchresult li.closeresult {
    position: relative;
}

ul#mainsearchresult li.closeresult a,
ul#navsearchresult li.closeresult a {
    background: #B00020;
    color: var(--col-white);
    float: right;
    border: 1px solid var(--col-white);
    margin: 3px;
}

ul#mainsearchresult li.closeresult a:hover,
ul#navsearchresult li.closeresult a:hover {
    background: #d1616c;
}


/* Order Listings */

.ordlist {
    background-color: #CCC;
    margin-bottom: 1vh;
    font-weight: bold;
    color: #000;
}


/* Course View Page */

ul.coursedetail {
    display: flex;
    border-bottom: 1px solid #c4cbe3;
}

ul.coursedetail li {
    flex-grow: 1;
}

ul.coursedetail li a {
    width: 100%;
    text-align: center;
    background: var(--col-lgrey);
    padding: 1vh 1vw;
    display: inline-block;
    /* font-size: 120%; */
}

ul.coursedetail li a:hover {
    background: var(--col-dgreen);
    color: var(--col-white);
}

ul.coursedetail li.active a {
    background: var(--col-red);
}

ul.coursedetail li a.active {
    text-decoration: none;
    color: var(--col-white);
    background: var(--col-blue);
}

ul.coursedetail li a:hover {
    text-decoration: none;
}


/* CRM Page */

ul.crmdetail li {
    width: calc(100% / 7);
}

ul.crmdetail li a {
    width: 100%;
    text-align: center;
    background: var(--col-white);
    padding: 1vh 1vw;
    display: inline-block;
    border-bottom: 3px solid var(--col-white);
    font-size: 120%;
}

ul.crmdetail li.active a {
    background: var(--col-red);
}

ul.crmdetail li a.active {
    border-bottom: 3px solid var(--col-blue);
    text-decoration: none;
    color: var(--col-blue);
}

ul.crmdetail li a:hover {
    text-decoration: none;
}


/* To Do Boxes */

.todo .backbox {
    margin-bottom: 1vh;
    padding: 1vh;
}

.todo i {
    padding: 1vh;
    margin: 1vh 0;
}

.todo h6 {
    padding: 2vh 0;
    margin: 0;
}

.urgentblink {
    background: #de8e96 !important;
    background-color: #de8e96 !important;
}

.newblink {
    background: #9da9d1 !important;
    background-color: #9da9d1 !important;
}

.newblink.urgentblink {
    background: #FF8C00 !important;
    background-color: #FF8C00 !important;
}

.blinku,
.blinkn {
    -webkit-transition: background 1.0s ease-in-out;
    -moz-transition: background 1.0s ease-in-out;
    -ms-transition: background 1.0s ease-in-out;
    transition: background 1.0s ease-in-out;
    border-radius: 5px;
}

.cagelist.urgentblink {
    background: #FF8C00;
}


/* Banners */

.successbanner {
    background: #006330;
    border: 1px solid #006330;
    color: var(--col-white);
    font-weight: bold;
    padding: 1vh;
    border-radius: 5px;
    margin: 1vh 0 2vh 0;
    text-transform: capitalize;
}

.successbanner:hover {
    background: #328259;
    border: 1px solid #006330;
    color: #006330;
}

.failbanner {
    background: #cc0000;
    border: 1px solid var(--col-white);
    color: var(--col-white);
    font-weight: bold;
    padding: 1vh;
    border-radius: 5px;
    margin: 1vh 0 2vh 0;
    text-transform: capitalize;
}

.failbanner:hover {
    background: #d63232;
    border: 1px solid #cc0000;
    color: #cc0000;
}

#screenblank {
    background: rgba(0, 0, 0, 0.7);
    height: 100%;
    width: 100%;
    position: fixed;
    z-index: 100 !important;
}

#screenblank a {
    width: 350px;
    display: block;
    color: #000;
    background: yellow;
    position: relative;
    line-height: 30px;
    font-size: 150%;
    text-align: center;
    padding: 1vh 1vw;
    box-shadow: 0 0 10px yellow;
    border-radius: 5px;
    margin: 10% auto;
    text-decoration: none;
}


/* Scroll Button */

#backtotop {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 30px;
    z-index: 99;
    font-weight: normal;
}

#tobtm {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 110px;
    z-index: 99;
    font-weight: normal;
}


/* Date Boxes */

.JsDatePickBox .boxMainInner .dayDown {
    background-color: #429be3;
    border: 1px solid var(--col-blue);
    border-radius: 3px;
    color: var(--col-white);
}

.JsDatePickBox .boxMainInner .dayOver {
    background-color: #429be3;
    border: 1px solid var(--col-blue);
    border-radius: 3px;
    color: var(--col-white);
}

.JsDatePickBox .boxMainInner .dayNormal {
    border: 1px solid var(--col-white);
}


/* From Old Site */

.crmlist-menu li a {
    line-height: 40px;
    height: 40px;
    margin: 0 0 10px 0;
    text-align: center;
}

.ui-icon {
    display: none;
}


/* .tableheader {
height: 30px;
line-height: 30px;
background: #CCC;
font-size: 105%;
font-weight: bold;
border-bottom: 1px solid var(--col-blue);
}
.tablecell {
height: 30px;
border-bottom: 1px solid var(--col-blue);
line-height: 30px;
} 

.floatmenu {
margin: 0;
padding: 0;
}
.floatmenu li {margin: 0; padding: 0; list-style-type: none;}
.floatmenu li a {display: block; color:#000; height: 30px; line-height: 30px; padding: 0 10px; float: left; margin: 0 10px 0 0; background: #CCC; text-decoration: none; border-radius:5px;}

.floatmenu li input.btn {display: block; height: 30px; line-height: 30px; padding: 0 10px; float: left; margin: 0 10px 0 0; padding: 0; background: #CCC; border-radius:5px; text-decoration: none; width: 100px; font-size: 100%; border: none;}

.floatmenu li a:hover, .floatmenu li input:hover {background: var(--col-blue); color: var(--col-white); cursor:pointer;}
*/

.crmlist-top {
    background-color: #CCC;
    margin: 0px;
    padding: 5px;
    clear: both;
    border-top-style: none;
    border-right-style: none;
    border-bottom: 1px solid var(--col-white);
    border-left-style: none;
    font-size: 100%;
    font-weight: bold;
    border-radius: 5px;
}

.crmlist-top:hover {
    background-color: #999;
}

.crmlist-topr {
    width: 46px;
    height: 20px;
    position: absolute;
    top: 7px;
    z-index: 2;
    left: 696px;
}

.crmlist-topt {
    background-color: var(--col-green);
    color: var(--col-white);
    margin: 0px;
    padding: 5px;
    clear: both;
    border-top-style: none;
    border-right-style: none;
    border-bottom: 1px solid var(--col-white);
    border-left-style: none;
    font-size: 120%;
    font-weight: bold;
    border-radius: 5px;
}

.ui-state-active {
    color: #000;
    margin-top: 15px;
    border: none;
    background-color: var(--col-green);
}

.crmlist-btm .table {
    background: var(--col-white);
}

.crmlist-btmblockl {
    float: left;
    width: calc(97% / 3);
    margin-top: 5px;
    margin-right: 1%;
    margin-bottom: 5px;
    margin-left: 0px;
    background: var(--col-white);
    border: 1px solid #dddddd;
    border-radius: 5px;
    padding: 1vh;
}

.crmlist-btmblockr {
    float: left;
    width: calc(100% / 3);
    margin-top: 5px;
    margin-right: 0px;
    margin-bottom: 5px;
    margin-left: 0px;
    background: var(--col-white);
    border: 1px solid #dddddd;
    border-radius: 5px;
    padding: 1vh;
}

.crmlist-title {
    background-color: var(--col-blue);
    line-height: 25px;
    font-weight: bold;
    color: var(--col-white);
    height: 25px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 5px;
    margin-left: 0px;
    padding-left: 5px;
    border-radius: 5px;
}

.crmlist-titleg {
    background-color: var(--col-green);
    line-height: 25px;
    font-weight: bold;
    color: var(--col-white);
    height: 25px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 5px;
    margin-left: 0px;
    padding-left: 5px;
    border-radius: 5px;
}

.crmlist-fulltitle {
    background-color: #F90;
    line-height: 25px;
    font-weight: bold;
    height: 25px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 5px;
    margin-left: 0px;
    padding-left: 5px;
    border-radius: 5px;
}

.crmlist-menu {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.crmlist-menu li {
    margin: 0;
    padding: 0;
}

.crmlist-menu li a {
    line-height: 25px;
    height: 25px;
    background: #CCC;
    text-decoration: none;
    display: block;
    margin: 0 0 2px 0;
    padding: 0 0 0 5px;
    border-radius: 5px;
}

.crmlist-menu li a:hover {
    background: var(--col-green);
    color: var(--col-white);
}

.crmlist-btmfull {
    margin-bottom: 15px;
}

#calendar .fc-daygrid-event-harness:not(:first-child) {
    margin-top: 0.5rem;
}

#calendar .fc-daygrid-event-harness {
    padding: 0.2rem 0.4rem;
}

.fc-h-event .fc-event-main {
    color: #000 !important;
}

.fc-col-header-cell,
.fc-list-table th,
.fc-theme-standard .fc-list-day-cushion {
    background: var(--col-basecol);
}

.fc-col-header-cell a,
.fc-list-table th a,
.fc-theme-standard .fc-list-day-cushion a {
    color: #fff !important;
}

.caltraincomp {
    background-color: #D6E8FF !important;
    border: 1px solid var(--col-blue) !important;
    border-top: 5px solid var(--col-blue) !important;
    border-bottom: 5px solid var(--col-blue) !important;
}

.caltraindis {
    background-color: #ffcfd6 !important;
    border: 1px solid var(--col-pink) !important;
    border-top: 5px solid var(--col-pink) !important;
    border-bottom: 5px solid var(--col-pink) !important;
}

.caltrainora {
    background-color: #fdf4ce !important;
    border: 1px solid var(--col-lilac) !important;
    border-top: 5px solid var(--col-lilac) !important;
    border-bottom: 5px solid var(--col-lilac) !important;
}

.calcomp {
    background-color: #dcecd7 !important;
    border: 1px solid var(--col-green) !important;
    border-top: 5px solid var(--col-green) !important;
    border-bottom: 5px solid var(--col-green) !important;
}

.caldis {
    background-color: #efccd2 !important;
    border: 1px solid var(--col-red) !important;
    border-top: 5px solid var(--col-red) !important;
    border-bottom: 5px solid var(--col-red) !important;
}

.calora {
    background-color: #fdf4ce !important;
    border: 1px solid var(--col-gold) !important;
    border-top: 5px solid var(--col-gold) !important;
    border-bottom: 5px solid var(--col-gold) !important;
}

.calnote {
    background-color: #dedede !important;
    border: 1px solid var(--col-grey) !important;
    border-top: 5px solid var(--col-grey) !important;
    border-bottom: 5px solid var(--col-grey) !important;
}

.calcomp:hover,
.caldis:hover,
.calora:hover,
.calnote:hover,
.caltraincomp:hover,
.caltraindis:hover,
.caltrainora:hover {
    background-color: rgb(255, 255, 255);
}

.printonly {
    display: none !important;
}

@media only print {
    .noprint {
        display: none !important;
    }

    .printonly {
        display: block !important;
    }
}

/* Sized Changes */
/* Large screens */

@media only screen and (min-width: 1027px) {
    .masonry {
        column-count: 3;
    }

    html {
        font-size: 14px;
    }

    body {
        font-size: 1.17rem;
    }

    /* .navmob li {min-width: calc(100% / 5);} */
    .modal-xl {
        width: 90%;
        max-width: 1200px;
    }
}


/* Medium-sized screens */

@media only screen and (max-width: 1026px) and (min-width: 768px) {
    .masonry {
        column-count: 2;
    }

    .sync-form {
        width: 100%;
        margin: 0;
    }

    html {
        font-size: 14px;
    }

    body {
        font-size: 1.17rem;
    }

    li.home-block {
        width: 50%;
        flex-grow: 1;
    }

    .the-content {
        padding: 2em 1em;
    }

    .mobspace {
        padding-bottom: 2em;
    }

    /* .navmob li {min-width: calc(100% / 3);} */
    .modal-xl {
        width: calc(100% - 1rem);
        max-width: 1200px;
    }

    .dt-container {
        flex-direction: column;
        flex-wrap: nowrap;
        justify-content: flex-start;
    }

    a {
        padding: 4px;
    }
    h1 {font-size: 2.125rem;}
    h2 {font-size: 1.5rem;}
    h3 {font-size: 1.25rem;}
    h4 {font-size: 1.125rem;}
    h5 {font-size: 1rem;}
    h6 {font-size: 1rem;}
}


/* Small screens */

@media only screen and (max-width: 767px) and (min-width: 100px) {

    .dt-container {
        flex-direction: column;
        flex-wrap: nowrap;
        justify-content: flex-start;
    }

abbr[title]:after
{
   content: " (" attr(title) ")";
}

    a {
        padding: 3px;
    }

    .sync-form {
        width: 100%;
        margin: 0;
    }

    #bugpilot-widget-container {
        top: 60px;
    }

    html {
        font-size: 16px;
    }

    body {
        font-size: 1rem;
        text-align: center;
    }

    

#feedback {
    left: 20px;
}

#bodyright {
    margin: 0;
}


#bodyleft.sidebar {
    width: 0;
    display:none;
}

    /* .sidebar {
        width: 100%;
        height: 50px;
        font-size: 100%;
        position: relative;
    } */

    .modal-xl {
        width: calc(100% - 1rem);
        max-width: 1200px;
    }

    .mainwrap {
        width: 100%;
    }

    li.home-block {
        width: 50%;
        flex-grow: 1;
    }

    .the-content {
        padding: 2em 1em;
        margin: 0;
    }

    .mobspace {
        padding-bottom: 2em;
    }

    h1, h2, h3, h4 {
        display: block;
        width: 100%;
        clear: both;
        float: none !important;
    }

    .btn.fright {
        float: none;
        width: 100%;
        display: block;
    }

    .navmob li,
    .navbar1 a.item {
        flex: 1 0 30%;
    }

    .ul--menu--blocks a {
        font-size: 1rem;
        padding: 1.2rem 0.5rem;
        justify-content: center;
        flex-direction: column;
    }

    .ul--menu--blocks span.num {
        font-size: 1.5rem;
        width: 2rem;
        height: 2rem;
        line-height: 2rem;
    }


    .ul--menu--blocks a br {
        display: block;
    }

    .ul--menu--blocks i {
        margin-right: 0;
        margin-bottom: 0.5rem;
        font-size: 1.8rem;
        color: var(--col-basecol);
    }

    h1 {font-size: 1.5rem;}
    h2 {font-size: 1.125rem;}
    h3 {font-size: 1.125rem;}
    h4 {font-size: 1rem;}
    h5 {font-size: 1rem;}
    h6 {font-size: 1rem;}

}