/* GENERAL THINGS */



ul.dropdown-menu:focus,
fieldset.form-group div[role=group]:focus,
legend {
    outline: none;
}
form small.form-text:focus,
.bv-no-focus-ring small:focus {
    outline: none;
}
/* a hack to make focus outlines go away */
.no-outline,
.no-outline th:focus,
.btn.no-outline:focus,
.btn.no-outline.focus,
button.btn.no-outline:focus,
button.btn.no-outline.focus,
.no-outline:focus {
    outline: none;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
}
.nav .nav-link:focus,
.nav .nav-link:active {
    outline: none;
}

.max-width-10 {max-width: 10px;}
.max-width-20 {max-width: 20px;}
.max-width-30 {max-width: 30px;}
.max-width-40 {max-width: 40px;}
.max-width-50 {max-width: 50px;}
.max-width-60 {max-width: 60px;}
.max-width-70 {max-width: 70px;}
.max-width-80 {max-width: 80px;}
.max-width-90 {max-width: 90px;}
.max-width-100 {max-width: 100px;}
.max-width-110 {max-width: 110px;}
.max-width-120 {max-width: 120px;}
.max-width-130 {max-width: 130px;}
.max-width-140 {max-width: 140px;}
.max-width-150 {max-width: 150px;}
.max-width-160 {max-width: 160px;}
.max-width-180 {max-width: 180px;}
.max-width-200 {max-width: 200px;}
.max-width-250 {max-width: 250px;}
.max-width-300 {max-width: 300px;}
.max-width-350 {max-width: 350px;}
.max-width-400 {max-width: 400px;}
.max-width-450 {max-width: 450px;}
.max-width-500 {max-width: 500px;}
.max-width-600 {max-width: 600px;}
.max-width-700 {max-width: 700px;}
.max-width-800 {max-width: 800px;}
.max-width-900 {max-width: 900px;}
.max-width-1000 {max-width: 1000px;}
.max-width-1100 {max-width: 1100px;}
.max-width-1200 {max-width: 1200px;}
.max-width-1300 {max-width: 1300px;}
.max-width-1400 {max-width: 1400px;}
.max-width-1500 {max-width: 1500px;}

.min-width-10 {min-width: 10px;}
.min-width-20 {min-width: 20px;}
.min-width-30 {min-width: 30px;}
.min-width-40 {min-width: 40px;}
.min-width-50 {min-width: 50px;}
.min-width-60 {min-width: 60px;}
.min-width-70 {min-width: 70px;}
.min-width-80 {min-width: 80px;}
.min-width-90 {min-width: 90px;}
.min-width-100 {min-width: 100px;}
.min-width-110 {min-width: 110px;}
.min-width-120 {min-width: 120px;}
.min-width-130 {min-width: 130px;}
.min-width-140 {min-width: 140px;}
.min-width-150 {min-width: 150px;}
.min-width-160 {min-width: 160px;}
.min-width-180 {min-width: 180px;}
.min-width-200 {min-width: 200px;}
.min-width-250 {min-width: 250px;}
.min-width-300 {min-width: 300px;}
.min-width-350 {min-width: 350px;}
.min-width-400 {min-width: 400px;}
.min-width-450 {min-width: 450px;}
.min-width-500 {min-width: 500px;}
.min-width-600 {min-width: 600px;}
.min-width-700 {min-width: 700px;}
.min-width-800 {min-width: 800px;}
.min-width-900 {min-width: 900px;}
.min-width-1000 {min-width: 1000px;}
.min-width-1100 {min-width: 1100px;}
.min-width-1200 {min-width: 1200px;}
.min-width-1300 {min-width: 1300px;}
.min-width-1400 {min-width: 1400px;}
.min-width-1500 {min-width: 1500px;}

.width-10 {width: 10px;}
.width-20 {width: 20px;}
.width-30 {width: 30px;}
.width-40 {width: 40px;}
.width-50 {width: 50px;}
.width-60 {width: 60px;}
.width-70 {width: 70px;}
.width-80 {width: 80px;}
.width-90 {width: 90px;}
.width-100 {width: 100px;}
.width-150 {width: 150px;}
.width-200 {width: 200px;}
.width-250 {width: 250px;}
.width-300 {width: 300px;}
.width-350 {width: 350px;}
.width-400 {width: 400px;}
.width-450 {width: 450px;}
.width-500 {width: 500px;}
.width-600 {width: 600px;}
.width-700 {width: 700px;}
.width-800 {width: 800px;}
.width-900 {width: 900px;}
.width-1000 {width: 1000px;}
.width-1100 {width: 1100px;}
.width-1200 {width: 1200px;}
.width-1300 {width: 1300px;}
.width-1400 {width: 1400px;}
.width-1500 {width: 1500px;}

