@charset "utf-8";

:root {
	--theme-red: #d43b2b;
	--theme-red-hover: #f05241;
}


/*
	=================================================================================
	CSS INFO  /shop/css/commerce.css
	=================================================================================
	
	version: 	1.1
	fecha: 		20.11.2015

*/

/*
  =================================================================================
  TABLA DE CONTENIDOS
  =================================================================================
  
  - CLASES GENERALES
  - LAYOUT
  - CABECERA
  - PASOS
  - CART
    > TABLA RESPONSIVE
    > CAMPOS ESPECIALES
    > RESUMEN
	- FORMULARIOS
		> CONTROL DE ERRORES
		> CUPÓN DESCUENTO
	- BOTONES
	- ACORDEÓN
	- DIRECCIONES
	- CLASES DE AYUDA
	- MEDIA QUERIES
	- MODALES
		> addresses modal
		> footer message
		> modal alert
		> outside alert
		> modal bootstrap



	- GUS

*/


/*
	=================================================================================
	CLASES GENERALES
	=================================================================================
*/

	body {
		font-family: 'Montserrat', sans-serif;
	}

	a {
		text-decoration: none !important;
	}
	a:hover, a:active, a:focus {
		text-decoration: underline !important;
		color: var(--theme-red);
	}

	h3 {
		display: block;
		margin: 0 0 15px 0;
		font-size: 18px;
		font-weight: 600;
		line-height: 1.2;
		/*color: rgb(68, 68, 68);*/
		color: var(--theme-red);		
	}

	h4 {
		font-size:16px;		
	}
	@media screen and (max-width: 992px) {
		h4 {
			font-size:14px;
		}
	}

	body.no_icons .button .glyphicon {
		display: none !important;
	}

	.noscroll {
		overflow: hidden !important;
		position: fixed;
	}



/*
	=================================================================================
	LAYOUT
	=================================================================================
*/

	.container,
	.row {
		-webkit-transition: all .3s ease;
		-o-transition: all .3s ease;
		transition: all .3s ease;
	}

	#footer {
    background-color: #FFF;
    border-top: 1px solid rgba(0,0,0,0.2);
    padding: 20px 0 20px 0;
    margin-top: 40px;
	}



/*
	=================================================================================
	CABECERA
	=================================================================================
*/

	.logo {
		height: 70px;
		padding-top: 15px;
	}
	
	.logo img { 
		height: 46px;
		margin-top: 5px;
		-webkit-transition: all .3s ease;
		-o-transition: all .3s ease;
		transition: all .3s ease;
	}

 

/*
	=================================================================================
	PASOS
	=================================================================================
*/

	/* Anulamos la transición por defecto de bootstrap */
	.progress-bar {
    -webkit-transition: none !important;
    -o-transition: none !important;
    transition: none !important;
	}

	#steps {
		background: #f8f8f8;
		border-top: 1px solid #e7e7e7;
		border-bottom: 1px solid #e7e7e7;
		padding-top: 15px; /*** 40px */
		padding-bottom: 15px; /*** 40px */
		margin-bottom: 40px;
	 	-webkit-transition: all .3s ease;
		-o-transition: all .3s ease;
		transition: all .3s ease;
	}

	#steps .bs-wizard-step { padding: 0; position: relative; }
	#steps .bs-wizard-step + .bs-wizard-step {}
	#steps .bs-wizard-step .bs-wizard-stepnum {color: #595959; font-size: 16px; margin-bottom: 5px;}
	#steps .complete .bs-wizard-stepnum, #steps .active .bs-wizard-stepnum { font-weight: bold; }
	#steps .bs-wizard-step .bs-wizard-info {color: #999; font-size: 16px;}
	#steps .bs-wizard-step > .bs-wizard-dot {position: absolute; width: 30px; height: 30px; display: block; background: #f2c0c3; top: 45px; left: 50%; margin-top: -15px; margin-left: -15px; border-radius: 50%;} 
	#steps .bs-wizard-step > .bs-wizard-dot:after {content: ' '; width: 14px; height: 14px; background: var(--theme-red); border-radius: 50px; position: absolute; top: 8px; left: 8px; } 
	#steps .bs-wizard-step > .progress {position: relative; border-radius: 0px; height: 8px; box-shadow: none; margin: 20px 0; background: #eaeaea;}
	#steps .bs-wizard-step > .progress > .progress-bar {width:0px; box-shadow: none; background: #f2c0c3;}
	#steps .bs-wizard-step.complete > .progress > .progress-bar {width:100%;}
	#steps .bs-wizard-step.active > .progress > .progress-bar {width:50%;}
	#steps .bs-wizard-step:first-child.active > .progress > .progress-bar {width:0%;}
	#steps .bs-wizard-step:last-child.active > .progress > .progress-bar {width: 100%;}
	#steps .bs-wizard-step.disabled > .bs-wizard-dot {background-color: #eaeaea;}
	#steps .bs-wizard-step.disabled > .bs-wizard-dot:after {opacity: 0;}
	#steps .bs-wizard-step:first-child  > .progress {left: 50%; width: 50%;}
	#steps .bs-wizard-step:last-child  > .progress {width: 50%;}
	#steps .bs-wizard-step.disabled a.bs-wizard-dot{ pointer-events: none; }



