@font-face {
    font-family: Aeonik;
    src: url(/fonts/Aeonik-Regular.otf);
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: Aeonik;
    src: url(/fonts/Aeonik-Bold.otf);
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: Aeonik;
    src: url(/fonts/Aeonik-Medium.otf);
    font-weight: 500;
    font-style: normal;
}
body {
    font-family: 'Aeonik', sans-serif;
    display: flex;
    overflow: auto;
    height: 100vh;
    width: 100vw;
}
.h1, h1 {
    font-size: 1.5rem;
}
.h-100vh{
    height:100vh;
}
.flex {
    display: flex;
}

.flex-auto {
    flex: 1 1 0;
}
.column-gap {
    column-gap: 10px;
}
.row-gap {
    row-gap: 10px;
}
.flex-0 {
    flex: 1 1 0;
}
/* width */
*::-webkit-scrollbar {
    width: 6px;
}

/* Track */
*::-webkit-scrollbar-track {
    background: #fff;
}

/* Handle */
*::-webkit-scrollbar-thumb, .view-scroll-hover:hover::-webkit-scrollbar-thumb {
    background: #e7e5e9;
    border-radius: 5px;
}

    /* Handle on hover */
    *::-webkit-scrollbar-thumb:hover, .view-scroll-hover:hover::-webkit-scrollbar-thumb:hover {
        background: #c7c4cb;
    }
/* width */
*::-webkit-scrollbar:horizontal {
    height: 6px;
}

/* Track */
*::-webkit-scrollbar-track:horizontal {
    background: #fff;
}

/* Handle */
*::-webkit-scrollbar-thumb:horizontal {
    background: #D3D3D3;
    border-radius: 5px;
}

/* Handle on hover */
*::-webkit-scrollbar-thumb:horizontal:hover {
    background: #555;
}
hr {
    border-top: 1px solid rgb(255 255 255 / 10%);
}
/*.k-button-solid-primary .k-icon {
    filter: unset;
}*/
.k-button-solid-primary:hover .k-icon {
    filter: invert(88%) sepia(83%) saturate(2660%) hue-rotate(4deg) brightness(99%) contrast(94%);
}
.k-grid .k-header .k-icon, .k-grid .k-grid-toolbar button .k-icon {
    filter: invert(88%) sepia(83%) saturate(2660%) hue-rotate(4deg) brightness(99%) contrast(94%);
}
.k-grid .k-header .k-command-cell .k-icon, .k-grid .k-header .k-grid-header-menu:hover .k-icon {
    filter: unset;
}

.border-bottom {
    border-bottom: 1px solid #363636 !important;
}
.k-body, .k-typography{
    font-size:14px;
}
.desktop-view {
    width: 100%;
}
/*.k-master-row.k-table-alt-row .k-grid-content-sticky, .k-master-row.k-table-alt-row .k-grid-row-sticky {
    background-color: #191919;
}*/
/*.k-master-row:hover .k-grid-content-sticky, .k-master-row:hover .k-grid-row-sticky, .k-master-row.k-hover .k-grid-content-sticky, .k-master-row.k-hover .k-grid-row-sticky {
    background-color: #000;
}*/
.k-master-row .k-grid-content-sticky {
    border-color: rgb(120 120 120 / 30%);
}
.k-pager {
    color: rgb(89 89 89);
}
.k-grid, .k-toolbar {
    background: transparent;
    border: none;
    padding: 0;
}

.k-toolbar {
    padding: 10px 0;
}
/*.k-button-solid-base {
    background: #000;
}*/
.k-command-cell .k-button-solid-base {
    background: transparent;
    border-radius: 50%;
    border: none;
}
.k-command-cell .k-button-solid-base:hover {
    background: #000;
}

.k-command-cell .k-button-solid-base:hover .k-icon{
    filter: brightness(0) invert(1);
}
        /*.k-grid td.k-selected, .k-grid .k-table-row.k-selected > td, .k-grid .k-table-td.k-selected, .k-grid .k-table-row.k-selected > .k-table-td {
    background-color: rgb(109 116 9);
}*/
        .filter-yellow-btn .k-icon {
            filter: invert(88%) sepia(83%) saturate(2660%) hue-rotate(4deg) brightness(99%) contrast(94%);
            color: black;
        }
