/*
* RONIN LAYOUT & THEME
* Supported Browsers > Google Chrome 3+ , Mozilla Firefox 3+ , Safari 3+ , Opera 3+ , Yandex Browser , Inernet Explorer 9+
* Copyright 2014 - PrimeFaces Theme Market - PrimeTek */

/* FONT-FACE*/

@font-face {
    font-family: 'dosismedium';
    src: url("/javax.faces.resource/fonts/dosis-medium-webfont.eot.xhtml?ln=primefaces-ronin");
    src: url("/javax.faces.resource/fonts/dosis-medium-webfont.eot.xhtml?ln=primefaces-ronin#iefix") format('embedded-opentype'),
        url("/javax.faces.resource/fonts/dosis-medium-webfont.woff2.xhtml?ln=primefaces-ronin") format('woff2'),
        url("/javax.faces.resource/fonts/dosis-medium-webfont.woff.xhtml?ln=primefaces-ronin") format('woff'),
        url("/javax.faces.resource/fonts/dosis-medium-webfont.ttf.xhtml?ln=primefaces-ronin") format('truetype'),
        url("/javax.faces.resource/fonts/dosis-medium-webfont.svg.xhtml?ln=primefaces-ronin#dosismedium") format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'dosisregular';
    src: url("/javax.faces.resource/fonts/dosis-regular-webfont.eot.xhtml?ln=primefaces-ronin");
    src: url("/javax.faces.resource/fonts/dosis-regular-webfont.eot.xhtml?ln=primefaces-ronin#iefix") format('embedded-opentype'),
        url("/javax.faces.resource/fonts/dosis-regular-webfont.woff2.xhtml?ln=primefaces-ronin") format('woff2'),
        url("/javax.faces.resource/fonts/dosis-regular-webfont.woff.xhtml?ln=primefaces-ronin") format('woff'),
        url("/javax.faces.resource/fonts/dosis-regular-webfont.ttf.xhtml?ln=primefaces-ronin") format('truetype'),
        url("/javax.faces.resource/fonts/dosis-regular-webfont.svg.xhtml?ln=primefaces-ronin#dosisregular") format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'dosissemibold';
    src: url("/javax.faces.resource/fonts/dosis-semibold-webfont.eot.xhtml?ln=primefaces-ronin");
    src: url("/javax.faces.resource/fonts/dosis-semibold-webfont.eot.xhtml?ln=primefaces-ronin#iefix") format('embedded-opentype'),
        url("/javax.faces.resource/fonts/dosis-semibold-webfont.woff2.xhtml?ln=primefaces-ronin") format('woff2'),
        url("/javax.faces.resource/fonts/dosis-semibold-webfont.woff.xhtml?ln=primefaces-ronin") format('woff'),
        url("/javax.faces.resource/fonts/dosis-semibold-webfont.ttf.xhtml?ln=primefaces-ronin") format('truetype'),
        url("/javax.faces.resource/fonts/dosis-semibold-webfont.svg.xhtml?ln=primefaces-ronin#dosissemibold") format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'dosislight';
    src: url("/javax.faces.resource/fonts/dosis-light-webfont.eot.xhtml?ln=primefaces-ronin");
    src: url("/javax.faces.resource/fonts/dosis-light-webfont.eot.xhtml?ln=primefaces-ronin#iefix") format('embedded-opentype'),
        url("/javax.faces.resource/fonts/dosis-light-webfont.woff2.xhtml?ln=primefaces-ronin") format('woff2'),
        url("/javax.faces.resource/fonts/dosis-light-webfont.woff.xhtml?ln=primefaces-ronin") format('woff'),
        url("/javax.faces.resource/fonts/dosis-light-webfont.ttf.xhtml?ln=primefaces-ronin") format('truetype'),
        url("/javax.faces.resource/fonts/dosis-light-webfont.svg.xhtml?ln=primefaces-ronin#dosislight") format('svg');
    font-weight: normal;
    font-style: normal;

}

.FontDosisSemiBold {
    font-family: 'dosissemibold';
}

.FontDosisMedium {
    font-family: 'dosismedium';
}

.FontDosisRegular {
    font-family: 'dosisregular';
}

.FontDosisLight {
    font-family: 'dosislight';
}

/*BODY*/
html {
    height: 100%;
}

body {
    margin: 0px;
    height: 100%;
    background-color: #F4F4F4;
    font-family: 'dosismedium';
    letter-spacing: -0.3px;
}

