@media (min-width: 992px){
.col-md-4 {
    width: 100% !important;
}
}

body {
    -ms-overflow-style: none; /* for Internet Explorer, Edge */
    scrollbar-width: none; /* for Firefox */
    overflow-y: scroll; 
    overflow-x : hidden;
}

body::-webkit-scrollbar {
    display: none; /* for Chrome, Safari, and Opera */
}

.Select-menu-outer{
    margin-top : 0% !important;
}

.Select-placeholder{
  color: rgb(256,256,256) !important;
  margin-left: 9.75% !important;
  margin-top: 0% !important;
  line-height: 1px !important;
  padding-left: 0% !important;
  height:100% !important;
  padding-top: 0% !important;
  padding-bottom: 0% !important;
  overflow: visible !important;
}

#frame{
    grid-area : cont;
    width:  100%;
    height: 105%;
    overflow-x : hidden;
    background-color: rgba(0,0,0,0.3);
    margin-top: 3%;
}

@-moz-document url-prefix() { /* Disable scrollbar Firefox */
            html{
              scrollbar-width: none;
            }
          }

.PrettyLink .profile .customisable .h-card{
color: #E35925 !important;
}

#twitter a{
    color : #E35925 !important;
}

#twitter body{
background-color: rgba(0,0,0,0.3) !important;
}

.fa {
  font-size: 20%;
  color: #FFFFFF;
}

.timeline-Tweet-retweetCreditIcon {
    font-size: 140px;
}

.timeline-TweetList-tweet{
 height : 10% !important;
}

.container2{
    width : 100%;
}

.row {
    margin-right: 20% !important;
    margin-left: 20% !important;
    max-width: 100%;
    overflow-x: hidden;
}

.col-md-4{
    padding-right: 0 !important;
    padding-left: 0 !important;
}

.panel-body {
    padding: 0 !important;
}

.panel {
    background-color: rgba(0,0,0,0) !important;
}

.panel-danger {
    border-color: rgba(0,0,0,0) !important;
}

#navigation{
position : relative !important;
}

.graph_ptf {
        grid-area: graph;
        display: grid;
        grid-template-areas:
            '. . .'
            'title_scelta title_scelta title_scelta'
            '. . .'
            'riquadri pie pie'
            '. . .'
            'tb2 tb2 tb2';
        grid-template-columns: 70% 5% 25%;
        grid-template-rows: 5% 4% 2% 40% 5% 43%;
    }
    
nav-link:hover{
border-bottom: 1px solid #ff4500 !important;
color : white !important;
}

.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner tr { 
    height: unset !important; 
}

body{ 
  background-attachment: fixed !important; 
  overflow-x: hidden; /* Hide horizontal scrollbar */ 
}

#risk_graph2{
grid-area : grafico;
    border-bottom: 1px solid white !important;
}
    #ptf_composition {
    grid-area: pie;
    border-bottom: 1px solid grey !important;
    }
    
    .title_scelta {
    grid-area: title_scelta;
    display: grid;
    grid-template-areas:
        '. . title .'
        'drop . title .';
    grid-template-columns: 10% 1% 88% 1%;
    grid-template-rows: 15% 85%;
    }
    
    #ptf_scelta, .Select, .has-value, .is-searchable, .Select--single {
    height: 100% !important;
    }
    
    #ptf_scelta {
        grid-area: drop;
        width: 90% !important;
        display: grid;
        grid-template-areas: 'peso percentuale';
        grid-template-columns: 50% 50%;
        background-color: rgba(0,0,0,0);
        border: 1px solid grey !important;
    }
    
    #ptf_scelta, .Select, .has-value, .is-searchable, .Select--single {
    height: 100% !important;
    }
    
    #ptf_scelta {
        grid-area: drop;
        width: 90% !important;
        display: grid;
        grid-template-areas: 'peso percentuale';
        grid-template-columns: 50% 50%;
        background-color: rgba(0,0,0,0);
        border: 1px solid grey !important;
    }
    
    .riquadri {
    grid-area: riquadri;
    border-bottom: 1px solid grey;
    display: grid;
    grid-template-areas:
        '. . .'
        'az materie crypto'
        'soc gov liq'
        '. . .';
    grid-template-columns: 33% 33% 33%;
    grid-template-rows: 5% 45% 45% 5%;
    }
    
    .az {
    grid-area: az;
    text-align: left;
    vertical-align: top;
    }
    
    .contr {
    font-size: 2.5vh;
    color: white !important;
    }
    
    .materie {
    grid-area: materie;
    text-align: left;
    vertical-align: top;
}

    .crypto {
    grid-area: crypto;
    text-align: left;
    vertical-align: top;
}

    .soc {
    grid-area: soc;
    text-align: left;
    vertical-align: bottom !important;
    display: inline;
}

    .gov {
    grid-area: gov;
    text-align: left;
    vertical-align: bottom;
}

    .liq {
    grid-area: liq;
    text-align: left;
    vertical-align: bottom;
}

    #ptf_tab2 {
    grid-area: tb2;
    display: grid;
    grid-template-areas:
        'az . mp'
        '. . .'
        'ob_soc . ob_gov'
        '. . .'
        'cry . liq'
        '. . .'
        'tab1 . tab2'
        '. . .'
        'tab3 . tab4';
    grid-gap: 2% 0%;
    grid-template-columns: 46% 8% 46%;
}

    #tab_azioni {
    grid-area: az;
    padding-bottom: 5%;
}

.dash-table-container {
    height: 100% !important;
}

.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner td.focused{
    background-color: rgba(0,0,0,0) !important;
    border-top: rgba(0,0,0,0) !important;
    border-bottom: rgba(0,0,0,0) !important;
}

tr:focus{
border-bottom: 1px solid #ff4500 !important;
background-color: rgba(0,0,0,0) !important;
}

tr:hover { 
   background-color: rgba(200,0,0,0) !important;  
   border-bottom: 1px solid #ff4500 !important;   
}

td:hover { 
   background-color: rgba(0,0,0,0) !important;     
}

td{
    border-top: none !important;
    border-bottom: none !important;
    background-color : rgba(0,0,0,0) !important;
}

.dash-table-container:hover .dash-spreadsheet-container:hover .dash-spreadsheet-inner:hover td:hover {
    background-color: rgba(0,0,0,0) !important;
}

table tr:hover td { 
   background-color: inherit;     
   opacity: 1.0;
}

#peso{
    grid-area: peso;
    color: white !important;
}

#peso:hover{
    border-bottom: none !important;
}

#percentuale{
    grid-area: percentuale;
    color: white !important;
}

#percentuale:hover{
    border-bottom: none !important;
}



   

.text-danger{ 
    color: white !important; 
    font-family: Barlow !important; 
} 
 
.glow-on-hover{ 
  text-align: center; 
  color: white; 
  cursor: pointer; 
  max-width: 600px;  
  width: 100%;  
  outline: 1px solid; 
  outline-color: white; 
  transition: all 600ms cubic-bezier(0.2, 0, 0, 0.8); 
  padding: 3% 3%; 
} 

input{ 
    border-radius : 0px;
} 
 
.glow-on-hover:hover { 
  color: rgba(71, 126, 232, 0.7); 
  outline-color: rgba(71, 126, 232, 0); 
  outline-offset: 300px; 
}

#reale {
  text-align: left !important;
}

#error {
  font-size: 120px;
}

/* Code Font Size */
#code {
  font-size: 120px;
}

a{
  margin : 0 0 !important;
}
  
#navigation {
    grid-area: menu;
}

.btn {
    border-radius : 0;
    border-right : none !important;
}

.SingleDatePickerInput__withBorder { 
    border: none; 
} 

.Select, .tit, .has-value, .Select--single{
    font-size : 1.75vh
    }

.oggi, .ytd, .si { 
    grid-area: oggi; 
    text-align: left; 
    display: grid; 
    grid-template-areas: 
        'title' 
        '.' 
        'numb' 
        '.' 
        'delta' 
        '.'; 
    grid-template-rows: 20% 0% 30% 7% 30% 10%; 
}
 
.SingleDatePickerInput { 
    display: inline-block; 
    background-color: rgba(0,0,0,0); 
}

#time_machine{ 
  margin-top:8%; 
  display: none !important;
}

#err {
  padding: 40px;
/*   font-size: 120px; */
  font-family: 'Monoton', cursive;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 0 80px red,0 0 30px FireBrick,0 0 6px DarkRed;
  color: red;
  width:100%;
}

#err p { 
  margin:0; 
}

#home_date { 
  text-align:left; 
}


._dash-loading-callback {
    position: fixed;
    z-index: 100;
  }
._dash-loading-callback::after {
    content: '';
    font-family: sans-serif;
    padding-top: 50px;
    color: #000;
    -webkit-animation: fadein 0.5s ease-in 1s forwards; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 0.5s ease-in 1s forwards; /* Firefox < 16 */
        -ms-animation: fadein 0.5s ease-in 1s forwards; /* Internet Explorer */
         -o-animation: fadein 0.5s ease-in 1s forwards; /* Opera < 12.1 */
            animation: fadein 0.5s ease-in 1s forwards;  
    /* prevent flickering on every callback */
    -webkit-animation-delay: 0.5s;
    animation-delay: 0.5s;
    /* The banner */
    opacity: 0;
    position: fixed;
    top: 0;
    left: 10%;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0);
    text-align: center;
    cursor: progress;
    z-index: 100000;
    background-image: url('Wedges-5s-200px.svg');
    background-position: center center;
    background-repeat: no-repeat;
  }
  
.tit {
      color : white !important;
  }
  
#indi2{
      height : 80% !important;
  }
  
.indicator_2{
    margin-top : 0% !important; 
  }
  

.DateRangePickerInput { 
    border: none;
}
 
.DateRangePicker, .DateRangePicker_1, .DateRangePickerInput, .DateRangePickerInput_1, .DateRangePickerInput__withBorder, .DateRangePickerInput__withBorder_2 { 
    border: none;
    text-align: left;
}

.DateRangePickerInput_arrow, .DateRangePickerInput_arrow_1{ 
    text-align: center; 
}

.indicator_2_weekend { 
    display:grid; 
    grid-area: numbers; 
    grid-template-areas: 
        '.' 
        'oggi' 
        'si' 
        '.'; 
    grid-template-rows: 2% 25% 25% 25%; 
    grid-template-columns: 100%; 
}

.VirtualizedSelectOption { 
    background-color: rgba(0,0,0,0) !important; 
    color: white; 
    font-weight: 100; 
    margin-top: 0%; 
} 
 
.VirtualizedSelectFocusedOption { 
    background-color: rgba(0,0,0,0.3) !important; 
}

.DateRangePickerInput__withBorder { 
    border: none;
}
  
@keyframes fadein {
      from { opacity: 0; }
      to   { opacity: 1; }
  }
  /* Firefox < 16 */
@-moz-keyframes fadein {
      from { opacity: 0; }
      to   { opacity: 1; }
  }
  /* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
      from { opacity: 0; }
      to   { opacity: 1; }
  }
  /* Internet Explorer */
@-ms-keyframes fadein {
      from { opacity: 0; }
      to   { opacity: 1; }
  }
  /* Opera < 12.1 */
@-o-keyframes fadein {
      from { opacity: 0; }
      to   { opacity: 1; }
  }
  
 p { 
    margin-bottom:1% !important;
}

  
#home_fig { 
    height: 100% !important; 
}

.DateRangePickerInput_arrow {
    width: 20%;
}

.DateRangePickerInput_arrow_svg {
    vertical-align: middle;
    fill: #484848;
    height: 100%;
    width: 30%;
}


.DateRangePickerInput_arrow {
    width: 10% !important;
}

.DateRangePickerInput_arrow_svg {
    vertical-align: middle;
    fill: #484848;
    height: 100%;
    width: 70%;
}

.DateInput{
    width: 35%;
}

.DateInput_input {
    width: 80% !important;
}

.DayPickerKeyboardShortcuts_buttonReset, .DayPickerKeyboardShortcuts_buttonReset_1, .DayPickerKeyboardShortcuts_show, .DayPickerKeyboardShortcuts_show_2, .DayPickerKeyboardShortcuts_show__bottomRight, .DayPickerKeyboardShortcuts_show__bottomRight_3{
    display: none;
}

td:hover{
    background-color: #E35925 !important;
    color : white !important; 
}

.CalendarDay__selected_span{
    border : 1px solid white !important; 
}

.CalendarDay__selected_end, .CalendarDay__selected_end_4, .CalendarDay__selected, .CalendarDay__selected_5, .CalendarDay__selected_span, .CalendarDay__selected_span_3{
 background-color : grey !important;
}

#error:hover { 
  text-shadow: 0 0 200px #ffffff,0 0 80px #008000,0 0 6px #0000ff; 
}

#code:hover { 
  text-shadow: 0 0 100px red,0 0 40px FireBrick,0 0 8px DarkRed;
}

.Select-arrow-zone { 
    display: table-cell !important; 
    position: relative !important; 
    vertical-align: unset !important; 
    width: 20% !important; 
    padding-right: 5px !important; 
    grid-area:arrow !important
} 
 
.Select-value{ 
    grid-area: txt !important; 
} 
 
.Select-arrow-zone:hover>.Select-arrow, .is-open .Select-arrow{ 
    border-top-color: #E35925 !important; 
} 
 
.Select-arrow {
    border-color: white transparent transparent !important;
    border-style: solid !important;
    border-width: .5vh .5vh .25vh !important;
    height: 0 !important;
    width: 0 !important;
    position: relative !important;
}
 
.Select-control { 
    background-color: rgba(0,0,0,0) !important; 
    border-radius: 4px !important; 
    border: none !important; 
    /* color: #333; */ 
    border-spacing: 0 !important; 
    border-collapse: separate !important; 
    height: 100% !important; 
    overflow: hidden !important; 
    display: grid !important; 
    grid-template-areas: 'arrow txt' !important; 
    grid-template-columns: 10% 90% !important; 
} 

