/* Font Face */
@font-face {
    font-family:'a';
    src: url('../fonts/a Book.eot');
	src: url('../fonts/a Book.eot?#iefix') format('embedded-opentype'),
		url('../fonts/a Book.woff2') format('woff2'),
		url('../fonts/a Book.woff') format('woff'),
		url('../fonts/a Book.ttf') format('truetype'),
		url('../fonts/a Book.otf') format('opentype'),
		url('../fonts/a Book.svg#a Book') format('svg');
    font-weight: 400;
    font-style: normal;
    font-stretch: normal;
    unicode-range: U+0020-02DC;
}

@font-face {
    font-family:'Futura-Bold';
    src: url('../fonts/Futura-Bold.eot');
	src: url('../fonts/Futura-Bold.eot?#iefix') format('embedded-opentype'),
		url('../fonts/Futura-Bold.woff2') format('woff2'),
		url('../fonts/Futura-Bold.woff') format('woff'),
		url('../fonts/Futura-Bold.ttf') format('truetype'),
		url('../fonts/Futura-Bold.otf') format('opentype'),
		url('../fonts/Futura-Bold.svg#Futura-Bold') format('svg');
    font-weight: 400;
    font-style: normal;
    font-stretch: normal;
    unicode-range: U+0020-00BF;
}


@font-face {
    font-family:'Futura-Medium';
    src: url('../fonts/Futura-Medium.eot');
	src: url('../fonts/Futura-Medium.eot?#iefix') format('embedded-opentype'),
		url('../fonts/Futura-Medium.woff2') format('woff2'),
		url('../fonts/Futura-Medium.woff') format('woff'),
		url('../fonts/Futura-Medium.ttf') format('truetype'),
		url('../fonts/Futura-Medium.otf') format('opentype'),
		url('../fonts/Futura-Medium.svg#Futura-Medium') format('svg');
    font-weight: 500;
    font-style: normal;
    font-stretch: normal;
    unicode-range: U+0020-00FE;
}

