/*  === CSS Progel Planet Web – User Interface ===  
	    version 0.3
*/

@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i');

.pg-ribbon-box,
.pg-ribbon-index-box,
.pg-dropdown-box {
    font-family: 'Open Sans', 'Segoe UI', sans-serif;
}

.pg-ribbon {
    padding: 30px 10px 10px;
    display: table;
}

.pg-ribbon-box {
    position: relative;
}

.pg-group, .pg-cmd-box {
    display: table-cell;
    vertical-align: top;
}

.pg-cmd-small-group > .pg-cmd-box {
    display: block;
}

.pg-cmd-box > .pg-btn { width: 100%; }
.pg-cmd-box > .pg-btn > div.dx-button-content { justify-content: left; }

    .pg-cmd-small-group > .pg-cmd-box:nth-child(2),
    .Xpg-cmd-box > .dx-widget:nth-child(2) {
        margin-top: 10px;
    }

.pg-group {
    border-left: 2px solid rgba(20, 140, 180, 0.5);
    padding-left: 10px;
    position: relative;
    margin-top: 15px;
}

    .pg-group > span {
        position: absolute;
        left: -2px;
        top: -17px;
        font-size: 10px;
        color: rgba(14, 101, 130, 0.5);
        font-weight: 700;
        width: 100%;
    }

.pg-cmd-large .dx-button-content {
    padding: 27px 27px;
}

.pg-ribbon-box {
    width: 100%;
}

.pg-ribbon {
    font-size: 0
}

.dx-button {
    /*margin-right: 10px;*/
    color: #148cb5; /* blu */
    border-color: rgba(20, 140, 180, 0.3);
}

.pg-btn-sm-box {
    width: 46px;
    vertical-align: top;
}

.pg-btn-sm:first-child {
    margin-bottom: 10px;
}

.pg-cmd-large .dx-icon {
    font-size: 27px;
    width: 27px;
    height: 27px;
    line-height: 27px;
}

.dx-button.dx-state-hover {
    background-color: rgba(20, 140, 180, 0.1);
    border-color: rgba(20, 140, 180, 1);
}

.dx-button.dx-state-focused {
    background-color: rgba(20, 140, 180, 0.1);
    border-color: rgba(20, 140, 180, 1);
}

.dx-switch {
    margin-right: 10px;
}

.pg-ribbon-index-box {
    border-bottom: 2px solid rgba(14, 101, 130, 0.5);
    position: relative;
}

    .pg-ribbon-index-box .dx-tabs {
        border: none;
        width: calc(100% - 23px);
        padding-left: 10px;
        padding-right: 10px;
    }

    .pg-ribbon-index-box .dx-tabs-scrollable .dx-tabs {
        padding-left: 0;
    }

    .pg-ribbon-index-box .dx-tabs-wrapper {
        text-align: left;
        display: block;
        background-color: unset;
    }

#pg-docs .dx-tabs-wrapper::after,
.pg-ribbon-index-box .dx-tabs-wrapper::after {
    -webkit-border-before: none;
    border-block-start: none;
    -webkit-border-end: none;
    border-inline-end: none;
    -webkit-border-after: none;
    border-block-end: none;
    -webkit-border-start: none;
    border-inline-start: none;
}

    .pg-ribbon-index-box .dx-tab {
        padding: 0px 11px;
        background-color: transparent;
        font-size: 11px;
        display: inline-block;
    }

        .pg-ribbon-index-box .dx-tab.dx-state-hover {
            background-color: rgba(20, 140, 180, 0.3);
        }

        .pg-ribbon-index-box .dx-tab.dx-tab-selected {
            background-color: transparent;
            color: rgba(0, 0, 0, 0.7);
        }

        .pg-ribbon-index-box .dx-tab-selected:after,
        .pg-ribbon-index-box .dx-tab.dx-state-focused:after {
            content: none;
        }

.pg-ribbon-index-box {
    background-color: rgba(20, 140, 180, 0.3);
    min-height: 3px;
}

.dx-widget {
    color: rgba(0, 0, 0, 0.7);
}


.pg-dropdown-box {
    position: relative;
}

.pg-btn-dropdown {
    display: none;
    position: absolute;
    left: 22px;
    top: -8px;
    width: auto;
    background-color: #fff;
    padding: 10px;
    border: 1px solid rgba(20, 140, 180, 1);
    z-index: 3;
    box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.25);
}

    .pg-btn-dropdown .pg-cmd-box {
        display: inline-block;
    }

    .pg-btn-dropdown .pg-cmd-full {
        display: block;
        margin-right: 0;
        margin-bottom: 10px;
    }

    /* da eliminare? */
    .pg-btn-dropdown .pg-btn-sm:first-child {
        margin-bottom: 0;
    }

