@font-face {
    font-family: 'Exo 2';
    font-style: normal;
    font-weight: 200; /* предположительно Regular */
    src: url('/wp-content/themes/flatsome-child/assets/fonts/Exo_2/Exo2-Medium.woff2') format('woff');
} 

	/**/ 
html body {
    font-family: 'Exo 2', sans-serif;
    font-weight: 200;
	font-size: 20px; 
}

.container-calculator {
    max-width: 600px;
    margin: auto;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 10px;
    background-color: #f9f9f9;
}

.slider-container {
    margin-bottom: 20px;
}

input[type="range"] {
    width: 100%;  /* Ползунок занимает всю ширину контейнера */
}

.quantity-container {
    margin-top: -10px;
    font-size: 18px;
    text-align: center;  /* Выровнять текст по центру */
}

.button-container {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 10px;
    margin-bottom: 20px;
}

.toggle-button {
    font-size: 16px;
    background-color: #007bff;
    color: white;
    border: none;
    cursor: pointer;
	border-radius: 33px; /* Округление углов кнопки */
    transition: background-color 0.3s;
	text-transform: none; /* Устанавливает нормальный текстовый регистр */
	/*border: 1px solid #00F6FF;*/
}

.toggle-button:hover {
    background-color: #0056b3;
    /*border: 5px solid #add8e6;  Светло-голубая обводка при наведении */	
}

.toggle-button.active {
    background-color: #0056b3;
    /*font-weight: bold;*/
    animation: grow 0.2s forwards; /* Анимация раздувания */
}

@keyframes grow {
    from {
        transform: scale(1);
    }
    to {
        transform: scale(1.2); /* Увеличение до 1.2 раза */
    }
}

.result {
    margin-top: 20px;
    text-align: center;  /* Выровнять содержимое по центру */
    display: flex;
    flex-direction: column;
    align-items: center;  /* Выровнять элементы по центру */
    padding: 20px;  /* Увеличен отступ */
    border: 2px solid #bbb;  /* Изменен цвет рамки на серый */
    border-radius: 10px;
    background-color: #f1f1f1;
}

.result div {
    font-size: 24px;  /* Увеличен размер шрифта для всех элементов внутри блока результата */
}

.result .output-block {
    margin-bottom: 0px;  /* Добавлен отступ снизу для блока с результатом */
}

.result .output-block span,
.result .income-block span {
    font-size: 24px;  /* Изменен размер шрифта для текста */
}

.result .output-block .output-number,
.result .income-block .income-number {
    font-size: 36px;  /* Увеличен размер шрифта для чисел */
    font-weight: bold;  /* Сделать шрифт жирным */
    color: #000;  /* Сделать шрифт черным */
}

.result .income-block {
    margin-bottom: 0px;  /* Уменьшен отступ снизу для блока с доходом */
}

.calculate-button {
    padding: 10px 20px;
    font-size: 18px;
    background-color: #28a745;
    color: white;
    border: none;
    cursor: pointer;
    border-radius: 5px;
    margin-top: 10px;  /* Уменьшен отступ сверху для кнопки */
	margin-bottom: -10px;
}

.calculate-button:hover {
    background-color: #218838;
}

@media (max-width: 450px) {
    .button-container {
        gap: 2px; /* Еще меньше отступ между кнопками на мобильных устройствах */
    }
	
	.toggle-button {
        padding: 0px 16px; /* Уменьшить внутренние отступы кнопок на мобильных устройствах */
		/*margin: 0 2px; /* Уменьшить отступы на мобильных устройствах */
    }
	
	label {
		font-size: 15px; /* Укажите желаемый размер шрифта */
	}

	.quantity-container {
		font-size: 15px;
	}

	.result .output-block .output-number,
	.result .income-block .income-number {
		font-size: 25px;  /* Увеличен размер шрифта для чисел */
	}

	.result div {
		font-size: 15px;  /* Увеличен размер шрифта для всех элементов внутри блока результата */
	}	
}

@media (max-width: 450px) {
	.toggle-button {
		padding: 0px 10px; /* Уменьшить внутренние отступы кнопок на мобильных устройствах */
		margin: 7px; /* Уменьшить отступы на мобильных устройствах */
    }
	
    .toggle-button.active {
        animation: grow-mobile 0.2s forwards; /* Анимация для мобильных устройств */
    }

    @keyframes grow-mobile {
        from {
            transform: scale(1);
        }
        to {
            transform: scale(1.1); /* Уменьшение увеличения до 1.1 раза для мобильных устройств */
        }
    }	
}

@media (max-width: 350px) {
	.toggle-button {
		padding: 0px 10px; /* Уменьшить внутренние отступы кнопок на мобильных устройствах */
		font-size: 15px;
    }	
}

@media (max-width: 325px) {
	.toggle-button {
		padding: 0px 8px; /* Уменьшить внутренние отступы кнопок на мобильных устройствах */
    }	
}