/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : Jan 21, 2022, 11:40:08 AM
    Author     : Administrator
*/

.ss_cashier_base
{
    position:relative;

    background-color: white;

    text-align:left;

    border:1px solid lightgrey;
    border-radius:5px;
    height:90vh;
    width:90vw;
    margin:auto;
    margin-top:calc(10vh / 2);

    box-shadow: 0 0px 3px 0px #646464;
    
    font-size:0.9em;

}

.ss_cashier_selection_base
{
    width:70%;
    height:100%;
    background-color: rgba(245,245,245,1);
}

.ss_cashier_order_base
{
    height:100%;
    width:29%;
    vertical-align: top;
    border:1px solid none;
}

.ss_cashier_order_folder
{
    width:100%;
    height:73%;
    border-bottom:1px solid none;
    overflow-y:auto;
}

.ss_cashier_heading
{
    text-align:right;
    height:1em;
    padding-right:3em;
    margin-top: 1em;
}

.ss_cashier_heading2
{
    text-align:right;
    height:1em;
    padding-right:4.5em;
    margin-top: 1em;

    font-family:Opensans-Semibold;
    color:grey;
}

.ss_cashier_search_base
{
    width:100%;
}

.ss_cashier_search
{
    position:relative;
    width:90%;
}

.ss_cashier_search_barcode
{
    position:absolute;
    padding-top:0.65em;
    top:0.1em;
    left:0.1em;
    padding-left:0.5em;
    padding-right:0.5em;
    border-right:1px solid lightgrey;
    background-color: white;
    vertical-align:top;
    height: 2.8em;
    outline:none;
    
    border-radius:5px;
    
    box-sizing: border-box;
}

.ss_cashier_search_barcode:hover
{
    background-color: #FFC30E;/*#81AB1C green */
    cursor:pointer;
}

.ss_cashier_search_barcode:active
{
    background-color: #81AB1C;
    cursor:pointer;
}

.ss_cashier_search_barcode:focus
{
    border:1px solid white;
}

.ss_cashier_search_box
{
    display:inline-block;
    height:3em;
    width:100%;
    background-color: white;
    overflow:hidden;
    border:1px solid lightgrey;
    border-radius: 5px;
}

.ss_cashier_search_box input
{
    width:calc(100% - 6.5em);
    height:100%;
    border:0px solid white;
    outline:none;
    /*padding-left:1.5em;*/
    padding-left:3.5em;
    color:rgba(150,150,150,1);
}

.ss_cashier_search_box > div
{
    width:2em;
}

.ss_cashier_items_base
{
    width:100%;
    height:72%;
}

.ss_cashier_items_inner
{
    padding-left:1.3em;
}

.ss_cashier_items_body
{
    display:block;
    overflow-x:hidden;
    overflow-y:auto;

    height:90%;
    
    width:calc(90% + 2.5em);
    margin:auto;
}

.ss_cashier_items_body_inner
{
    width:110%;
}

.ss_cashier_itemcode
{
    width:100%;
    
}

.ss_cashier_itemN_base
{
    display:inline-block;
    
    border-radius:5px;
    border:1px solid white;
    background-color:white;
    box-shadow: 0 0px 3px 0px #646464;

    height:9em;
    width:19.8%;
    margin-left:2px;
    margin-right:2%;
    margin-top:2%;
}

.ss_cashier_itemN_base:hover
{
    border:1px solid #337ab7;
    cursor:pointer;
}
/*
.ss_cashier_itemN_base:nth-child(5n)
{
    border:1px solid red;
}
*/

.ss_cashier_itemN_top
{
    width:100%;
    height:70%;

    border-bottom:2px solid lightgrey;
    
}

.ss_cashier_itemN_footer
{
    width:100%;
    height:28%;
}

.ss_cashier_itemN_footer span
{
    margin-left:0.5em;
    
    font-size:0.8em;
}

.ss_cashier_itemN_footer span:nth-of-type(1)
{
    font-family:OpenSans-Bold;
}

.ss_cashier_itemN_footer span:nth-of-type(2)
{
    font-family:OpenSans-Regular;
}

.ss_cashier_category_base
{
    width:100%;
    height:10%;
}

