html {
    height:                 100vh;
}

body {
    height:                 100vh;
    margin:                 0px 0px 0px 0px;
    font-family:            Arial, Helvetica, sans-serif;
    font-size:              10.5pt;
}

h1, h2, h3, h4 {
    -webkit-margin-before:  4px;
    -webkit-margin-after:   4px;
    margin-top:             4px;
    margin-bottom:          4px;
    font-size:              12pt;
}

button {
    margin:                 2px 0px 2px 0px;
}

.ellipsis {
    min-width:              0px;
    height:                 25px;
    width:                  24px;
    margin-top:             0px;
    padding-left:           6px;
    padding-right:          6px;
    vertical-align:         inherit;
}

button.ellipsis + button.ellipsis {
    margin-left:            0px;
}

.round-button {
    min-width:              9px;
    height:                 27px;
    border-radius:          50%;
}

.table-round-button {
    min-width:              20px;
    min-height:             20px;
    width:                  20px;
    height:                 20px;
    margin:                 2px;
    padding:                0px;
    border-radius:          50%;
}

.caret {
    display:                inline-block;
    width:                  0;
    height:                 0;
    margin-left:            2px;
    border-top:             4px dashed;
    border-left:            4px solid transparent;
    border-right:           4px solid transparent;
    vertical-align:         middle;
}

label {
    display:                block;
    min-width:              115px;
    padding-right:          4px;
}

label.radio,
label.checkbox {
    display:                inline;
    padding-right:          20px;
}

label.cur {
    display:                inline;
    position:               relative;
    margin-left:            4px;
    margin-right:           -20px
}

input[type='number'].cur {
    margin-left:            4px;
    padding-left:           11px;
    text-align:             left;
}

select {
    height:                 25px;
    padding-top:            4px;
    padding-bottom:         4px;
    text-align:             left;
}

input[type="text"], 
textarea {
    width:                  220px;
}

input[type="text"][size="50"] {
    width:                  330px;
}

input[type="text"][size="8"],
input[type="number"][size="8"] {
    width:                  80px;
}

input[type="number"][size="1"] {
    width:                  26px;
}

input[type="number"][size="2"] {
    width:                  42px;
}

input[type="number"][size="3"] {
    width:                  60px;
}

input[type="number"][size="4"] {
    width:                  76px;
}

input[type="number"][size="5"] {
    width:                  92px;
}

input[readonly="readonly"],
input[readonly],
textarea[readonly="readonly"],
textarea[readonly] {
    background-color:       #EEE;
    color:                  #777;
}

input:invalid,
textarea:invalid,
input.mandatory.not-set, 
textarea.mandatory.not-set,
button.mandatory.not-set{
    border-color:           red;
    background-color:       #FDD;
}
select.mandatory.not-set {
    border-color:           red;
}

.dataTable {
    cursor:                 default;
    -webkit-touch-callout:  none; 
    -webkit-user-select:    none; 
    -khtml-user-select:     none; 
    -moz-user-select:       none; 
    -ms-user-select:        none; 
    user-select:            none; 
}

.cookies-banner {
    display:                none;
    position:               fixed;
    top:                    0;
    left:                   0;
    right:                  0;
    padding:                4px 4px 4px 4px;
    background-color:       #FF3F3F;
    opacity:                0.95;
    color:                  white;
    z-index:                10010;
}

.cookies-banner a {
    color:                  yellow;
}

.close-cookies-banner {
    display:                block;
    float:                  right;
    text-align:             right;
}

.close-cookies-banner button {
}

.content-head {
    position:               fixed;
    top:                    0;
    width:                  100vw;
    height:                 84px;
    box-sizing:             border-box;
    background-color:       #4fc6f7;
    color:                  #000000;
    box-shadow:             0 0 4px rgba(0,0,0,.14), 0 4px 8px rgba(0,0,0,.28);
    z-index:                10005;
}

.content-head.no-nav {
    height:                 52px;
}

.title-bar {
    padding:                8px 4px 0px 12px;
}

