@font-face {
    font-family: 'Lato';
    src:  url('../fonts/Lato/Lato-Regular.ttf') format('truetype');
}



@font-face {
    font-family: 'Montserrat';
    src:  url('../fonts/Montserrat/Montserrat-Regular.ttf') format('truetype');
}

body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    /*overflow-y: auto;*/
    background-color: #FFFFFF;
    font-family: 'Lato', 'Tahoma';

}
/* img { image-rendering: crisp-edges; } */
.left {
    float: left;
}

.right {
    float: right;
}

select {
    padding: 3px 2px;
    border: 2px solid #ddd;
}


label {
    cursor: pointer;
}

.box {
    position: fixed;
    /*background-color: #FFF;*/
    /*z-index:105;*/
    top: 30%;
    /*    border: 2px solid #DDD;
        padding: 20px;*/
    display: none;

    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 90%;
}

.box .boxTitle {
    text-align: left;
    font-size: 14pt;
    font-weight: bold;
    margin-bottom: 20px;
}


#header {
    width: 100%;
    background-color: #FFF;
    height:100px;
    text-align: center;
}


#hidePage {
    position: fixed;
    background-color: rgba(255,255,255,0.8);
    width: 100%;
    height: 100%;
    text-align: center;
    /*top: 0px;*/
    top: 61px;
    left: 0px;
    z-index: 100;
    display: none;
}

#loading {
    position: absolute;
    top: 30%;
    left: 49%;
    background-image: url(../img/loader.gif);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100% 100%;
    width: 100px;
    height: 100px;
}



#userMenu {
    position: relative;
}

#userMenu #userMenuContainer {
    position: absolute;
    top:61px;
    left: 0px;
    cursor: pointer;
    width:100%;
    display: none;
    z-index:120!important;
}


#userMenu .avatarName {
    min-width:90px!important;
    max-width:300px!important;
    word-break: break-word;
    overflow: hidden;
    height:60px;
    text-align: left;
}

#userMenu #changePasswordMenu, #userMenu #changeProfileMenu {


    background-color: #FFF;
    /*z-index:100;*/
    border-bottom:1px solid #ededed;

    color: #FC977C;
    color: #777;
    background-color: #f9f9f9;

}

div.innerItemMenu   {
    padding-right: 20px;
    text-align: left;
    font-size: 10pt;
    line-height: 40px;
    height: 40px;


}

#changePasswordMenu .innerItemMenu {
    background-image: url(../img/password-mdss-100.png);
    background-size: 20px 20px;
    background-repeat: no-repeat;
    background-position: 28px 10px;
    padding-left: 53px;
}

#changeProfileMenu .innerItemMenu {
    background-image: url(../img/avatar-mdss-96.png);
    background-size: 24px 24px;
    background-repeat: no-repeat;
    background-position: 26px 8px;
    padding-left: 53px;
}

#cookieBar {
    /*width: 300px;*/
    /*height: 30px;*/
    height: auto;
    position: fixed;
    bottom: 0px;
    left: 0px;
    z-index: 1000;
    color: #333333;
    font-size: 9pt;
    padding: 8px 15px 6px 45px;
    overflow: hidden;
    background-image: url(../img/DataProtection-32.png);
    background-color: rgb(255, 211, 50);
    background-position: 8px 50%;
    background-repeat: no-repeat;
    display: none;
}

#changePasswordMenu div.innerItemMenu {
    /*    background-image: url(../img/password-satis-100.png);
        background-repeat: no-repeat;
        background-position: center left;
        background-size: 20px 20px;*/
}

#changeAvatarMenu {
    background-color: #FFF;
    z-index:100;
    border-bottom:1px solid #ededed;

    color: #10A5C5;
    background-color: #f9f9f9;
}


input {
    overflow: visible;
    border: 2px solid #ddd;
    padding: 3px 2px;
    outline: none;

}

select {
    outline: none;
}

textarea {
    border: 2px solid #ddd;
}

[contenteditable] {
    outline: 0px solid transparent;
}

input, select, textarea, [contenteditable] {
    border-radius: 3px;
}

input[type="radio"] {
    margin-right: 5px;
}

