/*
 *   Reset
 */

 body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,select,textarea,p,blockquote,th,td{margin:0;padding:0;}
 table{border-collapse:collapse;border-spacing:0;}
 fieldset,img{border:0;}
 address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}
 strong{font-weight:700;}
 ol,ul{list-style:none;}
 caption,th{text-align:left;}
 h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
 q:before,q:after{content:'';}abbr,acronym{border:0;}
 
 button::-moz-focus-inner {border:0; padding:0;}
 
 /*
  *   Styles
  */
 
 * {box-sizing:border-box;}
 
 :root {
   --bop-blue: #008aff;
   --bop-blue-light: #70bdff;
   --bop-green: #0c0;
   --bop-red: #c00;
 }
 
 html {display:flex; min-height:100%;}
 body {display:flex; flex-direction:column; flex:1; min-height:100%;}
 
 body,
 select,
 input[type="text"],
 input[type="password"],
 textarea,
 button,
 table {font-family:'Assistant', sans-serif; font-size:14px; line-height:1.4em; color:#333;}
 
 select,
 input[type="text"],
 input[type="password"],
 textarea {padding:5px; border:1px solid rgba( 0,0,0, .2 ); border-radius:3px;}
 
 p {margin:0 0 1em 0;}
 
 a:link,
 a:visited {color:#333; text-decoration:none;}
 a:hover {color:var(--bop-blue); text-decoration:none;}
 
 em {font-style:italic;}
 
 h1 {font-weight:bold; font-size:24px;}
 h2 {font-weight:bold; font-size:20px;}
 h3 {font-weight:bold; font-size:18px;}
 h3 {margin:0 0 15px 0; font-weight:bold; font-size:16px; color:var(--bop-blue);}
 h3 a:link,
 h3 a:visited {color:var(--bop-blue);}
 h3 strong {display:inline-block; vertical-align:baseline; padding:5px; border-radius:3px; background:var(--bop-blue); color:#fff; line-height:1em;}
 h3 .tag {vertical-align:baseline;}
 h3 .red strong {background:#f00;}
 h3 .green strong {background:#00b306;}
 h3 .purple strong {background:#840d92;}
 h3 .grey,
 h3 a.grey:link,
 h3 a.grey:visited {color:#7f7f7f;}
 h3 .grey strong {background:#7f7f7f;}
 
 hr {margin:10px 0 20px 0; border:0; border-bottom:1px solid rgba( 0,0,0, .1 );}
 
 .float-none {float:none;}
 .float-left {float:left;}
 .float-right {float:right;}
 
 .text-left {text-align:left;}
 .text-center {text-align:center;}
 .text-right {text-align:right;}
 
 .space-left {margin-left:5px;}
 .space-right {margin-right:5px;}
 .space-bottom {margin-bottom:5px;}
 .space-top {margin-top:5px;}
 .space {margin:5px;}
 
 .full-width {width:100%;}
 
 .nowrap {white-space:nowrap;}
 .pre-wrap {white-space:pre-wrap;}
 
 button,
 button:disabled,
 a.button {display:inline-flex; align-items:center; padding:8px 10px; background:linear-gradient( to bottom, #fefefe, #eee ); border:1px solid rgba( 0,0,0, .25 ); border-radius:3px; color:#000; font-weight:600; font-size:14px; line-height:1em; text-decoration:none; cursor:pointer;}
 button:hover,
 a.button:hover {background:linear-gradient( to bottom, #eee, #ddd );}
 
 button i,
 a.button i {margin:0 .7em 0 .1em; font-size:.8em; color:rgba( 0,0,0, .5 );}
 
 button.save,
 a.button-save {background:linear-gradient( to bottom, rgba( 0,125,255, .8 ), rgba( 0,125,255, 1 ) ); color:#fff;}
 button.save i,
 a.button-save i {color:rgba( 255,255,255, .5 );}
 button.save:hover,
 a.button-save:hover {background:linear-gradient( to bottom, rgba( 0,97,223, 1 ), rgba( 0,125,255, 1 ) ); color:#fff;}
 
 button.small,
 .button.button-small {padding:5px 8px; font-size:11px; line-height:1em;}
 
 button.delete,
 .button.button-delete {background:linear-gradient( to bottom, #fffdfd, #fdd ); border-color:rgba( 221,0,0, .25 ); color:#d00;}
 button.delete i,
 .button.button-delete i {color:rgba( 240,0,0, .5 );}
 button.delete:hover,
 .button.button-delete:hover {background:linear-gradient( to bottom, #fdd, #fcc );}
 
 button:disabled,
 button:disabled:hover,
 .button-disabled {opacity:.5; cursor:default;}
 
 a.button-xero:link,
 a.button-xero:visited,
 button.xero {background:#048abb; color:#fff;}
 a.button-xero i,
 button.xero i {color:rgba( 255,255,255, .5 );}
 
 a.button-cloudflare:link,
 a.button-cloudflare:visited,
 button.cloudflare {background:#f28021; color:#fff;}
 a.button-cloudflare i,
 button.cloudflare i {color:rgba( 255,255,255, .5 );}
 
 a.button-linode:link,
 a.button-linode:visited,
 button.linode {background:#3bb878; color:#fff;}
 
 .red {color:#f00;}
 .green {color:#00b306;}
 .purple {color:#840d92;}
 
 .quiet {color:#999;}
 .bold {font-weight:bold;}
 
 .layout {position:relative; flex:1; display:flex;}
 
 .pageresponse {opacity:1; transition:opacity .5s;}
 .pageresponse.small {display:inline-flex; margin-right:10px; opacity:1;}
 .pageresponse.small i {margin:0; font-size:12px; color:rgba( 0,125,255, .7 );}
 .pageresponse.small i:hover {color:rgba( 0,125,255, 1 );}
 .pageresponse.small .text {display:none;}
 .pageresponse.fixed {position:fixed; z-index:3; top:10px; left:50%; transform:translateX(-50%); min-width:50vw; max-width:90vw; margin:0 0 15px 0; padding:10px 20px; background:var(--bop-blue); border-radius:3px; font-size:14px; font-weight:bold; color:rgba( 255,255,255, 1 );}
 .pageresponse.fixed .inner {display:flex; align-items:center;}
 .pageresponse.fixed .inner > i {margin-right:15px; color:rgba( 255,255,255 .5 ); font-size:18px;}
 .pageresponse.fixed .text {flex:1; display:flex; align-items:center; justify-content:space-between;}
 .pageresponse.fixed .text .close {color:rgba( 255,255,255, .75 ); line-height:1em;}
 .pageresponse.fixed .text .close:hover {color:rgba( 255,255,255, 1 );}
 .pageresponse.fade {opacity:0; pointer-events:none;}
 .pageresponse.fade.small {opacity:1;}
 .pageresponse  {opacity:1;}

 header {display:flex; align-items:center; justify-content:space-between; padding:15px 20px 15px 20px; background:rgba( 0,0,0, .01 ); border-bottom:1px solid rgba( 0,0,0, .1 ); box-shadow:0 0 10px 0 rgba( 0,0,0, .05 );}
 header .spacer {flex:1;}
 
 header .site-selector {display:flex; align-items:center; flex:1;}
 header .site-selector h3 {margin:0; font-size:18px;}
 header .site-selector select {background:rgba( 255,255,255, 0 ); border:1px solid rgba( 0,0,0, .1 ); border-radius:3px; color:#333; font-weight:bold;}
 header .site-selector select:focus,
 header .site-selector select:hover {background:rgba( 255,255,255, 1 ); border:1px solid rgba( 0,0,0, .2 );}
 header .site-selector > a:link,
 header .site-selector > a:visited {display:inline-flex; align-items:center; margin-left:15px; color:rgba( 0,0,0, .5 ); text-decoration:none;}
 header .site-selector > a:hover {color:#000;}
 header .site-selector > a i {margin-right:5px; font-size:11px; color:rgba( 0,0,0, .25 );}
 header .site-selector > a:hover i {color:rgba( 0,0,0, .75 );}
 
 header .user {flex:1; margin-right:25px; color:rgba( 0,0,0, .75 ); text-align:right;}
 header .user a:link,
 header .user a:visited {color:rgba( 0,0,0, 1 );}
 header .user a:hover {text-decoration:underline;}
 header .user .sep {margin:0 8px; color:rgba( 0,0,0, .1 );}
 
 header .search {position:relative; z-index:2;}
 header .search input {position:relative; z-index:2; width:400px; padding:8px 16px; background:rgba( 255,255,255, 1 ); border:1px solid rgba( 0,0,0, .1 ); color:#333; outline:none; line-height:1em;}
 header .search input::placeholder {color:rgba( 0,0,0, .5 );}
 header .search::after {content:''; position:fixed; left:0; top:0; bottom:0; right:0; z-index:1; background:rgba( 0,0,0, 0 ); pointer-events:none; transition:background .1s;}
 header .search input:hover {border:1px solid rgba( 0,0,0, .2 );}
 header .search.open input,
 header .search input:focus {border:1px solid rgba( 0,0,0, .6 ); box-shadow:0 3px 10px 2px rgba( 0,0,0, .2 );}
 header .search.open::after {background:rgba( 0,0,0, .3 );}
 
 header .search .results {position:absolute; z-index:1000; top:100%; margin-top:3px; display:flex; flex-direction:column; width:100%; max-height:50vh; overflow:auto; border-radius:3px; box-shadow:0 3px 10px 2px rgba( 0,0,0, .2 );}
 header .search .results .row,
 header .search .results a:link,
 header .search .results a:visited {display:flex; align-items:center; justify-content:space-between; padding:8px 16px; background:#fff; border-bottom:1px solid rgba( 0,0,0, .1 ); text-decoration:none; color:#000;}
 header .search .results a:hover {background:#eee; color:#000;}
 header .search .results .row:first-child,
 header .search .results a:first-child {border-radius:3px 3px 0 0;}
 header .search .results .row:last-child,
 header .search .results a:last-child {border-radius:0 0 3px 3px;}
 header .search .results .row:only-child,
 header .search .results a:only-child {border-radius:3px;}
 header .search .results a.selected {background:var(--bop-blue); color:#fff;}
 header .search .results a.selected .tag {background:rgba( 255,255,255, .15 ); color:rgba( 255,255,255, .75 );}
 header .search .results a.selected .tag i {color:rgba( 255,255,255, .5 );}
 header .search .results.loading {pointer-events:none;}
 header .search .results.loading:after {content:''; position:absolute; left:0; top:0; right:0; bottom:0; background:rgba( 255,255,255, .5 );}
 
 header .search .results .result .name-parts {display:flex; flex-direction:column;}
 header .search .results .result .name-parts .trail {font-size:11px; line-height:1.4em; color:rgba( 0,0,0, .5 );}
 header .search .results .result .name-parts .trail span:not(:first-child):before {content:'»'; margin:0 5px; color:rgba( 0,0,0, .25 );}
 header .search .results .result.selected .name-parts .trail {color:rgba( 255,255,255, .5 );}
 header .search .results .result.selected .name-parts .trail span:not(:first-child):before {color:rgba( 255,255,255, .25 );}
 
 header .custom-selector {position:relative; z-index:3; display:inline-flex;}
 header .custom-selector .control {position:relative; z-index:1; display:inline-flex; justify-content:space-between; align-items:center; font-weight:bold; cursor:default;}
 header .custom-selector .control h3 a {text-decoration:none;}
 header .custom-selector .control h3 a:hover {color:rgba( 0,0,0, .75 );}
 header .custom-selector.selectable .control {width:180px; padding:5px 10px; border:1px solid rgba( 0,0,0, .1 ); border-radius:3px;}
 header .custom-selector:not(.selectable) .control {margin:0 20px 0 0; padding:0 10px; font-size:18px; line-height:1em;}
 header .custom-selector .control:hover {border-color:rgba( 0,0,0, .25 );}
 header .custom-selector .control i {opacity:1; transition:opacity .1s; margin-left:30px; font-size:12px;}
 header .custom-selector:not(.selectable) .control i {display:none;}
 header .custom-selector .control input {width:100%; padding:5px 10px; outline:none; border:0;}
 header .custom-selector.open .control {position:relative; z-index:3; padding:0; background:#fff;}
 header .custom-selector.open .control i {opacity:0; margin:0 10px 0 0;}
 header .custom-selector.open .control,
 header .custom-selector .control:focus {border:1px solid rgba( 0,0,0, .6 ); box-shadow:0 3px 10px 2px rgba( 0,0,0, .2 );}
 header .custom-selector .control .label {flex:1;}
 header .custom-selector .results {position:absolute; z-index:3; left:0; top:100%; display:flex; flex-direction:column; min-width:250px; max-height:300px; overflow:auto; margin-top:3px; background:#fff; border-radius:5px; box-shadow:0 3px 10px 0 rgba( 0,0,0, .2 );}
 header .custom-selector .results a {padding:10px 15px; border-bottom:1px solid rgba( 0,0,0, .05 ); text-decoration:none;}
 header .custom-selector .results a:last-child {border-bottom:0;}
 header .custom-selector .results a:hover {background:rgba( 0,0,0, .05 );}
 header .custom-selector .results a.active {font-weight:bold;}
 header .custom-selector .results a.selected {background:var(--bop-blue); color:#fff;}
 header .custom-selector .results.empty:after {content:'No sites found.'; padding:10px 15px;}
 header .custom-selector::after {content:''; position:fixed; left:0; top:0; bottom:0; right:0; z-index:1; background:rgba( 0,0,0, 0 ); pointer-events:none; transition:background .1s;}
 header .custom-selector.open::after {background:rgba( 0,0,0, .3 );}
 
 
 nav {position:relative; z-index:2; display:flex; flex-direction:column; min-width:220px; padding:30px 15px; background:rgba( 0,0,0, .04 ); border-right:1px solid rgba( 0,0,0, .05 );}
 
 nav a:link,
 nav a:visited {display:flex; align-items:center; margin:5px 0; padding:8px 30px 8px 15px; border-radius:3px; color:#000; text-decoration:none;}
 nav a i {width:30px; font-size:16px; color:rgba( 0,0,0, .3 );}
 nav a:hover i {color:rgba( 0,0,0, .7 );}
 nav a.active {}
 nav a.active i {color:rgba( 0,0,0, .7 );}
 
 nav > ul {display:flex; flex-direction:column; width:100%; margin:0;}
 nav > ul > li {position:relative; display:flex; width:100%; margin:5px 0;}
 nav > ul > li.hassub:after {content:'\f054'; font-family:"Font Awesome 5 Free"; position:absolute; right:10px; top:50%; transform:translateY(-50%); font-weight:bold; color:rgba( 0,0,0, .2 ); font-size:11px; opacity:1; transition:opacity .1s;}
 nav > ul > li > a:link,
 nav > ul > li > a:visited {margin:0;}
 nav > ul > li:hover > a:link,
 nav > ul > li:hover > a:visited,
 nav > ul > li > a:hover {/*background:linear-gradient( to left, rgba( 0,0,0, 0 ) 0%, rgba( 0,0,0, .2 ) 100% );*/}
 nav > ul > li:hover > a:link i,
 nav > ul > li:hover > a:visited i,
 nav > ul > li > a:hover i {color:rgba( 0,0,0, .7 );}
 nav > ul > li a.active {color:var(--bop-blue); font-weight:700;}
 nav > ul > li a.active i,
 nav > ul > li:hover a.active i {color:var(--bop-blue-light);}
 nav > ul ul {opacity:0; transition:opacity .15s; pointer-events:none; display:flex; flex-direction:column; position:absolute; z-index:2; left:100%; top:0; min-width:200px; padding:5px; background:#fff; border-radius:3px; box-shadow:0 0 10px 0 rgba( 0,0,0, .2 );}
 nav > ul ul:before {content:'\f0d9'; font-family:"Font Awesome 5 Free"; position:absolute; left:3px; top:10px; transform:translateX(-100%); font-weight:bold; color:#fff; font-size:28px;}
 nav > ul ul li {width:100%;}
 nav > ul ul a:link,
 nav > ul ul a:visited {width:100%; margin:0; padding:8px 15px; color:rgba( 0,0,0, .8 );}
 nav > ul ul a:hover {background:rgba( 0,0,0, .05 );}
 nav > ul ul a i {width:25px; font-size:12px; color:rgba( 0,0,0, .5 );}
 nav > ul ul a:hover i {color:rgba( 0,0,0, .7 );}
 nav > ul ul a.active {/* background:rgba( 0,0,0, .05 ); */ color:var(--bop-blue);}
 nav > ul ul a.active i {color:rgba( 0,125,255, .7 );}
 nav > ul > li > a {flex:1;}
 nav > ul > li.hassub:hover:after {opacity:0;}
 nav > ul > li:hover > ul {opacity:1; pointer-events:all;}
 nav > ul > li > a.disabled {color:rgba( 0,0,0, .3 ); cursor:default;}
 nav > ul > li > a.disabled:hover i,
 nav > ul > li:hover > a.disabled i,
 nav > ul > li > a.disabled i {color:rgba( 0,0,0, .1 );}
 
 nav hr {margin:10px 0; border-bottom:1px solid rgba( 0,0,0, .05 );}
 
 nav form {float:right; padding:10px 0;}
 nav form input[type="text"] {width:200px; margin:1px; border:0; vertical-align:middle;}
 nav form button {border:0; vertical-align:middle;}
 
 main {position:relative; z-index:1; flex:1; padding:45px; background:rgba( 0,0,0, .01 ); border-radius:5px;}
 main h2 {margin:0 0 25px 0; font-size:28px; line-height:1.4em;}
 main h2 .sep {margin:0 5px; color:rgba( 0,0,0, .5 );}
 main h3 {margin:0 0 20px 0;}
 
 table.list {width:100%; margin:0 0 20px 0; font-size:11px; line-height:1.4em;}
 table.list:last-child {margin-bottom:0;}
 table.list th,
 table.list td {padding:8px;}
 table.list th {border-bottom:1px solid rgba( 0,0,0, .2 ); font-weight:700;}
 table.list th h3 {margin-bottom:0;}
 table.list td {border-bottom:1px solid rgba( 0,0,0, .1 );}
 table.list tr:last-child td {border-bottom:0;}
 table.list th.grow,
 table.list td.grow {width:100%;}
 table.list th.shrink,
 table.list td.shrink {width:1px; white-space:nowrap;}
 table.list input[type="text"] {padding:4px 8px;}
 table.list a:link,
 table.list a:visited {text-decoration:none;}
 table.list a:not(.tag):hover {text-decoration:underline;}
 table.list a.button:hover {text-decoration:none;}
 
 .dashcard table.list a:hover {text-decoration:none;}
 .dashcard table.list .tag {white-space:normal;}
 
 table.list[data-sortable] thead th:not([data-sortable="false"]):not([data-sorted="true"])::after {content:'\f0d7'; margin:0 0 0 5px; font-family:"Font Awesome 5 Free"; color:rgba( 0,0,0, 0 );}
 table.list thead th:not([data-sortable="false"]):not([data-sorted="true"]):hover::after {color:rgba( 0,0,0, .2 );}
 table.list thead th:not([data-sortable="false"]):not([data-sorted="true"]):hover:([data-sort-type="numeric"])::after {content:'\f0d8';}
 table.list thead th[data-sorted="true"] {border-bottom:2px solid rgba( 0,138,255, 1 ); color:rgba( 0,138,255, 1 );}
 table.list thead th[data-sorted="true"]::after {margin:0 0 0 5px; font-family:"Font Awesome 5 Free"; font-weight:bold;}
 table.list thead th[data-sorted-direction="ascending"]::after { content:'\f0d8'; }
 table.list thead th[data-sorted-direction="descending"]::after { content:'\f0d7'; }
 
 table.list tfoot td {border-top:2px solid rgba( 0,0,0, .2 ); font-weight:bold;}

 table.list .drag-icon {width:1px; color:rgba( 0,0,0, .25 );}
 table.list i.fa-check {color:var(--bop-green);}
 table.list .tag-xero i.fa-check {color:rgba( 255,255,255, .5 );}
 table.list i.fa-minus {color:var(--bop-red);}
 
 table.list button,
 table.list .button {padding:5px 10px; font-size:11px; white-space:nowrap;}
 
 /*
 table.list tr:nth-child(2n) td {background:#f7f7f7;}
 */
 table.list tr.deleted td,
 table.list tr.deleted td a:link,
 table.list tr.deleted td a:visited,
 table.list tr.inactive td,
 table.list tr.inactive td a:link,
 table.list tr.inactive td a:visited {color:#ccc; text-decoration:line-through;}
 table.list tr td.name {font-weight:bold;}
 table.list tr td.cost {text-align:right;}
 table.list tr td.date {font-size:10px; text-transform:uppercase;}
 table.list tr td .dash {color:#999;}
 table.list tr td.no-padding {padding:0 8px;}
 table.list tr td.no-padding a.button-xero {padding:5px 8px;}
 table.list tr td.no-padding select {padding:3px 8px;}
 
 table.list tr.bare td {background:none; border:0;}
 
 table.list tr.total td {border:0; background:none;}
 table.list tr td.quiet {color:#999;}
 
 table.list select,
 table.list input[type="text"] {max-width:200px; font-size:11px;}
 table.list input[data-datepicker] {max-width:80px;}
 
 table.list textarea {height:26px; transition:height .1s;}
 table.list textarea:focus {height:100px !important;}
 
 table.list tr.row-overdue td {background:#fff3f3;}
 table.list tr.row-voided td {background:#ececec; color:#9e9e9e;}
 table.list tr.row-voided td a:link,
 table.list tr.row-voided td a:visited {color:#9e9e9e;}
 table.list tr.row-voided td a:hover {color:var(--bop-blue);}
 table.list tr.row-voided td .tag {opacity:.5;}
 table.list tr.row-voided td .tag-voided {opacity:1;}
 table.list tr.row-voided td a.button-xero:link,
 table.list tr.row-voided td a.button-xero:visited {color:#fff;}
 
 table.list.slim tr td {padding:5px 8px;}
 
 table.list.notes tr:last-child td {border-bottom:0;}
 
 a.talk:link,
 a.talk:visited {color:#333;}
 a.talk-quiet {opacity:.5;}
 
 table.details th {padding-bottom:10px; font-weight:bold;}
 table.details td {padding-right:30px;}
 
 table.form tr th {padding:8px 16px 8px 0; font-weight:bold;}
 table.form tr td {padding:8px 8px 8px 0;}
 
 /*
 label input[type="checkbox"],
 label input[type="radio"] {margin-right:3px; vertical-align:-2px;}
 */
 
 .filter {display:inline-block; width:100%; margin:0 0 1em 0; padding:10px; background:#fff; border:1px solid rgba( 0,0,0, .1 ); border-radius:3px;}
 .filter .field {display:inline-block; margin:5px;}
 .filter .field label {display:block; font-weight:bold; font-size:11px; color:rgba( 0,0,0, .6 ); text-transform:uppercase;}
 /*
 .filter label {padding:5px; background:#fff; border:1px solid #d7d7d7;}
 */
 
 .tag,
 a.tag {display:inline-flex; align-items:center; gap:5px; padding:5px 8px; white-space:nowrap; border-radius:3px; background:#e6e6e6; color:#222; font-size:10px; line-height:1em; text-transform:uppercase;}
 a.tag:hover {text-decoration:none;}
 .tag i {}
 
 .tag-tpp,
 a.tag-tpp {background:linear-gradient(to bottom,#006eb3 0,#005e99 100%); color:#fff;}
 .tag-arnie {background:#d31f48; color:#fff;}
 .tag-helium {background:#ffbc00; color:rgba( 0,0,0, .8 );}
 .tag-stuffy {background:#22c4be; color:rgba( 255,255,255, .8 );}
 .tag-webcontrolcenter,
 .tag-newtek,
 .tag-ct,
 .tag-crystaltech {background:#6186b3; color:#fff;}
 .tag-linode {background:#3bb878; color:#fff;}
 .tag-cloudflare-workers,
 .tag-cloudflare,
 a.tag-cloudflare {background:#f28021; color:#fff;}
 .tag-google {background:#d14836; color:#fff;}
 .tag-outlook {background:#0078d7; color:#fff;}
 .tag-shopify {background:#7ab55c; color:#fff;}
 .tag-wine-direct {background:#c018a2; color:#fff;}
 .tag-vultr-acpet {background:#00508d; color:#fff;}
 .tag-vultr-mercedes {background:#004c33; color:#fff;}
 .tag-vultr-vip {background:#00b038; color:#fff;}
 .tag-vultr-hoops {background:#e46923; color:#fff;}
 
 .tag-paid,
 a.tag-paid {background:#00b306; color:#fff;}
 .tag-authorised,
 a.tag-authorised {background:#009de8; color:#fff;}
 .tag-overdue,
 a.tag-overdue {background:#d40000; color:#fff;}
 .tag-voided,
 a.tag-voided {background:#000; color:#fff;}
 .tag-bad-debt,
 a.tag-bad-debt {background:#840d92; color:#fff;}
 .tag-sent,
 a.tag-sent {background:#ffc; color:#000; border:1px solid rgba( 0,0,0, .075 );}
 
 .tag-expired {background:#d40000; color:#fff;}
 
 .tag-website {background:#92ffaa;}
 .tag-website::before {content:'\f0ac'; font-family:'Font Awesome\ 5 Free'; font-weight:bold; margin:0 5px 0 0; color:rgba( 0,0,0, .75 );}
 .tag-backup {background:#9864ff; color:#fff;}
 .tag-backup::before {content:'\f0a0'; font-family:'Font Awesome\ 5 Free'; font-weight:bold; margin:0 5px 0 0; color:rgba( 0,0,0, .75 );}
 .tag-email {background:#ffe4c3;}
 .tag-email::before {content:'\f0e0'; font-family:'Font Awesome\ 5 Free'; font-weight:bold; margin:0 5px 0 0; color:rgba( 0,0,0, .75 );}
 .tag-ssl,
 .tag-ssl-install {background:#ffc;}
 .tag-ssl::before,
 .tag-ssl-install::before {content:'\f023'; font-family:'Font Awesome\ 5 Free'; font-weight:bold; margin:0 5px 0 0; color:rgba( 0,0,0, .75 );}
 .tag-domain {background:#ff9abf;}
 .tag-domain::before {content:'\f002'; font-family:'Font Awesome\ 5 Free'; font-weight:bold; margin:0 5px 0 0; color:rgba( 0,0,0, .75 );}
 
 .tag-xero,
 a.tag-xero {background:#048abb; color:#fff;}
 
 .tag-aws,
 a.tag-aws {background:#232f3e; color:#fff;}
 
 .dns-a {color:#333;}
 .dns-aaaa {color:#7c7c7c;}
 .dns-cname {color:#ff7900;}
 .dns-mx {color:#d91698;}
 .dns-txt {color:#9bca3e;}
 .dns-proxied {color:#f28021;}
 
 .fa-lock {color:#0b8043;}
 
 .dashcards {display:flex;}
 .dashcard {display:block; padding:0 30px; -webkit-column-break-inside:avoid; column-break-inside:avoid;}
 .dashcard:first-child {padding-left:0;}
 
 .dashcard-column {display:flex; flex-direction:column;}
 .dashcard-column .dashcard {flex-basis:auto; margin:0 0 30px 0; padding:0;}
 
 .dashboard .dashcard-column .dashcard {flex-basis:50%;}
 
.field {display:flex; flex-direction:column; margin:0 0 20px 0;}
.field:last-child {margin-bottom:0;}
.field label {margin:0 0 5px 0; font-size:14px; font-weight:700; color:rgba( 0,0,0, .8 );}
.field label input[type="checkbox"] {margin:0 5px 0 0;}
.field input[type="text"],
.field input[type="password"],
.field select,
.field textarea {max-width:100%; padding:8px; border:1px solid rgba( 0,0,0, .2 ); border-radius:3px;}
.field input[type="text"]:disabled,
.field input[type="password"]:disabled,
.field select:disabled,
.field textarea:disabled {background:rgba( 0,0,0, .025 ); color:rgba( 0,0,0, .5 );}
.field textarea.full-width {max-width:100%; min-width:100%; width:100%;}
.field input[type="color"] {width:50px; height:32px; border:none; background:none; cursor:pointer;}
.field .hint {margin:5px 0 0 0; font-size:11px; line-height:1.4em; color:rgba( 0,0,0, .5 );}
 
 label[data-label] {}
 label[data-label]:before {content:''; visibility:visible; display:inline-block; margin:0 6px 0 0; vertical-align:-3px; width:11px; height:11px; padding:2px; border:1px solid rgba( 0,0,0, .1 ); border-radius:50%; background:#fff; color:#fff; font-size:11px; line-height:12px; text-align:center;}
 label[data-label] input[type="checkbox"],
 label[data-label] input[type="radio"] {position:absolute; opacity:0;}
 label[data-label]:hover:before {background:rgba( 0,0,0, .05 );}
 label[data-label].focused:before {background:rgba( 0,0,0, .05 );}
 label[data-label].checked:before {content:'\f00c'; font-family:Font Awesome\ 5 Free; vertical-align:1px; background:#00a657; color:#fff; font-weight:900; font-size:9px;}
 label[data-label].checked:hover:before {}
 
 label.delete[data-label].checked:before {content:'\f00d'; background:rgba( 255,0,0, .75 ); border:1px solid rgba( 255,0,0, 1 );}
 
 /*
 label input[type="checkbox"] {visibility:hidden; vertical-align:1px; margin:0 10px 0 0;}
 label input[type="checkbox"]::before {content:''; visibility:visible; display:inline-block; vertical-align:middle; width:14px; height:14px; border:1px solid rgba( 0,0,0, .3 ); border-radius:50%; background:#fff; font-weight:bold;
   transition: all .2s;
 }
 label input[type="checkbox"]:hover:before {background:rgba( 0,0,0, .1 ); border:1px solid rgba( 0,0,0, .5 );}
 label input[type="checkbox"]:checked:before {background:rgba( 0,153,0, 1 ); border:1px solid rgba( 0,153,0, 1 );}
 label input[type="checkbox"]:checked:before {content:'\f00c'; font-family:'Font Awesome\ 5 Free'; font-weight:bold; vertical-align:-1px; background:rgba( 0,153,0, 1 ); color:#fff; font-size:10px; line-height:14px; text-align:center;}
 label input[type="checkbox"]:checked:hover:before {background:rgba( 0,153,0, .75 );}
 
 label.delete input[type="checkbox"]:checked:before {content:'\f00d'; background:rgba( 255,0,0, .75 ); border:1px solid rgba( 255,0,0, 1 );}
 */
 
.login {flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; width:100%; height:100%; background:rgba( 0,0,0, .002 );}
.login form {width:100%; max-width:500px; padding:30px; background:rgba( 0,0,0, .02 ); border-left:5px solid var(--bop-blue); border-radius:0 5px 5px 0; box-shadow:0 4px 5px 0 rgba( 0,0,0, .1 );}
.login h2 {margin:0 0 25px 0; font-size:28px; line-height:1.4em;}
.login .field {margin:0 0 10px 0;}
.login .field label {margin:0 0 5px 0; font-weight:600;}
.login .field input[type="text"],
.login .field input[type="password"] {line-height:1em;}
.login button {margin:10px 0 0 0; padding:10px 20px; background:var(--bop-blue); color:#fff; font-weight:600;}
.login .by-triplezero {margin:10px 0 0 0; font-size:11px; color:rgba( 255,255,255, .25 );}

 .tabs {display:flex; gap:20px; margin:0 0 20px 0; border-bottom:1px solid rgba( 0,0,0, .1 );}
 .tabs a:link,
 .tabs a:visited {display:inline-flex; align-items:center; gap:5px; padding:10px; color:#333;}
 .tabs a:hover {color:var(--bop-blue); text-decoration:none;}
 .tabs a.active {border-bottom:2px solid var(--bop-blue); color:var(--bop-blue);}
 .tabs a .count {display:inline-flex; align-items:center; justify-content:center; min-width:15px; padding:3px 4px; font-size:11px; line-height:1em; background:rgba( 0,138,255, 0.6 ); color:rgba( 255,255,255, .75 ); border-radius:3px; text-align:center;}
 .tabs a.active .count {background:var(--bop-blue); color:#fff;}
  
/* Tooltips */
.tooltip {position:absolute; z-index:1005; transform:translateX(-50%) translateZ(1px); display:none; padding:8px 10px; border-radius:3px; background:#222; color:#fff; font-size:11px; line-height:1.4em; text-align:center; white-space:pre-wrap;}
.tooltip .quiet {color:rgba( 255,255,255, .5 );} 
.tooltip.white {background:#fff; color:#000; box-shadow:0px 0px 2px 2px rgba( 0,0,0, .15 ); font-size:14px; line-height:1.4em; text-align:left;}
.tooltip::before {content:'\f0d8'; pointer-events:none; font-family:Font Awesome\ 5 Free; font-weight:600; font-size:18px; color:#222; position:absolute; left:0; top:0; width:100%; margin-top:-8px; text-align:center;}
.tooltip.left {transform:translateX(-100%) translateY(-50%);}
.tooltip.left::before {content:'\f0da'; left:auto; right:0; top:50%; width:auto; margin-right:-5px; text-align:right;}
.tooltip.white::before {color:#fff;}
 
 @media screen and (max-width:1024px){
   
   nav {text-align:center;}
   nav h1 {display:block; width:100%; text-align:center;}
   nav a:link,
   nav a:visited {margin:10px; padding:10px;}
   nav form {float:none;}
   
   table.website-list,
   table.website-list tbody,
   table.website-list tr,
   table.website-list th,
   table.website-list td {display:block;}
   table.website-list th {display:none;}
   table.website-list tr {border-bottom:2px solid rgba( 0,0,0, .1 );}
   table.website-list tr td {border-bottom:0; border-left:1px solid rgba( 0,0,0, .1 ); border-right:1px solid rgba( 0,0,0, .1 );}
   table.website-list td:before {content:attr(data-header); display:inline-block; vertical-align:top; width:30%; height:100%; margin:-8px 5px -8px -8px; padding:10px; background:#f7f7f7; font-weight:bold; text-transform:none; font-size:14px;}
   
   .dashcards {display:block;}
   .dashcard {margin:0 0 20px 0;}
   
 }