/**
 * Bootstrap v5.2.x Stylesheet Overrides
 * Base font: 13.2px (which is 0.825rem;)
 *
 * 1/21/22 CG: Copied everything from /media/css/style.css into this file
 * so we can start removing any unused classes from B4 and start clean
 *
 */

/**
 * ========================================================
 * (1) base.css
 *
 * Nothing much going on here, just reset the root font-size
 * and the basic line-height in the root html element
 *
 * Bootstrap default is 1rem which by default is 16px
 * for most browsers.
 *
 * This is too big for what we normally do which is 12px
 * However, for some reason, 12px is looking *VERY* small
 * so we want to increase it a bit
 * 1/26/22 CG: 12px is small now because higher resolution screens
 *
 * 12px (12/16) = 0.75rem;
 * 13px (13/16) = 0.8125rem;
 * 14px (14/16) = 0.875rem;
 * 15px (15/16) = 0.9375rem;
 *
 * is the scale we have to work with
 *
 * Currently, want something a LITTLE bigger than 12px
 * but not quite 13px ... so we are using 0.8rem;
 *
 * The good thing with this "rem" format is that all other
 * fonts scale relative to this root html rem setting so
 * if we bump it up slightly, everything should move
 * relative to this and go up and down as expected
 *
 * ========================================================
 */

.ui-menu-item {
    width: 400px;
    list-style: none;
    background-color:#dddddd;
    cursor: pointer;
    border-bottom: 1px;
}
.ui-menu-item :hover {
    background-color:white;
}

.text-dim, td.text-dim {
    color: #ccc !important;
    font-style: italic;
    font-weight: normal;
}

.text-monospace, td.text-monospace {
    color: #95a5a6;
    font-family: var(--bs-font-monospace);
    font-size: 0.75rem;
}

.div-debug, .span-debug, .text-debug {
    display: none;
}

/* Add these two styles so that we can make links with no href="" look like links */
a.link-href {
    text-decoration: none;
    color: #007bff;
}

a.link-href:hover {
    color: #0056b3;
    text-decoration: underline;
}

/* Headings */

h1 { font-size: 1.5rem; }
h2 { font-size: 1.35rem; }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.1rem; }
h5 { font-size: 1.0rem; }
h6 { font-size: 0.9rem; }
h1, h2, h3, h4, h5, h6 {
    font-family: Oswald, Helvetica, Arial, sans-serif;
    text-transform: uppercase;
    color: #36454f;
    letter-spacing: -0.2px;
}

mark {
    background-color: yellow;
    font-weight: 600;
    padding: 0;
    /* line-height: 1.25; */
}

pre.debug {
    padding: 10px;
    background-color: #eee;
    /* font-size: 0.9rem; */
}

/* <hr class="border opacity-75 mt-2 mb-2"> */
hr.hr-separator, .hr-separator {
    margin-bottom: .5rem !important;
    margin-top: .5rem !important;
}

/** Overrides for toast **/

.toast-body {
    font-size: inherit !important;
}

/** Overrides for modal **/

.modal-header {
    padding-top: 6px;
    padding-bottom: 6px;
}

.modal-footer {
    padding-top: 6px;
    padding-bottom: 6px;
}

/** Overrides for inspire-tree **/

.inspire-tree .title {
    /* height: 16px; */
    /* line-height: 1.1; */
    height: 20px;
    line-height: 20px;
}

.inspire-tree li > .title-wrap {
    min-height: 10px;
}

.inspire-tree li > .title-wrap > a {
    text-decoration: none;
    color: inherit;
}

.inspire-tree .wholerow {
    height: 20px;
    margin-top: -20px;
}

.inspire-tree .toggle {
    height: 20px;
}


/**
 * ========================================================
 * (2) underline-link.css
 * Remove the underline on links (behavior changed)
 * https://stackoverflow.com/questions/65480036/bootstrap-5-underline-default-changed
 * ========================================================
 */

a:not([class]) {
    text-decoration: none;
}

a:not([class]):hover {
    text-decoration: underline;
}

/**
 * ========================================================
 * (3) header.css
 * ========================================================
 */

header {
    background-color: #fff;
    /* height: 68px; */
    /* height: 60px; */
    /* margin-bottom: 0px; */
    /* padding: 12px 0; */
}

header a.logo img {
    height: auto;
    max-width: 250px;
    width: 250px;
}

.panel-title {
    background-color: #007AC1;
    /* height: 44px; */
    color: #fff;
    font-family: "Fjalla One", Helvetica, Arial, sans-serif;
    padding-top: 8px;
    padding-bottom: 8px;
    padding-left: 12px;
    font-size: 24px;
    text-transform: uppercase;
    line-height: 1;
}

.panel-title span.highlight {
    background-color: #f00;
    padding: 3px 8px;
}

.panel-hud {
    /* font-size: 1.2rem; */
    font-size: 0.925rem;
    font-weight: 200;
    color: #aaa;
    /* margin-top: -10px; */
    /* margin-top: 14px; */
}

/**
 * ========================================================
 * (4) navbar.css
 *
 * 1st level: Horizontal menu that is visible, has visible down arrow
 * 2nd level: First set of dropdown menu that show up (slides down from 1st level)
 * 3rd+ level: Menu that slides out (towards right) from the 2nd+ level item with right arrow
 *
 * ========================================================
 */

.navbar {
    padding-left: 10px;
    padding-top: 0px;
    padding-bottom: 0px;
}

.navbar-nav > li > a {
    color: #fff !important;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.05rem;
    font-size: 0.75rem;
    text-shadow: none;
}

.navbar-nav > li > a:hover {
    color: #007AC1 !important;
    background-color: inherit; /* #333333; */ /* #b0501b; */ /* orange */
}

.navbar-nav .nav-link {
    line-height: 0.95;
}

/* Hide down arrow caret from bootstrap */
.navbar-nav > li.fa-caret-down {
    display: none;
}

/* Hide down arrow caret from bootstrap */
.dropdown-toggle::after {
    /* border-top: 0; */
}

.dropdown-item:focus, .dropdown-item:hover {
    background-color: #ddd;
}

.dropdown-item {
    font-size: 0.825rem;
    padding-left: 10px;
    padding-top: 1px;
    padding-bottom: 1px;
}

/** This triggers the magic so dropdowns show up on mouseover */
.dropdown:hover > .dropdown-menu {
    display: block;
}

/* This helps make the dropdown not jump around */
.dropdown-menu {
    margin-top: 0px !important;
    padding-top: 0px !important;
}

.dropdown-menu > li:first-child {
    margin-top: 5px;
}

/* Positioning link and arrow similar to default bootstrap behaviour for the 1st level */
.navbar-nav .dropdown-menu > li.dropdown > a {
    display: flex;
    align-items: center; /* vertically center everything */
    gap: 0.25rem; /* space between text and arrow (adjust as needed) */
    padding-right: 0.5rem; /* similar to Bootstrap padding */
}

/* Right arrow indicator for 2nd+ level menu (similar to default bootstrap arrow for the 1st level) */
.navbar-nav .dropdown-menu > li.dropdown > a::after {
    content: "";
    display: inline-block;
    /*vertical-align: middle;*/
    margin-left: 0.255em;
    border-top: 0.3em solid transparent;
    border-bottom: 0.3em solid transparent;
    border-left: 0.3em solid #6b7280;
}

/** this triggers the hover to display 3rd+ level menu **/
/** This is still jumping around so we may have to work on this later **/
.navbar-nav .dropdown-menu li:hover > .dropdown-menu {
    visibility: visible;
    display: block;
}

@media (min-width: 768px) {

    /** 2nd level **/

    .navbar-nav .dropdown-menu:before {
        border-bottom: 7px solid rgba(0, 0, 0, 0.2);
        border-left: 7px solid rgba(0, 0, 0, 0);
        border-right: 7px solid rgba(0, 0, 0, 0);
        content: "";
        display: inline-block;
        left: 9px;
        position: absolute;
        top: -7px;
    }

    /* Arrow pointing up and arrow pointing to right */
    .navbar-nav .dropdown-menu:after {
        border-bottom: 6px solid #fff;
        border-left: 6px solid transparent;
        border-right: 6px solid transparent;
        content: "";
        display: inline-block;
        left: 10px;
        position: absolute;
        top: -6px;
    }

    /** 3rd+ level **/

    .navbar-nav .dropdown-menu .dropdown-menu {
        left: 100%;
        position: absolute;
        top: -5px;
        visibility: hidden;
        margin-top: -1px;
    }

    .navbar-nav .dropdown-menu li {
        position: relative;
    }

    .navbar-nav .dropdown-menu .dropdown-menu:before {
        border-bottom: 7px solid transparent;
        border-left: none;
        border-right: 7px solid rgba(0, 0, 0, 0.2);
        border-top: 7px solid transparent;
        left: -7px;
        top: 7px;
    }

    .navbar-nav .dropdown-menu .dropdown-menu:after {
        border-top: 6px solid transparent;
        border-left: none;
        border-right: 6px solid #fff;
        border-bottom: 6px solid transparent;
        left: 10px;
        top: 8px;
        left: -6px;
    }
}

/** Bootstrap menu on mobile mode **/

@media ( max-width: 767px) {

     /** 3rd+ level **/

    .navbar-nav .dropdown-menu .dropdown-menu {
        /* position: absolute; */
        top: 20px;
        visibility: hidden;
        padding-left: 10px;
    }
}

.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {
    background-color: #e8e8e8;
    background-image: -webkit-gradient(linear, left 0%, left 100%, from(#ddd),to(#ddd));
    background-image: -webkit-linear-gradient(top, #ddd 0%, #ddd 100%);
    background-image: -moz-linear-gradient(top, #ddd 0%, #ddd 100%);
    background-image: linear-gradient(to bottom, #ddd 0%, #ddd 100%);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ddd', endColorstr='#ddd', GradientType=0);
}

ul.navbar-nav .dropdown-divider {
    /* margin: 0px; */
    /* padding-top: 2px; */
    /* padding-bottom: 2px; */
    margin-top: 4px;
    margin-bottom: 4px;
}

/**
 * ========================================================
 * (5) title.css
 * ========================================================
 */

#div-title {
    background-color: #007AC1;
    /* background-color: hsl(202, 100%, 38%); */
}

#div-title .brand {
    /* background-color: #007AC1; */
    font-family: "Fjalla One", Helvetica, Arial, sans-serif;
    color: #fff;
    /* padding: 0 0px; */
    padding-left: 10px;
    padding-right: 0px;
    display: flex;
    align-items: center;
    /* font-weight: bold; */
    /* font-size: 1.1em; */
    position: relative;
    /* height: 40px; */ /* force height */
    /* line-height: 40px; */
    /* font-family: Epilogue, Helvetica, Arial, sans-serif; */
    /* margin-top: 3px; */
    /* margin-top: 10px; */
    /* font-family: sans-serif; */
    font-weight: 700;
    /* background-color: #007AC1;
    /* height: 44px; */
    /* color: #fff; */
    /* padding-top: 8px; */
    /* padding-bottom: 8px; */
    /* padding-left: 12px; */
    font-size: 1.4rem;
    /* text-transform: uppercase; */
    /* line-height: 0.8; */
}

#div-title .arrow {
    display: block;
    position: relative;
    right: -10px; /* pulls the arrow outward */
    width: 0;
    height: 0;
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    /* border-left: 10px solid #d32f2f; */
    border-left: 10px solid #007AC1;
    z-index: 1;
}

/** Panels **/

#div-panel-info {
    /* padding: 0.5rem; */
    padding-top: 0.5rem;  /* 6/11/23 CG: May still need to remove this for finer control */
}

/**
 * ========================================================
 * (6) sidebar.css
 * ========================================================
 */

#div-sidebar {
    /* background-color: hsl(60, 30%, 92%)   */ /* #f1f1e5 beige */
    /* background-color: hsl(216, 71%, 98%); */ /* #f9fbfe light-blue */
    background-color: hsl(188, 0%, 98%);        /* #fafafa cold gray */
    border-right: 1px solid hsl(188, 0%, 94%);
}

.nav-sidebar {
    /* font-size: 0.8rem; */
}

.input-group-btn > .btn-xs {
    padding: 0.25rem 0.2rem;
}

.nav-sidebar a.btn-xs {
    /* font-size: 0.7rem; */
    padding: 0.35rem 0.2rem;
}

/* Sidebar fixed width */
.col-pixel-width-100 {
    flex: 0 0 100px;
    background-color: yellow;
}
.col-pixel-width-110 {
    flex: 0 0 110px;
    background-color: yellow;
}
.col-pixel-width-120 {
    flex: 0 0 120px;
    background-color: yellow;
}

.tooltip-inner {
    white-space: nowrap;
    line-height: 1em;
}

#div-order-sidebar {
    line-height: 1.2;
    /*
    margin-top: 5px;
    border-top: 1px solid #ddd;
    padding-top: 4px;
    padding-bottom: 5px;
    */
}

#div-order-sidebar a {
    /* font-size: 1.1rem; */
}

/**
 * ========================================================
 * (7) footer.css
 * ========================================================
 */

footer {
    text-align: center;
    color: #808080;
    font-size: 0.7rem;
    background-color: #262626;
    line-height: 1.5;
}

footer .fa-regular, footer .fa-solid {
    font-size: 1rem;
}

.panel-contact {
    color: #fff;
    font-size: 1.2em;
    font-weight: bold;
    min-height: 22pt;
    line-height: 1.8em;
    background: #aaaaaa;
    border-top: 1px solid #808080;
    border-bottom: 1px solid #808080;
    /*
    background-color: #1e74a8;
    background-image: -moz-linear-gradient(top, #358dc3, #1e74a8);
    background-image: -ms-linear-gradient(top, #358dc3, #1e74a8);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#358dc3), to(#1e74a8));
    background-image: -webkit-linear-gradient(top, #358dc3, #1e74a8);
    background-image: -o-linear-gradient(top, #358dc3, #1e74a8);
    background-image: linear-gradient(top, #358dc3, #1e74a8);
    filter: progid:dximagetransform.microsoft.gradient(startColorstr='#358dc3', endColorstr='#1e74a8', GradientType=0);
    */
}

.panel-contact a {
    color: #fff;
}

/**
 * ========================================================
 * (8) table.css
 * ========================================================
 */

.tr-rush {
    background-color: #FFEB8F;
}

.timeago {
    color: #aaa;
}
.tr-danger {
    background-color: #FFADAD;
}

.tr-danger > td .text-muted, .tr-danger > td .timeago {
    color: #777777;
}

.table > tbody > tr.appraiser {
    background-color: #DCE6F7;
}

.table > tbody > tr.client {
    background-color: #EFD2D2;
}

tr.strikeout td {
    color: #aaa;
    text-decoration: line-through;
    font-style: italic;
}

/**
 * ========================================================
 * (8.1) table-sm.css
 * Still need review and clean up
 * ========================================================
 */

.table-sm > thead > tr > th,
.table-sm > tbody > tr > th,
.table-sm > tfoot > tr > th,
.table-sm > thead > tr > td,
.table-sm > tbody > tr > td,
.table-sm > tfoot > tr > td
{
    /* font-size: 1rem; */
    /* line-height: 1.2; */
    padding-top: 1px;
    padding-bottom: 1px;
    padding-left: 3px;
    padding-right: 2px;
    font-weight: 400;
}

.table-sm > thead > tr > th {
    border-bottom: 0px;
    padding-top: 3px;
    padding-bottom: 3px;
    border-top: 0px;
    font-weight: 500;
}

.table-sm thead,
.table-sm thead a {
    background-color: #0e4569;
    color: #fff;
}

.table-sm thead th.hover:hover,
.table-sm thead th.hover:hover a {
    background-color: #D46B16;
    color: #fff;
    text-decoration: none;
}

.table-sm th.pagination-on,
.table-sm th.pagination-on a {
    background-color: #0F1F38;
}

.table-sm tr.pagination-off,
.table-sm tr.pagination-off a {
    color: #aaa;
}


/**
 * 4/11/23 CG: Added this to show a nice gray total bar on tables
 * Deprecate some of the older stuff so we can have a consistent css
 * The next 2 lines with "tr-total" are good, deprecated the rest
 */
.table-sm > tfoot > tr:first-child.tr-total > td {
    border-top: 2px solid #bbb;
}
.table-sm > tfoot > tr.tr-total > td {
    background: #F9F9F9;
}
/* 4/11/23 CG: Start deprecated lines here */
.table-sm > tfoot > tr.total > th,
.table-sm > tfoot > tr.total > td,
.table-sm > tbody > tr.total > td,
.table-sm > tfoot > tr.tr-total > th,
.table-sm > tfoot > tr.tr-total > td,
.table-sm > tbody > tr.tr-total > td {
    /* border-top: 1px solid #5E5E5E; */
    background: #eeeeee;
}
.table-sm > tfoot > tr.gray > td,
.table-sm > tbody > tr.gray > td,
.table-sm > tfoot > tr.tr-gray > td,
.table-sm > tbody > tr.tr-gray > td {
    background-color: #F9F9F9;
}
/* 4/11/23 CG: End deprecated lines here */

.table-sm .table-title {
    position: relative;
    z-index: 1;
    overflow: hidden;
    text-align: center;
    margin-top: 5px;
    margin-bottom: 5px;
}

.table-sm .table-title:before, .table-sm .table-title:after {
    position: absolute;
    top: 40%;
    overflow: hidden;
    width: 50%;
    height: 4px;
    content: '\a0';
    border-bottom: 1px solid #cccccc;
    box-sizing: content-box; /* + vendor specific versions here */
}

.table-sm .table-title:before {
    margin-left: -52%;
    text-align: right;
}

.table-sm .table-title:after {
    margin-left: 2%;
    text-align: left;
}

.table-sm > tbody > tr.not-active > td {
    color: #808080;
    background-color: #eee;
    font-style: italic;
}

.table-sm > tfoot > tr.total > td,
.table-sm > tfoot > tr.tr-total > td {
    border-top: 1px solid #5E5E5E;
}

/**
 * ========================================================
 * (8.2) table-xs.css
 * Still need review and clean up
 * ========================================================
 */