/* FIXED PERCENTAGE WIDTHS */
.w-05 {width: 5%;}
.w-10 {width: 10%;}
.w-15 {width: 15%;}
.w-20 {width: 20%;}
/* .w-25 is built in */
.w-30 {width: 30%;}
.w-35 {width: 35%;}
.w-40 {width: 40%;}
.w-45 {width: 45%;}
/* .w-50 is built in */
.w-55 {width: 55%;}
.w-60 {width: 60%;}
.w-65 {width: 65%;}
.w-70 {width: 70%;}
/* .w-75 is built in */
.w-80 {width: 80%;}
.w-85 {width: 85%;}
.w-90 {width: 90%;}
.w-95 {width: 95%;}

/* MAX WIDTH IN PERCENTAGES - GOOD FOR TABLES */
.mw-05 {max-width: 5%;}
.mw-10 {max-width: 10%;}
.mw-15 {max-width: 15%;}
.mw-20 {max-width: 20%;}
.mw-25 {max-width: 25%;}
.mw-30 {max-width: 30%;}
.mw-35 {max-width: 35%;}
.mw-40 {max-width: 40%;}
.mw-45 {max-width: 45%;}
.mw-50 {max-width: 50%;}
.mw-55 {max-width: 55%;}
.mw-60 {max-width: 60%;}
.mw-65 {max-width: 65%;}
.mw-70 {max-width: 70%;}
.mw-75 {max-width: 75%;}
.mw-80 {max-width: 80%;}
.mw-85 {max-width: 85%;}
.mw-90 {max-width: 90%;}
.mw-95 {max-width: 95%;}
/* .mw-100 is already built into bootstrap */

/* MIN WIDTH IN PERCENTAGES */
.minw-05 {min-width: 5%;}
.minw-10 {min-width: 10%;}
.minw-15 {min-width: 15%;}
.minw-20 {min-width: 20%;}
.minw-25 {min-width: 25%;}
.minw-30 {min-width: 30%;}
.minw-35 {min-width: 35%;}
.minw-40 {min-width: 40%;}
.minw-45 {min-width: 45%;}
.minw-50 {min-width: 50%;}
.minw-55 {min-width: 55%;}
.minw-60 {min-width: 60%;}
.minw-65 {min-width: 65%;}
.minw-70 {min-width: 70%;}
.minw-75 {min-width: 75%;}
.minw-80 {min-width: 80%;}
.minw-85 {min-width: 85%;}
.minw-90 {min-width: 90%;}
.minw-95 {min-width: 95%;}

/* Heights */

.min-height-10 {min-height: 10px;}
.min-height-20 {min-height: 20px;}
.min-height-30 {min-height: 30px;}
.min-height-40 {min-height: 40px;}
.min-height-50 {min-height: 50px;}
.min-height-60 {min-height: 60px;}
.min-height-70 {min-height: 70px;}
.min-height-80 {min-height: 80px;}
.min-height-90 {min-height: 90px;}
.min-height-100 {min-height: 100px;}
.min-height-110 {min-height: 110px;}
.min-height-120 {min-height: 120px;}
.min-height-130 {min-height: 130px;}
.min-height-140 {min-height: 140px;}
.min-height-150 {min-height: 150px;}
.min-height-160 {min-height: 160px;}
.min-height-170 {min-height: 170px;}
.min-height-180 {min-height: 180px;}
.min-height-190 {min-height: 190px;}
.min-height-200 {min-height: 200px;}
.min-height-250 {min-height: 250px;}
.min-height-300 {min-height: 300px;}
.min-height-400 {min-height: 400px;}
.min-height-500 {min-height: 500px;}
.min-height-600 {min-height: 600px;}
.min-height-700 {min-height: 700px;}
.min-height-800 {min-height: 800px;}
.min-height-900 {min-height: 900px;}
.min-height-1000 {min-height: 1000px;}
.min-height-1100 {min-height: 1100px;}
.min-height-1200 {min-height: 1200px;}
.min-height-1300 {min-height: 1300px;}
.min-height-1400 {min-height: 1400px;}
.min-height-1500 {min-height: 1500px;}

.height-10 {height: 10px;}
.height-20 {height: 20px;}
.height-30 {height: 30px;}
.height-40 {height: 40px;}
.height-50 {height: 50px;}
.height-60 {height: 60px;}
.height-70 {height: 70px;}
.height-80 {height: 80px;}
.height-90 {height: 90px;}
.height-100 {height: 100px;}
.height-120 {height: 120px;}
.height-140 {height: 140px;}
.height-150 {height: 150px;}
.height-160 {height: 160px;}
.height-180 {height: 180px;}
.height-200 {height: 200px;}
.height-250 {height: 250px;}
.height-300 {height: 300px;}
.height-400 {height: 400px;}
.height-500 {height: 500px;}
.height-600 {height: 600px;}
.height-700 {height: 700px;}
.height-800 {height: 800px;}
.height-900 {height: 900px;}
.height-1000 {height: 1000px;}
.height-1100 {height: 1100px;}
.height-1200 {height: 1200px;}
.height-1300 {height: 1300px;}
.height-1400 {height: 1400px;}
.height-1500 {height: 1500px;}


