html,
body {
    height: 100%;
}

.wrap {
    min-height: 100%;
    height: auto;
    margin: 0 auto -60px;
    padding: 0 0 60px;
}

.frontend .container {
    width: 52%;
    margin: auto;
}
/*  GESTIONE SIDEBAR */
#sidebar-wrapper{
    position: fixed;
    width: 20%;
    height: 100vh;
    border-right: solid 1px gray;
    background-color: #f5f5f5;
    display: inline-table;
    padding: 20px;
    transition: 0.5s;
}
#sidebar-wrapper .title{
    font-weight: bold;
    color: #00693e;
}
#backend-page-content{
    width: 80%;
    margin: unset;
    margin-left:20%;
}
.logo{
    height: 145px;
}
a.sidebar-item{
    text-decoration: none !important;
}

.sidebar-item .item{
    padding: 7px 15px;
    border-radius: 12px;
    margin: 2px 0;
}
.sidebar-item .item:hover{
    background-color: #D0F0C0;
    border: solid 1px #00693E;
    font-weight: bold;
    color: #00693E;
}
.sidebar-item .item .icon{
    height: 28px;
    width: 28px;
}
.sidebar-item .item .icon{
    filter: invert(22%) sepia(0%) saturate(51%) hue-rotate(141deg) brightness(99%) contrast(105%);
}
.sidebar-item .item:hover .icon{
    filter: invert(27%) sepia(16%) saturate(4022%) hue-rotate(118deg) brightness(102%) contrast(101%);
}
.sidebar-item .item .item-text{
    display: inline;
    vertical-align: middle;
    padding-left: 12px;
}
.footer {
    height: 60px;
    background-color: #f5f5f5;
    border-top: 1px solid #ddd;
    padding-top: 20px;
}
.backend-footer{
    margin-left: 20% !important;
}
#openSidebarBtn, #closeSidebarBtn{
    display: none;
    position: absolute;
    top: 15px;
    left: 15px;
    z-index: 11;
}

@media(max-width:1025px) {
    #sidebar-wrapper{
        width: 30%;
        display:none;
        z-index: 10;
    }
    #backend-page-content{
        width: 100%;
        margin: unset;
        padding-top: 55px;
    }
    #openSidebarBtn{
        display: block;
    }
    .backend-footer{
        margin-left: unset !important;
    }
}
/* FINE GESTIONE SIDEBAR */
.wrap.frontend{
    background: url(../img/sfondo6.jpg);
    background-size: contain;
}

.wrap.frontend > .container {
    padding: 70px 15px 20px;
    background-color: white;
}
.wrap.backend > .container {
    padding: 25px 15px 20px;
    background-color: white;
}

.jumbotron {
    text-align: center;
    background-color: transparent;
}

.jumbotron .btn {
    font-size: 21px;
    padding: 14px 24px;
}

.not-set {
    color: #c55;
    font-style: italic;
}

/* add sorting icons to gridview sort links */
a.asc:after, a.desc:after {
    position: relative;
    top: 1px;
    display: inline-block;
    font-family: 'Glyphicons Halflings';
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    padding-left: 5px;
}

a.asc:after {
    content: /*"\e113"*/ "\e151";
}

a.desc:after {
    content: /*"\e114"*/ "\e152";
}

.sort-numerical a.asc:after {
    content: "\e153";
}

.sort-numerical a.desc:after {
    content: "\e154";
}

.sort-ordinal a.asc:after {
    content: "\e155";
}

.sort-ordinal a.desc:after {
    content: "\e156";
}

.grid-view th {
    white-space: nowrap;
}

.hint-block {
    display: block;
    margin-top: 5px;
    color: #999;
}

.error-summary {
    color: #a94442;
    background: #fdf7f7;
    border-left: 3px solid #eed3d7;
    padding: 10px 20px;
    margin: 0 0 15px 0;
}

/* align the logout "link" (button in form) of the navbar */
.nav li > form > button.logout {
    padding: 15px;
    border: none;
}

@media(max-width:767px) {
    .nav li > form > button.logout {
        display:block;
        text-align: left;
        width: 100%;
        padding: 10px 15px;
    }
}

