@import url(https://fonts.googleapis.com/css?family=PT+Sans+Caption:400,700&subset=latin,latin-ext);
@import url("silk-sprite.css");
@import url("jquery-ui/jquery-ui.css");

:root {
    --imgBgPattern: url(../images/main/new/bg-pattern.png);
    --imgBgContent: url(../images/main/new/bg-content.png);
    --imgLogo: url(../images/main/new/logo-big-purple.png);
    --imgLogoFull: url(../images/main/new/logo-big-full-purple.png);
    --imgIconInfo: url(../images/main/new/icon_info.png);
    --imgIconOk: url(../images/main/new/icon_ok.png);
    --imgIconError: url(../images/main/new/icon_error.png);
    --imgLoader: url(../images/main/new/loader.gif);

    --colorPurpleMain: #29166f;
    --colorPurpleMainLight90: #3e2d7d;
    --colorPurpleMainLight80: #54458c;
    --colorPurpleMainLight70: #695c9a;
    --colorPurpleMainLight60: #7f73a9;
    --colorPurpleMainLight50: #948bb7;
    --colorPurpleMainLight40: #a9a2c5;
    --colorPurpleMainLight30: #bfb9d4;
    --colorPurpleMainLight20: #d4d0e2;
    --colorPurpleMainLight10: #eae8f1;
    --colorPurpleMainRgba: rgba(41, 22, 111, 0.6);

    --colorGreenMain: #cdd315;
    --colorGrayMain: #d9e1e2;

    --colorWhiteMain: #ffffff;
    --colorWhiteLight: #f5f5f5;
    --colorWhiteLighter: #cccccc;

    --colorGrayBlack: #323232;
    --colorGrayDarker: #333333;
    --colorGrayDark: #5d5c5c;
    --colorGrayMiddle: #dadada;
    --colorGrayLighter: #dedede;
    --colorGrayLight: #f7f7f7;

    --colorBlueNavy: navy;
    --colorBlueDark: #004c78;
    --colorBlueLighter: #00bfe8;
    --colorBlueLight: #d7eff6;

    --colorGreen: green;
    --colorGreenDark: #40893e;
    --colorGreenLighter: #38b069;
    --colorGreenLighter2: #529214;
    --colorGreenLight: #deede7;
    --colorGreenLightest: #E6EFC2;

    --colorRed: red;
    --colorRedDark: #c13c3d;
    --colorRedLighter: #aa3e3e;
    --colorRedLight: #ece0e1;

    --colorBlack: #000000;

    --colorDarkMain: var(--colorPurpleMain);
    --colorDarkLight90: var(--colorPurpleMainLight90);
    --colorDarkLight80: var(--colorPurpleMainLight80);
    --colorDarkLight70: var(--colorPurpleMainLight70);
    --colorDarkLight60: var(--colorPurpleMainLight60);
    --colorDarkLight50: var(--colorPurpleMainLight50);
    --colorDarkLight40: var(--colorPurpleMainLight40);
    --colorDarkLight30: var(--colorPurpleMainLight30);
    --colorDarkLight20: var(--colorPurpleMainLight20);
    --colorDarkLight10: var(--colorPurpleMainLight10);
    --colorDarkMainRgba: var(--colorPurpleMainRgba);

    --colorLightMain: var(--colorGrayMain);
    --colorWhite: var(--colorWhiteMain);
    --colorLink: var(--colorDarkLight70);

    --colorBgHeaderMain: var(--colorDarkLight70);
    --colorBgDashboardMain: var(--colorGrayLight);
    --colorBgFocusMain: var(--colorDarkLight10);
    --colorBgFocusButton: var(--colorBgHeaderMain);
    --colorBgBoxInfo: var(--colorBlueLight);
    --colorBgBoxOk: var(--colorGreenLight);
    --colorBgBoxError: var(--colorRedLight);
    --colorBgTableTh: var(--colorDarkLight30);
    --colorBgTableTh2: var(--colorDarkLight20);
    --colorBgTableTh3: var(--colorDarkLight10);
    --colorBgTableTdHover: var(--colorGreenLightest);
    --colorBgTableTdColspan: var(--colorDarkLight30);
    --colorBgHover: var(--colorDarkLight50);

    --colorFontContent: var(--colorGrayBlack);
    --colorFontHeaderMain: var(--colorWhiteMain);
    --colorFontHeading: var(--colorDarkLight90);
    --colorFontBoxInfo: var(--colorBlueDark);
    --colorFontBoxOk: var(--colorGreenDark);
    --colorFontBoxError: var(--colorRedDark);
    --colorFontTableTh: var(--colorDarkMain);
    --colorFontTableThLight1: var(--colorDarkLight80);
    --colorFontTableThLight2: var(--colorDarkLight70);
    --colorFontTableTdHover: var(--colorGreenLighter2);
    --colorFontInputOld: var(--colorGrayDarker);
    --colorFontInputDescription: var(--colorGrayDark);
    --colorFontFilterOld: var(--colorGrayDark);
    --colorFontFilterOld2: var(--colorWhiteLight);

    --colorBorderDashboard: var(--colorDarkLight70);
    --colorBorderDashboardHover: var(--colorDarkMain);
    --colorBorderClassic: var(--colorGrayLighter);
    --colorBorderClassic2: var(--colorGrayMiddle);
    --colorBorderClassic3: var(--colorWhiteLighter);
    --colorBorderClassic4: var(--colorPurpleMainLight40);
    --colorBorderBoxInfo: var(--colorBlueLighter);
    --colorBorderBoxOk: var(--colorGreenLighter);
    --colorBorderBoxError: var(--colorRedLighter);
    --colorBorderTableTh: var(--colorDarkLight70);
    --colorBorderTableTd: var(--colorWhiteLight);

    --colorShadowDashboard: var(--colorDarkLight60);
    --colorShadowText: var(--colorBlack);

    --colorRgbaTooltips: rgba(169, 162, 197, 0.8);
    --colorRgbaLoginWrapper: rgba(169, 162, 197, 0.2);
}


body {
    margin: 0;
    padding: 0;
    color: var(--colorFontContent);
    font-family: Helvetica;
    font-family: 'PT Sans Caption', sans-serif;
    font-size: 12px;
    background-color: var(--colorDarkMain);
    height: 100%;
}

body.bg3 {
    background-image: var(--imgBgPattern);
}

body.bg2 {
    background-image: url(../images/main/bg-new2.png);
}

body.bg1 {
    background-image: url(../images/main/back-pattern.png);
}

#page {
    margin: 0;
    padding: 0;
}

/*HEADER*/

#header {
    margin: 0;
    padding: 0;
    width: 100%;
    background-color: var(--colorLightMain);
    height: 102px;
    border-bottom: 2px solid var(--colorDarkLight80);
}

#header_wrapper{
    background-image: var(--imgBgPattern);
    height: 100%;
}

#header_content {
    width: 990px;
    margin-left: auto;
    margin-right: auto;
}

/*LOGO*/
.logo {
    float: left;
    margin-top: 18px;
}

#main-logo {
    background: var(--imgLogo) no-repeat;
    width: 250px;
    height: 70px;
}

/* LOGOUT */

#logout-index {
    background-color: var(--colorDarkMainRgba);
    width: 350px;
    height: 80px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    margin-top: 10px;
}

.logout-btn {
    float: right;
    margin-top: 10px;
    margin-right: 10px;
}

.logout {
    float: right;
    margin-top: 60px;
    margin-right: -150px;
}

.greeting{
    float: right;
    font-size: 18px;
    color: var(--colorWhite);
    padding: 5px 10px 0px 0px;
    width: 100%;
    text-align: right;
}

.logout-info{
    float: left;
    font-size: 14px;
    color: var(--colorWhite);
    margin: 25px auto 10px 10px;
}

/* LOGIN _PAGE */

#login-page {
    margin:0;
    padding:0;
}

