* {
    box-sizing: border-box;
    margin:0;
    padding:0;
}

body {
    min-height: 100%;
    min-width: 100%;
    font-family: 'Century Gothic', sans-serif;
    background-color: #1C84BD;
    color:#FFFFFF;
    margin: auto;
}

/* Remove scroll bars */

::-webkit-scrollbar {
    width: 0px;
}

::-webkit-scrollbar-track {
    border-radius: 0px;
    -webkit-box-shadow: inset 0 0 0px rgba(0,0,0,0.3);
    box-shadow: inset 0 0 0px rgba(0,0,0,0.3);
}

::-webkit-scrollbar-thumb {
    border-radius: 0px;
    -webkit-box-shadow: inset 0 0 0px rgba(0,0,0,0.5); 
    box-shadow: inset 0 0 0px rgba(0,0,0,0.5); 
}

.center {
    text-align:center;
}

.navbar-header {
    position: fixed;
    top: 0px;
    left: 0px;
    height: 30px !important;
    width: 100%;
    background-color: #5EB7E7;
    color: #FFFFFF;
}

.navbar-inner {
    display:flex;
    align-items: center;
}

.navbar-footer {
    position: fixed;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    top: calc(100vh - 50px);
    height: 50px;
    width: 100%;
    padding-left: 15px;
    color: #FFFFFF;
    text-align: center;
}

.footer-left,
.footer-middle,
.footer-right {
    width: 30%;
}

.header-icon{
    margin: 5px;
    font-size: 20px;
    color:#FFFFFF;
}

.header-icon-link :hover{
    color:#FFFFFF;
}

.container-main {
    position: absolute;
    top: 30px;
    left: 0px;
    width: 100%;
    overflow-y: scroll;
    overflow-x: hidden;
}

.overlay {
    position: fixed; /* Sit on top of the page content */
    display: none; /* Hidden by default */
    width: 100%; /* Full width (cover the whole page) */
    height: 100%; /* Full height (cover the whole page) */
    /* top: 30px;  */
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.5); /* Black background with opacity */
    z-index: 1002; /* Specify a stack order in case you're using a different order for other elements */
    cursor: pointer; /* Add a pointer on hover */
}

.sidebar-a {
    opacity: 0;
    position: fixed;
    height: 100%;
    top: 0px;
    left: 0px;
    width: 0px;
    z-index: 1002;
    background-color:#219cde !important;
    overflow: scroll;
    transition: all .3s ease .15s;
}

.sidebar-a .sidebar-b {
    width: 100%;
    margin-top: 55px;
    height: 85%;
    text-align: center;
    overflow: scroll;
    cursor: pointer;
}

.container-a-move-right {
    margin-left: 40px;
}

.sidebar-a-show {
    opacity: 1;
    width: 75px;
    transition: all .3s ease .15s;
}

.sidebar-header {
    display: none;
    position: fixed;
    top: 30px;
    left: 0;
    width: 75px;
    height: 30px;
    padding-top: 5px;
    font-size: 10px;
    text-align:center;
}

.sidebar-circle-1 {
    display: inline-block;
    width: 50px;
    height: 50px;
    margin: 5px 0px 5px 0px;
    line-height: 50px;
    border-radius: 50%;
    background-color: #FFF;
    border: none;
    outline: none;
}

.search-customer-blue {
    background-image: url(../images/search-customer-blue.png);
    background-repeat: no-repeat;
    background-size: 30px;
    background-position: center center;
}

.customer-collection-blue {
    background-image: url(../images/customer-collection-blue.png);
    background-repeat: no-repeat;
    background-size: 30px;
    background-position: center center;
}

.goods-in-blue {
    background-image: url(../images/goods-in-blue.png);
    background-repeat: no-repeat;
    background-size: 30px;
    background-position: center center;
}

.search-product-blue {
    background-image: url(../images/search-product-blue.png);
    background-repeat: no-repeat;
    background-size: 30px;
    background-position: center center;
}

.container-a .goods-inward-main {
    margin: 1rem 0.5rem;
    text-align: left;
}

input[type="search"]::-webkit-search-cancel-button {
    padding-right: 5px;
}

.select-label{
    margin-top: 5px;
    margin-bottom: 5px;
    font-size: 12px;
    font-weight:normal;
}

select {
    height: 40px;
    width:100%;
    padding: 5px;
    color:#000000;
    font-size: 20px;
    border: 1px solid #FFFFFF;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: url(../images/arrow-down.png) no-repeat right #FFFFFF;
}

.select-font-1 {
    height: 2rem;
    font-size: 12px;
    color: #0D3D57;
    background: url(../images/sml-blue-arrow-down.png) no-repeat right #FFFFFF;
}

.select-font-2 {
    display: inline-block;
    width: 100%;
    height: 2rem;
    padding: 0px 10px;
    line-height: 2rem;
    font-size: 12px;
    background: url(../images/sml-blue-arrow-down.png) no-repeat right #FFFFFF;
    background-repeat: no-repeat;
    background-size: 15px 15px;
    /* background-position: right;  */
    background-position: 98% center;
    border-radius: 25px;
    border: none;
    text-align: left;
}

.select-font-3 {
    display: inline-block;
    width: 100%;
    height: 2.5rem;
    padding: 0px 10px;
    line-height: 2.5rem;
    font-size: 14px;
    background: url(../images/sml-blue-arrow-down.png) no-repeat right #FFFFFF;
    background-repeat: no-repeat;
    background-size: 15px 15px;
    background-position: right; 
    border: none;
    text-align: left;
    font-family: 'Century Gothic', sans-serif;
}

.input-label {
    margin-top: 5px;
    margin-bottom: 0px;
    font-size: 16px;
    font-weight: normal;
}

.input-box-1 {
    width:100%;
    padding: 3px;
    color:#000000;
    font-size: 20px;
    border: 1px solid #FFFFFF;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.input-box-2 {
    height: 30px;
    width: 100%;
    padding: 2px;
    border: 1px solid #FFFFFF;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.input-box-3 {
    height: 30px;
    width: 80%;
    padding: 5px;
    color:#000000;
    font-size: 20px;
    border: 1px solid #FFFFFF;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

textarea {
    resize: none;
}
  
.container-a .goods-inward-box {
    margin: 0.5rem;
    text-align: center;
}

.container-a .goods-inward-box-1 {
    margin: 0.5rem;
    text-align: center;
}

.goods-inward-box-2 {
    text-align:right;
}

.goods-inward-btn {
    display: inline-block;
    width: 100%;
    height: 70px;
    line-height: 70px;
    font-weight: 400;
    font-size: 24px;
    background-color: #A2D9F7;
    color: #FFFFFF;
    border: none;
    outline: none;
    text-decoration: none;
}

.goods-inward-btn-1 {
    padding-top:17px;
    width: 100%;
    height: 70px;
    font-weight: 400;
    font-size: 24px;
    background-color: #A2D9F7;
    color: #FFFFFF;
    border: none;
    outline: none;
}

.goods-inward-btn-1 a {
    text-decoration:none;
}

.goods-inward-btn-2 {
    display: inline-block;
    width: 75%;
    height: 70px;
    line-height: 70px;
    font-weight: 400;
    font-size: 24px;
    background-color: #A2D9F7;
    color: #FFFFFF;
    border: none;
    outline: none;
    text-decoration: none;
    text-align: center;
}

.addtoinwarddisabled{
    opacity:50% !important;
    background-color:#219cde !important;
}

.panel-inward-list {
    background-color: #fff;
    color:#000000;
    border: none;
    outline: none;
}

.inward-list{
    height:150px;
    padding: 0;
    color: #0D3D57;
    font-weight:bold;
    overflow-y:scroll;
}

#inward-list-table {
    width: 100%;
    border-collapse:collapse;
}

.table>tbody>tr.no-border>td,
.table>tbody>tr.no-border>th {
    margin: 0;
    padding:0;
    border-top: none;
}

.table-hover tbody tr:hover td, 
.table-hover tbody tr:hover th {
    background-color: #0D3D57;
    color:#FFFFFF;
}

.inward-list-active{
    background-color: #0D3D57;
    color:#FFFFFF;
}

.second-header {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    position: fixed;
    top: 30px;
    width: 100% !important;
    height: 25px !important;
    padding: 0px 2px 0px 15px;
    background-color: #398DC0;
    color: #FFFFFF;
    cursor: pointer;
    border: none;
    outline: none;
    text-align: center;
}

#second-header-arrow {
    padding-top: 2px;
}

.second-header-title-left {
    width: 40%;
    font-size: 12px;
    text-align: left;
}

.second-header-title-right {
    width: 40%;
    font-size: 12px;
    text-align: right;
}

.second-header-1 {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    position: fixed;
    top: 30px;
    width: 100% !important;
    height: 30px !important;
    padding: 0px 2px 0px 15px;
    background-color: #398DC0;
    color: #FFFFFF;
    cursor: pointer;
    border: none;
    outline: none;
    /* text-align: center; */
}

.scan-barcode-main {
    margin-top: 0.5rem;
    text-align: left;
}

.scan-barcode-main-1{
    margin: 0.5rem;
}

#scanned-product-description{
    width: 100%;
    font-size: 12px;
    margin:0px 0px 5px 0px;
    background-color: #73BAE0;
    color: #FFFFFF;
    border: none;
    outline: none;
    border-collapse: separate;
    border-spacing: 2px;
}

.circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 18px;
    color: #fff;
    line-height: 40px;
    text-align: center;
    background: #1C84BD;
}

.collection-table-col2-circle {
    text-align: center;
}

.scan-barcode-info {
    width: 100%;
    height: 60px;
    margin-top: 5px;
    padding: 11px 10px;
    font-size: 24px;
    background-color: #A2D9F7;
    color: #FFFFFF;
    border: none;
    outline: none;
}

.scan-barcode-specific-qty {
    width: 100%;
    height: 70px;
    margin-top: 10px;
    padding: 16px 10px;
    font-size: 24px;
    background-color: #A2D9F7;
    color: #FFFFFF;
    border: none;
    outline: none;
}

.circle-1 {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    font-size: 60px;
    font-weight: bold;
    color: #fff;
    line-height: 110px;
    text-align: center;
    background: #1C84BD;
}

.scan-barcode-goods-in {
    width: 100%;
    height: 120px;
    margin-top: 20px;
    padding-top: 5px;
    padding-left: 5px;
    font-size: 24px;
    font-weight: bold;
    background-color: #A2D9F7;
    color: #FFFFFF;
    border: none;
    outline: none;
}

.scan-barcode-goods-in-text{
    padding-top:35px;
    text-align:center;
}

#content, 
#content-1 {
    position: fixed;
    top: 60px;
    /* width: 95%; */
    width: 100%;
    text-align: left;
    padding: 0 0.5rem;
    overflow: hidden;
    transition: max-height 0.5s ease-out;
}

#content-3 {
    position: fixed;
    /* width: 95%; */
    width: 100%;
    text-align: left;
    padding: 0 0.5rem;
    overflow: hidden;
    transition: max-height 0.5s ease-out;
}

#deliverynotes,
#customer-edit-notes-inp {
    width:100%;
    background-color: #feff9c;
    color: #000000;
}

#customer-edit-notes-inp,
#customer-edit-address-inp {
    margin-top: 2px;
    font-size: 12px;
    color: #0D3D57;
}

#content .inward-details-main {
    text-align: left;
}

.inward-details-main-2{
    height:185px;
    margin-top:5px;
    margin-bottom:10px;
    overflow-y:scroll;
    text-align: left;
}

#inward-details-description{
    width:100%;
    font-size: 14px;
    background-color: #FFFFFF;
    color: #000000;
    border: none;
    outline: none;
    border-collapse: collapse;
    border-spacing: 2px;
}

