body { margin: 85px 0px 40px 0px; }
#header { height: 60px; display: table; }
#main { opacity: 0; }
.loaded #main { opacity: 1; }
.box { top: 80px; max-width: calc(100% - 80px); width: 850px; color: white; display: table; position: inherit; } /* switched this from #clients to .box */
#clients .cell:first-child { width: 150px; }
#clients .cell { text-align: left; padding: 10px 16px; }
#clients .cell:not(:last-child) { border-right: 1px rgba(255,255,255,0.2) solid; }
#clients .row.header .cell { border-bottom: 1px rgba(255,255,255,0.2) solid; }
/*#header .cell, #header #title { width: calc(100% / 3); }*/
#clients.loading { color:rgba(255,255,255,0.35) }
#clients input[type=button]{
    background: #38adf6; color: white; padding: 4px 10px; margin: 0px; cursor: pointer; min-width: 100px; font-size: 1em;
}
#clients input[type=button].inactive {
    background: rgba(255,255,255,0.5); color: #444; cursor: default;
}
.s-modal { font-size: 0.9em; }
.s-modal input[type=text], .s-modal input[type=password], .s-modal select { margin-bottom: 5px; width: 100%; transition: 0.3s; }
.s-modal input[type=text].invalid, .s-modal input[type=password].invalid, #self-user input.invalid  { box-shadow: 0px 0px 0px 2px rgba(255,0,0,0.4); }
.s-modal :not(.s-modal-fixed-buttons) .buttons { margin-top: 10px; }

.s-modal-footer input[type=button] { display: block; margin: 0px auto 10px; font-weight: normal; padding: 6px 12px; }

fieldset {
    border: 0px; text-align: left; width: 100%; margin: 0px 5px;
    display: inline-block; box-sizing: border-box;
}
.large-form fieldset { width: calc(50% - 10px); }
fieldset label { margin-bottom: 4px; display: block; }
fieldset .info, fieldset .info:visited {
    float: right; color: white; display: block; cursor: pointer; transition: 0.3s; background: rgba(0,0,0,0.15); text-decoration: none;
    padding: 1px; font-size: 0.9em; border-radius: 50%; height: 18px; width: 18px; text-align: center; margin-top: -2px;
}
fieldset .info:hover { background: #38adf6; }

#form-step-2 fieldset {
    width: calc(100%); margin: 0px 5px;
}
fieldset textarea { width: 100%; }