#login-header {
    background-color: var(--colorLightMain);
    height: 200px;
    border-bottom: 2px solid var(--colorDarkLight80);
}

#login-header-wrapper{
    background-image: var(--imgBgPattern);
    height: 100%;
}

#login-content {
    width: 350px;
    margin-left: auto;
    margin-right: auto;
}

#login-logo {
    padding-top: 25px;
}

#login-main-logo {
    background: var(--imgLogoFull) no-repeat;
    width: 250px;
    height: 160px;
    margin: 0 auto;
}

#login-main {
    padding: 10px;
}

#login-form {
    background-color: var(--colorWhite);
    padding: 5px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    width: 350px;
    margin-left: auto;
    margin-right: auto;
}

#login-main > #login-content {
    width: 650px;
    min-height: 300px;
    height: 300px;
}

#login-form-inner {
    padding: 5px;
}

#login-form-inner > form input {
    height: 30px;
    width: 87%;
    color: var(--colorDarkMain);
    border: 1px solid var(--colorDarkMain);
    background-color: var(--colorBgFocusMain);
}

#login-form-inner > form input::placeholder {
    color: var(--colorDarkMain);
}

#login-form-inner > form input:focus {
    box-shadow: none;
}

#login-form-inner > form input:active {
    background-color: var(--colorBgFocusMain);
}

#login-form-inner .add-on {
    height:25px;
    padding-top:7px;
    border: 1px solid var(--colorDarkMain);
    background-color: var(--colorDarkLight70);
}

#login-form-inner h3 {
    padding:0;
    margin:0;
    margin-top:10px;
    margin-bottom:5px;
    color: var(--colorDarkLight60);
    border-bottom:1px solid #B8D2F2;
}

.login_box_content label {
    width:420px;
    margin-bottom:20px;
    color: var(--colorFontInputOld);
    font-weight:500;
    font-family:Helvetica;
    font-family: 'PT Sans Caption', sans-serif;
    font-size:15px;
}

.login_input {
    width: 375px;
    height: 30px;
    text-align: center;
    font-size: 15px;
    border: 1px solid var(--colorBorderClassic2);
    background-color: var(--colorFontFilterOld2);
    color: var(--colorFontInputOld);
    -webkit-border-radius: 3px;
    -webkit-border-top-left-radius: 3px;
    -webkit-border-top-right-radius: 3px;
    -moz-border-radius: 3px;
    -moz-border-radius-topleft: 3px;
    -moz-border-radius-topright: 3px;

}

.login_capslock_div{
    min-height: 23px;
}

.login_capslock_msg{
    text-align: center;
    color: #9e1515;
    padding-bottom: 5px;
    display: none;
}

/* MIDDLE */
#middle {
    /*padding-top:30px; */
}

#content {
    background-color: var(--colorWhite);
    background-image: var(--imgBgContent);
    height: 100%;
    margin-left: auto;
    margin-right: auto;
    width: 1024px;
    padding-top: 10px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    margin-top: 10px;
}

/*GLOBAL*/
.left {
    float:left;
}

.right {
    float:right;
}

.center {
    text-align: center;
}

.clear {
    clear:both;
}

.clickable {
    cursor:pointer;
}

.noClick {
    pointer-events: none;
}

#footer {
    width:100%;
    height:17px;
    background-image:url(../images/main/footer.png);
    position:absolute;
    bottom:0px;
}

/*LOGINBOX*/

#login_box {
    width: 355px;
    margin-left: auto;
    margin-right: auto;
}

/* BIG BOX */

#big_box {
    width: 973px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 20px;
}

.box_header {
    height:35px;
}

.box_left {
    width: 7px;
    background-color: var(--colorBgHeaderMain);
    height: 35px;
    float: left;
    -webkit-border-top-left-radius: 3px;
    -moz-border-radius-topleft: 3px;
    border-top-left-radius: 3px;
}

.login_box_middle {
    background-color: var(--colorBgHeaderMain);
    height: 25px;
    width: 339px;
    float: left;
    color: var(--colorWhite);
    font-weight: 500;
    font-size:15px;
    padding-top:10px;
    padding-left:13px;
    text-shadow: 1px 1px 1px var(--colorShadowText);
}

.big_box_middle {
    background-color: var(--colorBgHeaderMain);
    height: 30px;
    width: 946px;
    float: left;
    color: var(--colorWhite);
    font-weight: 500;
    font-size: 16px;
    padding-top: 5px;
    padding-left: 13px;
    text-shadow: 1px 1px 1px var(--colorShadowText);
}

.box_right {
    width: 7px;
    background-color: var(--colorBgHeaderMain);
    height: 35px;
    float: right;
    -webkit-border-top-right-radius: 3px;
    -moz-border-radius-topright: 3px;
    border-top-right-radius: 3px;
}

.big_box_content {
    width: 971px;
    background-color: var(--colorBgDashboardMain);
    border: 1px solid var(--colorBorderDashboard);
    float: left;
    -webkit-border-radius: 5px;
    -webkit-border-top-left-radius: 0;
    -webkit-border-top-right-radius: 0;
    -moz-border-radius: 5px;
    -moz-border-radius-topleft: 0;
    -moz-border-radius-topright: 0;
    border-radius: 5px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    margin-bottom: 20px;
}

form.loginFormSimple{
    margin-bottom: 15px;
}

.loginNoAuthorization{
    margin: 20px 0px 20px 0px;
    text-align: center;
}

.containerLoginButtons{
    width: 100%;
    margin-top: 5px;
    text-align: center;
}

.containerLoginButton{
    width: 250px;
    margin-left: auto;
    margin-right: auto;    
    margin-bottom: 5px;
    text-align: center;
}

button.loginButton{
    width: 100%;
    height: 33px;
    padding: 5px 5px 5px 7px;
}

img.loginButtonIcon{
    width: 20px;
    height: 20px;
    padding-left: 3px;
    float: left;
}

/* DASHBOARD */

#dashboard {
    width: 1000px;
    margin-left:auto;
    margin-right:auto;
}

#dashboard-header {
    background-color: var(--colorBgHeaderMain);
    height: 23px;
    float: left;
    color: var(--colorFontHeaderMain);
    font-weight: 500;
    font-family: Helvetica;
    font-family: 'PT Sans Caption', sans-serif;
    font-size: 15px;
    padding-top: 5px;
    padding-left: 13px;
    width: 620px;
    margin-top: 0;
    -webkit-border-top-left-radius: 3px;
    -webkit-border-top-right-radius: 3px;
    -moz-border-radius-topleft: 3px;
    -moz-border-radius-topright: 3px;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
}

.icons {
    float:left;
    width: 633px;
    border-top: 1px solid var(--colorBorderDashboard);
    border-left: 1px solid var(--colorBorderDashboard);
    border-right: 1px solid var(--colorBorderDashboard);
    border-bottom: 1px solid var(--colorBorderDashboard);
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    padding-bottom:10px;
    background-color: var(--colorBgDashboardMain);
}

.boxes {
    float: right;
    width: 350px;
}

.icon_box {
    float: left;
    width: 90px;
    height: 80px;
    margin: 13px;
    margin-bottom: 10px;
    margin-top: 5px;
    text-align: center;
    border: 1px solid var(--colorBorderDashboard);
    /* borders*/
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    border-radius: 7px;
    padding: 4px;
    cursor: pointer;
}

.icon_box a {
    background-color: var(--colorWhite);
    display: block;
    width: 100%;
    min-height: 70px;
    padding-top: 10px;
    border-radius: 7px;
}

.icon_box:hover,
.icon_box_active  {
    background-color: var(--colorBgFocusMain);
    border: 1px solid var(--colorBorderDashboardHover);
    font-weight: bold;
    -webkit-box-shadow: 1px 1px 5px var(--colorShadowDashboard);
    -moz-box-shadow:    1px 1px 5px var(--colorShadowDashboard);
    box-shadow:         1px 1px 5px var(--colorShadowDashboard);
}

