/* Loading this just in case we need it for something */
@font-face {
    font-family: GTMono;
    /* src: url('../fonts/GT-America-Mono-Regular.otf'); */
    src: url('../fonts/Q-PACMono-Regular.otf');
}
:root {
    --gray-600: #dcdcdc;
    --gray-800: #282a2e;
    --gray-alt-row: rgba(0,0,0,.04);
    --black: #000000;
    --primary: #00FFAE;
}
/* Default bs5 behavior overrides */
label{
margin-bottom:auto;
}
*:focus {
    box-shadow: none !important;
}
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6,p,.btn,.accordion-button{
    line-height:inherit;
    text-transform:uppercase;
}
.modal-header, .modal-body, .modal-footer {
    border: none !important;
}
.bg-dark > .btn-close {
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23FFFFFF'><path d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414'/></svg>");
}
.accordion-button{
    box-shadow:none !important;
}
.accordion-button::after {
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2316171A'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !important;
}
.accordion-button.bg-dark::after {
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23FFFFFF'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !important;
}
.dropdown-item.active, .dropdown-item:active{
    background:inherit;
    color:inherit;
}
.toast{
    background-color:rgba(0,0,0,0);
    border-radius:.25rem;
}
    .toast .toast-header, .toast .toast-body {
        background-color: rgba(255,255,255,0.9);
    }
    .toast .toast-header {
        border-radius: .25rem .25rem 0 0;
        border-bottom: 1px solid rgba(122,122,122,0.95);
    }
.form-check .form-check-input {
    margin-left: -1.25rem;
    font-size: 1rem;
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='%23222222'/></svg>");
}
.form-check .form-check-label {
    margin-left: .25rem;
    font-size: 1rem;
    text-transform:uppercase;
}
.form-switch{
    padding-left:1.25rem;
}

.form-check-input:checked {
    background-color: var(--primary);
    border-color: var(--black);
}
.form-check-input:focus{
    border-color:var(--black);
}
.card-text{
    word-wrap:break-word;
    word-break:break-all;
}
/* I dont want all grids to be 36 wide, so i need to make a full-width helper class that isnt auto generated */
.g-col-36 {
    grid-column: auto/span 36;
}
/*
    Huge pet-peeve of mine is when a framework lets you specify custom classes of items, but then nests the styling within a child class
    So even if you add text-white to QuipsMenuContributor.cs, it doesnt apply to the child <a> generated
*/
#main-navbar .dropdown .btn {
    color: #fff !important;
}

.was-validated :invalid ~ .invalid-feedback,
.was-validated :invalid ~ .invalid-tooltip,
.is-invalid ~ .invalid-feedback,
.is-invalid ~ .invalid-tooltip,
.was-validated :valid ~ .valid-feedback, 
.was-validated :valid ~ .valid-tooltip, 
.is-valid ~ .valid-feedback, 
.is-valid ~ .valid-tooltip {
    font-size: 0.9rem;
}

/* Radzen overrides */
/* position fixed header offset */
#div_mainbody {
    padding-top: 5rem;
    padding-bottom: 2rem;
}

/* Actual custom application css */
body {
    font-family: 'GTMono';
    background-color: var(--gray-600);
    font-size:0.8rem;
    max-width:100%;
    width:100%;
}
body input, body select, body table.rz-grid-table, .secondary-font{
    font-family: 'NB International Pro', 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}
.btn-block{
    width:100%;
}
input[type="text"],
textarea {
    caret-color: black !important; /* Or any other desired color */
}
#blazor-error-ui {
    display: none;
    z-index: 1000;
}

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

.containment-box-v {
    overflow-y: auto;
    max-height: 40vh;
}
.containment-box-v-xl {
    overflow-y: auto;
    max-height: 60vh;
}

.pointer{
    cursor:pointer;
}
.offcanvas-full {
    width: 100% !important;
    /* This is the BS5 Md breakpoint size */
    max-width: 768px !important;
}
.configurator-svg-container{
    margin-top:-3rem;
    margin-bottom:-6rem;
    text-align:center;
    max-width:100%;
    overflow:hidden;
}
.configurator-svg-container svg{
    width:50% !important;
}
.bg-alt-row {
    background-color: var(--gray-alt-row);
}
.configuration-grid div:nth-of-type(even) {
    background-color: var(--gray-alt-row);
}
.nav-link.q-navlink {
    background-color: var(--gray-600);
    color: var(--black);
    display:flex;
    align-items:center;
    justify-content:space-between;
    text-align:left;
    text-transform:uppercase;
}
    .nav-link.q-navlink.active {
        color: var(--black);
        background-color: var(--primary);
    }
.modal-xxl {
    width: 95vw;
    max-width: initial;
}
.fs-configuration-diagram {
    font-size: 1rem;
}
    .fs-configuration-diagram .small {
        font-size: .9rem;
    }