/*Login Page CSS */

input[type="text"],
input[type="password"] {
    -webkit-appearance: none;
    border-radius: 1px;
    box-sizing: border-box;
    font-size: 1.25em;
    /*height: auto;*/
    height: 25px; /*charmi-20240426*/
    padding: .5em;
    width: 178px; /*ayushi-20240417*/
    color: black; /*ayushi-20240422*/
}

/*Layout Page CSS*/

.center-align{
    width:3%;
}           /*ayushi20240523*/

.align-center {
    width: 3%; /*ayushi20240523*/
}


#LangOption {
    margin-top: 7px;
}          /*charmi-20240513*/

.breadcrumb {
    /*background: -moz-linear-gradient(left, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
    background: -webkit-linear-gradient(left, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
    background: linear-gradient(to right, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);*/ /*charmi-20240418*/
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=1 );
    display: flex;
    gap: 8px;
    background: #e9e9eb;
}

    .breadcrumb li {
        font-size: 12px;
        color: #000000; /*charmi-20240418*/
        font-weight: 400;
    }

        .breadcrumb li a {
            color: #000000; /*charmi-20240418*/
        }

body {
    font-size: small; /*charmi-20240418*/
    background: #f8f8fb;
    color: #031b4e;
    letter-spacing: 0.02rem;
}    /*ayushi-20240416*/

.mR42 {
    margin-right: 2px;
    color: #ffffff; /*charmi-20240418*/
}

.admin fieldset {
    border: 1px solid #ddd !important;
    margin: 0;
    min-width: 0;
    padding: 10px;
    position: relative;
    border-radius: 4px;
    background-color: white;
    padding-left: 18px !important; /*charmi-20240426*/
    margin-bottom: 10px;
}

.nav > li > a {
    position: relative;
    display: block;
    padding: 6px 15px; /*charmi-20240412*/
}

body {
    margin: 0;
    font-family: arial;
    font-family: Arial, Helvetica, sans-serif;
/*    Reshma20230131 add as wrong font loaded from start and then replaced after a while font-size: 14px;*/
    font-weight: 400;
    line-height: 1.5;
    line-height: 1.5;
    color: #212529;
    text-align: left;
    background-color: #fff;
}                  /*ayushi-20240416*/

.container-fluid{
    margin-top:50px;
}                    /* charmi-20240423*/

.sb-sidenav-toggled .navbar.bg-dark {
    margin-left: auto;
    width: 100%;
    transition: all 0.5s ease;
}

.navbar-brand{
    margin-bottom:7px;
}

#logoimg {
    width: 200px;                 /*charmi-20240418*/
    height: 48px;
    margin-top: 1px;
}

.sb-sidenav-light {
    background-color: #2D85C9;
}

.nav ul li ul {
    padding: 10px 0;
    width: 95%;
    float: right;
}

.ulDropdown {
    display: none;
}

#sub-sidebaricon {
    margin-left: 100px;              /*charmi-20240418*/
    transition: all 0.3s ease;
}

.rotate {
    transform: rotate(270deg);
}

#adminimg, #empimg, #posimg, #inventoryimg, #invoiceimg, #dasbrdimg, #rptimg {
    width: 29px;
}

.navbar.bg-dark .btn {
    padding-left: 13px;
    padding-right: 13px;
    /*background: #d5e7f5;*/ /*Ayushi20240415*/
}

.sb-topnav.navbar-dark #sidebarToggle {
    color: #ffffff;               /*charmi20240418*/
    /*background: #d5e7f5;*/
}

/*charmi-20240418 layout page*/
@media only screen and (min-width: 500px) {
    .sb-sidenav-toggled {
        width: 100%;
    }

    #layoutSidenav_nav {
        width: 20%;
    }

    .navbar.bg-dark {
        margin-left: 224px;
    }
}
  /* posmain page addtocart grand total button design urvashee29240528*/

.cartitem {
    position: fixed;
    width: 33.7%;
    padding-top: 30px;
    bottom: 176px;
    /*border: 3px solid #8AC007;*/
    color: #374151;
    background-color: #FFF;
    box-shadow: 0;
    flex: 1 1 29%;
    text-align: center;
}


/*Employee DashBoard CSS Ayushi20240412*/
#DashFldSet {
    height: max-content;
}

#DashTitle {
    display: block;
    max-width: 100%;
    white-space: normal;
    font-weight: bold;
    font-size: 14px;
    margin-bottom: 0.5rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    text-align: left;
    margin-right: auto;
    background-color: #2D85C9;
    color: white;
    padding: 5px 10px;
}

#DashCard {
    position: relative;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    padding: 0px 8px;
}

#txtDashBrd {
    color: black;
    font-size: 20px;
    text-decoration: none;
}

#imgEmpDashBrd {
    width: 40px;
    height: 40px;
    fill: currentColor;
    position: center;
    border-color: #D5E7F5;
    margin-right: 45px;
    color: #2D85C9;
    border-radius: 6px;
    margin-bottom: 10px;
}

#CardDash {
    margin: 9px;
}

#qtytotal{

}
/*Invoice/Pos dashboard css urvashee */
#invdashfieldset {
    height: max-content;
}

#customer1 {
    display: block;
    max-width: 100%;
    white-space: normal;
    font-weight: bold;
    font-size: 14px;
    margin-bottom: 0.5rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    text-align: left;
    margin-right: auto;
    background-color: #2D85C9;
    color: white;
    padding: 5px 10px;
}

.col-sm-3 {
    position: relative;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    padding: 0px 8px;
}

#txtinvoice {
    color: black;
    font-size: 20px;
    text-decoration: none;
}

#imginvoice {
    width: 40px;
    height: 40px;
    fill: currentColor;
    position: center;
    border-color: #D5E7F5;
    margin-right: 45px;
    color: #2D85C9;
    border-radius: 6px;
    margin-bottom: 10px;
}

#cardinvoice {
    margin: 9px;
}

/*Employee Page CSS Ayushi20240415*/

#databuttons{
    margin-top:-26px;    /*charmi-20240426*/
}

.select-med {
    width: 178px; /*charmi-2024026*/
    height: 25px; /*charmi-2024026*/
    font-size: 14px;
}

.nav > li > a:focus, .nav > li > a:hover {
    text-decoration: none;
    /*background-color: #eee; avani*/
    background-color: #87abcb;          /*Ayushi20240415*/
    color: white;
}

.btn-primary {
    color: #fff;
    background-color: #006ecc;   /*Ayushi20240415*/
    border-color: #556ee6;
}

.EmpinnerBlock {
    margin-left: 20px; /*ayushi*/
    padding: 7px;
    padding: 1.25rem;
    border: 1px solid #deebfd !important;
    margin-bottom: 1.3rem;
    /*box-shadow: -8px 12px 18px 0 #dadee8;*/
}

#navtabs {
    display: flex;
    gap: 2px;
    margin-left: 19px;             /*charmi-20240426*/
}

#Emptabs, #Resumetabs, #WorkInfotabs, #PrivateInfotabs, #Translationtabs {
    max-width: 47mm;
    max-height: 200mm;
    padding: 6px 15px;
    overflow: auto;
}

.event-tool {
    margin-left: 54px;        /*charmi-20240426*/
    margin-bottom: 15px;
}

.innerBlock {
    background-color:white; 
    margin-right:20px;         /*charmi-20240423*/
    margin-left: 20px; /*ayushi*/
    padding: 23px;       /*charmi-20240426*/
    border: 1px solid #deebfd !important;
    margin-bottom: 1.3rem;
    box-shadow: -8px 12px 18px 0 #dadee8;
}

/*Department CSS charmi-20240427*/

#Departmenttabs {
    max-width: 47mm;
    max-height: 200mm;
    padding: 6px 15px;
    overflow: auto;
}

.DepartmentinnerBlock {
    margin-left: 20px;
    padding: 7px;
    padding: 1.25rem;
    border: 1px solid #deebfd !important;
    margin-bottom: 1.3rem;
}

/*Product CSS charmi-20240427*/

#Producttabs, #GeneralInfotabs, #Salestabs, #Purchasetabs {
    max-width: 47mm;
    max-height: 200mm;
    padding: 6px 15px;
    overflow: auto;
}

.ProductinnerBlock {
    margin-left: 20px;
    padding: 7px;
    padding: 1.25rem;
    border: 1px solid #deebfd !important;
    margin-bottom: 1.3rem;
}

/*Category CSS charmi-20240427*/
#imgcat {
    overflow: hidden;
    position: relative;
    width: 200px;
    height: 90px;
}

#imagePreview {
    height: 150px;
}           /*ayushi20240523*/

#Catetabs {
    max-width: 47mm;
    max-height: 200mm;
    padding: 6px 15px;
    overflow: auto;
}

.CatinnerBlock {
    margin-left: 20px; 
    padding: 7px;
    padding: 1.25rem;
    border: 1px solid #deebfd !important;
    margin-bottom: 1.3rem;
}

/*POSCartList CSS charmi-20240511*/

.order-container {
    margin-top: -154px;                    /*charmi-20240527*/
    width: 194%;
}

#shopping-cart {
    padding: 149px;
}               /*charmi-20240525*/

#listofAddProds {
    margin-left: -76px;          /*charmi-20240527*/
    width: 152%;                   /*charmi-20240527*/
    border-radius: 5px;
    background-color: #dfe0e2;
}                 

.product-name {
    font-weight: 600;
    font-size: inherit;
    box-sizing: border-box;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.product-price {
    font-weight: 600;
    font-size: initial;
}

#divPOSCart {
    overflow-x: hidden;
    height: 320px;
}                        /*charmi-20240525*/

#POSDefaultcart {
    margin-left: -18px;
    margin-top: -22px;
}                     /*charmi-20240525*/

/*#PosInternalNoteModal css tithi-15/05/2024*/
#PosInternalNoteModal {
    display: none;
    position: fixed;
    z-index: 1;
    padding-top: 100px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.4);
}

#POSInternalNoteMdl-Ctn {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 63%;
    margin-top: 30px;
    margin-left: 290px;
    height: 300px;
}

#txtInternalNote {
    font-weight: 600;
    font-size: larger;
}/*charmi-20240515*/

#POSInternoteHeader {
    margin-top: -20px;
    background: white !important;
}/*charmi-20240515*/

.closeInternalNote {
    margin-top: -5px;
    font-weight: 600;
    font-size: 21px;
    float: right;
}/*charmi-20240515*/

#txtareaNote {
    max-width: 100% !important;
    margin-top: 10px;
}/*charmi-20240515*/

#InternalNotebtn {
    font-weight: 600;
    color: black !important;
    border-color: #d3d3d3;
    background-color: #d3d3d3;
}/*charmi-20240515*/

#bodyInternalNote {
    border-bottom: 1px solid lightgrey;
}

#POSInternalNotefooter {
    margin-top: 10px;
}/* charmi-20240515*/

.Applybtn {
    font-weight: 600;
}/*charmi-20240515*/

/*POSCustomerNoteModal CSS tithi20240515*/

#POSCustomerHeader {
    margin-top: -20px;
    background-color: white !important;
}
/*charmi-20240515*/

#txtCustomerNote {
    font-size: large;
    font-weight: 600;
}
/*charmi-20240515*/

.closeCustomerNote {
    margin-top: -5px;
    font-weight: 600;
    font-size: 21px;
    float: right;
}
/*charmi-20240515*/

#bodyCustmNote {
    border-bottom: 1px solid lightgrey;
}
/*charmi-20240515*/

#POSCustomerNotefooter {
    margin-top: 10px;
}
/*charmi-20240515*/

#DiscardCustbtn {
    font-weight: 600;
    color: black !important;
    border-color: #d3d3d3;
    background-color: #d3d3d3;
}       /*charmi-20240515*/

#ApplyCustbtn {
    font-weight: 600;
}       /*charmi-20240515*/

/*#imgPOSCalc {
    height: 20px;
}*/                        /*charmi-20240525*/

#PosCustomerNoteModal {
    display: none;
    position: fixed;
    z-index: 1;
    padding-top: 100px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.4);
}

#POSCustomerNoteMdl-Ctn {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 63%;
    margin-top: 30px;
    margin-left: 290px;
    height: 300px;
}

/*POS MoreOption Modal CSS Ayushi20240515*/

#POSMoreOptHeader {
    background-color: white !important;
    margin-top: -19px;
}       /*charmi-20240515*/

.closeMoreOpt {
    font-weight: 600;
    font-size: 22px;
    float: right;
}       /*charmi-20240515*/

#lstofMoreOption {
    padding: 8px;
    border-bottom: 1px solid lightgrey;
}   /*charmi-20240515*/

#PosMoreOptModal {
    display: none;
    position: fixed;
    z-index: 1;
    padding-top: 50px;
    left: 0;
    top: 0;
    width: 110%;
    height: 150%;
    overflow: auto;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.4);
}

#POSMoreOptMdl-Ctn {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 63%;
    margin-top: 30px;
    margin-left: 290px;
    height: 300px;
}

/*POS Customer Modal CSS charmi-20240515*/

#POSCutomerlstMdl-Ctn { /*tithi-20240510*/
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 63%; /*charmi-20240506*/
    margin-top: 30px;
    margin-left: 290px; /*charmi-20240506*/
    height: 346px; /*charmi-20240515*/
    overflow-y: auto;
}

