@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp');

* {margin:0; padding:0; outline:0; -webkit-box-sizing:border-box; box-sizing:border-box; list-style:none;}
body {font-size:16px; line-height:normal; color: #000; font-family: 'Roboto', sans-serif; background: #f6f6f6;}
a {outline:none; text-decoration:none; color:#170B00; -webkit-transition:ease-in-out .3s; -moz-transition:ease-in-out .3s; -ms-transition:ease-in-out .3s; -o-transition:ease-in-out .3s; transition:ease-in-out .3s; cursor: pointer;}
a:hover {text-decoration:none;}
input, textarea, select {font-size:14px; color:#170B00; vertical-align:middle; font-family: 'Roboto', sans-serif; outline:none; resize:none;}
input[type="button"], input[type="submit"], button {-webkit-transition:ease-in-out .3s; -moz-transition:ease-in-out .3s; -ms-transition:ease-in-out .3s; -o-transition:ease-in-out .3s; transition:ease-in-out .3s; -moz-appearance:none; -webkit-appearance:none; appearance:none; cursor: pointer; font-family: 'Fira Sans', sans-serif;}

select::-ms-expand {display: none;}
.transition {-webkit-transition:ease-in-out .5s; -moz-transition:ease-in-out .5s; -ms-transition:ease-in-out .5s; -o-transition:ease-in-out .5s; transition:ease-in-out .5s;}
img {border:none; vertical-align:top; max-width:100%;}
.tac {text-align:center;}
.tar {text-align:right;}
.vAlign {vertical-align:middle;}
.mainCon {width:100%; position:relative; min-height:100vh; padding-top: 120px;}
.container {max-width:1446px; width: 100%; margin:auto; padding:0 40px;}
.flexBox {display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap;}
.flexBox.nowrap {flex-wrap: nowrap;}
.itemCenter {-webkit-align-items: center; -ms-align-items: center; align-items: center;}
.spacebetween {justify-content: space-between; -webkit-justify-content: space-between;}
.mb-20 {margin-bottom: 20px;}
.p-20 {padding: 20px;}

.loginBg {width: 50%; height: 100vh; background-size: cover !important; border-right: 2px solid #c1c1c1;}
.loginForm {width: 50%; height: 100vh; background-size: cover !important; display: flex; align-items: center; justify-content: center; padding:25px;}
.loginBox {width: 100%; max-width: 500px; margin: auto;}
.loginHd {font-size: 15px; padding: 20px 0;}
.loginHd span {font-size: 24px; display: block; font-weight: 700; padding-bottom: 5px;}
.loginField {border: 1px solid #acacac; box-shadow: 2px 2px 3px 1px #cacaca; height: 46px; background: #fff; position: relative; padding-left: 50px;}
.loginField.active .icon .material-icons {background: #088941; color: #fff;}
.loginField .icon {position: absolute; left: 0; top: 0; border-right: 1px solid #acacac; width: 50px; height: 100%; display: flex; align-items: center; justify-content: center;}
.loginField .icon .material-icons {background: #eee; width: 22px; height: 22px; border-radius: 100%; font-size: 16px; display: flex; align-items: center; justify-content: center;}
.loginInput {width: 100%; height: 44px; background: none; border: none; padding: 0 15px;}
.error {position: absolute; right: 0; top: 100%; background: red; color: #fff; font-size: 11px; padding: 4px 8px; border-radius: 3px; display: none;}
.rem {color: #888888; font-size: 14px;}
.checkWrapper {position:relative; width:24px; height:24px; display:inline-block; vertical-align:middle; margin:0 5px 4px 0;}
.checkWrapper .checkInpt {opacity:0; height:24px; width:24px; position:absolute; top:0; left:0; z-index:2; margin:0;}
.checkWrapper .checkInpt + .bg {height:24px; width:24px; display:inline-block; position:absolute; top:0; left:0; z-index:1; border:1px solid #088941; background:#fff;}
.checkWrapper .checkInpt:checked + .bg {background:#fff url(../images/checkbox.png) no-repeat center; border: 1px solid #088941; position: relative;}
.loginBtn {background: #088941; border-radius: 4px; color: #fff; font-size: 18px; padding: 10px 25px; text-transform: uppercase;}
.loginBtn:hover {background: #1d3562;}

.dbHeader {background: #f6f6f6; height: 80px; left: 0; position: fixed; top: 0; width: 100%; z-index: 150; box-shadow: 0 0 4px #d6d8dc; position: fixed; border-bottom: 2px solid #d8d8d8; display: flex;}
.dbLogo {width: 310px; background: #fff; height:78px; padding: 10px 15px; display: flex; align-items: center;}
.dbLogo img {height: 46px;}
.dbHeaderRight {padding: 0 20px; width: calc(100% - 310px); display: flex; align-items: center; justify-content:  space-between;}
.showdbMenu span {font-size: 36px;}
.headerLink li {margin-left: 15px; font-weight: 500;}
.headerLink li a {display: flex; align-items: center;}
.headerLink li.swicthLink a {background: #088941; border-radius: 4px; color: #fff; padding: 6px 10px; font-size: 14px;}
.headerLink li.logout a {color: #088941; padding: 6px 10px; font-size: 16px;}
.headerLink li.logout a span {margin-left: 5px;}

.dbLeft {width: 310px; background: #fff; height: calc(100% - 80px); position: fixed; left: 0; bottom: 0; z-index: 150; overflow: hidden; box-shadow: 0 0 4px #d6d8dc; transition: ease-in-out .4s;}
.dbLeft.active {width: 48px;}
.dbLeft.active .dbMenu > li {padding-left: 5px;}
.dbLeft.active .subMenu {padding-left: 5px;}

.dbMenu {display: block; width: 310px;}
.dbMenu > li {border-left: 4px solid rgba(0, 0, 0, 0);display: block;padding: 0 14px 0 10px; border-bottom:1px solid #e1e2e2; box-shadow: 0 0 4px #d6d8dc; transition: ease-in-out .4s}
.dbMenu > li > a{color: #5f5f5f;display: block;font-size: 14px;height:45px;padding: 8px 0;text-transform: uppercase; font-weight:600;}

.dbMenu > li:hover, .dbMenu > li.active{border-left:4px solid #339966; background-color:#f8f8f8;}
.dbMenu > li:hover > a, .dbMenu > li.active > a{ color:#339966;}
.dbMenu > li:hover, .dbMenu > li.active{box-shadow: 0 0 2px 2px #f0f0f0;}
.dbMenu li a i{background: rgba(0, 0, 0, 0) url("../images/dashmenuicon.png") no-repeat scroll center center; display: inline-block;height: 30px;margin: 0 10px 0 0;vertical-align: middle;width: 30px; -webkit-transition:ease-in-out .4s; -moz-transition:ease-in-out .4s; -ms-transition:ease-in-out .4s; -o-transition:ease-in-out .4s; transition:ease-in-out .4s;}
.dbMenu li a i.dashicon {background-position:5px 3px;}
.dbMenu li a:hover i.dashicon, .dbMenu li.active a i.dashicon{background-position:-47px 3px;}
.dbMenu li a i.Pasticon{background-position:5px -65px;}
.dbMenu li a:hover i.Pasticon, .dbMenu li.active a i.Pasticon{background-position:-45px -66px;}
.dbMenu li a i.Creaicon{background-position:5px -284px;}
.dbMenu li a:hover i.Creaicon, .dbMenu li.active a i.Creaicon{background-position:-46px -284px;}
.dbMenu li a i.Quoticon{background-position:5px -139px;}
.dbMenu li a:hover i.Quoticon, .dbMenu li.active a i.Quoticon{background-position:-46px -138px;}
.dbMenu li a i.Excon{background-position:5px -209px;}
.dbMenu li a:hover i.Excon, .dbMenu li.active a i.Excon{background-position:-46px -209px;}
.dbMenu li a i.Loadicon{background-position:5px -427px}
.dbMenu li a:hover i.Loadicon, .dbMenu li.active a i.Loadicon{background-position:-46px -427px;}
.dbMenu li a i.Manacon{background-position:5px -355px;}
.dbMenu li a:hover i.Manacon, .dbMenu li.active a i.Manacon{background-position:-46px -355px;}
.dbMenu li a i.Acticon{background-position:5px -568px;}
.dbMenu li a:hover i.Acticon, .dbMenu li.active a i.Acticon{background-position:-46px -568px;}
.dbMenu li a i.myacicon{background-position:5px -496px;}
.dbMenu li a:hover i.myacicon, .dbMenu li.active a i.myacicon{background-position:-46px -496px}
.dbMenu li a i.Biiling{background-position:5px -638px;}
.dbMenu li a:hover i.Biiling, .dbMenu li.active a i.Biiling{background-position:-46px -638px;}
.leftArrow{float: right;margin: 8px 0 0;}
.dbMenu li a.active .leftArrow{ transform:rotate(90deg);}

.subMenu {background:#fff; padding: 0 0 10px 40px;}
.subMenu li {padding: 6px 0; text-transform: uppercase; font-size: 13px; font-weight: 500;}
.subMenu li a {color: #5f5f5f; display: inline-block; padding-left: 10px; position: relative; position: relative;}
.subMenu li a:before {content: ''; width: 5px; height: 5px; background: #5f5f5f; border-radius: 100%; position: absolute; left: 0; top: 5px;}
.subMenu li a:hover {color: #088941;}
.subMenu li a:hover:before {background: #088941;}

.midCon {padding-left: 310px; padding-top: 80px; width: 100%; transition: ease-in-out .4s;}
.midCon.active {padding-left: 48px;}
.midRight {padding: 20px; transition: ease-in-out .4s;}
.whtbox {background: #fff; box-shadow: 2px 2px 3px 1px #c0c0c0;}
.dbTop {align-items: flex-start;}
.userInfo {width: 25%;}
.userInfo li {padding: 8px 0; display: flex; align-items: center;}
.userInfo li .icon {margin-right: 5px;}

.userLinks {width: 75%;}
.userLinks li {width: 33.33%; padding: 8px 0;}
.userLinks li a {display: flex; align-items: center; color: #337ab7;}
.userLinks li a .icon {margin-right: 5px; color: red;}

.prgramBtns {justify-content: center; padding: 10px 0;}
.prgramBtns a {background: #5b9bd5; border-radius: 4%; color: #fff;  display: inline-block; font-size: 15px; margin: 5px; padding: 10px 22px; text-transform: uppercase;}
.prgramBtns a:hover {background: #1d3562;}

.mainHd {color: #5f5f5f; font-size: 20px;text-transform: uppercase; line-height: 40px; padding-bottom: 15px;}
.mainHd span {display: inline-block; border-bottom:1px solid #088941; margin-bottom: 5px; position:relative;}
.mainHd span:after{background-color:#088941;bottom: -4px;content: "";height: 8px;left: 0;position: absolute;width: 20px;}

.tableBox {font-size: 15px;}
.tableBox table.dataTable {padding: 10px 0;}
.tableBox table.dataTable thead th {background: #1c3564; color: #fff;}
.tableBox table.dataTable thead th.sorting:before {border-color: #fff; opacity: .4;}
.tableBox table.dataTable thead th.sorting:after {border-color: #fff; opacity: .4;}
.tableBox table.dataTable thead th.sorting_asc:before {border-color: #fff; opacity: .8;}
.tableBox table.dataTable thead th.sorting_asc:after {border-color: #fff; opacity: .8;}
.tableBox table.dataTable tr.odd td {background: #ecf2f6 !important;}
.actionBtn {display: flex;}
.actionBtn a {margin-right: 10px;}
.actionBtn a.pdf {color: red;}
.actionBtn a.cancel {color: red;}
.actionBtn a.add {color: #1d3562;}
.actionBtn a.edit {color: #4cbb17;}

.form {margin: -10px;}
.form li {width: 33.33%; padding: 10px;}
.pr {position: relative;}
.fieldHd {display: block; font-size: 15px; padding-bottom: 4px;}
.formInput {width: 100%; padding: 0px 15px; height: 46px; border-radius: 3px; border: 1px solid #ddd;}
.priceInput .icon {position: absolute; width: 40px; position: absolute; left: 1px; top: 1px; bottom: 1px; background: #efefef; border-radius: 3px 0 0 3px; display: flex; align-items: center; justify-content: center; color: #999;}
.priceInput .formInput {text-align: right; padding-left: 65px;}
.dateInput .icon {position: absolute; right: 10px; top: 10px; color: #999;}

.formBtns {margin: -5px; padding-top: 15px;}
.formBtn {background: #088941; padding: 12px 25px; color: #fff; font-weight: 500; text-transform: uppercase; margin: 5px; border-radius: 4px; border: none;}
.formBtn.cancel {background: #999;}
.formBtn.blue {background: #1d3562;}
.subHd {padding-bottom: 15px; font-size: 20px; color: #1e3665;}