:root {
    --app-accent-color: darkblue;
}

body {
    height: 100vh;
}

app {
    position: relative;
    display: flex;
    /*flex-direction: column;*/
    height: 100%;
}

.app-page {
    position: relative;
    display: flex;
    height: 100%;
}

.app-font {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

.accent-color {
    color: var(--app-accent-color);
}

div#ExcelExport {
    padding-top:unset!important;
    padding-bottom:unset!important;
    margin-bottom:3px;
}

div#ResetGrid {
    padding-top:unset!important;
    padding-bottom:unset!important;
    margin-bottom:3px;
}

 #label_ddStepAzioni, #label_prestazioneRichiesta{
     font-weight: bold!important;
     align-self: flex-end!important;
     color:black;
 }

/****GESTIONE CUSTOM PER PULSANTI SPECIALI come NUOVA PRATICA segnalato per ID nel css.*/
.acquistiBtn:not(:disabled), [aria-label="ExcelExport"]:not(:disabled), [class*="e-tbar-btn-text"]:not(:disabled), [aria-label="Columns"]:not(:disabled), [aria-label="Reset"]:not(:disabled), #btnAdd:not(:disabled), #openPopupUtente:not(:disabled), #btnRefreshDataCreazione:not(:disabled), #openPopupAree:not(:disabled), #btnReset:not(:disabled), #btnRefreshData:not(:disabled), #btnSavePratica:not(:disabled),#btnNuovaPratica:not(:disabled), #resetUtente:not(:disabled)
{
    background-color: var(--app-accent-color)!important;
    color: #fff!important;
    line-height:unset!important;
    /*padding-right:4px!important;
    padding-left:4px!important;*/
    font-size: 1.05rem!important;
}

.acquistiBtn:hover:not(:disabled), [aria-label="ExcelExport"]:hover:not(:disabled), [aria-label="Columns"]:hover:not(:disabled), [aria-label="Reset"]:hover:not(:disabled), #btnAdd:hover:not(:disabled),  #openPopupUtente:hover:not(:disabled), #btnRefreshDataCreazione:hover:not(:disabled), #openPopupAree:hover:not(:disabled), #btnReset:hover:not(:disabled),#btnRefreshData:hover:not(:disabled),#btnSavePratica:hover:not(:disabled),#btnNuovaPratica:hover:not(:disabled), #resetUtente:hover:not(:disabled) 
{
    -webkit-box-shadow:0px 0px 2px 2px rgba(87,244,255,1)!important;
    -moz-box-shadow: 0px 0px 2px 2px rgba(87,244,255,1)!important;
    box-shadow:     0px 0px 2px 2px rgba(87,244,255,1)!important;
    line-height:unset!important;
    /*padding-right:4px!important;
    padding-left:4px!important;*/
    font-size: 1.05rem!important;
}

.e-btn:disabled, .e-btn.e-disabled, .e-css.e-btn:disabled, .e-css.e-btn.e-disabled {
    background: rgba(108,117,125,.65);
    border-color: rgba(108,117,125,.65);
    box-shadow: none;
    color: rgba(255,255,255,.65);
}


/**GESTIONE RITORNI A CAPO DEI POPUP DIALOG CONFIRM usando lo \n */
.e-popup.e-popup-open.e-confirm-dialog {

   white-space: pre-line;

}

/****MATERIAL ICONS SIZES*/
.mdi-18px { font-size: 18px; }
.mdi-24px { font-size: 24px; }
.mdi-36px { font-size: 36px; }
.mdi-48px { font-size: 48px; }
.mdi-dsize { font-size: 1.05rem!important; } /***DEFAULT SIZE per ICONE*/
.mdi-dark { color: rgba(0, 0, 0, 0.54); }
.mdi-dark.mdi-inactive { color: rgba(0, 0, 0, 0.26); }
.mdi-light { color: rgba(255, 255, 255, 1); }
.mdi-light.mdi-inactive { color: rgba(255, 255, 255, 0.3); }



/*.acquistiBtn {
    background-color: var(--app-accent-color);
    color: #fff!important;
    line-height:unset!important;
    padding:unset!important;
}

.acquistiBtn:hover {
    -webkit-box-shadow:0px 0px 2px 2px rgba(87,244,255,1)!important;
    -moz-box-shadow: 0px 0px 2px 2px rgba(87,244,255,1)!important;
    box-shadow:     0px 0px 2px 2px rgba(87,244,255,1)!important;
    line-height:unset!important;
    padding:unset!important;
}*/




