/* =============== *
 * ## Header      ##
 * ============== */

.casper {
   display: flex;
   flex-direction: column;
   height: 100%;
   position: relative;
   width: 100%;
}

.casper > .header {
   font-size: 12px;
   text-transform: uppercase;
   z-index: 1;

   display: -webkit-box;
   display: -moz-box;
   display: -ms-flexbox;
   display: -webkit-flex;
   display: flex;

   -webkit-flex-wrap: wrap;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;

   background: #485953;
   background: -moz-linear-gradient(top,  #485953 0%, #364741 100%);
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#485953), color-stop(100%,#364741));
   background: -webkit-linear-gradient(top,  #485953 0%,#364741 100%);
   background: -o-linear-gradient(top,  #485953 0%,#364741 100%);
   background: -ms-linear-gradient(top,  #485953 0%,#364741 100%);
   background: linear-gradient(top,  #485953 0%,#364741 100%);
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#485953', endColorstr='#364741',GradientType=0 ) !important;
   border-bottom: 1px solid #283330;
}

.status-module-holder {
   width: 100%;
   top: 0px;
   z-index: 600;
}

.status-bar {
   border-top: 1px solid #516661;
   background: #364741;
   background: -moz-linear-gradient(top,  #364741 1%, #2d3b36 100%);
   background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#364741), color-stop(100%,#2d3b36));
   background: -webkit-linear-gradient(top,  #364741 1%,#2d3b36 100%);
   background: -o-linear-gradient(top,  #364741 1%,#2d3b36 100%);
   background: -ms-linear-gradient(top,  #364741 1%,#2d3b36 100%);
   background: linear-gradient(top,  #364741 1%,#2d3b36 100%);
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#364741', endColorstr='#2d3b36',GradientType=0 ) !important;
   -webkit-box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.3);
   -moz-box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.3);
   box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.3);
   text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.5);
   float: left;
   clear: both;
   width: 100%;
   border-bottom: 1px solid #283330;
   -webkit-transition: height 250ms ease-out;
   transition: height 250ms ease-out;
}

.alert-module {
   margin: 10px;
}


/* =============== *
 * ## Menu        ##
 * ============== */

.f3-menu {
   flex: 1;
   list-style: none;
   padding: 0;
   margin: 0;
}

.menu-bar > [data-enabled='false'] {
   display: none !important;
}

.f3-menu-parent {
   padding-right: 20px !important;
}

.f3-menu-parent:after {
   content: "";
   width: 20px;
   position: absolute;
   right: 5px;
   top: 0;
   bottom: 0;
   background: url('../images/menu_glyphs.png') -162px -149px;
}

.f3-menu-main > .f3-menu-item {
   display: inline-block;
   border-left: 1px solid #516661;
   border-right: 1px solid #283330;
   border-bottom: 1px solid #283330;
   cursor: pointer;
   height: 44px;
   line-height: 44px;
   padding: 0 10px;
   position: relative;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
}

.f3-menu-item > a {
   color: #cde0d9;
   display: block;
   text-shadow: 1px 1px 0px #141a17;
   text-decoration: none;
   white-space: nowrap;
}

.f3-menu-main > .f3-menu-item > a {
   font-size: 14px;
   margin-left: 12px;
   margin-right: 12px;
}

.f3-menu-item:hover {
   color: #FFFFFF;
   background: #5d736b;
   background: -moz-linear-gradient(top,  #5d736b 0%, #4a6159 100%);
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5d736b), color-stop(100%,#4a6159));
   background: -webkit-linear-gradient(top,  #5d736b 0%,#4a6159 100%);
   background: -o-linear-gradient(top,  #5d736b 0%,#4a6159 100%);
   background: -ms-linear-gradient(top,  #5d736b 0%,#4a6159 100%);
   background: linear-gradient(top,  #5d736b 0%,#4a6159 100%);
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5d736b', endColorstr='#4a6159',GradientType=0 ) !important;
}

.f3-menu-item[data-selected] > a {
   top: -7px;
   position: relative;
}

.f3-menu-item[data-selected]:before {
   content: attr(data-selected);
   display: block;
   font-size: 12px;
   color: #8e998d;
   position: absolute;
   bottom: -10px;
   left: 40px;
   overflow: hidden;
   width: calc(100% - 45px);
   text-overflow: ellipsis;
}

.f3-menu-main .f3-menu-item[data-selected] > a:before {
   top: 11px;
}

.f3-menu-main > .f3-selected-menu-item[data-selected]{
   border-bottom: 2px solid #cde0d9;
}

.f3-menu-main > [data-label] > a:before {
   content: "";
   display: inline-block;
   width: 18px;
   height: 18px;
   position: relative;
   top: 4px;
   left: -8px;
}

.f3-menu-item[id^="dashboard"] a:before {
   background: url('../images/menu_glyphs.png') 0px 0px;
}

.f3-menu-item[id^="flights"] a:before {
   background: url('../images/menu_glyphs.png') -36px -36px;
}

.f3-menu-item[id^="noise_events"] a:before {
   background: url('../images/menu_glyphs.png') -18px -18px;
}

.f3-menu-item[id^="complaints"] a:before {
   background: url('../images/menu_glyphs.png') -54px -54px;
}

.f3-menu-item[id^="help"] a:before {
   background: url('../images/menu_glyphs.png') -72px -72px;
}

.f3-menu-item[id^="reports"] a:before {
   background: url('../images/menu_glyphs.png') -324px -324px;
}

.f3-menu-item[id^="admin"] a:before {
   background: url('../images/menu_glyphs.png') -342px -342px;
}

.f3-menu-item[id^="queries"] a:before {
   background: url('../images/menu_glyphs.png') -360px -360px;
}

.f3-sub-menu {
   display: none;
   position: absolute;
   left: -1px;
   z-index: 200;
   min-width: 100%;
   padding-top: 1px;
   background: #364741;
   background: -moz-linear-gradient(top, #364741 0%, #232e2a 100%);
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#364741), color-stop(100%,#232e2a));
   background: -webkit-linear-gradient(top, #364741 0%,#232e2a 100%);
   background: -o-linear-gradient(top, #364741 0%,#232e2a 100%);
   background: -ms-linear-gradient(top, #364741 0%,#232e2a 100%);
   background: linear-gradient(top, #364741 0%,#232e2a 100%);
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#364741', endColorstr='#232e2a',GradientType=0 ) !important;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
}

.f3-menu-main.hovering .f3-menu-item:hover > .f3-sub-menu,
.f3-menu-main.hovering .f3-menu-item > .f3-sub-menu > f3.menu-parent:hover > f3.sub-menu {
   display: block;
}

.f3-sub-menu .f3-menu-item {
   font-size: 12px;
   line-height: 28px;
   padding: 0px 20px 0px 12px;
   width: auto;
   cursor: pointer;
   border-top: 1px solid #516661;
   border-bottom: 1px solid #283330;
   border-left: 1px solid #283330;
   border-right: 1px solid #283330;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
   -webkit-user-select: none;
   -khtml-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   -o-user-select: none;
   user-select: none;
}

.f3-sub-menu .f3-menu-item:hover {
   color: #FFFFFF;
}

.f3-menu-parent .f3-menu-parent:after {
   transform: rotate(-90deg) translate(-25px, -12px);
   transform-origin: 0 0;
}

.f3-menu-parent .f3-menu-parent .f3-sub-menu {
   display: none;
   left: 100%;
   position: absolute;
   top: 0;
}
/*
.f3-menu-main.hovering .f3-menu-parent .f3-menu-parent:hover > .f3-sub-menu {
   display: block;
   position: absolute;
   left: 100%;
   top: 0;
}
*/


/* =============== *
 * ## UserMmodule ##
 * ============== */

.user-info {
   flex: 0;
   margin: 0 10px;

   display: -webkit-box;
   display: -moz-box;
   display: -ms-flexbox;
   display: -webkit-flex;
   display: flex;

   -webkit-flex-wrap: wrap;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;

   align-content: flex-start;

   font-size: 12px;
   color: #FFFFFF;
   padding-left: 30px;
   position: relative;
}

.user-info .user-info-row {
   display: flex;
   flex-direction: row;
}

.user-info .user-info-row > * { position: relative; }

.user-info:before {
   content: "";
   position: absolute;
   left: 0;
   display: block;
   width: 18px;
   height: 44px;
   background: url('../images/menu_glyphs.png') -90px -77px;
}

.username {
   flex: 0 1 100%;
   margin-top: 5px;
   padding-right: 15px;
}

.user-module-button {
   display: block;
   cursor: pointer;
   white-space: nowrap;
   height: 25px;
   line-height: 22px;
   color: #a4b3ad;
   text-decoration: none;
   padding-right:5px;
}
.user-module-button.settings-button { padding: 0 5px; }

.user-module-button:hover {
   color: #FFFFFF;
}

.settings-button-open .settings-button {
   background: #131a17;
   background: rgba(19,26,23, 0.9);
   color: #FFFFFF;
   padding: 0 5px;
   text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
   -webkit-border-radius: 3px 3px 0px 0px;
   -moz-border-radius: 3px 3px 0px 0px;
   border-radius: 3px 3px 0px 0px;
   text-decoration: none !important;
}

.settings-button:after {
   content: "";
   width: 14px;
   height: 14px;
   display: inline-block;
   background-image: url('../images/menu_glyphs.png');
   background-position: -162px -161px;
}

.settings-button-open .settings-button:after {
   background-image: url('../images/menu_glyphs.png');
   background-position: -180px -178px;
}

.settings-menu {
   display: none;
   background: #131a17;
   background: rgba(19,26,23, 0.9);
   width: 225px;
   right: 0;
   position: absolute;
   -webkit-border-radius: 3px 0px 3px 3px;
   -moz-border-radius: 3px 0px 3px 3px;
   border-radius: 3px 0px 3px 3px;
   -webkit-box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.3);
   -moz-box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.3);
   box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.3);
   text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
   z-index: 200;
   padding: 20px 0px;
   font-weight: bold;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
}

.settings-button-open .settings-menu {
   display: block;
}

.settings-menu-wrapper {
   margin-right: 7px;
   max-height: 375px;
   padding: 0px 7px 0px 20px;
   overflow-x: hidden;
   overflow-y: auto;
}
.settings-menu-wrapper::-webkit-scrollbar {
   width: 6px;
   margin: 0px 7px;
}
.settings-menu-wrapper::-webkit-scrollbar-track {
   border-radius: 3px;
   background-color: #B0BBB7;
}
.settings-menu-wrapper::-webkit-scrollbar-thumb {
   border-radius: 3px;
   background-color: #FFFFFF;
   cursor: pointer;
}
.settings-menu-wrapper::-webkit-scrollbar-button {
   display: none;
}

.settings-action-holder {
   line-height: 28px;
   margin-top: 10px;
   padding: 0px 20px;
   text-align: left;
}

.settings-cancel-holder {
   display: inline-block;
   float: right;
}

.settings-action-holder > .form-confirm-button {
   display: inline-block;
}