#PosCustomerModal { /*tithi-20240510*/
    display: none;
    position: fixed;
    z-index: 1;
    padding-top: 100px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.4);
}

#POSCustHeader{
    margin-top:-15px;
    background:none !important;
}

#custmTbl{
     margin-left:-13px;
}

#th-custm {
    background-color: #2D85C9 !important;
}

#addProdText {
    margin-left: 31px;
}       /*charmi-20240515*/

#imgShopcart{
    margin-left:60px;
}       /*charmi-20240515*/

/*POS_main dashboard css urvashee */
#RightAroowPosPay{
    height:15px;
}

#POSCalc {
    width:452px;           /*charmi-20240525*/
    margin-top: 375px;        /*charmi-20240525*/
    position: fixed;
}               

.Search {
    margin-left: 55px;
}                 /*charmi-20240510*/

#PEmp {
    margin-top: -21px;
    margin-left: 38px;
    color: white;
    font-weight: 600;
    text-transform: capitalize;
}            /*charmi-20240510*/

#PLogin {
    margin-top: -21px;
    margin-left: 38px;
    color: white;
    font-weight: 600;
    text-transform: capitalize;
}              /*charmi-20240510*/

#LogonSession {
    margin-top: 10px;
    margin-left: 460px;
}         /*charmi-20240525*/

#divSession{
    margin-top:-9px;
}         /*charmi-20240525*/
 
span.icon {
    /*  padding: 10px 13px;*/ /* Urvashee*/
    color: #2D85C9;
    border-radius: 6px;
    margin-bottom: 14px;
    background: #d5e7f5;
}

#aTagText{
    padding:8px;
}     /*charmi-20240513*/

#drplist {
    color: white;
    margin-left: 31px;
}            /*charmi-20240525*/

#myDrplist{
    width:10%;
    border-radius:4px;
    right:2px;
    margin-top:22px;
}          /*charmi-20240513*/

#POSlang {
    margin-left: 45px;
    margin-top: -4px;
}     /* charmi-20240525*/

#colTABLES {
    margin-top: 3px;
    margin-left: 8px;
}            /*charmi-20240525*/

#POSnavbar {
    padding: 11px;
    margin-left: 0px;
}      /* charmi-20240427*/

#catpos {
    font-weight: 600; /* charmi-20240509*/
    text-transform: UPPERCASE; /* charmi-20240509*/
    height: 85px; /*charmi-20240509*/
    text-align: center;
    background-color: #5495bd; /* charmi-20240509*/
    width: 134px; /*charmi-20240509*/
    border-radius: 5px;
    margin-right: 4px;
    display: inline-block; /*charmi-20240506*/
}

.card-main {
    font-weight: 600; /* charmi-20240509*/
    text-transform: UPPERCASE; /* charmi-20240509*/
    position: relative;
    background: #bfa690; /* charmi-20240509*/
    height: 181px; /*charmi-20240509*/
    width: 134px; /*charmi-20240523*/
    margin-right: 4px;
    border-radius: 5px;
}

#cornercrd {
    background-color: #475671; /* charmi-20240510*/
    width: 50px;
    height: 50px;
    transform: rotate(45deg);
    top: -25px;
    right: -25px;
}

#info-icon {
    color: white;
    transform: rotate(-43deg);
    margin-left: 20px;
    margin-top: 30px;
}
/*charmi-20240510*/

.corner {
    padding: 3px;
    position: absolute;
    right: 0px;
}

.img-card {
    height: 120px;
    width: 100%;
    border-radius: 5px;
}

.padding {
    margin: 0;
    padding-top: 2px;
    padding-left: 10px;
    padding-right: 10px;
}

#imgpos {
    height: 70px;
    border-radius: 5px;
}

.subpads .numpad {
    width: 60%;
}

#leftpanepos {
    border-inline-end: 2px solid #E9ECED;
    writing-mode: horizontal-tb;
    width: 103%;                  /*charmi-20240525*/
}

#cal {
    width: 99.5%;
    padding-top:31px;    /*urvashee20240528*/
   /* margin-bottom:30px;*/
}

#paymentpos {
    color: #FFF;
    background-color: #2D85C9; /*Ayushi20240503*/
    border-color: #2D85C9; /*Ayushi20240503*/
}

#btnleftside {
    color: #374151;
    background-color: #FFF;
    /*border-color: #FFF;*/
    box-shadow: 0;
    flex: 1 1 29%;
    padding: 8px;
    text-align: center;
}

#txtpos {
    text-align: justify;
    font-weight: bold;
}

#payicon {
    /*display: inline-block;*/
    /* font-family: 'odoo_ui_icons';*/
    /*speak: never;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    font-weight: 400;*/
    color: #FFF;
}

#btncal {
    width: 60%;
}

#catimg {
    background: transparent;
    height: 6rem;
    width:10rem;      
    vertical-align: middle;
    padding-top: 8px;
}

.intro {
    background-color: #B8E3FD !important;
}

#txtcatpos {
    font-weight: 600;
    margin-top: 5px;
    box-sizing: border-box;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.p-1 {
    padding: 4px !important;
}

.gap-1 {
    gap: 4px !important;
}

.py-1 {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
}

.mx-2 {
    margin-right: 8px !important;
    margin-left: 8px !important;
}

#posnav{
    width:100%;
    margin-left:0px;
}

/*#POSlangchng {
    top: -22px;
}*/

#POSBody {
    background-color: #e9e9eb;
}

#Userimg{
    margin-left:8px;           /*charmi-20240510*/
    height:22px;
}

form.Search input[type=text] {                   /*Ayushi20240506*/
    padding: 10px;
    font-size: 13px;
    border: 1px solid grey;
    float: left;
    width: 80%;
    background: #f1f1f1;
    margin: auto;
    max-width: 191px;
}

form.Search button { /*Ayushi20240506*/
    float: left;
    width: 12%;               /*charmi-20240525*/
    padding: 6px;                 /*charmi-20240525*/
    background: #bababa;
    color: white;
    font-size: 11px;             /*charmi-20240525*/
    border: 1px solid grey;
    border-left: none;
    cursor: pointer;
}

    form.Search button:hover { /*Ayushi20240506*/
        background: #9b9999;
    }

form.Search::after {                            /*Ayushi20240506*/
    content: "";
    clear: both;
    display: table;
}

#searchbar {
    margin-top: 2px;
}                                               /*charmi-20240525*/

#divProd{
    display:contents;
}

/*POSLayout charmi-20240521*/

#txtTbl {
    font-weight: bold;
    font-size: initial;
    color: white;
}

#imglftarw {
    margin-top: -4px;
    height: 19px;         /*charmi-20240525*/
}

/*POS DATA CSS tithi-20240427*/

.POSinnerBlock {
    margin-left: 20px;
    padding: 7px;
    padding: 1.25rem;
    border: 1px solid #deebfd !important;
    margin-bottom: 1.3rem;
}

#POStabs {
    max-width: 47mm;
    max-height: 200mm;
    padding: 6px 15px;
    overflow: auto;
}

/*Contract CSS charmi-20240426*/
.ContractinnerBlock {
    margin-left: 20px;
    padding: 7px;
    padding: 1.25rem;
    border: 1px solid #deebfd !important;
    margin-bottom: 1.3rem;
    /*box-shadow: -8px 12px 18px 0 #dadee8;*/
}

#contTabs, #SalInfoTabs, #ContDtlTabs {
    max-width: 47mm;
    max-height: 200mm;
    padding: 6px 15px;
    overflow: auto;
}

#cName_ContractStartDate, #cName_ContractEndDate {
    width: 178px;
    height: 25px;
}



/*POS _TilePOS Page CSS*/  /*Ayushi20240427*/

#POStxt{
    margin-left:18px;
    font-weight:bold;
    font-size:17px;
}

#txtAllPOS {
    margin-left: -228px;
    font-size: 15px;
    font-weight: bold;
}

#POSDashCard {
    /*display:inline-block;*/
    position: relative;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    padding: 0px 8px;
}

#cardPOS{
    margin-right:11px;
    width:357px;
}

#POSBtn {
    padding: 4px;
    width: 141px;
    margin-left: 20px;
    margin-top: 55px;
}

#txtClosing{
    margin-left:185px;
    margin-top:-19px;
}

/*POSLogon Page CSS*/   /*Ayushi20240429*/

.POSLogoninnerBlock {
    background-color: #fff;
    margin-right: 20px;
    margin-left: 390px;
    padding: 23px;
    border: 1px solid #deebfd !important;
    margin-bottom: 1.3rem;
    /*box-shadow: -8px 12px 18px 0 #dadee8;*/
    width: 40%;
    margin-top: 214px;
    border-radius: 2px;
}

#poslogontitle{
    text-align:center;
    font-weight:bold;
    font-size:16px;
}

#txtCashier {
    height: 102px;
    margin-top: 20px;
    margin-left: 69px;
}

#txtscanbadge{
    margin-left:12px;
}

#txtor {
    margin-top: 49px;
    font-size: 19px;
}

/*POS Product Info Modal CSS charmi-20240511*/

.closeProdInfo {
    
    color: #544c4c;
    float: right;
    font-size: 25px;
    font-weight: bold;
    /*margin-left: 90%;*/
    margin-top: -7px;
}

    .closeProdInfo:hover, .closeProdInfo:focus {
        color: black;
        text-decoration: none;
        cursor: pointer;
    }

.titleProdInfo {
    font-weight: 600;
    font-size: large;
    color: #000;
}

#prodInfoHeader {
    margin-top:-12px;
    background-color:white !important;
    padding: 10px;
}      /*charmi-20240515*/

#prodInfoModal {
    display: none;
    position: fixed;
    z-index: 1;
    padding-top: 50px;
    left: 0;
    top: 0;
    width: 110%;
    height: 150%;
    overflow: auto;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.4);
}  /* charmi-20240510*/

#prodinfoContent {
    display: block;
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 50%;
    margin-top: 70px;
    margin-left: 361px;
    height: 538px;
    overflow-y: auto;
}        /*charmi-20240515*/

#prodPrice {
    font-weight: 600;
    margin-top: -4px;
    text-align: right;
    font-size: 20px;
}       /*charmi-20240515*/

#product_Name {
    font-size: 20px;
}        /* charmi-20240515*/

#prodName {
    border-top: 1px solid #c5c5c5;
    height:100px;
    background-color: #b4d9fa;
}           /*charmi-20240515*/

.titleFinancials, .titleQuantity, .titleOrder {
    padding: 7px;
    font-size: 18px;
}          /*charmi-20240515*/

#prodFinancials, #prodQuantity, #prodOrder {
    border-bottom: 1px solid #c5c5c5;
}          /*charmi-20240515*/

#POSProdInfofooter{
    margin-top:9px;
}       /*charmi-20240515*/      


/*POSMain Scrollbar CSS charmi-20240511*/
::-webkit-scrollbar {
    height: 6px;
    width: 6px;
    border: 1px solid none;
}        /*charmi-20240509*/

::-webkit-scrollbar-thumb {
    background: #bdb9bd;
}

.Itemcontainer {
    margin-top: 15px;
    height: 400px;
    width: 100%;
    white-space: nowrap;
    overflow-x: hidden;
    overflow-y: auto;
}         /* charmi-20240509*/

.Categorycontainer {
    height: 111px;
    width: 100%;
    white-space: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
}           /*charmi-20240509*/

/*select Cashier list Model CSS*/

#cashierLstModal {
    display: none;
    position: fixed;
    z-index: 1;
    padding-top: 100px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.4);
}
#cashierlstMdl-Ctn {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 46%; /*charmi-20240506*/
    margin-top: 219px;
    margin-left: 341px; /*charmi-20240506*/
    height: 210px; /*charmi-20240506*/
    overflow-y: auto;
}
.close {
    color: #ffdff0;
    float: right;
    font-size: 28px;
    font-weight: bold;
    margin-left: 98%;
    margin-top: -29px;
}
    .close:hover,
    .close:focus {
        color: #fff;
        text-decoration: none;
        cursor: pointer;
    }

.titleSelectCashier{
    font-size:17px;
    color:#fff;
}

.CashierLstHeader {
    padding: 15px;
    border-bottom: 1px solid #e5e5e5;
    /*Reshma20220315 Add New*/
    background: #2D85C9;
    border-bottom-right-radius: 4px;
    border-top-right-radius: 4px;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}


/*POSOpenBalance CSS charmi-20240429*/

/*.OpenBalinnerBlock {
    background-color: white;
    margin-right: 20px;
    margin-left: 390px;
    padding: 23px;
    border: 1px solid #deebfd !important;
    margin-bottom: 1.3rem;
    width: 40%;
    margin-top: 214px;
}

#OpenBalTxt {
    font-weight: bold;
    font-size: 18px;
}

#txtbxOpenCash {
    border: 1px solid lightgrey;
    height: 36px !important;
}

#imgPOSCoinsbg {
    margin-top: -37px;
    margin-left: 178px;
    width: 20px;
    background-color: #e7e9ed;
    border-color: #e7e9ed;
}

#imgPOSCoins {
    margin-left: -15px;
    width: 30px;
}

#colseimg {
    margin-left: 156px;
    margin-top: -23px;
    width: 10px;
}
*/      /*urvashee14052024*/