/* login screen styling */
.loginbody {
    background-color: #ec554a;
    /*background-image: url("/javax.faces.resource/images/background.png.xhtml?ln=ronin-layout");*/
    background-repeat: repeat;
}

/* wrapper */
#wrapper {
    display: table;
    height: 100%;
    table-layout: fixed;
    width: 100%;
}

#wrapperIndent {
    display: table-row;
    height: 100%;
}

/* menu mask*/
#menu-mask {
    position: fixed;
    z-index: 999998;
    background-color: #647984;
    opacity: 0;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.menu-mask-open {
    width: 100%;
    height: 100%;
    opacity: 0.4 !important;
}

/*Layout Menu Cover */
#layout-menu-cover {
    width: 200px;
    min-width: 200px;
    display: table-cell;
    background-color: #003D50;
    background-image: url("/javax.faces.resource/images/background.png.xhtml?ln=ronin-layout");
    background-repeat: repeat;
    height: 100%;
    vertical-align: top;
    -webkit-box-shadow: inset -2px 0px 0px 0px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: inset -2px 0px 0px 0px rgba(0, 0, 0, 0.3);
    box-shadow: inset -2px 0px 0px 0px rgba(0, 0, 0, 0.3);
}

#layout-menu-cover:hover {
    width: 200px;
}

/* Layout Top Bar*/
#layout-topbar {
    width: 86%;
    margin: 20px auto;
    text-align: center;
}

#logo {
    width: auto;
    height: auto;
    display: block;
}

#logo img {
    width: 80px;
    height: 88px;
    margin: 0px auto;
}

#topbar-link-cover {
    display: inline-block;
    margin: 20px auto 5px auto;
    clear: both;
    text-align: center;
}

.topbar-link {
    display: inline-block;
    width: 21px;
    height: 21px;
    background-color: #012A33;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    padding: 6px;
    margin: 2px;
    color: #A7B8C1;
}

.topbar-link:hover {
    background-color: #053742;
    color: #fff;
}

#topbar-search {
    border: 0px;
    border: none;
    padding: 6px 30px 6px 7%;
    width: 58%;
    font-size: 16px;
    background-color: #012A33;
    color: #A7B8C1;
    background-image: url("/javax.faces.resource/images/searchicon.svg.xhtml?ln=ronin-layout");
    background-position: center right;
    background-repeat: no-repeat;
    background-size: 24px;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}

#topbar-search::-webkit-input-placeholder {
    color: #A7B8C1;
}

#topbar-search:-moz-placeholder {
    color: #A7B8C1;
}

#topbar-search::-moz-placeholder {
    color: #A7B8C1;
}

#topbar-search:-ms-input-placeholder {
    color: #A7B8C1;
}

/* mobile menu button */
#mobile-menu-button {
    display: inline-block;
    padding: 7px 10px;
    background-color: #CE2246;
    color: #ffffff;
    font-size: 15px;
    font-family: 'dosismedium';
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}

#mobile-menu-button:hover {
    background-color: #012A33;
    color: #fff;
}

/*Layout Menu */
#layout-menu {
    width: 100%;
    margin: 20px auto;
    padding: 0px;
    border-top: solid 1px #012A33;
}

#layout-menu li {
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

#layout-menu li:hover {
}

#layout-menu li a {
    color: #A7B8C1;
    cursor: pointer;
}

#layout-menu ul {
    padding: 0px;
    overflow: hidden;
    height: 0px;
    opacity: 0;
    -webkit-transition: all 1.2s ease;
    -moz-transition: all 1.2s ease;
    -ms-transition: all 1.2s ease;
    -o-transition: all 1.2s ease;
    transition: all 1.2s ease;
}

#layout-menu > li {
    width: auto;
    height: auto;
    font-size: 16px;
    border-bottom: solid 1px #012A33;
}

#layout-menu > li > a {
    width: 80%;
    padding: 15px 10%;
    display: block;
    font-family: 'dosismedium';
    text-align: center;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

#layout-menu > li > a:hover, #layout-menu > li > a:active, #layout-menu > li > a:focus {
    color: #CE2246;
}

#layout-menu > li > a > i {
    display: block;
    font-size: 20px;
}

#layout-menu li ul li {
    font-family: 'dosismedium';
    font-size: 14px;
}

#layout-menu li ul li:hover > a {
    background-color: #12424C;
    color: #fff;
}

#layout-menu > li ul li a:hover {
    color: #fff;
}

#layout-menu > li ul li a:focus {
    color: #CE2246;
}

#layout-menu li ul li a {
    width: 80%;
    padding: 7px 10%;
    display: block;
    text-align: left;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

