:root {
    --bar-bg-color: #2372DE; /* #141414 */
    --bar-bg-start-color: #2372de;
    --bar-fr-color: #ffffff; /*#ACCFFF*/
    --bar-bg-active-color: #1c5db5; /* #070707 */
    --bar-bg-active-start-color: #252559;
    --sub-bg-color: var(--bar-bg-color);
    --sub-bg-start-color: var(--bar-bg-start-color);
    --sub-fr-color: var(--bar-fr-color); /* #d06d70; */
    --sub-bg-active-color: var(--bar-bg-active-color); /* #b00c11 */
    --sub-bg-active-start-color: var(--bar-bg-active-start-color);
    --cssmenu-bg-container-color: var(--bar-bg-color);
    --cssmenu-fr-container-color: var(--bar-fr-color);
    --bar-height: 49px;
}

body {
    margin: 0;
    padding: 5px;
    color: #555;
    font: normal 10pt Arial,Helvetica,sans-serif;
    background: #EFEFEF;
}

#page {
    margin-top: 5px;
    margin-bottom: 5px;
    background: white;
    border: 1px solid #C9E0ED;
}

#header {
    margin: 0;
    padding: 9px 5px 9px 5px;
    border-top: 0px solid #C9E0ED;
    background: var(--bar-bg-color);
}

#header table {
    margin: 0;
    width: 100%;
}

#header td {
    padding: 0;
    margin: 0;
}

#content {
    padding: 20px;
    background: white;
}

#sidebar {
    padding: 20px 20px 20px 0;
    background: white;
}

#footer {
    padding: 10px;
    /*margin: 0px 20px;*/
    margin: 10px 0 0 0;
    font-size: 0.8em;
    text-align: center;
    border-top: 1px solid #C9E0ED;
    color: var(--bar-fr-color);
    background: var(--bar-bg-color);
}

#footer a {
    /*text-decoration: none;*/
    color: var(--bar-fr-color);
}


#logo {
    /*padding: 10px 20px;*/
    margin: 0px;
    padding: 0px;
    /*font-size: 200%;*/
}

div.flash-error, div.flash-notice, div.flash-success {
    padding:.8em;
    margin-bottom:1em;
    border:2px solid #ddd;
}

div.flash-error {
    background:#FBE3E4;
    color:#8a1f11;
    border-color:#FBC2C4;
}

div.flash-notice {
    background:#FFF6BF;
    color:#514721;
    border-color:#FFD324;
}

div.flash-success {
    background:#E6EFC2;
    color:#264409;
    border-color:#C6D880;
}

div.flash-error a {
    color:#8a1f11;
}

div.flash-notice a {
    color:#514721;
}

div.flash-success a {
    color:#264409;
}

div.form .rememberMe label {
    display: inline;
}

div.view {
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #C9E0ED;
}

div.breadcrumbs {
    font-size: 0.9em;
    padding: 5px 20px;
}

div.breadcrumbs span {
    font-weight: bold;
}

div.search-form {
    padding: 10px;
    margin: 10px 0;
    background: #eee;
}

.portlet {

}

.portlet-decoration {
    padding: 3px 8px;
    background: #B7D6E7;
    border-left: 5px solid #6FACCF;
}

.portlet-title {
    font-size: 12px;
    font-weight: bold;
    padding: 0;
    margin: 0;
    color: #298dcd;
}

.portlet-content {
    font-size:0.9em;
    margin: 0 0 15px 0;
    padding: 5px 8px;
    background:#EFFDFF;
}

.portlet-content ul {
    list-style-image:none;
    list-style-position:outside;
    list-style-type:none;
    margin: 0;
    padding: 0;
}

.portlet-content li {
    padding: 2px 0 4px 0px;
}

