.btn {
	display: block;
	text-decoration: none;
	text-align: center;
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
	font-weight: inherit;
	padding: 12px 30px;
	background: transparent;
	white-space: nowrap;
	overflow: hidden;
	border-radius: 0;
	position: relative;
	border-radius: 10px;
}

.btn:hover {
	text-decoration: none;
	cursor: pointer;
}

.btn:focus {
	text-decoration: none;
	box-shadow: none; /*0 0 0 2px var(--blue);*/
	outline: 0;
}

.btn:disabled {
	cursor: default;
}

.btn_place_conf-total {
	max-width: 350px;
	width: 100%;
}

/* light button with transparent background */
.btn--light {
	color: var(--light);
	border: 1px solid var(--light);
}

.btn--light:hover {
	background: var(--light);
	color: var(--dark);
}

/* light button with light background */
.btn--light--fill {
	color: var(--dark);
	background: var(--light);
	border: 1px solid var(--light);
}

.btn--light--fill:hover {
	color: var(--light);
	background: var(--dark);
	border: 1px solid var(--dark);
}

/* dark button with transparent background */
.btn--dark {
	color: var(--dark);
	border: 1px solid var(--dark);
}

.btn--dark:hover {
	background: var(--dark);
	color: var(--light);
}

/* dark button with dark background */
.btn_color_black {
	color: var(--white);
	background: var(--black);
	border: 1px solid var(--black);
}

.btn_color_black:hover {
	background: var(--light-black);
	border: 1px solid var(--light-black);
}

.btn--dark--fill {
	color: var(--light);
	background: var(--dark);
	border: 1px solid var(--dark);
}

.btn--dark--fill:hover {
	background-color: var(--light-dark);
	border-color: var(--light-dark);
}

.btn--dark--fill:disabled,
.btn--dark--fill:disabled:hover
.btn--dark--fill:disabled:focus,
.btn--dark--fill:disabled:active {
	background: #888;
	border: 1px solid #888;
}

.btn_style_transparent_green {
	border: 1px solid var(--deep-blue);
}

/* green btn with dark background */
.btn--green--fill {
	color: var(--light);
	background: var(--deep-blue);
	border: 1px solid var(--deep-blue);
}

.btn--green--fill:hover {
	background-color: var(--deep-blue-hover);
	border-color: var(--deep-blue-hover);
}

.btn--green--fill:disabled,
.btn--green--fill:disabled:hover
.btn--green--fill:disabled:focus,
.btn--green--fill:disabled:active {
	background: #888;
	border: 1px solid #888;
}

/* start "green btn with dark background (rounded)" */
.btn_color_green {
	color: var(--white);
	background-color: var(--green);
	border: 1px solid var(--green);
	border-radius: 10px;
}

.btn_color_green:hover {
	background-color: var(--light-green);
	border-color: var(--light-green);
}

.btn_color_green:disabled,
.btn_color_green:disabled:hover
.btn_color_green:disabled:focus,
.btn_color_green:disabled:active {
	background-color: var(--light-green);
	border-color: var(--light-green);
	filter: grayscale(1);
	-webkit-filter: grayscale(1);
}
/* end "green btn with dark background (rounded)" */

/* start "red btn with dark background (rounded)" */
.btn_color_red {
	color: var(--white);
	background-color: var(--red);
	border: 1px solid var(--red);
	border-radius: 10px;
}

.btn_color_red:hover {
	background-color: var(--light-red);
	border-color: var(--light-red);
}

.btn_color_red:disabled,
.btn_color_red:disabled:hover
.btn_color_red:disabled:focus,
.btn_color_red:disabled:active {
	background-color: var(--light-red);
	border-color: var(--light-red);
	filter: grayscale(1);
	-webkit-filter: grayscale(1);
}
/* end "red btn with dark background (rounded)" */

/* start "green btn with transparent background (rounded)" */
.btn_color_transparent-green {
	color: var(--green);
	background: transparent;
	border: 1px solid var(--green);
	border-radius: 10px;
}

.btn_color_transparent-green:hover {
	color: var(--white);
	background-color: var(--green);
}

.btn_color_transparent-green:disabled,
.btn_color_transparent-green:disabled:hover
.btn_color_transparent-green:disabled:focus,
.btn_color_transparent-green:disabled:active {
	color: #888;
	border: 1px solid #888;
}
/* end "green btn with transparent background (rounded)" */



/* start "green btn with transparent background (rounded)" */
.btn_color_transparent-black {
	color: var(--black);
	background-color: transparent;
	border: 1px solid var(--black);
	border-radius: 10px;
}

.btn_color_transparent-black:hover {
	color: var(--white);
	background-color: var(--black);
}

.btn_color_transparent-black:disabled,
.btn_color_transparent-black:disabled:hover
.btn_color_transparent-black:disabled:focus,
.btn_color_transparent-black:disabled:active {
	color: #888;
	border: 1px solid #888;
}
/* end "green btn with transparent background (rounded)" */


.btn_color_transparent-white {
	color: var(--white);
	background: transparent;
	border: 1px solid var(--white);
}