a:link {
    font-size: 8.7pt;
    color: var(--colorLink);
    text-decoration:none;
}

a:visited {
    font-size: 8.7pt;
    color: var(--colorLink);
    text-decoration:none;
}

a:hover {
    font-size: 8.7pt;
    color: var(--colorLink);
    text-decoration:none;
}

a:active {
    font-size: 8.7pt;
    color: var(--colorLink);
    text-decoration:none;
}

/* BOX CONTENT */
.login_box_content {
    width: 310px;
    background-color: var(--colorWhite);
    border-left: 1px solid var(--colorBorderClassic2);
    border-right: 1px solid var(--colorBorderClassic2);
    border-bottom: 1px solid var(--colorBorderClassic2);
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 20px;
    padding-right: 20px;
    float: left;
    -webkit-border-radius: 5px;
    -webkit-border-top-left-radius: 0;
    -webkit-border-top-right-radius: 0;
    -moz-border-radius: 5px;
    -moz-border-radius-topleft: 0;
    -moz-border-radius-topright: 0;
    border-radius: 5px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

/* CONTENT MENU AND CONTENT */

.content_menu_left {
    float: left;
    width: 230px;
    padding-top: 5px;
    padding-bottom: 15px;
    height: 100%;
    overflow: hidden;
}

.content_big, .flash, .flash_centered {
    float: right;
    padding: 15px;
    padding-top: 0px;
    border-left: 1px solid var(--colorBorderClassic);
    background-color: var(--colorWhite);
    font-size: 8.9pt;
    width: 707px;
    min-width: 707px;
}

.content_big > h3, h3.pageHeader {
    padding: 0;
    margin: 0;
    color: var(--colorFontHeading);
    font-size: 15px;
    margin-top: 10px;
    margin-bottom: 5px;
}

.flash_container{
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.flash{
    position: fixed;
    top: 0;
    padding: 0px;
    width: 750px;
    right: 0px; 
    float: none;  
    border: none;
    background: transparent;
    z-index: 5;
}

.flash_centered {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Centering horizontally and vertically */
    padding: 0px;
    width: 750px;
    background: transparent;
    z-index: 9999; /* Ensure it's above all elements */
    border: none;   
}

.flash > div, .flash_centered > div {
    -webkit-box-shadow: 0px 0px 7px rgba(50, 50, 50, 1);
    -moz-box-shadow:    0px 0px 7px rgba(50, 50, 50, 1);
    box-shadow:         0px 0px 7px rgba(50, 50, 50, 1);
    font-weight:bold;
}

.flash_background{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 105px;
    background: transparent;
    z-index:1;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter: alpha(opacity=50);
    opacity:.5;
}

/* INFO BOXES */

#info_box, .info_box {
    background-image: var(--imgIconInfo);
    background-repeat:no-repeat;
    background-position: 5px 5px;
    background-color: var(--colorBgBoxInfo);
    color: var(--colorFontBoxInfo);
    font-size:9pt;
    border: 1px solid var(--colorBorderBoxInfo);
    width: 600px;
    margin: 10px;
    padding-left: 35px;
    padding-top: 15px;
    padding-right: 15px;
    padding-bottom: 15px;
    margin-left: auto;
    margin-right: auto;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    border-radius: 7px;
}

#ok_box, .ok_box {
    background-image: var(--imgIconOk);
    background-repeat: no-repeat;
    background-position: 5px 5px;
    background-color: var(--colorBgBoxOk);
    color: var(--colorFontBoxOk);
    font-size: 9pt;
    border: 1px solid var(--colorBorderBoxOk);
    width: 600px;
    margin: 10px;
    padding-left: 35px;
    padding-top: 15px;
    padding-right: 15px;
    padding-bottom: 15px;
    margin-left: auto;
    margin-right: auto;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    border-radius: 7px;
}

#error_box, .error_box, #error_box2 {
    background-image: var(--imgIconError);
    background-repeat: no-repeat;
    background-position: 5px 5px;
    background-color: var(--colorBgBoxError);
    color: var(--colorFontBoxError);
    font-size: 9pt;
    border: 1px solid var(--colorBorderBoxError);
    width: 600px;
    margin: 10px;
    padding-left: 35px;
    padding-top: 15px;
    padding-right: 15px;
    padding-bottom: 15px;
    margin-left: auto;
    margin-right: auto;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    border-radius: 7px;
}

.counterWarning{
    font-weight: bold;
    color: var(--colorRed);
}

/* WIDGETS */

#widget {
    float: right;
    width: 350px;
}

.news_box {
    width: 350px;
    float: right;
    margin-bottom: 10px;
}

.graybox_header {
    width: 350px;
    height: 28px;
    float: left;
    cursor: move;
}

.graybox_left {
    width: 8px;
    height: 35px;
    background-color: var(--colorBgHeaderMain);
    float: left;
    -webkit-border-top-left-radius: 3px;
    -moz-border-radius-topleft: 3px;
    border-top-left-radius: 3px;
}

.graybox_middle {
    background-color: var(--colorBgHeaderMain);
    height: 23px;
    width: 334px;
    float: left;
    padding-top: 5px;
    color: var(--colorWhite);
    font-weight: 500;
    font-size: 15px;
}

.refresh {
    float:right;
    margin-top:-5px;
}

.graybox_right {
    width: 8px;
    height: 35px;
    background-color: var(--colorBgHeaderMain);
    float: right;
    -webkit-border-top-right-radius: 3px;
    -moz-border-radius-topright: 3px;
    border-top-right-radius: 3px;
}

.graybox_content {
    width:348px;
    background-color: var(--colorBgDashboardMain);
    border: 1px solid var(--colorBorderDashboard);
    float: left;
    -webkit-border-radius: 5px;
    -webkit-border-top-left-radius: 0;
    -webkit-border-top-right-radius: 0;
    -moz-border-radius: 5px;
    -moz-border-radius-topleft: 0;
    -moz-border-radius-topright: 0;
    border-radius: 5px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.graybox_content ul {
    padding-left:10px;
    margin-left:10px;
}

.graybox_content ul li {
    word-wrap:break-word;
}

.graybox_content ul li a:hover {
    font-weight:bold;
}

ul.widgetList{
    list-style: none;
    margin-right: 10px;
    padding-left: 0px;
}

ul.widgetList li{
    border-bottom: 1px solid var(--colorBorderClassic4);
    padding: 3px;
}

ul.widgetList li:last-child{
    border-bottom: none;
}

ul.widgetList li a{
    color: var(--colorFontContent);
}

div.widgetActions{
    text-align: center;
    margin: 10px 0px 0px 0px;
}

/*GRAYBOX BIG*/
#widget-bottom .news_box {
    float: left;
    margin-bottom: 10px;
}

#widget-bottom .news_box .graybox_header {
    height: 28px;
    float: left;
    cursor: move;
}

#widget-bottom .news_box .graybox_left {
    width: 8px;
    height: 35px;
    background-color: var(--colorBgHeaderMain);
    float:left;
}

#widget-bottom .news_box .graybox_middle {
    background-color: var(--colorBgHeaderMain);
    height: 23px;
    float: left;
    padding-top: 5px;
    color: var(--colorWhite);
    font-weight: 500;
    font-size: 15px;
}

.refresh {
    float: right;
    margin-top: -5px;
}

#widget-bottom .news_box .graybox_right {
    width: 8px;
    height: 35px;
    background-color: var(--colorBgHeaderMain);
    float: right;
}

#widget-bottom .news_box .graybox_content {
    background-color: var(--colorBgDashboardMain);
    border: 1px solid var(--colorBorderDashboard);
    float: left;
    -webkit-border-radius: 5px;
    -webkit-border-top-left-radius: 0;
    -webkit-border-top-right-radius: 0;
    -moz-border-radius: 5px;
    -moz-border-radius-topleft: 0;
    -moz-border-radius-topright: 0;
    border-radius: 5px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