.Select--single>.Select-control .Select-value, .Select-placeholder {
    padding-left: 3% !important;
    padding-right: 0 !important;
}
 
.Select-control, .Select-input>input { 
    width: 100% !important; 
    cursor: default !important; 
    outline: 0 !important; 
} 
 
.Select-multi-value-wrapper{ 
    height: 100%; 
} 
 
.Select--single>.Select-control .Select-value, .Select-placeholder { 
    bottom: 0 !important; 
    color: #aaa; 
    left: 0 !important; 
    line-height: 1 !important ; 
    padding-left: 10px !important; 
    padding-right: 10px !important; 
    position: absolute !important; 
    right: 0 !important; 
    top: 0 !important; 
    max-width: 100% !important; 
    overflow: hidden !important; 
    text-overflow: ellipsis !important; 
    white-space: nowrap !important; 
} 

.is-open>.Select-control .Select-arrow{
    border-width: 0 .5vh .5vh !important;
}
 
.is-open>.Select-control { 
    background-color: rgba(0,0,0,0) !important; 
    border-radius: 4px !important; 
    border: none !important; 
    /* color: #333; */ 
    display: grid !important; 
    grid-template-areas: 'arrow txt' !important; 
    grid-template-columns: 10% 90% !important;    
    border-spacing: 0 !important; 
    border-collapse: separate !important; 
    height: 100% !important; 
    overflow: hidden !important; 
} 

.Select-input {
    height: unset !important;
    /* padding-left: 0; */
    /* padding-right: 0; */
    vertical-align: middle !important;
}
 
.Select-menu-outer{ 
    background-color: rgba(0,0,0,0) !important; 
    border-color: rgba(0,0,0,0) !important; 
    width: 100%; 
} 
 
.has-value.Select--single>.Select-control .Select-value .Select-value-label, .has-value.is-pseudo-focused.Select--single>.Select-control .Select-value .Select-value-label { 
    color: white !important; 
} 
 
.is-focused:not(.is-open)>.Select-control{ 
    box-shadow: none !important; 
} 
 
.dash-dropdown{ 
    grid-area:title; 
} 
 
.Select, .tit, .has-value, .is-searchable, .Select--single{ 
    margin-top: auto !important;
    margin-bottom: auto !important; 
}

.Select-control{
    height: inherit !important;
}

#error {
  color: #fff;
  text-shadow: 0 0 80px #ffffff,0 0 30px #008000,0 0 6px #0000ff;
}

#error span {
  animation: upper 11s linear infinite;
}

#code span:nth-of-type(2) {
  animation: lower 10s linear infinite;
}

.a{ 
    border-right: 1px solid grey; 
    padding-right: 3%; 
    padding-left: 3%; 
    max-height: 1.75vh;
    margin-top: auto;
    margin-bottom: auto;
} 
 
.a_tot{ 
    padding-right: 0%; 
    padding-left: 3%; 
    max-height: 1.75vh;
    margin-top: auto;
    margin-bottom: auto;
}

#code span:nth-of-type(1) {
  text-shadow: none;
  opacity:.4;
}

@keyframes upper {
  0%,19.999%,22%,62.999%,64%, 64.999%,70%,100% {
    opacity:.99; text-shadow: 0 0 80px #ffffff,0 0 30px #008000,0 0 6px #0000ff;
  }
  20%,21.999%,63%,63.999%,65%,69.999% {
    opacity:0.4; text-shadow: none; 
  }
}

@keyframes lower {
  0%,12%,18.999%,23%,31.999%,37%,44.999%,46%,49.999%,51%,58.999%,61%,68.999%,71%,85.999%,96%,100% {
    opacity:0.99; text-shadow: 0 0 80px red,0 0 30px FireBrick,0 0 6px DarkRed;
  }
  19%,22.99%,32%,36.999%,45%,45.999%,50%,50.99%,59%,60.999%,69%,70.999%,86%,95.999% { 
    opacity:0.4; text-shadow: none; 
  }
}

body {
background: url('background.jpg');
 background-size:cover !important; 
 height:100vh; 
 width:100vw; 
 line-height : 1;
}

.btn_home{  
 text-align: right;  
 display: flex; 
 justify-content: flex-end; 
 }
 
 text{ 
font-size: .8vw !important; 
 }
 
.triangle-up { 
    color: #05FF00 !important; 
    font-size: 2vh; 
} 
 
.triangle-down { 
    color: #FF0000 !important; 
    font-size: 2vh; 
} 
  
 .perf{ 
     grid-area: delta; 
     display:flex; 
 } 
  
.oggi{ 
     grid-area: oggi; 
     text-align:left; 
     display: grid; 
     grid-template-areas:  
     'title' 
     '.' 
     'numb' 
     '.' 
     'delta' 
     '.'; 
    grid-template-rows: 20% 0% 30% 0% 30% 10%; 
 } 
  
.ytd{ 
     grid-area: ytd; 
     text-align:left; 
     display: grid; 
     grid-template-areas:  
     'title' 
     '.' 
     'numb' 
     '.' 
     'delta' 
     '.'; 
    grid-template-rows: 20% 0% 30% 0% 30% 10%; 
} 
  
.si{ 
     grid-area: si; 
     text-align:left; 
     display: grid; 
     grid-template-areas:  
     'title' 
     '.' 
     'numb' 
     '.' 
     'delta' 
     '.'; 
    grid-template-rows: 20% 0% 30% 0% 30% 10%; 
}

 

@import url('https://fonts.googleapis.com/css?family=Barlow:400,800');

* {
	box-sizing: border-box;
}

.claim{
	font-family: 'Barlow', sans-serif;
	color:white;
	grid-area: tit;
	}
	
.image{
    width: 100%;
    margin-left: 0%;
    grid-area: tit;
}



.braint{
	font-size:1.2rem;
	}

a {
	color: white;
	font-size: 14px;
	text-decoration: none;
	margin: 15px 0;
}

.ghost2 {
	border:none;
	background-color: #E35925;
	color: black;
	font-size: 12px;
	font-weight: bold;
	padding: 12px 45px;
	letter-spacing: 1px;
	text-transform: uppercase;
	transition: transform 80ms ease-in;
	font-family: 'Barlow', sans-serif;
}

.ghost:active {
	transform: scale(0.95);
}

.ghost2:hover{
	background-color: white;
	color : #E35925;
}

.ghost2:focus {
	outline: none;
	border:none;
}

button.ghost {
	background-color: white;
	color: black;
}

.link_reset{
    grid-area: link;
    margin-top: -15%;
    font-family: 'Barlow', sans-serif;
    font-size: 1.1rem;
}

.link_reset:hover{
    color :	#E35925;
}

.link_reset2{
    grid-area: link;
    margin-top: -15%;
    font-family: 'Barlow', sans-serif;
    font-size: 1.1rem;
}

.link_reset2:hover{
    color :	#E35925;
}

#risk_nav { 
    color:grey;
}
#risk_nav:hover{
    color:grey !important;
    cursor:default;
    border-bottom : none !important;
}

#ptf_nav { 
    color:grey;
}
#ptf_nav:hover{
    color:grey !important;
    cursor:default;
    border-bottom : none !important;
}

#tit_graph{ 
    grid-area: title; 
} 
 
.title_scelta{ 
    grid-area: title_scelta; 
    display: grid; 
    grid-template-areas: 
    '. . title .' 
    'drop . title .'; 
    grid-template-columns: 10% 1% 88% 1%; 
    grid-template-rows: 15% 85%; 
} 
   
#tab1{ 
    grid-area: tab1; 
    border-bottom: 1px solid grey; 
    padding-bottom: 5%; 
 
} 
 
#tab2{ 
    grid-area: tab2; 
    border-bottom: 1px solid grey; 
    padding-bottom: 5%; 
} 
 
#tab3{ 
    grid-area: tab3; 
    border-bottom: 1px solid grey; 
    padding-bottom: 5%; 
} 
 
#tab4{ 
    grid-area: tab4; 
    border-bottom: 1px solid grey; 
    padding-bottom: 5%; 
} 
 
#tab_azioni{ 
    grid-area: az; 
    padding-bottom: 5%;  
} 
 
#tab_mp{ 
    grid-area: mp; 
    padding-bottom: 5%; 
} 
 
#tab_ob_soc{ 
    grid-area: ob_soc; 
    padding-bottom: 5%; 
 
} 
 
#tab_ob_gov{ 
    grid-area: ob_gov; 
    padding-bottom: 5%; 
} 
 
#tab_crypto{ 
    grid-area: cry; 
    padding-bottom: 5%; 
} 
 
#tab_liq{ 
    grid-area: liq; 
    padding-bottom: 5%; 
}
 
 
.tit_risk{ 
    font-size: 2.75vh; 
    margin-top: auto; 
    font-family: 'Barlow'; 
    color: white !important; 
    margin-bottom: 0% !important; 
}

.form {
	 background-color: rgba(0,0,0,0.5);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	padding: 0 50px;
	height: 100%;
	text-align: center;
}

.form2 {
	 background-color: rgba(0,0,0,0.5);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	padding: 0 50px;
	height: 100%;
	text-align: center;
}

.titolino{
    font-size: 1.2rem;
    font-weight: bold;
}

.container{
    display:grid;
    
    }

.container_free{
    display:grid;
    
    }

input {
	background-color: rgba(0,0,0,0);
	border: none;
	border-bottom: 1px solid white;
	width: 100%;
	font-family: 'Barlow', sans-serif;
	color: white;
}

::placeholder{
    color: white;
}

input:focus{
	outline: none;
	border-bottom : 1px solid #E35925;
}

.container {
	background-color: rgba(0,0,0,0);
	border-radius: 10px;
  	box-shadow: 0 14px 28px rgba(0,0,0,0.25), 
			0 10px 10px rgba(0,0,0,0.22);
	position: relative;
	overflow: hidden;
	height: 90vh;
	width: 100%;
    padding-right: 0;
    padding-left: 0; 
    margin-right: auto;
    margin-left: auto;
}

.container{
    display : grid;
    grid-template-areas :
        'input over_cont';
    grid-template-columns: 40% 60%;
    perspective: 25px;
    }

.container_free {
	background-color: rgba(0,0,0,0);
	border-radius: 10px;
  	box-shadow: 0 14px 28px rgba(0,0,0,0.25), 
			0 10px 10px rgba(0,0,0,0.22);
	position: relative;
	overflow: hidden;
	height: 90vh;
	width: 100%;
    padding-right: 0;
    padding-left: 0; 
    margin-right: auto;
    margin-left: auto;
}

.container_free {
    display : grid;
    grid-template-areas :
        'input over_cont';
    grid-template-columns: 100% 00%;
    perspective: 25px;
    }

.form-container {
	top: 0;
	height: 100%;
	transition: all 0.6s ease-in-out;
	
}

#uname-box{
    grid-area:user;
}

#pwd-box{
    grid-area:pwd;
    margin-top: -5%;
}

#login-button{
    grid-area:btn;
    margin-top: -10%;
}

#uname-reset-box{
    grid-area:user;
}

#pwd-old-reset-box{
    grid-area:pwd_old;
}

#pwd-new-reset-box{
    grid-area:pwd_new;
}

#reset-button{
    grid-area:btn;
    margin-top: -10%;
}

.form-container {
	grid-area: input;
}

.form2{
	display:grid;
	grid-template-areas: 
    	'tit'
    	'user'
    	'pwd_old'
    	'pwd_new'
    	'error'
	    'btn'
	    'link'
    	'.';
    grid-template-rows: 40% 10% 10% 10% 3% 10% 10% 10%;
}

.form{
	display:grid;
	grid-template-areas: 
    	'tit'
    	'user'
    	'pwd'
    	'error'
	    'btn'
	    'link'
    	'.';
    grid-template-rows: 40% 10% 10% 3% 10% 10% 20%;
}

#collapse_pwd{
    grid-area: error;
    background-color: rgba(0,0,0,0);
    margin-top:-10%;
}

#collapse_user{
    grid-area: error;
    background-color: rgba(0,0,0,0);
    margin-top:-10%;
}

#collapse_reset_pwd{
    grid-area: error;
    background-color: rgba(0,0,0,0);
    margin-top:-7%;
}

#collapse_reset_done{
    grid-area: error;
    background-color: rgba(0,0,0,0);
    margin-top:-7%;
}

#collapse_reset_user{
    grid-area: error;
    background-color: rgba(0,0,0,0);
    margin-top:-7%;
}

#collapse_reset_missing{
    grid-area: error;
    background-color: rgba(0,0,0,0);
    margin-top:-7%;
}

.card {
    color : #E35925;
    background-color : rgba(0,0,0,0);
}

.card-body{
    text-align: left;
    padding: 0rem 0rem !important;
}

.sign-in-container {
	left: 0;
	z-index: 2;
}

.container.right-panel-active .sign-in-container {
	transform: translateX(100%);
}

.sign-up-container {
	left: 0;
	width: 50%;
	opacity: 0;
	z-index: 1;
}

.container.right-panel-active .sign-up-container {
	transform: translateX(100%);
	opacity: 1;
	z-index: 5;
	animation: show 0.6s;
}

@keyframes show {
	0%, 49.99% {
		opacity: 0;
		z-index: 1;
	}
	
	50%, 100% {
		opacity: 1;
		z-index: 5;
	}
}

.overlay-container {
	background-image: url("londra.jpg");
	top: 0;
	left: 50%;
	height: 100%;
	overflow: hidden;
	transition: transform 0.6s ease-in-out;
	z-index: 100;
}

.overlay-container{
    grid-area : over_cont;
}