.pg-btn-dropdown-group {
    border-bottom: 2px solid rgba(20, 140, 180, 0.5);
    margin-bottom: 10px;
    padding-bottom: 10px;
}

    .pg-btn-dropdown-group:last-child {
        border-bottom: none;
        margin-bottom: 0;
        padding-bottom: 0;
    }

    .pg-btn-dropdown-group .dx-button:last-child {
        margin-right: 0;
    }
/* fine da eliminare */



.pg-btn-menu:last-child {
    margin-bottom: 0;
}

.pg-btn-drop {
    position: relative;
}

    .pg-btn-drop:after {
        content: "\e64b";
        font-family: 'themify';
        font-size: 13px;
        width: 13px;
        height: 13px;
        line-height: 13px;
        color: #148cb5;
        position: absolute;
        left: 50%;
        bottom: 5px;
        margin-left: -6.5px;
    }

.pg-dropdown-separator {
    margin-top: 10px;
    margin-bottom: 10px;
    border-bottom: 2px solid rgba(20, 140, 180, 0.5);
    font-size: 10px;
    color: rgba(14, 101, 130, 0.5);
    font-weight: 500;
    line-height: 19px;
}



#pg-menu-btn {
    position: absolute;
    top: 16px;
    left: 9px;
    z-index: 1000000;
    width: 54px;
    height: 53px;
    /* line-height: 60px; */
    text-align: center;
    border-radius: 50%;
    border: 2px solid #FFD200;
    background-color: white;
    padding: 7px 8px 0px 8px;
    box-sizing: border-box;
    background-color: white;
    transition: background-color 0.6s
}

    #pg-menu-btn:hover {
        background-color: #FFD200;
    }

    #pg-menu-btn img {
        width: 100%;
        max-width: 100%;
    }

#pg-docs {
    padding-left: 74px;
}

#pg-docs-tabs {
    border: none;
}

#pg-docs-tabs div.dx-tab-text { line-height: 25px; }

#pg-docs .dx-tab.dx-tab-selected {
    background-color: #fff;
    color: #333;
    border-top: 2px solid rgba(14, 101, 130, 0.5);
    border-left: 2px solid rgba(14, 101, 130, 0.5);
    border-right: 2px solid rgba(14, 101, 130, 0.5);
    border-bottom: 1px solid white;
    position: relative;
    top: 3px;
    padding-top: 7px;
}

#pg-docs .dx-tab.dx-tab-selected::after {
    -webkit-border-before: none;
    border-block-start: none;
    -webkit-border-end: none;
    border-inline-end: none;
    -webkit-border-after: none;
    border-block-end: none;
    -webkit-border-start: none;
    border-inline-start: none;
}

#pg-docs .dx-tab.dx-state-focused {
}

#pg-docs .dx-tab {
    background-color: #fff;
    color: #333;
    border-bottom: none;
    transition: background-color 0.3s;
    display: inline-block;
    padding: 9px 20px;
}

    #pg-docs .dx-tab:hover {
        background-color: rgba(20, 140, 180, 0.1);
        background-color: #e8f3f7; /* stesso colore, senza trasparenza */
    }

    #pg-docs .dx-tab.dx-tab-selected {
        background-color: #fff;
    }

#pg-docs .dx-tabs-wrapper {
    text-align: left;
    display: block;
    background-color: unset;
}

#pg-docs .dx-tabs-nav-buttons .dx-tabs-scrollable .dx-tabs-wrapper,
.pg-ribbon-index-box .dx-tabs-nav-buttons .dx-tabs-scrollable .dx-tabs-wrapper {
    border: none;
}

#pg-header {
    /* border-top:13px solid rgba(20, 140, 180, 1); */
    padding-top: 8px;
    border-bottom: 2px solid rgba(20, 140, 180, 0.5);
}

#pg-docs .dx-tab.dx-state-focused:after {
    content: none;
}

.pg-cmd-label {
    font-size: 14px;
    padding-right: 10px;
    padding-bottom: 7px;
    min-width: 100px;
}
/* === VARIANTI STILE PULSANTI === */



.senza-bordi .dx-button {
    border-color: white
}

.senza-bordi .pg-group {
    border-right: 1px solid rgba(20, 140, 180, 0.5); /* blu */
}

.con-sfondo .dx-button {
    background-color: rgba(20, 140, 180, 0.05);
}