.select-list div {
    background: white; border-radius: 8px; box-shadow: 0px 0px 4px rgba(0,0,0,0.15); padding: 8px;
    display: block; margin: 8px 0px; cursor: default; transition: 0.3s; min-height: 40px;
}
.select-list div a:only-child { margin-top: 3px; display: block; }
.select-list div p { color: rgba(0,0,0,0.7); margin: 5px; text-align: left; overflow: hidden; }
.select-list:not(.compact) div:hover { box-shadow: 0px 0px 6px rgba(0,0,0,0.25); }
.select-list .status { margin-left: 5px; }
.select-list .status.active { color: #1dd156; }
.select-list .status.inactive { color: #e9010f; }
.select-list .text { padding: 4px 0px 2px; display: block; color: rgba(0,0,0,0.5); }

.select-list.compact { border-radius: 8px; box-shadow: 0px 0px 4px rgba(0,0,0,0.15); }
.select-list.compact > div {
    border-radius: 0px; border-bottom: 1px rgba(0,0,0,0.1) solid; margin: 0px; text-align: left; box-shadow: none; cursor: pointer;
}
.select-list.compact > div:first-of-type {
    border-radius: 8px 8px 0px 0px;
}
.select-list.compact > div:last-of-type {
    border-radius: 0px 0px 8px 8px;
}
.select-list.compact > div:only-of-type {
    border-radius: 8px 8px 8px 8px;
}

.link, .link:visited { color: #38adf6; text-decoration: none; }
.delete {
    width: 18px; height: 18px; background-color: rgb(210, 210, 210); transition: 0.3s;
    display: inline-block; float: right; border-radius: 4px; margin: 5px 5px -15px -15px;
    background-image: url('../images/x-transparent.svg?ver=2'); cursor: pointer;
    background-size: 10px auto; background-repeat: no-repeat; background-position: center;
}
.delete:hover { background-color: rgb(242, 113, 112); }
.delete:active { box-shadow: 0px 0px 8px rgba(100,20,20,0.5) inset; }

.multi-sel { display: block; background: white; border-radius: 5px; padding: 10px; overflow-y: scroll; }
.multi-sel a { display: block; width: 100%; text-align: left; }
.multi-sel input[type=checkbox] { margin-right: 10px; }

.group-select {
    padding: 10px 15px; background: white; border-radius: 5px; margin: 10px 0px; width: 100%; cursor: pointer;
    box-shadow: 0px 0px 3px rgba(0,0,0,0.2); display: block; min-height: 55px; text-align: left;
}
.group-select a { display: block; }
.group-select .unit { color: rgba(0,0,0,0.5); }
.group-select a:only-child { margin-top: 9px; }
#ca-panel { text-align: left; padding: 5px; }
#ca-panel label { margin-bottom: 6px; display: block; }
#ca-panel .multi-sel { margin-bottom: -11px; height: 256px; }
.hide-access #ca-panel { display: none; }
.s-modal .panel { width: calc(50% - 8px); margin: 4px; display: inline-block; }
.s-modal.hide-access .panel { width: 100%; }

/*** Users ***/
@keyframes trnsprt-appear {
    0% {opacity: 0; -moz-opacity: 0; -khtml-opacity: 0; filter: alpha(opacity=0);}
    100% {opacity: 0.4; -moz-opacity: 0.4; -khtml-opacity: 0.4; filter: alpha(opacity=40);}
}
@keyframes trnsprt-disappear {
    0% {opacity: 0.4; -moz-opacity: 0.4; -khtml-opacity: 0.4; filter: alpha(opacity=40);}
    100% {opacity: 0; -moz-opacity: 0; -khtml-opacity: 0; filter: alpha(opacity=0);}                
}
@keyframes appear {
    0% {opacity: 0; -moz-opacity: 0; -khtml-opacity: 0; filter: alpha(opacity=0);}
    100% {opacity: 1; -moz-opacity: 1; -khtml-opacity: 1; filter: alpha(opacity=100);}
}
@keyframes disappear {
    0% {opacity: 1; -moz-opacity: 1; -khtml-opacity: 1; filter: alpha(opacity=100);}
    100% {opacity: 0; -moz-opacity: 0; -khtml-opacity: 0; filter: alpha(opacity=0);}
}
#users, #noResults, #no-users{
    background: rgba(15,15,15,0.75);
    box-shadow: 0 2px 8px 0px rgba(0, 0, 0, 0.2); -webkit-backdrop-filter: blur(5px);
    border-radius: 10px;
    margin: 20px auto;
    color: white;
    padding-bottom: 10px;
    display: table;
}
#users .row input[type=text], #users .row input[type=password] {
    font-size: 1em; line-height: 1em; margin: 0px;
    width: 100%; padding: 0px; background: transparent; color: white; border: 0px;
}
#users input[type=button]{
    font-size: 1em; line-height: 1em; margin: 0px; cursor: pointer; max-width: 90px; border-radius: 3px;
    width: 100%; padding: 5px 10px; background: rgba(120,120,120,0.6); color: white;
    text-transform: none; box-shadow: 0px 0px 5px rgba(0,0,0,0.25);
}
#users select{
    font-size: 1em; /*line-height: 1em;*/ margin: 0px;
    width: 100%; padding: 5px 30px 5px 10px; background-color: rgba(120,120,120,0.6); background-image:url("../images/arrow.png");
    background-repeat: no-repeat; background-position: 95%; background-size: 13px 10px; color: white; -webkit-appearance: none; box-shadow: 0px 0px 5px rgba(0,0,0,0.25);
}
#users select option { color: black; }
#users .row div{ display: table-cell; padding: 5px 8px; font-size: 1em; }
#users .row { display: table-row; transition: opacity 0.3s ease-out; }
#users .row div:last-child:not(.sort-wrap) { padding-right: 15px; }
#users .row div:first-child:not(.sort-wrap) { padding-left: 20px; }
#users .row .status, #users .row .delete { cursor: pointer; }
#users .row div a {
    width: 100%; display: block; white-space: nowrap; overflow: hidden; padding: 3px;
    max-width: 250px; -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,1) 240px, rgba(0,0,0,0));
}
#users .row:nth-child(2) div { padding-top: 15px; }
#users .row.deleting { opacity: 0.5; }
#users .row.hidden { display: none; } 
.header div { border-bottom: 1px rgba(255,255,255,0.3) solid; padding: 7px 8px 6px 8px; }
#users .header div { padding: 10px 11px 9px 11px; }
#users label {display: none;}
#users, .transition{
    -webkit-transition:0.3s ease all; -moz-transition:0.3s ease all; -ms-transition:0.3s ease all;
    -o-transition:0.3s ease all; transition:0.3s ease all;
}
.save-changes {
    text-align: center; overflow: hidden; margin: 0px; opacity: 0; height: 1px;
}
#users .more input[type=button] {
    background-image: url('../images/more.svg?v=1'); background-repeat: no-repeat;
    background-position: center; background-size: 20px 10px; width: 32px; text-indent: 20em;
}
#users .more input[type=button].open { background-color: rgba(230,230,230,0.6); border-radius: 3px 3px 0px 0px; }
.floating-menu {
    background: rgba(255,255,255,0.7); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); transition: 0.3s;
    width: 200px; border-radius: 3px; position: absolute; opacity: 0; transform: translateY(-26px);
    border-radius: 3px 0px 3px 3px; box-shadow: 0px 0px 12px rgba(0,0,0,0.5);
}
.floating-menu.open { opacity: 1; transform: translateY(0px); }
.floating-menu div { display: block; padding: 10px 15px; transition: 0.3s; cursor: pointer; }
.floating-menu div:first-of-type { border-radius: 3px 3px 0px 0px; }
.floating-menu div:last-of-type { border-radius: 0px 0px 3px 3px; }
.floating-menu div:not(:last-of-type) { border-bottom: 1px rgba(0,0,0,0.2) solid; }
.floating-menu div:hover { background: rgba(255,255,255,0.5); }
#save-button {
    position: fixed; bottom: 30px; right: 0px; left: 0px; box-shadow: 0px 0px 18px rgba(0,0,0,0.45); transform: translateY(80px); opacity: 0; font-size: 1.1em;
}
.save-active #instructions, body:not(.users-mode) #instructions { opacity: 0; transform: translateY(60px); }
.save-active #save-button {
    transform: translateY(0px); opacity: 1;
    animation-duration: 0.7s; animation-fill-mode: forwards; animation-name: save-button;
    animation-timing-function: ease; animation-iteration-count: 1; animation-play-state: running;
}
#instructions{
    display: block; margin: 0px auto; font-family: 'Helvetica Neue', 'Roboto', Arial, sans-serif; font-weight: 300;
    box-shadow: 0px 0px 18px rgba(0,0,0,0.4); background: rgba(157, 176, 189, 1); padding: 6px 12px; border-radius: 5px;
    position: fixed; bottom: 20px; left: 0px; right: 0px; width: 270px; text-align: center; box-shadow: 0px 0px 20px rgba(0,0,0,0.8);
}
#MaintLogin{
    background: rgba(255,255,255,0.5); padding: 40px 40px 30px 40px;
    width: 250px; border-radius: 3px; margin: 200px auto 0 auto; text-align: center;
}
#MaintLogin input{ margin-bottom: 10px; width: 100%; }
#MaintLogin input[type=password], #users input[type=text]{
    width: 100%; font-size: 1em; background: white;
    border: 0px; border-radius: 3px; padding: 4px 10px; -webkit-appearance: none;
}
.SortBttn{
    display: block !important;
    width: 18px !important;
    height: 10px;
    position: relative;
    text-align: center;
    float: right;
    cursor: pointer;
    background: url('Arrow.svg');
    background-repeat: no-repeat;
    background-size: 16px 10px;
    background-position: center;
    text-decoration: none;
}
.Asc{
    transform: rotate(180deg);
    margin-top: -3px;
}
.Desc{
    top: 10px; right: -18px;
}
#logo{ padding: 5px 0; width: 30px; transition: 0.3s; position: absolute; top: 3px; }
#logo a { height: 45px; width: 45px; display: block; }
#header img { display: inline-block; }
#search input::-webkit-input-placeholder { color: white; }
#search input::-moz-placeholder { color: white; }
#search input:-ms-input-placeholder { color: white; }
#search input:-moz-placeholder { color: white; }
#noResults, #no-users{
    display: none;
    padding: 50px;
    -webkit-column-span: all;
    column-span: all;
    text-align: center;
    width: 80%;
}
#users input[type=text]:focus, #users input[type=password]:focus {
    outline: none; box-shadow: 0px 0px 0px 3px rgba(255,255,255,0.25);
    background: rgba(255,255,255,0.25);
}
#main { opacity: 0; }
#main.loaded { opacity: 1; }
#users .row select { width: 100%; border-radius: 3px; }
.company-form input[type=text], .company-form textarea { width: 100%; text-indent: 1px; }
.company-form input[type=button]{
    color: #27b183; display:block; width:150px; margin:10px auto; padding: 8px 15px; background: white; text-transform: uppercase;
}
.company-form input[type=text] { margin-bottom: 5px; }
#header { height: 60px; display: table; }
#header .cell:nth-child(1){ text-align: left; }
#header .cell:nth-child(2){ text-align: left; }
#header .cell:last-child { padding: 19px; width:25%; text-align: right; } 
#add-company { margin-right: 15px; }
#search input{
    background-color: rgba(0,0,0,0.5); border: 0px; color: white !important;
    border-radius: 3px; padding: 6px 40px 6px 10px; font-size: 0.9em; width: 175px;
    background-image: url('../images/search.svg'); background-repeat: no-repeat; background-size: 16px auto;
    background-position: center right 8px; box-sizing: border-box; margin: 4px; margin-left: 10px;
}
.all #search input { margin-left: 50px; }
#config { height: 250px; }
#active-count {
    display: block; font-size: 0.75em; color: rgba(255,255,255,0.8); margin-top: 0px;
}
#open-am img { margin-top: 20px; }
#open-am {
    height: 61px; margin: 0px; display: block; width: 61px; position: absolute; top: 0; right: 0;
    text-align: center; vertical-align: middle; cursor: pointer;
}
#users .row input[type=text].invalid, #users .row input[type=password].invalid { 
    box-shadow: 0px 0px 0px 3px rgba(255, 0, 0, 0.3); background: rgba(255, 0, 0, 0.3);
}
#mobile-switch {
    display: none; position: absolute; top: 0px; left: 45px; height: 60px; width: 60px;
    background-image: url('../images/search.svg'); background-repeat: no-repeat;
    background-position: center left 20px; background-size: 35px auto;
}
#errors {
    top: -200px; position: fixed; right: 0px; z-index: 100; opacity: 0;
}
#errors.open { top: 60px; opacity: 1; }
#errors div {
    max-width: 300px; padding: 12px; font-size: 0.8em; background: white;
    border-radius: 10px; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
    cursor: pointer; margin: 15px; color: #444;
    animation-duration: 0.8s; animation-fill-mode: forwards; animation-name: fade-in;
    animation-timing-function: ease; animation-iteration-count: 1; animation-play-state: running;
}
#companies-list.sel-group div .label { height: auto; }
.no-users #users { display: none; }
.no-users #no-users { display: block; }
#companies-list-search { border-radius: 8px; margin-bottom: 15px; background-color: rgb(199, 203, 209); }
#companies-list-search::placeholder { color: rgb(155, 161, 171); }
#companies-list-remaining {
    border-radius: 50px; color: white; background-color: #0b8cfe; font-size: 0.8em; font-family: 'Mulish', sans-serif;
    font-weight: 500; box-shadow: 0px 0px 5px rgba(0,0,0,0.2); padding: 6px 16px; margin-top: -35px;
}