/*POS MoreOption Modal CSS Ayushi20240515*/

#colMoreOption {
    margin-left: -7px;
}
/*charmi-20240517*/

#btnMoreOptns {
    border: none;
    height: 36px;
    text-align: left;
    width: 100%;
    padding: 5px;
}
/*charmi-20240517*/

#POSMoreOptHeader {
    background-color: white !important;
    margin-top: -19px;
}
/*charmi-20240515*/

.closeMoreOpt {
    font-weight: 600;
    font-size: 22px;
    float: right;
}
/*charmi-20240515*/

#lstofMoreOption {
    padding: 8px;
    border-bottom: 1px solid lightgrey;
}
/*charmi-20240515*/

#PosMoreOptModal {
    display: none;
    position: fixed;
    z-index: 1;
    padding-top: 50px;
    left: 0;
    top: 0;
    width: 110%;
    height: 150%;
    overflow: auto;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.4);
}

#POSMoreOptMdl-Ctn {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 63%;
    margin-top: 30px;
    margin-left: 290px;
    height: 300px;
}


/*Coins & Bills CSS charmi-20240430*/

#myModal {
    
    /*position: absolute !important;
    top: 186px !important;
    left: 41px !important;*/
}

#openingNotes{
    max-width:655px !important;

}

#openbalancecon {
    background-color: white;
    top: 0px;
    left: 0px;
}

.modal-dialog-centered {
    max-width: 650px;
}

#opensessionheader {
    align-items: center;
    justify-content: space-between;
    padding: 16px 16px;
    border-bottom: 1px solid var(--border-color, #d8dadd);
    border-top-left-radius: calc(0.25rem - 1px);
    border-top-right-radius: calc(0.25rem - 1px);
    background-color: white;
}

#opensessionheaderh4 {
    margin-top: 0;
   /* margin-bottom: 8px;*/
    font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Ubuntu, "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    font-weight: 600;
    line-height: 1.2;
    color: #111827;
    font-size: large;
}

.modal-title{
    margin-bottom:0;
    line-height:1.5;
}

#opensesinput {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    min-width: 60px !important;
    /* border: 1px solid lightgrey;
    height: 36px !important;*/
}

/*.border-0{
    border:0 !important;
}*/

.mx-2{
    margin-right:8px !important;
    margin-left:8px !important;
}


#imgPOSCoinsbg {
    /*margin-top: -37px;
    margin-left: 178px;*/
    width: 50px !important;
    background-color: #e7e9ed;
    border-color: #e7e9ed;
    padding-left: 10px;
    padding-right: 10px;
}

#imgPOSCoins {
    /*margin-left: -15px;*/
   /* width: 30px !important;*/
   /* position:inherit;*/
    height:40px !important;
}

#opensessionfooter {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    -webkit-box-pack: end;
    /* justify-content: flex-end; */
    padding: 15.5px;
    border-top: 1px solid var(--border-color, #d8dadd);
    border-bottom-right-radius: calc(0.25rem - 1px);
    border-bottom-left-radius: calc(0.25rem - 1px);
    justify-content: flex-start !important;
}

#btnopensession {
    color: #FFF;
    /*background-color: #714B67;*/
    border-color: #714B67;
}


/*coins & bills css urvashee-20240515*/

#coinsbills {
    display: grid;
    grid-template-rows: repeat(calc(15/2),auto);
    grid-auto-flow: column;
}
#coinscon {
    background-color: #FFF;
    max-height: 100%;
    position: relative;
    display: flex;
    background-clip: padding-box;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 0.25rem;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    outline: 0;
    width: 100%;
}

.my-1 {
    margin-top:4px !important;
    margin-bottom:4px !important;
}

.price {
    margin-left: 4px !important;
}

#coinspsms{
    width:50% !important;
    align-items:center;
    position:relative;
    display:flex !important;
}

#coinbtnpsms {
    padding-left: 5px;
    padding-right: 5px;
    height: 35px;
    background: #e7e9ed !important;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

#coininppsms {
    position: relative;
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 auto;
    flex: 1 1 auto;
    width: 1% !important;
    min-width: 0;
    /*margin-left: -1px;*/
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    height:35px;
}

#coinicon {
    color: #374151;
    height: 13px;
}

#coinbillbox {
    margin-left: 40px;
    margin-right: 40px;
}

#coinsclose {
    color: black;
    float: right;
    /*font-size: 28px;
    font-weight: bold;
    margin-left: 98%;
    margin-top: -29px;*/
    cursor: pointer;
    margin-top: 0;
    /* margin-bottom: 8px;*/
    font-weight: bold;
    line-height: 1.2;
    color: #111827;
    font-size: large
}


/*/*Coins & Bills CSS charmi-20240430*/
/*.CoinsinnerBlock {
    background-color: white;
    margin-right: 20px;
    margin-left: 300px;
    padding: 23px;
    border: 1px solid #deebfd !important;
    margin-bottom: 1.3rem;
    width: 55%;
    margin-top: 160px;
}

#CoinsTxt {
    font-size: 18px;
    font-weight: bold;
}

.close {
    color: #544c4c;
    float: right;
    font-size: 28px;
    font-weight: bold;
    margin-left: 98%;
    margin-top: -29px;
}

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

.minus, .plus {
    font-size: 21px;
    width: 33px;
    height: 33px;
    background: #cdcdcd;
    border-radius: 4px;
    padding: 0px 5px 8px 5px;
    border: 1px solid #ddd;
    display: inline-block;
    vertical-align: middle;
    text-align: center;
    cursor: pointer;
}

#inpcoins {
    height: 34px;
    width: 158px;
    text-align: center;
    font-size: 18px;
    border: 1px solid #ddd;
    border-radius: 4px;
    display: inline-block;
    vertical-align: middle;
}

#coinsname {
    margin-bottom: 8px;
}

#txtTotal {
    margin-left: 4px;
    font-weight: 600;
}

#btnConfirm {
    height: 40px;
    width: 90px;
}

#txtConfirm {
    margin-top: 3px;
    margin-left: -17px;
    font-size: 18px;
    font-weight: 500;
}*/


/*Inventory Dashboard CSS charmi-20240517*/

#imgInventory {
    width: 40px;
    height: 40px;
    fill: currentColor;
    position: center;
    border-color: #D5E7F5;
    margin-right: 45px;
    color: #2D85C9;
    border-radius: 6px;
    margin-bottom: 10px;
}



/*pospayment tithi-20240429*/




#imgPOSPayment {
    height: 14px;
}
/*charmi-20240517*/

#txtPOSpayValidate{
    margin-top:10px;
}

#btnback {
    margin-left: 18px;
    margin-top: 10px;
}

#Titlepayment {
    margin-top: 8px;
}

#txtpayment {
    font-size: 18px;
    font-weight: bold;
}

#divpayment {
    margin-top: 11px;
    border-bottom: 1px solid lightgrey;
    position: relative;
    overflow-y: auto;
}

#calc {
    background-color: white;
    border-bottom: 1px solid white;
    padding: 10px;
    height: 124px;  
}

#totalqtypay {     /*urvashee20240529*/
    display: flex;
    justify-content: center;
    font-size: 33px;
    padding:30px;
   
}

/*#txtpaypos{
    display:flex;
    justify-content:center;
    font-size:12px;

}*/

#customertxt {
    padding: 6px;
    border-bottom: 1px solid grey;
}

#changetxt {
    float: right;
    margin-top: -19px;
}

#remainingtxt {
    margin-top: 3px;
}

#btncalPay {
    padding: 3px;
    height: 70%;
}

#blank {
    color: blueviolet;
}

#btncustomer, #btninvoice, #btnpaymethod, #btnbank, #btnsumm {
    width: 338px;
    text-align: left;
    background-color: white;
    font-weight:bold;

}

#Paycontainer {
    background-color: #e9e9eb;
}

#btnscalc {
    background-color: white;
}

#left-content {
    margin-left: -13px;
}

#buttonback {
    margin-top: 4px;
    background-color: gainsboro;
}

#right-content {
    margin-left: -3px;
}

#btnVald {
    margin-top: 400px;
    height: 100px;
    width: 338px;
    background-color: #2D85C9;
    position: fixed;
}

#paybtn {
    width: 338px;
    position: fixed;
    height: 250px;
    overflow-y: auto;
    overflow-x: hidden;   /*ayushi20240523*/
}


/*POSOrders CSS charmi-20240514*/

#orders-cart {
    padding: 158px;
}

#btnLoadOrder {
    color: white;
    font-size: 40px;
    font-weight: 900;
    border-color: #2D85C9;
    background-color: #2D85C9;
    width: 106%;
    height: 116px;
    margin-left: -4px;
}

#rowNavOrder {
    background-color: darkgray;
    margin-top: 5px;
    padding: 8px;
}

#right-sideOrders {
    border-left: 1px solid white;
}

.innerBlock-Orders {
    margin-left: -19px;
    width: 102%;
    border: 1px solid lightgrey;
}

#Backbtn {
    font-weight: 600;
    background-color: white;
    border-radius: 4px;
    border: 1px solid white;
    height: 32px;
    width: 85px;
}

#btnNewOrder {
    border-radius: 4px;
    border: 1px solid #2D85C9;
    height: 32px;
    background-color: #2D85C9;
    color: white;
    font-weight: 600;
    font-size: initial;
    width: 96px;
    margin-left: -15px;
}

#search-input {
    border-color: white;
    background-color: white;
}

.btnSearch {
    width: 56px;
    border: none;
    padding: 7px;
    background-color: white;
}

#searchCol {
    margin-left: -5px;
}

#SklSearchDrpIco {
    width: 155px;
    padding: 4px;
}

#lstActvOrdr {
    padding: 15px;
    font-size: small;
}

.indented {
    text-indent: 1em;
}

#dltimg {
    height: 20px;
}

th {
    background-color: black;
    color: white;
}

table {
    margin-left: -24px;
    width: 103%;
}

tr:nth-child(even) {
    background-color: #cdcdcd;
}

th, td {
    padding: 12px;
    text-align: left;
}








a:hover {
    text-transform: none;
}

/*Reshma20220923 Add ThemeColor Class for Ticket Screen */
.ticketScreenTheme {
    margin-bottom: 25px;
    background-color: #8BAEF4;
    color: white;
    border-color: #8BAEF4;
    font-size: 22px;
}

/*Reshma20230609*/
/*To make Color controls at same alignment*/
.theme li label {
    width: 35%;
    line-height: 32px;
}
/*Css For Choose File(Upload File)*/
.custom-file-wrp {
    display: flex;
    justify-content: center;
    align-items: center;
}
/*Jayvin20230708*/
.chooseFile {
    display: flex;
    gap: 20px;
    align-items: center;
    flex-wrap: nowrap;
}

.filename {
    background: #fff;
    border: 0px solid #ddd;
    width: fit-content !important;
    color: #000000; /*#999;*/
    /*Jayvin20230708*/
    flex-shrink: 0;
    padding-top: 0px;
    white-space: nowrap;
}

.custom-file {
    cursor: pointer;
    color: #fff;
    background: #e5e5e5; /*#DDD;*/
    border: 1px solid #000000;
    justify-content: center !important;
    margin-left: 5px;
    -webkit-border-radius: 2px;
    /*Jayvin20230708*/
    flex-shrink: 0;
    color: black;
    font-weight: 100;
    width: fit-content !important;
    height: 31px;
}
/*Reshma20230706 Jayvin20230708 Set Default Icon Css*/
.setDefaultIcon {
    position: absolute;
    right: 10px;
    top: 10px;
    white-space:nowrap;
}
/*Reshma20220429 Class for Dashboard*/
    .innerBlock.paddingDRL {
        /*padding: 30px 65px;*/
        padding: 10px 11px;
    }

.paddingRL .form-group {
    margin-bottom: 12px;
}

.overview #enddatepicker {
    width: 94px !important;
    font-family: Arial, Helvetica, sans-serif;
    padding: 5px;
}

.overview .datepicker {
    width: 94px !important;
    font-family: Arial, Helvetica, sans-serif;
    padding: 5px;
    font-size: 14px;
}

.overview .border {
    border: 1px solid #87aef7 !important;
}

.mrB10 {
    margin-bottom: 10px;
}

.height100per {
    height: 100%;
}

.pd5 {
    /*padding: 5px;*/
    padding: 4px;
}

.statistics_Header {
    background: #87aef7;
    padding: 5px 10px;
    color: white;
}

.fnt18 {
    /*font-size: 17px;*/
    font-size: 14px;
    padding-top: 4px;
    white-space: nowrap;
    width: 30px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
}

.overview .btn-primary {
    color: #87aef7;
    background-color: whitesmoke;
    /* border-color: black !important; */
    margin-left: 3px;
}

.to {
    padding: 0.375rem 0.75rem;
    /*font-size: 1rem;*/
    font-size: 14px;
}

.mrB10 {
    margin-bottom: 10px;
}

.ui-datepicker .ui-datepicker-header {
    position: relative;
    padding: .5em 0;
}

