@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@300;400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@300;400;700&display=swap');

/** vars **/
.marker{width:50px;height:50px;background:#eee;border:2px solid var(--adv2);box-sizing:border-box;border-radius:50%}
.marker img{display:inline-block;width:100%;border-radius:50%}
:root {
    --sidebarwidth: 280px;
    --sidebarwidthneg: -280px;
}
.advertising{background:none}

.image.rect.land{padding-top:60%}
.image.rect.land img{top:-20%}
.image, .image.rect{background:#111}

.user.circle.small{width:30px;height:30px;line-height:30px}
.user.circle.medium{width:40px;height:40px;line-height:40px}

#destra form{padding-top:0}
#destra #loading > .content:first-child{padding-top:0 !important}
#loading{margin-top:-0}
.sfixed{position:fixed;z-index:2;top:0;left:0}
#menu{overflow:auto}

.head .fixed{position:fixed;left:0;z-index:1}
.bg-overlay{background:rgba(0,0,0,.1)}
.main-menu a{padding: 12px 0 12px 15px;font-size:16px;border-radius:10px;margin:18px 30px 28px 20px;border:0;background:rgba(255,255,255,.03)}

input[type="text"], input[type="email"], input[type="number"], input[type="password"], input[type="range"], select, textarea, label.select select{/*border-top:none;border-left:none;border-right:none;*/color:#666 !important;padding-left: 8px;border-radius:4px;}
label.select::after{color:var(--adv) !important}
label.select:hover::after{background:var(--adv) !important;color:#fff !important}
.inline-box, .ib{font-size:12px}

h3.title{margin:0 20px 0 50px;font-size:20px;border:none}
h4.title{font-size:20px;color:#999}
.dialog .title{color:#fff;padding-left:15px}
.ui-datepicker, .card, .card-tab, .datatable .controls, .datatable .filters, .datatable .actions, .datatable .o-auto, .datatable .controls .limit select, .datatable .controls .pages, .note-editor.note-frame, .note-modal-body{box-shadow:none;border-radius:0;background:#fff}
#destra form h2.title.edit, #destra #loading .content h2.title.edit, #destra form.fixed h2.title.edit, #destra #loading .content.fixed h2.title.edit{top:0 !important;left:0 !important;position:relative !important;float:none}
.datatable .controls .pages a{border-radius:50%}
.datatable .controls,.datatable .controls .pages{background:none !important;padding:0;min-height:50px}
.datatable .controls .pages a{min-width:40px;line-height:40px}
.datatable .pages a.active, .datatable .pages a:hover{background:#FFBA2C}
.datatable .controls .pages a i{line-height:40px}
.favorite{position:absolute;top:0;left:0;z-index:1}
.favorite a{border:2px solid #fff}
.favorite a[data-favorite="0"]{background:rgba(0,0,0,.1) !important}
a[data-like="0"]{opacity:.4 !important}
.dialog h3.title{margin:0;background:var(--adv2)}
.cart i{min-width:15px;line-height:15px;text-align: center;top: -8px;right: -5px;border-radius: 15px;}

.alert{border-radius:4px;font-size:16px;z-index:10000;max-width:90%;position:fixed;background:rgba(0,0,0,.6);color:#fff;border:2px solid var(--greymedium);padding:10px 30px 10px 10px;box-sizing:border-box;}
.alert a{color:#fff !important}
.filter button{width:45px;height:45px;}

/** nuovo style */
.fa-beat {
  -webkit-animation: fa-beat 1s infinite linear;
  animation: fa-beat .5s infinite linear;
  animation-iteration-count: 2;
}
@-webkit-keyframes fa-beat {
  0% {-webkit-transform: scale(1);transform: scale(1);}
  50% {-webkit-transform: scale(1.1);transform: scale(1.1);}
  100% {-webkit-transform: scale(1);transform: scale(1);}
}
@keyframes fa-beat {
  0% {-webkit-transform: scale(1);transform: scale(1);}
  50% {-webkit-transform: scale(1.1);transform: scale(1.1);}
  100% {-webkit-transform: scale(1);transform: scale(1);}
}
.head{min-height:270px;background:url(/img/web/banner_amavino.png) bottom left no-repeat;position:relative;padding-left:0;z-index:0;border:0}
.bg-overlay{background:none;padding:10px}
body{box-shadow: none;background:#fbf9fa}
#sinistra{background:var(--adv)}
#menu a{border: 1px solid transparent;border-radius: 4px;color:#eee;margin:5px;/*20px 30px 0 30px*/padding:10px 5px;text-align:center}
#menu a, #menu span.circle,a.btn:hover, button.btn:hover{box-shadow: 0px 10px 20px rgba(0,0,0,.06)}
#menu a span.circle{display:block;width: 100%;/*background:rgba(0,0,0,.1);*/margin-bottom:15px}
#menu a span.circle img{height:50px}
#menu a span i{padding:0;font-size:20px;width: 100%;text-align:center;color:var(--adv);background:#fbfbfb;background: -webkit-linear-gradient(#FFBA2C, #FFBA2C);-webkit-background-clip: text;-webkit-text-fill-color: transparent;}
#menu a.active,#menu a:hover{box-shadow:0px 0px 0px rgba(0,0,0,0);background:transparent !important;border-color: transparent;background:#FFBA2C !important;color:#fff !important}
#menu a:hover,.btn.shadow-light{box-shadow: 0px 5px 5px rgba(0,0,0,.1)}
#menu a.active span i{color:#fff;background:#fbfbfb;background:none;-webkit-background-clip: unset;-webkit-text-fill-color: #fff;}
/*#menu a.active span{background:linear-gradient(to bottom, #c0942f, #f7c33a) !important}*/
#amavino_text{top:90px;left:60px;font-size:40px !important}
.rounded-top{border-radius:10px 10px 0 0}
.rounded-bottom{border-radius:0 0 10px 10px}
.rounded-top.rounded-bottom{border-radius:10px}
/*.bg-adv2,.datatable table thead, table.table.products thead,.dialog h2.title,label.select:hover::after{background:linear-gradient(to right, #FFBA2C, #FFBA2C) !important} */
.rounded{border-radius:10px}
.mb100{margin-bottom:100px}
.mt70{margin-top:80px}
.user{background:rgba(0,0,0,.1)}
a{color:var(--adv2)}
a.btn:hover, button.btn:hover{background:#52392e}
a.selected{background:#fafafa}
label.select::after,.pages a:not(.active){color:#FFBA2C !important}
.datatable .pages a:hover{color:#fff !important}
.h100p{height:100%;min-height:450px}

/** scrollbar chrome **/

/* Let's get this party started */
::-webkit-scrollbar, #menu::-webkit-scrollbar {
    width: 10px !important;
}
 
/* Track */
::-webkit-scrollbar-track, #menu::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    -webkit-border-radius: 1px;
    border-radius: 1px;
    background:var(--grey-light) !important
}
 
/* Handle */
::-webkit-scrollbar-thumb, #menu::-webkit-scrollbar-thumb {
    -webkit-border-radius: 1px;
    border-radius: 1px;
    background: var(--adv2); 
    -webkit-box-shadow: inset 0 0 2px rgba(0,0,0,0.5); 
}
::-webkit-scrollbar-thumb:window-inactive, #menu::-webkit-scrollbar-thumb:window-inactive {
	background: var(--adv2); 
}

input[type='range']::-webkit-slider-thumb {
      width: 24px;
      -webkit-appearance: none;
      height: 24px;
      border-radius:24px;
      cursor: ew-resize;
      background: var(--adv2);
    }

/** end scrollbar chrome **/


@media screen and (max-width: 850px) {
    .head{min-height:130px;}
    h3.title{margin-top:-80px}
    .mobile-none{font-size:0;display:none}
    .advertising.mt30{margin-top:0 !important}
    #sinistra a.abs{top:3px}
    .mb100{margin-bottom:40px}
    #amavino_text{display:none}
    .col-12.col-sm-6.col-md-4.col-xl-3 .favorite{top:0;left:0}
    a.block.route{margin:0 0 -20px 0 !important}
    a.block.route .image.rect{padding-top:50% !important}
    a.block.route .overlay{display:none}
    a.block.route h2{text-align:center;color:white;width:100%;position:absolute;top:40%;left:0;font-size:1.4rem !important;line-height:100%}
}

/* APP */
.zoom{transition-duration:.5s;}
.home-app {background:linear-gradient(to top, #111, #333) fixed;}
.home-app #destra {padding-bottom: 0;}
html.mode-app, .mode-app body{background:none transparent !important; color: #ffffff;}
.mode-app body, .mode-app a, .mode-app button,
input[type="text"], input[type="email"], input[type="number"], input[type="password"], input[type="range"], select, textarea {font-family: 'Work Sans', sans-serif !important;}
.mode-app .fa, .mode-app .fas, .mode-app a.close::before {font-family: "Font Awesome 5 Free" !important;font-weight: 900 !important;}
.theme-color-primary {color: #000000;}
.theme-actions a.ico {color: #FFBA2C;}
.mode-app .card,
.mode-app .bg-white {color: #000000;}
.mode-app #sinistra,
.mode-app .bg-overlay {display: none;}
.mode-app .filter {background:none transparent !important;box-shadow: none !important;margin: 0 !important;}
.mode-app .datatable .o-auto {background:none transparent !important;}
.home-app #loading {margin-top: 0;}
.app-shadow {-webkit-box-shadow: 0 5px 10px 0 rgba(0,0,0,0.1);-moz-box-shadow: 0 5px 10px 0 rgba(0,0,0,0.1);box-shadow: 0 5px 10px 0 rgba(0,0,0,0.1);}
.box-profile {background-color: #FFBA2C !important;background-image: url(/img/web/bg_texture.png) !important;background-size: cover !important;margin-left: 10px !important; margin-top: 10px !important; margin-bottom: 10px !important;padding: 3px;border-top-left-radius: 33px;border-bottom-left-radius: 33px;}
.app-profile-img {border-radius: 50%;width: 60px;padding-top: 100%;position: relative;overflow: hidden;background: #f1f1f1;}
.app-profile-img img {position: absolute;top: 0;bottom: 0;max-width: 100%;height: auto;width: 100%;}
.profile-link {max-width: 100px;width: 100%}
.profile-link img {max-width: 50px;height: 20px;margin: auto;display: block;object-fit: contain;}
.profile-link p {color: #000000;}
.box-profile .username {font-size: 26px;margin-top: 5px;}
.home-row {padding-bottom: 10px;margin-bottom: 10px;border-bottom: 1px solid rgba(0,0,0,0.3);}
.home-box {display: block;}
.home-box.routes {background-image: url(/img/web/app/bg_percorsi.jpg);background-repeat: no-repeat;background-size: cover;}
/*.home-box:not(.no-bg) {background-color: rgba(255,255,255,.1); border-radius: 25px;}*/
.home-box img {max-width: 60px;height: 60px;margin: 5px auto 0;display: block;object-fit: contain;}
.home-box p {font-size: 12px; text-align: center; color: #ffffff;margin-top: 10px;text-transform: uppercase;}
.home-sep-vertical {background-color: #FFBA2C !important; width:1px; padding: 0;}
.image .overlay.abs{bottom:0;width:100%;z-index:1}
.image .overlay.abs.back{z-index:-1}
.image .overlay.abs img{position:relative}
.image .overlay.abs img.logo{width: 50%;position: absolute;bottom: 0;top:auto;z-index: 2;left: 50%;margin-left: -25%;}
.image .ico{font-size:3rem;z-index:2;width:100px;margin-left:-50px;left:50%;text-align:center;bottom:10px}
a:hover .overlay.abs.anim{opacity:.7;bottom:-10%}
a:hover img.zoom{transform:scale(1.4) rotate(-45deg);}
a:hover .overlay.abs.anim .logo.anim, a:hover .overlay.abs.anim .ico{bottom:20%;filter: grayscale(1)/* invert(1)*/;color:#999}
a:hover .overlay.abs.anim .logo.anim{background:#fbf9fa;}

/** cookie **/
.cookiealert{position:fixed;bottom:0;left:0;width:100%;margin:0 !important;z-index:999;opacity:0;visibility:hidden;border-radius:0;transform:translateY(100%);transition:all 500ms ease-out;color:#ecf0f1;}
.cookiealert.show{opacity:1;visibility:visible;transform:translateY(0%);transition-delay:1000ms;}
.cookiealert a{text-decoration:underline}
.cookiealert .acceptcookies{margin-left:10px;vertical-align:baseline;}

td{color:#000}

h3 {font-family: 'Nunito Sans', sans-serif; font-size: 16px;}
.card {font-family: 'Nunito Sans', sans-serif;}
.card ul, .card li {list-style-type: revert; margin: 15px;}

#sinistra, .content.sfixed.w100p.bg-overlay{display:none !important}
#destra{margin-left:0 !important}