.ss_cashier_category_inner
{
    width:90%;
    height:100%;
    margin:auto;
    background-color:white;
}

.ss_cashier_category_folder
{
    height:80%;
    
    border-radius:5px;
}

.ss_cashier_category_N_base
{
    vertical-align: top;
    height:100%;
    border-radius:5px;
    
}

.ss_cashier_category_N_more
{
    height:2em;
    float:right;
    margin-right:0.5em;
    
    font-size:1.5em;
    width:1em;
    padding-top:0.5em;

}

.ss_cashier_category_N_base:nth-child(1)
{
    margin-left:1em;
}

.ss_cashier_category_N_base:hover
{
    background-color: rgba(240,240,240,1);
    cursor:pointer;
}

.ss_cashier_category_N_base:active
{
    border:1px solid lightgrey;
    background-color: #98BCDB;
}

.ss_cashier_category_N
{
    height:2em;
    padding-top:1em;
    margin:1em;
}

.ss_cashier_category_N span:nth-child(1)
{
    font-size:1em;
    padding-right:0.5em;
    padding-left:0.5em;
}

.ss_cashier_orderN_base
{
    height:4em;
    width:97%;
    border-radius:5px;
    margin:auto;
    margin-left:0.5em;
}

.ss_cashier_orderN_base:nth-of-type(1)
{
    margin-top:3em;
}

.ss_cashier_orderN_base:hover
{
    background-color: rgba(220,220,220,0.5);
}

.cashier_order_N_icon
{
    height:2em;
    width:1em;
    vertical-align: top;
    padding-left:1em;
    padding-right:1em;
}

.cashier_order_N_icon span
{
    font-size:1.2em;
}


.cashier_order_N_dets_base
{
    display:inline-block;
    
    
    width:calc(100% - 8.8em);
    width:calc(95%);
    
    
}


.cashier_order_N_dets
{
    max-height:2em;
    padding-bottom:0.5em;
    font-family:Opensans-Semibold;
    width:100%;
    
}

.cashier_order_N_dets span:nth-of-type(1)
{
    display:block;
    font-size:0.7em;
}

.cashier_order_N_dets span:nth-child(2)
{
    display:block;
    font-size:0.9em;
}

.ss_cashier_order_N_dets_line2_price
{
    cursor:pointer;
}

.ss_cashier_order_N_dets_line2_price:hover
{
    font-family:Opensans-Semibold;
    color:#81AB1C;
}

.ss_cashier_order_N_dets_line2_old_price
{
    padding-left:0.5em;
    font-size:0.8em;
    color:red;
    text-decoration:line-through;
}

.cashier_order_N_quantity_base
{
    
    width:5.8em;
    text-align:left;
    border:1px solid transparent;
}

.cashier_order_N_quantity
{
    height:1em;
    width:45%;
    /*padding-top:1em;*/
}

.cashier_order_N_quantity input
{
    border:2px solid white;
    width:calc(40% - 2px);
    vertical-align: top;
    text-align: center;
}

.cashier_order_N_quantity input:hover
{
    border:2px solid lightgrey;
    cursor:pointer; 
}

.cashier_order_N_quantity span:nth-of-type(1)
{
    font-size:1.1em;
    color:#ADD8E6;
    border: 1px solid transparent;
}

.cashier_order_N_quantity span:nth-of-type(1):hover
{
    color:#FF4D4D;
    cursor:pointer;
}

.cashier_order_N_quantity span:nth-of-type(1):active
{
    border-radius:5px;
    border: 1px solid #FF4D4D;
}

.cashier_order_N_quantity span:nth-of-type(2)
{
    font-size:1em;
    padding-left:0.3em;
    padding-right:0.3em;
}

.cashier_order_N_quantity span:nth-of-type(2)
{
    font-size:1.1em;
    color:#ADD8E6;
    border: 1px solid transparent;
}

.cashier_order_N_quantity span:nth-of-type(2):hover
{
    cursor:pointer;
    color:#81AB1C;
}

.cashier_order_N_quantity span:nth-of-type(2):active
{
    border-radius:5px;
    border: 1px solid #81AB1C;
}