.font-size-50 {font-size: 0.5rem !important;}
.font-size-60 {font-size: 0.6rem !important;}
.font-size-70 {font-size: 0.7rem !important;}
.font-size-80 {font-size: 0.8rem !important;}
.font-size-90 {font-size: 0.9rem !important;}
.font-size-100 {font-size: 1rem !important;}
.font-size-110 {font-size: 1.1rem !important;}
.font-size-120 {font-size: 1.2rem !important;}
.font-size-130 {font-size: 1.3rem !important;}
.font-size-140 {font-size: 1.4rem !important;}
.font-size-150 {font-size: 1.5rem !important;}
.font-size-160 {font-size: 1.6rem !important;}
.font-size-170 {font-size: 1.7rem !important;}
.font-size-180 {font-size: 1.8rem !important;}
.font-size-190 {font-size: 1.9rem !important;}
.font-size-200 {font-size: 2rem !important;}
.font-size-250 {font-size: 2.5rem !important;}
.font-size-300 {font-size: 3rem !important;}

/* RELATIVE FONT SIZE ADJUSTMENT - based on em (NOT rem) - to adjust bigger/smaller from what it normally should be */
.font-scale-50 {font-size: 0.5em !important;}
.font-scale-60 {font-size: 0.6em !important;}
.font-scale-70 {font-size: 0.7em !important;}
.font-scale-75 {font-size: 0.75em !important;}
.font-scale-80 {font-size: 0.8em !important;}
.font-scale-90 {font-size: 0.9em !important;}
.font-scale-100 {font-size: 1em !important;}
.font-scale-110 {font-size: 1.1em !important;}
.font-scale-120 {font-size: 1.2em !important;}
.font-scale-125 {font-size: 1.25em !important;}
.font-scale-130 {font-size: 1.3em !important;}
.font-scale-140 {font-size: 1.4em !important;}
.font-scale-150 {font-size: 1.5em !important;}
.font-scale-160 {font-size: 1.6em !important;}
.font-scale-170 {font-size: 1.7em !important;}
.font-scale-180 {font-size: 1.8em !important;}
.font-scale-190 {font-size: 1.9em !important;}
.font-scale-200 {font-size: 2em !important;}
.font-scale-250 {font-size: 2.5em !important;}
.font-scale-300 {font-size: 3em !important;}

.font-weight-100 {font-weight: 100 !important;}
.font-weight-200 {font-weight: 200 !important;}
.font-weight-300 {font-weight: 300 !important;}
.font-weight-400 {font-weight: 400 !important;}
.font-weight-500 {font-weight: 500 !important;}
.font-weight-600 {font-weight: 600 !important;}
.font-weight-700 {font-weight: 700 !important;}
.font-weight-800 {font-weight: 800 !important;}
.font-weight-900 {font-weight: 900 !important;}

.line-height-100 {line-height: 1;}

.opacity-0 {opacity: 0 !important;}
.opacity-10 {opacity: 0.1 !important;}
.opacity-20 {opacity: 0.2 !important;}
.opacity-30 {opacity: 0.3 !important;}
.opacity-40 {opacity: 0.4 !important;}
.opacity-50 {opacity: 0.5 !important;}
.opacity-60 {opacity: 0.6 !important;}
.opacity-70 {opacity: 0.7 !important;}
.opacity-80 {opacity: 0.8 !important;}
.opacity-90 {opacity: 0.9 !important;}
.opacity-100 {opacity: 1 !important;}

.underline-dashed {
    border-bottom: 1px dashed var(--gray-400);
}

.text-show-breaks {
    white-space: pre-line;
}

.button-text,
.special-text {
    /*letter-spacing: 0.05em;*/
    text-transform: uppercase;
    font-weight: 600;
    font-size: 90%;
    line-height: 1;
}

.separator-light {
    height: 1px;
    width: 100%;
    background-color: rgba(0,0,0,0.1);
}
.separator-dark {
    height: 1px;
    width: 100%;
    background-color: rgba(255,255,255,0.1);
}

/* ===== LISTS - ul, etc. ====== */

.list-box-1 {
    border: 1px solid rgba(0,0,0,0.2);
    border-left: 5px solid #888;
    border-radius: 0.25rem;
    background-color: #fff;
    /*box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);*/
    transition: 0.2s all;
}
.list-box-1:hover {
    box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.15);
}
ul.list-mb-3 li {
    margin-bottom: 1rem;
}
ul.list-flush {
    padding-left: 20px;
}

/* ====== TABLES ====== */

.bsv-row-class {
    transition: 0.1s all;
}
.bsv-row-class:hover {
    /* This is the class used for individual rows of data on Vendor table */
    box-shadow: 0 0.15rem 0.5rem rgba(0, 0, 0, 0.15);
    background-color: #fff;
}
.bsv-th-class {
    /* This is the class used for heading row on Vendor table */
}
.table.no-top-border,
.table.no-top-border th[role="columnheader"],
.no-top-border .table,
.no-top-border .table th[role="columnheader"],
.table.no-top-border thead > tr th {
    border-top: 0;
}

