/* PC RIGHT PANEL */

:root {
	--panel_bg_rgb: 55, 89, 120;
	--panel_bg-hover_rgb: 66, 102, 136;
	--panel_opacity: 0.70;
	--panel_width: 70px;
	--panel_padding: 15px 0 10px 0;
	--panel_padding_container: calc(var(--panel_width) + 15px);
}

.page-container {
	position: relative;
	padding-left: var(--panel_padding_container);
	padding-right: var(--panel_padding_container);
	min-height: 460px;
}

.pc-panel {
	position: absolute;
	width: auto;
	top: 30px;
	bottom: 30px;
	right: 0;
	visibility: hidden;
}

.pc-panel-block {
	position: sticky;
	top: 0;
	z-index: 999;
	border-right: 3px solid rgba(var(--panel_bg_rgb), var(--panel_opacity));
}

.pc-panel_item {
	width: var(--panel_width);
	background: rgba(var(--panel_bg_rgb), var(--panel_opacity));
	margin: 2px 4px 2px 0;
	border: 1px solid var(--color-bg);
}
.pc-panel_item:hover {
	background: rgba(var(--panel_bg-hover_rgb), var(--panel_opacity));
}

.pc-panel_item:last-child {margin-bottom: 0;}
.pc-panel_item:first-child {margin-top: 0;}

.pc-panel_item.whats, 
.pc-panel_item.tel {
	width: calc(var(--panel_width) + 6px);
	border-radius: 10px 0 0 10px;
} 

.pc-panel_item:last-child {
	border-radius: 0 0 0 10px;
} 

.pc-panel_item a {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	font-family: 'Roboto-Regular';
	font-size: 11px;
	color: #fff;
	padding: var(--panel_padding);
}
.pc-panel_item a:hover {
	color: #fff;
}

.pc-panel_item a > div {
	margin-bottom: 3px;
}

.pc-panel_item a .icon_panel {
	width: 28px;
	height: 27px;
}

.pc-panel_item a > div,
.pc-panel_item a .icon_panel {
	background-size: contain;
	background-repeat: no-repeat;
}

.whatsApp_icon,
.tel_icon {
	width: 32px;
	height: 33px;
}

.whatsApp_icon {
	position: relative;
	background: url('../img/icons/whats.png');
}
.whatsApp_icon::before {
	position: absolute;
	right: -5px;
	top: -5px;
	content: '1';
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #fff;
	line-height: 1;
	border-radius: 50%;
	padding: 3px 5px;
	background: red;
}

.tel_icon {background: url('../img/icons/tel.png');}
.viber_icon {background: url('../img/icons/viber.png');}
.telegram_icon {background: url('../img/icons/telegram.png');}
.connect_icon {background: url('../img/icons/conect.png');}

.panel_show {
	visibility: visible;
}

/* container-fluid fix padding */
.calc,
.form {
	width: 100vw;
	margin-left: calc(-50vw + 50%);
}
@media screen and (min-width: 768px) {
	.calkbg {padding-left: var(--panel_padding_container)!important;}
	.by {padding-right: var(--panel_padding_container)!important;}
}

@media screen and (min-width: 576px) {
	.mrminus {padding-left: var(--panel_padding_container)!important;}
	.bg-form {padding-right: var(--panel_padding_container)!important;}
}
/* fix padding end */

@media screen and (max-height: 475px) {

	.pc-panel_item {
		--panel_width: 55px;
	}

	.pc-panel_item a {
		font-size: 10px;
		padding: 10px 0 5px 0;
	}

	.pc-panel_item a .icon_panel {
		width: 26px;
		height: 25px;
	}

	.whatsApp_icon,
	.tel_icon {
		width: 30px;
		height: 31px;
	}

	.pc-panel_item > a > span {
		display: none;
	}

	.pc-panel_item:last-child {
		padding-bottom: 3px;
	} 
}

@media screen and (max-width: 1200px) {
	:root {
		--panel_width: 65px;
	}
}

@media screen and (max-width: 576px) {
	.pc-panel {
		display: none!important;
	}
	
	.page-container {
		padding-left: 0;
		padding-right: 0;
	}
}

/* ----------- */