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

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

a, .btn-link {
    color: #0366d6;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.content {
    padding-top: 1.1rem;
}

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

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

input[type="checkbox"] {
    border: 1px solid grey;
}

#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;
}


.toasts-bottom-right {
    z-index: 10011 !important;
}

[class*=sidebar-dark] .brand-link {
     border-bottom: none !important; 
}

/*Hide GoogleMaps InfoWindow Close btn*/
.gm-ui-hover-effect {
    display: none !important;
}
/*#toastsContainerBottomRight {
    z-index: 10012 !important;
}*/

:root {
    --primary-color: #30415D;
    --primary-color-variant: #0080FF;
    --primary-color-faded: #30415D80;
    --primary-text-color: white;
}

.k-grid, .k-content, .k-input-solid, .k-pager-wrap, .k-grid-header, .k-grouping-header, ::placeholder, .text-muted, .text-dark {
    color: var(--primary-color) !important;
}

.k-header, .card-header, .k-window-titlebar, .k-dialog-titlebar {
    background: var(--primary-color);
    color: var(--primary-text-color);
}

.card-header-variant{
    background: var(--primary-color-variant) !important;
}

.k-button, .k-picker-solid, .btn-primary, .k-calendar .k-calendar-td.k-state-selected .k-link {
    background: var(--primary-color) !important;
    color: var(--primary-text-color) !important;
}

button:disabled {
    background-color: grey;
    cursor: not-allowed;
}

.k-button:hover, .btn-primary:hover, .btn-primary:focus {
    background: var(--primary-color-faded);
    
}

.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link.active {
    background: var(--primary-color-variant);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .36), 0 1px 2px rgba(0, 0, 0, .48), 0 1px 1px rgba(0,0,0,.60);
}

.k-list-item.k-selected, .k-selected.k-list-optionlabel, .k-link.k-selected {
    background: var(--primary-color) !important;
    color: var(--primary-text-color) !important;
}

.k-grid-header .k-i-sort-asc-sm, .k-grid-header .k-i-sort-desc-sm, .k-grid-header .k-sort-order {
    color: var(--primary-text-color) !important;
}

.k-pager-numbers .k-link {
    background: var(--primary-color-faded) !important;
    color: var(--primary-text-color) !important;
}

.k-link.k-selected {
    background: var(--primary-color) !important;
    color: var(--primary-text-color) !important;
}

.k-chart, .k-sparkline, .k-stockchart {
    color: var(--primary-color) !important;
}

.k-calendar .k-nav-today, .k-calendar .k-nav-today:focus, .k-calendar .k-nav-today.k-focus, .k-calendar .k-nav-today.k-state-focus {
    color: var(--primary-color) !important;
}

.k-calendar .k-calendar-td.k-selected .k-calendar-cell-inner, .k-calendar .k-calendar-td.k-selected .k-link, .k-calendar .k-calendar-td.k-state-selected .k-calendar-cell-inner, .k-calendar .k-calendar-td.k-state-selected .k-link {
    background: var(--primary-color) !important;
}

.k-listview {
    background: rgb(244, 246, 249) !important;
}

[class*=sidebar-dark-] {
    background: var(--primary-color);
}

.k-tabstrip-items-wrapper .k-item {
    color: var(--primary-color) !important;
}

th.k-sorted {
    background: var(--primary-color-faded) !important;
}

.k-scrollview-prev svg,
.k-scrollview-next svg {
    fill: lightgray;
}

.no-headers-grid .k-grid-header {
    display: none;
}

.brand-link .brand-image {
    margin-left: 0.3rem !important;
}

.navbar-light .navbar-nav .nav-link  {
    color: var(--primary-color) !important
}

.zxing-container, .zxing-video-container, .zxing-video-container > video {
    width: 100%;
}

/*.content-wrapper:has(.full-height-grid-page), .content:has(.full-height-grid-page), .full-height-grid-page, .full-height-grid-page .row, .full-height-grid-page .col-12, .full-height-grid-page .k-grid {
    display: flex !important;
    flex-direction: column;
    flex-grow: 1;
}*/

/* TODO: Hack until I can get this to work https://docs.telerik.com/blazor-ui/components/fileselect/overview#fileselect-reference-and-methods*/
.FileSelectButton, .FileSelectButton * {
    cursor: pointer !important;
}

.FileSelectButton .k-dropzone {
    padding: 0 !important;
}

.FileSelectButton .k-upload-files {
    display: none !important;
}

.FileSelectButton span {
    visibility: hidden;
}

/* TODO: Hack until I can get this to work https://docs.telerik.com/blazor-ui/components/fileselect/overview#fileselect-reference-and-methods*/
.FileSelectButton span:after {
    content: 'Add Photo';
    text-align: center;
    position: absolute;
    top: 3px;
    left: 12.5px;
    visibility: visible;
    display: block;
}

/* Bootstrap Extentions */

.scroll-y {
    overflow-y: scroll;
}

.vh-60 {
    height: 60vh;
}

.mbe-0 {
    margin-block-end: 0;
}

.gap-1 {
    gap: 0.25rem;
}

.gap-2 {
    gap: 0.5rem;
}

.gap-3 {
    gap: 1rem;
}

.flex-grow-2 {
    flex-grow: 2;
}

.flex-grow-3 {
    flex-grow: 3;
}

.w-adaptive-sm {
    width: 20% !important;
}

.w-adaptive-md {
    width: 35% !important;
}

.w-adaptive-lg {
    width: 70% !important;
}

.min-h-65 {
    min-height: 65dvh;
}

.left-0 {
    left: 0;
}

.right-0 {
    right: 0;
}

.top-0 {
    top: 0;
}

.bottom-0 {
    bottom: 0;
}

.w-45 {
    width: 45%;
}

.h-90 {
    height: 90%;
}

/* Media query for small screens (e.g., mobile devices) */
@media (max-width: 767px) {
    .w-adaptive-sm {
        width: 65% !important; 
    }

    .w-adaptive-md {
        width: 85% !important;
    }

    .w-adaptive-lg {
        width: 100% !important;
    }
}

/* Media query for medium screens (e.g., tablets) */
@media (min-width: 768px) and (max-width: 1250px) {
    .w-adaptive-sm {
        width: 40% !important;
    }

    .w-adaptive-md {
        width: 55% !important;
    }

    .w-adaptive-lg {
        width: 90% !important;
    }
}

.button-underline {
    border: none;
    outline: none;
    margin: 0;
    padding: 0;
    background: none;
    color: var(--primary-color);
    text-decoration: underline var(--primary-color);
    font-weight: bold;
}

.text-red {
    color: red;
}

div.dropdown-menu {
    max-height: 200px;
    overflow-x: hidden;
    overflow-y: scroll;
}

.cursor-pointer {
    cursor: pointer;
}

.bold-input input {
   font-weight:600;
}

.hidden-tab {
    opacity: 0;
    width: 0;
}

.k-grid-pager {
    margin-bottom: 50px !important;
}