#layout-menu li ul li a:hover {
    color: #ffffff;
}

#layout-menu li ul li a > i {
    margin-right: 2px;
}

/* menu levels */
.menu-level-1 {
    text-indent: 8px;
}

.menu-level-2 {
    text-indent: 16px;
}

.menu-level-3 {
    text-indent: 24px;
}

#layout-menu.showmenu {
}

ul.active-menu.active-menu-restore {
    height: auto !important;
    opacity: 1 !important;
    -webkit-transition: none !important;
    -moz-transition: none !important;
    -ms-transition: none !important;
    -o-transition: none !important;
    transition: none !important;
}

/*Layout Portlets Cover*/
#layout-portlets-cover {
    display: table-cell;
    height: 100%;
    width: 100%;
    vertical-align: top;
    padding: 10px 1%;
}

/* Flex Layout */
.Flex {
    display: table;
    table-layout: fixed;
    width: 100%;
}

.FlexRow {
    display: table-row;
}

.FlexCell {
    display: table-cell;
}

.glyph {
    float: left;
    font-size: 20px;
}

.muted {
    visibility: hidden;
}

/* LAYOUT STANDART STYLES -----------------------------------------------------------------*/

a {
    text-decoration: none;
    outline: none;
}

img {
    outline: none;
}

li {
    list-style: none;
}

/* text colors */
.grayblue {
    color: #A7B8C1;
}

.red {
    color: #CE2246;
}

.navyblue {
    color: #003D50;
}

.softgray {
    color: #E8E8E8;
}

.white {
    color: #ffffff;
}

.blue {
    color: #1C75BC;
}

.orange {
    color: #FBB040;
}

.green {
    color: #2BB673;
}

.leaden {
    color: #778D9B;
}

/* background colors */
.grayblueback {
    background-color: #A7B8C1;
}

.redback {
    background-color: #CE2246;
}

.navyblueback {
    background-color: #003D50;
}

.softgrayback {
    background-color: #E8E8E8;
}

.whiteback {
    background-color: #ffffff;
}

.blueback {
    background-color: #1C75BC;
}

.orangeback {
    background-color: #FBB040;
}

.greenback {
    background-color: #2BB673;
}

.leadenback {
    background-color: #778D9B;
}

/* top bordered box */
.RedBorderedBox {
    border-top: solid 4px #5b5f6c;
}

.NavyBlueBorderedBox {
    border-top: solid 5px #003D50;
}

.BlueBorderedBox {
    border-top: solid 4px #5b5f6c;
}

.OrangeBorderedBox {
    border-top: solid 4px #FBB040;
}

.GreenBorderedBox {
    border-top: solid 4px #2BB673;
}

/* shadows for gray and green boxes*/
.ShadowBox {
    -webkit-box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.1);
    width: auto;
    padding: 10px 15px;
    display: block;
}

/* seperator line */
.Seperator {
    border-bottom: solid 1px #003D50;
    width: 100%;
    overflow: hidden;
    height: 0px;
    margin: 15px 0px;
    float: left;
}

.SeperatorWhite {
    border-bottom: solid 1px #ffffff;
    width: 100%;
    overflow: hidden;
    height: 0px;
    margin: 15px 0px;
    float: left;
}

/* hover effect for boxlink and links */
.HoverEffect {
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.HoverEffect:hover {
    opacity: 0.8;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.BigTopic {
    font-family: 'dosismedium';
    margin: 0px 0px 10px 0px !important;
    font-weight: normal;
    color: #003D50;
    font-size: 26px;
}

.changecolor:hover {
    background-color: #FBB040;
    padding: 10px;
}

/* MEDIA QUERIES **************************************************************************************************************** */

/* Large desktop */
@media (min-width: 960px) {

    /*Layout Menu Cover */
    #layout-menu-cover ul.active-menu {
        height: auto;
        opacity: 1;
        background-color: #012A33;
    }

    #layout-menu-cover #layout-menu > li > a.active-menu,
    #layout-menu > li > a.active-menu {
        color: #CE2246;
        background-color: #012A33;
    }
}

@media (min-width: 960px) and (max-width: 1100px) {

}

