/* Girelli 17/10/2014: Font Helvetica, per ora disabilitato */
/*
@font-face {
    font-family: 'Helvetica Neue';
    src: url("fonts/HelveticaNeue-Thin.otf") format("opentype");
}
*/

html, body {
    /* Girelli 10/02/2015: per permettere scroll orizzontale anche su IE */
    overflow-x: visible;
    font-family: 'Roboto', sans-serif;
    /*font-size:12px;*/
}

BODY {
    /* Girelli 02/10/2014: rimosso in quanto crea errata barra orizzontale  nel layout nuovo */
    /* margin: 3px; */
    color: #1d1d1d;
}
/* Girelli 16/11/2015: fix font e margini per CKEditor */
/* Per CKEditor */
BODY.cke_editable {
    /*font-family: Arial, Verdana;*/
    font-size: 13px;
    margin: 2px;
}

A {
    COLOR: #484848;
    text-decoration: none;
    white-space: nowrap;
}
A:visited {
    COLOR: #484848;
}

A:active {
    COLOR: #484848;
}

A:hover {
    COLOR: #FF0000;
}
a[onclick] {
    cursor: pointer;
}
BUTTON {
    color: silver;
    background-color: white;
    border-top-style: double;
    border-right-style: double;
    border-left-style: double;
    border-bottom-style: double;
}

IMG {
    vertical-align: bottom;
}

/* Girelli 16/7/2015: Teniamo font piccolo in caso di errori che contengono questi tag (esempio il parser XML di Javascript) e anche per CKEditor */
H1 {
    font-size: 16px;
}

H2 {
    font-size: 14px;
}

H3 {
    font-size: 12px;
}

H1, H2, H3 {
    /*font-family: Arial, Helvetica;*/
}


/*sono esclusi radio, checkbox e button*/
select, INPUT[type="color"], INPUT[type="date"], INPUT[type="datetime"], INPUT[type="datetime-local"], INPUT[type="email"], INPUT[type="file"],
INPUT[type="image"], INPUT[type="month"], INPUT[type="number"], INPUT[type="password"], INPUT[type="range"], INPUT[type="reset"], INPUT[type="search"],
INPUT[type="tel"], INPUT[type="text"], INPUT[type="time"], INPUT[type="url"], INPUT[type="week"] {
    FONT-WEIGHT: normal;
    FONT-SIZE: 13px;
    /*FONT-FAMILY: 'Helvetica Neue', Helvetica, Arial, Verdana;*/
    color: #1d1d1d;
    border: 1px solid #D2D7D7;
    height: 26px;
    padding: 0px 4px;
    -webkit-border-radius: 6px;
    border-radius: 6px !important;
}

/* Mazzola 25/7/2017: FieldType TA_RICH_INLINE, CKEDITOR inline bordo come gli altri campi */
DIV[contenteditable="true"] {
    border: 1px solid #D2D7D7;
    min-height: 17px;
    overflow: hidden;
}



INPUT[type="button"], INPUT[type="submit"] {
    FONT-WEIGHT: normal;
    FONT-SIZE: 13px;
    /*FONT-FAMILY: Arial, Verdana;*/
    /* border-width: 2px;  Girelli 28/05/2014: Non serve piu', con i bottoni jQuery */
    background-color: #E0E0E0;
    padding: 4px 10px;
    margin: 2px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
}

LABEL {
    color: #1d1d1d;
    font-size: 13px;
}

/* Stile per CKEditor */
P {
    margin-top: 0;
    margin-bottom: 0;
}

SELECT {
    FONT-SIZE: 13px;
    margin: 0px;
    padding: 0px;
    /*height: 17px;*/
    border-radius: 2px;
    -webkit-border-radius: 2px;
    border-color: #949694;
    border-style: solid;
    border-width: 1px;
    color: #1d1d1d;
}

SELECT OPTION {
    padding-left: 2px;
    color: #1d1d1d;
}

/* Girelli 31/07/2014: colore verde per l'elemento che ha il focus */
/* Girelli 15/12/2014: anche sulle select2 active   e  panelCell.active  */
INPUT[type="text"]:focus,
INPUT[type="password"]:focus,
INPUT[type="search"]:focus,
SELECT:focus,
TEXTAREA:focus,
.select2-container-active .select2-choice,
.PanelCell.active,
td[contenteditable]:focus,
div#QuickRedirect:focus-within ~ ul.quick-last-items > .dropdown > a.rapid-actions > span {
    /*background-color: #e5ffe5 !important;*/
    transition: none;
    border: 1px solid !important;
    outline: 1px solid !important;
    outline-color: #eeeeee; /* per Chrome */
}

/* Girelli 29/01/2015: le input readonly non devono avere il colore verde (es. in Timesheet) */
input[type="text"][readonly]:focus {
    background-color: #fff !important;
}


SPAN {
    border: 0px;
}

TABLE {
    /* font-size: 10px;  Girelli 16/4/2015: tolto perche' crea anomalie in MenuFolder EcosStudio */
    padding: 0px;
    border-spacing: 0px;
    border-collapse: separate;
}

THEAD, .THeadTable {
    color: white;
}
/* Mazzola 22/1/2014: per allineare top i td Label e FieldValue */
TBODY {
    vertical-align: top;
}

TD {
    padding: 0px;
}

TEXTAREA {
    color: #1d1d1d;
    FONT-SIZE: 13px;
    /*FONT-FAMILY: Arial, Verdana;*/
    padding-left: 2px;
    WIDTH: 95%;
    OVERFLOW: hidden;
    MARGIN-BOTTOM: 1px;
    MARGIN-TOP: 1px;
    MIN-WIDTH: 100px;
}

script {
    display: none !important;
}

.ApplicazioneImmagine {
    BACKGROUND-POSITION: right center;
    BACKGROUND-REPEAT: no-repeat;
    POSITION: absolute;
    BACKGROUND-COLOR: transparent;
    LEFT: 0px;
    TOP: 10px;
    WIDTH: 98%;
    HEIGHT: 35px;
    BACKGROUND-IMAGE: url(../Disegni/EcosAgile.png);
}

.BalanceNegative {
    FONT-SIZE: 12px;
    COLOR: red;
    /*FONT-FAMILY: Arial, Verdana*/
}

/* Attenzione: usato in Search, in Detail e in Custom */
.buttonText{
    font-size: 12px;
    vertical-align: middle;
    display: inline;
    padding: 0 0 0 10px;
    margin-bottom:4px;
}
/*ariannaboisseau 051023 fixed button's height*/
.buttonText > button {
    min-width:104px;
    height:30px;
}

/* Girelli 21/3/2017: Stile bottoni di Search Page */
/* Tutti hanno un padding a sinistra per distanziarsi dal precedente */
#ButtonTable .buttonText {
    padding-left: 150px;
}
/* Il bottone back ha meno padding a sx, per spostare tutto più a sinistra */
#ButtonTable #container_back_2 {
    padding-left: 60px;
}


.buttonTextMini {
    font-size: 10px;
    height: 16px;
}





/*Usata nelle tabelle delle mail del Memorandum*/
tr.RowAlternateMulti:nth-child(6n+4) {
    background-color: #F2F2F2;
}

tr.RowAlternateMulti:nth-child(6n+5) {
    background-color: #F2F2F2;
}

tr.RowAlternateMulti:nth-child(6n+6) {
    background-color: #F2F2F2;
}


.ColumnHeader, .ColumnHeaderPivotGrid {
    FONT-WEIGHT: bold;
    FONT-SIZE: 14px;
    WHITE-SPACE: nowrap;
    color: #ffffff;
}

.ColumnLinkWidthFixed {
    white-space: normal;
}

.ContentCellField {
    height: 14px;
    vertical-align: middle;
    text-align: left;
}

.ContentCellLabel {
    vertical-align: middle;
    text-align: right;
}

.DetailPageButton {
}

.DetailTable {
    PADDING-LEFT: 0px;
    PADDING-RIGHT: 0px;
}

.ErrorSystem {
    border-right: red 1px solid;
    padding-right: 10px;
    border-top: red 1px solid;
    display: block;
    padding-left: 10px;
    font-size: 14px;
    background-image: none;
    padding-bottom: 3px;
    border-left: red 1px solid;
    clip: rect(auto, auto, auto, auto);
    color: white;
    padding-top: 2px;
    border-bottom: red 1px solid;
    /*font-family: Arial, Verdana;*/
    background-color: red;
    text-align: justify;
}

.ErrorUser {
    border-right: red 1px solid;
    padding-right: 10px;
    border-top: red 1px solid;
    display: block;
    padding-left: 10px;
    font-size: 14px;
    padding-bottom: 3px;
    border-left: red 1px solid;
    clip: rect(auto, auto, auto, auto);
    color: red;
    padding-top: 2px;
    border-bottom: red 1px solid;
    /*font-family: Arial, Verdana;*/
    background-color: transparent;
    text-align: justify;
}

.excelIconCell {
    border-right: #484848 1px solid;
    width: 30px;
}

.FieldValue a {
    font-size: 13px;
    color: #484848;
    display: inline;
}

/*joeyelrassi 24032023 rimesso per allineamento icona*/
.ImageFieldValue {
    vertical-align: top;
    border: 0px;
    padding: 1px;
}

/*.ExecutionBody {
    FONT-WEIGHT: normal;
    FONT-SIZE: 13px;
    MARGIN: 5px;
    COLOR: black;*/
    /*FONT-FAMILY: Arial, Verdana;*/
    /*TEXT-DECORATION: none;
    background: #fafafa;
}*/

.ExecutionLink {
    FONT-WEIGHT: normal;
    FONT-SIZE: 13px;
    white-space: normal;   /* Girelli 22/11/2022: Richiesto di togliere nowrap, per gestire Wordwrap da config con classe nowrap sul TD */
    display:inline-flex;
    position:relative;
}
/* Per Grid: i link vanno a capo o meno a seconda della classe nowrap sul TD */
td.nowrap .ExecutionLink {
    white-space: nowrap;
}
/* Girelli 17/03/2015: Testo dei link deve andare a capo */
.ExecutionLink span {
    white-space: normal;
}


.linkInterno {
    padding: 0 0 0 3px;
}

.link {
    cursor: pointer;
}

.FieldMandatory {
    COLOR: red;
    /*FONT-FAMILY: Arial, Verdana;*/
}

.FieldSearchScalar {
    BACKGROUND-POSITION: center 35px;
    BACKGROUND-IMAGE: url(../Disegni/Hourglass.gif);
    BACKGROUND-REPEAT: no-repeat;
    BACKGROUND-COLOR: #e8f3f4
}


/*Linguetta folder*/
.FolderCell {
    border-right: 1px;
    padding-left: 20px;
    width: 240px;
    text-align: left;
    border-top: #F0F0F0 1px solid;
    border-bottom: #F0F0F0 1px solid;
    background-color: rgb(67,94,120);
}

.FolderCollapseCell {
    padding-top: 2px;
    border-top: #F0F0F0 1px solid;
    border-bottom: #F0F0F0 1px solid;
    background-color: rgb(67,94,120);
}

/*Titolo linguetta folder*/
.FolderTitle {
    FONT-WEIGHT: 600;
    FONT-SIZE: 13px;
    BORDER-LEFT: 1px;
    MARGIN-TOP: 2px;
    color: white;
}


.FolderSideCell {
    text-align: center;
    background-color: rgb(255,255,255)
}

/* Girelli 19/02/2016: Classe .Footer obsoleta? Con il layout nuovo abbiamo il tag footer */
.Footer {
    color: #376696;
    font-size: 10px;
    padding-right: 10px;
    padding-left: 10px;
    padding-bottom: 2px;
    padding-top: 2px;
    margin-top: 10px;
    margin-bottom: 0px;
    background-color: #F7F7F7;
    border: #dcdcdc 1px solid;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    width: 99.8%; /* Girelli 18/04/2014: Larghezza in %, non piu' gestita dal JS in Utilita.js */
    height: 28px; /* Girelli 25/08/2014: altezza per evitare che sia troppo sottile in login */
}
    /* Girelli 02/4/2014: per centrare in verticale i testi nel footer e tenere copyright su una riga  */
    .Footer tbody td {
        vertical-align: middle;
        white-space: nowrap;
    }

/*Header*/
.HeaderBody {
    FONT-WEIGHT: normal;
    FONT-SIZE: 10px;
    BACKGROUND-ATTACHMENT: fixed;
    TEXT-DECORATION: none;
    background: url(../../../Disegni/intra_bkg_19.gif) repeat-x top;
}


.PageRemark:not(:empty), .ComponentRemark:not(:empty), .Help:not(:empty) {
    font-size: 13px;
    display: inline-block;
    padding: 6px 12px;
    border: 1px solid transparent;
    background: #ededed;
    border-radius: 8px;
    margin-bottom: 4px;
}
.ComponentRemark:empty {
    display:none;
}

.PageLegendRow {
    width:100%;
    float:left;
    margin-bottom:5px;
}

.PageLegendLabel {
    line-height: 18px;
    display: inline-block;
    float: left;
    margin-right: 20px;
    padding-right: 20px;
    border-right: 1px solid grey;
}
.PageLegendLabel:last-child {
    border-right:0px transparent;
}


.HeaderUser {
    color: black;
    padding-left: 5px;
}


/* Girelli 17/02/2015: posizione rialzata tendina lingue, altrimenti difficile da cliccare */
ul#languages {
    top: 30px;
    visibility: hidden;
    opacity: 0;
    transition-delay: .3s;
}
/*mattiapaganini 16062023 aggiunto background color a lingau selezionata*/
li.languageDropdown > ul#languages > .lang-selected {
    background-color: #f5f5f5;
}


li.languageDropdown:hover > ul#languages {
    visibility: visible;
    opacity:1;
    display: block !important;
}

/* Girelli 02/10/2014: stile icone menu lingue in header */
#languages img {
    width: 20px;
    position: relative;
    top: -2px;
    margin-right: 6px;
}

/*nabilrafka 06062024 language popup border radius*/
#languages li:first-child, #languages li:first-child a {
    border-top-right-radius: 8px;
    border-top-left-radius: 8px;
}

#languages li:last-child, #languages li:last-child a {
    border-bottom-right-radius: 8px;
    border-bottom-left-radius: 8px;
    border: none;
}

.InfoMessage {
    border-right: green 1px solid;
    padding-right: 10px;
    border-top: green 1px solid;
    display: block;
    padding-left: 10px;
    font-size: 14px;
    padding-bottom: 3px;
    border-left: green 1px solid;
    clip: rect(auto, auto, auto, auto);
    color: green;
    padding-top: 2px;
    border-bottom: green 1px solid;
    /*font-family: Arial, Verdana;*/
    background-color: transparent;
    text-align: justify;
}

/* Girelli 25/08/2014: spaziatura box di login */
.login-margin.top,
.login-margin.bottom {
    height: 40px;
}

/* Girelli 5/10/2015: Stile responsive pag. di login */
.divLang {
    float: left;
    width: 132px;
}

.divLogin {
    float: left;
    width: 33%;
    min-width: 132px;
}

.FieldValueLogin {
    FONT-SIZE: 13px;
    /*PERSONALIZE 10*/
    vertical-align: bottom;
    min-width: 600px; /* larghezza minima per non fare andare a capo su schermi larghi quando c'è una sola lingua o due */
    color: rgb(67,94,120);
}
/* Stile per login mobile iPhone, Android */
@media (max-width:600px) {
    .login-margin.top {
        height: 1px;
    }

    .divLang {
        height: 24px;
    }

    .FieldValueLogin {
        min-width: 0px;
    }

    /* Dialog Popup responsive */
    .lightGray > .ui-dialog {
        width: 95% !important;
    }
}

.LabelLogin {
    font-weight: bold;
    font-size: 13px;
    overflow: visible;
    text-transform: none;
    /*PERSONALIZE 10*/
    padding-top: 4px;
    /*font-family: Arial, Verdana;*/
    margin-left: 2px;
    color: rgb(67,94,120);
}

/* Girelli 29/07/2014: aumentata dimensione text di login */
.ValueLogin {
    height: 22px !important;
    font-size: 13px !important;
    margin-top: 1px;
    width: 90%;
}

.ButtonLogin {
    width: 90%;
    margin-top: 14px;
}

/* Girelli 25/07/2014: posizione icone sopra le text di login e password */
.userIcon, .pwIcon, .loginIcon {
    position: absolute;
    margin: -20px 0 0 4px;
    width: 16px;
    height: 16px;
    display: block;
}

.userIcon {
    background: url(../Disegni/User_16.png);
}

.pwIcon {
    background: url(../Disegni/Key_16.png);
}

.loginIcon {
    background: url(../Disegni/Lock_16.png);
    margin: 4px 0 0 0;
}

/* Girelli 25/07/2014: aggiornamento stile radio delle lingue in login */
LABEL.LangItemLogin {
    padding-left: 5px;
    cursor: pointer;
}

.LensFieldRelated {
    border-right: medium none;
    border-top: medium none;
    font-size: 13px;
    overflow: visible;
    border-left: medium none;
    color: black;
    border-bottom: medium none;
    /*font-family: Arial, Verdana;*/
    background-color: transparent
}



.MenuBody {
    font-weight: normal;
    font-size: 10px;
    background-attachment: fixed;
    margin: 5px 0px 0px 0px;
    background-repeat: repeat-y;
    /*font-family: Arial, Verdana;*/
    background-color: #fff;
    text-decoration: none;
    border: 1px solid #e9e9e9;
}

frame {
    border: 1px solid #e9e9e9;
}

/* Girelli 17/07/2014: aggiunto stile per impedire selezione del testo */
.MenuImmagine {
    /*PERSONALIZE 9*/
    BACKGROUND-REPEAT: no-repeat;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Girelli 29/07/2014: text di search con bordi arrotondati, un po' piu' grande e con icona lente */
input.MenuSearch,
input.PeopleSearch,
input.NotificationSearch {
    color: Gray;
    font-style: italic;
    width: 200px;
    height: 26px;
    background-color: #fff;
    padding-left: 26px;
}
/*joeyelrassi 19012021 to shorten menu search width*/
div > input.MenuSearch {
    width:160px;
}

input.PeopleSearch {
    width: 234px;
}
#MessageToProjectManager input.PeopleSearch {
    height: 26px;
    border-radius: 6px !important;
}

    /*joeyelrassi 01062021 removed     input.MenuSearch.Edit*/
    input.PeopleSearch.Edit {
        color: Black;
        font-style: normal;
    }


/*joeyelrassi 01062021 remove outline on button clicks (focus)*/
button.btn:focus{
    outline:none !important;
}
/*joeyelrassi 23032022 buttons border radius from 3-4 to 6 on all buttons*/
.btn-sm, .btn-group-sm > .btn, .btn {
    border-radius:6px;
}
/* Icona di ricerca persone */
div.PeopleSearch {
    position: absolute;
    width: 16px;
    height: 16px;
    z-index: 1;
    left: 12px;
    top:5px;
}
#MessageToProjectManager div.PeopleSearch {
    top:4px;
}
/* Icona di ricerca Menu */
div.MenuSearch {
    position: absolute;
    width: 16px;
    height: 16px;
    z-index: 1;
    top: 4px;
    left: 8px; /*ariannaboisseau 271023 changed from 12 to 8*/
}
/* Icona di ricerca Notification */
div.NotificationSearch {
    position: absolute;
    width: 16px;
    height: 16px;
    z-index: 1;
    top: 3px; /*nabilrafka 18092023 changed from 4 to 3*/
    left: 24px; /*nabilrafka 18092023 changed from 22 to 24*/
}

/*----------------------------------------------------------Menu Folder Start----------------------------------------------------------*/
.MenuTitle {
    FONT-WEIGHT: bold;
    FONT-SIZE: 22px;
    TEXT-TRANSFORM: capitalize;
    color: rgb(67,94,120);
}



/* Girelli 03/4/2014: per allargare la dimensione del bottone della voce di menu, tutto cliccabile */
.MenuCell {
    width: 180px;
}

.MenuVoiceLeaf a {
    width: 100%;
    display: inline-block;
    padding: 5px 5px 5px 0;
    font-size: 11px;
}
    /* Girelli 02/4/2014: Nuovo stile Menu: sfondo grigio chiaro al mouseover sulle voci, effetto bottone */
    .MenuVoiceLeaf a:hover {
        background-color: #DDD;
        color: #484848;
        padding: 5px 5px 5px 0;
        border-radius: 2px;
        -moz-border-radius: 2px;
        -webkit-border-radius: 2px;
        transition: background-color .1s ease-out;
        -moz-transition: background-color .1s ease-out;
        -webkit-transition: background-color .1s ease-out;
    }
    /* Girelli 02/4/2014: Nuovo stile Menu: sfondo grigio scuro su voce selezionata, effetto bottone */
    .MenuVoiceLeaf a.MenuVoiceHighLight {
        color: #e8f3f4;
        background-color: #BBB;
        padding: 5px 0 5px 5px;
        border-radius: 2px;
        -moz-border-radius: 2px;
        -webkit-border-radius: 2px;
        font-size: 11px;
    }
        /* Girelli 03/4/2014: Ripeto :hover, altrimenti prende gli attributi di .MenuVoiceLeaf a:hover */
        .MenuVoiceLeaf a.MenuVoiceHighLight:hover {
            background-color: #BBB;
            padding: 5px 0 5px 5px;
        }

.MenuFolder {
    width: 98.5%; /* Girelli 18/04/2014: Larghezza in %, non piu' gestita dal JS in Utilita.js ///// joeyelrassi 25012021 cambiata da 99.8 a 99%*/
    padding-left:12px;
}

.MenuFolderVoice {
    float: left;
    vertical-align: top;
    width: 32%;
    margin: 0 1% 1% 0;
    border: 1px Solid #CCC;
    -webkit-border-radius: 4px;
    border-radius: 8px;
    padding-left: 4px;
    padding-right: 4px;
    -webkit-transition: background .3s;
    transition: background .3s;
    position: relative;
    background: white;
}

    .MenuFolderVoice:after {
        content: '';
        transition: opacity 0.2s;
        box-shadow: 0 0 6px 1px rgba(153, 153, 153, .5);
        display: flex;
        position: absolute;
        border-radius: 6px;
        top: 0;
        z-index: -1;
        right: 0;
        width: 100%;
        height: 100%;
        opacity:0;
    }

    .MenuFolderVoice:hover:after {
        opacity:1;
    }


    .MenuFolderVoice A SPAN {
        COLOR: #505050;
    }

    .MenuFolderVoice .ParagrafoTitolo {
        display: inline-block;
        padding: 10px 0 0 6px;
    }

    .MenuFolderVoice .DescLong {
        white-space: normal;
    }

    .MenuFolderVoice .divDescLong {
        padding: 0 0 0 38px;
    }

    .MenuFolderVoice > div{
        display:inline-flex;
        flex-direction:column;
    }
    .MenuFolderVoice > div:empty{
        display:none;
    }
    .MenuFolderVoice > div > a {
        font-size: 13px;
        float: left;
        display: inline-block; /*joeyelrassi 20042021 added display:inline-block instead of width:100% so hover only happens on actual element*/
        /*joeyelrassi 10122020 added margin-left*/
        margin-left: 5px;
        /*joeyelrassi 28062021 to show ... if too long*/
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .MenuFolderVoice a{
        cursor:pointer;
    }

/*----------------------------------------------------------Menu Folder End----------------------------------------------------------*/

.NotActiveRecord a {
    /*FONT-FAMILY: Arial, Verdana;*/
    text-decoration: line-through;
}

.NotActiveRecord {
    /*FONT-FAMILY: Arial, Verdana;*/
    text-decoration: line-through;
}

.NumeroElenco {
    FONT-WEIGHT: normal;
    FONT-SIZE: 14px;
    COLOR: #0000ff;
    /*FONT-FAMILY: Arial, Verdana;*/
    TEXT-DECORATION: none;
}

.ObjectHelp {
    FONT-WEIGHT: bolder;
    COLOR: green;
    /*FONT-FAMILY: Arial, Verdana;*/
}

/* Mazzola 26/02/2014: messo padding e tolta width fissa */
/* Girelli 13/06/2014: rimessa width fissa, perche' alcuni browser eccedono in larghezza se si usa la % */
.OperatorLabel {
    /*font-family: Arial, Verdana;*/
    white-space: nowrap;
    text-align: center;
    width: 125px;
    padding: 0px 5px;
}
    /* Girelli 01/07/2014: larghezza delle select di operator (anche per la configurazione) */
    .OperatorLabel select {
        width: 125px;
    }

.footerIconsLeft > div {
    float: left;
}

/* Icone footer di griglia a dx */
.footerIconsRight {
    display: inline-flex;
    text-align: right;
    /*min-width: 120px;*/
    min-height: 23px;
    justify-content: flex-end;
    float: right;
}

/*nabilrafka 23032023 added footerIconLeft*/
.footerIconsLeft {
    display: inline-flex;
    text-align: left;
    /*min-width: 120px;*/
    min-height: 23px;
}


.footerIconsRight > table, .footerIconsRight > table td:first-child {
    width: 100%;
}
/*joeyelrassi 03082021 with new icons they seem closer*/
.footerIconsRight .FooterTableIcon{
    margin-right:2px;
}
/*joeyelrassi 16/10/2023 messo a 100%*/
/* Mazzola: 29/10/2014: font del numero pagina della griglia */
.pageNavigatorCell {
    width: 100%;
    display: flex;
    justify-content: space-evenly;
    margin-right: 10px;
}

/*---------------------------------------------------------------------------List Cell---------------------------------------------------------------------------*/
.ListCell {
    padding-right: 1px;
    padding-left: 1px;
    vertical-align: middle;
    border-bottom: thin;
}

/* Linea separatrice colonne folder */
.ListCellGroup {
    padding: 3px 3px 2px 3px;
    BORDER-BOTTOM: thin;
    vertical-align: top;
    border-right: 1px solid #DDD;
    color: #000;
}

div.GridSingleColumn-container .ListCellGroup {
    border-right: 0px;
}
div.GridSingleColumn-container .FieldValueEdit {
    height:unset;
}
/* Girelli 28/12/2023: stile single column con domande in bold, spaziate */
div.GridSingleColumn-container .dataRow {
    padding-bottom: 10px;
}
div.GridSingleColumn-container .dataCell div.DESC_MAIN {
    font-weight: bold;
}
div.GridSingleColumn-container .dataCell[onclick] {
    cursor: pointer;
}

/* Label for Grid single column, on the left */
div.labelpositionleft {
    float: left;
    padding: 4px 4px 0 0;
}
/* Label for Grid single column, on top */
div.labelpositiontop {
    float: initial;
}

/* Linea verticale a sinistra della prima cella */
tr:not(.TreeGridLeaf) > td.ListCellGroup:first-child, tr:not(.TreeGridLeaf) > td.ListCellGroupFunction:first-child {
    border-left: 1px solid #DDD;
}


.ListCellGroupFunction {
    PADDING-RIGHT: 3px;
    PADDING-LEFT: 3px;
    BORDER-TOP: 1px dotted #A9A9A9 !important;
    /* Mazzola 22/10/2014: resi uguali a ListCellGroup */
    BORDER-RIGHT: 1px solid #DDD;
    vertical-align: middle;
    font-weight: bold;
}

td.ListCellGroupFunction {
    background-color: white;
}


/* Mazzola 30/10/2014: classe usata per i totali di grid separati da una doppia righetta */
.ListCellGroupFooterFunction {
    PADDING-RIGHT: 3px;
    PADDING-LEFT: 3px;
    BORDER-TOP: 3px double #A9A9A9;
    /* Mazzola 22/10/2014: resi uguali a ListCellGroup */
    BORDER-RIGHT: #DDD 1px solid;
    BORDER-LEFT: #DDD 1px solid;
    vertical-align: middle;
    font-weight: bold;
}
/*---------------------------------------------------------------------------List and Grid Navigation---------------------------------------------------------------------------*/

/*joeyelrassi 24062021 removed border top for new layout fix, set as border bottom to tbody*/
.ListNavigation {
    COLOR: #376696;
    height: 0px;
    /* Mazzola 20/01/2014 : aggiunge 5px sopra navigation nelle liste di risultati dei prompt */
    padding-top: 5px;
}

.ListNavigationSelect {
    font-weight: bolder !important;
    color: #444444 !important;
    text-align: right !important;
}

.ListNavigationCount {
    text-align: left;
    border-color: transparent;
}
/* Girelli 4/9/2017: ridotta larghezza combo, solo in grid, non in search */
.GridFooter .ListNavigationSelect {
    width: 40px !important;
}
/* N. record trovati nelle grid */
.recordNumberSelectorCell {
    padding: 0 4px;
    /*font-family: Arial, Verdana;*/
    color: #1d1d1d;
    white-space: nowrap;
    /*float: left;*/
    /*width: 35%;*/ /*joeyelrassi 01092021 changed width from 34 to 30% to get navigation items closer  -- reverted to 34 for small widths*/
    /*display: inline-block;*/
}
/*joeyelrassi 16/10/2023 commented rule below*/
/*.gridNavigation ~ .recordNumberSelectorCell, .gridAppendButton ~ .recordNumberSelectorCell {
    text-align: left;*/ /*joeyelrassi 01092021 changed from center to left to be symmetric*/
/*}*/
/* Grid navigation per cambio pagina */
.gridNavigation {
    /*float: left;*/
    /*width: 33%;*/
    /*joeyelrassi 01092021 changed width to 30% and added margin left to keep centered but get closer the navigation items*/
    /*width: 30%;*/
    /*text-align: right;*/
    padding: 0 4px;
    /*display: inline-block;*/
}

.gridNavigation > a {
    display: inline-flex;
    align-items: center;
}

.ListNavigationCount, .ListNavigationSelect, input.ListNavigationSelect, .gridNavigation > *, .recordNumberSelectorCell > *, .gridNavigation select, .gridNavigation input,
.recordNumberSelectorCell select, .recordNumberSelectorCell input {
    font-size:12px;
}

/* Bottone mostra altre 20 righe */
.gridAppendButton {
    /*float: left;*/
    /*width: 35%;*/ /*joeyelrassi 01092021 changed width from 34 to 30% to get navigation items closer*/
    display: inline-block;
}

.footerContainer {
    display: flex;
    justify-content: space-between;
}
/*---------------------------------------------------------------------------Grid Footer---------------------------------------------------------------------------*/
.GridFooter {
    width: 100%;
}

.GridFooter td {
    padding: 0px;
}


/* Girelli 27/11/2014: per distanziare il '+' della navigazione grid */
.GridFooter .recordAddCell {
    padding: 0 5px 0 0;
    /* vertical-align: top; */
}

/* Griglia in FullScreen, nascondo barra bottoni caricata dal Reload (per mostrare solo quella in position fixed)  */
.fullScreen .GridFooter {
    display: none;
}
/* Girelli 02/12/2014: in fullscreen aggiungo bordo a destra */
body > .GridFooter .recordAddCell {
    padding: 1px 26px 0 10px;
}
/* Griglia in FullScreen, nascondo alcuni elementi non necessari del footer della Grid */
body > .GridFooter .pageNavigatorCell {
    visibility: hidden;
}

/* Girelli 02/12/2014: barra bottoni in full screen sempre visibile in basso nella pagina */
body > .GridFooter {
    position: fixed;
    bottom: 0px;
    background: #fff;
    z-index: 1800;
}

body > .GridFooter > tfoot > tr {
    height: 34px;
    padding-top: 2px;
}

/*---------------------------------------------------------------------------Grid Cell and Footer End---------------------------------------------------------------------------*/



/*Titolo della Pagina*/
.PaginaTitolo {
    FONT-SIZE: 30px;
    /*PERSONALIZE 1*/
    FONT-FAMILY: Raleway, Arial, Verdana;
    /* Girelli 31/8/2016: tolto lowercase ai titoli (esclusa la prima lettera) */
    font-weight: 500;
    color: #1d1d1d;
}
    /* Girelli 12/5/2015: Maiuscola solo la prima lettera del titolo */
    .PaginaTitolo:first-letter {
        text-transform: uppercase;
    }
/* Girelli 19/5/2015: su span ci vuole display block, altrimenti non funziona l'uppercase su first-letter */
span.PaginaTitolo {
    display: block;
    margin-left:3px;
}
    /* Mazzola 26/5/2015: non tocca le maiuscole per il nome utente nel titolo del timesheet */
    span.PaginaTitolo > a {
        text-transform: none;
    }

/*Pannello dei Checkbox nei parametri di ricerca*/
.PanelCell {
    padding: 2px 3px 0 10px;
    FONT-WEIGHT: bold;
    text-align: left;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    border: 1px Solid #BBB;
    background: #FFF;
    white-space: nowrap; /* Per far rimanere la descriz. di fianco al checkbox */
    height: 20px;
    -webkit-transition: background .1s ease-out;
    transition: background .1s ease-out;
    vertical-align: middle;
}

    .PanelCell:hover {
        background: #E3E3E3;
    }
    /* Girelli 03/06/2013: uniformato link in Panel sia di Search che di dettaglio (stesso font size e colore) */
    .PanelCell a {
        /* Per allargare la descriz. del checbox a tutta la td */
        width: 94%;
        display: inline-block;
        margin-left: 2px;
        font-size: 13px;
        /*mattiapaganini 31032023 aggiunto cursore pointer*/
        cursor: pointer;
    }

        .PanelCell a:hover {
            color: initial;
        }

    .PanelCell input {
        margin: -3px 0 0 0;
    }

.PanelTable {
    padding-bottom: 4px;
    border: none;
    text-align: center;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    border-spacing: 2px;
    width: 100%;
}

/* Stile link principali in MenuFolder */
.ParagrafoTitolo {
    FONT-WEIGHT: bold;
    FONT-SIZE: 16px;
    /*FONT-FAMILY: Raleway, Arial, Verdana;*/
    TEXT-DECORATION: none;
}

/* Girelli 16/10/2020: di default largo 99%, specie su skip standard class */
#ParameterTable {
    width: 99%;
    margin-top: 4px;
}

    #ParameterTable tr {
        height: 28px;
    }

    #ParameterTable td {
         vertical-align:middle; 
    }

.DetailHeaderTable {
    width: 100%;
    /* Mazzola 28/10/2014: margine della tabella del title dai bottoni di print in alto a destra ... */
    margin-top: 6px;
}

/*--------------------------------------------------------------------------joeyelrassi 16072021 recordset navigation start--------------------------------------------------------------------------*/
/* Girelli 18/4/2014: convertito in div */
.RecordsetNavigation {
    color: #376696;
    font-size: 10px;
    padding: 4px 15px 4px 10px;
    background-color: #F0F0F0;
    border: #dcdcdc 1px solid;
    /*font-family: Arial, Verdana;*/
    -webkit-border-radius: 5px;
    border-radius: 5px;
    float: right;
    margin-left: 10px;
    opacity: 0.7;
    display: inline-flex;
    align-items: center;
    height: 28px
}

    .RecordsetNavigation input,
    .RecordsetNavigation label,
    .RecordsetNavigation img {
        float: left;
        position: relative;
    }

    /*joeyelrassi 16072021 new layout fix for alignment*/
    .RecordsetNavigation input {
        margin: 0px 10px 0 0;
    }

    /*joeyelrassi 16072021 new layout fix for alignment*/
    .RecordsetNavigation img {
        margin: 0 0 0 5px;
    }

    /*joeyelrassi 16072021 new layout fix for alignment*/
    .RecordsetNavigation i {
        margin: 0 0 0 3px;
        font-size:15px;
    }
    
    /*joeyelrassi 16072021 new layout fix for alignment*/
    .RecordsetNavigation #HistoryNav {
        display:inline-flex;
        align-items:center;
        position:relative;
        top:1px;
    }


    /*joeyelrassi 16072021 new layout fix for alignment*/
    .RecordsetNavigation label {
        margin: 0px 5px 0 5px;
    }

#RecordsetNavigationTable TD.Label {
    white-space: nowrap;
    height:18px;
}

/*--------------------------------------------------------------------------joeyelrassi 16072021 recordset navigation End--------------------------------------------------------------------------*/

.ResultTable {
    font-weight: normal;
    font-size: 13px;
    /*font-family: Arial, Verdana;*/
    /* white-space: nowrap; */ /* Girelli 28/7/2015: non serve piu', usiamo nowrap in linea se serve, oppure andiamo a capo */
    border-collapse: collapse;
}
    /* Girelli 02/4/2014: aggiunta centratura in verticale testi, nel resultset navigation */
    /* nabilrafka 24112023 exclude .footerContainer*/
    .ResultTable TR:not(.footerContainer) {
        height: 28px;
        vertical-align: middle;
    }
/* Girelli 10/11/2014: stile per distanziare leggermente le griglie da altri elementi affiancati */
/*joeyelrassi 21072021 changed margin to 5 instead of 6 otherwise on zoom border left is not seen*/
.grid {
    /*margin: 0 5px;*/
    float: left; /* per evitare che tabelle larghe escano dal loro div container */
    /*width: 98.8%;*/ /* larghezza default, bypassata eventualmente da info in configurazione */
    /*joeyelrassi 01092021 updated to increase width*/
    width:100%;
}

.grid .percCirlceContainer {
    align-items: center;
    justify-content: center;
}
/*nabilrafka 02042024 padding to distance grids from each others in the same section */
.ui-tabs .FieldValue ~ .FieldValue .grid {
    padding-left: 10px;
}

/* Girelli 21/5/2015: stile per allineamento orizzontale TextArea (lo applico solo in Griglia e non in Section) */
.grid .ResultTable .divTextarea {
    display: inline-flex;
}



.recordAddCell {
    width: 25px;
}


.ResultFooterButtonLeftEnd > IMG {
    height: 17px;
    width: 17px;
    background-image: url(../Disegni/ResultFooterButton.png);
    background-position: 0px 0px;
}

.ResultFooterButtonLeftEnd:hover > IMG {
    background-position: 0px 17px;
}

.ResultFooterButtonLeft > IMG {
    height: 17px;
    width: 17px;
    background-image: url(../Disegni/ResultFooterButton.png);
    background-position: 51px 0px;
}

.ResultFooterButtonLeft:hover > IMG {
    background-position: 51px 17px;
}

.ResultFooterButtonRight > IMG {
    height: 17px;
    width: 17px;
    background-image: url(../Disegni/ResultFooterButton.png);
    background-position: 34px 0px;
}
.ResultFooterButtonRight:hover > IMG {
    background-position: 34px 17px;
}

.ResultFooterButtonRightEnd > IMG {
    height: 17px;
    width: 17px;
    background-image: url(../Disegni/ResultFooterButton.png);
    background-position: 17px 0px;
}


.ResultFooterButtonRightEnd:hover > IMG {
    background-position: 17px 17px;
}

.RicercaRiga1 {
    height: 18px;
    background-color: white;
    transition: background-color .1s ease-out;
}

    .RicercaRiga1:hover {
        background-color: #dedede;
    }

.RicercaRiga2 {
    height: 18px;
    background-color: rgb(242,242,242);
    transition: background-color .1s ease-out;
}

    .RicercaRiga2:hover {
        background-color: #dedede;
    }


/* Tolgo bordo sinistro a intestazioni di griglie */
TABLE.ResultTable > THEAD > TR > TD {
    border-left: none;
}

/* Mazzola 17/01/2014: Bordi separatori laterali delle liste griglie , welcome e panel */
TABLE.ResultTable > THEAD > TR > TD,
TABLE.ResultTable > THEAD > TR > TH {
    padding-left: 2px;
    padding-right: 2px;
    /*17032022 latest layout fix*/
    border-right: 1px solid #DDD;
/*    border-bottom: 1px solid #8c8b8b;
    border-top: 1px solid #8c8b8b;*/
}
TABLE.ResultTable > THEAD > TR > TD:first-child, TABLE.ResultTable > THEAD > TR > TH:first-child {
    /*border-left: 1px solid #8c8b8b;*/
}
TABLE.ResultTable > THEAD > TR > TD:last-child, TABLE.ResultTable > THEAD > TR > TH:last-child {
    /*border-right: 1px solid #8c8b8b;*/
    border-right:0px;
}

    TABLE.ResultTable > THEAD > TR > TD > DIV {
        margin-top: 2px
    }

TABLE.ResultTable TD {
    text-decoration: none;
    /* white-space: nowrap; */
}



@media (max-width:550px) { /* Su smartphone mando a capo Annulla Filtri */
    .SearchParam .divButton, div.SearchPageParamContainer > .SearchParam .divButton, .PageRemark:not(:empty) ~ div.DetailPageParamContainer > .SearchParam .divButton {
        float: none;
    }
    /*joeyelrassi 26052021 on small screens left footer icons in tables should stack*/
    /*.footerIconsLeft {
        display: inline-block;
    }*/


/*joeyelrassi 15062021 adjust footer on smaller screens*/
    body footer.inner{
        padding-left:0px;
    }

    footer.inner .footer-inner .pull-left {
        position: relative;
        left: -25px;
    }
}
.pull-left {
    display: flex;
    align-items: center;
    flex-direction: row;
}


.SearchCellField {
    padding: 0px;
    vertical-align: top;
    text-align: left;
}

.SearchCellLabel {
    padding: 0px;
    padding-right: 7px;
    width: 1%;
    font-weight: bold;
    font-size: 13px;
    overflow: visible;
    text-transform: none;
    WHITE-SPACE: nowrap;
    text-align: right;
    vertical-align: top;
    color: rgb(67,94,120);
}

.SearchCellOperator {
    padding-top: 0px;
    padding-bottom: 0px;
    padding-right: 10px;
    width: 15px;
    text-align: right;
    vertical-align: top;
}

.searchFooterCell {
    padding: 0px 2px 0px 2px;
}

.SearchRow {
    height: 20px;
}

.SearchValues {
    /*font-family: Arial, Verdana;*/
    white-space: nowrap;
    float: left;
    padding-left: 0px;
    height:28px;
    display:flex;
    align-items:center;
}
.SearchValues .HLine {
    width: 220px;
}
.SearchValues2 {
    /*font-family: Arial, Verdana;*/
    white-space: nowrap;
    float: left;
    width: auto;
    height: 19px;
}

/* Girelli 3/6/2015: fix allineamento verticale delle input e delle Select, specie per le Prompt */
.OperatorLabel div.select2 {
    vertical-align: top;
}

div.NBR, div.NBR > .ui-spinner {
    font-size: 13px;
}



#ParameterTable TR.HorizontalRuler {
    height: 16px;
    vertical-align: middle;
}

#ParameterTable TD.HorizontalRuler {
    height: 16px;
}

DIV.HorizontalRuler {
    border-top: 1px solid #DCDCDC;
}

/* Girelli 24/06/2014: rimosso, per migliore layout nella asp di configurazione
/* TABLE TD .SectionFolder { padding: 0; } */
TABLE .SectionFolder {
    border-spacing: 0
}

.SectionFolderPosFix, .fc_SectionFolderPosFix {
    padding: 2px;
    border: #F0F0F0 1px solid;
    background-color: #e8f3f4;
    position: relative;
}

/*Folder*/
.PrintFolder, .fc_PrintFolder {
    /*PERSONALIZE 3*/
    PADDING: 2px;
    /*PERSONALIZE 2*/
    margin-top: -1px
}

    .PrintFolder TD, .fc_PrintFolder TD {
        font-size: 14px
    }

@media screen {
    .dtPanel {
        display: block
    }
}

.SectionLoginFolder {
    PADDING: 4px;
    margin-top: -1px;
    box-shadow: 3px 3px 4px #888;
    -webkit-box-shadow: 3px 3px 4px #888;
    -moz-box-shadow: 3px 3px 4px #888;
    /* Girelli 29/10/2014: rimosso stile background con gradiente: usiamo bianco */
    background: #fff;
    /* VERTICAL GRADIENT BACKGROUND-COLOR + SHADOW ON BORDER (IE) */
    /*    filter: progid:DXImageTransform.Microsoft.Shadow(color='#888888', Direction=135, Strength=4) progid:DXImageTransform.Microsoft.gradient( startColorstr='#FBFBFB', endColorstr='#F0F0F0',GradientType=0 );*/
    border: 1px solid #ddd;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

SPAN.FieldValue {
    font-size: 13px;
    color: #1d1d1d;
}

SPAN.Label {
    font-weight: bold !important;
    font-size: 13px !important;
    overflow: visible !important;
    text-transform: none !important;
    white-space: nowrap !important;
    color: #1d1d1d;
    position: relative;
}

/*Label campi folder*/
TD.Label {
    text-align: left;
    /* Girelli 10/9/2015: sostituito 1px con 1% per migliore posizionamento sia in Search che Detail */
    width: 1%;
    padding-left: 5px;
    height: 28px;
    padding-right: 5px;
    vertical-align: top;
}

/*joeyelrassi 2024 newest layout fix*/
TD.FieldValue {
    text-align: left;
    white-space: normal; /*nowrap*/
    color: #484848;
}
    /* Spaziatura bottone all'interno di un Field di una Section */
    td.FieldValue button {
        margin-bottom: 2px;
    }
/* Mazzola 22/1/2014: per allineare top dei td delle celle FieldValue */
.FieldValueCell {
    vertical-align: top;
}

.FieldRemark {
    padding-left: 3px;
    font-size: 11px;
}

.FieldValueEdit {
    /* Girelli 17/5/2016: Rimosso per responsive */
    /* white-space: nowrap; */
    height:28px;
    vertical-align:top;
    /*joeyelrassi 01032023 commented part below -- fix ruins sections layout*/
    /*display: inline;*/
}

td.FieldValueEdit:empty {
    height: 0px;
}
/* Girelli 28/04/2014: allineamento radio button e spaziatura label nei FieldValue di dettaglio */
.FieldValueEdit input[type=radio] {
    vertical-align: middle;
    margin: 1px 0;
}

.FieldValueEdit label {
    vertical-align: middle;
    margin: 0 25px 0 3px; /* Girelli 16/06/2014: aumentato margine destro per distanziare colonne */
}
/* Girelli 13/05/2014: margine migliorato sui bottoni jQuery */
.FieldValueEdit input[type=button] {
    margin: 0 0 5px 0;
}
/* Girelli 28/10/2014: spaziature bottoni in section */
.FieldValueEdit button {
    margin: 0 0 2px 0;
}
/* Girelli 23/06/2014: margini della textarea corretti (altrimenti è disallineata con i dati css di textarea{}  */
.FieldValueEdit TEXTAREA, .ListCellGroup TEXTAREA {
    margin-top: 0px;
    margin-bottom: 0px;
    padding-right: 11px; /* Girelli 26/08/2014: ridotto a 11 per evitare che la X vada a capo in griglia */
    padding-left: 4px;
    white-space: pre-wrap; /* per IE */
    border-radius: 6px !important;
}

.FieldValueEdit input[type="text"][disabled] {
    height:18px;
}

.divTA {
    line-height: 1;
}
.divTA > .FieldRemark {
    padding-bottom: 6px;
}
.divTA > .FieldRemark:empty {
    padding-bottom: inherit;
}


/* Girelli 29/92015: stili solo per IE10+, per spaziatura TextArea TA */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    /* IE10+ CSS styles go here */
    .FieldValueEdit TEXTAREA, .ListCellGroup TEXTAREA {
        margin-top: 0px;
        margin-bottom: 0px;
    }
}

/* Girelli 28/9/2015: colore di sfondo TA ReadOnly, usando una classe */
textarea.ta_read {
    background: #ebebeb;
    cursor: inherit;
    resize: none;
    min-height: 100px;
}

pre.DescMainPre {
    font-family: Roboto, sans-serif;
    font-size: 13px;
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0;
}

INPUT[type=checkbox] {
    vertical-align: middle;
}
/* Girelli 02/4/2014: aggiunto nowrap per ridurre spazio tra barra dei tab (Section folder) e contenuto della Section */
.TDSectionFolderNoWidth, .fc_TDSectionFolderNoWidth {
    width: 98%;
    white-space: nowrap;
}

    .TDSectionFolderNoWidth TD, .fc_TDSectionFolderNoWidth TD {
        width: 0%;
    }
    /*joeyelrassi 18032022*/
    .TDSectionFolderNoWidth TD.Label, .fc_TDSectionFolderNoWidth TD.Label {
        text-align:right;
        vertical-align:middle;
    }
    .TDSectionFolderNoWidth TD.FieldValueEdit, .fc_TDSectionFolderNoWidth TD.FieldValueEdit {
        vertical-align:middle;
    }

    .TDSectionFolderNoWidth INPUT[type="button"], .TDSectionFolderNoWidth BUTTON, .fc_TDSectionFolderNoWidth INPUT[type="button"], .fc_TDSectionFolderNoWidth BUTTON {
        width: 100%;
        padding: 5px;
        border-width: 1px;
        color: #000;
        background: #fff;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        border-bottom-right-radius: 0px;
        border-bottom-left-radius: 0px;
        -webkit-border-top-left-radius: 10px;
        -webkit-border-top-right-radius: 10px;
        -webkit-border-bottom-right-radius: 0px;
        -webkit-border-bottom-left-radius: 0px;
    }

.Timer {
    font-weight: bold;
    font-size: 14px;
    color: #009900;
    /*font-family: Arial, Verdana;*/
    text-decoration: none;
}

.TimezoneSummary {
    position: absolute;
    width: 176px;
    text-align: center;
    /*font-family: Arial, Verdana;*/
    font-size: small;
    font-style: italic;
}

.TreeNodeIcon {
    border: none;
    height: 10px;
    width: 10px;
    padding-bottom: 4px;
    padding-left: 3px;
}

.TSFestivo {
    FONT-SIZE: 13px;
    /*FONT-FAMILY: Arial, Verdana;*/
    /* Mazzola 14/10/2014 : important perche' altrimenti c'e' override del nuovo layout */
    BACKGROUND-COLOR: red !important;
}

.TSFestivoRead {
    FONT-SIZE: 13px;
    /*FONT-FAMILY: Arial, Verdana;*/
    BACKGROUND-COLOR: lightcoral !important;
}

.TSRead {
    FONT-SIZE: 13px;
    /*FONT-FAMILY: Arial, Verdana;*/
    BACKGROUND-COLOR: silver
}

.TSback {
    BACKGROUND-COLOR: rgba(173,216,230, 0.17);
}

.txtNumbers {
    width: 22px;
}

#examplecontainer {
    padding: 10px;
}

#ResultFooterTable {
    width: 100%;
    margin-bottom:15px;
}
    /* Girelli 18/07/2014: allineamento verticali bottoni in footer table */
/*    #ResultFooterTable td {
        vertical-align: middle;
    }*/

.ui-datepicker {
    z-index: 2500 !important;
}
/*******************************************/
/************* DEBUG STYLE *****************/
/*******************************************/
/* Stili di debug delle tracce (Query etc) e dei link alla configurazione degli oggetti  */
.debugTrace {
    font-size: xx-small;
    display: none;
    color: #585858;
}
/* Girelli 10/11/2014: Aggiunto stile Bold ai link di SQL nelle finestre di Error */
.debugTrace a, .errorData .sql a {
    font-weight: bold;
    font-size: 9px;
}
/* Stile per limitare altezza tracce SQL e espanderle con bottone + */
.debugTrace.sql, .debugTrace {
        max-height: 50px;
        overflow: hidden;
}
button.sqlExpand {
    border: 1px solid silver;
    border-radius: 8px;
    position: relative;
    margin: 0 5px 0 0;
    font-size: 10px;
}

.debugTrace#environment {
    float: left;
    font-size: 12px;
    display: flex;
    flex-direction: row;
    height: 15px;
}

/* Girelli 22/10/2014: aggiunto ExceptionTrace per nascondere le eccezioni .Net */
.debugLink, .ExceptionTrace {
    display: none;
    clear: both; /* per evitare di disperdersi in caso di TabGroup flottanti */
}

    .debugLink a {
        margin: 0px;
        padding: 0px;
        height: 13px;
    }
/* Girelli 29/12/2014: tolto padding per risparmiare spazio */
.hljs {
    padding: 0;
}
/* Girelli 01/12/2014: gli errori in popup devono essere SEMPRE visibili */
.ui-dialog .ExceptionTrace {
    display: block;
}

.configComponentLnk, .configComponentLnk:visited {
    /*font-family: Arial, Verdana;*/
    font-size: xx-small;
    font-weight: bold;
    color: #0601b1;
}

.configSectionLnk, .configSectionLnk:visited, .configSectionLnk:focus {
    /*font-family: Arial, Verdana;*/
    font-size: xx-small;
    font-weight: bold;
    color: #cc0099;
}

.configGridLnk, .configGridLnk:visited, a.configGridLnk {
    /*font-family: Arial, Verdana;*/
    font-size: xx-small;
    font-weight: bold;
    color: #008080;
}

.configPromptLnk, .configPromptLnk:visited {
    font-size: xx-small;
    font-weight: bold;
    color: #008080;
}

a.configChartLnk, .FieldValue a.configChartLnk {
    font-size: 9px;
    font-weight: bold;
    color: #11aa11;
}

    a.configChartLnk:hover {
        color: Red;
    }

a.configPromptLnk {
    color: Maroon;
}

    a.configPromptLnk:hover {
        color: Red;
    }
/* Girelli: 08/09/2014: stile dei link di configurazione in SectionPreview */
a.configLnk {
    /*font-family: Arial, Verdana;*/
    font-size: xx-small;
    font-weight: bold;
    color: #0601b1;
}

    a.configLnk:hover {
        color: Red;
    }
/* Eliminati stili YUI  */
.shadow {
    -moz-box-shadow: 3px 3px 4px #888;
    -webkit-box-shadow: 3px 3px 4px #888;
    box-shadow: 3px 3px 4px #888;
}
/*
    PLEASE NOTE: It is necessary to set the "overflow" property of
    the underlay element to "visible" in order for the 
    scrollbars on the body of a Resizable Panel instance to be 
    visible.  By default the "overflow" property of the underlay 
    element is set to "auto" when a Panel is made visible on
    Gecko for Mac OS X to prevent scrollbars from poking through
    it on that browser + platform combintation.  For more 
    information on this issue, read the comments in the 
    "container-core.css" file.
*/
#resizablepanel_c.show-scrollbars .underlay {
    overflow: visible;
}
/****************************************************************
     FIELD FORMAT CLASS - Start
*****************************************************************/
/* Stile celle di Piano Ferie */
.ItemRequest {
    background-color: #FF0000;
    color: White !important;
    /*font-weight: bold;*/
}

.ItemAccept {
    background-color: #008000;
    color: White !important;
    /*font-weight: bold;*/
}

.ItemReject {
    background-color: #b0b0b0;
    color: White !important;
    /*font-weight: bold;*/
}

.TSAbsenceOther {
    background-color: Blue;
    color: White !important;
    /*font-weight: bold;*/
}

.ItemRequest > A {
    color: Blue !important;
    font-weight: bold;
}

.ItemAccept > A {
    color: #00FF00 !important;
    font-weight: bold;
}

.ItemReject > A {
    color: Gray !important;
    font-weight: bold;
    text-decoration: line-through;
}

.TSDay, .fc_TSDay {
    min-width: 25px !important;
    text-align: center;
}

.TSAbsenceOther > A {
    font-weight: bold;
}
/* Mazzola 18/1/2015: fcc per bold */
.fc_bold {
    font-weight: bold;
}
/* Girelli 30/12/2015: colori di background in tabella */
.fc_bg_White:not(.FieldValueEdit), .fc_bg_White *:not(span, select, input, .ui-spinner-button, .select2-choice, .select2-icon) {
    background-color: White;
}

.fc_bg_Yellow:not(.FieldValueEdit), .fc_bg_Yellow *:not(span, select, input, .ui-spinner-button, .select2-choice, .select2-icon) {
    background-color: Yellow;
}

.fc_bg_Gray:not(.FieldValueEdit), .fc_bg_Gray *:not(span, select, input, .ui-spinner-button, .select2-choice, .select2-icon) {
    background-color: #A0A0A0;
}

.fc_bg_Orange:not(.FieldValueEdit), .fc_bg_Orange *:not(span, select, input, .ui-spinner-button, .select2-choice, .select2-icon) {
    background-color: Orange;
}

.fc_bg_Red:not(.FieldValueEdit), .fc_bg_Red *:not(span, select, input, .ui-spinner-button, .select2-choice, .select2-icon) {
    background-color: Red;
}

.fc_bg_Green:not(.FieldValueEdit), .fc_bg_Green *:not(span, select, input, .ui-spinner-button, .select2-choice, .select2-icon) {
    background-color: Green;
}

.fc_bg_Blue:not(.FieldValueEdit), .fc_bg_Blue *:not(span, select, input, .ui-spinner-button, .select2-choice, .select2-icon) {
    background-color: Blue;
}

.fc_bg_Brown:not(.FieldValueEdit), .fc_bg_Brown *:not(span, select, input, .ui-spinner-button, .select2-choice, .select2-icon) {
    background-color: Brown;
}

.fc_bg_Yellow_light:not(.FieldValueEdit), .fc_bg_Yellow_light *:not(span, select, input, .ui-spinner-button, .select2-choice, .select2-icon) {
    background-color: LightYellow;
}

.fc_bg_Gray_light:not(.FieldValueEdit), .fc_bg_Gray_light *:not(span, select, input, .ui-spinner-button, .select2-choice, .select2-icon) {
    background-color: #E0E0E0;
}

.fc_bg_Orange_light:not(.FieldValueEdit), .fc_bg_Orange_light *:not(span, select, input, .ui-spinner-button, .select2-choice, .select2-icon) {
    background-color: #FFCC7F;
}

.fc_bg_Red_light:not(.FieldValueEdit), .fc_bg_Red_light *:not(span, select, input, .ui-spinner-button, .select2-choice, .select2-icon) {
    background-color: #FF8181;
}
/*joeyelrassi 05022021 added empty circle with red border*/
.fc_bg_Red_light_empty {
    background-color: white;
    border: 1px solid #FF8181;
}

.fc_bg_Red_pale_light:not(.FieldValueEdit), .fc_bg_Red_pale_light *:not(span, select, input, .ui-spinner-button, .select2-choice, .select2-icon) {
    background-color: #FFB0B0;
}

.fc_bg_Green_light:not(.FieldValueEdit), .fc_bg_Green_light *:not(span, select, input, .ui-spinner-button, .select2-choice, .select2-icon) {
    background-color: LightGreen;
}

.fc_bg_Green_pale_light:not(.FieldValueEdit), .fc_bg_Green_pale_light *:not(span, select, input, .ui-spinner-button, .select2-choice, .select2-icon) {
    background-color: #B0FFB0;
}

.fc_bg_Blue_light:not(.FieldValueEdit), .fc_bg_Blue_light *:not(span, select, input, .ui-spinner-button, .select2-choice, .select2-icon) {
    background-color: LightBlue;
}

/*joeyelrassi 26042021 for calendar legend*/
.fc_bg_Steel_Blue_Light:not(.FieldValueEdit), .fc_bg_Steel_Blue_Light *:not(span, select, input, .ui-spinner-button, .select2-choice, .select2-icon) {
    background-color: lightsteelblue;
}

.fc_bg_Brown_light:not(.FieldValueEdit), .fc_bg_Brown_light *:not(span, select, input, .ui-spinner-button, .select2-choice, .select2-icon) {
    background-color: #DAB083;
}
/* Colori testo (bianco o nero) in funzione del colore di sfondo */
.fc_bg_White, .fc_bg_Yellow, .fc_bg_Gray, .fc_bg_Orange, .fc_bg_Red, .fc_bg_Green, .fc_bg_Blue, .fc_bg_Brown, 
.fc_bg_White span, .fc_bg_Yellow span, .fc_bg_Gray span, .fc_bg_Orange span, .fc_bg_Red span, .fc_bg_Green span, .fc_bg_Blue span, .fc_bg_Brown span {
    color: White !important;
}

.fc_bg_Yellow_light, .fc_bg_Gray_light, .fc_bg_Orange_light, .fc_bg_Red_light, .fc_bg_Green_light, .fc_bg_Blue_light, .fc_bg_Brown_light,
.fc_bg_Yellow_light span, .fc_bg_Gray_light span, .fc_bg_Orange_light span, .fc_bg_Red_light span, .fc_bg_Red_pale_light span, .fc_bg_Green_light span, .fc_bg_Green_pale_light span,
.fc_bg_Blue_light span, .fc_bg_Brown_light span {
    color: Black !important;
}
/* Girelli 10/4/2018: Colori del testo, per FCC */
.fc_Blue, .fc_Blue span, .fc_Blue textarea, .fc_Blue input, .fc_Blue i.nlbi, .fc_Blue i.chkRead {
    color: Blue !important;
}

.fc_Blue_light, .fc_Blue_light span, .fc_Blue_light textarea, .fc_Blue_light input, .fc_Blue_light i.nlbi, .fc_Blue_light i.chkRead {
    color: lightblue !important;
}

.fc_Green, .fc_Green span, .fc_Green textarea, .fc_Green input, .fc_Green i.nlbi, .fc_Green i.chkRead {
    color: green !important;
}

.fc_Green_light, .fc_Green_light span, .fc_Green_light textarea, .fc_Green_light input, .fc_Green_light i.nlbi, .fc_Green_light i.chkRead {
    color: LightGreen !important;
}

.fc_Red, .fc_Red span, .fc_Red textarea, .fc_Red input, .fc_Red i.nlbi, .fc_Red i.chkRead {
    color: red !important;
}

.fc_Orange, .fc_Orange span, .fc_Orange textarea, .fc_Orange input, .fc_Orange i.nlbi, .fc_Orange i.chkRead {
    color: orange !important;
}

.fc_Brown, .fc_Brown span, .fc_Brown textarea, .fc_Brown input, .fc_Brown i.nlbi, .fc_Brown i.chkRead {
    color: brown !important;
}

.fc_White, .fc_White span, .fc_White textarea, .fc_White input, .fc_White i.nlbi, .fc_White i.chkRead {
    color: white !important;
}

.fc_Gray, .fc_Gray span, .fc_Gray textarea, .fc_Gray input, .fc_Gray i.nlbi, .fc_Gray i.chkRead {
    color: #A0A0A0 !important;
}
.fc_Line_Through {
    text-decoration: line-through !important;
}
.fc_ListRowInactive {
    opacity: 0.5;
    /* pointer-events: none; */  /* Girelli 20/2/2024 do not disable, else it is not possible to enable a row */
}

/* Stile celle di status con DESC_REL */
.DESC_REL_RICH span.FieldValue {
    border-radius: 6px;
    padding: 2px 8px;
}
.DESC_REL_RICH span.FieldValue > i {
    font-size: 13px;
    float: left;
    padding-right: 4px;
}
.ResultTable .DESC_REL_RICH span.FieldValue {
    margin: 6px 2px;
}

/* Girelli 23/1/2024: Trick to apply the correct icon font without the need of class zmdi or fa */
i[class^="zmdi-"], i[class^="select2-icon zmdi-"] {
    font: 15px/1 'Material-Design-Iconic-Font';
}
i[class^="fa-"], i[class^="select2-icon fa-"] {
    font: 13px/1 FontAwesome;
}
div.select2-container i[class*="zmdi-"] {
    padding: 4px 0 0 0;
}
div.select2-container i[class*="fa-"] {
    padding: 5px 0 0 0;
}


/****************************************************************
     FIELD FORMAT CLASS - End
*****************************************************************/
/* Girelli 12/05/2014: Stile della tabella di errore in debug, mostrata nella popup Error */
table.errorData {
    border-top: 1px solid #CCC;
    border-left: 1px solid #CCC;
    border-right: 0px;
    border-bottom: 0px;
}
table.errorData td {
    border-right: 1px solid #CCC;
    border-bottom: 1px solid #CCC;
    border-top: 0px;
    border-left: 0px;
    padding: 3px;
}
table.errorData .sqlExpand { display:none; }
/* Stile DESC_MAIN */
div.DESC_MAIN {
    display: inline-flex;
    width: 100%; /*nabilrafka 20032024 so that it takes the whole width to place the section preview icon on the right in grid cell*/
}
[class*="fc_bg_"] > div.DESC_MAIN {
    padding-left: 4px;
    padding-right: 4px;
    width: unset; /*nabilrafka 20032024 to override the 100% width rule*/
}

.dataTable div.DESC_MAIN > span.FieldValue {
    width: 100%;
}

/* Icona 'i' di Section Preview */
.SectionPreviewIcon {
    font-size: 20px;
    display: inline-flex;
    vertical-align: middle;
    align-items: center;
    color: #ACACAC;
    margin: 0 2px 0 2px;
    cursor: pointer;
}
/*joeyelrassi 03082021 for section preview icons without class*/
.sp i{
    cursor:pointer
}
/* Icona SectionPreview in Section Detail */
.FieldValueEdit .SectionPreviewIcon {
    float: left;
}
/*joeyelrassi 18052023 commented to see effect (ruins orgchart modals)*/
/*.FieldValueEdit .FieldValue {
    float: left;*/ /* Girelli 28/05/2014: fix per allineare FieldValue e SectionPreviewIcon su stessa riga */
/*}*/

td.FieldValue .SectionPreviewIcon {
    display: inline-block; /* Girelli 11/06/2014: fix per allineare FieldValue e SectionPreviewIcon su stessa riga */
    position:relative;
    top:-3px;
}
/* Testo in DESC_MAIN e altri Field in griglia */
table.dataTable.nowrap td, table.dataTable td div > span.FieldValue {
    white-space: normal;
}
/* WordWrap di grid o di grid field */
table.dataTable td.nowrap, table.dataTable td.nowrap div > span.FieldValue {
    white-space: nowrap;
}

.PromptDistanceButton /* , #EMPL_ALL_RUB_ResetFilters */ {
    margin-right: 10px;
}

.ConfigurationContextIcon {
    border: none;
    padding-left: 2px;
}
/* Girelli 03/4/2014: Effetto zoom su foto miniatura */
.PictureMin, .PictureMinCircle {
    -webkit-transition: .1s;
    transition: .1s;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    border: 0px;
    -webkit-backface-visibility: hidden; /* Girelli 08/04/2014: Per evitare flicker durante lo zoom su alcuni pc */
    backface-visibility: hidden;
    position: relative;
    max-height: 40px;
    max-width: 40px;
}

/*joeyelrassi il div che contiene le foto rotonde piccole*/
div.PicFSMiniCircle {
    height: 40px;
    width: 40px;
    border-radius: 50%;
    overflow: hidden;
    background-color: white;
    text-align: center;
}
    div.PicFSMiniCircle:hover {
        -webkit-transform: scale(1.2,1.2); /* 1.4 e' troppo */
        -ms-transform: scale(1.2,1.2);
        transform: scale(1.2,1.2);
        box-shadow: #888 2px 2px 2px 0;
        z-index: 2;
    }


/*joeyelrassi il div che contiene le foto rotonde grande*/
div.PicFSCircle {
    border-radius: 50%;
    overflow: hidden;
    background-color: white;
    text-align: center;
    -webkit-transition: .1s;
    transition: .1s;
    max-height: 200px;
    -webkit-backface-visibility: hidden; /* Girelli 08/04/2014: Per evitare flicker durante lo zoom su alcuni pc */
    backface-visibility: hidden;
    position: relative;
    margin: 2px 0;
}
.SectionFolder div.PicFSCircle:hover {
    -webkit-transform: scale(1.4,1.4);
    transform: scale(1.4,1.4);
    box-shadow: #888 2px 2px 2px 0;
    z-index: 2;
}


    #pageslide-left .user-profile img.PictureMin { /*joeyelrassi override default in their themes.css to avoid putting important*/
        border-radius: 50%;
    }

    .PictureMin:hover {
        -webkit-transform: scale(1.2,1.2); 
        -ms-transform: scale(1.2,1.2);
        transform: scale(1.2,1.2);
        box-shadow: #888 2px 2px 2px 0;
        z-index: 2;
    }
/* Girelli 25/11/2016: stile per PIC_FS_MINI */
.PictureFsMini {
    -webkit-border-radius: 3px;
    border-radius: 3px;
    border: 0px;
    margin-right: 4px;
    position: relative;
    cursor: pointer;
    height: 40px;
}
.PictureFsMini:hover {
    -webkit-transform: scale(1.2,1.2); /* 1.4 e' troppo */
    -ms-transform: scale(1.2,1.2);
    transform: scale(1.2,1.2);
    box-shadow: #888 2px 2px 2px 0;
    z-index: 2;
}

/* Girelli 04/4/2014: Effetto zoom su foto di dettaglio */
.SectionFolder .PictureDetail {
    -webkit-transition: .1s;
    transition: .1s;
    max-height: 200px;
    min-width: 150px;
    -webkit-backface-visibility: hidden; /* Girelli 08/04/2014: Per evitare flicker durante lo zoom su alcuni pc */
    backface-visibility: hidden;
    position: relative;
    margin: 2px 0;
}
.SectionFolder .PictureDetail:hover {
    -webkit-transform: scale(1.4,1.4);
    transform: scale(1.4,1.4);
    box-shadow: #888 2px 2px 2px 0;
    z-index: 2;
}
/* Bordo foto */
img.PictureDetail {
    border: 1px solid #ddd;
    border-radius: 4px;
}
/* Girelli 24/11/2016: layout picture PIC_FS2, senza animazione e con download al click */
.SectionFolder .PictureDetail2 {
    max-height: 225px;
    position: relative;
    margin: 2px 0;
    cursor: pointer;
    /* border: 1px solid #ddd; */
    /*border-radius: 50%*/ /*joeyelrassi 02022021 to make pictures round*/
}

/* Girelli 2/1/2024: bordo arrotondato picture array */
div.PictureArray .PictureDetail2 {
    border-radius: 20%;
    margin: 2px;
}
div.PictureArray span {
    padding-left: 4px;
    padding-right: 4px;
}


/* Box contenitore bottoni Save e History in header */
div.headerButtons {
    position: fixed;
    right: 1.5%;
    z-index: 998;
    top: 40px;
    max-width: 600px;
    transition: right .1s ease-out, top .1s ease-out;
}
/* In Ajax con schermo ampio, porto in basso la pulsantiera */
#ajax-content > div.headerButtons {
    top: 119px;
}
#ajax-content > div.headerButtons.fixedBottom {
    top:calc(100vh - 70px);
    right: calc(50% - 139px);
}
#ajax-content > div.headerButtons.fixedBottom.hidden {
    display:none;

}
/* Bottoni Salva in header */
.headerButtons > span.buttonText {
    float: right;
}
/* Girelli 22/2/2016: applico trasparenza al bottone Save e lo scurisco per ottenere stesso effetto di quello non trasparente */
#container_saveh button {
    opacity: 0.7;
    background-color: #0ca80c;
}

    #container_saveh button:hover {
        background-color: #098709;
        border-color: #075e07;
    }



#container_applyh button {
    opacity: 0.7;
}
    /* Girelli 7/1/2019: bottoni disabilitati vengono schiariti ulteriormente */
    #container_saveh button:disabled, #container_applyh button:disabled {
        opacity: 0.4;
    }



.linkFooter.issue:hover {
    border: 1px Solid white;
}
/* Bordo al mouseover su tasto torna su */
.go-top > i {
    border: 1px Solid transparent;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    padding: 2px;
}

    .go-top > i:hover {
        border: 1px Solid white;
    }
/* Girelli 30/09/2014: icone delle azioni di pagina, in alto a destra nelle page */
li.current-user > a#ecosStudioIcon {
    line-height: normal;
    padding: 0 3px;
    display: none;
    height: 26px;
    font-size: 22px;
    border: 1px solid transparent;
}
.PageCmd > .ecosStudioMenuContainer {
    display: none;
}

/* Girelli 11/04/2014: Icone FooterTable con effetto al mouseover, usate in ResultFooterTable e in GridFooter */
/*joeyelrassi 15012021 cambiato padding a 1px e aggiunto cursor:pointer*/
.FooterTableIcon {
    padding: 1px;
    border: 1px Solid transparent;
    display: inline-flex;
    width: 22px;
    height: 22px;
    margin: 0 1px;
    -webkit-transition: border .1s ease-out;
    -moz-transition: border .1s ease-out;
    transition: border .1s ease-out;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    font-size: 18px; /* per icone awesome */
    color: #787878; /* per icone awesome */
    text-align: center;
    cursor:pointer;
}

.FooterTableIcon:active {
    -webkit-box-shadow: inset 0 1px 6px rgba(0,0,0,0.2);
    -moz-box-shadow: inset 0 1px 6px rgba(0,0,0,0.2);
    box-shadow: inset 0 1px 6px rgba(0,0,0,0.2);
    border: 1px Solid #CCC;
}

.FooterTableIcon.gridReload, .FooterTableIcon.bi-list, .FooterTableIcon.bi-sort-up-alt {
    font-size: 22px;
    align-items: center;
}
.FooterTableIcon.bi-sort-up-alt:before{
    position:relative;
    left:-1px;
}
.FooterTableIcon.gridReload::before, .FooterTableIcon.bi-list::before{
    position:relative;
    left:-2px;
}
.reloadCell .FooterTableIcon.gridReload, .positionCell .FooterTableIcon.bi-list {
    position: relative;
    top: 1px;
}
.FooterTableIcon.gridSave {
    font-size: 20px;
}

.FooterRecordNavigation {
    position: fixed;
    bottom: 6px;
    color: #000;
    background-color: #F0F0F0;
    border: #cccccc 1px solid;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    margin-left: 35%;
    opacity: 0.7;
    -webkit-transition: width .2s;
    transition: opacity .2s;
}

    .FooterRecordNavigation:hover {
        opacity: 1;
    }

#RecordsetNavigationTable {
    padding: 4px 15px 4px 10px;
}

.gridReload {
    color: #449d44;
}
/* Bottoni full screen e ripristino da full screen */
.sizeFullScreen:not(.FooterTableIcon), .sizeRestore:not(.FooterTableIcon) {
    font-size: 15px;
}

.recordAddCell i:not(.FooterTableIcon) {
    font-size: 20px;
    height: 26px;
    display: inline-flex;
    vertical-align: middle;
    align-items: center;
    color:#ACACAC;
}

/* Link aggiunta elemento di Combo o Lens, con popup */
a.recordAddCell {
    padding: 0 0 0 2px;
}

/*.FieldValueEdit a.recordAddCell > i {
    margin: -1.6px 0 0 0;
}*/
/* Girelli 19/02/2015: input filtro ricerca in griglia */
.searchFilter {
    width: 100px;
}

/* Girelli 09/05/2014: Stile della CustomButtonBar in DetailPage */
#PageButton {
    width: 100%;
}

    #PageButton td {
        text-align: center;
        padding-bottom: 20px
    }

    #PageButton button span {
        white-space: nowrap;
    }
/* Girelli 12/05/2014: spaziatura bottoni Prompt, fatti in jQuery */
.promptButton button {
    margin: 0 20px;
}
/* Margine della barra bottoni del Prompt */
.promptButton {
    margin: 0 0 8px 0;
}

/*nabilrafka 28022024 breaks bootstrap popups*/
/*.prompt {
    width: 750px;
}
*/
    .prompt .ResultTable {
        width: 98%;
        border-collapse:separate;
    }
/* Girelli 14/05/2014: stile del Prompt in modo configuration (spostato qui. Si trovava in PMPrompt.js */
.configuration {
    background-color: #ECEDEE;
    padding: 5px;
}

.ui-dialog-buttonset {
    width: 100%;
    text-align: center;
}

.ui-dialog-content.lightGray.ui-widget-content .SearchValues {
    display:table-cell; /*joeyelrassi 18032022 for alignment inside lens popup*/
}
/* Mazzola 28/05/2014 : classi per field type TA_RICH */
.TextRich {
    margin: 0 0 2px 0;
    /*border: 1px solid #D2D7D7;*/
    width: 95%;
}

.cke_textarea_inline {
    min-height: 80px;
    padding: 2px;
    max-height: 200px; /* Questa max-height viene usata da createTaRich() */
    overflow: auto;
}
/* Girelli 22/7/2015: icona che identifica la TA_RICH */
.TextRich > i.fa {
    font-size: 16px;
    float: right;
    margin: 0 -22px 0 0;
    cursor: pointer;
}
/* Girelli 15/12/2023: Link per le traduzioni di TA_RICH */
.TextRich > a.cellLink {
    float: right;
    margin: 22px -22px 0 0;
    cursor: pointer;
}

/* Colore bordo di CKEditor uguale a quello delle Textarea */
.cke.cke_chrome {
    border-color: #D2D7D7;
    border: 1px solid #D2D7D7;
}
/* Mazzola 15/06/2014 : classe per field type VIDEO */
.Video {
    margin: 5px 0px;
}
/*-----------------------------------------------------------------------------Fieltype Map Start-----------------------------------------------------------------------------*/
/* Mazzola 15/07/2014 : classe per field type MAP */
.Map {
    margin: 5px 0px;
    border: 1px solid #dddddd;
}
/* Mazzola 16/07/2014 : classe per i balloon nelle google map (balloon che compaiono quando si clicca un marker) */
.MapInfoWindow {
    min-height: 50px;
    color: black;
    display:inline-flex;
    flex-direction:column;
}
.MapInfoContent {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start
}
.MapInfoTitle {
    margin-bottom:4px;
    font-weight: bold;
}
/* Classi per la legenda delle google map */
.MapLegend {
    background-color: rgba(255,255,255,0.7);
    padding: 2px;
    border: 1px solid #cccccc;
}
/* Girelli 01/09/2014: stile elementi della legenda della google map */
tr.MapLegendRow td {
    padding: 2px;
}

/*-----------------------------------------------------------------------------joeyelrassi google distance-----------------------------------------------------------------------------*/
.rFrom, .rTo {
    margin-right:4px;
}
.routeFT {
    display:inline-flex;
}
.rValueUnitWrapperRO {
    display: inline-block;
    font-weight: bold;
    margin-left: 2px;
    margin-right: 2px;
    max-width:20%;
}
.rFTWrapperRO {
    float: left;
    display: inline-block;
    max-width: 85%;
    overflow: hidden;
    text-overflow: ellipsis;
}
.spacer {
    margin-left: 2px;
    margin-right: 2px;
}
.spacer > i {
    vertical-align:middle;
}
.spacer > i::before {
    font-weight:bold !important;
}
.rValueUnitWrapper {
    display: inline-flex;
    height: 26px;
    border: 1px solid #D2D7D7;
    border-radius: 6px;
}
.rValueUnitWrapper:focus-within {
    border: 1px solid;
    outline: 1px solid;
}
.rValue::-webkit-outer-spin-button,
.rValue::-webkit-inner-spin-button {
    -webkit-appearance:none;
    margin:0;
}

input[type="number"].rValue {
    width: 4ex;
    border: 0px;
    border-top-right-radius: 0px !important;
    border-bottom-right-radius: 0px !important;
    height: 24px;
    padding-right: 0.25ex;
    padding-left: 0.5ex;
    -moz-appearance:textfield;
}
input[type="text"].rUnit {
    width: 4ex;
    border: 0px;
    border-top-left-radius: 0px !important;
    border-bottom-left-radius: 0px !important;
    height: 24px;
    text-align: left;
    padding: 0 1px;
}
.rValueUnitWrapper > input[type="number"]:not(#SearchKeyMenu).rValue:focus, .rValueUnitWrapper > input[type="text"]:not(#SearchKeyMenu).rUnit:focus {
    outline: 0px !important;
    border: 0px !important;
}
/*-----------------------------------------------------------------------------Fieltype Map End-----------------------------------------------------------------------------*/
.MeterGaugeLegend {
    width: 60%;
}


/* Girelli 21/05/2014: Cursore manina su righe della ResultTable (solo se hanno link), tipicamente nelle Search */
tr.ResultRowLink td {
    cursor: pointer;
}
/* Girelli 13/06/2014: Cursore manina su celle con link delle Grid di dettaglio;
     qui e' sul td invece che sul tr per evitare problemi con le grid che possono avere campi in edit */
td.ResultRowLink {
    cursor: pointer;
}
/* Stile per FieldType Date */
/* Girelli 30/07/2015: min-width per impedire che il calendario vada a capo su celle strette */
.dateInput {
    min-width: 115px;
}
.dateInput input {
    width: 80px;
    margin:0px 2px 0px 0px;
}
/* Girelli 11/1/2023: tasti inc-dec visibili solo in Search Section */
.dateInput .dateIncrement {
    display: none;
}
#tabs_S .dateInput .dateIncrement {
    display: initial;
}

.SearchValues > div:first-child {
    float: left;
    display: inline-flex;
    align-items: center;
}
/* Girelli 05/11/2014: Stile Date del FieldType Date-Time */
input.date {
    width: 80px;
    /*margin: 0px 2px 0px 0px;*/
}
/* Girelli 05/06/2014: classe che evidenzia i bordi di una table al click sull'icona table in debug */
.tableLayout, .tableLayout td {
    border: 1px solid Red;
    border-collapse: collapse;
}
/* Girelli 16/06/2014: stile ShowWR */
.debugWR {
    margin: 0 auto;
    width: 95%;
}

.debugWR thead td {
    text-align: center;
}

.debugWR td {
    padding: 0 3px;
}
/* Girelli 18/06/2014: spaziatura bottoni in testa a TimesheetList */
.timesheetListButtons {
    padding: 0 0 5px 0;
}
/* Girelli 18/02/2015: Lista Timesheet
   Mazzola 18/5/2015: tabella riepilogo timesheet
 */
#tblTimesheet, .tblTimesheet {
    border: #DDD 1px solid;
}
/* Girelli 22/5/2015: TimesheetList spaziatura e gestione a capo */
#tblTimesheet td, .tblTimesheet td {
    padding: 0 3px;
    white-space: normal;
}
#tblTimesheet td.TsDayNum {
    white-space: nowrap;
}

/* Stile prima colonna TimesheetList */
td.TsDayNum .ts-plus {
    float: left;
    width: 25%;
}
td.TsDayNum .ts-plus > i {
    color: #428bca;
    font-size: 10px;
    width: 25%;
}
td.TsDayNum .ts-num {
    float: left;
    width: 35%;
    text-align: center;
    padding-right: 4px;
}
    
/* Stile Timesheet */
.Timesheet {
    font-size: 13px;
    margin-top: 10px;
}
/* Timesheet, mesi nel titolo  */
.ts-months {
    font-size: 24px;
}
.ts-months > i {
    font-size: 14px;
}

.month-change {
    cursor: pointer;
    padding: 2px 8px;
}
.month-change:hover {
    background-color: #e9e9e9;
}


.monthDays, .weekDays {
    background-color: #9a9a9a;
}

.nascosto {
    display: none;
}

#TimesheetGrid.ResultTable tbody > tr {
    height: 30px;
}
#TimesheetGrid > thead > .THeadTable > th:last-child, #TimesheetGrid > thead > .THeadTable {
    border-top-right-radius: 6px;
}


/* Girelli 26/08/2014: stile avviso di debug EcosStudio quando manca ReadLanguage o WriteLanguage nel Record */
.debugReadLanguage, .debugWriteLanguage, .debugReadLanguage > a {
    background-color: white;
    color: red !important;
    font-size: 12px;
}
/* Girelli 18/06/2014: larghezza button table in Search, css al posto di javascript */
#ButtonTable {
    width: 66%;
    margin-bottom: 6px;
    margin-top: 6px;
}
/* Girelli 19/06/2014: stili per icona logoff */
a.logoff {
    display: block;
    margin-top: -5px;
}

span.logoff {
    display: table-cell;
    height: 15px;
}

.icon-logoff {
    display: table-cell;
    background-image: url(Themes/DefaultTheme/JQuery/images/ui-icons_ffffff_256x240.png);
    width: 16px;
    height: 12px;
    background-position: 2px -178px;
}
/* Girelli 19/06/2014: stile horizontal line nelle griglie */
.HLine {
    border: none;
    border-bottom: 1px solid #DCDCDC;
    margin: 6px 0;
}
/* Girelli 26/06/2014: layout tabella paginazione risultati di ricerca delle pag. di configurazione */
.resultPageNextTable {
    float: left;
    margin: 0 0 20px 0;
}
/* Margine del box che indica numero di elementi trovati, in configurazione */
.searchResultsNumber {
    float: left;
    margin: 0 0 0 100px;
}
/* Girelli 26/06/2014: layout barra bottoni configurazione */
.buttonContainer {
    clear: both;
    margin-top: 10px;
}
/* Girelli 01/07/2014: stile testo della DialogPrompt */
#DialogAnswer {
    width: 400px;
}

.popupStatus {
    display: none;
    position: absolute;
    bottom: 0px;
    left: 220px;
    background-color: #FFF;
    color: #090;
    border: 1px solid #CCC;
    width: 500px;
}

.statusText {
    margin: 1px 0 1px 5px;
    font-size: 11px;
}
/* Girelli 07/07/2014: font bianco sui tab delle Grid di dettaglio interne a section folder  */
.SectionFolder li.ui-tabs-selected.ui-state-active {
    margin-bottom: -2px;
    padding: 4px 10px;
    border: 0px;
    background: #949690;
    color: #FFF;
    font-size: 13px;
}

svg.relationDiagram {
    /* Permette di cliccare attraverso il canvas, sugli elementi sottostanti */
    /* Safari: non lascia cliccare mai */
    /* IE: lascia cliccare anche senza questa istruzione */
    /* Chrome + Firefox: se attivo non vanno piu' gli eventi sul canvas */
    pointer-events: none;
}
/* Girelli 16/07/2014: icona di chiusura del Relation Tooltip */
.relTooltipClose {
    cursor: pointer;
    position: absolute;
    top: -4px;
    right: -4px;
}
/* Girelli 17/07/2014: Animazione di attesa */
#waitAnimation {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
}
#waitAnimation > div {
    position: relative;
    margin: 0 auto;
    background: url('../Disegni/hourglass.gif') no-repeat center #FFF;
    width: 25px;
    height: 25px;
    border: 1px solid #AAA;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}
/* Girelli 18/07/2014: classe per elementi in stato visibility:hidden (usato in Relation Diagram e OrgChart) */
.hidden {
    visibility: hidden;
}
/* Girelli 24/07/2014: stile Toolbar del Tree e suoi tool */
.treeToolbar {
    margin: 2px 5px;
}

.treeToolbar button, .treeToolbar input {
    margin: 0 6px 2px 0;
}

.treeToolbar .treeSearch {
    width: 160px;
}

/*joeyelrassi 01062021 commented bold*/
.breadcrumb {
    font-size: 12px;
    overflow: visible;
    text-transform: none;
    white-space: nowrap;
    display: block;
    margin: 0;
    text-align: left;
}
/*joeyelrassi 01062021 hide breadcrumb when it is empty to avoid big white space unless in full screen*/
#ajax-content .breadcrumb:empty{
    display:none;
}
/* Girelli 12/11/2014: margine superiore per distanziare breadcrumb e barra pulsanti, solo se siamo nel layout nuovo (escluso quindi full-screen) */
/*joeyelrassi changed margin (top) from 8px to 0 to accomodate for new layout*/
#ajax-content > .breadcrumb {
    margin: 0 0 8px 3px;
    padding:0;
}
/*joeyelrassi 2024 newest layout fix*/
.breadcrumb-arrow {
    margin: 0px 6px;
    color: #80848e;
    font-size: 11px;
}

/* Girelli 27/08/2014: spaziatura link di fianco alla tendina */
img.debugLink {
    margin: 0 0 0 2px;
}

/*-------------------------------------------------------------------------------------Upload/Download Start-------------------------------------------------------------------------------------*/
/*---------------------------------------------------------------------------Common---------------------------------------------------------------------------*/
/*joeyelrassi new layout fix -- section and grid download and upload*/
.uploadBarName{
    display:inline-flex;
    flex-direction:column;
}


/*joeyelrassi width of file progress bar*/
div.uploadBarName .filename {
    padding-top: 0;
}

div.uploadGrid div.uploadBarName .fileProgress {
    width: 50px;
}

/*joeyelrassi width of file progress bar*/
div.uploadBarName .fileProgress {
    width:100px;
}

div.uploadBarName .fileProgress .bar0 {
    border: 1px solid;
    background: none;
}

div.uploadBarName .fileProgress .bar {
    height: 8px;
    border-radius: 4px;
}




/*---------------------------------------------------------------------------Grid---------------------------------------------------------------------------*/
/*joeyelrassi 28062021 new layout fix*/
.uploadSmall.uploadSmall2 {
    display: inline-flex;
    align-items: center;
    width: unset;
    margin: 2px 0;
}
.uploadSmall.uploadSmall2.uploadGrid {
    width:65px;
    justify-content:center;
}
.uploadSmall.uploadSmall2.uploadGrid .image-delete {
    position: absolute;
}
.uploadSmall.uploadSmall2.uploadGrid .image-delete > i {
    position: relative;
    left: 25px;
}
/*joeyelrassi 28062021 upload icon/button -- new layout fix*/
.uploadSmall.uploadSmall2 .fileinput-button {
    background: none;
    width: unset;
    height: unset;
    font-size:22px;
    display:inline-flex;
    justify-content: center;
    margin:0;
}
.uploadSmall.uploadSmall2 .fileinput-button i{
    background-color:white;
    padding:3px 6px;
    z-index: 2;
}
.uploadGrid.uploadSmall.uploadSmall2 .fileinput-button i {
    background-color:transparent;
}
.uploadSmall.uploadSmall2:not(.uploadGrid) .fileinput-button i:hover {
    color: white;
}


.uploadGrid.uploadSmall.uploadSmall2 .fileinput-button .gridFileProgress:not(.noAnimate) + i:hover::before {
    animation: updown2 1s ease-in-out infinite;
}
.uploadGrid.uploadSmall.uploadSmall2 .fileinput-button .gridFileProgress.noAnimate + i {
    color:white;
}
.gridFileProgress {
    width: 28px;
    border-radius: 6px;
    position: absolute;
    z-index: 1;
    height: 0px;
    bottom: 1px;
    max-height: 27px;
}

/*---------------------------------------------------------------------------Section---------------------------------------------------------------------------*/
.uploadBig.uploadBig2 {
    display: inline-flex;
    align-items: center;
    margin:2px 0;
}
/*joeyelrassi 290602021 new layout fix*/
.uploadBig.uploadBig2 .fileinput-button {
    background: none;
    width: unset;
    height: unset;
    font-size: 25px;
    display: inline-flex;
    margin-top:0px;
}
.uploadBig.uploadBig2 .fileinput-button i{
    background-color:white;
    padding: 3px 6px;
}
.uploadBig.uploadBig2 .fileinput-button i:hover {
    color: white;
}
/*joeyelrassi 26072022 uploadBig for section file fs up while small for grid (2 for new)*/
.uploadBig.uploadBig2 .image-delete, .uploadSmall.uploadSmall2 .image-delete {
    display: none;
    height: 16px;
    padding-left: 2px;
}
.image-delete>i.row-remove {
    color: #ACACAC;
}
/*---------------------------------------------------------------------------Old---------------------------------------------------------------------------*/

/* Girelli 03/09/2014: Stili aggiuntivi bottone jQuery File Upload */
/* Girelli 05/09/2014: Stile bottone grande e bottone piccolo */
.uploadBig {
    margin-top: 6px;
}

.uploadBig .fileinput-button {
    background: url('../Disegni/Upload_125x45.png');
    width: 125px;
    height: 45px;
    float: left;
    /* Mazzola 13/10/2014: Niente bordo verde per il bottone di upload */
    border: 0px;
}

.uploadBig .fileProgress {
    float: left;
    width: 100px;
}

.uploadBig .filename div {
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    float: left;
}

/* Effect for File Drag and Drop  */
.uploadDragDrop > .fileinput-button > i {
    background-color: transparent;
    color: #1d1d1d;
    border-color: silver;
    padding: 4px 8px;
}

.uploadDragDrop > .fileinput-button {
    border: 2px dotted silver;
    border-radius: 6px;
    width: 200px;
    min-height: 60px;
    font-size: 12px;
    border-radius: 6px;
}
/* Effect on mouseover */
.uploadDragDrop.Drag > .fileinput-button {
    border: 2px dotted #888;
    background-color: #e0e0e0;
}

.uploadDragDrop .uploadBarName {
    padding-left: 4px;
}

.uploadDragDrop .image-delete {
    display: none;
    height: 16px;
    padding-left: 2px;
}


.uploadSmall .fileinput-button {
    background: url('../Disegni/Upload_95x30.png');
    width: 95px;
    height: 30px;
    float: left;
    border: 0;
}

.uploadSmall {
    width: 300px;
}
.uploadSmall.uploadSmall2 > div, .uploadSmall.uploadSmall2 > span, .uploadSmall.uploadSmall2 > i {
    margin:3px;
}

.uploadSmall .filename {
    white-space: nowrap;
    display: flex;
}

.uploadSmall .filename > a {
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-right: 4px;
}

.filename {
    float: none;
    padding-top: 6px;
}

    .filename > a > span {
        max-width: 120px;
        overflow: hidden;
        margin-right: 5px;
    }

#InterfaceFile_Filename.filename {
    display: block;
    text-align: left;
    position:relative;
    top:2px;
}

.uploadSmall .fileProgress {
    float: left;
    width: 100px;
}

/* Sfondo della progress bar */
.fileProgress .bar0 {
    height: 10px;
    background: #CCCCCC;
    border-radius: 4px;
}
/* Riempimento della progress bar */
.fileProgress .bar {
    width: 0%;
    height: 10px;
    background: #3598E5;
    border-radius: 4px;
}
/* Girelli 23/11/2016: PIC_FS_UP_GRID */
.uploadPicSmall .filename {
    /*max-width: 250px;*/
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.uploadPicSmall .fileProgress {
    float: left;
    width: 100px;
}
/* Nascondo bottone upload, per PIC_FS_UP_GRID */
.uploadPicSmall > .fileinput-button {
    display: none;
}

.uploadPictureMin {
    margin-right: 4px;
    cursor: pointer;
    height: 40px;
}

/* Popup di Upload file di importazione */
/*joeyelrassi 19072021 new layout fix*/
.InterfaceContainer {
    display: inline-flex;
    flex-direction: column;
    width: 100%;
    align-items: center;
}
.InterfaceContainer .bar0 {
    width: 300px;
}
/*joeyelrassi 19072021 new layout fix for jquery popups download elements*/
.InterfaceContainer .uploadBig.uploadBig2 .fileProgress {
    width: 300px;
}
#InterfaceTemplate {
    margin: 5px;
}
#InterfaceTemplate a:hover {
    color: Red;
}
#InterfaceTemplate i {
    font-size: 22px;
    cursor: pointer;
    color: #888;
}

/* Girelli 28/12/2015: nascondo link di download che non hanno file da scaricare */
.file-fs[filename=""] {
    display: none;
}
/*joeyelrassi 30062021 new layout fix*/
.file-fs.file-fs2 i {
    padding-right:2px;
    font-size:25px;
    vertical-align:middle;
}
.file-fs.file-fs2 > a > span {
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space:nowrap;
    display:inline-block;
    vertical-align:middle;
}
/*-------------------------------------------------------------------------------------Upload/Download End-------------------------------------------------------------------------------------*/

/* Girelli 11/09/2014: stile icona go to Top Page */
.goTop {
    float: right;
    color: #BBB;
}

    .goTop:hover {
        color: #949694;
    }
/* Girelli 11/09/2014: stile del Menu di EcosStudio */
.ecosStudioMenu {
    position: absolute;
    display: none;
    width: 100%;
    background: #eee;
    z-index: 2;
}
/* Girelli 13/10/2014: stile ecosStudio menu */
.ecosStudioMenu li {
    background: #fff;
}
.ecosStudioMenu a {
    text-align: left;
}
.ecosStudioMenu a:hover {
    color: inherit;
}
/* Girelli 04/02/2016: Icona di attesa SectionPreview, mostrata sopra all'icona 'i' cliccata, finche' non viene caricata la SectionPreview */
/* Usata anche per popup di Help */
.imgSectionPreviewWait {
    position: absolute;
    background-color: white;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    box-shadow: 0px 0px 10px 1px #888888;
    padding: 1px 1px 0px 1px;
    z-index: 2500; /* valore alto per sovrastare anche le grid in fullscreen */
}
/* Stile rotellina di attesa Search Result */
div.ResultWaitImg, .ajax-wait {
    position: absolute;
    z-index: 401;
    background-color: white;
    padding: 2px 2px 1px 2px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    margin-top: 32px;
    box-shadow: 0px 0px 12px 2px #888888;
}
div.ResultWaitImg > i, .ajax-wait > i, .imgSectionPreviewWait > i {
    font-size: 16px;
    padding: 1px;
    -webkit-animation: fa-spin .6s infinite linear; /* velocizzato rotellina di attesa */
    animation: fa-spin .6s infinite linear;
    color: #888;
}
/* Girelli 29/09/2014: stile della rotellina di attesa pagina ajax */
.ajax-wait {
    margin-top: 0;
    top: 120px;
    left: 50%;
    position: fixed;
    /* Mazzola 26/6/2017: Da 100 a 4000 perchè quando faccio fullscreen di oggetti lo z-index è di 3000 */
    z-index: 4000;
}

/* Stile rotellina di attesa della Combo in Section */
td.FieldValueEdit div.ResultWaitImg {
    margin-top: 0;
    margin-left: -22px;
}
/* Stile rotellina di attesa della Combo in Grid o in Search */
table.ResultTable div.ResultWaitImg, td.SearchValues div.ResultWaitImg {
    margin-top: -12px;
    margin-left: -22px;
}


/*-------------------------------------------------Girelli 22/09/2014: Stile barra Last Viewed (ultime pagine visitate) Start-------------------------------------------------*/
/*joeyelrassi 15012021 hide last viewed bar and create as widget*/
.navbar-collapse.last-viewed {
    background: #fff;
    border-bottom: 1px solid #e9e9e9;
    display: none;
}

    .navbar-collapse.last-viewed span {
        float: left;
        margin: 6px 0 6px 4px;
    }

#horizontal-menu .navbar-collapse.last-viewed .navbar-nav > li > a {
    line-height: 30px;
}
/* Girelli 24/09/2014: Stile last-viewed */
#last-viewed > li > a {
    font-size: 12px;
    padding: 4px 30px 4px 15px;
    border-bottom: 1px solid #DDDDDD;
    line-height: 24px;
}
/* Freccia della tendina sul lato destro (per other) */
#last-viewed #other .dropdown-menu:after, #headerMenu > .other > ul:after {
    right: 7px;
    left: auto;
}
/* LastViewed Other ritardo apertura tendina */
#last-viewed li#other:hover > .dropdown-menu {
    visibility: visible;
    opacity: 1;
    -webkit-transition-delay: .3s;
    transition-delay: .3s;
}

#last-viewed li#other > .dropdown-menu {
    visibility: hidden;
    opacity: 0;
}
/*-------------------------------------------------Girelli 22/09/2014: Stile barra Last Viewed (ultime pagine visitate) End-------------------------------------------------*/

/* Girelli 23/09/2014: riposiziona la foto dell'utente */
.user-profile img {
    vertical-align: middle;
}
/* Girelli 23/10/2014: stile per far andare a capo correttamente nomi utente lunghi */
.user-profile .user-info {
    max-width: 145px;
    vertical-align: middle;
}


/* Girelli 25/09/2014: nascondo la freccina in basso del tab selezionato del Menu orizzontale */
#horizontal-menu .navbar-collapse .navbar-nav > li.active > a:after {
    border: 0;
}
/* Girelli 07/10/2014: margine sinistro al Menu orizzontale e AjaxContent, per evitare che stia sotto al tab laterale chiuso */     /*joeyelrassi 25112020 tentativo per sidebar from 20 to 50*/
/*joeyelrassi 11052021 main-container instead of ajax-content since it controls it*/
#horizontal-menu.leftMargin, .sidebar-close .main-wrapper > .main-container {
    margin-left: 35px;
}

/*--------------------------------------------------------------------tab menu section start--------------------------------------------------------------------*/
ul.dropdown-menu, ul.dropdown-menu.dropdown-light  {
    box-shadow: 0 0 6px 2px rgba(153, 153, 153, .5);
    border: 0px;
    border-radius:6px;
}
/* Girelli 06/03/2015: Menu Orizzontale al MouseOver, ritardo sul menu di 1' livello */
#tabMenu > li.dropdown:hover > .dropdown-menu {
    visibility: visible;
    opacity: 1;
    -webkit-transition-delay: .3s;
    transition-delay: .3s;
}

#tabMenu > li.dropdown > .dropdown-menu {
    visibility: hidden;
    opacity: 0;
    -webkit-transition-delay: .3s;
    transition-delay: .3s;
    top: calc(100% + 1px);
    border-radius: 6px;
    border-top-left-radius: 0px;
}
/* Girelli 27/8/2015: Nascondo icone dei TabMenu solo nel Menu Orizzontale; sono visibili solo quando TabMenu viene spostato nel Menu laterale (layout mobile) */
div.tabMenu > ul#tabMenu > li > a > i.fa {
    display: none;
}
/*joeyelrassi 08072021 for home icon hover*/
#I_HOME a:hover i{
    color:white;
}

/*joeyelrassi 20012021 aggiunto per prima casella*/
div.tabMenu > ul#tabMenu > li > a > i.bi {
    font-size:28px;
}
/* Girelli 06/10/2014: posizione indentata del sottomenu del Menu orizzontale */
.dropdown-menu .dropdown-menu, .dropdown-menu.submenu {
    left: 80px;
    top: 22px;
    border-radius:6px;
}
/* Girelli 06/10/2014: Stile voce di menu e freccia in giu' del sottomenu, del Menu orizzontale */
#tabMenu > li > ul i.icon-arrow {
    position: absolute;
    right: 10px;
    top: 6px;
}

.dropdown-menu > li > a, .widgetModalContent > li > a {
    padding: 4px 30px 4px 15px;
    font-size: 13px;
    color: #1d1d1d;
    overflow: hidden; /*nabilrafka 31082023 aggiunto overflow per nascondere testi > 300px (ellipsis)*/
    text-overflow: ellipsis;
}
/* Girelli 07/10/2014: colore Tab aperto in Menu orizzontale (per Other) */
#tabMenu > li.open > a {
    background: #e9e9e9;
}
#horizontal-menu .navbar-collapse #tabMenu {
    display: inline-flex;
    align-items: center;
    height: 42px;
    /*mattiapaganini 12042023 aggiunto position per evitare di andare a capo all'apertura della tendina laterale*/
    position: absolute;
}
#horizontal-menu .navbar-collapse #tabMenu > li{
    margin:0 2px;
    height: 40px;
    display: flex;
    align-items: center;
    transition-duration: 0.2s;
    transition-property: background-color;
}
#horizontal-menu .navbar-collapse #tabMenu.navbar-nav > li > a {
    cursor: pointer;
    color: white;
    line-height: 1;
    height: 32px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    transition-duration: 0.2s;
    transition-property: background-color, color;
    padding: 0px 12px;
}

#horizontal-menu .navbar-collapse #tabMenu.navbar-nav > li.active > a {
    color: black;
    background: white;
}

/*joeyelrassi 12012021 horizontal menu hover background color*/
#horizontal-menu .navbar-collapse #tabMenu.navbar-nav > li:hover  > a {
    background: whitesmoke;
    color: black;
}

li.dropdown > a > i.icon-arrow {
    transition-duration: 0.2s;
    transition-property: transform;
}
#horizontal-menu .navbar-collapse #tabMenu.navbar-nav > #I_HOME:hover > a {
    color: white;
    border-bottom: 1px solid;
}

#horizontal-menu .navbar-collapse #tabMenu.navbar-nav > li > a > i.icon-arrow {
    margin-left: 4px;
}
/*mattiapaganini 12042023 animazione applicata on hover del dropdown*/
li.dropdown:hover > a > i.icon-arrow {
    transform: rotate(-180deg);
}
ul.dropdown-menu li.dropdown > a > i.icon-arrow {
    transform: rotate(-90deg);
}
ul.dropdown-menu li.dropdown:hover > a > i.icon-arrow {
    transform: rotate(-270deg);
}

/*--------------------------------------------------------------------tab menu section end--------------------------------------------------------------------*/
/* Girelli 18/11/2014: icone del menu orizzontale */
.dropdown-menu > li > a > i, .dropdown-menu > li > a > span > i, .widgetModalContent > li > a > i, .widgetModalContent > li > a > span > i {
    font-size: 12px;
    color: #b6b6b6;
    margin-right: 4px;
}
    .dropdown-menu > li > a > i.zmdi, .dropdown-menu > li > a > span > i.zmdi, .widgetModalContent > li > a > i.zmdi, .widgetModalContent > li > a > span > i.zmdi {
        font-size: 13px;
        margin-right: 4px;
    }
.dropdown-menu > li > a > i.icon-arrow, .widgetModalContent > li > a > i.icon-arrow {
    color: #1d1d1d;
}
ul.main-navigation-menu {
    position: relative;
    overflow: hidden;
    max-height: calc(100% - 154px);
}
/* Girelli 30/09/2014: Freccia del Menu laterale chiuso */
ul.main-navigation-menu li a .icon-arrow:before {
    content: "\f107";
}
/* Girelli 30/09/2014: Freccia del Menu laterale aperto */
ul.main-navigation-menu li.open > a > .icon-arrow:before {
    content: "\f106";
}
/* Girelli 02/10/2014: icone del menu laterale */
/* Aggiunto supporto a icone Material Design zmdi */
ul.main-navigation-menu > li > a > i.fa {
    font-size: 14px;
}
ul.main-navigation-menu > li > a > i.zmdi {
    font-size: 15px;
    margin-right: 4px;
}
/* Icone dal 2' livello */
ul.main-navigation-menu > li > ul li i.fa,
ul.main-navigation-menu > li > ul li i.zmdi {
    font-size: 12px;
}
/* Altezza del sottomenu del menu Laterale */
ul.main-navigation-menu li ul.sub-menu li a {
    padding-top: 4px;
    padding-bottom: 4px;
}
/* Girelli 21/10/2014: stile del div, del menu laterale, che ha il link al MenuFolder, largo quanto la voce di menu esclusa la freccia  */
ul.main-navigation-menu li > a > div {
    height: 100%;
    position: absolute;
    /*border: 1px solid red;*/
    margin: -5px 0 0 -20px;
}

ul.main-navigation-menu > li > a > div {
    width: 85%;
    margin: -10px 0 0 -20px;
}

ul.main-navigation-menu > li > ul > li > a > div {
    width: 75%;
}

ul.main-navigation-menu > li > ul > li > ul > li > a > div {
    width: 68%;
}
/* Textbox ricerca persona */
#SearchPerson {
    margin: 0 0 10px 10px;
}

#SearchPerson > div{
    display:flex;
    align-items: center;
}


.dropdown-menu.dropdown-light:before {
    display: none;
}

.dropdown-menu.dropdown-light:after {
    border-bottom-color: #FFF;
}



/* Mazzola 03/10/2014: colore font grigino per i link (EcosAgile) nel footer */
.GrayFont {
    color: #838383;
}
/* Mazzola 03/10/2014: Container del logo */
/*joeyelrassi 12012021 changed height from 66 to 77 to cover the button and commented margin*/
/*nabilrafka 12012024 commented background-color and added position and z-index for new product overlay on logo when sidebar is opened*/
.LogoContainer {
    width: 232px;
    height: 77px;
    /*background-color: white;*/
    /*margin: 2px 0 0 2px;*/
    text-align: center;
    position: absolute;
    z-index: 3
}

div.LogoContainer > img {
    /*height: 98%;*/ /* Se logo quadrato, in JS mette height 98% e toglie width */
    width: 95%;
    vertical-align: middle;
    visibility: hidden; /* Viene mostrata dopo il resize */
    /*joeyelrassi 12012021*/
    margin-left:2px;
    margin-bottom: 2px;
}

/*joeyelrassi 11122020 to fix small picture*/
div.LogoContainerSmall > img {
    vertical-align: middle;
    visibility: hidden;
    max-height: 98%;
    position:relative;
    bottom:1px;
    /*joeyelrassi 28062021 added max width so the pic doesnt touch the text next ot it*/
    max-width:260px;
}
/* Mazzola 7/10/2014: deve essere uguale alla @media.LogoContainer qui subito sotto */
div.LogoContainerSmall {
    width: 90%;
    height: 34px;
    margin-left: 4px;
    margin-top: 0px;
    background-color: white;
}

/* Logo in alto a sinistra - START */
.LogoImmagine {
    margin: auto auto;
    height: 95%;
    width: 95%;
    background-image: url("../Disegni/logo_ecosagile_300x56.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100%;
}
/* Logo in alto a sinistra - END */
/* Su schermi stretti o tablet orizzontale (fino a 1280), stile diverso */
/*joeyelrassi 11062021 made the css stronger so it is not overriden*/
@media (max-width: 1270px) {
    div.main-container:not(.inner-transform) #ajax-content > .PageCmd {
        top: 4px;
        position: absolute; /* Girelli 27/7/2015: le icone scorrono, non sono fixed */
    }

    table.timesheetListButtons{
        padding-right:0px !important;
    }
}
/*---------------------------------------------------------joeyelrassi 08072021 headermenu end-----------------------------------------------------------*/
/* Su schermi piccoli (Tablet in verticale e smartphone), stile diverso */
@media (max-width: 991px) {
    /* Girelli 04/11/2014: Nascondiamo il Menu Orizzontale (viene messo nel Menu laterale), quindi nascondiamo gli altri contenuti del Menu laterale */
    /* Girelli 11/2/2016: nascondo i bottoni */
    /* Barra bottoni con Save e History in header */
    #F0, #ajax-content > .PageCmd, #ajax-content > div.headerButtons, .orgChartOptionsButtons.orgChartNavigationToggle {
        display: none;
    }
    /* Girelli 03/11/2014: Il menu laterale e orizzontale si comprimono, alziamo la posizione della pagina centrale */
    #ajax-content > .breadcrumb {
        margin: 0;
    }

    .ajax-wait {
        top: 60px;
    }

    /* Mazzola 03/10/2014: ridimensiona logo per schermi piccoli (uniformare come qui sopra) */
    .LogoContainer {
        width: 106px;
        height: 100%;
        margin-left: 34px;
        background-color: white;
        z-index: 1; /*nabilrafka added for open sidebar logo on small screen and new product overlay*/
    }

    div.LogoContainerSmall {
        height: 98%;
        margin-left:34px;
    }

    /*joeyelrassi 05072021 in search page on phone view fix buttons location*/
    .SearchPageParamContainer .SearchParam .divButton, .PageRemark:not(:empty) ~ .DetailPageParamContainer .SearchParam .divButton {
        float: right;
        position: unset;
    }

    #newProductsOverlay .arrow.activeproducts {
        top: -50px;
    }
    
    /*---------------------------------------------------------joeyelrassi 08072021 headermenu start-----------------------------------------------------------*/
    .navbarBodyContainer, .navbarBodyContainer .topbar-debug {
        max-height: 50px;
    }

    #headerMenu .headerMenuLabel {
        display: none;
    }

    #headerMenu .headerMenuIcon {
        font-size: 16px;
        padding-right: 0;
        align-items: center;
    }

        #headerMenu .headerMenuIcon.fa-question, #headerMenu .headerMenuIcon.bi-arrow-repeat {
            font-size: 18px;
        }

    #headerMenu > li > a {
        height: 26px !important;
        display: flex;
        align-items: center;
    }

    body .main-wrapper > .main-container.inner {
        margin-top: 36px !important;
    }
/*---------------------------------------------------------joeyelrassi 08072021 headermenu end-----------------------------------------------------------*/
    div#ajax-content div.PageTabList.ui-tabs.fixed {
        top: 36px;
    }
    /*hide page buttons on window resize*/
    #btn_helpUserSort, #btn_searchSort, #btn_selectFields, 
    div#tabs div.SearchPageParamContainer {
        display: none;
    }

    header.topbar {
        position: fixed !important;
        min-height: 36px !important;
    }
        header.topbar .container .navbar-header .sb-toggle-left {
            height: 36px !important;
            line-height: 36px !important;
        }

}
/*--------------------------------------------------------------------End Media 991--------------------------------------------------------------------*/
/* Girelli 03/10/2014: pulsantiera inferiore distanziata dal footer */
/*nabilrafka 23102023 removed 4px of the bottom margin because it is now added to the button (40->36)*/
#PageButtonStandard {
    margin: 0 0 36px 0;
}
    /*nabil rafka 23102023 added 4px of margin-bottom to make distance between two button on top of each others*/
    #PageButtonStandard .btn-sm {
        margin-bottom: 4px;
    }
/* Mazzola 03/10/2014 : colore positivo e negativo per i valori amount, in modifica con input., in lettura senza. */
input.ValuePositive {
    color: blue /*#457B9D*/;
}

input.ValueNegative {
    color: red /*#EB5C68*/;
}



/* Mazzola 13/10/2014: per tenere il logo incollato al margine sinistro */
.topbar .container .navbar-header .navbar-brand {
    left: 0px;
    line-height: 36px !important;
}
/* Girelli 07/10/2014: velocizziamo fadeIn al cambio pagina in Ajax */
.animated {
    -webkit-animation-duration: .25s;
    animation-duration: .25s;
}
/* Mazzola 13/10/2014: spazi tra la finestra del browser e le sezioni */
/* Mazzola 13/10/2014: classe usata anche per il body quando la detail viene usata come popup */
.container {
    padding-right: 8px;
    padding-left: 8px;
    margin-right: auto;
    margin-left: auto;
    /*background-color: #fafafa;*/
}

.main-content, body.menu-folder {
    background-color: #fafafa;
    /*background: whitesmoke;*/
}
/* Mazzola 13/10/2014: classe per il body quando la detail viene usata come popup */
.PopupDetail {
    padding-right: 8px;
    padding-left: 8px;
    margin-right: auto;
    margin-left: auto;
    background-color: #fafafa;
}

.container#wrongfield button {
    border:1px solid #ccc;
}

/* Mazzola 14/10/2014: bottone grigio molto chiaro */
.btn-very-light-grey {
    background-color: #fafafa;
    border-color: #ccc;
    /*border-color: #999eab;*/
    color: #80848e;
}
    /* Girelli 21/10/2014: aggiunto stile mouseover anche per btn-default */
    .btn-very-light-grey:hover, .btn-very-light-grey:focus, .btn-very-light-grey:active, .btn-very-light-grey.active, .btn-default:hover, .btn-default:active {
        background-color: #999eab;
        border-color: #8b91a0;
        color: white;
    }

    .btn-very-light-grey.disabled:hover, .btn-very-light-grey.disabled:focus, .btn-very-light-grey.disabled:active, .btn-very-light-grey.disabled.active, .btn-very-light-grey[disabled]:hover, .btn-very-light-grey[disabled]:focus, .btn-very-light-grey[disabled]:active, .btn-very-light-grey[disabled].active, fieldset[disabled] .btn-very-light-grey:hover, fieldset[disabled] .btn-very-light-grey:focus, fieldset[disabled] .btn-very-light-grey:active, fieldset[disabled] .btn-very-light-grey.active {
        background-color: white;
        border-color: white;
        color: white;
    }

    .btn-very-light-grey .caret {
        border-top-color: white;
    }

.dropup .btn-very-light-grey .caret {
    border-bottom: 4px solid white;
}
/* Girelli 4/8/2016: niente animazione allo spostamento di bottoni, ma attiva al mouseover */
.btn[fieldid="NewEntry"] {
    transition: none !important;
    margin-top: 4px;
}

    .btn[fieldid="NewEntry"]:hover {
        transition: all 0.3s ease 0s !important;
    }

    /*joeyelrassi 12092022 added .gridNewEntry class to grid footer, not sure if NewEntry as fieldid is used somewhere else*/
.gridNewEntry {
    margin-left: 96px;
}

div + .gridNewEntry {
    margin-left: 0px;
}

.gridNewEntry > .btn[fieldid="NewEntry"] {
    margin-top: 0;
    margin-bottom: 4px;
    margin-left: 12px;
    height: 30px;
}

/* Mazzola 14/10/2014: width contenitore della freccetta per andare al top in basso a destra */
/*joeyelrassi 18052021 added span and color to have precedence*/
span.go-top {
    width: 16px;
    color: white;
}
/* Mazzola 14/10/2014: grigio per footer in fondo alla pagina */
/*joeyelrassi 14052021 background-color moved to themes css to change it according to the theme and padding left to 36px for new pageslide left width*/
footer.inner {
    padding-left: 36px;
}
/*nabilrafka 06112023 to reorganize the footer components*/
@media (max-width: 821px) {
/*    footer.inner {
        height: 100px;
    }
    footer.inner .footer-inner {
        position: relative;
        width: inherit;
        height: inherit;
    }*/
    footer.inner .pull-right {
        position: absolute;
    }
    footer.inner .pull-right:not(.go-top-container) {
        bottom: 3px;
        right: 20px;
    } 
    footer.inner .pull-right.go-top-container {
        bottom: 20px;
        right: 200px;
    }
}
/*joeyelrassi 07072021 when left side menu is open on a smaller screen footer doesnt fit with original margin*/
footer .footer-inner {
    margin-left:240px;
}
/* Mazzola 14/10/2014: link per il footer in basso */
a.linkFooter {
    /*font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;*/
    display: flex;
    align-items: center;
    font-size: 13px;
}

    a.linkFooter:visited {
        color: rgb(139, 145, 160);
    }

    a.linkFooter:active {
        color: rgb(139, 145, 160);
    }

    a.linkFooter:hover {
        color: rgb(139, 145, 160);
    }

/* Mazzola 28/10/2014: campi text disabled senza background ne border  */
input[type="text"][disabled] {
    background-color: transparent !important;
    border: none !important;
}
/*joeyelrassi new x button for the top right search menu*/
input.inputClear#SearchKeyMenu {
    background: #fff url(../Disegni/x1.png) no-repeat right -15px center;
    padding-right: 18px; /* Use the same right padding (18) in jQ! */
    transition: none;
}
input.inputClear#SearchKeyMenu:hover {
    border-color: #D2D7D7;
}
input.inputClear#SearchKeyMenu.x {
    background-position: right 6px center; /* (jQ) Show icon */
    transition: none;
}
input#SearchKeyMenu.MenuSearch, input#SearchKeyMenu.MenuSearch:focus {
    outline: none;
    color: white !important;
    border-width: 1px !important;
}
/* Girelli 03/11/2014: Stile Tasto X per svuotare input o textarea che hanno classe .inputClear */
input.inputClear {
    background: #fff url(../Disegni/x.png) no-repeat right -15px center;
    padding-right: 18px; /* Use the same right padding (18) in jQ! */
    transition-property: border-color;
}

#SearchPerson input.inputClear.x, #QuickRedirect input.inputClear.x, .lightGray > .ui-dialog input.inputClear.x {
    background-position: right 10px center; /* (jQ) Show icon */
    /*transition: none;*/
}
input.inputClear.x {
    background-position: right 2px center; /* (jQ) Show icon */
    /*transition: none;*/
}

.inputClear.onX {
    cursor: pointer;
}
/* La TextArea ha il tasto X in alto destra, non al centro a destra */
/*joeyelrassi 13/06/2022 i had commented url for some reason, now uncommented*/
textarea.inputClear {
    background: #fff url(../Disegni/x.png) no-repeat right -15px top 2px;
    transition: 300ms ease-in-out;
    transition-property:border-color;
}

    textarea.inputClear.x {
        background-position: right 2px top 2px; /* (jQ) Show icon */
        /*transition: none;*/
    }

.sp > img {
    cursor: pointer;
}
/* Girelli 26/11/2014: stile bottone carica gruppi persone */
button.pgLoad {
    /* background: url(../Disegni/Gruppi.png) 50% 50% no-repeat; */
    margin: 0 0 4px 4px;
    height:26px;
}
.FieldValueEdit button.pgLoad {
    margin: 0 0 0 4px;
    height: 26px;
}

.ConfigurationError {
    font-weight: bold;
    color: Red;
}

/* Girelli 20/11/2014: Tendina al mouseover su freccia di fianco al nome utente loggato */
.user-info ul.dropdown-menu {
    right: 8px;
    left: inherit;
    top: 50px;
    background: #fff;
}
.user-info ul.dropdown-menu > li:first-child > a {
    border-top-left-radius:6px;
    border-top-right-radius:6px;
}
.user-info ul.dropdown-menu > li:last-child > a {
    border-bottom-left-radius:6px;
    border-bottom-right-radius:6px;
}

/* Niente freccia della tendina utente */
.user-info ul.dropdown-menu.dropdown-light:after {
    right: 7px;
    left: auto;
}
/* DIV della tendina utente */
#userOptions {
    height: 60px;
    width: 185px;
    position: absolute;
    top: 6px;
}

header.topbar > div.container {
    border-right: 1px solid #e9e9e9;
}

/* Girelli 10/12/2014: colore bordo dei campi in errore, bypasso Bootstrap e il tema */
.has-error .form-control, .has-error .form-control:hover, .has-error .form-control:focus {
    border-color: #f17171 !important;
}
/* Annulla la larghezza 100% di bootstrap */
.form-control {
    width: auto;
    float: left;
    padding: 0;
    color: #1d1d1d;
    height:26px;
}

select.form-control {
    color: #1d1d1d;
}
    /* Colore tendine prima di diventare select2 */
    select.form-control.select2 {
        border: 1px solid #d2d7d7;
    }
/* ---------- inizio css per select2 ------------ */
/* Girelli 10/12/2014: Classi per TENDINA SELECT2 di bootstrap */
/* Valore selezionato a tendina chiusa, in tag A */
.select2-container .select2-choice {
    height: 26px;
    padding: 0 2px;
    border-radius: 6px;
    font-size: 13px;
    border: 1px solid #D2D7D7;
}
/* bordino delle select2 quando chiuse */
.select2-container .select2-choice:hover b[role=presentation] {
    color: #1d1d1d;
}
.select2-container .select2-choice .select2-chosen {
    padding-left:4px;
    line-height: 24px;
    margin-right: 18px;
}
#tabs .SearchValues .select2-container .select2-choice .select2-chosen, 
#tabs_S .SearchValues .select2-container .select2-choice .select2-chosen {
    text-align: left;
}


.select2-container {
    float: none;
    display: inline-block; /*joeyelrassi 09072021 new layout fix*/
    background-color: transparent;
}
.ResultTable .select2-container {
    height:26px;
    border-radius:6px;
}

.select2-container .select2-choice abbr.select2-search-choice-close:before {
    display: none;
}

/* margini area visibile dei valori della select */
.select2-results {
    margin: 4px 4px 4px 0;
}
/* Item di Select2 */
li.select2-result {
    white-space: nowrap;
    font-size: 13px;
    /* colore del testo all'interno del menù a tendina */
    color: #292929;
}
/* Barra dell' Item selezionato di Select2 , vale sia per dept-0 che dept-1 */
.select2-result.select2-result-selectable.select2-highlighted {
    background: #a5a5a5;
    border-radius:6px;
}
/* Girelli 25/03/2015: Stile della Search in Select2 */
.select2-search {
    height: 26px;
    min-height: 24px;
}

    .select2-search > input {
        height: 24px !important;
        min-height: 24px;
        line-height: 24px;
    }

    .select2-search input, .select2-search input:focus {
        background: #fff url('../assets/plugins/select2/select2.png') no-repeat 100% -22px !important;
    }
/* Girelli 14/01/2015: Nascondo la scrollbar standard (a favore di perfectScrollbar) */
.select2-results {
    overflow: hidden;
}
/* Mazzola 16/12/2014: tolto freccetta doppia di apertura della select */
.select2-container:not(.select2-container-disabled) .select2-choice .select2-arrow b {
    background: none;
    padding-right: 4px;
    background-image: none !important;
    color: #757575;
}

/* icona freccia un po' piu' grande */
.select2-container .select2-choice .select2-arrow b:before {
    font-size: 20px;
    top:0px;
}
/* colore della frecettina quando la tendina e' vuota */
.select2-default {
    color: #444444 !important;
}

/*joeyelrassi 18032022 changed dropdown radius*/
div.select2-drop-active {
    border-radius: 6px;
    box-shadow: 0 0 6px 2px rgba(153,153,153,.5);
    margin-top:1px;
    border:0px;
}

.select2-container .select2-choice abbr {
    top: 6px;
}

.colorChoice.colorPickerSelectChoice {
    padding: 3px 4px;
    color: white;
}
.colorPickerSelect .select2-choice {
    color: white;
}

/* Codice specifico per select2 color */
.option-color {
    width: 18px;
    height: 18px;
    float: left;
    margin-right: 3px;
    border: 1px solid #BBB;
    border-radius: 4px;
}
#select2-color {
    width: 18px;
    height: 18px;
    float: left;
    margin: 3px 0 0 2px;
    border: 1px solid #BBB;
    border-radius: 4px;
}
.select2-icon {
    float: left;
    margin: 0 0 0 2px;
}


/*------- CSS per Select2 - END ----------*/
/* ---------- Printing --------------- */
/* Mazzola 17/12/2014: classe per non stampare certi elementi nella pagina */
body {
    -webkit-print-color-adjust: exact;
}

@media print {
    /* Mettere uguale anche in utilita.js -> PrintPopup */

    .NoPrint, .NoPrint * {
        display: none !important;
    }
    /* non fa vedere elementi che non sono contenuti */
    /* il messenger sulla destra */
    .ps-container,
    /* il footer in basso a destra */
    .footer-inner,
    .footer,
    .dtPanel,
    /* il tag footer usato per il footer in basso a destra */
    footer,
    /* footer risultati di ricerca  */
    #ResultFooterTable,
    /* bottoni di ricerca e save */
    #ButtonTable,
    #PageButtonStandard,
    /* footer in basso a destra */
    #FooterTable,
    /* footer delle griglie */
    .GridFooter,
    /* bottoni icone in alto a destra */
    .PageCmd,
    /* gestione storico in alto a destra */
    .RecordsetNavigation {
        display: none !important;
    }
    /* per non fare sbordare i tabGroup */
    .ui-tabs {
        width: 98% !important;
    }
    /* non spezzare i div tra una pagina e l'altra */
    div {
        page-break-inside: avoid;
    }
}
/*---------- Printing - END --------- */
/* Icona aggiungi riga in griglia con pagina nuova */
.GridPageAdd {
    width: 16px;
    height: 16px;
    display: inline-block;
}

.GridRowDuplicate {
    font-size: 20px;
    margin-top: 2px;
    color: #acacac;
}

/* Mazzola 19/1/2015: non mostra bordo attorno alla orgchart quando ci clicco dentro */
.NoOutline {
    outline: none;
}
/* Girelli 04/02/2015: limite dimensione logo SSL nel footer */
span#siteseal > img {
    max-height: 44px;
}
/* Mazzola 25/02/2015: style frase che esce quando non ci sono Attivita' nel timesheet */
.TSNoActivity {
    font-size: 14px;
    color: Red;
}
/* Mazzola 25/02/2015: colore delle testo nelle celle readonly nel timesheet */
.TSFontReadOnly {
    color: #666666 !important
}
/* Mazzola 8/4/2015: margine sinistro della legenda per non farlo collassare con le label dell'asse Y */
div[chartid] .legend-container {
    margin: 20px auto 0px auto;
    padding-top: 4px;
    width: 100%;
    position: relative;
    min-height: 32px;
    display: flex;
    justify-content: space-between;
}
/* Girelli 27/4/2015: PerfectScrollbar su Multiselect */
.ui-multiselect-checkboxes {
    overflow: hidden;
}
/* Girelli 29/4/2015: stili per TabGroup affiancabili (Float)
/* TabGroup e ColumnContainer Float, che si possono affiancare */
/*joeyelrassi 09062021 attempt to remove page horiz scroll -- scroll fix*/
.tabGroupFloat, .columnContainerFloat {
    float: left;
    display: table; /* Affinche' il DIV vada a capo, anziche' sovrapporsi, se occupa piu' della % assegnatagli *//*change table to block for horizontal scroll*/
}

.tabGroupFloat {
    margin-bottom: 10px;
}
.tabGroupFloat.floatMargin {
    margin-right: 10px;
}
/* TabGroup e ColumnContainer NoFloat: non si possono affiancare (sono da soli su una riga) */
.tabGroupNoFloat, .columnContainerNoFloat {
    clear: both;
}
/* Su schermi stretti (smartphone, tablet e proiettori) i TabGroup e ColumnContainer non si affiancano e occupano tutta la larghezza */
@media (max-width:1280px) {
    .tabGroupFloat,
    .columnContainerFloat {
        width: 100% !important; /* Bypass delle impostazioni di configurazione */
        padding-right: 0;
    }
}
/* Girelli 19/7/2017: stile per evidenziare TabGroup e ColumnContainer che si affiancano, con EcosStudio */
.floatDebug {
    border: 1px solid red;
    float: left;
    width: 100%;
}
/* Stile di un campo modificato in section o in grid */
.modified, .select2.modified > a, td.modified {
    background-color: #f3fff3 !important;
}

span.modified {
    background-color: transparent !important;
}

/* Tag Entity Relation, impedisco che crei spazi inattesi */
er {
    position: absolute;
}
/* Stile TextArea senza bordi */
textarea.no-border {
    background: transparent;
    min-height: 100px;
    resize: none;
}
/* Girelli 24/6/2015: layout titolo msg di Notification Center */
.notifications .message {
    max-width: 150px;
    display: inline-flex;
    overflow: hidden;
    float: left;
    padding-left: 4px;
}
.notifications .pageslide-list a .label {
    float: left;
    position: initial;
}
.notifications .time {
    float: initial;
    text-align: right;
}

/* Girelli 4/9/2015: Stile titolo della Notification */
p.notificationSubject {
    margin: 4px 0px -6px 0px;
    white-space: normal;
    font-weight: bold;
    text-align: left;
}
/* Girelli 31/8/2015: layout anteprima notifica del Notification Center */
p.notificationPreview {
    margin: 4px 0px -9px 0px;
    white-space: normal;
    text-align: left;
}
/* Girelli 22/9/2015: stile Autore della notifica */
span.notificationSender {
    font-size: 10px;
    display: block;
    text-align: right;
}
/* Girelli 7/9/2015: tasto X per rimuovere Notifica */
span.notificationRemove {
    float: right;
    margin: 0px 0px 0px 2px;
    padding: 0 2px;
    background-color: #fff;
    color: #aaa;
}

    span.notificationRemove:hover {
        background-color: #fff;
        color: #1d1d1d;
    }
/* Girelli 31/8/2015: Notifiche ravvicinate e spaziatura interna */
#pageslide-right .notifications a {
    margin: 4px 0;
    background: white;
    border: 1px solid #eee;
    padding: 4px 4px 10px 4px;
    color: #777;
    font-size: 12px;
}
/* Girelli 10/9/2015: stili per rendere fixed la barra bottoni in alto nella sidebar di destra */
ul#sidebar-tab {
    position: fixed;
    z-index: 1000;
}

div.tab-content {
    top: 48px;
}

#pageslide-right .right-wrapper .nav-tabs li.active a {
    background: #fff;
}

/* Mazzola 9/10/2015: se ore Timesheet > TimeProfileExpect allora le faccio vedere in rosso */
.RedTS {
    color: Red !important;
    font-weight: bold;
}
/* Mazzola 18/1/2015: se ore Timesheet quadrano allora le metto in blue */
.BlueTS {
    color: Blue !important;
    font-weight: bold;
}

.RedTSLight {
    color: Red !important;
}
/* Girelli 25/11/2015: Stile per griglia jQuery DataTable */
table.dataTable thead th, table.dataTable thead td {
    padding: 6px 4px;
    border-bottom: none; /* niente bordo nero tra intestazione e dati */
}

table.dataTable tbody td {
    padding: 0;
}

table.dataTable tbody th, table.dataTable > tbody > tr > td {
    padding: 3px 3px 2px 3px;
    height:28px;
}
/* Girelli: nascondiamo messaggio table empty di DataTables (usiamo il nostro msg) */
.dataTables_empty {
    display: none;
}
/* Girelli 4/4/2019: stile griglia senza header (es.: griglia KPI) */
table.dataTable.noHeader > tbody > tr, table.dataTable.noHeader tbody > tr:hover {
    background-color: transparent !important;
}
/* Icona link in kpi */
div.kpiLink {
    font-size: 14px;
    color: #484848;
    right: -30px;
    bottom: -5px;
    position: absolute;
    display: none;
}
div.kpiLink.haslink {
    display: block;
    cursor:pointer;
}
.panel.haslink {
    cursor: pointer;
}

table.dataTable.noHeader tr > td.ListCellGroup {
    border: 0;
    padding: 0;
}

table.dataTable.noHeader td > div.SectionFolder:hover {
    background-color: #eee;
}

table.ResultTable.noHeader > thead > tr {
    height: 0;
}

table.dataTable tfoot th, table.dataTable tfoot td {
    padding: 2px;
}
/* Bordo grigio a bottom griglia */
table.dataTable.no-footer {
    border-bottom: 1px solid #ddd;
}

table.dataTable {
    padding-left: 0px;
}
    /* Niente bordi neri nel footer */
    table.dataTable tfoot td tfoot td {
        border: none;
    }
    /* Background trasparente per non coprire il colore delle righe alternate */
    table.dataTable tbody tr, table.dataTable.hover tbody tr:hover, table.dataTable.display tbody tr:hover {
        background-color: transparent;
    }
    /* Alternanza righe bianche e grigie in DataTable */
    table.dataTable.display > tbody > tr:nth-child(odd) {
        background-color: White;
    }

    table.dataTable.display > tbody > tr:nth-child(even) {
        background-color: #F2F2F2;
    }

    table.dataTable.hover tbody tr:hover, table.dataTable.display tbody tr:hover {
        background-color: #dedede;
    }
/* Girelli 3/12/2015: DataTable bottone "column visibility" sulla destra */
div.dt-buttons {
    position: absolute;
    top: -32px;
    left: 80%;
}
/* Posizione tasto "+" per mostrare colonne nascoste */
table.dataTable.dtr-inline.collapsed > tbody > tr > td:first-child:before, table.dataTable.dtr-inline.collapsed > tbody > tr > th:first-child:before {
    top: 0px;
}
/* Barra grigio scuro al mouse over su griglia */
tbody#ResultBody > tr:hover {
    background-color: #dedede;
}
/* puntatore manina su intestazione risultati griglia search */
#ResultHead > th {
    cursor: pointer;
}
/*joeyelrassi 18032022*/
.ResultTable > thead > tr:first-child > th:first-child {
    border-top-left-radius: 8px;
}
.DetailTableTab ~ .dataTables_wrapper > .ResultTable > thead > tr > th:first-child {
    border-top-left-radius: 0px;
}
.ResultTable > thead > tr:first-child > th:last-child {
    border-top-right-radius: 8px;
}
table.ResultTable thead.fixed, table.ResultTable thead.fixed > tr:first-child {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}
#ResultHead > th > i {
    color: white;
    margin: 0 2px 0 4px;
}
#ResultHead {
    height:28px;
}

.GridInfoContainer {
    display: flex;
    justify-content: space-between;
}

.campi-ordinamento-wrapper {
    display: none;
    justify-content: flex-end;
    position: absolute;
    right: 0px;
}

.GridLabelAndBannerContainer:empty ~ .campi-ordinamento-wrapper {
    bottom: 100%;
}

.GridLabelAndBannerContainer:not(:empty) {
    min-height: 32px;
}

div.fullScreen .campi-ordinamento-wrapper {
    display: none !important;
}

.campi-ordinamento-wrapper-s {
    width: 100%;
}

.campi-ordinamento-wrapper > .btn {
    margin-right: 10px;
    height: 30px;
}
.campi-ordinamento-wrapper-s > .btn {
    top: -36px;
}
/* Bottone per ordinamento campi search result */
.btn.gridSort, .btn.gridFields, .btn#btn_helpUserSort {
    position: relative;
    z-index: 10;
    display: none;
}

.btn#btn_searchSort, .btn#btn_selectFields {
    display: block;
}

/* Icona tipo ordinamento ASC o DESC */
ul#sortFieldsIncluded > li > i.icon-sort, ul#fieldsIncluded > li > i.icon-sort {
    float: right;
    font-size: 16px;
}

/*nabilrafka 09042024 excluded sftp result tables to avoid text center alignment rule*/
/*joeyelrassi 11062021 added white-space nowrap so fixed header doesnt go on the other line*/
/* Intestazioni grid DataTable in Detail */
#ResultTable th, .ResultTable:not([typeid=SFTP_DL]) thead.fixed th {
    cursor: pointer;
    text-align: center;
    white-space: nowrap;
}
/* Stile frecce di ordinamento Grid DataTable */
#ResultTable th > i, .ResultTable thead.fixed th > i {
    color: white;
    margin: 0 2px 0 4px;
}

.ResultTable thead.fixed {
    z-index: 5;
}
.ResultTable thead input[type="checkbox"]{
    margin-top:0px;
}
/* Stile footer di Grid DataTable*/
#ResultTable.dataTable > tfoot > tr > td {
    border-top: #A9A9A9 1px solid;
}


#ResultTable.dataTable {
    border-left: none;
    border-bottom: none;
    border-spacing:0px;
}
    /*joeyelrassi 24062021 added a border bottom to result table body new layout fix*/
#ResultTable.dataTable.ResultTable > tbody > tr > td {
    border-bottom: 1px solid #DDD;
    border-top:0px;
}

/*joeyelrassi 25102021 align vertically input boxes in datatables*/
#ResultTable.dataTable input[type="checkbox"] {
    margin-top:0px;
}

/*nabilrafka 27102023 style of search icon in search input of datatables*/
.dataTableSearchIcon {
    position: absolute;
    top: 0px;
    left: 56px;
    height: 100%;
    display: inline-flex;
    align-items: center;
}
/*nabilrafka 27102023 to allow space for search icon inside the search input of datatables*/
.dataTables_filter input[type="search"]{
    padding-left: 24px;
}
/*nabilrafka 27102023 to allow space between combos of datatables*/
.dataTables_length {
    margin-top: 5px;
}
/* Box di ricerca MultiField in Grid */
div.GridSearchMultiField {
    position: relative;
    display: none;
    z-index: 10;
    background-color: #f6f6f6;
    width: 470px;
    text-align: left;
    padding: 4px;
    -webkit-box-shadow: 0 0 6px 2px rgba(153, 153, 153, 0.85);
    -moz-box-shadow: 0 0 6px 2px rgba(153, 153, 153, 0.85);
    box-shadow: 0 0 6px 2px rgba(153, 153, 153, 0.85);
}

div.GridSearchMultiField table.grid-search td {
    padding: 1px;
}
div.GridSearchMultiField a.add, div.GridSearchMultiField a.remove {
    padding: 0 0 0 2px;
    cursor: pointer;
}
div.GridSearchMultiField a.add > i, div.GridSearchMultiField a.remove > i {
    font-size: 20px;
    height: inherit;
    display: inline-flex;
    vertical-align: middle;
    align-items: center;
}
div.GridSearchMultiField input.searchFilter {
    display: block !important;
}

/* In fullscreen porto piu' su il box */
div.fullScreen > form > .GridSearchMultiField {
    bottom: 10px;
}
/* classe per rendere sempre visibili le perfect-scrollbar, anche senza mouseover */
.ps-container.ps-always-visible > .ps-scrollbar-y-rail, .ps-container.ps-always-visible > ps__rail-y {
    opacity: 0.6;
    visibility: visible;
}

.ps--active-x > .ps__rail-x, .ps--active-y > .ps__rail-y {
    z-index: 3;
}

footer go-top > i {
    display: initial;
}
/* Girelli 16/3/2016 */
/* Stile icona rimuovi riga di griglia */
i.row-remove {
    color: #ACACAC;
    font-size: 21px;
    margin-top: 2px;
}
/* Icona help su tab  */
i.help {
    font-size: 16px;
    position: absolute;
    right: 5px;
    color: #888;
}
/* Icona help su intestazione di griglia */
th > a > i.help {
    position: initial;
    margin-left: 4px;
    color:white;
}
/* Icona help su tab di griglia, per tenerla vicino al Tab */
.GridInfoContainer i.help {
    position: initial;
}

/*-----------------------------------------------------------------------------Page Tabs------------------------------------------------------------------------------------------*/
/* Girelli 19/04/2016: TAB delle Pagine per Component multipagina */
/* Barra orizzontale di separazione tra TAB e pagina */
/*joeyelrassi 2024 newest layout fix*/
div.PageTabList.ui-tabs > ul {
    border-radius: 0px;
    padding: 0;
    display: inline-block;
    margin-bottom: -4px;
    padding-right: 20px;
    min-height: 36px;
}
/* TAB con sfondo uguale allo sfondo della pagina */
/*joeyelrassi 2024 newest layout fix*/
div.PageTabList.ui-tabs.ui-widget > ul > li {
    background: transparent;
    display: none;
    margin-top: 0;
    margin-bottom: 0;
    border-top: 2px solid;
    margin-right: 0;
    padding: 4px 2px;
    border-radius: 0px;
}
/*joeyelrassi 2024 newest layout fix*/
div.PageTabList.ui-tabs > ul > li > a {
    font-size: 16px;
    transition-duration: 0.2s;
    transition-property: background-color;
    border-radius: 6px;
    height: 26px;
    line-height: 1;
    padding: 0px;
}
div.PageTabList.ui-tabs > ul > li > a > span {
    padding: 0.3em 0.5em;
    display: inline-block;
}
/*joeyelrassi 04062021 new layout fix*/
div.PageTabList.ui-tabs > ul > li.ui-state-active > a {
    color: white;
    cursor: default;
}

/* Bordo e background del tab visibile al mouseover e al focus */
/*joeyelrassi 01062021 adjust color according to theme   new layout fix*/
div.PageTabList.ui-tabs > ul > li.ui-state-default a:hover, div.PageTabList.ui-tabs > ul > li.ui-state-default > a:focus {
    background-color: rgba(220,220,220, 0.6); /*for now.. it should be toned down version of the color maybe*/
}
div.PageTabList.ui-tabs > ul > li.ui-state-default > a:active {
    background-color: rgba(220,220,220,1);
}
/* Girelli 18/12/2017: TabList fixed quando si scorre la pagina */
/* Header fixed in full screen */
div.PageTabList.ui-tabs.fixed {
    position: fixed;
    z-index: 990; /* Less than PageCmd */
    background-color: #fafafa;
    padding-top: 4px;
    margin-left: -4px;
    padding-left: 4px;
    width: 100%;
    top: 0px;
}
/* Header fixed in single page */

#ajax-content div.PageTabList.ui-tabs.fixed {
    top: 78px;
}

div.PageTabList.ui-tabs .nlbi.bi-gear {
    display: block;
}

/*------------------------------------------------------------------------------Sections Tabs Start--------------------------------------------------------------------------------------------*/
.ui-tabs.tabs-d {
    margin-bottom: 10px;
}
div.ui-tabs.tabs-s {
    margin-bottom: 4px;
    padding-bottom: 6px;
}

/*joeyelrassi 2024 newest layout fix*/
div.ui-tabs > ul.ui-tabs-nav[role="tablist"] {
    width: 100%;
    position: relative;
    padding: 0px;
    display: inline-block;
    margin: 0px;
}
/* Girelli 23/1/2023: if empty hide to reduce height, for section startVisible=never */
div.ui-tabs:not(.sectionBorders) > ul.ui-tabs-nav[role="tablist"]:empty {
    display: none;
}
div.ui-tabs > ul.ui-tabs-nav[role="tablist"].print {
    border-bottom: 1px solid white;
    border-right: 1px solid white;
}
div.ui-tabs > ul.ui-tabs-nav[role="tablist"].print > li {
    border-left:0px solid transparent;
    border-right:1px solid transparent;
    border-bottom:1px solid transparent;
}

/*joeyelrassi 2024 newest layout fix*/
.ui-tabs.sectionBorders {
    border: 1px solid #ddd;
    border-radius: 8px;
    background: white;
    padding-bottom: 2px;
    padding-right: 4px;
}

.ui-tabs.sectionBorders .SectionFolder {
    padding-left: 4px;
}

.ui-tabs > ul.ui-tabs-nav > li {
    background: none;
}
/*joeyelrassi 28062021 new layout fix -- edit*/
.ui-tabs > ul > li.ui-state-default, .ui-tabs > ul > li {
    border-radius: 0;
    margin: 0;
    border: none;
}
    
/*joeyelrassi 28062021 new layout fix -- edit*/
.ui-tabs > ul > li.ui-state-default:not([deleted]) {
    border-top-left-radius:8px;
}
    .ui-tabs > ul > li.ui-state-default:not([deleted]) ~ li.ui-state-default:not([deleted]) {
        border-top-left-radius: 0px;
    }
/*joeyelrassi 29062021 new layout fix section tabs*/
.ui-tabs > ul[role="tablist"] > li.ui-state-default,
.ui-tabs > ul[role="tablist"] > li.ui-state-default.ui-state-active,
.ui-tabs > ul[role="tablist"] > li.ui-state-default.ui-state-active.ui-state-hover {
    opacity: 1;
    top: -1px;
    margin-bottom: -1px;
    padding-bottom: 2px;
    border-bottom: 0;
    min-width: 140px;
    display: inline-flex; /*joeyelrassi 16092021 to align section tab icons with 100% width*/
    transition-duration: 0.3s;
    transition-property: background-color;
}
/*joeyelrassi 25102021 new layout fix*/
.ui-tabs > ul[role="tablist"] > li.ui-state-default:not(.ui-state-active) {
    top: 0px;
    border: none;
    padding-top: 3px;
}

div.ui-tabs.sectionBorders > ul[role="tablist"] > li.ui-state-default.ui-state-active,
div.ui-tabs.sectionBorders > ul[role="tablist"] > li.ui-state-default.ui-state-active.ui-state-hover {
    background: none;
    border-top: 4px solid;
}
div.ui-tabs li.ui-state-default.ui-state-hover {
    border-top-width: 0px;
}


/*joeyelrassi 28062021 new layout fix -- add*/
.ui-tabs > ul > li.ui-state-default > a {
    color: #000;
    font-size: 16px;
    width: 100%; /*joeyelrassi 02082021 commented because it creates problems with icons next to titles*/
    text-align: left;
    padding-left: 15px;
}

.ui-tabs > ul > li > a {
    font-weight: normal;
}

/*joeyelrassi 28062021 new layout fix -- edit*/
.ui-tabs > ul > li.ui-state-default:hover, .ui-tabs > ul > li.ui-state-default > a:focus {
    background-color: #eee;
    border-left: none;
    border-right: none;
}

/*joeyelrassi section headers of multitab when the tab is clicked to close it -> no background*/
div.ui-tabs > ul > li.ui-state-default.ui-state-focus > a {
    background: none !important;
}
/*------------------------------------------------------------------------------Sections Tabs End--------------------------------------------------------------------------------------------*/

/* Mazzola 6/5/2016: formattazione tabellina degli orari giornalieri timbrati da una persona */
.hourStamp {
    width: 75px;
    text-align: center;
}
/* Girelli 13/12/2019: stili per allineare la descrizione e l'indentazione del checkbox CHK e CHKSW */
div.chk {
    /* display: inline-flex; */
    min-width: 50px; /* per evitare che in grid venga schiacciato */
}
div.chk > input {
    margin: 2px 0 0 0;
}

div.chk > span.FieldRemark {
    display: table-cell
}
/* Girelli 23/9/2019: puntatore manina su testo checkbox */
label > span.FieldRemark {
    cursor: pointer;
}
/* In grid stile diverso per centratura */
table.ResultTable div.chk {
    display: table;
}
/* Stile per impedire schiacciamento larghezza */
div.chk div.bootstrap-switch-wrapper {
    min-width: 58px;
}

span.bootstrap-switch-handle-on, span.bootstrap-switch-handle-off, .bootstrap-switch-label {
    min-width: 28px;
}
/* Girelli 26/5/2016: gestione preferiti */
#favouriteManage {
    color: #a5a5a5;
    float: right;
    margin: -27px 44px 0 0;
    position: relative;
    cursor: pointer;
}
/* Ordinamento preferiti */
ul#FavouriteSort {
    list-style-type: none;
    padding: 0;
}

    ul#FavouriteSort > li {
        border: 1px solid #ddd;
        font-weight: normal;
        margin-bottom: -1px;
        cursor: pointer;
        font-size: 12px;
        background: white;
        padding-left: 4px;
    }
/* Girelli 26/5/2016: icona per cancellare un favorito */
.iFavTrash {
    position: absolute;
    right: 0px;
    font-size: 14px;
    padding: 2px 22px 2px 8px;
    color: #838383;
}

#FavouriteSort > li:hover {
    background: #eee;
}
/* Preferito da eliminare: riga in mezzo e grigio */
#FavouriteSort > li.remove, #FavouriteSort > li.remove > .iFavTrash {
    text-decoration: line-through;
}
/* Girelli 13/7/2016: stile link verifica JS */
.lightGray a.js-verify {
    color: red;
    font-weight: bold;
}
/* Girelli 29/11/2016: stile popup visualizzatore immagini */
#imageShow {
    text-align: center;
}

    #imageShow > img {
        height: 100%;
        background: url("../Disegni/hourglass.gif") no-repeat center;
        min-width: 20px;
    }
/* Mazzola 25/5/2016: tabella ts week border di destra e sinistra delle righe */
.leftBorder {
    border-left: #DDD 1px solid;
}

.rightBorder {
    border-right: #DDD 1px solid;
}

.bottomtBorder {
    border-bottom: #DDD 1px solid;
}
/* Timesheet ore attese giornaliere */
.HourExpected {
    color: #9f9f9f;
}
/* Mazzola 26/5/2016: usato nel TS weekly per festivi Sab e Dom */
.TSFestivoLightRed, input.TSFestivoLightRed[disabled] {
    BACKGROUND-COLOR: #ffaeae !important;
}
/* Mazzola 27/6/2016: spaziatura tra le celle per il ts */
.TSActivity, .TSAbsence {
    padding: 2px 2px 2px 2px !important;
    width: 38px;
}
/* Mazzola 27/6/2016: spaziatura tra i gg della settimana per il ts */
.TSWeekSpacing {
    padding-right: 2px !important;
}
/* Mazzola 7/7/2016: bordo per la settimana corrente nel pannello navigazione settimane in TSWeek */
.CurrentNavTS {
    border: solid 1px gray;
}
/* Mazzola 7/7/2016: colori settimane nel pannello navigazione settimane in TSWeek */
.TSInserting {
    color: orange;
}

.TSWaiting {
    color: lightgreen;
}

.TSApproved {
    color: green;
}

.TSMissing {
    color: red;
}

.TSInsertingBackground {
    background-color: orange !important;
}

.TSWaitingBackground {
    background-color: lightgreen !important;
}

.TSApprovedBackground {
    background-color: green !important;
}

.TSMissingBackground {
    background-color: red !important;
}
/* Mazzola 19/7/2016: zindex dei tooltip del calendar devono stare sopra a tutto. */
.dhtmlXTooltip.tooltip, .dhx_year_tooltip {
    z-index: 1051;
}

/* Mazzola 12/9/2016: bottone treeselect più piccolo */
.bts_dropdown > .btn {
    padding-left: 3px;
    padding-right: 1px;
    padding-top: 0px;
    padding-bottom: 0px;
    border-radius: 0px;
}
/* Mazzola 14/9/2016: select tree box sulla pagina senza sfondino grigio al mouse over */
.bts_dropdown > .btn-default:hover {
    background-color: white;
    border-color: #d2d7d7;
    color: #333333;
}
/* Mazzola 22/9/2016: select tree sfondino grigio al mouse over nella tendina aperta */
.bts_dropdown li label:hover {
    background-color: #a5a5a5;
}

.bts_dropdown li label:hover {
    color: white;
}
/* Mazzola 23/9/2016: bianco per combo tree  */
#tabsDepartment-1 .dropdown-toggle {
    background: white;
}

dropdown-toggle btn-default {
    background-color: white;
}

.open > .dropdown-toggle.btn-default {
    background-color: white;
}
/* Mazzola 28/9/2016: Spostate a sinistra per eliminare spazio */
.bts_dropdown ul li label {
    margin-left: -20px;
    padding: 1px 5px !important;
}
/* Mazzola 30/9/2016: per stampare la frase "Please add ReadLanguage column... " nelle chart */
.RedReadLanguage .hljs-operator .hljs-comment {
    color: red !important;
}

/*--------------------------------------------------------------Help toolTip Start--------------------------------------------------------------*/
.helpTooltipContainer {
    position: absolute;
    z-index: 999; /*nabilrafka 22012024 increased from 191 to 999 so that the help tooltip is on top of the header buttons*/
}
    .helpTooltipContainer.resourceCenter {
        max-width: 350px;
        width: 350px;
    }
    .helpTooltipContainer.helpCenter {
        max-width: 600px;
    }

.helpTooltipContainer:after {
    border-color: rgba(0, 0, 0, 0);
    border-style: solid;
    display: block;
    position: absolute;
    border-width: 10px;
    content: "";
    border-bottom-color: #FFFFFF;
    border-top-width: 0;
    top: -9px;
}
.helpTooltipContainer.left:after {
    left: 10px;
}
.helpTooltipContainer.right:after {
    right: 10px;
}

.helpTooltipContainer .tooltip-content {
    overflow: hidden;
}

.helpTooltipContainer .modal-header {
    text-align: center;
}
.helpTooltipContainer .modal-body.helpTooltip {
    padding:0px;
}
.helpGroupContainer {
    border-bottom: 1px solid #e5e5e5;
}
.helpGroupContainer:empty {
    display: none;
}
.toggleHelpGroup {
    padding: 2px 8px 2px 20px;
    margin-right: 12px;
}
.helpOptionContainer {
    padding-top: 4px;
    padding-bottom: 6px;
}
.webinarLink.helpOptionContainer {
    width:49%;
    display: inline-block;
}
.helpOption {
    display: inline-flex;
    align-items: center;
    padding: 0px 10px;
    min-height: 30px;
    cursor: pointer;
}
.helpOption > span ~ i {
    margin: 0 0 0 2px;
}
.helpOption > i {
    margin: 0 6px 0 0;
    font-size: 20px;
    transition: color 0.2s ease-in-out;
}
.webinarLink .helpOption > span {
    overflow: hidden;
    text-overflow: ellipsis;
}
.helpOption > span {
    color: #484848;
    line-height: 22px;
}
.helpGroupLabel {
    padding: 15px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-left: 4px solid transparent;
}
/*.helpGroupLabel.open {
    border-color: orange;
}*/
.helpGroupLabel > div {
    display: flex;
    flex-direction: column;
}
.groupLabel {
    font-size: 17px;
}
.groupSubLabel {
    color: lightgrey;
    font-size: 14px;
}

.helpGroupLabel > i {
    transition-duration: 0.2s;
    transition-property: transform;
}
.helpGroupLabel.open > i {
    transform: rotate(-180deg);
}

#HelpDescription {
    padding: 2px 0;
}
.tutorialHelpLink a > i, .webinarLink a > i, .feedbackLink a > i {
    margin: 0 6px 0 0;
    font-size: 20px;
}

a.helpOption {
    display: inline-flex;
    align-items: center;
    color: #484848;
    padding: 0px 10px;
    min-height: 30px;
}

.helpGroupContainer.followUs .helpOptionContainer i {
    font-size: 30px;
}
.followUs .helpOptionContainer {
    display: flex;
    justify-content: space-evenly;
}
.followUs a {
    height: 46px;
    width: 46px;
}
.bi.bi-instagram {
    background-image: linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
    background-size: 100%;
    background-clip: text;
    color: transparent !important;
}
.bi-facebook {
    color: #3b5998 !important;
}
.bi-linkedin {
    color: #0077b5 !important;
}
.bi-twitter-x {
    color: black !important;
}
.bi-youtube {
    color: red !important;
}
/*--------------------------------------------------------------Help toolTip End--------------------------------------------------------------*/
/* Tasto chiusura Tooltip */
.tclose {
    float: right;
    cursor: pointer;
    color: #888;
}
/* Stile Info Tooltip */
div.infoTooltip.ui-tooltip-content {
    background: #eee;
    color: #000;
}

.bottom .infoTooltip.ui-tooltip-content::after {
    border-color: #eee transparent;
}
/* Girelli 12/12/2016: larghezza minima search in MultiSelect */
.ui-multiselect-filter > input {
    min-width: 100px;
}
/* Mazzola 18/10/2016: barra di bottoni save,apply per le pagine di config. */
.ButtonBarFixedConfPages {
    position: fixed;
    right: 0px;
    bottom: 10px;
    z-index: 100;
    opacity: 0.9;
    border-top: 1px solid green;
}


a.image-delete {
    color: #787878;
}

/* Mazzola 17/3/2017: in pianificazione per segnalare che c'e' un holiday */
.holidayCell {
    background-color: #ffaeae !important;
}
/* Girelli 2/5/2017: nascondo div dei campi hidden dei risultati della Search e nelle griglie */
div.hiddenField {
    display: none;
}
/* Girelli 18/5/2017: TD di campi HideBlank per allineare in alto le righe che sono di fianco a celle con colspan */
.hideBlank {
    visibility: hidden;
    font-size: 0px; /* Per evitare righe bianche inutili quando non hanno a fianco una cella con colspan */
}
/* Solo l'ultima riga ha una altezza forzata per allineare in alto le righe che precedono  */
tr:last-child > td.hideBlank {
    height: 99%;
}
/* Classe di una riga di griglia duplicata */
.row-duplicate {
    background-color: #FFAAAA !important;
}
/* FieldType ScoreBar (BAR)  */
.score-bar {
    white-space: nowrap;
    display: inline-flex;
    /* width: 88px;  ----   Girelli 17/4/2024: removed to avoid the bar going over next field */
}
.score-bar i {
    font-size:16px;
    color: #fb0;
}
/* FieldType STARS */
.score-bar.STARS {
    width: 88px; 
}

/* BAR_CUSTOM */
.bar-custom .bar-bg, .bar-custom .bar-fc {
    height: 8px;
}
.bar-custom .bar-bg {
    border-radius: 4px;
    margin: 5px;
}
.bar-custom .bar-fc {
    position: absolute;
    border-radius: 4px;
    margin: 0;
}

/* Girelli 18/7/2017: padding a sinistra di PhysicalViewBanner per le griglie */
.DetailTable > span.FieldValue {
    padding-left: 10px;
}
/* Girelli 24/7/2017: stile SP nel FieldType DESC_REL */
td.section-preview {
    vertical-align: middle; /*joeyelrassi 09072021 new layout fix changed from top to middle to align icons*/
}

/* freccina combo sul lato destro */
#div_actions .dropdown-menu.dropdown-light:after {
    right: 2px;
    left: auto;
}
/* Mazzola 26/3/2018: nasconde pulsate google di full screen sulle mappe */
.gm-fullscreen-control {
    display: none;
}
/* Girelli 20/4/2018: stile ricerca rapida persona, in People Express */
#QuickRedirect input.PeopleSearch {
    width: 160px;
}
#QuickRedirect > div {
    display: flex;
    align-items: center;
}

/* Girelli 31/5/2018: banner di notifica licenza scaduta */
.InsolventAction {
    position: fixed;
    top: 110px;
    background-color: white;
    color: red;
    font-size: 20px;
    text-align: center;
    z-index: 10000;
    left: 40%;
    opacity: .8;
    padding: 0 5px;
}
/* Layout rapid letter, per contenere i testi lunghi */
ul.RapidLetter > li > ul.dropdown-menu.dropdown-light {
    max-width: 350px;
}

ul.RapidLetter > li > ul > li > a {
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 4px 10px 4px 10px;
}
/* Icone Checkbox readonly checked e unchecked */
.chkRead {
    font-size: 15px;
    color: #999;
}
/*joeyelrassi new icons*/
.bi.bi-square.chkRead{
    font-size:13px;
}
/*-------------------------------------------------------------------------KPI Panel Start-------------------------------------------------------------------------*/
/* Girelli 23/11/2018: Panel per KPI */
.panel {
    margin: 0 4px 4px 4px;
    width: initial;
    box-shadow: 0 0 1px 1px rgba(153, 153, 153, .3);
}
/*mattiapaganini 29032023 aggiunto pseudoelemento per animare kpi */
.panel:after {
    content: '';
    transition: opacity 0.2s;
    box-shadow: 0 0 6px 1px rgba(153, 153, 153, .5);
    width: calc(100% + 3px);
    height: 100%;
    display: flex;
    position: absolute;
    border-radius: 8px;
    top: 0;
    right: 0;
    opacity:1;
}

    .panel:hover:after {
        opacity: 0;
    }



.panel-heading {
    color: #484848;
    font-size: 160%;
    padding: 4px 10px;
    min-height: 30px;
}

.panel .panel-body {
    color: #484848;
    font-size: 300%;
    padding: 0px 15px 5px 15px;
    display: inline-flex;
    width: 100%;
    align-items: center;
    justify-content: center;
}
.panelText {
    flex: 0.9;
    position: relative;
    left: 5%;
}
.kpiIcon {
    font-size:100%;
    flex:0.1;
    width:20%;
}
.FieldTypeDC {
    width:80%;
}
.FieldTypeDC2 {
    font-size: 60%;
    width: 80%;
}
.ValuePositive div.FieldTypeDC2, .ValuePositive .kpiIcon {
    color: blue/*#457B9D*/;
}

.ValueNegative div.FieldTypeDC2, .ValueNegative .kpiIcon {
    color: red/*#EB5C68*/;
}
/*joeyelrassi 09122020*/
.ValueZero div.FieldTypeDC2, .ValueZero .kpiIcon {
    color: orange/*#f58a5c*/;
}
/*joeyelrassi 07012021*/
div.panel.SectionFolder.ValueZero {
    border-left: 3px solid orange/*#f58a5c*/;
}

div.panel.SectionFolder.ValuePositive {
    border-left: 3px solid blue/*#457B9D*/;
}

div.panel.SectionFolder.ValueNegative {
    border-left: 3px solid red/*#EB5C68*/;
}

/*-------------------------------------------------------------------------Gantt Start-------------------------------------------------------------------------*/
/* Mazzola 24/09/2014 : stile per la riga di checkbox di selezione del periodo da mostrare per il Gantt */
.Gantt.print *{
    border-width:4px !important;
}

.Gantt {
    height: 100%;
}

input.gantt_duration_dec, input.gantt_duration_inc {
    margin: 0;
}
/* Mazzola 4/12/2018: Nasconde bottone delete nella popup gantt */
.gantt_delete_btn_set {
    /* display:none; */
}
/* Girelli 21/12/2018: colori Checkbox */
.check_Red, .check_Red i.fa {
    color: red;
}
/*nabilrafka 29032024 gantt border radius*/
.Gantt .gantt_layout_root {
    border-radius: 8px;
}

.table-cell {
    display: table-cell;
}
/* Mazzola 1/4/2019: Per il Gantt Histogram */
/* Pallino nella colonna owner del Gantt che rappresenta una ore/persona per quel giorno */
.gantt-owner-label {
    width: 20px;
    height: 20px;
    line-height: 20px;
    font-size: 12px;
    display: inline-block;
    border: 1px solid #cccccc;
    border-radius: 25px;
    background: #e6e6e6;
    color: #6f6f6f;
    margin: 0 3px;
    font-weight: bold;
    text-align: center;
}

.gantt_resource_marker {
    text-align: center;
}

    .gantt_resource_marker div {
        min-width: 34px;
        height: 28px;
        line-height: 29px;
        display: inline-block;
        border-radius: 6px;
        color: #FFF;
        margin: 3px;
    }

    .gantt_resource_marker.workday_ok div {
        background: #51c185;
    }

    .gantt_resource_marker.workday_over div {
        background: #ff8686;
    }

div.gantt_grid_scale .gantt_grid_head_cell, div.gantt_task .gantt_task_scale .gantt_scale_cell {
    font-weight: bold;
    color: rgba(0, 0, 0, 0.7);
}

.gantt_task_progress {
    text-align: left;
}

.gantt_progress_percent {
    text-align: left;
    padding-left: 3px;
    color: white;
    display:block;
}
/* Mazzola 19/4/2019: font nella histogram view del Gantt h/hh*/
.gantt_histogram_label {
    font-size: 9px;
}
/* Mazzola 30/5/2019: per non far vedere la popup di errore */
.gantt-error {
    display: none;
}

.folder_row {
    font-weight: bold;
}

/*nabilrafka 04042024 to remove the right border of the last cell of gantt timeline*/
.gantt_layout:not(.resources_cell) .timeline_cell .gantt_task_scale .gantt_scale_cell.gantt_last_cell {
    border-right: none;
}

.gantt_grid_data .highlighted_resource, .gantt_grid_data .highlighted_resource.odd {
    background-color: rgba(255, 251, 224, 0.6);
}

.gantt_task_line {
    border-radius: 6px;
}

.gantt_task_cell.week_end {
    background-color: #e8e8e87d;
}

.gantt_task_row.gantt_selected .gantt_task_cell.week_end {
    background-color: #e8e8e87d !important;
}

.group_row, .group_row.odd, .gantt_task_row.group_row {
    background-color: rgba(232, 232, 232, 0.6);
}

.gantt_cal_template {
    overflow-y: scroll;
    height: 40px !important;
}

.resource-select-panel .gantt_layout_content {
    line-height: 35px;
    text-align: right;
    padding-right: 15px;
    overflow: hidden !important;
}

.resource-select {
    padding: 3px;
    margin-left: 13px;
}

.column_overload .gantt_histogram_fill {
    background-color: #ffa9a9;
}

.ganttButtonsContainer {
    display:inline-flex;
    float:right;
}
    div.ganttButtonsContainer > button, .ganttButtonsContainer > div {
        margin: 0 2px;
    }
    .ganttButtonsContainer > #ZoomIn, .ganttButtonsContainer > #ZoomOut, .filters_wrapper .filterGanttButton {
        cursor: pointer;
        font-size: 20px;
        margin-bottom: 0px;
    }

.ganttSlack {
    position: absolute;
    border-radius: 0;
    opacity: 0.7;
    border: none;
    border-right: 1px solid #b6b6b6;
    margin-left: -2px;
    background: #b6b6b6;
    background: repeating-linear-gradient( 45deg, #FFFFFF, #FFFFFF 5px, #b6b6b6 5px, #b6b6b6 10px );
}

.ganttScales {
    display: inline-flex;
    flex-direction: row;
}
.scaleContainer {
    display: inline-flex;
    align-items: center;
    flex-direction: row;
}
.scaleContainer ~ .scaleContainer {
    margin-left: 30px;
}
.ganttScaleLabel {
    margin-right: 6px;
}

.ganttScales .select2-container {
    width: 90px !important;
}

.ganttFilterPopup {
    position: absolute;
    z-index: 3;
    top: 100%;
}
.ganttFilterPopup .modal-header{
    padding: 15px 15px 10px;
    justify-content: space-between;
}
.filters_wrapper {
    display: inline-flex;
    align-items: center;
    margin-left: 30px;
    position: relative;
}

.filterGantt {
    display: inline-flex;
    align-items: center;
    width: 100%;
    justify-content: space-between;
}

.filterGantt .ganttFilter {
    width: 170px;
}

.GanttPeriodScale {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 2px 0;
}

.ganttFooter {
    padding-top: 4px;
    justify-content: space-between;
    display: flex;
}
    /*nabilrafka to remove bottom margin from field value buttons rule*/
    .ganttFooter .footerButtonsLeft .btn {
        margin-bottom: 0px;
    }
/*-------------------fullscreen-------------------*/
[fullscreen="1"][data-ganttid] {
    top: 0px;
    position: fixed;
    z-index: 3000;
    background-color: #ffffff;
    height: 100%;
    width: 100% !important;
    overflow: hidden;
}

[fullscreen="1"] .GanttPeriodScale {
    padding: 4px 8px 4px 2px;
}
[fullscreen="1"] .ganttFooter {
    background-color: #ffffff;
    padding: 4px 8px 4px 2px;
    width: 100%;
}
[fullscreen="1"] .ganttResizeHandle {
    display: none;
}

[fullscreen="1"] .Gantt {
    width: 100%;
}
/*-------------------------------------------------------------------------Gantt End-------------------------------------------------------------------------*/
#last-login {
    color: #838383;
}

    #last-login.login-failed {
        color: red;
    }

    #last-login.login-hidden {
        display: none;
    }

#system-message {
    color: red;
    cursor: pointer;
    float: left;
}

div.system-message {
    min-width: 60px;
    max-width: 200px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

#system-message i {
    float: right;
    margin-left: 4px;
}
/* Posizione del pulsante di Upgrade per eCommerce */
.centered {
    position: fixed;
    top: 50%;
    right: 40%;
    transform: translate(-50%, -50%);
    z-index: 5000
}
.upgradeBtnContainer {
    margin-right: 52px;
}
/* Colori e dimensioni del pulsante di Upgrade per eCommerce */
.upgradeBtn {
/*    width: 153px;
    height: 32px;
    font-size: 18px;*/
    color: white !important;
    /*opacity: 0.8;*/
}
.upgradeBtn:hover {
    opacity: 1;
}

/* Checkbox Switch CHKSW */
.bootstrap-switch {
    margin-bottom: 1px;
    border-radius: 6px;
}

.ResultTable .bootstrap-switch {
    margin-bottom: 0px;
}

label.bootstrap-switch-label {
    margin: 0;
}

.divCheckbox .bootstrap-switch .bootstrap-switch-handle-on,
.divCheckbox .bootstrap-switch .bootstrap-switch-handle-off,
.divCheckbox .bootstrap-switch .bootstrap-switch-label {
    line-height: 6px;
}

.bootstrap-switch .bootstrap-switch-handle-on, .bootstrap-switch .bootstrap-switch-handle-off, .bootstrap-switch .bootstrap-switch-label {
    font-size: 12px;
    line-height: 12px;
    padding: 6px 6px;
}
/* TimePicker Bootstrap */
.input-group-addon {
    padding: 0 2px;
    background-color: transparent;
    color: #787878;
    font-size: 18px;
    border: 0;
    cursor: pointer;
    float: left;
}

div.timepicker {
    display: inline-flex;
}
div.timepicker .input-group-addon {
    display:inline-flex;
}
/* Girelli 24/9/2019: stile freccia del detail-link di riga di griglia */
td.DetailLink i.fa-angle-right {
    font-size: 20px;
    line-height: 15px;
    margin: 0 4px;
}

td.DetailLink > a {
    padding: 4px 2px;
}
/* Stile Editor CodeMirror */
.CodeMirror {
    border: 1px solid #D2D7D7;
    height: 100px;
    width: 95%;
    margin-bottom: 2px;
}
/* Stile Physical View refresh link */
div.PhysicalViewBanner {
    padding-bottom: 4px;
}

div.PhysicalViewBanner > .FieldValue {
    color: blue;
    font-style: italic;
    display: flex;
    align-items: center;
}

    div.PhysicalViewBanner > .FieldValue > a {
        margin: 0 2px 0 0;
    }

/*button.WR_UPDATE {
    margin-top: 2px;
}*/
/*------------------------------------------------------------------------Department Time Plan People Start------------------------------------------------------------------------*/
/* Stile combo per iPad e in generale per combo semplici */
/*select.minimal, */.select2.form-control.minimal, .ui-datepicker-month, .ui-datepicker-year {
    -webkit-appearance: none;
    padding-right: 24px;
    background-image: linear-gradient(45deg, transparent 50%, #444 50%), linear-gradient(135deg, #444 50%, transparent 50%), linear-gradient(to right, #ccc, #ccc);
    background-position: calc(100% - 10px) 12px, calc(100% - 5px) 12px, calc(100% - 2.5em) 20px;
    background-size: 5px 5px, 5px 5px, 1px 1.5em;
    background-repeat: no-repeat;
    padding-left: 2px;
}
/* Solo per Pianificazione combo Overtime */
/* Attenzione: per Safari è importante l'ordine delle classi */
select.DepartmentTimeCollabInput.minimal {
    width:100%;
}

/* Mazzola 26/2/2016: Stili per DepartmentTimePlan */
/* celle della tabella */
table.DepartmentTimePlan td {
    padding: 3px 3px 2px 3px;
    BORDER-BOTTOM: thin;
    vertical-align: top;
    BORDER: #DDD 1px solid;
}
table.DepartmentTimePlan thead td {
    vertical-align:middle;
}

.SmallFont {
    font-size: 11px;
}
/* righe violetto dei department */
.DepartmentRow {
    background-color: #edeeff;
}
/* righe dei totali di un collaboratore */
.DepartmentCollabTotalRow {
    background-color: #f9f9f9
}
/* Permessi in stato request */
.DepartmentCollabTotalRow div.request {
    background-color: #FAA;
    cursor: default;
}
/* Cella department pianificazione negozi */
.DepartmentCollabTime {
    color: #80848e !important;
}
/* Icona popup WorkArea */
.DepartmentCollabTime .departmentOptions {
    font-size: 18px;
    cursor: pointer;
    width: 14px;
    color: #d0d0d0;
    text-align: center;
}
.DepartmentCollabTime .departmentOptions:hover {
    color: #acacac;
}
.DepartmentCollabTime .departmentOptions[hasWorkArea],
.DepartmentCollabTime .departmentOptions[hasNote] {
    color: #66f;
}
.DepartmentCollabTime .departmentOptions[hasWorkArea]:hover,
.DepartmentCollabTime .departmentOptions[hasNote]:hover {
    color: blue;
}

.DepartmentTimePlanRed {
    color: red !important;
}

.DepartmentTimePlanBlue {
    color: blue !important;
}

.DepartmentTimeCollabCell {
    min-width: 26px !important;
    text-align: center;
}

.DepartmentTimeCollabInput {
    background-color: #ddffdd !important;
    text-align: left;
    outline:none;
}
    .DepartmentTimeCollabInput.FTECell {
        text-align: center;
    }

input.DepartmentTimeCollabInput.timepicker {
    min-width: 50px;
    width: 54px;
    text-align: center;
    /* padding-right: 18px;*/ /* Girelli 2/9/2022: disabilitato, spostare a sinistra e riallargare solo se si riattiva la X con attributo inputClear */
}

.DisabledCellDepartmentTimeCollab {
    background-color: #f9f9f9 !important;
}

/* Girelli 14/4/2016: Checkbox di PeopleGroup Rapid Edit */
input.peopleGroupMember, input#PeopleGroupMember_Select {
    margin-top: 0px;
}

#PeopleGroupOption {
    display:inline-flex;
    align-items:center;
    margin-top:4px;
}
#PeopleGroupOption > input, #PeopleGroupOption > label {
    margin-top: 0;
    margin-bottom:0;
    margin-right:2px;
}
#PeopleGroupOption > label {
    margin-right: 4px;
}

#PeopleGroupNew, #PeopleGroupEdit {
    margin-top: 16px;
}
#PeopleGroupNew > table > tbody > tr {
    height:28px;
}
#tabsDepartment-1 tbody > tr {
    height: 28px;
}

    #tabsDepartment-1 tbody > tr span.Label {
        margin-right: 4px;
    }
/*------------------------------------------------------------------------Department Time Plan People End------------------------------------------------------------------------*/
/* Girelli 18/12/2019: solo in griglia, icona link_text sulla destra */
.ResultTable a.LINK_TEXT > div {
    width: -webkit-calc(100% - 34px);
    width: calc(100% - 34px);
}
/* Girelli 27/2/2020: Fix per passaggio a Bootstrap 4.3.1 */
[class^="icheckbox_"], [class*="icheckbox_"], [class^="iradio_"], [class*="iradio_"] {
    margin: 0 4px 0 0 !important;
}



.headerButtons button.btn, #PageButtonStandard button.btn {
    position: relative;
}

.headerButtons button.btn:hover:after, #PageButtonStandard button.btn:hover:after {
    opacity: 0;
}

.headerButtons button.btn:after, #PageButtonStandard button.btn:after {
    content: '';
    position: absolute;
    transition: opacity 0.2s;
    display: flex;
    z-index: -1;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    box-shadow: 0 4px 12px 0px rgba(153, 153, 153, .5);
    -webkit-box-shadow: 0 4px 12px 0px rgba(153, 153, 153, .5);
    opacity:1;
}


/* Icona per gestire i PageTab */
#pageTabButton {
    float: right;
    position: absolute;
    right: 0px;
    top: 5px;
}
#pageTabButton>button {
    border: 0;
    padding: 0;
    background-color: transparent;
}

div.PageTabList.ui-tabs.fixed #pageTabButton {
    display: none;
}

/*joeyelrassi 09102020 added fadeout transition effect and applied to splash*/
@-webkit-keyframes fadeout {
    from {
        opacity: 0.8;
    }

    to {
        opacity: 0.3;
    }
}

#splash {
    width: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 2000;
    background-color: white;
    opacity: 0.3;
    -webkit-animation: fadeout 5s linear 1 normal forwards;
    max-height:calc(100vh - 78px);
    height:100%;
}

#splash > img{
    height:100%;
    width:100%;
}
/* Stile combo di Calendar */
.dhx_cal_light select {
    padding: 0;
}

tfoot button.btn {
    margin-bottom: 4px;
}

/* Girelli: 13/10/2020: Timesheet mode: icona per passare da List a Grid */
div#TsMode {
    float: right;
    color: #888;
    cursor: pointer;
    font-size: 24px;
    position: relative;
    top: 0;
    right: 14px;
}

/*------------------------------------------------------------------ChartJs Start------------------------------------------------------------------*/
/*joeyelrassi 16102020 for doughnut chart*/
.donutHiddenElement, .hiddenLegendElement {
    text-decoration: line-through;
}

.chartjs-render-monitor{
    width:100% !important;
}

.ChartTitle {
    display: block;
    font-size: 16px;
    margin-bottom: 4px;
    padding-left: 4px;
}
.labelTitle {
    color: #484848;
    display: block;
    float: left;
    font-size: 13px;
    font-weight: 600;
    margin-right: 5px;
}

.fullscreenChartComboContainer {
    position: relative;
    width: 100%;
    z-index: 999;
    display: block;
}

.fullscreen div.legend-container {
    bottom: 4px;
    position: absolute;
}

.fullscreen .legend-container .vChartLegend {
    margin-bottom: 0px;
}

.fullscreen .legend-container .vChartFooterIconsContainer {
    margin: 0px 4px 0px 0px;
}

.vChartLegend {
    display: inline-flex;
    justify-content: flex-end;
    flex-direction: column;
    position: relative;
    padding-left: 4px;
    margin-bottom: 10px;
}
.legendLabel span {
    border-radius: 6.5px;
    width: 13px;
    height: 13px;
    margin: 2px;
    float: left;
}
.legendLabel {
    display: inline-block;
    margin-right: 10px;
    float: left;
    font-size: 13px;
    transition-property: opacity;
    transition-timing-function: linear;
    transition-duration: 400ms;
    position: relative;
    cursor: pointer;
    user-select: none;
}
.vChartFooterIconsContainer {
    padding-left: 5px;
    display: flex;
    align-items: flex-end;
    margin-bottom: 10px;
}

span.vChartLabelToggler {
    display: inline-flex;
    width:110px;
    cursor: pointer;
    margin-top:5px;
}
.vChartHiddenLabels {
    display:block;
}
    .vChartHiddenLabels .legendLabel {
        opacity: 0;
        display: none;
    }
.vChartVisibleLabels {
    display:inline;
}
.scrollableAreaContainer {
    position:relative;
    overflow:hidden;
}
    .scrollableAreaContainer > canvas {
        position: absolute;
        top: 10px; /*joeyelrassi 12072022 10px instead of 0 since chart container has margin-top 10px*/
        left: 0px;
        pointer-events: none;
        display: none;
        background: #fafafa;
    }
.setCustomScroll[fullscreen="1"] ~ canvas.FixedYAxes {
    top: 0px;
    background: rgb(255, 255, 255);
}



.legendLabel .vChartLegendTooltip {
    width: 32px;
    height: 26px;
    background-color: #555;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    bottom: 115%;
    left: 50%;
    margin-left: -16px;
    visibility: hidden;
    opacity: 0;
    transition: opacity 400ms;
}

    .legendLabel .vChartLegendTooltip::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 50%;
        margin-left: -5px;
        border-width: 5px;
        border-style: solid;
        border-color: #555 transparent transparent transparent;
    }


.HistBottomRangeCombo {
    width:100%;
    padding-right: 4px;
}
.fullscreen .HistBottomRangeCombo {
    position: absolute;
    bottom: 30px;
    padding-right: 0px;
}
/*------------------------------------------------------------------ChartJs End------------------------------------------------------------------*/
/*------------------------------------------------------------------Panel Graph Start------------------------------------------------------------------*/
/*joeyelrassi 20112020 for graph panel*/
.WebPanelGraphRiga input[type=checkbox] {
    display: none;
}

.PanelCell0Graph .PanelCellGraph {
    display: inline-block;
    width:100%;
}

.PanelDivGraph {
    float: left;
    position: relative;
    display: inline-block;
    min-height: 85px;
    border-left: 0.25px solid lightgrey;
    border-bottom: 1px solid lightgrey;
    min-width:110px;
    margin-bottom:3px;
}
.PanelDivGraph-Fixed {
    float: left;
    position: relative;
    display: inline-block;
    min-height: 85px;
    box-shadow: 0 0 3px 0 lightblue;
    border: 1px solid cyan;
    border-top-left-radius: 5px;
    min-width: 110px;
    margin-bottom: 3px;
}

    .PanelDivGraph:hover {
        background-color: aliceblue;
    }

.PanelDivGraph a{
    display: block;
    height: 100%;
}


.PanelDivGraph div:first-child, .PanelDivGraph-Fixed div:first-child {
    font: 40px bold;
    min-height: 50px;
}
.PanelDivGraph div:nth-child(2), .PanelDivGraph-Fixed div:nth-child(2) {
    width: 100%;
    min-height: 35px;
}


.PanelDivGraph div span, .PanelDivGraph-Fixed div span {
    position: absolute;
    left: 5px;
    width:100px;
    white-space:break-spaces;
    text-align:left;
}

.selectedDiv {
    border-bottom: 1px solid transparent;
    box-shadow: 0px 3px lightblue;
}
/*------------------------------------------------------------------Panel Graph End------------------------------------------------------------------*/

/*joeyelrassi griddatatable 24112020*/
#ResultTable.resultTableCustom th {
    background-color: white;
}
    #ResultTable.resultTableCustom th > i {
        color: black;
    }

#ResultTable.resultTableCustom .ColumnHeader {
    color: black !important;
}

#ResultTable.resultTableCustom tbody td span.sp {
    float: none;
}

table.resultTableCustom tr > td.ListCellGroup{
    border-left: none;
    border-right:none;
}

table.resultTableCustom tr.RicercaRiga1, table.resultTableCustom tr.RicercaRiga2{
    transition:none;
}
.ChatGrid > .dataTables_wrapper > .dataTable > thead {
    background: transparent;
}
.ChatGrid > .dataTables_wrapper > .dataTable > thead > tr > th > .ColumnHeader,
.ChatGrid > .dataTables_wrapper > .dataTable > thead > tr > th > a > i.help {
    color: black;
}
.ChatGrid > .dataTables_wrapper > .dataTable > tbody > tr > .ChatColumn > table {
    padding: 30px;
    border-radius: 12px;
    min-width: 300px;
}
.ChatGrid > .dataTables_wrapper > .dataTable > tbody > tr > .ChatColumn.EMPTY_CELL > table {
    display: none;
}
.ChatGrid > .dataTables_wrapper > .dataTable > tbody > tr > td {
    border-left: 0px;
    border-right: 0px;
}
.ChatColumn {
    background-color: transparent !important;
}
.ChatColumn > table {
    background-color: rgb(230, 242, 230);
}
.ChatColumn.User > table {
    background-color: rgb(238, 238, 238);
}
/*----------------------------------------------------------------------------SideBar and Widgets Start----------------------------------------------------------------------------*/
/*joeyelrassi 12012021*/
.sidebar-button {
    width: 35px;
    height: 42px;
    float: left;
    position: fixed;
    z-index: 1029;
    top: 36px;
    cursor: pointer;
}

div.closedbar {
    /*pointer-events: none;*/
    border-radius: 0 0 0 0;
    top: 36px;
    background: #fafafa !important; /*ariannaboisseau 271023 changed background stop whitesmoke*/
    bottom: 0px;
    z-index: 190;
}
div.closedbar:hover {
    background: #fafafa !important;
}
/*ariannaboisseau 271023 new open/close icon in left sidebar*/
    div.closedbar i.closedbarIcon {
        font-size: 16.9px;
    }
/*joeyelrassi 07112023 override styles.css*/
.closedbar i {
    padding-top: 0px;
}

.closedbarIconContainer {
    display: inline-flex;
    width: 100%;
    height: 42px;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}
/*joeyelrassi 01062021 sidebar user foto widget*/
div.widget-container img.sidebar-widget {
    width: 26px;
    height: 26px;
    border-radius: 50%;
}

/*joeyelrassi 26112020 for sidebar and widgets*/
.widget-container {
    position: relative;
    display: flex;
    width: 35px;
    z-index: 194;
    text-align: center;
    height:100%;
    flex-direction:column;
    align-items:center;
}

/* Girelli 13/1/2021: aggiunto zmdi per font Material Design */
div.widget-container .widgetIconContainer > i {
    position: relative;
    display: flex;
    font-size: 18px;
}

div.widget-container .widgetIconContainer > i.zmdi {
    font-size: 22px;
}

.single-widget {
    cursor: pointer;
    display: flex;
    justify-content: center;
    margin-bottom: 3px;
    position: relative;
    transition: top 1s ease 0s, left 0.5s ease 0.5s;
    top: -1000px;
    left: 150px;
}

.single-widget:hover .sidebar-widget.userPic {
    transform: scale(1.2);
    transition-duration: 1s;
    transition-property: transform;
}

.widgetIconContainer{
    display: flex;
    align-items: center;
    justify-content: center;
}

/*joeyelrassi adding opened menu style*/
.widgetModal .modal-body {
    padding: 0;
}
.widgetModal .modal-header {
    text-align: left;
}
div.single-widget > ul.submenu, div.single-widget > .widgetModal {
    left: 35px;
    top: auto;
    opacity: 0;
    transition-delay: .3s;
    visibility: hidden;
    border-radius: 6px;
    display: none;
    position: absolute;
}
div.single-widget:hover > ul.submenu, div.single-widget:hover > .widgetModal {
    opacity: 1;
    visibility: visible;
    transition-delay: .3s;
}
.widgetModalContent {
    list-style: none;
    float: left;
    padding: 0;
    text-align: left;
    margin-top: 10px;
    min-width: 160px;
}
.widgetModalContent > li > a {
    display: block;
}
/*mattiapaganini 16062023 added background-color and cursor on leaf widget, folder icon aligned*/
div.single-widget ul li:hover {
    background-color: #f5f5f5;
}

.single-widget .fa.fa-folder-open {
    margin-left: 3px;
}

.single-widget ul > li.widgetTitle-container {
    text-align: left;
    font-weight: bold;
    padding: 4px 15px 4px 15px;
    white-space: nowrap;
    cursor:pointer;
}

.tooltip-text{
    display:inline-block;
}

.tooltip-text-leaf {
    text-align: left;
    padding: 4px 30px 4px 15px;
    white-space: nowrap;
    font-size: 13px;
}

.widgetModalContent li > a > i.icon-arrow {
    position: absolute;
    right: 10px;
    font-family: FontAwesome;
    font-style: normal;
    color: #1d1d1d;
    transform: rotate(-90deg);
}
.widgetModalContent li:hover > a > i.icon-arrow {
    transform: rotate(-270deg);
}
    .widgetModalContent li > a > i.icon-arrow:after {
        content: "\f107";
    }

/*joeyelrassi gestionePref sign*/
#favouriteManageClosed {
    top: 3px;
    float: right;
    position: relative;
    cursor: pointer;
    color: #a5a5a5;
}
/*----------------------------------------------------------------------------SideBar and Widgets End----------------------------------------------------------------------------*/

/*joeyelrassi 20012021 menufolder dots*/
span.dotClass {
    display: inline-block;
    margin: 1px 6px 1px 14px;
    background-color: #CCC;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    position: relative;
}




/*joeyelrassi 10122020 button width*/
#btn_back_2-button, #btn_apply-button, #btn_applyh-button, #btn_save-button, #btn_saveh-button, #btn_search-button {
    width: 112px;
}
/*joeyelrassi 11122020 per foldermenu icons*/
.menuIconBig {
    font-size: 26px;
    position: relative;
    padding-top: 5px;
    margin-left: 5px;
}
.menuIconBig.zmdi {
    font-size:31px;
}
.titleIconBig {
    font-size: 26px;
    position: relative;
    padding-top: 5px;
    margin-right:8px;
}

/*joeyelrassi 07012021 */
#LogoLink {
    height:36px;
}



/*-------------------------------------------------------------------------------PageCmd Start-------------------------------------------------------------------------------*/
#ajax-content.test {
    background:grey;
}
/*joeyelrassi 11062021 when right menu is open, cmd doesnt need the top 82px*/
.main-container:not(.inner-transform) #ajax-content > .PageCmd {
    top: 82px;
}

/* Girelli 07/04/2014: Stile delle azioni di pagina, spostato fuori dai template e aggiunto effetto bottone  */
.PageCmd {
    top: 4px;   /*joeyelrassi 11062021 changed top to 4px from 6px so on right menu toggle it doesnt move up/down*/
    position: fixed;
    display: inline-flex; /* Girelli 27/7/2015: in desktop le icone in alto a destra sono sempre visibile, non scorrono */
    right: 1.5%;
    z-index: 999;
    border-radius: 6px;
    height: 34px;
    background-color: rgba(250,250,250,0.8);
    align-items:center;
}

.PageCmd > *:empty{
    display:none;
}

.PageCmd > *:not(script) {
    margin: 0 2px;
    float: left;
    position:relative;
    display:flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s;
} 



.PageCmd > a, .PageCmd .lastViewed {
    font-size: 22px;
    cursor:pointer;
}

.PageCmd > a > i, .PageCmd .lastViewed a i{
    display:flex;
}

/*joeyelrassi 15012021*/
.PageCmd > ul a {
    cursor: pointer;
}

/* Girelli 26/7/2017: stile bordato sul tasto combo lingue al mouseover */
li.current-user .dropdown-toggle > span {
    padding: 3px;
    border: 1px Solid transparent;
    border-radius:6px;
}



#expand-actions > .btn:hover > i.fa {
    color:white;
}

.PageCmd > a.helpIcon > i.help {
    font-size:22px;
}
span.Label a.helpIcon {
    margin-left:4px;
}
span.Label a.helpIcon i.help {
    position:relative;
    right:0px;
}
/*-------------------------------------------------PageCmd LastViewed Start-------------------------------------------------*/
.PageCmd > .lastViewed > li > .lastViewedIcon {
    display: flex;
    align-items: center;
    padding: 0;
    position: relative;
    top: 1px;
}

.PageCmd > .lastViewed > li > .lastViewedIcon:hover {
    background: none;
}

/*joeyelrassi 15012021 for last viewed*/
#LastViewed_container {
    display: none;
    position: absolute;
    right: -10px;
    z-index: 1000;
    min-width: 166px;
    max-width: 300px;
    margin-top: 10px;
    font-size: 14px;
    transition-delay: 1s;
}
#LastViewed_container:after {
    border-color: rgba(0, 0, 0, 0);
    border-style: solid;
    display: block;
    height: 0;
    position: absolute;
    width: 0;
    border-width: 10px;
    content: "";
    border-bottom-color: #FFFFFF;
    border-top-width: 0;
    top: -10px;
    right: 10px;
}
#LastViewed_container .modal-body {
    padding: 0px;
}

#last-viewed {
    position: relative;
    width: 100%;
}
#last-viewed > li {
    float: none;
}
/*-------------------------------------------------PageCmd LastViewed End-------------------------------------------------*/
/*-------------------------------------------------PageCmd Component Linki and quick actions Start-------------------------------------------------*/
#ComponentLink > li, .quick-last-items > .dropdown, .RapidLetter > .dropdown {
    display: flex;
    align-items: center;
}

#ComponentLink > li > a.rapid-actions, .quick-last-items > .dropdown > a.rapid-actions, .RapidLetter > .dropdown > a.rapid-actions {
    padding: 0;
    display: flex;
    align-items: center;
}

.quick-last-items > .dropdown > a.rapid-actions > span, .RapidLetter > .dropdown > a.rapid-actions > span {
    display: flex;
    align-items: center;
    height: 32px;
    justify-content:center;
}

/* Last Items di QuickRedirect */
.PageCmd > ul.quick-last-items {
    margin-left: -15px;
    z-index: 5;
    width: 25px;
}

ul.quick-last-items > .dropdown > a.rapid-actions > span {
    height: 26px;
    position: relative;
    width: 20px;
    border-radius: 6px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border: 1px Solid #D2D7D7;
    padding: 0;
    background-color: white;
    transition-property: border-color;
    transition-duration:300ms;
    transition-timing-function:ease-in-out;
}
ul.quick-last-items > li.dropdown > a.rapid-actions > span:hover {
    background-color: #e9e9e9;
}
#QuickRedirect {
    z-index: 4;
}

/* Girelli 26/7/2017: stile combo Rapid Actions in Icon bar a destra */
a.rapid-actions {
    background-color: transparent !important;
    border: 1px solid transparent !important;
    height: 32px;
}

    a.rapid-actions > span {
        float: left;
        color: #484848;
        font-size: 12px;
    }

#ComponentLink a.rapid-actions > span > i, .RapidLetter a.rapid-actions > span > i {
    margin-left: 6px;
}

    a.rapid-actions:focus, a.rapid-actions:hover {
        background-color: transparent !important;
    }

ul.rapid-actions-menu {
    max-height: calc(100vh - 150px);
    overflow-y: overlay;
}
/*-------------------------------------------------------------------------------PageCmd End-------------------------------------------------------------------------------*/

    /*joeyelrassi 19012021 per dettaglio text*/
    .dot {
        width: 15px;
        display: inline-block;
        height: 15px;
        border-radius: 50%;
        position: relative;
        top: 2px;
        margin-right: 5px;
    }
/*joeyelrassi 19012021 for section toggle*/
.section-toggle{
    float:right;
    margin-bottom:10px;
}

.section-toggle .FooterTableIcon {
    width: 22px;
    height: 22px;
    font-size: 22px;
}

/*joeyelrassi 20012021 main container fix*/
.main-wrapper > .main-container {
    margin-top: 78px !important;
    min-height: calc(100vh - 128px); /*joeyelrassi 07062021 for onload so the footer is at the bottom*/
    overflow: hidden; /*joeyelrassi 06072021 so the splash screen does not make the side bar appear*/
}
.main-wrapper > .main-container.hidePageNavigation {
    margin-top: 36px !important;
}

.main-wrapper {
    overflow: hidden;
}

/*joeyelrassi 20012021 create a white space */
.space-div {
    height: 1px;
    display: block;
    position: fixed;
    background-color: white;
    z-index: 5;
}
/*joeyelrassi 20012021 make widget star icon bigger*/
div.widget-container i.fa.fa-star-o.sidebar-widget {
    font-size: 20px;
}
/*joeyelrassi 20012021 horizontal menu search icon set to white*/
/*ariannaboisseau 261023 changed search icon from zmdi-search to bi-search for consistency*/
#horizontal-menu .MenuSearch .bi-search {
    /*color: #1d1d1d;*/
    color: white;
}
.sectionFieldButton{
    display:none;
    padding-top: 4px;
}


/*joeyelrassi 13072021 i icon on the right side of the cell*/
.ListCellGroup > .SectionPreviewIcon {
    float:right;
}

/*---------------------------------------------------------joeyelrassi 12112021 pageslide-left---------------------------------------------------------*/
nav#pageslide-left .navigation-toggler {
    height: 32px;
    /* Girelli 22/10/2014: fix per allineare Top del menu laterale con Menu Orizzontale */
    margin-bottom: 4px;
}
/* Girelli 08/01/2015: colori nome utente e timezone */
#pageslide-left .user-profile h5 {
    color: #1d1d1d;
}

#pageslide-left .user-profile h6 {
    color: #aaaaaa;
}

/* Girelli 20/11/2014: Area di click di apertura menu laterale piu' ampia */
/* Girelli 13/01/2015: tasto chiudi del menu laterale in position fixed, per essere sempre visibile anche su menu che scrolla */
#pageslide-left .navigation-toggler .sb-toggle-left {
    float: right;
    position: fixed;
    left: 0px;
    top: 36px;
    opacity: 1;
    width: 260px;
    height: 42px;
    /*background: url(../images/dark-grey-trans.png) no-repeat right center;*/
    background:none !important; /*ariannabosseau 271023 removed background*/
}

/*ariannaboisseau 271023 new icon to open/close left sidebar*/
#pageslide-left .navigation-toggler .sb-toggle-left i {
    font-size: 16.9px;
    display: flex;
    align-content: center;
    justify-content: center;
    float: right;
    margin-top: 12.55px;
    margin-right: 8px;
}
.sb-toggle-left.disabled {
    pointer-events: none;
}
#pageslide-left .user-profile .user-options {
    border-radius:50%;
}
/* Background della freccia utente loggato */
#pageslide-left .user-profile .user-options.open {
    background: #e9e9e9;
    border-radius: 50%;
}
#pageslide-left .navbar-content /*.left-wrapper*/ {
    min-height: calc(100vh - 36px); /*36 is the top padding*/
}
#pageslide-left div.slide-tools {
    bottom: -50px;
}
#pageslide-left div.slide-tools.transparent {
    background-color: transparent;
    bottom: 0px;
}
#pageslide-left div.slide-tools.color {
    overflow: hidden;
}
/*ariannaboisseau 051023 added margins to left and right of the buttons*/
#pageslide-left .slide-tools .btn {
    margin-left: 6px;
    margin-right: 6px;
    transition: none !important;
}
/*joeyelrassi 14052021 color of the text in the buttons of left-side toggle footer (override the default style grey)*/
#pageslide-left .slide-tools.color .btn {
    color: white;
    position: relative;
}
/*---------------------------------------------------------joeyelrassi 08072021 topbar tools/headermenu start-----------------------------------------------------------*/
.topbar .container div.navbar-header {
    margin: 0 auto 0;
}

.navbarBodyContainer {
    display:flex;
    flex-direction:row;
    margin-left:270px;
    justify-content:space-between;
    align-items:center;
    max-height:36px;
}
.navbarBodyContainer .topbar-debug {
    max-height:36px;
    min-width:120px;
}
.topbar .container div.topbar-tools {
    margin-top: 0;
}

#headerMenu {
    display: inline-flex;
    align-items: center;
    height: 100%;
}

#headerMenu > li:empty {
    display: none;
}

/* Girelli 24/09/2014: Stile barra in header */
.topbar-tools span {
    font-size: 12px;
}

/*ariannaboisseau 051023 added cursor: pointer*/
ul#headerMenu > li > a {
    padding: 2px 6px;
    color: #838383;
    cursor: pointer;
}

ul#headerMenu > li:not(.right-menu-toggle) > a {
    margin-right: 4px;
}

ul#headerMenu > li.right-menu-toggle > a {
    line-height: normal;
    height: 100%;
    padding-left: 16px !important;
}

ul#headerMenu > li:not(.right-menu-toggle):not(.other) > a, ul#headerMenu > li.right-menu-toggle > a i.bi-bell {
    transition-duration: 0.2s;
    transition-property: background-color;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 26px;
}
#activeproducts {
    z-index: 3;
}
#activeproducts .badge-default {
    background: #EB5C68 !important;
}
/*joeyelrassi 03112021 to perfectly align horizontally header menu*/
.headerMenuContainer {
    display: flex;
    align-items: center;
    height: 18px;
}
/*joeyelrassi 07022021 default position */
.headerMenuLabel, .headerMenuContainer > span {
    padding-left: 3px;
    display: flex;
    height: 16px;
}
.other .headerMenuContainer > span {
    align-items: center;
}
/*joeyelrassi 07022021 default position */
.headerMenuIcon {
    display: flex;
    justify-content: center;
    font-size: 13px;
    height: 14px;
    /*mattiapaganini 21032023 added align-items: flex-start*/
    align-items : flex-start;
}

/* Mazzola 01/10/2014: colore del mondo all'estrema destra , colore della freccia down per le lingue */
#headerMenu .bi-bell, #headerMenu .fa-caret-right:before, #headerMenu .fa-caret-down:before {
    color: #838383;
}
/*-------------------------------language dropdown start-------------------------------*/
ul#headerMenu:not(.contracted) > li.languageDropdown.current-user > a.dropdown-toggle {
    color: #838383;
    line-height: unset !important;
    height: 26px;
    cursor: pointer;
}
ul#headerMenu > li.languageDropdown.current-user > a .headerMenuContainer > div {
    display: inline-flex;
    line-height: 0;
    flex-direction: row;
    align-items: center;
    height: 18px;
}
ul#headerMenu > li.languageDropdown > a .headerMenuLabel {
    padding-right: 4px;
    align-items:center;
}
/*joeyelrassi 14122020*/
ul#headerMenu > li.languageDropdown.current-user > a.dropdown-toggle i.fa {
    margin-left: 0px;
}
/*-------------------------------language dropdown end-------------------------------*/
/*-------------------------------contracted menu start-------------------------------*/
#headerMenu.contracted .headerMenuLabel {
    display:none;
}
#headerMenu.contracted .headerMenuIcon {
    font-size:16px;
    padding-right:0;
    align-items:center;
}

#headerMenu.contracted .headerMenuIcon.fa-question, #headerMenu.contracted .headerMenuIcon.bi-arrow-repeat {
    font-size:18px;
}

#headerMenu.contracted > li > a {
    height:26px;
    display: flex;
    align-items: center;
}
/*-------------------------------contracted menu end-------------------------------*/
/*-------------------------------other dropdown start-------------------------------*/
/* Girelli 03/10/2014: Tendina lingue, Other e LastViewed Other con background bianco */
#languages li,
#headerMenu > .other > ul > li,
#other > ul > li {
    background: white;
}
/* Freccia tendina HeaderMenu - Other */
#headerMenu > .other {
    line-height: 36px;
    width: 30px;
    padding: 0 0 0 0;
}

    #headerMenu > .other > ul.dropdown-menu {
        transition-duration: 0.2s;
        transition-property: display;
        margin: 2px -3px 0;
    }

    #headerMenu > .other > a {
        display: flex;
        justify-content: center;
        border-radius: 50%;
        transition-duration: 0.2s;
        transition-property: background-color;
        width: 26px;
    }

    #headerMenu > .other .separator {
        display: none;
    }

    #headerMenu > .other .languageDropdown .headerMenuContainer > div,
    #headerMenu > .other .languageDropdown .headerMenuContainer > div > .headerMenuLabel {
        display: inline-flex;
        align-items: center;
    }
    #headerMenu > .other .languageDropdown .headerMenuContainer > div > .headerMenuLabel {
        margin-right: 4px;
    }

/*-------------------------------other dropdown end-------------------------------*/
/*--------------------------top right notification start--------------------------*/
ul#headerMenu > li.right-menu-toggle > a i.bi-bell.toggle-icon {
    width: 28px;
    height: 28px;
    border-radius:14px;
    opacity:1;
}
/*nabilrafka 22022023 change notification bell style*/
ul#headerMenu > li.right-menu-toggle > a.sb-toggle-right .notifications-count-container ~ i.bi-bell {
    left: 4px;
    position: absolute;
}
/*nabilrafka 06032023 animation of notification bell on hover only when there are notifications*/
ul#headerMenu a:hover .notifications-count-container.hasCount ~ i.bi-bell.toggle-icon:before {
    animation: swing 1s linear infinite;
    transform-origin: top center;
}
/*nabilrafka 22022023 animation of notification bell on load*/
ul#headerMenu .notifications-count-container.hasCount ~ i.bi-bell.toggle-icon:before {
    animation: swing 1s linear 5;
    transform-origin: top center;
}
.notifications-count-container {
    width: 16px;
    height: 18px;
}
/*-------------------------------------------------------------------------------------------------------------------------------------------*/
.modal-dialog button:not(.close) {
    /*min-width: 100px;*/
    max-height: 30px;
}

.tabContent {
    margin-top: 6px;
}

.orgChartPreviewContent > .findImgList {
    max-height: 300px;
    overflow: hidden;
    position: relative;
    padding-left: 4px;
    padding-right: 12px;
}

.findImgList > .imgContainer {
    margin: 5px 0px;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-top: 5px;
    cursor: pointer;
}

    .findImgList > .imgContainer.selected {
        box-shadow: 0 0 2px 1px rgb(3, 127, 252);
    }

.imgContainer > img {
    width: 106px;
    height: 106px;
}

.imgContainer > span {
    max-width: 120px;
    white-space: nowrap;
}

.orgChartPreviewContent, .orgChartPreviewFooter {
    padding: 4px;
}

.fieldFormatContent.orgChartPreviewContent {
    display: flex;
}

.orgChartTabsContainer.orgChartPreviewTabsContainer > .orgChartTab {
    border-bottom-left-radius: 6px;
}

.orgChartTab.shadow {
    box-shadow: 0 0 0 transparent;
}

.fieldDesignContainer, .rulesDesignContainer {
    display: flex;
    width: 100%;
    height: 320px;
}

.fieldDesignContainer {
    margin-top: 10px;
}

.rulesDesignContainer .OrgChartItem {
    min-height: 60px;
}

.userFieldContainer {
    width: 30%;
}

.userRulesContainer {
    width: 50%;
    display: flex;
    flex-direction: column;
}

.standardFieldsContainer {
    position: relative;
    overflow: hidden;
    max-height: 350px;
    height: 50%;
    display: inline-flex;
    flex-direction: column;
    width: 100%;
}

.userRulesContainer > .userFields, .previewContainer > .previewSpace {
    height: calc(100% - 35px);
}

.previewContainer {
    display: inline-flex;
    flex-direction: column;
}

.stylesContainer {
    display: inline-block;
    font-size: 10px;
    position: relative;
}

.styleSourcesLabel {
    margin-left: 4px;
    display: inline-flex;
    cursor: default;
}

    .styleSourcesLabel > i {
        margin-left: 4px;
    }

.styleSourcesContainer {
    position: absolute;
    display: none;
    border-radius: 4px;
    padding: 4px;
    box-shadow: 0 0 6px 2px rgba(153, 153, 153, .5);
    background-color: white;
    top: 15px;
}

.styleSourcesLabel:hover + .styleSourcesContainer {
    display: block;
}

.styleSources {
    font-size: 10px;
    margin: 2px 0px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.userFormatPreviewButtons {
    display: flex;
    justify-content: space-around;
}

.userRulesButtons > button {
    margin-right: 1%;
    width: 24%;
}


.userFormatPreviewButtons > button {
    min-width: 100px;
}

.condFormatRule {
    display: flex;
    cursor: pointer;
}

    .condFormatRule > span {
        display: flex;
        width: 100%;
        padding: 5px;
    }

    .condFormatRule > i {
        padding: 7px 5px 0 0
    }

    .condFormatRule > input {
        margin: 0 6px 0 0;
    }

    .condFormatRule.selected > span {
        color: white;
        background-color: #037ffc;
    }

/* Condition to keep the grid width within popup width */
.orgChartPreviewContent .container {
    width: 100%;
}

.condFormattingEditPopupContainer .footerIconsRight {
    visibility: hidden;
}

.designContainer, .previewContainer {
    width: 70%;
}

.rulesDesignContainer > .previewContainer {
    width: 50%;
}

.condFormatWorkflow {
    left: 20px;
    margin: 0px;
}

.orgChartModal i.condFormatWorkflow:before {
    left: 0px;
}

.userFieldChoice {
    font-weight: normal;
    margin-bottom: 1px;
    cursor: pointer;
    font-size: 12px;
    background: white;
    padding: 1px 4px;
    min-height: 22px;
    border-radius: 6px;
    border: 1px solid #D2D7D7;
    list-style: none;
    color: #1d1d1d;
}

.designSpace .designBox.selected {
    border-color: #037ffc;
    box-shadow: 0 0 2px 1px rgba(3, 127, 252, .5)
}

.dropArea.designBox .userFieldChoice:not(.ui-sortable-helper) {
    background: transparent;
    border: 0px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.userFields .userFieldChoice {
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-all;
    white-space: nowrap;
}

.standardFieldsContainer .userFieldChoice {
    display: inline-flex;
    align-items: center;
}

    .standardFieldsContainer .userFieldChoice > input {
        margin-top: 0px;
        margin-right: 4px;
    }

    .standardFieldsContainer .userFieldChoice > label {
        width: 100%;
        margin-bottom: 0px;
        cursor: pointer;
    }

.choiceIcon {
    margin-right: 2px;
}

.dropArea.designBox {
    overflow: hidden;
}

    .dropArea.designBox .choiceIcon {
        display: none;
    }

.userFields, .designSpace, .previewSpace {
    height: calc(100% - 5px);
    padding: 4px;
    max-height: calc(80vh - 128px);
    position: relative;
}

.fieldDesignContainer .designContainer .designSpace, .fieldDesignContainer .previewContainer .previewSpace {
    justify-content: space-around;
}

.designSpace, .previewSpace {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.userFields {
    border-right: 1px solid #aaa;
    padding-right: 14px;
    display: flex;
    flex-direction: column;
    height: calc(100% - 35px);
    width: 100%;
}

.rulesIndexContainer div.chk {
    min-width: 60px;
}


.templateBorders {
    border: 1px solid #aaa;
    width: 300px;
    table-layout: fixed;
    overflow: hidden;
    position: relative;
    padding: 0px 8px;
    border-collapse: separate;
    border-spacing: 2px;
    display: block;
    max-height: 250px;
    min-height: 30px;
}

.formatFieldContainer {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.editFieldContainer {
    display: inline-flex;
    justify-content: space-between;
    width: 100%;
    margin-top: 6px;
}

.editFieldLabelContainer {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    height: 52px;
    opacity: 0;
}


.formatStandardFieldContainer.formatFieldContainer {
    flex-direction: row;
    justify-content: flex-end;
}

.formatStandardFieldContainer > button {
    margin: 8px;
}

.showLabelContainer, .formatLabelContainer {
    display: flex;
    align-items: center;
}

    .showLabelContainer > .editFieldLabelRadio, .editFieldLabelTitle, .showLabelContainer > .editFieldLabelInput, .formatLabelContainer > .editFieldLabelStyleRadio {
        margin: 0 2px 0 0;
    }

    .showLabelContainer.disabled > .editFieldLabelInput, .showLabelContainer.disabled > .editFieldLabelTitle {
        color: grey;
        pointer-events: none;
    }

.layoutLabel {
    height: 20px;
    padding-left: 10px;
}

/*.designSpace .row {
    margin: 2px 0 2px 0;
    display: flex;
    flex-direction: row;
    justify-content: center;
}*/

.designSpace .row:empty {
    display: none;
}

.designSpace .column {
    height: 25px;
    min-width: 40px;
    border: 1px solid #bbb;
    /*margin: 0 2px 0 2px;*/
    width: 100%;
}

.designSpace .subRow {
    width: 100%;
    display: inline-flex;
}


.userFields .sortablePlaceholder {
    min-height: 22px;
}

.dragOver.ui-sortable {
    background-color: lightgreen;
}


.designPreviewOptionsContainer {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
}

.designPreviewSwitch > a.designPreviewChoice.selected {
    background-color: rgb(92, 184, 92);
    color: white;
}

.designPreviewChoice:first-child {
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
}

.designPreviewChoice:not(:first-child) {
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
}

.designPreviewChoice {
    cursor: pointer;
    border-radius: 5px;
    padding: 4px;
    min-width: 72px;
    text-align: center;
}

.designPreviewSwitch {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    border: 1px solid lightgray;
    border-radius: 6px;
    margin: 4px;
    height: 28px;
}

.templateApplicationOptions {
    display: flex;
    justify-content: space-between;
    margin: 8px;
}

.popupApplicationButtons {
    display: flex;
    justify-content: space-evenly;
}

    .popupApplicationButtons button {
        min-width: 72px;
        justify-content: center;
    }

.templateRadioContainer {
    align-items: center;
    display: flex;
}

    .templateRadioContainer > input[type=radio] {
        margin: 0 2px 0 0;
    }

    .templateRadioContainer > span {
        margin-right: 6px;
    }

.templateChoiceContainer {
    margin: 2px 0 6px 0;
}

.itemFieldWrapper {
    vertical-align: middle;
}
/*joeyelrassi 13032023 changed display from inline-flex to block -- in case of label, change display to flex*/
.itemField {
    text-overflow: ellipsis;
    word-break: break-word;
    min-height: 18px;
    padding: 2px 0px;
    width: 100%;
}

    .itemField .horizontalLine {
        border-bottom: 1px solid #b0b0b0;
        position: relative;
        top: 9px;
    }

        .itemField .horizontalLine.dashed {
            border-bottom: 1px dashed #b0b0b0;
        }

.templateChoiceLabel {
    margin-right: 6px;
}

.descLine {
    max-width: 100%;
    max-height: 100%;
}
/*--------------------------------------------joeyelrassi 13052021 on search name template start --------------------------------------------*/
/*in its original position*/
.onlyNameTemp .selectedOrgText {
    display: inline;
    font-weight: bold;
    background-color: yellow;
}
/*--------------------------------------------joeyelrassi 13052021 on search name template end --------------------------------------------*/

/*--------------------------------------------joeyelrassi 13052021 on search zoom3 template start -- NOT WORKING--------------------------------------------*/
.zoom3 p.selectedOrgText .descLine {
    display: inline;
    font-weight: bold;
    background-color: yellow;
}
/*--------------------------------------------joeyelrassi 13052021 on search zoom3 template end --------------------------------------------*/

/*--------------------------------------------joeyelrassi 13052021 on search common start --------------------------------------------*/
/*under the search bar*/
#OrgChartSearchResults > .OrgChartItem, .orphansContainer > .OrgChartItem {
    margin-left: 10px;
    margin-top: 6px;
    position: relative;
}

.orphansContainer > .OrgChartItem {
    margin-left: 0px;
}

/*in its original position*/
.selectedOrgPerson {
    border-color: #fbcb09 !important;
}

/*--------------------------------------------joeyelrassi 13052021 on search common end --------------------------------------------*/
.zoomSliderContainer {
    width: 80%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

    .zoomSliderContainer div.zoomOut, .zoomSliderContainer div.zoomIn {
        position: relative;
        display: inline-flex;
        padding: 4px;
        cursor: pointer;
        justify-content: center;
    }

        .zoomSliderContainer div.zoomOut i, .zoomSliderContainer div.zoomIn i {
            font-size: 16px !important;
            transition: transform .2s;
            display: flex;
        }

        .zoomSliderContainer div.zoomOut:hover i, .zoomSliderContainer div.zoomIn:hover i {
            transform: scale(1.25);
        }

    .zoomSliderContainer .orgChartSlider {
        width: 80%;
        height: 10px;
        border: 1px solid #cccccc;
    }

        .zoomSliderContainer .orgChartSlider a {
            cursor: pointer;
        }

.orgChartVersion {
    position: absolute;
    left: 0;
    bottom: 10px;
    color: #808080;
}

button.btn.save-userLevel {
    display: none;
    margin-left: 4px;
    min-width: 0px;
}


.OrgChartLegend {
    display: flex;
    justify-content: space-between;
}

.OrgChartVersionName {
    font-size: 18px;
}

.orgChartButtonContainer {
    padding: 2px;
    width: 34px;
    cursor: pointer;
    right: 2px;
}

.btn.btn-light.orgChartButton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 30px;
    width: 30px;
}

.orgChartButton.box-list-button {
    right: 95px;
}

.btn.btn-light.orgChartButton:hover i {
    animation: bigsmall 1.5s linear infinite;
}

.orgItemArrow {
    color: silver;
    position: absolute;
    z-index: 1;
    cursor: pointer;
    left: calc(50% - 10px);
    transition: left linear 250ms, top linear 250ms;
    bottom: -16px;
    width: 22px;
    height: 22px;
    font-size: 22px;
}

    .orgItemArrow:hover {
        animation: downupLess 1s ease-in-out infinite;
    }

    .orgItemArrow.rotated {
        top: -24px;
    }

        .orgItemArrow.rotated:before {
            transform: rotate(180deg);
        }

        .orgItemArrow.rotated:hover {
            animation: updownLess 1s ease-in-out infinite;
        }

.hiddenItemConnector {
    display: none;
}

.hiddenItem > .orgChartItemWrapper {
    display: none;
}

.hiddenItem.showConnector .hiddenItemConnector {
    display: block;
    position: absolute;
    height: 100%;
    border-left: 1px dashed lightgrey;
    left: calc(50% - 1px);
    top: 0px;
}

.jstree a.hiddenItem {
    text-decoration: line-through !important;
}

.jstree .jstree-rename-input {
    height: 24px !important;
    line-height: 24px !important;
}

.annotationToggle {
    z-index: 1;
    position: absolute;
    right: -10px;
    top: -10px;
    border-color: transparent;
    border-style: solid;
    display: block;
    height: 0;
    border-width: 12px;
    content: " ";
    box-sizing: border-box;
    border-right-color: rgb(250, 130, 2);
    transform: rotate(135deg);
    cursor: pointer;
}

.orgChartCustomAnnotation.annotation, .orgChartCustomAnnotation.newAnnotation {
    border-radius: 6px;
    border: 1px solid grey;
    padding: 2px 4px;
    float: left;
}

.standardAnnotationContainer {
    position: absolute;
    left: 6px;
    width: 100%;
    height: 100%;
    display: inline-flex;
}

.saButtonsContainer {
    font-size: 14px;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    margin-left: 2px;
    justify-content: space-evenly;
}

    .saButtonsContainer > a {
        color: silver;
        font-size: 16px;
    }

.saButton {
    margin-bottom: 2px;
    cursor: pointer;
}

i.orgChartSaveAnnotation.currentView, .annotationView.selected > i {
    color: green;
}

.annotationButtonsContainer > i.selected, a.allviews i.orgChartSaveAnnotation {
    color: green;
}

.standardAnnotation {
    width: 100%;
    height: 100%;
    border: 1px solid grey;
    border-radius: 6px;
    background: white;
    box-shadow: 0 0 6px 2px rgb(153 153 153 / 50%);
}


    .standardAnnotation:after {
        left: -18px;
        top: 7px;
        border-color: transparent grey transparent transparent;
        border-style: solid;
        display: block;
        height: 0;
        position: absolute;
        border-width: 9px;
        content: " ";
        bottom: 100%;
        box-sizing: border-box;
    }

    .standardAnnotation.arrowDown:after {
        left: 140px;
        top: 90px;
        border-color: grey transparent transparent transparent;
    }

    .standardAnnotation > textarea, .standardAnnotation > textarea:focus {
        width: 100%;
        height: 65%;
        border: 0px !important;
        outline: 0px !important;
        background: transparent;
        font-weight: normal;
    }

    .standardAnnotation > .standardAnnotationTitle {
        width: 100%;
        height: 35%;
        background-color: whitesmoke;
        border-top-left-radius: 6px;
        border-top-right-radius: 6px;
        display: inline-flex;
        flex-direction: column;
        align-items: flex-start;
        padding-left: 4px;
        border-bottom: 2px solid rgb(250, 130, 2);
    }

.annotationButtonsContainer {
    display: none;
    flex-direction: column;
    align-items: center;
    font-size: 16px;
    padding-left: 2px;
    color: silver;
}

    .annotationButtonsContainer.showButtons {
        display: inline-flex;
    }

        .annotationButtonsContainer.showButtons ~ .CustomAnnotationResize {
            right: 12px;
        }

    .annotationButtonsContainer ~ .CustomAnnotationResize {
        right: -8px;
    }

    .annotationButtonsContainer > i {
        margin-bottom: 4px;
    }

        .annotationButtonsContainer > i:hover:before {
            cursor: pointer;
        }

.CustomAnnotationResize {
    position: absolute;
    bottom: -4px;
    right: -8px;
    padding: 8px;
    cursor: nw-resize;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    transform: rotate(-45deg);
}

.lineAnnotationContainer {
    position: absolute;
    width: 10px;
    height: 10px;
}

.lineAnnotation {
    min-width: 10px;
    height: 10px;
    transform-origin: 0% 50%;
    position: absolute;
    display: flex;
    align-items: center;
}

    .lineAnnotation > div {
        width: 100%;
        height: 0px;
        border-top: 1px solid #808080;
        border-left: none !important;
        border-right: none !important;
        border-bottom: none !important;
    }

    .lineAnnotation[data-showarrow="1"] > div::after {
        border-style: solid;
        display: block;
        height: 0px;
        width: 0px;
        border-width: 10px;
        border-color: inherit;
        border-left-color: transparent;
        border-right-color: transparent;
        border-top-width: 0px;
        content: " ";
        float: right;
        transform: rotate(90deg);
        position: relative;
        left: 10px;
        top: -5px;
    }

.lineAnnotationContainer .annotationButtonsContainer {
    position: relative;
    top: -120px;
}

.resizeLineDown {
    width: 6px;
    border-top-width: 1px;
    border-top-style: solid;
    border-color: grey;
}

.resizeLineUp {
    width: 12px;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-color: grey;
    margin-bottom: 2px;
}


.annotationColorPickerContainer > .colorPickerSelect {
    min-width: 100px;
}

.connectorLabelContainer {
    margin-left: 15px;
}

.connectorButtonsContainer {
    display: flex;
    flex-direction: column;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 6px;
}

    .connectorButtonsContainer > .nlbi, .orgChartButton > .nlbi {
        /*display: inline;*/
        justify-content: center;
        font-size: 16px;
    }

.orgchartLayoutGrid #ResultTable > thead {
    background-color: transparent;
    pointer-events: none;
}

.orgchartLayoutGrid #ResultTable > tbody > tr > td {
    border: transparent;
}

.orgchartLayoutGrid #ResultTable .RicercaRiga1:hover, .orgchartLayoutGrid #ResultTable .RicercaRiga2:hover {
    background-color: transparent;
}

.orgchartLayoutGrid #ResultTable > tbody > tr > td > div:not(.DESC_MAIN) {
    position: absolute;
    left: 300px;
}
/*----------------------------------------------------------------------------joeyelrassi 13052021 orgchart end----------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------joeyelrassi 21052021 Calendar Styles Start----------------------------------------------------------------------------*/
/*------------------------------------------------------------------styles of buttons in header and nav start and lightbox------------------------------------------------------------------*/
/* Mazzola 09/09/2014 : classi per field type Calendar */
.Calendar {
    margin: 0px 0px 5px 0px;
    border: 1px solid #dddddd;
    border-radius: 8px; /*nabilrafka 04012024 added border radius*/
}
/*nabilrafka 14122023 added styles for icon and title of event */
.dhx_scale_holder .dhx_cal_event .dhx_title, .dhx_scale_holder_now .dhx_cal_event .dhx_title {
    text-align: center;
    padding: 2px;
    border-radius: 4px 4px 0 0;
}
.dhx_scale_holder .dhx_cal_event .dhx_body, .dhx_scale_holder_now .dhx_cal_event .dhx_body {
    border-radius: 0 0 4px 4px;
    overflow: hidden;
}
.calendarEventTitle {
    top: -2px;
    position: relative;
}
    .calendarEventTitle i {
        font-size: 14px;
        margin-right: 8px;
    }
    .calendarEventTitle span {
        font-size: 14px;
        font-weight: bold;
    }
/*nabilrafka 28052024 used in event bar for day, week and month views*/
.calendarEventBar i {
    margin-right: 8px;
}
/*nabilrafka 14122023 added styles to timespan inside event body*/
.calendarEventBodyTimespan {
    text-align: center;
    font-weight: bold;
}
/*nabilrafka 18122023 to override the minical icon styles of the library*/
.dhx_minical_icon {
    background: none !important;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-size: 26px;
}
/*nabilrafka 2012023 to center vertically the icon accounting for difference in height between icon and container*/
div.dhx_cal_navline > div#calendarHeaderLeft > div.dhx_minical_icon {
    top: -4px !important
}
    /*nabilrafka 2012023 to account for difference in height between icon and container*/
    .dhx_minical_icon i {
        padding-top: 3px;
    }
    /*nabilrafka 18122023 to override the previous and next icons styles of the library*/
    .dhx_cal_prev_button, .dhx_cal_next_button {
    background-image: none !important;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    }

        .dhx_cal_prev_button.unitViewButton, .dhx_cal_next_button.unitViewButton {
            font-size: 16px;
        }
    /*nabilrafka 24012024 to override the minical container and prev and next icons styles of the mini cal library on hover*/
    .dhx_cal_container.dhx_mini_calendar, .dhx_minical_popup .dhx_cal_container.dhx_mini_calendar .dhx_cal_prev_button:hover, .dhx_minical_popup .dhx_cal_container.dhx_mini_calendar 
    .dhx_cal_next_button:hover, .dhx_cal_header div.dhx_cal_prev_button.unitViewButton, .dhx_cal_header div.dhx_cal_next_button.unitViewButton {
        border-radius: 6px;
    }
    /*nabilrafka 18122023 to override the prev and next library icons with custom bootstrap icons */
    .dhx_cal_prev_button::before, .dhx_cal_next_button::before {
        display: inline-block;
        font-family: bootstrap-icons !important;
        font-style: normal;
        font-weight: normal !important;
        font-variant: normal;
        text-transform: none;
        line-height: 1;
        vertical-align: -0.125em;
        -webkit-font-smoothing: antialiased;
    }
    .dhx_mini_calendar .dhx_cal_prev_button::before, .dhx_mini_calendar .dhx_cal_next_button::before {
        margin-left: 5px;
    }
    .dhx_cal_prev_button::before {
        content: "\f284";
    }
    .dhx_cal_next_button::before {
        content: "\f285";
    }

.dhx_cal_navline div.dhx_cal_today_button, .dhx_cal_navline .dhx_cal_prev_button:hover, .dhx_cal_navline .dhx_cal_next_button:hover, div.dhx_cal_navline div.dhx_minical_icon:hover {
    border-radius: 6px;
}
.dhx_cal_tab:hover {
    color: #fff;
}
/*mattiapaganini 15062023 aggiunta max height a tooltip*/
.dhx_year_tooltip {
    max-height: 300px;
    padding: 1px;
}
/*nabilrafka 04012024 override template styles of year tooltip*/
.dhx_year_tooltip div.dhx_tooltip_line{
    margin:0px;
    height: 28px;
    padding-top: 4px;
    padding-left: 30px;
    border-radius: 4px;
}
/*nabilrafka 04012024 override template styles of year tooltip date*/
.dhx_year_tooltip div.dhx_tooltip_date{
    padding-right: 4px;
}
    .dhx_year_tooltip div.dhx_tooltip_line:not(:first-child) {
        border-top: 1px solid white;
    }
    .dhx_year_tooltip div.dhx_tooltip_line:last-child {
        border-bottom: 1px solid white;
    }
/*nabilrafka 04012024 remove template styles on hover of year tooltip icon*/
div.dhx_year_tooltip div.dhx_tooltip_line .dhx_event_icon.icon_details:hover{
    background-color: transparent;
    border-radius: unset;
}
/*nabilrafka 04012024 remove icon of year tooltip*/
div.dhx_year_tooltip div.dhx_tooltip_line .dhx_event_icon.icon_details {
    background: none;
    display: inline-flex;
    align-items: center;
    cursor: default;
    top: 4px;
    height: 20px;
}
/*nabilrafka 04012024 change icon of year tooltip icon*/
div.dhx_year_tooltip div.dhx_tooltip_line .dhx_event_icon.icon_details::before {
    display: inline-block;
    font-family: bootstrap-icons !important;
    font-style: normal;
    font-weight: normal !important;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    vertical-align: -0.125em;
    -webkit-font-smoothing: antialiased;
    content: "\f214";
}
/*joeyelrassi 04022021 per calendar override default*/
div.dhx_cal_navline > #calendarDayNav > div, div.dhx_cal_navline > #calendarHeaderLeft > div:not(.calendarTimescale) {
    left: 0 !important;
    top: 0 !important;
    right: 0 !important;
}
.dhx_cal_navline .calendarTimescale {
    position: relative;
    top: 0px;
}
.dhx_cal_navline .calendarTimescale > div {
    left: 0 !important;
    top: 0 !important;
    right: 0 !important;
}
.dhx_cal_navline .calendarTimescale > div:first-child {
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
}
.dhx_cal_navline .calendarTimescale > div:last-child {
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
}

div#day_tab, div#week_tab, div#month_tab, div#dhx_cal_next_button, div#dhx_cal_prev_button, div#dhx_minical_icon, div#calendarHeaderLeft {
    position: relative;
    float: left;
}
#calendarHeaderLeft {
    display: inline-flex;
    margin-left: 12px;
}
/*nabilrafka 04012024 to remove extra border on active day tab*/
div#day_tab {
    border-right: 0px;
}
div#year_tab, div#idTimeLineTab, div#dhx_cal_today_button, div#unit_tab {
    position: relative;
    float: left;
    margin-right: 12px
}
/*nabilrafka 15052024 specific to timeline view, to keep the scale's text at the bottom of container (when container's height is increased to fit two lines)*/
.dhx_cal_header div .dhx_scale_bar {
    display: flex;
    align-items: flex-end;
}
    /*nabilrafka 09012024 override minical style */
    .dhx_mini_calendar .dhx_month_head {
        border: 1px solid transparent;
        border-radius: 6px;
    }
div.dhx_mini_calendar .dhx_month_head:hover {
    color: white !important;
}
/*nabilrafka 04062024 for all cases and not only fullscreen so that it covers top and left menu */
div.dhx_cal_cover {
    z-index: 1050;
}

/*-------------------------------------------------Lightbox------------------------------------------------*/
/* bottone delete popup calendar rosso */
.dhx_delete_btn_set {
    border-color: #d9534f !important;
}
/* bottone save popup calendar verde */
.dhx_save_btn_set {
    background-color: #5cb85c !important;
    border-color: #5cb85c !important;
    margin-left: 280px;
}
/* bottone conferma delete evento popup calendar, verde */
.dhtmlx_ok_button > div {
    background-color: #5cb85c !important;
    border-color: #5cb85c !important;
}

.dhtmlx_cancel_button > div {
    height: 20px !important;
}

.dhx_cal_light.dhx_cal_light_wide, [fullscreen="1"] ~ div.dhx_minical_popup {
    border-radius: 6px;
    z-index: 1051;
}

.dhx_cal_light .dhx_cal_ltitle {
    border-radius: 6px 6px 0 0;
}
/*joeyelrassi 09092021 custom lightbox Styles*/
.custom-lightbox {
    width: 500px;
    /*height: 270px;*/
    display: none;
    border: 1px solid lightgrey;
    border-radius: 6px;
    z-index: 15;
    position: absolute;
    background-color: ghostwhite;
    padding-left: 2rem;
}

/*custom lightbox header*/
.clh {
    height: 20%;
    padding-top: 0.5rem;
    padding-right: 0.75rem;
    display: flex;
    justify-content: space-between;

}
/*custom lightbox title*/
.clt {
    float: left;
    font-size: 14px;
    /*FONT-FAMILY: Raleway, Arial, Verdana;*/
    font-weight: bold;
    cursor: default;
}
/*custom lightbox body*/
.clb {
    height: 60%;
    display: flex;
    flex-direction: column;
    justify-content:center;
}

/*custom lightbox details*/
.cld {
    display: inline-flex;
    flex-direction: row;
}

.clnd, .clrd {
    display: inline-flex;
    flex-direction: column;
    margin: 5px 5px 5px 5px;
    width: 95%;
}

.cltp {
    display: inline-flex;
    flex-direction: column;
    justify-content: space-between;
    margin: 5px 5px 5px 5px;
}

/*custom lightbox description input*/
.cld textarea.cldi {
    min-height: 38px;
    /*border-radius: 4px !important;*/
    max-height: 98px;
    margin-top: 0;
    width:100%;
    border-top-right-radius:6px !important;
    border-bottom-right-radius:6px !important;
}
/*custom lightbox cancel*/
.clc {
    float: right;
    cursor: pointer;
}

.custom-lightbox-save {
    width: 50px;
    height: 50px;
    background-color: blue;
    cursor: pointer;
}
.clf{
    height:20%;
    display:flex;
    align-items:center;
    margin:10px 0 10px 0;
}

/*custom lightbox footer*/
.clf .dhx_btn_set div {
    float: unset;
    text-align: center;
}
/*custom lightbox footer*/
.clf .dhx_save_btn_set {
    width: 95%;
    margin: 0;
    height:30px;
}
/*custom Lightbox Title Container*/
.cltc {
    display: inline-flex;
    align-items: center;
}
/*custom lightbox image*/
.cli {
    margin: 5px 5px 5px 0;
}

    .cli img {
        width: 30px;
        height: 30px;
        border-radius: 50%;
    }
/*custom lightbox color picker*/
.clcp {
    display: inline-flex;
    flex-direction: column;
    margin-top:10px;
}

/*custom lightbox color picker dropdown*/
.clcpd {
    display: inline-flex;
    position: relative;
    flex-direction: column;
}
.clcpd .colorChoice{
    width:16px;
    height:16px;
    border-radius:4px;
    margin:1px;
    padding:12px;
    display: inline-flex;
}

.clcpd .colorChoice.selected{
    box-shadow: 0px 0px 3px 2px #EB5C68;   /*theme color*/
}

/*custom lightbox label*/
.cll {
    color:gray;
    margin:2px;
    cursor:default;
}

/*custom lightbox box*/
.clbx {
    border: 1px solid lightgray;
    height: 38px;
    width: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.clbx.clbxTime{
    width:97.5%;
    font-weight:bold;
    border-right: 0;
    border-left: 0
}

.clbx.down {
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
}
/*custom lighbox clock*/
.clclock{
    display:flex;
}

.clPeriod {
    border:1px solid lightgray;
}
.clPeriod.AM {
    margin-left:12px;
}

.cldp {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    margin: 5px 5px 5px 0;
}
.clWeekDays {
    display: flex;
    justify-content: space-evenly;
    flex-direction: row;
}
.clmd {
    display: flex;
    align-items: center;
    margin-right:24px;
}
.clmd label {
    position:relative;
    top:1px;
}
.clmd label, .clmd input{
    font-weight:bold;
    margin:0;
    padding:2px;
}
.clRoleDetails {
    display: flex;
    flex-direction: column;
    width: 47.5%;
}
.clDateTimePicker {
    display: flex;
    flex-direction: column;
    width: 47.5%;
}
.clRoleCombo {
    height: 38px;
    border: 1px solid lightgrey;
    display: flex;
    align-items: center;
    text-align: center;
    /*border-radius:4px !important;*/
    cursor: pointer;
    border-top-right-radius: 6px !important;
    border-bottom-right-radius: 6px !important;
}
.cltt {
    margin-top:10px;
}
/*------------------------------------------------------------------styles of buttons in header and nav end------------------------------------------------------------------*/
/* Mazzola 11/09/2014 : field type Calendar: height delle select per la data di inzio/fine dell'evento */
/*joeyelrassi 12042024 commented*/
/*.dhx_section_time select {
    height: 21px;
}*/
/*joeyelrassi modal cover takes from gantt css instead of calendar css with z-index 19999 instead of 17 -> set modal to 20000*/
.dhtmlx_modal_box.dhtmlx-alert {
    z-index: 20000;
    width: 300px;
}

/*------------------------------------------------------------------styles of unit view start------------------------------------------------------------------*/
/*joeyelrassi 03032021 calendar unit (persons) tab*/
div.UnitsTabScale {
    max-width: 155px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/*joeyelrassi 15032021 calendar units view in case there are no events*/
.unitsViewNoEvents {
    position: relative;
    top: 2px;
}
/*----------------------------------------------------------------------------styles of unit view end----------------------------------------------------------------------------*/

/*common styles*/
div.headerContent {
    text-align: left;
    padding-left: 4px;
}
    div.headerContent b {
        font-weight: bold;
        color: #1d1d1d;
    }

div.noEventHeader {
    text-align: center;
    background-color: red;
}

/* Mazzola 15/7/2016: se non c'e' il link sulla timeline allora disabilita il puntatore Hand. */
.dhx_matrix_cell_nopointer {
    cursor: default !important;
}
/*----------------------------------------------------Styles Of Timeline View---------------------------------------------*/
/*nabilrafka 21122023 added styles for timeline event line*/
.dhx_cal_event_line {
    border-radius: 4px;
}
.dhx_matrix_scell div.timelineSectionCell {
    font-size: 12px;
    color: #1d1d1d;
    text-align: left;
    padding-left: 3px;
}

/*joeyelrassi 06042021 hide the timeline number of days picker*/
.timelineStepsSelector {
    display: none;
    align-items: center;
    padding-bottom: 4px;
}

/* nabilrafka 13052024  set the color of today's cells in all calendar views and minical */
.TimelineTodayCell, .dhx_now .dhx_month_head, .dhx_now .dhx_month_body, .dhx_scale_holder_now {
    background-color: #FFF3A1;
}
/* Mazzola 18/3/2016: classe per il colore di sfondo per il calendar weekend, background-image:none 
   altrimenti nel week prevale lo sfondo bianco a righette. 
*/
.CalendarWeekendColorForWeek {
    /*background-color: none;*/
    /* sfondino grigino per le righette del calendar */
    /*background-image: url(../Images/databg_gray.png) !important;*/
    background: #ededed;
}

/*joeyelrassi added to remove lines from weekends in case of plan view*/
.CalendarWeekendColorPTimeline {
    background-color: #ededed;
}

.CalendarWeekendColor {
    background: #ededed !important;
}

    .CalendarWeekendColor > .dhx_month_head, .CalendarWeekendColor > .dhx_month_body {
        background-color: #ededed !important;
        background-image: none;
    }

/*joeyelrassi foto in timeline section*/
.timelineSectionCell img.timelineSectionPic {
    width: 32px;
    height: 32px;
    position: relative;
    margin-right: 4px;
    border-radius: 50%;
    vertical-align: middle;
}


.timelineSectionLabel{
    display:inline-block;
    vertical-align:middle;
    max-width:calc(100% - 40px);
}
    span.timelineSectionLabel > * {
        line-height: 18px;
        text-align: left;
        cursor:default;
    }

/*joeyelrassi pianificazione view */
.timelineViewEventPianificazione {
    padding:0;
}
.timelineViewEventPianificazione .tPianificazioneTitleContainer{
    padding-left:10px;
}
.timelineViewEventPianificazione .tPianificazioneTextContainer{
    padding-left:10px;
}
.timelineViewEventPianificazione .dhx_event_resize_start {
    margin-top:18px;
}
.timelineViewEventPianificazione .dhx_event_resize_end {
    margin-top:18px;
}
.EventPianificazioneHeader {
    position:relative;
    flex-direction:row;
    border-top:1px solid lightgrey;
    background-color:#ededed;
    border-right:1px solid lightgrey;
    min-height:28px;
}
.EventPianificazioneHeader.hidden {
    display:none;
}
.PianificazioneHeaderContent {
    margin: 5px 0 5px 0;
    display: inline-flex;
    flex-direction:column;
    font-weight:bold;
    padding-left:4px;
    position:relative;
}
.PlanViewHeaderToggle {
    position: absolute;
    right: 4px;
    top: 4px;
    cursor: pointer;
    z-index: 1;
}
/*----------------------------------Month View Styles----------------------------------*/
.monthViewEventDefault {
    padding: 2px 5px;
    height: 22px;
    display: flex;
    align-items: center;
    border-radius: 4px;
    margin-left: 1px;
}
    .monthViewEventDefault > b {
        margin: 0px 8px 0px 2px;
    }
.monthViewEventPianificazione{
    border-radius:4px;
    min-height:50px;
    margin-left:1px;/*changed from 6 to one depending on the skin used (material-> 1; default -> 6)*/
}

.mPianificazioneTitleContainer{
    display:flex;
    align-items:center;
    margin-top:2px;
}
.mPianificazioneTitle {
    font-size: 12px;
    font-weight: bold;
    padding-left: 10px;
}

.mPianificazioneText {
    font-size: 11px;
    padding-left: 6px;
}

/*clone of the dragged event created before drag*/
.draggedEvent {
    z-index: 1000;
    opacity: 1;
    display:none;
    transform: rotate(4deg);
}

.monthViewEventPianificazione.dhx_in_move {
    opacity: 0.4;
}
/*joeyelrassi trial calendar style*/
/*----------------------------------Week View Styles----------------------------------*/
/*joeyelrassi 28052021 get all widths correct depending on number of children*/
.collidingEvents {
    border-radius:4px;
    overflow:hidden;
}
div.dhx_title.customTitle{
    max-width:100%;
}
/*----------------------------------------------------------------------------joeyelrassi 21052021 Calendar Styles End----------------------------------------------------------------------------*/
/*joeyelrassi 08022021 hide panel body search filter state*/
/* Girelli 14/3/2022: disabled because hides useful filter fields
tr.panelBody + tr.panelFilterState {
    display: none;
}
*/
/*joeyerlassi 08022021 for round pictures*/
.pictureRound {
    border-radius:50% !important;
}

input[type=checkbox] + .FieldRemark {
    position:relative;
    top:2px;
}

/*-----------------------------------------------------------------joeyelrassi styles for Timeline start-----------------------------------------------------------------*/
/*joeyelrassi 15022021 for timeline sidescrub*/
div.timeline-scrubber-container > ul > li {
    cursor: pointer;
}

/*joeyelrassi 16022021 move timeline scrubber from above side scroll bar*/
div.timeline-scrubber-container > .timeline-scrubber{
    right:40px;
    max-height:80%;
    overflow:hidden;
    width:125px;
}

.timeline-scrubber .clearfix-year, .timeline-scrubber a.clearfix-month {
    display: inline-block;
}
.timeline-scrubber .clearfix-year{
    width:30px;
    margin-right:5px;
}

.timeline-scrubber a.clearfix-month{
    width:75px;
}

div.timeline_element {
    padding: 2px 2px 2px 15px;
    min-width: 55%;
}
div.timeline_element > div {
    padding:2px 2px 2px 15px;
    width: calc(100% + 17px);
    position:relative;
    left: -15px;
}

/*mattiapaganini 28042023 aggiunto box shadow su after element e rimosso on hover */
div.timeline_element > div:after {
    content: '';
    border-radius: 8px;
    position: absolute;
    width: 100%;
    z-index: -1;
    height: calc(100% + 4px);
    top: -2px;
    left: 0px;
    box-shadow: 1px 1px 15px rgba(0,0,0,0.5);
    transition : opacity 0.2s;
    opacity : 0;
}

/*mattiapaganini 02052023 box-shadow applicato solo su after element*/
.timeline_element:hover {
    box-shadow: none;
}

div.timeline_element:hover > div:after {
    opacity: 1;
}

.timeline_element .timeline_content{
    margin-left:3em;
}

.timeline_element .timeline_content .description,
.timeline_element .timeline_content .infoField,
.timeline_element .timeline_content .infoField2,
.timeline_element .timeline_content .infoField3 {
    display: block;
}
.timeline_element .timeline_content .description {
    font-size: 16px;
}

.timeline_element .timeline_title > i {
    position: relative;
    margin: 0.3em;
    top: -0.2em;
}

.scrubberyear {
    margin-top:6px;
}

.timelineLegendContainer {
    display: inline-block;
    position: relative;
    float: left;
    margin-bottom: 10px;
}
/*nabilrafka 14112023 commented because .legend-item class is not used anymore*/
/*.timelineLegendContainer .legend-item {
    display: flex;
    height:inherit;
    align-items:center;
}*/
div.timeline div.date_separator span {
    border-radius: 8px;
}
/*-------------------fullscreen timeline-------------------*/
[fullscreen="1"] ~ .timeline-footer-icons {
    padding: 0 4px 0 0;
}
[fullscreen="1"] ~ .timelineLegendContainer {
    padding: 0 0 0 4px;
}
/*-----------------------------------------------------------------joeyelrassi styles for kanban start-----------------------------------------------------------------*/
div.kanban-board {
    background-color: transparent !important;
}
/*joeyelrassi for now hide the footer.. could be used later to add buttons add new item*/
.kanban-board footer{
    height:0px;
}

div.kanban-item {
    min-height: 100px;
    border:1px solid lightgrey;
    border-top: 5px solid;
    padding:10px;
}


div.kanban-board .kanbanColumnHeader {
    text-align: center;
    padding-bottom: 0;
    padding-top:0;
    /*max-height:35px;*/
}
/*joeyelrassi 09042021 fix kanban header on scroll*/
.kanbanColumnHeader.fixed {
    position: fixed;
    background-color: #fafafa;
    z-index: 999;
}

.kanbanItemHTML {
    padding-left: 5px;
}
.kanbanItemHTML > ul{
    padding-left:0;
}
    .kanbanItemHTML li {
        list-style: none;
    }


    /*joeyelrassi 28042021 avevo aggiunto word-wrap: break-word cosi le stringhe non escono dal contenitore ma nel caso dei links esce cmq -> added overflow:hidden*/
.kanbanItemContent {
    margin-bottom: 0;
    word-wrap: break-word;
    overflow:hidden;
}



header.kanbanColumnHeader > div.kanban-title-board {
    font-size: 25px;
    font-weight: normal;
    display: inline-block;
    cursor: pointer;
    overflow: hidden;
    max-height: 32px;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width:88%;
}

div.kanban-board .kanban-drag {
    padding: 0 14px 0 5px;
    max-height:600px;
    overflow:hidden;
    position:relative;
}

.kanbanColorPicker {
    display: inline-block;
    position: relative;
    float: right;
}

    .kanbanColorPicker > i {
        cursor: pointer;
        font-size: 20px;
        color: grey;
    }

.colorPickerDropdown {
    position: absolute;
    border-radius: 5px;
    min-width: 200px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    text-align: center;
    z-index: 999;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.colorChoice {
    margin: 2.5%;
    padding: 12px 16px;
    display: block;
    border-radius: 6px;
    cursor: pointer;
}
.select2-result.select2-result-selectable.select2-highlighted.colorChoice {
    opacity: 0.8;
}

.colorChoice.Red {
    background-color: #DA3C3C !important;
}
.colorChoice.Green {
    background-color: #62C370 !important;
}
.colorChoice.LightGreen {
    background-color: #90EE90 !important;
}
.colorChoice.Blue {
    background-color: #448BD8 !important;
}
.colorChoice.LightBlue {
    background-color: #ADD8E6 !important;
}
.colorChoice.Pink {
    background-color: #FFADAD !important;
}
.colorChoice.Yellow {
    background-color: #FFC65C !important;
}
.colorChoice.Brown {
    background-color: #734556 !important;
}
.colorChoice.LightBrown {
    background-color: #DAB083 !important;
}
.colorChoice.Default { /*grey*/
    background-color: #888 !important;
}
.colorChoice.White {
    background-color: white;
    color: black;
}
.colorChoice.Transparent {
    background-color: transparent;
    color: black;
}


.item_handle {

    position: absolute;
    cursor:pointer;
}
div.kanban-item:hover {
    box-shadow: 0 2px 12px 0 rgba(0,0,0,0.3);/*1px 1px 15px rgba(0,0,0,0.5);*/
    cursor:unset;
}
.kIemContentBottom{
    margin-top:10px;
    display:inline-block;
    width:100%;
}
.kItemBottomPicture {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: inline-block;
    position:relative;
    top:-2px;
}

.kBottomContentLeftIcons{
    display:inline-block;
}

    .kBottomContentLeftIcons img, .kBottomContentLeftIcons i {
        margin-right:4px;
        font-size:14px;
    }
    .kBottomContentLeftIcons > * {
        float: left;
        margin: 0 4px 0 4px;
        display: inline-flex;
    }

    .kBottomContentRightIcons {
        display: inline-block;
        float: right;
    }

    .kBottomContentRightIcons > * {
        margin: 0 4px 0 4px;
        display: inline-block;
        float: right;
    }
    .kBottomContentRightIcons i {
        float: left;
        margin-right: 4px;
    }
.bottomItemCalText {
    display: inline-block;
    max-width: 72px;
    text-align: center;
}
/*joeyelrassi 01042021 adding progress bar to kanban item*/
.kMiddleContentBar {
    margin-top: 10px;
}
.kContentProgressBar {
    display:inline-block;
    height:10px;
    border:1px solid lightgrey;
    border-radius:5px;
    margin-right:1%;
    width:88%;
}
.kContentProgressBarFill{
    background-color:darkcyan;
    height:10px;
    border-radius:5px;
    position:relative;
    top:-4px;
}
.kContentProgressDesc{
    position:relative;
    top:-3px;
    width:9%;
}

.kanbanItemTitle {
    background-color: pink; /*joeyelrassi this is to be passed from be*/
    display: inline-block;
}
.kItemTitleSpan{
    padding: 6px;
}
    .kItemTitleSpan:empty{
        padding:0;
    }

    .kanbanItemImage > li > .kItemTitleImage[src=""] {
        display: none;
    }

.kanbanItemImage{
    text-align:center;
    margin-bottom:0px;
}
.kItemTitleImage {
    padding-bottom: 10px;
    max-width: 98%;
}

.kItemContentMiddle img{
    max-width:98%;
}

.kanban-title-button.kanban-add-button, .kanban-title-button.kanban-add-button:focus {
    border: none;
    font-size: 32px;
    background-color: transparent;
    position: absolute;
    right: 15px;
    color: #ACACAC;
}

/*joeyelrassi kanban range combo*/
.range-combo{
display:block;
margin-bottom:8px;
text-align:right;
}
.range-combo > div{
    min-width:150px;
    text-align:center;
    display:inline-block;
}
    /*joeyelrassi 22042021 no update in case kanban cant drag*/
    .range-combo > .noUpdate {
        color: #FFC65C;
        min-width:unset;
        margin-right:23px;
    }
/*joeyelrassi kanban no records found msg*/
div[typeid="KANBAN"] msg {
    text-align:center;
    display:block;
}
/*joeyelrassi icons at the bottom of kanban*/
.KanbanFooterIcons{
    display:inline-flex;
    text-align:right;
    float:right;
    margin:8px;
}
/*nabilrafka 31072023 kanban saving message*/
.msgContainer.kanbanSave {
    position: absolute;
    width: 120px;
    top: 20px;
}
.kanbanMSG {
    color: #EB5C68;
}
/*-----------------------------------------------------------------joeyelrassi styles for kanban end-----------------------------------------------------------------*/
/*-----------------------------------------------------------------joeyelrassi 17052021 popup dialog header styles start-----------------------------------------------------------------*/
/*helo and info title header background*/
.popup .popupMessageHeader .close {
    color: white;
    opacity: 100%;
}
/*joeyelrassi 03112023 deprecated first rule*/
.ui-widget div.popupMessageHeader.info, .popupMessageHeader.help, .modal-dialog div.popupMessageHeader.info {
    background-color: rgb(120,190,255);
}
.popupMessageHeader {
    color: white;
}
.modal-header.ui-draggable-handle {
    cursor: move;
}
.modal-dialog div.modal-content {
    overflow: hidden;
    height: 100%;
}
.popupMessageBody {
    overflow: auto;
    max-height: calc(95vh - 164px);
    height: calc(100% - 96px);
}
/* Girelli 16/05/2014: Stile della popup in jQuery Dialog */
/*joeyelrassi 07112023 adesso in bootstrap popup*/
/*.popupMessage {
    display: inline-block;
}*/

    .popupMessage .messageText {
        font-size: 13px;
        float: left;
        width: 100%; /* Girelli 16/06/2014: aggiunto per poter centrare la table in ShowWR */
    }

        .popupMessage .messageText.newProductDesc:hover {
            color: red;
        }

/*warning title header background*/
/*joeyelrassi 03112023 deprecated first rule*/
.ui-widget div.popupMessageHeader.warning, .modal-dialog div.popupMessageHeader.warning {
    background-color: rgb(245,167,66);
}
/*error title header background*/
/*joeyelrassi 03112023 deprecated first rule*/
.ui-widget div.popupMessageHeader.error, .modal-dialog div.popupMessageHeader.error {
    background-color: #EB5C68;
}
/*Designer error title header background*/
/*joeyelrassi 03112023 deprecated first rule*/
.ui-widget div.popupMessageHeader.designer, .modal-dialog div.popupMessageHeader.designer {
    background-color: mediumpurple;
}
/*joeyelrassi 03112023 deprecated*/
/*message title header*/
.ui-widget div.ui-dialog-titlebar {
    height: 30px;
}
    /*joeyelrassi 03112023 deprecated first rule*/
.ui-widget div.ui-dialog-titlebar.popupMessageHeader, .modal-header.popupMessageHeader {
    text-align:center;
}

/*message title header span*/
.ui-widget span.ui-dialog-title, .popupMessageHeader .modal-title {
    font-size: 18px;
    float: none !important;
    position: relative;
    top: 0.1rem;
}
/*joeyelrassi for popup messages such as warning etc.*/
/*joeyelrassi 03112023 deprecated first rule*/
.ui-widget .popupMessageHeader span.ui-dialog-title {
    right: 1rem;
}

/*joeyelrassi 03112023 deprecated*/
/* Icona della Dialog Popup, posizionata nella Titlebar */
/*joeyelrassi 14052021 dialog left-side icons: added class bi, font size and left since now they are bi icons*/
.ui-dialog-titlebar .icon.bi {
    font-size: 24px;
    position: absolute;
    left: 1rem;
    color: white;
    top: -0.1rem;
}
.popupMessageHeader > .icon.bi {
    font-size: 22px;
    float: left;
    color: white;
}
/*joeyelrassi 03112023 deprecated*/
/*message title header x button*/
.ui-widget .ui-dialog-titlebar button.ui-dialog-titlebar-close,
.ui-widget .ui-dialog-titlebar button.ui-dialog-titlebar-close:active,
.ui-widget .ui-dialog-titlebar button.ui-dialog-titlebar-close:focus {
    background-color: transparent;
    border: none;
    color: white;
    font-size: 26px;
    width: 24px;
    height: 28px;
    top: 0.5rem;
    right: 1rem;
    outline: none;
    box-shadow: none;
}

.ui-widget[aria-describedby="upgradeModal"] .ui-dialog-titlebar button.ui-dialog-titlebar-close,
.ui-widget[aria-describedby="upgradeModal"] .ui-dialog-titlebar button.ui-dialog-titlebar-close:active,
.ui-widget[aria-describedby="upgradeModal"] .ui-dialog-titlebar button.ui-dialog-titlebar-close:focus,
.ui-widget[aria-describedby="activeproductsModal"] .ui-dialog-titlebar button.ui-dialog-titlebar-close,
.ui-widget[aria-describedby="activeproductsModal"] .ui-dialog-titlebar button.ui-dialog-titlebar-close:active,
.ui-widget[aria-describedby="activeproductsModal"] .ui-dialog-titlebar button.ui-dialog-titlebar-close:focus {
    color: gray;
    top: 1rem;
    box-shadow: none;
}
div.modal-dialog {
    margin: 5px auto;
}
div.popup {
    outline: none;
    display: none;
}
/*-----------------------------------------------------------------joeyelrassi 17052021 popup dialog header styles end-----------------------------------------------------------------*/
.custom-scroll {
    display: block;
    overflow: hidden;
    position: relative;
    padding-bottom: 12px;
    /*min-height:76px;*/ /*in case there is the load gif to make it visible*/
    height: unset !important; /*otherwise the overflow will work also vertically (Y-Axis)*/
}
.help-custom-scroll {
    overflow: hidden;
    position: relative;
}
.custom-scroll-parent {
    display: block;
}
/*-----------------------------------------------------------------SectionPreview Start-----------------------------------------------------------------*/
.SectionPreviewModal .FieldValueEdit > a > i, .SectionPreviewModal .nlbi {
    font-size: 18px;
    height: 20px;
}
/*joeyelrassi grids in sp should be 98.8% or else horizontal scrollbar in sp*/
.SectionPreviewModal .grid {
    width: 98.8%;
}
/* Girelli 24/2/2022: for grid in responsive section, must force container width to 100% */
.SectionPreviewModal .fieldContainer.grid {
    width: 100%;
}
.SectionPreviewModal .FieldValueEdit {
    height: 20px;
}

    .SectionPreviewModal .FieldValueEdit:empty {
        height: 0px;
    }
.SectionPreviewModal td.Label {
    height: 20px;
}
/* Girelli 8/8/2019: posizione icon section preview in un DESC_MAIN o DESC_REL */
span.sp {
    float: right;
}

.SectionPreviewModal .ExecutionLink, .SectionPreviewModal .ExecutionLink > i.nlbi {
    align-items: flex-start;
}
.SectionPreviewModal TD.FieldValue {
    padding: 0 5px 0 0;
}

.SectionPreviewModal .PictureDetail {
    padding: 2px;
}
.SectionPreviewModal .modal-header.popupMessageHeader {
    text-align: left;
}
.SectionPreviewModal .container {
    width: 100%;
}

.modal-header.popupMessageHeader {
    padding: 5px 15px 5px 15px;
    vertical-align: middle;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
/*-----------------------------------------------------------------joeyelrassi 25062021 style for new layout icons start-----------------------------------------------------------------*/
/* Girelli 27/08/2014: spaziatura link in cella a fianco della tendina */
a.cellLink {
    margin: 0 2px 0 2px;
    /*vertical-align:middle;*/ /*joeyelrassi 09072021 added to align vertically the i inside*/
}

a[typeid="LINK_ICON"] {
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}
/*joeyelrassi 24032023 added class in fieldtype jscode to adjust link icon width*/
/*nabilrafka 11112024 rule applied to link icon containers that are not a section folder*/
.linkIconContainer:not(.SectionFolder ) {
    table-layout: fixed;
}

.linkIconTop, .linkIconBottom {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    border-radius: 6px;
    width: 100%;
    height: 100px;
    padding: 4px;
    justify-content: center;
    transition: background-color 0.2s;
    text-overflow: ellipsis;
    overflow: hidden;
}

    .linkIconTop > div, .linkIconBottom > div {
        /*joeyelrassi 02032023 tolto da fieldtype e messo qui*/
        max-width: 100%;
        margin: auto;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .linkIconTop > i, .linkIconBottom > i {
        padding-top: 6px;
    }

.nlbi {
    font-size: 20px;
    height: 26px;
    display: inline-flex;
    vertical-align: middle;
    align-items: center;
    margin-left: 2px;
    cursor: pointer;
    color: #ACACAC;
}

.FieldValueEdit > a > i {
    font-size: 20px;
    height: 26px;
    display: inline-flex;
    vertical-align: middle;
    align-items: flex-start;
    margin-left: 2px;
    cursor: pointer;
}

.FieldValueEdit > a {
    vertical-align:top;
}

.TDSectionFolderNoWidth .FieldValueEdit > a > i, .fc_TDSectionFolderNoWidth .FieldValueEdit > a > i {
    align-items: center;
}

/* Girelli 2/09/2019: aggiornato spacing per l'icona link dal testo correlato */
.ExecutionLink .nlbi {
    margin-right: 4px;
    align-items:start;
}
.ExecutionLink .nlbi.bi-arrow-right-square {
    margin-left:4px;
}
#TimeCalculator .nlbi.bi-clock {
    padding: 0 4px 0 4px;
    margin-right: 8px;
}
#TimeCalculator .form-control {
    height:26px;
}

/*-----------------------------------------------------------------joeyelrassi 25062021 style new layout icons end-----------------------------------------------------------------*/
/*nabilrafka 22022023 change notification count style*/
.topbar .container .topbar-tools > ul > li.right-menu-toggle span.badge {
    left: 1px;
    top: -8px;
    position: relative;
    z-index: 1;
    padding: 2px 4px;
    align-items: center;
    justify-content: center;
    height: 14px;
    min-width: 14px;
    margin-right: 2px;
    border-radius: 6px;
}
/* Girelli 24/11/2020: stile record number sui Tab Multipage */
.TabRecordNumber {
    /*joeyelrassi 1122020*/
    cursor: pointer;
    background: red;
    color: white;
    height: 16px;
    padding: 2px 3px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    font-size: 10px;
    transform: translateX(-110%);
    font-family: 'Roboto', sans-serif;
}

/* ErrotTooltip: se multifield nascondo la freccia del tooltip  */
.bottom .errorMessage.ui-tooltip-content.multiField::after {
    top: 0;
}
/* Error tooltip X close button */
.errTooltipClose {
    position: absolute;
    z-index: 1;
    right: 2px;
    cursor: pointer;
}

/* Stile per DatePicker: select2 su mese e anno */
.select2-container.ui-datepicker-year {
    width: 55px !important;
}
.select2-container.ui-datepicker-month {
    width: 80px !important;
}
.select2-container.ui-datepicker-month .select2-chosen,
.select2-container.ui-datepicker-year .select2-chosen
{
    overflow: visible;
}
.ui-datepicker select.ui-datepicker-month,
.ui-datepicker select.ui-datepicker-year {
    width: initial;
}

/*joeyelrassi 120072021 to prevent datepicker title from going to other line*/
div.ui-datepicker .ui-datepicker-title {
    margin:0 2em; 
    line-height:1em;
}

a:hover i.bi-arrow-repeat {
    color: #449d44; /*green*/
}

/*joeyelrassi 09052022 set datepicker content font size for alignment (issues at 14 - default)*/
.ui-datepicker-calendar > thead {
    font-size:12px;
}
/*-----------------------------------------------------------------joeyelrassi 07022021 dhtmlx treegrid-----------------------------------------------------------------*/
div.gridbox_material.isModern {
    height: unset !important;
}
.gridbox .objbox {
    overflow: hidden !important;
    /*height:330px !important;*/
}

div[fullscreen="1"] .objbox {
    max-height:calc(100% - 40px);
    /*overflow-y:scroll !important;*/
}  

.treeTitle, .treeChild {
    display:inline-block;
}

.TreeGridBranch .TreeGridColumnBody{
    font-weight:bold;
    color:black;
}
.TreeGridColumnBody *{
    max-width:100%;
    white-space:normal;
    line-height:20px;
}
.TreeGridColumnBody .sp {
    line-height:32px;
}
.TreeGridCellDiv {
    max-width:85%;
}

.TreeGridColumnBody .FieldRemark:empty {
    display: none;
}
.treeGrid-container div.gridbox_material.gridbox table.obj.row20px tr.rowselected td {
    background-color: #F2F2F2;
}
.treeGrid-container div.gridbox_material.gridbox table.obj.row20px > tbody > tr > td {
    border-right: 1px solid #dfdfdf;
    border-bottom: 1px solid #dfdfdf;
}
.treeGrid-container div.gridbox_material.gridbox table.obj.row20px > tbody > tr > td:first-child {
    padding-left: 4px;
}
.treeGrid-container div.gridbox_material.gridbox table.obj.row20px tr td {
    border-right: none;
    border-bottom: none;
}
div.gridbox_material.gridbox table.hdr tr:nth-child(2) td {
    border: 1px solid #dfdfdf;
}

div.gridbox table.obj td span.space, div.gridbox table.obj td:first-child img.space {
    width: 10px;
}

.grid_collapse_icon {
    cursor: pointer;
}

.hdr td.sortableField {
    cursor: pointer !important;
}
/*.treeGrid-container .xhdr > table {
    padding-right: 0 !important;
    margin-right: 0 !important;
}*/

.treeGrid-container .xhdr > table tr > td:first-child {
    border-top-left-radius: 8px;
}
.treeGrid-container .xhdr > table tr > td:last-child {
    border-top-right-radius: 8px;
}

.treeGridLegendContainer {
    float: right;
    margin-right: 20px;
    margin-top: 10px;
}

.TreeGridLeaf .treegrid_cell {
    height:100% !important;
    white-space:normal !important;
}
/*joeyelrassi 19102021 to align in the middle*/
/*.treegrid_cell img.space{
    display:none !important;
}*/
.treegrid_cell {
    display: flex;
    align-items: center;
    justify-content: center;
}

#nodeval {
    display: inline-flex;
    justify-content: flex-end;
    width: 100%;
}
#nodeval:empty {
    display:none;
}
.TreeGridButtonsTop{
    position:absolute;
    right:0;
    top:-26px;
}
.TreeGridButtonsTop .btn.gridFields {
    /*top: -28px;*/
    display: block;
    position:relative;
    float:right;
    margin-right:15px;
    left:0;
    z-index:9;
}


.treegridHeader.fixed{
    z-index:5;
    position:absolute;
}


/*joeyelrassi treegridfooter*/
.dhx_toolbar_btn, .dhx_toolbar_text, .dhxtoolbar_btn_def {
    display: inline-flex;
    align-items: center;
}
.dhxtoolbar_float_left {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
}

.dhxtoolbar_float_left > .dhx_toolbar_btn:nth-last-child(-n+2) {
    margin-left: 10px;
    pointer-events: none;
}
.dhx_toolbar_btn {
    cursor:pointer;
}

.tgpc {
    display: flex;
    align-items: center;
}
.tgpp, .tgnp{
    margin:5px;
    cursor:pointer;
}
.tgcp, .tgtp{
    margin:3px;
}

/*treegrid footer*/
#treegridFooterContainer {
    width:99.8%;
}

/*treegrid with special lines test*/
tr.MainBranch .DESC_MAIN{
    font-size:30px;
    line-height:50px;
}
.treeGrid-container div.gridbox_material.gridbox table.obj.row20px tr.MainBranch > td {
    border-left: transparent;
    border-right: transparent;
}

div.gridbox_material.gridbox.ResultTable table.hdr td div.hdrcell {
    display: inline-flex;
    width: 100%;
    justify-content: center;
    padding-left:0;
}
div.hdrcell .FieldMandatory {
    margin-left:2px;
}

.treeGrid-container div.gridbox_material.gridbox table.obj > tbody > tr.rowselected > td:first-child {
    border-left: 2px solid #39c;
    padding-left: 2px;
}
/*-----------------------------------------------------------------joeyelrassi 17122021 PivotGrid-----------------------------------------------------------------*/
.dx-pivotgrid-fields-area-head {
    color: black;
    background: none;
    height: auto !important;
}

/*nabilrafka 23032023 added for excel export icon in pivotGrid*/
div.dx-pivotgrid-export-button {   
    height:100%;
    background-color: transparent;
}
/*nabilrafka 23032023 added for icons in pivotGrid*/
.dx-pivotgrid .dx-column-header .dx-pivotgrid-toolbar, .dx-pivotgrid .dx-filter-header div.dx-pivotgrid-toolbar {
    display: none;
}

/*nabilrafka 15012023 to remove bold font-weight after change of template*/
div.dx-pivotgrid .dx-pivotgrid-area.dx-pivotgrid-horizontal-headers td, div.dx-pivotgrid .dx-pivotgrid-area.dx-pivotgrid-vertical-headers td {
    font-weight: 400;
}

/*nabilrafka 16012024 override styles of each cell in pivot grid*/
div.dx-pivotgrid .dx-pivotgrid-area td, div.dx-pivotgrid .dx-pivotgrid-area td.dx-pivotgrid-collapsed, div.dx-pivotgrid .dx-pivotgrid-area td.dx-pivotgrid-expanded {
    padding: 4px;
    color: black;
    /*font-family: Arial, Verdana;*/
    font-size: 12px;
}

/* toglie il backgroud ai bottoni */
.dx-button {
    border-style: none !important;
}

/*nabilrafka 16012024 remove backgroundcolor on hover of left footer icons*/
.footerIconsLeft div.dx-button.dx-state-hover, .footerIconsLeft div.dx-button.dx-state-active, .footerIconsLeft div.dx-button.dx-state-focused {
    background-color: transparent;
    overflow: visible;
}

/*nabilrafka 16012024 override max-width of left footer icons*/
.footerIconsLeft .dx-button-has-icon {
    min-width: 22px;
}

.dx-pivotgrid-field-chooser-button.dx-button.dx-button-normal.dx-widget.dx-button-has-icon {
    height: 100%;
}

/* Mette icona excel standard di Ecos per PivotGrid */
.dx-icon-exportxlsx {
    background: url("../Disegni/Excel.gif") center center no-repeat;
}

    .dx-icon-exportxlsx:before {
        content: none !important;
    }
 
/*nabilrafka 15012024 close button in field chooser*/
div.dx-button-content i.dx-icon-close {
    height: 100%
}

    .dx-toolbar-button .dx-button-content .dx-button-text {
        height: 20px;
    }


.FooterTableIcon.gearColor {
    justify-content: center;
}

/* toglie le icone standard di pivotGrid */
.footerIconsLeft .dx-button-has-icon .dx-button-content {
    padding: 0px;
}

/* Mazzola 29/7/2016: tolto background grigio alla header della pivotGrid */
.dx-pivotgrid-horizontal-headers {
    background: none;
}
    /* centrato verticalmente in centro la label header delle colonne */
    .dx-pivotgrid-horizontal-headers tr td {
        vertical-align: middle;
    }
/* Mazzola 3/8/2016: mette sopra a tutto la popup pivotGrid  */
.dx-overlay-wrapper.dx-fieldchooser-popup.dx-popup-wrapper {
    z-index: 100001 !important;
    position: fixed;
}
/*nabilrafka 15012024 override z-index to put pivot grid overlays (popup and context menu) on top in fullscreen*/
.dx-overlay-wrapper {
    z-index: 3000 !important;
}
/*nabilrafka 15012024 override z-index to put pivotchart tooltip on top in fullscreen*/
.dxc-tooltip {
    z-index: 3000;
}

/* Mazzola 7/11/2018: manda a capo i bottoni della colonna di filtri della pivot, altrimenti sarebbero tutti su una riga */
.dx-filter-header .dx-pivotgrid-fields-area-head {
    display: block !important;
}

    .dx-filter-header .dx-pivotgrid-fields-area-head td {
        display: inline-block !important;
    }

.dx-pivotgrid .dx-pivotgrid-fields-area-head td {
    padding: 2px 2px !important;
}

/*nabilrafka 22032024 to leave pivot fields on one line when dragging them from fixed pivot header*/
.dx-area-field {
    white-space: nowrap;
}

/*nabilrafka 16012024 transition on background for hover on boxes*/
div.dx-pivotgrid-fields-container .dx-area-field.dx-area-box, div.dx-pivotgrid-fields-container .dx-area-field.dx-area-box .dx-sort {
    transition: all 0.3s;
    border-color: transparent;
}

/*joeyelrassi 17122021 make space in pivot grid for scrollbars*/
.dx-scrollable-content {
    transition-duration: 500ms;
    transition-property: padding-bottom;
}
.dx-area-data-cell .dx-scrollable-content.custom-horizontal-scroll {
    padding-bottom: 16px;
}
.dx-area-data-cell .dx-scrollable-content table > tbody > tr > td {
    transition-duration: 500ms;
    transition-property: padding-right;
}
.dx-area-data-cell .dx-scrollable-content td.custom-vertical-scroll {
    padding-right:16px !important;
}
div.dx-scrollable-both .dx-scrollable-content {
    overflow-y:hidden;
}

.fixedPivotHeader {
    position: fixed;
    z-index: 1;
}

.dx-pivotgrid .fixedPivotHeader .dx-area-column-cell, .dx-pivotgrid .fixedPivotHeader .dx-column-header {
    border-right: none;
}

/*nabilrafka 03052024 to add borders with radius to pivotgrid*/
.pivotGrid:after {
    content: '';
    display: flex;
    position: absolute;
    border-radius: 8px;
    z-index: 1;
    top: 0;
    width: 100%;
    height: 100%;
    border: 1px solid #ddd;
    pointer-events: none;
}
/*-----------------------------------------------------------------joeyelrassi 22022022 grid single column-----------------------------------------------------------------*/
.GSC_TITLE span.FieldValue {
    font-size: 16px;
    font-weight: bold;
    margin-top: 8px;
}
.GSC_DESC span.FieldValue {
    font-size: 12px;
    font-weight: bold;
}

/*-----------------------------------------------------------------joeyelrassi 15072021 Jobs-----------------------------------------------------------------*/
/*-------------------------------------------------------------------------joeyelrassi 03112021 Print Start-------------------------------------------------------------------------*/
.print, .printAll * {
    border-width: 2px !important;
}
/*-------------------------------------------------------------------------joeyelrassi 03112021 Print End-------------------------------------------------------------------------*/
/*-----------------------------------------------------------------joeyelrassi 15072021 Responsive Layout-----------------------------------------------------------------*/
.container .fieldContainer {
    margin-bottom: 6px;
}
.container .fieldContainer .FieldRemark {
    font-size:13px;
}
.container .fieldContainer .Label:not(:empty) {
    display:block;
    margin-bottom:2px;
    height:18px;
    padding-left:1%;
}
.container .fieldContainer .FieldValueEdit {
    /* Girelli 20/11/2023: tolto inline-flex per evitare che textarea siano di larghezza sbagliata in section responsive */
    /* display: inline-flex; */
    align-items: center;
    padding: 6px;
    border: 1px solid #D2D7D7;
    height: 100%;
    border-radius: 6px;
    width: 100%;
    transition: 300ms ease-in-out;
    transition-property: border-color;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height:34px;
}
.container .fieldContainer .FieldValueEdit:focus {
    outline: 1px solid !important;
}
.container .fieldContainer .FieldValueEdit a > i {
    align-items: center;
    /*joeyelrassi uguale al line height*/
    height: 20px;
}
.container .fieldContainer > .FieldValue {
    margin-top: 4px;
}
.container .fieldContainer .FieldValueEdit .ExecutionLink {
    align-items:center;
    white-space: normal;    /*joeyelrassi 03102022 added word break*/
    word-break:break-all;
}
.container .fieldContainer .FieldValueEdit > *:not(.bootstrap-switch-null) {
    line-height:20px;
}
/* Girelli 31/10/2023: In section responsive in Edit, the Field Cells must have no border, different style */
div[sectionEdit="1"] .container .fieldContainer .FieldValueEdit {
    border: 0;
    padding: 2px;
}
/* Girelli 25/3/2024: HR must have no border in div container */
.container .fieldContainer .FieldValueEdit:has( > hr ) {
    border: 0;
}


/*joeyelrassi responsive layout in full screen*/
body.PopupDetail .container {
    width: auto !important;
    max-width: none !important;
}
/*--------------------------------------------------------------------------joeyelrassi 28102021 site font start--------------------------------------------------------------------------*/
.ui-widget, .lightGray .ui-widget {
    font-family: 'Roboto', sans-serif;
}

/*paginatitolo done before*/
#tabMenu > li > a, div.PageTabList.ui-tabs, .ui-tabs-nav[role="tablist"], #selectSectionField, #selectFields, #selectSections, #gridSort, #searchSort {
    font-family: 'Raleway', Arial, Verdana, sans-serif;
    font-size: 14px;
}
#tabMenu > li > a{
    font-weight:500;
}
/*--------------------------------------------------------------------------joeyelrassi 28102021 site font end--------------------------------------------------------------------------*/

/*--------------------------------------------------------------------------joeyelrassi 28102021 icon animations start--------------------------------------------------------------------------*/
@keyframes shadowOffOn {
    50% {
        box-shadow: none;
    }
}
@keyframes updownLess {
    0% {
        transform: translateY(0%);
    }

    50% {
        transform: translateY(-12%);
    }

    100% {
        transform: translateY(0%);
    }
}
@keyframes downupLess {
    0% {
        transform: translateY(0%);
    }

    50% {
        transform: translateY(12%);
    }

    100% {
        transform: translateY(0%);
    }
}


@keyframes updown {
    0% {
        transform: translateY(0%);
    }
    50% {
        transform: translateY(-20%);
    }
    100% {
        transform: translateY(0%);
    }
}
@keyframes downup {
    0% {
        transform: translateY(0%);
    }
    50% {
        transform: translateY(20%);
    }
    100% {
        transform: translateY(0%);
    }
}
@keyframes updown2 {
    0% {
        transform: translateY(0%);
    }
    25% {
        transform: translateY(-5%);
    }
    75% {
        transform: translateY(5%);
    }
}
@keyframes leftright {
    0% {
        transform: translateX(0%);
    }

    25% {
        transform: translateX(-5%);
    }

    75% {
        transform: translateX(5%);
    }
}

@keyframes updownRot90 {
    0% {
        transform: translateY(0%) rotate(90deg);
    }
    50% {
        transform: translateY(-20%) rotate(90deg);
    }
    100% {
        transform: translateY(0%) rotate(90deg);
    }
}

@keyframes bigsmall {
    0%{
        transform:scale(1);
    }
    50%{
        transform:scale(1.15);
    }
    100%{
        transform:scale(1);
    }
}
@keyframes bigsmall2 {
    0%{
        transform:scale(1);
    }
    50%{
        transform:scale(1.1);
    }
    100%{
        transform:scale(1);
    }
}
@keyframes bigsmall3 {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.3);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes smallbig {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(0.8);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes rotateR {
    0%{
        transform:rotate(0deg);
    }
    50%{
        transform:rotate(180deg);
    }
    100%{
        transform:rotate(360deg);
    }
}

@keyframes swing {
    0% {
        transform: rotate(0deg);
    }
    25% {
        transform: rotate(15deg);
    }
    75% {
        transform: rotate(-15deg);
    }
}
@keyframes swingLess {
    0% {
        transform: rotate(0deg);
    }
    25% {
        transform: rotate(5deg);
    }
    75% {
        transform: rotate(-5deg);
    }
}
@keyframes ellipsis {
    to {
        width: 1em;
    }
}
@keyframes showHideBorder {
    0% {
        border-color: #ddd;
    }

    50% {
        border-color: transparent;
    }

    100% {
        border-color: #ddd;
    }
}

.footerIconsRight .FooterTableIcon:hover, .footerIconsLeft .FooterTableIcon:hover {
    animation: updown 1s ease-in-out infinite;
}
.footerIconsRight .FooterTableIcon.bi-list:hover, .footerIconsLeft .FooterTableIcon.bi-list:hover {
    animation: updownRot90 1s linear infinite;
}
.footerIconsRight .FooterTableIcon.sizeFullScreen:hover, .footerIconsLeft .FooterTableIcon.sizeFullScreen:hover {
    animation: bigsmall 1.5s linear infinite;
}
/*mattiapaganini 07032023 aggiunto per animare physicalviewbanner*/
/*mattiapaganini 22032023 animazione di ricarica pagina viene attivata on hover su tutto il div*/
.footerIconsRight .FooterTableIcon.gridReload:hover, .footerIconsLeft .FooterTableIcon.gridReload:hover, .headerMenuContainer:hover > .bi-arrow-repeat.headerMenuIcon:before {
    animation: rotateR 1.5s linear 2;
}
.footerIconsRight .FooterTableIcon.sizeRestore:hover, .footerIconsLeft .FooterTableIcon.sizeRestore:hover {
    animation: smallbig 1.5s linear infinite;
}

/*mattiapaganini 07062023 aggiunta regola per evitare di far girare la immagine on hover*/
.footerIconsLeft > .PhysicalViewBanner .ImageFieldValue:hover {
    animation: none;
}
/*---------------------------------------------------joeyelrassi 04012022 ripple effect start---------------------------------------------------*/
/*create ripple effect content click css*/
@keyframes rippleClick {
    to {
        transform: scale(4);
        opacity: 0;
    }
}

span.ripple {
    position: absolute;
    border-radius: 50%;
    animation: rippleClick 300ms linear;
    background-color: rgba(0, 0, 0,0.2);
}
/*---------------------------------------------------joeyelrassi 04012022 ripple effect end---------------------------------------------------*/

/*---------------------------------------------------------------------  joeyelrassi 28102021 icon animations end-----------------------------------------------------------------------*/
/*joeyelrassi 03112021 override jquery-ui-ecos*/
.ui-widget-header, .lightGray .ui-widget-header {
    border-bottom: none;
}
/*joeyelrassi 27/11/2023 new jquery library does not automatically put ui-corner-all class for round corners*/
.ui-widget-content .ui-menu-item-wrapper {
    border-radius: 5px;
}

.ui-menu.ui-widget-content {
    border-radius: 5px;
}

/*joeyelrassi 27/11/2023 added from old jquery-ui.css*/
.ui-menu .ui-menu-item div.ui-state-focus, .ui-menu .ui-menu-item div.ui-state-active {
    font-weight: normal;
    margin: -1px;
}
/*joeyelrassi 27/11/2023 added from old jquery-ui.css*/
.ui-menu .ui-menu-item div {
    text-decoration: none;
    display: block;
    padding: 2px 0.4em;
    line-height: 1.5;
    min-height: 0;
    font-weight: normal;
}
/*joeyelrassi 27/11/2023 added from old jquery-ui.css*/
.ui-widget-content .ui-menu-item-wrapper.ui-state-focus, .ui-widget-content .ui-menu-item-wrapper.ui-state-active, .ui-widget-content .ui-menu-item-wrapper.ui-state-hover {
    border: 1px solid #ddd;
    background: #a5a5a5;
    font-weight: bold;
    color: #ffffff;
}

/*--------------------------------------------------------------------------joeyelrassi 15122021 footer start--------------------------------------------------------------------------*/
.footerTextRelease {
    font-size: 22px;
    margin-left: 12px;
}
.footerTextCopyright {
    font-size:12px;
    margin-left:4px;
    display:inline-flex;
    align-items:center;
    position:relative;
    top:1px;
}
.copyrightLogo{
    font-size:14px;
    margin:4px;
    color:white !important;
}
.footerTextRelease, .footerTextCopyright {
    color: white;
    font-family: 'Montserrat', sans-serif;
    font-weight: 300;
}
.footer-inner .followUs {
    font-size: 30px;
    margin-right: 140px;
    user-select: none;
    display: none;
}
.footer-inner .followUs a {
    margin-right: 22px;
}
/*----------------------------------------------------------------joeyelrassi 28102021 timbrature web start----------------------------------------------------------------*/
#DepartmentTime #idHours tbody > tr > td {
    background-color: white;
}

/*joeyelrassi 03012022 gridsplit start*/
.GridSplitDescriptionTab {
    font-size: 14px;
    padding-left: 5px;
    font-family: 'Raleway', sans-serif;
    font-weight: 500;
    margin-left: 6px;
}
.GridSplitMember > .grid{
    margin: 6px 5px 12px 5px;
}
.GridSplitMember > .grid .GridFooter{
    /*joeyelrassi added height so all footers have same height*/
    height:34px;
}
/*----------------------------------------------------------------joeyelrassi 21032022 search sections----------------------------------------------------------------*/
/* Girelli 06/05/2014: Allineamento Checkbox e Bottoni, dato che ora sono in 2 DIV in una unica TD */
.SearchParam input[type='checkbox'] {
    height: 18px;
    margin-left: 4px;
    margin-top: 0;
}

.SearchParam .divCheckbox {
    vertical-align: middle;
    display: none;
    height: 46px;
    overflow: hidden;
}

.SearchPageParamContainer .SearchParam .divButton, .DetailPageParamContainer .SearchParam .divButton {
    /*joeyelrassi 05072021 make section higher*/
    display: inline-flex;
    flex-direction: row;
    z-index: 1;
    transition: top .5s ease;
    float:right;
}

#tabs_S div.DetailPageParamContainer, #tabs div.SearchPageParamContainer {
    margin: 8px 4px 0 0;
    width: 230px;
    display: inline-block;
    /*float: right;*/
    position: absolute;
    right: 0px;
}

.searchFilterToggler {
    cursor: pointer;
    padding-left: 4px;
    display: inline-block;
    height: 18px;
}
.searchFilterToggler:hover span, .vChartLabelToggler:hover span {
    text-decoration: underline;
}
.searchFilterToggler > i, .vChartLabelToggler > i {
    margin-right: 4px;
}
/*------------------------------------------------------joeyelrassi 29032022 select sections, fields, tabs and sort popups START------------------------------------------------------*/
/*popup page sections*/
#sectionToggler {
    display: inline-block;
    float: right;
    height: 20px;
}
/* Popup di scelta SectionField */
.selectSectionField, .selectPageTab, .selectFields, .gridSort {
    position: absolute;
}

.selectSections {
    top: -326px;
    position: relative;
}

/* Popup di selezione e spostamento dei PageTab e SectionField */
.selectPageTab {
    right: 440px;
    top:34px;
}

#selectSectionField, #selectPageTab, #selectFields, #selectSections, #gridSort, #searchSort {
    display: none;
    position: absolute;
    top: 4px;
    z-index: 10;
    background-color: #f6f6f6;
    width: 436px;
    -webkit-box-shadow: 0 0 6px 2px rgba(153, 153, 153, 0.85);
    -moz-box-shadow: 0 0 6px 2px rgba(153, 153, 153, 0.85);
    box-shadow: 0 0 6px 2px rgba(153, 153, 153, 0.85);
    /*border: 0px;*/
    text-align: center;
    border-radius: 6px;
}

/* Box ordinamento multifield di Search DataTable */
#selectFields, #gridSort, #searchSort {
    right: 0px;
}

#selectFields, #gridSort {
    z-index: 1036;
}

/*joeyelrassi 15012021 Box selezione colonne di Sections, normalmente nascosta */
div#selectSections {
    position: relative;
}

#selectSectionField ul > li, #selectPageTab ul > li, #selectFields ul > li, #selectSections ul > li, #gridSort ul > li, #searchSort ul > li {
    font-weight: normal;
    margin-bottom: 1px;
    cursor: pointer;
    font-size: 12px;
    background: white;
    padding: 1px 4px;
    min-height: 22px;
    border-radius: 6px;
}

#selectSectionField span, #selectPageTab span, #selectFields span, #selectSections span, #gridSort span, #searchSort span {
    font-weight: bold;
}
#selectSectionField span.selectChoice, #selectPageTab span.selectChoice, #selectFields span.selectChoice, #selectSections span.selectChoice,
#gridSort span.selectChoice, #searchSort span.selectChoice {
    font-weight:normal;
    position:relative;
    top:1px;
}

/* Icona chiusura box selezione colonne */
#selectSectionField .close, #selectPageTab .close, #selectFields .close, #selectSections .close, #gridSort .close, #searchSort .close {
    float: right;
    margin: 2px;
    font-size: 12px;
}

div.tabsExcluded, div.itemExcluded, div.fieldsExcluded, div.sectionsExcluded {
    float: left;
    margin-left: 4px;
}

div.tabsIncluded, div.itemIncluded, div.fieldsIncluded, div.sectionsIncluded {
    float: right;
    margin-right: 4px;
}

ul#tabsExcluded, ul#tabsIncluded, ul#itemExcluded, ul#itemIncluded, ul#fieldsExcluded, ul#fieldsIncluded, #sortFieldsExcluded,
ul#sortFieldsIncluded, ul#sectionsExcluded, ul#sectionsIncluded {
    width: 210px;
    height: 202px;
    overflow: hidden;
    list-style-type: none;
    padding: 0 10px 0 0;
    text-align: left;
    position: relative; /* per Perfect-Scrollbar */
}
/* TextBox per filtrare i fields di ordinamento quando sono tanti */
div.sortFieldsFilter {
    display: none;
    float: left;
    margin-bottom: 2px;
}
div.sortFieldsFilter input {
    height: 22px;
}
div.sortFieldsFilter i {
    padding-left: 3px;
}


/* Sul lato sinistro icona rimossa */
.fieldsExcluded .icon-sort {
    display: none;
}

/* Colore campi non readonly (non rimovibili) di grid nel box di scelta campi */
#selectFields .no-exclude, ul#tabsIncluded > li.first, #sectionsIncluded .no-exclude {
    color: red !important;
}

/* Icone riordinamento */
ul#tabsExcluded > li > i, ul#tabsIncluded > li > i, ul#itemExcluded > li > i, ul#itemIncluded > li > i, ul#fieldsExcluded > li > i,
ul#fieldsIncluded > li > i, ul#sortFieldsExcluded > li > i, ul#sortFieldsIncluded > li > i, ul#sectionsExcluded > li > i, ul#sectionsIncluded > li > i {
    margin: 0px;
    color: #888;
    font-size: 14px;
    vertical-align:middle;
    padding-right:10px;
}

/* Girelli 9/2/2016: Colore frecce di ordinamento multifield  */
ul#sortFieldsIncluded > li > i.icon-sort:before, ul#fieldsIncluded > li > i.icon-sort:before {
    color: Blue;
}
ul#tabsIncluded > li.first > i.fa {
    visibility: hidden;
}

/* Tasti Cancel, Ok, Reset di SelectPageTab e di SelectSectionField */
button#selectSectionField_ok, button#selectPageTab_ok, button#selectFields_ok, button#selectSections_ok, button#gridSort_ok, button#searchSort_ok {
    margin: 5px;
}

button#selectSectionField_cancel, button#selectPageTab_cancel, button#selectFields_cancel, button#selectSections_cancel, button#gridSort_cancel, button#searchSort_cancel {
    margin: 5px;
    float: left;
}

button#selectSectionField_reset, button#selectPageTab_reset, button#selectFields_reset, button#selectSections_reset, button#gridSort_reset, button#searchSort_reset {
    margin: 5px;
    float: right;
}

/* In Grid FullScreen li porto piu' su */
div.fullScreen > .selectFields, div.fullScreen > .gridSort {
    bottom: 305px;
    left: -25px;
    position: fixed;
}

div.fullScreen #selectFields, div.fullScreen #gridSort {
    top: 0px !important;
}

/* Girelli 6/2/2023: SelectFields and Sort must be narrower in OrgChart Directory side box */
.orgDrawerItemContainer ul#fieldsExcluded, .orgDrawerItemContainer ul#fieldsIncluded,
.orgDrawerItemContainer ul#sortFieldsExcluded, .orgDrawerItemContainer ul#sortFieldsIncluded {
    width: 170px;
}
.orgDrawerItemContainer #selectFields, .orgDrawerItemContainer #gridSort {
    width: 366px;
}
/* Girelli 7/2/2023: Rules for narrow Grid in OrgChart Directory Drawer */
.orgDrawerItem.profileContent .row {
    padding-left: 0;
}
.orgDrawerItem.profileContent .ResultTable .footerIconsLeft {
    min-width: 50px;
}
.orgDrawerItem.profileContent .ResultTable .footerIconsRight {
    min-width: 50px;
}
.orgDrawerItem.profileContent .ResultTable .reloadCell,
.orgDrawerItem.profileContent .ResultTable .gridNavigation .ResultFooterButtonLeftEnd,
.orgDrawerItem.profileContent .ResultTable .gridNavigation .ResultFooterButtonRightEnd,
.orgDrawerItem.profileContent .ResultTable .gridAppendButton,
.orgDrawerItem.profileContent .ResultTable .recordFound {
    display: none;
}



/*-------------------------------------------------------joeyelrassi 29032022 select sections, fields, tabs and sort popups END-------------------------------------------------------*/
/*-------------------------------------------------------joeyelrassi 15052023 New Layout Grid Styles Start-------------------------------------------------------*/
.GridLabelAndBannerContainer {
    display: flex;
}

.sectionBorders .DetailTableTab {
    margin-bottom: 8px;
}
.sectionBorders .DetailTableTab .ChartTitle {
    margin-bottom: 0px;
}
.GridLabelAndBannerContainer .DetailTableTab {
    margin-right: 6px;
}
/*-------------------------------------------------------joeyelrassi 14042022 GridPlanView Styles (new grid style)-------------------------------------------------------*/
/*title style (color, background, etc)*/
div .ui-tabs div.GridPlanView ul.DetailTableTab.ui-tabs-nav li.ui-tabs-selected.ui-state-active,
div .ui-tabs div.GridSimpleView ul.DetailTableTab.ui-tabs-nav li.ui-tabs-selected.ui-state-active {
    background-color: transparent;
    color: #484848;
    height: 34px;
    font-size: 16px;
}
/*general table body style (borders)*/
div.GridPlanView #ResultTable.dataTable,
div.GridSimpleView #ResultTable.dataTable {
    border: 0px solid transparent;
}
/*table header style (color, background color)*/
div.GridPlanView THEAD, div.GridPlanView .THeadTable,
div.GridSimpleView THEAD, div.GridSimpleView .THeadTable {
    color: #484848;
    background-color: transparent;
}
div.GridPlanView .ColumnHeader,
div.GridSimpleView .ColumnHeader {
    color: #484848 !important;
}
/*header and body row height*/
div.GridPlanView .dataTable TR,
div.GridSimpleView .dataTable TR {
    height: 34px;
    vertical-align: middle;
}
/*header fields padding and borders*/
div.GridPlanView TABLE.dataTable > THEAD > TR > TD, div.GridPlanView TABLE.dataTable > THEAD > TR > TH {
    border-right: none;
    border-left: none;
    border-bottom: 1px solid #DDD;
}
/*sort icon*/
div.GridPlanView #ResultTable th > i, div.GridPlanView .dataTable thead.fixed th > i,
div.GridSimpleView .dataTable i {
    color: #ACACAC;
}
/*body row background color*/
div.GridPlanView table.dataTable.display > tbody > tr,
div.GridSimpleView table.dataTable.display > tbody > tr {
    background-color: transparent;
}

div.GridPlanView table.dataTable.hover tbody tr:hover, div.GridPlanView table.dataTable.display tbody tr:hover {
    background-color: transparent;
}
/*single body field border, height*/
div.GridPlanView #ResultTable.dataTable > tbody > tr > td {
    border-left: none;
    border-right: none;
    border-bottom: 1px solid #DDD;
}
/*combo box wrapper in table*/
div.GridPlanView #ResultTable .select2-container {
    height: 30px;
}
/*combo box in table*/
div.GridPlanView .select2-container .select2-choice {
    height: 30px;
    border-radius: 0px;
}
/*combo box x in table*/
div.GridPlanView .select2-container .select2-choice abbr {
    top:8px;
}
/*combo box arrow in table*/
div.GridPlanView .select2-container .select2-choice .select2-arrow b:before {
    top:2px;
}
/*----------------------------------------------joeyelrassi 14042022 GridPlanViewSummary Styles (new grid style)----------------------------------------------*/
/*title style (color, background, etc)*/
div.ui-tabs div.GridPlanViewSummary ul.DetailTableTab.ui-tabs-nav li.ui-tabs-selected.ui-state-active {
    background-color: transparent;
    color: black;
    height: 34px;
    font-size: 16px;
}
/*general table body style (borders)*/
div.GridPlanViewSummary #ResultTable.dataTable {
    border: 0px solid transparent;
}
/*table header style (color, background color)*/
div.GridPlanViewSummary THEAD, div.GridPlanView .THeadTable {
    color: black;
    background-color: transparent;
}
/*header fields padding and borders*/
div.GridPlanViewSummary TABLE.dataTable > THEAD > TR > TD, div.GridPlanViewSummary TABLE.dataTable > THEAD > TR > TH {
    border-right: none;
    border-left: none;
    border-bottom: 0px solid transparent;
}
div.GridPlanViewSummary .ColumnHeader {
    color: black !important;
}
/*header and body row height*/
div.GridPlanViewSummary .dataTable TR {
    height: 18px;
    vertical-align: middle;
}
/*body row background color*/
div.GridPlanViewSummary table.dataTable > tbody > tr {
    background-color: rgb(242,242,242);
}
div.GridPlanViewSummary table.dataTable tbody th, div.GridPlanViewSummary table.dataTable > tbody > tr > td {
    height: 18px;
    border-left: none;
    border-right: none;
}
div.GridPlanViewSummary table.dataTable > tbody > tr:first-child > td {
    border-top: 2px solid black;
    padding-top: 8px;
}
div.GridPlanViewSummary table.dataTable > tbody > tr:last-child > td {
    border-bottom: 2px solid black;
    padding-bottom: 8px;
}

/*sort icon*/
div.GridPlanViewSummary #ResultTable th > i, div.GridPlanViewSummary .dataTable thead.fixed th > i {
    color: black;
}

div.GridPlanViewSummary table.dataTable.hover tbody tr:hover, div.GridPlanViewSummary table.dataTable.display tbody tr:hover {
    background-color: transparent;
}
/*-------------------------------------------------------joeyelrassi 01092023 GridSimpleView Styles (new grid style)-------------------------------------------------------*/
div.GridSimpleView TABLE.dataTable > THEAD > TR > TD, div.GridSimpleView TABLE.dataTable > THEAD > TR > TH {
    border-right: 1px solid #DDD;
    padding-left: 4px;
    padding-right: 4px;
    border-left: none;
    border-bottom: 1px solid #DDD;
}

    div.GridSimpleView TABLE.dataTable > THEAD > TR > TD:first-child, div.GridSimpleView TABLE.dataTable > THEAD > TR > TH:first-child {
        border-left: 1px solid #DDD;
    }
	
div.GridSimpleView #ResultTable.dataTable > tbody > tr > td {
    border-left: none;
    border-right: 1px solid #DDD;
    border-bottom: 1px solid #DDD;
}

    div.GridSimpleView #ResultTable.dataTable > tbody > tr > td.ListCellGroup:first-child {
        border-left: 1px solid #DDD;
    }

div.GridSimpleView table.dataTable.hover tbody tr:hover, div.GridSimpleView table.dataTable.display tbody tr:hover {
    background-color: #dedede;
}

.GridSimpleView .ResultTable > thead > tr:first-child > th, .GridSimpleView table.ResultTable thead.fixed > tr {
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    background-color: #fff;
    border-top: 1px solid #ddd;
}
/*---------------------------------------------------------------------------IndoorMap Styles---------------------------------------------------------------------------*/
div.navigation-ball, div.zoom-ball {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: black;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    margin: 10px;
    -webkit-box-shadow: 0 0 6px 2px rgba(153, 153, 153, .5);
    position: relative;
    overflow: hidden;
    font-size: 18px;
}

div.navigation-ball {
    opacity:0.8;
    transition: opacity linear 0.2s;
}
div.navigation-ball:hover {
    opacity:1;
}

div.zoom-ball {
    opacity: 0.8;
    transition: font-size linear 0.2s, background-color linear 0.2s, opacity linear 0.2s;
}
div.zoom-ball > i{
    display:inline-flex;
}

    div.zoom-ball:hover {
        font-size: 26px;
        opacity:1;
    }

.selected > div.navigation-ball {
    color: white;
    opacity:1;
}
div.leaflet-top, div.leaflet-bottom {
    z-index:401;
}

/*marker styles*/
/*.indoor-icon-blue i, .indoor-icon-red i, .indoor-icon-green i, .indoor-icon-orange i,*/
.leaflet-marker-icon.div-icon-container i {
    background-color: white;
    border-radius: 50%;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
}
div.indoor-icon-blue i {color:blue;} 
div.indoor-icon-red i {color: red;}
div.indoor-icon-green i {color: lightgreen;}
div.indoor-icon-orange i {color: darkorange;}

.indoorMapLabel.indoor-icon-blue span {
    background: blue;
}
.indoorMapLabel.indoor-icon-red span {
    background: red;
}
.indoorMapLabel.indoor-icon-green span {
    background: lightgreen;
}
.indoorMapLabel.indoor-icon-orange span {
    background: darkorange;
}

/*.indoor-icon-blue, .indoor-icon-red, .indoor-icon-green, .indoor-icon-orange,*/
.leaflet-marker-icon.div-icon-container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 24px !important;
    width: 24px !important;
    box-shadow: 0 0 6px 2px rgba(153, 153, 153, 0.85);
    border-radius: 50%;
    background-color: white;
}
.leaflet-marker-icon.div-icon-container.newIndoorIcon {
    box-shadow:0 0 0;
}

.leaflet-container .custom-delete-button {
    position: absolute;
    bottom: 0px;
    right: 0px;
    padding: 4px 4px 0 0;
    border: none;
    text-align: center;
    width: 18px;
    height: 14px;
    font: 25px/10px Tahoma, Verdana, sans-serif;
    color: #c3c3c3;
    text-decoration: none;
    font-weight: bold;
    background: transparent;
}
.leaflet-container .custom-delete-button:hover {
    color: #999;
}
/* Font del tooltip dei marker di indoormap */
.leaflet-tooltip-pane {
    font-size: 12px;
}

.indoormapsave {
    position: absolute;
    color:red;
    display:none;
    font-size:14px;
}

.newIndoorIcon i::after {
    content: '';
    width: 22px;
    height: 22px;
    border-radius: 50%;
    /*border: 1px solid black;*/
    /*animation: bigsmall2 1.5s linear infinite;*/
    position: absolute;
}
.print.newIndoorIcon i::after {
    left: 0px;
}

.MapFooter {
    display: inline-flex;
    justify-content: flex-end;
    width: 100%;
}

.MapTitle:empty {
    display:none;
}
.MapTitle {
    font-size: 18px;
    text-align:center;
    margin:0 auto;
    display:inline-block;
}

.footerIconsRight.MapFooterIcons {
    justify-content: flex-end;
}

.indoorMapLegendContainer {
    display: inline-block;
}
.indoorMapLabel {
    display: inline-block;
    margin-right: 10px;
    float: left;
    font-size: 13px;
    cursor: default;
    position: relative;
}
    .indoorMapLabel span {
        border-radius: 6.5px;
        width: 13px;
        height: 13px;
        margin: 2px;
        float: left;
        background: #EB5C68;
    }

.IndoorMapNoLayer {
    margin-top:4px;
}
/*---------------------------------------------------------------------------IndoorMap Styles End---------------------------------------------------------------------------*/
/*----------------------------------------------------------------------International Tel Styles Start----------------------------------------------------------------------*/

/*joeyelrassi 06102022 intl tel input styles*/
ul.iti__country-list {
    border-radius: 6px;
    margin-top:2px;
    overflow: hidden;
    z-index:3;
}
span.iti__dial-code {
    /*float:right;*/
}
.iti > input[type="tel"] {
    width: 26ex;
}
.iti > input[type="tel"]::placeholder {
    opacity: 0.4;
}
/*----------------------------------------------------------------------International Tel Styles End----------------------------------------------------------------------*/


/* Girelli 30/1/2023: Animation for Secondary Section loading */
@keyframes sectionLoad {
    from {
        background-color: #fafafa;
    }
    to { background-color: transparent; }
}
.sectionLoad {
    width: 100%;
    height: 100px;
    animation: sectionLoad 1s infinite;
}

/* SFTP_DL GridDataFile */
table[typeid=SFTP_DL] tr.odd {
    background-color: #f2f2f2;
}
table[typeid=SFTP_DL] tr > td {
    border-top: 1px solid #ddd;
    border-right: 1px solid #ddd;
}
table[typeid=SFTP_DL] tr > td:first-child {
    border-left: 1px solid #ddd;
}
/*nabilrafka 09042024 excluded th of fixed thead from the rules*/
table [typeid=SFTP_DL] thead:not(.fixed) th:nth-child(1) {
    max-width: 40px;
}
table[typeid=SFTP_DL] thead:not(.fixed) th:nth-child(3) {
    max-width: 100px;
}
table[typeid=SFTP_DL] td:nth-child(1) {
    text-align: center;
}
table[typeid=SFTP_DL] td:nth-child(3) {
    text-align: right;
}
table[typeid=SFTP_DL] td:nth-child(4), table[typeid=SFTP_DL] th:nth-child(4) {
    text-align: center;
}
hidden {
    display:none;
}

/* User settings icon on top right */
.UserSettings.selected {
    border: 1px solid #EB5C68;
    background-color: #e8e8e8;
}

/* AUDIO fieldType */
div.audio {
    display: inline-flex;
}
div.audio audio {
    height: 30px;
}
div.audio i {
    font-size: 22px;
    cursor: pointer;
    display: none;
}
div.audio i:hover {
    color: blue;
}
div .audio i.recording {
    color: red;
}
div.audio .time {
    padding: 5px;
    font-size: 14px;
}
/* AUDIO_ICON fieldtype */
div.audio_icon {
    display: table-cell;
    text-align: center;
}
div.audio_icon .time {
    text-align: center;
    font-size: 16px;
}
div.audio_icon i.audio_icon {
    font-size: 36px;
}
div.audio_icon i.audio_icon.rec {
    display: none; /* Default hidden, showed at Init if needed */
}
div.audio_icon i.recording {
    color: red;
}
div.audio_play {
    min-width: 64px;
}
div.audio_play .time, div.audio_play > i.audio_icon {
    display: table-cell;
}
div.audio_play > i.audio_icon {
    font-size: 20px;
}

.g-recaptcha {
    margin: 6px 0;
}

/*ariannaboisseau 061023 aggiunta classe per girare bottone*/
.rotate180 {
    transform: rotate(180deg);
}

/*--------------------------------------------override styles.css start--------------------------------------------*/
#Grid .mix {
    display: block;
}
/*--------------------------------------------moved from theme.css--------------------------------------------*/
element.style {
    margin-bottom: 10px;
}
.MainColumn, .fc_MainColumn {
    background-color: #FFFF00;
}

.DataExpire, .fc_DataExpire {
    font-style: italic;
    color: #FF00FF !important;
}
.FolderTitle A:visited {
    color: #FFFFFF;
}
.FolderTitle A {
    color: #FFFFFF;
}

/*******************************/
/******  NAVIGATION PILLS  *****/
/*******************************/
.nav-pills > li {
    float: left !important;
}

.nav-pills > li > a {
    border-radius: 0px !important;
    color: #777;
}
.nav-pills > li + li {
	margin-left: 2px !important;
}
.nav-pills > li > a:hover {
	color: #777;
}
.nav-pills > li.active > a,
.nav-pills > li.active > a:hover,
.nav-pills > li.active > a:focus {
    color: white !important;
}

.nav-pills > li.mixitup-control-active > a,
.nav-pills > li.mixitup-control-active > a:hover,
.nav-pills > li.mixitup-control-active > a:focus {
    color: white !important;
}

div.ui-tabs li.ui-tabs-selected.ui-state-active, div.ui-tabs li.ui-tabs-selected.ui-state-active:hover {
    color: white;
}

/*-------------------------------------------------------------------Layout properties-------------------------------------------------------------------*/
/*theme border radius*/
.l-br-6 {
    border-radius: 6px;
}
.l-br-8 {
    border-radius: 8px;
}
.l-br-50 {
    border-radius: 50%;
}
.l-lh-28 {
    line-height: 28px;
}
.l-lh-30 {
    line-height: 30px;
}
.l-dim-20 {
    width: 20px;
    height: 20px;
}
.l-dim-28 {
    width: 28px;
    height: 28px;
}
.l-dim-30 {
    width: 30px;
    height: 30px;
}
.l-dim-32 {
    width: 32px;
    height: 32px;
}
.l-dim-34 {
    width: 34px;
    height: 34px;
}
.l-dim-36 {
    width: 36px;
    height: 36px;
}
.l-dim-100 {
    width: 100%;
    height: 100%;
}
.l-pos-abs {
    position: absolute;
}
.l-po-rel {
    position: relative;
}
.l-tov-ell {
    overflow: hidden;
    text-overflow: ellipsis;
}

.l-flex {
    display: flex;
}
.l-flex-c {
    display: flex;
    justify-content: center;
    align-items: center;
}
.l-iflex {
    display: inline-flex;
}
.l-ta-c {
    text-align: center;
}
.l-hover-bc:hover {
    background-color: rgba(220,220,220, 0.6);
}
.l-s-bc, .l-l-bc, .l-o-bc {
    background-color: rgb(220,220,220);
}
.l-s-bs {
    box-shadow: 0px 0px 4px 4px rgb(220,220,220);
}

/*-------------------------------------------------------------------Drag Line start-------------------------------------------------------------------*/
.dragLine.right {
    right: 0px;
}
.dragLine.left {
    left: 0px;
}
.dragLine.top {
    top: 0px;
}
.dragLine.bottom {
    bottom: 0px;
}
.dragLine {
    position: absolute;
    height: 100%;
    width: 4px;
    cursor: ew-resize;
}
.dragLine.horizontal {
    height: 4px;
    width: 100%;
    cursor: ns-resize;
}
.dragLine.diagonal {
    height: 4px;
    width: 4px;
}
.dragLine.diagonal.right.bottom {
    cursor: nwse-resize;
}

/*-------------------------------------------------------------------Highlight Products Section-------------------------------------------------------------------*/
.overlay {
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    position: fixed !important;
    background: rgba(0, 0, 0, 0.5);
    display: none;
}
#newProductsOverlay {
    z-index: 1030;
    top: 36px;
}
#newProductsTopBarOverlay {
    z-index: 2;
}

.overlayModal {
    position: absolute;
    width: 350px;
    right: 304px;
    display: none;
}
.activeProductsOverlayModal {
    top: 32px;
}
.botOverlayModal {
    bottom: 100px;
    right: 234px;
}
.overlayModal .modal-content {
    background: transparent;
    box-shadow: 0px 0px;
    border: 0px;
}
.overlayModal .modal-header {
    border: 0px;
    justify-content: center;
}
.overlayModal .modal-title {
    font-family: 'Raleway', sans-serif;
    font-size: 25px;
}
.overlayModal .modal-body {
    background: white;
    border-radius: 6px;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}

.overlayModal .modal-footer {
    background: white;
    border-radius: 6px;
    border-top-right-radius: 0;
    border-top-left-radius: 0;
    text-align: center;
    cursor: pointer;
}

    .overlayModal .modal-footer:hover {
        color: red;
    }

.overlayModal .horizontalSeparator {
    display: block;
    margin-left: auto;
    margin-right: auto;
}
    .newProduct {
        display: inline-block;
        cursor: pointer;
    }
        .newProduct .newProductTitle, .botOverlayModal .popupMessage {
            font-size: 20px;
        }

    i.closeProductsOverlay {
        color: white;
        position: absolute;
        right: 44px;
        font-size: 40px;
        top: 42px;
        cursor: pointer;
        z-index: 1;
    }

.upgrade-count {
    border-radius: 6px;
    transition-property: color;
    transition-duration: 0.4s;
    transition-timing-function: ease-in-out;
    margin-left: 6px;
    margin-right: -2px;
}

.arrow {
    position: absolute;
    width: 100px;
    transform: rotate(215deg);
    display: none;
}

    .arrow.helpChatWidget {
        transform: rotate(124deg) scaleY(-1);
        right: 120px;
        bottom: 16px;
    }
    .arrow.activeproducts {
        right: 210px;
        top: -50px;
    }

    .arrow .curve {
        border: 2px solid;
        border-color: transparent transparent transparent white; /*change color here*/
        height: 225px;
        width: 225px;
        border-radius: 330px 0 0 150px;
    }

    .arrow .point {
        position: absolute;
        left: 19px;
        top: 201px;
    }

        .arrow .point:before, .arrow .point:after {
            border: 1px solid white;  /*change color here*/
            height: 25px;
            content: "";
            position: absolute;
        }

        .arrow .point:before {
            top: -11px;
            left: -11px;
            transform: rotate(-80deg);
            -webkit-transform: rotate(-80deg);
            -moz-transform: rotate(-80deg);
            -ms-transform: rotate(-80deg);
        }

        .arrow .point:after {
            top: -21px;
            left: 3px;
            transform: rotate(8deg);
            -webkit-transform: rotate(8deg);
            -moz-transform: rotate(8deg);
            -ms-transform: rotate(8deg);
        }

.btn-theme {
    color: white;
}
.btn-theme:focus, .btn-theme:hover {
    color: white;
}

td[align=center] input[typeid=IT_READ] {
    text-align:center;
}
td[align=right] input[typeid=IT_READ] {
    text-align: right;
}

/* Hide some grid footer buttons as default, show them via JS setGridFooterWidth() only if the grid is large enough */
.searchAdvanced, .gridAppendButton, .searchFilter, .searchFooterCell, .recordFound {
    display: none;
}

/* CharFixedLength style */
span.FieldValue[charfixedlength] {
    overflow: hidden;
    white-space: nowrap !important;
    text-overflow: ellipsis;
}

/* Original text box in user translate popup */
div.userTranslateOriginal {
    border: 1px solid silver;
    position: fixed;
    background-color: #efefef;
    height: 80px;
    overflow: hidden;
    overflow-y: scroll;
    width: 50%;
    padding: 2px;
    border-radius: 6px;
}


/**
 * ==============================================
 * Dot Typing
 * ==============================================
 */
.dot-typing {
    position: relative;
    display: block;
    left: -9999px;
    width: 8px;
    height: 8px;
    border-radius: 4px;
    background-color: lightgrey;
    color: lightgrey;
    box-shadow: 9987px 0 0 0 lightgrey, 9999px 0 0 0 lightgrey, 10011px 0 0 0 lightgrey; /*first value controls the horizontal distance, second the vertical distance*/
    animation: dot-typing 1.3s infinite linear;
}

@keyframes dot-typing {
    0% {
        box-shadow: 9987px 0 0 0 lightgrey, 9999px 0 0 0 lightgrey, 10011px 0 0 0 lightgrey;
    }

    16.667% {
        box-shadow: 9987px -6px 0 0 lightgrey, 9999px 0 0 0 lightgrey, 10011px 0 0 0 lightgrey;
    }

    33.333% {
        box-shadow: 9987px 0 0 0 lightgrey, 9999px 0 0 0 lightgrey, 10011px 0 0 0 lightgrey;
    }

    50% {
        box-shadow: 9987px 0 0 0 lightgrey, 9999px -6px 0 0 lightgrey, 10011px 0 0 0 lightgrey;
    }

    66.667% {
        box-shadow: 9987px 0 0 0 lightgrey, 9999px 0 0 0 lightgrey, 10011px 0 0 0 lightgrey;
    }

    83.333% {
        box-shadow: 9987px 0 0 0 lightgrey, 9999px 0 0 0 lightgrey, 10011px -6px 0 0 lightgrey;
    }

    100% {
        box-shadow: 9987px 0 0 0 lightgrey, 9999px 0 0 0 lightgrey, 10011px 0 0 0 lightgrey;
    }
}

/*AI*/
/*--------------------------------------------------------------------------ChatBot--------------------------------------------------------------------------*/
.chatContainer {
    display: none;
    width: 400px;
}

    .chatContainer .filterPill {
        cursor: pointer;
        background-color: #F0F0F0;
    }

.chatWidget {
    width: 55px;
    height: 55px;
    transition: background .2s linear;
    display: none;
}

    .chatWidget.pulse {
        animation: bigsmall3 1.5s linear infinite;
        color: white;
    }

        .chatWidget.pulse > i {
            color: white;
        }

    .chatWidget > i {
        font-size: 30px;
    }

    .chatWidget:hover i.nlbi {
        color: white;
    }

.chatContainer, .chatWidget {
    position: fixed;
    bottom: 4px;
    right: 46px;
    z-index: 4000;
}

    .chatContainer .chatModal {
        border: 0;
        border-radius: 8px;
        background-color: #fafafa;
        display: flex;
        flex-direction: column;
        word-wrap: break-word;
    }

.chatModal .modal-header {
    border-radius: 8px 8px 0 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 4px solid;
    position: relative;
}

    .chatModal .modal-header .chatHeaderButtons {
        cursor: pointer;
    }

.chatModal .modal-body {
    max-height: 400px;
    height: 400px;
    border-top: 1px solid #e5e5e5;
}

.chatModal .modal-footer {
    border-radius: 0 0 8px 8px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.chatFilter {
    max-height: 61px;
    overflow: hidden;
    position: relative;
    background: white;
    padding: 5px 10px 5px 5px;
}

.toggleChatFilters {
    position: absolute;
    bottom: -12px;
    right: 15px;
    z-index: 1;
    background: white;
    cursor: pointer;
    font-size: 12px;
    transition: all 0.2s ease-in-out;
}

    .toggleChatFilters i {
        opacity: 0.6;
        transition: all 0.2s ease-in-out;
    }

    .toggleChatFilters:hover i {
        opacity: 1;
    }

.chatModal .input-group, .userInputContainer {
    flex-wrap: nowrap;
    margin-bottom: 0;
    position: relative;
    display: flex;
    align-items: stretch;
    width: 100%;
}

.chatModal .userInput {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    height: 34px;
    min-height: 34px;
    margin: 0px;
    transition: all .2s linear;
    position: relative;
    padding: 6px 12px;
    outline: 0px transparent;
}

.chatModal input.userInput:focus {
    outline-offset: -2px;
}

.chatModal .sendButton {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    margin-left: -1px;
}

.chatModal .clearButton:hover, .userInputContainer .clearButton:hover {
    background-color: lightgrey;
}

.chatModal .helpMessageInfo, .conversationContainer .helpMessageInfo {
    justify-content: space-between;
}

.helpMessageInfo.User {
    flex-direction: row-reverse;
}

.chatModal .helpMessageName, .chatModal .helpMessageTime {
    margin-bottom: 4px;
}

.chatModal .helpMessageTime, .aiBotAgentContainer .helpMessageTime {
    color: darkgrey;
}

.chatModal .helpMessageContentContainer, .conversationContainer .helpMessageContentContainer {
    display: flex;
    justify-content: flex-start;
    flex-direction: row;
    margin-bottom: 12px;
    word-break: break-word;
}

.helpMessageContentContainer.User {
    flex-direction: row-reverse;
}

.helpMessageContentContainer .userMessageContent {
    border-radius: 8px;
    margin-left: 8px;
    margin-bottom: 8px;
    padding: 6px 12px;
    background: white;
    box-shadow: 0 0 6px 1px #ddd
}

.helpMessageContentContainer.User .userMessageContent {
    margin-left: 0px;
    margin-right: 8px;
    background-color: #defdc6;
}

.userMessageContent .waitChatResponse {
    display: inline-flex;
    width: 36px;
    height: 20px;
    align-items: center;
    justify-content: center;
}

.chatModal .userImage, .conversationContainer .userImage {
    overflow: hidden;
    width: 50px;
    min-width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .chatModal .userImage img, .conversationContainer .userImage img {
        max-width: 50px;
        max-height: 50px;
        width: 50px;
        height: 50px;
        border-radius: 50%;
    }

    .chatModal .userImage i {
        font-size: 36px;
    }

.waitMessageContainer .dot-typing {
    margin-left: 12px;
}

.conversationContainer, .userInputContainer {
    margin: 4px;
    transition: all 0.2s ease-in-out;
}

.conversationContainer {
    min-height: 100px;
    box-shadow: 0 0 1px 1px #ddd;
    transition: border ease-in-out 200ms;
    border: 1px solid transparent;
    padding: 15px;
    position: relative;
    width: 100%;
}

div:not(.chatConversationContainer) > .conversationContainer:hover {
    border: 1px solid #DDD;
}

.agentTab {
    width: 360px;
    position: fixed;
    z-index: 1;
    right: -360px;
    height: 100%;
    bottom: 0px;
    padding: 2px 0 2px 0;
    height: Calc(100% - 80px);
}

.agentTabResizeLine {
    position: absolute;
    top: 0px;
    height: 100%;
    width: 6px;
    left: -3px;
    cursor: ew-resize;
}

.aiBotAgentContainer {
    background: #fafafa;
    height: 100%;
    border: 1px solid #DDD;
    padding-top: 38px;
}

    .aiBotAgentContainer .close {
        position: absolute;
        top: 7px;
        right: 5px;
    }

    .aiBotAgentContainer .chatConversationContainer {
        width: 100%;
        height: 100%;
        padding-bottom: 4px;
    }

    .aiBotAgentContainer .conversationContainer {
        height: 100%;
        max-height: Calc(100% - 44px);
        border: none;
        box-shadow: none;
        padding: 15px;
        margin: 0;
    }

.conversationContainer .helpMessageInfo {
    margin-bottom: 4px;
}

.conversationContainer .helpMessageName {
    margin-right: 20px;
}

.conversationContainer .helpMessageInfo.User .helpMessageName {
    margin-right: 0;
    margin-left: 20px;
}

.conversationContainer .userImage {
    margin-bottom: 8px;
    font-size: 36px;
    border-radius: 50%;
    background-color: #ffffff;
}

.userInput {
    width: 100%;
    min-height: 40px;
    padding-right: 44px;
}

.userInputContainer .userInput {
    padding-right: 46px;
}

.userInputContainer > .sendButton {
    position: absolute;
    top: 4px;
    right: 49px;
    margin: 0;
    height: 32px;
}

.userInputContainer .clearButton {
    margin-left: 5px;
    margin-bottom: 0px;
    font-size: 14px;
}
/*-------------------------------------------------------ai prompt button-------------------------------------------------------*/
.aiPromptDropdown {
    display: none;
    flex-direction: column;
    gap: 0.75rem;
    position: absolute;
    top: 24px;
    left: 0;
    background: white;
    padding: 1.5rem;
    border-radius: 0.75rem;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    width: 400px;
    box-sizing: border-box;
    font-size: 14px;
    z-index: 1;
}

.aiPromptDropdown > textarea {
    width: 100%;
    height: 100px;
    padding: 0.75rem;
    border: 1px solid #ccc;
    border-radius: 6px !important;
    resize: vertical;
    box-sizing: border-box;
    font-weight: normal;
}
.aiPromptDropdown > .send-btn {
    padding: 0.75rem 1.5rem;
    background-color: #10b981;
    color: white;
    border: none;
    border-radius: 0.5rem;
    cursor: pointer;
}
.aiPromptDropdown .close-btn {
    position: absolute;
    top: 2px;
    right: 2px;
    background: transparent;
    border: none;
    font-size: 1.5rem;
    line-height: 1;
    color: #888;
    cursor: pointer;
    transition: color 0.2s ease;
}
.glowColor {
    animation: magicGlowColor 1s ease-in-out infinite;
}
@keyframes magicGlowColor {
    0% {
        color: #ACACAC;
    }

    25% {
        color: #facc15;
    }

    50% {
        color: #f472b6;
    }

    75% {
        color: #60a5fa;
    }

    100% {
        color: #ACACAC;
    }
}
/*---------------------------------------------------------------------Percentage Circle Start---------------------------------------------------------------------*/
.percCircle {
    transform: rotate(-90deg);
    transition: all 1s ease-in-out 1s;
    /* SVG */
    fill: none;
    stroke: lightgrey;
    stroke-width: 2;
    stroke-dasharray: 999 999;
}

    .percCircle ~ .percCircle {
        stroke-dasharray: 0 999;
    }

.percCircle.ValuePositive {
    stroke: green;
}
.percCircle.ValueNegative {
    stroke: red;
}
/*---------------------------------------------------------------------Percentage Circle End---------------------------------------------------------------------*/

.SEL_WF_CN .currentValue > i, .SEL_WF_CN_M i {
    display: none;
}
.SEL_WF_CN .currentValue {
    padding-left: 10px;
}

.TextRich .cke_top, .TextRich .cke_bottom {
    display: none;
}

.EmplJobPicField {
    display: flex;
}
/**display custom with pic*/
.EmplJobPicField .PicFSMiniCircle {
    min-width: 40px;
    margin-right: 6px;
    float: left; /* Girelli 21/1/2024: for PDF GridPrint */
}

.EmplJobPicField > div ~ div {
    display: flex;
    flex-direction: column;
}

.EmplJobPicField > div ~ div em {
    color: gray;
}