body {
    font-size:12px;
}

th {
    font-weight:normal;
}

.tdborreset td {
    border-top:0px solid white !important;
}



/* Set padding to keep content from hitting the edges */
/*
.body-content {
    padding-left: 15px;
    padding-right: 15px;
}
*/
.container {
    padding-left: 5px;
    padding-right: 5px;
}


#company_logo {
    max-width: 250px;
}

/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/

.dl-horizontal dt {
    white-space: normal;
}

/* Set width on the form input elements since they're 100% wide by default */


.bg {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    opacity:0.1;
    z-index:-1;
}



#PromoHex {
    background-image: url('/Images/promoHex1.png');
}

    #PromoHex:hover {
        background-image: url('/Images/blankHex.png')
    }

#TradeInHex {
    background-image: url('/Images/tradeHex1.png');
}

    #TradeInHex:hover {
        background-image: url('/Images/blankHex.png')
    }

#SearchHex {
    background-image: url('/Images/searchHex.png');
}

    #SearchHex:hover {
        background-image: url('/Images/blankHex.png')
    }

.HomePagePromoCell {
    background-color: #ffffff;
    vertical-align: central;
}

    .HomePagePromoCell:hover {
        background-color: cornflowerblue;
        cursor: pointer;
    }

.pulse-button-lightblue {
    -webkit-animation-name: pulse;
    -webkit-animation-duration: 3s;
    -webkit-animation-iteration-count: infinite;
    font-size: 13px;
    font-weight: bold;
    padding: 10px;
    border-radius: 10px;
    color: #ffffff;
}

    .pulse-button-lightblue:hover {
        cursor: pointer;
        -webkit-animation-name: pulse;
        -webkit-animation-duration: .8s;
        -webkit-animation-iteration-count: infinite;
        font-size: 13px;
        font-weight: bold;
    }

@-webkit-keyframes pulse {
    from {
        background-color: #5191f7;
    }

    50% {
        background-color: #2073f9;
    }

    to {
        background-color: #0042ad;
    }
}


/* SCREEN SAVER */
.screensaver-layer {
    position: fixed !important;
    inset: 0; /* top:0; right:0; bottom:0; left:0 */
    width: 100vw;
    height: 100vh;
    background: #000; /* full black */
    margin: 0;
    padding: 0;
    z-index: 998;
}

/* holiday layer above clock if you want message overlay */
#msgcontainer {
    z-index: 999;
    /* if you want a subtle overlay instead of full black, use this: */
    /* background: rgba(0,0,0,0.7); */
}

/* still respect your displaynone class */
.screensaver-layer.displaynone {
    display: none;
}





/* SMART DEVICE DEFAULTS NOTE: Defaults are opposite of class name meaning!*/
.smartshow, .smartshowinline {
    display: none;
}
.smarthide {
    display: block;
}
.smarthidecell {
    display: table-cell;
}

/* TEXT CASE */
.uppercase {
    text-transform:uppercase;
}
.lowercase {
    text-transform:lowercase;
}
.capitalize {
    text-transform:capitalize;
}


/* CURSORS */
.curpointer {
    cursor: pointer;
}
.curhelp {
    cursor: help;
}
.curgrab {
    cursor: grab;
}
.curgrabbing {
    cursor: grabbing;
}
.curmove {
    cursor: move;
}
.curnotallowed {
    cursor:not-allowed;
}
.curzoomout {
    cursor:zoom-out;
}
.curzoomin {
    cursor:zoom-in;
}


.draggable {
    cursor: move; /* fallback: no `url()` support or images disabled */
    cursor: -webkit-grab; /* Chrome 1-21, Safari 4+ */
    cursor: -moz-grab; /* Firefox 1.5-26 */
    cursor: grab; /* W3C standards syntax, should come least */
}

.draggable:active {
    cursor: -webkit-grabbing;
    cursor: -moz-grabbing;
    cursor: grabbing;
}




/* CUSTOM LIGHTBOX START */
.modal-lb {
    display: none;
    position: fixed;
    z-index: 1;
    padding-top: 100px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: black;
}

/* Modal Content */
.modal-content-lb {
    position: relative;
    background-color: #fefefe;
    margin: auto;
    padding: 0;
    width: 90%;
    max-width: 1200px;
}

/* The Close Button */
.close-lb {
    color: white;
    position: absolute;
    top: 10px;
    right: 25px;
    font-size: 35px;
    font-weight: bold;
}

    .close-lb:hover,
    .close-lb:focus {
        color: #999;
        text-decoration: none;
        cursor: pointer;
    }

.myLightbox {
    display: none;
}

.cursor-lb {
    cursor: pointer
}


.caption-container-lb {
    text-align: center;
    background-color: black;
    padding: 2px 16px;
    color: white;
}

.demo-lb {
    opacity: 0.6;
}

    .active-lb,
    .demo-lb:hover {
        opacity: 1;
    }

img.hover-shadow {
    transition: 0.3s
}

.hover-shadow:hover {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)
}



.hover-underline:hover {
    text-decoration: underline;
    cursor:pointer;
}

/* HOVER BACKGROUNDS */

.hover_bgGray05:hover {
    background: rgb(0 0 0 / 0.05);
}

.hover_bgGray10:hover {
    background: rgba(0, 0, 0, 0.1);
}



/* SHAPES */
.circle10 {
    border-radius:10px;
}
.circle15 {
    border-radius:15px;
}



.btn-wizard-default {
    color: #ffffff;
    background-color: #418BCA;
    border-color: #357ebd;
}

/* Text Helpers */

.a-white > a {
    color: #eeeeee;
    text-decoration: none;
}

    .a-white > a:hover {
        color: #ffffff;
        font-weight: 600;
        text-decoration: none;
    }


/* CLOSE X BUTTONS */

.windows_close_button {
    color: red;
    font-size: 2em;
    float: right;
    background: white;
    margin-top: -3px;
    border-radius: 3px;
    width: 27px;
    height: 25px;
}

.popup_close_button {
    color: white;
    font-size: 1.5em;
    float: right;
    background: darkred;
    margin-top: 3px;
    border-radius: 3px;
    width: 25px;
    height: 27px;
    padding-left: 5px;
    cursor: pointer;
    transform: scaleY(0.8);
}

.popup_close_button:hover {
    background: red;
}



.customers_search_form input[type=text] {
    width: 290px;
}



/* TOOLTIP */
.custom-tooltip .tooltip-inner {
    background-color: #007bff;
    color: #fff;
    font-size: 0.875rem;
    border-radius: 4px;
}




/* =========================
   Appointments Calendar 
   ========================= */
.samcal-noscroll {
    overflow: hidden;
}



.samcal {
    border: 1px solid #e3e6ef;
    border-radius: 6px;
    background: #fff;
    overflow: hidden;
}

.samcal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    border-bottom: 1px solid #e3e6ef;
    background: #f7f8fb;
}

.samcal-title {
    font-weight: 700;
    font-size: 16px;
}

.samcal-actions .btn {
    margin-left: 6px;
}

.samcal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
}

.samcal-dow {
    font-weight: 700;
    font-size: 12px;
    padding: 8px;
    text-align: center;
    border-bottom: 1px solid #e3e6ef;
    background: #fbfcff;
}

.samcal-cell {
    min-height: 92px;
    border-right: 1px solid #eef0f6;
    border-bottom: 1px solid #eef0f6;
    padding: 6px;
    cursor: pointer;
    position: relative;
}

    .samcal-cell:nth-child(7n) {
        border-right: 0;
    }


    .samcal-cell.samcal-disabled {
        cursor: not-allowed;
        opacity: 0.5;
    }



.samcal-daynum {
    font-size: 12px;
    font-weight: 700;
    opacity: .9;
}

.samcal-out {
    background: #fafafa;
    color: #888;
}

.samcal-today {
    outline: 2px solid #337ab7;
    outline-offset: -2px;
    background: #f4f9ff;
}

.samcal-badge {
    display: inline-block;
    margin-top: 6px;
    padding: 2px 6px;
    font-size: 12px;
    border-radius: 10px;
    background: #337ab7;
    color: #fff;
}

.samcal-list {
    margin-top: 10px;
    border: 1px solid #e3e6ef;
    border-radius: 6px;
    overflow: hidden;
}

.samcal-list-header {
    padding: 8px 10px;
    background: #f7f8fb;
    border-bottom: 1px solid #e3e6ef;
    font-weight: 700;
}

.samcal-list-body {
    max-height: 420px;
    overflow: auto;
}

.samcal-item {
    padding: 10px;
    border-bottom: 1px solid #eef0f6;
}

    .samcal-item:last-child {
        border-bottom: 0;
    }

    .samcal-item .line1 {
        font-weight: 700;
    }

    .samcal-item .line2 {
        margin-top: 4px;
        font-size: 12px;
        color: #666;
    }

.samcal-past {
    opacity: 0.40;
    background:#ffe9df;
}

    .samcal-past:hover {
        opacity: 1;
    }



/* =========================
   Appointments Day Modal
   ========================= */
.samcal-backdrop {
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0,0,0,.45);
    z-index: 9998;
    display: none;
}

.samcal-modal {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 92%;
    max-width: 780px;
    max-height: 78vh;
    background: #fff;
    z-index: 9999;
    display: none;
    /* shadow */
    box-shadow: 0 16px 60px rgba(0,0,0,.35);
    border: 1px solid rgba(0,0,0,.08);
}

.samcal-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    background: #f7f8fb;
    border-bottom: 1px solid #e3e6ef;
}

.samcal-modal-title {
    font-weight: 700;
    font-size: 14px;
}

.samcal-modal-body {
    padding: 8px 10px; 
    overflow: auto;
    max-height: calc(78vh - 46px);
}


.samcal-close {
    border: 0;
    background: transparent;
    font-size: 22px;
    line-height: 18px;
    padding: 2px 6px;
    cursor: pointer;
    color: #333;
}

    .samcal-close:hover {
        opacity: .75;
    }

.samcal-modal .samcal-item {
    border: 1px solid #eef0f6;
    border-radius: 8px;
    margin-bottom: 10px;
    padding: 10px;
}

    .samcal-modal .samcal-item:hover {
        background: #f8fbff;
    }



/* =========================
   Day Scheduler (30-min)
   ========================= */

.samday {
    display: grid;
    grid-template-columns: 90px 1fr;
    border: 1px solid #e3e6ef;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
}

.samday-col-time {
    background: #fbfcff;
    border-right: 1px solid #e3e6ef;
}

.samday-col-body {
    position: relative;
}

.samday-row {
    display: contents;
}

.samday-timecell {
    height: 34px;
    padding: 6px 8px;
    font-size: 12px;
    color: #666;
    border-bottom: 1px solid #eef0f6;
}