.inward-details-btn {
    display: inline-block;
    width: 100%;
    height: 60px;
    line-height: 60px;
    font-weight: 400;
    font-size: 24px;
    background-color: #A2D9F7;
    color: #FFFFFF;
    border: none;
    outline: none;
    text-decoration: none;
    text-align: center;
}

.table-1>tbody>tr.no-border>td,
.table-1>tbody>tr.no-border>th {
    margin: 0;
    padding:2px;
    border-top: none;
}

.operator-list-label {
    position: fixed;
    top: 30px;
    left: 0px;
    width: 100%;
    height: 30px;
    font-size: 20px;
    margin-top: 5px;
    text-align: center;
}

.operator-main {
    position: absolute;
    top: 60px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    grid-template-rows: repeat(auto-fill, minmax(75px, 1fr));
    grid-gap: 10px;
    width: 97%;
    margin: 0px 5px 0px 5px;
    font-size: 18px;
    overflow-y: scroll;
    overflow-x: hidden;
    z-index: -1;
}

.operator-main1,
.operator-main2 {
    position: relative;
    top: 60px;
    left: 0px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.row-0 {
    display:flex;
    justify-content: space-around;  
}

.row-1, .row-2, .row-3, .row-4{
    display:flex;
    justify-content: center;
}

.operator-btn-content {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 75px;
    background-color: #A2D9F7;
}

.operator-btn-header {
    position: absolute;
    top: 0px;
    left: 5px;
    font-size: 16px;
}

.operator-btn {
    font-size: 18px;
}

#back2Top {
    display: none;
    width: 40px;
    height: 40px;
    bottom: 50px;
    right: 20px;
    line-height: 40px;
    overflow: hidden;
    cursor: pointer;
    position: fixed;
    color: #FFFFFF;
    text-align: center;
    font-size: 40px;
    text-decoration: none;
    border-radius: 50px;
}

#back2Top:hover {
    color: #FFFFFF;
}

.circle-btn {
    width: 60px;
    height: 60px;
    margin: 5px;
    border-radius: 50%;
    font-size: 36px;
    font-weight:bold;
    color: #fff;
    line-height: 60px;
    text-align: center;
    background: #5EB7E7;
}

.circle-btn-1 {
    width: 35px;
    height: 35px;
    margin: 5px;
    border-radius: 50%;
    font-size: 20px;
    font-weight:bold;
    color: #fff;
    line-height: 35px;
    text-align: center;
    background: #1C84BD;
}

.circle-btn-2 {
    width: 35px;
    height: 35px;
    margin: 5px;
    border-radius: 50%;
    font-size: 20px;
    font-weight:bold;
    color: #fff;
    line-height: 35px;
    text-align: center;
    background: #5EB7E7;
}

.circle-btn-3 {
    width: 25px;
    height:  35px;
    line-height: 35px;
    margin: 2px;
    border-radius: 5px;
    font-size: 14px;
    font-weight: normal;
    color: #fff;
    text-align: center;
    background: #5EB7E7;
}

.circle-btn-4 {
    width: 50px;
    height:  35px;
    line-height: 35px;
    margin: 2px;
    border-radius: 5px;
    font-size: 14px;
    font-weight: normal;
    color: #fff;
    text-align: center;
    background: #5EB7E7;
}

.circle-btn-5 {
    width: 130px;
    height:  35px;
    line-height: 35px;
    margin: 2px;
    border-radius: 5px;
    font-size: 14px;
    font-weight: normal;
    color: #fff;
    text-align: center;
    background: #5EB7E7;
    border: none;
    outline: none;
    text-decoration: none;
}

.circle-btn-6 {
    display: inline-block;
    width: 20px;
    height: 20px;
    line-height: 20px;
    border-radius: 50%;
    font-size: 10px;
    color: #fff;
    text-align: center;
    background: #1C84BD;
}

.circle-btn-7 {
    width: 40px;
    height: 40px;
    margin: 5px;
    border-radius: 50%;
    font-size: 25px;
    font-weight:bold;
    color: #fff;
    line-height: 40px;
    text-align: center;
    background: #1C84BD;
}

.circle-btn-8 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 40px;
    margin: 5px;
    border-radius: 25px;
    color: #fff;
    text-align: center;
    background: #1C84BD;
}

.operator-box{
    width: 275px;
    height: 70px;
    margin-top:10px;
    text-align:center;
}

.operator-enter-btn {
    display: inline-block;
    width: 275px;
    height: 70px;
    line-height: 70px;
    font-weight: 400;
    font-size: 24px;
    background-color: #A2D9F7;
    color: #FFFFFF;
    border: none;
    outline: none;
    text-decoration: none;
    text-align: center;
}

.operator-enter-btn-1 {
    display: inline-block;
    width: 150px;
    height: 50px;
    line-height: 50px;
    font-weight: 400;
    font-size: 20px;
    background-color: #A2D9F7;
    color: #FFFFFF;
    border: none;
    outline: none;
    text-decoration: none;
    text-align: center;
}

.numpad-label{
    color: #FFFFFF;
    padding-top:30px;
    font-size:24px;
}

.numpad-password{
    height:40px;
    margin-top:20px;
}

.table-2{
    width:100%;
    text-align:center;
}

.dot {
    height: 25px;
    width: 25px;
    margin-right:5px;
    background-color: #FFFFFF;
    border-radius: 50%;
    display: inline-block;
}

.container-a .settings-header {
    font-size: 20px;
    margin: 5px 0px 5px 0px !important;
    text-align: center;
}

.container-a .settings-main {
    height: calc(100% - 35px);
    margin: 0rem 0.5rem 0rem 0.5rem;
    /* background-color: #398DC0; */
    padding-bottom:10px;
    text-align: left;
    overflow-y: scroll;
}

.settings-main1{
    margin: 1rem;
    padding-top: 10px;
}

.settings-main2 {
    margin: 1rem;
    font-size: 12px;
}

.container-a .settings-main3{
    height: 70px;
    margin: 0.5rem;
    padding-top:16px;
    font-weight: 400;
    font-size: 24px;
    background-color: #A2D9F7;
    color: #FFFFFF !important;
    border: none;
    outline: none;
    text-align:center;
}

.settings-box{
    margin:5px 0px 5px 10px;
}

.settings-box1{
    font-size: 14px;
}

.radiotextsty {
    color: #FFFFFF;
    font-size: 16px;
}

.customradio {
    display: block;
    position: relative;
    padding-left: 30px;
    margin-bottom: 0px;
    cursor: pointer;
    font-size: 22px;
    font-weight: normal !important;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Hide the browser's default radio button */
.customradio input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

/* Create a custom radio button */
.checkmark {
    position: absolute;
    top: 7px;
    left: 0;
    height: 18px;
    width: 18px;
    background-color: white;
    border-radius: 50%;
    border:1px solid #0D3D57;
}

/* On mouse-over, add a grey background color */
.customradio:hover input ~ .checkmark {
    background-color: transparent;
}

/* When the radio button is checked, add a blue background */
.customradio input:checked ~ .checkmark {
    background-color: white;
    border:1px solid #0D3D57;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the indicator (dot/circle) when checked */
.customradio input:checked ~ .checkmark:after {
    display: block;
}

/* Style the indicator (dot/circle) */
.customradio .checkmark:after {
    top: 1px;
    right: 1px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #0D3D57;
}

.table-child {
    display:none;
}

.scan-barcode-add-qty-btn{
    display: inline-block;
    width: 275px;
    height: 60px;
    line-height: 60px;
    margin-top: 5px;
    font-weight: 400;
    font-size: 24px;
    background-color: #A2D9F7;
    color: #FFFFFF;
    border: none;
    outline: none;
    text-decoration: none;
    text-align: center;
}

.numpad-qty {
    height:38px;
    margin:0;
    padding:0;
    font-size: 28px;
    font-weight:bold;
    text-align:center;
}

.scan-barcode-multiply {
    display:flex;
    justify-content: space-between;
}

.scan-barcode-multiply-box {
    width: 33.33%;
    height: 75px;
    margin: 0px 5px 0px 5px;
    background-color: #A2D9F7;
    color: #FFFFFF;
    text-align:center;
}

.scan-barcode-multiply-box-row-1{
    font-size: 24px;
    font-weight: bold;
}

.dialogheader .ui-widget-header {
    background: #5EB7E7;
    border: 0;
    color: #FFFFFF;
    font-weight: normal;
}

.dialogheader .ui-widget-content {
    text-align:center;
}

.dialogHeaderError .ui-widget-header {
    background: #d43f3a;
    border: 0;
    color: #FFFFFF;
    font-weight: normal;
}

.dialogHeaderError .ui-widget-content {
    text-align:center;
}

.add-product-label {
    margin-top:20px;
    text-align:center;
}

.logout-btn {
    font-weight: 400;
    font-size: 24px;
    background-color: #A2D9F7;
    color: #FFFFFF !important;
    border: none;
    outline: none;
    text-align: center;
    text-decoration: none;
}

.logout-btn:hover{
    color: #FFFFFF;
    text-decoration:none;
}

.logout-btn:active{
    color: #FFFFFF;
    text-decoration:none;
}

.container-a {
    position: fixed;
    top: 30px;
    /* width: 95%; */
    /* height: 100%; */
    height: calc(100vh - 30px); /* Adjust height to account for the top offset */
    width: 100%;
    /* height: 95vh; */
    /* margin-left: 15px; */
    text-align: center;
    overflow-y: scroll;
    /* background-color: yellow; */
}

.container-a .section-a {
    display: inline-block;
    height: calc(100vh - 46px);
    width: 80%;
    margin-top: 1rem;
    text-align: left;
    overflow-y: scroll;
}

.container-a-no-click {
    pointer-events: none;
}

.customer-search-box-1 {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 30px;
    height: 40px !important;
    /* width: 95%; */
    width: 100%;
    /* background-color: orange; */
}

.customer-search-box-3 .customer-search-box-3-inner-0-bottom {
    border-bottom: 2px #A2D9F7 solid;
}

/* .customer-search-box-3-inner-2 {
    border-bottom: 2px #A2D9F7 solid;
} */

.customer-search-box-3-inner-0-background {
    background-color: #0D3D57;
}

.customer-search-box-1-inner-0 {
    width: 95%;
    display: flex;
    justify-content: center;
    margin-top: 5px;
    /* background-color: lightblue; */
}

.customer-search-box-1-inner-1 {
    width: 70%;
    /* display: flex;
    justify-content: left;
    margin-top: 5px; */
    text-align: left;
    /* background-color: red; */
}

.customer-search-box-1-inner-3 {
    width: 30%;
    /* display: flex;
    justify-content: center;
    margin-top: 5px; */
    text-align: center;
    /* background-color: khaki; */
}

.customer-search-box-1-inner-2 {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
    text-align: center;
    /* background-color: aqua; */
}

.customer-search-box-2 {
    position: fixed;
    top: 70px;
    /* width: 95%; */
    width: 100%;
    display: flex;
    /* justify-content: center; */
    align-items: center;
    flex-direction: column;
    /* background-color: purple; */
}

/* .container-a .customer-search-box-2 {
    width: 100%;
    text-align: center;
} */

.customer-search-box-3 {
    position: fixed;
    top: 80px;
    /* left: 15px; */
    bottom: 5px;
    right: 0px;
    /* width: 95%; */
    width: 100%;
    z-index: -1;
    display: none;
    overflow-y: scroll;
    /* background-color: pink; */
}

.customer-search-box-3-inner-0 {
    width: 100%;
    height: 50px;
    /* margin: 5px 0px 5px 0px; */
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
}

.select-customer-search-box-3-inner-0 {
    background-color: #0D3D57;
    color: #FFF;
}

.item-1 {
    width: 40%;
    margin: 2px;
    padding: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    /* background-color: red; */
}

.item-2 {
    height: 100%;
    width: 20%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.item-3 {
    width: 40%;
    margin: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.item-4 {
    width: 40%;
    margin: 2px;
    padding: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
    /* background-color: red; */
}

.item-5 {
    height: 100%;
    width: 40%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: right;
    padding-right: 10px;
}

.item-6 {
    width: 20%;
}

.customer-search-box-3-inner-1 {
    margin-top: 10px;
    font-size: 12px;
    color: #FFFFFF;
    overflow-x: hidden;
}

.customer-search-box-3-inner-1-image-1 {
    height: 50px;
    width: 50px;
    background-image: url("../images/customer-image-placeholder.png");
    background-repeat: no-repeat;
    background-size: 40px 40px;
    background-position: center; 
}

.customer-search-box-3-inner-1-image-4 {
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    padding: 2px;
}

.customer-search-box-3-inner-1-image-2 {
    width: 15px;
    height: 15px;
    line-height: 15px;
    background-color: #d9534f;
    color: #FFFFFF;
    font-size: 10px;
    font-weight: bold;
    border-radius: 50%;
}

.customer-search-box-3-inner-1-image-3 {
    width: 15px;
    height: 15px;
    line-height: 15px;
    background-color: #5cb85c;
    color: #FFFFFF;
    font-size: 10px;
    font-weight: bold;
    border-radius: 50%;
}

.customer-search-box-3-inner-1-image-5 {
    width: 15px;
    height: 15px;
    line-height: 15px;
}

.customer-search-box-3-inner-2 {
    display: flex;
    flex-basis: 100%;
    justify-content: space-around;
    align-items: center;
}

.collapse {
    display: none;
}

.customer-search-box-3-inner-3 {
    border-bottom: 1px solid #5EB7E7;
}

.customer-search-input {
    width: 100%;
    height: 2rem;
    margin-right: 5px;
    padding-left: 15px;
    line-height: 2rem;
    background-color: #FFFFFF;
    color: #0D3D57;
    border-radius: 2rem;
    outline: 0;
    border: 0;
}

.customer-search-input-1 {
    width: 100%;
    height: 2rem;
    margin-right: 5px;
    padding-left: 5px;
    line-height: 2rem;
    background-color: #FFFFFF;
    color: #0D3D57;
    outline: 0;
    border: 0;
}

.customer-search-input-1::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: #A2D9F7;
    opacity: 1; /* Firefox */
}
  
.customer-search-input-1:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: #A2D9F7;
}
  
.customer-search-input-1::-ms-input-placeholder { /* Microsoft Edge */
    color: #A2D9F7;
}

.customer-search-input-2 {
    width: 100%;
    height: 2rem;
    padding-left: 5px;
    line-height: 2rem;
    background-color: #FFFFFF;
    color: #0D3D57;
    outline: 0;
    border: 0;
}

.customer-search-input-2::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: #A2D9F7;
    opacity: 1; /* Firefox */
}
  
.customer-search-input-2:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: #A2D9F7;
}
  