/* Portrait tablet to landscape and desktop */
@media (min-width: 640px) and (max-width: 960px) {

    html, body {
        height: auto;
    }

    /* wrapper */
    #wrapper {
        display: block;
        width: 100%;
        height: 100%;
    }

    #wrapperIndent {
        display: block;
        height: 100%;
    }

    /*Layout Menu Cover */
    #layout-menu-cover {
        display: block;
        height: auto;
        width: 96%;
        padding: 2%;
        overflow: hidden;
        -webkit-box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.5);
        -moz-box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.5);
        box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.5);
    }

    #layout-menu-cover:hover {
        width: 96%;
    }

    /* Layout Top Bar*/
    #layout-topbar {
        width: 100%;
        margin: 0px;
        text-align: left;
        overflow: hidden;
        display: block;
    }

    #logo {
        width: auto;
        height: auto;
        display: inline-block;
        float: left;
    }

    #logo img {
        width: auto;
        max-width: 100px;
        height: auto;
        max-height: 50px;
        min-height: 40px;
        margin: 0px auto;
    }

    #topbar-link-cover {
        display: inline-block;
        float: right;
        margin: 0px;
        clear: none;
        margin-top: 0.4%;
    }

    .topbar-link {
        margin: 0px 2px;
    }

    #topbar-search {
        width: 100px;
        float: right;
        padding: 6px 30px 6px 10px;
        margin: 0.4% 4px 0px 0px;
    }

    /* mobile menu button */
    #mobile-menu-button {
        float: right;
        margin: 0.4% 0px 0px 10px;
    }

    /*Layout Menu */
    #layout-menu {
        width: 45%;
        margin: 0px;
        padding: 0px;
        border-top: none;
        position: absolute;
        background-color: #003D50;
        background-image: url("/javax.faces.resource/images/background.png.xhtml?ln=ronin-layout");
        background-repeat: repeat;
        top: 75px;
        right: 2%;
        -webkit-box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.5);
        -moz-box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.5);
        box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.5);
        height: 0px;
        overflow: hidden;
        -webkit-transition: all 0.3s ease;
        -moz-transition: all 0.3s ease;
        -ms-transition: all 0.3s ease;
        -o-transition: all 0.3s ease;
        transition: all 0.3s ease;
        z-index: 99999999;
    }

    #layout-menu.showmenu {
        top: 80px;
        display: block;
        height: auto;
    }

    #layout-menu-cover:hover ul.active-menu {
        height: auto;
        opacity: 1;
        background-color: #012A33;
    }

    #layout-menu-cover:hover #layout-menu > li > a.active-menu,
    #layout-menu > li > a.active-menu {
        color: #CE2246;
        background-color: #012A33;
    }

    #layout-menu-cover ul.active-menu {
        height: auto;
        opacity: 1;
        background-color: #012A33;
    }

    /*Layout Portlets Cover*/
    #layout-portlets-cover {
        display: block;
        width: 100%;
        height: 100%;
        padding: 1% 0px;
    }

    .ShadowBox {
        width: 96%;
        padding: 1.7% 2%;
    }
}

/* Landscape phone to portrait tablet */
@media (min-width: 480px) and (max-width: 640px) {

    html, body {
        height: auto;
    }

    /* wrapper */
    #wrapper {
        display: block;
        width: 100%;
        height: 100%;
    }

    #wrapperIndent {
        display: block;
        height: 100%;
    }

    /*Layout Menu Cover */
    #layout-menu-cover {
        display: block;
        height: auto;
        width: 96%;
        padding: 2%;
        overflow: hidden;
        -webkit-box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.5);
        -moz-box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.5);
        box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.5);
    }

    #layout-menu-cover:hover {
        width: 96%;
    }

    /* Layout Top Bar*/
    #layout-topbar {
        width: 100%;
        margin: 0px;
        text-align: left;
        overflow: hidden;
        display: block;
    }

    #logo {
        width: auto;
        height: auto;
        display: inline-block;
        float: left;
    }

    #logo img {
        width: auto;
        max-width: 100px;
        height: auto;
        max-height: 50px;
        min-height: 40px;
        margin: 0px auto;
    }

    #topbar-link-cover {
        display: inline-block;
        float: right;
        margin: 0px;
        clear: none;
        margin-top: 0.6%;
    }

    .topbar-link {
        margin: 0px 2px;
    }

    #topbar-search {
        width: 100px;
        float: right;
        padding: 6px 30px 6px 10px;
        margin: 0.6% 4px 0px 0px;
    }

    /* mobile menu button */
    #mobile-menu-button {
        float: right;
        margin: 0.6% 0px 0px 10px;
    }

    /*Layout Menu */
    #layout-menu {
        width: 60%;
        margin: 0px;
        padding: 0px;
        border-top: none;
        position: absolute;
        background-color: #003D50;
        background-image: url("/javax.faces.resource/images/background.png.xhtml?ln=ronin-layout");
        background-repeat: repeat;
        top: 65px;
        right: 2%;
        -webkit-box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.5);
        -moz-box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.5);
        box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.5);
        height: 0px;
        overflow: hidden;
        -webkit-transition: all 0.3s ease;
        -moz-transition: all 0.3s ease;
        -ms-transition: all 0.3s ease;
        -o-transition: all 0.3s ease;
        transition: all 0.3s ease;
        z-index: 99999999;
    }

    #layout-menu.showmenu {
        top: 70px;
        display: block;
        height: auto;
    }

    #layout-menu-cover:hover ul.active-menu {
        height: auto;
        opacity: 1;
        background-color: #012A33;
    }

    #layout-menu-cover:hover #layout-menu > li > a.active-menu,
    #layout-menu > li > a.active-menu {
        color: #CE2246;
        background-color: #012A33;
    }

    #layout-menu-cover ul.active-menu {
        height: auto;
        opacity: 1;
        background-color: #012A33;
    }

    /*Layout Portlets Cover*/
    #layout-portlets-cover {
        display: block;
        width: 100%;
        height: 100%;
        padding: 1% 0px;
    }

    .ShadowBox {
        width: 95%;
        padding: 2.3% 2.5%;
    }
}