#overlay-container{
   transition: transform 0.2s;
  -webkit-transition: transform 0.2s;
  -moz-transition: transform 0.2s;
  -o-transition: transform 0.2s;
}

.container.right-panel-active .overlay-container{
	transform: translateX(-100%);
}

.overlay {
	background-color: rgba(37,41,44,255);
	background-position: 0 0;
	color: white;
	position: relative;
	left: -100%;
	height: 100%;
	width: 200%;
  	transform: translateX(0);
	transition: transform 0.6s ease-in-out;
}

.container.right-panel-active .overlay {
  	transform: translateX(50%);
}

.dropdown-menu, .show{
    background-color : rgba(0,0,0,0.4);
    color : white;
}

.btn-check:active+.btn-secondary, .btn-check:checked+.btn-secondary, .btn-secondary.active, .btn-secondary:active, .show>.btn-secondary.dropdown-toggle {
    color: #fff;
    background-color: rgba(0,0,0,0);
    border-color: rgba(0,0,0,0);
}

.btn-check:active+.btn-secondary:focus, .btn-check:checked+.btn-secondary:focus, .btn-secondary.active:focus, .btn-secondary:active:focus, .show>.btn-secondary.dropdown-toggle:focus {
    box-shadow: none;
}

.dropdown-toggle, .btn-secondary{
    width: 20%;
    height:100%;
    background-color: rgba(0,0,0,0);
    text-align: left;
    margin-top: 5%;
    font-size: 1.2rem !important;
    margin-left: -1.5%;
}

.dropdown-toggle:hover{
    border:none !important;
}

.btn-secondary:hover{
    border:none !important;
}

dropdown-item:hover{
    color : #E35925 !important;
}

dropdown-item.hover{
    color : #E35925 !important;
}

.dropdown-item{
    font-family: 'Barlow', sans-serif;
}

.dropdown-item.active, .dropdown-item:active {
    color: #fff;
    text-decoration: none;
    background-color: rgba(0,0,0,0) !important;
}
.dropdown, .show{
    background-color : black;
}

.dropdown{
    background-color : rgba(0,0,0,0);
}

.dropdown-toggle, .btn, .btn-secondary{
    background-color : rgba(0,0,0,0);
    border:none;
}

.dropdown-toggle:hover{
    background-color : rgba(0,0,0,0)
} 

.btn:hover{
    background-color : rgba(0,0,0,0)
}

.btn-secondary:hover{
    background-color : rgba(0,0,0,0)
}

.dropdown-toggle:focus{
    background-color : rgba(0,0,0,0)
} 

.btn:focus{
    background-color : rgba(0,0,0,0)
}

.btn-secondary:focus{
    background-color : rgba(0,0,0,0)
}

.dropdown-item{
    color : white;
}

.overlay-panel {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	padding: 0 40px;
	text-align: center;
	top: 0;
	height: 100%;
	width: 50%;
	transform: translateX(0);
	transition: transform 0.6s ease-in-out;
}

.overlay-left {
	transform: translateX(-20%);
}

.container.right-panel-active .overlay-left {
	transform: translateX(0);
}

.overlay-right {
	right: 0;
	transform: translateX(0);
	background-image: url("londra.jpg");
	background-position : center;
	background-size : cover;
}


.overlay-right-no-img {
	right: 0;
	transform: translateX(0);
	opacity:1;
	color: white;
	
}
.container.right-panel-active .overlay-right {
	transform: translateX(20%);
}

.social-container {
	margin: 20px 0;
}

.social-container a {
	border: 1px solid #DDDDDD;
	border-radius: 50%;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	margin: 0 5px;
	height: 40px;
	width: 40px;
}

footer {
    background-color: #222;
    color: #fff;
    font-size: 14px;
    bottom: 0;
    position: fixed;
    left: 0;
    right: 0;
    text-align: center;
    z-index: 999;
}

footer p {
    margin: 10px 0;
}

footer i {
    color: red;
}

footer a {
    color: #3c97bf;
    text-decoration: none;
}

@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

h2, h1, p {
	color : white;
	font-family: 'Barlow';

}

.txt {
	color: #fff;
}
  
#home_date, .date_home, .DateInput_input, .DateInput_input_1, .DateInput, .DateInput_1, .DateInput, .DateInput_input__focused ,.DateInput_input__focused_2{
font-family:  'Barlow', sans-serif;
background: rgba(0,0,0,0);
background-color: rgba(0,0,0,0);
border: 1px solid rgba(0,0,0,0);
color : white;
    text-align:center;

}

.DateRangePicker, .DateRangePicker_1, .DateRangePickerInput, .DateRangePickerInput_1, .DateRangePickerInput__withBorder, .DateRangePickerInput__withBorder_2{
width: 100%;
height : 50%;
border: 1px solid rgba(0,0,0,0);
}

.DateRangePickerInput_arrow_svg, .DateRangePickerInput_arrow_svg_1{
color:white;
fill:white;
}

#navigation, .navbar, .nav, .navbar, .navbar-expand-md, .navbar-light, .bg-light, .fixed-top, .nav-link{
font-family: 'Barlow', sans-serif !important;
margin-left:auto;
margin-right:auto;
color:white;
background-color:rgba(0,0,0,0);
width:100%;
}

.nav-link{
background-color: rgba(0,0,0,0.3);
border-bottom: 1px solid rgba(0,0,0,0) !important;
padding: 1rem 1rem !important;
font-family: 'Barlow', sans-serif !important;
line-height: 1.5;
color: white !important;
}

.nav-link.disabled{
color: grey !important;
}

.nav-link.active{
border-bottom: none !important;
}

dash-header{
display : none !important;
}

.navbar{
padding-top: 0; 
    padding-bottom: 0;
}    
    
.DateInput_input:hover{
border-bottom : 1px solid #E35925;
color:white;
}

.DateInput_input{
width: 73.7% !important;
}

.btn{ 
  background-color: rgba(0,0,0,0); 
  color: white; 
  transition: none; 
      outline: 0; 
      grid-area : btn; 
  font-family : 'Barlow', sans-serif; 
  font-weight: 100; 
  padding-bottom:3%; 
   padding-top:0; 
   padding-right: 0%; 
    padding-left: 0%;
   border-radius: 0; 
   line-height: 1;
   vertical-align: top !important;
}

.btn:hover{
border-bottom : 1px solid #E35925;
color:white;
}

.DateInput_input {
line-height: 1; 
}

.btn{
font-size: 1.75vh;
}

#home_date, .date_home, .DateInput_input, .DateInput_input_1, .DateInput, .DateInput_1, .DateInput, .DateInput_input__focused, .DateInput_input__focused_2 { 
    font-family: 'Barlow', sans-serif; 
    background: rgba(0,0,0,0); 
    background-color: rgba(0,0,0,0); 
    border: none;
    font-size: 1.75vh;
    color: white; 
}

.btn:focus{
border-bottom : none;
color:white;
font-weight : bold;
outline:0 !important;
box-shadow: none;
}

.DateInput_input {
    padding: 0;
}

.DateRangePicker, .DateRangePicker_1, .DateRangePickerInput, .DateRangePickerInput_1, .DateRangePickerInput__withBorder, .DateRangePickerInput__withBorder_2 { 
    border: none; 
    vertical-align:top ;
    text-align: left;
}

.DateRangePickerInput{
background-color: rgba(0,0,0,0);
border: 1px solid rgba(0,0,0,0);
color : white;
grid-area : date;
}

.bg-light {
background-color:rgba(0,0,0,0) !important;
}

.fixed-top {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    text-align: center;
    z-index: 1030;
}

.navbar{
align-items:right;
}

.nav-link:hover{
border-bottom: 1px solid #ff4500 !important;
color:white;
font-family: 'Barlow', sans-serif !important;
}

.active{
border-bottom: 1px solid #ff4500 !important;
color:white;
font-weight: bold;
font-family: 'Barlow', sans-serif !important;
}

/* background-image: linear-gradient(to top, rgba(255,255,255,0.2), rgba(255,255,255,0.6));

  -moz-box-shadow: 5px 5px 5px rgba(68, 68, 68, 0.6);
  -webkit-box-shadow: 5px 5px 5px rgba(68, 68, 68, 0.6);
  box-shadow: 5px 5px 5px rgba(68, 68, 68, 0.6);*/


/*.nav-link, .active{
border-bottom: 2px solid #ff4500;
}*/

text { 
    valueformat : '.2%'
}

circle {
    stroke-width: 20px;
}

/*probably only for mobile*/
.modebar{
      display: none !important;
}

.profit {
  width: 60vw;
  overflow: hidden;
  text-align: center;
  font-weight:300;
  color: #fff;
  margin-top: 0%;
  grid-area:profit;
  margin-left:20%;
  background-color:rgba(0,0,0,0)
}

.profit:before, .profit:after {
  content: "";
  display: inline-block;
  width: 50%;
  margin: 0 .5em 0 -55%;
  vertical-align: middle;
  border-bottom: 1px solid;
}

.profit:after {
  margin: 0 -55% 0 .5em;
}

.theBody{ 
    display : grid; 
    grid-template-areas :  
        '. menu .' 
        '. cont .'; 
     grid-template-rows: 5% 95%; 
    grid-template-columns: 20% 60% 20%; 
    height:95vh; 
    width:100vw; 
}

p{
  color: grey !important;
}

input::placeholder{
  color: grey !important;
}

.home{
    grid-area:cont;
    display : grid;
    grid-template-areas : 
        'ind_risk'
        'graph'
        'disclaimer';
    grid-template-rows: 20% 70% 10%;
    grid-template-columns: 100%;
    }
    
.disclaimer{
    grid-area:disclaimer;
    background-color: rgba(0,0,0,0);
    border-top: 1px solid grey;
    text-align:left;
}

p{
color:white;
  font-weight: 100;
font-size: 1.3vh;
}

.scatter{
grid-area : scatter;
height:100%;
}

#home_fig{
height:100%;
}

.indicator_2 { 
    display:grid; 
    grid-area: numbers; 
    grid-template-areas: 
        '.'
        'oggi' 
        'ytd' 
        'si' 
        '.'; 
    grid-template-rows: 2.2% 25% 25% 25%; 
    grid-template-columns: 100%; 
} 

.DateInput_input:hover { 
    border-bottom : 1px solid #E35925; 
color:white; 
}
 
.positive{ 
    color: #05FF00 !important; 
    font-size: 2vh !important; 
    font-weight:400; 
} 
 
.neutral{ 
    color: white !important; 
    font-size: 2vh !important; 
    font-weight:400; 
} 
 
.negative{ 
    color: #FF0000 !important; 
    font-size: 2vh !important; 
    font-weight:400; 
} 
#reale{ 
    grid-area: reale; 
    display: grid; 
    grid-template-areas: 
        'title' 
        '.' 
        'numb'; 
    grid-template-rows: 25% 5% 40%; 
} 
 
.indicator_1 { 
    grid-area : indicator_1; 
    display : grid; 
    grid-template-areas : 
        '.'  
        'reale' 
        '.'; 
     grid-template-rows: 34% 50% 20%; 
     grid-template-columns: 100%; 
}
    
.indicator_chart_1{
    grid-area: indicator_graph_1;
    height:100%;
    width:100%;
}

.graph {
    
    grid-area : graph;
    display : grid;
    grid-template-areas : 
        '. .'
        'numbers pl'
        'up up';
    grid-template-columns: 25% 75%;
    grid-template-rows: 6% 85% 5%;    
}
.update{
    grid-area:up;
    margin-top: 2%;
}
.update2{
    grid-area:up;
}

p{
    color: #C4C4C4 !important;
}

.pl{
    grid-area:pl;
    display : grid;
    grid-template-areas : 
        'input'
        'scatter';
    grid-template-columns: 100%;
    grid-template-rows: 10% 90%;
}

.risk {grid-area : risk; 
        display : grid; 
    grid-template-areas :  
        '.' 
        'scomp_risk' 
        '.'; 
grid-template-rows: 34% 50% 20%; 
    grid-template-columns: 100%; 
}

.numb, .numb2{ 
    font-size: 4vh !important; 
    font-weight:400; 
    grid-area:numb; 
    color : white !important;
} 
 
.number{ 
    font-size: 3rem !important; 
} 
 
.title{ 
    font-size: 2vh !important; 
    font-weight:200; 
    grid-area:title; 
    color: white !important;
} 
 
.delta{ 
    font-size: 2vh !important; 
} 
 
#indi2{ 
    grid-area : indi2; 
    height:100% !important; 
}

#risk_graph{
    grid-area: grafico;
    border-bottom: 1px solid white;
}

.risk_cont{  
    grid-area: scomp_risk;  
    display:grid;  
    grid-template-areas: '.'  
                         'grafico'  
                         'labels';  
    grid-template-rows: 30% 40%;  
    grid-template-columns: 100%;  
}   
   
.labels { 
    grid-area: labels; 
    display: grid; 
    grid-template-areas: 'min . tgt . max'; 
    grid-template-columns: 10% 57% 20% 3% 10%; 
    grid-template-rows: 100%; 
    padding-top: 1%; 
} 
 
.min{ 
grid-area:min; 
text-align:left; 
font-size: .75vw; 
color: white !important;
} 
 
.max{ 
grid-area:max; 
text-align: right; 
font-size: .75vw; 
color: white !important;
} 
 
.target{ 
grid-area:tgt; 
text-align:center; 
font-size: .75vw; 
color: white !important;
}

.date_home{
grid-area : date;
margin-top: auto; 
    margin-bottom: auto;
text-align: center;
}

.DateRangePickerInput { 
    border: none; 
}

.btn_home{
grid-area : btn;
margin-top: auto; 
    margin-bottom: auto;
}

