@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap');

* {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}

:root {
	--black: #010101;
	--white: #ffffff;
	--accent: #6fc3b6;
	--accent-dark: #5eb6a8;
	--grey: #9a9a9a;
	--mid-grey: #e0e0e0;
	--orange: #ef7a3b;
	--light: #eef4f3;
	--lighter: #f3f7f7;
	--lightest: #f9fbfb;
	--corner: 5px;
	--shadow: 0 0 1px var(--mid-grey);
}
body {background-color: var(--lightest);padding:30px 30px 30px 330px;font-family:Roboto;font-weight:300;max-width:1400px;margin:0 auto 60px;color:var(--black);font-size:17px;}

body.login_screen {background-color:var(--accent);padding:0;max-width:100%}
.login_screen .side {display:grid;float:left;height:100vh;background-color:var(--white);width:50%;padding:50px;align-items:center;justify-items:end;}
.login_screen .middle {max-width:360px;}
.login_screen .form-grid {grid-gap:10px;grid-template-columns:100px 1fr;}
.login_screen input[type=submit] {margin-top:20px;float:right;}
.login_screen .side>img {position: absolute;top: 0;left: 50%;width: 50%;height: 100%;bottom: 0;object-fit: cover;object-position: center right;}

p:first-child {margin-top:0;}
p:last-child {margin-bottom:0}
h1, h2, h3, strong {font-weight:500}
h1 {font-size:30px;}
h2 {font-size:24px;}
h3 {font-size:22px;}
a {text-decoration:none;color:var(--accent);}

h1:first-child, h2:first-child, h3:first-child {margin-top:0;}