.spl-table-header {
    color: rgba(0,0,0,0.5);
    text-transform: uppercase;
    font-weight: 300;
    font-size: 12px;
}

.td-align-middle td,
td.td-align-middle,
.cells-align-middle td,
td.cells-align-middle,
.cells-align-middle tr th,
tr th.cells-align-middle {
    vertical-align: middle !important;
}
.td-align-bottom td,
td.td-align-bottom,
.cells-align-bottom td,
td.cells-align-bottom,
.cells-align-bottom tr th,
tr th.cells-align-bottom {
    vertical-align: bottom !important;
}
.td-align-top td,
td.td-align-top,
.cells-align-top td,
td.cells-align-top,
.cells-align-top tr th,
tr th.cells-align-top {
    vertical-align: top !important;
}

.modal-header {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.supplios-form1 .form-group {
    margin-bottom: 2rem;
}
.supplios-form1 label,
label.supplios-form1 {
    font-weight: 600;
    color: var(--dark);
    margin-bottom: 4px;
}
.supplios-form1 .form-group .form-check {
    /* make checkboxes for multiple choice display inline to handle super long ones */
    display: inline-block;
    margin-right: 1rem;
}

.spl-labels-muted label:not(.custom-control-label),
label.spl-labels-muted:not(.custom-control-label),
legend.spl-labels-muted,
.spl-labels-muted legend {
    font-weight: 700;
    font-size: 0.8rem;
    text-transform: uppercase;
    color: var(--secondary);
    margin-bottom: 4px;
}

form.hide-asterisk-label span.asteriskField {
    /* Hide asteriskField span inside label, generated by crispy forms */
    display: none;
}

span.spl-attribute-labels,
p.spl-attribute-labels,
/*.spl-attribute-labels label:not(.custom-control-label),*/
.spl-attribute-labels .form-group > label,
.spl-attribute-labels legend,
.spl-attribute-labels .b-form-datepicker label:not(.form-control),
label.spl-attribute-labels:not(.custom-control-label),
legend.spl-attribute-labels {
    font-weight: bold;
    font-size: 0.8rem;
    text-transform: uppercase;
    color: var(--secondary);
    margin-bottom: 4px;
}
.spl-inline-form .form-row.form-group,
.spl-inline-form .form-group .form-row,
.spl-inline-form.form-group .form-row {
    /*align-items: center;*/
}
.spl-inline-form .form-row.form-group > label,
.spl-inline-form .b-form-datepicker label:not(.form-control),
.spl-inline-form .form-group legend,
.spl-inline-form .form-row legend,
label.spl-inline-form {
    font-weight: 500;
    font-size: 0.8rem;
    text-transform: uppercase;
    color: var(--secondary);
}

/* spl-inputs -- used in HotEdit components */

.spl-inputs input:not(.multiselect__input),
.spl-inputs textarea,
.spl-inputs select,
.spl-inputs div.input-wrapper,
.spl-inputs .b-form-datepicker:not([aria-disabled=true]),
.hot-edit-input-group input:not(.multiselect__input),
.hot-edit-input-group textarea,
.hot-edit-input-group select,
.hot-edit-input-group div.input-wrapper,
.hot-edit-input-group .b-form-datepicker:not([aria-disabled=true]) {
    color: #000;
    /*background-color: #fff;*/
    /*border: 1px solid var(--gray-300);*/
    /*border-bottom: 1px solid var(--gray-300);*/
    border-radius: 0.25rem;
}

/* other things that need to match input border colors */
.spl-inputs div.input-wrapper, 
.hot-edit-input-group div.input-wrapper,
.spl-inputs .multiselect__tags,
.hot-edit-input-group .multiselect__tags {
    border: 1px solid var(--gray-400);
}

.spl-inputs .inactive-form-control .form-control {
    background-color: var(--gray-50);
}
label.spl-inputs,
.hot-edit-label,
.spl-dlist dt {  /* leave any spacing / padding to Vue component class toggling */
    font-weight: 500;
    font-size: 0.8rem !important;
    text-transform: uppercase;
    color: var(--secondary);
    line-height: 21px;  /* This should make vertical spacing better... it is 1.5 x our base font size of 14px */
}
.hot-edit-input-group.display-mode .col-form-label {
    padding-top: 4px;
}
.hot-edit-input-group.edit-mode:not(.hot-edit-textarea) {
    align-items: center;
}
.spl-inputs-loading input::placeholder {
    color: var(--gray-400);
    font-size: 90%;
}


.spl-inputs-minimal input,
.spl-inputs-minimal textarea,
.spl-inputs-minimal select,
span.spl-inputs-minimal,
.spl-inputs-minimal .b-form-datepicker:not([aria-disabled=true]) {
    /* border-color: #f2f6ff;
    background-color: #f2f6ff; */
    border-color: var(--gray-200);
    background-color: #ffffff;
    border-radius: 0;
}
.spl-inputs-minimal .empty-value,
.spl-inputs-minimal .empty-value input::placeholder,
.spl-inputs-minimal input.empty-value::placeholder,
.spl-inputs-minimal .empty-value input::-webkit-input-placeholder,
.spl-inputs-minimal .empty-value input::-ms-input-placeholder {
    color: var(--primary-400);
}
.spl-inputs-minimal .b-form-datepicker {
    border-color: transparent;
}
.spl-inputs-minimal textarea {
    overflow-y: auto;
}
.spl-inputs-minimal .input-group-text {
    border-color: transparent;
    background-color: transparent;
}

/* Used for making inputs same height as multiselect */
.input-height-40 {
    height: 40px;
}

/* .checkbox-hide-loading.loading input.custom-control-input,
.checkbox-hide-loading.loading label.custom-control-label::before,
.checkbox-hide-loading.loading label.custom-control-label::after {
    visibility: hidden;
} */

/* spl-inputs-search -- you put it in theme scss */


/* Tags (with badges) */
.email-badges.badge {
    font-size: 0.85rem;
}

/* ROTATION and ... */ 
/*  GENERAL COLLAPSE ICON TOGGLE */
/* Put .collapse-controller on the parent element that gets .collapsed added or removed based on state, then put .collapse-controller-swap on the actual icon element, and .when-open and .when-closed on the corresponding icons/elements */
.collapse-controller.collapsed .collapse-controller-swap .when-open,
.collapse-controller.collapsed .collapse-controller-swap.when-open,
.collapse-controller:not(.collapsed) .collapse-controller-swap .when-closed,
.collapse-controller:not(.collapsed) .collapse-controller-swap.when-closed {
    display: none;
}

/*
put .collapse-controller-rotate & .spl-rotate-xx on icon you want to rotate
icon should be the one you want in collapsed state, then it gets rotated when .collapsed is removed from parent
*/
.collapse-controller-rotate {
    transition: 0.3s all;
}
.collapse-controller.collapsed .collapse-controller-rotate {
    transform: rotate(0deg) !important;
}

.spl-rotate-45 {transform: rotate(-45deg);}
.spl-rotate-90 {transform: rotate(-90deg);}
.spl-rotate-180 {transform: rotate(-180deg);}
.spl-rotate-270 {transform: rotate(-270deg);}
.spl-rotate-360 {transform: rotate(-360deg);}


.hover-shadow {
    transition: 0.1s all;
}
.hover-shadow:hover {
    box-shadow: 0 0.15rem 0.5rem rgba(0, 0, 0, 0.15);
}

.handle,
.drag-handle,
.custom-drag {
    cursor: move;
}
.sortable-chosen .handle,
.sortable-drag .handle,
.sortable-chosen.drag-handle,
.sortable-drag.drag-handle {
    cursor: move !important;
}
.sortable-drag {
    background-color: #fff;
}
.sortable-ghost {
    opacity: 0.3;
}

/* CARD TAB NAV */
.supplios-card-tabs .card-header {
    background-color: var(--gray-200);
    padding: 0;
    border-bottom-width: 1px;
}
.supplios-card-tabs .card-header a.nav-link,
.supplios-card-tabs .card-header .nav-link {
    font-size: 0.9rem;
    font-weight: 500;
    /*text-transform: uppercase;*/
    padding: 0.5rem 1rem;
    border-bottom: 3px solid transparent;
    transition: 0.3s all;
    transition-timing-function: ease-out;
}
.supplios-card-tabs .card-header a.nav-link {
    color: var(--secondary);
}
.supplios-card-tabs .card-header a.nav-link .badge,
.supplios-card-tabs .card-header .nav-link .badge {
}
.supplios-card-tabs .card-header a.nav-link:hover {
    color: #000;
    /*background-color: var(--secondary-100);*/
}
.supplios-card-tabs .card-header a.nav-link.active,
.supplios-card-tabs .card-header .nav-link.active {
    color: #000;
    border-bottom: 3px solid var(--primary);
}

/* SECTION-NAV -- FOR MAIN NAV OF MAIN ITEMS LIKE RFX */
.section-nav ul.nav,
ul.section-nav.nav {
    border-bottom: 1px solid var(--secondary-100);
}
.section-nav li a {
    color: #000;
    border-bottom: 3px solid transparent;
    font-weight: 600;
    transition: 0.3s all;
    transition-timing-function: ease-out;
}
.section-nav li a .b-icon {
    margin-right: 6px;
    color: var(--primary);
}
.section-nav li a:not(.active) {
    opacity: 0.5;
}
.section-nav li a:not(.active):hover,
.section-nav li a.active,
.section-nav li.active a {
    opacity: 1;
    border-bottom-color: var(--primary);
    /*box-shadow: 0 6px 3px -3px var(--primary);*/
    color: #000;
}

/* spl-page-nav */
.spl-page-nav {
    /* border-bottom: 1px solid var(--secondary-100); */
}/* 
.spl-page-nav li a .b-icon,
.spl-page-nav-vertical li a .b-icon {
    margin-right: 6px;
    color: var(--info);
}

.spl-page-nav li a,
.spl-page-nav-vertical li a {
    color: #000;
    font-size: 0.9rem;
    font-weight: 500;
    transition: 0.3s all;
    transition-timing-function: ease-out;
}
.spl-page-nav li a {
    border-bottom: 3px solid transparent;
    padding: 0.5rem 1.5rem;
}
.spl-page-nav-vertical li a {
    padding: 0.75rem 0;
}
.spl-page-nav-vertical li:first-child a {
    padding-top: 0;
}

.spl-page-nav li a:not(.active),
.spl-page-nav-vertical li a:not(.active) {
    opacity: 0.5;
}
.spl-page-nav li a:not(.active):hover,
.spl-page-nav li a.active,
.spl-page-nav-vertical li a:not(.active):hover,
.spl-page-nav-vertical li a.active {
    opacity: 1;
    color: #000;
}
.spl-page-nav li a:not(.active):hover {
    border-bottom-color: var(--gray-400);
}
.spl-page-nav li a.active {
    border-bottom-color: var(--info);
}
.spl-page-nav-vertical .subnav-group {
    margin-top: 0;
    margin-bottom: 0.75rem;
    margin-left: 0.5rem;
    border-left: 2px solid var(--gray-300);
}
.spl-page-nav-vertical .subnav-group li a {
    padding: 0.75rem 0 0 1rem;
    font-size: 0.9rem;
}
.spl-page-nav-vertical .subnav-group li:first-child a {
    padding-top: 0;
}


@media (max-width: 767px) {
    .spl-page-nav {
        border-bottom: none;
        justify-content: center;
    }
    .spl-page-nav li {
        margin-top: 0.75rem;
    }
    .spl-page-nav li a {
        font-size: inherit;
        padding: 0.3rem 1rem;
        border-bottom: 3px solid var(--secondary-200);
    }
} */

.spl-vertical-tabs {
    padding: 0;
}
.spl-vertical-tabs > .nav-item {
    border-bottom: 1px solid rgba(0,0,0,0.1);
}
.spl-vertical-tabs > .nav-item > .nav-link {
    border-left: 4px solid transparent;
    padding-top: 1rem;
    padding-bottom: 1rem;
}
.spl-vertical-tabs > .nav-item > .nav-link.active {
    border-left-color: var(--primary);
    background-color: #fff;
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.2);
    overflow-x: hidden;
}