.input_home{
    display : grid;
    grid-template-areas : 
        '. . .'
        'title date btn'
        '. . .';
    grid-area:input;
    grid-template-columns: 15% 45% 40%;
    grid-template-rows: 0% 85% 15%;
}

.tt{
  color : white !important;
  font-size : 1.75vh !important;
  margin-top: auto; 
  margin-bottom: auto;
}

.xtick {
  font-weight: 100;
}

.ytick {
  font-weight: 100;
}
  
.tit{
font-family: 'Barlow', sans-serif;
font-size : 1.75vh;
grid-area : title;
font-weight: 100;
margin-top: auto; 
    margin-bottom: auto;
color:white;
}  

.DateRangePickerInput_arrow{
width: 50px;
}
 
.field{
border: 2 px solid white;}

.ind_risk {
    display : grid;
    grid-area : ind_risk;
    grid-template-areas : 
        'indicator_1 risk';
     border-bottom:1px solid grey;
    grid-template-rows: 100%;
    grid-template-columns: 25% 75%;
}

.is-open>.Select-control .Select-arrow{ 
    border-color: white transparent transparent !important; 
    border-top-color: #E35925 !important; 
    border-width: .5vh .5vh .25vh !important; 
    top: 0 !important; 
}

#performance{
    grid-area : graph;
    display: grid;
    grid-template-areas: 'butn butn butn butn'
                         '. . . .'
                         'riquadri grafico grafico grafico'
                         'riquadri grafico grafico grafico'
                         '. . . .'
                         'tabelle tabelle tabelle tabelle';
    grid-template-columns: 40% 4% 25% 29%;
    grid-template-rows: 7% 1% 33% 33% 5% 63%;
}

#decisione{
    grid-area : butn;
    display : grid;
    grid-template-areas : 
        '. . . . .'
        '. . . date btn'
        '. title . date btn'
        '. . . date btn'
        '. . . . .';
    grid-template-rows: 15% 10% 50% 10% 15%;
    grid-template-columns: .65% 12% 10% 39% 38.8%;
}

#tit{
    grid-area: title;
    font-family: 'Barlow', sans-serif;
    font-size : 1.75vh;
    font-weight: 100;
    margin-top: 2% !important;
}

.Select-value{
    line-height : 1 !important;
}



#perf_tabelle{
    border-top : 1px solid grey;
    display: grid;
    grid-template-areas: 
                         '. . .'
                         'az . mp'
                         'ob_soc . ob_gov'
                         'cry . liq'
                         'tab1 . tab2' 
                         'tab3 . tab4';
    grid-template-columns: 45% 10% 45%; 
    grid-template-rows: 5% 50% 50% 50% 50% 50%;                                                 
    grid-area : tabelle;
    grid-gap: 5% 0%;
}

.home2{
    grid-area:cont;
    display : grid;
    grid-template-areas : 
        'ind_risk'
        'graph'
        'graph';
    grid-template-rows: 20% 70% 10%;
    grid-template-columns: 100%;
    }

#perf_riquadri{
    display: grid;
    grid-area: riquadri;
}

.riquadri2{
    grid-area: riquadri;
    display: grid;
    grid-template-areas:
        'tot tax'
        'az materie'
        'soc gov'
        'crypto liq';
    grid-template-columns: 50% 50%;
    grid-template-rows: 25% 25% 25% 25%;
    grid-gap : 2%;
}

.tot2 {
    grid-area: tot;
    text-align: left;
    padding-top : 7%;
    padding-left : 3%;
}

.tot_incipit{
    display:flex;
    display: grid;
    grid-template-areas:
        'titolo legend .';
    grid-template-columns: 30% 10% 60%;
}

.tot_div{
    grid-area: legend;
    height: 15%;
    margin-top: auto;
    margin-bottom: auto;
}

#tot_titolo{
    grid-area: titolo
}

.az_incipit{
    display:flex;
    display: grid;
    grid-template-areas:
        'titolo legend .';
    grid-template-columns: 30% 10% 60%;
}

.az_div{
    grid-area: legend;
    height: 15%;
    margin-top: auto;
    margin-bottom: auto;
}

#az_titolo{
    grid-area: titolo
}

.ct_incipit{
    display:flex;
    display: grid;
    grid-template-areas:
        'titolo legend .';
    grid-template-columns: 55% 10% 30%;
}

.ct_div{
    background-color:white;
    grid-area: legend;
    height: 15%;
    margin-top: auto;
    margin-bottom: auto;
}

#ct_titolo{
    grid-area: titolo
}

.mp_incipit{
    display:flex;
    display: grid;
    grid-template-areas:
        'titolo legend .';
    grid-template-columns: 60% 10% 30%;
}

.mp_div{
    grid-area: legend;
    height: 15%;
    margin-top: auto;
    margin-bottom: auto;
}

#mp_titolo{
    grid-area: titolo
}

.gov_incipit{
    display:flex;
    display: grid;
    grid-template-areas:
        'titolo legend .';
    grid-template-columns: 75% 10% 15%;
}

.gov_div{
    grid-area: legend;
    height: 15%;
    margin-top: auto;
    margin-bottom: auto;
}

#gov_titolo{
    grid-area: titolo
}

.soc_incipit{
    display:flex;
    display: grid;
    grid-template-areas:
        'titolo legend .';
    grid-template-columns: 65% 10% 25%;
}

.soc_div{
    grid-area: legend;
    height: 15%;
    margin-top: auto;
    margin-bottom: auto;
}

#soc_titolo{
    grid-area: titolo
}

.liq_incipit{
    display:flex;
    display: grid;
    grid-template-areas:
        'titolo legend .';
    grid-template-columns: 40% 10% 50%;
}

.liq_div{
    grid-area: legend;
    height: 15%;
    margin-top: auto;
    margin-bottom: auto;
}

#liq_titolo{
    grid-area: titolo
}

.cry_incipit{
    display:flex;
    display: grid;
    grid-template-areas:
        'titolo legend .';
    grid-template-columns: 50% 10% 40%;
}

.cry_div{
    grid-area: legend;
    height: 15%;
    margin-top: auto;
    margin-bottom: auto;
}

#cry_titolo{
    grid-area: titolo
}

.tot2:hover {
    cursor: pointer;
}

.ct2 {
    grid-area: tax;
    text-align: left;
    padding-top : 7%;
    padding-left : 3%;
}

.ct2:hover{
    cursor : pointer;
}

.az2 {
    grid-area: az;
    text-align: left;
    padding-top : 7%;
    padding-left : 3%;
}

.az2:hover{
    cursor : pointer;
}

.materie2 {
    grid-area: materie;
    text-align: left;
    padding-top : 7%;
    padding-left : 3%;
}

.materie2:hover{
    cursor : pointer;
}

.crypto2 {
    grid-area: crypto;
    text-align: left;
    padding-top : 7%;
    padding-left : 3%;
}

.crypto2:hover{
    cursor : pointer;
}

.soc2 {
    grid-area: soc;
    text-align: left;
    padding-top : 7%;
    padding-left : 3%;    
    display: inline;
}

.soc2:hover{
    cursor : pointer;
}

.gov2 {
    grid-area: gov;
    text-align: left;
    padding-top : 7%;
    padding-left : 3%;    
}

.gov2:hover{
    cursor : pointer;
}

.liq2 {
    grid-area: liq;
    text-align: left;
    padding-top : 7%;
    padding-left : 3%;
}

.liq2:hover{
    cursor : pointer;
}

#perf_grafico{
    display: grid;
    grid-area : grafico;
    grid-template-areas :
        '.' 
        'scatter';
        '.';
    grid-template-rows: 7.5% 85% 7.5%;
}

#perf_scatter{
    grid-area : scatter;
}