/* Ribbon single line, pulsanti tutti piccoli */

.pg-ribbon-single-line .pg-cmd-large .dx-button-content {
    padding: 8px;
}

.pg-ribbon-single-line .pg-cmd-box .pg-btn,
.pg-ribbon-single-line .pg-cmd-small-group .pg-cmd-box {
    display: table-cell;
}

    .pg-ribbon-single-line .pg-cmd-box .pg-btn:before {
        content: "";
        display: table-cell;
        /*width: 10px;
        background-color: red;*/
    }

.pg-ribbon-single-line .pg-cmd-small,
.pg-ribbon-single-line .pg-cmd-large {
    padding-right: 10px;
}

    .pg-ribbon-single-line .pg-cmd-large .dx-icon {
        font-size: 18px;
        width: 18px;
        height: 18px;
        line-height: 18px;
    }

.pg-ribbon-single-line .pg-cmd-box > .pg-btn:nth-child(2),
.pg-ribbon-single-line .pg-cmd-box > .dx-widget:nth-child(2) {
    margin-top: 0;
}

.pg-ribbon-single-line .pg-cmd-label {
    padding-top: 8px;
    display: table-cell;
}

.pg-ribbon-single-line .dx-switch {
    padding-top: 4px;
    display: table-cell;
}


.pg-ribbon-single-line .pg-btn-drop:after {
    font-size: 8px;
    width: 8px;
    height: 8px;
    line-height: 8px;
    bottom: -1px;
    margin-left: -4px;
    color: #0e6988;
}





.flash,
.flash .pg-btn,
.flash .dx-switch-container,
.flash .dx-texteditor-input {
    animation: flash 1s ease-out;
    animation-iteration-count: 1;
    -moz-animation: flash 1s ease-out;
    -moz-animation-iteration-count: 1;
    -ms-animation: flash 1s ease-out;
    -ms-animation-iteration-count: 1;
}


@keyframes flash {
    0% {
        background-color: transparent;
    }

    50% {
        background-color: #FFD200;
    }

    100% {
        background-color: transparent;
    }
}

@-webkit-keyframes flash {
    0% {
        background-color: transparent;
    }

    50% {
        background-color: #FFD200;
    }

    100% {
        background-color: transparent;
    }
}

@-moz-keyframes flash {
    0% {
        background-color: transparent;
    }

    50% {
        background-color: #FFD200;
    }

    100% {
        background-color: transparent;
    }
}

@-ms-keyframes flash {
    0% {
        background-color: transparent;
    }

    50% {
        background-color: #FFD200;
    }

    100% {
        background-color: transparent;
    }
}



#pg-ribbon-toggle {
    position: absolute;
    right: 0px;
    top: 0px;
    padding: 0 5px;
    height: 22.67px;
}

    #pg-ribbon-toggle:hover {
        background-color: #FFD200;
    }

    #pg-ribbon-toggle:after {
        content: "\e648";
        font-family: 'themify';
        font-size: 13px;
        width: 26px;
        height: 13px;
        line-height: 13px;
        color: #148cb5;
    }

    #pg-ribbon-toggle.closed:after {
        content: "\e64b";
    }

.pg-ribbon-index-box.closed {
    background-color: white;
}


#pg-page-box {
    height: 100%;
    display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
    display: -ms-flexbox; /* TWEENER - IE 10 */
    display: -webkit-flex; /* NEW - Chrome */
    display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
    -ms-flex-direction: column;
    -moz-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
}

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

#pg-corpo {
    /*flex-grow:1;*/
    -webkit-box-flex: 1; /* OLD - iOS 6-, Safari 3.1-6 */
    -moz-box-flex: 1; /* OLD - Firefox 19- */
    -webkit-flex: 1; /* Chrome */
    -ms-flex: 1; /* IE 10 */
    flex: 1; /* NEW, */
}

#pg-menu {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 999999;
    background-color: rgba(0,64,91,0.83);
    border-top: 13px solid rgba(20, 140, 180, 1);
    box-sizing: border-box;
    display: none;
}

#pg-menu-logo {
    padding: 7px 0 10px 75px;
    display: block;
    margin: 0;
    background-color: #fff;
    user-select: none;
}

#pg-menu-logo img {
    width: 170px;
}

#pg-menu-user,
#pg-menu-software-version { 
    font-weight: 600;
}

#pg-menu-software-version {
    font-size: 12px;
    color: rgba(20, 140, 180, 1);
    position: absolute;
    top: 45px;
    left: 125px;
    user-select: none;
}

#pg-menu-user {
    background-color: white;
    height: 25px;
    padding-top: 8px;
}