/*
.section-nav li a {
    color: rgba(0,0,0,0.5);
    border-bottom: 3px solid var(--secondary-200);
    font-weight: 600;
    transition: 0.3s all;
    transition-timing-function: ease-out;
}
.section-nav li a:hover,
.section-nav li a.active {
    color: var(--dark);
    border-bottom-color: var(--primary);
}
*/

.star-link,
.star-link .star-text,
.star-link .b-icon {
    transition: 0.2s all;
}
.star-link .star-text {
    font-size: 80%;
    font-weight: bold;
    text-transform: uppercase;
    opacity: 0.7;
    text-decoration: none;
    color: #000;
}
.star-link:hover .star-text,
.star-link .star-text:hover {
    color: #000;
    text-decoration: none;
    opacity: 1;
}
.star-link .b-icon {
    color: var(--warning);
}

/* RFX WIZARD */

.wizard-steps {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 1rem 2rem;
}
.wizard-step-outer {
    text-align: center;
    width: 5rem;
    position: relative;
}
.wizard-step-outer:hover .wizard-step-circle {
    border-width: 1px;
}
.flex-connector {
    width: 100%;
    position: relative;
}
.flex-connector::before {
    content: " ";
    position: absolute;
    background-color: inherit;
    height: 0.2rem;
    width: calc(100% + 1.8rem);
    top: 1.1rem;
    left: -0.9rem;
    display: block;
}
.wizard-step-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 5rem;
}
.wizard-step-link {
    color: var(--secondary);
}
.wizard-step-link:hover {
    text-decoration: none;
    color: var(--primary);
}
.wizard-step-title {
    padding-top: 0.5rem;
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
}
.wizard-step-circle {
    background-color: var(--secondary);
    color: #fff;
    font-weight: 700;
    font-size: 1rem;
    line-height: 1rem;
    height: 2.4rem;
    width: 2.4rem;
    border: 0.3rem solid var(--secondary-100);
    border-radius: 50px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    transition: 0.2s all;
    transition-timing-function: ease-out;
}
.wizard-step-outer.active .wizard-step-circle {
    background-color: var(--primary);
    color: #fff;
    border-color: var(--primary-100);
}
.wizard-step-outer.active .wizard-step-link {
    color: #000;
}
.wizard-step-outer.complete .wizard-step-circle {
    background-color: var(--success);
    border-color: var(--success-100);
    color: #fff;
}

