﻿:root {
    --bs-base-font-size: 16px;
    --shelby-font-family: source-sans-pro, sans-serif;
    /* Color Variables */
    --clr-black: hsla(0, 0%, 0%, 1); /* Shelby Black */
    --clr-white: hsla(0, 0%, 100%, 1); /* Shelby White */
    --clr-lt-grey: hsla(0, 0%, 90%, 1); /* Shelby Light Grey */
    --clr-dk-grey: hsla(0, 0%, 35%, 1); /* Shelby Dark Grey */
    --clr-md-grey: #EBECF0; /* Shelby Medium Grey */
    --clr-shelby-red: hsla(0, 80%, 45%, 1); /* Shelby Red */
    --clr-b2b-blu: rgb(17,84,137); /* Shelby B2B Blue */
    --clr-blu-hover: hsla(206, 88%, 40%, 1); /* Shelby Blue Hover */
    /* Font Sizing Variables */
    --fs-050: 0.75rem; /* 12px */
    --fs-100: 0.875rem; /* 14px */
    --fs-200: 1.0rem; /* 16px */
    --fs-250: 1.065rem; /* 16px */
    --fs-300: 1.125rem; /* 18px */
    --fs-400: 1.25rem; /* 20px */
    --fs-500: 1.375rem; /* 22px */
    --fs-550: 1.4rem; /* 23px */
    --fs-600: 1.5rem; /* 24px */
    --fs-650: 1.563rem; /* 25px */
    --fs-700: 1.625rem; /* 26px */
    --fs-800: 1.75rem; /* 28px */
    --fs-900: 1.875rem; /* 30px */
    --fs-1000: 2.0rem; /* 32px */
    --fs-1050: 2.125rem; /* 34px */
    --fs-1100: 2.25rem; /* 36px */
    --fs-1150: 2.375rem; /* 38px */
    --fs-1200: 2.5rem; /* 40px */
    /* Padding and Margin Variables */
    --spc-025: 0.313em;
    --spc-050: 0.375em;
    --spc-075: 0.438em;
    --spc-100: 0.500em;
    /* Text Colors */
    --clr-text-100: hsla(0, 0%, 100%, 1); /* Shelby White Text */
    --clr-text-200: hsla(0, 0%, 80%, 1); /* Shelby Light Grey */
    --clr-text-300: hsla(0, 0%, 60%, 1); /* Shelby Medium Grey */
    --clr-text-400: hsla(0, 0%, 45%, 1); /* Shelby Dark Grey */
    --clr-text-450: hsla(0, 0%, 20%, 1); /* Shelby Darkest Grey */
    --clr-text-500: hsla(0, 80%, 45%, 1); /* Shelby Red */
    --clr-text-600: hsla(206, 88%, 30%, 1); /* Shelby Blue */
    --clr-text-700: hsla(205, 81%, 29%, 1); /* Shelby Dark Blue */
    --clr-text-800: hsla(46, 78%, 48%, 1); /* Low Inventory Yellow  */
    --clr-text-850: hsla(0, 80%, 45%, 1); /* Out Of Stock Red  */
    --clr-text-875: hsla(120, 100%, 25%, 1); /* Green Stock Alert Color  */
    --clr-text-900: hsla(0, 0%, 0%, 1); /* Shelby t Black Text */
    /* Background Colors */
    --clr-bg-100: hsla(0, 0%, 100%, 1); /* shelby white bg */
    --clr-bg-125: hsla(0, 0%, 100%, 0.25); /* shelby white bg 25% opacity */
    --clr-bg-150: hsla(0, 0%, 100%, 0.5); /* shelby white bg 50% opacity */
    --clr-bg-175: hsla(0, 0%, 100%, 0.75); /* shelby white bg 75% opacity */
    --clr-bg-200: hsla(0, 0%, 90%, 1); /* shelby light grey */
    --clr-bg-300: hsla(0, 0%, 70%, 1); /* shelby medium grey */
    --clr-bg-400: hsla(0, 0%, 35%, 1); /* shelby dark grey */
    --clr-bg-450: hsla(0, 0%, 7%, 1); /* shelby dark grey */
    --clr-bg-500: hsla(0, 80%, 45%, 1); /* shelby red */
    --clr-bg-525: hsla(0, 80%, 45%, 0.25); /* shelby red 25% opacity */
    --clr-bg-550: hsla(0, 80%, 45%, 0.5); /* shelby red 50% opacity */
    --clr-bg-575: hsla(0, 80%, 45%, 0.75); /* shelby red 75% opacity */
    --clr-bg-600: hsla(206, 88%, 30%, 1); /* shelby blue 100% opacity */
    --clr-bg-625: hsla(206, 88%, 30%, .25); /* shelby blue 25% opacity */
    --clr-bg-650: hsla(206, 88%, 30%, .5); /* shelby blue 50% opacity */
    --clr-bg-675: hsla(206, 88%, 30%, .75); /* shelby blue 75% opacity */
    --clr-bg-610: hsla(206, 88%, 40%, 1); /* shelby blue hover */
    --clr-bg-700: hsla(214, 66%, 18%, 1); /* dark shelby blue 100% opacity */
    --clr-bg-725: hsla(214, 66%, 18%, .25); /* dark shelby blue 25% opacity */
    --clr-bg-750: hsla(214, 66%, 18%, .5); /* dark shelby blue 50% opacity */
    --clr-bg-775: hsla(214, 66%, 18%, .75); /* dark shelby blue 75% opacity */
    --clr-bg-800: hsla(0, 51%, 43%, 1); /* TS signup red */
    --clr-bg-900: hsla(0, 0%, 0%, 1); /* shelby black bg */
    --clr-bg-925: hsla(0, 0%, 0%, 0.25); /* shelby black bg 25% opacity */
    --clr-bg-950: hsla(0, 0%, 0%, 0.5); /* shelby black bg 50% opacity */
    --clr-bg-975: hsla(0, 0%, 0%, 0.75); /* shelby black bg 75% opacity */
    --clr-bg-1000: hsla(46, 78%, 48%, 1); /* Amazon yellow */
    --clr-bg-1010: hsla(40, 100%, 46%, 1); /* Amazon dark yellow */
    --clr-bg-1100: hsla(57, 100%, 50%, 1); /* Top Alert Banner Yellow */
    /**********************************/
}