#pg-menu-user-name{
    padding-left: 20px;
    padding-top: 2px;
    user-select: none;
}

#pg-menu-user-options {
    text-align: right;
    padding-right: 10px;
    user-select: none;
}

#butSecuritySettings > div.dx-button-content {
    padding: 0px;
}
#butSecuritySettings > div.dx-button-content > i.material-icons.vpn_key {
    color: #d4ac0b;
    transform: rotate(-45deg);
    padding-top: 2px;
    font-size: 18px;
}

#treeView, #tileView {
    background-color: #fff;
    padding-top: 5px;
    user-select: none;
}

#treeView {
    width: 320px;
}

.menu-tile-item {
    text-align: center;
    cursor: pointer !important;
}

.menu-tile-icon {
    height: 32px;
    margin-top: 16px;
}

.menu-tile-icon > img {
    width: 25px;
}

.menu-tile-icon > i {
    font-size: 25px;
}

.menu-tile-text {
    font-size: 13px;
    margin-top: -3px;
}

#treeView.dx-treeview .dx-scrollable-content > ul {
    border-bottom: 1px solid rgba(20, 140, 180, 1);
}

#treeView.dx-treeview .dx-treeview-node {
    border-top: 1px solid rgba(20, 140, 180, 1);
    Xpadding-left: 0;
}

#treeView li.dx-treeview-node > div.dx-item.dx-treeview-item {
    position: relative;
    gap: 0px;
}

body.pg-bg {
    background-size: 50%;
    background-repeat: no-repeat;
    background-position: 50%;
}


/* aggiunte 03 ottobre 2018 */

.dx-treeview .dx-treeview-item.dx-state-hover {
    background-color: #FFD200;
}

#butPlaceholder {
    visibility: hidden;
}

/* aggiunte 17 ottobre 2018 */
/* https://codepen.io/frenx/pen/ePVJNK */

#formLogin {
    padding-bottom: 80px;
}

#pg-login {
    width: 290px;
    min-height: 0px;
    height: auto;
    padding-top: 0px;
    margin-top: 20px;
    margin-bottom: 20px;
    display: none;
}

@media (min-width: 601px) {
    #pg-login {
        width: 400px;
    }
}

.pg-login .w3-display-bottommiddle.w3-center {
    bottom: 15px;
}

.pg-login-box {
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translate(-50%,-20px);
    -ms-transform: translate(-50%,-20px);
}

@media (min-height: 568px) {
    .pg-login-box {
        top: 50%;
        transform: translate(-50%,-50%);
        -ms-transform: translate(-50%,-50%);
    }
}

.pg-links, a.pg-links {
    color: #148CB4;
    text-decoration: none;
    margin-bottom: 30px;
}

#pg-login h3 {
    color: #148CB4;
    margin-top: 20px;
}

@media (min-height: 568px) {
    #pg-login h3 {
        margin-top: 40px;
    }
}


/* progress bar /*
/* https://codepen.io/frenx/pen/bmLqPv */

#pg-progressBar {
    height: 13px;
    font-size: 0;
    z-index: 100;
    position: relative;
}

.dx-progressbar-animating-container {
    border: none;
    border-radius: 0;
    background-image: -webkit-linear-gradient(-90deg, transparent 5%, #148CB4, transparent 95%);
    background-image: -moz-linear-gradient(-90deg, transparent 5%, #148CB4, transparent 95%);
    background-image: -ms-linear-gradient(-90deg, transparent 5%, #148CB4, transparent 95%);
    background-image: -o-linear-gradient(-90deg, transparent 5%, #148CB4, transparent 95%);
    background-image: linear-gradient(-90deg, transparent 5%, #148CB4, transparent 95%);
}

.dx-progressbar-container,
.dx-progressbar-animating-container {
    background-color: #c5e6f1;
    height: 14px;
    border: none;
    border-radius: 0;
}

.dx-progressbar-range-container {
    margin-top: 1px;
}

.dx-progressbar-range {
    border: none;
    border-radius: 0;
    background-color: #148CB4;
}

.complete .dx-progressbar-range {
}

.dx-progressbar-wrapper {
    vertical-align: initial;
}

#pg-menu-correspondent-name {
    font-weight: 500 !important;
    font-size: 13px !important;
}

.dx-texteditor.dx-state-readonly {
    border-style: solid;
    border-color: rgba(20, 140, 181, .3);
}

.dx-texteditor.dx-state-readonly input {
    opacity: .5;
}

.btn-no-border {
    border-color: transparent !important;
}