.btn_color_transparent-white:hover {
	color: var(--black);
	background: var(--white);
	border: 1px solid var(--white);
}

.btn_color_transparent-white:disabled,
.btn_color_transparent-white:disabled:hover
.btn_color_transparent-white:disabled:focus,
.btn_color_transparent-white:disabled:active {
	background-color: var(--white);
	border-color: var(--white);
	filter: grayscale(1);
	-webkit-filter: grayscale(1);
}




.btn_color_white {
	color: var(--black);
	background: var(--white);
	border: 1px solid var(--white);
}

.btn_color_white:hover {
	color: var(--dark-gray);
	background: var(--white);
	border: 1px solid var(--white);
}

.btn_color_white:disabled,
.btn_color_white:disabled:hover
.btn_color_white:disabled:focus,
.btn_color_white:disabled:active {
	background-color: var(--white);
	border-color: var(--white);
	filter: grayscale(1);
	-webkit-filter: grayscale(1);
}






.btn_waiting::before {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: var(--dark);
	z-index: 1;
}

.btn_waiting::after {
	content: '';
	display: block;
	position: absolute;
	width: 30px;
	height: 30px;
	top: 50%;
	left: 50%;
	z-index: 2;
	border-radius: 50%;
	border: 4px rgba(255, 255, 255, 0.5) solid;
    border-top: 4px var(--light) solid;
	animation: btn-loading 2s linear infinite;
}

@keyframes btn-loading {
	0% {
		transform: translate(-50%, -50%) rotate(0deg);
	}
	100% {
		transform: translate(-50%, -50%) rotate(360deg);
	}
}

.btn__group {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	column-gap: 20px;
}

@media (max-width: 1279px) {
	.btn {
		padding: 12px 25px;
		text-overflow: ellipsis;
	}

}  

@media (max-width: 479px) {
	.btn_place_conf-total {
		max-width: none;
	}
}

/* Добавить в корзину в анонсе товара */
.btn_status_loading {
	background-image: url("data:image/svg+xml,%3Csvg width='38' height='38' viewBox='0 0 38 38' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3ClinearGradient x1='8.042%25' y1='0%25' x2='65.682%25' y2='23.865%25' id='a'%3E%3Cstop stop-color='%23ffffff' stop-opacity='0' offset='0%25'/%3E%3Cstop stop-color='%23ffffff' stop-opacity='.631' offset='63.146%25'/%3E%3Cstop stop-color='%23ffffff' offset='100%25'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(1 1)'%3E%3Cpath d='M36 18c0-9.94-8.06-18-18-18' id='Oval-2' stroke='url(%23a)' stroke-width='2'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 18 18' to='360 18 18' dur='0.9s' repeatCount='indefinite' /%3E%3C/path%3E%3Ccircle fill='%23fff' cx='36' cy='18' r='1'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 18 18' to='360 18 18' dur='0.9s' repeatCount='indefinite' /%3E%3C/circle%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 30px 30px;
	color: transparent;
}

.add-to-cart-btn {
	position: relative;
	display: block;
	width: 40px;
	height: 40px;
	text-decoration: none;
	font-family: inherit;
	font-size: 0;
	line-height: 0;
	font-weight: inherit;
	background-image: url(/local/templates/tinger/img/cart-parts-icon.svg);
	background-repeat: no-repeat;
	background-color: var(--deep-blue);
	background-size: 20px 20px;
	background-position: center;
	border-radius: 10px;
	position: relative;
	border: 0;
	color: transparent;
}

.add-to-cart-btn:hover {
	text-decoration: none;
	cursor: pointer;
}

.add-to-cart-btn:hover::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(255, 255, 255, 0.1);
}

.add-to-cart-btn:focus {
	text-decoration: none;
	box-shadow: none;
	outline: 0;
}

.add-to-cart-btn:disabled {
	cursor: default;
	background-color: #ccc !important;
}

.add-to-cart-btn_status_loading {
	background-image: url("data:image/svg+xml,%3Csvg version='1.1' id='L5' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 50 50' enable-background='new 0 0 0 0' xml:space='preserve'%3E%3Ccircle fill='%23fff' stroke='none' cx='5' cy='25' r='5'%3E%3CanimateTransform attributeName='transform' dur='1s' type='translate' values='0 15 ; 0 -15; 0 15' repeatCount='indefinite' begin='0.1'%3E%3C/animateTransform%3E%3C/circle%3E%3Ccircle fill='%23fff' stroke='none' cx='25' cy='25' r='5'%3E%3CanimateTransform attributeName='transform' dur='1s' type='translate' values='0 10 ; 0 -10; 0 10' repeatCount='indefinite' begin='0.2'%3E%3C/animateTransform%3E%3C/circle%3E%3Ccircle fill='%23fff' stroke='none' cx='45' cy='25' r='5'%3E%3CanimateTransform attributeName='transform' dur='1s' type='translate' values='0 5 ; 0 -5; 0 5' repeatCount='indefinite' begin='0.3'%3E%3C/animateTransform%3E%3C/circle%3E%3C/svg%3E");
}