.samday-slot {
    height: 34px;
    border-bottom: 1px solid #eef0f6;
    padding: 3px 8px;
    cursor: pointer;
}

    .samday-slot:hover {
        background: #f6fbff;
    }
        .samday-slot:hover:after {
            content: "+";
            float: right;
            font-weight: 700;
            opacity: .35;
            margin-top: 4px;
        }


    .samday-slot.is-halfhour {
        background: #fcfdff;
    }

.samday-timecell.is-halfhour {
    opacity: .55;
}

.samday-slot-occupied {
    cursor: default;
    background: #fafcff;
}
    .samday-slot-occupied:hover:after {
        content: "";
    }



.samday-appt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 8px;
    border: 1px solid rgba(51,122,183,.25);
    background: rgba(51,122,183,.08);
    cursor: pointer;
}

    .samday-appt .title {
        font-weight: 700;
        font-size: 12px;
    }

    .samday-appt .meta {
        font-size: 11px;
        color: #555;
        margin-top: 2px;
    }

    .samday-appt .actions {
        white-space: nowrap;
    }

.samday-appt-btn {
    margin-left: 6px;
}

.samday-form {
    border: 1px solid #e3e6ef;
    border-radius: 10px;
    padding: 10px;
    background: #fbfcff;
    margin-top: 10px;
}


/* Force appointment cards to fit inside 30-min slots */
.samday-slot {
    overflow: hidden; /* prevents spill into next slot */
    display: flex;
    align-items: center; /* vertically center appt card */
}

.samday-appt {
    width: 100%;
    height: 28px; /* fits inside 34px slot */
    padding: 4px 6px;
    border-radius: 6px;
}

    .samday-appt .meta {
        display: none; /* hide multi-line meta in grid */
    }

    .samday-appt .title {
        white-space: nowrap; /* single line */
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .samday-appt .actions .btn {
        padding: 2px 6px; /* compact buttons */
        font-size: 11px;
        line-height: 1.2;
    }

/* Inline form inside a slot: expand slot height and allow content */
.samday-slot.is-editing {
    height: auto; /* override fixed 34px */
    min-height: 120px; /* room for inputs + buttons */
    overflow: visible; /* show full form */
    background: #eee;
    padding: 8px;
}

    /* When editing, don't force the appointment compact height */
    .samday-slot.is-editing .samday-appt {
        height: auto;
        padding: 0;
        border: 0;
        background: transparent;
        box-shadow: none;
    }

    /* Prevent inputs from blowing out the slot width */
    .samday-slot.is-editing .form-control {
        width: 100%;
    }

    .samday-slot.is-editing:hover:after {
        content: "";
    }

.samday-slot.samday-slot-disabled:hover {
    background: #fafafa;
    cursor: not-allowed;
}

    .samday-slot.samday-slot-disabled:hover:after {
        content: "";
    }

.samcal-cell.samcal-disabled:hover {
    background: #fafafa;
    cursor: not-allowed;
}

    .samcal-cell.samcal-disabled:hover:after {
        content: "";
    }



/* FOOTER */
.footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    line-height: 25px;
    background-color: #111;
    color: white;
    padding: 5px 10px;
    box-shadow: 0px -3px 7px rgba(0,0,0,0.5);
    border-top: 1px solid #111;
}

    .footer a {
        color: #ccc;
        text-decoration: none;
    }

        .footer a:hover {
            color: #fff;
            text-decoration: none;
        }



/* PROGRESS BAR */
.progressbar {
    position: fixed;
    width: 200px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#progressbarlabel {
    font-size: 1em;
    text-align: center;
}




.ui-widget-header {
   /*background: #5994ff !important;*/
}
.ui-corner-all {
    border-radius:0 !important;
}

#centerpoint {
    top: 50%;
    left: 50%;
    position: relative;
}

.centered {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.addcrmtextfield {
    height: 200px !important;
    width:100%;
}


/* LINKS */
.activity_id_link {
    text-align: center;
    /*font-size: @ViewBag.fontSize;*/
    cursor: pointer;
    color: dodgerblue;
}



/* LABELS */
label {
    font-weight: normal !important;
}





.order_stats_bar_total {
    position: absolute;
    margin-top: -20px;
}


.order_stats_bar_count {
    position: absolute;
    display: none;
    margin-top: -20px;
    background: lightyellow;
    padding: 1px 10px;
    border: 1px solid #468cba;
    border-radius: 3px;
    box-shadow: 5px 5px 5px rgba(0,0,0,0.5);
}

.vertical_bar_graph {
    padding: 25px 5px 10px 5px;
    height: 310px;
    font-size: 0.8em;
    background: rgb(222,234,247);
    background: linear-gradient(180deg, rgba(222,234,247,1) 0%, rgba(238,238,238,1) 50%, rgba(255,255,255,1) 100%);
}










#holiday-row .switch input:checked + .slider {
    background-color: #d9534f; /* red-ish when armed */
}

#holiday-row .slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}

#holiday-row .switch input:checked + .slider:before {
    transform: translateX(20px);
}




/* CONTAINERS */

.graph_list_container_330 {
    position: absolute;
    display: none;
    background: white;
    margin-top: 10px;
    margin-left: 10px;
    z-index: 1;
    height: 245px;
    width: 330px;
    overflow-y: auto;
    opacity: 0.95;
    box-shadow:7px 7px 7px rgba(0,0,0,0.5);
}

.form_container {
    background: white;
    border-radius: 7px;
    box-shadow: 3px 3px 10px rgba(0,0,0,0.2);
    max-width: 80%;
}

.login_container, .reginfo_container, .forgot_password_container, .reset_password_container, .forgot_password_confirmation_container {
    background: white;
    border-radius: 7px;
    box-shadow: 3px 3px 10px rgba(0,0,0,0.2);
    max-width: 400px;
    margin: 10px;
    padding: 25px;
    margin: 0 auto;
}

.reginfo_container {
    text-align: center;
}

.signupinfo_container {
    background: white;
    border-radius: 7px;
    box-shadow: 3px 3px 10px rgba(0,0,0,0.2);
    max-width: 400px;
    margin: 10px;
    padding: 25px;
    margin: 0 auto;
}


.report_container {
    background: white;
    border-radius: 7px;
    box-shadow: 3px 3px 10px rgba(0,0,0,0.2);
    overflow-x: auto;
}


.info_container {
    background: white;
    margin-top: 100px;
    border-radius: 7px;
    padding: 10px;
    box-shadow: 3px 3px 10px rgba(0,0,0,0.2);
    max-width: 500px;
    text-align: center;
    font-size: 1.5em;
}

    .info_container button {
        position: relative;
        left: 200px;
        width: 100px;
        margin-bottom: 50px;
    }

.top_search_form {
    display: flex;
    margin-top: 23px;
}

    .top_search_form li {
        margin-left: 5px;
    }

/* NAVBAR */
.navbar_container {
    background: rgba(23,24,47,0.85);
    box-shadow: 4px 4px 8px rgba(37,38,64,0.5);
    border-radius: 0px;
}
.navbar-collapse {
    padding-left: 30px;
}
.navbar-brand {
    padding: 5px;
}
.navbar-toggle {
    margin-top: 0;
    margin-bottom: 0;
}


/* PAGINATION CONTAINER (shared by activities, opportunities, etc.) */
.pagination-container {
    padding:10px;
    text-align: center;
}

/* PAGINATION BUTTON STYLES */
.breadcrumb-page {
    padding: 4px 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #f9f9f9;
    color: #007bff;
}

    .breadcrumb-page:hover {
        background: #e6f2ff;
        color:darkblue;
        cursor: pointer;
    }

/* ACTIVE PAGE HIGHLIGHT */
.active-breadcrumb {
    background-color: #007bff;
    color: white;
    font-weight: bold;
}


.customer_lookup_container,
.AddActivity_Container,
.AddOpportunity_Container,
.edit_manufacturers_container,
.library-container,
.add_crm_contact_container,
.editcrmcontact_container,
.addcrmactivitynote_container,
.editticket_container {
    background: white;
    border-radius: 5px;
}