.operations {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.operations li {
    padding-bottom: 2px;
}

.operations li a {
    font: bold 12px Arial;
    color: #0066A4;
    display: block;
    padding: 2px 0 2px 8px;
    line-height: 15px;
    text-decoration: none;
}

.operations li a:visited {
    color: #0066A4;
}

.operations li a:hover {
    background: #80CFFF;
}

.left, .alignleft {
    float: left;
    display: inline;
}

.right, .alignright {
    float: right;
    display: inline;
}

.rojo {
    color: #f15a22;
}

/* The close button */
.closebtn {
    margin-left: 15px;
    font-weight: bold;
    float: right;
    font-size: 22px;
    line-height: 20px;
    cursor: pointer;
    transition: 0.3s;
}

/* When moving the mouse over the close button */
.closebtn:hover {
    color: black;
}

.grid-title {
    color: black;
    font-size: 1.3em;
    text-align: center;
}

/* CSSMENU */
#cssmenu ul,
#cssmenu li,
#cssmenu span,
#cssmenu a {
    margin: 0;
    padding: 0;
    position: relative;
}

#cssmenu {
    height: var(--bar-height);
    background: var(--bar-bg-color);
}

#cssmenu:after,
#cssmenu ul:after {
    content: '';
    display: block;
    clear: both;
}

#cssmenu a {
    color: var(--bar-fr-color);
    display: inline-block;
    font-family: Helvetica, Arial, Verdana, sans-serif;
    font-size: 12px;
    line-height: var(--bar-height);
    padding: 0 20px;
    text-decoration: none;
}

#cssmenu ul {
    list-style: none;
}

#cssmenu > ul {
    float: right;
}

#cssmenu > ul > li {
    float: left;
}

#cssmenu > ul > li:hover:after {
    content: '';
    display: block;
    width: 0;
    height: 0;
    position: absolute;
    left: 50%;
    bottom: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid var(--bar-fr-color);
    margin-left: -10px;
}

#cssmenu > ul > li:first-child a {
}

#cssmenu > ul > li:last-child a {
}

#cssmenu > ul > li.active a {
    background: var(--bar-bg-active-color);
    /*background: -moz-linear-gradient(top, var(--bar-bg-active-start-color) 0%, var(--bar-bg-active-color) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, var(--bar-bg-active-start-color)), color-stop(100%, var(--bar-bg-active-color)));
    background: -webkit-linear-gradient(top, var(--bar-bg-active-start-color) 0%, var(--bar-bg-active-color) 100%);
    background: -o-linear-gradient(top, var(--bar-bg-active-start-color) 0%, var(--bar-bg-active-color) 100%);
    background: -ms-linear-gradient(top, var(--bar-bg-active-start-color) 0%, var(--bar-bg-active-color) 100%);
    background: linear-gradient(to bottom, var(--bar-bg-active-start-color) 0%, var(--bar-bg-active-color) 100%);
    filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr=var(--bar-bg-active-start-color), EndColorStr=var(--bar-bg-active-color), GradientType=0);*/
}

#cssmenu > ul > li:hover > a {
    background: var(--bar-bg-active-color);
    /*background: -moz-linear-gradient(top, var(--bar-bg-active-start-color) 0%, var(--bar-bg-active-color) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, var(--bar-bg-active-start-color)), color-stop(100%, var(--bar-bg-active-color)));
    background: -webkit-linear-gradient(top, var(--bar-bg-active-start-color) 0%, var(--bar-bg-active-color) 100%);
    background: -o-linear-gradient(top, var(--bar-bg-active-start-color) 0%, var(--bar-bg-active-color) 100%);
    background: -ms-linear-gradient(top, var(--bar-bg-active-start-color) 0%, var(--bar-bg-active-color) 100%);
    background: linear-gradient(to bottom, var(--bar-bg-active-start-color) 0%, var(--bar-bg-active-color) 100%);
    filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr=var(--bar-bg-active-start-color), EndColorStr=var(--bar-bg-active-color), GradientType=0);*/
}

#cssmenu .has-sub {
    z-index: 1;
}