.ss_cashier_total_base
{
   width:100%;
   border-top:1px solid lightgrey;
   font-family:Opensans-Semibold;
}

.ss_cashier_quantity_base
{
    width:85%;
    height:1.5em;
    margin:auto;
    margin-top:1em;

}

.ss_cashier_subtotal_base
{
    width:85%;
    height:1.5em;
    margin:auto;
    
}


.ss_cashier_tax_base
{
    width:85%;
    height:1.5em;
    margin:auto;
}

.ss_cashier_final_total_base
{
    width:85%;
    height:1.5em;
    margin:auto;
}


.ss_cashier_totals_line_col1
{
    width:48%;
}


.ss_cashier_totals_line_col2
{
    width:48%;
    text-align: right;
}


.cashier_refresh
{
    top:1em;
    right:3em;
}

.cashier_refresh span
{
    font-size:1.2em;
    color:grey;
}

.cashier_refresh span:hover
{
    cursor:pointer;
    color:#337ab7;
}

.cashier_video
{
    top:1em;
    right:5em;
}

.cashier_video span
{
    font-size:1.3em;
    color:grey;
}

.cashier_video span:hover
{
    cursor:pointer;
    color:#337ab7;
}

.cashier_video_screen
{
    z-index:4;
    top:0;
    left:0;
    border-radius:5px;
    overflow:hidden;
    height:100%;
    width:100%;
}

.cashier_video_screen_close_btn
{
    z-index:6;
    right:0;
    top:90%;
    border:1px solid lightgrey;
    border-top-left-radius:5px;
    border-bottom-left-radius:5px;

    background-color: rgba(120,120,120,0.2);
    color:lightgrey;
    
    height:2em;
    width:10em;
    font-family:Gotham-Medium;
    text-align:center;

    visibility:hidden;
}

.cashier_video_screen_close_btn:hover
{
    color:white;
    border: 1px solid white;
    cursor:pointer;
}

.cashier_video_screen_close_btn:active
{
    color:black;
    background-color:white;
}

.cashier_close
{
    top:1em;
    right:1em;
}

.cashier_close span
{
    font-size:1.3em;
    color:grey;
}

.cashier_close span:hover
{
    cursor:pointer;
    color:#E43137;
}



.cashier_more
{
    top:1em;
    left:1em;
}

.cashier_more span
{
    font-size:1.3em;
    color:grey;
}

.cashier_more span:hover
{
    cursor:pointer;
    color:#FFC30E;
}

.cashier_back
{
    top:1em;
    left:1em;
}

.cashier_back span
{
    font-size:1.3em;
    color:grey;
}

.cashier_back span:hover
{
    cursor:pointer;
    color:#FFC30E;
}

.cashier_checkout_base
{
    width:100%;
    font-family:Opensans-Semibold;
    margin-top:1em;
}

.cashier_checkout_inner
{
    width:85%;
    margin:auto;
}

.cashier_checkout_btn
{
    height:4em;
    border-radius:5px;
    background-color:#337ab7;
    border:0px solid transparent;
    box-shadow: 0 0px 3px 0px #646464;
    color:white;
}

.cashier_checkout_btn:hover
{
    background-color:#81AB1C;
    cursor:pointer;
}

.cashier_checkout_btn:active
{
    background-color:#81AB1C;
    border:1px solid lightgrey;
    box-shadow: 0 0px 0px 0px #646464;
}

.ss_cashier_loading_screen
{
    top:3em;
    left:0;
    height:calc(100% - 3em);
    width:100%;
    background-color: rgba(200, 200, 200, 0.75);
    border-radius:inherit;
    visibility:hidden;
    z-index:3;
}


.ss_cashier_item_options_base
{
    top:0;
    left:0;
    height:100%;
    width:70%;
    background-color: rgba(200, 200, 200, 0.85);
    visibility:hidden;
    z-index:3;
}

.ss_cashier_item_options_folder
{
    min-height:3em;
    max-height:50em;
    overflow:auto;
}

.ss_cashier_item_options_select_heading
{
    width:90%;
    margin:auto;
    height:1em;
    text-align: left;
    font-family:Gotham-Medium;

}