/* --------------- BOTTONI --------------------- */
.button {
    display: inline-block;

    border: 0px;
    cursor: pointer;
    text-align: center;
    -moz-border-radius: 0px;
    -khtml-border-radius: 0px;
    -webkit-border-radius: 0px;
    border-radius: 50px;
    font-size: 10pt;
    font-weight: bold;


    text-align: center;
    color: #f7f8f9;
    height: 30px;
    line-height: 30px;
    padding: 10px 16px;
    cursor: pointer;
}

.buttonTransparent {
    background-color: transparent;
    color: #000000;
    border-color:transparent;
}

.buttonBlue {
    background-color: #6795B2;
    color: #FFFFFF !important;
    border-color: #087190 !important;
}

.buttonBlue:hover {
    background-color: #10A5C5;
}


.buttonRed {
    background-color: #FF0000;
    color: #FFFFFF !important;
    border-color: #990000 !important;
}

.buttonSatis {
    background-color: #10A5C5;
    color: #FFFFFF !important;
    border-color: #990000 !important;
}

.buttonMDSS {
    background-color: #FC977C;
    color: #FFFFFF !important;
    border-color: #990000 !important;

    background-image: -webkit-gradient(linear,right bottom,left top,from(#da6b96),to(#FC977C));
    background-image: linear-gradient(to top left,#da6b96,#FC977C);
    color: #fff!important;
    white-space: nowrap;

}

.buttonSmall {
    height: 14px;
    line-height: 14px;
    border-radius: 34px;
}

.buttonMini {
    height: 7px;
    line-height: 7px;
    border-radius: 20px;
}


.buttonRed:hover {
    background-color: #CC3300;
}

.buttonGrey {
    background-color: #4C4C4C;
    color: #FFFFFF !important;
    border-color: #333333 !important;
}

.buttonGrey:hover {
    background-color: #333333;
}
/* ----------------------- INTERFACCIA ----------------- */
a {
    text-decoration: none;
    color: inherit;
}

nav#topmenu {
    height: 60px;
    background-color: #FFFFFF;
    border-bottom: 1px solid #ededed;
    /*border-bottom: 1px solid #f7f7f7;*/
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    z-index: 99;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

#logo {
    font-family: 'Montserrat';
    /* color: #F95759; */
    color: #FC977C;
    margin-left: 20px;
    margin-right: 20px;
    font-size: 26pt;
    line-height: 60px;
    /*height: 60px;*/
    /*width: 342px;*/
    height: 50px;
    width: 285px;
    margin-top: 5px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center left;
}

#poweredByHeader {
    text-align: center;
    color: #777;
    font-size: 11pt;
    margin-top: 5px;
    line-height: 15pt;
}

#poweredByHeader .mdssGradientLogo {
    font-family: 'Montserrat';
    color: #FC977C;
    font-size: 20pt;
    height: 45px;
    text-align: center;
    background: -webkit-linear-gradient(#FC977C, #da6b96);
    background-clip: border-box;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

nav#topmenu .avatar {
    height: 36px;
    width: 36px;
    margin: 12px;
    margin-left: 0px;
    margin-right: 5px;
    font-size: 13pt;
    background-color: #FC977C;
    color: #FFF;
    -moz-border-radius: 18px;
    -webkit-border-radius: 18px;
    border-radius: 18px;
    line-height: 36px;
}


nav#topmenu .menuItem {
    line-height: 60px;
    color: #777;
    font-size: 12pt;
    cursor: pointer;
    text-align: center;
    padding: 0px 20px;
}

#logoutMenuButton {
    cursor: pointer;
    margin-top: 13px;
    margin-right: 20px;
    display:none;
}


#logoutRoundButton {
    background-color: #4C4C4C;
    height: 34px;
    width:34px;
    border-radius: 17px;
    background-image: url(../img/logout-FFFFFF-100.png);
    background-repeat: no-repeat;
    background-size: 24px 24px;
    background-position: center center;
    cursor: pointer;
    margin-top: 13px;
    margin-right: 20px;
    display: none;
}

#logoutRoundButton:hover {
    background-color: #333;
}