/*Containers Start*/
body {
    /*background-color: var(--clr-white);*/
    background-color: var(--clr-text-200);
    color: var(--clr-black);
    font-family: var(--shelby-font-family);
    font-size: var(--bs-base-font-size);
    width: 100%;
    text-align: left;
    margin: 0;
    padding: 0;
    height: 100%;
    min-height: 100%;
    vertical-align: top;
}
body.bg_white {
    background-color: var(--clr-white);
}
body, html {
    min-width: 360px;
    height: 100%;
}
#shell {
    height: 100% !important;
}
#public_area {
    background-color: var(--clr-white);
    /*padding: 15px 15px 25px 15px;*/
    padding: 0px 0px 0px 0px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    max-width: 1450px;
}
iframe {
    margin: auto;
    max-width: 100%;
    display: block;
    object-fit: contain;
}
.border_box {
    border: 1px solid var(--clr-dk-grey);
    padding: var(--spc-100);
    margin: auto;
    margin-bottom: 30px;
    max-width: 850px;
}

.border_box_full {
    border: 1px solid var(--clr-dk-grey);
    padding: var(--spc-100);
    margin: auto;
    margin-bottom: 30px;
    width: 100%;
}

.border_box_trans {
    border: none;
    padding: 0px;
    margin: auto;
    margin-bottom: 30px;
    max-width: 850px;
}
/*Containers End*/