/*
	=================================================================================
	CART
	=================================================================================
*/

	/*
		CART > TABLA RESPONSIVE
		Basada en https://css-tricks.com/responsive-data-table-roundup/
	*/
		#tabla-responsive table {
			width: 100%
		}

		#tabla-responsive thead tr th {
			vertical-align: bottom;
			border-bottom: 1px solid #000;
			line-height: 20px;
			font-weight: bold;
			font-size: 16px;			
		}

		#tabla-responsive td {
		  /*padding: 12px 15px;*/
		  vertical-align: middle;
		  border-color: #E5E5E5;
		  border-bottom: 1px solid #dddddd;
		}

		#tabla-responsive .glyphicon {
			font-size: 12px;
			color: #333;
		}
		#tabla-responsive .glyphicon:hover {
			color: var(--theme-red);
			cursor: pointer;
		}

		#tabla-responsive td:first-child {
			padding-left: 0;
			text-align: center;
		}
		#tabla-responsive td img {
			height: 60px;
		}


		#tabla-responsive tbody td:last-child {
			/*text-align: center;*/
		}

		#tabla-responsive thead .quantity {
			text-align: center;
		}
		#tabla-responsive thead .subtotal {
			text-align: right !important;
		}

		#tabla-responsive .image {
			width: 100px;
		}
		#tabla-responsive .price {
			width: 125px;
		}
		#tabla-responsive .quantity {
			width: 112px;
		}
		#tabla-responsive .subtotal {
			width: 110px;
		}
		#tabla-responsive .remove {
			width: 15px;
		}



		@media only screen and (min-width : 601px) {

			/* Si estoy mostrando la tabla en formato normal, elimino el borde inferior de la última fila */
			#tabla-responsive tbody tr:last-child td {
				border: 0;
			}
			
		}

		@media only screen and (max-width: 600px) {
			
			#tabla-responsive .image,
			#tabla-responsive .price,
			#tabla-responsive .quantity,
			#tabla-responsive .subtotal,
			#tabla-responsive .remove {
				width: auto;
			}


			/* Si estoy viendo la tabla en formato cuadrícula elimino los border internos */
			#tabla-responsive tbody tr td {
				border: 0;
			}

			/* Force table to not be like tables anymore */
			#tabla-responsive table, 
			#tabla-responsive thead, 
			#tabla-responsive tbody, 
			#tabla-responsive th, 
			#tabla-responsive td, 
			#tabla-responsive tr { 
				display: block; 
			}
		 
			/* Hide table headers (but not display: none;, for accessibility) */
			#tabla-responsive thead tr { 
				position: absolute;
				top: -9999px;
				left: -9999px;
			}
		 
			#tabla-responsive tr {
				border: 1px solid #000;
				border-radius: 8px;
				margin-bottom: 15px;
				padding: 10px;
			}
		 
			#tabla-responsive td { 
				/* Behave like a "row" */
				border: none;
				border-bottom: 1px solid #eee; 
				position: relative;
				padding-left: 25%;
				white-space: normal;
				text-align:left;
			}
		 	#tabla-responsive td:before { 
				/* Now like a table header */
				position: absolute;
				/* Top/left values mimic padding */
				top: 6px;
				left: 8px;
				width: 30%; 
				padding-right: 10px; 
				white-space: nowrap;
				text-align:left;
				font-weight: bold;
			}
			#tabla-responsive td:first-child { 
				padding: 5px; 
				text-align: center;
			}
			#tabla-responsive td:first-child img {
				display: block;
	  		max-width: 100%;
	  		height: auto;
	  		max-height: 200px;
	  		margin: 0 auto;
			}
		 	#tabla-responsive td:before {
		 		content: attr(data-title);
		 	}
		 	#tabla-responsive tbody .quantity {
				text-align: left !important;
			}
			#tabla-responsive tbody td:nth-child(6) {
				text-align: center !important;
				padding: 10px 0;
				color: var(--theme-red);
				font-weight: 600;
			}

		}

		
		
			



		/*
			CART > CAMPOS ESPECIALES
		*/
			#tabla-responsive tbody .quantity {
				text-align: center;
				font-size: 0;
			}
			#tabla-responsive tbody .quantity .qty {
				display: inline-block;
				width: 50px;
				height: 40px;
				line-height: 1;
				border: 0;
				border-left: none !important;
    		border-right: none !important;
				text-align: center;
				padding: 0;
				font-size: 14px;
				font-weight: bold;
			}
			#tabla-responsive tbody .quantity .plus,
			#tabla-responsive tbody .quantity .minus {
				display: inline-block;
				cursor: pointer;
				border: 0;
				padding: 0;
				width: 30px;
				height: 40px;
				line-height: 1;
				text-align: center;
				background-color: white;
				font-size: 15px;
				font-weight: bold;
				transition: background-color .2s linear;
				-webkit-transition: background-color .2s linear;
				-o-transition: background-color .2s linear;
				line-height: 0;
			}

			#tabla-responsive tbody .quantity .plus:hover,
			#tabla-responsive tbody .quantity .minus:hover {
				/*border: 1px solid var(--theme-red) !important;*/
				color: var(--theme-red) !important;				
			}

			#tabla-responsive tbody .quantity .minus {
				border-radius: 4px 0 0 4px !important;
			}
			#tabla-responsive tbody .quantity .plus {
				border-radius: 0 4px 4px 0 !important;
			}


		/*
			CART > RESUMEN
		*/
			.resume {
				padding: 10px 20px;		    
		    background: #ffffff;
		    color: #333;
		    margin-bottom: 20px;
		    border: 1px solid #333;
				border-radius: 8px;
			}

			.resume h3 {
				color: #000 !important;
			}
			table#summary {
				margin-bottom: 10px;
			}
			table#summary td {
				text-align: right;
			}
			table#summary h2 {
				margin-top: 0;
				font-size: 20px;
			}
			table#summary h3 {
				text-align: center;
				margin-bottom: 0;
			}
			