.customer-search-input-2::-ms-input-placeholder { /* Microsoft Edge */
    color: #A2D9F7;
}

.customer-search-input-image {
    padding-left: 35px;
    background-image: url(../images/search-icon-light-blue.png);
    background-repeat: no-repeat;
    background-size: 25px;
    background-position: 5px center;
}

.customer-search-input::placeholder {
    color: #A2D9F7;
    font-size: 0.9em;
}

.customer-search-btn {
    width: 90%;
    height: 6rem;
    font-weight: bold;
    font-size: 20px !important;
    background-color: #A2D9F7;
    color: #FFFFFF;
    border: none;
    outline: none;
    background-image: url("../images/search-icon-white.png");
    background-repeat: no-repeat;
    background-size: 30px 30px;
    background-position: 10px center;
}

.customer-search-btn-1 {
    width: 100%;
    height: 2rem;
    font-weight: bold;
    font-size: 12px !important;
    background-color: #A2D9F7;
    color: #FFFFFF;
    border: none;
    outline: none;
    background-image: url("../images/search-icon-white.png");
    background-repeat: no-repeat;
    background-size: 15px 15px;
    background-position: 10px center;
}

/* Toggle Switch Small */

.switch {
    position: relative;
    display: inline-block;
    width: 100px;
    height: 2rem;
    margin: 0;
    padding: 0;
    font-weight: normal !important;
}

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

/* Toggle Switch Large */

.switch1 {
    position: relative;
    display: inline-block;
    width: 125px;
    height: 2rem;
    margin: 0;
    padding: 0;
    font-weight: normal !important;
}

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

/* Toggle Switch Extra Small */

.switch2 {
    position: relative;
    display: inline-block;
    width: 70px;
    height: 1.5rem;
    margin: 0;
    padding: 0;
    font-weight: normal !important;
}

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

/* Toggle Switch Extra Extra Small */

.switch3 {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 1.75rem;
    margin: 0;
    padding: 0;
    font-weight: normal !important;
}

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

/* Slider Small Base */

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

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

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

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

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

.slider.round {
    border-radius: 34px;
}

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

/* Slider Large Base */

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

input:checked + .slider1 {
    background-color: #5EB7E7;
}

input:focus + .slider1 {
    box-shadow: 0 0 1px #5EB7E7;
}

input:checked + .slider1 {
    background-color: #5EB7E7;
}

input:focus + .slider1 {
    box-shadow: 0 0 1px #5EB7E7;
}

.slider1.round {
    border-radius: 34px;
}

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

/* Slider 1 */

.slider-1:before {
    position: absolute;
    content: "";
    height: 2rem;
    width: 2rem;
    left: 0px;
    bottom: 0px;
    background-color: #5cb85c;
    background-image: url("../images/search-plus-white.png");
    background-repeat: no-repeat;
    background-size: 20px 20px;
    background-position: center; 
    -webkit-transition: .4s;
    transition: .4s;
}

input:checked + .slider-1:before {
    -webkit-transform: translateX(50px);
    -ms-transform: translateX(50px);
    transform: translateX(68px);
    background-color: #d9534f;
    background-image: url("../images/search-cross-white.png");
    background-repeat: no-repeat;
    background-size: 20px 20px;
    background-position: center;
}

.slider-1:after {
    content:'QUICK SEARCH';
    color: white;
    display: block;
    position: absolute;
    transform: translate(-50%,-50%);
    top: 50%;
    left: 60%;
    font-size: 10px;
}

input:checked + .slider-1:after {  
    content:'ADVANCED SEARCH';
    left: 35%;
}

/* Slider 2 */

.slider-2:before {
    position: absolute;
    content: "";
    height: 2rem;
    width: 2rem;
    left: 0px;
    bottom: 0px;
    background-color: #d9534f;
    background-image: url("../images/cross-white.png");
    background-repeat: no-repeat;
    background-size: 20px 20px;
    background-position: center; 
    -webkit-transition: .4s;
    transition: .4s;
}

input:checked + .slider-2:before {
    -webkit-transform: translateX(50px);
    -ms-transform: translateX(50px);
    transform: translateX(68px);
    background-color: #5cb85c;
    background-image: url("../images/check-white.png");
    background-repeat: no-repeat;
    background-size: 20px 20px;
    background-position: center;
}

.slider-2:after {
    content: attr(title);
    color: white;
    display: block;
    position: absolute;
    transform: translate(-50%,-50%);
    top: 50%;
    left: 60%;
    font-size: 10px;
}

input:checked + .slider-2:after {  
    content: attr(title);
    left: 35%;
}

/* Slider 3 */

.slider-3:before {
    position: absolute;
    content: "";
    height: 2rem;
    width: 2rem;
    left: 0px;
    bottom: 0px;
    background-color: #d9534f;
    background-image: url("../images/cross-white.png");
    background-repeat: no-repeat;
    background-size: 20px 20px;
    background-position: center; 
    -webkit-transition: .4s;
    transition: .4s;
}

input:checked + .slider-3:before {
    -webkit-transform: translateX(50px);
    -ms-transform: translateX(50px);
    transform: translateX(68px);
    background-color: #5cb85c;
    background-image: url("../images/check-white.png");
    background-repeat: no-repeat;
    background-size: 20px 20px;
    background-position: center;
}

.slider-3:after {
    content: attr(title);
    color: white;
    display: block;
    position: absolute;
    transform: translate(-50%,-50%);
    top: 50%;
    left: 60%;
    font-size: 10px;
}

input:checked + .slider-3:after {  
    content: attr(title);
    left: 35%;
}

/* Slider 4 */

.slider-4:before {
    position: absolute;
    content: "";
    height: 2rem;
    width: 2rem;
    left: 0px;
    bottom: 0px;
    background-color: #5cb85c;
    background-image: url("../images/in-store.png");
    background-repeat: no-repeat;
    background-size: 20px 20px;
    background-position: center; 
    -webkit-transition: .4s;
    transition: .4s;
}

input:checked + .slider-4:before {
    -webkit-transform: translateX(86px);
    -ms-transform: translateX(86px);
    transform: translateX(93px);
    background-color: #d9534f;
    background-image: url("../images/to-customer.png");
    background-repeat: no-repeat;
    background-size: 30px;
    background-position: center;
}

.slider-4:after {
    content:'IN STORE';
    color: white;
    display: block;
    position: absolute;
    transform: translate(-50%,-50%);
    top: 50%;
    left: 60%;
    font-size: 10px;
}

input:checked + .slider-4:after {  
    content:'TO CUSTOMER';
    left: 35%;
}

/* Slider 5 */

.slider-5:before {
    position: absolute;
    content: "";
    height: 2rem;
    width: 2rem;
    left: 0px;
    bottom: 0px;
    background-color: #1C84BD;
    background-repeat: no-repeat;
    background-size: 20px 20px;
    background-position: center; 
    -webkit-transition: .4s;
    transition: .4s;
}

input:checked + .slider-5:before {
    -webkit-transform: translateX(50px);
    -ms-transform: translateX(50px);
    transform: translateX(68px);
    background-color: #1C84BD;
    background-repeat: no-repeat;
    background-size: 20px 20px;
    background-position: center;
}

.slider-5:after {
    content:'ADJUST BY';
    color: white;
    display: block;
    position: absolute;
    transform: translate(-50%,-50%);
    top: 50%;
    left: 60%;
    font-size: 10px;
    text-align: center;
}

input:checked + .slider-5:after {  
    content:'ADJUST TO';
    left: 35%;
}

/* Slider 6 */

.slider-6:before {
    position: absolute;
    content: "";
    height: 2rem;
    width: 2rem;
    left: 0px;
    bottom: 0px;
    background-color: #d9534f;
    background-image: url("../images/cross-white.png");
    background-repeat: no-repeat;
    background-size: 20px 20px;
    background-position: center; 
    -webkit-transition: .4s;
    transition: .4s;
}

input:checked + .slider-6:before {
    -webkit-transform: translateX(50px);
    -ms-transform: translateX(50px);
    transform: translateX(68px);
    background-color: #5cb85c;
    background-image: url("../images/check-white.png");
    background-repeat: no-repeat;
    background-size: 20px 20px;
    background-position: center;
}

.slider-6:after {
    content:'INACTIVE';
    color: white;
    display: block;
    position: absolute;
    transform: translate(-50%,-50%);
    top: 50%;
    left: 60%;
    font-size: 10px;
}

input:checked + .slider-6:after {  
    content:'ACTIVE';
    left: 35%;
}

/* Slider 7 */

