@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');

:root{
    --body-bg_color: #202020;
    
    --dark: #2d2d2d;
    --darker: #272727;
    --darkest: #202020;

    --normal: #444444;
    --light: #5f5f5f;
    
    --error-color:                  #8e0000;
    --success-color:                #448244;
    --warning-color:                orange;

    --color-highlight:              #7babc5;
    --color-highlight-hover:        #9cdcff;

    --color-highlight-light:        #9cdcff;
    --color-highlight-dark:         #7babc5;
    --color-font:                   #363636;
    --color-font-dark:              #3a3a3a;
    --color-font-dark:              #3a3a3a;

    --text:                         #ababab;
}

html, body { height: 100%; margin: 0; padding: 0; font-family: 'Roboto', sans-serif; }
body {
    background-color: var(--body-bg_color);
    color: var(--text);
    font-family: 'Arial', sans-serif;
}

body {
    
    /* YELLOW */
    --highlight-text:               var(--color-highlight);              /* #c6b239 | #969663 - yellow | #7caeca - old blue */
    --color-highlight-light:         var(--color-highlight-hover);              /* #c6b239 | #969663 - yellow */
    --highlight-button-bg:          var(--color-highlight);
    --highlight-button-bg-hover:    var(--color-highlight-hover);
}
* { margin: 0px; padding: 0px; }
p, a, div, h1, h2, h3,input, select, textarea       { position: relative; }
p, a, div                                           { font-size: 13px;  }

p                                           { line-height: 18px; padding: 0px 0px 10px 0px; }

h2 { padding: 0px 0px 20px 0px; font-weight: normal; font-size: 20px; }
h3 { padding: 0px 0px 20px 0px; font-weight: normal; font-size: 16px; }

a           { text-decoration: none; color: var(--color-highlight-dark); white-space: nowrap; }
a:hover     { text-decoration: none; color: var(--color-highlight-light); }


input:not([type=checkbox]):not([type=radio]), 
select, 
textarea
            { padding: 10px 10px; width: calc(100% - 22px); font-family: 'Arial',sans-serif; font-size: 12px; 
                /* background-color: var(--dark);  */
                background-color: var(--dark); 
                border: 1px solid var(--normal); color: var(--input-text); outline: none !important; }
select      { padding: 9px 12px 9px 12px; width: calc(100% - 24px);}

.ui-datepicker-title select { background-color: unset; }

svg, a svg {
    height: 16px;
    width: 16px;
    fill: #ffffff;
}

input.active { border: 1px solid #ffffff !important; }

div#app {
    /* width: 100vw; */
    height: 100vh;
}
#map { height: calc(100% - 40px); }

#app header {
    background-color: #2d2d2d;
    position: fixed;
    left: 0px;
    display: block;
    padding: 0px;
    margin: 0px;
    width: 100%;
    z-index: 1000;
}
header div.auth-user            { position: absolute; right: 30px; top: 0px;  }
header div.navigation           { }
header div.navigation a#admin-nav-button { position: relative; display: block; float: left; color: #ffffff; text-decoration: none; 
    /* transition: 500ms;  */
    width: 30px; padding: 9px 14px;}
header div.navigation a#admin-nav-button img { height: 20px; }
header div.navigation .page-title { position: relative; float: left; padding: 10px 10px; font-size: 18px; color: var(--color-highlight-dark); }
header div.navigation .page-title a { position: relative; color: var(--color-highlight-light); }

header #logged-user {
    float: right;
    padding: 0px 20px;
}

#app header #logged-user                   { float: right; padding: 0px 20px; }
#app.mobile-view header #logged-user       { float: right; display: none; }
#app header #logged-user .user-name        { float: right; font-weight: bold; padding: 14px 0px 13px 0px; color: #ffffff; }

#app header .user-navigation                             { float: right; position: relative; padding: 0px; z-index: inherit; text-decoration: none; }

#app.nav-closed header div.user-navigation                       {  }
#app header div.user-navigation div.nav-control              { float: right; }
#app header div.user-navigation div.nav-control a            { position: relative; display: inline-block; padding: 14px 20px; }
#app header div.user-navigation div.nav-control a svg        { height: 13px; }
#app header div.user-navigation div.nav-control a svg rect   { fill: var(--color-highlight-dark) !important; }
#app header div.user-navigation div.nav-control a.dots       { display: block; padding: 12px 20px; }
#app header div.user-navigation div.nav-control a.hamburger  { display: none; }
#app header div.user-navigation div.nav-control a.ex         { display: none; }
#app header div.user-navigation div.ex       { display: none; }
#app header div.user-navigation nav                                    { background: transparent  !important; display: none; }
#app header div.user-navigation nav a                                  { background: transparent; }

#app.user-nav-on header .user-navigation nav                          
{ 
    display: block;
    position: absolute; 
    top: 44px; right: 0px; width: 0px; padding: 0px; z-index: inherit;
    padding: 0px 0px; text-decoration: none; position: absolute; width: 250px; 
    background-color: #3e3e3e !important;
    /* -webkit-transition: width 2s, height 2s, -webkit-transform 2s; transition: width 2s, height 2s, transform 2s; */
}
#app.user-nav-on header div.user-navigation div.nav-control a                      { background-color: #3e3e3e !important; }            
#app.user-nav-on header div.user-navigation div.nav-control a.ex         { display: block; }
#app.user-nav-on header div.user-navigation div.nav-control a.dots       { display: none; }

#app.user-nav-on header div.user-navigation nav a                      { opacity: .5; padding: 20px; position: relative; display: block; border: 0px;   width: calc(100% - 20px); text-decoration: none; color: #ffffff; }
#app.user-nav-on header div.user-navigation nav a img                  { height: 16px; position: absolute; left: 15px; top: 17px; }
#app.user-nav-on header div.user-navigation nav a:hover                { cursor: pointer; text-decoration: none; background-color: var(--dark);opacity: .5; }