.nav > li > form > button.logout:focus,
.nav > li > form > button.logout:hover {
    text-decoration: none;
}

.nav > li > form > button.logout:focus {
    outline: none;
}

.navbar.navbar-inverse{
	background-color: #025138;
    border-bottom: 6px solid  #00693E;
}

.navbar-brand{
	color: #E6B220 !important;
}

.btn.logout{
	color: white !important;
}

.td-label{
	width: 40%;
}
.td-icon{
	width: 40px;
	text-align: center;
}

.modal-xl{
	width: 1080px;
}

#row-filtri{
	padding-top: 10px;
}

#btn-locked{
	display: none;	
}

.btn-lock{
	padding: 4.5px;
	border: solid 1px #a6a6a6;
	border-radius: 3px;
	background-color: #d9d9d9;
	color: #4d4d4d;
	width:24px;
}
#network-container{
	height:calc(63vh);
}
.vis-container{
	height: 100%;
}
.hide{
	display:none;
}
#input_insert_statement{
	display: inline;
	font-family: inherit;
	font-size: inherit;
	padding: none;
	width: 90%;
	word-break: break-all;
	margin: auto;
}
.bold {
    font-weight: bold;
}
/* fix stile */
.btn-primary{
    background-color: #026143;
    border-color: #044833;
}
.btn-primary:hover{
    background-color: #044833;
}
.logo-centro{
    height: 420px;
    position: absolute;
    top: calc(50% - 215px);
    left: calc(50% - 210px);
}
.container-main-page{
    min-height: calc(100vh - 150px); /* 50px è l'header, 60px è il footer, 40px vengono dai margini in eccesso del container*/
}
.main-piece-left{
    --h: calc(100vh * 0.8);
    --d: calc(100vw * 0.25); /* lo uso per le dimensioni*/
    --r: 10px;  /* controlla il rounding dei bordi */
    --s: calc(var(--d) * 0.35);  /* controlla il taglio generato sul lato */
    --a: 5deg; /* controlla la profondità del cerchio */

    width: var(--d);
    height: var(--h);
    float: right;
    aspect-ratio: 1;
    background: red;
    border-radius: var(--r);
        --_m:/var(--r) calc(2*var(--r)) no-repeat
        radial-gradient(100% 50% at left,#000 calc(100% - 1px),#0000);
        --_d:(var(--s) + var(--r))*cos(var(--a));
    mask:
        100% calc(50% + var(--_d)) var(--_m),100% calc(50% - var(--_d)) var(--_m),
        radial-gradient(var(--s) at calc(100% + sin(var(--a))*var(--s)) 50% ,
        #0000 100%,#000 calc(100% + 1px)) calc(var(--r)*(sin(var(--a)) - 1)) 0 no-repeat,
        linear-gradient(#000 calc(50% - var(--_d)),#0000 0 calc(50% + var(--_d)),#000 0);
}
.main-piece-left.interno{
    --h: calc(100vh * 0.79);
    --d: calc(100vw * 0.24);

    width: var(--d);
    height: var(--h);
    background-color: white;
    margin: calc(100vh * 0.01) calc(100vw * 0.01);
}
.main-piece-right{
    --h: calc(100vh * 0.8);
    --d: calc(100vw * 0.25); /* lo uso per le dimensioni*/
    --r: 10px;  /* controlla il rounding dei bordi */
    --s: calc(var(--d) * 0.35);  /* controlla il taglio generato sul lato */
    --a: 5deg; /* controlla la profondità del cerchio */

    width: var(--d);
    height: var(--h);
    aspect-ratio: 1;
    background: blue;
    border-radius: var(--r);
    --_m:/var(--r) calc(2*var(--r)) no-repeat
        radial-gradient(100% 50% at right,#000 calc(100% - 1px),#0000);
    --_d:(var(--s) + var(--r))*cos(var(--a));
    mask:
        0 calc(50% + var(--_d)) var(--_m),0 calc(50% - var(--_d)) var(--_m),
        radial-gradient(var(--s) at calc(-1*sin(var(--a))*var(--s)) 50% ,
        #0000 100%,#000 calc(100% + 1px)) calc(var(--r)*(1 - sin(var(--a)))) 0 no-repeat,
        linear-gradient(#000 calc(50% - var(--_d)),#0000 0 calc(50% + var(--_d)),#000 0);
}
.table-rounded > tbody > tr:first{
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
}
.label-th{
    width: 20%;
}
.modal .label-th{
    width:30%;
}
.navbar-toggle{
    display: none !important;
}

hr{
    border-top: 1px solid #00693e;
}

.tabs-container{
    display: flex;
}
.container-shadow{
    box-shadow: 0px 2px 9px 1px rgba(0, 0, 0, 0.3);
}
/* serve per gestire le ombre */
.tabs-spacer{
    height: 8px;
    position: relative;
    z-index: 5;
    background-color: inherit;
}
.tab{
    display: inline-block;
    width: 125px;
    text-align: center;
    padding-top: 8px;
    margin-right: 1px;
}
.tab:not(.active){
    background-color: white;
    border-top:#025138 solid 5px;
    cursor: pointer;
    box-shadow: 0 2px 9px 1px rgba(0, 0, 0, 0.3);
}
.tab:not(.active) > a, .tab:not(.active) > a:hover, .tab:not(.active) > a:focus{
    color: #025138;
    text-decoration: none;
}
.tab.active{
    background-color: #025138;
    padding-top: 12px;
}
.tab.active > a, .tab.active > a:hover, .tab.active > a:focus{
    font-weight: bold;
    color: #FFF0F5;
    text-decoration: none;
    cursor: default;
}
.tabs-content{
    padding: 15px 25px;
    background-color: white;
    position: relative;
    z-index: 4;
    border: 1px solid #025138;
}
.tabs-content div.row{
    display: flex;
    flex-wrap: wrap;
}

@media(max-width:999px) {
    .container{
        width:100%;
    }
}
.container_img_categorizzare{
    height: 600px;
    max-height: 600px;
}
.inline-helper{
    height: 100%;
    vertical-align: middle;
    display: inline-block;
}
.img_categorizzare{
    max-width: 70%;
    max-height: 55%;
    display: inline-block;
}
.icona_categorizzazione{
    width: 80%;
}
.bottone_categorizzazione{
    width: 100%;
    padding: 8px 5px;
    margin-top: 15px;
    margin-bottom: 3px;
}
#container-foto .progress-bar, #container-foto .progress{
    display: none !important;
}
.tabella-controllo-scheda .th-label{
    width: 15%;
}
.tabella-controllo-scheda .content-td{
    width: 30%;
}
.tabella-controllo-scheda .td-status{
    width: 45px;
}
.tabella-rm-help-block th, .tabella-rm-help-block td{
    vertical-align: middle;
}
.tabella-rm-help-block .form-group{
    margin-bottom: unset;
}
.tabella-rm-help-block .help-block{
    display: none;
}
.campo_accettato {
    color: green;
}
.campo_rifiutato {
    color: red;
}
a.disabled:not(.btn){
    color: #4d4d4d;
}
.tr-positive .td-importo{
    color: green;
}
.tr-negative .td-importo{
    color: red;
}
#success-svg, #error-svg{
	height: 84px;
	width: 84px;
}
#success-svg{
	fill: #38b000;
}
#error-svg{
	fill: #c1121f;
}
th.success{
    background-color: #A5CDAF !important;
}
.btn-success{
    background-color: #51A53A;
    border-color: #296e29;
}
.btn-success:hover, .btn-success:active{
    background-color: #296e29;
    border-color: #296e29;
}
.btn-info{
    background-color: #55C6BF;
    border-color: #39AAA3;
}
.btn-info:hover, .btn-info:active{
    background-color: #39AAA3;
    border-color: #39AAA3;
}
.btn-danger{
    background-color: #FE8C7F;
    border-color: #FD7566;
    color: white;
}
.btn-danger:hover, .btn-danger:active{
    background-color: #FD7566;
    border-color: #ac2925;
    color: white;
}
.img{
    max-width: 100%;
    max-height: 100%;
}
ul.breadcrumb{
    font-size: 16px;
}
span.required{
    color: red;
}