.ui-datepicker-next .ui-icon {
    background-image: url(../Content/images/next.png);
    background-position: center;
    width: 30px;
    height: 30px;
    background-size: contain;
}

.ui-datepicker-prev .ui-icon {
    background-image: url(../Content/images/prev.png);
    background-position: center;
    width: 30px;
    height: 30px;
    background-size: contain;
}

.ui-datepicker .ui-datepicker-prev span, .ui-datepicker .ui-datepicker-next span {
    display: block;
    position: absolute;
    left: 28%;
    margin-left: -8px;
    top: 28%;
    margin-top: -8px;
}

.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next {
    position: absolute;
    top: 2px;
    width: 36px;
    height: 36px;
}

.wrap-table {
    table-layout: fixed;
    width: 100%;
    text-align: center;
}

/*Extra-1*/
.dropdown-menu {
    padding: 15px;
}

.wrap-table-Center {
    text-align: center;
}
    /*Reshma20220621 Css for Dashboard table tr/td/th content space top and bottom */
    .wrap-table-Center tbody tr td {
        padding: 5px !important;
    }

    .wrap-table-Center thead tr th {
        padding: 5px !important;
    }
/*Reshma20220621 End*/

/*Extra-1*/
.wrap-table thead, th, td {
    /*word-wrap: break-word;*/
    word-wrap: normal;
}
/*Reshma20220502 Class for Language DropDown*/
.dropbtn {
    background-color: #3498DB;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}
/*Jay20220614*/
/*address class because drop down didn't close when click out side*/
.imageBtn {
    background-color: transparent;
    color: white;
    background: none;
    border: none;
    cursor: pointer;
}

    .imageBtn:hover {
        background-color: transparent;
        color: white;
        background: none;
        border: none;
        cursor: pointer;
    }

    .imageBtn:active, .imageBtn::after, .imageBtn:focus {
        background-color: transparent;
        color: white;
        background: none;
        border: none;
        outline: none;
        cursor: pointer;
    }
/*Jay20220614*/ /*End*/

.dropbtn:hover, .dropbtn:focus {
    background-color: #2980B9;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    right: 70px;
    /*background-color: #f1f1f1;*/
    background-color: white;
    /*min-width: 160px;*/
    min-width: 115px;
    overflow: auto;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

    .dropdown-content a {
        color: black;
        padding: 1px 16px;
        text-decoration: none !important;
        display: block;
    }

.dropdown a:hover {
    background-color: #ddd;
}

.show {
    display: block;
}
/*Reshma20220524 Class for Resource Editor Collapse (TreeView)*/
.accordion1 {
    /*background-color: #eee;*/
    color: #444;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
    transition: 0.4s;
}

    .active, .accordion1:hover {
        /*background-color: #ccc;*/
    }

.panel1 {
    padding: 0 18px;
    background-color: white;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
}
/*Css for Toggle Switch On/Off Button*/
/*Extra-2*/
#UStaffCategory .checkbox {
    margin: 0 0 15px 0;
}

    #UStaffCategory .checkbox .switch {
        margin-right: 10px;
    }
/*Extra-2*/
.switch {
    position: relative;
    display: inline-block;
    vertical-align: top;
    width: 56px;
    height: 20px;
    padding: 3px;
    background-color: white;
    border-radius: 18px;
    box-shadow: inset 0 -1px white, inset 0 1px 1px rgba(0, 0, 0, 0.05);
    cursor: pointer;
    background-image: -webkit-linear-gradient(top, #eeeeee, white 25px);
    background-image: -moz-linear-gradient(top, #eeeeee, white 25px);
    background-image: -o-linear-gradient(top, #eeeeee, white 25px);
    background-image: linear-gradient(to bottom, #eeeeee, white 25px);
}

.switch-input {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
}

.switch-label {
    position: relative;
    display: block;
    height: inherit;
    font-size: 10px;
    text-transform: uppercase;
    background: red; /*#eceeef;*/
    border-radius: inherit;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.15);
    -webkit-transition: 0.15s ease-out;
    -moz-transition: 0.15s ease-out;
    -o-transition: 0.15s ease-out;
    transition: 0.15s ease-out;
    -webkit-transition-property: opacity background;
    -moz-transition-property: opacity background;
    -o-transition-property: opacity background;
    transition-property: opacity background;
}

    .switch-label:before, .switch-label:after {
        position: absolute;
        top: 50%;
        margin-top: -.5em;
        line-height: 1;
        -webkit-transition: inherit;
        -moz-transition: inherit;
        -o-transition: inherit;
        transition: inherit;
    }

    .switch-label:before {
        content: attr(data-off);
        right: 11px;
       /* color: #aaa;*/
       color:#ffffff;   /*Reshma20221226*/
        text-shadow: 0 1px rgba(255, 255, 255, 0.5);
    }

    .switch-label:after {
        content: attr(data-on);
        left: 11px;
        color: white;
        text-shadow: 0 1px rgba(0, 0, 0, 0.2);
        opacity: 0;
    }

.switch-input:checked ~ .switch-label {
    background: green; /*#47a8d8;*/
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), inset 0 0 3px rgba(0, 0, 0, 0.2);
}

    .switch-input:checked ~ .switch-label:before {
        opacity: 0;
    }

    .switch-input:checked ~ .switch-label:after {
        opacity: 1;
    }

.switch-handle {
    position: absolute;
    top: 4px;
    left: 4px;
    width: 18px;
    height: 18px;
    background: white;
    border-radius: 10px;
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
    background-image: -webkit-linear-gradient(top, white 40%, #f0f0f0);
    background-image: -moz-linear-gradient(top, white 40%, #f0f0f0);
    background-image: -o-linear-gradient(top, white 40%, #f0f0f0);
    background-image: linear-gradient(to bottom, white 40%, #f0f0f0);
    -webkit-transition: left 0.15s ease-out;
    -moz-transition: left 0.15s ease-out;
    -o-transition: left 0.15s ease-out;
    transition: left 0.15s ease-out;
}

    .switch-handle:before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        margin: -6px 0 0 -6px;
        width: 12px;
        height: 12px;
        background: #f9f9f9;
        border-radius: 6px;
        box-shadow: inset 0 1px rgba(0, 0, 0, 0.02);
        background-image: -webkit-linear-gradient(top, #eeeeee, white);
        background-image: -moz-linear-gradient(top, #eeeeee, white);
        background-image: -o-linear-gradient(top, #eeeeee, white);
        background-image: linear-gradient(to bottom, #eeeeee, white);
    }

.switch-input:checked ~ .switch-handle {
    left: 40px;
    box-shadow: -1px 1px 5px rgba(0, 0, 0, 0.2);
}

.switch-green > .switch-input:checked ~ .switch-label {
    background: #4fb845;
}

/*Css for Eye Icon*/
.toggle {
    background: none;
    border: none;
    color: #337ab7 !important;
    /* display: none; */
    /* font-size: .9em; */
    font-weight: 600;
    /* padding: 0.5em; */
    position: absolute;
    right: 0.75em;
    top: 2.25em;
    z-index: 9;
}

    /* suppress IE >= 10 native functionality that can show password */
    input[type="password"]::-ms-reveal {
        display: none;
    }

.fa {
    font-size: 2rem;
}

.tree-menu#resList > .collapsed .nav-list {
    padding-left: 30px;
    margin-bottom: 4px;
}

    .tree-menu#resList > .collapsed .nav-list a {
        color: #212529;
    }

#ReqTypeTable {
    margin: 0;
}

    #ReqTypeTable #tblDashboard {
        margin: 0;
    }

/* Reshma20220621 Css for Catgory Translate Resources*/
#tblTranslation {
    table-layout: inherit;
}

    #tblTranslation th input,
    #tblTranslation td input {
        max-width: 250px;
    }

/* Reshma20220621 Css for at Generate Ticket Language Switcher Icon*/
#dvLangSwitcher {
    min-width: 200px;
    right: 0 !important;
}

#dvLangSwitcher a {
    color: #031b4e;
}
/*Reshma20221231*/
    #dvLangSwitcher a.active {
        color: #031b4e !important;
    }
        #dvLangSwitcher a.active::before {
            content: "*";
            color: #031b4e !important;
        }
#dvLangSwitcher a.LangMenuAlt {
    background-color: #d5e7f5;
}

/*Reshma20221231 Css for Language Resource Page to keep active page with Underline*/

li a div.select {
    font-size: 15px !important;
    text-decoration: none;
    color: black;
}

    li a div.select.active {
        font-size: 15px !important;
        /*text-decoration: underline;*/
        background-color: #87aef7;        
        color: black;
    }

/* Reshma20220621 Css for ResourceEditor and MissingResorces Table for input textbox width and padding*/

.mainmenuinfo table th,
.mainmenuinfo table td {
    padding: 5px 0.75rem;
}

.mainmenuinfo table input.form-control {
    width: 95%;
}

input.form-control basic {
    width: 190px;
    border-radius: 0px;
    box-sizing: border-box;
    font-size: 1.25em;
    height: auto;
    /* padding: 0.5em;*/
}

/*Extra-4*/
    /* Reshma20220621 Css for Dashboard DateTime picker and pagination for Dashboard*/
    /*#tabs_DateSetting {
}*/

.paginate {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .paginate .pagination-container {
        margin: 0 auto 0 0;
    }

    .paginate .pagination {
        margin: 0;
        display: flex;
    }

        .paginate .pagination a {
            color: black;
            float: left;
            padding: 6px 12px;
            text-decoration: none;
        }

        .paginate .pagination li.active a {
            background-color: #2D85C9;
            color: white;
            border-radius: 5px;
        }

        .paginate .pagination a:hover:not(.active) {
            background-color: #ddd;
            border-radius: 5px;
        }

/*Reshma20220621 Css for DateSetting label Break at Category */
.formSectDay .formSectDayHead {
    display: flex;
    justify-content: space-between;
    padding: 12px 10px;
}

    .formSectDay .formSectDayHead label {
        margin: 0;
    }

.formSectDay .form-group div label {
    width: 45%;
}

.formSectDay .form-group div .dvtable {
    width: 45%;
}
/*Extra-4*/

/*Reshma20220614 Css for Tree View at Resource Editor*/
.tree-menu li {
    display: block;
    padding: 5px 0px;
    cursor: pointer
}

    .tree-menu li:before {
        content: '';
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 4px 0 4px 6px;
        border-color: transparent transparent transparent #000;
        display: inline-block;
        vertical-align: middle;
        margin-right: 5px;
    }

    .tree-menu li ul li {
        margin-left: 10px;
    }

        .tree-menu li ul li:before {
            content: '-';
            width: 0;
            height: 0;
            border-style: solid;
            display: inline-block;
            vertical-align: top;
            margin-right: 5px;
            border: 0px !important
        }

/*Jay20220315*/
/*table .td .option {*/
.select .option {
    font-family: "Arial","BrushScriptBT","Eurostile","Futura","FuturaBkBT","ClassGarmndBT", "MediciScript","MtypeCursive","NewsGothBT","NewsGothCnBT","ParkAvenueBT","Swis721BT","Roboto",Helvetica, sans-serif,serif,monospace;
}

.massage {
    float: left;
    padding: 0px 15px;
    margin-left: 15px;
    color: green;
}

.field-validation-error {
    float: right;
    color: red;
    margin-left: 1px;
}

.sucess-text b {
    margin-left: 10px;
    color: green;
}

.inlineBox {
    width: 50px;
    padding: 3px 7px;
}

.tree-menu li:before {
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 4px 0 4px 6px;
    border-color: transparent transparent transparent #000;
    display: inline-block;
    vertical-align: middle;
    margin-right: 5px;
}

ul.nav.nav-list.tree ul {
    list-style: none;
    padding: 0px;
}

.table tr:hover {
    background: rgb(0 123 255 / 10%);
}

ul.paddingL15 {
    padding-left: 15px !important;
}

.h50 {
    height: 50px;
}

.pd0 {
    padding-left: 0px;
}

.ddl {
    height: 40px;
    width: 40px;
    position: absolute;
    z-index: 99;
    right: -2px;
    top: -15px;  /*Ayushi20240506*/
    margin: 0;
}

    .ddl li {
        z-index: 2;
        animation: fadeIn 0.5s linear;
        /* border-bottom: 1px solid white; */
    }

        .ddl li.init img {
            object-fit: cover;
        }

        .ddl li:not(.init) {
            float: left;
            padding: 6px 8px;
            width: 100%;
            display: none;
            background: #ddd;
            border-bottom: 1px solid white;
            transition: .35s ease-in-out;
        }

            .ddl li:not(.init):hover,
            .ddl li.selected:not(.init) {
                background: #f8f9fc;
            }

        .ddl li.init {
            cursor: pointer;
            padding: 5.5px 7px;
            background: #d5e7f5;
            height: auto;
            display: inline-flex;
            border-radius: 0.25rem !important;
            margin-bottom: 5px;
            /*Reshma20230117*/
           /* margin-top: 6px;*/
        }

        .ddl li:last-child {
            border-radius: 0px 0px 7px 7px;
        }

        .ddl li:nth-child(2) {
            border-radius: 7px 7px 0px 0px;
        }

        .ddl li:nth-child(1) {
            border-radius: 0px 0px 7px 7px;
        }

        .ddl li:nth-child(1) {
            transform: translate3d(0%);
        }

        .ddl li:nth-child(2) {
            transform: translate3d(100%);
        }

        .ddl li:nth-child(3) {
            transform: translate3d(200%);
        }

.navbar-dark .navbar-brand {
    color: #2D85C9;
}

.droppedIcon {
    width: 24px;
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    top: 86px;
    z-index: 5;
}

    .droppedIcon a {
        display: block;
        margin-bottom: 5px;
        font-size: 10px;
        padding: 5px 0;
        width: 25px;
    }

div#clickOn2-box {
    border: 1px solid #eee;
    padding: 10px;
}