.table>tbody>tr>td,
.table>tbody>tr>th,
.table>tfoot>tr>td,
.table>tfoot>tr>th,
.table>thead>tr>td,
.table>thead>tr>th {
	border-top: 1px solid #333;
}
.table>thead>tr>th {
	border-bottom: none;
}

.table>tbody>tr:nth-child(1)>th,
.table>tbody>tr:nth-child(1)>td {
	border-top:none;
}

.table .excluded {
	background: #f2f2f2;
}
@media screen and (max-width:767px){
	.table .excluded {
		background: #fff;
	}
}

.table .excluded a {
	color: #333;
}

.table .excluded_notes {
	font-weight: 400;
	display: block;
	margin: 10px 2px;
	text-align: center;
	/*background: #dc1d3d;*/
	background: var(--theme-red);	
	color: #fff;
	border-radius: 1px;
	font-size: 12px;
	padding: 3px;
	text-transform: uppercase;
	border-radius:6px;
}

.table .min_48h {
	font-weight: bold;
	display: block;
	margin: 10px 2px;
	text-align: center;
	background: var(--theme-red);
	color: #fff;
	border-radius: 4px;
	font-size: 12px;
	padding: 3px;
	text-transform: uppercase;
	width: 100px;
	border-radius:6px;
}

.table .christmas_disabled {
	font-weight: bold;
	display: block;
	margin: 10px 2px;
	text-align: center;
	background: var(--theme-red);
	color: #fff;
	border-radius: 4px;
	font-size: 12px;
	padding: 3px;
	text-transform: uppercase;
	max-width: 286px;
	border-radius:6px;
}


/*
	=================================================================================
	FORMULARIOS
	=================================================================================
*/

	input,
	select,
	textarea {
		border: 1px solid #333 !important;
		border-radius: 0 !important;
		box-shadow: none;
	}
	input:active,
	input:focus,
	select:active,
	select:focus,
	textarea:active,
	textarea:focus {
		border-color: #999;
		box-shadow: none;
	}

	label {
		display: inline-block;
		font-size: 13px;
		font-weight: 700;		
		font-family: 'Montserrat', sans-serif;		
		letter-spacing: 1px;
		color: #333;
		margin-bottom: 5px;
		cursor: pointer;
	}

	input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
  	background-color: white !important;
  	background-image: none !important;
  	color: #000 !important;
	}
	
	.fw400 {
		font-weight: 400 !important;
	}
	
	.upc { text-transform: uppercase; }
	
	.form-myfocus .fila {
		margin-bottom: 25px;
	}
	.checkbox label, .radio label {
		font-size: 14px;		
		font-family: 'Montserrat', sans-serif;
		letter-spacing: 0;
		margin-bottom: 2px;
	}

	#div_delivery_hour_id > div, #div_delivery_hour_express > div {
		max-width: 420px;
	}

	@media screen and (max-width:767px){
		#delivery_date_input {
			width:100%;
		}
		#div_delivery_hour_id > div, #div_delivery_hour_express > div {
			width:100%;
			max-width:initial;
		}
	}
	
	
	

	/* 
		FORMULARIOS > CONTROL DE ERRORES
	*/
		.error {
			color: var(--theme-red);
		}
		
		.form-myfocus .has-error {
			border: 2px solid #ea6153 !important;
		}
		.form-myfocus .alert {
			margin: 0;
			padding: 15px 0 0 0;
			color: var(--theme-red);
			display: none;
		}


	/* 
		FORMULARIOS > CUPÓN DESCUENTO
	*/

		.form-group, #coupon_form .input-group {
			width: 100%;
		}

		#coupon_form .input-group input {
			height: 38px;
			background-color: #fff;
		}		

		#coupon_form .input-group-addon {
			border: 1px solid #000;
			border-left: none;
			padding: 0;
			border-radius: 0;			
		}
		#coupon_form .input-group-addon button {
			display: block;
			width: 100%;
			height:36px;
			border:none;
			cursor: pointer;
			white-space: nowrap;
			line-height: 30px;
	    font-size: 14px;			
			background-color: white;			
			color: black;
			font-weight: 600;			
			letter-spacing: 1px;			
			transition: none;
		}
		#coupon_form .input-group-addon button:hover {		  
		  text-decoration: underline;
		  background-color: #fff;
		  border-color: #ccc;
		}

		@media screen and (max-width:768px) {
			#coupon_form .input-group-addon button {
				font-size:11px;
			}
			.xs-nopad {
				padding:0;
			}
		}

		/* Definimos una clase especial para este input-group en modo error */
		#coupon_form .has-error .input-group-addon {
	    border: 1px solid #000;
	   }

		#coupon_form .has-error {
	    border: 0 !important;
		}

		#coupon_form .has-error .input-group-addon button {
	    background-color: white;
	    color: #000;
	  }

	  #coupon_form .has-error .form-control:focus {
	    -webkit-box-shadow: none;
	    box-shadow: none;
		}

		.coupon_message {
			display: block; 
			padding: 10px 0 0 15px;
		}
		.coupon_message.error {
			color: var(--theme-red);;
		}
		.coupon_message.correct {
			color: #2ecc71;
		}


	#delivery_type_div {
		border: 1px solid #333;
		padding: 10px 20px;
		border-radius: 6px;
	}






