@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700;800&display=swap');
body {
    background-color: #f3f7fa;
    font-family: 'Open Sans', sans-serif;
    font-size: 13px;
    background: #fefefe;
    -webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
    color: #606060;
}
h1,h2,h3,h4,h5,h6{
    font-family: 'Open Sans', sans-serif;
}
.relative {
    position: relative !important;
}
.dash{
    overflow: hidden;
    margin: auto;
}
ul{
    list-style: none;
    padding: 0;
    margin: 0;
}
hr {
    border: none !important;
    background: none !important;
    border-top: solid 1px #f0f0f0 !important;
}

.bg-lightgreen {
    background-color: rgba(211, 229, 236, 0.2);
}
.bg-lightgray {
    background-color: #f8f8f8;
}
.bg-lightblue {
    background-color: #ebf0f7;
}
.bg-white {
    background-color: #fff;
}
.theme-color{
    color: #0e97ff!important;
}
.sec-color{
    color: #212229!important;
}
.logout-btn:hover{
    background-color: #ffbcbc;
}
.text-warning{
    color: #c4a31e!important;
}
.border-radius-default {
    border-radius: 15px;
}
.display-inline-flex {
    display: inline-flex;
}
.theme-btn {
    background-color: #0e97ff;
    padding: 6px 30px;
    font-size: 16px;
    font-weight: bold;
    text-transform: uppercase;
    color: #fff;
    border-radius: 10px;
    height: 48px!important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.theme-btn:hover, .theme-btn:focus {
    outline: solid 2px #0e97ff!important;
    outline-offset: 3px;
    transition: none;
}
a.outline-btn {
    height: 33px;
    border-radius: 10px;
    background: #fff;
    border: 2px solid #bddbf2;
    color: #1d72b3 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 90px;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 500;
    padding: 0 10px;
}
a.outline-btn:hover {
    background: #bddbf2;
    border: 2px solid #fff;
    color: #174569 !important;
    box-shadow: 0 0 20px rgba(0,0,0,0.1);
}
.outline-btn:hover,.outline-btn:focus{
    background: #0e97ff;
    color: #fff;
}
.arrow-none::after{
    display: none;
}
.no-caret{
    -webkit-appearance: none;
   -moz-appearance: none;
        appearance: none;
}
#sidebar .dropdown-menu.show {
    position: relative!important;
    width: 100%;
    transform: none!important;
}
#sidebar ul.components{
    max-width: 90%;
    margin: 0 auto;
}
#sidebar .dropdown-menu {
    margin: 0;
    padding: 10px 0;
    border: 0;
}
#sidebar .dropdown-menu ul li {
    list-style-type: none;
}
#sidebar .dropdown-menu ul li a {
    background-color: transparent!important;
        margin-bottom: 10px;
}
#sidebar .dropdown-menu ul li a:before {
    display: none;
}
#sidebar {
    z-index: 999;
    position: fixed;
    min-width: 280px;
    max-width: 280px;
    height: 100%;
    background: rgb(17,25,70);
    background: linear-gradient(167deg, #133254 42%, #071321 100%);
}
#sidebar .logo{
    margin-top: 10px;
}
.drop-icon {
    font-size: 14px!important;
    text-align: right;
    right: 10px;
    font-size: 20px!important;
    padding: 8px 0px;
    position: absolute;
}
.dropdown.show .drop-icon:before, .notify-btn.show .username i:before{
    content: "\f077"!important;
}
#sidebarCollapse{
    position: absolute;
    top: 4px;
    left: 15px;
    z-index: 9;
    padding: 0;
    font-size: 36px;
    line-height: normal;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}
#sidebar .dropdown .dropdown-menu ul li a {
    padding: 0px 16px!important;
    color: #fff;
    position: relative;
    display: flex;
    align-items: center;
    transition: 0.4s;
}
#sidebar .dropdown .dropdown-menu ul li a:hover{
    color: #0d9247!important;
    transform: translateX(6px);
}
#sidebar .dropdown-menu a:hover:after{
    background-color: #0d9247!important;
}
#sidebar .menu-items-wrapper {
    overflow: hidden;
    overflow-y: scroll;
    height: calc(100vh - 100px);
}
#sidebar .menu-items-wrapper::-webkit-scrollbar-track {
    background: linear-gradient(167deg, rgba(17,25,70,1) 42%, rgba(32,119,136,1) 100%);
}
#sidebar .menu-items-wrapper::-webkit-scrollbar-thumb {
    background: #1363f8;
}
#sidebar .menu-items-wrapper::-webkit-scrollbar {
    width: 3px;
    background: linear-gradient(167deg, rgba(17,25,70,1) 42%, rgba(32,119,136,1) 100%);
}
#sidebar .menu-items-wrapper::-webkit-scrollbar-thumb:hover {
    background: #2570fc;
}
#sidebar ul {
    list-style: none;
    padding: 0;
}
#sidebar ul li{
    position: relative !important;
    /* border-bottom: dotted 1px rgba(255,255,255,0.1); */
    padding: 5px 0;
}
#sidebar ul li a, #sidebar ul li span {
    color: #cfdae7;
}
#sidebar ul li:hover a, #sidebar .dropdown.show a {
    background: #295381;
    position: relative;
}
#sidebar ul li.active a, #sidebar ul li.active a span{
    color: #fff;
}
#sidebar ul li a img{
    opacity: 0.6;
    transition: all 0.4s;
    filter: brightness(0) invert(1);
}
#sidebar.hide ul li a img{
    left: 1.5vw;
}
#sidebar ul li.active a img{
    opacity: 1;
    color: #fff;
}
#sidebar ul li.active::after{
    content: "\f105";
    font-family: FontAwesome;
    font-size: 15px;
    font-weight: normal;
    color: #fff;
    position: absolute;
    right: 0;
    top: 11px;
    right: 13px;
}
#sidebar ul li a {
    color: #fff!important;
    font-size: 13px;
    font-family: 'Open Sans';
    font-weight: 600;
    letter-spacing: 0.01em;
    padding: 7px 13px !important;
    border: none;
    border-radius: 10px;
}
#sidebar ul li a img{
    width: 22px;
    height: 22px;
    object-fit: contain;
    position: relative;
    top: -2px;
}
.full-width{
    width: calc(100%)!important;
}
.card-block{
    border-radius: 16px;
background: #fff;
border: 1px solid #d5d5d5;

}
.card-block:hover,.card-block:focus{
    border-color: #0e97ff;
}
.login-box{
    background: #0b2d63;
    border-radius: 14px;
    border: 1px solid #6c7ee5;
}
.login-logo{
    max-width: 360px;
}
.login-box .theme-btn{
    min-width: 270px;
    height: 60px!important;
}
.forgot-link{
    color: #fff;
}
.forgot-link:hover, .forgot-link:focus{
    color: #0e97ff;
}
.form-control, .form-group{
    position: relative;
    height: auto;
    color: #fff!important;
    background: transparent!important;
    border: none;
}
.form-group {
    padding: 0 !important;
}
.form-group::placeholder{
    color: #fff!important;
    text-transform: none;
}
.form-group:hover, .form-group:focus{
    border-color: #0e97ff;
    outline: none;
    box-shadow: none;
}
.notify-btn a{
    font-size: 24px;
    color: #333335;
    vertical-align: middle;
    position: relative;
    line-height: normal;
}
.notify-btn{
    min-width: auto;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 15px;
}
.notify-btn:hover, .notify-btn:focus{
    border-color: #0e97ff;
}
.notify-btn .dropdown-menu .dropdown-item{
    font-size: 14px;
    font-weight: 700;
}
.notify-btn .dropdown-item:hover, .notify-btn .dropdown-item:focus{
    background: #E6F2EB;
    color: #0D9247!Important;
}
.notify-btn .badge {
    position: absolute;
    height: 7px;
    width: 7px;
    background: #28a745;
    display: inline-flex;
    top: 2px;
    right: 0px;
    font-size: 7px;
    padding: 0;
}
.notify-btn.flag a img{
    max-width: 24px;
    max-height: 24px;
    position: relative;
    top: -1px;
}
.search .form-control{
    font-size: 14px;
    color: #000!important;
}
.search .form-control::placeholder{
    color: #3d3d3d!important;
}
.search {
    transition: all 0.4s;
}
.search i{
    font-size: 20px;
    top: -3px;
    position: relative;
}
.noti-icon-badge {
    position: absolute;
    display: flex!important;
    background: #0D9247;
    height: 10px!important;
    width: 10px!important;
    min-width: 10px!important;
    max-width: 10px!Important;
    border: solid 2px #fff;
    padding: 0;
    bottom: 12px;
    right: -2px;
}
.nav-user img {
    height: 40px;
    width: 40px;
    border-radius: 50%;
    margin: 0 20px 0 10px !important;
}
.username {
    font-size: 16px;
    line-height: 26px;
    color: #212229;
    font-weight: 600;
}
.usermail{
    font-size: 14px;
    color: #9a9a9c;
}
.nav-user:after{
    display: none;
}
.profile-dropdown {
    left: auto!important;
    right: 0!important;
    z-index: 999;
    transform: none!important;
    top: 45px!important;
    border-radius: 10px;
    width: 100%;
    border: none;
    box-shadow: -2px 2px 6px #0000001f;
}
.dropdown-item {
    font-size: 14px;
}
.title-box {
    display: flex;
    margin-bottom: 20px;
}

span.vline {
    height: 100%;
    width: 4px;
    background: #0d9247;
    display: flex;
    position: absolute;
    left: 0;
    top: 0;
}
.breadcrumb-container {
    margin: 0px 0 20px 0;
}
.breadcrumb-container ul li,
.breadcrumb-container ul li span,
.breadcrumb-container ul li a{
    font-size: 13px;
}
.foot-nav ul li+li{
    margin-left: 16px;
}
.graph-section .title-box .title {
    width: 50%;
}
 .title-box .title {
    width: 80%;
}
.title-box .title-icon {
    width: 20%;
}
.title-box span {
    font-size: 18px;
    font-weight: 600;
    margin-left: 3px;
}
.title-box i {
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 18px;
}
.btn.btn-primary {
    background: #4281c6;
    border-color: #4281c6;
    color: #fff;
}
.btn.btn-primary:hover,
.btn.btn-primary:focus {
    background: #000!important;
    border-color: #000!important;
    color: #fff;
}
 #sidebar.active ul.list-unstyled.components.mb-5,  #sidebar.active .logo {
    display: block;
}
#sidebar .dropdown-menu ul{
    padding-left: 28px;
    overflow: hidden;
}
h6.card-title {
    color: #333333;
    font-weight: 700;
}
th.blankhead:after,th.blankhead:before {
    display: none!important;
}
.table tfoot td{
    font-weight: bold;
    font-size: 14px;
     background-color: #F2FAFF;
    color: #111;

}
table.dataTable > thead .sorting::before{
    content: "\f106"!important;
    font-family: 'Font Awesome 5 Pro';
    font-weight: 500;
    line-height: normal;
    bottom: auto!important;
    right: 0!important;
}
table.dataTable > thead .sorting::after{
        content: "\f107"!important;
    font-family: 'Font Awesome 5 Pro';
    font-weight: 500;
    margin-bottom: -6px!important;
    right: 0!important;
    line-height: normal;
}

.table-hover tbody tr:hover {
    background-color: rgb(229 243 255);
}
.table thead {
    /* background-color: #ebf0f7; */
    background: rgb(19 50 84);
    /* background: linear-gradient(-90deg, rgba(46,82,120,1) 42%, rgba(25,46,86,1) 100%); */
}
.table th{
    color: #fff;
    font-weight: bold;
    white-space: nowrap;
    font-size: 13px;
    line-height: 26px;
    border: none!important;
}
.table th i{
    font-size: 11px;
}
.table thead th{
    text-transform: uppercase;
    font-size: 11px;
}
.table td{
    white-space: nowrap;
    font-size: 13px;
    /* padding-right: 30px; */
    line-height: 26px;
    text-align: left;
    color: #484b5d;
    vertical-align: middle;
}
.table td span, .table td div, .table td p {
    white-space: normal !important;
}
td.thumb-img img {
    height: 26px;
    width: 26px;
    object-fit: cover;
    border: solid 1px #9a9d9f;
    border-radius: 4px;
}
.v2-date-wrap{
    border-radius: 10px !important;
    height: 35px !important;
    border: 1px solid #dadffa !important;
}
.v2-date-wrap .v2-picker-trigger.empty-text, .v2-date-wrap .v2-picker-trigger.empty-text{
    color: #d1d6ed !important;
}
.v2-date-wrap .v2-picker-trigger{
    text-align: left;
    font-size: 12px !important;
}
ul.pagination {
    padding: 20px 0 !important;
}
ul.pagination li:first-child,
ul.pagination li+li{
    margin-left: 0;
    margin: 0 !important;
    display: inline-flex !important;
}
.page-item:last-child .page-link,
.page-item:first-child .page-link,
ul.pagination li a{
    min-width: 25px;
    min-height: 28px;
    border-radius: 7px;
    background: #fff!important;
    border: 1px solid #e8e8e8;
    color: #847a7a !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 0 0 3px !important;
    font-size: 12px;
    padding: 6px 10px !important;
    font-weight: 500;
}
ul.pagination li.active a{
    border-color: #0e97ff !important;
    background-color: #0e97ff !important;
    color: #fff !important;
}
div#DataTables_Table_0_paginate {
    margin-top: 30px;
}
.card-footer {
    background-color: transparent !important;
    border: none !important;
}
/* width */
::-webkit-scrollbar{
  width: 6px;
  height: 4px;
  background-color: #ededed;
}
#sidebar ul.components::-webkit-scrollbar{
  width: 4px;
}
/* Track */
::-webkit-scrollbar-track{
  border-radius: 10px;
}
 /* Handle */