#widget-bottom .news_box_big {
    width:632px;
}

#widget-bottom .news_box_big .graybox_header {
    width:632px;
    height:28px;
    float:left;
    cursor: move;
}

#widget-bottom .news_box_big .graybox_middle {
    width:616px;
}

#widget-bottom .news_box_big .graybox_content {
    width:630px;
}

/* FORMA */

fieldset {
    color: var(--colorBlack);
    border: 0;
    border-top: 1px solid var(--colorBorderClassic);
    border-bottom: 1px solid var(--colorBorderClassic);
}

legend {
    color: var(--colorFontFilterOld);
    font-size: 15px;
    padding: 0;
    padding-left: 5px;
    padding-right: 5px;
}

.blue {
    color: var(--colorDarkLight60);
}

.silver {
    color: var(--colorBorderClassic3);
}

.darkred {
    color: var(--colorFontBoxError);
    font-weight: bold;
}

.yellow {
    color: #ffcc00;
}

.upper {
    text-transform: uppercase;
}

.form_input {
    width: 70%;
    color: var(--colorFontInputOld);
    height: 20px;
    font-size: 8.5pt;
    padding: 1px;
    border: 0;
    border: 1px solid var(--colorBorderTableTh);
    -webkit-border-radius: 3px;
    -webkit-border-top-left-radius: 3px;
    -webkit-border-top-right-radius: 3px;
    -moz-border-radius: 3px;
    -moz-border-radius-topleft: 3px;
    -moz-border-radius-topright: 3px;
}

select.form_input {
    height: 20px;
}

textarea.form_input {
    width: 90%;
    height: 200px;
    resize: vertical; 
}

textarea.formatTextarea{
    width: 97.5%;
    height: 8em;
    resize: vertical;
}

textarea.formatTextareaMini{
    width: 97.5%;
    height: 4em;
    resize: vertical;
}

textarea.formatTextareaMedium{
    width: 97.5%;
    height: 24em;
    resize: vertical;
}

input.input_center {
    text-align: center;
}

.form_middle, .middle {
    width: 50%;
}

.form_small, .small {
    width: 30%;
}

.form_very_small, .very_small {
    width: 15%;
}

.form_large, .large {
    width: 90%;
}

.form_center {
    text-align: center;
}

input[disabled], input[readonly], select[disabled], select[readonly], checkbox[disabled], checkbox[readonly], textarea[disabled], textarea[readonly] {
    background-color: var(--colorWhite);
    border: 0;
    color: var(--colorBlack);
    cursor: default;
} 

/* FILTER FORMA */

table#filter {
    color: var(--colorFontFilterOld);
    font-size: 12px;
}

.filter_input {
    width: 100%;
    text-align: center;
    font-size: 9pt;
    border: 1px solid var(--colorBorderClassic2);
    background-color: var(--colorFontFilterOld2);
    color: var(--colorFontInputOld);
}

.form_label_description{
    color: var(--colorFontInputDescription);
}

.form_label_description_small{
    color: var(--colorFontInputDescription);
    font-weight: normal;
    font-size: 10px;
}

/*TABLES*/
table {
    border: 0;
    width: 100%;
}

table.width_50 {
    width: 49%;
}

table th {
    height: 30px;
    background-color: var(--colorBgTableTh);
    border-top: 1px dashed var(--colorBorderTableTh);
    border-bottom: 1px dashed var(--colorBorderTableTh);
    color: var(--colorFontTableTh);
}

table tr.thHeader2 th{
    background-color: var(--colorBgTableTh2);
}

table .headingMergedNoBackground {
    background-color: inherit;
}

table td {
    padding: 4px;
    border-bottom: 1px solid var(--colorBorderTableTd);
}

table tr.row-a td a:hover, table tr.row-b td a:hover, table tr.row-red td a:hover {
    font-weight: bold;
}

table td input:focus, table td textarea:focus {
    background-color: var(--colorBgFocusMain);
    border: 1px solid var(--colorBorderDashboard) !important;
    box-shadow: 0px 0px 5px var(--colorBorderDashboard) !important;
    -moz-box-shadow: 0px 0px 5px var(--colorBorderDashboard) !important;
    -webkit-box-shadow: 0px 0px 5px var(--colorBorderDashboard) !important;
}

table tr.row-b td {
    background-color: var(--colorBgFocusMain);
}

table tr.row-red td {
    background-color: var(--colorBgBoxError);
}

table tr.row-a:hover td, table tr.row-b:hover td, table tr.rowHover:hover td {
    background-color: var(--colorBgTableTdHover);
    color: var(--colorBlack);
    cursor: pointer;
}

table tr.row-red td.warning-text {
    color: var(--colorFontBoxError);
    font-weight: bold;
}

table tr.row-border-dashed td{
    border-bottom: 1px dashed var(--colorBorderTableTh);
    border-top: 1px dashed var(--colorBorderTableTh);
}

table tr.row-border-dashed-bottom td{
    border-bottom: 1px dashed var(--colorBorderTableTh);
}

table.no-borders td {
    border: 0;
    padding-left: 0;
}

table.border-left td {
    border-left: 1px solid var(--colorBorderTableTd);
}

table.border-right td {
    border-right: 1px solid var(--colorBorderTableTd);
}

table.no-borders td.border-bottom {
    border-bottom: 1px solid var(--colorBorderTableTd);
}

table.no-borders td.border-top {
    border-top: 1px solid var(--colorBorderTableTd);
}

table td.fullRow {
    height: 3px;
    background-color: var(--colorBgTableTh);
    padding: 0;
}

table td.heading {
    background-color: var(--colorBgTableTh);
    border-bottom: 1px dashed var(--colorBorderTableTh);
    color: var(--colorFontTableTh);
    font-weight: bold;
    vertical-align: top;
}

table td.firstCellLeft, table th.firstCellLeft{
    text-align: left;
    padding-left: 5px;
}

table td.cellNoMargins{
    padding: 0px;
}

table.tableSelectFilters td{
    border-bottom: none;
}

/* BUTTONS */

.buttons > a, .buttons > button{
    display: block;
    float: left;
    margin: 10px 7px 0px 3px;
    background-color: var(--colorWhite);
    border: 1px solid var(--colorBorderDashboard);
    font-size: 12px;
    line-height: 130%;
    text-decoration: none;
    font-weight: bold;
    cursor: pointer;
    padding: 3px 10px 4px 7px;
    border-radius: 3px; 
    -moz-border-radius: 3px; 
    -webkit-border-radius: 3px; 
}
.buttons > button{
    width: auto;
    overflow: visible;
    /*padding:2px 10px 1px 7px; /* IE6 */
    padding: 7px;
}
.buttons > button[type]{
    /*padding:2px 10px 2px 7px; /* Firefox */
    /*line-height:15px; /* Safari */
    padding: 6px;
}
*:first-child+html button[type]{
    /*padding:4px 10px 3px 7px; /* IE7 */
    padding: 7px;
}
.buttons > button img, .buttons > a img{
    margin: 0 3px -3px 0 !important;
    padding: 0;
    border: none;
    width: 16px;
    height: 16px;
}

/* STANDARD */

.buttons > button:hover, .buttons > a:hover, .buttons > a:active{
    background-color: var(--colorBgFocusButton);/* #dff4ff; */
    color: var(--colorWhite);
}

/* POSITIVE */

.buttons >button.positive, .buttons > a.positive{
    color: var(--colorFontTableTdHover);
    padding: 7px;
}
.buttons > a.positive:hover, .buttons > button.positive:hover{
    background-color: var(--colorBgTableTdHover);
    border: 1px solid #C6D880;
    color: var(--colorFontTableTdHover);
}

.buttons > a.positive:active{
    background-color: var(--colorFontTableTdHover);
    border: 1px solid var(--colorFontTableTdHover);
    color: var(--colorWhite);
}