.drag_container {
    height: 200px;
    background-color: gray;
    background-image: repeating-linear-gradient(45deg, white 25%, transparent 25%, transparent 75%, white 75%, white), repeating-linear-gradient(45deg, white 25%, #ddd 25%, #ddd 75%, white 75%, white);
    background-position: 0 0, 5px 5px;
    background-size: 10px 10px;
    box-shadow: inset 3px 3px 5px rgba(0,0,0,0.8);
}
.drag_container_leave {
    background-image: repeating-linear-gradient(45deg, white 25%, transparent 25%, transparent 75%, white 75%, white), repeating-linear-gradient(45deg, white 25%, #ddd 25%, #ddd 75%, white 75%, white);
}
.drag_container_over {
    background-image: repeating-linear-gradient(45deg, white 25%, transparent 25%, transparent 75%, white 75%, white), repeating-linear-gradient(45deg, white 25%, #CAD1E5 25%, #CAD1E5 75%, white 75%, white);
}


.dragdropmessage {
    position: relative;
    left: 10px;
    bottom: 10px;
}

.dragdropcontent {
    position: absolute;
    bottom: 0;
    left: 0;
    border-radius:3px;
    padding:5px;
    text-align:center;
    color:cornflowerblue;
    font-size:1.5em;
}


.requiredStar {
    font-size: 0.5em;
    vertical-align: super;
    color: darkred;
}

.popImage {
    position: absolute;
    left:40%;
    top:50%;
    width:400px;
}

.copy:hover {
    cursor:grab;
}

.copy:active {
    cursor: grabbing;
}


/* GRADIENTS */
.lg9f10e {
    background: linear-gradient(0deg, rgba(255,255,255,1) 90%, rgba(238,238,238,1) 100%);
}









/* 
   ██████   █████  ██████ ██   ██  ██████  ██████   ██████  ██    ██ ███    ██ ██████  ███████
   ██   ██ ██   ██ ██     ██  ██  ██       ██   ██ ██    ██ ██    ██ ████   ██ ██   ██ ██
   ██████  ███████ ██     █████   ██   ███ ██████  ██    ██ ██    ██ ██ ██  ██ ██   ██ ███████
   ██   ██ ██   ██ ██     ██  ██  ██    ██ ██   ██ ██    ██ ██    ██ ██  ██ ██ ██   ██      ██
   ██████  ██   ██ ██████ ██   ██  ██████  ██   ██  ██████   ██████  ██   ████ ██████  ███████
*/

.bgGray05 { /* very light gray (5% gray) */
    background: rgb(95%,95%,95%) !important;
}

.bgGray10 { /* light gray (10% gray) */
    background: rgb(90%,90%,90%) !important;
}

.bgGray20 { /* light-medium gray */
    background: rgb(80%,80%,80%) !important;
}

.bgGray30 { /* medium gray */
    background: rgb(70%,70%,70%) !important;
}

.bgGray40 { /* darker gray */
    background: rgb(60%,60%,60%) !important;
}

.bgGray50 { /* 50% gray background */
    background: rgb(50%,50%,50%) !important;
}

.bgWhite { /* pure white background */
    background: white !important;
}

.bgDragOver { /* highlight when dragging element over drop zone */
    background: #eee;
}



.bgDarkKhaki { /* pastel khaki tone */
    background-color: #E6DFA8;
}

.bgRoyalBlue { /* strong royal blue */
    background: royalblue;
}

.bgDarkBlue { /* dark navy-blue tone */
    background: #333555;
}



/* Keep these group of color as pack. They are also used in charts*/
.bgPrimary {
    background-color: #89B1DE;
}

.bgSuccess {
    background-color: #79CDA7;
}

.bgWarning {
    background-color: #E6BE78;
}

.bgDanger {
    background-color: #E18787;
}

.bgPink {
    background-color: #E3B1C5;
}

.bgSage {
    background-color: #B5C48F;
}

.bgGray {
    background-color: #C8C8C8;
}

.bgPurple {
    background-color: #C1B0E3;
}





.bgPrimaryDarker { /* darker pastel blue variant */
    background-color: #AFCFEA;
}

.bgPrimary.active { /* active primary state (ProForce brand blue) */
    background: #428bca !important;
    text-shadow: 1px 1px black;
}



.bgPostit { /* post-it note yellow */
    background: #FCF3CF;
}

.bgPostitLight { /* lighter post-it note tone */
    background: #f6f1dc;
}

.bgLightSage { /* very light sage background */
    background: #e1f1e8;
}

.bgPale { /* pale yellow background */
    background: #ffffee;
}

.bgNotepad { /* notepad paper style background */
    background: #fffbee !important;
}

.bgBisque { /* pastel bisque / warm beige */
    background-color: #F7DCC5;
}

.bgExpired { /* expired state (muted red) */
    background-color: #F4B6B6;
}

.bgLightRed { /* bright alert red */
    background: #fe0000;
}

.bgLightPink { /* very light pink highlight */
    background: #ffebeb;
}

.bgLightBlue { /* soft pastel light blue */
    background-color: #DEEAF7;
}

.bgChecker { /* checker pattern (drag/drop or grid visual aid) */
    background: repeating-conic-gradient(rgba(0,0,0,0.2) 0% 25%, transparent 0% 50%) 50% / 10px 10px !important;
}

.bgChecker5 { /* smaller checker grid pattern */
    background: repeating-conic-gradient(#eee 0% 25%, transparent 0% 50%) 50% / 5px 5px !important
}

.bgSmChecker { /* subtle small checker placeholder background */
    background: #eee !important;
}





/* POSITION */
.posfixedfull {
    position: fixed;
    top: 73px;
    left: 0;
    width: 100%;
    height: 90%;
    overflow-y:scroll;
}

.posfixedcenter {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 400px;
}

.posfixedcentermax720px {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 720px;
    height: 720px;
    overflow:auto;
}

.posabscenter {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 400px;
}

.posfixedcentermobile {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 325px;
}

.posfixedcenter350 {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 350px;
}

.emailfooter {
    font-family: Franklin Gothic Medium;
}


.absolute {
    position: absolute;
}

.relative {
    position: relative;
}


.right10 {
    right: 10px;
}


/* SCROLLS */
.xscroll50px {
    height: 50px;
    overflow-y: hidden;
    overflow-x: scroll;
}
.xscroll60px {
    height: 60px;
    overflow-y: hidden;
    overflow-x: scroll;
}
.yscroll300px {
    max-height: 300px;
    overflow-x: hidden;
    overflow-y: scroll;
}
.yscroll250px {
    max-height: 250px;
    overflow-x: hidden;
    overflow-y: scroll;
}
.yscroll200px {
    max-height: 200px;
    overflow-x: hidden;
    overflow-y: scroll;
}
.yscroll150px {
    max-height: 150px;
    overflow-x: hidden;
    overflow-y: scroll;
}
.yscroll150pxAuto {
    max-height: 150px;
    overflow-x: hidden;
    overflow-y: auto;
}
.yscroll100px {
    max-height: 100px;
    overflow-x: hidden;
    overflow-y: scroll;
}





/* MESSAGES */
.messageoverinput340 {
    position: absolute;
    margin-left: 202px;
    margin-top: 33px;
    padding: 5px 10px 2px;
}


/* DISPLAYS */
.displaynone {
    display:none !important;
}


/* COLORS */
.tx-white {
    color: white;
}
.tx-gray {
    color: gray;
}
.tx-red {
    color: #d31a1a;
}
.tx-blue {
    color: #468cba;
}
.tx-btn-primary {
    color: #48597d;
}
    .tx-btn-primary:hover {
        color: #286090;
    }
.tx-dark-blue {
    color: #333555;
}
.tx-orange {
    color: #d04423;
}
.tx-green {
    color: darkgreen;
}
.tx-primary {
    color: #337ab7;
}
.primary_text {
    color: #337ab7 !important;
}
.warning_text {
    color: orange !important;
}
.white_text, .tx-white {
    color: white;
}
.dark_text, .tx-black {
    color: black;
}
.tx-lightorange {
    color: #ff8a6e;
}
.tx-purple {
    color: #4d148c;
}
.tx-royalblue {
    color: royalblue;
}
.tx-whitesmoke {
    color: whitesmoke;
}
.tx-Postit {
    color: #CFCF00;
}

/* Table colors */
.tr-notstarted {
    background-color: #fff1f2; /* light red */
}
.tr-working {
    background-color: #e9f6fd; /* light blue */
}
.tr-onhold {
    background-color: #fff7e6; /* pastel orange */
}

.tr-resolved {
    background-color: #e6f4ea; /* pastel green */
}





/* HEADER CLASSES */
.gray_header {
    background: gray !important;
    color: white;
    padding: 5px;
    text-align: center;
}

.darkgray_header {
    background: #444;
    color: white;
    padding: 5px;
    text-align: center;
}

.primary_header {
    color: #ffffff;
    background: #428bca !important;
    border-color: #357ebd;
    padding: 5px;
    text-align: center;
}

.postit_header {
    color: #000;
    background: #fcf3cfee !important;
    border-color: #357ebd;
    padding: 5px;
    text-align: center;
}

.postit_header {
    color: #000;
    background: #fcf3cfee !important;
    border-color: #357ebd;
    padding: 5px;
    text-align: center;
}

.block_header {
    font-size: 1.2em;
    background: #555;
    color: white;
    text-align: center;
    font-weight: normal;
}

.frame_header {
    border: 1px solid gray;
    text-align: center;
    font-weight: normal;
}






/* FANCY ELEMENTS */
.fancycard {
    box-shadow: 2px 2px 3px rgba(0,0,0,0.5);
}

.fancycardtop {
    background: #eee;
    text-align: center;
}

.fancycardbottom {
    background: #fff;
    text-align: center;
}

/* ELEMENT SIZE BY PERCENT */
.per20 {
    display: inline-block;
    width: 20%;
}

.per25 {
    display: inline-block;
    width: 25%;
}

.per40 {
    display: inline-block;
    width: 40%;
}

.per45 {
    display: inline-block;
    width: 45%;
}

.per48 {
    display: inline-block;
    width: 48%;
}

.per50 {
    display: inline-block;
    width: 50%;
}

.per60 {
    display: inline-block;
    width: 60%;
}

.per75 {
    display: inline-block;
    width: 75%;
}

.per80 {
    display: inline-block;
    width: 80%;
}

/* CURSOR CLASSES */

.pointer {
    cursor: pointer;
}


/* GRAPH BARS */
.bar20px {
    display: inline-block;
    width: 20px;
}
.bar30px {
    display: inline-block;
    width: 30px;
}
.bar40px {
    display: inline-block;
    width: 40px;
}
.bar50px {
    display: inline-block;
    width: 50px;
}



/* ORIENTATION */
.text-ver {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    line-height:10px;
}



/* WIDTHS  */
.width330px {
    width: 330px;
}

/* HEIGHTS */
.height310px {
    height: 310px;
}







/* 
   ██ ███    ██ ██      ██ ███    ██ ███████     ██████  ██       ██████   ██████ ██   ██ ███████
   ██ ████   ██ ██      ██ ████   ██ ██          ██   ██ ██      ██    ██ ██      ██  ██  ██
   ██ ██ ██  ██ ██      ██ ██ ██  ██ █████       ██████  ██      ██    ██ ██      █████   ███████
   ██ ██  ██ ██ ██      ██ ██  ██ ██ ██          ██   ██ ██      ██    ██ ██      ██  ██       ██
   ██ ██   ████ ███████ ██ ██   ████ ███████     ██████  ███████  ██████   ██████ ██   ██ ███████
*/

/* ██████ BASE BLOCK BEHAVIOR (DRY) ██████ */

[class^="block"],
[class*=" block"] {
    display: inline-block;
}


/* ██████ FIXED WIDTH BLOCKS ██████ */

.block20px {
    width: 20px;
}

.block25px {
    width: 25px;
}

.block30px {
    width: 30px;
}

.block35px {
    width: 35px;
}

.block40px {
    width: 40px;
}

.block45px {
    width: 45px;
}

.block50px {
    width: 50px;
}

.block55px {
    width: 55px;
}

.block60px {
    width: 60px;
}

.block65px {
    width: 65px;
}

.block70px {
    width: 70px;
}

.block75px {
    width: 75px;
}

.block80px {
    width: 80px;
}

.block100px {
    width: 100px;
}

.block125px {
    width: 125px;
}

.block130px {
    width: 130px;
}

.block140px {
    width: 140px;
}

.block150px {
    width: 150px;
}

.block160px {
    width: 160px;
}

.block170px {
    width: 170px;
}

.block175px {
    width: 175px;
}

.block180px {
    width: 180px;
}

.block190px {
    width: 190px;
}

.block200px {
    width: 200px;
}

.block225px {
    width: 225px !important;
}

.block250px {
    width: 250px;
}

.block275px {
    width: 275px;
}

.block300px {
    width: 300px;
}



/* ██████ STANDARDIZED LARGE BLOCKS (match block350px behavior) ██████ */

.block325px {
    width: 100%;
    max-width: 325px;
}

.block340px {
    width: 100%;
    max-width: 340px;
}

.block350px {
    width: 100%;
    max-width: 350px;
}

.block400px {
    width: 100%;
    max-width: 400px;
}

.block600px {
    width: 100%;
    max-width: 600px;
}



/* ██████ MIN WIDTH BLOCKS ██████ */

.blockm40px {
    min-width: 40px;
}

.blockm50px {
    min-width: 50px;
}

.blockm75px {
    min-width: 75px;
}

.blockm100px {
    min-width: 100px;
}

.blockm175px {
    min-width: 175px;
}

.blockm200px {
    min-width: 200px;
}

.blockm300px {
    min-width: 300px;
}

.blockm350px {
    min-width: 350px;
}

.blockm400px {
    min-width: 400px;
}

.blockm600px {
    min-width: 600px;
}



/* ██████ HEIGHT ONLY ██████ */

.blockh400px {
    height: 400px;
}


/* ██████ MIN WIDTH + MIN HEIGHT ██████ */

.block320px260px {
    min-width: 320px;
    min-height: 260px;
}

.block325px260px {
    min-width: 325px;
    min-height: 260px;
}

.block325px300px {
    min-width: 325px;
    min-height: 300px;
}

.block325px325px {
    min-width: 325px;
    min-height: 325px;
}

.block330px260px {
    min-width: 330px;
    min-height: 260px;
}

.block350px260px {
    min-width: 350px;
    min-height: 260px;
}

.block400px300px {
    min-width: 400px;
    min-height: 300px;
}


/* ██████ FIXED WIDTH + HEIGHT (STANDARDIZED) ██████ */

.block350px300px {
    width: 100%;
    max-width: 350px;
    height: 300px;
}

.block350px310px {
    width: 100%;
    max-width: 350px;
    height: 310px;
}

.block350px700px {
    width: 100%;
    max-width: 350px;
    height: 700px;
}



/* ██████ MAX WIDTH / RESPONSIVE BLOCKS ██████ */

.blockMax600px {
    width: 100%;
    max-width: 600px;
}

.blockMax700px {
    width: 100%;
    max-width: 700px;
}








/*This is for datepicker*/
.block282px {
    display: inline-block;
    width: 282px;
}
.block282px {
    display: inline-block;
    width: 282px;
}







/* SWITCH  BUTTON*/
.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
}

    .switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
}

    .slider:before {
        position: absolute;
        content: "";
        height: 23px;
        width: 23px;
        left: 0px;
        bottom: 0px;
        background-color: white;
        -webkit-transition: .4s;
        transition: .4s;
    }

input:checked + .slider {
    background-color: #2196F3;
}

input:focus + .slider {
    box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
    border-radius: 34px;
}

    .slider.round:before {
        border-radius: 50%;
    }








/* PRODUCT BOXES*/
.pb300400 {
    display: inline-block;
    width: 300px;
    height: 400px;
    vertical-align:top;
    box-shadow: 3px 3px 7px rgba(0,0,0,0.5);
    border-radius: 5px;
    margin:10px;
    padding:10px;
}




/* HOVER POPUPS */
.hoverdanger {
    position: absolute;
    box-shadow: 3px 3px 3px rgb(0 0 0 / 50%);
    color: #b94a48;
    background-color: #f2dede;
    border-color: #eed3d7;
    padding:10px;
    width:120px;
    margin-left:-60px;
    margin-right:10px;
    z-index:999;
}


/* FOLDER FILE SYSTEM */

#folder {
    max-width:1200px;
    position: absolute;
    z-index: 9;
    background-color: #f1f1f1;
    text-align: center;
    border: 1px solid #d3d3d3;
}

#folderheader {
    padding: 10px;
    cursor: move;
    z-index: 10;
    background-color: #2196F3;
    color: #fff;
    box-shadow: 8px 8px 15px rgba(0,0,0,0.5);
    min-width: 150px;
    min-height: 40px;
}

