:root {
	--bg-color: var(--tg-theme-bg-color);
	--secondary-bg-color: var(--tg-theme-secondary-bg-color);
	--text-color: var(--tg-theme-text-color);
	--hint-color: var(--tg-theme-hint-color);
	--link-color: var(--tg-theme-link-color);
	--button-color: var(--tg-theme-button-color);
	--button-text-color: var(--tg-theme-button-text-color);
	--keitaro-color: #62c862;
}
body{
	background-color: var(--bg-color);
	color: var(--text-color);
	font-family: 'Roboto', sans-serif;
	font-size: 14px;
}
.header{
	font-family: 'Bebas Neue', sans-serif;
	font-size: 40px;
	padding: 20px;
}
.header span{
	color: var(--keitaro-color);
}
.header b{
	font-size: 20px;
}
.menu{
	width: 100%;
	padding: 20px;	
}
.menu label{
	width: 100%;
	background-color: transparent;
	font-size: 14px;
	padding: 15px 0px;
	border: none;
	border-radius: 20px;
	color: var(--text-color);
}
.menu div{
	width: 100%;
	border-radius: 20px;
}
.card, .card-body{
	background-color: transparent;
	color: var(--text-color);
	width: 100%;
	border-radius: 10px;
	border: none;
}
.collapse {
	color: var(--text-color);
	overflow: hidden;
	transition: height 0.35s ease;
}
.collapse.show {
	transition: height 0.35s ease;
}
.card{
	background-color: var(--secondary-bg-color);
	width: 100%;
	border-radius: 10px;
	margin-top: 15px;
	padding-bottom: 30px;
	padding-top: 30px;
}
.btn-check:checked+.btn, .btn.active, .btn.show, .btn:first-child:active, :not(.btn-check)+.btn:active {
    color: var(--text-color);
    background-color: var(--secondary-bg-color);
    border-color: var(--secondary-bg-color);
}
/* Отключаем hover для всех кнопок */
.btn:hover,
.btn:focus,
.btn:active:focus {
    color: var(--text-color);
    background-color: var(--secondary-bg-color);
    border-color: var(--secondary-bg-color);
    opacity: 1;
    box-shadow: none;
}
.arrow{
	margin-right: 15px;
	transition: transform 0.3s ease;
	will-change: transform;
}
p {
	margin: 0;
}
.create-campaign p {
	width: 100%;
}
select, .landingId, .quantity, .flow-percentage, .offerId, .groupName, .sourceName, .offerWeight {
	background-color: var(--secondary-bg-color);
	color: var(--text-color);
	width: 150px;
	padding: 10px;
	border: none;
	border-bottom: 1px solid grey;
	-webkit-appearance: none;
	-moz-appearance: none;
  appearance: none;
}
.select:focus,
.landingId:focus,
.quantity:focus,
.flow-percentage:focus,
.offerId:focus,
.groupName:focus,
.sourceName:focus,
.form-check-input:focus {
  outline: none;
}
.quantity{
	width: 4rem;
}
.flow-percentage{
	width: 50px;
}
.minus, .plus{
	background-color: var(--secondary-bg-color);
	border: none;
	padding: 0;
}
.minus svg path,
.plus svg path {
  fill: var(--text-color);
}
.form-check{
	height: 30px;
}
.form-check label{
	padding: 0;
	width: auto;
}
textarea{
	width: 100%;
	background-color: var(--secondary-bg-color);
	color: var(--text-color);
	min-height: 30vh;
}
.form-check-input:checked{
	background-color: var(--keitaro-color);
	border: var(--keitaro-color);
}
.search{
	padding: 10px 15px;
	position: absolute;
	background-color: var(--bg-color);
	max-width: 250px;
	max-height: 250px;
	overflow-y: auto;
}
.search span{
	width: 100%;
	margin-bottom: 10px;
	border-bottom: 1px solid #4b4747;
	padding: 5px;
}

/* CAMPAIGNS */
.campaignCreationStatus p{
	width: 100%;
}
.campaignData label{
	padding: 10px 0px;
	width: 70px;
}
.campaignDetails{
	margin-top: 0;
}
.campaignDetails p{
	font-family: 'Courier Prime', monospace;
	font-size: 12px;
}
.rotated {
	transform: rotate(90deg);
	transition: transform 0.3s ease;
}
.campaignCreationStatus {
	margin-top: 20px;
	transition: transform 0.5s ease, opacity 0.5s ease;
	will-change: transform, opacity;
}
.smartRotation{
	width: 50px;
	height: 35px;
	background-color: var(--keitaro-color);
	border: none;
	border-radius: 5px;
	cursor: pointer;
	mask: url(../img/settings.svg) no-repeat center;
    -webkit-mask: url(../img/settings.svg) no-repeat center;
    mask-size: contain;
    -webkit-mask-size: contain;
}
.modal-content {
	background-color: var(--secondary-bg-color) !important;
	color: var(--text-color) !important;
}
.modal-content button {
	background-color: var(--button-color) !important;
	color: var(--text-color) !important;
	border-color: var(--button-color);
}
.modal-content button:hover,
.modal-content button:focus,
.modal-content button:active:focus {
	background-color: var(--button-color) !important;
	color: var(--text-color) !important;
	border-color: var(--button-color);
	opacity: 1;
	box-shadow: none;
}
.modal-header, .modal-footer {
	border: none;
}
.modal-body{
	max-height: 300px;
	overflow-x: auto;
}

/* Custom Loader */
.custom-loader {
	position: fixed;
	inset: 0;
	margin: auto;
	width: 50px !important;
	height: 50px !important;
	aspect-ratio: 1;
	display: grid;
	color: var(--keitaro-color);
	background: radial-gradient(farthest-side, currentColor calc(100% - 6px),#0000 calc(100% - 5px) 0);
	mask: radial-gradient(farthest-side,#0000 calc(100% - 13px),#000 calc(100% - 12px));
	-webkit-mask: radial-gradient(farthest-side,#0000 calc(100% - 13px),#000 calc(100% - 12px));
	border-radius: 50%;
	animation: l19 2s infinite linear;
}
.custom-loader:before,
.custom-loader:after { 
	content: "";
	grid-area: 1/1;
	background:
		linear-gradient(currentColor 0 0) center,
		linear-gradient(currentColor 0 0) center;
	background-size: 100% 10px,10px 100%;
	background-repeat: no-repeat;
}
.custom-loader:after { 
	transform: rotate(45deg);
}
@keyframes l19 { 
	100%{transform: rotate(1turn)}
}