a.option {margin-left:5px;background-color:var(--accent);font-size:17px;display:inline-block;padding:5px 10px;border-radius:5px;color:#ffffff;}
a.option:first-of-type {margin-left:15px}

.orange {color:var(--orange);}

.sidebar {position:fixed;left:0;top:0;bottom:0;width:300px;background-color:#ffffff;padding:30px;border:1px solid var(--light)}
.sidebar>div {display:flex;flex-direction:column;height:100%;width:100%}
.sidebar>div>* {padding-bottom:30px}
.sidebar>div>:nth-child(3) {flex-grow:1}
.sidebar>div>:last-child {padding-bottom:0;padding-left:50px;position:relative}
.sidebar .user-name {display:block;margin-bottom:5px}
.sidebar i {position:absolute;top:0;left:0;font-size:32px;color:var(--accent);}
.sidebar .user a {display:block}

.spinner {position: fixed;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(0,0,0,0.5);z-index: 1000;display:none}
.spinner>div {position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);max-width:200px;display:grid;grid-gap:30px;text-align:center;color:var(--accent);font-size:20px;font-weight:400;}
.saving .spinner, .slid.saving .spinner, .spinner.visible {display:block !important}

.pop_message {position: fixed;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(0,0,0,0.5);z-index:1000}
.pop_message>div {position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);max-width:80%;width:300px;text-align:center;background-color:#ffffff;background-color: #ffffff;border-radius: var(--corner);padding: 25px;}
.pop_message p:first-child {color:var(--accent);font-weight:400;font-size:20px}
.pop_message.er p:first-child {color:var(--orange);}
.pop_message .button {background-color:var(--accent);color:var(--white);padding:10px 20px;font-weight:400;margin:10px 0 0;display:inline-block;border-radius:var(--corner);cursor:pointer;}
.pop_message.er .button {background-color:var(--orange);}



.logo {height:auto;}

.sidebar .menu {margin-right:-30px;width:calc(100% + 30px);}
.sidebar .menu a {display:block;margin:0 0 10px;font-weight:500;padding:5px 0;text-decoration:none;color:var(--black);}

.dropdown {display:block;position:relative;}
.dropdown>div {display:none;position:absolute;top:calc(100% + 2px);right:-2px;background-color:var(--accent);width:150px;color: var(--white);font-size: 16px;   font-weight: 400;border-radius:var(--corner);border-top-right-radius:0}
.dropdown.open {border-bottom-left-radius: 0 !important;border-bottom-right-radius:0 !important;border-bottom-color:#ffffff99}
.dropdown.open>div {overflow:hidden;display:block}
.dropdown>div>* {display:block;padding: 10px;text-align:left;border-bottom:1px solid #ffffff99;transition:0.25s background-color ease-in-out}
.dropdown>div>*:hover {background-color:var(--accent-dark);}
.dropdown>div>*:last-child {border-bottom:none;}

.search_pane {position: fixed;top: -100%;height:100%;left: 300px;right: 0;padding: 60px;background-color: var(--accent);z-index: 20;overflow-y:scroll;transition:* 500ms ease-in-out}
#search_results {display:grid;grid-template-columns:repeat( auto-fill, minmax(250px, 1fr) );grid-gap:30px}
#search_results a {background-color: var(--white);display: grid;grid-template-columns:1fr 100px;padding: 16px;grid-template-columns: 1fr;grid-gap: 8px;border-radius: var(--corner);color:var(--black);}
#search_results a.archived {opacity:0.5}
#search_results a>:first-child {font-size:24px;font-weight:400;grid-column:1 / span 2}
#search_results a>:nth-child(3) {text-align:right;}
.searched .search_pane {top:0;}


.attn {display:block;padding:15px 0;}
.attn strong {display:block;font-size:18px;color:var(--orange);margin-bottom:5px;}
#cancel_message {grid-column: 1 / span 4}
.formerrors {color:var(--orange);margin:20px 0 0;display:none;}
.formerrors strong {display:block;margin-bottom:5px;font-size:18px;}

.page-title {display:grid;grid-gap:20px;grid-template-columns:auto auto;align-items:center;justify-content:space-between;margin:30px 0;position:relative;}
.page-title h1, .page-title h2 {margin:0;}
.page-title>div>a, .page-title>div>div, input[type=submit] {display: inline-block;padding: 10px 25px;background-color: var(--accent); color: var(--white);font-weight: 500;  border-radius: var(--corner);cursor:pointer;border:2px solid var(--accent);margin-left:5px;}
.page-title div a.grey, input[type=submit].grey {background-color:var(--mid-grey);color:var(--black);border-color:var(--mid-grey)}
.page-title>*:nth-child(2) {float:right;margin-left:20px}
.page-title h1 span {font-size:17px;font-weight:300;margin-left:20px}

input[type=submit] {margin:30px 0 0;width:auto;}

.on_white {background-color:var(--white);margin:15px 0;border-radius:var(--corner);border:1px solid var(--light);padding:20px;}

table {border-collapse:collapse;border-spacing:0;width:calc(100% + 40px);margin:-20px;}
table thead {font-weight:400;position:sticky;top:0}
table thead td {background-color:var(--white);border-bottom:2px solid var(--lighter);z-index:5;}
table td {padding:10px;border-bottom:1px solid var(--lightest);transition:background-color 250ms ease-in-out}
table td>a {margin:-5px;padding:5px;}
table td:first-child {padding-left:20px;}
table td:last-child {padding-right:20px;}
table tr[data-href]:hover td, table tr[data-inv]:hover td {background-color:var(--lightest);cursor:pointer;}
td.no {text-align:right}
table td.alt-col {background-color:var(--lightest);}

.options_bar {position:sticky;top:0;background-color:  var(--lighter);border-bottom:2px solid var(--light);padding: 10px 0px;}
.options_bar a {display:inline-block;padding:5px 0;}
 
.supplier_grid {display:grid;grid-template-columns: 1fr 1fr 1fr 1fr;grid-gap:30px;}
.supplier_grid a {background-color: #ffffff;padding: 20px;border-radius: var(--corner);text-align: center; color: var(--black);border:1px solid var(--light);}


.options_grid {display:grid;grid-template-columns: 1fr 1fr 1fr 1fr;grid-gap:30px;}
.options_grid a {background-color: #ffffff;padding: 15px 15px 15px;border-radius: var(--corner);text-align: center; color: var(--black);border:1px solid var(--light);font-size:15px}
.options_grid i {font-size:50px;margin:20px;color:var(--accent);display:inline-block}
.options_grid strong {font-weight:400;display:grid;margin:10px 0; text-align:center;font-size:17px;}

.equal-grid {display:grid;grid-gap:40px;grid-auto-columns: minmax(0, 1fr);grid-auto-flow: column;align-items:start;}
.two_col {display:grid;grid-gap:30px 40px;grid-template-columns:1fr 1fr;align-items:stretch;}
.two_col .on_white {margin:50px 0 0;position:relative;}
.two_col .on_white h3 {font-weight:400;color:var(--accent);margin:0 0;position:absolute;top:-50px;left:0;width:100%}

.form-grid {display:grid;grid-template-columns:130px 1fr;grid-gap:20px}

.form-grid.ff {align-items:start;grid-template-columns: 200px 1fr}
.form-grid.ff>* {position:relative;}
.ff textarea, .ff input {max-width: calc(100% - 40px);}
.form-grid .changes {position:absolute;top:3px;right:3px;width:30px;height:30px;cursor:pointer;font-size:20px;color:#999999;background-color:#ffffff;border-radius:5px;padding:5px;}
.form-grid .secret .changes {display:none;}
.form-grid .changes:hover {color:#000000;}

.form-grid.ff .full {grid-column:1 / span 2}
.form-grid.ff>div>label {width:100%;padding:5px 0 5px 30px;position:relative;display:block;}
.form-grid.ff label input {position:absolute;left:0;top:0;}

input, select, textarea, .input {font-family:Roboto;font-size:16px;font-weight:300;background-color:var(--white);background-color:var(--lightest);border:1px solid var(--light);padding:7px;border-radius:var(--corner);line-height:20px;outline:none;transition:border-color 250ms ease-in-out;width:100%;-webkit-appearance: none;}
select {background-image:url('/icons/downward-arrow.png');background-repeat:no-repeat;background-position:calc(100% - 5px) center;padding-right:30px;}
input[type=checkbox], input[type=radio] {width: 20px;height: 20px;margin: 5px 5px 5px 0;background-color:transparent;background-image:url('/icons/check_off.png');padding:0;border:none;background-size:contain;border-radius:0;}
label input[type=checkbox] {margin:0;}
input:checked {background-image:url('/icons/check_on.png?das');}
input:focus, select:focus, textarea:focus {border-color:var(--mid-grey);}
textarea {height:92px;}
label {padding:8px 0;}
label.error {grid-column-end: -1;margin: -20px 0 -15px;color: var(--orange);font-size: 13px;font-weight: 400;text-align: right}
.form_errors {display:none;padding:30px 0 0;color:var(--orange)}

label .req {padding-left:5px;color:var(--orange);font-weight:500;font-size:13px;position:absolute;}

.secret {position:relative;}
.secret:after {position:absolute;top:0;left:0;right:0;content:'🔑 Click to reveal';z-index:10;padding:8px;color:#aaaaaa;}
.update {position:relative;}
.update:after {position:absolute;top:0;right:0;content:'🖊️ Edit';z-index:10;padding:8px;color:#aaaaaa;}

.inline_top {margin:15px 0;}
.on_white .inline_top {margin: -15px -15px 15px;padding: 15px;background-color: var(--lighter);}
.inline_top label, .inline_top input {margin-right:10px}
.inline_top input, .inline_top select {background-color:#ffffff;}
.inline_top input[type=submit] {margin:0;padding:5px 20px;background-color:var(--accent);}

.already {background-color: var(--mid-grey);padding: 15px;display:none;border-radius:var(--corner)}
.notallowed {background-color: var(--orange);color:var(--white);padding: 15px;display:none;border-radius:var(--corner)}

#calendar {display:grid;grid-gap:30px;grid-template-columns:repeat(3, 1fr)}
#calendar>div {background-color:#ffffff;border-radius:var(--corner);overflow:hidden}
.month {display:grid;grid-template-columns:repeat(7, 1fr);text-align:center;border-radius:var(--corner);overflow:hidden;margin:3px;grid-gap:0px;overflow:hidden;}
.month>strong {grid-column:1 / span 7;padding:10px 0;}
.month>span {padding:5px 0;opacity:0.5}
.month>div {padding:10px 0;background-color:var(--light);position:relative;border:1px solid #ffffff;overflow:hidden;}
.month>div>div {position:absolute;top:0;bottom:0;background-color:var(--accent);left:-1px;right:-1px;opacity:0.5;transition:opacity 0.25s ease-in-out;cursor:pointer;}
.month>div>span {opacity:1}
.month>div>div.owner {background-color:var(--grey);}
.month>div:nth-child(7n+2)>div {left:0}
.month>div:nth-child(7n+1)>div {right:0}
.month>div>div.arr {right:-20px;left:60%;transform:skew(-20deg,0)}
.month>div>div.dep {left:-20px;right:60%;transform:skew(-20deg,0)}

.slidein {position: fixed;top: 0;left: 1000%; width: 100%;bottom: 0; z-index: 125; backdrop-filter: blur(1px); background-color: rgba(60,60,60,0.25);opacity:0;transition:opacity 0.5s ease-in-out}
.slidein_panel {position:absolute;top:0;right:0;bottom:0;width:100%;max-width:500px;background-color:#ffffff;z-index:125;transform:translateX(100%);transition:transform 0.5s ease-in-out}
.slidein_content {position:absolute;top:60px;width:100%;height:calc(100% - 60px);overflow-y:auto;overflow-x:hidden;padding:20px;}

.slidein_close {position:fixed;top:0;right:0;height:60px;width:60px;font-size:25px;padding:15px;cursor:pointer;z-index:126;font-weight:500;}
.slidein_content>:first-child {display:block;margin:0;position:fixed;top:0;left:0;right:0;height:60px;font-size:25px;padding:15px 20px;background-color:var(--lighter);z-index:10;}
.slidein_content .top_options {margin:-15px -15px 20px;padding:15px;background-color:var(--lightest);}
.slidein_content .top_options a {color:var(--accent);margin:0 5px}

.slid .slidein {left:0;opacity:1;}
.slid .slidein_panel {transform:translateX(0%);z-index:120;}
.slid.sliding .slidein {opacity:0;}
.slid.sliding .slidein_panel {transform:translateX(100%);}
.slid, .menu-open {overflow:hidden}

.booking_form {display:grid;grid-template-columns:80px 1fr 80px 1fr;grid-gap:5px 10px;}
.booking_form + .booking_form {margin:5px 0 0;padding:5px 0 0;border-top:1px solid var(--light);}
.booking_form .wide {grid-column:2 / span 3}

.date_range {display:grid;grid-template-columns:1fr auto 1fr;grid-gap:10px;align-items:center;}
.booking_form .for_checkbox {    grid-column: 2 / span 3; background-color: var(--lightest); border-radius: var(--corner);position:relative;padding:10px}
.booking_form .for_checkbox input {position:absolute;top:50%;left:-30px;transform:translateY(-50%);width:16px;height:16px;margin:0;}

.flashes {display: grid;grid-gap: 30px; margin: 10px 0 30px; grid-template-columns: repeat( 5, minmax(150px, 1fr)); text-align: center;}
.flashes>div {background-color:var(--accent);padding:100px 10px 20px;color:#ffffff;font-weight:400;font-size:18px;border-radius:var(--corner);position:relative;}
.flashes>div>i {position:absolute;top:20px;left:50%;transform:translateX(-50%);font-size:60px;color:#ffffff;opacity:0.66;}

form .flashes>div {background-color:var(--white);}
form .flashes>div>i {color:var(--accent);}
form .flashes input {text-align:center;font-size:18px;margin:0 0 -10px;;}


.tab_menu {background-color:var(--white);padding:10px;border-radius:var(--corner);margin:30px 0;position:sticky;top:0;z-index:10;border:1px solid var(--light)}
.tab_menu a {display:inline-block;padding:10px 10px 7px;margin:0 5px;font-size:20px;color:var(--black);font-weight:400;border-bottom:3px solid var(--white);transition: border-color 250ms ease-in-out;position:relative;}
.tab_menu a.open {border-color:var(--accent)}
.tab_menu a:not(.open):hover {border-color:var(--mid-grey);}

.tab_menu a.alert {background-color:var(--orange);color:#ffffff;border-radius:5px;border-bottom-color:var(--orange);}
.tab_menu a.alert.open {border-bottom-color:var(--orange);background-color:#ffffff;color:var(--orange)}

.prop_photo {text-align:center;}
.prop_photo i {display:inline-block;font-size:64px;margin:60px auto 20px;}
.prop_photo img {max-width:100%;border-radius:var(--corner)}

.tab {display:none;overflow-x:hidden;}
.tab.open {display:block}

.ignore, .retry {text-decoration:underline;text-align:right;cursor:pointer;}


.range input {display:inline-block;width:100px;background-color:#ffffff;margin-right:5px}
.range input[type=submit] {background-color:var(--grey);border:none;padding:8px 20px;margin-top:0;}


.warning {position:relative;padding:10px 10px 10px 50px;border:3px solid var(--orange);background-color:#ffffff;border-radius:5px;color:var(--black);margin-left:10px;}
.warning strong {position:absolute;top: 0;left: 0;width: 40px;bottom: 0;background-color: var(--orange);position: absolute;line-height: 40px;text-align: center;color: #ffffff;    font-size: 25px;}

.max_view {background-color:#ffffff;position:fixed;top:0;left:300px;right:0;bottom:0;overflow:scroll}

.rg_holder {width:100%;overflow:scroll;max-height:90vh;padding:0;}

.rg {margin:0;table-layout:fixed;}
.rg td:first-child {width:200px;white-space:nowrap;overflow:hidden;}
.rg td:nth-last-child(0) {width:100%;}
.rg td:first-child {position:sticky;left:0;z-index:2;background-color:#ffffff;height:40px;}
.rg td:first-child a {position:absolute;left:20px;top:50%;width:calc(100% - 20px);overflow:hidden;display:block;height:25px;transform:translateY(-50%);}

.rg_header {position:sticky;top:0;background-color:#ffffff;z-index:10;height:150px;display:grid;grid-template-columns:200px 1fr;align-items:stretch;}
.rg_toggles {position:sticky;left:0;background-color:#ffffff;z-index:30;padding:10px;}
.rg_toggles>* {margin-top:10px;}
.rg_headings {display:grid;grid-auto-flow:column;grid-template-columns: 100px 100px repeat( auto-fit, minmax(40px,40px) );align-items:end;}
.hhuk_view .rg_headings {padding-left:100px}
.rg_headings div {position:relative;}
.rg_headings div div {height: 135px ;width:30px;position: relative ;}
.rg_headings span {bottom: 0 ;left: 50% ;position: absolute ;z-index:20;transform: rotate( -45deg ) ;transform-origin: center left ;white-space: nowrap ;}

.rg .big_view {font-size:13px;opacity:0.6;width:100px}

.hhuk_col {width:100px;white-space:nowrap;overflow:hidden;font-size:14px;}


.rg-toggle {background-color:var(--orange);border:2px solid #ffffff;width:40px;}
.rg-toggle.green {background-color:var(--accent);}

.rg_headings .tooltip {display:none;position:absolute;top:calc(100% + 5px);left:50%;transform:translateX(-50%);background-color:var(--light);font-size:14px;padding:5px;border-radius:5px;line-height:18px;width:260px;margin:0;text-align:center;}
.rg_headings>div:hover .tooltip {display:block;}

.doc_opts {display: grid;grid-template-columns: 1fr 100px 100px;grid-gap: 15px;}
.doc_opts div  {border-radius:5px;background-color:var(--accent);width:100%;height:100%;line-height:100%;position:relative}
.doc_opts a {width:100%;height:100%;position:absolute;top:0;left:0;color:#ffffff;font-weight:500;display:grid;align-items:center;text-align:center;}

.folder_tree {margin:-10px;border-radius:5px;display:grid;grid-gap:1px;box-shadow:var(--shadow);overflow:hidden;}
.folder_tree>div {display:grid;grid-template-columns:1fr 125px 125px;grid-gap:5px;border-bottom:1px solid var(--light);background-color:#ffffff;}
.folder_tree .headrow {background-color:var(--light);font-weight:500;}
.folder_tree>div>div {padding:6px 10px;}
.folder_tree>div:hover {background-color:var(--light);}
.folder_tree>div>div:last-child {text-align:right}
.folder_tree i {opacity:0.5;margin-left:5px;cursor:pointer;}
.folder_tree i:hover {opacity:1}
.folder_tree a {color:var(--black);text-decoration:underline;}


.filters>span {display:inline-block;background-color:var(--mid-grey);padding:5px;padding-right:8px;margin: 0 6px 5px 0;border-radius:5px;height:30px;cursor:pointer;}
.filters>span>span {float:left;display:block;background-color:var(--white);border-radius:5px;aspect-ratio:1;height:26px;width:26px;margin:-3px 8px -3px -3px;line-height:26px;text-align:center;color:var(--black) !important}
.filters>span.selected {background-color:var(--accent);color:var(--white);font-weigh:bold;}

.page .dropzone {min-height:100px;margin:15px 0;border:none;border-radius:5px;border:1px solid var(--light)}
.page .dropzone .dz-error {display:none;}
.doc_errors {color:var(--orange)}

.doc_upload, .doc_linkadd {display:none}


.dot {width:10px;height:10px;background-color:var(--accent);display:inline-block;margin-right:10px}


.inline_fields input {display:inline;padding:3px;border:none;margin:-3px 3px;width:100px;text-align:center}
.inline_fields select	{display:inline;padding:3px;border:none;margin:-3px 3px;width:150px;}

.swal2-actions {flex-direction:row-reverse}
.swal2-actions button {font-weight:bold;margin:5px}
.swal2-title {font-weight:500;padding:10px;font-size:26px}
.swal2-actions button.swal2-cancel {background-color:var(--grey);}

@media only screen and (max-width: 1399px) {
	body {max-width:100%;overflow-x:hidden}
	.warnings {display:block;margin: 15px 0}
	.warning {display:block;margin-left:0;margin-top:5px;}
}



@media only screen and (max-width: 1300px) and (min-width:1001px) {
  body {padding:120px 30px 30px}
  .sidebar {position:absolute;left:0;width:100%;height:120px;padding:15px 30px}
  .sidebar>div {display:grid;grid-template-columns:100px 1fr 120px 120px;grid-gap:15px}
  .sidebar>div>* {padding-bottom:0;}
  .sidebar .logo {max-width:100%;}
  .sidebar .menu {grid-row:2;grid-column: 1 / span 2}
  .sidebar .menu a {display:inline-block;margin:0 20px 0 0;}
  .sidebar .search {grid-column:4}
  .sidebar .search input {max-width:120px}
  .sidebar .user-host {grid-column:3;grid-row:1;}
  .sidebar .user {grid-column:3 / span 2;padding-left:0px;text-align:right;}
  .sidebar .user-name {display:inline;padding-right:10px}
  .sidebar i {display:none;}
  .searched .search_pane {left:0;top:120px;bottom:0;padding:30px;}
  .searched .sidebar {position:fixed;z-index:20}
  .sidebar .user a {display:inline-block;margin-left:15px}
  
  .max_view {top:120px;left:0;}
}


.mobile-header {display:none}
.pill {position:absolute;top:0;right:0;background-color:var(--accent);width:38px;height:38px;border-radius:var(--corner)}

.pill.open {border-bottom-left-radius:0;border-bottom-right-radius:0;border-bottom:1px solid #ffffff99}
.pill.open + div {display:block;}

@media only screen and (min-width: 1001px) {
/*	.pill {display:none}*/
}
  #mobile_results {display:none}

@media only screen and (max-width: 1000px) {
  .mobile-header {display:block;text-align:center;background-color:#ffffff;border-bottom:2px solid var(--lighter);padding:15px;position:fixed;top:0;left:0;width:100%;height:80px;z-index:110}
  #calendar {grid-template-columns: 1fr 1fr}
  .two_col, .equal-grid {grid-template-columns: 1fr;grid-auto-flow:revert;grid-gap:0;}
  .sidebar {left:-300px}
  body {padding:80px 0 20px;}
  .page {margin:0 20px}
  .logo {max-height:100%;}
  .menu-toggle {position: absolute;top: 15px;left: 15px;height: 50px;width: 40px;}
  .menu-open .sidebar {left:0;z-index:120;top:80px;background-color:rgba(60,60,60,0.25);width:100%;padding:0;}
  .menu-open .sidebar>div {max-width:300px;background-color:#ffffff;padding:20px;overflow-y:auto;overflow-x:hidden;}
  .sidebar>div>:first-child {display:none;}
  table thead {top:auto;position:relative;}
  .tab_menu {white-space:nowrap;overflow-x:auto;top:80px;z-index:110;border-left:none;border-right:none;margin-bottom:0;}
  .flashes {padding:0 20px;overflow-x:auto;margin-right:-20px;margin-left:-20px}
  .tabs {margin-lefT:-20px;margin-right:-20px}
  .tab {padding:20px;}
  .searched .search_pane {display:none !important}
  .searched #mobile_results {display:block;margin:0;}
  #mobile_results a {background-color:var(--lighter);border-radius:var(--corner);margin:2px -1px;padding:7px;display:block;color:var(--black);}
  #mobile_results a div:not(:first-child) {display:none;}
  .on_white, .two_col .on_white {margin-right:-20px;margin-left:-20px;width:calc(100% + 40px);border-radius:0;border-left:none;border-right:none;}
  .two_col .on_white h3 {left:20px}
  .on_white table:not(.rg) td {background-color:#ffffff;}
  .on_white table {white-space:pre;margin:0;width:100%}
 .mobile_scroll {margin-left:-20px;margin-right:-20px;overflow-x:scroll;max-width:calc(100% + 40px);} 
 .mobile_scroll .on_white {margin-right:0;margin-left:0;width:100%;padding:0;border-top:none;}
 .mobile_scroll thead td {border-top:1px solid var(--light);}
 .mobile_scroll table td:first-child {position:sticky;left:0px;max-width:50%;}
 .on_white .mobile_scroll {padding:0 15px;}
 
   .max_view {top:80px;left:0;}

 
}
  .pill + div {position:absolute;top:38px;right:0;display:none;width:150px;z-index:111;border-radius:var(--corner);border-top-right-radius:0;overflow:hidden}
.pill + div>* {display:block;width:100%;padding:8px 10px !important;font-weight:400 !important;background-color:var(--accent) !important;color:#ffffff !important;border-width:0px !important;border-radius:0 !important;text-align:right;margin-left:0 !important;border-bottom:1px solid #ffffff99 !important}
.pill + div>*:last-child {border-bottom:none !important}
.pill i {color: #ffffff;position: absolute;top: 50%;left: 50%; transform: translate(-50%, -50%);font-size:22px}


@media only screen and (min-width: 601px) {
	.mobile_only {display:none}
}
@media only screen and (max-width: 600px) {
	body, input, select {font-size:16px;}
  #calendar {grid-template-columns: 1fr}
  .on_white .inline_top {display:grid;grid-template-columns:125px 1fr;grid-gap:10px}
  .on_white .inline_top label, .on_white .inline_top input, .on_white .inline_top select {width: 100% !important;margin:0;}
  .page-title h1 span {display:block;margin-left:0;margin-top:5px;font-weight:500;}
  .prop_photo {grid-row:1;}
  .page-title {grid-template-columns:1fr;}
  .page-title>*:nth-child(2) {float:left;margin-left:0;}
  body.login_screen {background-color:#ffffff;}
  .login_screen .side {width:100%;padding:25px;}
  .login_screen .side>img {display:none;}
  .datatable:not(.mobile_full) td:not(:first-child):not(.unhide) {display:none;}
  .datatable td.unhide, .datatable td.mobile_only {display:table-cell}
  .options_grid, .supplier_grid {grid-template-columns:1fr 1fr;grid-gap:15px}
  .page-title h1 {padding-right:50px}
	.rg td {max-width:200px !important}
  

	.form-grid.ff {grid-template-columns:1fr;grid-gap:5px}
	.form-grid.ff .full {grid-column:1 / span 1}
	.form-grid.ff>label, .form-grid.ff>.label {padding:10px 0 0}
	

	
}









.lds-ring, .saving:after {contnet:" ";display: inline-block;position: relative;width: 80px;height: 80px;margin:0 auto;}
.lds-ring div {box-sizing: border-box;display: block;position: absolute;width: 64px;height: 64px;margin: 8px;border: 8px solid var(--accent);  border-radius: 50%;animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;border-color: var(--accent) transparent transparent transparent;}
.lds-ring div:nth-child(1) { animation-delay: -0.45s;}
.lds-ring div:nth-child(2) { animation-delay: -0.3s;}
.lds-ring div:nth-child(3) { animation-delay: -0.15s;}
@keyframes lds-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}


/*!
 * Hamburgers
 * @description Tasty CSS-animated hamburgers
 * @author Jonathan Suh @jonsuh
 * @site https://jonsuh.com/hamburgers
 * @link https://github.com/jonsuh/hamburgers
 */
.hamburger {
  position:absolute;top:50%;left:0;transform:translateY(-50%);
  display: inline-block;
  cursor: pointer;
  transition-property: opacity, filter;
  transition-duration: 0.15s;
  transition-timing-function: linear;
  font: inherit;
  color: inherit;
  text-transform: none;
  background-color: transparent;
  border: 0;
  margin: 0;
  overflow: visible; }
  .hamburger:hover {
    opacity: 0.7; }
  .hamburger.is-active:hover {
    opacity: 0.7; }
  .hamburger.is-active .hamburger-inner,
  .hamburger.is-active .hamburger-inner::before,
  .hamburger.is-active .hamburger-inner::after {
    background-color: var(--accent); }

.hamburger-box {
  width: 40px;
  height: 26px;
  display: inline-block;
  position: relative; }

.hamburger-inner {
  display: block;
  top: 50%;
  margin-top: -2px; }
  .hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
    width: 40px;
    height: 4px;
    background-color: var(--accent);
    border-radius: 4px;
    position: absolute;
    transition-property: transform;
    transition-duration: 0.15s;
    transition-timing-function: ease; }
  .hamburger-inner::before, .hamburger-inner::after {
    content: "";
    display: block; }
  .hamburger-inner::before {
    top: -10px; }
  .hamburger-inner::after {
    bottom: -10px; }


/*
   * Squeeze
   */
.hamburger--squeeze .hamburger-inner {
  transition-duration: 0.075s;
  transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  .hamburger--squeeze .hamburger-inner::before {
    transition: top 0.075s 0.12s ease, opacity 0.075s ease; }
  .hamburger--squeeze .hamburger-inner::after {
    transition: bottom 0.075s 0.12s ease, transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19); }

.hamburger--squeeze.is-active .hamburger-inner {
  transform: rotate(45deg);
  transition-delay: 0.12s;
  transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  .hamburger--squeeze.is-active .hamburger-inner::before {
    top: 0;
    opacity: 0;
    transition: top 0.075s ease, opacity 0.075s 0.12s ease; }
  .hamburger--squeeze.is-active .hamburger-inner::after {
    bottom: 0;
    transform: rotate(-90deg);
    transition: bottom 0.075s ease, transform 0.075s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); }