.slider-7:before {
    position: absolute;
    content: "";
    height: 2rem;
    width: 2rem;
    left: 0px;
    bottom: 0px;
    background-color: #2E3092;
    background-image: url("../images/salelist.png");
    background-repeat: no-repeat;
    background-size: 20px 20px;
    background-position: center; 
    -webkit-transition: .4s;
    transition: .4s;
}

input:checked + .slider-7:before {
    -webkit-transform: translateX(50px);
    -ms-transform: translateX(50px);
    transform: translateX(93px);
    background-color: #5cb85c;
    background-image: url("../images/productlist.png");
    background-repeat: no-repeat;
    background-size: 20px 20px;
    background-position: center;
}

.slider-7:after {
    content:'SALE LIST';
    color: white;
    display: block;
    position: absolute;
    transform: translate(-50%,-50%);
    top: 50%;
    left: 60%;
    font-size: 10px;
}

input:checked + .slider-7:after {  
    content:'PRODUCT LIST';
    left: 35%;
}

/* Slider 8 */

.slider-8:before {
    position: absolute;
    content: "";
    height: 2rem;
    width: 2rem;
    left: 0px;
    bottom: 0px;
    background-color: #FFF;
    background-image: url("../images/trade.png");
    background-repeat: no-repeat;
    background-size: 20px 20px;
    background-position: center; 
    -webkit-transition: .4s;
    transition: .4s;
}

input:checked + .slider-8:before {
    -webkit-transform: translateX(50px);
    -ms-transform: translateX(50px);
    transform: translateX(68px);
    background-color: #FFF;
    background-image: url("../images/counter.png");
    background-repeat: no-repeat;
    background-size: 20px 20px;
    background-position: center;
}

.slider-8:after {
    content: attr(title);
    color: white;
    display: block;
    position: absolute;
    transform: translate(-50%,-50%);
    top: 50%;
    left: 60%;
    font-size: 10px;
}

input:checked + .slider-8:after {  
    content: attr(title);
    left: 35%;
}

/* Slider 9 */

.slider-9:before {
    position: absolute;
    content: "";
    height: 2rem;
    width: 2rem;
    left: 0px;
    bottom: 0px;
    background-color: #FFF;
    /* background-image: url("../images/search-plus-white.png"); */
    background-repeat: no-repeat;
    background-size: 20px 20px;
    background-position: center; 
    -webkit-transition: .4s;
    transition: .4s;
}

input:checked + .slider-9:before {
    -webkit-transform: translateX(50px);
    -ms-transform: translateX(50px);
    transform: translateX(68px);
    /* background-color: #D70069; */
    /* background-image: url("../images/search-cross-white.png"); */
    background-repeat: no-repeat;
    background-size: 20px 20px;
    background-position: center;
}

.slider-9:after {
    content:'OFF';
    color: white;
    display: block;
    position: absolute;
    transform: translate(-50%,-50%);
    top: 50%;
    left: 60%;
    font-size: 16px;
}

input:checked + .slider-9 {
    background-color:#D70069;
}

input:checked + .slider-9:after {  
    content:'ON';
    left: 35%;
}

/* Slider 10 */

.slider-10:before {
    position: absolute;
    content: "";
    height: 1.5rem;
    width: 1.5rem;
    left: 0px;
    bottom: 0px;
    background-color: #FFF;
    /* background-image: url("../images/search-plus-white.png"); */
    background-repeat: no-repeat;
    background-size: 20px 20px;
    background-position: center; 
    -webkit-transition: .4s;
    transition: .4s;
}

input:checked + .slider-10:before {
    -webkit-transform: translateX(46px);
    -ms-transform: translateX(46px);
    transform: translateX(46px);
    /* background-color: #D70069; */
    /* background-image: url("../images/search-cross-white.png"); */
    background-repeat: no-repeat;
    background-size: 20px 20px;
    background-position: center;
}

.slider-10:after {
    content:'OFF';
    color: white;
    display: block;
    position: absolute;
    transform: translate(-50%,-50%);
    top: 50%;
    left: 60%;
    font-size: 16px;
}

input:checked + .slider-10 {
    background-color:#D70069;
}

input:checked + .slider-10:after {  
    content:'ON';
    left: 35%;
}

/* Slider 11 */

.slider-11:before {
    position: absolute;
    content: "";
    height: 1.75rem;
    width: 1.75rem;
    left: 0px;
    bottom: 0px;
    background-color: #d9534f;
    background-image: url("../images/cross-white.png");
    background-repeat: no-repeat;
    background-size: 10px 10px;
    background-position: center; 
    -webkit-transition: .4s;
    transition: .4s;
}

input:checked + .slider-11:before {
    -webkit-transform: translateX(32px);
    -ms-transform: translateX(32px);
    transform: translateX(32px);
    background-color: #5cb85c;
    background-image: url("../images/check-white.png");
    background-repeat: no-repeat;
    background-size: 10px 10px;
    background-position: center;
}

.slider-11:after {
    color: white;
    display: block;
    position: absolute;
    transform: translate(-50%,-50%);
    top: 50%;
    left: 60%;
    font-size: 10px;
}

input:checked + .slider-11:after {  
    left: 35%;
}

/* Slider 12 */

.slider-12:before {
    position: absolute;
    content: "";
    height: 1.75rem;
    width: 1.75rem;
    left: 0px;
    bottom: 0px;
    background-color: #d9534f;
    background-image: url("../images/cross-white.png");
    background-repeat: no-repeat;
    background-size: 10px 10px;
    background-position: center; 
    -webkit-transition: .4s;
    transition: .4s;
}

input:checked + .slider-12:before {
    -webkit-transform: translateX(32px);
    -ms-transform: translateX(32px);
    transform: translateX(32px);
    background-color: #5cb85c;
    background-image: url("../images/check-white.png");
    background-repeat: no-repeat;
    background-size: 10px 10px;
    background-position: center;
}

.slider-12:after {
    content: 'OFF';
    color: white;
    display: block;
    position: absolute;
    transform: translate(-50%,-50%);
    top: 50%;
    left: 70%;
    font-size: 10px;
}

input:checked + .slider-12:after {  
    content: 'ON';
    left: 30%;
}

/* Slider 13 */

.slider-13:before {
    position: absolute;
    content: "";
    height: 1.75rem;
    width: 1.75rem;
    left: 0px;
    bottom: 0px;
    background-color: #fff;
    /* background-image: url("../images/cross-white.png"); */
    background-repeat: no-repeat;
    background-size: 10px 10px;
    background-position: center; 
    -webkit-transition: .4s;
    transition: .4s;
}

input:checked + .slider-13:before {
    -webkit-transform: translateX(32px);
    -ms-transform: translateX(32px);
    transform: translateX(32px);
    background-color: #fff;
    /* background-image: url("../images/check-white.png"); */
    background-repeat: no-repeat;
    background-size: 10px 10px;
    background-position: center;
}

.slider-13.background-sky-light {
    color: white;
    display: block;
    position: absolute;
    transform: translate(-50%,-50%);
    top: 50%;
    left: 60%;
    font-size: 10px;
}

input:checked + .slider-13:after {  
    left: 35%;
}

/* Slider 14 */

.slider-14:before {
    position: absolute;
    content: "\f09c"; /* Unicode for unlock icon in Font Awesome 4.7 */
    font-family: "FontAwesome";
    font-weight: normal;
    height: 2rem;
    width: 2rem;
    left: 0px;
    bottom: 0px;
    color: #000; /* Set the color of the icon */
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fff;
    -webkit-transition: .4s;
    transition: .4s;
    font-size: 1.5rem;
}

input:checked + .slider-14:before {
    -webkit-transform: translateX(50px);
    -ms-transform: translateX(50px);
    transform: translateX(68px);
    content: "\f023"; /* Unicode for lock icon in Font Awesome 4.7 */
    color: #000;
    background-color: #fff;
    font-size: 1.5rem;
}

.slider-14:after {
    content:'';
    color: white;
    display: block;
    position: absolute;
    transform: translate(-50%,-50%);
    top: 50%;
    left: 60%;
    font-size: 10px;
}

input:checked + .slider-14:after {  
    content:'';
    left: 35%;
}

/* Scroll Bar */

/* ::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}

::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
    box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
} */


/* Butttons */

.section-a .btn-1 {
    display: inline-block;
    width: 100%;
    height: 3rem;
    margin-bottom: 5px;
    line-height: 3rem;
    font-size: 16px;
    font-weight: bold;
    /* background-color:#219cde !important; */
    color: #FFFFFF;
    border: none;
    outline: none;
    border-radius: 1.5rem;
    text-align: center;
    text-decoration: none;
}

.section-a .btn-1:hover {
    color: #FFFFFF;
    text-decoration: none;
}

.section-a .btn-1:visited {
    color: #FFFFFF;
    text-decoration: none;
}

.section-a .btn-1:active {
    color: #FFFFFF;
    text-decoration: none;
}

/* .section-a .btn-1 img {
    display: block;
    width: 30px;
    margin: 0.5rem 0.5rem 0rem 0.5rem;
    line-height: 3rem;
    float: left;
} */

.customer-white {
    background-image: url(../images/customer-white.png);
    background-repeat: no-repeat;
    background-size: 30px;
    background-position: 10px center;
}

.stock-color {
    background-image: url(../images/stock-colour.png);
    background-repeat: no-repeat;
    background-size: 30px;
    background-position: 10px center;
}

.reporting-white {
    background-image: url(../images/reporting-white.png);
    background-repeat: no-repeat;
    background-size: 30px;
    background-position: 10px center;
}

.section-a .btn-2 {
    display: inline-block;
    width: 95%;
    height: 3rem;
    margin-bottom: 5px;
    padding-left: 50px;
    line-height: 3rem;
    font-size: 13px;
    font-weight: bold;
    background-color: #A2D9F7 !important;
    color: #FFFFFF;
    border: none;
    outline: none;
    border-radius: 1.5rem 0rem 0rem 1.5rem;
    text-align: center;
    text-decoration: none;
}

.section-a .btn-2:hover {
    color: #FFFFFF;
    text-decoration: none;
}

.section-a .btn-2:visited {
    color: #FFFFFF;
    text-decoration: none;
}

.section-a .btn-2:active {
    color: #FFFFFF;
    text-decoration: none;
}

/* .section-a .btn-2 img {
    display: block;
    width: 30px;
    margin: 0.8rem 1rem 0rem 0.8rem;
    float: left;
} */

.search-customer-white {
    background-image: url(../images/search-customer-white.png);
    background-repeat: no-repeat;
    background-size: 30px;
    background-position: 10px center;
}

.customer-collection-white {
    background-image: url(../images/customer-collection-white.png);
    background-repeat: no-repeat;
    background-size: 30px;
    background-position: 10px center;
}

.goods-in-white {
    background-image: url(../images/goods-in-white.png);
    background-repeat: no-repeat;
    background-size: 30px;
    background-position: 10px center;
}

.product-search-white {
    background-image: url(../images/product-search-white.png);
    background-repeat: no-repeat;
    background-size: 30px;
    background-position: 10px center;
}

.customer-search-box-3 .btn-3 {
    text-decoration: none;
}

.sidebar-btn {
    opacity: 1;
    position: fixed;
    width: 15px;
    height: 75px;
    top: calc(50% - 30px);
    left: 0;
    background-color:#219cde;
    font-size: 10px;
    writing-mode: vertical-rl;
    text-orientation: sideways-right;
    text-align: center;
    border-radius: 0px 5px 5px 0px;
    z-index: 1000;
    transition: all .3s ease .15s;
}

.sidebar-btn-show {
    left: 75px;
    transition: all .3s ease .15s;
    z-index: 1002;
}