*{margin:0; padding:0; box-sizing:border-box;}
body{font-family:'a';	font-size:14px;	color:#000;}
.apple-green{background:#4cd61e;}
.top-section{/*padding:46px 0 115px;*/ padding: 45px 0 90px;}
.logo {text-align: center; max-width: 375px;  width: 100%;  float: none;  margin: 0 auto; padding:0 30px;}
.conteiner {max-width: 375px;  width: 100%;  float: none;  margin: 0 auto; padding:38px 30px;}
.content-section {float: left; width: 100%; background: #fff; padding: 15px; border-radius: 55px; margin-top: -75px; padding-bottom:146px;}
h1{font-family: 'Futura-Bold';}
span.subheading {color: #989898;}
.page-heading-wrap{margin-bottom:29px;}
.control{width:100%; float:left; margin:0 0 10px;}
.login-screen input{-webkit-appearance: none;  -moz-appearance:none;  appearance: none;}
.login-screen input:focus{outline:none;}
.login-screen .login-top input{width:100%; float:left; height:50px; border-radius:10px; background:#f7f7f7; border:none;}
.login-screen .login-top label{width:100%; float:left; color:#b0b0c3; margin-bottom:3px;}
.forgot {float: left; width: 100%; text-align: center;}
.forgot a{color:#005dde;}
.login-bottom input, .pincode-input-container .pincode-input-text {width:50px !important; height:50px !important; border-radius:100% !important; background:#dadae3; border:none; display:inline-block; margin-right:20px; font-size:23px; flex-grow: unset !important}
.pincode-input-container { display: block !important;}
.login-bottom input:last-child{margin-right:0;}
.or span {width: 30px; height: 30px; color: #dadae3; background: #fff; position: relative; z-index: 2;  display: inline-block;  line-height: 30px;}
.or {width: 100%; float: left; text-align: center; position: relative; margin:9px 0 15px;}
.or:before{content:''; width:100%; height:1px; background:#979797; position:absolute; top:50%; left:0; right:0;}
.login-bottom {float: left; width: 100%;}
.pin-heading {width:100%; text-align:center; margin-bottom:20px;}
.login-bottom .control{text-align: center;}
.login-bottom .forgot{margin:30px 0 18px;}
.action input, .action button[type=button], .action a.btn {width: 100%; float: left; border: none; background: #005dde; color: #fff; font-size: 16px; font-weight: bold; padding: 15px 0; border-radius: 10px; cursor:pointer; box-shadow:none; box-shadow: 0 13px 15px -4px #005dde78; margin-bottom: 30px; height: 50px;}
.action a.btn:not([href]):not([tabindex]):focus, .action a.btn:not([href]):not([tabindex]):hover {color: #fff}
.action input:focus{border:none; outline:none;}
input[type=number], input[type=text], input[type=email], input[type=password]{text-align:center; padding:0 5px;}
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button{ -webkit-appearance: none; margin: 0;}
input[type=number] {-moz-appearance: textfield;}
.logo.second-logo-section{margin:85px auto 50px;}
.top-section.white-background{padding:0;}
.addorder-section, .revieworder-section{text-align:center;}
.addorder-section { margin-bottom: 40px; float: left; display: inline-block; width: 50%;}
.addorder-section label, .revieworder-section label{float:left; width:100%; color:#000; text-align:center; margin-top:20px; font-size:24px;}
.content-section.no-height {min-height: unset;  padding-bottom: 0px;}
span.toggle-menu {float: left;  width: 18px;  height: 14px;  cursor: pointer;}
.logo .back:before { content: ''; width: 10px; height: 10px; float: left; border: 2px solid #fff;  border-width: 2px 2px 0 0;  transform: rotate(-135deg);}
.logo .back {float: left;  margin-top: 15px;}
.logo .skip {float: right;  font-size: 16px;  color: #fff;  text-decoration: none;  margin-top: 10px;}
.change-pin .page-heading-wrap { text-align: center;}
h1{font-size:20px;}
.change-pin label{color:#a2a2a2; font-size:13px;}
.change-pin  h1{font-size:18px;}
.change-pin .pin-heading{font-size:13px; float:left; width:100%; text-align:center; margin:20px 0 18px; font-family:'Futura-Medium'; color:#a2a2a2;}
.change-pin.new-pin .action input, .change-pin.new-pin button[type=button] {font-size:16px; box-shadow:none; margin-top:47px;}
.change-pin.new-pin .action input:hover, .change-pin.new-pin button[type=button]:hover{background:#4cd61e;}
.password-info{float:left; width:100%; text-align:left; font-size:13px; margin-top:16px;}
.pass-info-head{color:#061058; float:left; width:100%; text-align:left; margin-bottom:10px;}
.password-info ul{padding:0; margin:0; float:left; width:100%; list-style:none;}
.password-info ul li{width:100%; float:left; position:relative; line-height:20px; padding-left:20px;}
.password-info ul li.active{color:#4cd61e;}
.password-info ul li.active:before{content: ''; position: absolute; top: 6px; left: 0;  width: 9px;  height: 4px;  border: solid #4cd61e;    border-width: 3px 3px 0 0;  transform: rotate(133deg);}
.new-password .control{position:relative;}
.hide-password {width: 24px; height: 24px; position: absolute; background:url(/images/password-hide.svg) no-repeat center center; right:15px; bottom:13px;}
.show-password {width: 24px; height: 24px; position: absolute; background:url(/images/password-show.svg) no-repeat center center; right:15px; bottom:13px;}
.new-password .conteiner{position:relative; min-height:700px;}
.new-password .action {position: absolute;  bottom: 0;  left: 0;  right: 0;}
.new-password .action input:hover{background:rgba(0,0,0,0.1); box-shadow: 0 13px 15px -4px rgba(0,0,0,0.2);}
.content-section.new-password {padding-bottom: 50px;}
.popup-overlay {position: fixed;  top: 0;  left: 0;  right: 0;  bottom: 0;  background: rgba(0,0,0,0.48); z-index:9;}
.popup {position: absolute; top: 50%; left: 50%; width: 313px; background: #fff; transform: translate(-50%, -50%); z-index: 99; border-radius: 30px;}
.popup .popup-head {float: left;  width: 100%;  font-size: 20px;  text-align: center;  padding: 0 10px;   margin-top: 49px; margin-bottom:16px;}
.popup-content {float: left; width: 100%; text-align: center; font-size: 14px; padding: 0 30px; margin-bottom: 20px;}
.popup a{float:left; width:100%; padding:15px  10px; border-top:1px solid #979797; font-size:20px; color:#357cf9; text-align:center; text-decoration:none;}
span.main-heading, span.sub-heading  {font-size: 18px; color: #fff; font-family:'Futura-Medium';}
span.sub-heading {display: block; margin-top: 5px;}
.content-section.change-pin .action {margin-top: 50px; float: left;  width: 100%;}
.header-second .logo .back{margin-top:6px;}
a.edit {float: right;}
.profile-image {max-width: 81px;  height: 81px;  border-radius: 50%;  border: 5px solid #4cd61e;  float: none;   margin: 0 auto;  display: block; overflow: hidden; position:relative;}
.profile-image img{width:81px; height:81px; float:left;}
.email, .name {float: left; width: 100%; text-align: center;}
.name{font-size:18px; font-family:'Futura-Bold'; margin:20px 0 10px;}
span.email {font-size: 12px; font-family:'Futura-Medium'; margin-bottom:32px; font-weight: 600;}
.forgot .change-password{font-family:'Futura-Medium'; font-weight: 600;}
.timer {background:#fff; width:131px; height:26px; border-radius:13px; margin:13px auto 23px; display:block; float:none; text-align:center; line-height: 26px;}
.timer span{display:inline-block; font-weight:600;}
.search input {
    width: 100%;
    float: left;
    border-radius: 20px;
    height: 40px;
	background: #f7f7f7;
	text-align: left;
    padding-left: 45px;
}
.search {
    float: left;
    width: 100%;
	margin-bottom:20px;
}
.search .control{
    float: left;
    width: 100%;
	position:relative;
}
.content-section.add-order{margin-top:-55px; background: #f3f3f3;}
button.search-button {
    position: absolute;
    top: calc(50% - 8px);
    left: 14px;
    width: 16px;
    height: 16px;
    background: transparent;
    border: none;
}
button.search-button img{
    display: block;
}
.search input, button.search-button:focus{
    outline:none;
    border: none;
}
.content-section.add-order .conteiner{padding-top:10px}
.heading-order {
    float: left;
    width: 100%;
    font-size: 18px;
    font-weight: 600;
    text-align: center;
    margin: 0 0 20px;
}
.order-grid, .grease-trap section, .document-grid {
    overflow: hidden;
    background: #fff;
    padding: 20px;
    border-radius: 10px;
    margin-bottom: 10px;
    float: left;
    width: 100%;
    color: #000;
    position: relative;
}

.grease-trap .form-control{ padding: .375rem .75rem;}
.grease-trap .order-images-section { border: none; }
.grease-trap .order-image { margin-bottom: 10px; }
.grease-trap .form-control { text-align: left;}
.grease-trap span.form-control { background-color: #f7f7f7;}
.grease-trap .card .card-header {
    border: none;
    background-color: #fff;
    padding: 0px;
}
.grease-trap .card .card-header .btn { font-weight: bolder;
    background: none;
    color: #000;
}
.grease-trap .card .card-header .btn.focus, .grease-trap .card .card-header .btn:focus { box-shadow: none; outline: none; }
.grease-trap section .title a { position: absolute; top: 25px; right: 20px }
.grease-trap section .title span.icon { position: absolute; top: 27px; left: 20px; }
.grease-trap .card .card-body { padding: 0px; }
.grease-trap section .title {
    text-align: center;
    font-weight: bold;
    font-size: 125%;
    padding-bottom: 10px;
    border-bottom: solid 1px #3333;
    margin-bottom: 10px;
}
.grease-trap .order-images-section {padding: 0; margin: 0;}
.order-grid .overlay {
    position: absolute;
    background: rgba(0, 0, 0, 0.4);
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    overflow: hidden;
}
.order-action { font-size: 20px; text-align: right; line-height: 1;}
.order-action .order-edit { color: #005dde}
.order-action .delete-order { margin-left: 5px;}
span.company-name {
    float: left;
    width: 100%;
    text-align: left;
    font-weight: 700;
    font-size: 18px;
    margin-bottom: 10px;
	font-family:'Futura-Bold';
}
span.company-address {
    font-weight: 600;
    float: left;
    width: 100%;
    color: #0000008f;
	font-family:'Futura-Medium';
}
span.order-date{
	font-weight: 600;
    float: left;   
    color: #000000;
	font-family:'Futura-Medium';
}

a.view-order {
    background: #005dde;
    float: right;
    width: 87px;
    height: 30px;
    font-size: 12px;
    color: #fff;
    text-align: center;
    line-height: 30px;
    border-radius: 10px;
    text-decoration: none;
	box-shadow: 0 10px 12px -4px #005dde78
}
.list-order span.order-date{float:right;}
span.order-serial-no {
    font-size: 16px;
    font-weight: 600;
	font-family:'Futura-Medium';
}
.review-order-top {
    background: #fff;
}
.content-section.add-order.review-order{padding:0; border-radius:0; background:transparent;}
.review-order-top {
    border-top-left-radius: 55px;
    border-top-right-radius: 55px;
	float: left;
    width: 100%;
	padding: 13px 15px 18px;
}
.review-order-top  .conteiner{padding:0;}
.review-order-bottom {
    float: left;
    width: 100%;
	background:#f3f3f3;
}
.login-time {
    float: left;
}
.order-time {
    float: right;
}
span.time, span.date {
    float: left;
    width: 100%;
    text-align: center;
    font-weight: 600;
    font-size: 20px;
}
span.date {
    font-size: 14px;
}
label.login-time-label {
    font-size: 12px;
    text-align: center;
    float: left;
    width: 100%;
    font-weight: 600;
    color: #0000008f;
}
.order-grid-top .order-no {
    float: left;
    font-size: 16px;
    font-weight: 600;
}
.order-grid-top .order-time-inner{
	float: right;
    font-weight: 600;
}
.order-grid-top {
    float: left;
    width: 100%;
    margin-bottom: 10px;
}
.order-grid.view-order-grid span.company-name {
    font-weight: 600;
	font-family:'Futura-Medium';
	font-size:14px;
}
.profile-edit .login-screen .login-top input {
    text-align: left;
    padding: 0 22px;
    font-weight: 600;
}
.profile-edit .action {
    float: left;
    width: 100%;
    margin-top: 35px;
}
.profile-image .edit-image img {
    width: 15px;
    height: 15px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.profile-image img {
    width: 81px;
    height: 81px;
}
.profile-image .progress {
    position: absolute;
    left: 0;
    width: 100%;
    bottom: 0;
}
.nav-inner .profile-image img {
    width: 100%;
    height: 100%;
}
.profile-image .edit-image {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #00000047;
}
.content-section.log-in-details{background:#f3f3f3;}
.content-section.log-in-details .conteiner{padding-top:0;}
span.login-date {
    font-size: 16px;
    font-weight: 600;
}

span.login-order, span.login-duration, span.login-time {
    font-size: 16px;
    font-weight: 600;
    width: 33%;
    float: left;
}
span.login-order small, span.login-duration small,  span.login-time small{
    font-size: 10px;
   margin-left:3px;
}
span.login-time{text-align:right;}
.top-section.order-top {
    padding-bottom: 58px;
}
.add-image{border:2px dashed #4cd61e; background: #fff; cursor:pointer; position:relative;}
.add-image:after {
    position: absolute;
    top: 50%;
    left: 50%;
    content: '+';
    color: #4cd61e;
    font-weight: 700;
    font-size: 25px;
    transform: translate(-50%, -50%);
	line-height: 1;
    margin-top: -5px;
    opacity: 0.3;
}
.add-image span {
    font-size: 10px;
    text-align: center;
    float: left;
    width: 100%;
    position: absolute;
    bottom: 4px;
    font-weight: 600;
    color: #4cd61e4d;
}
.add-order-form-top {
    float: left;
    width: 100%;
    position: relative;
}
.order-image, .related-image {margin-bottom: 7px; width:73px; height:73px; border-radius:10px; float:left; margin-right:7px; position:relative;}
.order-image input[type="file"], .related-image input[type="file"] {position:absolute; width:100%; height:100%; z-index:1; opacity:0; cursor: pointer;}
.order-image:last-child, .related-image:last-child{margin-right:0;}
.order-image img, .related-image img {width: 73px;  float: left; max-height: 73px;}
.add-order-form-top .heading {width: 100%; color: #000; font-weight: 700; font-size: 20px; float: left;font-family:'Futura-Bold';}
.add-order-form-top .edit {float: right; position: absolute; right: 0;}
.address {float: left;  width: 70%; font-family:'Futura-Medium';  margin: 10px 0 20px; font-weight: 600;}
.add-image.order-image {opacity: 0.5;}
.order-images-section, .related-images-section {float: left;  width: 100%; border-bottom: 1px solid rgb(151,151,151);  padding-bottom: 22px;  margin-bottom: 15px;}
.user-images-container { border-bottom: none; padding-bottom: 0; margin-bottom: 5px; }
.product-overflow-block { margin-top: 10px;}
.order-form .control label {
    font-size: 10px;
    float: left;
    width: 100%;
    font-weight: 600;
    margin: 0;
}
.order-form .control {
    float: left;
    max-width: 33%;
	padding-left:10px;
}
.order-form .control.source {
    max-width: 90%;
}
.order-form .control.quantity {
    width: 66px;
}
.order-form .control.container {
    width: 104px;
}
.order-form .control.qty-container {
    width: 87px;
}
.order-form .control input, .order-form .control select, .control.comment-area textarea {
    float: left;
    width: 100%;
    background: #f7f7f7;
    border: none;
    height: 30px !important;
    border-radius: 5px;
    margin-top: 5px;
}
.control.comment-area textarea { height: 40px !important; }
a.remove {
    float: right;
    margin-top: 25px;
}
.order-form {
    float: left;
    width: 100%;
}
span.addMore a {
    width: 87px;
    height: 25px;
    border-radius: 12px;
    background: rgb(76,214,30);
    font-size: 10px;
    color: #fff;
    display: inline-block;
    text-align: center;
    line-height: 25px;
	text-decoration:none;
	margin-top: 10px;
}
span.addMore a:before {
    content: '+';
    font-size: 18px;
    line-height: 1;
    margin-right: 7px;
    display: inline-block;
    margin-top: 2px;
}
.action button, a.button {
    width: 100%;
    float: left;
    border: none;
    margin: 15px 0 20px;
    color: #fff;
    font-size: 16px;
    background: rgb(76,214,30);
    height: 50px;
    line-height: 50px;
    outline: none;
    border-radius: 10px;
    text-align: center;
    font-family: 'Futura-Medium';
    text-decoration: none;
}
.header-bottom {
    float: none;
    margin: 20px auto 0;
    display: block;
    width: 375px;
	padding-bottom: 62px;
}
.order-bottom-timer {
    float: left;
}
.bottom-order-date {
    float: right;
    width: 50%;
    text-align: center;
}
span.timer-bottom {
    float: left;
    width: 100%;
    text-align: center;
    font-size: 25px;
    color: #fff;
    font-weight: 600;
}
.order-bottom-timer label, .bottom-order-date label {
    text-align: center;
    color: #fff;
    width: 100%;
    float: left;
	font-family:'Futura-Medium';
}
.bottom-order-date span.date {
    float: left;
    width: 100%;
    font-size: 25px;
    font-weight: 700;
    color: #fff;
}
.order-form .control span.qty-review {
    font-size: 20px;
}
.order-form .control span.qty-review label {
    display: inline-block;
    width: auto;
    float: none;
}
span.toggle-menu.open:after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(129,194,56,0.3);
    z-index: 1;
}
.navigation {
    position: fixed;
    top: 0;
    left: -243px;
    height: 100%;
    width: 243px;
    background: #4cd61e;
	transition:ease-in-out 0.3s;
	border-top-right-radius:10px;
	border-bottom-right-radius:10px;
	overflow: auto;
	z-index: 2;
}
.navigation.open{
	left:0;
}
.nav-inner {
    float: left;
    width: 100%;
    padding: 43px 20px 30px 43px;
    position: relative;
}
.navigation .profile-image {
    width: 52px;
    height: 52px;
	float: left;
}
span.close-menu{float:right; cursor:pointer; width:15px; height:15px;     font-size: 0;}
span.close-menu:before {
    content: '';
    width: 2px;
    height: 15px;
    background: #fff;
    position: absolute;
    transform: rotate(45deg);
}
span.close-menu:after {
    content: '';
    width: 2px;
    height: 15px;
    background: #fff;
    position: absolute;
    transform: rotate(-45deg);
}
.user-name{font-size:20px; font-family:'Futura-Medium'; color:#fff; width:100%; float:left; margin:20px 0 0;}
.user-email{font-size:12px; font-family:'Futura-Medium'; color:#fff; width:100%; float:left; border-bottom:1px solid #fff; margin-bottom:15px; padding-bottom: 20px;}
.nav {
    float: left;
    width: 100%;
}
.nav ul {
    padding: 0;
    margin: 0;
    list-style: none;
}
.nav ul li{width:100%; float: left;  margin-bottom: 10px;}
.nav ul li a {
    float: left;
    width: 100%;
    padding: 10px 0;
    text-decoration: none;
    font-size: 16px;
    color: rgba(255,255,255,0.54);
}
.nav ul li a:hover, .nav ul li.current a{color:rgba(255,255,255,1);}
span.logout {
    display: inline-block;
    text-align: center;
    width: 118px;
    height: 40px;
    line-height: 40px;
    border: 1px solid rgba(255,255,255,0.7);
    border-radius: 10px;
    color: #fff;
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-60%);
}
span.logout a {text-decoration: none; color: #fff;}


/*** 20-02-2021 ****/
.content-section{border-bottom-left-radius: 0;  border-bottom-right-radius: 0; min-height:100%;}
.admin-contact-row{margin-top:24px; float:left; width:100%;}
.admin-contact-row:first-child{margin-top:0;}
.admin-contact-row label {font-size: 14px; text-align: center; float: left; width: 100%; color: #4cd61e;}
.admin-contact-row span{font-weight:700; font-size:16px; text-align: center; float: left; width: 100%;}
.review-order-bottom{min-height: 100%;}
.review-order-lower-bottom{float:left; width:100%; margin-top:170px;}
.review-bottom-login-time, label.review-bottom-login {float: left; width: 100%; font-size: 14px; font-weight: 600;  margin-bottom: 7px;}
.confirm-detail {float: left; width: 100%; margin-top: 20px;}
.confirm-detail label {
    display: inline-block;
    margin-left: 5px;
    font-size: 14px;
    font-weight: 600;
    vertical-align: middle;
}
.confirm-detail input[type="checkbox"]{ display: inline-block; vertical-align: middle;}
.confirm-detail input[type="submit"] {
    float: left;
    width: 100%;
    height: 50px;
    border-radius: 10px;
    border: none;
    font-size: 16px;
    font-weight: 700;
    background: rgb(0,93,222);
    color: #fff;
	box-shadow: 0 13px 15px -4px #005dde78;
	margin-bottom:30px;
	cursor:pointer;
}
input[type="submit"]:focus{outline:none;}
.order-search {
    float: left;
    width: 100%;
}
.order-search .control {
    float: left;
    width: 120px;
}
.order-search .control.last{
	margin-left:9px;
	margin-bottom:16px;
}
.order-search .control.first{margin-bottom:16px;}
.order-search .control input, .order-review .control input {
    width: 100%;
    float: left;
    height: 40px;
    text-align: left;
    border: 1px solid #c4d3dc;
}

.order-search .control .input-group input, .order-review .control .input-group input{
	border: 1px solid #c4d3dc;
    background:transparent url('../../images/calendar.svg') no-repeat center right 12px;
    background-size: 15px;
    padding: 0 30px 0 5px;
}
.order-search .control.search-box{
    width: 100%;
    float: left;
    height: 40px;
    text-align: left;
}
.order-search .control.search-box input {
    background: transparent no-repeat center right 12px;
    font-size: 12px;
}

.order-review .control {
    float: left;
    width: 50%;
}
.order-review .control select {
    float: left;
    height: 40px;
    text-align: left;
    border: 1px solid #c4d3dc;
    background: transparent;
    margin-left: 5px;
}

/*******************/
.pincode-input-container { display: block }
.is-invalid { border: solid 1px #dc3545 !important; }
.invalid-feedback {display: block;}
.alert {position: relative;padding: .75rem 1.25rem;margin-bottom: 1rem;border: 1px solid transparent;border-radius: .25rem;}
.alert.alert-success {text-align: center;color: #155724;background-color: #d4edda;border-color: #c3e6cb;}
.alert.alert-danger {text-align: center;color: #721c24;background-color: #f8d7da;border-color: #f5c6cb;}
.top-section.long-header { padding: 45px 0 115px; }
.action button[type=button] { padding: 0; }
.remove-image { position: absolute; bottom: 0; background: rgba(0,0,0,0.3); display: block; overflow: hidden;}
.remove-image img { height: 20px; padding-bottom: 5px; display: block; text-align: center; }
.add-order textarea { width: 100%; height: 80px; padding: 5px; resize: none; border-radius: 10px; }
.order-grid .item-block:not(:last-child) { margin-bottom: 15px; }
.order-grid .item-block .control { margin: 0;}
.admin-email a, .view-order-grid a { color: #000; }
.admin-email a:hover, .admin-email a:focus, .view-order-grid a:hover, .view-order-grid a:focus { text-decoration: none; }
.order-search .input-group input {font-size:12px;}
.order-review .input-group input {font-size:14px;}
.order-search .btn { float: right;}
.nav ul li:last-child { margin-bottom: 30px; }
.order-product-grid-group .product-name { display: block; font-weight: bold; margin: 15px 0 5px 0;}
.order-product-grid-group .product-quantity { display: inline-block; width: 80px; }
.review-order-top .conteiner div { width: 33.33%; }
.show-current-pay-cycle { font-weight: bold;}
#confirmCheckoutModal .action button { margin-bottom: 10px;}

.nav-tabs {
    border: none;
}
.nav-tabs .nav-link {
    color: #000;
    font-size: 16px;
    font-weight: 600;
}
.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
    background-color: #4cd61e;
    color: #fff;
}
.order-view-overflow-contaminate-images .order-images-section {
    margin: 0;
    padding: 0;
    border: none;
}
.progress { background-color: #4cd61e; color: white; font-weight: bolder; text-align: right; display: block;}

.document-grid .document-header {
    color: #000000;
    font-family: 'Futura-Medium';
    border-bottom: 1px solid #c4d3dc;
    margin-bottom: 10px;
    padding-bottom: 10px;
}
.document-grid .document-header .document-type {
    font-weight: 600;
    display: block;
    text-align: center;
    font-size: 16px;
    border-bottom: 1px solid #c4d3dc;
    padding-bottom: 10px;
    margin-bottom: 10px;
}
.document-grid .document-header .document-title { font-weight: 600; }
.document-grid .document-footer { position: relative; }
.document-grid .document-footer .custom-btn {
    background: #005dde;
    display: inline-block;
    width: 87px;
    height: 30px;
    font-size: 12px;
    color: #fff;
    text-align: center;
    line-height: 30px;
    border-radius: 10px;
    text-decoration: none;
    box-shadow: 0 10px 12px -4px #005dde78;
}

.document-grid .document-footer .disabled { background: #999;}

.document-grid .document-footer input[type=file] {
    opacity: 0;
    position: absolute;
    z-index: -1;
}

.document-grid .document-footer .progress {
    position: absolute;
    color: #4cd61e;
    border-radius: 0;
    top: -10px;
    left: 0px;
    width: 100%;
    height: 5px;
}

.form-group.required > label:after {
    color: red;
    content: "*";
}

.input-checkbox-group {
    padding: 0px 20px;
}
.input-checkbox-group .form-check-label {
    display: block;
}
.input-checkbox-group-inline {margin-left:20px;}
.input-checkbox-group-inline .form-check-label {
    display: inline-block;
    padding-right: 30px;
    margin-right: 20px;
}
.lead-status {
    position: absolute;
    bottom: 22px;
    right: 20px;
    font-weight: bold;
    background: #4cd61e;
    color: #fff;
    padding: 3px 13px;
    border-radius: 15px;
}
.lead-status.closed {
    background: #4cd61e;
    color: #fff;
}
.lead-status.draft {
    background: #007bff;
    color: #fff;
}

.user-dashboard { position: relative }
.dashbobard-msg {
    top: 0px;
    position: absolute;
    text-align: center;
    background: #4cd61e;
    color: #fff;
    border-radius: 20px;
    padding: 3px 0px;
    left: 0;
    right: 0;
}
.dashbobard-msg .close-msg {
    position: absolute;
    padding: 3px 10px 3px 7px;
    top: 0;
    right: 0;
    border-radius: 0 20px 20px 0;
    background: #007bff;
    color: #fff;
    font-weight: bold;
}
.dashbobard-msg .close-msg:hover { color:#000; text-decoration: none;}

section.grease-card .hr-text::before {
    background: #f6fff8;
}

.hr-text {
    border: 0;
    border-top: 1px solid #ccc;
    text-align: center;
    position: relative;
    margin: 20px 0;
}

.hr-text::before {
    content: attr(data-content);
    position: absolute;
    top: -0.7em;
    left: 50%;
    transform: translateX(-50%);
    background: #fff;
    padding: 0 10px;
    color: #000;
}


section.grease-card {
    border-radius: 16px;
    background: #ffffff;
    position: relative;
    border: 1px solid #e6e9ef;
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}

/* Accent strip */
section.grease-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 6px;
    height: 100%;
    border-radius: 16px 0 0 16px;
    background: linear-gradient(
        180deg,
        #28a745 0%,
        #4a6cff 100%
    );
}

section.grease-card .parent-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    background: linear-gradient(
        90deg,
        #f8f9fa,
        #ffffff
    );
    border-bottom: 1px solid #e6e9ef;
}
section.grease-card .parent-header .heading {
    font-size: 16px;
    font-weight: 700;
    color: #212529;
}
section.grease-card .parent-actions {
    font-size: 20px;
    cursor: pointer;
    position: absolute;
    right: 20px;
    padding: 0 10px;
}
section.grease-card .child-actions {
    font-size: 16px;
    cursor: pointer;
    position: absolute;
    right: 20px;
    padding: 0 10px;
}
section.grease-card .parent-actions:hover {
    opacity: 0.75;
}
section.grease-card .parent-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
}
section.grease-card .grease-photos label {
   font-size: 12px;
   white-space: nowrap;
   text-align: center;
   max-width: 100%;
   display: block;
}

section.grease-card .parent-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
}
section.grease-card .parent-toggle:focus {
    box-shadow: none;
}
section.grease-card .parent-icon {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg, #28a745, #4a6cff);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}
section.grease-card .parent-header .heading {
    font-size: 16px;
    font-weight: 700;
}

section.grease-card .parent-icon {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: linear-gradient(
        135deg,
        #28a745,
        #4a6cff
    );
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.grease-card .card-header {
    background: #f8f9fa;
    font-weight: 600;
}

.grease-card .heading {
    font-size: 15px;
}

.grease-service {
    background: #f6fff8;
    border-left: 5px solid #28a745;
    border-radius: 10px;
    padding: 16px;
    margin: 24px 0;
    box-shadow: 0 4px 12px rgba(40,167,69,0.12);
}

.grease-service .service-header {
    color: #218838;
    font-weight: 600;
    margin-bottom: 12px;
}
.oil-service {
    background: #f5f8ff;
    border-left: 5px solid #4a6cff;
    border-radius: 10px;
    padding: 16px;
    margin: 24px 0;
    box-shadow: 0 4px 12px rgba(74,108,255,0.12);
}

.oil-service .service-header {
    color: #364fc7;
    font-weight: 600;
    margin-bottom: 12px;
}
.service-section {
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}