/*
	=================================================================================
	BOTONES
	=================================================================================
*/

	.button {
		display: inline-block;
		position: relative;
		cursor: pointer;
		outline: none;
		white-space: nowrap;
		margin: 0 0 10px 0;
		padding: 0 15px;
		font-size: 14px;
		height: 36px;
		line-height: 36px;
		background-color: var(--theme-red);
		color: #000;
		font-weight: 400;
		text-transform: uppercase;
		letter-spacing: 1px;
		border: 1px solid black;
		text-shadow: none;		
		-webkit-transition: none;
		-o-transition: none;
		transition: none;
		text-transform: none;
	}

	.button_default {
	  color: #333;
	  background-color: #fff;
	  border: 1px solid #333;
	  border-radius: 0;
	  font-size: 14px;
	  height: 36px;
	  line-height: 36px;
		border-radius: 6px;
	}
	.button_default:hover,
	.button_default:hover > span {
	  text-decoration: underline !important;	  
	  color: #333;
	}

	.button_dark {
		background-color: white;
	}
	.button_dark:hover {
		background-color: white;
		color: black;
		text-decoration: underline;
	}
	
	.button_red {
		/*background-color:white;*/
		background-color:var(--theme-red);
		border-color:var(--theme-red);		
  	/*color: var(--theme-red);*/
  	color: white;
  	text-align: center;
  	font-weight: 400;
  	border-radius: 6px;
	}	
	.button_red:hover,
	.button_red:hover > span {
		color: white;
	  text-decoration: underline !important;	  
	}

	.button_left {
		float: left;
	}
	.button_right {
		float: right;
	}

	.button-address[data-type='create'] {
		background-color: var(--theme-red);
		color: white !important;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    height: 36px;
    line-height: 36px;
	}
		.button-address[data-type='create']:hover {
			text-decoration: none !important;
			color: white;
			background-color: var(--theme-red-hover);
		}

	.button_sticky {
		position: fixed;
		bottom: 0px;
		width: 100%;
		font-size: 18px;
		font-weight: bold;
		z-index: 111;
		padding: 8px 15px;
		-webkit-transition: all 0.5s ease;
		-o-transition: all 0.5s ease;
		transition: all 0.5s ease;
		background: #00ad8e;
		text-align:center;
		/*background: #61BD6D;*/
	}

	.button_sticky a {
		display: block;
		background: #00ad8e;
		color: #fff;
	}

	@media screen and ( max-width: 768px ) {
		.button_sticky {
			display: block;
		}
		.button_right,
		.button_left {
			float: none;
			width:100%;
		}
	}	