.btn-4 {
    display: inline-block;
    height: 2rem;
    width: 100%;
    margin: 2px;
    line-height: 2rem;
    /* background-color: #FFFFFF;
    color: #219cde; */
    font-size: 10px;
    border-radius: 25px;
    text-decoration: none;
}

.btn-4:hover {
    /* color: #219cde; */
    text-decoration: none;
}

.btn-4:visited {
    /* color: #219cde; */
    text-decoration: none;
}

.btn-4:active {
    /* color: #219cde; */
    text-decoration: none;
}

.btn-6 {
    width: 80px;
    height: auto;
    line-height: auto;
    margin: 2px;
    font-size: 10px;
    text-align: center;
    border-radius: 25px;
    text-decoration: none;
    border: 0;
}

.btn-6:hover {
    /* color: #219cde; */
    text-decoration: none;
}

.btn-6:visited {
    /* color: #219cde; */
    text-decoration: none;
}

.btn-6:active {
    /* color: #219cde; */
    text-decoration: none;
}

.btn1 {
    display: inline-block;
    width: 30%;
    height: 2rem;
    line-height: 2rem;
    font-size: 12px;
    background-color: #A2D9F7 !important;
    color: #FFFFFF;
    border: none;
    outline: none;
    text-decoration: none;
    text-align: center;
}

.btn2 {
    width: 99%;
    height: 70px;
    font-weight: 400;
    font-size: 24px;
    background-color: #A2D9F7;
    color: #FFFFFF;
    border: none;
    outline: none;
}

.btn3 {
    display: inline-block;
    width: 100%;
    height: 2rem;
    line-height: 2rem;
    font-size: 12px;
    background-color: #A2D9F7 !important;
    color: #FFFFFF;
    border: none;
    outline: none;
    text-decoration: none;
    text-align: center;
}

.btn4 {
    display: inline-block;
    width: 60%;
    height: 1.5rem;
    line-height: 1.5rem;
    font-size: 12px;
    background-color: #A2D9F7 !important;
    color: #FFFFFF;
    border: none;
    outline: none;
    text-decoration: none;
    text-align: center;
}

.btn5 {
    width: 85%;
    height: 6rem;
    line-height: 6rem;
    font-size: 20px;
    background-color:#5EB7E7;
    color: #FFFFFF;
    border: none;
    outline: none;
    text-decoration: none;
    text-align: center; 
}

.btn6 {
    width: 100%;
    height: 100%;
    line-height: 100%;
    font-size: 20px;
    background-color:#D70069;
    color: #FFFFFF;
    border: none;
    outline: none;
    text-decoration: none;
    text-align: center; 
}

.btn7 {
    display: inline-block;
    width: 100%;
    height: 2.5rem;
    border: none;
    outline: none;
    text-decoration: none;
    text-align: center;
    font-family: 'Century Gothic', sans-serif;
}

.btn8 {
    display: flex;
    justify-content: center;
    align-items: center;
    /* padding: 5px; */
    border: none;
    outline: none;
    text-decoration: none;
    text-align: center;
    font-family: 'Century Gothic', sans-serif;
    border-radius: 25px;
}

.btn8-circle {
    display: flex;
    justify-content: center;
    align-content: center;
    width: 40px;
    height: 40px;
    line-height: 27px;
    border-radius: 25px;
    /* background-color: black; */
    font-size: 24px;
}

.btn9 {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5px;
    border: none;
    outline: none;
    text-decoration: none;
    text-align: center;
    font-family: 'Century Gothic', sans-serif;
}

.btn10 {
    display: flex;
    flex-basis: 100px;
    flex-shrink: 0;
    height: 2.0rem;
    justify-content: center;
    align-items: center;
    margin: 2px;
    padding: 5px;
    border: none;
    outline: none;
    text-decoration: none;
    text-align: center;
    font-family: 'Century Gothic', sans-serif;
    border-radius: 25px;
}

/* Buttons */

#collection-products {
    /* position: fixed; */
    top: 170px;
    left: 15px;
    bottom: 0px;
    right: 0px;
    width: 100%;
    height: calc(100vh - 210px);
    padding: 10px;  
    overflow-y: scroll;

    /* position: fixed;
    top: 80px;
    left: 15px;
    bottom: 5px;
    right: 0px;
    width: 95%;
    z-index: -1;
    display: none;
    overflow-y: scroll; */
}

.collection-table {
    width: 100%;
    margin-top: 5px;
    padding: 5px;
    background-color: #FFF;
    color: #398DC0;
    border-radius: 5px;
    font-size: 12px;
}

.collection-table-col1 {
    padding-left: 20px;
    text-align: left;
    /* color: #219cde; */
    width: 55%;
}

.collection-table-col2 {
    text-align: right;
    /* color: #219cde; */
}

.collection-table-col3 {
    padding-right: 5px;
    text-align: right;
    font-size: 16px;
    /* color: #219cde; */
}

.collection-table-col1-row1 {
    text-align: left;
    padding-left: 5px;
    color: #000;
}

.collection-table-col3-row1 {
    text-align: right;
    padding-right: 5px;
    font-weight: bold;
    color: #000;
}

.collection-table-col3-row1-x {
    font-size: 16px;
}

.collection-table-col1-row4 {
    text-align: left;
    padding-left: 5px;
    font-size: 12px;
}

.collection-table-col3-row4 {
    text-align: right;
    padding-right: 5px;
    font-size: 16px;
    font-weight: bold;
    /* color: #219cde; */
}

.collection-delivery-notes {
    width: 100%;
    height: 22vh;
    background-color: #feff9c;
    color: #000000;
}

.kbw-signature { 
    width: 100%;
    height: 26vh; 
}

.collection-section-one {
    margin-top: 5px;
    text-align: center;
}

.collection-section-three  {
    margin-top: 5px;
    text-align: center
}

.collection-section-four {
    display: flex;
    justify-content: space-between;
    align-content: center;
}

#signaturePNG {
    display: none;
}

.customerdetail-row-1 {
    display: flex;
    padding: 2px;
}

.customerdetail-image {
    height: 65px;
    width: 20%;
    background-image: url("../images/customer-image-placeholder.png");
    background-repeat: no-repeat;
    background-size: 60px 60px;
    background-position: center; 
}

.customerdetail-details {
    display: flex;
    width: 60%;
    flex-direction: column;
}

.customerdetail-telephone-email {
    display: flex;
    flex-direction: column;   
    font-size: 14px;
}

.customerdetail-edit {
    height: 65px;
    width: 20%;
    background-image: url("../images/EditPencil.png");
    background-repeat: no-repeat;
    background-size: 40px 40px;
    background-position: right top; 
}

.customerdetail-row-2 {
    display: flex;
    justify-content: space-evenly;
    padding: 10px 0px;
    border-bottom: 1px solid #A2D9F7;
}

.customerdetail-blue-circle {
    display: flex;
    width: 60px;
    height: 60px;
    flex-direction: column;
    align-items: center;
    border-radius: 100%;
    text-align: center;
    background-color: #5EB7E7;
    overflow: hidden;
}

.customerdetail-blue-circle-title {
    padding-top: 2px;
    font-size: 11px;
    color: #1C84BD;
}

.customerdetail-blue-circle-content {
    font-size: 10px;
    font-weight: 600;
}

.customerdetail-blue-circle-content-1 {
    padding-top: 15px;
    font-size: 14px;
    font-weight: 600;
}

.customerdetail-row-3 {
    display: flex;
    flex-direction: column;
    margin: 5px 10px;
    border-bottom: 1px solid #A2D9F7;
}

.customerdetail-row-3.arrow-down::after {
    content:'';
    margin-left: calc(50% - 10px);
    width: 0;
    height: 0;
    border-bottom: solid 10px #A2D9F7;
    border-left: solid 10px transparent;
    border-right: solid 10px transparent;
}

.customerdetail-row-3.arrow-up::after {
    content:'';
    margin-left: calc(50% - 10px);
    width: 0;
    height: 0;
    border-top: solid 10px #A2D9F7;
    border-left: solid 10px transparent;
    border-right: solid 10px transparent;
}

.customerdetail-row-3-col-1 {
    display: none;
    margin: 5px 40px;
}

.customerdetail-address {
    font-size: 14px;
}

.customerdetail-row-4 {
    width: 100%;
    margin-left: 10px;
    /* margin-right: 20px; */
    padding-bottom: 5px;
    /* background: purple; */
}

.customerdetail-number-circle {
    display: inline-block;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    line-height: 40px;
    /* background: #FFFFFF;
    color: #1C84BD; */
    font-size: 20px;
    font-weight: bold;
    text-align: center;
}

.customerdetail-current-orders {
    display: flex;
    justify-content: start;
    align-items: center;
    width: 95%;
    padding: 5px 0px;
    /* border-top: 1px solid #A2D9F7; */
    border-bottom: 1px solid #A2D9F7;
}

.customerdetail-current-orders span {
    padding-left: 10px;
}

.customerdetail-current-orders-list {
    display: none;
    max-height: 50vh;
    width: 95%;
    overflow-y: auto;
    padding-bottom: 5px;
    border-bottom: 1px solid #A2D9F7;
}

.customerdetail-current-orders-list-border-bottom {
    width: 95%;
    border-bottom: 1px solid #A2D9F7;
}

.customerdetail-current-orders-list-height {
    display: block;
}

.product-search-box-3-inner-0 {
    width: 100%;
    /* height: 75px; */
    /* margin: 5px 0px 5px 0px; */
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    cursor: pointer;
}


.product-search-box-3-inner-1-image-1 {
    height: 50px;
    width: 50px;
    background-image: url("../images/noimage.png");
    background-repeat: no-repeat;
    background-size: 40px;
    background-position: center; 
}

.product-search-box-3-inner-1 {
    display: flex;
    justify-content: flex-end;
    width: 100%;
    text-align: right;
}

.product-search-box-3-inner-1-image-5 {
    height: 25px;
    width: 25px;
    background-image: url("../images/style.png");
    background-repeat: no-repeat;
    background-size: 25px 25px;
    background-position: center;
    text-align: center;
    line-height: 25px;
    font-size: 10px;
}

.product-search-box-3-inner-1-image-6 {
    height: 25px;
    width: 25px;
    background-image: url("../images/stock.png");
    background-repeat: no-repeat;
    background-size: 25px 25px;
    background-position: center;
    text-align: center;
    line-height: 25px;
    font-size: 10px;
}

.product-search-box-3-inner-1-circle {
    display: inline-block;
    width: 20px;
    height: 20px;
    line-height: 20px;
    /* flex-direction: column;
    align-items: center; */
    border-radius: 50%;
    text-align: center;
    /* background-color: #FFBF00; */
    color: black;
    overflow: hidden;
    font-size: 10px;
}

.ps-modal-header {
    display: flex;
    width: 100%;
    height: 100%; 
    margin: 5px;
}

.ps-modal-content {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}

.ps-row-1,
.ps-row-2,
.ps-row-3 {
    display: flex;
}

.ps-row-2,
.ps-row-3,
.ps-row-4 {
    margin-top: 5px;
}

.ps-row-flex-center {
    justify-content: center;
    align-items: center;
}

.style-ps-row-3  {
    display: flex;
    flex-direction: column;
}

.ps-modal-row-1-box-1 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 40%;
}

.ps-modal-row-1-box-2 {
    width: 60%;
    font-size: 12px;
}

.ps-modal-row-2-box-1 {
    width: 100%;
}

.ps-modal-row-1-box-1-image-1 {
    height: 75px;
    width: 75px;
    background-image: url("../images/noimage.png");
    background-repeat: no-repeat;
    background-size: 75px;
    background-position: center; 
}