/*@media only screen and (max-width: 480px) and (max-height: 812px){

#frame{
    margin-top: 5%;
}

._dash-loading-callback::after {
    top: 5%;
    left: 0%;
  }

.container{
    width: 80%;    
    height: 80vh;
    grid-template-areas: 'input' 
                          'over_cont';
    grid-template-rows: 50% 50%;
    grid-template-columns: 100%;
}

.container_free{
    width: 80%;    
    height: 80vh;
    grid-template-areas: 'input' 
                          'over_cont';
    grid-template-rows: 100% 0%;
    grid-template-columns: 100%;
}

.indicator_2{
    margin-top: 0;
}

.claim{
    height:850%;
    margin-top:20%
}
.form {
    display: grid;
    grid-template-areas:
        'tit'
        'user'
        'pwd'
        'error'
        'btn'
        'link'
        '.';
    grid-template-rows: 30% 13% 13% 12% 15% 10% 10%;
    grid-template-columns:100%;
}
.form2{
 display:grid;
 grid-template-areas: 
     'tit'
     'user'
     'pwd_old'
     'pwd_new'
     'error'
     'btn'
     'link'
     '.';
    grid-template-rows: 30% 13% 13% 13% 3% 10% 10% 8%;
}
#pwd-box {
    grid-area: pwd;
    margin-top: 5%;
    }
#navigation, #nav2, .navbar, .nav, .navbar, .navbar-expand-md, .navbar-light, .bg-light, .fixed-top, .nav-link{
width:100%;
display:flex;
}
.nav-link{
width:20%;
font-size:.5rem;
}

.tit{
font-size: .8rem;
}
.indicator_1 {
    grid-area : indicator_1;
    display : grid;
    grid-template-areas : 
        'indicator_graph_1';
     grid-template-rows: 100%;
     grid-template-columns: 100%;
} 
.ghost2{
    margin-top: -7%;
    padding: 5px 45px;
}
.card-body{
    padding: 0rem 0rem !important;
    margin-top: 5%;
}
.update {
    margin-top: 4.5% !important;
}
.update2 {
    margin-top: 6% !important;
}
.theBody{
    display : grid;
    grid-template-areas : 
        'menu'
        'cont';
     grid-template-rows:5% 95%;
    grid-template-columns: 100%;
    height:100vh;
    width:100vw;
}
#2, #hub_nav2, #risk_nav2, #perf_nav2, #ptf_nav2, #out_nav2{
    background-color : rgba(0,0,0,0);
    font-family: 'Barlow', sans-serif;
    font-size: 1.1rem;
    width:100%;
}
.navi{
    margin-top:0;
    margin-bottom:auto;
    background-color: #E35925;
}
.hub_image, .ret_image, .ptf_image{
    width:100%;
    height:100%;
}
.risk_image{
    width:130%;
    height:130%;
    margin-left:-15%;
    margin-top: auto;
    margin-bottom: auto;
}
.account_image{
    width:140%;
    height:120%;
    margin-left:-20%;
}
.navi, .nav, .flex-column{
    text-align:  left;
    background-color: grey !important;
    height:100%;
}
.home{
    grid-area:cont;
    display : grid;
    grid-template-areas : 
        'ind_risk'
        'graph'
        'disclaimer';
    grid-template-rows: 15% 60% 15%;
    grid-template-columns: 100%;
    }
.graph {
    grid-area : graph;
    display : grid;
    grid-template-areas : 
        '.'
        'numbers'
        'pl'
        'up';
    grid-template-columns: 100%;
    grid-template-rows: 5% 20% 65% 10%;
}
.ind_risk {
    display : grid;
    grid-area : ind_risk;
    grid-template-areas : 
        'indicator_1 risk';
     border-bottom:1px solid grey;
    grid-template-rows: 100%;
    grid-template-columns: 35% 65%;
}
.tit{
margin-left: 15%;
margin-top: 11%;
}
#home_fig {
    height: 100%;
}
.risk {grid-area : risk;
        display : grid;
    grid-template-areas :
        '.' 
        'scomp_risk'
        '.';
    grid-template-rows: 0% 100% 0%;
    grid-template-columns: 100%;
    vertical-align: middle;
}
#risk_graph{
margin-left:-2.5%;
}
.date_home{
grid-area : date;
display:none;
}
.btn_home{
grid-area : btn;
margin-left : auto;
margin-right: auto;
}
.btn{
font-size:.8rem;
}
p{
font-size: .5rem;
}
.input_home{
    display : grid;
    grid-template-areas : 
        '. . .'
        'title . btn'
        '. . .';
    grid-area:input;
    grid-template-columns: 10% 15% 75%;
    grid-template-rows: 5% 80% 5%;
}
#error {
  font-size: 4rem;
}
Code Font Size
#code {
  font-size: 4rem;
}
.link_reset{
    grid-area: link;
    margin-top: -5%;
    font-family: 'Barlow', sans-serif;
    font-size: 80%;
}
#collapse_pwd{
    grid-area: error;
    background-color: rgba(0,0,0,0);
    margin-top:-5%;
}
#collapse_user{
    grid-area: error;
    background-color: rgba(0,0,0,0);
    margin-top:-5%;
}
input{
    border-radius: 0px;
}
#reset-button{
    grid-area:btn;
    margin-top: 10%;
}
.link_reset2{
    grid-area: link;
    margin-top: 15%;
    font-size: 80%;
}
#collapse_reset_pwd{
    grid-area: error;
    background-color: rgba(0,0,0,0);
    margin-top:-2%;
}
#collapse_reset_done{
    grid-area: error;
    background-color: rgba(0,0,0,0);
    margin-top:-2%;
}
#collapse_reset_user{
    grid-area: error;
    background-color: rgba(0,0,0,0);
    margin-top:-2%;
}
#collapse_reset_missing{
    grid-area: error;
    background-color: rgba(0,0,0,0);
    margin-top:-2%;
}
 
#risk_graph {
    grid-area: scomp_risk;
    height: 40%;
    margin-left: -2.5%;
    margin-top: 25%;
}

}


@media only screen and (min-width: 640px) and (max-width: 812px) and (max-height: 375px) {
  
  #frame{
    margin-top: 5%;
  }

  .theBody{
      display:grid;
      grid-template-areas: 'navigation home';
      grid-template-columns: 15% 85%;
      grid-template-rows: 100%;
      height: 100vh;
  }
  
  .disclaimer {
    margin-top: 3%;
}
  
  .pl {
    grid-area: pl;
    display: grid;
    grid-template-areas:
        'input'
        'scatter';
    grid-template-columns: 100%;
    grid-template-rows: 15% 85%;
}
  .home {
    grid-area: cont;
    display: grid;
    grid-template-areas:
        'ind_risk'
        'graph'
        'disclaimer';
    grid-template-rows: 20% 63% 17%;
    grid-template-columns: 100%;
}
  .tit{
      font-size: 1rem;
      margin-top: 0%;
  }
  .update{
      font-size: .5rem;
      margin-top: 2% !important;
      margin-left: .75% !important;
      margin-bottom: 0;
  }
  #home_date{
      display:none !important;
  }
  .btn{
      font-size: .8rem !important;
  }
  .home{
      grid-area: home;
  }
  #navigation{
      grid-area: navigation;
      margin-left:0;
      display:grid;
  }
  #navigation, .navbar, .nav, .navbar, .navbar-expand-md, .navbar-light, .bg-light, .fixed-top, .nav-link {
      width: 100%;
      margin: 0 0;
      height: 100%;
  }
  .disclaimer2{
      font-size: .5rem;
      margin-top: 0 !important;
      margin-left: .75% !important;
  }
  #home_fig {
    height: 100%;
  }
  .graph {
    grid-area: graph;
    display: grid;
    grid-template-areas:
        '. .'
        'numbers pl'
        'up up';
    grid-template-columns: 30% 70%;
    grid-template-rows: 2% 90% 8%;
}
    .ind_risk {
    display: grid;
    grid-area: ind_risk;
    grid-template-areas:
        'indicator_1 risk .'
        '. . .';
    border-bottom: 1px solid grey;
    grid-template-columns: 30% 68% 2%;
    grid-template-rows: 95% 5%;
}
    .input_home{
    display : grid;
    grid-template-areas : 
        '. . .'
        'title . btn'
        '. . .';
    grid-area:input;
    grid-template-columns: 10% 20% 70%;
    grid-template-rows: 5% 80% 5%;
    }
  .btn_home{
      margin-top: 0% !important;
  }
  .indicator_2{
      margin-top: -2%;
      margin-left: 2%;
  }
  .indicator_2 {
    grid-area: numbers;
    grid-template-areas:
        'indi2';
    grid-template-rows: 100%;
    grid-template-columns: 100%;
}
  #navigation { 
      width : 30% !important;
  }
  .disclaimer1{
      font-size: .5rem;
      margin-top: 0 !important;
      margin-bottom: 0 !important;
      margin-left: .75% !important;
  }
  .risk {grid-area : risk;
        display : grid;
    grid-template-areas : 
        'scomp_risk'
        '.';
    grid-template-rows: 97% 3%;
    grid-template-columns: 100%;
}
.indicator_1 {
    grid-area: indicator_1;
    display: grid;
    grid-template-areas:
        'indicator_graph_1'
        '.';
    grid-template-rows: 85% 15%;
}
#risk_graph{
    grid-area: scomp_risk;
    height:110%;
    margin-left:-2.5%;
    margin-top: 0%;
}
  .container {
    background-color: rgba(0,0,0,0);
    border-radius: 10px;
    box-shadow: 0 14px 28px rgb(0 0 0 / 25%), 0 10px 10px rgb(0 0 0 / 22%);
    position: relative;
    overflow: hidden;
    height: 100vh;
    width: 110%;
    padding-right: 0;
    padding-left: 0;
    margin-right: auto;
    margin-left: -13.5%;
}
.container_free {
    background-color: rgba(0,0,0,0);
    border-radius: 10px;
    box-shadow: 0 14px 28px rgb(0 0 0 / 25%), 0 10px 10px rgb(0 0 0 / 22%);
    position: relative;
    overflow: hidden;
    height: 100vh;
    width: 110%;
    padding-right: 0;
    padding-left: 0;
    margin-right: auto;
    margin-left: -13.5%;
}
    .link_reset {
    grid-area: link;
    margin-top: 0%;
    font-family: 'Barlow', sans-serif;
    font-size: 0.8rem;
}
    #login-button {
    grid-area: btn;
    margin-top: 0%;
    padding: 0 0 !important;
}
    #uname-box{
        border-radius: 0;
    }
    #pwd-box {
    grid-area: pwd;
    margin-top: 5%;
    border-radius: 0;
}
    #collapse_pwd {
    grid-area: error;
    background-color: rgba(0,0,0,0);
    margin-top: 3%;
}
    #collapse_user {
    grid-area: error;
    background-color: rgba(0,0,0,0);
    margin-top: 5%;
}
    #reset-button {
    grid-area: btn;
    margin-top: 0%;
}
    .ghost2{
        padding: 0 0;
    }
    .link_reset2 {
    grid-area: link;
    margin-top: 4%;
    font-family: 'Barlow', sans-serif;
    font-size: 0.8rem;
}
    #uname-reset-box{
    border-radius:0;    
    }
    #pwd-old-reset-box{
    border-radius:0;
    }
   
#pwd-new-reset-box{
    border-radius:0;
    }
    .form {
    display: grid;
    grid-template-areas:
        'tit'
        'user'
        'pwd'
        'error'
        'btn'
        'link'
        '.';
    grid-template-rows: 40% 10% 10% 8% 10% 10% 15%;
}
    .form2 {
    display: grid;
    grid-template-areas:
        'tit'
        'user'
        'pwd_old'
        'pwd_new'
        'error'
        'btn'
        'link'
        '.';
    grid-template-rows: 30% 10% 10% 10% 8% 10% 5% 20%;
}
    #collapse_reset_pwd {
    grid-area: error;
    background-color: rgba(0,0,0,0);
    margin-top: 2%; 
}
    #collapse_reset_user {
    grid-area: error;
    background-color: rgba(0,0,0,0);
    margin-top: 2%; 
}
    #collapse_reset_missing {
    grid-area: error;
    background-color: rgba(0,0,0,0);
    margin-top: 2%; 
}
    #collapse_reset_done{
    grid-area: error;
    background-color: rgba(0,0,0,0);
    margin-top: 2%; 
}
}
@media (min-width: 768px){
    .container,.container_free, .container-md, .container-sm {
         max-width: none;
    }
}
@media (min-width: 576px){
    .container,.container_free .container-sm {
        max-width: none; 
    }
}

@media (min-width: 320px) and (max-width: 374px) and (max-height: 422px){

    .container {
    width: 80%;
    height: 90vh;
    grid-template-areas:
        'input'
        'over_cont';
    grid-template-rows: 50% 50%;
    grid-template-columns: 100%;
}
 .container_free {
    width: 80%;
    height: 90vh;
    grid-template-areas:
        'input'
        'over_cont';
    grid-template-rows: 100% 0%;
    grid-template-columns: 100%;
}
    .link_reset{
        font-size: 80%;
        margin-top:0%;
    }
    .ghost2 {
    margin-top: 0%;
}
    .form{
    padding: 0 30px;
    }
    #login-button {
    grid-area: btn;
    margin-top: 0%;
}
    .form {
    display: grid;
    grid-template-areas:
        'tit'
        'user'
        'pwd'
        'error'
        'btn'
        'link'
        '.';
    grid-template-rows: 30% 13% 13% 17% 15% 10% 5%;
    grid-template-columns: 100%;
}
    #collapse_user, #collapse_pwd{
    margin-top: -1%;
    }
    .image {
    width: 100%;
    margin-left: 0%;
}

    .form2 {
    display: grid;
    grid-template-areas:
        'tit'
        'user'
        'pwd_old'
        'pwd_new'
        'error'
        'btn'
        'link';
    grid-template-rows: 30% 13% 13% 13% 13% 10% 10%;
}
    #reset-button {
    grid-area: btn;
    margin-top: 0%;
}
    .ghost2 {
    padding: 1px 45px;
}
    .form2{
    padding: 0 30px;
    }
    .link_reset2 {
    font-size: 80%;
    margin-top: 0%;
}

    #collapse_reset_user, #collapse_reset_pwd {
    margin-top: -5%;
}

    .nav-link {
    width: 19.8%;
    font-size: .4rem;
}
    #navigation, .navbar, .nav, .navbar, .navbar-expand-md, .navbar-light, .bg-light, .fixed-top{
    width: 100%;
    margin-left:0;
    padding-top:0;
}
    .home {
    grid-area: cont;
    display: grid;
    grid-template-areas:
        'ind_risk'
        'graph'
        'disclaimer';
    grid-template-rows: 15% 65% 10%;
    grid-template-columns: 100%;
    margin-top: 5%;
}
    .risk {
    grid-area: risk;
    display: grid;
    grid-template-areas:
        'scomp_risk';
    grid-template-rows: 100%;
    grid-template-columns: 100%;
    vertical-align: middle;
}
.ind_risk {
    display: grid;
    grid-area: ind_risk;
    grid-template-areas: 'indicator_1 risk';
    border-bottom: 1px solid white;
    grid-template-rows: 100%;
    grid-template-columns: 40% 60%;
}
    #risk_graph {
    grid-area: scomp_risk;
    height: 75%;
    margin-left: -2.5%;
    margin-top: 15%;
}
    .update {
    margin-top: 2% !important;
}
    .graph {
    grid-area: graph;
    display: grid;
    grid-template-areas:
        '.'
        'numbers'
        'pl'
        'up';
    grid-template-columns: 100%;
    grid-template-rows: 0% 30% 60% 10%;
}
    .btn {
    font-size: .5rem;
}
    #indi2 {
    height: 110% !important;
    margin-top: 1%;
}
    .indicator_2 {
    grid-area: numbers;
    grid-template-areas:
        'indi2'
        'update';
    grid-template-rows: 100% 0%;
    grid-template-columns: 100%;
}
    .scatter {
    grid-area: scatter;
    height: 90%;
    margin-top: 4%;
}
    p {
    margin-top: 0;
    margin-bottom: 0; 
    }
    
    .container {
    margin-top : -5%;
    }

    .container_free {
    margin-top : -5%;
    }
    
    a{
    margin : 0 0;
    }
 }
     
@media (min-width: 375px) and (max-width: 424px) and (max-height: 422px){
    
    .container {
    width: 80%;
    height: 90vh;
    grid-template-areas:
        'input'
        'over_cont';
    grid-template-rows: 50% 50%;
    grid-template-columns: 100%;
    margin-top: -9%;
}

   .container_free {
    width: 80%;
    height: 90vh;
    grid-template-areas:
        'input'
        'over_cont';
    grid-template-rows: 100% 00%;
    grid-template-columns: 100%;
    margin-top: -9%;
}
    .ghost2 {
    margin-top: 2% !important; 
    padding: 1px 45px;
}
    .link_reset, .link_reset2 {
    font-size: 80%;
    margin-top: 5%;
}

    .link_reset2 {
    margin-top: 9%;
    }
    
    .form {
    display: grid;
    grid-template-areas:
        'tit'
        'user'
        'pwd'
        'error'
        'btn'
        'link'
        '.';
    grid-template-rows: 30% 13% 13% 17% 15% 10% 5%;
    grid-template-columns: 100%;
}
    #collapse_user, #collapse_pwd {
    margin-top: 0%;
}
    .form2 {
    display: grid;
    grid-template-areas:
        'tit'
        'user'
        'pwd_old'
        'pwd_new'
        'error'
        'btn'
        'link'
        '.';
    grid-template-rows: 30% 13% 13% 13% 11% 10% 10% 0%;
}
    #collapse_reset_user, #collapse_reset_pwd {
    margin-top: -5%;
}
    .home {
    grid-area: cont;
    display: grid;
    grid-template-areas:
        'ind_risk'
        'graph'
        'disclaimer';
    grid-template-rows: 15% 65% 15%;
    grid-template-columns: 100%;
    margin-top: 9%;
}
    .risk {
    grid-area: risk;
    display: grid;
    grid-template-areas:
        '.'
        'scomp_risk'
        '.';
    grid-template-rows: 0% 100% 0%;
    grid-template-columns: 100%;
    vertical-align: middle;
}
    #risk_graph {
    grid-area: scomp_risk;
    height: 80%;
    margin-left: -2.5%;
    margin-top: 9%;
}
    .indicator_chart_1 {
    margin-top: -7%;
}
    .update {
    margin-top: 2.5% !important;
    margin-left: 1.7%;
}

    .disclaimer{
    margin-left: 1.7%;
    }
    
    p {
    margin-bottom: 0; 
}
    #indi2 {
    height: 110% !important;
    margin-top: 0%;
}
    .scatter {
    grid-area: scatter;
    height: 100%;
    margin-top: 2%;
}

    .btn {
    font-size: .7rem;
}

    .graph {
    grid-area: graph;
    display: grid;
    grid-template-areas:
        '.'
        'numbers'
        'pl'
        'up';
    grid-template-columns: 100%;
    grid-template-rows: 0% 30% 60% 10%;
}
}
   
@media (min-width: 321px) and (max-width: 360px) and (min-height: 569px) and (max-height: 640px){

._dash-loading-callback::after {
    top: 5%;
    left: 0%;
  }
  
.container {
    width: 80%;
    height: 90vh;
    grid-template-areas:
        'input'
        'over_cont';
    grid-template-rows: 50% 50%;
    grid-template-columns: 100%;
}

.container_free {
    width: 80%;
    height: 90vh;
    grid-template-areas:
        'input'
        'over_cont';
    grid-template-rows: 100% 0%;
    grid-template-columns: 100%;
}
    .link_reset, .link_reset2{
        font-size: .8rem;
    }
    .link_reset2{
        margin-top: 15% !important;
    }
    .form2 {
    display: grid;
    grid-template-areas:
        'tit'
        'user'
        'pwd_old'
        'pwd_new'
        'error'
        'btn'
        'link'
        '.';
    grid-template-rows: 30% 13% 13% 13% 7% 10% 10% 4%;
}
    #collapse_reset_user, #collapse_reset_pwd {
    margin-top: -4%;
}
    .risk {
    grid-area: risk;
    display: grid;
    grid-template-areas:
        '.'
        'scomp_risk'
        '.';
    grid-template-rows: 0% 100% 0%;
    grid-template-columns: 100%;
    vertical-align: middle;
}
    #risk_graph {
    grid-area: scomp_risk;
    height: 50%;
    margin-left: -2.5%;
    margin-top: 20%;
}
    .graph {
    grid-area: graph;
    display: grid;
    grid-template-areas:
        '.'
        'numbers'
        'pl'
        'up';
    grid-template-columns: 100%;
    grid-template-rows: 0% 25% 70% 5%;
}
    .update {
    margin-top: 1% !important;
    margin-left: 1.7%;
}
    .disclaimer1, .disclaimer2{
        margin-left: 1.7%;
    }
    #indi2{
    height: 100% !important;
        margin-top: 0;
    }
    p {
    margin-top: 0;
    margin-bottom: 0;
}
    .pl {
    grid-area: pl;
    display: grid;
    grid-template-areas:
        'input'
        'scatter';
    grid-template-columns: 100%;
    grid-template-rows: 10% 90%;
}
    .btn {
    font-size: .65rem;
    padding-bottom: none !important;
    padding-top: none !important;
}
}
      
@media (max-width: 320px) and (max-height: 568px){
    
    .form, .form2 {
    padding: 0 30px !important;
}
    #collapse_user, #collapse_pwd {
    margin-top: -7%;
}
}
    
@media (min-width: 361px) and (max-width: 375px) and (min-height : 641px) and (max-height: 667px){

    #collapse_user, #collapse_pwd {
    margin-top: -7%;
}

    ._dash-loading-callback::after {
    top: 5%;
    left: 0%;
  }
  
    .container {
    width: 80%;
    height: 90vh;
    grid-template-areas:
        'input'
        'over_cont';
    grid-template-rows: 50% 50%;
    grid-template-columns: 100%;
}

    .container_free {
    width: 80%;
    height: 90vh;
    grid-template-areas:
        'input'
        'over_cont';
    grid-template-rows: 100% 00%;
    grid-template-columns: 100%;
}
    .link_reset, .link_reset2 {
    font-size: 80%;
}
    .link_reset2{
    margin-top: 15% !important;
    }
    #collapse_reset_pwd, #collapse_reset_user{
    margin-top: -4%;
    }
    .risk {
    grid-area: risk;
    display: grid;
    grid-template-areas:
        '.'
        'scomp_risk'
        '.';
    grid-template-rows: 0% 100% 0%;
    grid-template-columns: 100%;
    vertical-align: middle;
}
    #risk_graph {
    height: 45%;
    margin-top: 21.5%;
}
    .graph {
    grid-area: graph;
    display: grid;
    grid-template-areas:
        '.'
        'numbers'
        'pl'
        'up';
    grid-template-columns: 100%;
    grid-template-rows: 3% 22% 65% 10%;
}
    #indi2{
    height : 100% !important;
    }
    p {
    margin-top: 0;
    margin-bottom: 0;
}
    .update {
    margin-top: 3.5% !important;
}
}

@media (min-width: 376px) and (max-width: 414px) and (min-height: 667px) and (max-height: 736px){
    
    ._dash-loading-callback::after {
    top: 5%;
    left: 0%;
  }
    
    .container {
    width: 80%;
    height: 80vh;
    grid-template-areas:
        'input'
        'over_cont';
    grid-template-rows: 50% 50%;
    grid-template-columns: 100%;
    margin-top : -3%;
}
  .container_free {
    width: 80%;
    height: 80vh;
    grid-template-areas:
        'input'
        'over_cont';
    grid-template-rows: 100% 0%;
    grid-template-columns: 100%;
    margin-top : -3%;
}
    .link_reset, .link_reset2 {
    font-size: 80%;
}
    #collapse_user, #collapse_pwd {
    margin-top: -7%;
}   
    .link_reset2 {
    margin-top: 15% !important;
}
    #collapse_reset_user, #collapse_reset_pwd {
    margin-top: -3%;
}
    .risk {
    grid-area: risk;
    display: grid;
    grid-template-areas:
        '.'
        'scomp_risk'
        '.';
    grid-template-rows: 0% 100% 0%;
    grid-template-columns: 100%;
    vertical-align: middle;
}
    #risk_graph {
    height: 40%;
    margin-top: 22%;
}
    #indi2{
    height : 100% !important;
    }
    .update {
    margin-top: 3.5% !important;
}

    .graph {
    grid-area: graph;
    display: grid;
    grid-template-areas:
        '.'
        'numbers'
        'pl'
        'up';
    grid-template-columns: 100%;
    grid-template-rows: 0% 25% 65% 10%;
}
    .indicator_2 {
    grid-area: numbers;
    grid-template-areas:
        'indi2'
        'update';
    grid-template-rows: 95% 5%;
    grid-template-columns: 100%;
    margin-top: 0%;
    }
}
  
@media only screen and (max-width: 480px) and (min-height:813px) and (max-height: 873px){
  
  #performance {
    grid-area: graph;
    display: grid;
    grid-template-areas:
        'butn butn'
        '. .'
        'grafico grafico'
        '. .'
        'riquadri riquadri'
        '. .'
        'tabelle tabelle';
    grid-template-columns: 50% 50%;
    grid-template-rows: 5% 3% 50% 3% 33% 3% 63%;
}

.tot_incipit {
    grid-template-columns: 45% 10% 45%;
}

.az_incipit {
    grid-template-columns: 45% 10% 45%
}

.cry_incipit {
    grid-template-columns: 75% 10% 15%;
}

.liq_incipit {
    grid-template-columns: 60% 10% 30%;
}

.home2{
    grid-template-rows: 13% 70% 25%;
    }

#decisione{
    grid-template-rows: 15% 10% 50% 10% 15%;
    grid-template-columns: 0% 30% 25% 45%;
}

#tot_perf {
    justify-content: left !important;
}

#ct_perf {
    justify-content: left !important;
}

#az_perf {
    justify-content: left !important;
}

#mp_perf {
    justify-content: left !important;
}

#soc_perf {
    justify-content: left !important;
}

#gov_perf {
    justify-content: left !important;
}

#cry_perf {
    justify-content: left !important;
}

#liq_perf {
    justify-content: left !important;
}

.riquadri2 {
    grid-area: riquadri;
    display: grid;
    grid-template-areas:
        'tot tax az'
        'materie soc gov'
        'crypto liq .';
    grid-template-columns: 33% 33% 33%;
    grid-template-rows: 33% 33% 33%;
    grid-gap: 2%;
}

#perf_tabelle {
    border-top: 1px solid grey;
    display: grid;
    grid-template-areas:
        '.'
        'az'
        'mp'
        'ob_soc'
        'ob_gov'
        'cry'
        'liq'
        'tab1'
        'tab2'
        'tab3'
        'tab4';
    grid-template-columns: 100%;
    grid-area: tabelle;
    grid-gap: 5%
}	

  #frame{
    margin-top: 5%;
  }

    ._dash-loading-callback::after {
    top: 5%;
    left: 0%;
  }
    body {
    min-height: 500px;
}
.container{
    width: 80%;    
    height: 90vh;
    grid-template-areas: 'input' 
                          'over_cont';
    grid-template-rows: 50% 50%;
    grid-template-columns: 100%;
}
.container_free{
    width: 80%;    
    height: 90vh;
    grid-template-areas: 'input' 
                          'over_cont';
    grid-template-rows: 100% 00%;
    grid-template-columns: 100%;
}
.image{
    width:170%;
    margin-left:-35%;
}
.claim{
    height:850%;
    margin-top:20%
}
.form {
    display: grid;
    grid-template-areas:
        'tit'
        'user'
        'pwd'
        'error'
        'btn'
        'link'
        '.';
    grid-template-rows: 30% 13% 13% 12% 15% 10% 10%;
    grid-template-columns:100%;
}
.form2{
 display:grid;
 grid-template-areas: 
     'tit'
     'user'
     'pwd_old'
     'pwd_new'
     'error'
     'btn'
     'link'
     '.';
    grid-template-rows: 30% 13% 13% 13% 3% 10% 10% 8%;
}
#pwd-box {
    grid-area: pwd;
    margin-top: 5%;
    }
#navigation, #nav2, .navbar, .nav, .navbar, .navbar-expand-md, .navbar-light, .bg-light, .fixed-top, .nav-link{
width:100%;
display:flex;
}
.nav-link{
width:16.6%;
font-size:.5rem;
}
.tit{
font-size: .8rem;
}
.indicator_1 {
    grid-area : indicator_1;
    display : grid;
    grid-template-areas : 
        'indicator_graph_1';
     grid-template-rows: 100%;
     grid-template-columns: 100%;
} 
.ghost2{
    margin-top: -7%;
    padding: 5px 45px;
}
.card-body{
    padding: 0rem 0rem !important;
    margin-top: 5%;
}
.update {
    margin-top: 6% !important;
}
.update2 {
    margin-top: 6% !important;
}
.theBody{
    display : grid;
    grid-template-areas : 
        'menu'
        'cont';
     grid-template-rows:5% 95%;
    grid-template-columns: 100%;
    height:100vh;
    width:100vw;
}
#home_private2, #hub_nav2, #risk_nav2, #perf_nav2, #ptf_nav2, #out_nav2{
    background-color : rgba(0,0,0,0);
    font-family: 'Barlow', sans-serif;
    font-size: 1.1rem;
    width:100%;
}
.navi{
    margin-top:0;
    margin-bottom:auto;
    background-color: #E35925;
}
.hub_image, .ret_image, .ptf_image{
    width:100%;
    height:100%;
}
.risk_image{
    width:130%;
    height:130%;
    margin-left:-15%;
    margin-top: auto;
    margin-bottom: auto;
}
.account_image{
    width:140%;
    height:120%;
    margin-left:-20%;
}
.navi, .nav, .flex-column{
    text-align:  left;
    background-color: grey !important;
    height:100%;
}
.home{
    grid-area:cont;
    display : grid;
    grid-template-areas : 
        'ind_risk'
        'graph'
        'disclaimer';
    grid-template-rows: 15% 60% 15%;
    grid-template-columns: 100%;
    }
.graph {
    grid-area : graph;
    display : grid;
    grid-template-areas : 
        '.'
        'numbers'
        'pl'
        'up';
    grid-template-columns: 100%;
    grid-template-rows: 5% 20% 65% 10%;
}
.ind_risk {
    display : grid;
    grid-area : ind_risk;
    grid-template-areas : 
        'indicator_1 risk';
     border-bottom:1px solid white;
    grid-template-rows: 100%;
    grid-template-columns: 35% 65%;
}
.tit{
margin-left: 15%;
margin-top: 11%;
}
#home_fig {
    height: 100%;
}
.risk {grid-area : risk;
        display : grid;
    grid-template-areas :
        '.' 
        'scomp_risk'
        '.';
    grid-template-rows: 53% 42% 5%;
    grid-template-columns: 100%;
    vertical-align: middle;
}
#risk_graph{
margin-left:-2.5%;
}
.date_home{
grid-area : date;
display:none;
}
.btn_home{
grid-area : btn;
margin-left : auto;
margin-right: auto;
}
.btn{
font-size:.8rem;
}
p{
font-size: .5rem;
}
.input_home{
    display : grid;
    grid-template-areas : 
        '. . .'
        'title . btn'
        '. . .';
    grid-area:input;
    grid-template-columns: 10% 15% 75%;
    grid-template-rows: 5% 80% 5%;
}
#error {
  font-size: 4rem;
}
Code Font Size
#code {
  font-size: 4rem;
}
.link_reset{
    grid-area: link;
    margin-top: -5%;
    font-family: 'Barlow', sans-serif;
    font-size: 1.1rem;
}
#collapse_pwd{
    grid-area: error;
    background-color: rgba(0,0,0,0);
    margin-top:-5%;
}
#collapse_user{
    grid-area: error;

background-color: rgba(0,0,0,0);
    margin-top:-5%;
}
input{
    border-radius: 0px;
}
#reset-button{
    grid-area:btn;
    margin-top: 10%;
}
.link_reset2{
    grid-area: link;
    margin-top: 15%;
}
#collapse_reset_pwd{
    grid-area: error;
    background-color: rgba(0,0,0,0);
    margin-top:-2%;
}
#collapse_reset_done{
    grid-area: error;
    background-color: rgba(0,0,0,0);
    margin-top:-2%;
}
#collapse_reset_user{
    grid-area: error;
    background-color: rgba(0,0,0,0);
    margin-top:-2%;
}
#collapse_reset_missing{
    grid-area: error;
    background-color: rgba(0,0,0,0);
    margin-top:-2%;
}
}
   
@media only screen and (max-width: 768px) and (min-height: 874px) and (max-height: 1024px){

   .theBody {
    display: grid;
    grid-template-areas:
        '. menu .'
        '. cont .';
    grid-template-rows: 5% 95%;
    grid-template-columns: 5% 90% 5%;
    height: 95vh;
    width: 100vw;
}
     .container{
    width: 80%;    
    height: 90vh;
    grid-template-areas: 'input' 
                          'over_cont';
    grid-template-rows: 50% 50%;
    grid-template-columns: 100%;
}

  .container_free{
    width: 80%;    
    height: 90vh;
    grid-template-areas: 'input' 
                          'over_cont';
    grid-template-rows: 100% 00%;
    grid-template-columns: 100%;
}
    .form {
    display: grid;
    grid-template-areas:
        'tit'
        'user'
        'pwd'
        'error'
        'btn'
        'link'
        '.';
    grid-template-rows: 40% 10% 10% 10% 10% 10% 13%;
}
#pwd-box {
    grid-area: pwd;
    margin-top: 0%; 
    font-size: 1.1rem;
}
#uname-box{
    font-size: 1.1rem;
}
#login-button {
    grid-area: btn;
    margin-top: 0%;
}
#collapse_user, #collapse_pwd {
    margin-top: -2%;
    font-size: 1.1rem;
}

.link_reset, .link_reset2{
    margin-top: 0%;
}

.form2 {
    display: grid;
    grid-template-areas:
        'tit'
        'user'
        'pwd_old'
        'pwd_new'
        'error'
        'btn'
        'link'
        '.';
    grid-template-rows: 40% 10% 10% 10% 10% 10% 10% 0%;
}
#reset-button {
    grid-area: btn;
    margin-top: 0%;
}
#collapse_reset_user, #collapse_reset_pwd {
    margin-top: -2%;
    font-size: 1.1rem;
}
#uname-reset-box, #pwd-old-reset-box, #pwd-new-reset-box{
    font-size: 1.1rem;
}
#navigation, .navbar, .nav, .navbar, .navbar-expand-md, .navbar-light, .bg-light, .fixed-top, .nav-link {
    width: 90%;
}
.home {
    grid-area: cont;
    display: grid;
    grid-template-areas:
        'ind_risk'
        'graph'
        'disclaimer';
    grid-template-rows: 15% 75% 10%;
    grid-template-columns: 100%;
}
.risk {
    grid-area: risk;
    display: grid;
    grid-template-areas:
        'ora'
        'scomp_risk'
        '.';
    grid-template-rows: 0% 100% 0%;
    grid-template-columns: 100%;
}
.input_home {
    display: grid;
    grid-template-areas:
        '. . .'
        'title . btn'
        '. . .';
    grid-area: input;
    grid-template-columns: 10% 10% 80%;
    grid-template-rows: 15% 70% 15%;
}
.date_home{
    display: none;
}
#indi2{
    height:100% !important;
    margin-top: .75%;
}
#risk_graph {
    height: 35%;
    margin-top: 18%;
}
.graph         info = 'all' 
        s = 1 
        template = '%{text}' 
        leg = dict( 
                orientation="h", 
                yanchor="bottom", 
                y=1.02, 
                xanchor="left", 
                x=-0.015, 
                font = dict(size=12)) 
        height = 8 
        xfont = 12 
        legenda = False 
        margin = go.Margin(l=0, 
                           b=0, 
                           r=0, 
                           t=20) 
        min_ = 0.011 
        max_ = 1.289
    grid-area: graph;
    display: grid;
    grid-template-areas:
        '. .'
        'numbers pl'
        'up up';
    grid-template-columns: 30% 70%;
    grid-template-rows: 0% 94% 6%;
}
.indicator_2 {
    grid-area: numbers;
    grid-template-areas:
        'indi2'
        'update';
    grid-template-rows: 55% 45%;
    grid-template-columns: 100%;
    margin-top: -32%;
}
.update {
    margin-top: -2% !important;
}
}
@media only screen and (min-width: 813px) and (max-width: 1024px) and (max-height: 768px){
     .container{
    width: 80%;    
    height: 90vh;
    grid-template-areas: 'input' 
                          'over_cont';
    grid-template-rows: 50% 50%;
    grid-template-columns: 100%;
}

.container_free{
    width: 80%;    
    height: 90vh;
    grid-template-areas: 'input' 
                          'over_cont';
    grid-template-rows: 100% 0%;
    grid-template-columns: 100%;
}
    .form {
    display: grid;
    grid-template-areas:
        'tit'
        'user'
        'pwd'
        'error'
        'btn'
        'link'
        '.';
    grid-template-rows: 40% 10% 10% 10% 10% 10% 13%;
}
    #pwd-box {
    margin-top: 0%; 
}
    #login-button {
    margin-top: 5%; 
}
    .link_reset{
    margin-top: 8% !important;
    }
    #collapse_user, #collapse_pwd {
    grid-area: error;
    background-color: rgba(0,0,0,0);
    margin-top: 2%;
}
    .ghost2 {
    padding: 6px 45px;
}
    .form2 {
    display: grid;
    grid-template-areas:
        'tit'
        'user'
        'pwd_old'
        'pwd_new'
        'error'
        'btn'
        'link'
        '.';
    grid-template-rows: 40% 10% 10% 10% 13% 10% 10% 0%;
}
    #reset-button {
    grid-area: btn;
    margin-top: -5%;
}
    .link_reset2 {
    grid-area: link;
    margin-top: -2% !important;
    font-family: 'Barlow', sans-serif;
    font-size: 1.1rem;
}
    #collapse_reset_user {
    grid-area: error;
    background-color: rgba(0,0,0,0);
    margin-top: -3%;
}
    .risk {
    grid-area: risk;
    display: grid;
    grid-template-areas:
        'ora'
        'scomp_risk'
        '.';
    grid-template-rows: 0% 100% 0%;
    grid-template-columns: 100%;
}
    #risk_graph {
    grid-area: scomp_risk;
    height: 34%;
    margin-left: -2.5%;
    margin-top: 18%;
}
    .input_home {
    display: grid;
    grid-template-areas:
        '. . .'
        'title . btn'
        '. . .';
    grid-area: input;
    grid-template-columns: 20% 5% 75%;
    grid-template-rows: 15% 70% 15%;
}
    .date_home{
    display: none;
    }
    #indi2 {
    height: 100% !important;
    margin-top: 2%;
}
    #home_fig {
    height: 100%;
}
    .update {
    margin-top: 1% !important;
}

    .indicator_2{
    margin-top: 0% !important;
    }
}

@media only screen and (min-width: 480px) and (max-width: 640px) and (max-height: 360px) {

.theBody {
    display: grid;
    grid-template-areas: 'navigation home';
    grid-template-columns: 15% 85%;
    grid-template-rows: 100%;
    height: 100vh;
}
#navigation, .navbar, .nav, .navbar, .navbar-expand-md, .navbar-light, .bg-light, .fixed-top, .nav-link {
    width: 90%;
    }
.input_home {
    display: grid;
    grid-template-areas:
        '. . .'
        'title . btn'
        '. . .';
    grid-area: input;
    grid-template-columns: 10% 10% 80%;
    grid-template-rows: 5% 80% 5%;
}
.graph {
    grid-area: graph;
    display: grid;
    grid-template-areas:
        '. .'
        'numbers pl'
        'up up';
    grid-template-columns: 30% 70%;
    grid-template-rows: 0% 92% 8%;
}
._dash-loading-callback::after {
    margin-left: 10%;
  }
  .link_reset2 {
    font-size: .8rem;
    }
    .form2, .form{
    padding: 0 20px;
}
}*/