#footer{

    font-size: 8pt;
    position: fixed;
    bottom:0px;
    left:20px;
    line-height: 15px;
    background-color: #FFF;
    padding: 3px 5px;
    width: 100px;

    -webkit-user-select: none;  /* Chrome all / Safari all */
    -moz-user-select: none;     /* Firefox all */
    -ms-user-select: none;      /* IE 10+ */
    user-select: none;


}
/*nav#topmenu .menuItem {
    line-height: 60px;
    color: #777;
    font-size: 12pt;
    cursor: pointer;
    text-align: center;
    padding: 0px 20px;
}*/



#creditsBox {
    display: none;
}

#cookieBar {
    display: none;
}

#changePasswordBox {
    display: none;
}



#editProfileBox {
    display: none;
}

/* ---------- ERROR BOX -------------- */
#errorBox {
    position: fixed;
    top: 30%;
    left: 30%;
    z-index:110;
    background-color: #FFFFFF;
    border: 4px solid #ff0000;
    width: 500px;
    display: none;
    padding: 20px;
    line-height: 20px;
}




#closeBoxButton {
    position: absolute;
    top: -10px;
    right: -10px;
}
.closeButton {
    width:20px;
    height: 20px;
    color: #FFF;
    text-align: center;
    line-height: 20px;
    padding: 2px;
    font-weight: bold;
    background-color: #333333;
    cursor: pointer;
    font-size: 16pt;
}

#bodyContainer {
    margin-top: 80px;
    min-width: 861px;
    overflow:hidden;
}

/* LEFT MENU */
#leftMenu {
    border-right: 1px solid #DEDEDE;
    width: 150px;
    margin-right: 10px;
    min-width:150px;

    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}


#leftMenu .leftMenuItem {
    /* font-size: 12pt;
    color: #777;
    cursor: pointer;
    padding: 10px 20px;
    text-align: left;
    border-left: 5px solid #FFF;
    transition: border-left-color 0.15s ease-out 0.3s;
    border-left-color: transparent;
    */
    font-size: 12pt;
    color: #777;
    cursor: pointer;
    padding: 10px 20px;
    text-align: left;
    /* border-left: 5px solid #FFF;*/
    display: block;
    /* float: left; */
    text-align: left;
    /* width: 25%;
    height: 100%; */
    transition: all ease-in-out .2s;

}


#leftMenu .leftMenuItem.menu{
    border:none;
    position: relative;
}
#leftMenu .leftMenuItem.menu:hover{
    border: none;
}
#leftMenu .leftMenuItem:hover {
    /* border-bottom: 5px solid #FFFFFF; */
}
#leftMenu .leftMenuItem.menu::after{
    content: '';
    position: absolute;
    width: 5px;
    height: 0px;
    left: 0px;
    bottom: 50%;
    background-color: grey;
    transition: all ease-in-out .2s;
}
#leftMenu .leftMenuItem.menu:hover::after{
    height: 100%;
    bottom: 0;
}



#leftMenu .leftMenuItem.selected {
    border-left: 5px solid #FC977C;
    transition-duration: 0s;
    padding-left: 30px;
}

#leftMenu .leftMenuItem.menu.selected:hover {
    transition: none;
    transition-duration: 0s;
}

#leftMenu .leftMenuItem.menu.selected::after{
    transition: none;
    transition-duration: 0s;
}
#leftMenu .leftMenuItem.menu.selected:hover::after{
    transition: none;
    transition-duration: 0s;
}

#leftMenu .inEvidence {
    background-image: -webkit-gradient(linear,right bottom,left top,from(#da6b96),to(#FC977C));
    background-image: linear-gradient(to top left,#da6b96,#FC977C);
    color: #fff!important;
    white-space: nowrap;
    padding: 9px 9px;
    font-weight: bold;
    width: 100px;
    line-height: 1.4;
    text-align: center;
    margin-left: 20px;
    cursor: pointer;
    margin-bottom: 30px;
    border-radius: 40px;
}

#leftMenu .leftMenuItem.selected.inEvidence {

}



#workspace {
    padding: 10px;
    overflow-y: auto;
    overflow-x: auto;
}