.form-check {
    margin-bottom: 1px;
}

.form-check-inset {
    margin-left: 20px;
}

.modal-content {
    background: #F8F9FC;
}

.back {
    background: white;
    padding: 15px;
    border-radius: 5px;
}

.tree li a {
    position: relative;
    display: block;
    padding: 1px 9px !important;
}

.pull-right {
    float: right !important;
}

.pull-left {
    float: left !important;
}

/* Nav tabs*/
#container {
    padding-left: 10vw;
    padding-right: 10vw;
    padding-top: 5vh;
    padding-bottom: 20vh;
}

/* Hide all but first content div */
/* line 208, style.scss */
.nav-sidebar {
    width: 100%;
    padding: 8px;
    border: 1px solid #ddd;
    /*margin-top: 10px;*/
}

    /* line 214, style.scss */
    .nav-sidebar a {
        color: #333;
        -webkit-transition: all 0.08s linear;
        transition: all 0.08s linear;
    }

    /* line 221, style.scss */
    .nav-sidebar .active a {
        cursor: default;
        background-color: #F49C3F !important;
        color: #fff;
    }

        /* line 226, style.scss */
        .nav-sidebar .active a:hover {
            background-color: #87aef7;
        }

    /* line 229, style.scss */
    .nav-sidebar .text-overflow a,
    .nav-sidebar .text-overflow .media-body {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

/*Reshma20220418*/
.tab-active:default {
    color: #34c38f;
    background-color: #34c38f !important;
    border-color: #34c38f;
}

.nav-pills > li {
    float: left;
}

.nav > li {
    position: relative;
    display: block;
}

.btn-group-vertical > .btn-group:after, .btn-toolbar:after, .clearfix:after, .container-fluid:after, .container:after, .dl-horizontal dd:after, .form-horizontal .form-group:after, .modal-footer:after, .modal-header:after, .nav:after, .navbar-collapse:after, .navbar-header:after, .navbar:after, .pager:after, .panel-body:after, .row:after {
    clear: both;
}

.btn-group-vertical > .btn-group:after, .btn-group-vertical > .btn-group:before, .btn-toolbar:after, .btn-toolbar:before, .clearfix:after, .clearfix:before, .container-fluid:after, .container-fluid:before, .container:after, .container:before, .dl-horizontal dd:after, .dl-horizontal dd:before, .form-horizontal .form-group:after, .form-horizontal .form-group:before, .modal-footer:after, .modal-footer:before, .modal-header:after, .modal-header:before, .nav:after, .nav:before, .navbar-collapse:after, .navbar-collapse:before, .navbar-header:after, .navbar-header:before, .navbar:after, .navbar:before, .pager:after, .pager:before, .panel-body:after, .panel-body:before, .row:after, .row:before {
    display: table;
    content: " ";
}
/*---- Jayvin20230708 add css ----*/
.overview .btn-primary.dateCstmPicker {
    width: 36px;
    padding:5px 10px;

}
.overview .datepicker {
    width: 80px !important;
    font-family: Arial, Helvetica, sans-serif;
    padding: 5px 7px;
    font-size: 12px;
}
.overview .statusSelect {
    width: 70px;
    padding: 2px 5px;
}
.exportPdf{
    flex-shrink:0;
}

.uptime select.form-control {
    height: 26px !important;
    width: 100% !important;
    padding: 3px 6px !important;
    margin-top: 5px !important;
}

.dFlex {
    display: flex;
    margin-bottom: 5px;
}

.form-group fieldset {
    background: #fff;
    border-top: 1px solid #e6e6e6;
}

/* The container */
.radio-inline {
    display: block;
    position: relative;
    padding-left: 25px;
    margin-bottom: 12px;
    cursor: pointer;
}

.innerBlock.paddingRL {
    padding: 30px 65px;
}

.col-sm-6.paddingR15 {
    padding-right: 31px;
}

.col-sm-6.paddingL15 {
    padding-left: 31px;
}

label.control-label {
    font-size: 16px;
}

.paddingRL .form-group {
    margin-bottom: 12px;
}

.fnt-color-white {
    color: #fff !important;
}

.checkbox_block {
    max-width: 4%;
}

.mrB10 {
    margin-bottom: 10px;
}

.mrR5 {
    margin-right: 5px;
}

h6 {
    font-size: 20px;
}

.mrB60 {
    margin-bottom: 60px;
}

.mrT60 {
    margin-top: 60px;
}

.mrB30 {
    margin-bottom: 30px;
}

.admin legend {
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 0px;
    width: auto;
    /* border: 1px solid #ddd; */
    border-radius: 4px;
    padding: 5px 10px;
    background-color: #2D85C9;
    color: white;
}

.card {
    margin: 0 auto;
    text-align: center;
    padding: 17px;
    border: 0px solid grey;
    border-radius: 7px;
    margin-bottom: 10px;
    box-shadow: 0px 0px 4px #6c757d;
    height: 140px;
}

.dateSetting {
    text-align: center;
    border: 0px solid grey;
    box-shadow: 0px 0px 4px #6c757d;
    color: black;
}

.admin h4 {
    font-size: 20px;
    text-decoration: none;
    color: black;
}

    /* Reshma Add Css for LogOut Button At MobileUserProfile Page*/
    .event-tool .btn {
        /*Jayvin20230708*/
       min-width:120px;
    }

#StaffCategory .checkbox {
    padding-bottom: 13px;
    margin-bottom: 0 !important;
}

    #StaffCategory .checkbox span {
        font-weight: 400 !important;
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 12px;
    }

#StaffCategory .tree-lavel-two {
    margin-left: 10px;
    position: relative;
}

    #StaffCategory .tree-lavel-two:before {
        content: "";
        display: block;
        width: 0;
        position: absolute;
        top: -12px;
        bottom: 0;
        left: -4px;
        border-left: 1px solid #e3e3e3;
    }

    #StaffCategory .tree-lavel-two .checkbox:before {
        content: "";
        display: block;
        width: 13px;
        height: 0;
        border-top: 1px solid #e3e3e3;
        margin-top: -5px;
        position: absolute;
        top: 1em;
        left: -3px;
    }

.bradcrums {
    background: transparent;
    border: none !important;
    padding: 9px 0px;
    color: grey;
}

/*Reshma20230613 @media Query for Ticket Screen when screen is vertical(portrait)   */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
    .cat-list-select {
        flex-direction: column;
    }

        .cat-list-select a.btn {
            width: 100% !important;
        }
    /*.admin a.btn.btn-info.btn.btn-block{*/
    .btnTextALignment {
        margin-left: 71px;
        text-align: center;
        text-wrap: nowrap; /*Reshma20230703*/
    }

    .btnTextA {
        padding-left: 36px;
    }

    .btnTextB {
        padding-left: 32px;
    }
   
    /*Reshma20230624 add this class for Mobile Ticket screen To Update color as per settings*/
    .ticketScreenTheme {
        margin-bottom: 25px;
        background-color: #8BAEF4;
        color: white;
        border-color: #8BAEF4;
        font-size: 22px;
    }
}

.cat-list-select {
    width: 100%;
    position: relative;
    display: flex;
    min-width: 0;
    word-wrap: break-word;
    /*background: #fff !important;*/
    background-clip: border-box;
    border-radius: 5px;
    /*border: 1px solid #deebfd;*/
    /*box-shadow: -8px 12px 18px 0 #dadee8;*/
    margin: 0 auto;
    padding: 25px;
    flex-wrap: wrap;
    gap: 20px;
    /* justify-content: center;*/
}
/*Reshma20220425 Add New class for give condition one or multiple category button*/
.cat-list-select_Center {
    width: 100%;
    position: relative;
    display: flex;
    min-width: 0;
    word-wrap: break-word;
    /*background: #fff !important;*/
    background-clip: border-box;
    border-radius: 5px;
    /*border: 1px solid #deebfd;*/
    /*box-shadow: -8px 12px 18px 0 #dadee8;*/
    margin: 0 auto;
    padding: 25px;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    /*width: calc(50% - 10px);*/
    width: calc(55% - 4px);
}

.cat-list-select a.btn {
    margin-bottom: 0 !important;
    color: #fff;
    background-color: #8BAEF4;
    color: white;
    border-color: #8BAEF4;
    border-radius: 4px !important;
    /*width: calc(33% - 8px);*/
    width: calc(50% - 10px);
    margin: 0;
}

    .cat-list-select a.btn:hover {
        opacity: 0.8;
    }

.back-btn {
    border-radius: 7px;
    color: #000;
    background: #495057;
    color: #fff;
    font-size: 18px;
    display: inline-flex;
    padding: 20px 25px 20px 20px;
    margin-bottom: 20px;
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translate(0, -50%);
}

    .back-btn svg {
        width: 36px;
        height: auto;
        transform: rotate(180deg);
        fill: #fff;
        color: #fff;
    }


    .back-btn:hover {
        background: #8BAEF4;
        color: #fff;
    }

        .back-btn:hover svg {
            fill: #fff;
            color: #fff;
        }

.title-wrapper {
    /*display:flex; TRUP20220202*/
    justify-content: space-between;
    align-items: center;
    margin-bottom: 50px;
}

    .title-wrapper .h1Header {
        margin-bottom: 0;
    }

    .title-wrapper .btn {
        color: #fff;
        background: #111112;
        border-color: #111112;
    }

        .title-wrapper .btn:hover {
            opacity: 0.8;
        }

.user-sec-edit {
    width: 100%;
    position: relative;
    display: flex;
    min-width: 0;
    word-wrap: break-word;
    margin: 0 auto;
    padding: 25px;
    flex-wrap: wrap;
    gap: 15px;
}

    .user-sec-edit .form-control {
        height: calc(2em + 0.75rem + 2px);
        font-size: 16px;
    }

    .user-sec-edit .btn.save {
        color: #fff;
        background: #111112;
        border-color: #111112;
        font-size: 17px;
    }

        .user-sec-edit .btn.save:hover {
            opacity: 0.8;
        }

.main_area {
    background: white;
    padding: 20px 10px;
    margin-top: 20px;
    border-radius: 7px;
    box-shadow: 0px 0px 3px grey;
}

.buttons {
    text-align: right;
}

.button input[type="radio"] {
    display: none;
    padding: 5px;
}

label {
    display: inline-block;
    max-width: fit-content;
    /* margin-bottom: 5px; */
    font-weight: 100;
    padding: 5px !important;
    /* border: 2px solid blue !important; */
}

select.lang.form-control {
    width: 118px;
}

label.tree-toggler.nav-header {
    padding: 3px 5px;
    background: grey;
    color: white;
    width: 100%;
}

label {
    display: inline-block;
    max-width: 100%;
    margin-bottom: 2px;
    /*font-weight: 700;  */ /* urvashee14052024*/
}

.label {
    display: inline-block !important;
    max-width: 100% !important;
    margin-bottom: 2px !important;
    font-weight: 400 !important;
    font-size: 12px !important;
}

.radio {
    border: 1px solid #eee;
    padding: 5px 10px;
}

.design3 .top {
    background: darkcyan;
    padding: 4px;
    color: white;
    border-radius: 6px;
    font-size: 18px;
}

.design3 .right {
    -webkit-box-shadow: 0px 0px 5px -1px #bdb9bd;
    -moz-box-shadow: 0px 0px 5px -1px #bdb9bd;
    box-shadow: 0px 0px 5px -1px #bdb9bd;
    padding: 10px;
    border-radius: 5px;
}

.design3 .timeInterval {
    width: 50%;
    padding: 20px 0px 0px 0px;
    background: #ff000026;
    /* position: fixed; */
    border: 1px solid red;
    border-radius: 31px;
}

.design3 .timer {
    color: red;
    background: white;
    border-radius: 30px;
    /* height: 59px; */
    padding: 20px;
    margin: 0px;
}

.design3 .pdTB80 {
    padding: 80px;
}

.design3 .qnumber {
    width: 100%;
    margin-bottom: 0px;
}

.design3 .category {
    width: 50%;
    font-size: 18px;
    padding: 10px;
    background: green;
    color: white;
    border-radius: 0px 0px 10px 10px;
    margin-top: -2px;
}

.mrT80 {
    margin-top: 65px;
}

.pd15 {
    padding: 15px;
}

.left {
    -webkit-box-shadow: 0px 0px 5px -1px #bdb9bd;
    -moz-box-shadow: 0px 0px 5px -1px #bdb9bd;
    box-shadow: 0px 0px 5px -1px #bdb9bd;
    padding: 10px;
    border-radius: 5px;
}