.style-table-grid {
    font-size: 10px;
}
  
.style-table-grid td {
    /* border: 1px solid #A2D9F7; */
    width: 80px;
    height: 40px;
}

.style-table-grid-head {
    background: #A2D9F7;
    color: white;
    font-weight: bold;
    text-align: center;
}

.style-table-grid thead th { 
    position: sticky; 
    top: 0; 
}

.style-table-grid thead th:first-child { 
    z-index: 1000;
}

.style-table-grid-input {
    width: 50px;
    text-align: center;
}

.ps-row-4-style-table-grid { 
    overflow-y: auto; 
    max-height: 150px;
    margin: 10px 0px;
}

.style-table-grid-rectangle {
    display: flex;
    width: 100%;
    height: 5px;
    /* padding: 2px; */
    margin-bottom: 5px;
}

.fix {
    position: sticky;
    width: 5em;
    left: 0;
    top: auto;
    z-index: 999;
    text-align: center;
}

.sh-body {
    margin-top: 5px;
    height: calc(100vh - 100px);
    overflow-y: scroll;
    /* background-color: rgba(255,255,255,0.9) */
}

.sh-items {
    display: none;
    height: auto;
    overflow-y: scroll;
}

.sh-background-1,
.sh-background-9 {
    height: 30px;
    background-color: #5EB7E7;
    color: #FFF;
    border-radius: 20px;
}

.sh-background-2 {
    width: 30px;
    height: 30px;
    border-radius: 30px;
    background-color: #2E3092;
    background-image: url(../images/salelist.png);
    background-repeat: no-repeat;
    background-size: 20px 20px;
    background-position: center;
}

.sh-background-3 {
    border-radius: 20px 20px 15px 15px;
    background-color: #FFF;
    color: #0d3d57;
    -webkit-transition: .1s;
    transition: .1s;
}

.sh-background-4 {
    height: 40px;
    padding: 5px;
    background-color: #5EB7E7;
    color: #FFF;
    border-radius: 5px;
}

.sh-background-5 {
    border-radius: 15px 15px 5px 5px;
    background-color: #FFF;
    color: #0d3d57;
    -webkit-transition: .1s;
    transition: .1s;
}

.sh-background-6 {
    padding: 2px;
    color: #FFF;
    border-radius: 5px;
}

.sh-background-7 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 32px;
    height: 32px;
    border-radius: 32px;
}

.sh-background-8 {
    display: inline-block;
    width: 30px;
    height: 30px;
    line-height: 30px;
    border-radius: 30px;
    text-align: center;
}

.sh-background-10 {
    display: inline-block;
    width: 30px;
    height: 20px;
    line-height: 20px;
    border-radius: 10px;
    text-align: center;
}

.sh-background-11 {
    display: inline-block;
    width: 15px;
    height: 15px;
    margin-top: 2px;
    border-radius: 15px;
    text-align: center;
}

#keyboard {
    position: fixed;
    left: 0;
    right: 0;
    background-color: #0d3d57;
    z-index:1001;
}

#keyboard-output span:after {
    content: '\00a0'; 
    background-color:white;
    animation: blinker 1s linear infinite;
    overflow-wrap: break-word;
}  

#keyboard-output {
    overflow-x: scroll;
}

@keyframes blinker {
    50% {
        opacity: 0;
    }
}

.num-btm-num-hide {
    display: none;
}

.num-btm-num-show {
    display: block;
}

.custom-radio-1 {
    display: block;
    width: 100%;
    margin: 5px;
    text-align: center;
}

.custom-radio-2 {
    display: flex;
    flex: 33.33%;
    height: 40px;
    justify-content: center;
    align-items: center;
    margin: 5px;
    padding: 5px;
    text-align: center;
    font-size: 14px;
}

.custom-radio-3 {
    display: flex;
    flex: 33.33%;
    height: 40px;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 10px;
}

.cr1 {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

/* Dropdown Button */
.dropbtn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    margin: 2px;
    font-size: 10px;
    border: none;
    cursor: pointer;
    border-radius: 50px;
    white-space: normal;
}

/* Dropdown button on hover & focus */
.dropbtn:hover, .dropbtn:focus {
    border: none;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
    position: relative;
}

.dropdown-1 {
    flex-basis: 100%;
    justify-content: center;
    position: relative;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    display: none;
    position: absolute;
    height: 12rem;
    background-color: #f1f1f1;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 4;
    text-align: left;
    color: #0d3d57;
    font-size: 12px;
    overflow-y: scroll;
}

/* Links inside the dropdown */
.dropdown-content a {
    display: block;
    color: #5EB7E7;
    padding: 12px 16px;
    text-decoration: none;
    font-size: 12px;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {
    background-color: #ddd
}

/* Show the dropdown menu */
.dropdown-content-show {
    display: block;
}

.style-aspect {
    overflow-x: scroll;
}

.style-aspect-buttons {
    display: flex;
    flex: 100%;
}

.dropbtn-1 {
    width: 98%;
    height: 30px;
    line-height: 30px;
    margin: 2px;
    background-color: #5EB7E7;
    color: #FFF;
    font-size: 10px;
    border: none;
    text-align: left;
}

.dropbtn-1-symbol{
    width: 25px;
    height: 30px;
    line-height: 30px;
    padding-right: 2px;
    background-color: #5EB7E7;
    color: #FFF;
    float: right; 
    font-size: 12px;
    text-align: right;
    overflow: hidden;
}

.dropdown-content-1 {
    display: none;
    color: #0d3d57;
    padding: 2px;
    font-size: 12px;
}

.collapse-1-show {
    display: flex;
    flex: 100%;
    flex-direction: column;
}

.dropdown-table {
    width: 100%;
    font-size: 11px;
}

.dropdown-table th {
    text-align: left;
}

/* .dropdown-table td[colspan="3"], td[colspan="4"] {
    text-align: center;
} */

#last-10-web-sales_wrapper { 
    min-height: 300px; 
}

#last-10-web-sales {
    color: #000;
}

#summary-sales-by-channel {
    padding: 10px;
}

.reporting-box {
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 5px;
    /* background-image: linear-gradient(#A2D9F7, #5EB7E7); */
    background-color: #5EB7E7;
    /* opacity: 0.8; */
    /* box-shadow: 2px 2px 2px#383838; */
    border-radius: 5px;
    /* font-weight: bold; */
}

.reporting-box-1 {
    width: 40%;
    height: 15vh;
    font-size: 16px;
}

.reporting-box-2 {
    width: 30%;
    height: 10vh;
    font-size: 14px;
}

.stocktaking-stocklocation-checked {
    background-color: #FFF;
    color: #D70069;
}

.stocktaking-minus-plus,
.stocktaking-minus-plus-input {
    width: 33.33%;
    height: 35px;
    margin: 2px 0px;
    font-size: 24px;
    border: none;
    outline: none;
    text-align: center;
    cursor: pointer;
}

.stocktaking-minus-plus-1,
.stocktaking-minus-plus-input-1 {
    width: 100%;
    height: 40px;
    margin: 2px 0px;
    font-size: 14px;
    border: none;
    outline: none;
    text-align: center;
    cursor: pointer;
}

.stocktaking-count-box {
    height: 160px;
    overflow-y: scroll;
    /* background-color: pink; */
}

.stocktaking-view-box {
    height: 360px;
    overflow-y: scroll;
    /* background-color: pink; */
}

.dispatch-stock-box {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    width: 100%;
    height: 50px;
    margin: 2px;
    padding: 5px;
    border-radius: 5px;
}

.dispatch-items-tbl {
    table-layout:fixed;
    width: 100%;
}

.container-b {
    margin-top: 5px;
    padding: 2px;
    display: grid;
    /* border-style: solid;
    border-color: red; */
    grid-template-columns: 100%;
    grid-template-rows: 6% 93%;
    width: 100vw;
    height: calc(100vh - 26px);
    overflow-y: scroll;
}

.msrd-one {
    width: 100%;
    height: 100%;
    /* border-style: solid;
    border-color: blue; */
    grid-column: 1 / 2;
    grid-row: 1 / 2;
}

.msrd-two {
    width: 100%;
    height: 100%;
    /* border-style: solid;
    border-color: blue; */
    grid-column: 1 / 2;
    grid-row: 2 / 3;
    overflow-y: scroll;
}

.msrd-grid {
    width: 100%;
    height: 60%;
    overflow-x: scroll;
    overflow-y: scroll;
}

.msrd-column {
    display: flex;
    flex-direction: column;
    /* border-style: solid;
    border-color: purple; */
    /* grid-template-columns: 100%;
    grid-template-rows: 50px 50% auto; */
    width: 110px;
    /* background-color: #0d3d57; */
    border-radius: 10px;
}

.msrd-row-1 {
    width: 110px;
    height: 60px;
    background-color: #5EB7E7;
    border-radius: 10px;
    z-index: 3;
}

.msrd-row-2 {
    width: 110px;
    height: 100%;
    margin-top: -15px;
    padding-top: 20px;
    padding-bottom: 5px;
    background-color: #3F9CD3;
    border-radius: 10px;
    z-index: 2;
}

.msrd-row-3 {
    display: none;
    width: 110px;
    height: 100%;
    margin-top: -20px;
    padding-top: 20px;
    background-color: #0d3d57;
    border-radius: 10px;
    z-index: 1;
    overflow-y: scroll;
}

.msrd-row-4 {
    width: 100%;
    height: 40%;
}

#saleHistoryDateModal {
    z-index: 4;
}

.top-minus-40-px{
    top: -40px;
}

#back-icon {
    display: none;
}

#department-result,
#brand-result,
#product-type-result {
    position: absolute;
    max-height: 200px;
    width: 75%;
    padding: 2px;
    overflow-y: scroll;
}

.product-search-department-table,
.product-search-brand-table,
.product-search-product-type-table {
    width: 100%;
    background-color: white;
    color: black;
    border: 1px solid #000;
}

.stock-transfer-in {
    background-image: url(../images/stock-transfer-in.png);
    background-repeat: no-repeat;
    background-size: 30px;
    background-position: 10px center;
}

.stock-transfer-out {
    background-image: url(../images/stock-transfer-out.png);
    background-repeat: no-repeat;
    background-size: 30px;
    background-position: 10px center;
}

.transfer-sidebar-a {
    display: none;
    opacity: 0;
    position: fixed;
    height: 100%;
    top: 0px;
    left: 0px;
    width: 0px;
    z-index: 1002;
    background-color:#1C84BD !important;
    transition: all .3s ease .15s;
}

.transfer-sidebar-a .transfer-sidebar-b {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 100% !important;
    overflow: scroll;
    cursor: pointer;
}

.transfer-sidebar-a-show {
    display: block;
    opacity: 1;
    width: 75%;
    height: 100% !important;
    transition: all .3s ease .15s;
}

.text-decoration-none {
    text-decoration: none;
}

.chart {
    position: relative;
}

.utilities-scan-list-of-product-field {
    display: grid;
    grid-template-columns: 100px auto; /* Set two columns: one for the label and one for the value */
    align-items: center;
    padding-bottom: 15px;
}

.utilities-scan-list-of-product-field-one {
    display: grid;
    grid-template-columns: 50px auto; /* Set two columns: one for the label and one for the value */
    align-items: center;
    padding-bottom: 15px;
}

.utilities-scan-list-of-product-label {
    text-align: left;
    font-weight: bold;
}

.utilities-scan-list-of-product-value {
    text-align: left; /* Ensures that the values are aligned to the left */
}

#create-new-list-id-container {
    display: none;
}

/* New CSS */

/* Display */

.display-flex {
    display: flex;
}

.display-block {
    display: block;
}

