:root {
    --color-white-opacity80: rgba(255,255,255,0.8);
    --border-radius-medium: 8px;
    --color-green: #37b400;
    --color-red: #db4240;
}

* {box-sizing: border-box; -moz-box-sizing: border-box; font-family: 'Varela', sans-serif;}

body {margin: 0; padding: 0; font-size: 16px; background:#f2f2f2;}

h1, h2, h3, h4 {margin: 0; font-weight: 400;}
h1 {font-size: 30px}
h2 {font-size: 24px}

.container {max-width: 1600px; margin: 0 auto; -webkit-box-shadow: 0 0 50px 0 rgba(0,0,0,.1); box-shadow: 0 0 50px 0 rgba(0,0,0,.1);}

.clear-after::after {content:""; clear:both; display:block;}

.width-25 {width: 22.75%; margin-right: 3%; float:left;}
.width-25:last-child {margin-right: 0;}

.width-33 {width: 31.333%; margin-right: 3%; float:left;}
.width-33:last-child {margin-right: 0;}

.width-50 {float:left; width: 48.5%; margin-right: 3%;}
.width-50:last-child {margin-right:0;}

.stretch {width: 100%;}

hr {margin: 30px 0; height: 10px; background:#e8e8e8; border: 0;}

.margin-vert-30 {margin: 30px 0;}
.margin-bot-30 {margin-bottom: 30px;}

.border-bottom {border-bottom: 1px solid #ccc;}

.small-txt {font-size: .8em;}

body.no-scroll {overflow:hidden;}

/*Form Elements*/
.form-container {}

.form-section-title {background:#0A2240; color:#fff; font-size: 24px; padding: 20px; margin-bottom: 0;}
.form-section-content {border: 1px solid #0A2240; padding: 30px; margin-bottom: 30px;}
.form-title {font-size: 18px; font-weight: 700; margin-bottom:15px;}

.form-item {margin-bottom: 20px;}
.form-item label {margin-bottom: 8px; display:block;}
.form-item label.cb {display:inline-block;}
.form-item label.cb-fw {display:block;}
.form-item.required label::before {content:"*"; display:inline-block; margin-right: 3px; color:red;}
.form-item.required label.cb::before, .form-item.required label.cb-fw::before {display:none !important;}
input[type=text],input[type=date],input[type=number],input[type=email],input[type=password],input[type=datetime-local],input[type=tel], select {font-size: 1em; padding: 10px; width: 100%; border: 1px solid #ccc;}

input[readonly]:not(.ignore-bg),textarea[readonly]{background:#fff5f3;}


textarea {font-size: 1em; padding: 10px; width: 100%; height: 125px; border: 1px solid #ccc;}

.form-container input[type=text],.form-container input[type=number],.form-container input[type=email],.form-container input[type=password],.form-container input[type=datetime-local],.form-container input[type=tel], .form-container select, .form-container textarea { border: 1px solid #ccc; background:#f5f6f7; -webkit-box-shadow:inset 5px 5px 10px 0 rgba(0,0,0,.05); box-shadow:inset 5px 5px 10px 0 rgba(0,0,0,.05);}textarea {font-size: 1em; padding: 10px; width: 100%; height: 125px;}

.form-lnk-list a { border: 3px solid #a8363a; color:#a8363a; text-decoration: none; border-radius: 5px; display:inline-block; margin-right: 5px; padding: 10px 15px;}

.btn {display:inline-block; background: #02aacb; color:#fff; text-align:center; padding: 10px 15px; text-decoration:none; font-size: 1em; border-radius: 5px;}
.btn:hover {background:#027a92;}


/* Layout styles */
.flex {display: flex;  flex-wrap: nowrap; align-items: center;}

header {background:#fff; display: flex;  flex-wrap: nowrap;   align-items: center;}

.header-col { }

.header-col-1 { margin-right: 30px; padding: 15px 30px; border-right: 1px solid #ccc;}
.header-col-1 img {display:block; width: 250px; height: auto; }

/*.header-col-2 {width: 100%; }

header .num-id { padding: 5px 10px; background:#c7571f; color:#fff; border-radius: 5px; font-size: .8em;}
*/
.header-col-3 { width: 100%;}
.header-col-3 input {padding: 20px; border: 1px solid #ccc; background: url(../images/search.png) #f2f2f2; background-repeat:no-repeat; background-size: auto 40%; background-position: 96% center; width: 100%;}

.header-col-4 { text-align:right;  width: 100%; padding-right: 30px;}

/*Main Nav Styles*/

.main-nav{background:#e7820a;padding:15px;border-bottom:5px solid #9c5601;}
.main-nav ul{list-style:none;padding:0;margin:0;}
.main-nav ul li{display:inline-block;position:relative;}
.main-nav ul li a{padding:7px 15px;text-decoration:none;font-size:1em;color:#fff;display:block;border-radius:5px;}
.main-nav ul li a:hover{color:#9c5601;background:#fff;}


.sub-nav{display:none;position:absolute;top:100%;left:0;background:#a8363a;padding:6px;width:240px;border-radius:6px;border:2px solid #a8363a;z-index:1000;}
.sub-nav li{display:block;width:100%;}
.sub-nav li a{display:block;width:100%;padding:10px 12px;font-size:1em;border-radius:4px;background:none;color:#fff;}

.has-sub:hover>.sub-nav{display:block;}


.page-title { background: #2F3030;
    background: linear-gradient(90deg,rgba(47, 48, 48, 1) 0%, rgba(102, 102, 102, 1) 100%); padding: 30px; color:#fff; font-size: 30px;}
.page-title-subinfo {font-size: .5em;}


.room-type-container {background:#f2f2f2; padding: 7px 30px; font-size:.8em; position:relative;}

/*Login Styles*/

.login-container {max-width: 500px; margin: 0 auto; -webkit-box-shadow: 0 0 50px 0 rgba(0,0,0,.1); box-shadow: 0 0 50px 0 rgba(0,0,0,.1);}
.login-container header {background:#fff; display: flex;  flex-wrap: nowrap;   align-items: center;  justify-content: center;}

.login-container .header-col { }

.login-container .header-col-1 {display:inline-block; width: 100%; height: 120px; margin: 0 auto; padding: 30px 30px 0 30px; border-right: 0 solid #ccc; text-align:center;}
.login-container .header-col-1 img { width: auto; height: 100%;}


/*Big Number Styles */
.dash-item-container {display:flex;width:100%;}
.dash-item{flex:1;min-width:0;background:#fff;font-size:30px;border-right:1px solid #ccc;border-top:1px solid #ccc;border-bottom:1px solid #ccc;padding:30px;text-align:left;}
.dash-item:last-child{border-right:0;}
.dash-item span{display:block;font-size:12px;text-transform:uppercase;}

.dash-item-20 {width: 20%; padding: 30px;}
.dash-item-25 {width: 25%; padding: 30px;}
.dash-item-33 {width: 33.333%; padding: 30px;}

/*Filter Styles*/
.grid-filters {margin: 25px 0;}

.filter-container {background:#f2f2f2; padding: 5px;}
.filter-container div {margin-right: 10px;}
.filter-container div select {min-width: 200px;}


/*Main Content Styles*/
.main-content {display: flex;  flex-wrap: nowrap; align-items: stretch; background:#fff;}

.main-item {padding: 30px; border-right: 1px solid #ccc;}
.main-item:last-child {border-right: 0;}
.main-item-25 { width: 25%;}
.main-item-75 {width: 75%;}
.main-item-100 {width: 100%;}

/*Breadcrumbs */
.breadcrumbs {padding-bottom: 30px; border-bottom:1px solid #ccc; margin-bottom: 30px;}
.breadcrumbs a {font-size: .8em; text-transform: uppercase; color:#0e0d1b; text-decoration: none;}

.profile-meta {list-style: none; padding: 0; margin: 15px 0;}
.profile-meta li {display:inline-block; margin-right: 10px; border-right: 1px solid #ccc; padding-right: 10px;}
.profile-meta li:last-child {border-right: 0;}

/*Sub Navigation*/
.side-title {text-transform: uppercase; text-transform: uppercase; font-size: 12px; font-weight: 700; border-bottom: 1px solid #ccc;}
.side-title span {display:inline-block; border-bottom: 3px solid #de6326; padding-bottom: 5px;}

.sub-navigation {list-style: none; margin: 0; padding:0;}
.sub-navigation li {border-bottom: 1px solid #ccc;}
.sub-navigation li a {padding: 15px 0; display: block; text-decoration: none; color:#2c65b9;}
.sub-navigation li a:hover {background:#f2f2f2; padding: 15px}

/*Grid Styles */
.main-table {width: 100%; border-collapse: collapse;}
.main-table th {text-align: left; font-size: .8em; padding: 10px; border-bottom: 3px solid #0e0d1b;}
.main-table tbody tr:hover {background:#f2f2f2; }

.main-table.small td {padding: 10px 5px;}
.main-table td {padding: 20px 10px; border-bottom: 1px solid #ccc;}
.main-table a {}

.main-table-action-bar {background:#f2f2f2; padding: 5px; margin: 15px 0;}

.grid-currency, th.grid-currency {text-align:right; }
td.grid-currency {border-right: 1px solid #ccc; border-left: 1px solid #ccc;}

.status-lnk {display:block; width: 70px; border: 3px solid #ccc; background:#ccc; position:relative; height: 30px; border-radius: 50px; position: active;}
.status-active {background: limegreen; border: 3px solid limegreen;}
.status-active::before {width: 60%; top: 0;  right:0; bottom:0; background:#fff; position:absolute; content:""; display:block; border-radius: 50px;}
.status-inactive::before {width: 60%; top: 0; left:0; bottom:0; background:#fff; position:absolute; content:""; display:block; border-radius: 50px;}


/* Tabs */

.tab-container {background:#f2f2f2; padding: 0 30px; border-bottom: 1px solid #ccc; position:relative;}
.tabs {list-style: none; margin: 0; padding:0;}
.tabs li {display:inline-block;}
.tabs li a {display:block; padding: 15px 0; color: #333; margin-right: 15px; text-decoration: none; font-size: 1em; border-bottom: 5px solid rgba(0,102,191,0);}
.tabs li a.active {border-bottom: 5px solid #d24629; color:#d24629;}

.tab-content {display:none;}
.tab-content-1 {display:block;}

.tab-search {position:absolute; top: 5px; right: 30px;}
.tab-search input {width: 300px;}

/*Modal Styles */

.modal {background:#0e0d1ba7; position:fixed; top:0; left:0; right: 0; bottom: 0; display:none;}
.modal-content {background:#fff; width: 1000px; position: absolute; top: 0; bottom: 0; right: -1000px; padding: 30px; -webkit-box-shadow: 0 0 50px 0 rgba(0,0,0,.1); box-shadow: 0 0 50px 0 rgba(0,0,0,.1); overflow: auto;}
.modal-content-1 {display:block;}


.promote-container, .new-plant-container, .plant-modal-content {display:none;}
.plant-modal-content-1 {display:block;}

.close-modal-container {position:fixed; top: 15px; right: 30px;}
.close-modal-container a {font-size: .8em; background:#0A2240;}
.close-modal-container a:hover {background:#0e0d1b;}

.invalid {border: 2px solid red !important;}

body .k-notification {
    border: 1px solid var(--color-white-opacity80);
    border-radius: var(--border-radius-medium);
}

body .k-notification > .k-notification-wrap {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 1rem 1.4rem;
    border: 0;
    border-radius: var(--border-radius-medium);
}

.k-notification-wrap .k-notification-content {
    vertical-align: middle;
}

.k-notification-success {
    color:white;
    font-weight:bold;
    height:38px !important;
}

.k-notification-success .k-notification-wrap{
    background-color:var(--color-green) !important;
}

.k-widget.k-notification.k-notification-success{
    background-color:var(--color-green) !important;
}

.k-notification-content{
    color:white;
}

.k-notification-error {
    color:white;
    font-weight:bold;
}

.k-notification-error .k-notification-wrap{
    background-color:var(--color-red);
}

.k-widget.k-notification.k-notification-error{
    background-color:var(--color-red) !important;
}

#addressList,
#secondaryAddressList {
	position: absolute;
	background-color: white;
	border: 1px solid #ccc;
	list-style-type: none;
	padding: 0;
	margin: 0;
	width: calc(100% - 2px);
	z-index: 1;
	/* Ensure suggestions list appears on top of other elements */
}

#addressList li,
#secondaryAddressList li {
	padding: 5px;
	cursor: pointer;
}

#addressList li:hover,
#secondaryAddressList li:hover {
	background-color: #f0f0f0;
}