.left_bottom {
    padding: 10px;
    margin-top: 15px;
}

.pd0 {
    padding: 0px;
}

.right {
    -webkit-box-shadow: 0px 0px 5px -1px #bdb9bd;
    -moz-box-shadow: 0px 0px 5px -1px #bdb9bd;
    box-shadow: 0px 0px 5px -1px #bdb9bd;
    padding: 0px 10px 10px 10px;
    border-radius: 5px;
}

.totalToken {
    display: flex;
    padding: 0;
    align-items: center;
    margin-right: 0;
    margin-left: auto;
    float: right;
    color: #495057;
    gap: 10px;
}

    .totalToken h5 {
        font-size: 14px;
        font-weight: 400;
        color: #74788d;
        margin: 0;
    }

    .totalToken h2 {
        font-size: 16px;
        font-weight: 400;
        color: #74788d;
        margin: 0;
        background: #fff;
        padding: 5px 13px;
        border-radius: 20px;
        border: rgb(116 120 141 / 41%) 1px solid;
    }

.status {
    background: #7cc0f9;
    padding: 10px 20px;
    border-radius: 10px;
    width: 99%;
    color: white;
}

.pdTB100 {
    padding: 100px 0px;
}

.counter-top {
    display: flex;
    gap: 10px;
    align-items: center;
}

.qnumber {
    padding: 50px 20px 30px 20px;
    width: 70%;
    background: #111112;
    /*#2a3042; Trup*/
    border-radius: 35px;
    color: #0cefef;
    /*#a6b0cf;*/
    border: none;
    margin-bottom: 20px;
}

    .qnumber h1 {
        font-size: 6.5rem;
        /*color:#fff; TRUP20220204*/
        margin-bottom: 0;
    }

        .qnumber h1.active-number {
            font-size: 6rem;
        }

        .qnumber h1.no-number {
            font-size: 2.5rem;
        }

.counter-num-title {
    background: #0cefef;
    /*#a6b0cf;Trup*/
    color: #2a3042;
    padding: 10px 40px;
    text-transform: uppercase;
    margin: 0 auto;
    display: inline-flex;
    border-radius: 20px;
    font-weight: 900;
    position: relative;
    top: 18px;
}

    .counter-num-title:before {
        content: "";
        height: 10px;
        width: 10px;
        background: #fff;
        border-radius: 50%;
        position: absolute;
        top: 50%;
        left: 12px;
        transform: translate(0, -50%);
        opacity: 0.5;
    }

    .counter-num-title:after {
        content: "";
        height: 10px;
        width: 10px;
        background: #fff;
        border-radius: 50%;
        position: absolute;
        top: 50%;
        right: 12px;
        transform: translate(0, -50%);
        opacity: 0.5;
    }

.timer {
    color: orange;
}

.timer-wrapper .timer {
    color: #111112;
    /*#916c2e;*/
    background-color: #0cefef;
    /*#fcf0db;*/
    border-color: #fbe9c9;
    padding: 26px 45px 16px 45px;
    border-radius: 70px;
    display: inline-flex;
    font-size: 3rem;
    font-weight: 600;
    width: 100%;
    max-width: 340px;
    justify-content: center;
    letter-spacing: 0.4rem;
}

.timer-wrapper {
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
}

    .timer-wrapper h4 {
        background: #111112;
        /*#916c2e;*/
        color: #fcf0db;
        padding: 9px 30px;
        margin: 0 auto;
        display: inline-flex;
        border-radius: 20px;
        font-weight: 900;
        position: relative;
        top: 18px;
        font-size: 14px;
        letter-spacing: 1px;
    }

        .timer-wrapper h4:before {
            content: "";
            height: 6px;
            width: 6px;
            background: #fcf0db;
            border-radius: 50%;
            position: absolute;
            top: 50%;
            left: 10px;
            transform: translate(0, -50%);
            opacity: 0.5;
        }

        .timer-wrapper h4:after {
            content: "";
            height: 6px;
            width: 6px;
            background: #fcf0db;
            border-radius: 50%;
            position: absolute;
            top: 50%;
            right: 10px;
            transform: translate(0, -50%);
            opacity: 0.5;
        }

a.btn.btn-block {
    padding: 15px 0px;
    color: white;
    font-weight: 600;
}

input.btn.btn-danger {
    font-weight: 600 !important;
}

.top {
    background: darkcyan;
    padding: 4px;
    color: white;
    border-radius: 0px 0px 10px 10px;
}

.queueList {
    margin-top: 10px;
    overflow: auto;
    height: calc(100vh - 210px);
}

    .queueList li {
        background-color: #556ee6;
        padding: 15px 10px;
        margin: 3px;
        border-radius: 5px;
        border: none;
        color: #fff;
        position: relative;
        overflow: hidden;
    }

        .queueList li:before {
            content: "";
            position: absolute;
            width: 38px;
            height: 374px;
            background-color: rgba(255,255,255,.1);
            left: 16px;
            -webkit-transform: rotate( 32deg );
            transform: rotate( 32deg );
            top: -120px;
            -webkit-transition: all .4s;
            transition: all .4s;
        }

        .queueList li .tokenNo {
            font-size: 24px;
        }

.btn-success {
    color: #fff;
    background-color: #34c38f;
    border-color: #34c38f;
}

.btn-warning {
    color: #fff;
    background-color: #f1b44c;
    border-color: #f1b44c;
}

.btn-danger {
    color: #fff;
    background-color: #f46a6a;
    border-color: #f46a6a;
}

.btn-dark, .btn-secondary {
    color: #eff2f7 !important;
}

.btn-dark {
    color: #fff;
    background-color: #343a40;
    border-color: #343a40;
}

.btn-light {
    color: #000;
    background-color: #eff2f7;
    border-color: #eff2f7;
}

.right-btn-wrapper .btn {
    font-weight: 400;
}

ul {
    list-style: none;
    padding: 0px;
}

.tokenNo {
    font-size: 20px;
    font-weight: bold;
}

/*Reshma20220103 Decrease size for Counter Screen Start*/
.qOverviewScreen h3 {
    /*font-size: 5em;*/
    font-size: 10em; /*chandani*/
}

.qOverviewScreen h1 {
    /*font-size: 9em;*/
    font-size: 8em; /*chandani*/
    min-height: 150px;
}

.qOverviewScreen2 h3 { /*Chandani20220112 _ take from Live Server*/
    /*font-size: 5em;*/
    font-size: 10em;
}

.qOverviewScreen2 h1 {
    /*font-size: 5em;  Chandani20220112 _ take from Live Server*/
    font-size: 8em;
    min-height: 150px;
}

.qOverviewScreenNext { /*Reshma20220104 Add New Class for HighLight Border*/
    border: solid 3px red;
    padding: 10px;
}
/*Reshma20220103 Decrease size for Counter Screen End*/
.desk {
    background: #0aa7e7;
    color: white;
    border-radius: 15px;
    padding: 10px;
    margin: 10px 0px;
    background: #0aa7e7;
}

center.deskTop {
    padding: 17em 0px; /*chandani*/
    background: white;
    color: green;
    border-radius: 5px;
}

center.deskBottom {
    padding: 17em 0px;
}
/*chandani*/

center.deskTop2 {
    /*padding: 4em 0px; Chandani20220112_ take from Live Server*/
    padding: 17em 0px;
    background: white;
    color: green;
    border-radius: 5px;
}

center.deskBottom2 {
    /*padding: 4em 0px; Chandani20220112_ take from Live Server*/
    padding: 17em 0px;
}

.timepickertext {
    text-align: center;
    font-size: 22px;
    font-weight: 600;
    width: 91%;
}

#clock {
    margin-left: 10px;
}

.displayDateTime {
    position: absolute;
    top: 30px;
    left: 20px;
    font-size: 18px;
}

.timepicker_wrap {
    display: block !important;
}

.arrow_top {
    display: none;
}

.time_pick {
    position: relative;
    top: -20px;
}

input.timepicki-input {
    font-size: 40px;
    width: 100% !important;
}

.timepicker_wrap {
    padding: 10px;
    border-radius: 5px;
    z-index: 998;
    display: none;
    box-shadow: 2px 2px 5px 0 rgba(50, 50, 50, 0.35);
    background: #f6f6f6;
    border: 1px solid #ccc;
    float: left;
    top: 27px;
    left: -82px !important;
    width: max-content !important;
    position: relative !important;
}

.time, .mins, .meridian {
    width: 150px !important;
}

.prev {
    cursor: pointer;
    padding: 18px;
    width: 28%;
    border: 1px solid #ccc;
    margin: auto;
    /*background: url(../images/up.png) no-repeat !important;*/
    border-radius: 5px;
    height: 80px;
}

.navbar.navbar-expand .logo {
    height: 30px;
}

.admin a.btn.btn-info.btn.btn-block {
    margin-bottom: 25px;
    /*    border-radius: 15px;*/ /*Reshma20220425 Give comment to check when category button is only one */
    background-color: #8BAEF4;
    color: white;
    border-color: #8BAEF4;
    font-size: 22px;
}

.admin hr {
    margin-top: 0.5rem;
    margin-bottom: 1.5rem;
    border: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.h1Header {
    font-family: 'Times New Roman', Times, serif; 
    color: cadetblue;
    margin-bottom: 2rem;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    z-index: 2 !important;
    color: #fff !important;
    cursor: default !important;
    background: #495057 !important;
    border-color: #495057 !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    padding: 0.1em 0.5em !important;
}

    .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
        color: black !important;
        border: 1px solid lightgrey !important;
        background-color: lightgrey !important;
        background: lightgrey !important;
    }

    .dataTables_wrapper .dataTables_paginate .paginate_button.disabled, .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover, .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active {
        display: initial !important;
    }

.font-white {
    color: white !important;
}

.qOverviewScreen .col-sm-4 {
    flex: 0 0 33.33% !important;
    width: 33.33% !important;
}

.mT30B50 {
    margin-top: 30px;
    margin-bottom: 50px;
}

.bigdropdown {
    font-size: 1.5rem;
}

.qOverviewScreen .col-md-2 {
    padding: 0px 5px;
}
.marmt30 {
    position: absolute;
    top: 50px;
}
.mt50 {
    margin-top: 50px
}

/* Rinkesh  */

.btn {
    padding-left: 30px;
    padding-right: 30px;
    font-size: 14px;
}

label.control-label {
    text-transform: uppercase;
    line-height: 1;
    margin-bottom: 10px;
    letter-spacing: .2px;
    font-size: 11px;
    color: #737f9e;
    margin-bottom: 3px;
}

        .breadcrumb li > b {
            color: #000000;
            font-weight: 400;
        }

.form-control,
select {
    display: block;
    width: 100%;
    height: 40px;
    padding: 0.375rem 0.75rem;
    font-size: .875rem;
    font-weight: 400;
    line-height: 1.5;
    color: #4d5875;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #e1e5ef;
    border-radius: 3px;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

.card-title {
    font-weight: 700;
    color: #242f48;
    font-size: 14px;
    text-transform: uppercase;
}

.form-control {
    display: block;
    width: 100%;   
    /*height: calc(1.5em + 0.75rem + 2px);*/
    /*height: calc(1.5em + 0.75rem + 4px);*/ /*Reshma20221007*/
    /*padding: 0.375rem 0.75rem;*/   /*urvashee14052024*/
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

.flate-radio {
    position: relative;
    display: inline-flex;
}

    .flate-radio input.radio {
        position: absolute;
        height: 100%;
        width: 100%;
        left: 0;
        top: 0;
        opacity: 0;
        z-index: 1;
        cursor: pointer;
    }

    .flate-radio label {
        font-size: 14px;
        line-height: 1.2;
        font-weight: 400;
        padding: 5px 18px 5px 30px !important;
        border-radius: 16px;
        position: relative;
        background: #ecf0fa;
    }

        .flate-radio label:before {
            content: "";
            position: absolute;
            height: 16px;
            width: 16px;
            border-radius: 50%;
            background: #fff;
            left: 6px;
            top: 5px;
        }

        .flate-radio label:after {
            content: "";
            position: absolute;
            height: 8px;
            width: 8px;
            border-radius: 50%;
            background: #ecf0fa;
            left: 10px;
            top: 9px;
        }


    .flate-radio input.radio:checked + label {
        background: #257CE4;
        color: #fff;
    }

        .flate-radio input.radio:checked + label:after {
            background: #257CE4;
        }

.navbar.bg-dark {
    box-shadow: 0 0.75rem 1.5rem rgb(18 38 63 / 3%);
}

#QWaitingServe #QWaiting .right {
    background: #fff;
}

.top-nav-right-part {
    margin-right: 0;
    margin-left: auto;
    position: relative;
}

    .top-nav-right-part .lang-label {
        margin-right: 50px;
    }

    .navbar.bg-dark .btn.user {
        margin-left: 5px;
    }

    .navbar.bg-dark .btn.logout {
        margin-left: 5px;
        background-color: #2D85C9;
        color: white;
        /*Reshma20230117*/
        /* height: 30px;*/
        /*padding-top: 9px;
        padding-bottom: 9px;*/
    }


#QWaitingServe #QWaiting .top {
    margin: 0 -10px;
    padding: 15px;
    border-radius: 5px 5px 0 0;
    background: #111112;
    /*#2a3042;*/
    /*color: #a6b0cf;*/
    font-weight: 500;
}