@media only screen and (max-width:480px) and (orientation: portrait){ 

.Select-placeholder{
  margin-left: 9.75% !important;
  padding-left: 0% !important
}

.Select-menu-outer{
    margin-top : 0% !important;
}

#today{
    padding-bottom : 10% !important;
}

#performance {
    grid-area: graph;
    display: grid;
    grid-template-areas:
        'butn butn'
        '. .'
        'grafico grafico'
        '. .'
        'riquadri riquadri'
        '. .'
        'tabelle tabelle';
    grid-template-columns: 50% 50%;
    grid-template-rows: 5% 3% 50% 3% 33% 3% 63%;
}

.tot_incipit {
    grid-template-columns: 45% 10% 45%;
}

.az_incipit {
    grid-template-columns: 45% 10% 45%
}

.cry_incipit {
    grid-template-columns: 75% 10% 15%;
}

.liq_incipit {
    grid-template-columns: 60% 10% 30%;
}

.home2{
    grid-template-rows: 13% 70% 25%;
    }

#decisione{
    grid-template-rows: 15% 10% 50% 10% 15%;
    grid-template-columns: 0% 30% 0% 0%;
}

#tot_perf {
    justify-content: left !important;
}

#ct_perf {
    justify-content: left !important;
}

#az_perf {
    justify-content: left !important;
}

