html{
scroll-behavior: smooth;
}
body{
font-family: Arial,Helvetica Neue,Helvetica,sans-serif;
background-color: #686f72;
}
*:focus {
outline: none !important;
box-shadow: none !important;
}
.loading{
height: 100%;
text-align: center;
}
.loading img{
margin-top: 20%;
}
#single_product{
/*min-height: 500px;*/
background-color: #FFF;
}
.clear{
clear: both;
}
.remove-bb{
display: inline-block;
border: 1px solid black;
margin-right: 5px;
margin-bottom: 5px;
padding:10px;
cursor: pointer;
}
.pausepay-website_enabled iframe{
pointer-events: none;
}
.cruscotto_megadeth td{
background-color: #ff5959 !important;
}
.cruscotto_warning td{
background-color: #ffeae3 !important;
}
.cruscotto_danger td{
background-color: #ffc9c9 !important;
}
.cruscotto_total td{
background-color: #f1f7f9 !important;
font-weight: bold;
}
.cruscotto_credit td{
background-color: #b8e6ce !important;
}
.cruscotto_base td{
background-color: #FFF !important;
}
.fa-arrow-circle-right{
font-size: 20px !important;
}
button .fa-arrow-circle-right{
font-size: 1rem !important;
}
img{
max-width: 100%;
}
b{font-weight: 600;}
.promo{
display: inline-block;
color: #FFF;
background-color: #22B2D6;
padding: 0 20px;
margin-left: 20px;
font-size: 12px;
}
#breadcrumbs a:hover{
text-decoration: underline;
}
.jsgrid-cell {
overflow: hidden;
/* white-space: nowrap;*/
font-size: 12px;
}
td.jsgrid-cell:first-child {
font-size: 10px;
}
.jsgrid-header-row>.jsgrid-header-cell{
border: 0;
}
#top_client td.jsgrid-cell , #top_product td.jsgrid-cell{
font-size: 10pt;
}
#top_client th.jsgrid-header-cell , #top_product th.jsgrid-header-cell{
font-size: 12pt !important;
}
#quotation_product td.jsgrid-cell:first-child, #order_product td.jsgrid-cell:first-child{
font-size: 12pt;
}
/*LOGIN*/
div#login, div#otp_login, div#login_admin{
width: 440px;
height: 460px;
background-color: #828b90;
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
text-align: center;
}
div#login img, div#otp_login img, div#login_admin img{
width: 50%;
margin: 20px auto;
}
div#login form,div#otp_login form, div#login_admin form{
width: 80%;
margin: 0px auto;
color: #FFF;
}
div#login form input.login-input,div#otp_login form input.login-input,div#login_admin form input.login-input{
margin-top: 10px;
border: 0;
width: 100%;
padding-left:3px;
border-radius: 2px;
}
div#login form span.remember,div#otp_login form span.remember,div#login_admin form span.remember{
margin-top: 10px;
display: block;
width: 100%;
text-align: left;
font-size: 14px;
}
div#login form span.remember label , div#otp_login form span.remember label , div#login_admin form span.remember label{
display: block;
padding-left: 15px;
text-indent: -15px;
}
div#login form span.remember input,div#otp_login form span.remember input,div#login_admin form span.remember input {
width: 13px;
height: 13px;
padding: 0;
margin:0;
vertical-align: bottom;
position: relative;
top: -3px;
*overflow: hidden;
}
div#login form button,div#otp_login form button, div#login_admin form button{
display: block;
width: 40%;
float: left;
background-color: #22b2d6;
margin-top: 10px;
}
/*END LOGIN*/
/*PROGRESS*/
#myProgress {
width: 400px;
height: 3px;
background-color: #505659;
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
text-align: center;
display: none;
border: #505659;
color: #FFF;
font-weight: 8px;
}
#myBar {
width: 1%;
height: 1px;
background-color: #FFF;
}
/*END PROGRESS*/
/*SIDE MENU*/
#wrapper {
padding-left: 0;
-webkit-transition: all 0.6s ease;
-moz-transition: all 0.6s ease;
-o-transition: all 0.6s ease;
transition: all 0.6s ease;
}
#wrapper.toggled {
padding-left: 200px;
}
#sidebar-wrapper {
z-index: 1000;
position: fixed;
left: 250px;
width: 0;
height: 100%;
margin-left: -250px;
overflow-y: auto;
background-color:#312A25 !Important;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#wrapper.toggled #sidebar-wrapper {
width: 0;
}
#page-content-wrapper {
width: 100%;
position: absolute;
padding: 10px;
}
#wrapper.toggled #page-content-wrapper {
position: absolute;
margin-left:-250px;
}
/* Sidebar Styles */
/* The side navigation menu */
.sidenav {
height: 200px; /* 100% Full-height */
min-height: 100% !important;
width: 0; /* 0 width - change this with JavaScript */
position: fixed; /* Stay in place */
z-index: 1; /* Stay on top */
top: 0; /* Stay at the top */
left: 0;
background-color: #000; /* Black*/
overflow-x: hidden; /* Disable horizontal scroll */
padding-top: 10px; /* Place content 60px from the top */
transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
}
::-webkit-scrollbar {
width: 5px;
}
/* Track */
:-webkit-scrollbar-track {
background: #f1f1f1;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: #888;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #555;
}
.sidenav img{
width: 160px;
display: block;
margin: 20px auto;
visibility: hidden;
}
/* The navigation menu links */
.sidenav a {
text-decoration: none;
font-size: 25px;
line-height: 20px;
color: #999999;
transition: 0.3s;
border-left: 5px solid #171819;
display: block;
width: 100%;
text-align: left;
padding-top: 10px;
padding-bottom: 10px;
font-size: 16pt;
background-color: #171819;
}
.sidenav .menu_link{
z-index: 100;
position: relative;
}
.sidenav a.closebtn{
text-align: right;
padding-right: 14px;
background-color: #000;
border-left: 5px solid #000;
}
.sidenav a span.icon {
display: inline-block;
text-align: center;
width: 55px;
}
.sidenav a span.icon-yellow {
color: #ffffcc;
}
.sidenav a span.text {
display: none;
line-height: 10px;
font-size: 16px;
}
.sidenav a.selected{
border-left: 5px solid #22B2D6;
color: #fff;
}
.sidenav a.selected span.icon-yellow{
color: #fff;
}
/* When you mouse over the navigation links, change their color */
.sidenav a:hover:not(.selected):not(.closebtn) {
color: #22B2D6;
}
.sidenav a:hover:not(.selected):not(.closebtn) span.icon-yellow{
color: #22B2D6;
}
/* Position and style the close button (top right corner) */
/* Style page content - use this if you want to push the page content to the right when you open the side navigation */
#main {
transition: margin-left .5s;
padding: 20px;
margin-left: 60px;
margin-bottom: 70px;
}
#mySidenav{
width: 60px;
}
.sidenav {
color: #FFF;
}
.sidenav h3{
margin: 0;
font-size: 16pt;
font-weight: bold;
color: #FFF;
}
.sidenav #footer-small{
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
position: absolute;
font-size: 16px;
bottom:65px;
left: -25px;
font-weight: bold;
}
.sidenav #footer-big{
position: relative;
font-size: 10pt;
padding: 15px;
color: #999999;
}
.sidenav #footer-big a{
font-size: inherit;
background-color: inherit;
border: 0;
line-height: inherit;
text-decoration: underline;
padding: 0;
}
.sidenav #footer-big{
display: none;
}
.no-iva{
font-size: 12px;
color: #B12704;
}
/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
@media (max-width: 991.98px) {
.border-lg-0 {
border: none !important;
}
}
@media screen and (max-height: 900px) {
.sidenav #footer-big{
position: relative;
}
}
/*END SIDE MENU*/
/*HEADER*/
.header{
font-size: 12pt;
background-color: #FFF;
line-height: 40px;
padding: 10px;
}
.header .sx{
font-size: 14pt;
}
.header a{
color: #686F72;
}
.header .separator{
height: 30px;
background-color: #BDCCD4;
width: 3px;
display: block;
float: left;
position: relative;
top: 6px;
}
.header a.new{
margin-left: 20px;
margin-right: 20px;
font-size: 14px;
display: block;
height: 30px;
float: left;
color: #000;
}
.header a.new span{
color: #BDCCD4;
font-size: 12px;
position: relative;
}
.header a.new:hover > span { color: #22B2D6; }
.header a:hover{
text-decoration: none;
}
.header .dx{
text-align: right;
}
.header .dx a.logout span{
color: #22B2D6;
font-size: 20pt;
line-height: 30px;
display: inline-block;
position: relative;
top: 5px;
}
.header .dx a.logout{
margin-right: 16px;
color: #212529;
font-size: 13px;
position: relative;
top: -13px;
}
.header .dx .change-password{
right: 26px;
color: #212529;
font-size: 10px;
position: absolute;
top: 9px;
color: #22B2D6;
cursor: pointer;
}
.header .dx a.logout .toggle-off{
display: none;
}
.header .dx a.logged-name{
margin-right: 5px;
position: relative;
top: -5px;
}
.header .dx a.logged-name img{
height: 38px;
}
.header .cart{
margin-left: 10px;
margin-top: 5px;
float: left;
font-size: 20px;
}
.empty-cart{
color: #BDCCD4;
cursor: default;
}
.filled-cart{
color: #22B2D6;
}
.filled-cart span{
position: relative;
font-size: 10px;
color: #FFF !important;
display: inline-block;
background-color: #22B2D6;
min-width: 15px;
height: 15px;
border-radius: 10px;
line-height: 15px;
text-align: center;
top: 2px;
left: -2px;
padding: 0 4px;
}
#acter{
top: -3px;
position:relative;
right: 4px;
color: #BDCCD4;
display: inline-block;
text-align: right;
}
#acter span{
font-size: 12px;
line-height: 12px;
position: relative;
top: 4px;
color: #212529;
}
#acter span a{
font-size: 12px;
line-height: 12px;
position: relative;
top: 4px;
color: #22B2D6;
}
.cons{
margin-top: 10px;
font-size: 12px;
}
.upcoming{
font-size: 10px;
font-style: italic;
}
/*---BOX-------*/
#myChart, #myChartConsolidato{height: 310px !important;}
.boxes{
height: 430px;
}
.mid_boxes{
height: 551px;
}
.big_boxes{
/*min-height: 1122px;*/
position: relative;
}
.auto_box{
background-color: #FFF;
position: relative;
}
.in_boxes{
background-color: #FFF;
min-height: 94%;
padding: 0 10px 0 10px;
}
.in_boxes h1{
padding: 10px 0px;
color: #000;
font-size: 24pt;
font-weight: 600;
}
.in_boxes h1 a{
display: block;
float: right;
color: #22B2D6;
font-size: 20pt;
margin-top: 6px;
}
.catalog h2{
padding: 0px 0px 10px 35px;
color: #B12704;
font-size: 16px;
font-weight: 600;
}
h2.red{
padding: 20px 0px 10px 10px !important;
color: #B12704 !important;
font-size: 16px !important;
font-weight: 600 !important;
}
.product h3{
padding: 10px 0;
color: #B12704;
font-size: 16px;
font-weight: 600;
}
.in_boxes h2{
padding: 20px 20px 6px 20px;
color: #B12704;
font-size: 16px;
font-weight: 600;
}
h2.granata{
padding: 0 !important;
color: #B12704 !important;
font-size: 16px !important;
font-weight: 600;
}
h2.granata a{
font-size: 16px !important;
margin: 0 !important;
color: #000 !important;
}
p.granata{
font-size: 12px !important;
}
.in_boxes h2 a{
display: block;
float: right;
color: #22B2D6;
font-size: 14px;
text-decoration: none !important;
}
.in_boxes h2 span{
color: #686f72;
font-size: 14px;
text-decoration: none !important;
font-weight: normal;
position: relative;
top: -3px;
}
.in_boxes h3{
margin: 10px 0;
padding-bottom: 20px;
padding-top: 20px;
color: #50566e;
color: #000;
font-size: 13pt;
font-weight: 600;
border-bottom: 2px solid #bdccd4;
}
.in_boxes h3 span{
color: #bdccd4;
font-size: 13pt;
margin-top: 4px;
margin-right: 20px;
}
.in_boxes .dash-info{
margin-top: 20px;
font-size: 12px;
color: #686f72;
}
.in_boxes .avviso{
margin-top: 20px;
text-align: right;
margin-right: 10px;
font-size: 12px;
}
/*---------------*/
/*----PAGE------*/
.pages{
padding-bottom: 40%;
}
.in_pages{
background-color: #FFF;
}
.in_pages .search_form_container{
padding: 0 30px;
}
.in_pages h2{
padding: 10px 20px;
top: 10px;
color: #000;
font-size: 24pt;
font-weight: 600;
}
.in_pages h2 a{
display: block;
float: right;
color: #22B2D6;
font-size: 20pt;
margin-top: 8px;
}
/*----------------GRID---*/
img.in_order{
border: 2px solid #BDCCD4;
}
.order_codice{
font-size: 12px;
margin-bottom: 5px;
color: #999999;
}
.order_descrizione{
font-size: 18px;
margin-bottom: 5px;
}
.order_marchio{
font-size: 12px;
margin-bottom: 15px;
}
.order_separator{
color: #BDCCD4;
font-size: 18px;
}
.order_rimuovi{
color: #999999;
}
.order_currency{font-size: 12px; color: #B12704;}
.order_currency_big{font-size: 16px; color: #B12704;}
.paypal-box{
margin: 15px;
border: 2px solid #BDCCD4;
font-size: 12px;
padding: 15px;
}
.paypal-box h2{
font-size: 16px;
color: #B12704;
margin: 10px 0;
padding: 0px;
}
.paypal-box i{
font-size: 26px;
color: #BDCCD4;
margin-right: 5px;
}
.paypal-box img{
max-width: 250px;
width: 100%;
margin: auto;
}
.paypal-box span{
font-size: 14px;
color: #BDCCD4;
}
.paypal-box span#totale_generale{
font-size: 14px;
color: #B12704;
font-weight: bold;
}
.paypal-box{
margin: 15px;
border: 2px solid #BDCCD4;
}
.jsgrid-header-row{
color:#FFF;
background-color: #0e7289;
font-size: 10px;
}
.jsgrid-alt-row>.jsgrid-cell{
background-color: #fFF;
border: 0;
border-bottom: 2px solid #bdccd4;
}
.jsgrid-row>.jsgrid-cell{
background-color: #fFF;
border: 0;
border-bottom: 2px solid #bdccd4;
}
.no-more-sellable>.jsgrid-cell{
background-color: #BDCCD4;
}
.no-more-sellable>.jsgrid-cell input{
background-color: #BDCCD4;
}
.jsgrid-selected-row>.jsgrid-cell{
background-color: #22B2D6;
color: #FFF;
}
.jsgrid-header-row>.jsgrid-header-cell{
background: transparent;
}
.jsgrid-header-sort-asc:before,.jsgrid-header-sort-desc:before{
border: 0;
}
.jsgrid-header-sort-asc:after {
content: "\f106";
font-family: 'Font Awesome\ 5 Free';
border: 0;
display: inline-block;
margin:5px 10px 0 10px;
}
.jsgrid-header-sort-desc:after {
content: "\f107";
font-family: 'Font Awesome\ 5 Free';
border: 0;
display: inline-block;
margin:5px 10px 0 10px;
}
.jsgrid-header-row .jsgrid-align-left{
text-align: left;
}
.jsgrid-header-row .jsgrid-align-right{
text-align: right;
}
span.euro{
color: #B12704;
}
.jsgrid-grid-header,
.jsgrid-grid-body{
overflow: auto;
border: 0;
}
#jsGrid{
margin: 20px auto;
}
.jsgrid-pager-container{
margin-top: 30px;
}
.jsgrid-pager{
text-align: right;
}
.total-row td{border: 0;}
.jsgrid-pager span{
border: 1px solid #22B2D6;
display: inline-block;
min-width: 40px;
text-align: center;
}
.jsgrid-pager span a{
color: #22B2D6;
}
.jsgrid-pager span:hover{
background-color: #22B2D6;
}
.jsgrid-pager span:hover a{
color: #FFF;
}
.jsgrid-pager span a:hover{
text-decoration: none;
}
/*----------------END GRID---*/
/*---------FORM-----------*/
.form_client{
position: relative;
}
.form_client label{
line-height: 40px;
}
.form_client #save_all{
position: absolute;
bottom: 0;
right: 0;
}
/*------------BRANDS----------------*/
#brands{
min-height: auto;
}
div.rounded_logo{
display: block;
color: #22B2D6;
padding: 15px;
border: 2px solid #22B2D6;
border-radius: 30px;
float: left;
margin: 16px 7px 0 16px;
}
h2.brands{
float: left;
margin-top: 10px;
}
h2.brands span{
font-size: 12px;
font-weight: normal;
}
span.back{
display: block;
float: right;
margin-top: 20px;
margin-right: 20px;
color: #686f72;
font-size: 12px;
}
span.back button{
color: #FFF;
background-color: #bdccd4;
}
span.back button:hover{
background-color: #6D8F9B;
}
.my-btn-light{
color: #FFF;
background-color: #bdccd4;
width: 200px;
}
.my-btn-light:hover{
background-color: #6D8F9B;
}
.my-btn-info{
color: #FFF;
background-color: #22B2D6;
width: 200px;
}
.my-btn-used{
color: #686f72;
background-color: #FFF;
width: 200px;
border: 2px solid #686f72;
}
#end_quotation:hover{background-color: #0E7289;}
h3.order{
color: #B12704;
font-size: 14px;
}
h3.order a{
float: right;
display: block;
color: #bdccd4;
}
.brands-container{
padding-right: 20px;
padding-left: 20px;
}
.brand-container{
padding-bottom: 33%;
padding-left: 0;
padding-right: 0;
}
div.brand{
border: 1px solid #bdccd4;
height: 96%;
width: 96%;
margin: 2%;
cursor: pointer;
position: absolute;
background-size: 70%;
background-position: center center;
background-repeat: no-repeat;
text-align: right;
color: #bdccd4;
padding: 3%;
font-size: 20px;
-webkit-filter: grayscale(100%);
filter: gray;
}
div.brand:hover{
-webkit-filter: grayscale(0%);
filter: none;
}
div.brand .icon{
font-size: 6vw;
text-align: center;
height: 60%;
display: table;
width: 100%;
}
div.brand .icon .content{
text-align: center;
display: table-cell;
vertical-align: middle;
}
div.brand span{
position: absolute;
display: block;
width: 100%;
text-align: center;
color: #000;
font-size: 14px;
bottom: 40px;
left: 0;
}
div.brand .foot{
position: absolute;
width: 100%;
background-color: #f2f2f2;
bottom: 0;
left: 0;
color: #999999;
text-align: center;
}
div.brand .foot hr{
margin: 16px auto;
width: 18%;
color: #FFF;
background-color: #999999; height: 2px; border: 0;
}
div.brand:hover{
border: 1px solid #22B2D6;
color: #22B2D6;
}
div.brand:hover > .foot{
background-color: #22B2D6;
}
div.brand:hover > .foot hr{
background-color: #FFF;
}
div.brand:hover > span{
color: #22B2D6;
}
.logo_cat{
margin-top: 20px;
width: 200px;
}
div.category-container{
padding: 10px;
}
div.category:hover{
border-left: 10px solid #0073aa;
background-color: #22B2D6;
color: #FFF;
}
div.category{
border: 1px solid #999999;
border-left: 10px solid #999999;
height: 120px;
padding: 10px;
cursor: pointer;
text-align: center;
font-size: 13px;
padding-top: 30px;
}
#subcategory{
margin-top: 40px;
}
#subcategory div{
color: #0073aa;
font-weight: bold;
padding: 0px;
}
#subcategory div span{
display: block;
float: right;
color: #22B2D6;
margin: 4px;
}
#subcategory div.alt{
padding: 5px;
cursor: pointer;margin: 0 10px;
}
#subcategory div:nth-of-type(4n+1){
background-color: #def4f9;
}
.grid{
margin: 0 10px !important;
}
.grid .jsgrid-header-row>.jsgrid-header-cell {
background-color: #0073aa;
}
.jsgrid-cell a {
color: #0073aa !important;
}
.jsgrid-header-cell{
font-size: 10px !important;
font-weight: 600 !important;
}
/*---------------------------------*/
/*--------PRODUCT-----------------*/
.product{
padding: 20px;
}
.product h2{
margin-top: 20px;
font-size: 26px;
}
.product .product_code{
color: #BDCCD4;
display: block;
font-size: 12px;
}
.product .video{
padding: 20px 1%;
}
.maggiori-informazioni{
color: #22B2D6 !important;
cursor: pointer;
}
.visualizza-dettagli-prodotto{
margin-top: 30px;
display: inline-block;
color: #22B2D6 !important;
cursor: pointer;
}
.product_gallery{
text-align: center;
}
.product_gallery img{
width: 100%;
padding: 5px;
border: 1px solid #BDCCD4;
}
.product-action-box{
border: 1px solid #BDCCD4;
margin-right: 15px;
padding: 20px;
font-size: 13px;
}
.promo-active{
background-image: url("../graph/promo-label.png");
background-repeat: no-repeat;
background-position: top right;
}
.promo-active-grey{
background-image: url("../graph/promo-label-grey.png");
background-repeat: no-repeat;
background-position: top right;
}
.promo-not-active{
background-image: url("../graph/promo-label-not.png");
background-repeat: no-repeat;
background-position: top right;
}
.product_gallery_small{
float: left;
margin: 1%;
margin-bottom: 10px;
}
.product_gallery_small_hidden{
display: none;
}
.vedi-tutte-foto{
font-size: 12px;
color: #22B2D6 !important;
cursor: pointer;
}
.product_body_detail{
padding: 0 15px;
}
.product_body{
font-size: 14px;
}
.product_body table{
margin-top: 20px;
width: 100% !important;
font-size: 14px;
table-layout: fixed;
}
.product_body table td{
padding: 4px;
/*width: 50%;*/
}
.product_body table tr td p{
margin: 0;
}
.product_body ul {
margin: 10px;
padding: 10px;
list-style: disc;
}
.product_body p {
font-size: 14px;
}
.product_body img {
width: 300px;
}
.product_body h2 {
margin: 5px 0 0 0;
padding: 0;
font-size: 18px;
}
.product_marca{
font-size: 12px;
}
.product_marca a{
cursor: pointer;
color: #22B2D6 !important;
}
.product_price_title{
display: inline-block;
width: 120px;
font-size: 12px;
}
.product_price_ok{
font-size: 16px;
color: #B12704;
font-weight: bold;
}
.product_price_ok_small{
color: #B12704;
}
.product_price_not{
display: inline-block;
text-decoration: line-through;
font-size: 12px;
}
.your_price{
font-size: 24px;
font-weight: bold;
}
.expedition_time{
font-size: 14px;
}
.back-button{
text-align: right;
padding: 10px;
font-size: 20px;
}
.back-button a{
color: #22B2D6;
}
#add_product_qty{
max-width: 100px;
display: inline-block;
margin-bottom: 5px;
}
.add_product_qty{
max-width: 100px;
display: inline-block;
margin-bottom: 5px;
}
.full-100{
width: 100%;
margin-top: 10px;
}
.attach a{
font-size: 16px;
color: #22B2D6;
font-weight: bold;
}
.attach {
color: #999999;
}
#prodotti_inseriti, .prodotti_inseriti{
display: none;
color: #008c29;
font-size: 14px;
margin-top: 10px;
font-weight: bold;
text-align: center;
}
.alt-box{
border: 1px solid #BDCCD4;
margin-right: 15px;
padding: 20px;
font-size: 12px;
}
#alt_value{
color: #B12704;
}
#alt_value_tot{
color: #B12704;
font-size: 16px;
}
/*------------------------------------*/
/*----------QUOTATION---------------*/
.dot{
width: 30px;
height: 30px;
margin: auto;
border-radius: 15px;
}
#quotation_registry, #quotation_box{
padding: 40px;
font-size: 13px;
}
#quotation_registry a, #quotation_box a{
color: #22B2D6;
display: inline-block;
font-size: 12px;
line-height: 20px;
top: -3px;
position: relative;
}
#quotation_registry a:hover, #quotation_box a:hover{
text-decoration: none;
}
#quotation_registry a i, #quotation_box a i{
font-size: 20px;
top: 3px;
position: relative;
}
.button-cart{
text-align: right;
font-size: 12px;
padding: 40px;
}
.button-cart a{
color: #22B2D6 !important;
font-weight: bold;
}
.button-cart button{
margin-top: 20px;
}
/*-------------------------------------*/
/*-------------VARIOUS-----*/
#size{
width: 80px;
display: inline-block;
background-image: url("../graph/sep.png");
background-position: 50px;
background-repeat: no-repeat;
background-size: auto 80%;
margin-right: 40px;
}
.find_container{
border: 1px solid #ced4da;
padding: 2px;
color: #ced4da;
border-radius: .25rem;
height: 40px;
display: inline-block;
}
.find_container a{
border-left: 1px solid #ced4da;
padding: 5px;
display: inline-block;
}
.find_container input{
border:0;
margin: 5px;
}
.find_container_header{
border: 1px solid #ced4da;
color: #ced4da;
border-radius: .25rem;
height: 36px;
display: block;
float: left;
margin-right: 20px;
margin-left: 20px;
margin-top: 3px;
}
.find_container_header a{
border-left: 1px solid #ced4da;
padding: 5px;
display: inline-block;
position: relative;
top: -3px;
}
.find_container_header input{
border:0;
margin: 0;
display: inline-block;
background-color: transparent;
margin-left: 3px;
/* height: 24px;*/
position: relative;
top: -4px;
}
.bottom{
position: absolute;
bottom: 0;
width: 100%;
}
.bottom div{
float: left;
width: 50%;
}
.bottom_left{
text-align: left;
}
.bottom_right{
text-align: right;
}
#add_client{
position: relative;
bottom: 54px;
left: 30px;
}
a.plus-1{
display: none;
position: absolute;
top:0px;
right: -25px;
}
/*-----------------------------------New Cat----------------------------------*/
.col-1-8{
width: 12.5%;
float: left;
}
.col-7-8{
width: 87.5%;
float: left;
}
.col-1-7{
width: 14.28%;
float: left;
}
#brand-list div.logo-box{
padding-bottom: 12.5%;
position: relative;
}
#brand-list div.logo-box .in-box{
cursor: pointer;
background-size: 70%;
background-position: center center;
background-repeat: no-repeat;
width: 96%;
height: 96%;
margin: 2%;
position: absolute;
top: 0;
left: 0;
border: 1px solid #bdccd4;
color: #bdccd4;
text-align: right;
padding: 10px;
}
#brand-list div.logo-box .icon{
font-size: 3.5vw;
text-align: center;
height: 60%;
display: table;
width: 100%;
}
#brand-list div.logo-box .icon .content{
text-align: center;
display: table-cell;
vertical-align: middle;
}
#brand-list div.logo-box span{
position: absolute;
display: block;
width: 100%;
text-align: center;
color: #000;
font-size: 14px;
bottom: 40px;
left: 0;
}
#brand-list div.logo-box .foot{
position: absolute;
width: 100%;
background-color: #f2f2f2;
bottom: 0;
left: 0;
color: #999999;
text-align: center;
}
#brand-list div.logo-box .foot hr{
margin: 16px auto;
width: 18%;
color: #FFF;
background-color: #999999; height: 2px; border: 0;
}
#brand-list div.logo-box .in-box:hover{
border: 1px solid #22B2D6;
color: #22B2D6;
}
#brand-list div.logo-box .in-box:hover > .foot{
background-color: #22B2D6;
}
#brand-list div.logo-box .in-box:hover > .foot hr{
background-color: #FFF;
}
#brand-list div.logo-box .in-box:hover > span{
color: #22B2D6;
}
hr.cat{
background-color: #f2f2f2; height: 2px;
margin: 20px 0;
border: 0;
}
.category-minibox{
display: block;
border: 1px solid #bdccd4;
margin: 5px;
cursor: pointer;
text-align: center;
font-size: 12px;
color: #bdccd4;
-webkit-filter: grayscale(100%);
filter: gray;
}
.category-minibox:hover{
-webkit-filter: grayscale(0%);
filter: none;
}
.category-minibox div{
background-color: #bdccd4;
height: 30px;
}
.category-minibox span{
font-size: 30px;
display: block;
margin: 10px;
color: #bdccd4;
}
.category-minibox div hr{
top: 14px;
width: 18%;
color: #FFF;
background-color: #FFF;
height: 2px;
border: 0;
margin: 0 auto;
position: relative;
}
.category-minibox:hover > span{
color: #22B2D6;
}
.category-minibox:hover > div{
background-color: #22B2D6;
}
h2.in-brand{
float: left;
margin-top: 10px;
padding: 10px 0px;
width: 100%;
}
h2.in-brand span{
font-size: 12px;
font-weight: normal;
}
h2.in-brand a{
display: block;
float: right;
}
h2.in-brand font{
color: #22B2D6;
}
a.category{
display: block;
cursor: pointer;
margin-left: 10px;
}
a.category:hover {
color: #22B2D6 !important;
text-decoration: underline !important;
}
a.sub-cat{
display: block;
background-color: #22B2D6;
color: #FFF !important;
padding: 10px;
font-size: 18px;
cursor: pointer;
}
.product-container-new{
width: 100%;
margin-bottom: 4px;
}
.sub-cat span{
display: block;
float: right;
}
.product-container-new .grid {
margin: 0 !important;
}
#stat_select{
display: none;
}
/*-------------------------------Nuovo Catalogo-------------------------------*/
.my-col-20{
width: 20%;
float: left;
margin-bottom: 20px;
border-right: 2px solid #bdccd4;
}
.my-col-80{
width: 80%;
float: left;
}
.catalog{
margin: 0;
background-color: #FFF;
}
.catalog-top{
width: 100%;
}
.catalog-top-left{
padding: 14px 35px;
width: 75%;font-size: 14px;
}
.catalog-top-left a{
cursor: pointer;
}
.catalog-top-left i{
color: #BDCCD4;
}
.catalog-top-right{
padding: 14px 27px 0 0;
float: right;
width: 25%;
text-align: right;
}
.catalog-top-right button{
font-size: 14px;
background-color: #22B2D6;
}
.catalog-top-right button i{
font-size: 16px;
}
.catalog-top-right button:hover{
background-color: #0E7289;
}
.top-banner{
padding: 0px 10px;
color: #000;
font-weight: bold;
font-size: 14px;
padding-bottom: 21px;
}
.top-banner-bordered{
border-bottom: 2px solid #bdccd4;
padding-bottom: 20px;
border-right: 0px;
margin-bottom: 20px;
}
.top-banner i{
font-size: 16px !important;
position: relative;
color: #22B2D6;
top: 2px;
}
.top-banner-no-space{
margin-bottom: 0px;
}
#categories{
padding: 0 10px 0 30px;
}
.top-banner-gray{
background-color: #bdccd4;
}
.category-list, .brand-list{
padding: 5px 10px;
color: #000;
font-size: 16px;
cursor: pointer;
}
.brand-list:hover{
text-decoration: underline;
}
.brand-list span{
color: #22B2D6;
font-size: 12px;
}
.brand-list-checked{
font-weight: bold !important;
background-image: url("../graph/tick.png");
background-repeat: no-repeat;
background-size: auto 50%;
background-position: center right;
}
.brand-list-unchecked{
background-image: url("../graph/gtick.png");
background-repeat: no-repeat;
background-size: auto 50%;
background-position: center right;
}
.brand-list-unchecked:hover{
background-image: url("../graph/tick.png");
background-repeat: no-repeat;
background-size: auto 50%;
background-position: center right;
}
.brand-list-checked small{
font-weight: bold !important;
}
.news-pagination span{
padding: 5px 0;
width: 30px;
text-align: center;
border: 1px solid #22B2D6;
display: inline-block;
cursor: pointer;
color: #22B2D6;
}
.news-pagination span.selected{
border: 1px solid #22B2D6;
color: #FFF;
background-color: #22B2D6;
}
.category-list-selected{
background-color: #bdccd4;
padding: 10px 10px;
color: #FFF;
font-size: 20px;
}
.category-list-sepatator{
width: 20px;
display: inline-block;
}
.subcategory-link-selected{
background-color: #f2f2f2;
}
.general-box{
padding: 0 15px 30px 15px;
cursor: pointer;
}
.general-box:hover .img-box i{
color: #22B2D6;
}
.general-box .img-box{
-moz-box-shadow: 0 0 3px #333333;
-webkit-box-shadow:0 0 3px #333333;
box-shadow: 0 0 3px #333333;
transition: box-shadow 0.5s;
text-align: center;
position: relative;
}
.general-box:hover .img-box{
-moz-box-shadow: 0 0 25px #333333;
-webkit-box-shadow:0 0 25px #333333;
box-shadow: 0 0 25px #333333;
}
.general-box .img-box i{
position: absolute;
top: 6%;
right: 10%;
color: #bdccd4;
}
.general-box .img-box img{
width: 92%;
margin: 4%;
}
#div-order-by-product{
display: inline-block;
font-weight: normal;
font-size: 12px;
width: 370px;
float: right;
line-height: 27px;
}
.img-box .bb{
position: absolute;
left:0px;
width: 25%;
height: 25%;
background-image: url("../graph/cups/icon-topseller-gen.png");
background-size: cover;
z-index: 1000;
}
.img-box .number_class{
position: absolute;
left:0px;
width: 25%;
height: 25%;
background-size: cover;
z-index: 1000;
padding-top: 5%; /* Sposta il testo a destra del 20% */
padding-right: 10%; /* Sposta il testo a destra del 20% */
font-weight: bold; /* Opzionale per migliorare la leggibilità */
font-size: 12px;
}
.img-box .promo{
position: absolute;
right: 0px;
background-color: transparent;
width: 25%;
height: 15%;
margin-top: 10px;
background-image: url("../graph/new-labels/promo.png");
background-size: contain;
background-repeat: no-repeat;
z-index: 999;
}
.img-box .new{
position: absolute;
right: 0px;
background-color: transparent;
width: 25%;
height: 15%;
margin-top: 10px;
background-image: url("../graph/new-labels/new.png");
background-size: contain;
background-repeat: no-repeat;
z-index: 999;
}
.img-box .new_promo{
top: 12%;
}
.general-box .title-box{
color: #000;
text-align: center;
padding: 6px;
font-size: 16px;
}
.product-box{
padding: 0 15px 30px 15px;
cursor: pointer;
display: flex;
}
/*.product-box:hover .title-box{
background-color: #686f72;
}
.product-box:hover .img-box i{
color: #22B2D6;
}*/
.product-box .shadow{
-moz-box-shadow: 0 0 3px #333333;
-webkit-box-shadow:0 0 3px #333333;
box-shadow: 0 0 3px #333333;
transition: box-shadow 0.5s;
height: 100%;
width: 100%;
align-self:stretch;
padding-bottom: 80px;
}
.product-box .shadow:hover{
-moz-box-shadow: 0 0 25px #333333;
-webkit-box-shadow:0 0 25px #333333;
box-shadow: 0 0 25px #333333;
}
.product-box .btn{
position: absolute;
bottom: 60px;
width: calc(100% - 50px);
left: 25px;
}
.product-box .img-box{
text-align: center;
position: relative;
padding-bottom: 100%;
}
.product-box .img-box i{
position: absolute;
top: 6%;
right: 10%;
color: #bdccd4;
}
.product-box .img-box img{
width: 100%;
}
.product-box .title-box{
color: #000;
padding: 10px;
font-size: 16px;
}
.product-box .title-box .codice-produttore{
font-size: 12px;
display: block;
}
.product-box .title-box .articolo-nome{
font-size: 14px;
display: block;
min-height: 40px;
}
.product-box .title-box .articolo-marchio{
font-size: 12px;
}
.product-box .title-box .articolo-marchio a{
cursor: pointer;
color: #22B2D6;
}
.product-box .title-box .discounted{
display: block;
color: #B12704;
font-size: 16px;
}
.product-box .title-box .dispo{
color: #FFF;
width: 100%;
display: inline-block;
border-radius: 6px;
font-size: 12px;
padding: 4px;
font-weight: bold;
text-align: center;
}
.product-box .title-box .dispo-box{
font-size: 10px;
margin-top: 6px;
}
.product-box .title-box .red, .dot_red{
background-color: red;
}
.product-box .title-box .yellow, .dot_yellow{
background-color: orange;
}
.product-box .title-box .green, .dot_green{
background-color: green;
}
.product-box .title-box .gray, .dot_gray{
background-color: gray;
}
.product-box .title-box .blue, .dot_blue{
background-color: #22B2D6;
}
.circle_red{
color: coral;
}
.circle_yellow{
color: gold;
}
.circle_green{
color: green;
}
.circle_gray{
color: gray;
}
.circle_blue{
color: #22B2D6;
}
.my-slick-container{
position: absolute;
width: 100%;
height: 100%;
}
.slick-prev {
left: 25px;
z-index: 10;
top: 80%;
}
.slick-next {
right: 25px;
z-index: 10;
top: 80%;
}
.slick-prev:before {
color: #bdccd4;
}
.slick-next:before {
color: #bdccd4;
}
.multiple-items-rel .slick-disabled{
display: none !important;
}
#order-by-product{
margin-bottom: 10px;
float: right;
border-radius: 4px;
border: 1px solid #686f72;
padding: 4px;
}
.maga-it{
text-align: center;
color: #000;
}
.maga-it span{
margin-top: 5px;
}
.maga-eu{
text-align: center;
color: #000;
}
.maga-eu span{
margin-top: 5px;
}
.maga-separator{
position: absolute;
width: 3px;
height: 76%;
background-color: #BDCCD4;
left: -1px;
bottom: -3px;
}
/*----------------------------------------------------------------------------*/
.torna-in-alto{
margin: auto;
width: 300px;
text-align: center;
display: block;
}
#send_mod_mail label{
margin: 0;
}
#send_mod_mail .avviso, #send_new_address .avviso, #send_promo_client .avviso {
text-align: center;
font-size: 1.6em;
color: #22B2D6;
font-weight: bold;
margin: 30px 0;
display: none;
}
.btn-my-small{
font-size: 0.6em;
line-height: 1.2em;
padding-left: 4px;
padding-right: 4px;
}
.my-btn-pay{
width: 100%;
white-space:normal;
font-size: 14px !important;
color: #000;
background-color: #ebf0f2;
height: 100%;
margin-bottom: 15px;
background-position: top right;
background-repeat: no-repeat;
border-radius: 15px;
cursor: pointer;
}
.my-btn-pay img{
height: 30px;
margin-bottom: 10px;
}
.my-btn-pay i{
color: #6a8c9b;
font-size: 35px;
margin-bottom: 10px;
}
.my-btn-pay:hover{
background-color: #d3dce0 !important;
}
.my-btn-pay-alt{
width: 100%;
white-space:normal;
font-size: 14px !important;
color: #FFF;
background-color: #6a8c9b;
height: 100%;
margin-bottom: 15px;
background-position: top right;
background-repeat: no-repeat;
border-radius: 15px;
}
.my-btn-pay-alt img{
height: 30px;
margin-bottom: 10px;
}
.my-btn-pay-alt i{
color: #FFF;
font-size: 35px !important;
margin-bottom: 10px;
}
.my-btn-pay big{
font-size: 16px !important;
}
.order-ae td{
background-color: #ADCCD4 !important;
}
.order-ae:hover td{
background-color: #0b5d70 !important;
}
#fast_cart{
position: fixed;
right: 90px;
bottom: 12px;
z-index: 30;
background-color: #22B2D6;
color: #FFF;
font-size: 16px;
border-radius: 16px;
padding: 10px;
box-shadow:0 10px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19) !important;
cursor: pointer;
}
h4.ranking{
color: #22B2D6;
font-size: 22px;
text-align: center;
}
h3.ranking{
color: #22B2D6;
font-size: 32px;
text-align: center;
}
.logo-img-in-product-box{
border:0;
cursor: pointer;
position: absolute;
bottom:10px;
right: 10px;
width: 25% !important;
}
/*-------------------------------------------------------------*/
table.game{
font-size: 12px;
}
table.game tr.active{
font-weight: bold;
color: #22b2d6;
}
table.game td {
border-bottom: 1px solid #e6f3ff;
}
.dataTables_wrapper{
font-size: 12px;
}
#payment-box-button{
position: absolute; width: calc(200% + 80px); right:0;
}
/*-------------------------------------------------------------*/
/*---------------------------/*ui-autocomplete-row*/
.ui-autocomplete{
width: 600px;
list-style-type: none;
margin: 0;
padding: 0;
}
.ui-autocomplete-row
{
padding:8px;
background-color: #f4f4f4;
border-bottom:1px solid #ccc;
font-weight:bold;
font-size: 12px;
height: 90px;
cursor: pointer;
}
.ui-autocomplete-row:first-of-type
{
padding:8px;
background-color: #fff;
border-bottom:1px solid #ccc;
font-size: 10px;
height: auto;
text-align: center;
cursor: auto;
color: #22B2D6;
}
.ui-autocomplete-row img
{
float: left;
display: inline-block;
margin-right: 10px;
width: 70px;
}
.ui-autocomplete-row div
{
float: left;
display: inline-block;
width: calc(100% - 80px);
}
.ui-autocomplete-row:hover
{
background-color: #ddd;
}
.ui-autocomplete-row:first-of-type:hover
{
background-color: #FFF;
}
/*-------------------------------------------------------------*/
/*---------------------------PAYMENT---------------------------*/
.payment-box{
border: 1px solid #c9d5dc;
padding: 15px 30px;
font-weight: bold;
}
.payment-box-grey{
background-color: #ebf0f2;
}
.payment-box-small-a{
color: #c9d5dc !important;
font-size: 12px;
cursor: pointer;
}
/*-------------------------------------------------------------*/
/*--------------PP button box---------------------------------------------*/
.pp_message{
margin-top: 20px;
}
/*-------------------------------------------------------------*/
/*--------------Info box---------------------------------------------*/
.new-info-box{
background-color: #f2f2f2;
padding: 20px;
margin-bottom: 20px;
}
.new-info-box .box-to-toggle-button{
color: #22B2D6 !important;
cursor: pointer;
display: inline-block;
font-size: 0.8em;
}
.a-new-info-box{
display: inline-block; margin-right: 20px; font-size: 0.8em; cursor: pointer; text-decoration: underline !important;
}
.a-new-info-box span{
color: #22B2D6 !important; cursor: pointer;
}
.new-info-box img{
float: left;
object-fit: contain;
height: 150px;
width: 150px;
background-color: #FFF;
margin-right: 20px;
}
@media only screen and (max-width: 1600px) {
.dispo{
font-size: 10px !important;
font-weight: normal;
}
}
@media only screen and (max-width: 1200px) {
#payment-box-button{
position: absolute; width: 100%; right:0;
}
#stat_month, #stat_clients, #stat_prods{
display: none;
}
#stat_cons{
max-width: 100%;
}
#stat_select{
display: block;
background-color: #FFF;
padding: 15px 0 15px 15px;
}
}
@media only screen and (max-width: 1400px) {
select.form-control{
font-size: 13px;
height: 34px !important;
}
.section_filter_cat_top{
font-size: 13px;
}
.btn{
font-size: 13px;
}
.order_currency_big {
font-size: 13px;
}
}
@media only screen and (max-width: 1200px) {
div.brand .icon{
font-size: 12vw;
}
#brand-list div.logo-box .foot{
display: none;
}
#brand-list div.logo-box span{
bottom: 0;
font-size: 12px;
}
}
@media only screen and (max-width: 768px){
.ui-autocomplete
{
width: 70%;
}
.ui-autocomplete-row {
height: auto;
}
}