/*Links Start*/
a, a:visited, a:active, a:link, a:focus {
    text-decoration: none;
    color: var(--clr-blu-hover);
    /*background-color: transparent;*/
}
a:hover {
    /*color: dodgerblue;*/
    color: var(--clr-shelby-red); 
    text-decoration: none;
}
a.clear, a.clear:visited, a.clear:active, a.clear:link, a.clear:focus {
    text-decoration: none;
    color: var(--clr-blu-hover) !important;
    background-color: transparent !important;
}
a.clear:hover {
    color: var(--clr-shelby-red) !important;
    text-decoration: none !important;
}
a.btnMainAlert, a:active.btnMainAlert, a:focus.btnMainAlert, a:link.btnMainAlert, a:visited.btnMainAlert,  
.btnMainAlert, .btnMainAlert:active, .btnMainAlert:focus, .btnMainAlert:link, .btnMainAlert:visited {
    /*background-color: rgba(220, 53, 69);*/
    background-color: var(--clr-shelby-red);
    color: var(--clr-white);
    text-decoration: none;
    font-size: var(--fs-300);
    font-weight: 400;
    padding: 0.5rem 0.75rem 0.5rem 0.75rem;
}
a.btnMainAlert:hover, .btnMainAlert:hover {
    color: var(--clr-white);
    background-color: var(--clr-bg-575);
}
a.btnFooter, a:active.btnFooter, a:focus.btnFooter, a:link.btnFooter, a:visited.btnFooter,
.btnFooter, .btnFooter:active, .btnFooter:focus, .btnFooter:link, .btnFooter:visited {
    color: var(--clr-white);
    text-decoration: none;
}
a.btnFooter:hover, .btnFooter:hover {
    color: var(--clr-text-200);
}
a.btnMain, a:active.btnMain, a:focus.btnMain, a:link.btnMain, a:visited.btnMain,  
.btnMain, .btnMain:active, .btnMain:focus, .btnMain:link, .btnMain:visited {
    background-color: var(--clr-b2b-blu);
    color: var(--clr-white);
    text-decoration: none;
    font-size: var(--fs-300);
    font-weight: 400;
}
a.btnMain:hover, .btnMain:hover {
    color: var(--clr-lt-grey);
    background-color: var(--clr-blu-hover);
}
a.btnMainSm, a:active.btnMainSm, a:focus.btnMainSm, a:link.btnMainSm, a:visited.btnMainSm,
.btnMainSm, .btnMainSm:active, .btnMainSm:focus, .btnMainSm:link, .btnMainSm:visited {
    background-color: var(--clr-b2b-blu);
    color: var(--clr-white);
    text-decoration: none;
    font-weight: 400;
    padding: 0.25rem 0.5rem 0.25rem 0.5rem;
    font-size: 0.875rem;
}
a.btnMainSm:hover, .btnMainSm:hover {
    color: var(--clr-lt-grey);
    background-color: var(--clr-blu-hover);
}
a.modal_x, a.modal_x:visited, a.modal_x:active, a.modal_x:link, a.modal_x:focus {
    text-decoration: none !important;
    background-color: transparent;
    color: #ffffff;
}
a.modal_x:hover {
    opacity: .8;
}
/*Links End*/

/*Form Controls Start*/
textarea {
    resize: none;
}
textarea.resize {
    resize: vertical;
}
.form-group.required .control-label:after {
    content: "*";
    color: var(--clr-shelby-red);
}
.radio_parent label {
    position: relative;
    top: 6px;
    padding-left: 5px;
    padding-right: 20px;
    font-weight: normal;
}
.radio_parent_h label {
    position: relative;
    margin-top: 5px;
    padding-left: 5px;
    padding-right: 20px;
    font-weight: normal;
}
.inline_rb label {
    position: relative;
    padding-left: 5px;
    font-weight: normal;
}
.cblist {
    border: 1px solid #cccccc;
    border-radius: 5px;
    padding: 5px;
    background-color:#ffffff;
}
select.caps, select.caps option {
    text-transform: uppercase;
}
/*Form Controls End*/

/*Layout Start*/
.r_align {
    text-align-last: right;
    text-align: right;
}
.center_div {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}
.separator, .pagespacer {
    clear: both;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}
.pagespacer {
    height: 15px;
}
.admin_menu {
    background-color: var(--clr-b2b-blu);
    height: 35px;
}
.admin_menu td {        
    padding: 0px 15px 0px 15px;
    vertical-align: middle;
}
/*Layout End*/