#app header .user-navigation nav #logged-user                         { display: none; }
#app header .user-navigation nav .user-name                           { display: none; }
#app.mobile-view header .user-navigation nav .user-name               { position: relative; display: block; float: none; padding: 20px; font-weight: bold; }




.user-nav-area                                     { 
    z-index: 10000; 
    position: fixed; 
    left: 0px; 
    top: 41px; 
    width: 300px; 
    height: calc(100% - 44px); 
    background-color: #000000;  
    /* transition: 500ms;  */
}
#app.nav-closed .user-nav-area                     { width: 59px; }


#app.mobile-view header .navigation a#admin-nav-button {
    background: #404040;
    padding: 10px 14px;
    width: 30px;
    position: relative;
    display: block;
    float: left;
    color: #ffffff;
    text-decoration: none;
}
#app.mobile-view.nav-closed .user-nav-area                                 { width: 0px; }
#app.mobile-view.nav-open.mobile-view .user-nav-area                       { width: 100%; position: fixed; top: 44px; left: 0px;  }
#app.mobile-view.nav-closed header .navigation a#admin-nav-button          { background: var(--highlight-button-bg-hover); width: 30px; padding: 10px 14px; }
#app.mobile-view.nav-closed header .navigation a#admin-nav-button svg      { fill: var(--highlight-button-text); }

#app header .navigation                                { float: left; padding: 0px; }
#app header .navigation a#admin-nav-button             { background: #000000; width: 272px; position: relative; display: block; float: left; color: #ffffff; text-decoration: none; 
    /* transition: 500ms;   */
}
#app header .navigation a#admin-nav-button svg         { fill: var(--color-highlight-dark); height: 21px; width: 32px; }
#app.nav-closed header .navigation a#admin-nav-button          { width: 30px; }
#app.nav-closed header .navigation a#admin-nav-button svg      { fill: var(--highlight-button-text); }



.method-list                                        { padding: 0px 0px; }

.user-nav-area div.organization               { 
    opacity: .5; 
    position: relative; 
    display: block; 
    padding: 15px 0px 15px 58px;
    color: #ffffff; text-decoration: none; background-repeat: no-repeat; background-size: 20px 20px;  
    background-position: 16px 12px; 
    /* transition: 500ms;  */
    background-image:url('../images/icon/icon-company.png'); 
}


.admin-links { position: absolute; bottom: 20px; width: 100%; }

.user-nav-area a,                                   
.user-nav-area .admin-links a                                   
{ 
    opacity: .5; 
    position: relative; 
    display: block; 
    padding: 15px 0px 15px 58px;
    color: #ffffff; text-decoration: none; background-repeat: no-repeat; background-size: 20px 20px;  
    background-position: 16px 12px; 
    transition: 500ms; 
}