#users .row .sort-wrap {
    display: inline-block; width: 24px; float: right; height: 24px; opacity: 0; transition: 0.3s;
    margin: -3px -8px -3px -16px; box-sizing: border-box; border: 0px; padding: 0px;
}
#users .row:hover .sort-wrap { opacity: 1; }
#users .row .sort-wrap a {
    margin: 0px; height: 11px; border-radius: 2px; -webkit-mask-image: none; mask-image: none; cursor: pointer; transition: background-color 0.3s;
    background-image: url('../images/arrow-down-white.svg'); background-repeat: no-repeat; background-position: center 2px; background-size: 16px auto;
}
#users .row .sort-wrap a:hover, #users .row .sort-wrap a.selected { background-color: rgba(120, 125, 130, 0.9); }
#users .row .sort-wrap a.desc { margin-top: 2px; }
#users .row .name .text { padding: 0px; float: left; display: inline-block; }
#users .row:hover .name:not(.no-sort) .text { width: calc(100% - 20px); }
#users .row .name.no-sort .sort-wrap { display: none; }

.report { background: white; border-radius: 5px; border: 0px; padding: 8px; }
.report .cell { padding: 5px 10px; font-size: 0.9em; border-bottom: 1px rgba(0,0,0,0.1) solid; text-align: left; color: #555; }
.report .header .cell { font-weight: 400; padding-bottom: 8px; }
.report .row { width: 100%; }
.report .row:last-of-type .cell { border-bottom: 0px; }

.device-details a { color: #555; }

#logs-modal { overflow: hidden; }
#logs-modal #logs { height: 400px; margin-bottom: 20px; }
#logs-modal .s-page { overflow-y: scroll; border-radius: 0px 0px 8px 8px; background-color: white; }
#logs-modal .s-page .log-row { display: block; padding: 5px 10px; margin: 5px; text-align: left; cursor: pointer; }
#logs-modal #log-types { display: flex; width: 100%; }
#logs-modal #log-types div { width: 50%; cursor: pointer; border-radius: 8px 8px 0px 0px; padding: 10px; }
#logs-modal #log-types div.selected { background-color: white; }

@keyframes fade-in {
    0% {opacity: 0;}
    100% {opacity: 1;}
}
@keyframes save-button {
    0% {opacity: 0; transform: translateY(80px) scale(0.7); }
    50% { transform: translateY(-20px); }
    100% { transform: translateY(0px) scale(1); opacity: 1; }
}
@media (max-width: 1000px) {
    #users .row div:last-child, #users .row div:first-child, #users .row:nth-child(2) div, 
    #users .row div{ padding: 5px 8px !important; }
    #users .row:nth-child(even){ border-right: 1px rgba(255,255,255,0.5) solid; }
    #users .row:nth-last-child(2), #users .row:last-child { border-bottom: 0px; }
    #users {padding: 0px;}
    #users .row{
        display: inline-block; border-bottom: 1px rgba(255,255,255,0.5) solid; padding: 10px; width: 50%;
    }
    #users .row div{ display: block; }
    #users .header{ display: none; }
    #users label { width: 100px; display: inline-block; }
    #users .row div a {display: inline; }
    #users { margin: 20px 25px; width: calc(100% - 50px); }
    #users .row input[type=button]{
        display: inline-block;
    }
}
@media (max-width: 850px) {
    #users .row{
        display: block; border-bottom: 1px rgba(255,255,255,0.5) solid; width: 100%; float: none;
    }
    #users .row:nth-child(even) { border-right: 0px; }
    #users .row:nth-last-child(2){
        border-bottom: 1px rgba(255,255,255,0.5) solid;
    }
    #users .header{ display: none; }
    .row:nth-child(even){ border-right: 0px; }
    #users { margin: 20px auto; width: auto; min-width: 450px; }
}
@media (min-width: 601px) {
    #search input {
        position: absolute;
        left: 55px;
        top: 12px;
    }
}
@media (max-width: 600px) {
    #search input { position: absolute; width: calc(100% - 145px); top: -50px; opacity: 0; }
    .search-active #search input { top: 13px; opacity: 1; left: 65px; }
    #mobile-switch { display: block; }
    .search-active #header #title, .search-active #mobile-switch { opacity: 0; }
    #users { min-width: auto; }
    #errors div { max-width: none; };
    #errors { width: 100%; }
    #errors.open { left: 0; }
}
@media (max-width: 500px) {
    #users { width: 90%; }
    #users label {display: block; width: 100%; color: rgba(255,255,255,0.65); margin: 6px 0px 4px; }
}