/* NEGATIVE */

.buttons > a.negative, .buttons > button.negative{
    color: #d12f19;
    padding: 7px;
}
.buttons > a.negative:hover, .buttons > button.negative:hover{
    background: #fbe3e4;
    border:1px solid #fbc2c4;
    color: #d12f19;
}
.buttons > a.negative:active{
    background-color: #d12f19;
    border: 1px solid #d12f19;
    color: var(--colorWhite);
}

/* REGULAR */

.buttons > button.regular, .buttons > a.regular{
    color: #336699;
    padding: 7px;
}
.buttons > a.regular:hover, .buttons > button.regular:hover{
    background-color: #dff4ff;
    border:1px solid #c2e1ef;
    color: #336699;
}
.buttons > a.regular:active{
    background-color: #6299c5;
    border: 1px solid #6299c5;
    color: var(--colorWhite);
}

.buttons > button.blue, .buttons > a.blue {
    background-color: var(--colorBgTableTh);
    border: 1px solid var(--colorBorderTableTh);
    color: #336699;
}

/* SIDEMENU */

ul.sidemenu {
    margin: 0;
    padding: 0;
    list-style: none;
}

ul.sidemenu > li {
    list-style-type: none;
    /*border-top:1px dashed var(--colorBorderTableTh);*/
    border-bottom: 1px solid #4f9400;
    margin-bottom: 5px;
    background-color: #e6f0c0;
}

ul.sidemenu > li > a {
    display: block;
    padding: 5px;
    padding-left: 10px;
    font-size: 13px;
    color: #4f9400;
    text-transform: lowercase;
}

ul.sidemenu > li > a:hover {
    color: #4f9400;
    font-weight: bold;
}

ul.sidemenu > li.prim > a:link, ul.sidemenu > li.prim > a:visited {
    background-color: var(--colorBgTableTdHover);
    color: var(--colorFontTableTdHover);
    font-weight: bold;
}

ul.sidemenu > li.prim {
    border-top: 1px solid #4f9400;
    background-color: transparent;
}

ul.sidemenu > li.prim ul > li.prim {
    color: #0c5c88;
    font-weight: bold;
}

ul.sidemenu > li ul {
    margin: 0;
    padding: 0;
    border: 0;
    background-color: #ebebeb;
    margin-left: 0px;
    padding-left: 10px;
}

ul.sidemenu > li ul > li {
    list-style-type: none;
    border-bottom: 1px solid #d8d8d8;
    background-color: #ebebeb;
}

ul.sidemenu > li ul > li > a {
    display: block;
    padding: 5px;
    padding-left: 10px;
    font-size: 8.7pt;
    text-transform: lowercase;
    color: #0c5c88;
}

ul.sidemenu > li ul > li > a:hover {
    font-weight: bold;
}

/* UI-STYLE */

.ui-dialog-title {
    color: var(--colorFontTableTh);
    font-size: 12px;
}

.ui-dialog .ui-dialog-title {
    font-size: 12px;
}

.ui-dialog-content {
    height: 300px;
    overflow-y: auto;
}

/* UI datepicker */

.ui-datepicker th, .ui-datepicker td span, .ui-datepicker td a {
    padding: 0;
    font-size: 11px;
    text-align: center;
    padding: 2px;
}

.ui-datepicker td {
    padding: 2px;
}

.ui-datepicker, .ui-datepicker table {
    font-size: 11px;
}

.ui-datepicker-header {
    height: 20px;
    font-size: 11px;
    color: var(--colorFontTableTh);
}

.ui-datepicker-title select{
    margin: -2px 0px 0px 0px !important;
}

.ui-datepicker-calendar td a{
    background: none !important;
    background-color: var(--colorBgTableTh) !important;
    border: 1px solid var(--colorBorderDashboard) !important;
    color: var(--colorFontTableTh) !important;
}

.ui-datepicker-calendar td a:hover{
    background-color: var(--colorBgFocusMain) !important;
}

.ui-datepicker td.ui-datepicker-today a {
    display: block;
    background-color: var(--colorBgTableTdHover) !important;
    border: 1px solid var(--colorFontTableTdHover) !important;
    color: var(--colorFontTableTdHover) !important;
    font-weight: bold;
}

.ui-datepicker td.ui-datepicker-today a:hover {
    background-color: var(--colorBgFocusMain) !important;
    border: 1px solid var(--colorBorderDashboard) !important;
}

.ui-datepicker td.ui-datepicker-current-day a{
    background-color: var(--colorBgFocusMain) !important;
}

/* UI Widget */
.ui-widget-content{
   border: 1px solid var(--colorBorderDashboard);
   color: var(--colorFontTableTh);
}

.ui-widget-header{
    background: none;
    background-color: var(--colorBgTableTh);
    border: 1px solid var(--colorBorderDashboard);
    color: var(--colorFontTableTh);
}

.ui-widget-header a:hover{
    background: none;
    background-color: var(--colorBgFocusMain);
    border: 1px solid var(--colorBorderDashboard);
}

.ui-state-default{
    border: 1px solid var(--colorBorderDashboard) !important;
    background: none !important;
    background-color: var(--colorBgFocusMain) !important;
}

.ui-priority-primary{
    color: var(--colorFontTableTh) !important;
}

.ui-priority-secondary{
    color: var(--colorFontTableTh) !important;
    opacity: 0.9 !important;
}

/*UI autocomplete*/
li.ui-menu-item {
    font-size: 12px;
}

.ui-autocomplete a {
    border: 0;
}

.ui-autocomplete a.ui-state-hover {
    border: 0;
    background: var(--colorBgTableTdHover);
    font-weight: normal;
}

/*TOGGLER*/
.toggler {
    background-color: var(--colorBgTableTh);
    color: var(--colorBorderTableTh);
    border: 1px solid var(--colorBorderTableTh);
    border-left: 0;
    width: 10px;
    height: 20px;
    padding-top: 5px;
    text-align: center;
    position: relative;
    cursor: pointer;
}

.toggler:hover {
    background-color: var(--colorBgTableTdHover);
    color: var(--colorFontTableTdHover);
    border: 1px solid var(--colorFontTableTdHover);
    border-left: 0;
}

/* FILE input */

span#stylefileinput-invoiceFile {
    position: relative;
}

span#stylefileinput-invoiceFile span {
    position: absolute;
    display: block;
    top: -2px;
    overflow: hidden;
    z-index: 9999;
    width: 75px;
    height: 24px;
    opacity: 0;
    filter: alpha(opacity=0);
}

span#stylefileinput-invoiceFile span input {
    position: absolute;
    left: -140px;
    cursor: pointer;
}

span#stylefileinput-invoiceFile input.stylefileinput-button {
    position: relative;
    z-index: 9998;
}

span#stylefileinput-invoiceFile strong {
    margin: 0 10px;
}

span#stylefileinput-galleryFile {
    position: relative;
}

span#stylefileinput-galleryFile span {
    position: absolute;
    display: block;
    top: -2px;
    overflow: hidden;
    z-index: 9999;
    width: 75px;
    height: 24px;
    opacity: 0;
    filter: alpha(opacity=0);
}

span#stylefileinput-galleryFile span input {
    position: absolute;
    left: -140px;
    cursor: pointer
}

span#stylefileinput-galleryFile input.stylefileinput-button {
    position: relative;
    z-index: 9998;
}

span#stylefileinput-galleryFile strong {
    margin: 0 10px;
}

/* Upload file */

span#stylefileinput-uploadFile {
    position: relative;
}

span#stylefileinput-uploadFile span {
    position: absolute;
    display: block;
    top: -2px;
    overflow: hidden;
    z-index: 9999;
    width: 75px;
    height: 24px;
    opacity: 0;
    filter: alpha(opacity=0);
}

span#stylefileinput-uploadFile span input {
    position: absolute;
    left: -140px;
    cursor: pointer;
}