/*  OLD STUFF FOR ARROW BASED NAV, WHICH YOU NEVER FINISHED
.wizard-arrows {
    display: flex;
    justify-content: space-between;
}
.arrow-outer {
    width: 100%;
    display: flex;
    overflow: hidden;
    position: relative;
}
.arrow-start {
    background-color: transparent;
    position: relative;
    width: 1rem;
}
.arrow-start::before {
    content: " ";
    border-style: solid;
    border-width: 50px 0 50px 20px;
    border-color: var(--light2) var(--light2) var(--light2) transparent; 
    overflow: hidden;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
}
.arrow-end {
    background-color: transparent;
    position: relative;
    width: 1rem;
}
.arrow-end::before {
    content: " ";
    border-style: solid;
    border-width: 50px 0 50px 20px;
    border-color: transparent transparent transparent var(--light2); 
    overflow: hidden;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
}
.arrow-inner {
    display: flex;
    align-items: center;
    background-color: var(--light2);
    padding: 1rem 0.5rem 1rem 2rem;
    width: 100%;
}
/*
.arrow-outer::after {
    content: "";
    border-style: solid;
    border-width: 100px 0 100px 20px;
    border-color: transparent transparent transparent var(--primary); 
    overflow: hidden;
    position: absolute;
    right: 0;
    max-height: 100%;
}
.arrow-number {
    background-color: var(--light2);
    color: var(--dark);
    font-weight: 700;
    font-size: 1rem;
    line-height: 1rem;
    height: 2.4rem;
    width: 2.4rem;
    border: 0.3rem solid var(--light);
    border-radius: 50px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}
.arrow-text {
    padding-left: 1rem;
}
*/