#folderbody {
    border-radius: 0 0 3px 3px;
    border: 1px solid gray;
    padding: 5px;
    box-shadow: 8px 8px 15px rgba(0,0,0,0.5);
    min-height: 150px;
    min-width: 150px;
}


/* FOLDERS */

.folderbody {
    display: inline-block;
    padding: 10px;
    cursor:pointer;
}

.folderbody:hover {
    box-shadow:1px 1px rgba(0,0,0,0.05);
}

.folder_color {
    font-size: 6em;
    color: #f5e8b3;
}

.parent_folder_color {
    font-size: 6em;
    color: #468cba;
}




/* FILES */
.filebody {
    display: inline-block;
    padding: 10px;
}

.filebody:hover {
    background:rgba(0,0,0,0.1);
}

.file, .folder {
    display: inline-block;
    width: 90px;
    height: 110px;
    margin: 35px;
    position: relative;
    text-align: center;
    cursor: pointer;
    z-index:1;
}


.file_folder_label {
    overflow-wrap: break-word;
    overflow-wrap: break-word;
    font-size: 12px;
    line-height: 14px;
}



/* DRAG DROP */

.ui_file {
    border: 1px solid white;
}

    .ui_file.ui_over {
        color: #428bca;
        border:1px solid #468cba;

    }
    .ui_file.ui_dropped {
        color: #428bca;
        border:1px solid #468cba;

    }
    .ui_file.ui_not_allowed {
        color: red;
        border:1px solid red;

    }


/* BUTTON CLASSES */
.bsBtnGroup {
    text-align: center;
    border-style: solid;
    border-width: 1px;
    border-top-color: #bbb;
    border-right-color: #346fa1;
    border-bottom-color: #1a3750;
    border-left-color: #2e618d;
}

    .bsBtnGroup:hover {
        background: #fff;
    }

.bsBtnGroupActive {
    background: #428bca;
    color: white;
}

.block_btn {
    display: block;
    width: 100%;
    border-left-color: #aaa;
    border-top-color: #ccc;
    border-right-color: #999;
    border-bottom-color: #777;
    background: #ccc;
    cursor: pointer;
    text-align: left;
}

    .block_btn:hover {
        background: #eccccc;
        color: black;
    }


.adminBtnGroup {
    text-align: center;
    background: #fff;
    border-style: solid;
    border-width: 1px;
    border-top-color: #bbb;
    border-right-color: #346fa1;
    border-bottom-color: #1a3750;
    border-left-color: #2e618d;
}

    .adminBtnGroup:hover {
        background: #ddd;
    }

.btn_square{
    cursor:pointer; 
    background:white; 
    width:175px; 
    height:175px; 
    padding:5px; 
    margin:5px; 
    box-shadow:3px 3px 8px rgba(0,0,0,0.5); 
    border-radius:5px;

}

.btn_square:hover {
    background:#eee;
    box-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}

.btn_sqr150{
    cursor:pointer; 
    background:white; 
    width:150px; 
    height:150px; 
    padding:5px; 
    margin:5px; 
    box-shadow:3px 3px 8px rgba(0,0,0,0.5); 
    border-radius:5px;
}

.btn_sqr150:hover {
    background:#fffeff;
    box-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}


/* GLYPHICONS */
.glyphiconplus {
    background: #428bca;
    color: white;
    padding: 5px 6px 8px 8px;
    border-radius: 5px;
    font-size: 0.8em;
}

.glyphiconremove {
    float: right;
    background: red;
    padding: 3px 4px 5px;
    border-radius: 4px;
    cursor: pointer;
}

.bellicon {
    font-size: 2em;
    color: dodgerblue;
    cursor: pointer;
}


/* BI ICONS*/
.biclockwise {
    cursor: pointer;
    margin-left: 10px;
    color: dodgerblue;
    font-size: 1.5em;
}
.biclockwise:hover {
    color: darkred;
}
.icon_pencil {
    color: orange;
    font-size: 1.5em;
    margin-left: 10px;
    cursor:pointer;
}
.icon_trash_gray {
    color: darkgray;
    font-size: 1.5em;
    margin-left: 10px;
    cursor: pointer;
}
.icon_trash_red {
    color: red;
    font-size: 1.5em;
    margin-left: 10px;
    cursor: pointer;
}
.icon_x_square_fill {
    font-size: 1.2em;
    color: red;
    cursor: pointer;
    float: right;
    text-shadow: 1px 1px 2px black;
}
.icon_x_square_fill:hover {
    text-shadow: 0.5px 0.5px 0px black;
}



/* AWESOMEFONTS */
.truck_icon {
    font-size: 1.3em;
    color: #468cba;
}

.upload_icon {
    font-size:1.5em;
    color: #468cba;
}

.awesomeban {
    font-size:1.3em;
    color: darkred;
}

.history_icon {
    background: orange !important;
    color: white;
    width: 25px !important;
    height: 25px !important;
    padding: 3px !important;
    border-radius: 2px !important;
    cursor: pointer !important;
}

.history_icon:hover {
    color:red;
}

.active_trash {
    cursor: pointer;
    margin-left: 10px;
    color: darkred;
    font-size: 1.5em;
}

.inactive_trash {
    cursor: pointer;
    margin-left: 10px;
    color: darkgray;
    font-size: 1.5em;
}

.awesomepoweroff {
    cursor: pointer;
    margin-left: 10px;
    color: darkred;
    font-size: 1.5em;
}

.envelope_icon {
    cursor: pointer;
    margin-left: 10px;
    color: #468cba;
    font-size: 1.8em;
}

.awesomeplane {
    cursor: pointer;
    margin-left: 10px;
    color: #468cba;
    font-size: 1.2em;
}

.awesomedisabled {
    color: #813f3f !important;
    opacity:0.5;
    cursor:not-allowed !important;
}

.awesomefile {
    cursor: pointer;
    margin-left: 10px;
    font-size: 1.5em;
}

.unlock_icon {
    cursor:pointer; 
    color:darkgreen;
    font-size:1.5em;
    margin-left:10px;
}

.lock_icon {
    cursor:pointer; 
    color:darkred;
    font-size:1.5em;
    margin-left:10px;
}
.print_icon {
    cursor:pointer; 
    color:darkorange;
    font-size:1.5em;
    margin-left:10px;
}

.pencil_square_icon {
    cursor:pointer; 
    color:darkorange;
    font-size:1.5em;
    margin-left:10px;
}

.eye_icon {
    color: dodgerblue;
    font-size: 1.6em;
    vertical-align: middle;
    margin-left: 10px;
    cursor:pointer;
    border-radius:12px;
}

.clipboard_icon {
    color: dodgerblue;
    font-size: 1.6em;
    vertical-align: middle;
    margin-left: 10px;
    cursor:pointer;
    background:white;
    border-radius:12px;
}

.info_circle_fill {
    color: dodgerblue;
    font-size: 1.6em;
    vertical-align: middle;
    cursor:pointer;
}

.info_circle {
    color: dodgerblue;
    font-size: 1.6em;
    vertical-align: middle;
    cursor: pointer;
}

.awesomeetsy {
    color: white;
    border-radius: 25px;
    background: orange;
    padding: 2px;
    font-size: 1.3em;
}


.info_icon:hover::after {
    content: "ITEM NUMBER: A new gunspecs item will be added if it doesn\'t exist. \A MODEL SERIES: Match the Model Series if it exists. \A DROPDOWNS: Use custom store configuration to add new dropdown item. \A IMPORTANT: Do no use white spaces before or after the value for item number and model series to prevent duplication.";
    position: absolute;
    display: block;
    background: #FCF3CF;
    padding: 10px;
    width:350px;
    box-shadow: 3px 3px 7px rgba(0,0,0,0.5);
    white-space: pre-wrap;
}