span#stylefileinput-uploadFile input.stylefileinput-button {
    position: relative;
    z-index: 9998;
}

span#stylefileinput-uploadFile strong {
    margin: 0 10px
}

span#stylefileinput-uploadFile li {
    font-weight: bold;
}

/* Paging */

div.paginate {
    float: right;
}

div.paginate a {
    display: block;
    float: left;
    padding: 5px;
    margin-left: 5px;
    margin-right: 5px;
    padding-bottom: 2px;
}

a.previous_link, a.page_link, a.next_link{
    font-weight: bold;
    color: var(--colorFontTableTh);
}

a.next_link:active, a.previous_link:active {
    background-color: var(--colorWhite);
    border: 1px dashed var(--colorBorderTableTh);
}

a.active_page {
    font-weight:bold;
}

a.active_page {
    background-color: var(--colorWhite);
    border: 1px dashed var(--colorBorderTableTh);
}

/* TODO FILE */
span#stylefileinput-todoFile {
    position: relative;
}

span#stylefileinput-todoFile span {
    position: absolute;
    display: block;
    top: -2px;
    overflow: hidden;
    z-index: 1;
    width: 75px;
    height: 24px;
    opacity: 0;
    filter: alpha(opacity=0);
}

span#stylefileinput-todoFile span input {
    position: absolute;
    left: -140px;
    cursor: pointer;
}

span#stylefileinput-todoFile input.stylefileinput-button {
    position: relative;
    z-index: 0;
}

span#stylefileinput-todoFile strong {
    margin: 0 10px;
}

/* LOADER */
.loader-img {
    position: fixed;
    width: 32px;
    height: 32px;
    margin-left: auto;
    margin-right: auto;
    background-image: var(--imgLoader);
    top: 100px;
}

.loader-spin {
    border: 1px dashed var(--colorBorderTableTh);
    background-color: var(--colorWhite);
    width: 60px;
    height: 60px;
    background-image: var(--imgLoader);
    background-repeat: no-repeat;
    background-position: center center;
}

.loader-spin-no-border-small, .loader-spin-no-border-small-center {
    background-color: var(--colorWhite);
    width: 32px;
    height: 32px;
    background-image: var(--imgLoader);
    background-repeat: no-repeat;
    background-position: center center;
}

.loader-spin-no-border-small-center {
    margin: 0 auto;
}

/* TABLE SORTER */ 

.pager { 
    padding: 5px; 
} 

td.pager { 
    background-color: #e6eeee; 
}
 
.pager img { 
    vertical-align: middle; 
    margin-right: 2px; 
} 

.pager .pagedisplay { 
    font-size: 11px; 
    padding: 0 5px 0 5px; 
    width: 50px; 
    text-align: center; 
} 
 
#tablesorterPagerLoading { 
    background: rgba(255,255,255,0.8) var(--imgLoader) center center no-repeat; 
    position: absolute; 
    z-index: 1000; 
} 

/*** css used when "updateArrows" option is true ***/ 
/* the pager itself gets a disabled class when the number of rows is less than the size */ 
.pager.disabled { 
    display: none; 
} 
/* hide or fade out pager arrows when the first or last row is visible */ 
.pager img.disabled { 
    /* visibility: hidden */ 
    opacity: 0.5; 
    filter: alpha(opacity=50); 
}

/* LIST */

ul.list {
    list-style: none;
    margin-left: 20px;
    padding: 0;
}

ul.list li {
    display: block;
    margin-top: 4px;
    margin-bottom: 4px;
    border-bottom: 1px dotted var(--colorBorderDashboard);
    padding: 2px;
}

ul.recordsList{
    width: 100%;
    margin: 0px;
    padding: 0px;
    list-style:none;
    list-style-type: none;
}

div.recordsListHead{
    width: 100%;
    height: 25px;
    background-color: var(--colorBgTableTh);
    border-top: 1px dashed var(--colorBorderTableTh);
    border-bottom: 1px dashed var(--colorBorderTableTh);
    color: var(--colorFontTableTh);
    font-weight: bold;
    margin: 0px;
    padding: 5px;
    overflow: hidden;
    display: table;
}

div.recordsListHeadItem{
    float: left;
    text-align: center;
    display: inline-table;
}

div.recordsListHeadItemEmpty{
    height: 100%;
}

div.recordsListRow{
    width: 100%;
    height: 25px;
    border-bottom: 1px solid var(--colorBorderTableTd);
    list-style-type: none;
    margin: 0px;
    padding: 5px;
    overflow: hidden;
    display: table;
}

div.recordsListRowItem{
    float: left;
}

div.recordsListRowItemEmpty{
    height: 20px;
}

li.recordsListRowSpanCenter, div.recordsListRowSpanCenter{
    width: 100%;
    text-align: center;
}

div.recordsListRowSpan{
    width: 100%;
}

li.lastListItemNoBorder{
    border-bottom: none !important;
}

tr.lastRowItemNoBorder td{
    border-bottom: none;
}

div.colspanLineRow{
    width: 100%;
    height: 6px;
    margin: 0px;
    padding: 0px 5px 0px 5px;
    overflow: hidden;
    display: table;
    list-style-type: none;
    display: none;
}

div.recordsListSplitRow, div.recordsListSplitRow2{
    width: 100%;
    height: 6px; 
    margin: 0px;
    padding: 0px;
    background-color: var(--colorBgTableTdColspan);
}
    
div.recordsListSplitRow2{
    height: 2px; 
    background-color: var(--colorBlack);
}

div.divIcon{
    width: 33px;
    text-align: center;
    float: right;
}

div.hideIcon{
    color: var(--colorWhite);
}

i.icon-color-red{
    color: red;
}

i.icon-color-green{
    color: green;
}

i.icon-color-blue{
    color: blue;
}

div.row-b, li.row-b{
    background-color: var(--colorBgFocusMain);
}

li.row-red{
    background-color: var(--colorBgBoxError);
}

li.row-red-not-bold{
    color: var(--colorRed);
}

li.row-red .warning-text{
    color: var(--colorFontBoxError);
    font-weight: bold;
}

div.row-a:hover, div.row-b:hover, li.row-a:hover, li.row-b:hover {
    background-color: var(--colorBgTableTdHover);
    cursor: pointer;
}