/* OLD STUFF BELOW FOR TAB BASED NAV */
#rfx-wizard-nav .nav,
#rfx-wizard-nav .nav .nav-link {
}
#rfx-wizard-nav .nav-link {
    margin-right: 0.25rem;
    background-color: var(--light2);
    border-color: rgba(0,0,0,0.1);
    border-top-left-radius: 0.5rem;
    border-top-right-radius: 0.5rem;
    transition: 0.1s all;
    margin-bottom: 0.2rem;
    font-size: 0.9rem;
    color: var(--secondary);
}
#rfx-wizard-nav .nav-link.active {
    background-color: rgba(255,255,255,1);
    border-bottom-color: rgba(255,255,255,1);
    /*border-top-color: var(--primary);*/
    /*box-shadow: 0 0 0.25rem rgba(0, 0, 0, 0.1);*/
    color: var(--dark);
    font-weight: 600;
}
#rfx-wizard-nav .nav-link.active:hover {
    background-color: rgba(255,255,255,1);
}
#rfx-wizard-nav .nav-link:hover {
    background-color: rgba(47, 82, 240, 0.05);
    color: var(--dark);
}
#rfx-wizard-nav .rfx-wizard-steps {
    font-weight: 700;
    font-size: 0.8rem;
    text-transform: uppercase;
    display: block;
    margin-bottom: 0.5rem;
    color: var(--primary);
}

#form-builder-area textarea {
    border: none;
    border-top: 1px solid var(--secondary);
    border-radius: 0;
    /*box-shadow: 0 0.15rem 0.15rem rgba(0, 0, 0, 0.1);*/
}
#form-builder-area .form-builder-item {
    background-color: #f0f2f4;
    border: 1px solid transparent;
    border-radius: 0.3rem;
    box-shadow: 0 0.25rem 0.5rem rgba(0,0,0,0.15);
    transition: 0.1s all;
}
#form-builder-area .form-builder-item:hover {
    /*border-color: var(--primary);*/
    /*box-shadow: 0 0.15rem 0.5rem rgba(0, 0, 0, 0.15);*/
}


/*---------FORM BUILDER STUFF------------*/
.formbuilder-questions label .fblabel-required::after {
    content: " *";
    color: red;
}

/* DJANGO MONEY FIELD CUSTOM WIDGET STYLES */
input.form-control.djmoney-field {
    max-width: 130px !important;
    display: inline-block !important;
    text-align: right;
}
select.form-control.djmoney-field {
    max-width: 130px !important;
    display: inline-block !important;
}

/*---------CSS Transitions for Vue----------*/

/* SCALE IN OUT - <transition name="scale-in-out"> */
.scale-in-out-enter-active {
    transition: all 0.3s ease;
}
.scale-in-out-leave-active {
    /*transition: all .4s cubic-bezier(1.0, 0.5, 0.8, 1.0);
    transition: opacity 0.2s, height .4s ease;
    transition-delay: 0.2s height;*/
    transition: all 0.3s ease;
}
.scale-in-out-enter, .scale-in-out-leave-to
/* .slide-fade-leave-active below version 2.1.8 */ {
    /*transform: translateY(-10px);*/
    transform: scaleY(0.5);
    opacity: 0;
}