#QWaitingServe #QWaiting .right .queueList {
    margin-right: -4px;
    padding-right: 4px;
}

    #QWaitingServe #QWaiting .right .queueList::-webkit-scrollbar {
        width: 6px;
        border-radius: 4px;
    }

    #QWaitingServe #QWaiting .right .queueList::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 4px;
    }

    #QWaitingServe #QWaiting .right .queueList::-webkit-scrollbar-thumb {
        background: #888;
        border-radius: 4px;
    }

        #QWaitingServe #QWaiting .right .queueList::-webkit-scrollbar-thumb:hover {
            background: #555;
        }

#QWaitingServe #QServing .left {
    background: #fff;
}

#tokenQList {
    display: flex;
    flex-flow: column;
    gap: 2px;
}

    #tokenQList li {
        display: flex;
        flex-flow: column;
        align-items: center;
        justify-content: center;
    }


.btn-label {
    position: relative;
    padding-left: 50px;
}

    .btn-label .label-icon {
        position: absolute;
        width: 42px;
        height: 100%;
        left: 0;
        top: 0;
        background-color: rgba(255,255,255,.1);
        border-right: 1px solid rgba(255,255,255,.1);
        font-size: 16px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
    }

.dataTables_length {
    width: 50%;
    text-transform: uppercase;
    line-height: 1;
    margin-bottom: 10px;
    letter-spacing: .2px;
    font-size: 11px;
    color: #737f9e;
    margin-bottom: 3px;
}

    .dataTables_length label {
        display: flex;
        align-items: center;
        gap: 10px;
        text-transform: uppercase;
        line-height: 1;
        margin-bottom: 10px;
        letter-spacing: .2px;
        font-size: 11px;
        color: #737f9e;
        margin-bottom: 3px;
    }

.dataTables_filter label {
    display: flex;
    align-items: center;
    gap: 10px;
    text-transform: uppercase;
    line-height: 1;
    margin-bottom: 10px;
    letter-spacing: .2px;
    font-size: 11px;
    color: #737f9e;
    margin-bottom: 3px;
}

.dataTables_length select {
    width: 70px;
    height: 26px;
}

/*Reshma20230105 Add class for List of Table more Visible*/
table.dataTable tbody td {
    font-size: 15px !important;
}

/* & Rinkesh -2 Quelist */

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

nav.navbar {
    padding: 0.8rem 1rem;
    -webkit-box-shadow: 0 4px 24px 0 rgb(34 41 47 / 10%);
    box-shadow: 0 4px 24px 0 rgb(34 41 47 / 10%);
    margin-bottom: 1rem;
}

    nav.navbar .navbar-brand {
        margin: 0;
        padding: 0;
        color: #007bff;
    }

.left-side-bar {
    width: 100%;
    -webkit-box-shadow: 0 4px 24px 0 rgb(34 41 47 / 10%);
    box-shadow: 0 4px 24px 0 rgb(34 41 47 / 10%);
    background: #fff;
    padding: 1.2rem;
    padding-left: 0;
    border-radius: 0.428rem;
}

    .left-side-bar .sidebar-header {
        /*background: linear-gradient(118deg,#007bff,rgb(0 123 255 / 70%));*/
        background: #2D85C9;
        color: #fff;
        padding: 1.2rem;
        margin: -1.2rem;
        margin-left: 0;
        margin-bottom: 0;
        border-radius: 0.428rem 0.428rem 0 0;
        text-align: center;
        font-size: 22px;
        box-shadow: 0 0 6px 1px rgb(0 123 255 / 70%);
        letter-spacing: 0.5px;
        font-weight: 600;
    }

    .left-side-bar .queueList {
        margin-top: 1.2rem;
        margin-right: -19px;
        padding-right: 0;
    }

        .left-side-bar .queueList::-webkit-scrollbar {
            width: 6px;
            border-radius: 4px;
        }

        .left-side-bar .queueList::-webkit-scrollbar-track {
            background: #f1f1f1;
            border-radius: 4px;
        }

        .left-side-bar .queueList::-webkit-scrollbar-thumb {
            background: #505975;
            border-radius: 4px;
        }

.queueList {
    height: calc(100vh - 200px);
    gap: 0;
}

    .queueList li {
        padding: 0.75rem;
        background: #fff;
        border: none;
        margin: 0;
        font-size: 13px;
        color: #495057;
        border-radius: 0;
        position: relative;
        padding-left: 20px;
        border-radius: 0.0;
        /*border-radius: 0 0.428rem 0.428rem 0;*/
        transition: all .3s ease-in-out;
    }

        .queueList li:nth-child(2n) {
            background: rgb(0 123 255 / 10%);
        }

        .queueList li::before {
            content: "";
            height: 8px;
            width: 8px;
            border-radius: 50%;
            background: #e9edf4;
            left: 15px;
            top: 50%;
            position: absolute;
            transform: translateY(-50%);
            transition: all .3s ease-in-out;
            display: none;
        }

        .queueList li:hover::before {
            background: #495057;
        }

        .queueList li .tokenNo {
            font-size: 24px;
            font-weight: 600;
            line-height: 1;
        }

#tokenQList li > div:not(.tokenNo) {
    font-size: 18px;
}

.counter-main-wrapper {
    background: #fff;
    padding: 1.5rem;
    border-radius: 0.428rem;
    box-shadow: 0 4px 24px 0 rgb(34 41 47 / 10%);
    text-align: center;
    height: calc(100vh - 183px);
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center; /*TRUP202202*/
}

    .counter-main-wrapper .qnumber {
        padding: 0;
        background: none;
        padding: 0;
        color: #495057;
        border: none;
        transform: scale(1);
        animation: scale 2s;
        animation-iteration-count: infinite
    }

        .counter-main-wrapper .qnumber h3 {
            font-size: 18px;
            font-weight: 400;
            margin: 0;
            line-height: 1;
            color: #495057;
        }

        .counter-main-wrapper .qnumber .counter-number {
            font-size: 100px;
            font-weight: 900;
            line-height: 1;
        }

@keyframes scale {
    50% {
        transform: scale(1.02);
    }
}

.counter-main-wrapper .category {
    /*background: rgb(0 123 255 / 10%);*/
    background: #2D85C9;
    width: auto;
    border-radius: 4px;
    line-height: 1;
    margin: 0;
    /*color: #007bff;*/
    color: #fff;
    font-size: 20px;
    padding: 10px 15px;
    margin-top: 15px;
}

.counter-main-wrapper .or-line {
    margin: 50px 0;
    border-bottom: 1px solid #e9edf4;
    width: 60%;
}

.counter-main-wrapper .timeInterval {
    background: #fff;
    border: none;
    padding: 0;
    width: auto;
}

    .counter-main-wrapper .timeInterval h4 {
        color: #495057;
        margin: 0;
        font-size: 18px;
        font-weight: 400;
    }

    .counter-main-wrapper .timeInterval h2 {
        font-size: 60px;
        color: #2D85C9;
        padding: 0;
    }


.btn-card {
    background: #fff;
    padding: 1.5rem;
    border-radius: 0.428rem;
    box-shadow: 0 4px 24px 0 rgb(34 41 47 / 10%);
    text-align: center;
    height: calc(100vh - 183px);
    /*display: flex;*/ /*Trup*/
    flex-flow: column;
    align-items: center;
    justify-content: center;
}

    .btn-card .buttons-wrapper {
        display: flex;
        flex-flow: column;
        align-items: center;
        justify-content: center;
        gap: 10px;
        width: 100%;
    }

        .btn-card .buttons-wrapper .btn {
            color: #fff;
            width: 100%;
            font-size: 18px;
            background-color: #2D85C9;
            border-color: #eff2f7;
            padding: 1.5rem 0.5rem;
            transition: all .3s ease-in-out;
        }

            .btn-card .buttons-wrapper .btn:hover {
                color: #fff;
                /*  background-color: #007bff;*/
                background-color: #000000;
                border-color: #007bff;
            }

.top-bar-wrapper {
    background: #fff;
    padding: 17px 1.5rem;
    border-radius: 0.428rem;
    box-shadow: 0 4px 24px 0 rgb(34 41 47 / 10%);
    display: flex;
    align-items: center;
}

    .top-bar-wrapper .block-wrapper {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 15px;
        margin-right: 0;
        margin-left: auto;
    }

    .top-bar-wrapper .block {
        font-size: 14px;
        color: #495057;
    }

        .top-bar-wrapper .block span {
            background: rgb(0 123 255 / 10%);
            width: auto;
            border-radius: 4px;
            line-height: 1;
            margin: 0;
            color: #007bff;
            font-size: 14px;
            padding: 10px 15px;
            margin-left: 5px;
            font-weight: 600;
        }

        .top-bar-wrapper .block:not(:first-child) {
            border-left: 1px solid #e9edf4;
            padding-left: 15px;
        }

.version-two .top-bar-wrapper {
    padding: 0.6rem 1.5rem;
}

.top-bar-wrapper .timeInterval {
    background: #fff;
    border: none;
    padding: 0;
    width: auto;
}

    .top-bar-wrapper .timeInterval h4 {
        color: #495057;
        margin: 0;
        font-size: 14px;
        font-weight: 400;
        position: relative;
        top: 4px;
    }

    .top-bar-wrapper .timeInterval h2 {
        font-size: 40px;
        color: #007bff;
        padding: 0;
    }

.version-two .counter-main-wrapper {
    height: calc(100vh - 340px);
}

.version-two .btn-card {
    height: auto;
}

    .version-two .btn-card .buttons-wrapper {
        flex-flow: row;
        max-width: 700px;
    }

.top-bar-right-side {
    margin-right: 0;
    margin-left: auto;
}

/* Check From Here*/

/* & Rinkesh css */
/*Chandni20220104 Add Class Margin for Marquee --End*/
@media (min-width: 1281px) {
    .container-xl, .container-lg, .container-md, .container-sm, .container {
        max-width: 100%;
    }

    .hidden-lg {
        display: none;
    }

    .web-pull-left {
        float: right;
    }

    .pdR0 {
        padding-right: 0px;
    }

    .pdL0 {
        padding-left: 0px;
    }    
}
/* 
  ##Device = Laptops, Desktops
  ##Screen = B/w 1025px to 1280px
*/
@media (min-width: 1025px) and (max-width: 1280px) {
    .hidden-lg {
        display: none;
    }

    .hidden-md {
        display: none;
    }
}

/* 
  ##Device = Tablets, Ipads (portrait)
  ##Screen = B/w 768px to 1024px
*/
@media (min-width: 768px) and (max-width: 1024px) {
    .hidden-sm {
        display: none;
    }

    .web-pull-left {
        float: right;
    }

    .pdR0 {
        padding-right: 0px;
    }
    /*chandani*/

    .pdL0 {
        padding-left: 0px;
    }

    .navbar-nav {
        flex-direction: row;
    }

    li.nav-item.active {
        margin: 3px 11px;
    }
    /*chandani*/
    .qOverviewScreen h3 {
        /*font-size: 5em;*/
        font-size: 6em;
    }

    .qOverviewScreen h1 {
        /*font-size: 9em;*/
        font-size: 4em; /*chandani*/
    }
}
/* 
  ##Device = Tablets, Ipads (landscape)
  ##Screen = B/w 768px to 1024px
*/
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
    .hidden-sm {
        display: none;
    }    
}
/* 
  ##Device = Low Resolution Tablets, Mobiles (Landscape)
  ##Screen = B/w 481px to 767px
*/
@media (min-width: 481px) and (max-width: 767px) {
    .hidden-xs {
        display: none;
    }
}

@media (max-width: 480px) and (min-width: 320px) {
    .lang {
        width: fit-content;
        background: white;
        padding: 15px;
        border-radius: 0px 0px 15px 15px;
        width: 100%;
        overflow: auto;
    }
    /*chandani*/
    .qOverviewScreen h3 {
        /*font-size: 5em;*/
        font-size: 6em !important;
    }

    .qOverviewScreen h1 {
        /*font-size: 9em;*/
        font-size: 4em !important; /*chandani*/
    }

    /*chandani*/
    .h3 {
        /*font-size: 5em;*/
        font-size: 6em !important;
    }

    .h1 {
        /*font-size: 9em;*/
        font-size: 4em !important; /*chandani*/
    }
}
/* 
  ##Device = Most of the Smartphones Mobiles (Portrait)
  ##Screen = B/w 320px to 479px
*/
@media (min-width: 320px) and (max-width: 480px) {
    .mobile-logo {
        position: fixed;
        bottom: 0;
        width: 100px;
    }

    .list-group {
        height: 350px;
    }

    .list-group {
        width: 100%;
    }

    .hidden-xs {
        display: none;
    }

    li.nav-item.active {
        margin: 3px 11px;
    }

    .navbar-nav {
        flex-direction: row;
    }


    .col-sm-6.col-xs-6.col-lg-2.back.text-center {
        max-width: 50%;
    }

    .col-sm-6.col-xs-6.col-lg-2.text-center.nextbtn {
        max-width: 50%;
    }
}