/* PROGRESS BAR */
.progress { position:relative; width:250px; border: 1px solid #ddd; padding: 1px; border-radius: 3px; }
.bar { background-color: var(--colorBorderDashboard); width:0%; height:20px; border-radius: 3px; }
.percent { position:absolute; display: inline-block; top:3px; left:48%; }

/* UI SORTABLE */
.ui-sortable-placeholder { border: 1px dotted var(--colorBlack); visibility: visible !important; height: 50px !important; }
.ui-sortable-placeholder * { visibility: hidden; }

/* FOLDER test */
.folder-test {
    float: left;
    width: 310px;
    height: 240px;
    margin: 5px;
    padding-top: 10px;
    text-align: center;
    background-color: var(--colorWhite);
    border: 1px dashed var(--colorBorderTableTh);
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    border-radius: 7px;
}

.folder-title {
    text-align: left;
    font-weight: bold;
    padding-left: 10px;
}

.login-box-wrapper {
    background-color: var(--colorRgbaLoginWrapper);
    width: 352px;
    margin-left: auto;
    margin-right: auto;
    height: 165px;
    -moz-box-shadow: 5px 5px 5px #888;
    -webkit-box-shadow: 5px 5px 5px #888;
    box-shadow: 5px 5px 5px #888;
}

.login-box-wrapper-external {
    background-color: var(--colorRgbaLoginWrapper);
    width: 352px;
    margin-left: auto;
    margin-right: auto;
    height: 195px;
    -moz-box-shadow: 5px 5px 5px #888;
    -webkit-box-shadow: 5px 5px 5px #888;
    box-shadow: 5px 5px 5px #888;
}

/* TOOLTIPS */

.tooltip {
    display:none;
    background-color: var(--colorRgbaTooltips);
    color: var(--colorBlack);
    font-weight: bold;
    padding: 5px;
    border: 1px solid var(--colorBorderTableTh);
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}

/* ACCORDION */
.ui-accordion-header{
    background: var(--colorDarkLight60);
    color: var(--colorWhite);
    padding: 5px;
    border: 0;
}

.ui-accordion-content {
    border: 0;
    border: 1px dotted silver;
    font-size: 12px;
}

/* DIALOG */
.ui-dialog {
    border: 0;
    border: 1px dotted silver;
}

.ui-dialog-titlebar {
    background: var(--colorDarkLight60);
    color: var(--colorWhite);
    border: 0;
}

.ui-dialog-title {
    color: var(--colorWhite);
}

/* GALLERY MODULE */
.thumbnailBox{
    width: 150px; 
    min-height: 135px; 
    border: 1px solid var(--colorBorderClassic3);
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    box-shadow: 0px 0px 5px var(--colorBorderDashboard);
    -moz-box-shadow: 0px 0px 5px var(--colorBorderDashboard);
    -webkit-box-shadow: 0px 0px 5px var(--colorBorderDashboard);
    float: left; 
    margin: 5px;
    padding: 5px;
}

.thumbnailPhoto{
    height: 100px;
    overflow: hidden;
    margin-bottom: 10px;
}

.thumbnailName{
    background-color: var(--colorBorderClassic3);
    color: var(--colorFontInputOld);
    padding: 3px;
    height: 32px;
    overflow: hidden;
}

.galleryDescription{
    width: 94%;
    margin:5px;
    padding:5px;
    border: 1px solid var(--colorBorderClassic3);
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    box-shadow: 0px 0px 5px var(--colorBorderDashboard);
    -moz-box-shadow: 0px 0px 5px var(--colorBorderDashboard);
    -webkit-box-shadow: 0px 0px 5px var(--colorBorderDashboard);
    font-size: 12px;
}

.galleryDescriptionInfo{
    border-bottom: 1px solid var(--colorBorderClassic3);
}

.thumbnailPhotoBox{
    width: 150px; 
    height: 100px; 
    border: 1px solid var(--colorBorderClassic3);
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    box-shadow: 0px 0px 5px var(--colorBorderDashboard);
    -moz-box-shadow: 0px 0px 5px var(--colorBorderDashboard);
    -webkit-box-shadow: 0px 0px 5px var(--colorBorderDashboard);
    float: left; 
    margin: 5px;
    padding: 5px;
    position: relative;
    overflow: hidden;
}

.thumbnailPhotoInfromationFlash{
    background: var(--colorBlack);
    padding: 2px 2px 2px 5px;;
    opacity: 0.7;
    filter: alpha(opacity=0.7);
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
}

.thumbnailPhotoFlash{
    height: 100px;
    overflow: hidden;
    margin-bottom: 10px;
    position: absolute;
    top: 5px;
    left: 5px;
    right: 5px; 
    bottom: 5px;
    z-index: 1;
}

.adminThumbnailPhoto{
    width: 150px;
    height:100px;
    overflow: hidden;
    margin-bottom: 10px;
}

/* LIST WITH DIVs */

.divListBox{
    width: 94%;
    margin: 5px;
    padding: 5px;
    border: 1px solid var(--colorBorderClassic3);
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    box-shadow: 0px 0px 3px var(--colorBorderDashboard);
    -moz-box-shadow: 0px 0px 3px var(--colorBorderDashboard);
    -webkit-box-shadow: 0px 0px 3px var(--colorBorderDashboard);
    font-size: 12px;
    overflow: hidden;
}

.divListBoxHeader{
    border-bottom: 1px solid var(--colorBorderClassic3);
}

.divListBoxContent{

}

div.divPager{
    width: 95.5%;
    margin: 10px 5px 5px 5px;
    border: 1px solid var(--colorBorderClassic3);
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    box-shadow: 0px 0px 5px var(--colorBorderDashboard);
    -moz-box-shadow: 0px 0px 5px var(--colorBorderDashboard);
    -webkit-box-shadow: 0px 0px 5px var(--colorBorderDashboard);
    overflow: hidden;
    background: #E8F9FF;
}

/* ARTICLES */

.stickyArticleListBox{
    margin: 0px 0px 10px 0px;
}

.stickyArticle{
    background: #F3F3FF;
}

.articleName a{
    color: var(--colorBlack);
    font-size: 12px;
}

/* LINKS */
table th a.noLink{
    text-decoration: none;
    color: var(--colorFontTableTh);
    font-size: 12px;
}

a.text_link{
    font-size: 8.7pt;
    color: var(--colorLink);
    text-decoration: none;
}

a.text_link:hover{
    cursor: pointer;
}

.icon_link{
    cursor: pointer;
}

/* BACK TO TOP */

#toTop {
    width: 50px;
    border: 1px solid var(--colorBorderTableTh);
    background-color: var(--colorBgTableTh);
    text-align: center;
    padding: 5px;
    position: fixed; /* this is the magic */
    bottom: 10px; /* together with this to put the div at the bottom*/
    right: 10px;
    cursor: pointer;
    display: none;
    font-size: 11px;
}

/* SPAN AS LINK */
span.actionLink {
    font-size: 11.5px;
    color: var(--colorLink);
    cursor: default;
}

span.actionLink span:hover {
    text-decoration: underline;
}

/* FORMAT ICON */

.formatIcon:hover {
    cursor: default;
}

/* Submenu buttons */

.submenuButton{
    float: left;
    height: 20px;
    text-align: center;
    color: #4f778f;
    background-color: #fafafa;
    border: 1px solid #e5e5e5;
    padding: 4px;
    font-weight: bold;
    margin: 0px 3px 0px 0px;
    -webkit-border-bottom-left-radius: 5px;
    -moz-border-bottom-left-radius: 5px;
    border-bottom-left-radius: 5px;
    -webkit-border-bottom-right-radius: 5px;
    -moz-border-bottom-right-radius: 5px;
    border-bottom-right-radius: 5px;
    -webkit-box-shadow: 0px 0px 2px rgba(2, 2, 2, 1);
    -moz-box-shadow:    0px 0px 2px rgba(2, 2, 2, 1);
    box-shadow:         0px 0px 2px rgba(2, 2, 2, 1);
}

.submenuButton:hover{
    background-color: #eeeeee;
    cursor: default;
}

.activeSubmenuButton{
    color: var(--colorWhite);
    background-color: var(--colorBgHeaderMain);
}

.submenuButton.activeSubmenuButton:hover{
    color: var(--colorWhite);
    background-color: var(--colorBgHeaderMain);
}

.containerGroupMenuButtons{
    margin: 10px 0px 10px 0px;
}

.groupMenuButton{
    height: 33px;
    padding: 0px 4px !important;
    font-size: 11px !important;
    white-space: normal;
    line-height: 16px !important;   
}

.element_not_read{
    font-weight: bold;
}

.element_not_active{
    color: var(--colorRed);
}

.element_active{
    color: var(--colorGreen);
}

.dontShowItemFormat{
    color: var(--colorRed);
}

.element_approve{
    color: var(--colorGreen);
}

.element_rejected{
    color: var(--colorRed);
}

.element_submitted{
    color: var(--colorBlueNavy);
}

.element_canceled{
    color: #e68a00;
}

.element_warning{
    color: #faa732;
}

.element_primary{
    color: #006dcc;
}

.element_inverse{
    color: #363636;
}

.element_not_active_background{
    background-color: var(--colorRed);
    color: var(--colorWhite);
}

.element_active_background{
    background-color: var(--colorGreen);
    color: var(--colorWhite);
}

.colspanLine{
    padding: 0px;
    height: 6px; 
    background-color: var(--colorBgTableTdColspan);
}