/*** Users/Clients/Self ***/
.users-mode #clients, .update-self #clients, body:not(.users-mode) #users, body:not(.users-mode) #active-count, 
 body:not(.users-mode) #search-filter, .update-self #new-button, body:not(.update-self) #self-user { display: none }

#clients .row .cell:first-of-type { min-width: 200px; white-space: nowrap; }
#clients .row .cell.button-col { max-width: 100px; }
.uo-form h1 { font-size: 1.1em; font-weight: 300; color: #444; }
.uo-form .sel-group { margin-bottom: 15px; }
.loading-users #clients, .loading-users #users, .loading-users #title { opacity: 0; }
#new-button {
    padding: 5px 20px 5px 32px; background-color: rgba(255,255,255,0.2); color: white; border-radius: 3px; cursor: pointer;
    text-align: center; font-size: 0.9em; display: inline-block; margin: -3px 42px -4px 0px;
    background-image: url('../images/plus_button.svg'); background-repeat: no-repeat; transition: 0.3s;
    background-position: left 8px center; background-size: 15px auto; box-shadow: 0px 0px 5px rgba(0,0,0,0.2);
}
#new-button:hover { background-color: rgba(255,255,255,0.4); }
#new-button:active { background-color: rgba(255,255,255,0.1); }
#back-bttn {
    display: block; width: 50px; height: 60px; position: absolute; top: 0px; transform: translateX(-50px); transition: 0.3s;
}
#back-bttn a {
    background-image: url('../images/left_arrow_white.svg') !important; background-repeat: no-repeat !important;
    background-position: center !important; background-size: 18px auto !important; height: 40px; width: 30px;
    background: rgba(255,255,255,0.2); border-radius: 5px; margin: 10px; display: block; transition: 0.3s;
}
#back-bttn a:hover { background: rgba(255,255,255,0.4); }
#back-bttn a:active { box-shadow: 0px 0px 8px rgba(0,0,0,0.6) inset; }
.users-mode.all #logo { transform: translateX(40px); }
.users-mode.all #back-bttn{ transform: translateX(0px); }

/*** Self ***/
#self-user { max-width: 700px; }
#self-user fieldset { display: inline; width: calc(50% - 10px); }
#self-user fieldset input, #self-user fieldset select { width: 100%; }
#self-user fieldset input[disabled], #self-user fieldset select[disabled] {
    background-color: rgba(255,255,255,0.7); color: rgba(0,0,0,0.8); -webkit-text-fill-color: rgba(0,0,0,0.8);
}
.update-self #save-button {
    transform: translateY(0px); opacity: 1; cursor: default; background: rgb(163, 175, 196);
}
.update-self.save-active #save-button { animation-duration: 0s; animation-name: none; cursor: pointer; background: rgba(95,181,241,1); }
.s-list .s-option-action, .s-list .s-option-action:hover {
    color: rgba(0,0,0,0.5); background-image: url('../images/plus_button_gray.svg?ver=1'); background-repeat: no-repeat;
    padding-left: 34px !important; background-position: center left 8px; background-size: 16px auto;
}
.s-list .s-option-action:hover {
    background-image: url('../images/plus_button.svg'); color: white;
}