#app.mobile-view.nav-closed .user-nav-area a       { width: 0px; padding: 0px; }
.user-nav-area a.on                                { background-color: var(--darkest); color: #ffffff; opacity: 1; }
.user-nav-area a.on:hover                          { background-color: var(--darkest); color: #ffffff; opacity: 1; }
#app.nav-closed .user-nav-area a span              { display: none; }
.user-nav-area a:hover                             { background-color: var(--dark); opacity: .5; }
.user-nav-area a img                               { width: 16px; }
.user-nav-area a.dashboard                         { background-image:url('../images/icon/icon-dashboard.png'); }
.user-nav-area a.task                               { background-image:url('../images/icon/icon-task.png'); }
.user-nav-area a.job                                { background-image:url('../images/icon/icon-job.png'); }
.user-nav-area a.project                           { background-image:url('../images/icon/icon-project.png'); }

.user-nav-area a.ethereum                              { background-image:url('../images/icon/icon-ethereum.png'); }
.user-nav-area a.qr-code                           { background-image:url('../images/icon/icon-qr-code.png'); }

.user-nav-area a.cms                              { background-image:url('../images/icon/icon-cms.png'); }
.user-nav-area a.domain                            { background-image:url('../images/icon/icon-domain.png'); }
.user-nav-area a.opportunity                         { background-image:url('../images/icon/icon-opportunity.png'); }
.user-nav-area a.mailer                         { background-image:url('../images/icon/icon-mailer.png'); }
.user-nav-area a.contact                         { background-image:url('../images/icon/icon-contact.png'); }
.user-nav-area a.group                             { background-image:url('../images/icon/icon-group.png'); }
.user-nav-area a.group-org                         { background-image:url('../images/icon/icon-group-org.png'); }
.user-nav-area a.inventory                         { background-image:url('../images/icon/icon-inventory.png'); }
.user-nav-area a.cdn                              { background-image:url('../images/icon/icon-cdn.png'); }
.user-nav-area a.crm                              { background-image:url('../images/icon/icon-crm.png'); }
.user-nav-area a.lms                              { background-image:url('../images/icon/icon-lms.png'); }
.user-nav-area a.location                              { background-image:url('../images/icon/icon-location.png'); }
.user-nav-area a.document                              { background-image:url('../images/icon/icon-documents.png'); }
.user-nav-area a.communication                              { background-image:url('../images/icon/icon-comm.png'); }
.user-nav-area a.email                              { background-image:url('../images/icon/icon-email.png'); }
.user-nav-area a.sms                              { background-image:url('../images/icon/icon-communicate.png'); }

.user-nav-area a.deal                              { background-image:url('../images/icon/icon-deal.png'); }
.user-nav-area a.dots                              { background-image:url('../images/icon/icon-dots.png'); }

.user-nav-area a.product                              { background-image:url('../images/icon/icon-product.png'); }
.user-nav-area a.product-type                              { background-image:url('../images/icon/icon-product-type.png'); }
.user-nav-area a.database                              { background-image:url('../images/icon/icon-database.png'); }
.user-nav-area a.user                              { background-image:url('../images/icon/icon-users.png'); }

.user-nav-area a.employee-area                              { background-image:url('../images/icon/icon-users.png'); }
.user-nav-area a.road-rep                              { background-image:url('../images/icon/icon-group.png'); }
.user-nav-area a.rep-payment-request                              { background-image:url('../images/icon/icon-invoice.png'); }
.user-nav-area a.account                              { background-image:url('../images/icon/icon-group.png'); }
.user-nav-area a.show                         { background-image:url('../images/icon/icon-show.png'); }
.user-nav-area a.reports                        { background-image:url('../images/icon/icon-reports.png'); }
.user-nav-area a.organization                        { background-image:url('../images/icon/icon-organization.png'); }
.user-nav-area a.venue                        { background-image:url('../images/icon/icon-location.png'); }


.user-nav-area a.settings                          { background-image:url('../images/icon/icon-settings.png'); }
.user-nav-area a.master-admin                          { background-image:url('../images/icon/icon-settings.png'); }
.user-nav-area a.activity-log                          { background-image:url('../images/icon/icon-settings.png'); }


#app.nav-closed .user-nav-area a.email                              { background-image:url('../images/icon/icon-email.png'); }
#app.nav-closed .user-nav-area a.sms                              { background-image:url('../images/icon/icon-communicate.png'); }
#app.nav-closed .user-nav-area a.user                              { background-image:url('../images/icon/icon-users.png'); }
#app.nav-closed .user-nav-area a.settings                       { background-image:url('../images/icon/icon-settings.png'); }
#app.nav-closed .user-nav-area a.master-admin                       { background-image:url('../images/icon/icon-settings.png'); }
#app.nav-closed .user-nav-area a.activity-log                       { background-image:url('../images/icon/icon-settings.png'); }


.page-area { 
    /* transition: 500ms;  */
}
#app.desktop-view.nav-closed .page-area { position: relative; padding: 64px 20px 20px 79px; height: calc(100% - 84px); width: calc(100% - 99px);}
#app.desktop-view.nav-open .page-area { position: relative; padding: 64px 20px 20px 319px; height: calc(100% - 84px); width: calc(100% - 339px); }
#app.mobile-view .page-area { position: relative; padding: 64px 20px 20px 20px; height: calc(100% - 84px); width: calc(100% - 40px); }




#app.desktop-view.nav-closed .page-area {
    position: relative;
    padding: 64px 20px 20px 79px;
    height: calc(100% - 84px);
    width: calc(100% - 99px);
}

svg.current * { fill: red; }
svg.svg-lib   { width: 18px; height: 18px; }
svg.svg-lib * { fill: red; }

div.list-box { 
    width: 340px;
    background: #fff;
    box-shadow: 0 50px 50px -40px rgb(29 32 38 / 50%);
    height: 500px;
    overflow-y: auto;
    position: absolute;
    top: 72px;
    left: 30px; 
}

div.list-box div.title div.button   { float: right; padding: 25px; }
div.list-box div.title div.name     { padding: 20px; font-size: 24px; font-weight: 600; }
div.list-box div.list-area          { width: 100%; height: calc(100% - 84px); overflow-y: auto; }
/* div.list-box div.list-area a        { padding: 20px; background-color: #eeeeee; display: block; margin-bottom: 2px; text-decoration: none; color: var(--color-font-dark); }
div.list-box div.list-area a:hover  { background-color: #c1c1c1; } */

div.list-box div.list-area > div,                    
div.list-box div.list-area > div                    { padding: 20px; background-color: #eeeeee; margin-bottom: 2px;  color: var(--color-font-dark); }
div.list-box div.list-area > div div.link           { float: left; width: calc(100% - 20px); }
div.list-box div.list-area > div div.icon           { float: left; width: 20px; }
div.list-box div.list-area > div div.icon svg       { width: 20px; }

div.list-box div.list-area > div.note                  { padding: 20px; background-color: #eeeeee; margin-bottom: 2px;  color: var(--color-font-dark); }
div.list-box div.list-area > div.note div.subject      { padding: 0px 0px 5px 0px; }
div.list-box div.list-area > div.note div.subject a    { font-weight: bold; }
div.list-box div.list-area > div.note div.more-info    { font-size: 12px; }


div.object-box {
    
    width: calc(100% - 430px);
    background: #fff;
    box-shadow: 0 50px 50px -40px rgb(29 32 38 / 50%);
    overflow-y: auto;
    position: absolute;
    top: 72px;
    right: 30px; 

}

div.object-box div.title              { background-color: var(--color-highlight-dark); color: #ffffff; }
div.object-box div.title div.close    { float: right; padding: 25px; }
div.object-box div.title div.close a  { }
div.object-box div.title div.close a#close-object-box svg.svg-lib * { fill: #ffffff; }
div.object-box div.title div.name     { padding: 20px; font-size: 24px; font-weight: 600; }
div.object-box div.object-area                      { padding: 0px;height: calc(100vh - 180px); }
div.object-box div.object-area div.object-nav       { padding: 0px 0px; background-color: #eeeeee; }
div.object-box div.object-area div.object-nav a     { display: inline-block; padding: 15px 20px; text-decoration: none; color:  var(--color-font-dark); }
div.object-box div.object-area div.object-nav a.active,
div.object-box div.object-area div.object-nav a:hover
                                                    { background-color: #ffffff; color:  var(--color-highlight-dark); }

div.object-box div.object-area div.object-view-area { padding: 20px; min-height: 200px; }

div.note-area {}
div.note-area p { padding: 0px 0px 30px 0px; line-height: 160%; }

div.list { border-top: 1px solid #cccccc; }
div.list div.item { border-bottom: 1px solid #cccccc; }
div.list div.item:hover { background-color: #eeeeee; }
div.list div.item div.column { float: left; padding: 15px 0px;  }


a.cta, 
a.cta-icon, 
button {
    display: inline-block;
    padding: 1px 30px;
    color: #202020;
    background: var(--color-highlight-dark);
    cursor: pointer;
    text-decoration: none;
    color: var(--body-bg_color);
    border: 1px solid var(--color-highlight-dark);
    border: 0px;
    border-radius: 999px;
    line-height: 26px;
}

a.cta:hover,
a.cta-icon:hover,
button:hover {
    border: 1px solid var(--color-highlight-light);
    border: 0px;
    background-color: var(--color-highlight-light);
    color: var(--body-bg_color);
}

a.cta-icon {
    padding: 2px 10px 4px 10px;
    margin-top: 1px;
}

a.cta-icon svg.svg-lib,
svg.svg-lib {
    width: 16px;
    height: 16px;
}

a svg.svg-lib * {
    fill: var(--color-highlight-light);
}

a.cta-icon svg.svg-lib * {
    fill: var(--body-bg_color);
}

a.cta-outline { 
    border: 1px solid var(--color-highlight-dark);
    padding: 1px 30px;
    color: var(--color-highlight-dark);
    background: transparent;
    cursor: pointer;
    text-decoration: none;
    font-size: 14px;
    display: inline-block;
    border-radius: 999px;
    line-height: 26px;
}
a.cta-outline:hover { 
    background-color: var(--color-highlight-light);
    border: 1px solid var(--color-highlight-light);
    color: var(--body-bg_color);
}

a#refresh-list {
    display: inline-flex;
    width: 40px;
    height: 26px;
    padding: 0px;
    align-items: center;
    justify-content: center;
}

/* FORM */
div#page-links a {
    border-radius: 99px;
}
div#reportrange {
    border-radius: 99px;
}
input, 
select {
    border-radius: 99px;
}

select { 
    background-color: var(--dark);
    border: 1px solid var(--normal);
}
#form                               { position: relative; text-align: left; width: 100%; }
#form .active-submission-success    { background: #025796; color: #ffffff;padding: 10px; margin-bottom: 10px; }
#form .active-submission-error      { background: var(--error-color); color: #ffffff;padding: 10px; margin-bottom: 10px; }
#form .input-area                   { position: relative;  padding-bottom: 20px; }
#form .input_name                   { padding-bottom: 5px; font-size: inherit; }

#form input[type='text'],
#form input[type='password'],
#form input[type='email'],
#form input[type='number'],
#form textarea          { padding: 10px 10px; width: calc(100% - 22px); }
#form label             {  }
#form select            { width: 100%; }

#form select.full       { width: calc(100% - 22px); }

#form input[name='mobile[one]'] { width: 23px; text-align: center; margin-right: 10px; }
#form input[name='mobile[two]'] { width: 23px; text-align: center; margin-right: 10px; }
#form input[name='mobile[three]'] { width: 32px; text-align: center; }
#form input[name='first_name']            { width: calc(35% - 27px); float:left;}
#form input[name='last_name']             { width: calc(65% - 27px); float:right; }

#form .error                    { margin: 0px 0px 0px 0px; padding: 10px 0px 0px 0px; color: #ff0000; }
@media screen and (max-width: 680px) {
    div#main-banner div#login-panel { top: 60px; left: 20px; width: calc(100% - 40px); }
}
@media screen and (max-width: 460px) {
    #form button            { display: block; width: 100%; padding: 12px 0px; text-align: center; margin-bottom: 20px; }
    a.cta-outline { 
        display: block;
        width: 100% !important; 
        text-align: center;
        margin-bottom: 20px;
        padding: 12px 0px;
    }
    a.cta {
        padding: 12px 30px;
    }
    a.cta-icon {
        display: inline-block;
        padding: 10px 30px 4px 30px;
        margin-top: 1px;
    }
}


/* eof FORM */

.three-columns                { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 20px; }
.three-columns .column-item   {  }

.two-columns                  { display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 20px; }
.two-columns .column-item     {  }

.half                                   { position: relative; float: left; width: 50%; height: 100%;  }
div.half.padding                        { float: left; width: calc(50% - 20px); padding: 0px 0px 0px 20px; }
div.half.padding:nth-of-type(2n+1)      { padding: 0px 20px 0px 0px; }

@media screen and (max-width: 890px) {
    .half                                   { float: none; width: 100% !important; }
    div.half.padding                        { float: none; width: 100% !important; padding: 0px; }
    /* div.half.padding div.half.padding       { float: left; width: calc(50% - 20px) !important; padding: 0px 0px 0px 0px !important; } */
}

.clear { clear: both; }

#inline-message     { position: fixed; top: 20px; left: 50%; z-index: 100000; }
.message-success    { background: green; color: #ffffff; padding: 20px 20px; text-align: center;  }
.message-alert      { background: orange; color: #ffffff; padding: 20px 20px; text-align: center; }
.message-error      { background: #990000; color: #ffffff; padding: 20px 20px; text-align: center; }


div#add-map { width: 100%; height: 500px;}

div.signin-page                                         { width: 100%; height: 100%; display: flex; justify-content: center; }
div.signin-page div.signin-area                         { width: 94%; max-width: 300px; padding: 40px 0px; }
div.signin-page div.signin-area div.project-logo        { padding: 20px; margin-bottom: 20px; }
div.signin-page div.signin-area div.project-logo img    { width: 100%; }
/* div.signin-page div.signin-area div.forgot-password     { font-size: 80%; } */




/* DateSpan */
div#date-span                   { display: block; padding: 0px 0px 0px 0px;}
div#date-span input#start-date,
div#date-span input#end-date    { width: 100px; padding: 6px 10px 7px 10px; }
div#date-span a#apply-date-span { display: none; position: absolute; margin-top: 10px; z-index: 1; } 
div#date-span.on a#apply-date-span { display: block; }

/* New Daterange Picker */
.daterangepicker    { z-index: 30000; color: #000000; }
#date-range-area    { padding: 0px 0px 10px 0px; }
#date-range-area .date-range-submit { padding: 10px 0px 0px 0px; }

/* LISTS */
#app .list-manage-list                                              { height: 100%; position: relative; overflow: hidden; width: 100%; }
#app .list-manage-list.no-options                                   { height: 100%; position: relative; overflow: hidden; float: unset; width: 100%; padding: 0px 0px 0px 0px; }
#app .list-manage-list #crumb                                       { font-size: 18px; }
#app .list-manage-list #crumb a                                     { font-size: 18px; }

#app .list-manage-list .list-buttons                                {  }
#app .list-manage-list .list-buttons #open-list-manage-options                  { display: none; }
#app.mobile-view .list-manage-list .list-buttons #open-list-manage-options      { display: inline-block; }
#app .list-manage-list .list-buttons #list-manage                   { background-color: var(--darkest); }

#app .list-manage-list .list-buttons input#search-list                   { padding: 6px 10px 7px 10px; }

#app .list-manage-list .list-area                                   { height: 100%; position: relative;  }


#app .list-manage-list .search-buttons                {  }


.list-buttons a.icon                                { display: inline-block; height: 24px; width: 38px; padding: 0px 0px; float: left; border: 1px solid transparent; margin-right: 2px; 
    background-color: var(--highlight-button-bg); border: 1px solid var(--highlight-button-bg);}
.list-buttons a.icon span.material-icons            { position: absolute; top: 3px; left: 11px }
.list-buttons a.icon:hover                          { color: var(--highlight-button-text-hover);
    background-color: var(--highlight-button-bg-hover);
    border: 1px solid var(--highlight-button-bg-hover); }
.list-buttons a.icon:hover span.material-icons      { color: var(--highlight-button-text-hover); }

.list-manage-options                                            { display: block; 
    /* transition: 500ms;  */
    float: left; width: 240px; height: 100%; }

.list-manage-options .list-search                               { padding: 0px 0px 20px 0px; }
.list-manage-options .list-search input[name="search"]          { padding: 5px 10px; }
.list-manage-options .list-item-count                           { padding: 10px 0px 20px 0px; }
.list-manage-options .list-filters                              { padding: 0px 0px 20px 0px; height: calc(100% - 110px); overflow-x: hidden; }
.list-manage-options .list-filters .filter-area                 { padding: 20px 0px 0px 0px; border-bottom: 1px solid var(--light) }
.list-manage-options .list-filters .filter-area .title          { font-size: 15px; padding: 0px 0px 20px 0px;/* text-transform: uppercase; */ }
.list-manage-options .list-filters .filter-area .title:hover    { cursor: pointer; }
.list-manage-options .list-filters .filter-area .title span     { position: absolute; top: -4px; right: 6px; }
.list-manage-options .list-filters .filter-area.opened .title span.close    { display: none; }
.list-manage-options .list-filters .filter-area.opened .title span.open     { display: block; }
.list-manage-options .list-filters .filter-area.closed .title span.open     { display: block; }
.list-manage-options .list-filters .filter-area.closed .title span.close    { display: none; }
.list-manage-options .list-filters .filter-area .filters             { display: none; padding: 0px 0px 0px 0px; }

.list-manage-options .list-filters .filter-area .filters label    { display: block; padding: 10px 0px 10px 10px; cursor: pointer; white-space: nowrap; border-top: 1px solid #333333; }

#app .list-manage-options a#close-list-manage-options               { position: absolute; display: none; right: 10px; top: 10px; }
#app.mobile-view .list-manage-options.on                            { display: block; }
#app.mobile-view .list-manage-options a#close-list-manage-options   { display: block; }
#app .list-manage-options a#close-list-manage-options svg           { height: 14px; }
#app .list-manage-options a#close-list-manage-options svg rect      { fill: var(--highlight-button-bg) !important; }

.list-buttons                           { position: relative; display: block; padding: 0px 0px 10px 0px; }
.list-buttons h2                        { padding: 0px 0px 0px 0px; }
.list-buttons #list-manage              { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; display: none; z-index: 2; }
.list-buttons a.dots-settings           { 
    position: absolute; top: 0px; right: 0px; padding: 6px 16px; z-index: 2; }
.list-buttons a.dots-settings:hover     { background-color: var(--highlight-button-bg-hover); border: 1px solid var(--highlight-button-bg-hover); }
.list-buttons a.dots-settings:hover svg { fill: var(--highlight-button-text-hover)  }

.list-area { height: calc(100% - 36px); }
.list-area.no-list-buttons{ height: 100%; }

#app.mobile-view .list-manage-list      { float: none; width: 100%; padding: 0px 0px 0px 0px; }
#app.mobile-view .list-manage-options   { float: none; padding: 20px; width: 320px; position: absolute; margin-left: -180px; left: 50%; top: 64px; z-index: 1000; background-color: #404040;  display: none; }





#list                                   { height: 100%; }
#list #list_group_edit                  { overflow: hidden; overflow-y: auto; overflow-x: auto; width: 100%; height: calc(100% - 36px); }

#list #list_group_edit .list_top {
    position: sticky;
    top: 0px;
    left: 0px;
    z-index: 1;
    font-weight: bold !important;
    background: #000000;
    z-index: 150;
    
}

.list_item                                                      { width: 100%; display: block; }
.list_item_inner                                                { display: block; width: 100%; }
.list_column                                                    { display: block; float: left; padding: 10px 0px; }
.list_column.icon                                               { padding: 7px 0px; }

#list #list_group_edit .list_top .list_column                   { background-color: #000000; }
#list #list_group_edit .list_top .list_column.freeze-now        { position: sticky; z-index: 100; }
#list #list_group_edit .list_top a                              { color: var(--color-highlight-dark); position: relative;  }
#list #list_group_edit .list_top a:hover                        { color: var(--color-highlight-light); position: relative;  }


#list .list_items                                               { padding: 0px 0px 30px 0px; }
/* #list .list_items .list_item {
    border-bottom: 1px solid var(--normal);
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
} */
#list .list_items 



.flagged                                { background: #FFCACA; }
.even                                   { background: #393939; }
.odd                                    { background: #333333; }
.selected                               { background-color: #636363 !important; }

#list .list_item                                    { position: relative; }
                

#list .list_item.odd .list_column.freeze-now        { background-color: #333333; }
#list .list_item.even .list_column.freeze-now       { background-color: #393939; }
#list .list_item .list_column.freeze-now            { position: sticky; z-index: 100; }




.list_column a.cta,
.list_column a.cta-outline { 
    /* width: calc(92% - 62px);
    text-align: center;  */
}
 
.list_column a.active-inactive-object svg.active *                { fill: var(--success-color); }
.list_column a.active-inactive-object svg.in-active *             { fill: #8e0000; }
.list_column .list_item_options            { position: relative; text-align: center; width: 100%; z-index: 1; }
.list_column .list_item_options .options   { display: none; position: absolute; width: 160px; top: 0px; left: -140px; background-color: var(--highlight-button-bg-hover) }
.list_column .list_item_options.on .options{ display: block; text-align: left; }
.list_column .list_item_options .options a { position: relative; display: block; padding: 5px; width: calc(100% - 10px); color: #ffffff; }

/* eof LISTS */

div.thin-scrollbar                                 { overflow-y: auto; direction: ltr; }
div.thin-scrollbar::-webkit-scrollbar              { width: 12px; height: 12px; }
div.thin-scrollbar::-webkit-scrollbar-button       {  }
div.thin-scrollbar::-webkit-scrollbar-track        { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); border-radius: 0px; }
div.thin-scrollbar::-webkit-scrollbar-track-piece  {  }
div.thin-scrollbar::-webkit-scrollbar-thumb        { border-radius: 0px; -webkit-box-shadow: inset 0 0 6px rgba(2,87,150,1); }
div.thin-scrollbar::-webkit-scrollbar-corner       { width: 0px; height: 0px; }
div.thin-scrollbar::-webkit-resizer                { }

#app div.thin-scrollbar::-webkit-scrollbar-track                            { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,1); }
#app div.thin-scrollbar::-webkit-scrollbar-thumb                            { -webkit-box-shadow: inset 0 0 6px rgba(123,171,197,1); background: #7babc5; }
#app div.thin-scrollbar::-webkit-scrollbar-button                           { display: none; }
#app div.thin-scrollbar::-webkit-scrollbar-corner                           { display: none; }






/* loading circle */
.profile-main-loader{
    /* left: 50% !important;
    margin-left: -30px; 
    position: absolute !important;
    top: 25% !important;
    width: 60px; */

    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    
}

.profile-main-loader .text-area { 
    /* position: absolute; top: -20px; left: 50%; width:160px; margin-left: -80px;  */
    text-align: center; 
    padding: 40px 0px;
}

.profile-main-loader .text-area .text { 
    padding: 0px 0px 20px 0px;
}

.profile-main-loader .loader {
    position: relative;
    margin: 0px auto;
    width: 40px;
    height: 40px;
}
.profile-main-loader .loader:before {
    content: '';
    display: block;
    padding-top: 100%;
}
.circular-loader {
    -webkit-animation: rotate 2s linear infinite;
    animation: rotate 2s linear infinite;
    height: 100%;
    -webkit-transform-origin: center center;
    -ms-transform-origin: center center;
    transform-origin: center center;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    margin: auto;
}
.loader-path {
    stroke-dasharray: 150,200;
    stroke-dashoffset: -10;
    -webkit-animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
    animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
    stroke-linecap: round;
}
@-webkit-keyframes rotate {
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@keyframes rotate {
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@-webkit-keyframes dash {
    0% {
        stroke-dasharray: 1,200;
        stroke-dashoffset: 0;
    }
    50% {
        stroke-dasharray: 89,200;
        stroke-dashoffset: -35;
    }
    100% {
        stroke-dasharray: 89,200;
        stroke-dashoffset: -124;
    }
}
@keyframes dash {
    0% {
        stroke-dasharray: 1,200;
        stroke-dashoffset: 0;
    }
    50% {
        stroke-dasharray: 89,200;
        stroke-dashoffset: -35;
    }
    100% {
        stroke-dasharray: 89,200;
        stroke-dashoffset: -124;
    }
}
@-webkit-keyframes color {
    0% {
        stroke: #025796;
    }
    40% {
        stroke: #B2CADB;
    }
    66% {
        stroke: #cccccc;
    }
    80%, 90% {
        stroke: #2E2A28;
    }
}
@keyframes color {
    0% {
        stroke: #025796;
    }
    40% {
        stroke: #B2CADB;
    }
    66% {
        stroke: #cccccc;
    }
    80%, 90% {
        stroke: #2E2A28;
    }
}
/* eof loading circle */

/* FLHA */

    div#form.flha h3                                                { font-size: 24px; }
    div#form.flha div.input-area                                    { padding: 20px 0px; }
    div#form.flha div.input-area div.input_name                     { font-size: 20px; line-height: 28px; }
    
    div#form.flha div.input-area div.input select,
    div#form.flha div.input-area div.input input,                   
    div#form.flha div.input-area div.input textarea                 { font-size: 16px; }

    div#form.flha div.input-checkbox                                { display: flex; flex-direction: row; flex-wrap: wrap; }
    div#form.flha div.input-checkbox div.checkbox                   { padding: 0px; width: calc(50% - 0px); }
    div#form.flha div.input-checkbox div.checkbox label             { display: block; padding: 10px; font-size: 16px; }

    div#form.flha div#hazard-list                                 { padding: 0px 0px 20px 0px; }
    div#form.flha div#hazard-list div.hazard                      {     display: flex; padding: 20px 0px 0px 0px; flex-wrap: wrap; flex-direction: row; }
    div#form.flha div#hazard-list div.hazard div.input-hazard     { width: 100%; }
    div#form.flha div#hazard-list div.hazard div.input-controls   { width: 100%; }
    div#form.flha div#hazard-list div.hazard div.input-rating     { width: 50%; }
    div#form.flha div#hazard-list div.hazard div.input-likelihood { width: 50%; }
    div#form.flha div#hazard-list div.hazard div.input-delete     { width: 100%; padding: 5px 0px; text-align: right; }

    div#shadowbox-bg {}
    div#shadowbox-bg.flha-form div#shadowbox { height: 100% !important; }
/* eof FLHA */

/* Pop overs */
div.sheet-bg                                                { background-color: rgba(0,0,0,.8); position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; z-index: 10000; }
div.sheet-bg div.sheet-area                                 { 
    /* background-color: #2d2d2d; */
    position: fixed;
    top: 0px;
    right: 0px;
    width: 0px;
    height: calc(100% - 0px);
    z-index: 10001;
    border-radius: 24px;
} 
div.sheet-bg div.sheet-area div.sheet-header                { 
    /* background-color: var(--darker);  */
    color: #ffffff; border-bottom: 0px solid transparent; 
}
div.sheet-bg div.sheet-area div.sheet-header div.close      { padding: 0px 0px; float: left; }
div.sheet-bg div.sheet-area div.sheet-header div.close a {
    display: inline-block;
    padding: 16px 15px;
}
div.sheet-bg div.sheet-area div.sheet-header div.close svg  { height: 14px; }
div.sheet-bg div.sheet-area div.sheet-header div.close svg rect { fill: var(--color-highlight-dark) !important; transform: translate(25.24, -20.02) rotate(90deg) !important; }
div.sheet-bg div.sheet-area div.sheet-header div.title      { font-size: 22px; padding: 12px 0px; float: left;   }
div.sheet-bg div.sheet-area div.sheet-content               { 
    padding: 30px; 
    height: calc(100% - 150px); 
    overflow-y: auto; 
    background-color: var(--darkest); 
    border-radius: 24px 0px 0px 24px;
}
div.sheet-bg div.sheet-area div.sheet-content div.sheet-section { background-color: var(--dark);padding: 20px 20px 20px 20px; margin-bottom: 20px; }
div.sheet-bg div.sheet-area div.sheet-content div.sheet-section h3 { padding: 0px 0px 10px 0px; }
div.sheet-bg div.sheet-area div.sheet-content div.sheet-section div.list-item-area {  }
div.sheet-bg div.sheet-area div.sheet-content div.sheet-section div.list-item-area div.list-item { padding: 20px 0px 20px 0px; border-top: 1px solid var(--light); }


div.sheet-content div.object-area{
    display: flex;
    height: 100%;
}
div.sheet-content div.object-area div.object-details {
    width: calc(30% - 20px);
    padding: 0px 20px 0px 0px;
}
div.sheet-content div.object-area div.object-options {
    width: calc(70% - 0px);
    padding: 0px 0px 0px 0px;
}

div#dataArea        { height: 100%; width: 100%; }
div.dataLine        { padding: 10px; display: flex; }
div.dataLine.line   { border-top: 1px solid #cccccc; }
div.dataLine .key   { width: 50%; }
div.dataLine .value { width: 50%; }
div#tab-data-area.no-pad {
    padding: 0px;
    height: calc(100% - 40px);
}


div#shadowBoxBg                                                 { position: fixed; display: flex; top: 0px;  left: 0px; background-color: rgba(47,47,47,0.6); width: 100%; height: 100%; z-index: 20000; flex-direction: row; flex-wrap: nowrap; align-items: flex-start; justify-content: center;
}
div#shadowBoxBg div#shadowbox                                   { background-color: #1a1a1a; padding: 0px 0px 0px 0px;  }
div#shadowBoxBg div#shadowbox a#pop-close-shadowBox             { position: absolute; top: 10px; right: 10px; z-index: 1; }

div#shadowbox-bg {
    position: fixed;
    top: 0px;
    left: 0px;
    background-color: rgba(47,47,47,0.8);
    width: calc(100% - 40px);
    height: calc(100% - 40px);
    z-index: 20000;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    padding: 20px;
}
div#shadowbox-bg div#shadowbox { 
    background-color: #1a1a1a; 
    padding: 0px 0px 0px 0px; 
    border-radius: 20px; 
    width: 96%;
    display: none;
}
div#shadowbox-bg div#shadowbox div.shadowbox-padding            { position: relative; padding: 30px; overflow-y: auto; height: calc(100% - 40px); }
div#shadowbox-bg div#shadowbox div.shadowbox-padding h3         { font-size: 26px; padding: 0px 0px 10px 0px; }
div#shadowbox-bg div#shadowbox a#pop-close-shadowBox            { position: absolute; top: 15px; right: 15px; z-index: 1; }

div#shadowbox-bg div#shadowbox a#pop-close-shadowBox svg        { height: 14px; }
div#shadowbox-bg div#shadowbox a#pop-close-shadowBox svg rect   { fill: var(--color-highlight-dark) !important; }

/* eof Pop overs */




div.object-field                                    { padding: 0px 0px 20px 0px; margin: 0px 0px 0px 0px; position: relative; }
/* div.object-field:first-child                        { padding: 0px 0px 0px 0px; margin: 0px 0px 20px 0px; border-top: 0px; } */
div.object-field small                              { color: var(--highlight); padding: 0px 0px 5px 0px; position: relative; display: inline-block; }
/* div.object-field div.edit-area.name                 { font-size: 20px; }
div.object-field div.edit-area.name a               { font-size: 20px; }
div.object-field div.edit-area.name input           { font-size: 20px;  } */
div.object-field div.edit-area                      {  }
div.object-field div.edit-area.boolean              { padding: 10px; }
div.object-field div.edit-area a                    { position: relative; display: block; padding: 10px; }
div.object-field div.edit-area a:hover              { text-decoration: none; }
div.object-field div.edit-area a.no-style           { position: relative; display: inline; padding: 0px; background-color: transparent; }
div.object-field div.edit-area a.no-style:hover     { background: transparent; text-decoration: underline; }

div.edit-area textarea, div.cms-area textarea                               { background-color: var(--dark); color: var(--input-text); }
div.edit-area select:focus, div.cms-area select:focus                       { background-color: var(--dark); color: var(--input-text); }

div.edit-area input:not([type=checkbox]):not([type=radio]),
div.edit-area textarea,
div.edit-area select                                                        { background-color: var(--dark); border: 0px solid var(--normal); color: var(--input-text); }
div.edit-area select                                                        { height: 34px; }

div.edit-area input:not([type=checkbox]):not([type=radio]):focus,
div.edit-area textarea:focus,
div.edit-area select:focus                                                  { background-color: #4e4e3b; color: #ffffff; }


div.edit-area button { padding: 10px; border: 0px; }




.tabs       { position: relative;  padding: 0px 0px; border-bottom: 1px solid var(--dark);  }
.tabs a     { display: inline-block;  margin-right: 0px;  text-decoration: none;  padding: 10px 20px;  border-radius: 0px 0px 0px 0px; background: var(--darkest);  }
.tabs a:hover { color: #ffffff; background-color: #2E2A28;  }
.tabs a.on                      {  font-weight:bold;  background-color: var(--dark);  color: #ffffff;  text-decoration: none;  }
.tab-area                       { padding: 20px;height:calc(100% - 75px);background-color: var(--dark);  }
.tab-area div.edit-area a                                   {  }
.tab-area div.edit-area a:hover, div.cms-area a:hover       {  text-decoration: none;  }

.tab-area .half.padding                                   { height: 100%; }

div#tab-control                 { display: block; width: 100%; border-bottom: 1px solid var(--color-highlight-dark); }
div#tab-control a               { padding: 10px 20px; display: block; float: left;  color:#a5a3a2; }
div#tab-control a:first-child    { border-radius: 15px 0px 0px 0px; }
div#tab-control a:last-child     { border-radius: 0px 15px 0px 0px; }
div#tab-control a:hover         { background-color: var(--color-highlight-light); color: var(--color-font); text-decoration: none; }
div#tab-control a.on            { background-color: var(--color-highlight-dark); color: var(--color-font);  }

/* div#tab-data-area               { padding: 20px; overflow: hidden; overflow-y: auto; }
div#tab-data-area.no-pad        { padding: 0px; }
div#tab-data-area div.buttons   {  }
div#tab-data-area div.buttons a { padding: 10px 20px; display: inline-block; position: relative; } */
div#tab-data-area div.data      { position: relative; height: calc(100% - 54px);}




div#tab-data-area                       { padding: 20px 0px; height: calc(100% - 120px); position: relative; display: block; overflow: hidden;  }
div#tab-data-area .no-items             { padding: 20px; }
div#tab-data-area.no-pad                { padding: 0px; height: calc(100% - 20px); }
div#tab-data-area.no-pad .no-items      { padding: 20px; }

div#tab-data-area div.buttons           {  }
div#tab-data-area div.buttons a         { padding: 10px; display: inline-block; position: relative; }

div#tab-data-area div.list-item         { background-color: transparent; position: relative; padding: 20px; margin-bottom: 20px; }
div#tab-data-area div.list-item.note    { position: relative; padding: 20px; margin-bottom: 20px; 
    background-color: var(--dark);
    position: relative;
    padding: 20px;
    margin-bottom: 20px;
}


/* auto complete */
#app .autocomplete-items            { border-top: 1px solid #444444; background-color: #444444; position: absolute; width: 100%; z-index: 100; }
#app .autocomplete-items div        { padding: 10px 5px; }
/*when hovering an item:*/
#app .autocomplete-items div:hover  { background-color: var(--color-highlight-dark); color: var(--color-font-dark); cursor: pointer; }
/*when navigating through the items using the arrow keys:*/
#app .autocomplete-active           { background-color: var(--color-highlight-dark) !important; color: var(--color-font-dark); }
/* eof auto complete */


.pac-container { z-index: 20000;}

.ui-widget.ui-widget-content { z-index: 1001 !important; }

div#quick-look { height: 100%; }