.plus_square_fill {
    font-size:1.8em;
    margin:10px;
    color:dodgerblue;
    vertical-align: middle;
    margin-left: 10px;
    cursor:pointer;
    width:27px !important;
}

.plus_circle_fill {
    color: orange;
    font-size: 1.6em;
    vertical-align: middle;
    margin-left: 10px;
    cursor: pointer;
    background: white;
    border-radius: 12px;
}

.awesomenotes {
    color: royalblue;
    font-size: 1.6em;
    vertical-align: middle;
    margin-left: 10px;
    cursor: pointer;
    background:white;
}

.follow_up_note {
    display: inline-block;
    margin-right: 5px;
    cursor: pointer;
}

.chevron {
    font-size: 1.8em;
    margin: 10px;
    color: white;
    background: #428bca;
    vertical-align: middle;
    margin-left: 10px;
    cursor: pointer;
    padding: 5px 0 5px 0;
    border-radius: 5px;
    width: 50px !important;
}

.chevron:hover {
    background:#205e96;
}

.closex {
    float: right;
    margin-right: 8px;
    cursor: pointer;
    color: #e6f0fa; /* soft pastel white-blue */
    font-size: 1em;
    opacity: 0.9;
    line-height: 1.2;
    padding:1px 2px 2px 2px;
}

    .closex:hover {
        color: #ffffff;
        background: rgba(139, 0, 0, 1);
        opacity:1;
        border-radius: 2px;
    }

.awesomeban {
    margin-right: 5px;
    cursor: pointer;
    color: red;
    font-size: 1.4em;
    background: white;
    height: 22px;
    border-radius: 3px;
    vertical-align: middle;
}

.check_circle_icon {
    margin-right: 5px;
    cursor: pointer;
    color: darkgreen;
    font-size: 1.4em;
    background: white;
    height: 22px;
    border-radius: 3px;
    vertical-align: middle;
}

.x_circle_icon {
    margin-right: 5px;
    cursor: pointer;
    color: red;
    font-size: 1.4em;
    background: white;
    height: 22px;
    border-radius: 3px;
    vertical-align: middle;
}




/* OVERFLOWS */
.ofxauto {
    overflow-x:auto;
}



/* FONT STYLE */
.fontwn {
    font-weight: normal !important;
}


/* FONT SIZE */
.fs06 {
    font-size: 0.6em;
}
.fs07 {
    font-size: 0.7em;
}
.fs075 {
    font-size: 0.75em;
}
.fs08 {
    font-size: 0.8em;
}
.fs085 {
    font-size: 0.85em;
}
.fs10 {
    font-size: 1em;
}
.fs12 {
    font-size: 1.2em;
}
.fs1_28 {
    font-size: 1.28em;
}
.fs13 {
    font-size: 1.3em;
}
.fs14 {
    font-size: 1.4em;
}
.fs15 {
    font-size: 1.5em;
}
.fs16 {
    font-size: 1.6em;
}
.fs17 {
    font-size: 1.7em;
}
.fs18 {
    font-size: 1.8em;
}
.fs20 {
    font-size: 2em;
}
.fs23 {
    font-size: 2.3em;
}
.fs25 {
    font-size: 2.5em;
}
.fs30 {
    font-size: 3em;
}
.fs40 {
    font-size: 4em;
}
.fs60 {
    font-size: 6em;
}
.fs10px {
    font-size: 10px;
}

.fs12px {
    font-size: 12px;
}




.fws11x10 {
    transform: scale(1.1,1.0);
}
.fws12x10 {
    transform: scale(1.2,1.0);
}
.fws13x10 {
    transform: scale(1.3,1.0);
}
.fws14x10 {
    transform: scale(1.4,1.0);
}
.fws15x10 {
    transform: scale(1.5,1.0);
}








/* HEIGHTS */
.hs10 {
    height: 10px;
}
.hs15 {
    height: 15px;
}
.hs20 {
    height: 20px;
}
.min300px {
    min-height: 300px;
}



/* WIDTHS */

.wsp100 {
    width:100%;
}

.ws60 {
    width: 60px;
}
.ws65 {
    width: 65px;
}
.ws70 {
    width: 70px;
}
.ws75 {
    width: 75px;
}
.ws80 {
    width: 80px;
}
.ws85 {
    width: 85px;
}
.ws90 {
    width: 90px;
}
.ws95 {
    width: 95px;
}
.ws100 {
    width: 100px;
}
.ws110 {
    width: 110px;
}
.ws150 {
    width: 150px;
}
.ws170 {
    width: 170px;
}
.ws175 {
    width: 175px;
}
.ws250 {
    width: 250px;
}
.ws300 {
    width: 300px;
}
.ws350 {
    width: 350px;
}

.wsm100 {
    min-width: 100px;
}
.wsm150 {
    min-width: 150px;
}
.wsm175 {
    min-width: 175px;
}
.max330px {
    max-width: 330px;
}

.max350px {
    max-width: 350px;
}

.min150px {
    min-width: 150px;
}

.min200px {
    min-width: 200px;
}






/* BORDER RADIUS */
.br5 {
    border-radius: 5px;
}
.br5500 {
    border-radius:5px 5px 0 0;
}



/* MARGIN SIZE */
.ms3 { margin: 3px; }
.ms5 { margin: 5px; }
.ms10 { margin: 10px; }
.ms15 { margin: 15px; }
.ms20 { margin: 20px; }
.ms30 { margin: 30px; }
.ms40 { margin: 40px; }
.ms50 { margin: 50px; }

.mls5 { margin-left: 5px; }
.mls10{ margin-left: 10px; }
.mls15{ margin-left: 15px; }
.mls20{ margin-left: 20px; }
.mls30{ margin-left: 30px; }
.mls40{ margin-left: 40px; }
.mls50{ margin-left: 50px; }

.mbs5 { margin-bottom: 5px; }
.mbs10 { margin-bottom: 10px; }
.mbs15 { margin-bottom: 15px; }
.mbs20 { margin-bottom: 20px; }
.mbs30 { margin-bottom: 30px; }
.mbs40 { margin-bottom: 40px; }
.mbs50 { margin-bottom: 50px; }

.mts-7 { margin-top: -7px; }
.mts-5 { margin-top: -5px; }
.mts5 { margin-top: 5px; }
.mts10 { margin-top: 10px; }
.mts15 { margin-top: 15px; }
.mts20 { margin-top: 20px; }
.mts25 { margin-top: 25px; }
.mts40 { margin-top: 40px; }
.mts50 { margin-top: 50px; }

.mrs5 { margin-right: 5px; }
.mrs10 { margin-right: 10px; }
.mrs15 { margin-right: 15px; }
.mrs20 { margin-right: 20px; }
.mrs30 { margin-right: 30px; }
.mrs40 { margin-right: 40px; }
.mrs50 { margin-right: 50px; }

.ms10101020 { margin: 10px 10px 10px 20px; }



/* PADDING SIZE CLASSES */

.ps0_5 {
    padding:0 5px;
}
.ps0 {
    padding:0 !important;
}
.ps2 {
    padding:2px;
}
.ps2_4 {
    padding:2px 4px;
}

.ps3 {
    padding:3px;
}
.ps4 {
    padding:4px;
}
.ps5 {
    padding: 5px;
}
.ps5_10 {
    padding: 5px 10px;
}
.ps6 {
    padding: 6px;
}
.ps7 {
    padding: 7px;
}
.ps8 {
    padding: 8px;
}
.ps9 {
    padding: 9px;
}
.ps10 {
    padding: 10px;
}
.ps15 {
    padding: 15px;
}
.ps20 {
    padding: 20px;
}
.ps30 {
    padding: 30px;
}
.pts5 {
    padding-top: 5px;
}
.pts10 {
    padding-top: 10px;
}
.pls5 {
    padding-left: 5px;
}
.prs5 {
    padding-right: 5px;
}
.pls10 {
    padding-left: 10px;
}
.p_0_10 {
    padding: 0 10px !important;
}
.pts20 {
    padding-top: 20px;
}
.pts50 {
    padding-top: 50px;
}
.pbs5 {
    padding-bottom: 5px;
}
.pbs10 {
    padding-bottom: 10px;
}
.pbs100 {
    padding-bottom: 100px;
}

.plr1 {
    padding-left:1px;
    padding-right:1px;
}
.plr2 {
    padding-left:2px;
    padding-right:2px;
}
.plr3 {
    padding-left:3px;
    padding-right:3px;
}
.plr4 {
    padding-left:4px;
    padding-right:4px;
}

.plr5 {
    padding-left:5px;
    padding-right:5px;
}



/* LINE HEIGHT */
.lh21 {
    line-height:21px;
}



/* TEXT SHADOW */
.tsnone {
    text-shadow:none;
}

/* ALIGN ELEMENTS */

table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td {
    vertical-align: middle;
}

.aligntop {
    vertical-align: top;
}
.alignbottom {
    vertical-align: bottom;
}
.alignmid {
    vertical-align: middle;
}
.floatr {
    float: right;
}
.floatl {
    float: left;
}
.floatinlineleft {
    float:inline-start;
}
.floatinlineRight {
    float:inline-end;
}
.hovercenter {
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}


/* OPACITIES */
.opacity09 {
    opacity:0.9;
}
.opacity08 {
    opacity:0.8;
}
.opacity07 {
    opacity:0.7;
}
.opacity06 {
    opacity:0.6;
}
.opacity05 {
    opacity:0.5;
}
.opacity04 {
    opacity:0.4;
}
.opacity03 {
    opacity:0.3;
}
.opacity02 {
    opacity:0.2;
}
.opacity01 {
    opacity:0.1;
}



/* CUSTOMERS SECTION */
.customer-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

.customer-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: #f8f9fa;
    border-radius: 10px;
    padding: 10px;
    width: 175px;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s, box-shadow 0.2s;
    text-decoration: none;
    color: inherit;
    cursor:pointer;
}

    .customer-item img {
        width: 150px;
        height: auto;
        margin-bottom: 10px;
    }

    .customer-item div {
        font-size: 14px;
        font-weight: bold;
        color: #333;
    }

    .customer-item input {
        margin-top: 10px;
        width: 100%;
    }

    .customer-item:hover {
        transform: scale(1.05);
        box-shadow: 4px 4px 15px rgba(0, 0, 0, 0.15);
    }

.customer-button {
    margin-top: 10px;
    background: #ff9800;
    color: white;
    border: none;
    padding: 8px 12px;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
}

    .customer-button:hover {
        background: #e68900;
    }



/* TICKETS SECTION */
.ticket-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: center;
}