::-webkit-scrollbar-thumb{
  background: #0e97ff; 
  border-radius: 10px;
}
.box-title {
    background: #237abb;
    color: #fff;
    padding: 14px 10px;
}
form label{
    margin: 0!important;
    color: #333333;
    font-weight: 600;
    line-height: 16px;
    align-items: center;
    display: flex;
}
span.dot {
    position: absolute;
    right: 0;
}
select.form-control {
    border-radius: 10px;
    color: #1A1824!important;
    box-shadow: none!important;
    font-weight: 600;
}
.card-block select.form-control{
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: #ffffff url('../img/chevron-down.svg') no-repeat center right;
}
.card-block select.form-control::-ms-expand{
    display: none;
}
.add-btn i {
    font-size: 14px;
    background: #c3dbf0;
    color: #0c6fc1;
    height: 28px;
    width: 28px;
    max-width: 64px;
    font-style: normal!important;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    border:solid 1px #fff;
}
.add-btn i:hover{
    background: #0c6fc1;
    color: #fff;
    box-shadow: 0px 0px 8px #237abb2e;
}
.supplier-content{
    height: 200px;
    overflow-y: scroll;
}
.drop {
    width: 100%;
    height: 209px;
    border: 1px solid #ced4da;
    border-radius: 6px;
    overflow: hidden;
    text-align: center;
    -webkit-transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease-out;
    transition: all 0.5s ease-out;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 50px;
    color: #cde1f0;
}
.drop input {
    width: 100%;
    height: 100%;
    cursor: pointer;
    background: red;
    opacity: 0;
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}
.nav.nav-tabs li a{
    width: 80px;
    background: #e4f2ff;
    color: #0569b4;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    border-radius: 6px 6px 0 0;
}
.nav.nav-tabs li .active,.nav.nav-tabs li a:hover{
    background: #0aa981;
    color: #fff;
}
.nav.nav-tabs li+li{
    margin-left: 14px;
}
.foot-nav {
    font-weight: 600;
    font-size: 15px;
    color: #017efe;
}
.status-btn{
  position: relative;
  width: 100%;
}
.status-btn ul
{
  position: absolute;
  right: 4px;
  top:6px;
  font-weight: 500; 
}
.card-point h6{
    font-family: Open Sans;
    font-weight: normal;
    font-size: 14px;
    text-align: left;
    color: #343434;

}
.card-point h4{
    font-size: 26px;
    line-height: 26px;
    text-align: left;
    color: #000;
    font-weight: 700;
}
.earning-box {
    border-radius: 16px;
    background: #2e4dd4;
    padding: 12px;
}
ul.nav.nav-pills {
    border: 2px solid #5168cd;
    border-radius: 12px;
    background: transparent;
}
ul.nav.nav-pills li{
    width: 33.33%;
}
ul.nav.nav-pills li a{
    height: 46px;
    width: 100%;
    color: #fff;
    border-radius: 10px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-size: 13px;
    letter-spacing: 0.02em;
}
ul.nav.nav-pills li a.active{
    background: #3f5fef;
}
.filter .form-control, .filter .input-group{
    height: 60px!important;
    border-radius: 11px!important;
    background: #fff;
    box-shadow: -1px 3px 6px rgba(24, 117, 240, 0.06);
    font-size: 16px;
    line-height: 26px;
    text-align: left;
    color: #495057;
    font-weight: 700;
    border: solid 1px #fff;
}
.input-group input.form-control{
    padding: 0 20px;
    height: 100%!important;
}
span.input-group-text {
    width: 60px;
    color: #B1B1B1;
    font-size: 26px!important;
    display: inline-flex;
    justify-content: center;
}
.input-tbl-style, .select-tbl-style select {
    background-color: #fff !important;
    border: solid 2px #e1e1e1 !important;
    width: 100%;
    padding-top: 0 !important;
    font-weight: 400 !important;
    font-size: 13px !important;
    color: #343434 !important;
}
.select-tbl-style::after {
    color: #343434 !important;
}
.bottom-footer{
    line-height: 28px;
    font-weight: 700;
    color: #676767;
}
.switch {
  position: relative;
  display: inline-block;
  width: 54px;
  height: 26px;
  margin-bottom: 0;
  margin-top: 8px;
}
.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  background-color: #fff;
   border-radius: 9.5px;
border: 0.5px solid #bcbcbc;
    -webkit-transition: .4s;
  transition: .4s;
}
.slider:before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 4px;
  background-color: #fff;;
  -webkit-transition: .4s;
  transition: .4s;
}

/* IF CHECKED */
.switch input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
  background-color: #fff;
}
.switch input:checked + .slider{
    border: 0.5px solid #1363f8;
    background-color: #1363f8;
}

/* IF NOT CHECKED */
.switch input + .slider:before {
    background-color: #fff;
  }
.switch input + .slider{
    border: 0.5px solid #c9d2e2;
    background-color: #d1ddf2;
}