/*Jay20220315 Start*/
/*Font*/

@font-face {
    font-family: "Arial";
    src: url("../fonts/Font_Editor/Arial.ttf") format("truetype");
}

@font-face {
    font-family: "BrushScriptBT";
    src: url('../fonts/Font_Editor/Brush Script BT.ttf') format('truetype');
}

@font-face {
    font-family: "Eurostile";
    src: url('../fonts/Font_Editor/Eurostile-RegularCyr.ttf') format('truetype');
}

@font-face {
    font-family: "FuturaBkBT";
    src: url('../fonts/Font_Editor/Futura Bk BT Book.ttf') format('truetype');
}

@font-face {
    font-family: "ClassGarmndBT";
    src: url('../fonts/Font_Editor/ClassGarmnd BT Bold.ttf') format('truetype');
}

@font-face {
    font-family: "MediciScript";
    src: url('../fonts/Font_Editor/Medici Script.ttf') format('truetype');
}

@font-face {
    font-family: "MtypeCursive";
    src: url('../fonts/Font_Editor/MyCursiveFont.ttf') format('truetype');
}

@font-face {
    font-family: "NewsGothBT";
    src: url('../fonts/Font_Editor/News Gothic BT.ttf') format('truetype');
}

@font-face {
    font-family: "NewsGothCnBT";
    src: url('../fonts/Font_Editor/NewsGoth Cn BT.ttf') format('truetype');
}

@font-face {
    font-family: "ParkAvenueBT";
    src: url("../fonts/Font_Editor/ParkAvenue BT.ttf") format("truetype");
}

@font-face {
    font-family: "Swis721BT";
    src: url('../fonts/Font_Editor/Swiss 721 BT V2.ttf') format('truetype');
}

@font-face {
    font-family: "Roboto";
    src: url('../fonts/Font_Editor/Roboto Regular.ttf') format('truetype');
}
/*Font*/
/*Jay20220315 End*/

#QRCodeForAdd {
    position: fixed;
    bottom: 15px;
    left: 20px;
    text-align: left
}

#QRCodeText {
    float: left;
    width: 150px;
    font-size: small;
    font-weight: bold;
    /*   color:dimgray;*/
}

.counter-main-wrapper.design-one {
    background: rgb(0 123 255 / 10%);
    border: #fff 10px solid;
}

    .counter-main-wrapper.design-one .or-line {
        border-bottom: 1px solid #fff;
    }

    .counter-main-wrapper.design-one .timeInterval {
        background: transparent;
    }

/* TV Card */

.tv-card-wrapper .tv-card {
    height: calc(100vh - 70px) !important;
}

.tv-card-wrapper .tocan-label {
    color: #fff;
    font-size: 1.8vw;
    margin-top: 20px;
    font-weight: 600;
}

.tv-card-wrapper .item-wrapper {
    margin: auto;
    position: relative;
    top: -32px;
}

.tv-card-wrapper .tocan-name {
    color: #fff;
    /*font-size: 2vw;*/
    font-size: 5vw;
}

.tv-card-wrapper .tv-card-item {
    display: flex;
    align-items: center;
    flex-flow: column;
    border-right: #fff 1px solid;
    /*width:50%;*/
    width: 70%; /*Reshma20220329*/
}

    .tv-card-wrapper .tv-card-item .tocan-item {
        color: #fff;
        /*font-size: 12vw;*/
        font-size: 19vw;
        line-height: 1.1;
        font-weight: 900;
        margin-top: auto;
    }

.tv-card-wrapper .other-tocan-list {
    /* width: 50%;*/
    width: 30%; /*Reshma20220329*/
    padding: 0 30px;
    color: #fff;
}

.tv-card-wrapper .other-tocan-list {
    display: flex;
    flex-flow: column;
    align-self: center;
    height: 100%;
}

    .tv-card-wrapper .other-tocan-list .list-header {
        display: flex;
        justify-content: center;
        width: 100%;
        /*max-width: 300px;*/
        text-align: left;
        max-width: 370px; /*Reshma20220329*/
        /*margin-left: 25px;*/ /*Reshma20220405*/
        margin-left: 20%;
    }

        .tv-card-wrapper .other-tocan-list .list-header label {
            font-size: 1.8vw;
            margin-top: 20px;
            width: 100%;
            font-weight: 600;
            padding: 0 !important;
        }

    .tv-card-wrapper .other-tocan-list .tocan-list {
        display: flex;
        justify-content: center;
        width: 100%;
        flex-flow: column;
        gap: 10px;
        /*max-width: 300px;*/
        text-align: left;
        /*text-align: center;*/ /*Reshma20220329*/
        max-width: 370px; /*Reshma20220329*/
        /* margin-left: 27px;*/ /*Reshma20220405*/
        margin-left: 20%; /*Reshma20220405*/
    }

        .tv-card-wrapper .other-tocan-list .tocan-list li {
            font-size: 1.2vw;
            display: flex;
            justify-content: center;
            width: 100%;
            align-items: center;
            margin-top: 5px; /*Reshma20220405*/
        }

            .tv-card-wrapper .other-tocan-list .tocan-list li span {
                width: 100%;
                /*Reshma20220405*/
                text-align: left;
                /*margin-left: 7px;*/
            }

                .tv-card-wrapper .other-tocan-list .tocan-list li span.ticket {
                    font-size: 3vw;
                    font-weight: 900;
                    line-height: 1;
                }

.counter-setting {
    position: absolute;
    right: 5px;
    top: 5px;
    z-index: 1000;
}

    .counter-setting img {
        background: #495057 !important;
    }


@media screen and (max-width: 440px) {
    .tv-card-wrapper .tv-card {
        flex-direction: column !important;
    }

    .tv-card-wrapper .tv-card-item {
        border: none;
    }
}


/* & TV Card */
@media (max-width: 1600px) {
    .container-sm, .container {
        max-width: 100%;
    }    
}

@media (max-width: 1280px) {
    .btn-card .buttons-wrapper .btn {
        font-size: 16px;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
}

@media (max-width: 1024px) {
    .ddl {
        top: -17px;
    }

    .lang-label {
        display: none;
    }

    .sb-topnav.navbar-dark #sidebarToggle {
        /* Jayvin20230708*/
        padding: 7px 10px;
        margin-left: 5px;
        font-size: 18px;
    }

    .btn-card .buttons-wrapper .btn {
        font-size: 0;
    }

        .btn-card .buttons-wrapper .btn svg,
        .btn-card .buttons-wrapper .btn i {
            font-size: 16px;
        }

    .counter-main-wrapper .qnumber .counter-number {
        font-size: 70px;
    }

    .counter-main-wrapper .qnumber h3 {
        font-size: 15px;
    }

    .counter-main-wrapper .category {
        font-size: 14px;
        padding: 10px 12px;
        margin-top: 0;
    }

    .counter-main-wrapper .or-line {
        margin: 25px 0;
    }

    .counter-main-wrapper .timeInterval {
        min-height: 65px !important;
    }

        .counter-main-wrapper .timeInterval h2 {
            font-size: 40px;
            line-height: 1;
            margin-bottom: 0;
        }

    .left-side-bar .sidebar-header {
        font-size: 15px;
        line-height: 1;
    }

    #tokenQList li > div:not(.tokenNo) {
        font-size: 14px;
    }

    .queueList li .tokenNo {
        font-size: 16px;
    }

    .btn-card {
        display: flex;
        padding: 1rem;
    }

        .btn-card .buttons-wrapper .btn {
            padding: 1rem 0;
            width: 100%;
            text-align: center;
        }

            .btn-card .buttons-wrapper .btn i {
                font-size: 14px;
            }

    .admin h4 {
        font-size: 16px;
    }

    .card {
        height: auto;
    }

        .card .icon .fa-3x {
            font-size: 1.8em;
        }

    .qnumber h1.no-number {
        font-size: 2rem;
    }
}

@media (max-width: 991px) {

    #QRCodeForAdd {
        bottom: 5px;
        left: 10px;
        width: 80px;
    }

        #QRCodeForAdd canvas {
            width: 100%;
        }
}

@media (max-width: 768px) {

    #QRCodeForAdd {
        display: none;
    }
    /*Reshma20230615 set style for setdefault Logo*/
    .filename {
        margin-right: 150px !important;
    }
}

@media (max-width: 575px) {
    /*Jayvin20230708*/
    .navbar-brand img {
        height: 30px !important;
    }
    
    .container-fluid.admin {
        padding-left: 0;
        padding-right: 0;
    }

    .top-bar-wrapper {
        display: flex;
        flex-flow: column;
        justify-content: center;
        gap: 13px;
    }

    .top-bar-right-side {
        margin-right: auto;
        margin-left: auto;
    }

    .admin a.btn.btn-info.btn.btn-block {
        font-size: 16px;
    }

    .cat-list-select {
        padding: 0;
    }

        .cat-list-select a.btn {
            width: 100% !important;
        }

    .title-wrapper {
        margin-bottom: 25px;
    }

        .title-wrapper .h1Header {
            font-size: 26px;
            margin-bottom: 0;
        }

    #userq {
        margin-bottom: 70px;
    }

        #userq .container-fluid.admin {
            padding-left: 0;
            padding-right: 0;
        }

    .btn-card {
        height: auto;
        margin-top: 18px;
        margin-bottom: 18px;
    }

    .back-btn {
        z-index: 99;
        width: 100%;
        text-align: center;
        position: fixed;
        left: 0;
        top: inherit;
        transform: inherit;
        bottom: 0;
        margin-bottom: 0;
        justify-content: center;
        height: 60px;
    }

        .back-btn svg {
            width: 20px;
        }

    table.dataTable thead .sorting, table.dataTable thead .sorting_asc, table.dataTable thead .sorting_desc, table.dataTable thead .sorting_asc_disabled, table.dataTable thead .sorting_desc_disabled {
        background-position: calc(100% - 5px) center !important;
    }

    table.dataTable thead th {
        padding: 1rem 0.5rem;
        font-size: 13px;
        line-height: 1.2;
    }

    table.dataTable tbody td {
        min-width: 90px;
    }

    .user-sec-edit .btn.save {
        width: 100%;
    }

    .site-logo img {
        height: auto !important;
        width: 100px;
    }

    .user-sec-edit {
        padding: 0;
    }

    .left-side-bar {
        margin-bottom: 18px;
    }

    .queueList {
        height: auto;
    }
}
/*Jayvin20230708*/
@media (max-width: 460px){
   
    .navbar.bg-dark .btn.userTopset {
        padding: 2px 7px;
        overflow: hidden;
        position: absolute;
        right: 15px;
        top: calc(100% - 7px);
    }
}
/* For mobile layout css */
.mobile-html {
    height: auto;
}

    .mobile-html * {
        box-sizing: border-box;
    }

body.for-mobile {
    background: #fff;
    height: auto;
}

    body.for-mobile .body-wrapper {
        width: 100%;
        height: auto;
        overflow: hidden;
    }

    body.for-mobile .navbar.navbar-dark {
        background: #2D85C9;
        justify-content: flex-start;
        padding: 0.5rem 1rem;
        margin: 0;
        flex-wrap: nowrap;
    }

        body.for-mobile .navbar.navbar-dark .massage {
            font-size: 12px;
            line-height: 1.2;
            margin-left: 0;
        }

    body.for-mobile .navbar #btnQueueList {
        background: transparent;
        color: #fff;
        padding: 0;
        font-size: 24px;
        line-height: 1;
    }

    body.for-mobile .counter-main-wrapper.design-one {
        border: none;
        box-shadow: none;
        height: auto;
    }

    body.for-mobile .btn-card {
        box-shadow: none;
    }

    body.for-mobile .counter-main-wrapper .qnumber {
        margin-bottom: 10px;
    }

        body.for-mobile .counter-main-wrapper .qnumber h3 {
            font-size: 14px;
        }

        body.for-mobile .counter-main-wrapper .qnumber .counter-number {
            font-size: 42px;
        }

    body.for-mobile .counter-main-wrapper .category {
        font-size: 12px;
        padding: 4px 10px;
        margin-top: 0;
    }

    body.for-mobile .counter-main-wrapper .or-line {
        margin: 12px 0;
    }

    body.for-mobile .counter-main-wrapper .timeInterval {
        min-height: 46px !important;
    }

        body.for-mobile .counter-main-wrapper .timeInterval h4 {
            font-size: 14px;
        }

        body.for-mobile .counter-main-wrapper .timeInterval h2 {
            font-size: 30px;
        }

    body.for-mobile .qnumber h1.no-number {
        font-size: 1.2rem;
    }

    body.for-mobile .btn-card .buttons-wrapper .btn {
        font-size: 16px;
    }

/* & For mobile layout css */

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .admin a.btn.btn-info.btn.btn-block {
        /*margin-bottom: 25px;*/
        /*    border-radius: 15px;*/ /*Reshma20220425 Give comment to check when category button is only one */
        background-color: #8BAEF4;
        color: white;
        border-color: #8BAEF4;
        font-size: 22px;
        margin-right: 10px;
        margin-bottom: 10px !important;
    }    
    
}