#cssmenu .has-sub:hover > ul {
    display: block;
}

#cssmenu .has-sub ul {
    display: none;
    position: absolute;
    width: 200px;
    top: 100%;
    left: 0;
}

#cssmenu .has-sub ul li {
    *margin-bottom: -1px;
}

#cssmenu .has-sub ul li a {
    background: var(--sub-bg-color);
    border-bottom: 1px dotted var(--sub-fr-color);
    filter: none;
    font-size: 11px;
    display: block;
    line-height: 120%;
    padding: 10px;
}

#cssmenu .has-sub ul li:hover a {
    background: var(--sub-bg-active-color);
    background: -moz-linear-gradient(top, var(--sub-bg-active-start-color) 0%, var(--sub-bg-active-color) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, var(--sub-bg-active-start-color)), color-stop(100%, var(--sub-bg-active-color)));
    background: -webkit-linear-gradient(top, var(--sub-bg-active-start-color) 0%, var(--sub-bg-active-color) 100%);
    background: -o-linear-gradient(top, var(--sub-bg-active-start-color) 0%, var(--sub-bg-active-color) 100%);
    background: -ms-linear-gradient(top, var(--sub-bg-active-start-color) 0%, var(--sub-bg-active-color) 100%);
    background: linear-gradient(to bottom, var(--sub-bg-active-start-color) 0%, var(--sub-bg-active-color) 100%);
    filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr=var(--sub-bg-active-start-color), EndColorStr=var(--sub-bg-active-color), GradientType=0);
}

#cssmenu .has-sub .has-sub:hover > ul {
    display: block;
}

#cssmenu .has-sub .has-sub ul {
    display: none;
    position: absolute;
    left: 100%;
    top: 0;
}

#cssmenu .has-sub .has-sub ul li a {
    background: var(--sub-bg-color);
    border-bottom: 1px dotted var(--sub-fr-color);
}

#cssmenu .has-sub .has-sub ul li a:hover {
    background: var(--sub-bg-active-color);
    background: -moz-linear-gradient(top, var(--sub-bg-active-start-color) 0%, var(--sub-bg-active-color) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, var(--sub-bg-active-start-color)), color-stop(100%, var(--sub-bg-active-color)));
    background: -webkit-linear-gradient(top, var(--sub-bg-active-start-color) 0%, var(--sub-bg-active-color) 100%);
    background: -o-linear-gradient(top, var(--sub-bg-active-start-color) 0%, var(--sub-bg-active-color) 100%);
    background: -ms-linear-gradient(top, var(--sub-bg-active-start-color) 0%, var(--sub-bg-active-color) 100%);
    background: linear-gradient(to bottom, var(--sub-bg-active-start-color) 0%, var(--sub-bg-active-color) 100%);
    filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr=var(--sub-bg-active-start-color), EndColorStr=var(--sub-bg-active-color), GradientType=0);
}

/* Preloder */
#preloder {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 999999;
    /*background: #000;*/
    background: #EFEFEF;
}

.loader {
    width: 40px;
    height: 40px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -13px;
    margin-left: -13px;
    border-radius: 60px;
    animation: loader 0.8s linear infinite;
    -webkit-animation: loader 0.8s linear infinite;
}

@keyframes loader {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
        border: 4px solid #f44336;
        border-left-color: transparent;
    }
    50% {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
        border: 4px solid #673ab7;
        border-left-color: transparent;
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
        border: 4px solid #f44336;
        border-left-color: transparent;
    }
}

@-webkit-keyframes loader {
    0% {
        -webkit-transform: rotate(0deg);
        border: 4px solid #f44336;
        border-left-color: transparent;
    }
    50% {
        -webkit-transform: rotate(180deg);
        border: 4px solid #673ab7;
        border-left-color: transparent;
    }
    100% {
        -webkit-transform: rotate(360deg);
        border: 4px solid #f44336;
        border-left-color: transparent;
    }
}