@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}

.bg-blue{background-color:#318CE7 !important}
.bg-blue.bordered{border:1px solid rgba(0,0,0,.5)}

#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;scrollbar-color: var(--adv2) rgba(0,0,0,.7) }
.bhome{margin-bottom:-80px;overflow:hidden}
.bhome img{width:100%;min-width:1200px}

.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:36px;height:36px;}

/** 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: 35px;color:rgba(255,255,255,.6);margin:10px 30px;padding:10px;border:2px solid rgba(255,255,255,.1);background-color:rgba(0,0,0,.2)}
#menu a, #menu span.circle,a.btn:hover, button.btn:hover{box-shadow: 0px 20px 10px rgba(0,0,0,.04)}
#menu a span.ib{vertical-align:middle;font-size:16px}
#menu a span.circle{border-radius:100%;border:1px solid rgba(255,255,255,.3);padding:6px;background-color:rgba(0,0,0,.5);margin-right:10px}
#menu a span.circle img{height:30px;min-width:30px}
#menu a.active,#menu a:hover{border-color: transparent;background-color:#d1a53b !important;color:#000 !important;}
#menu a:hover,.btn.shadow-light{box-shadow: 0px 5px 5px rgba(0,0,0,.1)}
#menu a.active span.circle{background-color:#000}
#menu a.active span.circle img{/*filter: invert(100%)*/}
#menu li ul li{margin:0 40px 0 50px;border-bottom:1px solid rgba(255,255,255,.5);padding:4px;text-align:center}
#menu li ul li a{padding:0;margin:0;font-size:13px;border:none;background:none}
#menu li ul li a:hover, #menu li ul li a.active{box-shadow:none;color:#d1a53b !important;background:none !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}

.bg-linear-bottom{
    background: rgb(255,255,255);
    background: linear-gradient(0deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0) 100%);
    border-radius:5px;
}
/** 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}
    /*#sinistra.closed{margin-left:-200px;left:0}
    #destra{margin-left:0}*/
    .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);}
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;}

.bannerx{overflow:hidden;padding-top:24%;position:relative}
.bannerx a.abs{top:0;left:0;z-index:1;display:block}
.bannerx a.abs:hover{opacity:1}

/** 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;}

.prominent1 img{border:2px solid var(--adv2)}
.bg-theme {background-color: #F8005C;}

.text-gold{color:var(--adv2)}

.truncate3{min-height: 60px;}

/** colori punti **/
.bg-cashmyapp{background-color:#75F94C;color:#333}
.text-cashmyapp{color:#75F94C}

.bg-cashback{background-color:#D1A53B;color:#333}
.text-cashback{color:#D1A53B}

.bg-cardback{background-color:#F8005C;color:#fff}
.text-cardback{color:#F8005C}

.bg-paytoken{background-color:#4DAEEA;color:#fff}
.text-paytoken{color:#4DAEEA}

.footer {position: fixed; bottom: 0; left: 0; right: 0; background: var(--adv);color: rgba(255,255,255,.8);z-index: 11;-webkit-box-shadow: 0 0 10px 0 rgba(0,0,0,0.5);box-shadow: 0 0 10px 0 rgba(0,0,0,0.5);}

@media screen and (max-width: 850px) {
    .footer {position: relative;}
}