.ticket-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: #f8f9fa;
    border-radius: 10px;
    padding: 10px;
    width: 175px;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s, box-shadow 0.2s;
}

    .ticket-item img {
        width: 150px;
        height: auto;
        margin-bottom: 10px;
    }

    .ticket-item span {
        font-size: 14px;
        font-weight: bold;
        color: #333;
    }

    .ticket-item:hover {
        transform: scale(1.05);
        box-shadow: 4px 4px 15px rgba(0, 0, 0, 0.15);
    }



/* Z-INDEXES */
.zindex-1 {
    z-index:1;
}
.zindex-999 {
    z-index:999;
}
.zindex-1000 {
    z-index:1000;
}

/* COUNTERS */
.counterCircle {
    border-radius: 15px;
    color: white;
    min-width: 25px;
    float: right;
    text-align: center;
    margin-right: 5px;
    padding: 1px 4px 0 3px;
}

.counterSquare {
    display: inline-block;
    border-radius: 2px;
    padding: 4px 4px 0;
    cursor: help !important;
}



/* INLINE BLOCKS*/
.inline {
    display: inline-block;
}




/* SELECT ELEMENT */
select[multiple] {
    max-height:150px;
}
select[multiple] option {
    padding:5px;
    color:lightgray;
}
select[multiple] option:checked {
    color:black;
    background:white;
}


.fedex_delivery_day {
    font-size: 38px;
    width: 270px;
    letter-spacing: -.4px;
    line-height: 50px;
    opacity: .9;
    color: #333;
}
.fedex_delivery_text {
    font-size: 20px;
    width: 270px;
    font-weight: 300;
    letter-spacing: -.4px;
    line-height: 25px;
    font-family: FedExSans Light,sans-serif;
}

.fedex_tracking_label {
    height: 16px;
    width: 263px;
    font-family: FedExSans,sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    line-height: 16px;
    text-transform: uppercase;
}

.fedex_pill {
    border: 2px solid #4d148c;
    border-radius: 20px;
    margin: 20px 0 0;
    padding: 0 8px;
}






/* BORDERS */
.border3d {
    border-top: 2px solid #fff;
    border-left: 2px solid #eee;
    border-right: 2px solid #888;
    border-bottom: 2px solid #333;
}

.borderRad5 {
    border-radius: 5px;
}

.borderRad10 {
    border-radius: 10px;
}

.bor1Gray {
    border: 1px solid gray;
}

.bor1LightGray {
    border: 1px solid LightGray;
}

.bor1Black {
    border: 1px solid black;
}

.bor1Blue {
    border: 1px solid #468cba;
}

.bor1DarkBlue {
    border: 1px solid darkblue;
}

.bor1Red {
    border: 1px solid red;
}

.bor1White {
    border: 1px solid white;
}

.bor1Green {
    border: 1px solid green;
}

.borWhiteTBL {
    border-style: solid !important;
    border-width: 0px 1px 0px 0px !important;
}

.bor1_LightGray_trl {
    border: 1px solid LightGray;
    border-bottom: hidden;
}

.bor1_DarkGray_r {
    border-right: 1px solid darkgray !important;
}




/* SHADOWS */
.bs3335 {
    box-shadow: 3px 3px 3px rgba(0,0,0,0.5);
}
.bs3337 {
    box-shadow: 3px 3px 3px rgba(0,0,0,0.7);
}
.bs3357 {
    box-shadow: 3px 3px 5px rgba(0,0,0,0.7);
}
.bs5553 {
    box-shadow: 5px 5px 5px rgba(0,0,0,0.3);
}
.bs5555 {
    box-shadow: 5px 5px 5px rgba(0,0,0,0.5);
}
.bs5583 {
    box-shadow: 5px 5px 8px rgba(0,0,0,0.3);
}
.bs5585 {
    box-shadow: 5px 5px 8px rgba(0,0,0,0.5);
}

.bsi3355 {
    box-shadow: inset 3px 3px 5px rgba(0,0,0,0.5);
}
.insetshadow {
    box-shadow: inset 3px 3px 3px rgba(0,0,0,0.5);
}

.bs2-125 {
    box-shadow: 2px -1px 2px rgba(0,0,0,0.5);
}

.bs3-235 {
    box-shadow: 3px -2px 3px rgba(0,0,0,0.5);
}

/* ANIMATED HOVERS */
.bs3335_ani {
    box-shadow: 3px 3px 3px rgba(0,0,0,0.5);
    opacity:0.85;
}
.bs3335_ani:hover {
    box-shadow: 1px 1px 1px rgba(0,0,0,0.5);
    opacity:1;
}

.hover_fade {
    opacity: 0.9;
}

    .hover_fade:hover {
        opacity: 1;
    }

.fa-binoculars:hover {
    opacity: 0.7
}

.hover_bgPrimary:hover {
    background: rgba(66, 139, 202, 0.1);
}

.zoom {
    transition: transform .2s; /* Animation */
    margin: 0 auto;
}

    .zoom:hover {
        box-shadow: 3px 3px 8px black;
        border-radius: 5px;
        cursor: zoom-in;
        transform: scale(2.2); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
        background: repeating-conic-gradient(rgba(0,0,0,0.2) 0% 25%, transparent 0% 50%) 50% / 10px 10px !important;
    }


.zoom-right {
    transition: transform .2s;
    margin: 0 auto;
}

    .zoom-right:hover {
        border: 1px solid #428bca;
        box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);
        cursor: zoom-in;
        transform: scale(2.2) translateX(1em);
    }

.hover_red:hover {
    color: red;
}


/* SWITCH  BUTTON*/
.switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 24px;
}

    .switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

.switch_slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
    box-shadow: inset 3px 3px 8px rgb(0 0 0 / 50%);
}

    .switch_slider:before {
        position: absolute;
        content: "";
        height: 21px;
        width: 21px;
        left: 2px;
        bottom: 1px;
        background-color: #eee;
        -webkit-transition: .4s;
        transition: .4s;
    }

input:checked + .switch_slider {
    background-color: #2196F3;
    box-shadow: inset 3px 3px 8px rgb(0 0 0 / 50%);
}

input:focus + .switch_slider {
    box-shadow: 0 0 1px #2196F3;
    box-shadow: inset 3px 3px 8px rgb(0 0 0 / 50%);
}

input:checked + .switch_slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
}

/* Rounded sliders */
.switch_slider.round {
    border-radius: 6px;
}

    .switch_slider.round:before {
        border-radius: 5px;
    }





/* INFO BOXES */
.infoboxleft {
    position: absolute;
    margin: -30px 0 0 -325px;
    width: 300px;
}

.infoboxleft200px {
    position: absolute;
    margin: -30px 0 0 -225px;
    width: 200px;
}

.infobox {
    position: absolute;
}

.postit_info {
    position: absolute;
    background: #fcf3cfee;
    display: none;
    right: 0;
    margin-top:20px;
    color:black;
    width: 325px;
    z-index: 999;
    text-indent: -8px;
    text-align: left;
    padding:20px;
    box-shadow: 3px 3px 3px black;
    border:1px solid #eeeeee;
}


/* MENU TABS AND CONTENT */

.menu, .mad_menu_item, .store_menu_item, .menu_secondary, .adminmenu {
    border-top: 1px solid #ccc;
    border-right: 1px solid #ccc;
    border-left: 1px solid #ccc;
    border-radius: 5px 5px 0 0;
    background: #eee;
}
    .menu > a, .mad_menu_item > a, .store_menu_item > a, .menu_secondary > a {
        padding:5px 10px !important;
    }
    .menu > a:hover, .mad_menu_item > a:hover, .store_menu_item > a:hover, .menu_secondary > a:hover, .adminmenu > a:hover {
        color: red;
    }

.mad_menu_item, .store_menu_item {
    font-size:1.1em;
}


.nav-tabs > li.store_menu_item.active > a,
.nav-tabs > li.store_menu_item.active > a:hover,
.nav-tabs > li.store_menu_item.active > a:focus {
    background: #fff;
    border-bottom-color: transparent;
    font-weight: 600;
}


.adminmenu {
    font-size:0.8em;
}
    .adminmenu > a {
        padding:5px !important;
    }

.tab_body_border {
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
}

.menu_tab_regular a {
    color: lightgray !important;
    font-size: 1.3em;
    margin-top: 10px;
}

    .menu_tab_regular a:hover {
        background: #222 !important;
        color: white !important;
    }









/* CHECKBOXES */

.checkbox_nice {
    transform: scale(1.4); /* 🔹 controls visual size */
    -webkit-transform: scale(1.4);
    transform-origin: left center;
    margin: 0;
    cursor: pointer;
    vertical-align: middle;
}
.primary-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

    .primary-checkbox input[type="checkbox"] {
        width: 25px;
        height: 25px;
        margin: 0;
        cursor: pointer;
    }
    .primary-checkbox input[type="checkbox"] {
        accent-color: #0d6efd; /* Bootstrap primary */
    }





.big_checkbox {
    width: 25px;
    height: 25px;
    margin-right: 10px;
}

.big_radio {
    width: 25px;
    height: 25px;
    margin-right: 10px;
}


.big_label {
    font-size: 1.2em;
    margin-left: 10px;
}

.label_size {
    font-size: 1.2em;
    font-weight: normal;
}

.dialog_box_title {
    font-size: 1.5em;
    font-weight: normal;
}

.th_title_filter {
    color:#468cba;
    text-decoration:underline;
    cursor:pointer;
}

.icon-bar {
    color: white;
    border-color: white;
    background-color: white;
    height: 5px !important;
    width: 40px !important;
    margin-top: 6px !important;
    margin-bottom: 6px !important;
}

.submit_button {
    font-size: 1.3em;
}

.input_text_size {
    font-size: 1.2em;
}

.dialog_box_icon {
    font-size: 5em;
    color: gray;
}



/* TABLES*/

.thbort {
    border-top: 1px solid gray !important;
}
.thborr {
    border-right: 1px solid gray !important;
}




/* BUTTONS */
.curvy_btn {
    border: 1px solid #428bca;
    border-radius: 5px;
    text-align: center;
    cursor: pointer;
    height: 50px;
    vertical-align: middle;
    box-shadow: 3px 3px 5px rgba(0,9,16,0.5);
    display: inline-flex;
    justify-content: center; /* align horizontal */
    align-items: center; /* align vertical */
}

    .curvy_btn:hover {
        background: rgba(206,225,242,0.5);
        box-shadow: 2px 2px 3px rgba(0,9,16,0.5);
        color: red;
    }

.btnBorder {
    border-width: 3px;
    border-top-color: #e3effb;
    border-left-color: #e2edf7;
    border-right-color: #acc0f5;
    border-bottom-color: #a6b2da;
}


.redbin{
    color:red;
}

.graybin{
    color:gray;
}


.button { /* Use a tag to make button */
    cursor:pointer;
    padding:5px;
    border-radius:5px;
}

