body {
	font-family: 'Roboto', 'Open Sans',Arial,Helvetica,sans-serif;
	font-weight: 300;
    color: #000000;
    font-size: 14px;
    color: #4c5258;
    letter-spacing: .5px;
    background: #f7f7ff;
    overflow-x: hidden;
    font-family: Roboto, sans-serif;
}
ul.yiiPager a:link, ul.yiiPager a:visited{border: solid 1px #454647;padding: 5px 8px;border-radius: 5px;}
ul.yiiPager .selected a{background: #454647;}
.ajax-loader{position: absolute;
    top: 0;
    left: 0;
    background: rgba(0,0,0,0.1);
    width: 100%;
    height: 100%;z-index: 9999;}
.loader{
  border: 6px solid #f3f3f3;
    border-top: 6px solid #0f0f10;
    border-radius: 50%;
    width: 100px;
    height: 100px;
    animation: spin 2s linear infinite;
    position: absolute;
    top: 50%;
    left: 50%;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

a{color: #212529;text-decoration: none;}
.grid-view .filters{display: none;}
a.sort-link{position:relative;padding-right: 18px;}
a.sort-link:after{content: "";
    background-image: url(../img/ic_sort.png);
    position: absolute;
    right: 0;
    top: 3px;
    height: 15px;
    width: 15px;
    background-size: 10px;
    background-repeat: no-repeat;}
a.sort-link.asc:after{background-image: url(../img/ic_sorted.png);}
a.sort-link.desc:after{background-image: url(../img/ic_sorted_rev.png);}
.h5, h5 {
    font-size: 14px;
}
input.no-bor,input.no-bor:focus{border: none;background: transparent;}
.clr-p{color:#6e7499;}
.sz-1{font-size: 16px;}
.sm-txt{font-size:12px;}
.fa-trash{color:#eb1919;}
.clr-r{color:#910606;}
.select2-container .select2-selection--single{height: 37px;padding: 5px;}
.modal-title{width: 80%;overflow: hidden;white-space: nowrap;}
.modal-fullscreen{width: calc(100vw - 100px);height: calc(100vh - 250px);margin-left: 50px;margin-top: 50px;}
#msgModal{position: fixed;
    bottom: 20px;
    right: 20px;
    padding: 10px 20px;
    border-radius: 10px;
    color: #fff;background: #096209;z-index: 99999;display: none;}
#msgModal.err{background: #bf0909;}
.form-control.error{border:1px solid #ff0101;}
.d-flex {
    display: flex!important;
}
.align-items-center {
    align-items: center!important;
}
.form-details .row > div{margin-bottom: 15px;}
.btn{font-size: 12px;}
.card-header{background: #e1e3ec;}
.card-header .btn{margin-bottom: 10px;margin-right: 5px;}
.card-title{
    font-size: 20px;
    font-weight: 500;
    background: #197c25;
    color: #fff;
    padding: 5px 20px 5px 30px;
    border-radius: 0px 15px 15px 0px;
}
button.close{border: none;}
.card {
    border: 0 solid transparent;
    margin-bottom: 1.5rem;
    box-shadow: 0 2px 6px 0 rgb(218 218 253 / 65%), 0 2px 6px 0 rgb(206 206 238 / 54%);
}
.table-striped th{white-space: nowrap;}
#os-update-ms{font-size: 14px;font-weight: 500;}
#sectionLogin {
    margin-top: 40px;
}
.loginOuter {
    background: #fff;
    padding: 15px;
    margin-top: 15px;
    border-radius: 10px;
}
.loginOuter p {
    font-size: 32px;
    color: #23334d;
    margin-bottom: 30px;
    margin-top: 15px;
    text-transform: uppercase;
    font-weight: 500;
}
.commonValid {
    position: relative;
    margin-bottom: 20px;
}
.loginBtn {
    background: #6e7499;
    font-size: 14px;
    color: #fff;
    border: none;
    margin-bottom: 8px;
}
.loginBtn:hover {
    background: #6e7499;
}
.loginCopy{
    font-size: 12px;
}
.wrapper.toggled .topbar {
    left: 70px;
}
.topbar {
    position: fixed;
    top: 0;
    left: 0px;
    right: 0;
    height: 75px;
    background: #fff;
    border-bottom: 1px solid rgb(228 228 228 / 0%);
    z-index: 10;
    -webkit-box-shadow: 0 2px 6px 0 rgb(218 218 253 / 65%), 0 0px 6px 0 rgb(206 206 238 / 54%);
    box-shadow: 0 2px 6px 0 rgb(218 218 253 / 65%), 0 0px 6px 0 rgb(206 206 238 / 54%);
}
.topbar .navbar {
    width: 100%;
    height: 75px;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}
.topbar .navbar a {
    color: #fff;
    font-size: 14px;
    border-radius: 50%;
    display: flex;
	white-space: nowrap;
    align-items: center;
    justify-content: center;
    transition: 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
}
.nav-item{position:relative;background: #01acf2;border-radius: 5px;color: #fff;margin-bottom: 2px;}
.topbar .navbar a i{margin-right: 4px;color: #000000;}
.topbar .sub-nav{position: absolute;top: 50px;left: 0;margin: 0;padding: 0;background: #fff;min-width: 170px;display: none;}
.topbar .sub-nav.show{display: block;}
.page-wrapper {
    height: 100%;
    margin-top: 60px;
    margin-bottom: 30px;
}
.page-content {
    padding: 1.5rem 1.5rem 0.7rem 1.5rem;
}
.stat-widget h4{font-size:18px;}
.widgets-icons {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ededed;
    font-size: 20px;
    border-radius: 10px;
}
.bg-gradient-success {
    background: linear-gradient(to right, #53e6a1, #198754)!important;
}
.bg-gradient-warning {
    background: linear-gradient(to right, #f6cd51, #ffc107)!important;
}
.bg-gradient-info {
    background: linear-gradient(to right, #0444a1, #0d6efd)!important;
}
.bg-gradient-danger {
    background: linear-gradient(to right, #871e28, #dc3545)!important;
}
.h-list {overflow-x: auto;}
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable{background: #6e7499;}
#ui-datepicker-div{border: 1px solid #ccc;background-color: #fff;border-radius: 10px;font-size: 12px;display: none;z-index: 99999 !important;}
.ui-widget-header{background: #000;
    border: medium none;
    padding: 15px;
    position: relative;
    border-radius: 10px 10px 0px 0px;
    font-size: 12px;}
.ui-widget-header a{color: #fff;}
.ui-datepicker-prev{right: 8px;}
.ui-datepicker-next{position: absolute;right: 15px;}
.ui-datepicker-title{color: #fff;}
.ui-datepicker-calendar{margin:10px;}
.ui-datepicker-calendar td {padding-top: 10px;}
.ui-datepicker-calendar td a{font-size: 14px;padding: 8px;border-radius: 18px;}
.ui-datepicker-calendar td a.ui-state-highlight,.ui-datepicker-calendar td a.ui-state-active{background-color: #262627;color: #fff;}
.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus{background:#000;color: #fff;}

#product-list td{min-width: 85px;}
#product-list td.order-pt{min-width: 185px;}
#product-list td input {border-radius: 5px;width: 100%;}
#product-list .p-total{padding-top: 15px;font-weight: 400;}
.unspan{color:red;}
#confirm-dio{position: absolute;top: 0;border: 0;right: 0;left: 0;bottom: 0;background: rgba(255,255,255,0.8);}
#confirm-din{position: absolute;top: 30%;left: calc(50% - 200px);background: #fff;padding: 10px;text-align: center;width: 400px;border: 1px solid #ccc;border-radius: 8px;}
#confirm-txt{font-size: 20px;font-weight: 600;margin: 20px;}
@media (max-width: 768px){
	.page-content {padding: 10px 0px;}
	.navbar-expand .navbar-nav{flex-direction: column;padding-bottom: 5px;}
	.left-side-menu{
		position: absolute;
		background: #fff;
		top: 58px;
		width: 100%;
		left: 0;
		text-align: left;
		display: none;
	}
	.left-side-menu.active{display: inline-block;}
	.topbar .navbar a{justify-content: left;}
	.card-title{margin-bottom:10px;}
	.ajax-loader .loader{top: 35%;left: 35%;}
}