.scale-in-out-slow-enter-active {
    transition: all 0.3s ease;
}
.scale-in-out-slow-leave-active {
    /*transition: all .4s cubic-bezier(1.0, 0.5, 0.8, 1.0);
    transition: opacity 0.2s, height .4s ease;
    transition-delay: 0.2s height;*/
    transition: all 0.3s ease;
}
.scale-in-out-slow-enter, .scale-in-out-slow-leave-to
/* .slide-fade-leave-active below version 2.1.8 */ {
    /*transform: translateY(-10px);*/
    transform: scaleY(0.5);
    opacity: 0;
}

/* SLIDE IN FROM RIGHT (from right) - <transition name="slide-in-from-right"> 
only use this on very small things, like a button or icon, not a whole panel or big div
*/
.slide-in-from-right-enter-active {
    transition: all 0.1s ease;
}
.slide-in-from-right-leave-active {
    transition: all 0.1s ease;
}
.slide-in-from-right-enter, .slide-in-from-right-leave-to {
    transform: translateX(100%);
    opacity: 0.5;
}

/* max-height-in - <transition name="max-height-in">  ONLY FOR FADE IN -- NO FADE OUT*/
/* not working with tables or maybe not other things */
.max-height-in-enter-active {
    overflow: hidden;
    transition: all 1s ease-out;
    height: auto;
    max-height: 1000px;
}
.max-height-in-enter  {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
}



/* FADE - <transition name="fade"> */
.fade-enter-active, .fade-leave-active {
    transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {
    opacity: 0;
}

/* FADE-FASTER - <transition name="fade-faster"> */
.fade-faster-enter-active, .fade-faster-leave-active {
    transition: opacity 0.15s;
}
.fade-faster-enter, .fade-faster-leave-to {
    opacity: 0;
}

/* FADE-FAST - <transition name="fade-fast"> */
.fade-fast-enter-active, .fade-fast-leave-active {
    transition: opacity 0.3s;
}
.fade-fast-enter, .fade-fast-leave-to {
    opacity: 0;
}

/* FADE-MEDIUM - <transition name="fade-medium"> */
.fade-medium-enter-active, .fade-medium-leave-active {
    transition: opacity 0.7s ease-out;
}
.fade-medium-enter, .fade-medium-leave-to {
    opacity: 0;
}

/* FADE-SLOW - <transition name="fade-slow"> */
.fade-slow-enter-active, .fade-slow-leave-active {
    transition: opacity 1s;
}
.fade-slow-enter, .fade-slow-leave-to {
    opacity: 0;
}

/* FADE-IN - <transition name="fade-in">  ONLY FOR FADE IN -- NO FADE OUT*/
.fade-in-enter-active {
    transition: opacity 0.7s ease-out;
}
.fade-in-enter  {
    opacity: 0;
}
.fade-in-fast-enter-active {
    transition: opacity 0.3s ease-out;
}
.fade-in-fast-enter  {
    opacity: 0;
}

/* FADE-OUT / FADE-OUT-FAST - <transition name="fade-out">  ONLY FOR FADE OUT -- NO FADE IN*/
.fade-out-leave-active {
    transition: opacity 0.7s ease-out;
}
.fade-out-leave-to  {
    opacity: 0;
}
.fade-out-fast-leave-active {
    transition: opacity 0.3s ease-out;
}
.fade-out-fast-leave-to  {
    opacity: 0;
}

/* FLASHER - <transition name="flasher"> */
.flasher-enter-active {
    animation: custom-flash-in 0.5s;
}
/*
.flasher-leave-active {
    animation: custom-fade-out 0.4s;
}
*/
@keyframes custom-flash-in {
    0% {
        transform: scale(0);
    }
    40% {
        transform: scale(1.2);
    }
    70% {
        transform: scale(0.8);
    }
    100% {
        transform: scale(1);
    }
}
@keyframes custom-fade-out {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

/* grow-in */
.grow-in-enter-active {
    animation: grow 0.7s;
}
@keyframes grow {
    0% {
        display: none;
        opacity: 0;
    }
    1% {
        display: block;
        opacity: 0;
        transform: scaleY(0);
    }
    100% {
        opacity: 1;
        transform: scaleY(1);
    }
}

/* Flip List Move for tables */
table .flip-list-move {
    transition: transform 0.5s;
  }


/* HEIGHT-EXPANDER - <transition name="height-expander"> USE AS TRANSITION ON SINGLE ELEMENT */
.height-expander {  /* Add this as regular class to the root element inside transition */
    flex-basis: 1;
}
.height-expander-enter-active, .height-expander-leave-active {
    transition: flex-basis 0.25s;
}
.height-expander-enter, .height-expander-leave-to  {
    flex-basis: 0;
}


/* ==========  PRINTING  ============= */

/* @media all {
    .print-page-break { display: none; }
} */

@media print {

    html {
        font-size: 22px;
    }

    html, body {
        position: relative;
        overflow: visible;
        width: 100%;
    }

    .print-page-break { 
        /* display: block;  */
        break-after: page;
        break-inside: avoid;
    }

    @page {
        size: A4;
        margin: 2cm;
        margin-top: 4cm;
        marks: crop cross;
    }

    @page :first {
        margin-top: 50%;
    }
}