/*
	=================================================================================
	ACORDEÓN
	=================================================================================
*/

	.accordion {
		margin-bottom: 20px;
		max-width: 550px;
	}

	.acctitle {
		display: block;
		position: relative;
		line-height: 24px;
		margin: 0;
		font-size: 14px;
		font-weight: bold;
		color: #444;
		cursor: pointer;
		border-top: 1px dotted #DDD;
		padding: 10px 0 10px 10px;
	}

	.acctitlec {
		cursor: auto;
	}

	.acctitle:first-child {
		border-top: none;
	}

	.acctitle i {
		position: absolute;
		top: 0;
		left: 0;
		width: 14px;
		text-align: center;
		font-size: 14px;
		line-height: 44px;
	}

	.acctitle i.acc-open,
	.acctitlec i.acc-closed {
		display: none;
	}

	.acctitlec i.acc-open {
		display: block;
	}

	.acc_content {
		position: relative;
		padding: 10px;
	}

	.accordion.accordion-lg .acctitle {
		font-size: 23px;
		line-height: 44px;
		padding-left: 30px;
		font-weight: 400;
	}
	.accordion.accordion-lg .acctitle i {
		width: 20px;
		font-size: 20px;
		line-height: 64px;
	}
	.accordion.accordion-lg .acc_content {
		padding: 10px 0 30px 30px;
	}



/*
	=================================================================================
	DIRECCIONES
	=================================================================================
*/

	.checkout_address, .checkout_addresses {
		background: #f8f8f8;
		padding: 10px 20px 10px 20px;
		border: 1px solid #e7e7e7;
		margin-bottom: 0px;
		-webkit-border-top-left-radius: 5px;
		-webkit-border-top-right-radius: 5px;
		-moz-border-radius-topleft: 5px;
		-moz-border-radius-topright: 5px;
		border-top-left-radius: 5px;
		border-top-right-radius: 5px;
	}

	.checkout_address_short {
		background: #f8f8f8;
		padding: 10px 20px 10px 20px;
		border: 1px solid #e7e7e7;
		margin-bottom: 0px;
		-webkit-border-top-left-radius: 5px;
		-webkit-border-top-right-radius: 5px;
		-moz-border-radius-topleft: 5px;
		-moz-border-radius-topright: 5px;
		border-top-left-radius: 5px;
		border-top-right-radius: 5px;
	}
	
	.address_selected {
		background: #fff3cc;
		border-color: #f2c0c3;
	}

	.address_selected:before {
		content: "\e013";
		position: absolute;
		padding: 6px;
		right: 25px;
		top: 10px;
		color: #fff;
	  font-family: 'Glyphicons Halflings';
	  font-style: normal;
	  font-weight: 400;
	  line-height: 1;
	  -webkit-font-smoothing: antialiased;
	  -moz-osx-font-smoothing: grayscale;
	  background: var(--theme-red);
	  -webkit-border-radius: 50%;
	  -moz-border-radius: 50%;
	  -ms-border-radius: 50%;
	  -o-border-radius: 50%;
	  border-radius: 50%;
	}

	.btn-group-justified.btn-group .btn {
		border: 1px solid #e7e7e7;
		border-top: 0;
		-webkit-border-top-left-radius: 0px;
		-webkit-border-top-right-radius: 0px;
		-moz-border-radius-topleft: 0px;
		-moz-border-radius-topright: 0px;
		border-top-left-radius: 0px;
		border-top-right-radius: 0px;
	}



/*
	=================================================================================
	CLASES DE AYUDA
	=================================================================================
*/

	.nobottommargin {
		margin-bottom: 0 !important;
	}

	.divide10 {
		height: 10px;
	}
	.divide20 {
		height: 20px;
	}
	.divide30 {
		height: 30px;
	}



/*
	=================================================================================
	MEDIA QUERIES
	=================================================================================
*/

  /* Large Devices, Wide Screens */
  @media only screen and (max-width : 1200px) {

		table#summary h2 {
			font-size: 18px;
		}

  }


  /* Medium Devices, Desktops */
  @media only screen and (max-width : 992px) {

		.container {
		  width: 100% !important;
		}

		#steps .bs-wizard-step .bs-wizard-stepnum {
			font-size: 14px;
		}

		#tabla-responsive thead tr th {
			font-size: 14px;
		}

		table#summary h2 {
			font-size: 16px;
		}

		.form-myfocus .fila {
			margin-bottom: 20px;
		}

  }


  /* Small Devices, Tablets */
  @media only screen and (max-width : 768px) {

		.button_block { width: 100%; text-align: center; }

		.accordion.accordion-lg .acctitle {
	    font-size: 18px;
	    line-height: 32px;
	    padding-left: 30px;
	    font-weight: 400;
		}
		.accordion.accordion-lg .acctitle i {
	    width: 20px;
	    font-size: 18px;
	    line-height: 52px;
		}

		.form-myfocus.form-horizontal {
			max-width: 400px !important;
			margin: 0 auto;
		}

		.form-myfocus .fila {
			margin-bottom: 15px;
		}

  }


 /* Extra Small Devices, Phones */ 
  @media only screen and (max-width : 480px) {

  	body {
	    font-size: 13px;
	  }
	  h3 {
	  	font-size: 16px;
	    line-height: 36px;
	    margin-bottom: 0;
			color: var(--theme-red);
	  }

		#steps .bs-wizard-step .bs-wizard-stepnum {
			font-size: 12px;
		}
		#steps {
			padding-top: 20px;
	  	padding-bottom: 20px;
	  	margin-bottom: 20px
		}
		
		#tabla-responsive thead tr th {
			font-size: 14px;
		}		

		.button_left, .button_right {
			float: none;
		}
		.button_block {
		 	display: block;
		 }

		.accordion.accordion-lg .acc_content {
			padding-top: 0;
		}

		.form-myfocus label {
			/* font-size: 11px; */
			margin-bottom: 5px;
		}
		
		.form-myfocus .fila {
			margin-bottom: 10px;
		}

  }

  /* Custom, iPhone Retina */ 
  @media only screen and (max-width : 320px) {

  }


