@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');	
a{text-decoration:none!important;}
li{list-style-type: none!important;}
.heading1{font-size: 2.5rem;} .heading2{font-size: 2rem;} .heading3{font-size: 1.75rem;} .heading4{font-size: 1.5rem;} .heading5{font-size: 1.25rem;} .heading6{font-size: 1rem;}
.fullpad{padding:0!important; margin:0!important;}
.medium{font-family: 'Roboto', sans-serif;}	
.smallfnt{font-size: 13px;}
.forumuser {position: relative;}
.form-group {margin-bottom: 0rem !important;}
.forumuser input[type="search"] {
	padding: 11px 27px;
	display: inline-block;
	border: 1px solid #ccc;
	box-sizing: border-box;
	border-radius: 4px;
	font-size: 14px;
	width: 100%;}
.forumuser i {
	position: absolute;
	right: 8px !important;
	top: 15px;
	color: #0075e7;
	font-size: 13px;}
.product-box {
	background: #FFFFFF;
	display: flex;
	padding: 12px 10px;}	
.transparent-blue-button {
	border: 1px solid #0077D1;
	font-size: 12px;
	border-radius: 30px;
	padding: 7px 12px;
	color: #0077D1 !important;}
.transparent-blue-button2 {
	border: 1px solid #0077D1;
	font-size: 11px;
	border-radius: 30px;
	padding: 7px 8px;
	color: #0077D1 !important;}	
.product-img{width:80px; border-radius: 10px;}	
.fnt1{font-size: 14px;}
.fnt2{font-size: 13px; font-weight: bold;}
.fnt3{font-size: 13px; color:#6f6f6f;}
.fnt4 {font-size: 13px; color: #d3d3d3;}

.top-fixed {
	position: sticky;
	top: 0;
	width: 100%;
	z-index: 5;}
.bottom-fixed {
	position: fixed;
	bottom: 0;
	width: 100%;}
.bottom-fixed1 {
	position: fixed;
	bottom: 45px;
	width: 100%;}	
.balancefnt{font-size: 13px;}	
.feature-gd {
	background: white;
	padding: 7px;
	border-radius: 8px;
}	
.icon i {
	color: #db241e;
	font-size: 25px;
	background: rgb(13 54 159 / 9%);
	width: 35px;
	height: 35px;
	line-height: 35px;
	border-radius: 50%;
	text-align: center;}	
.fixed-bottom-clr{background-color: #0077D1;}	
.badges {
	position: absolute;
	background-color: #f10a0a;
	border-radius: 50%;
	color: #fff;
	width: 20px;
	height: 20px;
	top: -10px;
	right: 80px;
	font-size: 10px !important;
	bottom: 11px;
	border: 2px solid white;}
.badges1 {
	position: absolute;
	background-color: #f10a0a;
	border-radius: 37%;
	color: #fff;
	width: 25px;
	height: 25px;
	font-size: 12px !important;
	bottom: 59%;
	border: 2px solid white;
	left: 0px !important;}	
.badgescntr {align-items: center;display: flex; place-content: center;}
.line{border-bottom:1px solid #ababab;}
.order-card{background-color: #eee;}
.clr-red{color: #ff5c5c; font-size: 12px;}
.bin-clr{color:#6f6f6f;}
.desktop-fixed1 .dropdown-menu {width:350px; top:12px!important;}
.drop-brdr{border-bottom: 1px solid #eaeaea !important;}
.desktop-fixed{position: fixed; bottom: 0; left:35%;}
.desktop-fixed1{position: sticky; bottom: 0; width: 100%;}
.fixed-bottom-clr1{background-color: #0077D1; padding:10px 10px; border-radius: 50px;}	
.deskpad{padding:15px 6px 0 6px!important;}
.changeicns {
	width: 15px;
	height: 15px;
	background: #fff;
	border-radius: 4px;
	line-height: 9px;
	text-align: center;
	color: #0077d1;
	border: none;}
.icnsfnt{font-size: 11px;}	
.number{border: 1px solid #0077d1;
	border-radius: 50px;
	width: 75px;
	float: right;
	text-align: center;
	padding: 2px;}	
.number input {
	height: 25px;
	width: 30px;
	text-align: center;
	font-size: 13px;
	border: 1px solid #ddd;
	border-radius: 4px;
	display: inline-block;}
.box-scroll{height:300px; overflow-y: hidden; overflow: scroll; scrollbar-width:thin;}
.order-btn{background-color:#0077d1; color:#fff; border-color:#0077d1; padding:8px 16px; border-radius: 5px;}  
.category-bg{background-color:#0077d1; color: #fff; text-align: center; text-transform: uppercase; }
#preview_cover .navbg{background-color:#0077d1;}
.nav-straight li {display: inline-block; margin-right: 15px;}
.signin_button {
	background-color: #FFF;
	color: #000 !important;
	padding: 5px 12px;
	border-radius: 5px;
	font-size: 14px;}
.navdrp .dropdown-menu{width:200px!important; top:66px!important;}
.inner-login{width: 35px; position: absolute; left: 8px; top: 20px;}
.navdrp .dropdown-item{padding: 7px 15px!important;}
.navdrp .dropdown-menu-right {right: -18px !important; left: auto;}
.smallborder1 {width: 170px; height: 1px; margin: 0 10px; background-color: #A0A0A06E;}
.navdrp .dropdown-menu::before {
	content: '';
	display: block;
	border-top: 12px solid transparent;
	border-left: 18px solid #0077d1;
	border-bottom: 12px solid transparent;
	position: absolute;
	top: -19%;
	right: 34px;
	transform: rotate(270deg);
	opacity: 1;}
.login-profile {width: 40px; height: 40px;}	
.login-label {font-size: 14px; color: #999;}
.box .form-control {
    padding: 15px 5px;
    border: 1px solid #3b67b3;
    border-radius: 0px;
    border-top: none;
    border-left: none;
    border-right: none;}
.form-control:focus {box-shadow: none; border: 2px solid #0077d1!important;}
.loginbtn{background-color: #0077d1; color: #fff; padding: 8px 25px;  border:2px solid #0077d1; transition: .15s ease-in-out;}
.loginbtn:hover{background-color: #fff; color: #0077d1; }
.frgtpswd{font-size: 13px; text-decoration: underline!important; color:#222!important;}
.rgstr{font-size: 14px; color:#222;}
.rgstr:hover{color:#222; text-decoration: underline;}
.btn-secondary{background-color: #fff!important; border-color:#fff!important; color:#000!important;}
input::placeholder {font-size: 13px;}


@media (min-width:1px) and (max-width:767.98px){
.category-para {font-size: 12px;}
.time-of-year1 .tooltip1 {left: -148px!important; width: 200px;}
.time-of-year1 .tooltip1::after{left: 81%!important;}
}	

@media (min-width:768px) and (max-width:991.98px){
.desktop-fixed {left: 23%;}
.badges1 {bottom: 56%; left: 32%;}
.category-para {max-width: 400px; font-size: 13px;}
}

*{transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);}
.btn {
	font-size:1.1em;
	padding:20px 0;
	color:#fff;
	border-radius:50px;
	margin: auto;}
.btn span input{
	color:white;
	font-size:0;
	padding:10px;
	visibility: hidden;}
.btn:hover {padding:2px 20px 2px 10px;}
.btn:hover span input {
	height:25px;
	font-size:15px;
	visibility:visible;
	width: 170px;}
.btn:hover .ico {
	margin-left: 55px;
	transform: rotate(360deg);
	background-color:transparent ;
	top: 34px;}
.btn:hover .span input{visibility:visible;}
.ico {
	transition: all 0.5s;
	background-color: #fff;
	color: #E94751;
	width: 30px;
	height: 30px;
	padding:5px 0;
	border-radius: 20px;
	position: absolute;
	margin-left: -15px;
	margin-top: -25px;
	font-size: 13px;}
.ico::before {
	transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
	content: "\f002" !important;
	font-family:FontAwesome;
	margin-left:-5px;}
.btn:hover .ico::before {
	transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
	content: "\f061" !important;
	font-family:FontAwesome;
	margin-left:-5px;}
.category_btn{background-color: #fff;
	color: #000;
	padding: 5px 8px;
	font-size: 14px;
	border-radius: 5px;
	width: 110px;
	height: 30px;}
.category-box a {
	display: block;
	letter-spacing: .5px;
	text-transform: uppercase;
	font-size: 15px;
	list-style: none;
	width: 100%;
	border-bottom: .5px dashed #9ea6b9;
	color: #3e2f2f;
}
.category-box a:hover {	background-color: #ececec7a;}
.time-of-year {
	color: #fff;
	font-size: 18px;
	text-align: center;
	width: 45px;
	transform: translateZ(0);
	-webkit-transform: translateZ(0);}
.time-of-year .tooltip {
	border-radius: 3px;
	bottom: 30px;
	font-size: 20px;
	display: block;
	left: -213px;
	opacity: 0;
	padding: 15px;
	pointer-events: none;
	position: absolute;
	width: 320px;
	z-index: 1102;
	-webkit-transform: translateY(10px);
	transform: translateY(10px);
	-webkit-transition: all .7s ease-out;
	transition: all .7s ease-out;}
.time-of-year .tooltip::after {
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	border-top: 10px solid #2980b9;
	bottom: 5px;
	content: " ";
	height: 0;
	left: 75%;
	margin-left: -13px;
	position: absolute;
	width: 0;
	transform: rotate(0deg);}
/*.time-of-year:hover .tooltip {
	opacity: 1;
	pointer-events: auto;
	-webkit-transform: translateY(0px);
	transform: translateY(0px);}*/
.search_cover .tooltip {
	height: auto !important;
	transform: none !important;
	opacity: 0 !important;
}
.show_search .tooltip {
	opacity: 1 !important;
	pointer-events: auto;
	-webkit-transform: translateY(0px);
	transform: translateY(0px);
}
.dropbtn {font-size: 16px;border: none;cursor: pointer; width:100%;}
.dropdown {position: relative;display: inline-block;text-align:center; width: 100%; z-index:2;}
.dropdown-content {display: none; position: absolute; overflow: auto; top: 35px; background-color:white; width: 100%; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; height: 300px;}
.dropdown-content li a {color:black; padding: 5px 10px; text-decoration: none; display: block; font-size: 13px;}
.ulmobile{list-style-type: none; padding: 0;}
.show {display: block;}
.dropdown-content {display: block;visibility: hidden;opacity:0;-webkit-transform-origin: top;transform-origin: top;
	-webkit-animation-fill-mode: forwards;animation-fill-mode: forwards; -webkit-transform: scale(1, 0); transform: scale(1, 0);
	transition: all 1s linear;-webkit-transition: all .2s linear;}
.dropdown-content.show {display: block;visibility: visible;opacity:1;-webkit-transform: scale(1, 1);transform: scale(1, 1);}	
.canvas-sticky{position: sticky; top: 0; background: #2980b9; border-bottom: 1px solid #d7d7d7; z-index: 1;}
.canvas-btn-order{background-color: #2980b9; color:#fff; padding:10px; font-size: 15px; cursor: pointer;}	
.canvas-fixed{position:sticky; bottom:0; width: 100%; z-index: 999; background-color: #fff; border-top: 1px solid #c1c1c1;}
.inputbox-border{border: 2px solid #0077d1;}
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}
.strike {
	text-decoration: line-through;
	text-decoration-color: #000000 !important;
	text-decoration-thickness: 2px !important;
}

.canvas-btn-submit{background-color: #28a745; color:#fff; padding:9px 10px; font-size: 15px;}	

.canvas-btn-back{background-color: #dc3545;; color:#fff; padding:10px; font-size: 15px; cursor: pointer;}	

.select2-container .select2-selection--single {
	height: auto !important;
	box-shadow: 0px !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered { padding-top: 5px; }
.select2-container--default .select2-selection--single .select2-selection__arrow { height: calc(1.5em + .75rem + 2px) !important; }
.select2-container--default .select2-selection--single .select2-selection__rendered { background-color: #fff !important;}

.pricelist_table th, .pricelist_table td {
	padding: 10px;
	border: 1px solid #000;
} 
@media (max-width: 767px) {
	.hide_small { display: none; }
}
.pricelist_table .category_row { text-transform: uppercase; }
.pricelist_table .product_image {
	max-width: 60px;
	max-height: 60px;
	cursor: pointer;
}
@media (max-width: 575px) {
	.pricelist_table .product_image {
		max-width: 30px;
		max-height: 30px;
		cursor: pointer;
	}
	.pricelist_table th, .pricelist_table td, .strike {
		padding: 2px !important;
		font-size: 12px !important;
	}
}

#grid_view .category-bg {
	padding: 10px;
}
#grid_view .secpad {
	padding: .5rem 3px 0 !important;
}
#grid_view .feature-gd {
	padding: 5px 15px 5px 15px;
	border-radius: 8px;
	height: 150px;
	margin-bottom: 0px;
	border: 1px solid #454b51 !important;
}
#grid_view .sno, .box_sno {
	position: absolute;
	padding: 0px 8px 0px 8px;
	top: 8px;
	left: 3px;
	font-size: 14px;
	border-radius: 8px 0px 8px;
	color: #000;
	border: 1px solid #454b51 !important;
}
.box_sno {
	border-radius: 0px 0px 8px;
	top: 0px;
	left: 0px;
}
#grid_view .icon img {
	max-width: 80px;
	max-height: 80px;
}
#grid_view .qty_box {
	width: 50px !important;
	margin-bottom: 10px !important;
	height: 35px !important;
	padding: 5px !important;
	border: 1px solid #454b51;
	text-align: center;
}
#grid_view .pricebox {
	position: absolute;
	padding: 5px 5px;
	bottom: 0px;
	right: 3px;
	font-size: 15px;
	border-radius: 22px 0 8px 0;
	color: #000;
	width: 100px;
	text-align: center;
	border: 1px solid #454b51 !important;
}
#grid_view .qtypad {
	padding-left: 65px;
}

span.infos {
	font-size: 14px;
	line-height: 15px;
	display: inline-block;
	color: #d93025;
}
span.infos i { margin-right: 5px; }

.search_cover { position: relative; }
.search_products_cover {
	max-height: 300px;
	overflow-y: scroll;
	scrollbar-width: thin;
	position: absolute;
	left: 0px;
	background-color: #fff;
	overflow-x: hidden;
	border-radius: .25rem;
	display: none;
}
.desktop_search {
	bottom: 54px;
}
.mobile_search {
	top: 44px;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	border: none !important;
}
.search_product {
	text-align: left;
	display: none;
}
.mobile_search .search_product { padding: 0px !important; }
.mobile_search .search_product a {
	font-size: 14px;
	line-height: 15px;
	padding: .25rem 1.5rem;
}
.mobile_search .search_product a:hover {
	color: #fff !important;
	text-decoration: none;
	background-color: #db2226 !important;
  }
.product_highlight {
	box-shadow: 0px 0px 10px #000;
	border-radius: 5px;
	-webkit-transform: scale(1.2);
	transform: scale(1.2);
	z-index: 99;
	background: #fff;
}

.box_product_image { height: 250px; }
.box_product_name { height: 50px; }

.w-60 { width: 60% !important; }
.w-40 { width: 40% !important; }

.card-shadow{-webkit-transform: scale(1.15);
	transform: scale(1.15);
	z-index: 1;
	background: #fff;
	box-shadow: 0 .5rem 1rem rgba(0,0,0,.15) !important;}

.ribbons {
position: absolute;
right: 0px; 
top: 0px;
z-index: 1;
overflow: hidden;
width: 60px; 
height: 60px; 
text-align: right;}
.ribbons span {
font-size: 10px;
color: #fff; 
text-transform: uppercase; 
text-align: center;
font-weight: bold; 
line-height: 20px;
transform: rotate(45deg);
width: 90px; 
display: block;
position: absolute;
top: 12px; 
right: -21px;}
.ribbons span::before {
content: '';
position: absolute; 
left: 0px; 
top: 100%;
z-index: -1;}
.ribbons span::after {
content: '';
position: absolute; 
right: 0%; top: 100%;
z-index: -1;}
.red span {background: linear-gradient(#F70505 0%, #8F0808 100%);}
.red span::before {border-left-color: #8F0808; border-top-color: #8F0808;}
.red span::after {border-right-color: #8F0808; border-top-color: #8F0808;}

		
@media (min-width:1px) and (max-width:767.98px){
.ribbons{width: 60px!important; height: 60px!important; }
.ribbons span {transform: rotate(45deg); width: 73px!important; top: 5px!important; right: -21px!important; font-size: 8px!important;}
}

@media (min-width:768px) and (max-width:991.98px){
.ribbons{width: 75px !important; height: 75px !important; left: 115px!important; top: 23px!important;}
.ribbons span {width: 83px !important; top: 7px !important; right: -22px !important; font-size: 8px !important;}
}
.buttonhero2 {
	display: inline-block;
	margin: 0 auto;
	border-radius: 10px;
	-webkit-border-radius: 10px;
	box-shadow: 0px 3px rgba(128,128,128,1), 0px 4px rgba(118,118,118,1), 0px 5px rgba(108,108,108,1), 0px 6px rgba(98,98,98,1), 0px 7px rgba(88,88,88,1), 0px 8px rgba(78,78,78,1), 0px 14px 6px -1px rgba(128,128,128,1);
	transition: -webkit-box-shadow .1s ease-in-out;
	-webkit-transition: -webkit-box-shadow .1s ease-in-out;}
.buttonhero2 span {
	background-color: #D2151E;
	background-image: -webkit-gradient( linear, left bottom, left top, color-stop(50%,rgba(255,255,255,0)),color-stop(50%,rgba(255,255,255,0.3)),color-stop(100%,rgba(255,255,255,0.2)));
	background-size: 100%, 100%, 100%, 4px 4px;
	border-radius: 10px;
	transition: -webkit-transform .1s ease-in-out;
	display: inline-block;
	padding: 10px 40px 10px 40px;
	color: #fff;
	text-transform: uppercase;
	font-weight: 700;}
.check_order_button { font-size: 20px; }
.confirm_order_button { font-size: 18px; }
.buttonhero2:active {box-shadow: 0px 3px rgba(128,128,128,1),0px 4px rgba(118,118,118,1),0px 5px rgba(108,108,108,1), 0px 6px rgba(98,98,98,1),0px 7px rgba(88,88,88,1),0px 8px rgba(78,78,78,1), 0px 10px 2px 0px rgba(128,128,128,.6);}
.buttonhero2:active span {-webkit-transform: translate(0, 5px); transform: translate(0, 5px);} 
@media (min-width:768px){
	.list_quantity { width: auto; margin: auto; }
	.list_amount { width: auto; margin: auto; }
}

@media (min-width:1px) and (max-width:767px){
	.list_quantity { width: 50px; font-size: 12px; }
.list_amount { width: 50px; font-size: 12px; }

.box_product_name { height: 75px; }
}