/*.k-grid.k-grid-md .k-grid-header .k-grid-header-wrap .k-table.k-grid-header-table .k-table-thead .k-table-row {
    background-color: #464545;
}*/
.k-grid-header .k-table-th.k-grid-header-sticky {
    background: #464545;
    color: #fff;
}
.k-pager .k-icon {
    filter: unset;
}
.k-form .k-form-legend {
    font-size: 15px;
    text-transform: capitalize;
    font-weight: 500;
    margin-bottom: 15px;
    padding-bottom: 0;
    border-bottom: 1px solid #ddd;
}
.k-toolbar .k-input.k-grid-search {
    margin-left: auto;
    width: 200px;
}
.k-grid-search .k-icon {
    filter: unset;
}
.k-button-solid-primary:hover {
    opacity: 0.77;
}
.k-grid .k-grid-header .k-table-th {
    padding-right: 30px;
    white-space: normal;
    word-break: break-word;
}
a.cs-link img {
    width: 13px;
    filter: brightness(0) invert(1);
}

a.cs-link {
    width: 100%;
    background: #37b400;
    padding: 5px;
    border-radius: 5px;
    display: block;
    color: #fff;
}
    a.cs-link:hover{
        opacity:0.8;
    }
    .k-grid .k-grid-container, .k-pager {
        border: 1px solid rgba(0,0,0,0.08);
    }
.k-pager{
    border-bottom-left-radius:5px;
    border-bottom-right-radius:5px;
}
.cs-btn-iconlight .k-icon {
    filter: brightness(0) invert(1) !important;
}
.k-disabled, .k-widget[disabled], .k-disabled {
    border-color: #898989 !important;
}
.highlighted {
    color: red;
}
.history-table {
    overflow: auto;
    font-size: 12px;
}
.w-90px {
    width: 90px;
}
.w-300px {
    width: 300px;
}

.w-200px {
    width: 200px;
}

.w-150px {
    width: 150px;
}
.w-17px{
    width:17px;
}
.data-header {
    font-weight: bold;
    border-bottom: 1px solid #ddd;
    background: #000;
    color: #fff;
    padding: 10px;
}
.data-content {
    padding: 5px 10px;
    border-top: 1px solid #eee;
}
.data-content * {
    word-break: break-word;
}
.cs-historyIcon img {
    width: 17px;
    height: 17px;
    margin: 0;
}

.cs-historyIcon {
    width: 28px;
}

.cs-historyIcon:hover img {
    filter: brightness(0) invert(1);
}
.k-loader-container-panel {
    background: transparent;
    border: none;
}
.k-window {
    max-width: 90%;
    max-height:90%
}
.min-w-100{
    min-width:100%;
}
div#mapBoxEmbedSevenSeas > a {
    background: #e4f400 !important;
    font-weight: bold;
    border-radius: 5px;
    padding: 5px 10px !important;
    margin-top: 10px;
    margin-left: 48px !important;
    cursor: pointer;
}

div#mapBoxEmbedSevenSeas > a:hover {
    background: #000 !important;
    color: #fff;
}
.impactDashboard div#mapBoxEmbedSevenSeas > a, .impactDashboard .mapboxgl-control-container .mapboxgl-ctrl-
ft {
    display: none;
}
.cs-numbers span {
    font-size: 13px;
    letter-spacing: 0px;
    font-weight: normal;
    line-height: 1;
}
.k-chip-solid-base {
    background: #e4f400;
    color: #fff;
    font-size: 12px;
    padding: 4px;
    border-radius: 4px;
    line-height: 1;
    color: #000;
}
.filter-white{
    filter: brightness(0) invert(1)
}

.cs-header {
    font-size: 18px;
    font-weight: bold;
}
.report-header .k-button-solid-primary {
    border-color: #e4f400;
    background-color: #e4f400;
    color: #000;
}
a.cs-btn-yellow {
    background: #e2f200;
    color: #000;
    padding: 10px 15px;
    text-decoration: none;
}

