:root {
    --fatar-accent: #0c9950;
    outline: none
}
.fatar-accent{background-color:var(--fatar-accent)!important}
.fatar-accent-text{color: var(--fatar-accent)}
a{color: var(--fatar-accent)}
img{max-width: 100%; height: auto}
.btn, .btn-flat{ text-transform: none; border-radius: 0; }
.btn:focus, .btn-large:focus, .btn-small:focus, .btn-floating:focus{background-color:#8a8a8a82}
html{font-family: "Roboto", sans-serif;}
body {display: flex; min-height: 100vh; flex-direction: column;}
main {flex: 1 0 auto;}
.square{border-radius: 0px!important}

input[type="text"]:focus + label, input[type="email"]:focus + label, input[type="password"]:focus + label, textarea:focus + label {color: var(--fatar-accent)!important;}
input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus, textarea:focus {border-bottom: 1px solid var(--fatar-accent)!important; box-shadow: 0 1px 0 0 var(--fatar-accent)!important;}
[type="checkbox"]:checked + span:not(.lever)::before{border-right-color: var(--fatar-accent); border-bottom-color: var(--fatar-accent)}

.flow-text{font-weight: 300}
@media only screen and (min-width: 630px) {
    .flow-text {font-size: 1.3rem} /*il .flow-text raggiunge al massimo questa grandezza*/
}

h5.home-title, h6.home-title { text-transform: uppercase; font-weight: 600; }

/*COLORS*/
body { color: #616161; }
h1,h2,h3,h4,h5,h6 { color: #212121; }
b, strong { color: #424242; }


/*NAVBAR*/
nav {height: 100px; line-height: 100px; background-color: transparent; box-shadow: none; -webkit-box-shadow: none}
nav .fatar-logo{margin-top:20px; height: 60px;}
nav .navbar-links{float: right}
nav .navbar-links li{padding:0 20px; text-align: center}
nav .navbar-links li.active{background-color: transparent}
nav .navbar-links li.active a{border-bottom: 4px solid var(--fatar-accent);}
nav .navbar-links li a{color: #616161; padding:5px 2px; display: inline; font-size: 16px;}
nav .navbar-links li a:hover{background-color: inherit}
@media only screen and (max-width: 600px) {
    nav {height: 130px; line-height: 42px;}
    nav .fatar-logo{ margin-top:12.5px; height: 50px; }
    nav .navbar-links{ width: 100%; }
    nav .navbar-links li{width: 33.3%; padding: 0 1vw; }
}

/*FOOTER*/
footer.page-footer p{font-size: 14px}

/*PRODUCTS INDEX*/
#product-list{ padding-bottom:30px; }
#product-list :is(h4,h5){ margin-top:40px; color:#444;  }
#product-list .card{ background-color: white; display: block; outline: none; }
#product-list .card .card-image img { aspect-ratio: 3/2; object-fit: cover; }
#product-list .card .card-content{ color:#444; padding: 12px; }
#product-list .card .card-title{ font-size: 20px; font-weight: bold; }
#product-list .card p{ height: 53px; }

/*PRODUCT PAGE*/
#product-hero{max-width: 1400px; width: 90%; margin-left: auto; margin-right: auto}
#product-hero .materialboxed{padding-top:25px}
#product-header{position: relative; border-bottom: 1px solid #d9d9d9;}
#product-header .name{ font-weight: bold; margin-bottom: 0; font-size: 3rem;}
#product-header .subtitle{text-transform: uppercase; font-size: 1.1rem; color: #acacac; margin-top: 0.3rem}
#product-header .btn-docs-container{position: absolute; right:10px; bottom:20px}
.btn-docs-container.col{padding-top: 40px; padding-bottom: 20px; border-top:1px solid #d9d9d9}
#product-content { padding-bottom: 40px; }
#product-content img{padding:30px 0}
#variations{padding-bottom:20px}
#variations h5{font-weight: 600; text-transform: uppercase}
#variations h6{font-weight: bold; font-size: 1rem; margin-bottom:15px; margin-top:30px}
@media only screen and (min-width: 601px){
    #product-content{border-right: 1px solid #d9d9d9;}
    #variations{border-left: 1px solid #d9d9d9; margin-left: -1px;}
}
@media only screen and (max-width: 600px){
    #variations{border-top: 1px solid #d9d9d9;}
}
/*key range*/
.range{border:1px solid #cacaca; border-radius: 6px; font-size: 22px; text-align: center; padding: 0 10px; margin-bottom:10px; line-height: 42px}
.range::after, .range::before{font-size: 12px; color: rgb(68, 68, 68);}
.range::after{float: left}
.range::before{float: right}
.r88{width: 100%}
.r76{width: 87%}
.r73c, .r73e, .r73f{width: 83%}
.r73f{width: 83%}
.r61{width: 70%}
.r49{width: 57%}
.r44{width: 50%}
.r37{width: 43%}
.r25{width: 30%}
.r20{width: 100%}
.r17{width: 85%}
.r13{width: 65%}
.r88::after{content:"A0"}
.r76::after, .r73e::after{content:"E1"}
.r73c::after{content:"C1"}
.r73f::after{content:"F1"}
.r61::after{content:"C2"}
.r49::after, .r37::after, .r25::after{content:"C3"}
.r44::after{content:"E3"}
.r88::before{content:"C8"}
.r76::before{content:"G7"}
.r73c::before, .r61::before, .r49::before, .r44::before{content:"C7"}
.r73e::before{content:"E7"}
.r73f::before{content:"F7"}
.r37::before{content:"C6"}
.r25::before{content:"C5"}
.r20::before, .r20::after, .r17::before, .r13::before {content:"C"}
.r17::after{content:"E"}
.r13::after{content:"G"}
/*action*/
.action{border: 1px solid #ddd; border-radius: 6px; text-align: center; line-height: 42px; margin-bottom:10px}
.graded{background: linear-gradient(to left, #ededed 0%, #575757 100%)}
.hammer{background-color: #575757; color:white}
.light{background-color: #ededed; color:#878787}
.medium{background-color: #b2b2b2; color: white}
.heavy, .snapS{background-color: #575757; color: white}
.semi{background-color: #b2b2b2; color: white}
.none, .snap{background-color: white; color:black}
/*surface*/
.surface{display:inline-block; margin:0 25px 10px 0;padding:0;width: 80px;}
.surface > img{border:1px solid #ccc}
.surface > figcaption{font-size: 12px;text-align: center;color: #2d2d2d; display: grid}
/*sensors*/
.sensors{position: relative; padding-left:50px; margin-bottom:15px}
.sensors > img{position: absolute; left:0; top:1px; width: 40px}
/*console pedal*/
.console-pedal-combinations img{width: 45%; margin: 2%}
/*download button*/
.btn-docs{height: 42px; line-height: 17px; text-align: left; padding: 5px 20px;}
.btn-docs i{line-height: 32px; margin-right: 20px;}

/*DOWNLOAD TEMPLATE*/
#download-list h2{font-size: 25px}
#download-list .btn{margin-right:10px; margin-bottom:10px}
#back-to-product{padding:50px 0}
#modal-password .modal-footer{padding:24px; height: inherit}
#modal-password input{font-size: 25px}
#modal-password button{background-color: #0c9950}

/*CONTACT*/
#contact-content h1{font-weight: 500; font-size: 3rem; border-bottom: 1px solid #d9d9d9;}
#contact-content .customers-only{padding-top: 10px;padding-bottom: 20px;}
#contact-content .customers-only strong{display: block; text-transform: uppercase}
#contact-content .miele{  opacity: 0; position: absolute; top: 0; left: 0; height: 0; width: 0; z-index: -1; }

/*PRIVACY*/
#privacy-content h1{font-weight: 500; font-size: 3rem; border-bottom: 1px solid #d9d9d9;}






/*CONTENUTO RISERVATO*/
/* Dal momento che si è deciso di nascondere le funzioni legate alla password (acceso riservato) in quanto nessuno può mantenere i file se non c'è uno sviluppatore, usare questa classe */
.hide-reserved { display: none !important; }