.content-head .user-box {
    display:                none;
}

.user-box a {
    color:                  #1767a7;
}

.site-heading {
    -webkit-margin-before:  0px;
    -webkit-margin-after:   4px;
    margin-inline-start:    0px;
    margin-inline-end:      0px;
    font-size:              11.25pt;
}

.side-bar-menu-icon {
    position:               relative;
    padding-left:           20px;
}

.side-bar-menu-icon:before {
    content:                "";
    position:               absolute;
    left:                   0;
    top:                    4px;
    width:                  16px;
    height:                 2px;
    background:             black;
    box-shadow:             0 4px 0 0 black, 0 8px 0 0 black;
}

.site-title {
    font-weight:            bold;
}

.site-title a {
    color:                  #000000;
}

.site-title a:hover {
    text-decoration:        none;
}

.content-head .page-title {
    -webkit-margin-before:  0px;
    -webkit-margin-after:   4px;
    padding:                4px 0px 0px 0px;
    margin-inline-start:    0px;
    margin-inline-end:      0px;
    font-size:              11.25pt;
    font-weight:            bold;
}

.content-head .nav-bar {
    padding:                2px 4px 0px 4px;
    background-color:       #b7e7ff;
    -webkit-touch-callout:  none; 
    -webkit-user-select:    none; 
    -khtml-user-select:     none; 
    -moz-user-select:       none; 
    -ms-user-select:        none; 
    user-select:            none; 
}

.nav-bar nav {
    font-size:              9.75pt;
}

.nav-bar nav ul {
    margin:                 0px;
    -webkit-padding-start:  0px;
    list-style-type:        none;
    white-space:            nowrap;
}

.nav-bar nav ul li {
    display:                inline-block;
}

.nav-bar nav ul li.nav-collapsible {
    display:                none;
}

.nav-bar nav ul li a {
    display:                inline-block;
    border-top:             2px solid transparent;
    border-bottom:          2px solid transparent;
    padding:                2px 8px 6px 8px;
    text-transform:         uppercase;
    font-weight:            500;
    font-size:              9.75pt;
    color:                  #777;
}

.nav-bar nav ul li a:link,
.nav-bar nav ul li a:hover,
.nav-bar nav ul li a:active {
    text-decoration:        none;
}

.nav-bar nav ul li a:hover {
    color:                  black;
}

.nav-bar nav ul li a.nav-active {
    border-bottom-color:    #FFFFFF;
    color:                  black;
}

.side-bar-fade {
    display:                none;
    position:               fixed;
    top:                    0px;
    left:                   0px;
    width:                  100vw;
    height:                 100vh;
    opacity:                0.4;
    border-style:           solid;
    background-color:       #000;
    z-index:                90;
    text-align:             center;
    vertical-align:         middle;
}

.side-bar {
    position:               fixed;
    top:                    0px;
    left:                   0px;
    height:                 100vh;
    width:                  145px;
    margin-top:             84px;
    border-color:           white;
    border-right:           1px solid #ddd;
    padding-top:            8px;
    padding-left:           8px;
    padding-right:          8px;
    background:             white;
    z-index:                91;
    vertical-align:         top;
    -webkit-touch-callout:  none; 
    -webkit-user-select:    none; 
    -khtml-user-select:     none; 
    -moz-user-select:       none; 
    -ms-user-select:        none; 
    user-select:            none; 
    transition:             0.5s ease-in-out;
    transform:              translate(0px, 0);
}

.side-bar:not(.active) {
    left:                   -161px;
}

.side-bar button {
    margin-bottom:          4px;
    width:                  145px;
}

.side-bar hr {
    border-style:           solid;
    border-color:           #ddd;
    border-top-width:       1px;
    border-bottom-width:    0px;
    margin-left:            -8px;
    margin-right:           -8px;
    margin-top:             4px;
    margin-bottom:          4px;
}

.button-holder {
    position:               relative;
}

.button-holder + .button-holder, 
.button-holder + button,
button + .button-holder {
    margin-left:            12px;
}

