@charset "utf-8";
/* CSS Document */
/* header z-index 2, sidebar z-index 3, main content zindex 1, sidebar height 300px background #17202a, header height 60px background #17202a*/

*{margin:0; padding:0; font-family: 'Nunito Sans', sans-serif;}
::-webkit-scrollbar{height:10px; width:10px; background:rgb(0,0,0,0.01); border-radius: 30px;}
::-webkit-scrollbar-thumb{background:#17202a; border-radius: 30px;}
::-webkit-scrollbar-button:vertical:increment{display:none}
::-webkit-scrollbar-button:vertical:decrement{display:none}

.ui-datepicker-calendar {
   display: none;
}

body{background:#e6e6e6}

.login{width:500px; border-radius:20px; height: auto; background:rgb(0,0,0,0.5); position: absolute; left:50%; top:50%; transform: translate(-50%,-50%); padding: 40px; box-sizing: border-box;}
.input{width:100%; height: 40px; border:1px solid #fff; box-sizing: border-box; margin: 20px 0%; border-radius: 20px;}
.input i{width: 10%; text-align: center; line-height: 38px; float: left; color:#fff}
.input input{color:#fff; width:90%; height: 40px; line-height: 40px; border: none; background: none; box-sizing: border-box; outline: none; font-size: 13px;}
.input input:focus{border: none; outline: none}
.login h2{margin-bottom: 20px; text-align: center; color:#1B2631}
.login img{width:200px; height: 200px; object-fit: contain; display: block; margin: auto auto 20px auto}
.login_btn{border-radius: 30px; transition: border-radius 0.3s; width:49%; height: 40px; font-weight: 800; border:1px solid #fff; background:none; color:#fff; text-transform: uppercase; outline: none; cursor: pointer;}
.login p{font-size: 12px; margin-top:20px; cursor: pointer; text-align: right}

header{width:100%; height:60px; background:#17202A; position: fixed; top:0; left:0; padding-left:320px; box-sizing: border-box; z-index: 2;}
header ul{list-style-type:none; text-align: right;}
header ul li{display: inline-block; line-height: 60px; padding:0px 20px; box-sizing: border-box;}
header ul li b{font-size:14px !important; color:#E5E7E9;}
header ul li input{background:none; border:none; outline: none; width:80px; font-weight: 700; font-size:14px}
header ul li a{text-decoration:none; color:#E5E7E9; font-weight:700; font-size:14px}

#menu_bar, #menu_close{border-radius: 20px; box-shadow: 0px 2px 20px #555; width:40px; height: 40px; position: absolute; top:10px; line-height: 40px; text-align: center; cursor: pointer; user-select: none}
#menu_bar{z-index: 2; left:10px; transition: left 0.3s; background:#17202a; color:#fff;}
#menu_close{z-index: 1; left:230px; background:#F8F9F9; color:#17202a;}

#sidebar{transition: left 0.3s; display: block; background: #17202A; height: 100vh; width:280px; top: 0; left: -280px; position: fixed; overflow-y: auto; overflow-x: hidden; padding: 10px; box-sizing: border-box; z-index: 3}
#sidebar img{width: 160px; height: 40px; display: block; margin: 20px auto;}
#sidebar ul{list-style-type: none; margin-top: 10px;}
#sidebar ul li{width: 100%; padding: 10px 15px; box-sizing: border-box}
#sidebar ul li a{display: block; text-decoration: none; color:#fff; font-size: 16px; font-weight: 500; text-transform: uppercase}
.sidebar_icon{width:40px; text-align: center}
.caret{transition: transform 0.3s; float: right; font-size: 16px; margin-top: 0px}
@keyframes sweep {
  0%    {opacity: 0; transform: translateX(-10px)}
  100%  {opacity: 1; transform: translateX(0)}
}
#sidebar ul details summary{user-select: none; margin-bottom: 10px; transition: color 0.3s; cursor: pointer; list-style-type: none; display: block; text-decoration: none; color:#fff; font-size: 14px; font-weight: 700; text-transform: uppercase}
#sidebar ul details summary a{font-weight:700; font-size: 14px; color:#fff}
details[open] summary ~ * {animation: sweep .3s ease-in-out;}
#sidebar ul details[open] > summary .caret{transform: rotate(90deg); padding-right:3px}
#sidebar ul details[open] > summary{color: #fff}
#sidebar ul details li a{font-size: 14px; margin-left: 28px}

#wrapper{transition: padding 0.3s; width:100%; z-index: 1; padding:70px 10px 10px 10px; box-sizing: border-box; height: 100vh; overflow: hidden;}

#crumb{width:100%; height: 40px; background:#17202a; border-radius:5px; padding:0px 20px; box-sizing: border-box; color:#fff;}
#crumb a{text-decoration: none; color:#fff; line-height: 40px; font-size:14px; font-weight: 700;}
#crumb a i{margin-right:5px;}
#crumb span{margin:0px 10px;}

#search_filter form{display: inline-block}
#search_filter{width:100%; height:44px; background:#fff; padding: 0px 10px; box-sizing: border-box; margin:10px 0px; border-radius:5px;}
.filter_input{margin-top:7px; border-radius: 5px; width:150px; height:30px; border:1px solid rgb(0,0,0,0.2); padding:0px 10px; box-sizing: border-box; outline: none;}
#search_filter button{margin-left: 0px !important; padding:0px 15px; box-sizing: border-box; height:30px; font-size: 14px; border:none; background:#17202a; color:#fff; border-radius: 5px; font-weight: 700; cursor: pointer;}
#search_filter details{display: inline-block}
#search_filter .pop_up_btn{color:#fff; height:31px; font-size: 14px; padding:0px 10px; box-sizing: border-box; line-height: 31px;}

.pop_up_btn{list-style-type: none; margin-bottom: 10px; background:#17202a; font-weight: 700; line-height: 40px; height:40px; width:150px; border-radius: 5px; text-align: center; cursor: pointer; user-select: none;}
.pop_up{position: fixed; top:0; left:0; width:100%; height: 100vh; background: rgb(0,0,0,0.7); z-index: 4;}
.pop_up_margin{width:100%; margin-top:80px;}

.form{width:500px; overflow-y: auto; overflow-x: hidden; min-height: auto; max-height: 100vh; background:#fff; margin: auto; padding-bottom: 0.8%; box-sizing: border-box}
.form h2{z-index: 4; width:500px; padding: 20px; font-weight:900; box-sizing: border-box; text-align: center; background: #17202a; color:#fff; position: fixed; text-transform: uppercase; font-size: 16px;}
.form h2 i{position:absolute; right:20px; cursor: pointer; font-size: 18px;}
.form p{font-size: 12px; padding: 0px 5% 5px 5%; box-sizing: border-box;}
.form h4{margin-top:20px; font-size: 14px}

.max_width_form{width:985px !important; max-height: 100vh !important;}
.max_width_form h2{width:985px !important}
.max_width_form .input_control{width:50%; float: left}

.full_width_form{width:100% !important; max-height: 100vh !important;}
.full_width_form h2{width:100% !important}
.full_width_form .input_control{width:50%; float: left}

.input_area{position: relative; width: 90%; height:40px; background:#e6e6e6; border-radius: 5px; margin: 0px 5% 20px 5%; padding-right: 10px; box-sizing: border-box;}
.input_area i{position: absolute; width:40px; height: 40px; text-align: center; top:0; left: 0; background:#17202a; color:#fff; line-height: 40px; border-top-left-radius: 5px; border-bottom-left-radius: 5px;}
.input_area input, select{width:100%; height: 100%; border:none; outline: none; background: none; padding-left: 50px; box-sizing: border-box;}
.input_area input[type=file]{padding-top:10px; box-sizing: border-box}
.input_area select{border: 1px solid #e6e6e6;}

.pop_up .c_table input{width:100%; height: 100%; border:none; outline: none; background:none}

.submit_btn{font-weight:900 !important; height:40px !important; width:150px; outline: none; background:#17202a; color:#fff; border-radius: 5px; border:none; cursor: pointer;}
.table_container{width: 100%; overflow: auto; min-height: 100px; max-height: 65vh; margin-top: 10px; border-radius: 5px; border:1px solid rgb(0,0,0,0.1);}
.c_table{border-collapse:collapse; width:100%; background: #fff; min-height: 100px; max-height: 600px;}
.title_td{text-align: left !important; min-width:300px}
.c_table tr th:first-child{border-top-left-radius: 5px}
.c_table tr th:last-child{border-top-right-radius: 5px}
.c_table tr th{white-space: nowrap; position: sticky; top:0px; z-index: 1; width:auto; box-shadow: inset 0 0 1px rgb(255,255,255,0.7); list-style: none; text-transform: uppercase; background: #17202a; color:#fff; outline:none; user-select: none}
.c_table tr th, .c_table tr td{text-align: center; padding: 0px 20px; font-weight: 800; height:40px; font-size: 12px; box-sizing: border-box; cursor:pointer;}
.c_table tr td{word-spacing: 1px; text-transform:capitalize; min-width:100px; vertical-align:middle; font-weight: 400;}
.c_table tr:nth-child(2n+1){background:#F5F2F2}
.c_table tr td img{width:35px; height:32px; vertical-align: middle; object-fit: contain}
.c_table tr td a{text-decoration: none; color:#09f; text-transform: uppercase}
.c_table tr td a:hover{text-decoration: underline}
.c_table details{display: inline-block;}
.c_table details p{text-align:left}
.c_table details summary{list-style: none; cursor: pointer; background:#17202a; text-align: center; max-width:90px; min-width:70px; color:#fff; border-radius: 5px; height: 30px; z-index: 0; line-height: 30px; font-size: 12px; outline: none; user-select: none}
.footer_fix{white-space: nowrap; position: sticky; bottom:-1px; z-index: 1; box-shadow: inset 0 0 1px rgb(255,255,255,0.7); width:auto; background:#F5F2F2 !important;}
.c_table tr td h5{font-size: 13px; margin:10px 0px; font-weight: 400}

.sum{text-align: right !important; font-weight:bold; color:#000; height:30px; line-height: 30px; padding-right: 0px !important}
.small_input{width:50px !important; text-align: center;}

.c_table table{width:90%; margin: 0px 5% 20px 5%;}
.c_table .table_container{border:none !important}
.c_table table input{width:100%; height:40px; border:none; outline: none; background: transparent}
.c_table table select{height: 30px; margin:0px; padding:0;}
.c_table table td,.c_table table th{text-align: left}
.c_table table td{border:1px solid rgb(0,0,0,0.2); box-sizing: border-box}
.c_table table td button{max-width:90px; min-width:70px; height: 30px; font-size:12px; display: inline-block}

.switch {position: relative; display: inline-block; width: 50px; height: 25px;}
.switch input {opacity: 0;width: 0;height: 0;}
.slider {position: absolute;cursor: pointer;top: 0;left: 0;right: 0;bottom: 0;background-color: #ccc;transition: .4s;}
.slider:before {position: absolute;content: "";height: 18px;width: 18px;left: 4px;bottom: 4px;background-color: white;transition: .4s;}
input:checked + .slider {background-color: #2196F3;}
input:focus + .slider {box-shadow: 0 0 1px #2196F3;}
input:checked + .slider:before {transform: translateX(24px);}
.slider.round {border-radius: 25px;}
.slider.round:before {border-radius: 50%;}

.pos_left{width:64%; float: left; padding: 20px 1%; box-sizing: border-box; position: relative}
.pos_right{width:36%; float: right;}
.pos_left, .pos_right{height: 90vh; overflow: auto; background: #17202A; border-radius: 10px;}
.pos_filter{height:auto; width:98%; margin:0px 1%; border-radius: 10px;}
.pos_filter .pop_up p{text-align: left}
.pos_filter_input{width:auto; background: rgb(0,0,0,0.4); height:45px; color:#fff; border-radius: 10px; margin-left: 10px; outline: none; border:none; padding: 0px 10px; box-sizing: border-box}
.pos_left .c_table thead tr th{background:#283747;}

.pos_right{width: 35%; margin-left:1%; padding: 10px; box-sizing: border-box; overflow: hidden}
.pop_left{width:50% !important}
.pop_right{width:49% !important}
#print_img{display: block; margin: auto; height: 80px; width: 80px}
#bill_header{padding-bottom: 15px; box-sizing: border-box; border-bottom: 1px dashed rgb(255,255,255,0.1); display: none}
#bill_header h5{color:#fff; margin-bottom: 5px; text-align: center}
#bill_header p{font-size: 12px; margin: 10px 0px; text-align: center}

#bill_header_left{float: left; width:50%;}
#bill_header_right{float: right; width:50%;}
#bill_header_left p{text-align:left}
#bill_header_right p{text-align:right}

#bill_body{width:100%; box-sizing: border-box;}
#bill_body > .table_container{height: 66vh; background:/*rgb(0,0,0,.4)*/#283747; border-radius: 10px; margin-top: 0px}
#bill_body select{width:50%; height: 35px; border-radius: 30px; margin: 10px; outline: none; border:none; background:#2a2e32; color:#fff; padding: 0px 10px; box-sizing: border-box}
#bill_body table{border-collapse:collapse; width: 100%;}
#bill_body table tr th{white-space: nowrap; color:#17202a; position: sticky; background: #fff; font-size: 14px; top:0px; z-index: 1; height: 50px; list-style: none;}
#bill_body table thead tr th, #bill_body table tbody tr td{text-align: center; padding: 0px 10px; box-sizing: border-box}
#bill_body table tbody tr:nth-child(2n+2){border-bottom: 1px solid rgb(255,255,255,0.1);}
#bill_body table tbody tr:last-child{border-bottom: 1px solid rgb(255,255,255,0.1);}
#bill_body table tbody tr td{padding:10px; width:auto; color:#fff; background:#283747; font-size: 14px;}
#bill_body table tbody tr td input{width:50px; height: 25px; outline: none; text-align: center}
#discount{margin: 0px 0px 10px 0px; border:none;}
#bill_body input[type=number]::-webkit-inner-spin-button {-webkit-appearance: none;}
#bill_body input[type=number]{appearance: textfield;}

#bill_footer{width:100%; height: 10vh;}
#bill_footer button{font-weight:800; border-radius: 10px; border:none; width:150px; height:40px; box-sizing: border-box; color:#000; text-transform: uppercase; cursor: pointer; background:#fff; margin-top:20px;}