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

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

.casper > .header {
   display: flex;
   flex-direction: column;
   font-size: 10px;
   position: relative;
   text-transform: uppercase;
   z-index: 1;

   background: #485953;
}

.casper > .header .client-logo {
   height: 40px;
   left: 0;
   padding-left: 20px;
   top: 0;
   width: 150px;
}

.casper > .header .menu-bar {
   display: flex;
   flex-direction: row;
   width: 100%
}

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

.status-bar {
   height: 30px;
   transition: height 250ms ease-out;
   width: 100%;
   z-index: 0;
}


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

.f3-menu {
   display: flex;
   flex: 1;
   flex-wrap: wrap;
   justify-content: center;
   list-style: none;
   padding: 0;
   margin: 0;
   z-index: 1;
}

.menu-bar > [data-enabled='false'] {
   display: none !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 {
   cursor: pointer;
   height: 40px;
   line-height: 40px;
   position: relative;
   user-select: none;
}

.f3-menu-main > .f3-menu-item:before,
.user-info .user-button.logout + .user-settings:before {
   content: "";
   display: block;
   height: 10px;
   left: 0px;
   position: absolute;
   top: 50%;
   width: 1px;

   transform: translate(0, -50%);
}

.f3-menu-main > .f3-menu-item:first-child:before,
.f3-menu-main > .f3-menu-item.open + .f3-menu-item:before,
.user-info .user-button.logout:hover + .user-settings:before,
.user-info .user-settings.settings-open:before {
   display: none;
}

.f3-menu-item > a {
   color: #cde0d9;
   display: block;
   position: relative;
   text-decoration: none;
   white-space: nowrap;
}

.f3-menu-item > a[data-toggle="dropdown"],
.f3-menu-item > a > span {
   pointer-events: none;
}

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

.f3-menu-item[data-selected]:before,
.f3-menu-item[data-selected] + .f3-menu-item:before,
.f3-menu-main > .f3-menu-item:hover:before,
.f3-menu-main > .f3-menu-item:hover + .f3-menu-item:before {
   display: none;
}

.f3-menu-main > .f3-menu-item:hover > a {
   background-color: #FF00FF;
}

/*
.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 {
   box-sizing: border-box;
   display: none;
   left: 0;
   position: absolute;
   z-index: 200;
   /max-height: 75vh;
   min-width: 100%;
   /overflow-x: hidden;
   /overflow-y: auto;
}

.f3-menu-main .f3-menu-item.open > .f3-sub-menu,
.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-menu-main .f3-menu-item.open > .f3-sub-menu,
.f3-menu-main.hovering .f3-menu-item:hover > .f3-sub-menu {
   z-index: 1;
}

.f3-menu-main .f3-menu-item.open > .f3-sub-menu:before,
.f3-menu-main.hovering .f3-menu-item:hover > .f3-sub-menu:before,
.settings-menu:before {
   content: "";
   border-style: solid;
   pointer-events: none;
   position: absolute;
   left: -1px;
   top: 0;
   height: calc(100% + 1px);
   z-index: 0;
}

.f3-menu-main .f3-menu-item.open > .f3-sub-menu:before,
.f3-menu-main.hovering .f3-menu-item:hover > .f3-sub-menu:before {
   border-width: 0 1px 1px 1px;
   width: calc(100% + 2px);
}

.settings-menu:before {
   border-width: 0 0 1px 1px;
   width: calc(100% + 1px); 
}

.f3-sub-menu .f3-menu-item {
   cursor: pointer;
   font-size: 10px;
   line-height: 28px;
   position: relative;
   width: auto;
   user-select: none;
}

.f3-sub-menu .f3-menu-item:before {
   content: "";
   display: block;
   height: 1px;
   left: 0;
   position: absolute;
   top: 0;
   width: 100%;
}

.f3-sub-menu .f3-menu-item:first-child:before { display: none; }

.f3-sub-menu .f3-menu-item > a { padding: 0px 20px; }

.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 {
   align-items: center;
   display: flex;
   flex: 0;
   height: 40px;
   right: 0;
   top: 0;
   z-index: 2;
}

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

.user-info .user-button {
   cursor: pointer;
   text-decoration: none;
   user-select: none;
}
.user-info .user-button.logout,
.user-info .user-button.settings {
   line-height: 40px;
   padding: 0 14px;
}

.user-info .user-icon {
   border-radius: 50%;
   height: 20px;
   margin-right: 14px;
   overflow: hidden;
   position: relative;
   width: 20px;
   z-index: 0;
}

.user-info .user-icon:after,
.user-info .user-icon:before {
   border-radius: 50%;
   content: "";
   left: 50%;
   position: absolute;
   transform: translate(-50%, 0);
   z-index: 1;
}

.user-info .user-icon:after {
   height: 20px;
   top: 70%;
   width: 20px;
}

.user-info .user-icon:before {
   height: 8px;
   top: 20%;
   width: 8px;
}

.user-info .user-name {
   font-size: 10px;
   padding-right: 7px;
}

/*
.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;
   font-weight: bold;
   padding: 20px 0;
   position: absolute;
   right: 0;
   width: 225px;
   z-index: 200;
}

.settings-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 {
   border-radius: 3px;
   cursor: pointer;
   display: inline-block;
   float: right;
   height: 24px;
   font-size: 10px;
   line-height: 24px;
   padding: 0 10px;
   position: relative;
   text-transform: uppercase;
}

.settings-action-holder > .form-confirm-button {
   border-width: 0;
   display: inline-block;
   font-weight: normal;
}