.ss_cashier_item_option_N
{
    width:90%;
    margin:auto;
    margin-top:1em;
    padding-top:1em;
    padding-bottom:1em;
    background-color:white;
    /*box-shadow: 0 0px 5px 0px #b4b4b4;*/
    box-shadow: 0 0px 5px 0px #646464;
    border-radius:5px;
    border:1px solid transparent;
    
    font-family:Gotham-Medium;
}

.ss_cashier_item_option_N:hover
{
    background-color: #FFC30E;
    cursor:pointer;
}

.ss_cashier_item_option_N:active
{
    background-color: #81AB1C;
}

.ss_cashier_item_option_N_cancel
{
    margin:auto;
    margin-top:1em;
    width:90%;
    padding-top:1em;
    padding-bottom:1em;
    background-color:white;
    box-shadow: 0 0px 5px 0px #646464;
    border-radius:5px;
    font-family: Gotham-Medium;
}

.ss_cashier_item_option_N_cancel:hover
{
    background-color: #E43137;
    cursor:pointer;
}

.ss_cashier_item_option_N_cancel:active
{
    border:1px solid white;
}

.ss_cashier_manual_entry_base
{
    top:0;
    left:0;
    height:100%;
    width:70%;
    background-color: rgba(200, 200, 200, 0.85);
    /*visibility:hidden;*/
    z-index:3;
}

.ss_cashier_manual_entry_info_base
{
    margin:auto;
    width:100%;
    height:100%;
}

.ss_cashier_manual_entry_line
{
    display:block;
    width:90%;
    height:4em;
    margin:auto;
    margin-top:1em;
    border-radius:5px;

    font-family: OpenSans-Semibold;
    

}

.ss_cashier_manual_entry_line input
{
    width:98%;
    height:100%;
    border-radius:inherit;
    border:none;
    padding-left:0.5em;

    color:grey;
    
    font-family: OpenSans-Semibold;
}

.ss_cashier_manual_entry_line_vendor_VALID
{
    font-size:1.5em;
    top:1em;
    right:1em;
    color:#81AB1C;
}

.ss_cashier_manual_entry_line_vendor_INVALID
{
    font-size:1.5em;
    top:1em;
    right:1em;
    color:#FF4D4D;
}

.ss_cashier_manual_entry_line_msg
{
    text-align:left;
    
    height:2em;
    text-shadow: 2px 2px white;
    letter-spacing: 1px;
    font-size: 1.2em;
}


.cashier_manual_entry_button_base:nth-of-type(1)
{
    margin-top:0.5em;
}


.cashier_manual_entry_button_base:nth-of-type(2)
{
    margin-top:1em;
}


.cashier_manual_entry_button
{
    height:4em;
    border-radius:5px;
    background-color:#337ab7;
    border:1px solid transparent;
    box-shadow: 0 0px 3px 0px #646464;
    color:white;
    
    font-family: OpenSans-Semibold;
}

.cashier_manual_entry_button_ok:hover
{
    background-color:#81AB1C;
    cursor:pointer;
}

.cashier_manual_entry_button_ok:active
{
    background-color:#81AB1C;
    border:1px solid lightgrey;
    box-shadow: 0 0px 0px 0px #646464;
}

.cashier_manual_entry_button_cancel:hover
{
    background-color:#E43137;
    cursor:pointer;
}

.cashier_manual_entry_button_cancel:active
{
    
    border:1px solid lightgrey;
    box-shadow: 0 0px 0px 0px #646464;
}



/* ********************************************************************************
    MOBILE PHONE
********************************************************************************  */
@media only screen and (max-height: 480px)
{
    
    .ss_cashier_base 
    {
        height:100vh;
        width:100vw;
        overflow-y: auto;
    }
    
    .ss_cashier_items_base
    {
        height:90%;
    }

    .ss_cashier_date
    {
        overflow:hidden;
        width:0;
        margin-bottom:1em;
    }

    .ss_cashier_heading2
    {
        text-align:left;
        padding-left:1.2em;
    }

    .ss_cashier_category_base
    {
        overflow:hidden;
        height:0;
    }

}