.display-inline-block {
    display: inline-block;
}

.display-inline {
    display: inline;
}

.display-none {
    display: none;
}

/* Flex Row */

.flex-col-100 {
    display: flex;
    flex: 100%;
}

.flex-col-7-5 {
    display: flex;
    flex: 7.5%;
}

.flex-col-10 {
    display: flex;
    flex: 10%;
}

.flex-col-15 {
    display: flex;
    flex: 15%;
}

.flex-col-20 {
    display: flex;
    flex: 20%;
}

.flex-col-25 {
    display: flex;
    flex: 25%;
}

.flex-col-30 {
    display: flex;
    flex: 30%;
}

.flex-col-33 {
    display: flex;
    flex: 33.33%;
}

.flex-col-35 {
    display: flex;
    flex: 35%;
}


.flex-col-40 {
    display: flex;
    flex: 40%;
}

.flex-col-45 {
    display: flex;
    flex: 45%;
}

.flex-col-50 {
    display: flex;
    flex: 50%;
}

.flex-col-55 {
    display: flex;
    flex: 55%;
}

.flex-col-60 {
    display: flex;
    flex: 60%;
}

.flex-col-65 {
    display: flex;
    flex: 65%;
}

.flex-col-70 {
    display: flex;
    flex: 70%;
}

.flex-col-75 {
    display: flex;
    flex: 75%;
}

.flex-col-80 {
    display: flex;
    flex: 80%;
}

.flex-col-85 {
    display: flex;
    flex: 85%;
}

.flex-col-90 {
    display: flex;
    flex: 90%;
}

/* Flex Basis */

.flex-basis-100 {
    display: flex;
    flex-basis: 100;
}

.flex-basis-90 {
    display: flex;
    flex-basis: 90;
}

/* Justify Content */

.flex-justify-center {
    justify-content: center;
}

.flex-justify-start {
    justify-content: flex-start;
}

.flex-justify-end {
    justify-content: flex-end;
}

.flex-justify-space-around {
    justify-content: space-around;
}

.flex-justify-space-between {
    justify-content: space-between;
}

/* Align Items */

.flex-align-center {
    align-items: center;
}

.flex-align-start {
    align-items: flex-start;
}

.flex-align-end {
    align-items: flex-end;
}

.flex-align-space-between {
    align-content: space-between;
}

.flex-align-space-around {
    align-content: space-around;
}

/* Flex Direction */

.flex-direction-column {
    flex-direction: column;
}

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

/* Flex Wrap */

.flex-wrap {
    flex-wrap: wrap;
}

.flex-nowrap {
    flex-wrap: nowrap;
}

/* Margin */

.margin-0-2 {
    margin: 0px 2px;
}

.margin-0-5 {
    margin: 0px 5px;
}

.margin-2-10 {
    margin: 2px 10px;
}

.margin-5-0 {
    margin: 5px 0px;
}

.margin-0-10 {
    margin: 0px 10px;
}

.margin-2 {
    margin: 2px;
}

.margin-2-0 {
    margin: 2px 0px;
}

.margin-5 {
    margin: 5px;
}

.margin-10 {
    margin: 10px;
}

.margin-top-2 {
    margin-top: 2px;
}

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

.margin-top-10 {
    margin-top: 10px;
}

.margin-top-15 {
    margin-top: 15px;
}

.margin-top-20 {
    margin-top: 20px;
}

.margin-top-30 {
    margin-top: 30px;
}

.margin-top-40 {
    margin-top: 40px;
}

.margin-right-2 {
    margin-right: 2px;
}

.margin-right-5 {
    margin-right: 5px;
}

.margin-5-7 {
    margin: 5px 7.5%;
}

.margin-auto {
    margin: auto;
}

/* Padding */

.padding-0-2 {
    padding: 0px 2px;
}

.padding-0-5 {
    padding: 0px 5px;
}

.padding-2-5 {
    padding: 2px 5px;
}

.padding-2-10-2-2 {
    padding: 2px 10px 2px 2px;
}

.padding-2 {
    padding: 2px;
}

.padding-5 {
    padding: 5px;
}

.padding-5-0 {
    padding: 5px 0px;
}

.padding-5-5 {
    padding: 5px 5px;
}

.padding-10 {
    padding: 10px;
}

.padding-bottom-2 {
    padding-bottom: 2px;
}

.padding-bottom-5 {
    padding-bottom: 5px;
}

.padding-top-15 {
    padding-top: 15px;
}

.padding-20 {
    padding: 20px;
}

/* Font Size */

.font-size-8 {
    font-size: 8px;
}

.font-size-10 {
    font-size: 10px;
}

.font-size-12 {
    font-size: 12px;
}

.font-size-14 {
    font-size: 14px;
}

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

.font-size-18 {
    font-size: 18px;
}

.font-size-20 {
    font-size: 20px;
}

.font-size-22 {
    font-size: 22px;
}

.font-size-24 {
    font-size: 24px;
}

.font-size-25 {
    font-size: 25px;
}

.font-size-26 {
    font-size: 26px;
}

/* Font Weight */

.font-weight-bold {
    font-weight: bold;
}

/* Width */

.width-20-pct {
    width: 20%;
}

.width-30 {
    width: 30%;
}

.width-55 {
    width: 55%;
}

.width-80-pct {
    width: 80%;
}

.width-85 {
    width: 85%;
}

.width-90-pct {
    width: 90%;
}

.width-95-pct {
    width: 95%;
}

.width-100-pct {
    width: 100%;
}

.min-width-130 {
    min-width: 130px;
}

.min-width-200 {
    min-width: 200px;
}

.min-width-100-pct {
    min-width: 100%;
}

/* Height */

.height-10-pct {
    height: 10%;
}

.height-20 {
    height: 20px;
}

.height-20-pct {
    height: 20%;
}

.height-25-px {
    height: 25px;
}

.height-30 {
    height: 30px;
}

.height-35-px {
    height: 35px;
}

.height-35-pct {
    height: 35%;
}

.height-40 {
    height: 40px;
}

.height-40-pct {
    height: 40%;
}

.height-50 {
    height: 50px;
}

.height-60 {
    height: 60px;
}

.height-70 {
    height: 70px;
}

.height-80 {
    height: 80px;
}

.height-80-pct {
    height: 80%;
}

.height-90-pct {
    height: 90%;
}

.height-95-pct {
    height: 95%;
}

.height-100 {
    height: 100px;
}

.height-100-pct {
    height: 100%;
}

.height-auto {
    height: auto;
}

.flex-break {
    flex-basis: 100%;
    height: 100%;
}

/* Line Height */

.line-height-30 {
    line-height: 30px;
}

.line-height-40 {
    line-height: 40px;
}

/* Text Align */

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

.text-align-right {
    text-align: right;
}

.text-align-center {
    text-align: center;
}

/* Text Overflow */