#mp_perf {
    justify-content: left !important;
}

#soc_perf {
    justify-content: left !important;
}

#gov_perf {
    justify-content: left !important;
}

#cry_perf {
    justify-content: left !important;
}

#liq_perf {
    justify-content: left !important;
}

.riquadri2 {
    grid-area: riquadri;
    display: grid;
    grid-template-areas:
        'tot tax az'
        'materie soc gov'
        'crypto liq .';
    grid-template-columns: 33% 33% 33%;
    grid-template-rows: 33% 33% 33%;
    grid-gap: 2%;
}

#perf_tabelle {
    border-top: 1px solid grey;
    display: grid;
    grid-template-areas:
        '.'
        'az'
        'mp'
        'ob_soc'
        'ob_gov'
        'cry'
        'liq'
        'tab1'
        'tab2'
        'tab3'
        'tab4';
    grid-template-columns: 100%;
    grid-area: tabelle;
    grid-gap: 5%
}

.row {
    margin-right: 0% !important;
    margin-left: 0% !important;
}

.tit_risk{
    font-size: 2.75vh;
}

.nav-link {
    width : 20% !important; 
}

.contr {
    font-size: 2vh;
    color: white !important;
}

.riquadri{
    background-color : rgba(0,0,0,0.3);
    border-bottom : none !important;
}

.title_scelta {
    grid-area: title_scelta;
    display: grid;
    grid-template-areas:
        '. . title .'
        'drop . title .';
    grid-template-columns: 20% 5% 70% 5%;
    gird-template-rows: 15% 85%;
}

.graph_ptf {
    grid-area: graph;
    display: grid;
    grid-template-areas:
        '. . .'
        'title_scelta title_scelta title_scelta'
        '. . .'
        'pie pie pie'
        '. . .'
        'riquadri riquadri riquadri'
        '. . .'
        'tb2 tb2 tb2';
    grid-template-columns: 75% 5% 20%;
    grid-template-rows: 2% 4% 2% 50% 2% 40% 2% 30%;
}

.riquadri {
    grid-area: riquadri;
    border-bottom: 1px solid grey;
    display: grid;
    grid-template-areas:
        '. . .'
        'az materie crypto'
        'soc gov liq';
    grid-template-rows: 10% 45% 45%;
}

#ptf_composition {
    grid-area: pie / pie / pie / pie;
    border-bottom: none !important;
}

.materie {
    text-align: center;
}

.crypto {
    text-align: center;
}

.gov {
    text-align: center;
}

.liq {
    text-align: center;
}

.soc{
    text-align: center;
}

.az{
    text-align: center;
}

td{
    font-size: 4vw !important;
}

#ptf_tab2 {
    grid-area: tb2;
    display: grid;
    grid-template-areas:
        'az'
        '.'
        'mp'
        '.'
        'ob_soc'
        '.' 
        'ob_gov'
        '.'
        'cry'
        '.' 
        'liq'
        '.'
        'tab1'
        '.'
        'tab2'
        '.'
        'tab3'
        '.'
        'tab4';
    grid-gap: 2% 0%;
    grid-template-columns: 100%;
}

    
    .indicator_1 { 
    grid-area: indicator_1; 
    display: grid; 
    grid-template-areas: 
        '.' 
        'reale' 
        '.'; 
    grid-template-rows: 30% 60% 20%; 
    grid-template-columns: 100%; 
}


.btn { 
    padding-bottom:0% !important;
}

.btn:hover{ 
    font-weight:bold !important;
    border: none !important;
}

    #time_machine{ 
  margin-top:0%; 
}

    .risk_cont{  
    grid-area: scomp_risk;  
    display:grid;  
    grid-template-areas: '.'  
                         'grafico'  
                         'labels';  
    grid-template-rows: 35% 40%;  
    grid-template-columns: 100%;  
} 
    
    #reale { 
    grid-area: reale; 
    display: grid; 
    grid-template-areas: 
        'title' 
        '.' 
        'numb'; 
    grid-template-rows: 30% 5% 40%; 
}
    
    .min, .max, .target{ 
font-size: 1vh; 
}
     
    .expired{ 
        margin-top: 40%; 
    } 
     
    .dash-graph { 
    height: 100% !important; 
}  
    
     
    .container{ 
        height: 80vh; 
        width:90%; 
            grid-template-areas: 'input'  
                          'over_cont'; 
    grid-template-rows: 50% 50%; 
    grid-template-columns: 100%; 
    margin-top:0%; 
    } 
 
   .container_free{ 
        height: 80vh; 
        width:90%; 
            grid-template-areas: 'input'  
                          'over_cont'; 
    grid-template-rows: 100% 00%; 
    grid-template-columns: 100%; 
    margin-top:0%; 
    } 

.nav-link{ 
width:20%; 
font-size: 1vh; 
} 
 
.navbar { 
padding-top : 0;
padding-bottom :0;
} 
 
.home{ 
    grid-area:cont; 
    display : grid; 
    grid-template-areas :  
        'ind_risk' 
        'graph' 
        'disclaimer'; 
    grid-template-rows: 13% 63% 14%; 
    grid-template-columns: 100%; 
    } 
     
.graph { 
     
    grid-area : graph; 
    display : grid; 
    grid-template-areas :  
        '.' 
        'numbers' 
        '.'
        'pl' 
        'up'; 
    grid-template-columns: 100%; 
    grid-template-rows: 0% 20% 3% 72% 5%; 
     
} 
 
.oggi{ 
     text-align:center; 
 } 
  
.ytd{ 
     text-align:center; 
} 
  