a.cs-btn-yellow:hover {
    opacity: 0.9;
}
.togglepwd {
    position: absolute;
    right: 0;
    z-index: 100;
    top: 4px;
    right: 8px;
    filter: brightness(0);
    cursor: pointer;
    opacity: 0.5;
}

.togglepwd.show:hover {
    opacity: 1;
}
.k-button-solid-base:hover, .k-button-solid-base.k-hover {
    background-color: transparent;
}

.k-multiselect:after {
    content: "\e006";
    height: 30px;
    padding-top: 5px;
    font-size: 16px;
    width: 32px;
    text-align: center;
    border-left: 1px solid #eee;
    cursor: pointer;
    font-family: "WebComponentsIcons";
}
.k-multiselect {
    height: 32px;
}

.k-input-md .k-input-values, .k-picker-md .k-input-values {
    padding: 0 5px;
}

img.cs-imgattachment {
    width: 80px;
    height: 80px;
    border-radius: 5px;
    object-fit: cover;
    cursor: pointer;
}
.k-button-solid-primary .k-icon {
    filter: invert(88%) sepia(83%) saturate(2660%) hue-rotate(4deg) brightness(99%) contrast(94%);
}
.k-button-solid-error .k-icon {
    filter: brightness(0) invert(1);
}
span.k-upload-status *, span.k-upload-status {
    color: #4db100 !important;
}
.cs-downloadcontainer button {
    width: 23px;
    height: 23px;
    position: absolute;
    top: 0;
    right: 0;
    padding: 4px;
    border-top-right-radius: 5px;
}

.cs-downloadcontainer {
    position: relative;
    width: 80px;
    margin: 0 auto;
}
.k-grid.k-grid-md .k-grid-container .k-grid-content .k-grid-table.k-table .k-table-tbody .k-master-row.k-table-row.k-alt.k-hover, .k-grid.k-grid-md .k-grid-container .k-grid-content .k-grid-table.k-table .k-table-tbody .k-master-row.k-table-row.k-alt.k-state-hover, .k-grid.k-grid-md .k-grid-container .k-grid-content .k-grid-table.k-table .k-table-tbody .k-master-row.k-table-row.k-alt.k-state-hovered, .k-grid.k-grid-md .k-grid-container .k-grid-content .k-grid-table.k-table .k-table-tbody .k-master-row.k-table-row.k-alt:hover {
    background-color: #ededed;
}


/*custom for dynamic offline form*/
.sidebar {
    display: none;
}
img.cs-logo {
    width: 100px;
}
div#app {
    width: 100%;
}
.k-notification-group {
    top: 55px !important;
}
.k-form-layout {
    flex: auto;
    overflow: auto;
    padding: 0 10px;
}

.k-form {
    display: flex;
    flex-direction: column;
    overflow: auto;
    height: 100%;
}

main {
    display: flex;
    height: 100vh;
    overflow: auto;
    flex-direction: column;
}

article {
    display: flex;
    flex: 1 1 0;
    overflow: auto;
    flex-direction: column;
}

.k-form-buttons {
    padding: 20px !important;
    border-top: 1px solid #e5e5e5 !important;
}
.cs-required {
    color: red;
    font-size: 15px;
}
.page {
    height: 100%;
}
a.sel-container {
    display: flex;
    flex-direction: column;
    margin: 0 5px;
    text-decoration: none;
    text-align: center;
    font-size: 23px;
    border: 1px solid #000;
    color: black;
    font-weight: bold;
    padding: 0 0 10px 0;
    row-gap: 10px;
    flex: 1 1 0;
    max-width: 150px;
}
a.sel-container:active, a.sel-container:hover {
    opacity: 0.5;
}
.cs-savingFormContainer {
    padding: 8px;
    background: yellow;
    margin: 10px 0;
    border-radius: 5px;
}
div#blazor-error-ui {
    display: none !important;
}
@media(max-width:768px){
    .k-form-layout {
        grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
    }
    .cs-header {
        flex-direction: column;
    }
    .top-row {
        display: flex !important;
        align-items: center;
        justify-content: center;
    }

    img.cs-logo {
        margin: 5px auto;
    }
    .cs-screenForm > * {
        width: 100% !important;
    }
}