/*ORIGINALE DA FLEX COLORE DI BASE .sidebar
linear-gradient(180deg, rgb(5, 39, 103) 0%, #001C54 70%)
Per sovrascriverlo utilizzare !important
*/
/*background-image:linear-gradient(0deg, rgb(0, 28, 84) 0%, #001C54 95%)!important  COLORE paro al campus regolare*/
.sidebar {
    background-image:linear-gradient(0deg, rgb(0, 48, 144) 0%, #001C54 70%)!important 
}

.body-container {
    /*    display: grid;
    grid-template-rows: 1fr auto;*/
    height: calc(100% - 3.5rem - 20px);
    overflow-y: auto;
}

.main {
    flex: 1;
}

.top-row {
    height: 3.5rem;
    display: flex;
    align-items: center;
}

.main .top-row {
    /*background-color: #f7f7f7;*/
    background-color: var(--main-bg-color);
    /*color: whitesmoke;*/
    border-bottom: 1px solid #d6d5d5;
    /*justify-content: flex-end;*/
    position: sticky;
    top: 0;
}

btn-gridrow {
    padding-top: 0;
    padding-bottom: 0;
}

.btn-cancel {
    background-color: #6c757d!important;
    border-color: #6c757d!important;
}

.vocebudget-container {
    border: 1.5px solid black;
    border-radius: 5px;
    vertical-align: top;
    min-height: 200px;
    padding: 5px;
    width: 300px;
}

/***GESTIONE FLEX CONTAINER START per le colonne e righe totale colonne di suddivisione e 6 
    https://kevinsguides.com/guides/webdev/css/creating-a-simple-flexbox-grid
*/
.flex-container {
    display: flex;
    flex-wrap: wrap;
}

.fcol-1 {

    flex-basis: 16%;
}

.fcol-2 {

    flex-basis: 32%;
}

.fcol-3 {
    flex-basis: 48%;
}

.fcol-4 {
    flex-basis: 64%;
}

.fcol-5 {
    flex-basis: 80%;
}

.fcol-6 {
    flex-basis: 96%;
}

@media only screen and (max-width: 480px) {
    .fcol-1, .fcol-2, .fcol-3, .fcol-4, .fcol-5, .fcol-6{
        flex-basis: 100%;
    }
}
/***GESTIONE FLEX CONTAINER END ***/

.navbar-link {
    color: darkblue!important;
}

.ico-card i {
    position: relative;
    right: -50%;
    top: 60%;
    font-size: 12rem;
    line-height: 0;
    opacity: .1;
    color: white;
    z-index: 0;
}

.layout-gridlayout {
    width: 100%;
/*    height: 100%;*/
    grid-auto-rows: 1fr;
}

.layout-gridlayout > .layout-gridlayout-root {
        justify-content: flex-start;
        align-items: stretch;
        width: 100%;
        height: 100%;
        display: grid;
        display: -ms-grid;
    }

.grid-root {
    grid-template-areas: ".";
    grid-row-gap: 0;
    grid-column-gap: 0;
    grid-template-rows: minmax(0, 1fr);
    grid-template-columns: minmax(0, 1fr);
    -ms-grid-rows: 1fr;
    -ms-grid-columns: 1fr;
}

.grid-row-1 {
    grid-row: 1 / span 1;
    grid-column: 1 / span 1;
    -ms-grid-row: 1;
    -ms-grid-row-span: 1;
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
}

.c-toolbar {
    padding-left: .5rem;
    padding-right: .5rem;
}

.list-text-secondary {
    opacity: .8;
    font-size: 0.7rem;
}

.mylabel {
    font-size: 12px;
    padding-right: 0;
    font-weight: bold;
    color: #343a40;
}

.sf-label {
    font-size: 12px;
    font-weight: 500;
    color: #343a40;
    font-family: var(--bs-body-font-family);
    cursor: default;
    user-select: none;
}

.sfgrid-container {
    height: calc(100vh - 3.5rem - 120px);
    overflow-y: auto;
    display: flex;
}

.e-grid .e-deletedrow {
    background-color: #ecdada;
}

/*override stile tab header delle SfTab*/
.e-tab .e-tab-header .e-toolbar-item.e-active .e-tab-text {
    color: mediumblue!important;
    font-weight: bold;
}

.tabElementDefault {
   color: #00308F!important; /*mediumblue!important;*/
   font-weight: bold;
}


.tabElementWithData {
   color: DeepSkyBlue!important;   /**DeepSkyBlue OK RoyalBlue OK Teal OK red o salmon MediumTurquoise CadetBlue SPENTO  DarkCyan SPENTO*/
   font-weight: bold!important;
}

/*override dello stile predefinito per il dialog close button delle SfDialog*/
.e-dialog .e-btn .e-btn-icon.e-icon-dlg-close {
    font-size: 16px;
    font-weight: 600;
    color: darkblue;
}

/*******.e-toolbar-items .e-btn .e-tbar-btn-text{
    E' complesso definire un button con un effetto glow, in realta' poi ci sono anche gli oggetti toolbar item della griglia che
    devono seguire la stessa cosa
    -webkit-tap-highlight-color: rgba(0,0,0,0)!important; 
    background:  #003F8B!important;
    border-color: #001C54!important;
    color: #fff!important;
    transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1)!important;
}*********/

.section-w100 {
    width: calc(100vw - 310px);
}

.section-container {
    border: 1px solid #d6d5d5;
    border-radius: 5px;
    padding: 10px;
}

@media (min-width: 641px) {
    
}

@media (min-width: 768px) {
    app {
        flex-direction: row;
    }

    .grid-container {
        width: calc(100vw - 290px - 2rem);
    }

    .sidebar {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
        display: flex;
        flex-flow: column nowrap;
    }

        .sidebar > div:not(.top-row) {
            flex: 1 1 auto;
            border-bottom: none;
            border-right: 1px solid #d6d5d5;
            /*box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.24);*/
            box-shadow: 12px -11px 12px 5px rgba(0, 0, 0, 0.24);


        }

    .main .top-row {
        position: sticky;
        top: 0;
    }

    .main > div {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }

    .navbar-toggler {
        display: none;
    }

    .sidebar .collapse {
        /* Never collapse the sidebar for wide screens */
        display: block;
    }
}