.table-xs > thead > tr > th,
.table-xs > tbody > tr > th,
.table-xs > tfoot > tr > th,
.table-xs > thead > tr > td,
.table-xs > tbody > tr > td,
.table-xs > tfoot > tr > td
{
    /* font-size: 0.95rem; */
    font-size: 0.775rem;
    line-height: 1.1;
    padding-top: 2px;
    padding-bottom: 2px;
    padding-left: 3px;
    padding-right: 2px;
    border-top: 0;
}

.table-xs > thead > tr > th {
    padding-bottom: 2px;
    padding-top: 2px;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    font-weight: 600;
}

.table-xs > tfoot > tr.total > th,
.table-xs > tfoot > tr.total > td,
.table-xs > tbody > tr.total > td,
.table-xs > tfoot > tr.tr-total > th,
.table-xs > tfoot > tr.tr-total > td,
.table-xs > tbody > tr.tr-total > td {
    border-top: 1px solid #5E5E5E;
    padding-bottom: 2px;
    padding-top: 2px;
}

.table-xs > tfoot > tr.gray > td,
.table-xs > tbody > tr.gray > td,
.table-xs > tfoot > tr.tr-gray > td,
.table-xs > tbody > tr.tr-gray > td {
    background-color: #F9F9F9;
}

.table-xs .table-title {
    position: relative;
    z-index: 1;
    overflow: hidden;
    text-align: center;
    margin-top: 5px;
    margin-bottom: 5px;
}

.table-xs .table-title:before, .table-xs .table-title:after {
    position: absolute;
    top: 40%;
    overflow: hidden;
    width: 50%;
    height: 4px;
    content: '\a0';
    border-bottom: 1px solid #cccccc;
    box-sizing: content-box; /* + vendor specific versions here */
}

.table-xs .table-title:before {
    margin-left: -52%;
    text-align: right;
}

.table-xs .table-title:after {
    margin-left: 2%;
    text-align: left;
}

.table-contrast thead {
    color: #fff;
    background: #24416E;
}

.table-contrast > thead > tr > th {
    border-bottom: 0;
}

.table-grid {
    /* table-layout: auto|fixed|initial|inherit; */
    table-layout: inherit;
}

.table-grid > thead > tr > th,
.table-grid > tbody > tr > th,
.table-grid > tfoot > tr > th,
.table-grid > thead > tr > td,
.table-grid > tbody > tr > td,
.table-grid > tfoot > tr > td
{
    padding-top: 1px;
    padding-bottom: 1px;
    padding-left: 3px;
    padding-right: 2px;
    border-top: 0px;
}

.table-grid .field {
    color: #555555;
}

.table-grid .field:after {
    content: ": ";
    color: #555555;
}

.table-grid .value {
    font-weight: 600;
}

.table-sm .nowrap, .table-xs .nowrap, .table-grid .nowrap {
    white-space: nowrap;
}

table td a.link {
    color: #d16610;
    font-size: 1.1em;
    text-decoration: underline;
    font-weight: 800;
}

.table-form > tbody > tr > td {
    padding-bottom: 2px;
}

.table-padded {
    border-collapse: initial;
    border-spacing: 4px;
}

tr.strikeout td {
    color: #aaa;
    text-decoration: line-through;
    font-style: italic;
}

/** table-header-rotated **/

.table-header-rotated {
    border-bottom:1px solid #ddd;
}

.table-header-rotated th.row-header {
    /* width: auto; */
    font-weight: normal;
}

.table-header-rotated td {
    width: 40px;
    /* border-top: 1px solid #dddddd; */
    border-left: 1px solid #dddddd;
    border-right: 1px solid #dddddd;
    vertical-align: middle;
    text-align: center;
}

.table-header-rotated th.rotate-45 {
    height: 80px;
    width: 40px;
    min-width: 40px;
    max-width: 40px;
    position: relative;
    vertical-align: bottom;
    padding: 0;
    font-size: 12px;
    line-height: 0.8;
    /* background-color: transparent; */
}

.table-header-rotated th.rotate-45 > div {
    position: relative;
    top: 0px;
    left: 40px; /* 80 * tan(45) / 2 = 40 where 80 is the height on the cell and 45 is the transform angle*/
    height: 100%;
    -ms-transform:skew(-45deg,0deg);
    -moz-transform:skew(-45deg,0deg);
    -webkit-transform:skew(-45deg,0deg);
    -o-transform:skew(-45deg,0deg);
    transform:skew(-45deg,0deg);
    overflow: hidden;
    /* border-left: 1px solid #dddddd; */
    border-right: 1px solid #dddddd;
    /* border-top: 1px solid #dddddd; */
}

.table-header-rotated th.rotate-45 span {
    -ms-transform:skew(45deg,0deg) rotate(315deg);
    -moz-transform:skew(45deg,0deg) rotate(315deg);
    -webkit-transform:skew(45deg,0deg) rotate(315deg);
    -o-transform:skew(45deg,0deg) rotate(315deg);
    transform:skew(45deg,0deg) rotate(315deg);
    position: absolute;
    bottom: 30px; /* 40 cos(45) = 28 with an additional 2px margin*/
    left: -25px; /*Because it looked good, but there is probably a mathematical link here as well*/
    display: inline-block;
    width: 85px; /* 80 / cos(45) - 40 cos (45) = 85 where 80 is the height of the cell, 40 the width of the cell and 45 the transform angle*/
    text-align: left;
    /* white-space: nowrap; *//*whether to display in one line or not*/
}


td.line-right {
    border-right: 1px solid #ddd;
}

tr.tier1 > td, tr.tier1 > td > a,
tr.partner > td, tr.partner > td > a,
td.tier1,
td.partner {
    color: #009e02;       /* green or #009e02 */
    font-weight: bold;
}

tr.tier2 > td, tr.tier2 > td > a,
tr.elite > td, tr.elite > td > a,
td.tier2,
td.elite {
    color: #00A2D8;
    font-weight: bold;
}

tr.tier3 > td, tr.tier3 > td > a,
tr.preferred > td, tr.preferred > td > a,
td.tier3,
td.preferred {
    color: #673AB7;
    font-weight: bold;
}

tr.tier4 > td, tr.tier4 > td > a,
tr.panel > td, tr.panel > td > a,
td.tier4,
td.panel {
    color: #FF5722;
    font-weight: bold;
}

td.td-separator, .td-separator {
    border-left:1px solid #eee;
}

/** ========== ACTIVE/NOT ACTIVE ========== **/

.table tr.active-on {
    background-color: #EBFFEA;
}

.table tr.active-off {
    /* background-color: #ddd; */
}

.table tr.active-off td, .table tr.active-off td a {
    /* background-color: #eee; */
    color: #aaa;
    text-decoration: line-through;
    font-style: italic;
}

/**
 * ========================================================
 * (8.4) table-detail.css
 * Bootstrap 4 has a table-info class so we have to rename
 * this to something else so they don't clash with each other
 * 7/8/20 CG: Change HTML to table-detail, deprecate table-attribute
 * ========================================================
 */

table.table-detail > tbody > tr > td {
    padding-top: 1px !important;
    padding-bottom: 1px !important;
    border: 0px !important;
    line-height: 1.3;
}

table.table-detail > tbody > tr > td:first-child {
    color: #808080;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    padding-top: 2px !important;
    padding-left: 0px;
}

table.table-detail > tbody > tr > td:last-child {
    min-width: 80%;
    font-weight: 600;
}

table.table-detail input[type=text] {
    /* height: 22px; */
    /* border-radius: 2px; */
}

/**
 * ========================================================
 * (8.5) table-rotated.css
 * TODO: need review
 * ========================================================
 */

.table-header-rotated {
    border-bottom:1px solid #ddd;
}

.table-header-rotated th.row-header {
    /* width: auto; */
    font-weight: normal;
}


.table-header-rotated td {
    width: 40px;
    /* border-top: 1px solid #dddddd; */
    border-left: 1px solid #dddddd;
    border-right: 1px solid #dddddd;
    vertical-align: middle;
    text-align: center;
}

.table-header-rotated th.rotate-45 {
    height: 80px;
    width: 40px;
    min-width: 40px;
    max-width: 40px;
    position: relative;
    vertical-align: bottom;
    padding: 0;
    font-size: 12px;
    line-height: 0.8;
}

.table-header-rotated th.rotate-45 > div {
    position: relative;
    top: 0px;
    left: 40px; /* 80 * tan(45) / 2 = 40 where 80 is the height on the cell and 45 is the transform angle*/
    height: 100%;
    -ms-transform:skew(-45deg,0deg);
    -moz-transform:skew(-45deg,0deg);
    -webkit-transform:skew(-45deg,0deg);
    -o-transform:skew(-45deg,0deg);
    transform:skew(-45deg,0deg);
    overflow: hidden;
    /* border-left: 1px solid #dddddd; */
    border-right: 1px solid #dddddd;
    /* border-top: 1px solid #dddddd; */
}

.table-header-rotated th.rotate-45 span {
    -ms-transform:skew(45deg,0deg) rotate(315deg);
    -moz-transform:skew(45deg,0deg) rotate(315deg);
    -webkit-transform:skew(45deg,0deg) rotate(315deg);
    -o-transform:skew(45deg,0deg) rotate(315deg);
    transform:skew(45deg,0deg) rotate(315deg);
    position: absolute;
    bottom: 30px; /* 40 cos(45) = 28 with an additional 2px margin*/
    left: -25px; /*Because it looked good, but there is probably a mathematical link here as well*/
    display: inline-block;
    width: 85px; /* 80 / cos(45) - 40 cos (45) = 85 where 80 is the height of the cell, 40 the width of the cell and 45 the transform angle*/
    text-align: left;
    /* white-space: nowrap; *//*whether to display in one line or not*/
}

/**
 * ========================================================
 * (8.6) table-feed.css
 * TODO: need review
 * ========================================================
 */

table.feed {
    width: 100%;
}
table.feed tr {
    border-top:1px solid #dddddd;
}
table.feed td {
    padding:4px;
    padding-right:10px;
}

/**
 * ========================================================
 * (8.7) table-sticky-header.css
 * https://css-tricks.com/making-tables-with-sticky-header-and-footers-got-a-bit-easier/
 * 2/24/24 CG: Must use table-responsive-sm on the div wrapper
 * because table-responsive will make the header not sticky due to overflow:auto
 * so we have to make it only do that on a smaller breakpoint "sm" so
 * at least the sticky header will work on the desktop
 * ========================================================
 */

table.table-sticky-header {
    border-collapse: collapse !important;
}

table.table-sticky-header th,
table.table-sticky-header td {
    padding: 1rem;
}

table.table-sticky-header thead,
table.table-sticky-header tfoot {
    /* background: #eee; */
}

table.table-sticky-header thead {
    position: sticky !important;
    top: 0;
    /* border-bottom: 2px solid #ccc; */
}

table.table-sticky-header tfoot {
    /* position: sticky !important; */
    /* bottom: 0; */
    /* border-top: 2px solid #ccc; */
}

/**
 * ========================================================
 * (8.8) table-form.css
 * ========================================================
 */

table.form td {
    vertical-align: top;
    padding-top: 2px;
    padding-bottom: 2px;
}

table.form input[type=text] {
    height: 22px;
    border-radius: 2px;
    /* font-size: 1em; */
}


/**
 * ========================================================
 * (9) form.css
 * ========================================================
 */

/**
 * 3/10/22 CG: Makes the <select> dropdown caret be closer to the right
 */
.form-select {
    background-position: right .25rem center;
}

/** TODO: need review **/
/**
 * 8/9/20 CG: Most of these can now be deleted after going to bootstrap 4
 * Should we default form-group to a specific margin so this is automated
 * I think we shuold at least make the margin-bottom some 1rem; or something
 * so that is overrides the default GIANT margin-bottom and we do NOT
 * have to specify mb-1 all over the place
 */

.form-group {
    margin-bottom: 0.25rem;  /* Overrides the default margin-bottom of boostrap 4 to match our 12px font */
}

/**
 * Most of these can now be deleted after going to bootstrap 4
 */

/* this is for Firefox SELECT input fields */

select.form-control {
    padding: 3px 5px;
}

/* Inset icon (for calendar icon) */
/* http://stackoverflow.com/questions/18838964/add-bootstrap-glyphicon-to-input-box */

.left-inner-addon {
    position: relative;
}

.left-inner-addon input {
    padding-left: 30px;
}

.left-inner-addon i {
    position: absolute;
    padding: 10px 12px;
    pointer-events: none;
}

.right-inner-addon {
    position: relative;
}

.right-inner-addon input {
    padding-right: 30px;
}

.right-inner-addon i {
    position: absolute;
    right: 0px;
    padding: 10px 12px;
    pointer-events: none;
}

select.form-control {
    /* font-size: 1rem; */
}

/* Placeholder */
.form-control::-webkit-input-placeholder {
    /* color: #bbb; */
    /* background-color: #F2F2F2; */
    color: #ddd;
}

.form-control::-moz-placeholder {
    /* color: #bbb; */
    /* background-color: #F2F2F2; */
    color: #ddd;
}

​.form-group-sm .col-xs-1,  .form-group-sm .col-sm-1,  .form-group-sm .col-md-1,
.form-group-sm .col-lg-1,  .form-group-sm .col-xs-2,  .form-group-sm .col-sm-2,
.form-group-sm .col-md-2,  .form-group-sm .col-lg-2,  .form-group-sm .col-xs-3,
.form-group-sm .col-sm-3,  .form-group-sm .col-md-3,  .form-group-sm .col-lg-3,
.form-group-sm .col-xs-4,  .form-group-sm .col-sm-4,  .form-group-sm .col-md-4,
.form-group-sm .col-lg-4,  .form-group-sm .col-xs-5,  .form-group-sm .col-sm-5,
.form-group-sm .col-md-5,  .form-group-sm .col-lg-5,  .form-group-sm .col-xs-6,
.form-group-sm .col-sm-6,  .form-group-sm .col-md-6,  .form-group-sm .col-lg-6,
.form-group-sm .col-xs-7,  .form-group-sm .col-sm-7,  .form-group-sm .col-md-7,
.form-group-sm .col-lg-7,  .form-group-sm .col-xs-8,  .form-group-sm .col-sm-8,
.form-group-sm .col-md-8,  .form-group-sm .col-lg-8,  .form-group-sm .col-xs-9,
.form-group-sm .col-sm-9,  .form-group-sm .col-md-9,  .form-group-sm .col-lg-9,
.form-group-sm .col-xs-10, .form-group-sm .col-sm-10, .form-group-sm .col-md-10,
.form-group-sm .col-lg-10, .form-group-sm .col-xs-11, .form-group-sm .col-sm-11,
.form-group-sm .col-md-11, .form-group-sm .col-lg-11, .form-group-sm .col-xs-12
{
    padding-left: 2px;
    /* padding-right: 2px; */
}

/**
 * 8/9/20 CG: Most of these input type="file" can now be deleted after going to bootstrap 4
 * but we have to go around and clean up all the areas where we have this control
 * which is all over the place.  We should also clean up all the backend for the
 * upload so that it is all **ONE** front end (HTML, Javascript, CSS for progress-bar)
 * and **ONE** backend and we can make changes easier
 */

.btn-file {
    position: relative;
    overflow: hidden;
    /* line-height: 1.1em !important; */
    line-height: 1rem !important;
}

.btn-file input[type=file] {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 100%;
    min-height: 100%;
    font-size: 100px;
    text-align: right;
    filter: alpha(opacity=0);
    opacity: 0;
    outline: none;
    background: white;
    cursor: inherit;
    display: block;
}

/**
 * ========================================================
 * (9.1) form.css
 * Auto-growing textarea
 * https://chriscoyier.net/2023/09/29/css-solves-auto-expanding-textareas-probably-eventually/
 * ========================================================
 */

.grow-wrap {
    /* easy way to plop the elements on top of each other and have them both sized based on the tallest one's height */
    display: grid;
}

.grow-wrap::after {
    /* Note the weird space! Needed to prevent jumpy behavior */
    content: attr(data-replicated-value) " ";
    /* This is how textarea text behaves */
    white-space: pre-wrap;
    /* Hidden from view, clicks, and screen readers */
    visibility: hidden;
}

.grow-wrap > textarea {
    /* You could leave this, but after a user resizes, then it ruins the auto sizing */
    resize: none;
    /* Firefox shows scrollbar on growth, you can hide like this. */
    overflow: hidden;
}

.grow-wrap > textarea,
.grow-wrap::after {
    /* Identical styling required!! */
    /* border: 1px solid black; */
    padding: 0.5rem;
    font: inherit;
    /* Place on top of each other */
    grid-area: 1 / 1 / 2 / 2;
}

/**
 * ========================================================
 * (10) tab.css
 * ========================================================
 */

.nav-tabs .nav-link {
    line-height: 1.1;
}

/**
 * 2/5/23 CG: Extra stylesheet for now to get the new tabs "ESPN-style"
 * going that we prototyped on the VP side of things
 * If we want to get this into the main style.css, we need to do some
 * changes to all "view/***" HTML to use the new tab-form and tab-list
 * For now, we are only using this for /manager/datareport/view/***
 *
 */

#div-panel-tabs {
    --bs-gutter-y: 0;
    --bs-gutter-x: 0;
    /* margin-right: calc(-.5 * var(--bs-gutter-x)); */
    /* margin-left: calc(-.5 * var(--bs-gutter-x)); */
    margin-right: calc(-.5 * 1.5rem);
    margin-left: calc(-.5 * 1.5rem);
}

/**
 * =============================================================================
 * (10.1) tabs.css Sidebar
 * =============================================================================
 */

#div-sidebar {
    /* background-color: hsl(202, 100%, 96%) !important; */         /* light blue */
    /* border-right: 1px solid hsl(202, 100%, 92%) !important; */
    /* background-color: hsl(60,30%, 92%) !important; */            /* beige */
    /* background-color: hsl(60, 30%, 94%) !important; */
}

/**
 * =============================================================================
 * (10.2) tabs.css Splitscreen gutter (the vertical bar)
 * 6/11/23 CG: deprecate this, seems to be a duplicate on 20-split.js
 * =============================================================================
 */

/*
.gutter {
    border-left: 1px solid #ccc;
    background-color: #fff !important;
    border-right: 1px solid #fff !important;
}
*/

/**
 * =============================================================================
 * (10.3) tabs.css Tab classes (list, forms, etc.)
 * 6/11/23 CG: Moving to new tab design
 * =============================================================================
 */

.col-tab {
    background-color: #eee;
    /* background-color: #f7f7f7; */
    /* background-color: #efefef; */
    padding-top: 0.8rem;
}