.button-dropdown,
.button-dropdown:focus{
    display:                block;
    position:               absolute;
    float:                  left;
    top:                    26px;
    left:                   0;
    margin:                 2px 0 0;
    margin-top:             8px;
    -webkit-margin-before:  0px;
    -webkit-margin-after:   0px;
    -webkit-margin-start:   0px;
    -webkit-margin-end:     0px;
    border:                 1px solid rgba(0, 0, 0, .15);
    border-radius:          4px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    padding:                5px 0px 5px 0px;
    -webkit-padding-start:  0px;
    background-color:       #FFF;
    background-clip:        padding-box;
    box-shadow:             0 6px 12px rgba(0, 0, 0, .175);
    box-sizing:             border-box;
    font-size:              14px;
    text-align:             left;
    list-style:             none;
    color:                  #000!important;
    line-height:            1.5;
    outline:                0;
    z-index:                1000;
}

.button-dropdown > li {
    display:                list-item;
    list-style:             none;
}

.button-dropdown > .divider {
    height:                 1px;
    margin:                 9px 0;
    overflow:               hidden;
    background-color:       #E5E5E5;
}

.button-dropdown > li > a {
    display:                block;
    clear:                  both;
    padding:                3px 20px;
    background-color:       transparent;
    text-decoration:        none !important;
    font-weight:            400;
    color:                  black;
    line-height:            1.42857143;
    white-space:            nowrap;
    cursor:                 auto;
}

.button-dropdown > li > a:link,
.button-dropdown > li > a:hover,
.button-dropdown > li > a:active {
    text-decoration:        none;
}

.button-dropdown > li > a:hover {
    outline:                0;
    background-color:       #F5F5F5;
    color:                  #777;
}

.button-dropdown:not(.open) {
    display:                none;
}

.content-body-container {
    display:                block;
    position:               absolute;
    width:                  auto;
    height:                 auto;
    bottom:                 0;
    top:                    0;
    left:                   0;
    right:                  0;
    margin-top:             84px;
    margin-bottom:          0px;
    margin-left:            0px;
    margin-right:           0px;
    padding-left:           0px;
    padding-right:          0px;
    text-align:             left;
    overflow-y:             auto;
    transition:             0.5s ease-in-out;
    transform:              translate(0px, 0);
}

.content-body-container.no-nav {
    margin-top:             58px;
    margin-left:            4px;
    margin-right:           4px;
}

.table-holder {
    display:                table;
    padding-top:            0px;
    padding-bottom:         0px;
    padding-left:           5px;
    padding-right:          5px;
}

.tab-bar {
    height:                 25px;
    margin:                 19px 0px 8px;
    border-bottom:          1px solid #ddd;
    padding-left:           0;
    box-sizing:             border-box;
    list-style:             none;
    color:                  #000!important;
    font-size:              9.75pt;
    -webkit-touch-callout:  none; 
    -webkit-user-select:    none; 
    -khtml-user-select:     none; 
    -moz-user-select:       none; 
    -ms-user-select:        none; 
    user-select:            none; 
}

.tab-bar li.tab {
    position:               relative;    
    float:                  left;
    margin-bottom:          -1px;
    display:                block;
    box-sizing:             border-box;
    list-style:             none;
    color:                  #000!important;
}

.tab-bar li.tab a.tab {
    position:               relative;
    margin-right:           2px;
    border:                 1px solid transparent;
    border-radius:          4px 4px 0 0;
    padding:                8px 8px;
    box-sizing:             border-box;
    background-color:       transparent;
    line-height:            1.42857143;
    text-decoration:        none !important;
    color:                  #2777b7;
}

.tab-bar li.selected a.tab {
    border:                 1px solid #ddd;
    border-bottom-color:    transparent;
    background-color:       #FFF;
    color:                  #555;
    cursor:                 default;
}

.tab-bar li.tab a:link,
.tab-bar li.tab a:hover,
.tab-bar li.tab a:active {
    text-decoration:        none;
}