.text-overflow {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.overflow-scroll {
    overflow: scroll;
}

.overflow-x-scroll {
    overflow-x: scroll;
    padding: 0;
}

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

.cursor-pointer {
    cursor: pointer;
}

/* Background Color */

.background-white {
    background-color: #FFFFFF;
}

.background-lightgrey {
    background-color: lightgray;
}

.background-darkgrey {
    background-color: darkgray;
}

.background-red {
    background-color: #AC0202;
}

.background-amber {
    background-color:  #FECC00;
}

.background-green {
    background-color:  #009846;
}

.background-very-dark-blue {
    background-color:#0d3d57;
}

.background-sky-very-dark {
    background-color: #1C84BD;
}

.background-sky-medium-dark {
    background-color: #3F9CD3;
}

.background-sky {
    background-color: #398DC0;
}

.background-sky-dark {
    background-color: #5EB7E7;
}

.background-sky-light {
    background-color: #A2D9F7;
}

.background-stocktaking-location-1 {
    background-color: #E8E8F2;
}
  
.background-stocktaking-location-2 {
    background-color: #DDFFE6;
}
  
.background-stocktaking-location-3 {
    background-color: #FFFFCA;
}

.background-stocktaking-unchecked {
    background-color: #D85450;
}
  
.background-stocktaking-partially {
    background-color: #EF7F1A;
}

.background-stocktaking-checked {
    background-color: #5DB65C;
}

.background-purple {
    background-color: #2E3092;
}

/* Color */

.color-white {
    color: #FFF;
}

.color-black {
    color: #000;
}

.color-very-dark-blue {
    color: #0d3d57;
}

.color-sky-very-dark {
    color: #1C84BD;
}

.color-sky-dark {
    color: #5EB7E7;
}

.color-sky-light {
    color: #A2D9F7;
}

.color-hot-pink {
    color: #D70069; 
}

.color-dark-grey {
    color: #9F6846;
}

.color-checked {
    color: #5DB65C;
}

.color-light-grey {
    color: lightgray;
}

/* Border */

.border-1-solid-very-dark-blue {
    border: 1px solid #0d3d57
}

.border-bottom-1-solid-sky-dark {
    border-bottom: 1px solid  #5EB7E7
}

.border-bottom-2-white {
    border-bottom: 2px solid  #FFF
}

.border-top-2-white {
    border-top: 2px solid  #FFF
}

.border-radius-5 {
    border-radius: 5px;
}

.left-0 {
    left: 0;
}

.right-0 {
    right: 0;
}


/* The Modal (background) */

.modal {
    display: block; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content/Box */

.modal-content {
    display: flex;
    flex-direction: column;
    background-color: #5EB7E7;
    margin: 1% auto; /* 15% from the top and centered */
    padding: 10px;
    border: 1px solid #1C84BD;
    width: 80%; /* Could be more or less, depending on screen size */
}

/* .modal-content-1 {
    display: flex;
    width: 80%;
    flex-direction: column;
    margin: 1% auto;
    padding: 10px;
    border: 1px solid #1C84BD;
} */

.modal-content-1 {
    display: grid;
    justify-content: center;
    /* border-style: solid;
    border-color: red; */
    grid-template-columns: 95%;
    grid-template-rows: 40px 25% 25% 20% 20%;
    grid-gap: 5px;
    width: 100%;
    height: 100%;
}

.modal-content-2 {
    display: flex;
    flex-direction: column;
    margin: 1% auto; /* 15% from the top and centered */
    padding: 10px;
    width: 80%; /* Could be more or less, depending on screen size */
}

.one {
    /* border-style: solid;
    border-color: blue; */
    grid-column: 1 / 2;
    grid-row: 1 / 2;
}

.two {
    /* border-style: solid;
    border-color: green; */
    grid-column: 1 / 2;
    grid-row: 2 / 3;
}

.three {
    /* border-style: solid;
    border-color: purple; */
    grid-column: 1 / 2;
    grid-row: 3 / 4;
}

.four {
    /* border-style: solid;
    border-color: red; */
    grid-column: 1 / 2;
    grid-row: 4 / 5;
}

.five {
    /* border-style: solid;
    border-color: red; */
    grid-column: 1 / 2;
    grid-row: 5 / 6;
}

/* The Close Button */

.close {
    justify-content: flex-end;
    color: #ffffff;
    text-align: right;
    font-size: 28px;
    font-weight: bold;
}

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

/* The New Close Button */

.modal-close {
    font-size: 30px;
    font-weight: bold;
}

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

/* Dialog */

.ui-dialog-title {
    font-size: 14px !important;
}

.ui-dialog { 
    z-index: 1001 !important ;
}

.ui-dialog .ui-dialog-content {
    font-size: 14px;
}

.ui-button, .ui-button-text .ui-button{  
    font-size: 14px !important; 
}

/* 320px — 480px: Mobile devices
481px — 768px: iPads, Tablets
769px — 1024px: Small screens, laptops
1025px — 1200px: Desktops, large screens
1201px and more —  Extra large screens, TV */

@media screen and (max-width: 320px) {

    .container-a .goods-inward-main {
        margin: 0.5rem;
    }

    .customer-search-box-1-inner-0 {
        width: 95%;
    }

    .customer-search-box-1-inner-1 {
        width: 65%;
    }
    
    .customer-search-box-1-inner-3 {
        width: 35%;
    }

    .customer-search-box-2 {
        height: calc(100% - 60px);
        padding: 0px 0px 5px 0px;
        overflow: scroll;
    }

    .select-label {
        margin-top: 5px;
        margin-bottom: 0px;
        font-size: 12px;
        font-weight:normal;
    }

    select {
        height: 30px;
        width: 100%;
        padding: 5px;
        color:#000000;
        font-size: 14px;
        border: 1px solid #FFFFFF;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        background: url(../images/arrow-down.png) no-repeat right #FFFFFF;
    }

    .font-size-12 {
        font-size: 10px;
    }

    .input-label{
        margin-top: 5px;
        margin-bottom: 0px;
        font-size: 12px;
        font-weight:normal;
    }

    .input-box-1 {
        height: 30px;
        width:100%;
        padding: 5px;
        color:#000000;
        font-size: 14px;
        border: 1px solid #FFFFFF;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
    }

    .operator-list-label {
        font-size: 18px;
    }

    .operator-main {
        font-size: 18px;
    }

    #scanned-product-description{
        width: 100%;
        font-size: 10px;
        margin:0px 0px 5px 0px;
        background-color: #73BAE0;
        color: #FFFFFF;
        border: none;
        outline: none;
        border-collapse: separate;
        border-spacing: 2px;
    }

    .goods-inward-box{
        margin-top: 10px;
        text-align: center;
    }
    
    .goods-inward-box-1{
        margin-top: 10px;
        text-align: center;
    }
    
    .goods-inward-box-2{
        text-align: right;
    }
    
    .goods-inward-btn {
        display: inline-block;
        width: 100%;
        height: 60px;
        line-height: 60px;
        font-weight: 400;
        font-size: 20px !important;
        background-color: #A2D9F7;
        color: #FFFFFF;
        border: none;
        outline: none;
        text-decoration: none;
        text-align: center;
    }
    
    .goods-inward-btn-1 {
        padding-top:16px !important;
        width: 100%;
        height: 60px;
        font-weight: 400;
        font-size: 20px !important;
        background-color: #A2D9F7;
        color: #FFFFFF;
        border: none;
        outline: none;
    }
    
    .goods-inward-btn-1 a {
        text-decoration:none;
    }
    
    .goods-inward-btn-2 {
        display: inline-block;
        width: 75%;
        height: 60px;
        line-height: 60px;
        font-weight: 400;
        font-size: 20px !important;
        background-color: #A2D9F7;
        color: #FFFFFF;
        border: none;
        outline: none;
        text-decoration: none;
        text-align: center;
    }

    .inward-list{
        height:100px;
        padding: 0;
        color: #0D3D57;
        font-weight:bold;
        overflow-y:scroll;
    }

    .table {
        font-size:12px;
        margin: 0px 0px 2px 0px !important;
    }

    .scan-barcode-info.item{
        margin-bottom:10px;
    }

    .table-1{
        font-size:12px !important;
    }

    #deliverynotes,
    #customernotes {
        height: 80px;
        width:100%;
        background-color: #feff9c;
        color: #000000;
    }

    .inward-details-main-2{
        height:155px;
        margin-top:5px;
        margin-bottom:10px;
        overflow-y:scroll;
    }

    .inward-details-btn {
        display: inline-block;
        width: 100%;
        height: 60px;
        line-height: 60px;
        font-weight: 400;
        font-size: 20px !important;
        background-color: #A2D9F7;
        color: #FFFFFF;
        border: none;
        outline: none;
        text-decoration: none;
        text-align: center;
    }

    .settings-header{
        font-size: 18px;
        margin: 10px 0px 20px 0px;
        text-align: center;
    }
    
    .settings-main{
        margin: 0px 10px 0px 10px;
        /* background-color: #398DC0; */
        padding-bottom: 10px;
    }
    
    .settings-main1{
        margin: 10px;
        padding-top:10px;
        font-size: 12px;
    }
    
    .settings-main2{
        margin: 10px;
        font-size: 10px;
    }
    
    .settings-box{
        margin:5px 0px 5px 10px;
    }
    
    .settings-box1{
        font-size: 10px;
    }
    
    .radiotextsty {
        color: #FFFFFF;
        font-size: 12px;
    }
    
    .customradio {
        display: block;
        position: relative;
        padding-left: 30px;
        margin-bottom: 0px;
        cursor: pointer;
        font-size: 18px;
        font-weight: normal !important;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }
    
    /* Hide the browser's default radio button */
    .customradio input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
    }
    
    /* Create a custom radio button */
    .checkmark {
        position: absolute;
        top: 7px;
        left: 0;
        height: 14px;
        width: 14px;
        background-color: white;
        border-radius: 50%;
        border:1px solid #0D3D57;
    }
    
    /* On mouse-over, add a grey background color */
    .customradio:hover input ~ .checkmark {
        background-color: transparent;
    }
    
    /* When the radio button is checked, add a blue background */
    .customradio input:checked ~ .checkmark {
        background-color: white;
        border:1px solid #0D3D57;
    }
    
    /* Create the indicator (the dot/circle - hidden when not checked) */
    .checkmark:after {
        content: "";
        position: absolute;
        display: none;
    }
    
    /* Show the indicator (dot/circle) when checked */
    .customradio input:checked ~ .checkmark:after {
        display: block;
    }
    
    /* Style the indicator (dot/circle) */
    .customradio .checkmark:after {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: #0D3D57;
    }

    .scan-barcode-multiply-box{
        width: 33.33%;
        height: 60px;
        margin: 0px 5px 0px 5px;
        background-color: #A2D9F7;
        color: #FFFFFF;
        text-align:center;
    }

    .scan-barcode-multiply-box-row-1{
        font-size: 16px;
        font-weight: bold;
    }

    .scan-barcode-multiply-box-row-2{
        font-size: 12px;
    }

    .circle-btn {
        width: 45px;
        height: 45px;
        margin: 5px;
        border-radius: 50%;
        font-size: 32px;
        font-weight:bold;
        color: #fff;
        line-height: 45px;
        text-align: center;
        background: #5EB7E7;
    }

    .scan-barcode-goods-in {
        width: 100%;
        height: 60px !important;
        margin-top: 2px !important;
        padding-top: 3px;
        padding-left: 5px;
        font-size: 24px;
        font-weight: bold;
        background-color: #A2D9F7;
        color: #FFFFFF;
        border: none;
        outline: none;
    }

    .circle-1 {
        width: 55px !important;
        height: 55px !important;
        border-radius: 50%;
        font-size: 30px;
        font-weight: bold;
        color: #fff;
        line-height: 55px !important;
        text-align: center;
        background: #1C84BD;
    }

    .scan-barcode-goods-in-text {
        padding-top: 12px !important;
        font-size: 22px !important;
        text-align: center;
    }

    .customer-search-box-3-inner-1-table-text-1 {
        font-size: 12px;
    }

    .customerdetail-current-orders-list {
        max-height: 45vh;  
    }

    .collection-delivery-notes {

        height: 18vh;
    }

    .kbw-signature { 
        height: 20vh; 
    }

    .stocktaking-minus-plus-1,
    .stocktaking-minus-plus-input-1 {
        height: 30px;
    }

}

@media screen and (min-width: 321px) {

    .circle-btn {
        width: 50px;
        height: 50px;
        margin: 5px;
        border-radius: 50%;
        font-size: 32px;
        font-weight:bold;
        color: #fff;
        line-height: 50px;
        text-align: center;
        background: #5EB7E7;
    }
    
    .circle-btn-1 {
        width: 50px;
        height: 50px;
        margin: 5px;
        border-radius: 50%;
        font-size: 32px;
        font-weight:bold;
        color: #fff;
        line-height: 50px;
        text-align: center;
        background: #1C84BD;
    }    

    .goods-inward-box{
        margin-top: 5%;
        text-align:center;
    }
    
    .goods-inward-btn {
        display: inline-block;
        width: 100%;
        height: 60px;
        line-height: 60px;
        font-weight: 400;
        font-size: 24px;
        background-color: #A2D9F7;
        color: #FFFFFF;
        border: none;
        outline: none;
        text-decoration: none;
        text-align: center;
    }

    .goods-inward-btn-1 {
        padding-top:13px;
        width: 100%;
        height: 60px;
        font-weight: 400;
        font-size: 24px;
        background-color: #A2D9F7;
        color: #FFFFFF;
        border: none;
        outline: none;
    }
    
    .goods-inward-btn-1 a {
        text-decoration:none;
    }
    
    .goods-inward-btn-2 {
        display: inline-block;
        width: 75%;
        height: 60px;
        line-height: 60px;
        font-weight: 400;
        font-size: 24px;
        background-color: #A2D9F7;
        color: #FFFFFF;
        border: none;
        outline: none;
        text-decoration: none;
        text-align: center;
    }

    .scan-barcode-info {
        width: 100%;
        height: 60px;
        margin-top: 5px;
        margin-bottom: 0px;
        padding: 11px 8px;
        font-size: 24px;
        background-color: #A2D9F7;
        color: #FFFFFF;
        border: none;
        outline: none;
    }

    .circle-1 {
        width: 70px;
        height: 70px;
        border-radius: 50%;
        font-size: 30px;
        font-weight: bold;
        color: #fff;
        line-height: 70px;
        text-align: center;
        background: #1C84BD;
    }
    
    .scan-barcode-goods-in {
        width: 100%;
        height: 75px;
        margin-top: 5px;
        padding-top: 3px;
        padding-left: 5px;
        font-size: 24px;
        font-weight: bold;
        background-color: #A2D9F7;
        color: #FFFFFF;
        border: none;
        outline: none;
    }

    .scan-barcode-goods-in-text{
        padding-top:16px;
        text-align:center;
    }

    .inward-details-btn {
        display: inline-block;
        width: 100%;
        height: 60px;
        line-height: 60px;
        font-weight: 400;
        font-size: 22px;
        background-color: #A2D9F7;
        color: #FFFFFF;
        border: none;
        outline: none;
        text-decoration: none;
        text-align: center;
    }

    #collection-products {
        top: 180px;
    }

    .customerdetail-current-orders-list {
        max-height: 65vh;
    }

    .ps-row-4-style-table-grid { 
        overflow-y: auto; 
        max-height: 250px; 
        margin: 10px 0px;
    }

    .circle-btn-3 {
        width: 30px;
        height:  35px;
        line-height: 35px;
        margin: 2px;
        font-size: 14px;
    }
    
    .circle-btn-4 {
        width: 55px;
        height:  35px;
        line-height: 35px;
        margin: 2px;
        font-size: 14px;
    }

    .circle-btn-5 {
        width: 135px;
        height:  35px;
        line-height: 35px;
        margin: 2px;
        font-size: 14px;
    }

}

/* No greater than 768px, no less than 481px */
@media screen and (min-width: 768px) {

    .circle-btn-3 {
        width: 50px;
        height:  35px;
        line-height: 35px;
        margin: 3px;
        font-size: 14px;
    }
    
    .circle-btn-4 {
        width: 70px;
        height:  35px;
        line-height: 35px;
        margin: 3px;
        font-size: 14px;
    }

    .circle-btn-5 {
        width: 150px;
        height:  35px;
        line-height: 35px;
        margin: 3px;
        font-size: 14px;
    }

}