@media only screen and (max-width: 480px), only screen and (max-width: 480px)
{

    .ss_cashier_base
    {
        height:100vh;
        width:100vw;
        overflow-y: auto;
    }
    
    .ss_cashier_date
    {
        overflow:hidden;
        width:0;
        margin-bottom:1em;
    }

    .ss_cashier_heading2
    {
        text-align:left;
        padding-left:1.2em;
    }
    
    .ss_cashier_items_base
    {
        height:90%;
    }

    .ss_cashier_category_base
    {
        overflow:hidden;
        height:0;
    }

    .ss_cashier_selection_base
    {
        width:100%;
    }
    
    .ss_cashier_order_base
    {
        width:100%;
    }

    .ss_cashier_itemN_base
    {
        width:41%;

        margin-left:2px;
        margin-right:2%;
        margin-top:2%;
    }

    .ss_cashier_items_body
    {
        height:90%;

        width:calc(90%);
        margin:auto;
    }

    .ss_cashier_items_inner
    {
        padding-left:0em;
    }
    
    .ss_cashier_orderN_base
    {
        font-size:1em;
    }

    .cashier_order_N_dets_base
    {
        width:58%;
        
    }
    
    .cashier_order_N_quantity_base
    {
        width:25%;
        
    }

    .ss_cashier_total_base
    {
        font-size:1em;
    }

}

@media only screen and (min-width: 480px) and (max-width: 768px)
{
    .ss_cashier_selection_base
    {
        width:60%;
    }
    
    .ss_cashier_order_base
    {
        width:39%;
    }

    .ss_cashier_itemN_base
    {
        width:42%;
 
        margin-left:2px;
        
        margin-right:2%;
        margin-top:2%;
    }

    .ss_cashier_items_body
    {
        height:90%;

        width:calc(90%);
        margin:auto;

    }

    .ss_cashier_items_inner
    {
        padding-left:0em;
    }

    .ss_cashier_orderN_base
    {
        font-size:0.7em;
    }

    .ss_cashier_total_base
    {
        font-size:0.7em;
    }

}

/* ********************************************************************************
 Medium devices (landscape tablets, 768px and up) 
********************************************************************************  */
/* tablet - portrait (must be min width)*/
@media only screen and (min-width: 768px) and (max-width: 992px)
{
    .ss_cashier_itemN_base
    {
        width:27%;

        margin-left:2px;
        margin-right:2%;
        margin-top:2%;
    }

    .ss_cashier_items_body
    {
        height:90%;

        width:calc(90%);
        margin:auto;
        
    }

    .ss_cashier_items_inner
    {
        padding-left:0em;
    }
    
    .ss_cashier_orderN_base
    {
        font-size:0.8em;
    }
    
    .ss_cashier_total_base
    {
        font-size:0.8em;
    }

}

/* tablet - landscape (must be min width)*/
@media only screen and (min-width: 992px) and (max-width: 1024px)
{
    .ss_cashier_itemN_base
    {
        width:19.3%;

        margin-left:2px;
        margin-right:2%;
        margin-top:2%;
    }

    .ss_cashier_items_body
    {
        height:90%;

        width:calc(90% + 1em);
        margin:auto;
    }

    .ss_cashier_items_inner
    {
        padding-left:0.5em;
    }

    .ss_cashier_orderN_base
    {
        font-size:0.9em;
    }
    
    .ss_cashier_total_base
    {
        font-size:0.9em;
    }

}


/* tablet - landscape (must be min width)*/
@media only screen and (min-width: 1024px)
{
    .ss_cashier_itemN_base
    {
        width:19.5%;

        margin-left:2px;
        margin-right:2%;
        margin-top:2%;
    }

    .ss_cashier_items_body
    {
        height:90%;

        width:calc(90% + 1em);
        margin:auto;
    }

    .ss_cashier_items_inner
    {
        padding-left:0.5em;
    }
}


/* extra large devices : desktops, pcs and so on*/
@media only screen and (min-width: 1200px)
{
    .ss_cashier_itemN_base
    {
        width:19.5%;

        margin-left:2px;
        margin-right:2%;
        margin-top:2%;
    }
    
    .ss_cashier_items_body
    {
        height:90%;

        width:calc(90% + 2em);
        margin:auto;
    }

    .ss_cashier_items_inner
    {
        padding-left:1em;
    }

}