.tab-bar li.tab:not(.selected) a:hover {
    border-color:           #EEE #EEE #DDD;
    background-color:       #EEE;
    color:                  #777;
}

.tab-page {
    margin:                 0px;
    width:                  100%;
}

.tab-page-block {
    display:                inline-block;
    width:                  345px;
    vertical-align:         top;
}

td {
    border-bottom:          0px solid #ebebeb;
    padding:                1px;
    vertical-align:         top;
}

.tab-page-column, 
.tab-page-column tr {
    margin-bottom:          0px;
}

.tab-page-table {
    display:                inline-block;
    margin-bottom:          0px;
    padding-top:            0px;
    padding-bottom:         0px;
    padding-left:           5px;
    padding-right:          5px;
}

.tab-page-column, .tab-page-column tr {
    padding:                0px;
}

.tab-page-column {
    padding-left:           4px;
    width:                  347px;
}

.tab-page-column tr td {
    height:                 21px;
}

td.field-heading {
    
}

td.field-label {
    width:                  121px;
    padding-top:            4px;
    padding-bottom:         4px;
}

td.field-control {
    width:                  243px;
    padding-bottom:         4px;
}

td.field-control button {
    margin:                 0px 0px 0px 0px;;
}

@media (min-width: 321px) {
    .content-head .user-box {
        display:            block;
        float:              right;
        font-size:          9pt;
        text-align:         right;
    }
}

@media (min-width: 612px) {
    .side-bar-menu-icon {
        display:            none;
    }
    
    .side-bar:not(.active) {
        left:               0px;
    }
    
    .content-body-container.with-side-bar {
        padding-left:       162px;
    }
}

@media (min-width: 760px) {
    .nav-bar nav ul li.nav-collapsible {
        display:            inline-block;
    }
  
    .side-bar .nav-collapsible {
        display:            none;
    }
}

a.disabled {
    color:                  #777;
    cursor:                 default;
}

.ghosted {
    color:                  #777;
}

div.loading-flower {
    display:                block;
    width:                  100%;
    height:                 100%;
    top:                    0px;
    left:                   0px;
    position:               fixed;
    opacity:                0.8;
    background-color:       #FFF;
    z-index:                99;
    text-align:             center;
    -webkit-touch-callout:  none; 
    -webkit-user-select:    none; 
    -khtml-user-select:     none; 
    -moz-user-select:       none; 
    -ms-user-select:        none; 
    user-select:            none; 
}

img.loading-flower {
    position:               absolute;
    top:                    0; 
    left:                   0; 
    bottom:                 0; 
    right:                  0;
    margin:                 auto;
    z-index:                100;
}

span.file-list {
    display:                table-cell;
}

span.file-list.file-icon {
    width:                  20px;
    min-width:              20px;
}

#divFade {
    display:                none;
    width:                  100%;
    height:                 100%;
    top:                    0px;
    left:                   0px;
    position:               fixed;
    opacity:                0.8;
    background-color:       #FFF;
    z-index:                90;
    text-align:             center;
    vertical-align:         middle;
}

#divConfirmation {
    display:                none;
    left:                   0px;
    top:                    0px;
    width:                  100%;
    height:                 100%;
    position:               fixed;
    z-index:                99;
}

#divConfirmationInner {
    width:                  330px;
    height:                 111px;
    margin:                 100px auto;
    background-color:       #FFF;
    box-shadow:             0px 0px 8px 2px rgba(0, 0, 0, 0.4);
    z-index:                98;
    padding:                10px;
    text-align:             left;
}

#divNotification {
    left:                   0px;
    top:                    0px;
    width:                  100%;
    height:                 100%;
    position:               fixed;
    z-index:                99;
    display:                none;
}

#divNotificationInner {
    width:                  290px;
    height:                 111px;
    margin:                 100px auto;
    background-color:       #fff;
    box-shadow:             0px 0px 8px 2px rgba(0,0,0,0.4);
    z-index:                98;
    padding:                10px;
    text-align:             left;
}

.inactive {
    display:                none!important;
}

.right-align {
    text-align:             right;
}