.si{ 
     text-align:center; 
} 
 
 .triangle-up { 
    color: #05FF00 !important; 
    font-size: 1.75vh; 
} 
 
.triangle-down { 
    color: #FF0000 !important; 
    font-size: 1.75vh; 
} 
 
#indi2{ 
    height: 100% !important; 
    grid-area: indi2; 
} 
 
 text{ 
font-size: 2vw !important; 
 } 
 
p { 
    font-size: 1.1vh; 
} 
 
.theBody { 
    display: grid; 
    grid-template-areas: 
        '. menu .' 
        '. cont .'; 
    grid-template-rows: 5% 95%; 
    grid-template-columns: 5% 90% 5%; 
    height: 95vh; 
    width: 100vw; 
} 
 
.disclaimer1{ 
    margin-bottom: 0 !important; 
} 
 
.ind_risk { 
    display: grid; 
    grid-area: ind_risk; 
    grid-template-areas: 
        'indicator_1 . risk' 
        '. . .'; 
    border-bottom: 1px solid rgba(0,0,0,0); 
    grid-template-columns: 30% 10% 60%; 
    grid-template-rows: 100% 0%; 
}

.input_home { 
    display: grid; 
    grid-template-areas: 
        '. . .' 
        'title . btn' 
        '. . .'; 
    grid-area: input; 
    grid-template-columns: 30% 0% 70%; 
    grid-template-rows: 10% 80% 10%; 
} 
 
.indicator_2 { 
    display:grid; 
    grid-area: numbers; 
    grid-template-areas: 
        '. . .' 
        'oggi ytd si'
        '. . .'; 
    grid-template-columns: 33% 33% 33%; 
    grid-template-rows: 5% 90% 5%; 
    background-color: rgba(0,0,0,0.3);
} 
 
.date_home{ 
    display: none; 
} 
 
.btn{ 
    vertical-align: top; 
    line-height: 1;
    font-size: 1.75vh;
    padding-bottom:1%;
} 
 
.tit{ 
    font-size: 1.75vh;
}  
 
.a { 
    max-height: 1.75vh;
}  
 
.form { 
    display: grid; 
    grid-template-areas: 
        'tit' 
        'user' 
        'pwd' 
        'error' 
        'btn' 
        'link' 
        '.'; 
    grid-template-rows: 40% 13% 13% 13% 10% 10% 0%; 
} 
 
#login-button { 
    grid-area: btn; 
    height: 100%; 
    padding: 0 0; 
    margin-top: 0%; 
} 
 
.link_reset, .link_reset2 { 
    font-size: .8rem; 
} 
 
#pwd-box { 
    grid-area: pwd; 
    margin-top: 0%; 
} 
 
#collapse_user, #collapse_pwd { 
    margin-top: -2%;  
} 
 
.form2 { 
    display: grid; 
    grid-template-areas: 
        'tit' 
        'user' 
        'pwd_old' 
        'pwd_new' 
        'error' 
        'btn' 
        'link' 
        '.'; 
    grid-template-rows: 40% 10% 10% 10% 10% 10% 10% 0%; 
} 
 
#reset-button { 
    margin-top: 0%; 
} 

p{ 
    margin-bottom: 0%; 
} 
 
#collapse_reset_pwd, #collapse_reset_user, #collapse_reset_missing, #collapse_reset_done { 
    margin-top: -3%;  
} 
 
._dash-loading-callback::after { 
    top: 5%; 
    left: 0%; 
  } 
   
.update { 
    margin-top: 5% !important; 
} 
 
.risk { 
    grid-area: risk; 
    display: grid; 
    grid-template-areas: 
        '.' 
        'scomp_risk' 
        '.'; 
    grid-template-rows: 30% 60% 20%; 
    grid-template-columns: 100%; 
} 
 
    input{ 
    border-radius: 0px; 
    } 
     
.numb2{ 
    font-size: 3.1vh !important; 
} 

.numb{ 
    font-size: 2.5vh !important; 
} 
 
.title{ 
    font-size: 1.8vh !important; 
} 
 
.positive{ 
    font-size: 1.75vh !important; 
} 
 
.neutral{ 
    font-size: 1.75vh !important; 
} 
 
.negative{ 
    font-size: 1.75vh !important; 
} 
 
    .oggi{ 
     grid-area: oggi; 
     display: grid; 
     grid-template-areas: 
     '.' 
     'title' 
     '.' 
     'numb' 
     '.' 
     'delta' 
     '.'; 
    grid-template-rows: 15% 20% 3% 26% 1% 30% 8%; 
 } 
  
.ytd{ 
     grid-area: ytd; 
     display: grid; 
     grid-template-areas: 
     '.' 
     'title' 
     '.' 
     'numb' 
     '.' 
     'delta' 
     '.'; 
    grid-template-rows: 15% 20% 3% 26% 1% 30% 8%; 
} 
  
.si{ 
     grid-area: si; 
     display: grid; 
     grid-template-areas: 
     '.' 
     'title' 
     '.' 
     'numb' 
     '.' 
     'delta' 
     '.'; 
    grid-template-rows: 15% 20% 3% 26% 1% 30% 8%; 
} 
 
 .perf{ 
     justify-content: center; 
 } 
 
 .indicator_2_weekend { 
    display: grid; 
    grid-area: numbers; 
    grid-template-areas: 
        '. . . . .' 
        '. oggi ytd si .'; 
    grid-template-columns: 10% 35% 10% 35% 10%; 
    grid-template-rows: 10% 85%; 
    background-color: rgba(0,0,0,0.3);
}
} 
 
@media only screen  
  and (max-height: 480px) and (max-width: 812px)
  and (orientation: landscape) { 

 #performance{
     grid-template-rows: 7% 1% 50% 50% 5% 123%;
 }
 
 .home2{
     margin-top: 5%;
 }

 .tit_risk {
    font-size: 5.5vh; 
}

td{
    font-size: 2vw !important;
}

.contr {
    font-size: 4.5vh;
}

.graph_ptf {
    grid-area: graph;
    display: grid;
    grid-template-areas:
        '. . .'
        'title_scelta title_scelta title_scelta'
        '. . .'
        'riquadri pie pie'
        '. . .'
        'tb2 tb2 tb2';
    grid-template-columns: 70% 5% 25%;
    grid-template-rows: 5% 7% 2% 60% 5% 43%;
}
 
 .navbar{ 
    flex-wrap: nowrap; 
}

.btn:hover{ 
    font-weight:bold !important;
    border: none !important;
}

.a, .a_tot{ 
    max-height : 3vh; 
}

.btn{ 
    line-height: 1; 
}

.nav-link { 
    background-color: rgba(0,0,0,0.3); 
    border-bottom: 1px solid rgba(0,0,0,0) !important; 
    padding: .75rem 1rem !important; 
    font-family: 'Barlow', sans-serif !important; 
    line-height: 1; 
}

.theBody { 
    display: grid; 
    grid-template-areas: 
        '. menu .' 
        '. cont .'; 
    grid-template-rows: 5% 95%; 
    grid-template-columns: 10% 80% 10%; 
    height: 95vh; 
    width: 100vw; 
}
 
#navigation, .navbar, .nav, .navbar, .navbar-expand-md, .navbar-light, .bg-light, .fixed-top, .nav-link { 
    width: 100%; 
}

.home { 
    grid-area: cont; 
    display: grid; 
    grid-template-areas:
        '.'
        'ind_risk' 
        'graph' 
        'disclaimer'; 
    grid-template-rows: 10% 20% 70% 10%; 
    grid-template-columns: 100%; 
}

.risk { 
    grid-area: risk; 
    display: grid; 
    grid-template-areas: 
        '.' 
        'scomp_risk' 
        '.'; 
    grid-template-rows: 10% 80% 10%; 
    grid-template-columns: 100%; 
}       

.indicator_1 { 
    grid-area: indicator_1; 
    display: grid; 
    grid-template-areas: 
        '.' 
        'reale' 
        '.'; 
    grid-template-rows: 10% 80% 10%; 
    grid-template-columns: 100%; 
}

.title, .triangle-up, .triangle-down, .positive, .negative{ 
    font-size: 3vh !important; 
}                                                                                                                              

.numb, .numb2 { 
    font-size: 6vh !important; 
}

.indicator_2 { 
    display: grid; 
    grid-area: numbers; 
    grid-template-areas: 
        '.' 
        'oggi' 
        'ytd' 
        'si' 
        '.'; 
    grid-template-rows: 1% 30% 30% 30%; 
    grid-template-columns: 100%; 
}

.date_home { 
    display: none; 
}

.btn, .tt { 
    font-size: 3vh !important; 
}

p { 
    font-size: 2vh; 
}

.update { 
    grid-area: up; 
    margin-top: 1%; 
}

.fixed-top { 
    position: absolute; 
}

.input_home { 
    display: grid; 
    grid-template-areas: 
        '. . .' 
        'title . btn' 
        '. . .'; 
    grid-area: input; 
    grid-template-columns: 15% 15% 70%; 
    grid-template-rows: 0% 85% 15%; 
}

.oggi, .ytd, .si { 
    grid-template-rows: 20% 0% 30% 7% 30% 10%; 
}

.tit { 
    font-size: 3vh; 
}

.Select-arrow { 
    border-width: 1vh 1vh .5vh; 
}
}

@media only screen  
  and (max-device-width: 768px)  
  and (min-device-height: 1024px)  
  and (orientation: portrait)  
  and (-webkit-min-device-pixel-ratio: 2) { 

.riquadri{
    background-color : rgba(0,0,0,0.3);
    border-bottom : none !important;
}

td{
    font-size: 2.5vw !important;
}

#ptf_tab2 {
    grid-area: tb2;
    display: grid;
    grid-template-areas:
        'az . mp'
        '. . .'
        'ob_soc . ob_gov'
        '. . .'
        'cry . liq'
        '. . .'
        'tab1 . tab2'
        '. . .'
        'tab3 . tab4';
    grid-gap: 2% 0%;
    grid-template-columns: 48% 4% 48%;
}

.title_scelta {
    grid-area: title_scelta;
    display: grid;
    grid-template-areas:
        '. . title .'
        'drop . title .';
    grid-template-columns: 15% 1% 88% 1%;
    grid-template-rows: 15% 85%;
}

#ptf_composition {
    border-bottom: none !important;
}

.materie {
    text-align: center;
}

.crypto {
    text-align: center;
}

.gov {
    text-align: center;
}

.liq {
    text-align: center;
}

.soc{
    text-align: center;
}

.az{
    text-align: center;
}

.graph_ptf {
    grid-area: graph;
    display: grid;
    grid-template-areas:
        '. . .'
        'title_scelta title_scelta title_scelta'
        '. . .'
        'pie pie pie'
        '. . .'
        'riquadri riquadri riquadri'
        '. . .'
        'tb2 tb2 tb2';
    grid-template-columns: 80% 0% 20%;
    grid-template-rows: 2% 4% 2% 40% 2% 40% 2% 30%;
}

.theBody { 
    display: grid; 
    grid-template-areas: 
        '. menu .' 
        '. cont .'; 
    grid-template-rows: 5% 95%; 
    grid-template-columns: 5% 90% 5%; 
    height: 95vh; 
    width: 100vw; 
}                                                                                                                                                      #navigation, .navbar, .nav, .navbar, .navbar-expand-md, .navbar-light, .bg-light, .fixed-top, .nav-link { 
    font-family: 'Barlow', sans-serif !important; 
    margin-left: auto; 
    margin-right: auto; 
    color: white; 
    width: 100%; 
}                                                                                                                                                    .min, .target, .max, text { 
    font-size: 1.5vw !important; 
}                                                                                                                                                 .graph { 
    grid-area: graph; 
    display: grid; 
    grid-template-areas: '. . .' 
                         'numbers . pl' 
                         'up up up'; 
    grid-template-columns: 25% 10% 65%; 
    grid-template-rows: 5% 87% 5%; 
}

.ind_risk { 
    display: grid; 
    grid-area: ind_risk; 
    grid-template-areas: 'indicator_1 . risk'; 
    border-bottom: 1px solid grey; 
    grid-template-rows: 100%; 
    grid-template-columns: 25% 10% 65%; 
}

.btn:hover{ 
    font-weight:bold !important;
    border: none !important;
}

.input_home { 
    display: grid; 
    grid-template-areas: 
        '. . .' 
        'title . btn' 
        '. . .'; 
    grid-area: input; 
    grid-template-columns: 30% 0% 70%; 
    grid-template-rows: 0% 85% 15%; 
}
 
.date_home { 
 display:none; 
}

.btn{ 
    vertical-align: top; 
    line-height: 1;
} 

}

@media only screen  
  and (max-device-height: 768px)  
  and (min-device-width: 1024px)  
  and (orientation: landscape)  
  and (-webkit-min-device-pixel-ratio: 2) { 
 
#navigation{
    width : 100% !important;
}

td{
    font-size: 1.75vw !important;
}
   
.input_home { 
    grid-template-columns: 15% 40% 45%; 
}

.btn{ 
    vertical-align: top; 
    line-height: 1;
} 

.btn_home{ 
 margin-top: 5% !important; 
}

.btn:hover{ 
    font-weight:bold !important;
    border: none !important;
}

#navigation, .navbar, .nav, .navbar, .navbar-expand-md, .navbar-light, .bg-light, .fixed-top, .nav-link { 
    width: 100%; 
}

.theBody { 
    display: grid; 
    grid-template-areas: 
        '. menu .' 
        '. cont .'; 
    grid-template-rows: 5% 95%; 
    grid-template-columns: 15% 70% 15%; 
    height: 95vh; 
    width: 100vw; 
}

.DateInput { 
    width: 40%; 
}

.glow-on-hover { 
    padding: 2% 2%; 
}
}