/* Portrait phones and down */
@media (min-width: 320px) and (max-width: 480px) {

    html, body {
        height: auto;
    }

    /* wrapper */
    #wrapper {
        display: block;
        width: 100%;
        height: 100%;
    }

    #wrapperIndent {
        display: block;
        height: 100%;
    }

    /*Layout Menu Cover */
    #layout-menu-cover {
        display: block;
        height: auto;
        width: 96%;
        padding: 2%;
        overflow: hidden;
        -webkit-box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.5);
        -moz-box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.5);
        box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.5);
    }

    #layout-menu-cover:hover {
        width: 96%;
    }

    /* Layout Top Bar*/
    #layout-topbar {
        width: 100%;
        margin: 0px;
        text-align: left;
        overflow: hidden;
        display: block;
    }

    #logo {
        width: auto;
        height: auto;
        display: inline-block;
        float: left;
    }

    #logo img {
        width: auto;
        max-width: 100px;
        height: auto;
        max-height: 50px;
        min-height: 40px;
        margin: 0px auto;
    }

    #topbar-link-cover {
        display: inline-block;
        float: right;
        margin: 0px;
        clear: none;
        margin-top: 0.4%;
    }

    .topbar-link {
        margin: 0px 2px;
    }

    #topbar-search {
        width: 80%;
        float: left;
        padding: 6px 15% 6px 5%;
        margin: 1% 0px 0.3% 0px;
    }

    /* mobile menu button */
    #mobile-menu-button {
        float: right;
        margin: 0.4% 0px 0px 10px;
    }

    /*Layout Menu */
    #layout-menu {
        width: 70%;
        margin: 0px;
        padding: 0px;
        border-top: none;
        position: absolute;
        background-color: #003D50;
        background-image: url("/javax.faces.resource/images/background.png.xhtml?ln=ronin-layout");
        background-repeat: repeat;
        top: 40px;
        right: 2%;
        -webkit-box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.5);
        -moz-box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.5);
        box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.5);
        height: 0px;
        overflow: hidden;
        -webkit-transition: all 0.3s ease;
        -moz-transition: all 0.3s ease;
        -ms-transition: all 0.3s ease;
        -o-transition: all 0.3s ease;
        transition: all 0.3s ease;
        z-index: 99999999;
    }

    #layout-menu.showmenu {
        top: 45px;
        display: block;
        height: auto;
    }

    #layout-menu-cover:hover ul.active-menu {
        height: auto;
        opacity: 1;
        background-color: #012A33;
    }

    #layout-menu-cover:hover #layout-menu > li > a.active-menu,
    #layout-menu > li > a.active-menu {
        color: #CE2246;
        background-color: #012A33;
    }

    #layout-menu-cover ul.active-menu {
        height: auto;
        opacity: 1;
        background-color: #012A33;
    }

    /*Layout Portlets Cover*/
    #layout-portlets-cover {
        display: block;
        width: 100%;
        height: 100%;
        padding: 1% 0px;
    }

    .ShadowBox {
        width: 95%;
        padding: 2.3% 2.5%;
    }
}

#layout-portlets-cover:before, #layout-portlets-cover:after,
.ShadowBox:before, .ShadowBox:after {
    content: "";
    display: table;
    border-collapse: collapse;
}

#layout-portlets-cover:after,
.ShadowBox:after {
    clear: both;
}