.colspanLine_2{
    padding: 0px;
    height: 3px; 
    background-color: var(--colorBorderTableTh);
}

.colspanLine2{
    padding: 0px;
    height: 4px; 
    border-bottom: 2px dashed var(--colorBorderTableTh);
}

.colspanLine3{
    padding: 0px;
    height: 2px; 
    border-bottom: 2px solid var(--colorBlack);
}

table tr.table_header_no_border_background th{
    font-weight: bold;
    background: none;
    border: none;
}

table tr.table_header_background1 th, table tr.table_header_background1 td{
    font-weight: bold;
    background-color: var(--colorBgTableTh2);
    border-top: 1px dashed var(--colorBorderTableTh);
    border-bottom: 1px dashed var(--colorBorderTableTh);
}

table tr.table_header_background2 th, table tr.table_header_background2 td{
    font-weight: bold;
    background-color: var(--colorBgTableTh3);
    border-top: 1px dashed var(--colorBorderTableTh);
    border-bottom: 1px dashed var(--colorBorderTableTh);
}

table tr.table_header_level2 th, table tr.table_header_level2 td{
    font-weight: bold;
    background: none;
    border-top: 2px solid var(--colorBlack);
    border-bottom: 2px solid var(--colorBlack);
}

table tr.table_header_level3 th, table tr.table_header_level3 td{
    font-weight: bold;
    background: none;
    border-top: 1px dashed var(--colorBlack);
    border-bottom: 1px dashed var(--colorBlack);
}

table tr.table_header_level4 th, table tr.table_header_level4 td{
    font-weight: bold;
    background: none;
    border-top: 1px dashed var(--colorBorderTableTh);
    border-bottom: 1px dashed var(--colorBorderTableTh);
}

table tr.table_header_level5 th, table tr.table_header_level5 td{
    font-weight: bold;
    background: none;
    border-bottom: 1px dashed var(--colorBorderTableTh);
}

table tr.table_border_bottom_dashed_blue td{
    border-bottom: 2px dashed var(--colorBorderTableTh);
}

table tr.table_border_bottom_dashed_blue_small td{
    border-bottom: 1px dashed var(--colorBorderTableTh);
}

th.table_side_borders, td.table_side_borders{
    border-left: 2px dashed var(--colorBorderTableTh);
    border-right: 2px dashed var(--colorBorderTableTh);
}

table.infoHideTable{
    margin: 5px 0px 0px 0px;
}

/*cellpadding="2" cellspacing="0" border="0" width="100%"*/

/* fullcalendar */

#calendar .fc-today{
    background: var(--colorBgFocusMain);
    border: none !important;
    border-top: 1px solid var(--colorBorderDashboard) !important;
    border-right: 1px solid var(--colorBorderDashboard) !important;
}

.calendarLine{
    color: var(--colorFontTableTh);
}

#calendar .fc-toolbar{
    color: var(--colorFontTableTh);
}

#calendar .fc-toolbar button{
    color: var(--colorFontTableTh);
}

#calendar .fc-toolbar button:hover{
    background: var(--colorBgHover) !important;
    color: var(--colorWhite);
}

#calendar .fc-toolbar button.fc-today-button{
    opacity: 0.65;
}

#calendar .fc-month-view .fc-day-grid{
    border-bottom: 1px solid var(--colorBorderDashboard);
}

/* ul list item tree */

.itemTree {
    margin: 0;
    padding: 0;
}
.itemTree > ul {
    padding: 0;
    margin: 0;
}

.itemTree > ul li > ul {
    padding-left: 15px;
    padding-right: 0;
}

.itemTree > ul li > ul li {
    padding-right: 0;
}

.itemTree li {
    margin: 0px 0;
    list-style-type: none;
    position: relative;
    padding: 5px 5px 0px 5px;
    margin-left: 0;
}

.itemTree li.heading div.itemContainer {
    background-color: var(--colorBgTableTh);
    font-size: inherit;
}

.itemTree li::before{
    content: '';
    position: absolute; 
    top: 0;
    width: 1px; 
    height: 100%;
    right: auto; 
    left: -8px;
    border-left: 1px solid var(--colorBorderClassic3);
    bottom: 50px;
}

.itemTree li::after{
    content: '';
    position: absolute; 
    top: 17px; 
    width: 13px; 
    height: 20px;
    right: auto; 
    left: -8px;
    border-top: 1px solid var(--colorBorderClassic3);
}
.itemTree li div.itemContainer{
    height:15px;
    border: 1px solid var(--colorBorderClassic3);
    padding: 5px 10px;
    text-decoration: none;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    font-size:11px;
    background-color: var(--colorBgDashboardMain);
}

.itemTree > ul > li::before, .itemTree > ul > li::after{
    border: 0;
}

.itemTree li:last-child::before{ 
    height: 17px;
}

.itemTree div.itemName {
    width: 75%;
    float:left;
    padding-top: 2px;
}

.itemTree div.itemActions {
    float: right;
    width: 80px;;
    text-align: right;
}

.itemTree div.itemActions a {
    margin-left: 5px;
    text-decoration: none;
    font-size: inherit;
    color: inherit;
}

.itemTree div.itemContainer:hover {
    cursor: pointer;
    background-color: var(--colorBgTableTdHover);
}

.itemTree li div.itemContainer.new-row {
    background-color: var(--colorWhite);
    text-align: right;
    height: 23px;
    font-size: 11px;
    width: auto;
    float: right;
}

.itemTree li div.itemContainer.new-row a {
    font-size: inherit;
    font-weight: bold;
}

.itemTree li div.itemContainer.statusSuccess {

}

.itemTree div.itemName a{
    color: inherit;
    text-decoration: none;
    font-size: inherit;
}

.itemTree img.iconImage{
    width: 20px;
    float: left;
    margin: 0px 5px 0px 0px;
}

.formatTableHeaderHover{
    color: var(--colorFontTableThLight1);
    font-weight: bold;
}

.formatTableHeaderHoverDark{
    color: var(--colorFontTableTh);
    font-weight: bold;
}

.formatTableHeaderHover:hover{
    color: var(--colorFontTableTh);
}

.formatTableHeaderHoverDark:hover{
    color: var(--colorFontTableThLight1);
}

.formatTextHover{
    color: var(--colorLink);
}

.formatTextHoverBold{
    color: var(--colorLink);
    font-weight: bold;
}

.formatTextHover:hover{
    font-weight: bold;
}

.formatTextBold, .formatSublistBold{
    font-weight: bold;
}

.element_not_active .formatTextHover, .element_not_active .formatTextHoverBold{
    color: var(--colorRed);
}

.element_not_active a{
    color: var(--colorRed);
}

.tableColspanInfoMsg{
    font-weight: bold;
    text-align: center;
}

.divInfoMsg{
    font-weight: bold;
    text-align: center;
    margin: 5px 0px;
}

.divCenterMsg{
    text-align: center;
    margin: 5px 0px;
}

.sublist_space_cell{
    padding-left: 40px;
}

span.span_action_link{
    color: var(--colorLink);
    cursor: pointer;
}

.table_border_right{
    border-right: 1px dashed var(--colorBorderTableTh);
}

i.fileIcon{
    color: var(--colorDarkLight70);
}

i.fileIcon:hover{
    color: var(--colorBlack);
}

/* jQuery Fix */

tr.ui-sortable-helper {
    display: table !important;
}

/* LIST */

.sublistChildName{
    padding-left: 20px;
}

/* BOX */

.colorBackgroundBox, .colorBackgroundBoxWhite{
    width: 100%; 
    padding: 2px;
}

.colorBackgroundBoxWhite{
    color: white;
}

div.loadNoData{
    text-align: center;
    width: 100%;
    font-weight: bold;
    margin: 5px 0px 0px 0px;
}

/* SELECT */

.selectBetweenSpace{
    margin-top: 5px;
}

/* SCHOOL */

.schoolClassStudentTable{
    margin-bottom: 10px;
}