/* 9/29/23 CG: Only remove the margin for desktop view, mobile needs the right margin */
@media (min-width: 768px) {
    /* Reduce the margin and padding if not last child so the vertical separation
       looks normal and not doubled up */
    .row .col-tab:not(:last-child) {
        margin-right: 0;
        padding-right: 0;
    }

    .row .col-tab-clear:not(:last-child) {
        margin-right: 0;
        padding-right: 0;
    }
}

/* 6/11/23 CG: We are putting the padding-top on .col-tab instead of having
    to make you add another class to the first row of the tab-cards
    If we need finer control of the padding, we need to use this class
    with a margin-top instead of padding-top above
.tab-card-top {
    margin-top: 0.8rem;
}
*/

.tab-card {
    background-color: #fff;
    /* padding: 12px; */
    /* margin-bottom: 12px; */
    padding: 0.8rem;
    margin-bottom: 0.8rem;
    /* border: 1px solid red; */
    border: 1px solid #eeeeee;
}

.tab-list {
    background-color: #fff;
    /* margin-top: 12px; */
    padding: 0px 12px 12px 12px;
}


/**
 * ======================================================================
 * (10.4) tabs.css TABS (Bootstrap)
 * Colors Options: #007ac1
 * ======================================================================
 */

.nav-tabs {
    padding: 0;
    background-color: #fff;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    font-size: 0.8rem;
    /* margin-left: -16px; */
    /* margin-right: -16px; */
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
}

.nav-tabs > .nav-link {
    padding-right: 1em;
    padding-left: 1em;
}

.nav-tabs > .nav-link.active,
.nav-tabs > .nav-item.show > .nav-link {
    border-bottom: 4px solid #007ac1;
    /* background-color: #e6f6ff; */
    /* background-color: #f2fcff; */
    /* background-color: red; */
    /* background-color: #f2fcff; */
    border-radius: 0;
}

/*
 * This is the css to try to fix so that hovering on tab row
 * does not trigger the graying out
 * https://stackoverflow.com/questions/37959686/on-child-hover-change-the-css-of-parent
 * https://webdesign.tutsplus.com/tutorials/selecting-parent-elements-with-css-and-jquery--cms-26423
 */
/*
.nav-tabs:hover > .nav-link {
    color: #bbb;
    border-bottom: 4px solid #fff;
}
*/

.nav-tabs > .nav-link:hover {
    color: #333333;
    border-bottom: 4px solid #007ac1;
}

.nav-tabs > .nav-link {
    color: #333333;
    border: 0px;
}

.nav-tabs > .nav-link > .active {
    border-bottom: 4px solid #007ac1;
}

.nav-tabs > .nav-item {
    margin-bottom: 0px;
}

/**
 * ========================================================
 * (11) wiki.css
 * TODO: need review, only for wiki pages
 * ========================================================
 */

.wiki a {
    /* text-decoration: underline; */
    /* text-decoration-style: dotted; */
    /* text-decoration-style: dashed; */
}

#div-wiki {
    font-weight: normal;
    line-height: 1.3;
    /* font-size: 0.875rem; */
    font-size: 0.9rem;
}

#div-wiki ul, .wiki ul {
    padding-left: 1.2em;
}

#div-wiki > h1:first-of-type {
    margin-top: 0px;
    font-weight: 700;
    /* letter-spacing: -1px; */
    /* font-size: 1.8rem; */
    /* font-family: 'Fjalla+One', sans-serif; */
    /* font-family: 'Oswald', sans-serif; */
    /* font-family: 'Oswald', sans-serif; */
}
#div-wiki h1,
#div-wiki h2,
#div-wiki h3,
#div-wiki h4,
#div-wiki h5,
#div-wiki h6 {
    font-family: 'Epilogue', sans-serif;
    text-transform: none;
}

#div-wiki table {
    margin-bottom: 10px;
}

#div-wiki table > thead > tr > th {
    background-color: #eee;
    padding: 4px 4px 4px 4px;
    font-weight: bold;
    border-bottom: 1px solid #aaa;
}

#div-wiki table > tbody > tr > td {
    padding: 4px 4px 4px 4px;
    border-bottom: 1px solid #ddd;
}

/* markdown-it extra styles */
/* https://github.com/GerHobbelt/markdown-it-anchor */
/* https://rhianvanesch.com/posts/2021/02/09/adding-heading-anchor-links-to-an-eleventy-site/ */
/* css to remove the line-break for the extra <p> tag and make the padding smaller around the box */
.p-inline {
    padding: 0.5rem;
}
.p-inline p {
    display: inline;
}
.header-anchor, a.header-anchor {
    color: #ddd;
    font-size: 1.1rem;
}
.screen-reader-only {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/* 1/18/25 CG: Add styles for wiki editor using easyMDE with CodeMirror */
.CodeMirror .cm-header-1,
.CodeMirror .cm-header-2,
.CodeMirror .cm-header-3,
.CodeMirror .cm-header-4,
.CodeMirror .cm-header-5,
.CodeMirror .cm-header-6 {
    font-family: 'Epilogue', sans-serif;
}

.CodeMirror .cm-header-1, .cm-s-easymde .cm-header-1    { font-size: 1.6rem !important; }
.CodeMirror .cm-header-2, .cm-s-easymde .cm-header-2    { font-size: 1.4rem !important; }
.CodeMirror .cm-header-3, .cm-s-easymde .cm-header-3    { font-size: 1.2rem !important; }
.CodeMirror .cm-header-4, .cm-s-easymde .cm-header-4    { font-size: 1.1rem !important; }
.CodeMirror .cm-header-5, .cm-s-easymde .cm-header-5    { font-size: 1.0rem !important; }
.CodeMirror .cm-header-6, .cm-s-easymde .cm-header-6    { font-size: 0.9rem !important; }
.editor-toolbar                                         { padding: 2px;         }
.editor-toolbar button                                  { font-size: 0.8rem;    }


/**
 * ========================================================
 * (12) alert.css
 * TODO: need review, loading and alert (upper right)
 * ========================================================
 */

/** Loading panel **/

#div-loading {
    position: fixed;
    right: 0;
    top: 0;
    background-color: #808080;
    color: #fff;
    padding: 8px;
    white-space: nowrap;
    zoom: 1;
    filter: alpha(opacity = 80);
    opacity: 0.8;
    font-weight: normal;
    font-size: 1.1rem;
}

.loading .progress {
    width: 50px;
    margin-bottom: 0px;
    display: inline-block;
}

/** Notifications **/

.notifications.top-right {
    right: 0;
    top: 0;
}

.notifications > div {
    margin: 0;
}

.notifications .alert {
    padding: 4px;
    min-width: 250px;
    max-width: 450px;
    border-radius: 0;
}

.label-sm {
    padding: 0.1em 0.2em 0.1em;
}

/**
 * ========================================================
 * (12.1) alert.css
 * Sweetalert specific styles that we pass into customClasses
 * ========================================================
 */

.swal-title {
    text-transform: none;
    font-weight: 200;
    font-family: inherit;
    /* color: red !important; */
}

.alert-sm {
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
    margin-bottom: 0.5em !important;
}

/**
 * ========================================================
 * (13) triangles.css
 * TODO: need review, up/down arrows in css
 * http://davidwalsh.name/css-triangles
 * ========================================================
 */

/* create an arrow that points up */
div.arrow-up {
    width: 0;
    height: 0;
    border-left: 5px solid transparent; /* left arrow slant */
    border-right: 5px solid transparent; /* right arrow slant */
    border-bottom: 5px solid #2f2f2f;
    /* bottom, add background color here */
    font-size: 0;
    line-height: 0;
}

/* create an arrow that points down */
div.arrow-down {
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #2f2f2f;
    font-size: 0;
    line-height: 0;
}

/* create an arrow that points left */
div.arrow-left {
    width: 0;
    height: 0;
    border-bottom: 5px solid transparent; /* left arrow slant */
    border-top: 5px solid transparent; /* right arrow slant */
    border-right: 5px solid #2f2f2f;
    /* bottom, add background color here */
    font-size: 0;
    line-height: 0;
}

/* create an arrow that points right */
div.arrow-right {
    width: 0;
    height: 0;
    border-bottom: 5px solid transparent; /* left arrow slant */
    border-top: 5px solid transparent; /* right arrow slant */
    border-left: 5px solid #2f2f2f;
    /* bottom, add background color here */
    font-size: 0;
    line-height: 0;
}

/**
 * ========================================================
 * (14) tile.css
 * TODO: need review, manager home page
 * ========================================================
 */

.text-skinny {
    font-family: Oswald,sans-serif;
    /* font-size: 0.9rem; */
    font-size: 0.775rem;
    font-weight: 300;
    text-transform: uppercase;
}