.button:hover, .button:focus {
    color:#01b9ff;
    text-decoration:none;
}

.dashboard-btn {
    display: inline-block;
    box-sizing: border-box;
    float: left;
    margin-top: -5px;
}

.graph_list_btn_350 {
    position: absolute;
    margin-top: 10px;
    margin-left: 350px;
    font-size: 1.4em;
    cursor: pointer;
    z-index: 2;
}





/* Graphs */
.storefront_title {
    position:absolute; 
    left:0; 
    top:0; 
    overflow:hidden; 
    text-overflow:ellipsis; 
    white-space:nowrap; 
    cursor:pointer;
    text-align:left;
}


/* SHAREDs */
.alert_container {
    margin-top: 35px;
    box-shadow: 5px 5px 10px rgba(0,0,0,0.5);
}

    .alert_container ul {
        background: white;
        padding: 10px;
    }

        .alert_container ul li {
            list-style-type: none;
        }

            .alert_container ul li a {
                color: black;
                line-height: 30px;
            }

            .alert_container ul li:nth-child(2n+1) {
                background: #e0e0e0;
            }

.absolute_center {
    margin: auto;
    position: absolute;
    top: 100px;
    left: 0;
    right: 0;
    width: 400px;
    z-index: 2;
}

.absolute350px {
    position: absolute;
    left: 0;
    right: 0;
    width: 350px;
    z-index: 2;
}

.center_popup {
    position: fixed;
    max-width: 800px;
    max-height: 400px;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    overflow-y:scroll;
    z-index: 2;
}

.message_center {
    position: fixed;
    max-width: 800px;
    max-height: 400px;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    z-index: 2;
}

text-right {
    text-align: right;
}

/* MY DASHBOARD*/

.dashboard_container {
    background: white;
    border-radius: 7px;
    box-shadow: 3px 3px 10px rgba(0,0,0,0.3);
    margin: 10px;
    /*padding: 25px;*/
    margin: 0 auto;
}

    .dashboard_container ul {
        text-align: center;
        margin-top: 5px;
    }

        .dashboard_container ul li {
            min-width: 80px;
        }

.tab_icon, .tab_icon_lg {
    font-size: 1.6em;
}

.tab_awesome {
    max-height: 42px;
}
    .tab_awesome.active {
        background:white;
        border-top: 1px solid #ccc;
        border-right: 1px solid #ccc;
        border-left: 1px solid #ccc;
    }



.tab_menu_lg {
    text-shadow: 1px 1px 1px darkblue;
}

.mydashboard_button {
    font-size: 1.2em;
}

.customer_title_header {
    color: white;
    background: #333;
    font-size: 1.4em;
    padding: 5px 10px;
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
    box-shadow: 3px 3px 7px rgba(0,0,0,0.4);
}

.customer_account_container {
    background: white;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
    box-shadow: 3px 3px 7px rgba(0,0,0,0.3);
    padding: 20px;
}

.customer_lookup_container {
    border-radius: 5px;
    background: #ccc;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
    box-shadow: 3px 3px 7px rgba(0,0,0,0.3);
    padding: 15px;
    min-width: 1020px;
}

    .customer_lookup_container .customers_search_form {
        background: white;
        padding: 20px;
        border-radius: 5px;
    }

.metadata_container {
    background: white;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
    box-shadow: 3px 3px 7px rgba(0,0,0,0.3);
    padding: 20px;
}

.popup_shadow {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(0,0,0,0.7);
    z-index: 998;
}

.search_popup_shadow {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(0,0,0,0.7);
    z-index: 998;
}

.search_popup {
    position: absolute;
    width: 400px;
    height: 300px;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    margin-top: auto;
    margin-bottom: auto;
    top: 0;
    bottom: 0;
    padding: 40px 20px;
    text-align: center;
    z-index: 999;
}