/*Rounded sliders*/
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}
.filter a.dropdown-item {
    font-weight: 700;
    font-size: 14px;
}
a.filter-btn {
    width: 60px;
    height: 60px;
    border-radius: 11px;
    background: #f3f7fa;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
a.filter-btn:hover{
    background: #0d9047;
}
a.filter-btn:hover img{
    filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(181deg) brightness(103%) contrast(102%);
}
.form-group h6 {
    font-size: 16px;
    color: #212229;
    margin-bottom: 14px;
}
.file-upload-box {
    display: inline-block;
    position: relative;
    width: 61px;
    height: 61px;
    border-radius: 13px;
    background: #dcdcdc;
    border: 1px dashed #707070;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;

}
.file-upload-box:hover{
    border-color: #0e97ff;
}
.file-upload-box input{
    display: block!important;
    opacity: 0;
    position: absolute;
    height: 100%!important;
    width: 100%!important;
    left: 0;
    top: 0;
    cursor: pointer;
}
.file-upload label i {
    color: #3d3d3d;
    font-size: 28px;
    line-height: normal;
}
[type="radio"]:checked,
[type="radio"]:not(:checked) {
    position: absolute;
    left: -9999px;
}
[type="radio"]:checked + label,
[type="radio"]:not(:checked) + label
{
    position: relative;
    padding-left: 28px;
    cursor: pointer;
    line-height: 20px;
    display: inline-block;
    color: #575757;
    font-size: 18px;
}
[type="radio"]:checked + label{
    color: #0d9047;
}
.login-title{
        background: linear-gradient(to right, #0d9047, transparent);
    color: #fff;
    padding: 16px;
}
.delete-btn{
    color: #dc3545;
    border: solid 1px #dc3545;
    border-radius: 50px;
    padding: 6px 30px;
}
.delete-btn:hover{
    background: #dc3545;
    color: #fff;
}
.update-btns,.cancel-btn{
    height: 30px;
    border-radius: 4px;
    font-size: 14px;
    color: #fff!important;
    background: #dc3545;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 6px 12px;
}
.cancel-btn{
    display: inline-flex!important;
    color: #dc3545;
}
.square-ico{
    width: 85px;
    height: 85px;
    border-radius: 13px;
    background: linear-gradient(#0d9247 0%, #0d9147 1.62%, #01602a 100%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}
.square-ico img{
    height: 50px;
    width: 50px;
    object-fit: contain;
}
.rating-bar i{
    color: #D6D6D6;
    font-size: 20px;
}
.rating-bar i.fill{
    color: #E89415;
}
.rating-bar i+i{
    margin-left: 4px;
}
img.rider-img{
    border: 3px solid #fff;
    border-radius: 8px;
    box-shadow: 0px 3px 15px rgb(0 0 0 / 19%);
}
.rider-name{
    background: linear-gradient(to right, #000 0%, rgba(0, 0, 0, 0) 100%);
}
.user-box{
    position: absolute;
    bottom: -86px;
    width: 100%;
}
.profile-bg{
    height: 240px;
    object-fit: cover;
    object-position: right;
}
.sel-box {
    background: #f2f2f2;
    border: 1px solid #e2e2e2;
    padding: 10px 20px;
    border-radius: 50px;
    font-weight: 700;
    color: #0d9247;
}
.partner-sel label{
    width: 100%;
}
.sel-ico{
    height: 60px;
    width: 60px;
    object-fit: contain;
    padding: 10px;
    background: #0D9247;
    border-radius: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.sel-ico img{
    height: 40px;
    width: 40px;
    object-fit: contain;
}
[type="radio"]:checked + label .sel-box{
    background: linear-gradient(#0d9247 0%, #0c783b 100%);
    box-shadow: 0px 3px 6px rgba(13, 146, 71, 0.3);
    color: #fff!important;
}
[type="radio"]:checked + label .sel-ico img{
    filter: brightness(0) saturate(100%) invert(33%) sepia(38%) saturate(7063%) hue-rotate(138deg) brightness(95%) contrast(90%);
}
[type="radio"]:checked + label .sel-ico{
    background: #fff;
}
.modal-content {
    border: none;
    border-radius: 8px;
    box-shadow: 0px 3px 15px rgb(0 0 0 / 11%);
}
.preview-img {
    height: 170px;
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
}
.preview-img:before {
    content: "";
    height: 100%;
    width: 100%;
    display: flex;
    position: absolute;
    left: 0;
    top: 0;
    background: #00000042;
}
.preview-img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.preview-img i{
    position: absolute;
    right: 10px;
    top: 10px;
}
[type="checkbox"]:checked, [type="checkbox"]:not(:checked) {
    position: absolute;
    left: -9999px;
}
.weekends .form-check-inline{
    margin-right: 6px;
}
.weekends .form-check-inline label {
    width: 30px;
    height: 30px;
    border-radius: 3px;
    font-size: 14px;
    font-weight: 600;
    background: transparent;
    border:2px solid #dedede;
    color: #0d9247;
    display: flex;
    align-items: center;
    justify-content: center;
}
.weekends [type="checkbox"]:checked + label{
    background: #0d9247;
    border-color: #0d9247;
    color: #fff;
}

/* New CSS */
td.status span, .previous-data .status span, .status span, .category span, td.verification span, .previous-data .verification span, .verification span{
    min-width: 65px;
    padding: 0 6px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    color: #fff;
    text-transform: uppercase;
    font-size: 9px;
    font-weight: 700;
    top: -2px;
    position: relative;
}
span.pending{
    background: #ffba76;
}
span.cancelled{
    background: #ff7070;
}
span.approved,
span.ongoing{
    background: #3fbb8d;
}
.verification span::before {
    content: "\f00c";
    font-family: FontAwesome;
    display: inline-block;
    border: solid 1px rgb(255 255 255 / 48%);
    width: 12px;
    height: 12px;
    margin: 3px 5px 2px 0;
    line-height: 11px;
    font-size: 8px;
    text-align: center;
}
.verification span.approved::before {
    content: "\f00c";
}
.verification span.cancelled::before {
    content: "\f00d";
}
.verification span.hide {
    background-color: #d5f1eb;
}
.time span, span.time, .badge {
    border-radius: 4px;
    background: #b1f2da;
    height: auto;
    font-size: 11px;
    font-weight:500;
    padding: 3px 5px 5px 5px;
    display: inline-flex;
    line-height: normal;
    align-items: center;
    justify-content: center;
}
.btn-height-normal{
    height: 40px !important;
}
a.view-btn, .save-btn, .cancel-btn, .next-btn, .prev-btn, .addmore-btn, .upload-btn {
    height: 30px!important;
    width: auto !important;
    border-radius: 7px;
    background: #4ec6eb;
    color: #ffffff !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    font-weight: 400 !important;
    font-size: 11px !important;
    text-transform: uppercase;
    outline: none;
    box-shadow: none;
    border: none;
}
a.view-btn::before {
    content: "\f06e";
    font-family: FontAwesome;
    margin-right: 5px;
}
a.view-btn.only-icon::before {
    margin-right: 0;
}
a.view-btn.width35 {
    height: 35px;
    font-size: 14px !important;
    border-radius: 8px !important;
}
a.upload-btn {
    background-color: #665dda;
}
a.upload-btn::before {
    content: "\f093";
    font-family: FontAwesome;
    margin-right: 0;
}
/* .save-btn::before {
    content: "\f0c7";
    font-family: FontAwesome;
    margin-right: 5px;
} */
.save-btn, .next-btn, .prev-btn, .cancel-btn, .addmore-btn {
    font-size: 12px !important;
    color: #fff !important;
    font-weight: 600 !important;
    padding: 5px 20px !important;
    height: 35px;
}
.download-btn, .loadmore-btn {
    color: #fff !important;
    background: #4ec6eb; 
    font-size: 12px !important;
    font-weight: 500;
    border-radius: 10px;
    padding: 8px 15px !important;
}
.loadmore-btn {
    padding: 5px 25px !important;
    text-transform: uppercase;
    margin: auto;
    background: #1363f8 !important;
}
.loadmore-btn:hover{
    background: #003699;
}

.addmore-btn {
    background-color: transparent;
    border: solid 1px #1362f8 !important;
    color: #1362f8 !important;
}
.addmore-btn:hover {
    color: #fff !important;
    background-color: #1362f8;
}
.cancel-btn {
    background-color: transparent;
    color: #e75252 !important;
}
/* .cancel-btn::before {
    content: "\f056";
    font-family: FontAwesome;
    margin-right: 5px;
} */
a.view-btn i, a.edit-btns i, a.update-btns i{
    font-size: 12px !important;
    margin-right: 7px !important;
    top: 0.3px;
    position: relative;
}
a.view-btn.large, a.edit-btns.large, a.update-btns.large, a.delete-btns.large{
    padding: 12px 25px;
    height: 35px;
}
a.view-btn:hover{
    background: #10537d;
    color: #ffffff !important;
}
a.edit-btn {
    height: 30px;
    width: auto;
    border-radius: 7px;
    color: #fff !important;
    background: #ffa53c;
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 3px !important;
    text-align: center;
    padding: 0 10px;
}
a.edit-btn:hover{
    background: #d6872a;
    color: #fff !important;
}
a.del-btn {
    height: 30px;
    width: auto;
    border-radius: 7px;
    color: #fff !important;
    background: #e75252;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 3px !important;
    padding: 0 10px;
    font-weight: 500;

}
a.view-btn i,
a.edit-btn i,
a.del-btn i {
    font-weight: 500 !important;
}
a.del-btn:hover{
    background: #f71414;
    color: #fff !important;
}
.action-btn a+a{
    margin-left: 10px;
}
.grey-box{
    border-radius: 14px;
    padding: 12px;
    background: #fff;
    border: 1px solid #f1f1f1;
    /* overflow: hidden; */
    box-shadow: 0 0 30px rgba(0,0,0,0.06);

}
.row .col-md-12 .grey-box.no-border {
    box-shadow: none !important;
    border: none !important;
    background-color: transparent;
    overflow: inherit !important;
    padding: 0 !important;
}
.edit-data h5{
    font-weight: bold;
    font-size: 15px;
}
.grey-box label{
    font-size: 10.5px;
    text-transform: inherit;
    color: #3d3f4e;
    margin-bottom: 0px!important;
    position: absolute;
    left: 10px;
    top: 15px;
    transition: all 0.4s;
    font-weight: 500 !important;
    letter-spacing: -0.01em !important;
    text-transform: uppercase;
    line-height: 18px;
    z-index: 12;
}
.grey-box input,
.grey-box textarea, 
.grey-box select, 
.border-bottom {
    background: #fff !important;
    border: none;
    height: 50px;
    line-height: 17px;
    padding: 0 10px;
    border: solid 1px #e4e6ef;
    font-size: 12.5px;
    text-align: left;
    color: #212121 !important;
    width: calc(100% - 10px);
    border-radius: 10px;
    outline: none;
    transition: all 0.3s ease-in-out;
    font-weight: 400;
    z-index: 10;
}
.grey-box input[type=checkbox] {
    height: 20px;
    width: 20px;
    border-radius: 0px;
    left: 0px;
    position: relative;
    background: none !important;
}
.grey-box label.checkbox {
    position: relative;
}
.grey-box input.danger, .grey-box textarea.danger, .grey-box select.danger,
.grey-box input.uk-text-danger, .grey-box textarea.uk-text-danger, .grey-box select.uk-text-danger {
    color: #f0506e !important;
}
.grey-box input:hover, .grey-box textarea:hover, .grey-box select:hover,
.grey-box input:focus, .grey-box textarea:focus, .grey-box select:focus {
    border-color: #e8eaf7 !important;
    background-color: #fff !important;
}
.grey-box textarea{
    height: auto;
}
.grey-box input, .grey-box select{
    padding-top: 9px;
}
.grey-box input[type="time"],
.grey-box input[type="date"] {
    padding-top: 20px;
}
.grey-box textarea{
    padding-top: 25px;
}
.grey-box input:valid ~ label, .grey-box textarea:valid ~ label, .grey-box select:valid ~ label,
.grey-box input:focus ~ label, .grey-box textarea:focus ~ label, .grey-box select:focus ~ label,
.grey-box input[readonly="readonly"] ~ label, .grey-box textarea[readonly="readonly"] ~ label, .grey-box select[readonly="readonly"] ~ label,
.grey-box input[readonly] ~ label, .grey-box textarea[readonly] ~ label, .grey-box select[readonly] ~ label{
    top: 2px;
    color: #a5a5a5;
    z-index: 12;
}
.grey-box select{
    -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2012%2012%22%3E%3Ctitle%3Edown-arrow%3C%2Ftitle%3E%3Cg%20fill%3D%22%23000000%22%3E%3Cpath%20d%3D%22M10.293%2C3.293%2C6%2C7.586%2C1.707%2C3.293A1%2C1%2C0%2C0%2C0%2C.293%2C4.707l5%2C5a1%2C1%2C0%2C0%2C0%2C1.414%2C0l5-5a1%2C1%2C0%2C1%2C0-1.414-1.414Z%22%20fill%3D%22%23000000%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E");
    background-size: .6em;
    background-position: calc(100% - 1.3em) center;
    background-repeat: no-repeat;
}
.grey-box input[readonly], .grey-box input[readonly]+label, .grey-box textarea[readonly]{
    pointer-events: none;
}
.grey-box input:hover, .grey-box textarea:hover, .grey-box select:hover{
    border-color: #3d3d3d;
}
.grey-box input:focus, .grey-box textarea:focus, .grey-box select:focus{
    border-color: #3d3d3d;
}
a.edit-btns, a.delete-btns {
    height: 30px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 400 !important;
    color: #fff;
    background: #fea53c;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 12px;
}
.edit-btns a, .delete-btns a{
    font-size: 11px;
}
a.delete-btns{
    background: #ff6d6e !important;
}
a.delete-btns i {
    font-size: 14px !important;
    position: relative;
    top: 1px;
}
.total-box {
    border-radius: 11px;
    background: #d3ecff;
    padding: 8px 20px;
    color: #000;
    font-weight: 700;
}
.filter{
    border-radius: 10px;
    background: #fff;
    border: 1px solid #dadffa;
    overflow: hidden;
}
.filter li a{
    font-weight: 500;
    text-transform: uppercase;
    font-size: 11px;
    color: #595f7f;
    min-width: 70px;
    line-height: normal;
    padding: 11px 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.filter li+li a{
    border-left: 1px solid #e7ebff;
}
.filter li.active a{
    background: #133255 !important;
    color: #fff!important;
}
.filter li a:hover {
    background: #0e97ff36;
    color: #000;
}
.filter-select{
    height: 47px;
    display: inline-flex;
    width: auto;
    border-radius: 10px;
    border: 1px solid #d5d5d5;
}
.form-check-inline label{
    position: relative;
    font-size: 15px!important;
    color: #3d3d3d;
    text-transform: capitalize;
    font-weight: normal;
    margin-bottom: 0!important;
}
.form-check-inline label:before {
  content:'';
  -webkit-appearance: none;
  background-color: transparent;
   padding: 10px;
  width: 22px;
    height: 22px;
    background: #fff;
    border: 1px solid #707070;
  display: inline-block;
  position: relative;
  vertical-align: middle;
  cursor: pointer;
  margin-right: 8px;
}
.form-check-inline input:checked + label:before{
    border-color: #00bf78;
}
.form-check-inline input:checked + label:after {
  content: '';
  display: block;
  position: absolute;
  top: 2px;
  left: 9px;
  width: 6px;
  height: 14px;
  border: solid #00bf78;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}
.profile-img,
.gallery-img {
    position: relative !important;
    height: 200px;
    width: 200px;
    /* max-width: 13vw;
    min-height: 12vh;
    min-height: 22vh; */
    transition: all 0.3s;
    left: 2vw;
    top: 1vh;
    background-size: cover;
    z-index: 1;
}
.profile-img.non-img,
.gallery-img.non-img {
    background-image: url('/assets/img/non-profile.jpeg');
}
.profile-img input,
.gallery-img input{
    position: absolute;
    height: 98%;
    width: 100%;
    margin: 0!important;
    z-index: 9;
    opacity: 0;
    left: 1%;
    top: 1%;
    cursor: pointer;
}
.profile-img img,
.gallery-img img{
    height: 100% !important;
    width: 100% !important;
    position: absolute;
    left: 0;
    top: 0;
    object-fit: cover;
    border-radius: 50%;
    transition: all 0.5s;
    transform: scale(1, 1);
}
.profile-img:hover img,
.gallery-img:hover img{
    transform: scale(1.05, 1.05);
}
.profile-img .img-wrapper,
.gallery-img .img-wrapper {
    overflow: hidden;
    position: relative !important;
    height: 200px;
    width: 200px;
    border-radius: 50%;
}
.gallery-img {
    display: inline-flex;
    margin: 0 20px 10px 0;
}
.gallery-img,
.gallery-img .img-wrapper,
.gallery-img img {
    width: 100px;
    height: 100px;
}
.gallery-img .img-wrapper,
.gallery-img img {
    border-radius: 10px !important; 
}
.profile-img .edit-btn, .profile-img .add-btn,
.gallery-img .edit-btn, .gallery-img .add-btn {
    width: 100%;
    height: 50px;
    position: absolute;
    display: block;
    left: 0;
    bottom: 0;
    z-index: 10;
    color: #123355;
    font-weight: 600;
    padding-top: 10px;
    transition: all 0.3s;
    background: rgb(17,25,70);
    background: linear-gradient(180deg, rgba(17,25,70,0) 42%, rgba(17,25,70,1) 100%);
    opacity: 0.8;
}
.profile-img:hover .edit-btn,
.gallery-img:hover .edit-btn {
    background: rgb(17,25,70);
    background: linear-gradient(180deg, rgba(0,0,0,0) 42%, rgba(0,0,0,1) 100%);
    opacity: 1;
}
.profile-img:hover .edit-btn:hover,
.gallery-img:hover .edit-btn:hover {
    color: #08418a;
}
.profile-img .add-btn,
.gallery-img .add-btn {
    bottom: auto;
    top: 56%;
    background: none;
    height: auto;
    position: relative;
    font-size: 15px;
}
.profile-img .add-btn i,
.gallery-img .add-btn i {
    display: inline-flex;
    background: none;
    width: auto;
    height: auto;
    border: none;
    color: #fff;
}
.profile-img .delete-btn,
.gallery-img .delete-btn {
    width: 35px;
    height: 35px;
    text-align: center;
    color: #fff;
    background-color: #e55357;
    top: 10px;
    right: 10px;
    position: absolute;
    padding: 0;
    cursor: pointer;
}
.gallery-img .delete-btn {
    top: -10px;
    right: -10px;
}
.profile-img .delete-btn::before,
.gallery-img .delete-btn::before{
    content: "\f2ed";
    font-family: FontAwesome;
    font-size: 17px;
}
.profile-img .delete-btn:hover,
.gallery-img .delete-btn:hover {
    background-color: #ff0007;
}
.discount-price{
    color: #f00!important;
}
.product-img{
    width: 43px;
    height: 43px;
    border-radius: 4px;
    background: #f2f2f2;
    display: flex;
    align-items: center;
    justify-content: center;
}
.product-img img{
    height: 35px;
    object-fit: contain;
}
.company-data{
    font-size: 13px;
    line-height: 18px;
    text-align: left;
    color: #777;
}
.company-data p:last-child{
    margin-bottom: 0;
}
.company-profile img {
    height: 110px;
    width: 110px;
    border-radius: 100%;
    overflow: hidden;
    object-fit: cover;
}
.active-txt{
    font-weight: bold;
    font-size: 15px;
    color: #3d3d3d;
}
.company-info h5{
    font-weight: bold;
    font-size: 14px;
    margin-bottom: 8px;
    color: #1f3592;
}
.company-info span{
    font-size: 20px;
    color: #192765;
    line-height: normal;
    font-weight: bold;
}
.company-name h4{
    font-size: 20px;
    color: #192765;
    font-weight: bold;
}
.founded{
    font-size: 12px;
}
.account.switch input:checked + .slider:before{
    background: #73f6a3;
}
.account .slider:before{
    background: #fc5a5a;
}
a.download-btn {
    color: #000;
    font-size: 12px !important;
    line-height: 14px;
    min-width: 150px;
}
.card-box{
    border-radius: 16px;
    background: white;
    border: 1px solid #ffffff;
    padding: 10px;
    box-shadow: 0 0 40px rgb(0 0 0 / 8%);
}
.card-box table th{
    background: #eee;
}
ul.previous-data {
    color: #3d3d3d;
    font-size: 13px;
}
a.load-btn  {
    min-width: 129px;
    height: 41px;
    border-radius: 6px;
    background: #c4c4c4;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    line-height: normal;
}
a.load-btn:hover{
    background: #0e97ff;
}
.company-profile span.edit {
    width: 24px;
    height: 24px;
    font-size: 14px;
    line-height: normal;
    background: #e6e1e1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50px;
    position: absolute;
    right: 0;
    cursor: pointer;
}
.company-profile span.edit input, .profile-img .edit-btn input{
    width: 100%;
    height: 100%;
    opacity: 0;
    position: absolute;
}
.setting.switch{
    height: 34px;
    width: 73px;
}
.setting.switch input:checked + .slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
    background-color: #fc5a5a;
    width: 35px;
    height: 35px;
    border: 5px solid #fff;
    filter: drop-shadow(0px 3px 6px rgba(0, 0, 0, 0.16));
    left: 12px;
}
.setting.switch input + .slider:before{
    width: 35px;
    height: 35px;
    background: #0e97ff;
    border: 5px solid #fff;
    filter: drop-shadow(0px 3px 6px rgba(0, 0, 0, 0.16));
    left: -4px;
    top: -2px;
}
.price td,.price th{
    text-align: center;
}
.bodyguard-list li {
    position: relative;
}
.bodyguard-list li:before {
    content: "";
    height: 100%;
    width: 2px;
    background: #707070;
    opacity: 0.36;
    position: absolute;
    right: -50%;
}
.guard-img img{
    width: 70px;
    height: 70px;
    object-fit: cover;
    border-radius: 50px;
    border: 0.5px solid #b4b4b4;
}
a.edit-view {
    min-width: 68px;
    height: 28px;
    border-radius: 4px;
    color: #000;
    font-size: 13px;
    background: #ffbc6e;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
a.edit-view:hover{
    background: #ffaa47;
}
a.del-view {
    min-width: 68px;
    height: 28px;
    border-radius: 4px;
    color: #fff;
    font-size: 13px;
    background: #fc5a5a;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
a.del-view:hover{
    background: #f13131;
}
.rating-star i{
    color: #c5c5c5;
    font-size: 11px;
}
.rating-star i.fill{
    color: #FFB200;
}
.pro-upload-box{
    border-radius: 10px;
background: #dcdcdc;
border: 1px dashed #707070;
position: relative;
color: #a7a7a7;
font-size: 45px;
height: 250px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.pro-upload-box:hover{
    border-color: #0e97ff;
    color: #0e97ff;
}
.pro-upload-box input{
    display: block!important;
    opacity: 0;
    position: absolute;
    height: 100%!important;
    width: 100%!important;
    left: 0;
    top: 0;
    cursor: pointer;
}
.preview-box{
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    border: 1px solid #efefef;
    height: 250px;
    width: 100%;
}
.preview-box img{
    height: 100%;
    width: 100%;
    object-fit: cover;
}
.preview-box .del-btn{
    position: absolute;
    right: 10px;
    bottom: 10px;
    z-index: 99;
}
.thumb-overlay{
border-radius: 8px;
background: #17161640;
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.thumb-overlay a{
font-size: 60px;
    color: #fff;
}
.mission-list h6{
    font-size: 12px;
    font-weight: bold;
    margin-bottom: 6px;
    text-transform: uppercase;
}
.mission-list span{
    color: #777;
}
.mission-list .grey-box:hover{
    background: #FFEFDF;
}
.object-img img{
    max-width: 200px; 
    height: 200px;
    border-radius: 6px;
    object-fit: cover;
    object-position: top;
}
@media (max-width: 1024px) {
    .object-img img{
        width: 150px;
        height: 150px;   
    }
}
.object-img .edit-btn {
    width: 40px;
    height: 40px;
    background: #e6e1e1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50px;
    color: #000;
    position: absolute;
    bottom: 14px;
    right: 14px;
    z-index: 99;
}
span.hint-text {
    position: absolute;
    right: 0;
    bottom: 4px;
}
.hint-field .form-control{
    padding-right: 20%;
}
.total-cost{
    background: #D3ECFF;
    height: 41px;
    display: inline-flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    color: #111;
    font-size: 15px;
    font-weight: bold;
    border-radius: 6px;
}
.text-normal{
    font-weight: normal !important;
}
.dual-btn a {
    font-size: 15px;
    font-weight: bold;
}
.grey-btn{
    background: #8f8f8f!important;
}
.grey-btn:hover{
    background: #6c6b6b!important;
}
tr td.text-right:last-child {
    padding-right: 0.75rem;
}
.time-range{
    font-size: 16px;
    color: #000;
    font-weight: bold;
}
.update-btns,.submit-btn{
    height: 30px;
    border-radius: 4px;
    font-size: 14px;
    color: #fff!important;
    background: #0e97ff;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 6px 12px;
}
.submit-btn{
    display: inline-flex!important;
}
.describebox{
    display: none;
}
.bootstrap-tagsinput .badge+.badge{
    margin-left: 10px;
}
.badge{
    color: #6c757d;

}
.bootstrap-tagsinput .badge [data-role="remove"]:after{
        height: 16px;
    width: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.bootstrap-tagsinput .badge [data-role="remove"]:hover:after{
    color: #fff;
}
.active-tag{
    font-size: 12px;
}
.mission-item{
    display: none;
}
.editable input[readonly]{
    border: none;
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.editable input{
    width: auto;
    display: inline-block;
    max-width: 50px;
    text-align: center!important;
}
.editable td{
    text-align: right;
}
input[readonly].right-txt{
    text-align: right!important;
    padding-right: 2px;
}
input[readonly].left-txt{
    text-align: left!important;
    padding-left: 2px;
}
.editable select[disabled]{
    border: none;
    appearance: none;
    background: transparent;
}
.editable select {
    height: 30px;
    border-width: 0 0 1px 0;
    border-color: #E8E8E8;
    outline: none!important;
    text-align: center;
}
.editable select:hover, .editable select:focus{
    border-color: #3d3d3d;
}
#carinfo td{
    padding-right: 0.75rem;
}
a.back-btn {
    font-size: 14px;
    font-weight: 600;
    padding: 12px 23px;
    background: #f6f8ff;
    border-radius: 20px;
    transition: all 0.3s;
}
a.back-btn:hover{
    background: #f1f1f1;
}
.date-range input {
    max-width: 140px;
    padding: 0 6px;
    height: 46px;
    border: 1px solid #d5d5d5;
    border-radius: 10px;
    outline: none!important;
}
.date-range input:hover{
    border-color: #0e97ff;
}
td.duration-title,td.duration-title input,td.duration-title select {
    font-weight: bold;
    font-size: 15px;
}
.durationrow td{
    border-top: solid #000;
    border-top-width: 1.3px;
}

.circle-icon {
    display: block;
    width: 35px;
    height: 35px;
    position: relative;
    text-align: center;
    background-color: #e1e1e1;
    border-radius: 50%;
    overflow: hidden;
    margin: 1px;
    color: #fff;
}
.circle-icon i {
    line-height: 37px;
    font-size: 20px;
}
.circle-icon.success {
    background-color: #29bb9d;
}
.circle-icon.warning {
    background-color: #fda448;
}
.circle-icon.danger {
    background-color: #e55356;
}

table.table-status tr.danger {
    background-color: #fff1e5;
}
table.table-status tr.warning {
    background-color: #fceeee;
}
table.table-status tr.danger p.filename {
    color: #e55356;
}
table.table-status tr.warning p.filename {
    color: #ff7700;
}

/*
 Content View (Right)
 ----------------------------------------- */

.dashboard, .tpui-container .uk-card{
    overflow: hidden;
    border-radius: 15px;
    margin-bottom: 25px;
    background-color: #fff;
    border: solid 1px #f6f6f6 !important;
    box-shadow: 0 0 40px rgba(0,0,0,0.1);
}

.dashboard .row, .dashboard .row .col-lg-2, .dashboard.home .col-md-3, .dashboard.home .col-md-4, .dashboard.home .col-md-6{
    margin: 0 !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
}
.dashboard .row .col-lg-2{
    /* padding: 0 !important; */
    border-left: solid 1px #e1f2ff !important;
}
.dashboard .row .col-lg-2:first-child{
    border-left: none !important;
}
.dashboard .card{
    overflow: hidden;
    border-radius: 0px !important;
    box-shadow: none !important;
    border-left: none !important;
    margin: 0 !important;
    background-color: transparent !important;
}
.dashboard.mission,
.dashboard.mission .row{
    position: relative;
    z-index: 10;
}
.dashboard.mission .animate-bg::after{
    content:"";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: url(../img/bg-animate-5.gif) rgba(255,255,255,0.9) center center no-repeat;
    background-size: cover;
    opacity: 0.1;
    z-index: 0;
}
.dashboard.home .card{
    border: none !important;
}
.dashboard .card h2{
    font-size: 40px;
    line-height: 44px;
    text-shadow: 2px 2px 20px rgba(0,0,0,0.1);
    color: #202f82;
}
.dashboard .card p{
    margin-bottom: 0 !important;
    color: #5260ad !important;
}
.dashboard.home h5{
    margin: 10px 0 0 0;
    font-size: 15px;
    font-weight: 600;
    color: #111946;
}
.dashboard.home ul{
    margin: 0;
    padding: 0;
}
/* .dashboard.home ul li{
    display: block;
    width: 100%;
    font-size: 12px;
    color: #3a3f5f;
    position: relative;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-right: 20px;
}
.dashboard.home ul li .text-right{
    position: absolute;
    right: 0;
    font-weight: 600;
} */
.dashboard.home .col-md-3{
    border-left: solid 1px #f1f1f1;
}
.dashboard.home .col-md-3:first-child{
    border:none !important;
}
.dashboard.home ul.nav li{
    display: inline-block;
    width: 33.3333%;
    padding-right: 0;
}
.dashboard .value-box{
    width: calc(100% - 5px);
    height: auto;
    overflow: hidden;
    text-align: left;
    margin: 10px 0 7px 0;
    padding: 10px;
    color: #060d35;
    background-color: transparent;
    /* border-radius: 20px; */
}
.dashboard .value-box span{
    display: block;
}
.dashboard .value-box .title{
    font-size: 10px;
    font-weight: 400;
    line-height: 14px;
    color: #5e637f;
}
.dashboard .value-box .value{
    font-size: 20px;
    font-weight: bold;
    line-height: 33px;
    color: #1363f8;
    text-shadow: 0 0 15px #fff;
}
.dashboard .value-box .value.max,
.dashboard .value-box .value.min,
.dashboard .value-box .value.mid {
    font-size: 35px !important;
    line-height: 37px;
    font-weight:bolder !important;
}
.dashboard .value-box .value.max { color: #63b763 !important; }
.dashboard .value-box .value.min { color: #ff2e2e !important; }
.dashboard .value-box .value.mid { color: #1d1d69 !important; }
.dashboard h6{
    font-weight: bold;
    font-size: 14px;
}
.non-bg {
    background-color: transparent !important;
}
.dashboard .ongoing-bg{
    background: rgb(244 251 108);
    background: linear-gradient(167deg, rgb(244 251 108) 42%, rgb(232 200 163) 100%);
}
.dashboard .value-box {
    padding: 10px;
}
.dashboard .value-box .icon {
    background-color: #1363f8;
    width: 60px;
    height: 60px;
    text-align: center;
    overflow: hidden;
    border-radius: 10px;
    padding-top: 15px;
    float: left;
}
.dashboard .value-box .icon i{
    font-size: 30px;
    color: #fff;
}
.dashboard .value-box .content{
    padding-left: 70px;
    height: 100%;
}
.dashboard .value-box .content .frequency {
    margin-top: -6px;
}


/*
 Content View (Right)
 ----------------------------------------- */
.sidebar-view {
    transition: all 0.7s !important;
}
.sidebar-view.hide {
    width: 94px !important;
    min-width: 94px !important;
    max-width: 94px !important;
}
#sidebar ul li{
    /* min-width: 200px; */
}
.sidebar-view .menu-name {
    text-indent: 0;
}
/* .sidebar-view.show .menu-name {
    opacity: 1;
    display: inline-block;
}
.sidebar-view.hide .menu-name {
    opacity: 0;
    display: none;
} */
.sidebar-view a{
    position: relative;
}
.sidebar-view a .menu-name{
    position: absolute;
    transition: all 0.5s;
}
.sidebar-view.show a .menu-name {
    left: 50px !important;
    opacity: 1;
}
.sidebar-view.hide a .menu-name {
    left: 200px !important;
    opacity: 0;
}
.sidebar-view .logo img{
    position: relative;
    height: 50px;
    min-width: 160px !important;
    object-fit: fill;
    top: -5px;
}
#sidebar .logo,
.sidebar-view .logo{
    padding: 20px 16px 30px 25px;
    transition: all 0.8s !important;
    overflow: hidden;
    width: 90%;
}
#sidebar.hide .logo,
.sidebar-view.hide .logo{
    padding: 20px 0 30px 25px !important;
    width: 74px;
}

.sidebar-view.hide .logo img{
    height: 50px;
}

/*
 Content View (Right)
 ----------------------------------------- */
.content-view {
    transition: all 0.7s !important;
    overflow: hidden !important;
}
.content-view.fullwidth, header.full .header-container {
    margin-left: 94px !important;
    width: calc(100% - 95px) !important;
}
.content-view .right-box{
    border-radius: 0 0 0 40px !important;
}
.page-title {
    line-height: 20px;
    font-weight: 600;
    position: relative;
    padding: 10px 0px 10px 0;
    margin-top: 40px;
    font-size: 26px;
    font-weight: 400;
    letter-spacing: 0.02em;
}
.right-box {
    height: 99vh; 
    overflow-y: scroll;
}


/*
 Hamburger Icon
 ----------------------------------------- */

.hamburger {
    display: block;
    width: 30px;
    height: 30px;
    background-color: transparent;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 28px;
    margin: auto 0;
    transition: all 0.4s;
    overflow: hidden;
    cursor: pointer;
    padding: 6px 5px 5px 5px;
    z-index: 999;
}
.hamburger span {
    position: relative;
    display: block;
    width: 100%;
    height: 2px;
    border-radius: 2px;
    background-color: #111946;
    border-bottom: none;
    margin: 0 0 5px 0;
    transition: all 0.5s;
}
/* .hamburger span:first-child {
      transform: translateX(-10px);
}
.hamburger span:last-child {
      transform: translateX(-10px);
} */
.hamburger.hide {
    width: 30px;
}
.hamburger.show span:first-child,
.hamburger.show span:last-child {
    background-color: #111946;
}
/* .hamburger.hide span:first-child{
    transform: rotate(28deg);
    width: 10px;
    top: 4px;
    left: 8px;
}
.hamburger.hide span:last-child {
    transform: rotate(-28deg);
    width: 10px;
    top: -4px;
    left: 8px;
} */
.navbar-small .hamburger {
    top: 8px;
}

@media (max-width: 1024px) {
    .hamburger {
      display: block;
    }
}

@media (min-width: 1024px) {
    /* .hamburger {
      display: none;
    } */
}
  

/*
 Hamburger Icon
 ----------------------------------------- */

header {
    position: fixed;
    top: 0;
    right: 0;
    width: calc(100%);
    z-index: 100;
    background: #ffffff;
    box-shadow: 0 0 30px rgb(0 0 0 / 10%);
    padding: 5px;

}

header .header-container {
    transition: all 0.7s;
}


/*
 Table (Revamp)
 ----------------------------------------- */
 .table-responsive {
    background-color: #fff;
    box-shadow: 0 0 40px rgba(0,0,0,0.1);
    border-radius: 15px;
}
.table-round{
    border-radius: 15px;
    overflow: hidden;
}
.table {
    color: #091d34!important;
    margin-bottom: 0!important;
    border: 2px solid #ffffff;
}
.table th, .table td {
    border-color: #ededed !important;
}
.table tr{
    transition: all 0.4s ease-in-out;
}
.table tbody td a {
    color: #1363f8;
}
.table tbody td a:hover {
    color: #2216c6;
}

/*
 Table (Revamp)
 ----------------------------------------- */
.desc-list ul {
    margin: 0;
    padding: 0;
}
.desc-list ul li {
    display: inline-flex;
    padding-right: 15px;
}
.desc-list ul li span.uk-label{
    opacity: 0.4;
}

/*
 Input Box, Select Box, Label
 ----------------------------------------- */

.search {
    height: 40px;
    background: #fff !important;
    border: solid 1px #e1e1e1;
}
.js-upload {
    border-radius: 20px;
    border-width: 2px !important;
    overflow: hidden;
    position: relative;
    transition: all 0.3s;
}
.btn-upload, .btn-upload:hover{
    position: relative;
    background-color: #496a9c;
    margin: 0 5px;
    padding: 7px 22px;
    border-radius: 10px;
    color: #fff !important;
    text-decoration: none !important;
    z-index: 1;
    transition: all 0.3s;
}
.btn-upload:hover {
    background-color: #111946;
    text-decoration: none !important;
}
.js-upload:hover {
    border: 1px dashed #111946;
}
.icon-field {
    position: relative;
}
.icon-field i, .icon-field i:hover,
.icon-field .img, .icon-field .img:hover{
    display: block;
    position: absolute;
    left: 2px;
    top: 0;
    font-size: 16px;
    color: #111946 !important;
    width: 30px;
    height: 100%;
    background: #d2f4ff !important;
    overflow: hidden;
    padding: 18px 0 0 0;
    text-align: center;
    border-radius: 10px 0 0 10px !important;
    visibility: visible !important;
    z-index: 10;
}
.icon-field .img, .icon-field .img:hover {
    padding: 8px !important;
}
.icon-field .img img, .icon-field .img:hover img{
    width: 15px !important;
    height: 15px !important;
    margin: auto !important;
}
.icon-field label, .icon-field input{
    padding-left: 30px;
}
.icon-field input{
    padding-left: 40px;
    font-size: 15px;
}

/*
 Accordion
 ----------------------------------------- */


.uk-tab > * > a, .uk-accordion-title {
    position: relative;
    text-transform: initial !important;
    font-weight: 500;
    font-size: 13px !important;
    color: #6f6f6f !important;
    transition: all 0.4s ease-in-out !important;
    text-align: left !important;
    padding: 10px 0 !important;
}
.uk-tab > * > a::before {
    content: "";
    display: block;
    width: 15px;
    height: 15px;
    margin: 0 auto;
    background-color: #6f6f6f;
    border-radius: 50%;
    position: absolute;
    left: 0;
    top: -8px;
    right: 0;
    margin: auto;
}
.uk-tab > .uk-active > a {
    border-bottom: #1363f8 solid 1px !important;
    color: #1363f8 !important;
}
.uk-tab > * > a.no-bullet::before {
    display: none !important;
}
.uk-tab > .uk-active > a::before {
    background-color: #111946;
}
.uk-accordion-title {
    font-size: 16px !important;
    color: #111946 !important;
}
.uk-accordion li {
    /* background: #fff; */
    margin: 0;
    /* padding: 0 0 7px 0; */
    overflow: hidden;
}
.uk-accordion > :nth-child(n+2) {
    margin-top: 5px !important;
}

/*
 Rating
 ----------------------------------------- */
.rating {
    width: auto;
    height: auto;
}
.rating i{
    margin-right: 2px;
    font-size: 14px;
    color: #fed363;
}

  .rating > input { display: none; } 
  .rating > label:before { 
    margin: 5px;
    font-size: 18px;
    font-family: FontAwesome;
    display: inline-block;
    content: "\f005";
  }

  .rating > [type="radio"]:checked + label, .rating > [type="radio"]:not(:checked) + label {
    padding-left: 0 !important;
  }
  
  .rating > .half:before { 
    content: "\f089";
    position: absolute;
  }
  
  .rating > label { 
    color: #ddd; 
   float: right; 
  }
  
  /***** CSS Magic to Highlight Stars on Hover *****/
  
  .rating > input:checked ~ label, /* show gold star when clicked */
  .rating:not(:checked) > label:hover, /* hover current star */
  .rating:not(:checked) > label:hover ~ label { color: #FFD700;  } /* hover previous stars in list */
  
  .rating > input:checked + label:hover, /* hover current star when changing rating */
  .rating > input:checked ~ label:hover,
  .rating > label:hover ~ input:checked ~ label, /* lighten current selection */
  .rating > input:checked ~ label:hover ~ label { color: #FFED85;  } 


/*
 Toggle Switch
 ----------------------------------------- */

  .switches-container {
    width: 300px;
    height: 40px;
    position: relative;
    display: flex;
    padding: 0;
    position: relative;
    background: #1363f8;
    line-height: 3rem;
    border-radius: 3rem;
    box-shadow: 0 0 10px rgb(0 0 0 / 10%);
    border: solid 2px #bbc1e5 !important;
    /* margin: auto; */
  }
  .switches-container.w-150{
    width: 150px;
  }
  .switches-container.w-200{
    width: 200px !important;
    max-width: 200px !important;
  }
  
  .switches-container input {
    visibility: hidden;
    position: absolute;
    top: 0;
  }
  
  .switches-container label {
    width: 50%;
    padding: 0;
    margin: 0;
    text-align: center;
    cursor: pointer;
    color: #fff !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    vertical-align: middle;
    position: relative;
    text-transform: inherit;
    left: 0;
    top: 0;
    line-height: 30px !important;
    display: block !important;
    z-index: 1 !important;
    padding-top: 1px;
  }
  
  .switches-container .switch-wrapper {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 50%;
    padding: 1.5px 2px;
    z-index: 3;
    transition: transform .5s cubic-bezier(.77, 0, .175, 1);
  }
  
  .switches-container  .switch {
    border-radius: 3rem;
    background: #fff;
    width: 100% !important;
    height: 97%;
    top: 1.5px;
    position: relative;
    margin: -1px 0 0 0 !important;
    overflow: hidden;
    border: solid 2px rgba(0,0,0,0.1);
  }

  .switches-container  .switch div {
    width: 100%;
    height: 100%;
    text-align: center;
    opacity: 0;
    display: block;
    color: #1363f8;
    transition: opacity .2s cubic-bezier(.77, 0, .175, 1) .125s;
    will-change: opacity;
    position: absolute;
    top: 0;
    left: 0;
    font-size: 13px;
    font-weight: 600;
    line-height: 29px !important;
    transition: all 0.4s ease-in-out;
    border-radius: 3rem;
    padding-top: 1px;
  }
  
  .switches-container input:nth-of-type(1):checked~.switch-wrapper {
    transform: translateX(0%);
  }

  .switches-container input:nth-of-type(2):checked~.switch-wrapper {
    transform: translateX(100%);
  }
  
  .switches-container input:nth-of-type(1):checked~.switch-wrapper .switch div:nth-of-type(1) {
    opacity: 1;
    background-color: #fff;
  }
  
  .switches-container input:nth-of-type(2):checked~.switch-wrapper .switch div:nth-of-type(2) {
    opacity: 1;
    background-color: #fff;
    color: red;
  }

/*
 Toggle Switch
 ----------------------------------------- */

.view-ui h6.title{
    color: #0b1442;
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
}
.view-ui h6.title i{
    float: left;
    font-size: 16px;
    color: #7ea7ff;
    width: 25px;
    text-align: left;
}
.view-ui p.result{
    font-size: 14px;
    color: #1e4876;
    /* padding-left: 29px; */
}
  
.img-profile-cover {
    width: 230px;
    height: 230px;
    overflow: hidden;
    border-radius: 50%;
    /* margin: auto; */
    border: solid 5px #cdd2ef;
    box-shadow: 0 0 30px rgb(0 0 0 / 30%);
    float: left;
}

/*
 Table Responsive (with out scroll)
 ----------------------------------------- */

.vue-tel-input-wrapper {
    position: relative;
}
.vue-tel-input-wrapper label {
    position: absolute;
    top: 1px;
    left: 64px;
    color: #a8a8a8;
}
.vue-tel-input {
    border: 1px solid #f1f3ff !important;
    background: #fff !important;
    border-radius: 10px !important;
    margin-right: 10px;
    transition: all 0.4s;
}
.vue-tel-input input {
    border: none !important;
    background-color: transparent !important;
    /* padding: 0 10px; */
}
.vti__dropdown-list li {
    color: #000;
    font-weight: 400;
    padding: 7px 5px;
    position: relative;
}
.vti__dropdown-list {
    /* max-width: 100% !important; */
    z-index: 20 !important;
}
.vti__dropdown-list.below {
    top: 50px !important;
    left: 0 !important;
    max-height: 150px;
    height: 140px;
    max-width: 340px !important;
    border: solid 1px #f1f1f1;
    box-shadow: 0 0 20px rgba(0,0,0,0.1);
}
.vti__flag-wrapper {
    position: relative;
    top: 2px;
}
.vti__dropdown-list li span{
    position: absolute;
    right: 5px;
}
.vti__dropdown-list li span.vti__flag {
    left: -2px;
    top: -14px;
}
.vti__dropdown-list li strong {
    font-weight: 400 !important;
}
.vti__dropdown {
    /* padding-top: 15px !important; */
    background-color: #ffffff;
    border-radius: 10px 0 0 10px;
    transition: all 0.3s;
}
.service-provider .vti__dropdown,
.objects-to-protect .vti__dropdown {
    background: #F0F2F5 !important;
}
.vti__dropdown:hover {
    background-color: #f5f5f5;
}
input[readonly]{
    background-color:#f5f5f5 !important;
}

/*
 Cuteselect
 ----------------------------------------- */
  
  /* [data-cuteselect-item] {
      margin: 0px auto;
      color: rgb(236, 111, 102);
      width: 310px;
      padding: 15px;
      height: 50px;
      cursor: pointer;
      background: url(http://sharpik.com/wip/cuteselect/arrow.png) 295px 12px no-repeat white;
  } */
  [data-cuteselect-options] {
      display: none;
      z-index: 900;
  }
  [data-cuteselect-options],
  [data-cuteselect-options-container] {
      width: 100%;
      background: transparent;
      box-shadow: 0 10px 30px rgba(0,0,0,0.05);
          animation: growDown 0.35s;
       -webkit-animation-name: growDown;
       -webkit-animation-duration: 0.35s;
  }
  [data-cuteselect-options-container] {
      max-height: 300px;
      overflow-x: hidden;
      overflow-y: scroll;
  }
  @keyframes growDown {
    0% {
        max-height: 0;
    }
    100% {
        max-height: 300px;
    }
  }
  @-webkit-keyframes growDown {
    0% {
        max-height: 0;
    }
    100% {
        max-height: 300px;
    }
  }
  [data-cuteselect-options-container] div{
      text-align: left;
      height: 30px;
      font-size: 14px;
      background: #edf7ff;
      cursor: pointer;
      font-weight: 300;
      text-indent: 0;
      transition: all 0.22s;
  /*     border-bottom: dotted 1px #e1e1e1;
      border-top: dotted 1px #e1e1e1; */
      position: relative;
      left: 0;
      z-index: 990;
      line-height: 30px;
      padding-left: 15px;
      color: #495057;
      width: 100%;
  }
  [data-cuteselect-options-container] div:hover{
  /* 	text-indent: 20px; */
      color: #fff;
      background-color: #1897ff;
  /* 	width: 95%; */
  }
  [data-cuteselect-options-container] [data-cuteselect-value=""], [data-cuteselect-options-container] [data-cuteselect-value=""]:hover {
      color: #979797 !important;
      text-indent: 10px !important;
      font-style: italic;
      background-color: #edf7ff !important;
      left: 0 !important;
      width: 100% !important;
      display: none !important;
  }
  [data-cuteselect-title] {
      line-height: 1.5;
      color: #959ca3;
      font-size: 14px !important;
      font-weight: 400;
      text-indent: 2px;
  }
  .bg-light .ff-el-form-control,
  .bg-info .ff-el-form-control{
      background-color: transparent;
      border: none;
      border-bottom: solid 1px #717893;
      border-radius: 0px !important;
  }
  .bg-light [data-cuteselect-title],
  .bg-info [data-cuteselect-title]{
      color: #fff;
  }


/*
 Table Responsive (with out scroll)
 ----------------------------------------- */
.notice {
    width: 100%;
    padding: 0 20px;
    background-color: #ebf0f7;
    border-radius: 25px;
    line-height: 45px;
    font-family: 'Open Sans', sans-serif !important;
    letter-spacing: 0.01em;
    font-weight: 400;
    width: 100%;
    font-size: 12.5px;
}
.notice.danger {
    line-height: 25px;
    background-color: #ffe3e3;
    padding: 0 15px;
    width: fit-content;
    margin: auto;
    font-size: 12px;
}
.notice.info::before {
    content: "\f05a";
    font-family: FontAwesome;
    font-size: 20px;
    margin: 0 10px 0 0;
    position: relative;
    top: 2px;
}
.message dd::before, .message dd::after {
    content: '"';
}

/*
 Table Responsive (with out scroll)
 ----------------------------------------- */

.tbl-responsive {
    width: 100%;
}
.tbl-responsive tr:hover {
    background-color: transparent !important;
}

@media (max-width: 1200px) {
    .tbl-responsive table {
        display: grid;
    }
}
@media (max-width: 768px) {

    .tbl-responsive table thead {
        display: none;
    }
    .tbl-responsive table tbody tr,
    .tbl-responsive table tbody tr td {
        display: block;
        width: 100%;
    }
}

/*
 Mission Details
 ----------------------------------------- */

.mission-details {
    border-radius: 15px;
    background-color: transparent;
}
.mission-details .grey-box, 
.mission-details .uk-accordion li {
    background: rgb(237 237 244);
}
.mission-details .grey-box {
    padding-left: 25px !important;
    padding-right: 25px !important;
}
.mission-details h3{
    font-size: 15px;
    font-weight: 600;
    text-transform: uppercase;
    color: #111841;
}
.mission-details .grey-box h6,
.mission-dashboard h6,
.mission-dashboard span{
    display: block;
    padding: 0;
    margin: 0;
    color: #45c1f3;
    white-space: normal;
}
.mission-details span.txt,
.mission-dashboard span.txt{
    font-weight: 600;
    font-size: 15px;
}
.mission-details span.value,
.mission-dashboard span.value{
    padding: 10px 0 5px 0 !important;
    font-weight: 500;
}
.mission-details .grey-box h6, .mission-dashboard h6{
    color: #111946;
    font-weight: 500;
    letter-spacing: 0.03em;
    font-size: 13px;
}
.mission-details span.value.small{
    font-size: 12px;
    color: #1c3c9d;
}
.mission-dashboard span.value.large, .mission-dashboard span.icon{
    font-size: 30px;
    color: #cc950e;
}
.mission-dashboard span.icon {
    padding: 10px 0 5px 0 !important;
}
.mission-details .icon {
    font-size: 20px;
    color: #45c0f3;
}
.mission-details .uk-accordion-title {
    background: transparent;
    background-color: transparent;
    margin: 0;
    padding: 0;
    color: #1c3c9d !important;
    text-transform: uppercase !important;
}
.mission-details .uk-accordion li{
    border-radius: 15px;
}
.mission-details .uk-accordion-content{
    margin-top: 0 !important;
    padding: 0 14px;
    color: #111946;
    font-size: 14px;
}
.mission-details .note {
    background-color: rgba(255,255,255,0.4);
    padding: 15px 0;
    border-radius: 15px;
}

.uk-accordion-content h6.uk-text-light {
    color: #949494 !important;
}
p.uk-text-normal,
.uk-accordion-content p.uk-text-normal {
    color: #121a45;
}

/*
 Dashboard Page
 ----------------------------------------- */

 .dashboard-page {
    padding: 0;
    margin: 0;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    white-space:nowrap;
    text-align: center;
 }

 .dashboard-page li {
    display: inline-flex;
    list-style: none;
    background-color: #fff;
    width: 23%;
    min-width: 300px;
    height: 135px;
    margin: 20px 1% 20px 1%;
    padding: 15px;
    border-radius: 15px;
    box-shadow: 0 5px 10px rgba(0,0,0,0.1);
    position: relative;
    overflow: hidden;
    border:solid 1px #eaeaea;
 }
.dashboard-page.billingdash li {
    min-width: 250px;
 }
 .dashboard-page.small li {
    height: auto;
 }
 .dashboard-page li .icon i, .input-icon-box .icon i{
    display: block;
    font-size: 220px;
    position: absolute;
    left: -15%;
    top: -19%;
    color: #fff;
 }
 .dashboard-page li .icon span, .input-icon-box .icon span{
    text-transform: uppercase;
    font-weight: bold;
    font-size: 11px;
 }

 .dashboard-page li .result {
    position: absolute;
    right: 15px;
    top: 10px;
    width: 90%;
    min-width: 140px;
    height: 117px;
    text-align: left;
 }
 .dashboard-page li .result .main .title {
    float: left;
    text-transform: uppercase;
    text-align: left;
    padding-top: 4px;
 }
 .dashboard-page li .result .main .title .primary-title{
    font-size: 18px;
    font-weight: bold;
    display: block;
    line-height: 20px;
 }
 .dashboard-page li .result .main .title .sub-title{
    font-size: 10px;
    font-weight: 400;
    line-height: 10px;
    display: block;
 }
 .dashboard-page li .result .main .value {
    float: right;
    font-size: 30px;
    font-weight: bold;
    line-height: 30px;
    padding-top: 2px;
 }
 .dashboard-page li.one-value .result {
    padding-top: 32px;
 }
 .dashboard-page li.multi-value .main {
    height: 50px;
    padding-top: 15px;
 }
 .dashboard-page li.one-value .title,
 .dashboard-page li.one-value .result .main .value {
    margin-top: 5px;
 }
 .dashboard-page li.multi-value::after{
    content: "";
    display: block;
    width: 100%;
    height: 47px;
    background-color: rgba(255,255,255,0.6);
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 0;
 }
 .dashboard-page li.multi-value .sub {
    padding-top: 5px;
    width: 50%;
    position: absolute;
    bottom: 0;
    z-index: 1;
 }
 .dashboard-page li.multi-value .sub.text-left {
    left: 0;
 }
 .dashboard-page li.multi-value .sub.text-right {
    right: 0;
 }
 .dashboard-page li.multi-value .sub .title{
    font-size: 11px;
    line-height: 11px;
    text-transform: uppercase;
 }
 .dashboard-page li.multi-value .sub .value{
    font-size: 14px;
    font-weight: 500;
    line-height: 14px;
    position: relative;
    top: -4px;
    display: block;
 }
 .dashboard-page .uk-grid > * {
    padding-left: 0 !important;
 }
 .dashboard-page .uk-grid {
    margin-left: 0 !important;
 }


 .dashboard-page li.default{
    background-color: #ccdbff;
 }
 .dashboard-page li.default .result .main .title,
 .dashboard-page li.multi-value.default .sub .title,
 .dashboard-page li.default .value {
    color: #111946 !important;
 }
 .dashboard-page li .result .main .title {
    color: #232323;
 }

 .dashboard-page li.default.blue{
    background-color: rgba(46,82,120,1);
    background: linear-gradient(-90deg, rgba(46,82,120,1) 42%, rgba(25,46,86,1) 100%);
 }
 .dashboard-page.billingdash li.default.blue {
    transition: all ease 0.3s;
 }
 .dashboard-page.billingdash li.default.blue:hover {
    background-color: rgb(34, 62, 92);
    background: linear-gradient(-90deg, rgb(37, 66, 97) 42%, rgb(16, 35, 69) 100%);
 }
 .dashboard-page.billingdash li.default.blue{
    cursor: pointer;
 }
 .dashboard-page li.default.blue .result .main .title,
 .dashboard-page li.multi-value.default.blue .sub .title,
 .dashboard-page li.default.blue .value {
    color: #fff !important;
 }
 .dashboard-page li.default.blue .icon i, .input-icon-box .icon i{
    color: rgba(255,255,255,0.1);
 }
 .dashboard-page li.pending{
    background-color: #ffecdb;
 }
 .dashboard-page li.pending .result .main .title,
 .dashboard-page li.multi-value.pending .sub .title,
 .dashboard-page li.pending .value {
    color: #fda448 !important;
 }

 .dashboard-page li.ongoing{
    background-color: #e0dff8;
 }
 .dashboard-page li.ongoing .result .main .title,
 .dashboard-page li.multi-value.ongoing .sub .title,
 .dashboard-page li.ongoing .value {
    color: #665dda !important;
 }

 .dashboard-page li.completed{
    background-color: #d5f1eb;
 }
 .dashboard-page li.completed .result .main .title,
 .dashboard-page li.multi-value.completed .sub .title,
 .dashboard-page li.completed .value {
    color: #29bb9d !important;
 }
 

 .dashboard-page li.cancel{
    background-color: #ffe3e3;
 }
 .dashboard-page li.cancel .result .main .title,
 .dashboard-page li.multi-value.cancel .sub .title,
 .dashboard-page li.cancel .value {
    color: #fd7173 !important;
 }
 .dashboard-page li .result .main .value.border{
    width: 120px;
    border: solid 1px #fff !important;
    font-size: 20px;
    text-align: left;
    padding: 6px 10px;
 }
 .dashboard-page.billingdash li .result .main .value.border{
    width: 100px;
 }

 .dashboard-page.small li {
    margin: 20px 0 20px 2%;
 }
 .dashboard-page.small li .result {
    position: relative;
    height: auto;
    padding: 5px 0 !important;
    margin: 0 !important;
    top: 0;
 }
 .dashboard-page.small li .result .main .title {
    margin: 0 !important;
    padding: 0 20px !important;
 }
 .dashboard-page.small li .icon i {
    top: -109%;
    opacity: 0.7;
 }
 .dashboard-page.small li.default.warning {
    background-color: #fff4e9;
 }
 .dashboard-page.small li.warning .result .main .title,
 .dashboard-page.small li.multi-value.warning .sub .title,
 .dashboard-page.small li.warning .value {
    color: #fda448 !important;
 }
 .dashboard-page.small li.default.danger {
    background-color: #fedbdb;
 }
 .dashboard-page.small li.danger .result .main .title,
 .dashboard-page.small li.multi-value.danger .sub .title,
 .dashboard-page.small li.danger .value {
    color: #e55356 !important;
 }

 /*
 Form Group Icon
 ----------------------------------------- */
 .form-group.with-icon{
    position: relative;
 }
 .form-group.with-icon label {
    padding-left: 0;
 }
 .form-group.with-icon input{
    padding-right: 33px;
 }
 .form-group.with-icon i{
    position: absolute;
    right: 20px;
    top: 0;
    color: #1362f8;
    line-height: 50px;
    z-index: 10;
    font-size: 16px;
 }

 /*
 Preview File
 ----------------------------------------- */

.preview-file {
    position: relative;
    width: 100%;
}
.preview-file .input-group{
    width: 100%;
    height: 50px;
    display: block;
    background-color: #fff;
    border:solid 1px #e1e1e1;
    border-radius: 10px;
    position: relative;
    overflow: hidden;
}
.preview-file .input-group .form-group{
    width: 50%;
    display: inline-flex;
    float: left;
}
.preview-file .input-group input, .preview-file .input-group select,
.preview-file .input-group input:hover, .preview-file .input-group select:hover,
.preview-file .input-group input:focus, .preview-file .input-group select:focus {
    height: 50px !important;
    border: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
}
.preview-file .input-group select {
    border-left: solid 1px #e1e1e1 !important;
}
.preview-file .input-group input{
    padding-top: 7px;
}
.preview-file .file a{
    width: 100% !important;
}
.preview-file img{
    max-width: 100px;
    width: 100%;
}


/*
 Vehicle & Transportation
 ----------------------------------------- */
 .vehicle-wrapper {
    padding-right: 17px;
 }
 .vehicle-wrapper .vehicle{
    width: 100%;
    height: auto;
    padding: 10px;
    background-color: #fff;
    box-shadow: 0 0 30px rgba(0,0,0,0.1);
    overflow: hidden;
    border-radius: 12px;
 }

 .vehicle-wrapper .vehicle .img-wrapper {
    max-width: 200px;
    float: left;
    display: inline;
    margin-right: 10px;
 }
 .vehicle-wrapper .vehicle .img-wrapper img {
    border: solid 1px #2673f8;
 }

 
 .vehicle-wrapper .vehicle .content {
    padding-left: 20px;
 }
 .vehicle-wrapper .vehicle .content .label {
    padding: 10px 0;
 }
 .vehicle-wrapper .vehicle .content .uk-label {
    padding: 6px 14px;
    background: #dde4f2;
    color: #1362f8;
    font-weight: 500;
 }
 .vehicle-wrapper .vehicle .content p.value {
    padding: 10px 0 0 0;
    margin-left: -5px;
    font-size: 13px;
    color: #1362f8;
    font-weight: 500;
    text-transform: uppercase;
 }

 .transportation-input .line{
    margin: 0 !important;
    position: absolute;
    left: -50px;
    top: 23px;
    width: 100px;
    border-bottom: 3px dotted #2b4e74;
    z-index: 0;
 }
 .transportation-input input.border-blue,
 .transportation-input input.border-blue:hover,
 .transportation-input input.border-blue:focus,
 .transportation-input input.border-blue:active {
    border: solid 1px #dae1e8 !important;
 }


 /*
 Input Icon Box
 ----------------------------------------- */
 .input-icon-box {
    width: 100%;
    height: 130px;
    padding: 15px;
    border-radius: 15px;
    background-color: #fff;
    box-shadow: 0 0 30px rgba(0,0,0,0.1);
    border:solid 1px #f1f1f1;
 }

 .input-icon-box .icon {
    position: relative;
    left: 0;
    top: 0;
    float: left;
    width: 40%;
    background-color: #192f57;
    color: #fff;
 }
 .input-icon-box .icon span {
    display: block;
    line-height: 14px !important;
 }
 .input-icon-box .icon .img-icon{
    display: block;
    width: 40px;
    height: 40px;
    margin: 0 auto 5px auto;
 }
 .input-icon-box .icon .img-icon.male-bodyguard-icon{
    background: url(../img/icon/bodyguard-male-icon.png) center center no-repeat;
    background-size: 100%;
 }
 .input-icon-box .icon .img-icon.female-bodyguard-icon{
    background: url(../img/icon/bodyguard-female-icon.png) center center no-repeat;
    background-size: 100%;
 }
 .input-icon-box .icon .img-icon.armed-bodyguard-icon{
    background: url(../img/icon/bodyguard-armed-icon.png) center center no-repeat;
    background-size: 100%;
 }
 .input-icon-box .icon .img-icon.vehicle-icon{
    background: url(../img/icon/vehicle-icon.png) center center no-repeat;
    background-size: 100%;
 }
 .input-icon-box .form-group {
    width: 60%;
    float: right;
    margin-top: 25px;
 }


/*
 Radio Effect
 ----------------------------------------- */

 label.form_radio {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: nowrap;
    margin: 12px 0 0 0;
    padding-left: 5px;
    cursor: pointer;
    position: relative !important;
    z-index: 0;
}
label.form_radio input {
    opacity: 0;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;
}
label.form_radio .design {
    width: 20px;
    height: 20px;
    border: 2px solid #d1d1d1;
    border-radius: 100%;
    display: block;
    align-items: center;
    align-content: center;
    justify-content: center;
    transition: all 0.3s;
    position: absolute;
    left: -10px;
}
label.form_radio .text {
    padding-left: 10px;
    line-height: 25px;
    transition: all 0.3s;
}
label.form_radio:hover .design {
    border: 2px solid #3778f1 !important;
}
label.form_radio .design::before,
label.form_radio .design::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  position: absolute;
  transform: scale(0);
  transform-origin: center center;
  background: #1363f8;
}

label.form_radio .design:before {
    background: #1363f8;
    opacity: 1;
    transition: .3s;
}
label.form_radio input[type="checkbox"] ~ .design {
    border-radius: 5px;
    width: 18px;
    height: 18px;
}
label.form_radio input[type="checkbox"] ~ .design::before,
label.form_radio input[type="checkbox"] ~ .design::after {
    border-radius: 2px !important;
    background-color: #29BB9C;
}

label.form_radio input:checked+.design::before {
    opacity: 1;
    transform: scale(.7);
}
label.form_radio input:hover+.design,
input:focus+.design {
    border: 2px solid #d1d1d1;
}

label.form_radio input:hover+.design:before,
input:focus+.design:before {
    background: #1363f8;
}

label.form_radio input:hover~.text {
    color: #787878;
}
label.form_radio input:focus ~ .design::after,
label.form_radio input:active ~ .design::after {
    -webkit-animation: click-wave 0.65s;
    -moz-animation: click-wave 0.65s;
    animation: click-wave 0.65s;
    transform: scale(1);
    opacity: 0;
}
label.form_radio input:focus ~ .design,
label.form_radio input:active ~ .design,
label.form_radio input:checked ~ .design {
    border: 2px solid #a6c5ff !important;
}
label.form_radio input:checked ~ .text {
    color: #1363f8;
}
@keyframes click-wave {
    0% {
      opacity: 1;
      transform: scale(0);
    }
    100% {
      transform: scale(3);
      opacity: 0;
    }
  }



.mission-location-field, .mission-calendar-field {
    position: relative;
}
.mission-location-field .location-icon::before,
.mission-calendar-field .calendar-icon::before {
    content: "\f3c5";
    font-family: FontAwesome;
    position: absolute;
    left: -20px;
    top: 15px;
    font-size: 18px;
    line-height: 18px;
    color:#1362f8;
    width: 18px;
    height: 18px;
    text-align: center;
    border-radius: 20%;
    background-color: #fff;
    display: block;
    z-index: 10;
    opacity: 0.4;
}
.mission-location-field .location-icon::after,
.mission-calendar-field .calendar-icon::after{
    content: "";
    position: absolute;
    left: -12px;
    top: -70%;
    width: 1px;
    height: 100%;
    border-left: dashed 2px #979797;
    z-index: 0;
}
.mission-location-field:nth-child(1) .location-icon::after,
.mission-calendar-field:nth-child(1) .calendar-icon::after{
    visibility: hidden;
}
.mission-calendar-field .calendar-icon::before{
    content: "\f073";
    font-family: FontAwesome;
    left: -35px;
}
.mission-calendar-field .calendar-icon::after {
    left: -27px;
}

.form-group.select-dropdown {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
    position: relative !important;
}
.form-group.calendar::after,
.form-group.select-dropdown::after,
.form-group.clock::after {
    content: "\f073";
    font-family: FontAwesome;
    position: absolute;
    right: 18px;
    top: 12px;
    font-size: 13px;
    color: #656565;
    z-index: 12;
}
.form-group.select-dropdown::after {
    content: "\f107";
    top: 0 !important;
    display: block;
    margin: auto;
    bottom: 0 !important;
    width: 13px;
    height: 13px;
    line-height: 13px;
    right: 12px;
}
.form-group.clock::after {
    content: "\f017";
}
.select-gradient-bg .select-dropdown select, .select-gradient-bg .select-dropdown::after{
    color: #fff !important;
}
.select-gradient-bg .select-dropdown:nth-child(1) select,
.dashboardcode-bsmultiselect-large .form-control li.badge:nth-child(1){
    background-color: #102c45 !important;
}
.select-gradient-bg .select-dropdown:nth-child(2) select,
.dashboardcode-bsmultiselect-large .form-control li.badge:nth-child(2){
    background-color: #0d365c !important;
}
.select-gradient-bg .select-dropdown:nth-child(3) select,
.dashboardcode-bsmultiselect-large .form-control li.badge:nth-child(3){
    background-color: #0b4b85 !important;
}
.select-gradient-bg .select-dropdown:nth-child(4) select,
.dashboardcode-bsmultiselect-large .form-control li.badge:nth-child(4){
    background-color: #0d579b !important;
}
.select-gradient-bg .select-dropdown:nth-child(5) select,
.dashboardcode-bsmultiselect-large .form-control li.badge:nth-child(5){
    background-color: #0c5ea9 !important;
}
.select-gradient-bg .select-dropdown:nth-child(6) select,
.dashboardcode-bsmultiselect-large .form-control li.badge:nth-child(6){
    background-color: #126fc3 !important;
}
.select-gradient-bg .select-dropdown:nth-child(7) select,
.dashboardcode-bsmultiselect-large .form-control li.badge:nth-child(7){
    background-color: #1379d5 !important;
}
.select-gradient-bg .select-dropdown select:hover,
.dashboardcode-bsmultiselect-large .form-control li.badge:hover{
    background-color: #0d63f8 !important;
}

.uk-accordion-title.with-bg {
    background: linear-gradient(-90deg, rgba(46,82,120,1) 42%, rgba(25,46,86,1) 100%);
    color: #fff !important;
}
select.bg-blue {
    background-color: #e6f2ff !important;
}
select.bg-red, select.bg-red:hover, select.bg-red:active, select.bg-red:focus {
    background-color: #fd7173 !important;
}
select.text-white, select.text-white:hover, select.text-white:active, select.text-white:focus,
.form-group.select-dropdown.text-white::after{
    color: #fff !important;
}

.uk-accordion li.with-border {
    border:solid 1px #d8e4f0;
    border-radius: 15px;
    background-color: #fafafa;
}
.uk-accordion li.with-border .uk-accordion-title {
    border-radius: 14px 14px 0 0;
    margin-right: 0px;
}

fieldset {
    border: solid 1px #f2f2f2 !important;
    border-radius: 15px;
    background: #fafafa;
}

/*
 Multi Selection
 ----------------------------------------- */
 .dashboardcode-bsmultiselect, .dashboardcode-bsmultiselect-large {
    transition: all 0.3s !important;
    border: solid 1px transparent;
    height: 50px;
 }
 .dashboardcode-bsmultiselect:hover,
 .dashboardcode-bsmultiselect-large:hover {
    /* border: solid 1px #e1e1e1;
    border-radius: 10px; */
 }
.dashboardcode-bsmultiselect .dropdown-menu,
.dashboardcode-bsmultiselect-large .dropdown-menu{
    margin: 0 !important;
    padding: 0 !important;
    /* top: 20px !important; */
    top: 50px !important;
    width: 90%;
    position: absolute !important;
    left: 8px !important;
    transform: inherit !important;
}
.dashboardcode-bsmultiselect .dropdown-menu ul,
.dashboardcode-bsmultiselect-large .dropdown-menu ul{
    overflow-y: auto;
    max-height: 250px;
}
.dashboardcode-bsmultiselect .dropdown-menu ul li,
.dashboardcode-bsmultiselect-large .dropdown-menu ul li {
    display: block;
    list-style: none;
    width: 100%;
    height: 40px;
    padding-left: 0 !important;
    margin-left: 0 !important;
    position: relative;
    word-spacing: normal;
    white-space: nowrap;
}
.dashboardcode-bsmultiselect .dropdown-menu ul li .form-check,
.dashboardcode-bsmultiselect .dropdown-menu ul li .form-check label,
.dashboardcode-bsmultiselect-large .dropdown-menu ul li .form-check,
.dashboardcode-bsmultiselect-large .dropdown-menu ul li .form-check label {
    position: absolute;
    left: 0;
    top: 0;
    line-height: 40px;
    width: 100%;
    height: 100%;
    display: block;
}
.dashboardcode-bsmultiselect .dropdown-menu ul li .form-check label,
.dashboardcode-bsmultiselect-large .dropdown-menu ul li .form-check label {
    padding: 0 10px;
    font-size: 12px;
}
.dashboardcode-bsmultiselect .dropdown-menu ul li .form-check [type="checkbox"]:checked ~ label,
.dashboardcode-bsmultiselect-large .dropdown-menu ul li .form-check [type="checkbox"]:checked ~ label {
    background-color: #edf3ff !important;
    color: #1897ff !important;
}
.dashboardcode-bsmultiselect .dropdown-menu ul li .form-check [type="checkbox"]:not(:checked) ~ label,
.dashboardcode-bsmultiselect-large .dropdown-menu ul li .form-check [type="checkbox"]:not(:checked) ~ label {
    background-color: #fff !important;
    color: #000 !important;
}
.dashboardcode-bsmultiselect .form-control,
.dashboardcode-bsmultiselect-large .form-control {
    height: 50px !important;
    width: 100%;
    border: solid 1px #f1f3ff;
    background: #fff !important;
    border-radius: 10px;
    padding: 6px 8px;
    position: relative;
    overflow: hidden;
}
.dashboardcode-bsmultiselect .dropdown-menu ul li .form-check label::after,
.dashboardcode-bsmultiselect-large .dropdown-menu ul li .form-check label::after {
    content: "\f058";
    font-family: FontAwesome;
    position: absolute;
    right: 5px;
    visibility: hidden;
    color: #1897ff !important;
    font-size: 14px;
}
.dashboardcode-bsmultiselect .dropdown-menu ul li .form-check [type="checkbox"]:checked ~ label::after,
.dashboardcode-bsmultiselect-large .dropdown-menu ul li .form-check [type="checkbox"]:checked ~ label::after {
    visibility: visible;
}
.dashboardcode-bsmultiselect .form-control li input[type="search"],
.dashboardcode-bsmultiselect-large .form-control li input[type="search"] {
    caret-color: transparent;
}
.dashboardcode-bsmultiselect .form-control li.badge,
.dashboardcode-bsmultiselect-large .form-control li.badge {
    background-color: #ebf0f7;
    margin: 13px 5px 0 0;
    min-width: fit-content;
    display: inline-flex;
    border: solid 1px #e3e7eb;
}
.dashboardcode-bsmultiselect .form-control li.badge:hover,
.dashboardcode-bsmultiselect-large .form-control li.badge:hover {
    background-color: #ddeafd;
}
.dashboardcode-bsmultiselect .form-control li.badge span,
.dashboardcode-bsmultiselect-large .form-control li.badge span{
    padding: 0 10px;
    color: #1363f8;
    text-transform: uppercase;
}
.dashboardcode-bsmultiselect .form-control li.badge button.btn-close,
.dashboardcode-bsmultiselect-large .form-control li.badge button.btn-close {
    border: none !important;
    background-color: transparent;
    outline: none !important;
    font-size: 10px !important;
    padding: 0;
    margin-right: 2px;
}
.dashboardcode-bsmultiselect .form-control li.badge button.btn-close::after,
.dashboardcode-bsmultiselect-large .form-control li.badge button.btn-close::after {
    content: "\f00d";
    font-family: FontAwesome;
    color: #1363f8;
}

.dashboardcode-bsmultiselect-large .form-control li.badge {
    margin: 0 5px 0 0;
    padding: 5px !important;
    border-radius: 8px;
}
.dashboardcode-bsmultiselect-large .form-control li.badge span {
    font-size: 11.5px !important;
}
.dashboardcode-bsmultiselect-large .form-control li.badge span,
.dashboardcode-bsmultiselect-large .form-control li.badge button.btn-close::after {
    color: #fff;
}


/*
 Notification Box
 ----------------------------------------- */

.notification-box {
    margin: 10px 0;
    width: 95%;
    min-height: auto;
    border-radius: 15px;
    border: solid 1px #bec8d1;
    position: relative;
    padding: 5px 0;
    transition: all 0.3s;
    background-color: transparent
}
.notification-box:hover {
    background-color: #f0f0ff;
}
.notification-box .switch {
    position: relative !important;
    left: auto;
    right: 20px;
    top: 0;
}

.notification-box h6 {
    font-size: 12px;
    margin: 14px 0 0 25px;
    font-weight: 700;
    text-align: center;
}

.notification-box label.uk-form-label {
    top: 9px !important;
    font-size: 12px;
    text-transform: initial !important;
    border-left: solid 1px #bec8d1;
    padding-left: 15px;
    line-height: 25px;
}


/*
  SERVICE TABS
 ----------------------------------------- */

 .service-tabs{
    width: 100%;
    display: block;
    margin: 30px auto -10px auto;
    position: relative;
    z-index: 90;
}
.service-tabs ul {
    width: 100%;
    display: block;
    text-align: right;   
    padding-right: 10px;
    background-color: transparent;
    white-space:nowrap;
    overflow-y: hidden;
    overflow-x: auto;

}
.service-tabs ul li {
    position: relative;
    display: inline-block;
    min-width: 100px;
    text-align: center;
    margin: 10px 0 0px -10px;
}
.service-tabs ul li a,
.service-tabs ul li dd {
    display: block;
    width: 100%;
    padding-right: 70px;
    padding-left: 25px;
    padding-bottom: 10px;
    background-color: #ebf0f7;
    box-shadow: 0 -3px 7px rgba(0,0,0,.05);
    border-radius: 8px 8px 0 0;
    margin-right: 10px;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 11px;
}
.service-tabs ul li a {
    color: #7c7f80;
}
.service-tabs ul li dd {
    color: #bdbdbe;
}
.service-tabs ul li:first-child a,
.service-tabs ul li:first-child dd {
    padding-right: 15px;
    padding-left: 20px;
}
.service-tabs ul li a.active {
    background-color: #fff;
    color: #363636;
}
.service-tabs ul li label.switch {
    position: absolute;
    right: 15px;
    top: 0;
    width: 44px;
    height: 22px;
}
.service-tabs ul li label.switch .slider:before {
    height: 16px;
    width: 16px;
    left: 3px;
}
.service-tabs ul li label.switch input:checked + .slider:before {
    transform: translateX(20px);
}
.service-tabs ul li:has(> a.active) {
    z-index: 120 !important;
}
.service-tabs ul li:first-child {
    z-index: 110;
}
.service-tabs ul li:nth-child(2) {
    z-index: 109;
}
.service-tabs ul li:nth-child(3) {
    z-index: 108;
}
.service-tabs ul li:nth-child(4) {
    z-index: 107;
}
.service-tabs ul li:nth-child(5) {
    z-index: 106;
}
.service-tabs ul li:nth-child(6) {
    z-index: 105;
}
.service-tabs ul li:nth-child(7) {
    z-index: 104;
}
.service-tabs ul li:nth-child(8) {
    z-index: 103;
}

/*
  Physical Information > Body Type
 ----------------------------------------- */

.form_radio.bodytype {
    background-color: #ebf0f7;
    border-radius: 8px;
    padding: 10px 15px;
    height: 60px;
}
label.form_radio.bodytype .design {
    left: 20px;
}
label.form_radio.bodytype .text {
    width: 100%;
    font-size: 13px;
    color: #1363f8;
    text-align: right;
    padding-right: 20px;
}
.form_radio.bodytype .text::before {
    content: "";
    display: block;
    width: 13px;
    height: 50px;
    position: absolute;
    z-index: 1;
    top: 5px;
    left: -25px;
    right: 0;
    margin: auto;
    background: url(../img/icon/body.svg) center center no-repeat;
    background-size: 100%;
}

.form_radio.bodytype:has(> input[type="radio"]:checked) {
    background-color: #1363f8;
}
.form_radio.bodytype input[type="radio"]:checked ~ .design::before {
    background-color: #fff !important;
}
.form_radio.bodytype input[type="radio"]:checked ~ .text {
    color: #fff !important;
}
.form_radio.bodytype input[type="radio"]:checked ~ .text::before {
    filter: brightness(0) invert(1);
}

/*
  MORE
 ----------------------------------------- */
.checkbox-btn-wrapper {
    position: relative;
}
.checkbox-btn-wrapper input[type="checkbox"] { 
    display: none;
}
.checkbox-btn-wrapper label {
    display: inline-block;
    background-color: #1363f8;
    color: #fff;
    padding: 5px 10px;
    border: solid 1px #1363f8;
    position: relative !important;
    border-radius: 7px;
    text-transform: uppercase;
    font-weight: 600 !important;
    margin: 0 5px 0 0 !important;
    padding: 5px 25px 5px 20px;
    font-size: 12px;
    cursor: pointer;
    left: 0 !important;
    top: 0 !important;
}
.checkbox-btn-wrapper input[type="checkbox"] + label {
    background-color: #fff;
    color: #797979;
    border: solid 1px #c1c2c8;
    padding: 5px 20px;
}
.checkbox-btn-wrapper input[type="checkbox"]:checked + label {
    background-color: #1363f8;
    color: #fff;
    border: solid 1px #1363f8;
}
.checkbox-btn-wrapper label .uk-close svg {
    color: #fff;
    width: 10px;
    position: absolute;
    right: 8px;
    top: 8px;
}

/*
  MORE
 ----------------------------------------- */

.chartdonut-wrapper {
    margin: -100px 0;
}
.chartdonut-wrapper #customer-chart {
    transform: scale(0.6, 0.6);
}

.btn-setting {
    background-color: transparent;
    border:solid 1px #0554c0;
    color: #0554c0!important;
    padding: 10px 15px;
    height: 45px;
    font-size: 13px;
    border-radius: 15px;
    line-height: 20px;
    width: 175px;
}
.btn-setting:hover {
    background-color: #0554c0;
    color: #fff!important;
}

.notes-inline::before {
    content: "\f111";
    font-family: FontAwesome;
    font-size: 5px;
    position: relative;
    top: -2px;
}
.note-style,
.grey-box textarea.note-style {
    border: dashed 2px #d0def3 !important;
    background: #e9f2ff !important;
}
.grey-box textarea.note-style:focus,
.grey-box textarea.note-style:active {
    background: #fff !important;
}

.chart-wrapper {
    background-color: #fff;
    border-radius: 15px;
    box-shadow: 0 0 30px rgba(0,0,0,0.06);
}
.chart-wrapper .chart canvas {
    height: 400px !important;
}
.chart-wrapper [class*='uk-inline'] {
    display: inline-flex !important;
}


#daterange_start,
#daterange_stop {
    transition: all 0.3s;
    float: right;
    width: 80% !important;
}
#daterange_start:focus,
#daterange_start:active,
#daterange_stop:focus,
#daterange_stop:active {
    width: 100% !important;
    text-indent: 43px;
    border-color: #999 !important;
}
.grey-box .uk-inline .uk-form-icon {
    right: 7px !important;
}

#vmap{
    width: 100%;
    height: 400px;
    position: relative;
    overflow: hidden;
    background-color: transparent;
}

#vamp svg {
    width: 100%;
    height: 100%;
    margin: auto;
}


.avatar-list a {
    position: relative;
    display: inline-flex;
    margin-left: -10px;
}
.avatar-list a:nth-child(1) {
    margin-left: 0;
    z-index: 4;
}
.avatar-list a:nth-child(2) {
    z-index: 3;
}
.avatar-list a:nth-child(3) {
    z-index: 2;
}
.avatar-list a:nth-child(4) {
    z-index: 1;
    border-radius: 50%;
    background-color: #000;
}
.avatar-list a:nth-child(4) img {
    opacity: 0.4;
}
.avatar-list a img {
    border: solid 2px #fff;
}
.avatar-list a:nth-child(4) span.left-total {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    text-align: center;
    line-height: 50px;
    color: #fff;
    font-weight: 700;
}
img.uk-border-circle {
    border-radius: 50%;
    width: 50px;
    height: 50px;
    object-fit: cover;
    transform: scale(1,1);
    transition: all 0.3s;
}
img.uk-border-circle:hover {
    transform: scale(1.1,1.1);
}
.ql-editor {
    color: #0a0a0a !important;
}



#calendar .ui-datepicker {
	width: 100% !important;
}

.ui-datepicker-calendar td.booked a {
	background-color: #1362f8;
	border-radius: 7px;
	color: #fff;
	font-weight: 700;
}

/* #calendar .ui-datepicker-calendar td a {
    border: solid 2px #fff;
	margin: 5px 5px 0 0;
} */
.ui-state-default,
.ui-widget-content .ui-state-default {
	font-size: 14.5px;
}

.ui-datepicker table tbody {
	margin-top: 5px;
}

.ui-datepicker {
	border-radius: 12px;
}

.ui-datepicker th {
	padding: 0.8em 0.3em;
	text-align: center;
	font-weight: 600;
	font-size: 13px;
	color: #000000;
	border: 0;
}

span.balance-down {
	color: #e75252;
}

span.balance-up {
	color: #3ea76c;
}

span.balance-down::before,
span.balance-up::before {
	content: "";
	font-family: FontAwesome;
	margin-right: 5px;
	font-size: 8px;
	position: relative;
	top: -1px;
	line-height: 14px;
}

span.balance-down::before {
	content: "\f068";
}

span.balance-up::before {
	content: "\f067";
}

.save-btn.sendmail-btn,
.save-btn.download-btn {
	text-transform: capitalize;
	font-size: 12px !important;
}

.save-btn.sendmail-btn {
	background: transparent;
	border: solid 1px #0B63F8 !important;
	color: #0B63F8 !important;
}


.save-btn.download-btn {
	background-color: #69aaeb;
}

.save-btn.download-btn:hover {
	background-color: #4788c9;
}

.save-btn.sendmail-btn:hover {
	background-color: #253172;
	color: #fff !important;
}

fieldset {
	border: solid 1px #dadada;
	border-radius: 15px;
	background: #fafafa;
}
.rating .grey-box {
    box-shadow: 2px 5px 6px rgba(0, 0, 0, 0.1) !important;
}

.mission .filter li a {
    margin: auto;
    padding: 15px 40px;
}
.side-title {
    margin-top: 15px;
    color: #7b8a9e;
    font-weight: 600;
    padding: 0 15px;
    margin-bottom: 7px;
    font-size: 13px;
}
.availablecars {
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    border-radius: 0.75rem;
    height: 48px;
    width: 48px;
    transition: all 0.2s ease-in-out;
    width: 200px !important;
    height: auto !important;
    font-size: 0.875rem;
}
.car-list {
    padding-left: 0;
    margin-top: 5px;
}
.register {
    display: block;
    padding: 2rem;
  }
  .register-icon {
    display: flex;
    background: #fff;
    border-radius: 2rem;
    width: 150px;
    height: 150px;
    padding: 1rem;
    margin: -50px auto 20px;
  }
  .register-icon-item {
    width: 100%;
  }
  .register-title {
    font-weight: 300;
    font-size: 1.5rem;
    text-transform: uppercase;
    letter-spacing: 0.2rem;
    text-align: center;
    color: #fff;
    padding: 0 2rem;
    margin-top: 2rem;
  }
  .register-stepper {
    display: flex;
    justify-content: space-between;
    width: 100%;
    position: relative;
    margin: 0 auto 1.5em;
  }
  .register-stepper::before {
    z-index: 0;
    content: "";
    display: block;
    position: absolute;
    height: 2px;
    top: calc(50% - 1px);
    background: #cecece;
    width: calc(100% - 20px);
  }
  .register-stepper .step {
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
    border: 2px solid #cecece;
    color: #cecece;
    background-color: #fff;
    border-radius: 50%;
    min-width: 25px;
    min-height: 25px;
    line-height: 20px;
    font-size: 16px;
  }
  .register-stepper .step-active {
    color: #fff;
    background-color: #163f6c;
    border-color: #163f6c;
  }
  .register-stepper .step-done {
    color: #163f6c;
    border-color: #163f6c;
  }
  .register-stepper .step-number {
    font-family: "Montserrat", sans-serif;
    font-weight: 800;
    line-height: 1;
    vertical-align: middle;
  }
  .register .form-group {
    display: flex;
    flex-flow: row;
    justify-content: flex-start;
    align-items: baseline;
  }
  .register .form-group input[type=radio] {
    position: relative;
    top: 2px;
  }
  .register .form-group.cta-step {
    color: #fff;
    justify-content: space-between;
  }
  /* .register .form-group.cta-step .cta.prev a {
    padding-left: 30px;
  } */
  .register .form-group.new-password {
    margin-top: 2rem;
  }

  .register .form .cta-color .link_wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    color: #fff;
  }
  .register .form .cta-color .link_wrap .arrow-prev {
    position: relative;
    display: inline-block;
    transform: translate(0);
    transition: transform 0.3s ease-in-out;
  }
  .register .form .cta-color .link_wrap .arrow-prev::before {
    content: "<";
    position: absolute;
    top: -10px;
    left: -10px;
  }
  .register .form .cta-color .link_wrap .arrow-next {
    position: relative;
    display: inline-block;
    transform: translate(0);
    transition: transform 0.3s ease-in-out;
    z-index: 10;
  }
  .register .form .cta-color .link_wrap .arrow-next::before {
    content: ">";
    position: absolute;
    top: -13px;
    left: -25px;
  }
  .register .form .cta-color .link_wrap:hover .arrow-prev {
    transform: translate(-5px);
  }
  .register .form .cta-color .link_wrap:hover .arrow-next {
    transform: translate(5px);
  }
  .register input[type=submit] {
    cursor: pointer;
    position: relative;
    padding-right: 30px!important;
    width: fit-content!important;
    padding-top: 0;
    height: 36px;
  }
  .register input[type=submit]:hover, .register input[type=submit]:focus {
    box-shadow: unset;
    transform: none;
  }
  .register input[type=submit]::after {
    content: "";
    display: block;
    position: absolute;
    right: 0;
    top: 50%;
    border-radius: 50px;
    border: 1px solid #00c4b5;
    height: 25px;
    width: 25px;
    margin-top: -14px;
    pointer-events: none;
    transition: all 0.33s cubic-bezier(0.12, 0.75, 0.4, 1);
  }
  .register .slide-fade-enter-active {
    transition: all 0.3s ease;
  }
  .register .slide-fade-leave-active {
    display: none;
    transition: all 0.4s cubic-bezier(1, 0.5, 0.8, 1);
  }
  .register .slide-fade-enter, .register .slide-fade-leave-to {
    transform: translateX(10px);
    opacity: 0;
  }
.btn-default {
    background: #fff;
    color: #757171!important;
    border-color: #cbc9c9;
}
.save-btn {
    background-color: #29bb9d!important;
    background: #29bb9d!important;
}
.save-btn:hover {
    background-color: #1e967e!important;
    background: #1e967e!important;
}
.grey-box .next-btn {
    background-color: #29bb9d!important;
    background: #29bb9d!important;
    color: #fff!important;
}
.grey-box .next-btn:hover {
    background-color: #1e967e!important;
    background: #1e967e!important;
}
.grey-box .prev-btn {
    background-color: #fff!important;
    background: #fff!important;
    border: 1px solid #dbdbdb;
    color: #484b5d!important;
}
.grey-box .prev-btn:hover {
    background-color: #fff!important;
    background: #fff!important;
}
.label-detail {
    font-weight: 600;
    margin-bottom: 0px;
    color: #5b5b5b;
    text-transform: uppercase;
    font-size: 11px;
}
.user-roles-name {
    font-weight: 600;
    margin-bottom: 0;
}
.user-roles-detail {
    text-transform: uppercase;
    font-size: 12px;
    color: #575757;
}
.add-table-p {
    text-transform: uppercase;
    font-size: 11px;
    color: #000;
    margin-bottom: 0;
}
.choose-plan-box {
    position: relative;
}
.choose-plan-box .uk-float-left {
    position: relative;
    left: 40%;
}
.car-map-box {
    height: 70vh;
}
.uk-modal-dialog {
    border: solid 3px #243172!important;
}
.uk-modal-dialog.uk-modal-lg {
    width: 700px;
}
.uk-button-danger {
    background-color: #cd1818!important;
}
.uk-button-danger:hover {
    background-color: #b11616!important;
}
.del-btn.deletefile_icon {
    position: absolute;
    right: 15px;
    top: 10px;
    z-index: 9;
}