.home-clickable-panel {
    background-color: #000;
    background-color: rgba(0, 0, 0, 0.4);
    padding: 4px 10px 4px 10px;
    margin-bottom: 6px;
    /* font-size: 1.1em; */
    color: #fff;
    line-height: 1.3;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.home-clickable-panel a, .home-clickable-panel-hover a {
    color: #fff;
}

.home-clickable-panel-hover {
    background-color: rgba(0, 0, 0, 0.6);
    padding: 4px 10px 4px 10px;
    margin-bottom: 6px;
    /* font-size: 1.1em; */
    color: #fff;
    line-height: 1.3em;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.home-clickable-panel h1, .home-clickable-panel-hover h1 {
    color: #fff;
    font-family: 'Michroma', sans-serif;
    /* font-size: 1.2em; */
    font-variant: small-caps;
    margin-top: 0px;
    margin-bottom: 4px;
    line-height: 1.3em;
}

.section-title {
    position: relative;
    /* font-size: 1rem; */
    z-index: 1;
    overflow: hidden;
    text-align: center;
    color: #4F4F4F;
    margin-top: 5px;
    margin-bottom: 5px;
}

.section-title:before, .section-title:after {
    position: absolute;
    top: 40%;
    overflow: hidden;
    width: 50%;
    height: 3px;
    content: '\a0';
    border-bottom: 1px solid #cccccc;
    box-sizing: content-box; /* + vendor specific versions here */
}

.section-title:before {
    margin-left: -52%;
    text-align: right;
}

.section-title:after {
    margin-left: 2%;
    text-align: left;
}

/** STATUS BOX **/

td.status-box {
    /* font-size: 0.8rem; */
    padding: 6px 0 6px;
}

.status-box .count-number {
    padding: 0;
    margin: 4px;
    line-height: 1;
}

.status-box-legend {
    text-align: text-center;
    color: #ccc;
    font-size: 0.75rem;
}

/** TILE CARD **/

.tile-frame {
    min-height: 50px;
    background-color: #eee;
    padding-left: 1px !important;
    padding-right: 1px !important;
    border-right: 2px solid #fff;
    white-space: nowrap;
    overflow: hidden;
}

.tile-row {
    margin-left: 0;
    margin-right: 0;
    border-bottom: 2px solid #fff;
}

.tile-card {
    text-align: center;
    min-height: 48px;
    padding: 5px 0px 5px 0px;
}

.tile-title {
    font-family: Oswald,sans-serif;
    font-weight: 200;
    text-transform: uppercase;
    padding-bottom: 3px;
    font-size: 0.775rem;
}

.tile-data {
    /* font-family: Oswald, sans-serif; */
    /* font-family: Yantramanav, sans-serif; */
    /* font-family: Roboto, sans-serif; font-weight: 100; */
    /* font-family: 'Roboto Condensed', sans-serif; */
    font-family: 'IBM Plex Sans Condensed' , sans-serif;
    font-weight: 300;
    /* font-size: 1.7rem; */
    font-size: 1.5rem;
    letter-spacing: -2px;
    line-height: 1;
    padding: 0 0 4px;
}

/* 10/7/25 CG: Setup the new tiles in client scoreboard */

.tile                   { background-color: #fcfcfd; padding: 4px; }
.tile-primary           { background-color: #337ab7; }
.tile-primary-subtle    { background-color: #6591b8; }
.tile-secondary         { background-color: #6c757d; }
.tile-secondary-subtle  { background-color: #e2e3e5; }
.tile-success           { background-color: #198754; }
.tile-success-subtle    { background-color: #d1e7dd; }
.tile-danger            { background-color: #dc3545; }
.tile-danger-subtle     { background-color: #f8d7da; }
.tile-warning           { background-color: #ffc107; }
.tile-warning-subtle    { background-color: #fff3cd; }
.tile-info              { background-color: #0dcaf0; }
.tile-info-subtle       { background-color: #cff4fc; }
.tile-light             { background-color: #f8f9fa; }
.tile-light-subtle      { background-color: #fcfcfd; }
.tile-dark              { background-color: #212529; }
.tile-dark-subtle       { background-color: #ced4da; }

.tile-field             { font-size: 0.75rem; color: #808080; }
.tile-value             { font-size: 1.5rem;  font-weight: 800; }
.tile-text              { font-size: 0.9rem;  color: #808080; }

/**
 * ========================================================
 * (15) ratings.css
 * TODO: need review, 5-star rating icons + display
 * ========================================================
 */

.user-badge {
    background: #ddd; /* yellow; */
    border-radius: 50%;
    color: #a7a7a7;
    display: block; /* block makes vertical spacing break */
    line-height: 0.95em;
    overflow:auto;
    height: 30px !important;
    width: 30px !important;
}

.user-badge-text {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    height: 30px !important;
    width: 30px !important;
}

/** TODO: Clean up **/
.user-badge-blank {
    background: transparent; /* #fff; */ /* yellow; */
    border: 1px dotted #a7a7a7;
    border-radius: 50%;
    color: #a7a7a7;
    display: block; /* table-cell; */
    height: 30px;
    line-height: 2.4em;
    max-height: 30px;
    max-width: 30px;
    /*overflow:auto;*/
    text-align: center;
    vertical-align: middle;
    width: 30px;
}

.rating-xs {
    /* font-size: 1.2em; */
}

.rating-sm {
    /* font-size: 1.4em; */
}

.rating-md {
    /* font-size: 1.6em; */
    line-height: 1;
}

.rating-lg {
    /* font-size: 1.8em; */
    line-height: 1;
}

/**
 * (15.1) ========== CSS RATING ==========
 * We are using Method 1 (sharper)
 * http://codepen.io/Bluetidepro/pen/GkpEa
 */

.star-ratings-css {
    unicode-bidi: bidi-override;
    color: #c5c5c5;
    /* font-size: 16px; */
    height: 16px;
    /* width: 80px; */
    /* margin: 0 auto; */
    position: relative;
    padding: 0;
    text-shadow: 0px 1px 0 #a2a2a2;
}
.star-ratings-css-xs {
    /* font-size: 8px; */
    height: 8px;
    width: 40px;
}
.star-ratings-css-sm {
    /* font-size: 12px; */
    height: 12px;
    width: 60px;
}
.star-ratings-css-lg {
    /* font-size: 24px; */
    height: 24px;
    width: 40px;
    width: 120px;
}

.star-ratings-css .star-ratings-css-top {
    /* color: #e7711b; */
    color: #F2D500;
    padding: 0;
    /*text-shadow: 0px 1px 0 #ab5414;*/
    text-shadow: 0px 1px 0 #F2D500;
    position: absolute;
    z-index: 1;
    display: block;
    left: 0px;
    overflow: hidden;
}
.star-ratings-css .star-ratings-css-bottom {
    z-index: 0;
}
.star-ratings-sprite {
    background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/2605/star-rating-sprite.png") repeat-x;
    /* font-size: 0; */
    height: 21px;
    line-height: 0;
    overflow: hidden;
    text-indent: -999em;
    width: 110px;
    margin: 0 auto;
}
.star-ratings-sprite .rating {
    background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/2605/star-rating-sprite.png") repeat-x;
    background-position: 0 100%;
    float: left;
    height: 21px;
    display: block;
}

/**
 * (15.2) ========== CSS RATING ==========
 * https://css-tricks.com/five-methods-for-five-star-ratings/
 */

.score {
    display: block;
    /* font-size: 16px; */
    position: relative;
    overflow: hidden;
    line-height: 1.1;
}

.score-wrap {
    display: inline-block;
    position: relative;
    /* height: 19px; */
}

.stars-active {
    /* color: #EEBD01; */
    color: #007ac0;
    position: relative;
    z-index: 10;
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
}

.stars-inactive {
    /* color: grey; */
    color: #ddd;
    position: absolute;
    top: 0;
    left: 0;
    -webkit-text-stroke: initial;
    /* overflow: hidden; */
}

/**
 * ========================================================
 * (16) sms.css
 *  TODO: need review, for user view > SMS display
 * ========================================================
 */

.sms-wrap {
    margin-top: 3px;
}
.sms-wrap-inbound {
    text-align: left;
}
.sms-wrap-outbound {
    text-align: right;
}
.sms-bubble {
    padding: 6px;
    width: auto;
    display: inline-block;
    width: 90%;
}
.sms-bubble-inbound {
    text-align: left;
    background-color: #ddd;
}
.sms-bubble-outbound {
    color: #3D3D3D;
    background-color: #BAE4FF;
}
.sms-arrow {
    width: 0;
    height: 10;
    display: inline;
    top: -8px;
    position: relative;
}
.sms-arrow-outbound {
    border-bottom: 14px solid #BAE4FF;
    border-right: 14px solid transparent;
}
.sms-arrow-inbound {
    border-bottom: 14px solid #ddd;
    border-left: 14px solid transparent;
}

/**
 * ========================================================
 * (17) split.js
 * from splitjs.org
 * ========================================================
 */

/*
 * 7/10/22 CG: added new class for new layout
 * We need to clean this entire section up once we move
 * to the new layout with the nicer splitscreen
 */
.split_new {
    display: flex;
    flex-direction: row;
}

#div-split-left {
    overflow-x: hidden;
    overflow-y: auto;
}

#div-split-right {
    overflow-x: hidden;
    overflow-y: auto;
}

.splitscreen {
    display: flex;
    flex-direction: row;
    /* position: fixed; */
    left: 0;
    top: 0;
    height:100vh;
    /* margin-left: -14px; */
    /* margin-right: -14px; */
    /* margin-top: -10px; */
    width: 100%;
    padding-left: 0px;
    padding-right: 0px;
}

#div-panel-frame {
    padding-left: 0;
    padding-right: 0;
}

#div-panel-control {
    height:100vh;
    left: 0;
    right: 0;
    overflow-y: scroll;
    /* background-color: red; */
}

.split {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    overflow-y: auto;
    overflow-x: hidden;
}

/*
.gutter {
    background-color: #fff;
    background-repeat: no-repeat;
    background-position: 50%;
    border-right: 1px solid #ccc;
}
*/

/* 3/23/25 CG: New splitscreen gutter css to make the handles appear in the middle of the border */

.gutter {
    position: relative;
    background-color: #fff;
    background-repeat: no-repeat;
    background-position: 50%;
}

.gutter::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px;
    background-color: #ccc;
    transform: translateX(-50%);
}

.gutter.gutter-horizontal {
    cursor: col-resize;
    background-image:  url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg==');
}

.gutter.gutter-vertical {
    cursor: row-resize;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAFAQMAAABo7865AAAABlBMVEVHcEzMzMzyAv2sAAAAAXRSTlMAQObYZgAAABBJREFUeF5jOAMEEAIEEFwAn3kMwcB6I2AAAAAASUVORK5CYII=');
}

.split.split-horizontal, .gutter.gutter-horizontal {
    height: 100%;
    float: left;
}

/**
 * ========================================================
 * (18) autocomplete.js
 * 9/25/22 CG: After bootstrap 5, the jQuery UI autocomplete
 * became really messed up because the CSS for jquery UI is
 * really old.  We try to fix it here
 * https://jsfiddle.net/gotemkfr/
 * https://stackoverflow.com/questions/5019663/jquery-autocomplete-styling
 * https://xtemos.com/forums/topic/make-section-100vh-minus-header/
 * ========================================================
 */

.ui-autocomplete {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    display: none;
    /* float: left; */
    min-width: 160px;
    padding: 5px 0;
    /* margin: 2px 0 0; */
    /* list-style: none; */
    /* font-size: 14px; */
    /* text-align: left; */
    background-color: #ffffff;
    border: 1px solid #cccccc;
    border: 1px solid rgba(0, 0, 0, 0.15);
    /* border-radius: 4px; */
    -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
    background-clip: padding-box;
    max-height: calc(100vh - 200px);
    overflow: auto;
}

.ui-autocomplete > li > div {
    /* display: block; */
    padding: 3px 4px;
    font-size: 0.8rem;
    line-height: 0.9;
    /* clear: both; */
    /* font-weight: normal; */
    /* line-height: 1.42857143; */
    /* color: #333333; */
    white-space: nowrap;
    background-color: #ffffff;
    overflow: hidden;
}

.ui-autocomplete > li > div:hover {
    background-color: #eee;
}

.ui-helper-hidden-accessible {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/**
 * ========================================================
 * (19) scrollbar.js customization
 * ========================================================
 */

/* Firefox */
/*
* {
    scrollbar-width: thin;
    scrollbar-color: #a9a8b2 #f1f4f4;
}
*/

/* Chrome, Edge, and Safari */
/*
*::-webkit-scrollbar {
    width: 4px;
}

*::-webkit-scrollbar-track {
    background: #f1f4f4;
}

*::-webkit-scrollbar-thumb {
    background-color: #a9a8b2;
    border-radius: 4px;
    border: 4px none #ffffff;
}
*/

/**
 * ========================================================
 * (20) toast.css
 * ========================================================
 */

.toast-container {
    /* z-index: auto; */
    /* position: fixed; */
    z-index: 100 !important;
}

.toast:not(:last-child) {
    margin-bottom: .25rem;
}

.toast-body {
    /* font-size: 1.05rem; */
    padding: .50rem;
}

/**
 * ========================================================
 * (21.2) choices.js with bootstrap 5
 * https://github.com/Choices-js/Choices
 * ========================================================
 */

.choices__inner {
    padding: 0px;
    min-height: auto;
    max-height: 1.75rem;
    border-radius: 0.375rem;
    line-height: 1.25;
}

.choices__item {
    padding-right: 10px !important;
}


.choices__list--dropdown .choices__item, .choices__list[aria-expanded] .choices__item {
    padding: 0.25rem;
}

.choices[data-type*="select-one"] .choices__input {
    padding: 0.25rem;
}

/* Container adjustments */
.choices {
    position: relative;
}

/* Prevent wrapping and set up dropdown */
.choices__list--dropdown {
    position: absolute;
    width: max-content !important;
    min-width: 100% !important;
    max-width: 400px; /* Set a reasonable max-width */
    z-index: 1000;
}

.choices__item--choice {
    white-space: nowrap !important;
    padding-right: 20px; /* Add some extra padding */
}

/* Handle long text with ellipsis if needed */
.choices__item--choice[data-choice-selectable] {
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* Ensure proper positioning */
.choices[data-type*="select-one"] .choices__list--dropdown,
.choices[data-type*="select-multiple"] .choices__list--dropdown {
    top: 100%;
    left: 0;
    right: auto;
}

.choices__group {
    background-color: #ddd;
}

.choices__heading {
    text-transform: uppercase;
    padding: 4px;
    color: #000;
    font-size: 0.75rem;
    font-weight: 800;
}

/**
 * ========================================================
 * (22) tabulator.css
 * https://tabulator.info/docs/5.4/theme
 * ========================================================
 */

.tabulator {
    font-size: inherit !important;
}

.tabulator.table-sm .tabulator-tableholder .tabulator-table .tabulator-row {
    min-height: inherit !important;
}

.tabulator.table-sm .tabulator-tableholder .tabulator-table .tabulator-row .tabulator-cell {
    padding: 1px !important;
}

.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-title {
    white-space: normal;
}

.tabulator .tabulator-cell {
    font-size: 0.8rem;
    /* padding: 2px; */
    /* line-height: 0.85; */
}

/**
 * ========================================================
 * (22.1) datatables
 * ========================================================
 */

table.dataTable th.dt-start,
table.dataTable td.dt-start {
    text-align: left;
}

table.dataTable th.dt-end,
table.dataTable td.dt-end {
    text-align: right;
}

/* position the up and down icon closer to the edge of the column */
table.dataTable.table-sm > thead > tr th.dt-orderable-asc span.dt-column-order,
table.dataTable.table-sm > thead > tr th.dt-orderable-desc span.dt-column-order,
table.dataTable.table-sm > thead > tr th.dt-ordering-asc span.dt-column-order,
table.dataTable.table-sm > thead > tr th.dt-ordering-desc span.dt-column-order,
table.dataTable.table-sm > thead > tr td.dt-orderable-asc span.dt-column-order,
table.dataTable.table-sm > thead > tr td.dt-orderable-desc span.dt-column-order,
table.dataTable.table-sm > thead > tr td.dt-ordering-asc span.dt-column-order,
table.dataTable.table-sm > thead > tr td.dt-ordering-desc span.dt-column-order {
    width: 4px;
}

table.dataTable.table-sm > thead > tr th.dt-orderable-asc,
table.dataTable.table-sm > thead > tr th.dt-orderable-desc {
    padding-right: 14px;
}

.dt-header-panel h1 {
    margin-bottom: 0px;
}

/**
 * ========================================================
 * (23) instantsearch.js customization
 * https://www.algolia.com/doc/api-reference/widgets/js/
 * ========================================================
 */

.ais-SearchBox-form {
    height: 2rem;
}

.ais-SearchBox-form::before {
    left: 0.5rem;
}

.ais-SearchBox-input {
    padding-left: 1.7rem;
    box-shadow: none;
}

.ais-SearchBox-reset {
    right: 0.4rem;
}

.ais-Hits-item, .ais-InfiniteHits-item {
    padding: 0.2rem;
    font-size: 0.8rem;
    flex-direction: column;
    align-items: flex-start;
    line-height: 0.95rem;
    text-overflow: ellipsis;
}

.ais-Hits-item a {
    color: #000;
}

.ais-Hits-item a:hover {
    text-decoration: none;
}

.ais-Hits-item:hover {
    background-color: #eee;
}

/* the 2 css elements below allow the search results to float */
#ais-search {
    position: relative;
}

#ais-hits {
    position: absolute;
    top: 19;
    left: 0;
    right: 0;
    z-index: 999;
}

/**
 * ========================================================
 * (24) bullet-list.css
 * ========================================================
 */

.list-flush {
    list-style: disc;
    padding-left: 0;
}

.list-flush li {
    margin-left: 1rem;
}

/**
 * ========================================================
 * (25) details-summary sections
 * 4/18/24 CG: Styles expand/collapse for our tab-panel
 * <details><summary>...</summary></details>
 * ========================================================
 */

.tab-card-details summary::-webkit-details-marker {
    display: none;
}

.tab-card-details summary {
    list-style: none;
    /* padding: 1em; */
    cursor: default;
    /* border: 1px solid; */
    /* background: #fafafa; */
    padding-right: 1.5em;
    position: relative;
    font-size: 1.5rem;
    font-family: Oswald, Helvetica, Arial, sans-serif;
    text-transform: uppercase;
    margin-bottom: 0.35rem;
}

.tab-card-details summary::after {
    content: "";
    border-right: 2px solid;
    border-bottom: 2px solid;
    position: absolute;
    right: 0.5rem;
    height: 1.25rem;
    width: 1.25rem;
    transform: rotate(45deg) translatey(-0.1em);
    color: #aaa;
}

.tab-card-details summary:focus {
    /* outline: 2px solid; */
    /* outline-offset: 1px; */
    color: inherit;
}

/* shows expand/collapse on hover */
.tab-card-details summary:hover::after {
    content: "Expand/Collapse";
    visibility: visible;
    transform: rotate(0deg) translatey(-0.1em);
    opacity: 1;
    font-size: 0.8rem;
    /* background: red; */
    width: 110px;
    font-family: sans-serif;
    color: #aaa;
    text-transform: none;
    top: 6px;
    right: 0px;
    text-align: right;
    border: 0;
    background-color: #fff;
    /* margin: 0.25rem; */
    padding-top: 0.2rem;
    padding-bottom: 0.2rem;
    padding-left: 0px;
}

/**
 * ========================================================
 * (26) bootstrap accordion component customizations
 * 4/28/24 CG: Add custom
 * ========================================================
 */

.accordion-button {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    padding-left: 0rem;
    padding-right: 0.25rem;
}

.accordion-button:not(.collapsed) {
    background-color: #fff;
    box-shadow: none;
}

.accordion-button h1 {
    margin-bottom: 0.25rem;
}

.accordion-body {
    padding-top: 0.25rem;
    padding-bottom: 0.75rem;
    padding-left: 0;
    padding-right: 0;
}

/**
 * ========================================================
 * (27) 11/9/24 CG: Added css so we can use icons as toggle
 * for checkboxes (if you don't want to use a slider)
 * Not sure if this is going to be useful yet
 * src\Core\View\Form::checkboxToggleIcon()
 * ========================================================
 */

.toggle-icon-checkbox {
    display: none;                          /* Hide the actual checkbox */
}

.toggle-icon-label {
    cursor: pointer;
    color: #ccc;                          /* Default gray color */
    transition: color 0.3s ease;            /* Smooth color transition */
}

.toggle-icon-checkbox:checked + .toggle-icon-label {
    /* color: #FFA500; */                   /* Orange when checked */
    color: var(--checked-color, #198754); /* Fallback to "success" green if not set */
}

/**
 * ========================================================
 * (28) 12/5/24 CG: Add for <secret>
 * Not sure if this is going to work because you can still copy/paste
 * ========================================================
 */

secret {
    /* color: #95a5a6; */
    /* display: inline; */
    display: inline-block;
    font-family: var(--bs-font-monospace);
    font-size: 0.85rem;
    font-weight: 700;
}

secret:hover {
    /* text-decoration: underline; */
    color: #dc3545;
    cursor: pointer;
}


/**
 * ========================================================
 * (29) icon-alias.css
 * Define aliases for Font Awesome icons https://fontawesome.com
 *
 * Usage: <i class="fa-regular fa-custom-delete"></i>
 *
 * 11/10/23 CG: We could also add font-size:0.9rem; to make the
 * icon a bit bigger so people can click on it better
 *
 * 3/24/25 CG: We want to be able to define out custom icons here
 * The way they call these icons are "kits" so it is like fa-kit ****
 * In order to differentiate our icons where we are actually just
 * trying to create some "convenient names" for them so we can have
 * some consistency, we are going to invent some type of prefix so our
 * goal is to be able to use the icons that mean something to us with
 * our specific names
 *
 * So to get a "perfect" Dynamics icon, we will do something like
 *
 * <i class="fa-____ fa-dynamics"></i>
 *
 * Then so forth for others like for the "Hold", "Document Types", etc
 *
 * <i class="fa-____ fa-division"></i>
 * <i class="fa-____ fa-hold-loan"></i>
 * <i class="fa-____ fa-file-xml"></i>
 *
 * Name          | fa-prefix  | font-family            | font-weight
 * --------------|------------|------------------------|----------------
 * Solid         | fa-solid	  | Font Awesome 7 Free    | 900
 * Regular       | fa-regular | Font Awesome 7 Free    | 400
 * Light (Pro)   | fa-light	  | Font Awesome 7 Pro     | 300
 * Thin (Pro)    | fa-thin	  | Font Awesome 7 Pro     | 100
 * Duotone (Pro) | fa-duotone | Font Awesome 7 Duotone | 900 (layered)
 * Brands	     | fa-brands  | Font Awesome 7 Brands  | 400
 *
 * font-family: 'Font Awesome 7 Brands'; font-weight: 400; font-style: normal;
 *
 * Bootstrap colors
 *
 *
 *
 * ========================================================
 */

.fa-alias-dynamics                      { color: #45a0a8; }
.fa-alias-dynamics::before              { content: '\e052'; font-family: 'Font Awesome 7 Brands'; font-weight: 400; font-style: normal; }
.fa-alias-authorizenet                  { color: #003A8F; }
.fa-alias-authorizenet::before          { content: '\f24b'; font-family: 'Font Awesome 7 Brands'; font-weight: 400; font-style: normal; }
.fa-alias-deferred                      { color: #dddddd; }
.fa-alias-deferred::before              { content: '\0000'; font-family: 'Font Awesome 7 Pro';    font-weight: 400; font-style: normal; }
.fa-alias-bill-alternative              { color: #ffc107; } /* fa-hand */
.fa-alias-bill-alternative::before      { content: '\f256'; font-family: 'Font Awesome 7 Pro';    font-weight: 400; font-style: normal; }
.fa-alias-defrev                        { color: #16A085; } /* fa-snooze */
.fa-alias-defrev::before                { content: '\f845'; font-family: 'Font Awesome 7 Pro';    font-weight: 400; font-style: normal; }

.fa-alias-required                      { color: #D34C4C; font-size: 0.9em; }
.fa-alias-required::before              { content: '\0000'; font-family: 'Font Awesome 7 Pro';    font-weight: 400; font-style: normal; }
.fa-alias-delete                        { color: #7b898a; }
.fa-alias-delete::before                { content: '\f057'; font-family: 'Font Awesome 7 Pro';    font-weight: 400; font-style: normal; }
.fa-alias-division                      { color: #337ab7; }
.fa-alias-division::before              { content: '\e020'; font-family: 'Font Awesome 7 Pro';    font-weight: 400; font-style: normal; }

.fa-alias-external                      { color: #dddddd; }
.fa-alias-external::before              { content: '\f08e'; font-family: 'Font Awesome 7 Pro';    font-weight: 400; font-style: normal; }
.fa-alias-multiple                      { color: #e67e22; }
.fa-alias-multiple::before              { content: '\f5fd'; font-family: 'Font Awesome 7 Pro';    font-weight: 400; font-style: normal; }
.fa-alias-collapse                      { color: #e67e22; }
.fa-alias-collapse::before              { content: '\e0a7'; font-family: 'Font Awesome 7 Pro';    font-weight: 400; font-style: normal; }
.fa-alias-info                          { color: #11caf0; } /* exclamation-circle */
.fa-alias-info::before                  { content: '\0000'; font-family: 'Font Awesome 7 Pro';    font-weight: 400; font-style: normal; }
.fa-alias-warning                       { color: #ffc008; } /* .fa-question-circle */
.fa-alias-warning::before               { content: '\0000'; font-family: 'Font Awesome 7 Pro';    font-weight: 400; font-style: normal; }
.fa-alias-danger                        { color: #d9534f; } /* .fa-question-circle */
.fa-alias-danger::before                { content: '\0000'; font-family: 'Font Awesome 7 Pro';    font-weight: 400; font-style: normal; }
.fa-alias-reminder                      { color: #d9534f; } */
.fa-alias-reminder::before              { content: '\f316'; font-family: 'Font Awesome 7 Pro';    font-weight: 400; font-style: normal; }
.fa-alias-hardstop                      { color: #BC0000; }
.fa-alias-hardstop::before              { content: '\f05e'; font-family: 'Font Awesome 7 Pro';    font-weight: 400; font-style: normal;
                                            transform: rotate(90deg);
                                            display: inline-block;
                                        }
.fa-alias-note                          { color:#00A2D8; }
.fa-alias-note::before                  { content: '\0000'; font-family: 'Font Awesome 7 Pro';    font-weight: 400; font-style: normal; }
.fa-alias-note-sticky                   { color:#00A2D8; }
.fa-alias-note-sticky::before           { content: '\f249'; font-family: 'Font Awesome 7 Pro';    font-weight: 400; font-style: normal; }
.fa-alias-rush                          { color: #f4d107; } /* .fa-bolt Rush */
.fa-alias-rush::before                  { content: '\f0e7'; font-family: 'Font Awesome 7 Pro';    font-weight: 400; font-style: normal; }
.fa-alias-fha                           { color: #dddddd; } /* .fa-foursquare f180 FHA  */
.fa-alias-rush::before                  { content: '\0000'; font-family: 'Font Awesome 7 Pro';    font-weight: 400; font-style: normal; }

/* Hold icons */
.fa-alias-hold-payment                  { color: #27ae60; }
.fa-alias-hold-payment::before          { content: '\f2e8'; font-family: 'Font Awesome 7 Pro';    font-weight: 400; font-style: normal; }
.fa-alias-hold-borrower                 { color: #f1c40f; }
.fa-alias-hold-borrower::before         { content: '\e0fd'; font-family: 'Font Awesome 7 Pro';    font-weight: 400; font-style: normal; }
.fa-alias-hold-client                   { color: #e67e22; }
.fa-alias-hold-client::before           { content: '\e101'; font-family: 'Font Awesome 7 Pro';    font-weight: 400; font-style: normal; }
.fa-alias-hold-loan                     { color: #c0392b; }
.fa-alias-hold-loan::before             { content: '\e114'; font-family: 'Font Awesome 7 Pro';    font-weight: 400; font-style: normal; }
.fa-alias-hold-property                 { color: #3498db; }
.fa-alias-hold-property::before         { content: '\e11a'; font-family: 'Font Awesome 7 Pro';    font-weight: 400; font-style: normal; }
.fa-alias-hold-value                    { color: #9b59b6; }
.fa-alias-hold-value::before            { content: '\e12a'; font-family: 'Font Awesome 7 Pro';    font-weight: 400; font-style: normal; }

/* File/document icons */
.fa-alias-file-appraisal                { color: #3498db; }
.fa-alias-file-appraisal::before        { content: '\f1c1'; font-family: 'Font Awesome 7 Pro';    font-weight: 400; font-style: normal; }
.fa-alias-file-xml                      { color: #34495e; }
.fa-alias-file-xml::before              { content: '\e654'; font-family: 'Font Awesome 7 Pro';    font-weight: 400; font-style: normal; }
.fa-alias-file-invoice                  { color: #27ae60; }
.fa-alias-file-invoice::before          { content: '\f571'; font-family: 'Font Awesome 7 Pro';    font-weight: 400; font-style: normal; }
.fa-alias-file-air                      { color: #f1c40f; }
.fa-alias-file-air::before              { content: '\f5f3'; font-family: 'Font Awesome 7 Pro';    font-weight: 400; font-style: normal; }
.fa-alias-file-ssr                      { color: #34495e; }
.fa-alias-file-ssr::before              { content: '\f316'; font-family: 'Font Awesome 7 Pro';    font-weight: 400; font-style: normal; }
.fa-alias-file-loe                      { color: #146ebe; }
.fa-alias-file-loe::before              { content: '\f56c'; font-family: 'Font Awesome 7 Pro';    font-weight: 400; font-style: normal; }
.fa-alias-file-code                     { color: #34495e; }
.fa-alias-file-code::before             { content: '\f1c9'; font-family: 'Font Awesome 7 Pro';    font-weight: 400; font-style: normal; }

/* Payment Icons */
.fa-alias-cc-visa                       { color: #0157a2; }
.fa-alias-cc-visa::before               { content: '\f1f0'; font-family: 'Font Awesome 7 Brands'; font-weight: 400; font-style: normal; }
.fa-alias-cc-mastercard                 { color: #0a3a82; }
.fa-alias-cc-mastercard::before         { content: '\f1f1'; font-family: 'Font Awesome 7 Brands'; font-weight: 400; font-style: normal; }
.fa-alias-cc-amex                       { color: #007bc1; }
.fa-alias-cc-amex::before               { content: '\f1f3'; font-family: 'Font Awesome 7 Brands'; font-weight: 400; font-style: normal; }
.fa-alias-cc-discover                   { color: #f68121; }
.fa-alias-cc-discover::before           { content: '\f1f2'; font-family: 'Font Awesome 7 Brands'; font-weight: 400; font-style: normal; }
.fa-alias-cc-paypal                     { color: #253b80; }
.fa-alias-cc-paypal::before             { content: '\f1f4'; font-family: 'Font Awesome 7 Brands'; font-weight: 400; font-style: normal; }
.fa-alias-cc-stripe                     { color: #00afe1; }
.fa-alias-cc-stripe::before             { content: '\f1f5'; font-family: 'Font Awesome 7 Brands'; font-weight: 400; font-style: normal; }
.fa-alias-cc-diners-club                { color: #004A97; }
.fa-alias-cc-diners-club::before        { content: '\f24c'; font-family: 'Font Awesome 7 Brands'; font-weight: 400; font-style: normal; }
.fa-alias-cc-jcb                        { color: #003A8F; }
.fa-alias-cc-jcb::before                { content: '\f24b'; font-family: 'Font Awesome 7 Brands'; font-weight: 400; font-style: normal; }

/* Appraiser Icons */
.fa-alias-appraiser-partner             { color: #009e02; } /* fa-handshake */
.fa-alias-appraiser-partner::before     { content: '\f2b5'; font-family: 'Font Awesome 7 Pro';    font-weight: 400; font-style: normal; }
.fa-alias-appraiser-elite               { color: #00A2D8; } /* fa-gem */
.fa-alias-appraiser-elite::before       { content: '\f3a5'; font-family: 'Font Awesome 7 Pro';    font-weight: 400; font-style: normal; }
.fa-alias-appraiser-preferred           { color: #673AB7; } /* .fa-product-hunt */
.fa-alias-appraiser-preferred::before   { content: '\f288'; font-family: 'Font Awesome 7 Brands'; font-weight: 400; font-style: normal;
                                            background: #fff; border-radius: 50%; height: 1em; width: 1em; }
.fa-alias-appraiser-panel               { color: #FF5722; } /* .fa-users */
.fa-alias-appraiser-panel::before       { content: '\f0c0'; font-family: 'Font Awesome 7 Pro';    font-weight: 400; font-style: normal; }
.fa-alias-appraiser-ineligible          { color: #BC0000; } /* .fa-ban */
.fa-alias-appraiser-ineligible::before  { content: '\f05e'; font-family: 'Font Awesome 7 Pro';    font-weight: 400; font-style: normal;
                                            transform: rotate(90deg);
                                            display: inline-block;
                                        }
.fa-alias-appraiser-client              { color: #00B7E0; } /* .fa-copyright Client Preferred */
.fa-alias-appraiser-client::before      { content: '\f1f9'; font-family: 'Font Awesome 7 Pro';    font-weight: 400; font-style: normal; }
.fa-alias-appraiser-million             { color: #009113; } /* .fa-dollar-sign High value approved */
.fa-alias-appraiser-million::before     { content: '\24';   font-family: 'Font Awesome 7 Pro';    font-weight: 900; font-style: normal; }
.fa-alias-appraiser-complex             { color: #fa794d; } /* .fa-puzzle-piece-simple Complex property approved */
.fa-alias-appraiser-complex::before     { content: '\e231'; font-family: 'Font Awesome 7 Pro';    font-weight: 400; font-style: normal; }
.fa-alias-appraiser-mountain            { color: #616161; } /* .fa-mountains Mountain approved */
.fa-alias-appraiser-mountain::before    { content: '\f6fd'; font-family: 'Font Awesome 7 Pro';    font-weight: 400; font-style: normal; }
.fa-alias-appraiser-desktop             { color: #616161; } /* .fa-desktop Desktop */
.fa-alias-appraiser-desktop::before     { content: '\f390'; font-family: 'Font Awesome 7 Pro';    font-weight: 400; font-style: normal; }
.fa-alias-appraiser-field               { color: #616161; } /* .fa-clipboard-check Desktop + Field Review */
.fa-alias-appraiser-field::before       { content: '\f46c'; font-family: 'Font Awesome 7 Pro';    font-weight: 400; font-style: normal; }
.fa-alias-appraiser-new                 { color: #00A2D8; } /* .fa-hammerNew Construction  */
.fa-alias-appraiser-new::before         { content: '\f6e3'; font-family: 'Font Awesome 7 Pro';    font-weight: 400; font-style: normal; }
.fa-alias-appraiser-geo                 { color: #5099f0; } /* .fa-map Quadrant Panel or .fa-location-dot f3c5 */
.fa-alias-appraiser-geo::before         { content: '\f279'; font-family: 'Font Awesome 7 Pro';    font-weight: 400; font-style: normal; }
.fa-alias-appraiser-license             { color: #F7CA00; } /* .fa-certificate AG or AR license */
.fa-alias-appraiser-license::before     { content: '\f0a3'; font-family: 'Font Awesome 7 Pro';    font-weight: 400; font-style: normal; }

/* 10/19/23 CG: Add hover so we can make the delete links better */
a.link-danger-hover {
    text-decoration: none;
}
a.link-danger-hover:hover * {
    color: #d9534f !important;
    font-weight: 900;
    text-decoration: none;
}

/* 3/29/25 CG: Deprecate the icons below and use the ones above so you don't have to put fa-regular or fa-solid, it will just do it */

.fa-alias-delete                        {                   color: #7b898a; }
.fa-alias-delete::before                { content: '\f057';                   }

.fa-alias-dynamics::before              { content: '\e052'; color: #007ac1; }
.fa-alias-external::before              { content: '\f08e';                   }
.fa-alias-multiple::before              { content: '\f5fd'; color: #e67e22; }
/* .fa-alias-division::before              { content: '\e020';                   } */

.fa-alias-hold-payment::before          { content: '\f2e8'; color: #27ae60; }
.fa-alias-hold-borrower::before         { content: '\e0fd'; color: #f1c40f; }
.fa-alias-hold-client::before           { content: '\e101'; color: #e67e22; }
.fa-alias-hold-loan::before             { content: '\e114'; color: #c0392b; }
.fa-alias-hold-property::before         { content: '\e11a'; color: #3498db; }
.fa-alias-hold-value::before            { content: '\e12a'; color: #9b59b6; }

.fa-alias-file-appraisal::before        { content: '\f1c1'; color: #3498db; }
.fa-alias-file-xml::before              { content: '\e654'; color: #34495e; }
.fa-alias-file-invoice::before          { content: '\f571'; color: #27ae60; }
.fa-alias-file-air::before              { content: '\f5f3'; color: #f1c40f; }
.fa-alias-file-ssr::before              { content: '\f316'; color: #34495e; }

/**
 * ========================================================
 * (30) icon-colors.css
 * font-awesome icon default colors
 * We want to set some standard colors for the font-awesome
 * fonts that we are using so we don't have to add style="color:..."
 * to the <i class="fas fa-..."></i> tag.  This also
 * helps standardize colors for our fonts
 * ========================================================
 */

.fa-handshake               { color: #009e02;                   }   /* PropertyRate Partner                   */
.fa-diamond                 { color: #00A2D8;                   }   /* PropertyRate Elite @deprecated         */
.fa-gem                     { color: #00A2D8;                   }   /* PropertyRate Elite                     */
.fa-product-hunt            {                                         /* Needs all this to get "P" to be white  */
    color: #673AB7;
    background: #fff;
    border-radius: 50%;
    height: 1em;
    width: 1em;
}                                                                     /* PropertyRate Preferred   #00B7E0 */
.fa-users                   { color: #FF5722;                   }   /* PropertyRate Client              */

.fa-ban                     { color: #BC0000;                   }   /* PropertyRate Blacklist           */
.fa-copyright               { color: #00A2D8;                   }   /* Client Preferred         #00B7E0 */
.fa-sticky-note             {                                     }   /*                          #00A2D8 */
.fa-bolt                    { color: #f4d107;                   }   /* Rush                             */
.fa-dollar                  { color: #009113;                   }   /* Complex property approved @deprecated  */
.fa-dollar-sign             { color: #009113;                   }   /* Complex property approved        */
.fa-puzzle-piece-simple     { color: #fa794d;                   }   /* Complex property approved        */
.fa-mountains               { color: #616161;                   }   /* Mountain approved                */
.fa-desktop                 { color: #616161;                   }   /* Desktop                          */
.fa-clipboard-check         { color: #616161;                   }   /* Desktop + Field Review           */

.fa-hammer                  { color: #00A2D8;                   }   /* New Construction                 */
.fa-map                     { color: #5099f0;                   }   /* Quadrant Panel                   */
.fa-map-location-dot        { color: #5099f0;                   }   /* STR Panel                        */
.fa-toggle-on               { color: green;}
.fa-toggle-off              { color: #606060;                   }
.fa-hand-paper              { color: #ff8989;                   }   /* Bench                            */
.fa-university              { color: #848484;                   }
.fa-money-bill              { color: #2B6000;                   }
.fa-bank                    { color: #848484;                   }   /* @deprecated */

.fa-certificate             { color: #F7CA00;                   }   /* AG or AR license                 */
.fa-required                { color: #D34C4C; font-size: 0.9em; }
.fa-cc-visa                 { color: #0157a2;                   }
.fa-cc-mastercard           { color: #0a3a82;                   }
.fa-cc-amex                 { color: #007bc1;                   }
.fa-cc-discover             { color: #f68121;                   }
.fa-cc-paypal               { color: #253b80;                   }
.fa-cc-stripe               { color: #00afe1;                   }
.fa-cc-diners-club          { color: #004A97;                   }
.fa-cc-jcb                  { color: #003A8F;                   }

.fa-exclamation-circle      { color:#d9534f;                    }
.fa-question-circle         { color:#d9534f;                    }

/* deprecated ones can go here */
/*
.fa-thumbs-up               {                                     }
.fa-thumbs-down             {                                     }
*/

/* Some color overrides we can use for the fonts */
.fa-color-primary           { color: #337ab7 !important;        }
.fa-color-success           { color: #5cb85c !important;        }
.fa-color-info              { color: #5bc0de !important;        }
.fa-color-warning           { color: #f0ad4e !important;        }
.fa-color-danger            { color: #d9534f !important;        }
.fa-color-debug             { color: #cccccc !important;        }

/**
 * ========================================================
 * (31) colors.css
 * Colors for labels, buttons and badges
 * ========================================================
 */

.bg-client                                      { background-color: #FF0000; color: #fff; }
.bg-appraiser                                   { background-color: #007bff; color: #fff; }
.bg-associate                                   { background-color: #faa300; color: #fff; }

.text-client                                    { color:#FF0000; }
.text-appraiser                                 { color:#007bff; }
.text-associate                                 { color:#faa300; }

/* PropertyRate Official Blue Color */
.btn-default-blue                               { background-color: #007ac1; color: #fff; }
.btn-default-blue:hover                         { background-color: #0071b3; color: #fff; }
.btn-outline-default-blue                       { border: 1px solid #007ac1; color: #007ac1; }
.btn-outline-default-blue:hover                 { background-color: #007ac1; color: #fff; }
.bg-default-blue                                { background-color: #007ac1; color: #fff; }
.text-default-blue                              { color: #007ac1; }

/** Using palette at http://flatuicolors.com **/

.btn-turquoise,         .bg-turquoise           { background-color: #1abc9c; color: #fff; }
.btn-emerald,           .bg-emerald             { background-color: #2ecc71; color: #fff; }
.btn-peter-river,       .bg-peter-river         { background-color: #3498db; color: #fff; }
.btn-amethyst,          .bg-amethyst            { background-color: #9b59b6; color: #fff; }
.btn-wet-asphalt,       .bg-wet-asphalt         { background-color: #34495e; color: #fff; }
.btn-green-sea,         .bg-green-sea           { background-color: #16a085; color: #fff; }
.btn-nephritis,         .bg-nephritis           { background-color: #16a085; color: #fff; }
.btn-belize-hole,       .bg-belize-hole         { background-color: #2980b9; color: #fff; }
.btn-wisteria,          .bg-wisteria            { background-color: #8e44ad; color: #fff; }
.btn-midnight-blue,     .bg-midnight-blue       { background-color: #2c3e50; color: #fff; }
.btn-sun-flower,        .bg-sun-flower          { background-color: #f1c40f; color: #fff; }
.btn-carrot,            .bg-carrot              { background-color: #e67e22; color: #fff; }
.btn-alizarin,          .bg-alizarin            { background-color: #e74c3c; color: #fff; }
.btn-clouds,            .bg-clouds              { background-color: #ecf0f1; color: #6D6D6D; }
.btn-concrete,          .bg-concrete            { background-color: #95a5a6; color: #fff; }
.btn-orange,            .bg-orange              { background-color: #f39c12; color: #fff; }
.btn-pumpkin,           .bg-pumpkin             { background-color: #d35400; color: #fff; }
.btn-pomegranate,       .bg-pomegranate         { background-color: #c0392b; color: #fff; }
.btn-silver,            .bg-silver              { background-color: #bdc3c7; color: #fff; }
.btn-asbestos,          .bg-asbestos            { background-color: #7f8c8d; color: #fff; }
.btn-turquoise:hover                            { background-color: #15947b; color: #fff; }
.btn-emerald:hover                              { background-color: #229c55; color: #fff; }
.btn-peter-river:hover                          { background-color: #2878ad; color: #fff; }
.btn-amethyst:hover                             { background-color: #78438c; color: #fff; }
.btn-wet-asphalt:hover                          { background-color: #243342; color: #fff; }
.btn-green-sea:hover                            { background-color: #128a72; color: #fff; }
.btn-nephritis:hover                            { background-color: #219652; color: #fff; }
.btn-belize-hole:hover                          { background-color: #236fa1; color: #fff; }
.btn-wisteria:hover                             { background-color: #7b3996; color: #fff; }
.btn-midnight-blue:hover                        { background-color: #212f3d; color: #fff; }
.btn-sun-flower:hover                           { background-color: #d9b00d; color: #fff; }
.btn-carrot:hover                               { background-color: #c96d1c; color: #fff; }
.btn-alizarin:hover                             { background-color: #c94132; color: #fff; }
.btn-clouds:hover                               { background-color: #cdd2d4; }
.btn-concrete:hover                             { background-color: #7b898a; color: #fff; }
.btn-orange:hover                               { background-color: #c9810e; color: #fff; }
.btn-pumpkin:hover                              { background-color: #ad4500; color: #fff; }
.btn-pomegranate:hover                          { background-color: #9e2d21; color: #fff; }
.btn-silver:hover                               { background-color: #999fa3; }
.btn-asbestos:hover                             { background-color: #606a6b; color: #fff; }
.btn-outline-turquoise                          { border: 1px solid #1abc9c; color: #1abc9c; }
.btn-outline-turquoise:hover                    { background-color: #1abc9c; color: #fff; }
.btn-outline-emerald                            { border: 1px solid #2ecc71; color: #2ecc71; }
.btn-outline-emerald:hover                      { background-color: #2ecc71; color: #fff; }
.btn-outline-peter-river                        { border: 1px solid #3498db; color: #3498db; }
.btn-outline-peter-river:hover                  { background-color: #3498db; color: #fff; }
.btn-outline-amethyst                           { border: 1px solid #9b59b6; color: #9b59b6; }
.btn-outline-amethyst:hover                     { background-color: #9b59b6; color: #fff; }
.btn-outline-wet-asphalt                        { border: 1px solid #34495e; color: #34495e; }
.btn-outline-wet-asphalt:hover                  { background-color: #34495e; color: #fff; }
.btn-outline-green-sea                          { border: 1px solid #16a085; color: #16a085; }
.btn-outline-green-sea:hover                    { background-color: #16a085; color: #fff; }
.btn-outline-nephritis                          { border: 1px solid #16a085; color: #16a085; }
.btn-outline-nephritis:hover                    { background-color: #16a085; color: #fff; }
.btn-outline-belize-hole                        { border: 1px solid #2980b9; color: #2980b9; }
.btn-outline-belize-hole:hover                  { background-color: #2980b9; color: #fff; }
.btn-outline-wisteria                           { border: 1px solid #8e44ad; color: #8e44ad; }
.btn-outline-wisteria:hover                     { background-color: #8e44ad; color: #fff; }
.btn-outline-midnight-blue                      { border: 1px solid #2c3e50; color: #2c3e50; }
.btn-outline-midnight-blue:hover                { background-color: #2c3e50; color: #fff; }
.btn-outline-sun-flower                         { border: 1px solid #f1c40f; color: #f1c40f; }
.btn-outline-sun-flower:hover                   { background-color: #f1c40f; color: #fff; }
.btn-outline-carrot                             { border: 1px solid #e67e22; color: #e67e22; }
.btn-outline-carrot:hover                       { background-color: #e67e22; color: #fff; }
.btn-outline-alizarin                           { border: 1px solid #e74c3c; color: #e74c3c; }
.btn-outline-alizarin:hover                     { background-color: #e74c3c; color: #fff; }
.btn-outline-clouds                             { border: 1px solid #ecf0f1; color: #ecf0f1; }
.btn-outline-clouds:hover                       { background-color: #ecf0f1; color: #6D6D6D; }
.btn-outline-concrete                           { border: 1px solid #95a5a6; color: #95a5a6; }
.btn-outline-concrete:hover                     { background-color: #95a5a6; color: #fff; }
.btn-outline-orange                             { border: 1px solid #f39c12; color: #f39c12; }
.btn-outline-orange:hover                       { background-color: #f39c12; color: #fff; }
.btn-outline-pumpkin                            { border: 1px solid #d35400; color: #d35400; }
.btn-outline-pumpkin:hover                      { background-color: #d35400; color: #fff; }
.btn-outline-pomegranate                        { border: 1px solid #c0392b; color: #c0392b; }
.btn-outline-pomegranate:hover                  { background-color: #c0392b; color: #fff; }
.btn-outline-silver                             { border: 1px solid #bdc3c7; color: #bdc3c7; }
.btn-outline-silver:hover                       { background-color: #bdc3c7; color: #fff; }
.btn-outline-asbestos                           { border: 1px solid #7f8c8d; color: #7f8c8d; }
.btn-outline-asbestos:hover                     { background-color: #7f8c8d; color: #fff; }

/* 12/2/24 CG: Added badge outline */
.badge-outline-default-blue                       { border: 1px solid #007ac1; color: #007ac1; }
.badge-outline-turquoise                          { border: 1px solid #1abc9c; color: #1abc9c; }
.badge-outline-emerald                            { border: 1px solid #2ecc71; color: #2ecc71; }
.badge-outline-peter-river                        { border: 1px solid #3498db; color: #3498db; }
.badge-outline-amethyst                           { border: 1px solid #9b59b6; color: #9b59b6; }
.badge-outline-wet-asphalt                        { border: 1px solid #34495e; color: #34495e; }
.badge-outline-green-sea                          { border: 1px solid #16a085; color: #16a085; }
.badge-outline-nephritis                          { border: 1px solid #16a085; color: #16a085; }
.badge-outline-belize-hole                        { border: 1px solid #2980b9; color: #2980b9; }
.badge-outline-wisteria                           { border: 1px solid #8e44ad; color: #8e44ad; }
.badge-outline-midnight-blue                      { border: 1px solid #2c3e50; color: #2c3e50; }
.badge-outline-sun-flower                         { border: 1px solid #f1c40f; color: #f1c40f; }
.badge-outline-carrot                             { border: 1px solid #e67e22; color: #e67e22; }
.badge-outline-alizarin                           { border: 1px solid #e74c3c; color: #e74c3c; }
.badge-outline-clouds                             { border: 1px solid #ecf0f1; color: #ecf0f1; }
.badge-outline-concrete                           { border: 1px solid #95a5a6; color: #95a5a6; }
.badge-outline-orange                             { border: 1px solid #f39c12; color: #f39c12; }
.badge-outline-pumpkin                            { border: 1px solid #d35400; color: #d35400; }
.badge-outline-pomegranate                        { border: 1px solid #c0392b; color: #c0392b; }
.badge-outline-silver                             { border: 1px solid #bdc3c7; color: #bdc3c7; }
.badge-outline-asbestos                           { border: 1px solid #7f8c8d; color: #7f8c8d; }

/* 12/2/24 CG: Added badge outline hover which is very subtle */
.badge-outline-default-blue:hover                 { background-color: hsl(202, 100%, 95%); }
.badge-outline-turquoise:hover                    { background-color: hsl(168, 65%,  90%); }
.badge-outline-emerald:hover                      { background-color: hsl(145, 63%,  90%); }
.badge-outline-peter-river:hover                  { background-color: hsl(204, 58%,  90%); }
.badge-outline-amethyst:hover                     { background-color: hsl(282, 43%,  90%); }
.badge-outline-wet-asphalt:hover                  { background-color: hsl(210, 15%,  90%); }
.badge-outline-green-sea:hover                    { background-color: hsl(168, 64%,  90%); }
.badge-outline-nephritis:hover                    { background-color: hsl(168, 64%,  90%); }
.badge-outline-belize-hole:hover                  { background-color: hsl(204, 63%,  90%); }
.badge-outline-wisteria:hover                     { background-color: hsl(275, 42%,  90%); }
.badge-outline-midnight-blue:hover                { background-color: hsl(210, 23%,  90%); }
.badge-outline-sun-flower:hover                   { background-color: hsl(48,  90%,  90%); }
.badge-outline-carrot:hover                       { background-color: hsl(28,  78%,  90%); }
.badge-outline-alizarin:hover                     { background-color: hsl(6,   78%,  90%); }
.badge-outline-clouds:hover                       { background-color: hsl(0,    7%,  95%); }
.badge-outline-concrete:hover                     { background-color: hsl(200, 10%,  85%); }
.badge-outline-orange:hover                       { background-color: hsl(38,  85%,  95%); }
.badge-outline-pumpkin:hover                      { background-color: hsl(24,  75%,  90%); }
.badge-outline-pomegranate:hover                  { background-color: hsl(3,   67%,  90%); }
.badge-outline-silver:hover                       { background-color: hsl(0,    5%,  90%); }
.badge-outline-asbestos:hover                     { background-color: hsl(204,  8%,  80%); }

.alert-light                                    { background-color: #f8f9fa; border-color: #d9dadb; }
.alert-turquoise                                { background-color: #1abc9c; color: #fff; border-color: #15947b; }
.alert-emerald                                  { background-color: #2ecc71; color: #fff; border-color: #229c55; }
.alert-peter-river                              { background-color: #3498db; color: #fff; border-color: #2878ad; }
.alert-amethyst                                 { background-color: #9b59b6; color: #fff; border-color: #78438c; }
.alert-wet-asphalt                              { background-color: #34495e; color: #fff; border-color: #243342; }
.alert-green-sea                                { background-color: #16a085; color: #fff; border-color: #128a72; }
.alert-nephritis                                { background-color: #16a085; color: #fff; border-color: #219652; }
.alert-belize-hole                              { background-color: #2980b9; color: #fff; border-color: #236fa1; }
.alert-wisteria                                 { background-color: #8e44ad; color: #fff; border-color: #7b3996; }
.alert-midnight-blue                            { background-color: #2c3e50; color: #fff; border-color: #212f3d; }
.alert-sun-flower                               { background-color: #f1c40f; color: #fff; border-color: #d9b00d; }
.alert-carrot                                   { background-color: #e67e22; color: #fff; border-color: #c96d1c; }
.alert-alizarin                                 { background-color: #e74c3c; color: #fff; border-color: #c94132; }
.alert-clouds                                   { background-color: #ecf0f1; color: #6D6D6D; border-color: #cdd2d4; }
.alert-concrete                                 { background-color: #95a5a6; color: #fff; border-color: #7b898a; }
.alert-orange                                   { background-color: #f39c12; color: #fff; border-color: #c9810e; }
.alert-pumpkin                                  { background-color: #d35400; color: #fff; border-color: #ad4500; }
.alert-pomegranate                              { background-color: #c0392b; color: #fff; border-color: #9e2d21; }
.alert-silver                                   { background-color: #bdc3c7; color: #fff; border-color: #999fa3; }
.alert-asbestos                                 { background-color: #7f8c8d; color: #fff; border-color: #606a6b; }

.text-light                                     { color: #f8f9fa; }
.text-turquoise                                 { color: #1abc9c; }
.text-emerald                                   { color: #2ecc71; }
.text-peter-river                               { color: #3498db; }
.text-amethyst                                  { color: #9b59b6; }
.text-wet-asphalt                               { color: #34495e; }
.text-green-sea                                 { color: #16a085; }
.text-nephritis                                 { color: #16a085; }
.text-belize-hole                               { color: #2980b9; }
.text-wisteria                                  { color: #8e44ad; }
.text-midnight-blue                             { color: #2c3e50; }
.text-sun-flower                                { color: #f1c40f; }
.text-carrot                                    { color: #e67e22; }
.text-alizarin                                  { color: #e74c3c; }
.text-clouds                                    { color: #ecf0f1; }
.text-concrete                                  { color: #95a5a6; }
.text-orange                                    { color: #f39c12; }
.text-pumpkin                                   { color: #d35400; }
.text-pomegranate                               { color: #c0392b; }
.text-silver                                    { color: #bdc3c7; }
.text-asbestos                                  { color: #7f8c8d; }

/** Using palette at http://www.materialui.co/colors **/

.btn-red,               .bg-red                 { background-color: #f44336 !important; color: #fff; }
.btn-red-50,            .bg-red-50              { background-color: #ffebee !important; color: #fff; }
.btn-red-100,           .bg-red-100             { background-color: #ffcdd2 !important; color: #fff; }
.btn-red-200,           .bg-red-200             { background-color: #ef9a9a !important; color: #fff; }
.btn-red-300,           .bg-red-300             { background-color: #e57373 !important; color: #fff; }
.btn-red-400,           .bg-red-400             { background-color: #ef5350 !important; color: #fff; }
.btn-red-500,           .bg-red-500             { background-color: #f44336 !important; color: #fff; }
.btn-red-600,           .bg-red-600             { background-color: #e53935 !important; color: #fff; }
.btn-red-700,           .bg-red-700             { background-color: #d32f2f !important; color: #fff; }
.btn-red-800,           .bg-red-800             { background-color: #c62828 !important; color: #fff; }
.btn-red-900,           .bg-red-900             { background-color: #b71c1c !important; color: #fff; }
.btn-red-a100,          .bg-red-a100            { background-color: #ff8a80 !important; color: #fff; }
.btn-red-a200,          .bg-red-a200            { background-color: #ff5252 !important; color: #fff; }
.btn-red-a400,          .bg-red-a400            { background-color: #ff1744 !important; color: #fff; }
.btn-red-a700,          .bg-red-a700            { background-color: #d50000 !important; color: #fff; }
.text-red                                       { color: #f44336; }
.text-red-50                                    { color: #ffebee; }
.text-red-100                                   { color: #ffcdd2; }
.text-red-200                                   { color: #ef9a9a; }
.text-red-300                                   { color: #e57373; }
.text-red-400                                   { color: #ef5350; }
.text-red-500                                   { color: #f44336; }
.text-red-600                                   { color: #e53935; }
.text-red-700                                   { color: #d32f2f; }
.text-red-800                                   { color: #c62828; }
.text-red-900                                   { color: #b71c1c; }
.text-red-a100                                  { color: #ff8a80; }
.text-red-a200                                  { color: #ff5252; }
.text-red-a400                                  { color: #ff1744; }
.text-red-a700                                  { color: #d50000; }

.btn-pink,              .bg-pink                { background-color: #f44336 !important; color: #fff; }
.btn-pink-50,           .bg-pink-50             { background-color: #FCE4EC !important; color: #fff; }
.btn-pink-100,          .bg-pink-100            { background-color: #F8BBD0 !important; color: #fff; }
.btn-pink-200,          .bg-pink-200            { background-color: #F48FB1 !important; color: #fff; }
.btn-pink-300,          .bg-pink-300            { background-color: #F06292 !important; color: #fff; }
.btn-pink-400,          .bg-pink-400            { background-color: #EC407A !important; color: #fff; }
.btn-pink-500,          .bg-pink-500            { background-color: #E91E63 !important; color: #fff; }
.btn-pink-600,          .bg-pink-600            { background-color: #D81B60 !important; color: #fff; }
.btn-pink-700,          .bg-pink-700            { background-color: #C2185B !important; color: #fff; }
.btn-pink-800,          .bg-pink-800            { background-color: #AD1457 !important; color: #fff; }
.btn-pink-900,          .bg-pink-900            { background-color: #880E4F !important; color: #fff; }
.btn-pink-a100,         .bg-pink-a100           { background-color: #FF80AB !important; color: #fff; }
.btn-pink-a200,         .bg-pink-a200           { background-color: #FF4081 !important; color: #fff; }
.btn-pink-a400,         .bg-pink-a400           { background-color: #F50057 !important; color: #fff; }
.btn-pink-a700,         .bg-pink-a700           { background-color: #C51162 !important; color: #fff; }
.text-pink                                      { color: #f44336; }
.text-pink-50                                   { color: #FCE4EC; }
.text-pink-100                                  { color: #F8BBD0; }
.text-pink-200                                  { color: #F48FB1; }
.text-pink-300                                  { color: #F06292; }
.text-pink-400                                  { color: #EC407A; }
.text-pink-500                                  { color: #E91E63; }
.text-pink-600                                  { color: #D81B60; }
.text-pink-700                                  { color: #C2185B; }
.text-pink-800                                  { color: #AD1457; }
.text-pink-900                                  { color: #880E4F; }
.text-pink-a100                                 { color: #FF80AB; }
.text-pink-a200                                 { color: #FF4081; }
.text-pink-a400                                 { color: #F50057; }
.text-pink-a700                                 { color: #C51162; }

.btn-purple,            .bg-purple              { background-color: #9C27B0 !important; color: #fff; }
.btn-purple-50,         .bg-purple-50           { background-color: #F3E5F5 !important; color: #fff; }
.btn-purple-100,        .bg-purple-100          { background-color: #E1BEE7 !important; color: #fff; }
.btn-purple-200,        .bg-purple-200          { background-color: #CE93D8 !important; color: #fff; }
.btn-purple-300,        .bg-purple-300          { background-color: #BA68C8 !important; color: #fff; }
.btn-purple-400,        .bg-purple-400          { background-color: #AB47BC !important; color: #fff; }
.btn-purple-500,        .bg-purple-500          { background-color: #9C27B0 !important; color: #fff; }
.btn-purple-600,        .bg-purple-600          { background-color: #8E24AA !important; color: #fff; }
.btn-purple-700,        .bg-purple-700          { background-color: #7B1FA2 !important; color: #fff; }
.btn-purple-800,        .bg-purple-800          { background-color: #6A1B9A !important; color: #fff; }
.btn-purple-900,        .bg-purple-900          { background-color: #4A148C !important; color: #fff; }
.btn-purple-a100,       .bg-purple-a100         { background-color: #EA80FC !important; color: #fff; }
.btn-purple-a200,       .bg-purple-a200         { background-color: #E040FB !important; color: #fff; }
.btn-purple-a400,       .bg-purple-a400         { background-color: #D500F9 !important; color: #fff; }
.btn-purple-a700,       .bg-purple-a700         { background-color: #AA00FF !important; color: #fff; }
.text-purple                                    { color: #9C27B0; }
.text-purple-50                                 { color: #F3E5F5; }
.text-purple-100                                { color: #E1BEE7; }
.text-purple-200                                { color: #CE93D8; }
.text-purple-300                                { color: #BA68C8; }
.text-purple-400                                { color: #AB47BC; }
.text-purple-500                                { color: #9C27B0; }
.text-purple-600                                { color: #8E24AA; }
.text-purple-700                                { color: #7B1FA2; }
.text-purple-800                                { color: #6A1B9A; }
.text-purple-900                                { color: #4A148C; }
.text-purple-a100                               { color: #EA80FC; }
.text-purple-a200                               { color: #E040FB; }
.text-purple-a400                               { color: #D500F9; }
.text-purple-a700                               { color: #AA00FF; }

.btn-deep-purple,       .bg-deep-purple         { background-color: #673AB7 !important; color: #fff; }
.btn-deep-purple-50,    .bg-deep-purple-50      { background-color: #EDE7F6 !important; color: #fff; }
.btn-deep-purple-100,   .bg-deep-purple-100     { background-color: #D1C4E9 !important; color: #fff; }
.btn-deep-purple-200,   .bg-deep-purple-200     { background-color: #B39DDB !important; color: #fff; }
.btn-deep-purple-300,   .bg-deep-purple-300     { background-color: #9575CD !important; color: #fff; }
.btn-deep-purple-400,   .bg-deep-purple-400     { background-color: #7E57C2 !important; color: #fff; }
.btn-deep-purple-500,   .bg-deep-purple-500     { background-color: #673AB7; color: #fff; }
.btn-deep-purple-600,   .bg-deep-purple-600     { background-color: #5E35B1 !important; color: #fff; }
.btn-deep-purple-700,   .bg-deep-purple-700     { background-color: #512DA8 !important; color: #fff; }
.btn-deep-purple-800,   .bg-deep-purple-800     { background-color: #4527A0 !important; color: #fff; }
.btn-deep-purple-900,   .bg-deep-purple-900     { background-color: #311B92 !important; color: #fff; }
.btn-deep-purple-a100,  .bg-deep-purple-a100    { background-color: #B388FF !important; color: #fff; }
.btn-deep-purple-a200,  .bg-deep-purple-a200    { background-color: #7C4DFF !important; color: #fff; }
.btn-deep-purple-a400,  .bg-deep-purple-a400    { background-color: #651FFF !important; color: #fff; }
.btn-deep-purple-a700,  .bg-deep-purple-a700    { background-color: #6200EA !important; color: #fff; }
.text-deep-purple                               { color: #673AB7; }
.text-deep-purple-50                            { color: #EDE7F6; }
.text-deep-purple-100                           { color: #D1C4E9; }
.text-deep-purple-200                           { color: #B39DDB; }
.text-deep-purple-300                           { color: #9575CD; }
.text-deep-purple-400                           { color: #7E57C2; }
.text-deep-purple-500                           { color: #673AB7; }
.text-deep-purple-600                           { color: #5E35B1; }
.text-deep-purple-700                           { color: #512DA8; }
.text-deep-purple-800                           { color: #4527A0; }
.text-deep-purple-900                           { color: #311B92; }
.text-deep-purple-a100                          { color: #B388FF; }
.text-deep-purple-a200                          { color: #7C4DFF; }
.text-deep-purple-a400                          { color: #651FFF; }
.text-deep-purple-a700                          { color: #6200EA; }

.btn-indigo,            .bg-indigo              { background-color: #3F51B5 !important; color: #fff; }
.btn-indigo-50,         .bg-indigo-50           { background-color: #E8EAF6 !important; color: #fff; }
.btn-indigo-100,        .bg-indigo-100          { background-color: #C5CAE9 !important; color: #fff; }
.btn-indigo-200,        .bg-indigo-200          { background-color: #9FA8DA !important; color: #fff; }
.btn-indigo-300,        .bg-indigo-300          { background-color: #7986CB !important; color: #fff; }
.btn-indigo-400,        .bg-indigo-400          { background-color: #5C6BC0 !important; color: #fff; }
.btn-indigo-500,        .bg-indigo-500          { background-color: #3F51B5 !important; color: #fff; }
.btn-indigo-600,        .bg-indigo-600          { background-color: #3949AB !important; color: #fff; }
.btn-indigo-700,        .bg-indigo-700          { background-color: #303F9F !important; color: #fff; }
.btn-indigo-800,        .bg-indigo-800          { background-color: #283593 !important; color: #fff; }
.btn-indigo-900,        .bg-indigo-900          { background-color: #1A237E !important; color: #fff; }
.btn-indigo-a100,       .bg-indigo-a100         { background-color: #8C9EFF !important; color: #fff; }
.btn-indigo-a200,       .bg-indigo-a200         { background-color: #536DFE !important; color: #fff; }
.btn-indigo-a400,       .bg-indigo-a400         { background-color: #3D5AFE !important; color: #fff; }
.btn-indigo-a700,       .bg-indigo-a700         { background-color: #304FFE !important; color: #fff; }
.text-indigo                                    { color: #3F51B5; }
.text-indigo-50                                 { color: #E8EAF6; }
.text-indigo-100                                { color: #C5CAE9; }
.text-indigo-200                                { color: #9FA8DA; }
.text-indigo-300                                { color: #7986CB; }
.text-indigo-400                                { color: #5C6BC0; }
.text-indigo-500                                { color: #3F51B5; }
.text-indigo-600                                { color: #3949AB; }
.text-indigo-700                                { color: #303F9F; }
.text-indigo-800                                { color: #283593; }
.text-indigo-900                                { color: #1A237E; }
.text-indigo-a100                               { color: #8C9EFF; }
.text-indigo-a200                               { color: #536DFE; }
.text-indigo-a400                               { color: #3D5AFE; }
.text-indigo-a700                               { color: #304FFE; }

.btn-blue,              .bg-blue                { background-color: #2196F3 !important; color: #fff; }
.btn-blue-50,           .bg-blue-50             { background-color: #E3F2FD !important; color: #fff; }
.btn-blue-100,          .bg-blue-100            { background-color: #BBDEFB !important; color: #fff; }
.btn-blue-200,          .bg-blue-200            { background-color: #90CAF9 !important; color: #fff; }
.btn-blue-300,          .bg-blue-300            { background-color: #64B5F6 !important; color: #fff; }
.btn-blue-400,          .bg-blue-400            { background-color: #42A5F5 !important; color: #fff; }
.btn-blue-500,          .bg-blue-500            { background-color: #2196F3 !important; color: #fff; }
.btn-blue-600,          .bg-blue-600            { background-color: #1E88E5 !important; color: #fff; }
.btn-blue-700,          .bg-blue-700            { background-color: #1976D2 !important; color: #fff; }
.btn-blue-800,          .bg-blue-800            { background-color: #1565C0 !important; color: #fff; }
.btn-blue-900,          .bg-blue-900            { background-color: #0D47A1 !important; color: #fff; }
.btn-blue-a100,         .bg-blue-a100           { background-color: #82B1FF !important; color: #fff; }
.btn-blue-a200,         .bg-blue-a200           { background-color: #448AFF !important; color: #fff; }
.btn-blue-a400,         .bg-blue-a400           { background-color: #2979FF !important; color: #fff; }
.btn-blue-a700,         .bg-blue-a700           { background-color: #2962FF !important; color: #fff; }
.text-blue                                      { color: #2196F3; }
.text-blue-50                                   { color: #E3F2FD; }
.text-blue-100                                  { color: #BBDEFB; }
.text-blue-200                                  { color: #90CAF9; }
.text-blue-300                                  { color: #64B5F6; }
.text-blue-400                                  { color: #42A5F5; }
.text-blue-500                                  { color: #2196F3; }
.text-blue-600                                  { color: #1E88E5; }
.text-blue-700                                  { color: #1976D2; }
.text-blue-800                                  { color: #1565C0; }
.text-blue-900                                  { color: #0D47A1; }
.text-blue-a100                                 { color: #82B1FF; }
.text-blue-a200                                 { color: #448AFF; }
.text-blue-a400                                 { color: #2979FF; }
.text-blue-a700                                 { color: #2962FF; }

.btn-light-blue,        .bg-light-blue          { background-color: #03A9F4 !important; color: #fff; }
.btn-light-blue-50,     .bg-light-blue-50       { background-color: #E1F5FE !important; color: #fff; }
.btn-light-blue-100,    .bg-light-blue-100      { background-color: #B3E5FC !important; color: #fff; }
.btn-light-blue-200,    .bg-light-blue-200      { background-color: #81D4FA !important; color: #fff; }
.btn-light-blue-300,    .bg-light-blue-300      { background-color: #4FC3F7 !important; color: #fff; }
.btn-light-blue-400,    .bg-light-blue-400      { background-color: #29B6F6 !important; color: #fff; }
.btn-light-blue-500,    .bg-light-blue-500      { background-color: #03A9F4 !important; color: #fff; }
.btn-light-blue-600,    .bg-light-blue-600      { background-color: #039BE5 !important; color: #fff; }
.btn-light-blue-700,    .bg-light-blue-700      { background-color: #0288D1 !important; color: #fff; }
.btn-light-blue-800,    .bg-light-blue-800      { background-color: #0277BD !important; color: #fff; }
.btn-light-blue-900,    .bg-light-blue-900      { background-color: #01579B !important; color: #fff; }
.btn-light-blue-a100,   .bg-light-blue-a100     { background-color: #80D8FF !important; color: #fff; }
.btn-light-blue-a200,   .bg-light-blue-a200     { background-color: #40C4FF !important; color: #fff; }
.btn-light-blue-a400,   .bg-light-blue-a400     { background-color: #00B0FF !important; color: #fff; }
.btn-light-blue-a700,   .bg-light-blue-a700     { background-color: #0091EA !important; color: #fff; }
.text-light-blue                                { color: #03A9F4; }
.text-light-blue-50                             { color: #E1F5FE; }
.text-light-blue-100                            { color: #B3E5FC; }
.text-light-blue-200                            { color: #81D4FA; }
.text-light-blue-300                            { color: #4FC3F7; }
.text-light-blue-400                            { color: #29B6F6; }
.text-light-blue-500                            { color: #03A9F4; }
.text-light-blue-600                            { color: #039BE5; }
.text-light-blue-700                            { color: #0288D1; }
.text-light-blue-800                            { color: #0277BD; }
.text-light-blue-900                            { color: #01579B; }
.text-light-blue-a100                           { color: #80D8FF; }
.text-light-blue-a200                           { color: #40C4FF; }
.text-light-blue-a400                           { color: #00B0FF; }
.text-light-blue-a700                           { color: #0091EA; }

.btn-cyan,              .bg-cyan                { background-color: #00BCD4 !important; color: #fff; }
.btn-cyan-50,           .bg-cyan-50             { background-color: #E0F7FA !important; color: #fff; }
.btn-cyan-100,          .bg-cyan-100            { background-color: #B2EBF2 !important; color: #fff; }
.btn-cyan-200,          .bg-cyan-200            { background-color: #80DEEA !important; color: #fff; }
.btn-cyan-300,          .bg-cyan-300            { background-color: #4DD0E1 !important; color: #fff; }
.btn-cyan-400,          .bg-cyan-400            { background-color: #26C6DA !important; color: #fff; }
.btn-cyan-500,          .bg-cyan-500            { background-color: #00BCD4 !important; color: #fff; }
.btn-cyan-600,          .bg-cyan-600            { background-color: #00ACC1 !important; color: #fff; }
.btn-cyan-700,          .bg-cyan-700            { background-color: #0097A7 !important; color: #fff; }
.btn-cyan-800,          .bg-cyan-800            { background-color: #00838F !important; color: #fff; }
.btn-cyan-900,          .bg-cyan-900            { background-color: #006064 !important; color: #fff; }
.btn-cyan-a100,         .bg-cyan-a100           { background-color: #84FFFF !important; color: #fff; }
.btn-cyan-a200,         .bg-cyan-a200           { background-color: #18FFFF !important; color: #fff; }
.btn-cyan-a400,         .bg-cyan-a400           { background-color: #00E5FF !important; color: #fff; }
.btn-cyan-a700,         .bg-cyan-a700           { background-color: #00B8D4 !important; color: #fff; }
.text-cyan                                      { color: #00BCD4; }
.text-cyan-50                                   { color: #E0F7FA; }
.text-cyan-100                                  { color: #B2EBF2; }
.text-cyan-200                                  { color: #80DEEA; }
.text-cyan-300                                  { color: #4DD0E1; }
.text-cyan-400                                  { color: #26C6DA; }
.text-cyan-500                                  { color: #00BCD4; }
.text-cyan-600                                  { color: #00ACC1; }
.text-cyan-700                                  { color: #0097A7; }
.text-cyan-800                                  { color: #00838F; }
.text-cyan-900                                  { color: #006064; }
.text-cyan-a100                                 { color: #84FFFF; }
.text-cyan-a200                                 { color: #18FFFF; }
.text-cyan-a400                                 { color: #00E5FF; }
.text-cyan-a700                                 { color: #00B8D4; }

.btn-teal,              .bg-teal                { background-color: #009688 !important; color: #fff; }
.btn-teal-50,           .bg-teal-50             { background-color: #E0F2F1 !important; color: #fff; }
.btn-teal-100,          .bg-teal-100            { background-color: #B2DFDB !important; color: #fff; }
.btn-teal-200,          .bg-teal-200            { background-color: #80CBC4 !important; color: #fff; }
.btn-teal-300,          .bg-teal-300            { background-color: #4DB6AC !important; color: #fff; }
.btn-teal-400,          .bg-teal-400            { background-color: #26A69A !important; color: #fff; }
.btn-teal-500,          .bg-teal-500            { background-color: #009688 !important; color: #fff; }
.btn-teal-600,          .bg-teal-600            { background-color: #00897B !important; color: #fff; }
.btn-teal-700,          .bg-teal-700            { background-color: #00796B !important; color: #fff; }
.btn-teal-800,          .bg-teal-800            { background-color: #00695C !important; color: #fff; }
.btn-teal-900,          .bg-teal-900            { background-color: #004D40 !important; color: #fff; }
.btn-teal-a100,         .bg-teal-a100           { background-color: #A7FFEB !important; color: #fff; }
.btn-teal-a200,         .bg-teal-a200           { background-color: #64FFDA !important; color: #fff; }
.btn-teal-a400,         .bg-teal-a400           { background-color: #1DE9B6 !important; color: #fff; }
.btn-teal-a700,         .bg-teal-a700           { background-color: #00BFA5 !important; color: #fff; }
.text-teal                                      { color: #009688; }
.text-teal-50                                   { color: #009688; }
.text-teal-100                                  { color: #B2DFDB; }
.text-teal-200                                  { color: #80CBC4; }
.text-teal-300                                  { color: #4DB6AC; }
.text-teal-400                                  { color: #26A69A; }
.text-teal-500                                  { color: #009688; }
.text-teal-600                                  { color: #00897B; }
.text-teal-700                                  { color: #00796B; }
.text-teal-800                                  { color: #00695C; }
.text-teal-900                                  { color: #004D40; }
.text-teal-a100                                 { color: #A7FFEB; }
.text-teal-a200                                 { color: #64FFDA; }
.text-teal-a400                                 { color: #1DE9B6; }
.text-teal-a700                                 { color: #00BFA5; }

.btn-green,             .bg-green               { background-color: #4CAF50 !important; color: #000; }
.btn-green-50,          .bg-green-50            { background-color: #E8F5E9 !important; color: #000; }
.btn-green-100,         .bg-green-100           { background-color: #C8E6C9 !important; color: #000; }
.btn-green-200,         .bg-green-200           { background-color: #A5D6A7 !important; color: #000; }
.btn-green-300,         .bg-green-300           { background-color: #81C784 !important; color: #000; }
.btn-green-400,         .bg-green-400           { background-color: #66BB6A !important; color: #fff; }
.btn-green-500,         .bg-green-500           { background-color: #4CAF50 !important; color: #fff; }
.btn-green-600,         .bg-green-600           { background-color: #43A047 !important; color: #fff; }
.btn-green-700,         .bg-green-700           { background-color: #388E3C !important; color: #fff; }
.btn-green-800,         .bg-green-800           { background-color: #2E7D32 !important; color: #fff; }
.btn-green-900,         .bg-green-900           { background-color: #1B5E20 !important; color: #fff; }
.btn-green-a100,        .bg-green-a100          { background-color: #B9F6CA !important; color: #000; }
.btn-green-a200,        .bg-green-a200          { background-color: #69F0AE !important; color: #000; }
.btn-green-a400,        .bg-green-a400          { background-color: #00E676 !important; color: #000; }
.btn-green-a700,        .bg-green-a700          { background-color: #00C853 !important; color: #000; }
.text-green                                     { color: #4CAF50; }
.text-green-50                                  { color: #E8F5E9; }
.text-green-100                                 { color: #C8E6C9; }
.text-green-200                                 { color: #A5D6A7; }
.text-green-300                                 { color: #81C784; }
.text-green-400                                 { color: #66BB6A; }
.text-green-500                                 { color: #4CAF50; }
.text-green-600                                 { color: #43A047; }
.text-green-700                                 { color: #388E3C; }
.text-green-800                                 { color: #2E7D32; }
.text-green-900                                 { color: #1B5E20; }
.text-green-a100                                { color: #B9F6CA; }
.text-green-a200                                { color: #69F0AE; }
.text-green-a400                                { color: #00E676; }
.text-green-a700                                { color: #00C853; }

.btn-light-green,       .bg-light-green         { background-color: #8BC34A !important; color: #000; }
.btn-light-green-50,    .bg-light-green-50      { background-color: #F1F8E9 !important; color: #000; }
.btn-light-green-100,   .bg-light-green-100     { background-color: #DCEDC8 !important; color: #000; }
.btn-light-green-200,   .bg-light-green-200     { background-color: #C5E1A5 !important; color: #000; }
.btn-light-green-300,   .bg-light-green-300     { background-color: #AED581 !important; color: #000; }
.btn-light-green-400,   .bg-light-green-400     { background-color: #9CCC65 !important; color: #000; }
.btn-light-green-500,   .bg-light-green-500     { background-color: #8BC34A !important; color: #fff; }
.btn-light-green-600,   .bg-light-green-600     { background-color: #7CB342 !important; color: #fff; }
.btn-light-green-700,   .bg-light-green-700     { background-color: #689F38 !important; color: #fff; }
.btn-light-green-800,   .bg-light-green-800     { background-color: #558B2F !important; color: #fff; }
.btn-light-green-900,   .bg-light-green-900     { background-color: #33691E !important; color: #fff; }
.btn-light-green-a100,  .bg-light-green-a100    { background-color: #CCFF90 !important; color: #000; }
.btn-light-green-a200,  .bg-light-green-a200    { background-color: #B2FF59 !important; color: #000; }
.btn-light-green-a400,  .bg-light-green-a400    { background-color: #76FF03 !important; color: #000; }
.btn-light-green-a700,  .bg-light-green-a700    { background-color: #64DD17 !important; color: #000; }
.text-light-green                               { color: #8BC34A; }
.text-light-green-50                            { color: #F1F8E9; }
.text-light-green-100                           { color: #DCEDC8; }
.text-light-green-200                           { color: #C5E1A5; }
.text-light-green-300                           { color: #AED581; }
.text-light-green-400                           { color: #9CCC65; }
.text-light-green-500                           { color: #8BC34A; }
.text-light-green-600                           { color: #7CB342; }
.text-light-green-700                           { color: #689F38; }
.text-light-green-800                           { color: #558B2F; }
.text-light-green-900                           { color: #33691E; }
.text-light-green-a100                          { color: #CCFF90; }
.text-light-green-a200                          { color: #B2FF59; }
.text-light-green-a400                          { color: #76FF03; }
.text-light-green-a700                          { color: #64DD17; }

.btn-lime,              .bg-lime                { background-color: #CDDC39 !important; color: #fff; }
.btn-lime-50,           .bg-lime-50             { background-color: #F9FBE7 !important; color: #000; }
.btn-lime-100,          .bg-lime-100            { background-color: #F0F4C3 !important; color: #000; }
.btn-lime-200,          .bg-lime-200            { background-color: #E6EE9C !important; color: #000; }
.btn-lime-300,          .bg-lime-300            { background-color: #DCE775 !important; color: #000; }
.btn-lime-400,          .bg-lime-400            { background-color: #D4E157 !important; color: #fff; }
.btn-lime-500,          .bg-lime-500            { background-color: #CDDC39 !important; color: #fff; }
.btn-lime-600,          .bg-lime-600            { background-color: #C0CA33 !important; color: #fff; }
.btn-lime-700,          .bg-lime-700            { background-color: #AFB42B !important; color: #fff; }
.btn-lime-800,          .bg-lime-800            { background-color: #9E9D24 !important; color: #fff; }
.btn-lime-900,          .bg-lime-900            { background-color: #827717 !important; color: #fff; }
.btn-lime-a100,         .bg-lime-a100           { background-color: #F4FF81 !important; color: #fff; }
.btn-lime-a200,         .bg-lime-a200           { background-color: #EEFF41 !important; color: #fff; }
.btn-lime-a400,         .bg-lime-a400           { background-color: #C6FF00 !important; color: #fff; }
.btn-lime-a700,         .bg-lime-a700           { background-color: #AEEA00 !important; color: #fff; }
.text-lime                                      { color: #CDDC39; }
.text-lime-50                                   { color: #F9FBE7; }
.text-lime-100                                  { color: #F0F4C3; }
.text-lime-200                                  { color: #E6EE9C; }
.text-lime-300                                  { color: #DCE775; }
.text-lime-400                                  { color: #D4E157; }
.text-lime-500                                  { color: #CDDC39; }
.text-lime-600                                  { color: #C0CA33; }
.text-lime-700                                  { color: #AFB42B; }
.text-lime-800                                  { color: #9E9D24; }
.text-lime-900                                  { color: #827717; }
.text-lime-a100                                 { color: #F4FF81; }
.text-lime-a200                                 { color: #EEFF41; }
.text-lime-a400                                 { color: #C6FF00; }
.text-lime-a700                                 { color: #AEEA00; }

.btn-yellow,            .bg-yellow              { background-color: #FFEB3B !important; color: #000; }
.btn-yellow-50,         .bg-yellow-50           { background-color: #FFFDE7 !important; color: #000; }
.btn-yellow-100,        .bg-yellow-100          { background-color: #FFF9C4 !important; color: #000; }
.btn-yellow-200,        .bg-yellow-200          { background-color: #FFF59D !important; color: #000; }
.btn-yellow-300,        .bg-yellow-300          { background-color: #FFF176 !important; color: #000; }
.btn-yellow-400,        .bg-yellow-400          { background-color: #FFEE58 !important; color: #000; }
.btn-yellow-500,        .bg-yellow-500          { background-color: #FFEB3B !important; color: #000; }
.btn-yellow-600,        .bg-yellow-600          { background-color: #FDD835 !important; color: #000; }
.btn-yellow-700,        .bg-yellow-700          { background-color: #FBC02D !important; color: #fff; }
.btn-yellow-800,        .bg-yellow-800          { background-color: #F9A825 !important; color: #fff; }
.btn-yellow-900,        .bg-yellow-900          { background-color: #F57F17 !important; color: #fff; }
.btn-yellow-a100,       .bg-yellow-a100         { background-color: #FFFF8D !important; color: #000; }
.btn-yellow-a200,       .bg-yellow-a200         { background-color: #FFFF00 !important; color: #000; }
.btn-yellow-a400,       .bg-yellow-a400         { background-color: #FFEA00 !important; color: #000; }
.btn-yellow-a700,       .bg-yellow-a700         { background-color: #FFD600 !important; color: #000; }
.text-yellow                                    { color: #FFEB3B; }
.text-yellow-50                                 { color: #FFFDE7; }
.text-yellow-100                                { color: #FFF9C4; }
.text-yellow-200                                { color: #FFF59D; }
.text-yellow-300                                { color: #FFF176; }
.text-yellow-400                                { color: #FFEE58; }
.text-yellow-500                                { color: #FFEB3B; }
.text-yellow-600                                { color: #FDD835; }
.text-yellow-700                                { color: #FBC02D; }
.text-yellow-800                                { color: #F9A825; }
.text-yellow-900                                { color: #F57F17; }
.text-yellow-a100                               { color: #FFFF8D; }
.text-yellow-a200                               { color: #FFFF00; }
.text-yellow-a400                               { color: #FFEA00; }
.text-yellow-a700                               { color: #FFD600; }

.btn-amber,             .bg-amber               { background-color: #FFC107 !important; color: #fff; }
.btn-amber-50,          .bg-amber-50            { background-color: #FFF8E1 !important; color: #fff; }
.btn-amber-100,         .bg-amber-100           { background-color: #FFECB3 !important; color: #fff; }
.btn-amber-200,         .bg-amber-200           { background-color: #FFE082 !important; color: #fff; }
.btn-amber-300,         .bg-amber-300           { background-color: #FFD54F !important; color: #fff; }
.btn-amber-400,         .bg-amber-400           { background-color: #FFCA28 !important; color: #fff; }
.btn-amber-500,         .bg-amber-500           { background-color: #FFC107 !important; color: #fff; }
.btn-amber-600,         .bg-amber-600           { background-color: #FFB300 !important; color: #fff; }
.btn-amber-700,         .bg-amber-700           { background-color: #FFA000 !important; color: #fff; }
.btn-amber-800,         .bg-amber-800           { background-color: #FF8F00 !important; color: #fff; }
.btn-amber-900,         .bg-amber-900           { background-color: #FF6F00 !important; color: #fff; }
.btn-amber-a100,        .bg-amber-a100          { background-color: #FFE57F !important; color: #fff; }
.btn-amber-a200,        .bg-amber-a200          { background-color: #FFD740 !important; color: #fff; }
.btn-amber-a400,        .bg-amber-a400          { background-color: #FFC400 !important; color: #fff; }
.btn-amber-a700,        .bg-amber-a700          { background-color: #FFAB00 !important; color: #fff; }
.text-amber                                     { color: #FFC107; }
.text-amber-50                                  { color: #FFF8E1; }
.text-amber-100                                 { color: #FFECB3; }
.text-amber-200                                 { color: #FFE082; }
.text-amber-300                                 { color: #FFD54F; }
.text-amber-400                                 { color: #FFCA28; }
.text-amber-500                                 { color: #FFC107; }
.text-amber-600                                 { color: #FFB300; }
.text-amber-700                                 { color: #FFA000; }
.text-amber-800                                 { color: #FF8F00; }
.text-amber-900                                 { color: #FF6F00; }
.text-amber-a100                                { color: #FFE57F; }
.text-amber-a200                                { color: #FFD740; }
.text-amber-a400                                { color: #FFC400; }
.text-amber-a700                                { color: #FFAB00; }

.btn-orange,            .bg-orange              { background-color: #FF9800 !important; color: #fff; }
.btn-orange-50,         .bg-orange-50           { background-color: #FFF3E0 !important; color: #fff; }
.btn-orange-100,        .bg-orange-100          { background-color: #FFE0B2 !important; color: #fff; }
.btn-orange-200,        .bg-orange-200          { background-color: #FFCC80 !important; color: #fff; }
.btn-orange-300,        .bg-orange-300          { background-color: #FFB74D !important; color: #fff; }
.btn-orange-400,        .bg-orange-400          { background-color: #FFA726 !important; color: #fff; }
.btn-orange-500,        .bg-orange-500          { background-color: #FF9800 !important; color: #fff; }
.btn-orange-600,        .bg-orange-600          { background-color: #FB8C00 !important; color: #fff; }
.btn-orange-700,        .bg-orange-700          { background-color: #F57C00 !important; color: #fff; }
.btn-orange-800,        .bg-orange-800          { background-color: #EF6C00 !important; color: #fff; }
.btn-orange-900,        .bg-orange-900          { background-color: #E65100 !important; color: #fff; }
.btn-orange-a100,       .bg-orange-a100         { background-color: #FFD180 !important; color: #fff; }
.btn-orange-a200,       .bg-orange-a200         { background-color: #FFAB40 !important; color: #fff; }
.btn-orange-a400,       .bg-orange-a400         { background-color: #FF9100 !important; color: #fff; }
.btn-orange-a700,       .bg-orange-a700         { background-color: #FF6D00 !important; color: #fff; }
.text-orange                                    { color: #FF9800; }
.text-orange-50                                 { color: #FFF3E0; }
.text-orange-100                                { color: #FFE0B2; }
.text-orange-200                                { color: #FFCC80; }
.text-orange-300                                { color: #FFB74D; }
.text-orange-400                                { color: #FFA726; }
.text-orange-500                                { color: #FF9800; }
.text-orange-600                                { color: #FB8C00; }
.text-orange-700                                { color: #F57C00; }
.text-orange-800                                { color: #EF6C00; }
.text-orange-900                                { color: #E65100; }
.text-orange-a100                               { color: #FFD180; }
.text-orange-a200                               { color: #FFAB40; }
.text-orange-a400                               { color: #FF9100; }
.text-orange-a700                               { color: #FF6D00; }

.btn-deep-orange,       .bg-deep-orange         { background-color: #FF5722 !important; color: #fff; }
.btn-deep-orange-50,    .bg-deep-orange-50      { background-color: #FBE9E7 !important; color: #fff; }
.btn-deep-orange-100,   .bg-deep-orange-100     { background-color: #FFCCBC !important; color: #fff; }
.btn-deep-orange-200,   .bg-deep-orange-200     { background-color: #FFAB91 !important; color: #fff; }
.btn-deep-orange-300,   .bg-deep-orange-300     { background-color: #FF8A65 !important; color: #fff; }
.btn-deep-orange-400,   .bg-deep-orange-400     { background-color: #FF7043 !important; color: #fff; }
.btn-deep-orange-500,   .bg-deep-orange-500     { background-color: #FF5722 !important; color: #fff; }
.btn-deep-orange-600,   .bg-deep-orange-600     { background-color: #F4511E !important; color: #fff; }
.btn-deep-orange-700,   .bg-deep-orange-700     { background-color: #E64A19 !important; color: #fff; }
.btn-deep-orange-800,   .bg-deep-orange-800     { background-color: #D84315 !important; color: #fff; }
.btn-deep-orange-900,   .bg-deep-orange-900     { background-color: #BF360C !important; color: #fff; }
.btn-deep-orange-a100,  .bg-deep-orange-a100    { background-color: #FF9E80 !important; color: #fff; }
.btn-deep-orange-a200,  .bg-deep-orange-a200    { background-color: #FF6E40 !important; color: #fff; }
.btn-deep-orange-a400,  .bg-deep-orange-a400    { background-color: #FF3D00 !important; color: #fff; }
.btn-deep-orange-a700,  .bg-deep-orange-a700    { background-color: #DD2C00 !important; color: #fff; }
.text-deep-orange                               { color: #FF5722; }
.text-deep-orange-50                            { color: #FBE9E7; }
.text-deep-orange-100                           { color: #FFCCBC; }
.text-deep-orange-200                           { color: #FFAB91; }
.text-deep-orange-300                           { color: #FF8A65; }
.text-deep-orange-400                           { color: #FF7043; }
.text-deep-orange-500                           { color: #FF5722; }
.text-deep-orange-600                           { color: #F4511E; }
.text-deep-orange-700                           { color: #E64A19; }
.text-deep-orange-800                           { color: #D84315; }
.text-deep-orange-900                           { color: #BF360C; }
.text-deep-orange-a100                          { color: #FF9E80; }
.text-deep-orange-a200                          { color: #FF6E40; }
.text-deep-orange-a400                          { color: #FF3D00; }
.text-deep-orange-a700                          { color: #DD2C00; }

.btn-brown,             .bg-brown               { background-color: #795548 !important; color: #fff; }
.btn-brown-50,          .bg-brown-50            { background-color: #EFEBE9 !important; color: #fff; }
.btn-brown-100,         .bg-brown-100           { background-color: #D7CCC8 !important; color: #fff; }
.btn-brown-200,         .bg-brown-200           { background-color: #BCAAA4 !important; color: #fff; }
.btn-brown-300,         .bg-brown-300           { background-color: #A1887F !important; color: #fff; }
.btn-brown-400,         .bg-brown-400           { background-color: #8D6E63 !important; color: #fff; }
.btn-brown-500,         .bg-brown-500           { background-color: #795548 !important; color: #fff; }
.btn-brown-600,         .bg-brown-600           { background-color: #6D4C41 !important; color: #fff; }
.btn-brown-700,         .bg-brown-700           { background-color: #5D4037 !important; color: #fff; }
.btn-brown-800,         .bg-brown-800           { background-color: #4E342E !important; color: #fff; }
.btn-brown-900,         .bg-brown-900           { background-color: #3E2723 !important; color: #fff; }
.btn-brown-a100,        .bg-brown-a100          { background-color: #3E2723 !important; color: #fff; }
.btn-brown-a200,        .bg-brown-a200          { background-color: #3E2723 !important; color: #fff; }
.btn-brown-a400,        .bg-brown-a400          { background-color: #3E2723 !important; color: #fff; }
.btn-brown-a700,        .bg-brown-a700          { background-color: #3E2723 !important; color: #fff; }
.text-brown                                     { color: #795548; }
.text-brown-50                                  { color: #EFEBE9; }
.text-brown-100                                 { color: #D7CCC8; }
.text-brown-200                                 { color: #BCAAA4; }
.text-brown-300                                 { color: #A1887F; }
.text-brown-400                                 { color: #8D6E63; }
.text-brown-500                                 { color: #795548; }
.text-brown-600                                 { color: #6D4C41; }
.text-brown-700                                 { color: #5D4037; }
.text-brown-900                                 { color: #4E342E; }
.text-brown-a100                                { color: #3E2723; }
.text-brown-a200                                { color: #3E2723; }
.text-brown-a400                                { color: #3E2723; }
.text-brown-a700                                { color: #3E2723; }

.btn-grey,              .bg-grey                { background-color: #9E9E9E !important; color: #fff; }
.btn-grey-50,           .bg-grey-50             { background-color: #FAFAFA !important; color: #fff; }
.btn-grey-100,          .bg-grey-100            { background-color: #F5F5F5 !important; color: #fff; }
.btn-grey-200,          .bg-grey-200            { background-color: #EEEEEE !important; color: #fff; }
.btn-grey-300,          .bg-grey-300            { background-color: #E0E0E0 !important; color: #fff; }
.btn-grey-400,          .bg-grey-400            { background-color: #BDBDBD !important; color: #fff; }
.btn-grey-500,          .bg-grey-500            { background-color: #9E9E9E !important; color: #fff; }
.btn-grey-600,          .bg-grey-600            { background-color: #757575 !important; color: #fff; }
.btn-grey-700,          .bg-grey-700            { background-color: #616161 !important; color: #fff; }
.btn-grey-800,          .bg-grey-800            { background-color: #424242 !important; color: #fff; }
.btn-grey-900,          .bg-grey-900            { background-color: #212121 !important; color: #fff; }
.btn-grey-a100,         .bg-grey-a100           { background-color: #212121 !important; color: #fff; }
.btn-grey-a200,         .bg-grey-a200           { background-color: #212121 !important; color: #fff; }
.btn-grey-a400,         .bg-grey-a400           { background-color: #212121 !important; color: #fff; }
.btn-grey-a700,         .bg-grey-a700           { background-color: #212121 !important; color: #fff; }
.text-grey                                      { color: #9E9E9E; }
.text-grey-50                                   { color: #FAFAFA; }
.text-grey-100                                  { color: #F5F5F5; }
.text-grey-200                                  { color: #EEEEEE; }
.text-grey-300                                  { color: #E0E0E0; }
.text-grey-400                                  { color: #BDBDBD; }
.text-grey-500                                  { color: #9E9E9E; }
.text-grey-600                                  { color: #757575; }
.text-grey-700                                  { color: #616161; }
.text-grey-800                                  { color: #424242; }
.text-grey-900                                  { color: #212121; }
.text-grey-a100                                 { color: #212121; }
.text-grey-a200                                 { color: #212121; }
.text-grey-a400                                 { color: #212121; }
.text-grey-a700                                 { color: #212121; }

.btn-blue-grey,         .bg-blue-grey           { background-color: #607D8B !important; color: #fff; }
.btn-blue-grey-50,      .bg-blue-grey-50        { background-color: #ECEFF1 !important; color: #fff; }
.btn-blue-grey-100,     .bg-blue-grey-100       { background-color: #CFD8DC !important; color: #fff; }
.btn-blue-grey-200,     .bg-blue-grey-200       { background-color: #B0BEC5 !important; color: #fff; }
.btn-blue-grey-300,     .bg-blue-grey-300       { background-color: #90A4AE !important; color: #fff; }
.btn-blue-grey-400,     .bg-blue-grey-400       { background-color: #78909C !important; color: #fff; }
.btn-blue-grey-500,     .bg-blue-grey-500       { background-color: #607D8B !important; color: #fff; }
.btn-blue-grey-600,     .bg-blue-grey-600       { background-color: #546E7A !important; color: #fff; }
.btn-blue-grey-700,     .bg-blue-grey-700       { background-color: #455A64 !important; color: #fff; }
.btn-blue-grey-800,     .bg-blue-grey-800       { background-color: #37474F !important; color: #fff; }
.btn-blue-grey-900,     .bg-blue-grey-900       { background-color: #263238 !important; color: #fff; }
.btn-blue-grey-a100,    .bg-blue-grey-a100      { background-color: #263238 !important; color: #fff; }
.btn-blue-grey-a200,    .bg-blue-grey-a200      { background-color: #263238 !important; color: #fff; }
.btn-blue-grey-a400,    .bg-blue-grey-a400      { background-color: #263238 !important; color: #fff; }
.btn-blue-grey-a700,    .bg-blue-grey-a700      { background-color: #263238 !important; color: #fff; }
.text-blue-grey                                 { color: #607D8B; }
.text-blue-grey-50                              { color: #ECEFF1; }
.text-blue-grey-100                             { color: #CFD8DC; }
.text-blue-grey-200                             { color: #B0BEC5; }
.text-blue-grey-300                             { color: #90A4AE; }
.text-blue-grey-400                             { color: #78909C; }
.text-blue-grey-500                             { color: #607D8B; }
.text-blue-grey-600                             { color: #546E7A; }
.text-blue-grey-700                             { color: #455A64; }
.text-blue-grey-800                             { color: #37474F; }
.text-blue-grey-900                             { color: #263238; }
.text-blue-grey-a100                            { color: #263238; }
.text-blue-grey-a200                            { color: #263238; }
.text-blue-grey-a400                            { color: #263238; }
.text-blue-grey-a700                            { color: #263238; }