.customer_header {
    padding: 5px;
    color: white;
    background-image: linear-gradient(#428bca, #496782, #75a8d4);
    border-radius: 5px 5px 0 0;
    border-top: 1px solid #99cfef;
    border-left: 1px solid #4794c1;
    border-right: 1px solid #0d70ab;
}


.pending_order_modal, invoice_modal {
    font-size: 0.9em;
    line-height: 30px;
}

    .pending_order_modal:nth-child(2n+1), invoice_modal:nth-child(2n+1) {
        background: #e3ebf1;
    }

/*
.customers_search_form form{
    margin:0 auto;
    text-align:center;
}
*/
.customers_search_form form input {
    margin: 5px;
}


.dashboard_tab {
    background: #555;
    padding: 5px 10px;
    color: white;
    font-size: 1.2em;
    cursor: pointer;
    border-radius: 5px;
    margin-top: 5px;
    border: 1px solid #bbb;
    background-image: linear-gradient(to left, #c9c9c9, #7e7e7e);
    max-width: 750px;
}
    .dashboard_tab:hover {
        border: 1px solid #496e8f;
        background-image: linear-gradient(to left, #85b0d6, #428bca);
    }

.dashboard_tab.active {
    border-radius: 5px 5px 0 0;
}

.dashboard_tab_body_container {
    background: white;
    border-radius: 5px;
    box-shadow: 3px 3px 10px rgba(0,0,0,0.3);
    margin: 10px;
    padding: 25px;
    margin: 0 auto;
}

.dashboard_tab_body_container.active {
    border-radius: 0 0 5px 5px;
}

.dashboard_tab_body_container .panel-body .row .col-sm-4 {
        font-size: 1.3em;
    }


.editcrmopportunity_container {
    background: white;
    border-radius: 7px;
    box-shadow: 3px 3px 10px rgba(0,0,0,0.3);
    margin: 10px;
    margin: 10px;
    padding: 25px 10px;
    margin: 0 auto;
}

.approved_items_container {
    background: white;
    border-bottom-left-radius: 7px;
    border-bottom-right-radius: 7px;
    box-shadow: 3px 3px 10px rgba(0,0,0,0.3);
    margin: 10px;
    margin: 10px;
    padding: 25px 10px;
    margin: 0 auto;
}

.editcrmopportunity_container .inputlabel {
    text-align: left;
}

.editcrmopportunity_container .inputfield {
    margin-top: 5px;
}


.editcrmopportunity_container table thead th {
    text-align: center;
}


.activity_tables_container {
    border: 1px solid #ddd;
    padding: 5px 10px;
    border-radius: 5px;
}



.activity_body {
    display: none;
    font-size: 0.8em;
}


/* Appointments */
.appointments_table thead th {
    position: sticky;
    top: 0;
    z-index: 5; /* keep above rows */
    background-color: var(--bs-body-bg, #FCF3CF) !important; /* light bg; falls back to #f8f9fa */
    box-shadow: 0 1px 0 rgba(0,0,0,.08); /* subtle divider line */
}


/* CHARTS */
.chart_container img {
    width: 600px;
    height: 400px;
}

/* DIV TABLES */
.striped_div_table {
    border: 1px solid gray;
    border-radius: 10px;
}

    .striped_div_table div:nth-child(2n) div {
        background: #eee;
    }

    .striped_div_table div div:nth-child(2n) {
        text-align: right;
    }

.set_txt_font {
    font-size: 1.2em;
}

.curved_top_container {
    border-radius: 7px 7px 0 0;
    color: white;
    background: #444;
    box-shadow: 3px 0px 5px rgba(0,0,0,0.3);
    text-shadow: 1px 1px 2px black;
}

    .curved_top_container.md {
        padding: 10px;
    }

.curve_top_btn {
    font-size: 1em;
    float: right;
    cursor: pointer;
    margin-top: -5px;
}

.curved_bottom_container {
    border-radius: 0 0 7px 7px;
    padding: 10px;
    box-shadow: 3px 3px 5px rgba(0,0,0,0.3);
    margin-bottom: 10px;
    background: white;
    width: 100%;
}

.bottom_container {
    padding: 10px;
    margin-bottom: 10px;
    width: 100%;
    border:1px solid #ddd;
    border-top:none;
}

.customer_header_title {
    display:inline-block;
    vertical-align:middle;
    font-size: 1.2em;
}

.customer_header_number {
    display: inline-block;
    margin: 5px;
    font-size: 1.2em;
    float: right;
    padding: 2px 5px;
    background: rgba(0,0,0,0.1);
    border-radius: 5px;
    border: 1px solid lightsteelblue;
}

.fc_checkbox {
    vertical-align:middle;
    width: 25px;
    cursor:pointer;
}

.favorite {
    color:red;
}

.favorite p {
    margin:0 !important;
    text-align:center !important;
}

.grid_highlight {
    background: #ffffdd;
}



/* AVATAR */
.update_avatar {
    font-size: 2.2em;
    margin-left: 5px;
    cursor: pointer;
    vertical-align: bottom;
}

.upload_avatar {
    margin: 0 auto;
}

.contenteditable {
    display: block;
    width: 100%;
    height: 200px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.428571429;
    color: #555555;
    vertical-align: middle;
    background-color: #ffffff;
    border-radius: 4px;
    border: 1px solid #cccccc;
    overflow:auto;
    -webkit-transition: border 500ms ease-out;
    -moz-transition: border 500ms ease-out;
    -o-transition: border 500ms ease-out;
}


    .contenteditable:focus {
        outline: none;
        box-shadow: 0 0 5px #529cdc80;
        border: 1px solid #529cdc;
    }


.formcontrol {
    display: block;
    width: 100%;
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.428571429;
    color: #555555;
    vertical-align: middle;
    background-color: #ffffff;
    border-radius: 4px;
    border: 1px solid #cccccc;
    -webkit-transition: border 500ms ease-out;
    -moz-transition: border 500ms ease-out;
    -o-transition: border 500ms ease-out;
}


    .formcontrol:focus {
        outline: none;
        box-shadow: 0 0 5px #529cdc80;
        border: 1px solid #529cdc;
    }

.custom_store_conf_field {
    display: inline-block;
    min-width: 100px;
    margin:2px;
    box-shadow: inset 1px 1px 3px gray;
    padding: 5px;
    background: #fffdf1;
}



/* INPUT FIELDS*/
.item_number {
    width: 140px;
    float: left;
    vertical-align: middle;
    margin-right: 5px;
}



/*SALES DASHBOARD */

.editmtdsales {
    background: white;
    border-radius: 7px;
    box-shadow: 3px 3px 10px rgba(0,0,0,0.2);
    max-width: 550px;
    margin: 10px;
    padding: 25px;
    margin: 0 auto;
}

.salestable thead tr th {
    background: #428bca;
    color: white;
    padding: 5px;
    text-align: center;
    border: 1px solid #444;
    font-weight: normal;
    font-size: 1.2em;
}

.salestable tbody tr td {
    padding: 5px;
    font-size: 1.2em;
    border: 1px solid #444;
    text-align: right;
}

    .salestable tbody tr td input {
        text-align: right;
        font-size: 1.1em;
    }

.salestable tbody tr:nth-child(2n+1) {
    background: #cce6ff;
}

.salestable tbody tr:last-child {
    background: #f0f0f5;
}



/* SHADES */
.popup_shade {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    background: rgba(0,0,0,0.5);
}

.modal_popup_shade {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1500; /* increase this */
    background: rgba(0,0,0,0.6); /* slightly darker */
}



.align_middle_center {
    display: flex;
    justify-content: center;
    align-items: center;
}




/* Notification */

.notifications_shade {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 998;
}

.notifications_body {
    display: none;
    width: 90%;
    z-index:999;
}

/* BOOTSTRAP OVERWRITES */

.bg-dark {
    background-color: #343a40 !important; /* matches BS4/5 - remove when upgraded to 5 */
    color: #fff;
}

    .bg-dark a {
        color: #fff;
    }

        .bg-dark a:hover {
            color: #dcdcdc;
        }


.progress.estore_image_management {
    background-color: #d8d8d8;
}

.btn {
    padding: 3px 6px;
}
.btn-primary {
    color: #ffffff;
    background-color: #48597d;
    border-color: #33393e;
}


.widget-author {
    margin-bottom: 58px;
}

.author-card {
    position: relative;
    padding-bottom: 15px;
    background-color: #fff;
    box-shadow: 0 12px 20px 1px rgba(64, 64, 64, .09);
}

    .author-card .author-card-cover {
        position: relative;
        width: 100%;
        height: 100px;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }

        .author-card .author-card-cover::after {
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            content: '';
            opacity: 0.5;
        }

        .author-card .author-card-cover > .btn {
            position: absolute;
            top: 12px;
            right: 12px;
            padding: 0 10px;
        }

    .author-card .author-card-profile {
        display: table;
        position: relative;
        padding: 10px;
        z-index: 5;
    }

        .author-card .author-card-profile .author-card-avatar, .author-card .author-card-profile .author-card-details {
            display: table-cell;
            vertical-align: middle;
        }


    .author-card .author-card-profile {
        box-shadow: 0 8px 20px 0 rgba(0, 0, 0, .15);
        overflow: hidden;
    }

        .author-card .author-card-profile .author-card-avatar > img {
            display: block;
            width: 100%;
        }

        .author-card .author-card-profile .author-card-details {
            padding-top: 20px;
            padding-left: 15px;
        }

        .author-card .author-card-profile .author-card-name {
            margin-bottom: 2px;
            font-size: 14px;
            font-weight: bold;
        }

        .author-card .author-card-profile .author-card-position {
            display: block;
            color: #8c8c8c;
            font-size: 12px;
            font-weight: 600;
        }

    .author-card .author-card-info {
        margin-bottom: 0;
        padding: 0 25px;
        font-size: 13px;
    }

    .author-card .author-card-social-bar-wrap {
        position: absolute;
        bottom: -18px;
        left: 0;
        width: 100%;
    }

        .author-card .author-card-social-bar-wrap .author-card-social-bar {
            display: table;
            margin: auto;
            background-color: #fff;
            box-shadow: 0 12px 20px 1px rgba(64, 64, 64, .11);
        }

.btn-style-1.btn-white {
    background-color: #fff;
}

.list-group-item i {
    display: inline-block;
    margin-top: -1px;
    margin-right: 8px;
    font-size: 1.2em;
    vertical-align: middle;
}

.mr-1, .mx-1 {
    margin-right: .25rem !important;
}

.list-group-item.active:not(.disabled) {
    border-color: #e7e7e7;
    background: #fff;
    color: #ac32e4;
    cursor: default;
    pointer-events: none;
}

.list-group-flush:last-child .list-group-item:last-child {
    border-bottom: 0;
}

.list-group-flush .list-group-item {
    border-right: 0 !important;
    border-left: 0 !important;
}

.list-group-flush .list-group-item {
    border-right: 0;
    border-left: 0;
    border-radius: 0;
}

.list-group-item.active {
    z-index: 2;
    color: #fff;
    background-color: #007bff;
    border-color: #007bff;
}

.list-group-item:last-child {
    margin-bottom: 0;
    border-bottom-right-radius: .25rem;
    border-bottom-left-radius: .25rem;
}

a.list-group-item, .list-group-item-action {
    color: #404040;
    font-weight: 600;
}

.list-group-item {
    padding-top: 16px;
    padding-bottom: 16px;
    -webkit-transition: all .3s;
    transition: all .3s;
    border: 1px solid #e7e7e7 !important;
    border-radius: 0 !important;
    color: #404040;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    text-decoration: none;
}

.list-group-item {
    position: relative;
    display: block;
    padding: .75rem 1.25rem;
    margin-bottom: -1px;
    background-color: #fff;
    border: 1px solid rgba(0,0,0,0.125);
}

    .list-group-item.active:not(.disabled)::before {
        background-color: #ac32e4;
    }

    .list-group-item::before {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 3px;
        height: 100%;
        background-color: transparent;
        content: '';
    }

/*LINE HEIGHTS*/
.lh_init td {
    line-height:initial !important;
}
.lh20 {
    line-height:20px;
}
.lh20 {
    line-height:20px;
}




/* MANAGE APPOINTMENTS */

.appt-row.appt-brea {
    background-color: #eef6ff; /* soft blue */
}

.appt-row.appt-prescott {
    background-color: #fff1f1; /* soft pastel red */
}

/* Keep inputs readable on tinted rows */
.appt-row .form-control,
.appt-row textarea {
    background-color: rgba(255, 255, 255, 0.85);
}

/* Subtle hover (optional but nice) */
.appt-row:hover {
    background-color: rgba(0, 0, 0, 0.03);
}

.appt-brea select[name="Location"] {
    border-left: 4px solid #9cc7ff;
}

.appt-prescott select[name="Location"] {
    border-left: 4px solid #f2a1a1; /* muted red accent */
}






/* SCREEN SAVER */
#samProfileScreenSaverToggle:hover img,
#samProfileScreenSaverToggle:hover .glyphicon-user {
    opacity: 0.85;
}

#samProfileScreenSaverToggle.screensaver-off img,
#samProfileScreenSaverToggle.screensaver-off .glyphicon-user {
    filter: grayscale(100%);
    opacity: 0.7;
}










/* SPINNERS */
.loader {
    border: 10px solid #f3f3f3;
    border-radius: 50%;
    border-top: 10px solid #3498db;
    border-bottom: 10px solid #3498db;
    width: 75px;
    height: 75px;
    -webkit-animation: spin 2s linear infinite;
    animation: spin 1.5s linear infinite;
    background: rgba(0,0,0,0.2);
    margin: 0 auto;
}

    .loader > div {
        position: absolute;
        top: 20px;
        left: 14px;
        color: #468cba;
    }

.loader_sm {
    position: absolute;
    border: 4px solid #ffffff;
    margin-top: 4px;
    margin-left: 308px;
    border-radius: 50%;
    border-top: 4px solid #3498db;
    border-bottom: 4px solid #3498db;
    width: 26px;
    height: 26px;
    -webkit-animation: spin 2s linear infinite;
    animation: spin 1.5s linear infinite;
    background: rgb(255 255 255 / 0%);
}
.loader_sm_5_270 {
    margin-top: 5px;
    margin-left: 270px;
}
    .loader_sm > div {
        position: absolute;
        top: 3px;
        left: -2px;
        color: #428bca;
        font-size: 0.8em;
    }




/* Safari */
    @-webkit-keyframes spin {
        0% {
            -webkit-transform: rotate(0deg);
        }

        100% {
            -webkit-transform: rotate(360deg);
        }
    }

    @keyframes spin {
        0% {
            transform: rotate(0deg);
        }

        100% {
            transform: rotate(360deg);
        }
    }


.spin-icon {
    display: inline-block;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}








/* Base styles for the table rows */
.profile-classification-tr2 td {
padding: 8px; /* Adjust padding as needed */
border: 1px solid #ccc;
text-align: left;
}

/* Compact styles for single-row layout */
.profile-classification-tr td {
padding: 8px;
border: 1px solid #ccc;
text-align: left;
}

/* Default display for larger devices */
.profile-classification-tr2 {
display: table-row;
}

.profile-classification-tr {
display: none;
}




textarea.AlertMessage {
    resize: none;
    overflow: hidden;
}




/* MEDIA QUERIES */



@media (min-width: 768px) {
    .container {
        width: auto;
    }
}



@media (max-width: 1024px) {
    .tablet-scroll-y {
        overflow-y: scroll;
    }
}




@media (max-width: 767px) {

    .menu > a, .mad_menu_item > a, .menu_secondary > a {
        padding: 5px 8px !important;
    }

    .nav > li {
        margin-left: 2px !important;
    }

    .nav-tabs > li > a {
        padding: 5px 10px;
    }

    .nav > form > li {
        margin-left: 20px !important;
    }

    .smartshow {
        display: block;
    }

    .smarthide {
        display: none;
    }

    .container {
        padding: 5px;
    }

    .dashboard_tab_body_container {
        padding: 0;
    }

    .panel-body {
        padding: 0;
    }

    .mobFS085 {
        font-size: 0.85em !important;
    }

    .mobFS080 {
        font-size: 0.80em !important;
    }

    .mobFS075 {
        font-size: 0.75em !important;
    }

    .mobFS070 {
        font-size: 0.70em !important;
    }

    .table thead > tr > th, .table tbody > tr > th, .table tfoot > tr > th, .table thead > tr > td, .table tbody > tr > td, .table tfoot > tr > td {
        padding: 4px;
    }

    .mobp0 {
        padding: 0 !important;
    }

    .mobp5 {
        padding: 5px !important;
    }

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

    .mobile-scroll-x {
        overflow-x: scroll;
    }


}


@media (max-width: 567px) {

    .body-content {
        padding: 0;
    }

    .container {
        padding: 0;
        padding-right: 1px;
        padding-left: 1px;
    }

    .btnsm {
        padding: 5px 10px;
        font-size: 12px;
        line-height: 1.5;
        border-radius: 3px;
    }

    .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {
        padding-right: 0;
        padding-left: 0;
    }

    .row {
        margin-right: 0;
        margin-left: 0;
    }

    .drag_container {
        height: 200px;
    }

    .dragdropmessage {
        display: none;
    }


}



@media (max-width: 480px) {

    .profile-classification-tr2 {
        display: none;
    }

    .profile-classification-tr {
        display: table-row;
    }


    .customer_header_title {
        font-size: 1em;
    }

    .customer_header_number {
        font-size: 1em;
    }


    #company_logo {
        width: 250px;
    }

    .block400px {
        width: 100%;
    }

    .block350px {
        width: 100%;
    }

    .mobile_graph_title {
        width: 85% !important;
    }
}