#rightMenu {
    width: 15%;
    border-left: 1px solid #EEE;
    margin-left:10px;
}
/* change password box */
#changePasswordBox {
    position: fixed;
    z-index: 102;
    /*width: 800px;*/
    /*    min-width: 560px;
        max-width: 800px;    */
    /*display: block;*/
    width:590px;
}

#changePasswordBoxTitle {
    margin-top: 10px;
    margin-bottom: 10px;
    font-size: 10pt;
}

#changePasswordBox .footerBox {
    margin-top: 20px;
}

#changePasswordBoxRules {
    padding-left: 50px;
    width: 300px;
    font-size: 10pt;
    background-image: url(../img/warning-96.png);
    background-repeat: no-repeat;
    background-size: 42px 42px;
    background-position: center left;

}

#changePasswordBox input {
    border: 2px solid #ddd;
    padding: 3px 6px;
    font-size: 12pt;
    margin-top:5px;
}

#changePasswordBox input.inputError {
    border: 2px solid #FF0000
}

#changePasswordBox label {
    font-weight: bold;

}

#passwordRules {
    list-style: none;
    padding-left: 0px;
}

#passwordRules li.passwordRule {
    height:30px;
    background-image: url(../img/no-64.png);
    background-repeat: no-repeat;
    background-size: 20px 20px;
    background-position: center left;

    padding-left: 30px;
    line-height: 30px;
}

#passwordRules li.passwordRule.completed {
    color: #777;
    background-image: url(../img/ok-64.png);
}



/* ---------------- NUOVA CHECKBOX ---------------- */
.checkbox {
    height: 20px;
}

.checkbox .leftSwitch, .checkbox .rightSwitch {
    height: 20px;
    width: 20px;
}

.checkbox.enabled .leftSwitch {
    background-color: #BFD841;
    border: 1px solid #A6BF27;
    cursor: pointer;
    border-radius: 16px;
}

.checkbox.enabled .rightSwitch {
    background-color: #E8E8E8;
    /*border: 1px solid rgb(210, 211, 212);;*/
}

.checkbox.disabled .leftSwitch {
    background-color: #E8E8E8;
    /*border: 1px solid #D2D3D4;*/
}

.checkbox.disabled .rightSwitch {
    background-color: #e8273a;
    border-right: 1px solid #d54a51;
    border-top: 1px solid #d54a51;
    border-bottom: 1px solid #d54a51;
    cursor: pointer;
    border-radius: 16px;
}

.checkbox .checkboxValue {
    font-size: 10pt;
    line-height: 20px;


    margin-left: 10px;
    cursor: pointer;
}

.checkbox.checkboxSmall  .leftSwitch, .checkbox.checkboxSmall  .rightSwitch {
    height: 16px;
    width: 16px;
}

.checkbox.checkboxSmall .checkboxValue {
    margin-left: 10px;
    font-size: 9pt;
    cursor: pointer;
    line-height: 16px;
}


.checkbox.checkboxBig  .leftSwitch, .checkbox.checkboxBig  .rightSwitch {
    height: 27px;
    width: 27px;
}

.checkbox .switch {
    margin-right: 10px;
    border-radius: 16px;
    overflow: hidden;
    background-color: #E8E8E8;
}

.checkbox.checkboxSmall .checkboxValue {
    margin-left: 10px;
    font-size: 9pt;
    cursor: pointer;
    line-height: 16px;
}

.checkbox.checkboxBig .checkboxValue {
    margin-left: 10px;
    font-size: 10pt;
    cursor: pointer;
    line-height: 29px;
    font-weight: bold;
}

.checkbox.checkboxBig .additionalText {
    font-size: 9pt;
    min-width:800px;
}

#newShareMenuButton, #newSpaceMenuButton { /* nascondo i bottoni New Share e New Space  */
    display: none;
}

#rightClickWindow {
    -webkit-user-select: none;  /* Chrome all / Safari all */
    -moz-user-select: none;     /* Firefox all */
    -ms-user-select: none;      /* IE 10+ */
    user-select: none;
}


#showLegendFrontend {
    margin-bottom: 10px;
    cursor: pointer;
    color: #666;
    background-image: url(../img/showLegend-90.png);
    background-repeat: no-repeat;
    background-size: 20px 20px;
    background-position: center left;

    padding-left: 25px;
}