@import url('https://fonts.googleapis.com/css?family=Abril+Fatface|Alfa+Slab+One|Amatic+SC|Anton|Bangers|Berkshire+Swash|Black+And+White+Picture|Bungee+Shade|Cantata+One|Cormorant+Unicase|Crushed|Freckle+Face|Fredericka+the+Great|Frijole|Great+Vibes|Heebo|IM+Fell+DW+Pica|Indie+Flower|Limelight|Lobster|Lora|Love+Ya+Like+A+Sister|Montserrat|Mountains+of+Christmas|Open+Sans|Oranienbaum|Orbitron|Oswald|Passion+One|Permanent+Marker|Play|Poiret+One|Quicksand|Roboto+Condensed|Shrikhand|Slabo+27px|Slackey|Spicy+Rice|UnifrakturMaguntia');
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');



@font-face {
    font-family: 'Graphik_Web_Bold';
    src: url('../fonts/Graphik_Web_Bold.woff2') format('woff2'), url('../fonts/Graphik_Web_Bold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}




@font-face {
    font-family: 'Graphik_Web_Light';
    src: url('../fonts/Graphik_Web_Light.ttf') format('opentype'), url('../fonts/Graphik_Web_Light.woff2') format('woff2'), url('../fonts/Graphik_Web_Light') format('woff');
    font-weight: normal;
    font-style: normal;
}




@font-face {
    font-family: 'Graphik_Web_Regular';
    src: url(../fonts/'Graphik_Web_Regular.ttf') format('opentype'),url('../fonts/Graphik_Web_Regular.woff2') format('woff2'), url('../fonts/Graphik_Web_Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}




@font-face {
    font-family: 'Graphik_Web_Semibold';
    src: url('../fonts/Graphik_Web_Semibold.ttf') format('opentype'),url('../fonts/Graphik_Web_Semibold.woff2') format('woff2'), url('../fonts/Graphik_Web_Semibold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}


@font-face {
    font-family: 'Graphic_Condensed_Black';
    font-weight: bold;
    src: url("../fonts/GraphikXCondBlackBETA.otf") format("opentype");
}

@font-face {
    font-family: 'Graphic_Condensed_Bold';
    font-weight: bold;
    src: url("../fonts/GraphikXCondBoldBETA.otf") format("opentype");
}

@font-face {
    font-family: 'Graphic_Condensed_Extra_Light';
    font-weight: bold;
    src: url("../fonts/GraphikXCondExtralightBETA.otf") format("opentype");
}

@font-face {
    font-family: 'Graphic_Condensed_Light';
    font-weight: bold;
    src: url("../fonts/GraphikXCondLightBETA.otf") format("opentype");
}

@font-face {
    font-family: 'Graphic_Condensed_Medium';
    font-weight: bold;
    src: url("../fonts/GraphikXCondMediumBETA.otf") format("opentype");
}

@font-face {
    font-family: 'Graphic_Condensed_Regular';
    font-weight: bold;
    src: url("../fonts/GraphikXCondRegularBETA.otf") format("opentype");
}

@font-face {
    font-family: 'Graphic_Condensed_SemiBold';
    font-weight: bold;
    src: url("../fonts/GraphikXCondSemiboldBETA.otf") format("opentype");
}

@font-face {
    font-family: 'Graphic_Condensed_Super';
    font-weight: bold;
    src: url("../fonts/GraphikXCondSuperBETA.otf") format("opentype");
}

@font-face {
    font-family: 'Graphic_Condensed_Thin';
    font-weight: bold;
    src: url("../fonts/GraphikXCondThinBETA.otf") format("opentype");
}


@font-face {
    font-family: 'Acta_Bold_italic';
    src: url('../fonts/actabolditalicwebfont.ttf') format('opentype'), url('../fonts/actabolditalicwebfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Acta_Bold';
    src: url('../fonts/actaboldwebfont.ttf') format('opentype'), url('../fonts/actaboldwebfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}


@font-face {
    font-family: 'Acta_Book_Italic';
    src: url('../fonts/actabookitalicwebfont.ttf') format('opentype'), url('../fonts/actabookitalicwebfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Acta_Book';
    src: url('../fonts/actabookwebfont.ttf') format('opentype'), url('../fonts/actabookwebfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Acta_Extra_Bold_Italic';
    src: url('../fonts/actaextrabolditalicwebfont.ttf') format('opentype'), url('../fonts/actaextrabolditalicwebfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Acta_Extra_Bold';
    src: url('../fonts/actaextraboldwebfont.ttf') format('opentype'), url('../fonts/actaextraboldwebfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}


@font-face {
    font-family: 'Acta_Light_Italic';
    src: url('../fonts/actalightitalicwebfont.ttf') format('opentype'), url('../fonts/actalightitalicwebfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Acta_Light';
    src: url('../fonts/actalightwebfont.ttf') format('opentype'), url('../fonts/actalightwebfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}


html {
    font-size: 12px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
    position: relative;
    min-height: 100%;
}


a{
    font-family: 'Graphik_Web_Regular';
    text-decoration: none;
    color: #000;
}

.loginimages {
    background: url('../images/login2.jpg');
    background-size: cover;
    opacity: 0.4;
}

.bg-plum-plate {
    background-image: linear-gradient(135deg,#667eea 0,#764ba2 100%) !important;
}


.w-5 {
    width: 5%;
}

.w-7 {
    width: 7%;
}


.w-8 {
    width: 8%;
}


.w-10 {
    width: 10%;
}

.w-15 {
    width: 15%;
}

.w-30 {
    width: 30%;
}

.w-40 {
    width: 40%;
}


    a:hover {
        font-family: 'Graphik_Web_Regular';
        text-decoration: underline;
        color: #1E4794;
    }

body {
    /* font-family: "Inter", sans-serif;*/
    font-family: "Graphik_Web_Regular","Roboto", Arial;
    /* font-family: "Nunito Sans", sans-serif;*/
  
}

.bkgnewblue {
    background-color: #256686;
    color: #fff
}

.topheaderbkg {
    background-color: #162029;
    color: #fff;
    height: 50px;
    margin-top: 20px;
    font-family: "Graphik_Web_Regular","Roboto", Arial;
}

    .topheaderbkg a {
        color: #fff;
        text-decoration: none;
        font-size: 1em;
        display: inline-block;
    }

.no-gutter > [class*='col-'] {
    padding-right: 0;
    padding-left: 0;
}

.borderbox {
    border: solid 1px #ccc;
}

.modal.zoom-in .modal-dialog {
    transform: scale(0.7);
    transition: transform 0.3s ease-out;
}

.modal.zoom-in.show .modal-dialog {
    transform: scale(1);
}

.footer {
    background-color: #f8f5ef;
    color: #000;
    padding-top: 20px;
    padding-bottom: 20px;
    margin: 0px;
    font-family: "Graphik_Web_Regular"
}

    .footer ul {
        padding: 0px;
        margin: 0px;
        list-style: none;
        text-align: center;
        border: none;
        margin-top: 15px
    }

        .footer ul li {
            display: inline-block;
            padding: 5px;
            padding-top: 0;
            padding-bottom: 0;
            text-align: center;
            border-right: dotted 1px #000;
            font-family: "Graphik_Web_Regular"
        }


            .footer ul li:last-child {
                border-right: none;
            }

            .footer ul li a {
                color: #000;
                font-size: 0.8em;
                font-family: "Graphik_Web_Regular"
            }

    .footer p {
        font-size: 0.8em;
        margin-top: 20px;
        text-align: center;
        color: #000
    }

.footer_up {
    background-color: #E3E1DA;
    font-family: "Graphik_Web_Regular";
    font-size: 1em;
    padding-top: 20px;
    padding-bottom: 20px;
}

ul li a.footertext {
    font-size: 0.8em;
    color: #1E4794;
    text-decoration: underline;
    font-family: "Graphik_Web_Regular"
}

.fs-9 {
    font-size: 0.40rem; /* ~9px */
}

.fs-8 {
    font-size: 0.55rem; /* ~9px */
}

.fs-8p2 {
    font-size: 0.65rem; /* ~10px */
}

.fs-7p5 {
    font-size: 0.75rem; /* ~9px */
}

.fs-6p5 {
    font-size: 0.90rem; /* ~9px */
}


.fs-7 {
    font-size: 0.80rem; /* ~10px */
}

.btn-xs {
    padding: .25rem .4rem;
    font-size: .75rem;
    border-radius: .2rem;
}

.btn-xxs {
    padding: .15rem .2rem;
    font-size: .55rem;
    border-radius: .1rem;
}

.bg-gray {
    background-color: #f5f5f5
}

.bg-yellow {
    background-color: #f8fcd5
}

.tooltip-light {
    --bs-tooltip-bg: #f8f9fa; /* Light background */
    --bs-tooltip-color: #212529; /* Dark text */
}

.tooltip-red {
    --bs-tooltip-bg: #ff0000; /* Light background */
    --bs-tooltip-color: #fff; /* Dark text */
}


.outline-none:focus {
    outline: none;
    border-color: #000;
    box-shadow: none;
}


.chat-box {
    position: relative;
    display: inline-block;
    max-width: 800px;
    padding: 10px 14px;
    background: #f2f2f2; /* Bootstrap primary blue */
    color: black;
    border-radius: 12px;
    margin: 10px;
}

    /* Tip at top-left */
    .chat-box::before {
        content: "";
        position: absolute;
        top: -22px; /* adjust vertical position */
        left: 12px; /* adjust horizontal position */
        border-width: 12px;
        border-style: solid;
        border-color: transparent transparent #f2f2f2 transparent;
    }



.chat-box-yellow {
    position: relative;
    display: inline-block;
    max-width: 800px;
    padding: 10px 14px;
    background: #f8fcd5; /* Bootstrap primary blue */
    color: black;
    border-radius: 12px;
    margin: 10px;
}

    /* Tip at top-left */
    .chat-box-yellow::before {
        content: "";
        position: absolute;
        top: -22px; /* adjust vertical position */
        left: 12px; /* adjust horizontal position */
        border-width: 12px;
        border-style: solid;
        border-color: transparent transparent #f8fcd5 transparent;
    }

.truncate-text {
    max-width: 180px; /* Set the width of the column */
    white-space: wrap; /* Prevent text from wrapping */
    overflow: hidden; /* Hide overflow */
    text-overflow: ellipsis; /* Show ... at the end */
    /* Optional: indicates hoverable */
}

.text-truncate-hover {
    max-width: 180px; /* Set the truncated width */
    white-space: nowrap; /* Keep text in a single line */
    overflow: hidden; /* Hide overflow */
    text-overflow: ellipsis; /* Show "..." at the end */
    transition: max-width 0.3s ease;
    Smooth expand transition */ cursor: pointer;
}

    .text-truncate-hover:hover {
        max-width: none; /* Expand to full width on hover */
        white-space: normal; /* Allow multiple lines if needed */
        background-color: transparent; /* Optional: highlight on hover */
        z-index: 10; /* Ensure it’s above other content */
        position: relative; /* Needed if expanding over other elements */
        /* Optional: some padding when expanded */
    }

.cancelled-row {
    text-decoration: line-through;
    color: red /* optional lighter text */
}

.dataTables_length, .dataTables_filter, .dataTables_info, .dataTables_paginate {
    font-size: 11px;
    margin-bottom: 10px;
}

.dataTables_paginate {
    margin-top: 10px;
}

/* First row of body rounded top corners */
table.dataTable tbody tr:first-child td:first-child {
    border-top-left-radius: 10px;
}

table.dataTable tbody tr:first-child td:last-child {
    border-top-right-radius: 10px;
}

.btn:hover, .blue_btn_sm:hover, .blue_btn:hover, .red_btn:hover, .red_btn_sm:hover, .white_btn:hover, .white_btn_sm:hover, .white_btn_xs:hover, .green_btn:hover {
    border-radius: 5px;
    box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.3);
}




table thead th {
    vertical-align: middle !important;
}

/* DataTable body cells */
table tbody td {
    vertical-align: middle !important;
}

/* Table container for shadow and rounded corners */
table.dataTable {
    width: 100%;
    border-collapse: separate; /* important for border-radius */
    border-spacing: 0;
    font-family: 'Graphik_Web_Regular', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #ffffff;
    border-radius: 10px; /* rounded corners */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* subtle shadow */
    overflow: hidden; /* ensure corners clip the content */
}

    /* Header */
    table.dataTable thead {
        border-style: none;
    }

        table.dataTable thead tr {
            font-weight: bold;
            text-align: left;
            border-bottom-left-radius: 10px; /* bottom left rounded */
            border-bottom-right-radius: 10px; /* bottom right rounded */
        }

    /* Rows */
    table.dataTable tbody td {
        padding: 10px;
        border-bottom: 1px solid #eee;
        color: #555;
    }

    /* Hover effect */
    table.dataTable tbody tr:hover {
        background-color: #f1f1f1;
        cursor: pointer;
    }

/* Pagination buttons */
.dataTables_wrapper .dataTables_paginate .paginate_button {
    background-color: #ffffff;
    border: 1px solid #ccc;
    color: #333 !important;
    padding: 5px 12px;
    margin: 2px;
    border-radius: 4px;
    transition: all 0.2s ease;
}

    .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
        background-color: #4C516D;
        color: #fff !important;
        border: 1px solid #4C516D;
    }

    .dataTables_wrapper .dataTables_paginate .paginate_button.current {
        background-color: #4C516D !important;
        color: #000 !important;
        border: 1px solid #4C516D;
    }

table.dataTable tfoot th,
table.dataTable tfoot td {
    border: none !important;
}

a.blue_btn, a.blue_btn:hover {
    display: inline-block;
    padding-top: 4px;
    padding-bottom: 4px;
    padding-left: 40px;
    padding-right: 40px;
    background-color: #256686;
    font-size: 1.2em;
    font-family: "Graphik_Web_Regular";
    color: #fff;
    text-decoration: none;
    font-weight: 800;
    border: solid 1px #256686;
}

@media (max-width: 768px) {
    a.blue_btn, a.blue_btn:hover {
        display: inline-block;
        padding-top: 4px;
        padding-bottom: 4px;
        padding-left: 10px;
        padding-right: 10px;
        background-color: #256686;
        font-size: 1em;
        font-family: "Graphik_Web_Regular";
        color: #fff;
        text-decoration: none;
        font-weight: 800;
        border: solid 1px #256686;
    }
}


button.blue_btn {
    display: inline-block;
    padding-top: 4px;
    padding-bottom: 4px;
    padding-left: 40px;
    padding-right: 40px;
    background-color: #256686;
    font-size: 0.8em;
    font-family: "Graphik_Web_Regular";
    color: #fff;
    text-decoration: none;
    font-weight: 800;
    border: none;
}

@media (max-width: 768px) {
    button.blue_btn {
        display: inline-block;
        padding-top: 4px;
        padding-bottom: 4px;
        padding-left: 20px;
        padding-right: 20px;
        background-color: #256686;
        font-size: 0.8em;
        font-family: "Graphik_Web_Regular";
        color: #fff;
        text-decoration: none;
        font-weight: 800;
        border: none;
    }
}

    a.blue_lnk, a.blue_lnk:hover {
        color: #256686;
        text-decoration: none;
    }


    a.red_btn, a.red_btn:hover, button.red_btn {
        display: inline-block;
        padding-top: 4px;
        padding-bottom: 4px;
        padding-left: 40px;
        padding-right: 40px;
        background-color: #b32426;
        font-size: 1em;
        font-family: "Graphik_Web_Regular";
        color: #fff;
        text-decoration: none;
        font-weight: 800;
        border: none;
    }

    .hide {
        display: none;
    }


    a.green_btn, a.green_btn:hover, button.green_btn, input.green_btn {
        display: inline-block;
        padding-top: 4px;
        padding-bottom: 4px;
        padding-left: 40px;
        padding-right: 40px;
        background-color: #146636;
        font-size: 1.2em;
        font-family: "Graphik_Web_Regular";
        color: #fff;
        text-decoration: none;
        font-weight: 800;
        border: none;
    }


    a.white_btn, a.white_btn:hover, button.white_btn, input.white_btn {
        display: inline-block;
        padding-top: 4px;
        padding-bottom: 4px;
        padding-left: 40px;
        padding-right: 40px;
        background-color: #fff;
        font-size: 1.2em;
        font-family: "Graphik_Web_Regular";
        color: #256686;
        text-decoration: none;
        font-weight: 800;
        border: solid 1px #256686;
    }

    @media (max-width: 768px) {
        a.white_btn, a.white_btn:hover, button.white_btn, input.white_btn {
            display: inline-block;
            padding-top: 4px;
            padding-bottom: 4px;
            padding-left: 10px;
            padding-right: 10px;
            background-color: #fff;
            font-size: 1em;
            font-family: "Graphik_Web_Regular";
            color: #256686;
            text-decoration: none;
            font-weight: 800;
            border: solid 1px #256686;
        }
    }

    a.white_btn_sm, a.white_btn_sm:hover, button.white_btn_sm, input.white_btn_sm {
        display: inline-block;
        padding-top: 2px;
        padding-bottom: 2px;
        padding-left: 10px;
        padding-right: 10px;
        background-color: #fff;
        font-size: 1em;
        font-family: "Graphik_Web_Regular";
        color: #256686;
        text-decoration: none;
        font-weight: 800;
        border: solid 1px #256686;
    }

    a.white_btn_xs, a.white_btn_xs:hover, button.white_btn_xs, input.white_btn_xs {
        display: inline-block;
        padding-top: 1px;
        padding-bottom: 1px;
        padding-left: 6px;
        padding-right: 6px;
        background-color: #fff;
        font-size: 0.8em;
        font-family: "Graphik_Web_Regular";
        color: #256686;
        text-decoration: none;
        font-weight: 400;
        border: solid 1px #256686;
    }


    a.white_btn_sm_mb, a.white_btn_sm_mb:hover, button.white_btn_sm_mb, input.white_btn_sm_mb {
        display: inline-block;
        padding-top: 2px;
        padding-bottom: 2px;
        padding-left: 3px;
        padding-right: 3px;
        background-color: #fff;
        font-size: 0.8em;
        font-family: "Graphik_Web_Regular";
        color: #256686;
        text-decoration: none;
        font-weight: 400;
        border: solid 1px #256686;
    }

    a.blue_btn_sm, a.blue_btn_sm:hover, button.blue_btn_sm, input.blue_btn_sm {
        display: inline-block;
        padding-top: 3px;
        padding-bottom: 3px;
        padding-left: 10px;
        padding-right: 10px;
        background-color: #fff;
        font-size: 0.8em;
        font-family: "Graphik_Web_Regular";
        color: #fff;
        text-decoration: none;
        font-weight: 400;
        border: solid 1px #256686;
        background-color: #256686
    }


    a.red_btn_sm, a.red_btn_sm:hover, button.red_btn_sm, input.red_btn_sm {
        display: inline-block;
        padding-top: 3px;
        padding-bottom: 3px;
        padding-left: 10px;
        padding-right: 10px;
        background-color: #b32426;
        font-size: 0.8em;
        font-family: "Graphik_Web_Regular";
        color: #fff;
        text-decoration: none;
        font-weight: 400;
        border: solid 1px #b32426;
    }

    ul#featuredlist li {
        position: relative;
        display: inline-block;
        width: 210px;
        height: auto;
        margin-right: 14px;
        margin-bottom: 20px;
        vertical-align: top;
        text-align: left;
        /*background-color:lightgoldenrodyellow;*/
    }

        ul#featuredlist li .itemtitle {
            display: inline-block;
            min-height: 50px;
            max-height: 80px;
            text-align: center;
        }


        ul#featuredlist li.img-thumbnail:hover {
            transform: scale(1.05);
            -webkit-box-shadow: 0px 0px 7px 0px rgba(0,0,0,0.75);
            background-color: #fff;
            -moz-box-shadow: 0px 0px 7px 0px rgba(0,0,0,0.75);
            box-shadow: 0px 0px 7px 0px rgba(0,0,0,0.75);
        }

    .shadowbox {
        border-radius: 10px; /* rounded corners */
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }


    .stepwizard-step p {
        margin-top: 10px;
    }

    .stepwizard-row {
        display: table-row;
    }

    .stepwizard {
        display: table;
        width: 100%;
        position: relative;
    }

    .stepwizard-step button[disabled] {
        opacity: 1 !important;
        filter: alpha(opacity=100) !important;
    }

    .stepwizard-row:before {
        top: 24px;
        bottom: 0;
        position: absolute;
        content: " ";
        width: 100%;
        height: 1px;
        background-color: #256686;
        z-order: 0;
    }

    .stepwizard-step {
        display: table-cell;
        text-align: center;
        position: relative;
    }

    .btn-circle {
        width: 50px;
        height: 50px;
        text-align: center;
        padding: 6px 0;
        font-size: 24px;
        line-height: 1.428571429;
        border-radius: 25px;
    }

    span.cardimg {
        width: 187px;
        height: 30px;
        display: inline-block;
        background-image: url(../images/cards.png);
        background-repeat: no-repeat;
    }


    .menuheader.nav-tabs {
        border-bottom: 1px solid gray; /* Bootstrap primary */
    }

        .menuheader.nav-tabs .nav-link.active {
            border-color: gray gray #fff gray; /* top, sides, bottom */
            font-weight: bolder;
            text-decoration: none;
        }

        .menuheader.nav-tabs .nav-link:hover {
            border-color: gray gray #fff gray;
            text-decoration: none;
            /* Bootstrap primary */
            /* optional: change text color too */
        }


    /*home featured list */
    ul#featuredlist_home {
        text-align: center;
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        list-style: none
    }

        ul#featuredlist_home li {
            width: 25%;
            height: auto;
            margin-bottom: 17px;
            vertical-align: top;
            text-align: left;
            min-height: 300px;
            font-family: 'Graphik_Web_Bold';
            border: solid 1px #ccc;
        }

    @media (max-width: 992px) {
        ul#featuredlist_home li {
            width: 50%; /* 2 per row on tablets */
        }
    }

    @media (max-width: 768px) {
        ul#featuredlist_home li {
            width: 100%; /* 1 item per row */
        }
    }




    ul#featuredlist_home li span {
        display: inline-block;
        text-decoration: none;
        border: none;
        font-family: 'Graphik_Web_Regular';
    }




    ul#featuredlist_home li.img-thumbnail:hover {
        transform: scale(1.01);
        -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
        background-color: #fff;
        -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
        box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
    }

ul#categoryproductlist img:hover {
    transform: scale(1.03);
    z-index:9999
   
}