/*Color Start*/
.shelby_black{
    color: var(--clr-black);
}
.shelby_black_bg {
    background-color: var(--clr-black);
}
.shelby_white {
    color: var(--clr-white);
}
.shelby_white_bg {
    background-color: var(--clr-white);
}
.b2b_blu {
    color: var(--clr-b2b-blu);
}
.b2b_blu_bg {
    background-color: var(--clr-b2b-blu);
}
.shelby_ltgrey {
    color: var(--clr-lt-grey);
}
.shelby_ltgrey_bg {
    background-color: var(--clr-lt-grey);
}
.shelby_dkgrey {
    color: var(--clr-dk-grey);
}
.shelby_dkgrey_bg {
    background-color: var(--clr-dk-grey);
}
.shelby_red {
    color: var(--clr-shelby-red);
}
.shelby_red_bg {
    background-color: var(--clr-shelby-red);
}
.b2b_bluhover {
    color: var(--clr-blu-hover);
}
.b2b_bluhover_bg {
    background-color: var(--clr-blu-hover);
}
.b2b_bluhover_bg_lt {
    background-color: var(--clr-blu-hover);
    color: var(--clr-white);
}
.medium_gray {
    color: var(--clr-md-grey);
}
.medium_gray_bg {
    background-color: var(--clr-md-grey);
}
.box_hdr {
    /*background-color: var(--clr-b2b-blu);*/
    background-color: var(--clr-dk-grey);
    color: var(--clr-white);
}
.box_hdr_lt {
    background-color: var(--clr-lt-grey);
    color: var(--clr-black);
}
.box_hdr_steel {
    background-color: lightsteelblue;
    color: var(--clr-black);
}
.box_shadow {
    box-shadow: rgba(0, 0, 0, 0.5) 0px 15px 15px 0px;
}
.scroll_box {
    overflow-y: auto;
    height: 200px;
    background-color: white;
    border: 1px solid lightgray;
    border-radius: 5px;
    padding: 5px 10px;
}
.scroll_box_400 {
    overflow-y: auto;
    height: 400px;
    background-color: white;
    border: 1px solid lightgray;
    border-radius: 5px;
    padding: 5px 10px;
}
.scroll_box_600 {
    overflow-y: auto;
    height: 600px;
    background-color: white;
    border: 1px solid lightgray;
    border-radius: 5px;
    padding: 5px 10px;
}
.non_scroll_box {
    background-color: white;
    border: 1px solid lightgray;
    border-radius: 5px;
    padding: 5px 10px;
}
/*Color End*/

/*Custom Styles*/
.color_hex {
    padding: 0;
    height: 1em;
    display: inline-block;
    border: 1px solid black;
    vertical-align: middle;
}
.color_hex img {
    padding: 0 0.4rem;
    width: 1em;
}
.smaller, .smaller:hover {
    padding: 0.25rem 0.5rem 0.25rem 0.5rem;
    font-size: 0.875rem;
}
.tiny {
    font-size: 0.675rem;
}
.popover {
    max-width: 100%; /* Max Width of the popover (depending on the container!) */
    background-color: aliceblue;
}
.carousel .carousel-indicators button {
    width: 10px;
    height: 10px;
    border-radius: 100%;
    /*background-color: #1963ac;*/
}
div.gal {
    width: 200px;
    height: 200px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}
div.gal:hover {
    opacity: .8;
}
.fa-eye, .fa-eye:focus {
    width: 20px;
}
.fa-eye-slash, .fa-eye-slash:focus {
    width: 20px;
}
.img_claim {
    border: 2px solid #e3e3e3;
    width: 100px;
    background-color: white;
}
.img_wrap {
    width: 100px;
    margin-right: 10px;
    margin-top: 10px;
    position: relative;
    clear: both;
    display: none;
}
.img_wrap_on {
    width: 100px;
    margin-right: 10px;
    margin-top: 10px;
    position: relative;
    clear: both;
    display: block;
}
.img_wrap .remove {
    position: absolute;
    top: -10px;
    right: -10px;
}
.tool {
    float: left;
    position: relative;
    margin: 0px 5px 10px 0px;
}
/*Custom Styles End*/

/*Pager Start*/
.pgr_num {
    background-color: var(--clr-lt-grey);
    padding-left: 5px;
    padding-right: 5px;
    text-decoration: none;
}
.pgr_num_active {
    background-color: var(--clr-b2b-blu);
    color: var(--clr-white);
    padding-left: 5px;
    padding-right: 5px;
    text-decoration: none;
}
.pgr_dd {
    background-color: var(--clr-white);
    color: var(--clr-black);
    border-radius: 3px;
    outline: none;
    border: none;
}
@media screen and (max-width:590px) {
    .pager_sort, .pager_pp {
        text-align: center !important;
    }
}
/*Pager End*/

/*Loader Start*/
#WaitLoader {
    position: fixed;
    top: 0;
    z-index: 999;
    width: 100%;
    height: 100%;
    display: none;
    background: rgba(0,0,0,0.6);
}
.cv_spinner {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.wait_widget {
    width: 150px;
    height: 150px;
    color: var(--clr-white);
}
/*Loader End*/

/*Media Queries Start*/

/*Media Queries End*/