/*
	=================================================================================
	MODALES
		> addresses modal
		> footer message
		> modal alert
	=================================================================================
*/

	/* addresses modal */
	.overlay {
		display: none;
	  position: fixed; 
	  top:0;
	  left:0;
	  width: 100vw;
	  height: 100vh;  
	  background: white; 
	  z-index: 1000;
	  text-align: center; 
	  overflow-y: auto;
		overflow-x: hidden;	
	}
  .overlay > div {
    overflow-y: auto;
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 50%;
    max-width:600px;
    transform: translate(-50%, -50%);	    
    max-height: calc( 100% - 30px );
    background-color: white;
    padding:15px;
    border: 1px solid black;
  }
  .overlay-address > div {
  	max-width:unset;
    border:none;
  }

	@media screen and ( max-width: 767px) {
	 	.overlay > div {
	 		width: calc(100% - 30px) !important;
	 		height: auto;
		}
		.overlay > div > div { padding: 0 15px; }
	}	


	@media screen and (max-width: 1024px) {
		.overlay .container {
			width: 100%;
		}
		  .overlay label {
		  	font-size: 12px;
		  }
	}

	@media screen and (max-width: 767px) {

		.overlay {
			padding: 0 15px 30px 15px;
		}
		.overlay .resume {
			font-size: 13px;
		}
		
	}


	.overlay .form-myfocus {
		font-size: 14px;
	}
	.overlay .form-myfocus input,
	.overlay .form-myfocus select,
	.overlay .form-myfocus textarea {
		border: 1px solid #333;
    border-radius: 0;    
    box-shadow: none;
		font-size: 14px;
		font-weight: normal;
		display: block;
		box-sizing: border-box;
		height: 32px;
		width: 100%;
		padding: 5px 10px;
		font-family: inherit;
		line-height: 1.42857143;		
	}	
  
  .overlay .form-myfocus input[readonly],
	.overlay .form-myfocus select[readonly],
	.overlay .form-myfocus textarea[readonly]{
		background: #f1f5f5;	
	}	

	.overlay .form-myfocus input#legal_condition {
		width: 35px;
		height: 35px;
	}
	.overlay .form-myfocus textarea {
		height: auto;
	}
	.overlay .form-myfocus [class^='col-'],
	.overlay .form-myfocus [class*=' col-'] {
		margin-bottom: 15px;
	}
	.overlay .form-myfocus input:active,
	.overlay .form-myfocus input:focus,
	.overlay .form-myfocus select:active,
	.overlay .form-myfocus select:focus,
	.overlay .form-myfocus textarea:active,
	.overlay .form-myfocus textarea:focus {
		border-color: #999;
		-webkit-box-shadow: none;
		-moz-box-shadow: none;
		box-shadow: none;
	}
	.overlay .form-myfocus label {
		display: inline-block;
		font-size: 14px;
		font-weight: 600;		
		letter-spacing: 1px;
		color: black;
		margin-bottom: 5px;
		cursor: pointer;
		max-width: 100%;
		text-transform: none;
	}
	.overlay .form-myfocus option {
		font-size: 16px;
	}
	.overlay .form-myfocus select {
		cursor: pointer;
	}
	.overlay .form-ok,
	.overlay .form-ko {
		display: none;
	}

	.overlay button {
		display: inline-block;    
    margin: 10px 0;
    padding: 5px 20px;
    border: none;
    background: var(--theme-red);
    color: white;
    font-size: 14px;
		border-radius: 4px;
    line-height: 1;
    text-transform: none;
    font-weight: 400;
    height: 33px;		
	}
	.overlay button:hover {
		background: var(--theme-red-hover);
		text-decoration: none;
		color: white;
	}

	.overlay h2.h1 {
		margin: 40px 0;
    font-weight: 600;
    line-height: 1;
    font-size: 15px;
	}



	/* footer message */
	.added {
		position: fixed;
		bottom: -100px;
		width: 100%;
		text-align: center;
		font-size: 18px;
		font-weight: 400;
		z-index: 888;
		padding-top: 8px;
		padding-bottom: 8px;
		-webkit-transition: all 0.5s ease;
		-o-transition: all 0.5s ease;
		transition: all 0.5s ease;
	}
	.added.visible {
		bottom: 0;
	}
	.added.bg-success {
		background: #27ae60;
		color: #fff;
	}
	.added.bg-warning {
		background: #F7DA64;
	}


	/* modal alert */

	.alert-modal {
	  display: none;
	  position: fixed; 
	  top:0;
	  left:0;
	  width: 100vw;
	  height: 100vh;  
	  background: rgba(255,255,255,0.7); 
	  z-index: 1001;
	  text-align: center;   
	}  
  .alert-modal > div {
    overflow-y: auto;
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 50%;
    max-width:600px;
    transform: translate(-50%, -50%);
    max-width: calc( 100% - 30px );
    max-height: calc( 100% - 30px );    
		padding:15px;
		border-radius: 8px;
		background: linear-gradient(180deg, #82241ad2, #d43b2dd2);
  	box-shadow: 2px 6px 20px -6px rgba(0,0,0,0.35);
		color: white;    
  }

  .alert-modal h4.title {
    font-size: 15px;
    font-weight: 600;
    color: white;
  }
   

  .alert-modal span.message {
    display: block;
    font-size: 14px;    
    max-width: calc(100% - 30px);
    margin: 15px auto 0 auto;
  }

  .alert-modal button {
    display: inline-block;
    padding: 6px 12px;
    font-weight: 600;
    margin: 15px auto;
		background: white;
  	color: #333 !important;
  	border: none;
  	border-radius: 6px;
  	font-weight: 600;
  	box-shadow: 2px 2px 3px -2px rgba(0,0,0,0.5);
  	transition-duration: 0.3s;
		
  }
  	.alert-modal button:hover {
			background: #fafafa;
			color: #333 !important;
			text-decoration: none;
			box-shadow: -1px -1px 3px -2px rgba(0,0,0,0);
	  }
 

	@media screen and (max-width:768px) {
	  .alert-modal > div {
	    width: calc( 100% - 30px );    
	  } 
	}


	/* outside alert */
	#outside_alert {
		width:70%;
		margin: 0 auto;
		margin-bottom: 25px;
	}
	
	.alert-warning {
		background-color: #f2f2f2;
		border: none;
		/*border: 1px solid #333;*/
		color: black;
		border-radius: 0;
	}

	@media screen and (max-width: 768px){
		#outside_alert {
			width:100%;			
		}
	}

	/* modal bootstrap */
	#dialog {
		background-color: rgba(255,255,255,0.7);
	}

	h4.modal-title {
		color: white;
		font-weight: 600;
		text-align: center;
	}

	.modal-content {
		border: none;
		border-radius: 8px;
		background: linear-gradient(180deg, #82241ad2, #d43b2dd2);
  	box-shadow: 2px 6px 20px -6px rgba(0,0,0,0.35);
		color: white;
	}
		.modal-content button:not(.close) {
			background: white;
  		color: #333 !important;
  		border: none;
  		border-radius: 6px;
  		font-weight: 600;
  		box-shadow: 2px 2px 3px -2px rgba(0,0,0,0.5);
  		transition-duration: 0.3s;
		}
		.modal-content button:not(.close):hover {
			background: #fafafa;
			color: #333 !important;
			text-decoration: none;
			box-shadow: -1px -1px 3px -2px rgba(0,0,0,0);
		}
		.modal-content button.close {
			display: none;
		}

	.modal-body > span {
		line-height: 1.8;
		color: white;
	}
	.modal-header,
	.modal-footer {
		border: none;		
	}
	

/* -------------------------------------------------------------------------------------------------------------- */
/* GUS KA/Colors
/* -------------------------------------------------------------------------------------------------------------- */

.ka_status {
	-moz-border-radius:3px; border-radius:3px; -webkit-border-radius:3px;
	padding: 1px 3px 1px 3px;
	text-align:center; font-weight:normal; color:#fff;
}

.blue 	{ color: #0275d8 !important; } /* #3366cc; */
.red 		{ color: var(--theme-red) !important; } /* #bd4646 */
.orange { color: #FF6700 !important;} /* #CC6600; } */
.green 	{ color: #379b3c !important; }
.green2 { color: #909139 !important; }
.grey 	{ color: #5F5F5F !important; }
.grey2	{ color: #7D7D7D !important; }
.black 	{ color: #333333 !important; }
.brown 	{ color: #9F6000 !important; }
.yellow { color: yellow !important; }

.bg_blue 		{ background:#629fcf !important; }
.bg_green 	{ background:#379b3c !important; }
.bg_green2 	{ background:#63BE7a !important; }
.bg_yellow 	{ background:#d9c855 !important; } /* #c4b22a; */
.bg_orange 	{ background:#CC6600 !important; }
.bg_red2 		{ background:#bd4646 !important; }
.bg_grey 		{ background:#434343 !important; }
.bg_grey2 	{ background:#6f6f6f !important; }
.bg_grey3 	{ background:#9f9f9f !important; }
.bg_brown 	{ background:#af9c7e !important; }
.bg_black 	{ background:#000000 !important; }

.pt5 { padding-top: 5px !important; }
.pt7 { padding-top: 7px !important; }
.pt10 { padding-top: 10px !important; }
.pt20 { padding-top: 20px !important; }
.pt30 { padding-top: 30px !important; }
.pt40 { padding-top: 40px !important; }

.pb5 { padding-bottom: 5px !important; }
.pb7 { padding-bottom: 7px !important; }
.pb10 { padding-bottom: 10px !important; }
.pb20 { padding-bottom: 20px !important; }
.pb30 { padding-bottom: 30px !important; }
.pb40 { padding-bottom: 40px !important; }

.pr5 { padding-right: 5px !important; }
.pr10 { padding-right: 10px !important; }
.pr20 { padding-right: 20px !important; }
.pr30 { padding-right: 30px !important; }
.pr40 { padding-right: 40px !important; }

.pl5 { padding-left: 5px !important; }
.pl10 { padding-left: 10px !important; }
.pl20 { padding-left: 20px !important; }
.pl30 { padding-left: 30px !important; }
.pl40 { padding-left: 40px !important; }

.mt5 { margin-top: 5px !important; }
.mt7 { margin-top: 7px !important; }
.mt10 { margin-top: 10px !important; }
.mt20 { margin-top: 20px !important; }
.mt30 { margin-top: 30px !important; }
.mt40 { margin-top: 40px !important; }

.mb5 { margin-bottom: 5px !important; }
.mb7 { margin-bottom: 7px !important; }
.mb10 { margin-bottom: 10px !important; }
.mb20 { margin-bottom: 20px !important; }
.mb30 { margin-bottom: 30px !important; }
.mb40 { margin-bottom: 40px !important; }

.mr5 { margin-right: 5px !important; }
.mr10 { margin-right: 10px !important; }
.mr20 { margin-right: 20px !important; }
.mr30 { margin-right: 30px !important; }

.ml5 { margin-left: 5px !important; }
.ml10 { margin-left: 10px !important; }
.ml20 { margin-left: 20px !important; }
.ml30 { margin-left: 30px !important; }

.tal { text-align: left !important; }
.tac { text-align: center !important; }
.tar { text-align: right !important; }

.nw { white-space: nowrap !important; }

.dp { display: none !important; }

.w1 { width: 1% !important; }

.w100 {	width: 100% !important; }

.mw { max-width: 1100px !important; }

.wm { max-width: 1100px !important; }

.mw2 { max-width: 600px !important; }

.vat { vertical-align: top !important; }

.vam { vertical-align: middle !important; }

.vab { vertical-align: bottom  !important; }

.cb { clear:both; }

.bold { font-weight: bold; }

	@media print {
		a[href]:after {
			content: none !important;
		}
	}
.class_required > label
{
	color:#84B2D6 !important;
}

.class_required > label > a
{
	color:#84B2D6 !important;
}	

#gift_box_add { color: var(--theme-red); }
#gift_box_add:hover { color: var(--theme-red-hover); }
label[for="delivery_notes"] {
	position: relative;
}
label[for="delivery_notes"]:after {
	content: "\2039";
	position: absolute;
	right: -12px;
	font-size: 22px;
	display: inline-block;
	top: -6px;
	transform: rotate(-90deg);
}
label[for="delivery_notes"].visible:after {
	transform: rotate(90deg);
}



.div_login a.button_login {
    display: inline-block;
    padding: 2px 10px;
    color: #333;
    border: 1px solid #333;
    border-radius: 6px;
    width: 100px;
    max-width: 100%;
    text-align: center;
    margin: 4px 0;
    background: white;
}

.button_login {
    display: inline-block;
    margin: 10px 0;
    padding: 5px 20px;
    background: var(--theme-red);
    color: white;
    font-size: 14px;
    border-radius: 6px;
    border: none;
    transition-duration: 0.3s;
    text-decoration: none !important;
}
.div_login a {
    color: white;
    font-size: 14px;
    line-height: 1;
    display: inline-block;
		text-decoration: none;
}

.custom-select {
	position: absolute;
	/* width: 200px; */
	cursor: pointer;
}
.custom-select .selected {
	padding: 8px;
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 600;
	font-size: 12px;
}
.custom-select img {
	width: 18px;
}
.custom-select .options {
	display: none;
	position: absolute;
	top: calc(100% - 6px);
	left: 0;
	right: 0;
	border: 1px solid #333;
	border-top: none;
	background: white;
	z-index: 10;
	max-height: 250px;
	overflow-y: auto;
	padding: 0;
	width: 200px;
}
.custom-select .options li {
	list-style: none;
	padding: 6px;
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 11px;
}
.custom-select .options li:hover {
	background: #eee;
}      
.custom-select.open .options {
	display: block;
}
input[name="phone"],
input[name="delivery_phone"] {
	padding-left: 70px !important;
}