@font-face {
font-family: 'Rawline Regular';
font-style: normal;
font-weight: normal;
src: local('Rawline Regular'), url('/static/fonts/rawline-400.woff') format('woff');
}


@font-face {
font-family: 'Rawline Italic';
font-style: normal;
font-weight: normal;
src: local('Rawline Italic'), url('/static/fonts/rawline-400i.woff') format('woff');
}


@font-face {
font-family: 'Rawline Thin';
font-style: normal;
font-weight: normal;
src: local('Rawline Thin'), url('/static/fonts/rawline-100.woff') format('woff');
}


@font-face {
font-family: 'Rawline Thin Italic';
font-style: normal;
font-weight: normal;
src: local('Rawline Thin Italic'), url('/static/fonts/rawline-100i.woff') format('woff');
}


@font-face {
font-family: 'Rawline ExtraLight';
font-style: normal;
font-weight: normal;
src: local('Rawline ExtraLight'), url('/static/fonts/rawline-200.woff') format('woff');
}


@font-face {
font-family: 'Rawline ExtraLight Italic';
font-style: normal;
font-weight: normal;
src: local('Rawline ExtraLight Italic'), url('/static/fonts/rawline-200i.woff') format('woff');
}


@font-face {
font-family: 'Rawline Light';
font-style: normal;
font-weight: normal;
src: local('Rawline Light'), url('/static/fonts/rawline-300.woff') format('woff');
}


@font-face {
font-family: 'Rawline Light Italic';
font-style: normal;
font-weight: normal;
src: local('Rawline Light Italic'), url('/static/fonts/rawline-300i.woff') format('woff');
}


@font-face {
font-family: 'Rawline Medium';
font-style: normal;
font-weight: normal;
src: local('Rawline Medium'), url('/static/fonts/rawline-500.woff') format('woff');
}


@font-face {
font-family: 'Rawline Medium Italic';
font-style: normal;
font-weight: normal;
src: local('Rawline Medium Italic'), url('/static/fonts/rawline-500i.woff') format('woff');
}


@font-face {
font-family: 'Rawline SemiBold';
font-style: normal;
font-weight: normal;
src: local('Rawline SemiBold'), url('/static/fonts/rawline-600.woff') format('woff');
}


@font-face {
font-family: 'Rawline SemiBold Italic';
font-style: normal;
font-weight: normal;
src: local('Rawline SemiBold Italic'), url('/static/fonts/rawline-600i.woff') format('woff');
}


@font-face {
font-family: 'Rawline Bold';
font-style: normal;
font-weight: normal;
src: local('Rawline Bold'), url('/static/fonts/rawline-700.woff') format('woff');
}


@font-face {
font-family: 'Rawline Bold Italic';
font-style: normal;
font-weight: normal;
src: local('Rawline Bold Italic'), url('/static/fonts/rawline-700i.woff') format('woff');
}


@font-face {
font-family: 'Rawline ExtraBold';
font-style: normal;
font-weight: normal;
src: local('Rawline ExtraBold'), url('/static/fonts/rawline-800.woff') format('woff');
}


@font-face {
font-family: 'Rawline ExtraBold Italic';
font-style: normal;
font-weight: normal;
src: local('Rawline ExtraBold Italic'), url('/static/fonts/rawline-800i.woff') format('woff');
}


@font-face {
font-family: 'Rawline Black';
font-style: normal;
font-weight: normal;
src: local('Rawline Black'), url('/static/fonts/rawline-900.woff') format('woff');
}


@font-face {
font-family: 'Rawline Black Italic';
font-style: normal;
font-weight: normal;
src: local('Rawline Black Italic'), url('/static/fonts/rawline-900i.woff') format('woff');
}

* {
	box-sizing: border-box;
}
body {
	padding-right: 0 !important;
	background: #F2F3F7;
	position: relative;
}

body,html {
    height: 100%;
}

p,a,li,div,button,input,textarea, h1, h2, h3, h4, h5 {
	font-family: "Rawline Medium", sans-serif;
	color: #1A1A1A;
	font-size: 15px;
	font-weight: 400;
	line-height: 160%;
}
a, a:hover, a:active, a:focus, textarea,
button, input, button:hover, button:active, button:focus,
input:focus, input:active {
	text-decoration: none !important;
	outline: none !important;
}
strong {
	font-weight: 600;
}
i {
	font-style: italic;
}
input.button,
button {
	border: none;
}
a {
	cursor: pointer;
	color: #428FFF;
	font-weight: 500;
}

p {
    margin: 0;
}

ul, li {
list-style: none;
}

input {
    border: none;
}

#auth-block {
    height: 100%;
}

#auth-block .container {
    height: 100%;
}

.auth-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.auth-block {
    background: #ffffff;
    padding: 24px;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 570px;
}

.auth-block .auth-title {
    text-align: center;
    font-weight: 600;
    font-size: 22px;
    margin-bottom: 16px;
}

.subtitle-auth {
    margin-bottom: 30px;
    font-size: 16px;
    text-align: center;
}

.input-label {
    display: block;
    margin-bottom: 16px;
}

.input-label label {
    font-weight: 500;
    font-size: 14px;
    margin-bottom: 8px;
}

.guru-input {
    background: #F2F3F7;
    color: #A8B5CB;
    border-radius: 8px;
    padding: 13px 12px;
    width: 100%;
}

.auth-block form {
    padding-left: 60px;
    padding-right: 60px;
    width: 100%;
    margin-bottom: 30px;
}

.guru-button {
    background: #428FFF;
    color: #ffffff;
    padding: 10px 12px;
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 600;
    font-size: 16px;
    width: 100%;
}

.auth-block p {
    text-align: center;
    font-size: 14px;
    font-weight: 500;
}

.light-button {
    background: #C6CDD9;
}

.form-line {
    width: 100%;
    height: 1px;
    border-radius: 1px;
    background-color: #DEE6F3;
}

.bottom-text {
    font-size: 14px;
    font-weight: 500;
    color: #788394;
    text-align: center;
    margin-top: 24px;
}

.selector {
    position: relative;
}

.selector-button {
    background: #F2F3F7;
    border-radius: 8px;
    width: 100%;
    padding: 11px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
}

.selector-button img {
    transition: .4s;
    margin-left: 15px;
}

.selector-list {
    width: max-content;
    border-radius: 8px;
    background: rgb(255, 255, 255);
    position: absolute;
    z-index: 6;
    margin-top: 5px;
    height: 0px;
    overflow: hidden;
    opacity: 0;
    transition: .4s;
    border-width: 1px 1px 0px 1px;
    border-style: solid;
    border-color: #DEE6F3;
    box-shadow: 0px 5px 8px rgba(198, 205, 217, 0.4);
    border-radius: 8px 8px 8px 8px;
    max-width: 300px;
}

.selector-list label {
    display: block;
    margin-bottom: 0;
}

.selector-list label:hover {
    transition: 0.4s;
    background: #F2F3F7;
}

.selector-list input {
    display: none;
}

.selector-list label > span {
    padding: 8px 12px;
    display: block;
    cursor: pointer;
    transition: .4s;
}

.selector-button.active + .selector-list {
    height: auto;
    overflow: visible;
    opacity: 1;
    padding: 5px;
    max-height: 450px;
    overflow-y: scroll;
    overflow-x: hidden;
}

.selector-button.active img {
    transform: rotate(180deg);
    transition: 0.4s;
}

#auth-step-business {
    display: none;
}

.error-input {
    border: 1px solid #FF6A99;
}

.form-error {
    display: none;
    color: #FF6A99;
    font-size: 12px;
    font-weight :500;
    margin-top: 8px;
}

.form-error.active {
    display: block;
}

.error-alert {
    border-radius: 16px;
    background: #203148;
    color: #ffffff;
    padding: 16px;
    position: absolute;
    left: 25%;
    top: 25%;
    font-size: 14px;
    width: 250px;
    transition: 0.4s;
}

header {
    background: #ffffff;
    height: 75px;
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
}

.header-logo {
    background: #F2F3F7;
    width: 50px;
    height: 50px;
    border-radius: 100%;
}

header nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.navigation-active {
    display: flex!important;
}

.dropdown-nav {
    position: relative;
}

.nav-item {
    font-size: 16px;
    font-weight: 400;
    color: #272626;
}

.nav-item:not(:last-child) {
    margin-right: 40px;
}

.dropdown-button {
    cursor: pointer;
}

.dropdown-button img {
    margin-left: 10px;
    margin-bottom: 5px;
}

.profile-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.profile-header a img {
    margin-right: 16px;
}

.profile-container {
    position: relative;
}

.profile-button {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}

.profile-button .profile-img {
    margin-left: 10px;
    border-radius: 100%;
    width: 50px;
    height: 50px;
    border: 1px solid #C6CDD9;
    margin-right: 8px;
    object-fit: cover;
}

.container {
    height: 100%;
}

.page-content {
    padding-top: 25px;
}

.page-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 25px;
}

.page-title h1 {
    color: #272626;
    font-size: 22px;
    font-weight: 600;
}

.calendar-widget {
    background-color: #ffffff;
    border-radius: 8px;
    padding: 13px;
    display: flex;
    align-items: center;
    position: relative;
    cursor: pointer;
}

.calendar-widget .calendar-value {
    color: #272626;
    font-size: 14px;
    font-weight: 500;
}

.calendar-widget .calendar-image {
    margin-left: 10px;
}

.calendar-widget .calendar-input {
    opacity: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.calendar-widget.left-widget .calendar-input {
    width: 150%;
    height: 100%;
    cursor: pointer;
    left: -50%;
}

.calendar>.header .month-name>span {
    text-transform: capitalize!important;
}

.main-block {
    background: #ffffff;
    border-radius: 16px;
    margin-bottom: 16px;
}

#money-period {
    padding: 24px;
}

#money-period .block-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 25px;
    border-bottom: 1px solid #DEE6F3;
}

#money-period .block-title h2 {
    font-size: 20px;
    font-weight: 600;
}

#money-period .block-title .money-value {
    font-size: 22px;
    font-weight: 600;
}

#money-period .chart-container {
            display: flex;
            height: 400px;
            margin-bottom: 30px;
            position: relative;
        }
#money-period .y-axis {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-right: 15px;
    font-weight: bold;
    color: #555;
}
#money-period .chart {
    flex-grow: 1;
    display: flex;
    align-items: flex-end;
    gap: 20px;
    padding: 0 15px;
    border-left: 2px solid #ddd;
    border-bottom: 2px solid #ddd;
}
#money-period .bar {
    width: 60px;
    background: linear-gradient(to top, #4b9eda, #2c78b5);
    border-radius: 4px 4px 0 0;
    position: relative;
    transition: height 0.5s ease;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
#money-period .bar-label {
    position: absolute;
    top: -25px;
    left: 0;
    right: 0;
    text-align: center;
    font-weight: bold;
    color: #2c3e50;
}
#money-period .month-label {
    text-align: center;
    margin-top: 8px;
    font-weight: 500;
    color: #555;
}
#money-period .controls {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: center;
    margin-top: 30px;
    padding: 20px;
    background-color: #f0f5f9;
    border-radius: 8px;
}
#money-period .data-input {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
#money-period input {
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    width: 120px;
}
#money-period button {
    padding: 10px 20px;
    background-color: #3498db;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s;
}
#money-period button:hover {
    background-color: #2980b9;
}
#money-period .bar-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.chart-block {
    margin-top: 30px;
}

.apexcharts-toolbar {
    display: none!important;
}

.apexcharts-text tspan {
    font-weight: 500;
    color: #788394;
}

.easepick-wrapper {
    z-index: 100;
}

#money-success {
    padding: 16px;
    border: 1px solid #428FFF;
}

#money-success .block-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#money-success h3 {
    margin-left: 16px;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 0;
}

#money-success .money-value {
    font-weight: 600;
    font-size: 22px;
    margin-top: 16px;
    margin-bottom: 14px;
}

.block-name {
    font-size: 14px;
    font-weight: 500;
    color: #788394;
}

#sales {
    padding: 16px;
}

.sales-content {
    margin-top: 8px;
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid #DEE6F3;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.sales-label {
    display: flex;
    align-items: center;
}

.sales-label p {
    color: #788394;
    font-size: 12px;
}

.sales-label .money-value {
    color: #272626;
    font-size: 18px;
    font-weight: 500;
    margin-left: 15px;
}

.sales-label .quantity {
    color: #788394;
    font-size: 16px;
}

.modal-link {
    display: flex;
    align-items: center;
    cursor: pointer;
    background: inherit;
}

.modal-link p {
    color: #428FFF;
    margin-left: 6px;
    font-size: 12px;
}

#detail-money {
    height: 100%;
}

#detail-money .detail-chart {
    border: 1px solid #428FFF;
    border-radius: 16px;
    padding: 16px;
}

.main-detail {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 16px;
}

.main-detail h3 {
    text-align: center;
    color: #272626;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 6px;
}

.type-chart {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
}

.type-chart button {
    margin-right: 8px;
    color: #788394;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    background: #ffffff;
}

.type-chart button.active {
    color: #428FFF;
    text-decoration: underline!important;
    padding-bottom: 2px;
}

.type-chart button:last-child {
    margin-right: 0;
}

.detail-container {
    padding-left: 16px;
    padding-right: 16px;
}

.detail-block {
    padding-top: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid #DEE6F3;
}

.detail-block:last-child {
    padding-bottom: 0;
    border: none;
}

.type-detail {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
}

.type-detail .type-circle {
    width: 12px;
    height: 12px;
    border-radius: 100%;
}

#main-services .type-detail .type-circle {
    background: #DAF54E;
}

#plus-services .type-detail .type-circle {
    background: #788394;
}

#products .type-detail .type-circle {
    background: #428FFF;
}

.type-detail .type-detail-title {
    margin-left: 8px;
    color: #788394;
    font-size: 14px;
}

.modal-link {
    padding: 0;
    margin-top: 8px;
}

#medium-check .money-value, #volume-block .money-value, #return-block .money-value, #clients-block .money-value {
    font-weight: 600;
    font-size: 20px;
}

.bottom-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#medium-check, #return-block, #volume-block, #clients-block {
    padding: 16px;
}

#medium-check .modal-link, #return-block .modal-link {
    margin-top: 0;
}

.modal-content {
    border-radius: 16px;
    background: #ffffff;
    border: none;
    padding: 23px 20px;
}

.modal-header {
    padding: 0;
    padding-bottom: 25px;
    border-bottom: 1px solid #DEE6F3;
    margin-bottom: 8px;
}

.modal-header .modal-title {
    font-weight: 600;
    font-size: 22px!important;
}

.modal-header .btn-close {
    --bs-btn-close-opacity: 1;
}

.info-chart {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 15px;
}

.chart-labels {
    display: flex;
    align-items: center;
}

.modal-body .calendar-widget {
    background: #F2F3F7;
}

@media (min-width: 576px) {
    .modal-dialog {
        max-width: 1000px;
    }
}

.chart-labels .type-detail {
    margin-right: 16px;
}

.chart-table {
    border-collapse: collapse;
    overflow: hidden;
    width: 100%;
    position: relative;
}

.chart-table tr {
    border-bottom: 1px solid #DEE6F3;
}

.chart-table tbody tr:last-child {
    border-bottom: none;
}

.chart-table td {
    padding: 12px;
}

.chart-table thead td {
    color: #788394;
    font-size: 12px;
    font-weight: 500;
}

.chart-table tbody td {
    color: #272626;
    font-size: 16px;
}

.total-table td {
    font-weigth: 600!important;
    font-size: 20px!important;
    color: #272626;
}

.total-table td:first-child {
    color: #788394;
}

.dropdown-button.active img {
    transform: rotate(180deg);
    transition: 0.4s;
}

.dropdown-list {
    min-width: 150%;
    border-radius: 8px;
    background: rgb(255, 255, 255);
    position: absolute;
    z-index: 6;
    margin-top: 15px;
    height: 0px;
    overflow: hidden;
    opacity: 0;
    transition: .4s;
    border-width: 1px 1px 0px 1px;
    border-style: solid;
    border-color: #DEE6F3;
    box-shadow: 0px 5px 8px rgba(198, 205, 217, 0.4);
    border-radius: 8px 8px 8px 8px;
}

.dropdown-list li {
    display: block;
    margin-bottom: 0;
}

.dropdown-list li:hover {
    transition: 0.4s;
    background: #F2F3F7;
}

.dropdown-list li > a {
    padding: 8px 12px;
    display: block;
    cursor: pointer;
    transition: .4s;
    color: black;
}

.dropdown-button.active + .dropdown-list {
    height: auto;
    overflow: visible;
    opacity: 1;
    padding: 5px;
}

.profile-button.active img:nth-child(2) {
    transform: rotate(180deg);
    transition: 0.4s;
}

.profile-list {
    width: 150px;
    border-radius: 8px;
    background: rgb(255, 255, 255);
    position: absolute;
    z-index: 6;
    margin-top: 5px;
    height: 0px;
    overflow: hidden;
    opacity: 0;
    transition: .4s;
    border-width: 1px 1px 0px 1px;
    border-style: solid;
    border-color: #DEE6F3;
    box-shadow: 0px 5px 8px rgba(198, 205, 217, 0.4);
    border-radius: 8px 8px 8px 8px;
}

.profile-list a:hover {
    transition: 0.4s;
    background: #F2F3F7;
}

.profile-list a {
    padding: 8px 12px;
    display: block;
    cursor: pointer;
    transition: .4s;
    color: black;
}

.profile-button.active + .profile-list {
    height: auto;
    overflow: visible;
    opacity: 1;
    padding: 5px;
}

.dynamic-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#dynamic-income {
    padding: 16px 24px;
}

#dynamic-income h3 {
    font-weight: 600;
    font-size: 16px;
    color: #272626;
}

#dynamic-income .calendar-widget {
    background: #F2F3F7;
        padding: 11px 12px;
        margin-left: 8px;
}

#dynamic-income .selector .name, #dynamic-income .calendar-value {
    color: #788394;
}

.dynamic-header {
    margin-bottom: 24px;
}

.process-period {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
}

.process-period:last-child {
    margin-bottom: 0;
}

.process-period .process-date {
    color: #788394;
    font-size: 14px;
}

.process-period .process-bar {
    width: 250px;
    background: #DEE6F3;
    border-radius: 8px;
    height: 5px;
    margin-left: 30px;
    margin-right: 30px;
}

.process-period .process-bar .process-width {
    background: #428FFF;
    border-radius: 8px;
    height: 100%;
    display: block;
}

.process-period .process-value {
    color: #272626;
    font-weight: 600;
    font-size: 16px;
}

.process-end img {
    margin-left: 8px;
    margin-right: 8px;
}

.process-end .process-plus-value {
    color: #17B059;
    font-weight: 600;
    font-size: 16px;
}

#income-month {
    padding: 16px;
    height: 100%;
}

#income-month .dynamic-header {
    margin-bottom: 16px;
}

.income-label {
    display: flex;
    align-items: center;
    padding-bottom: 8px;
    margin-bottom: 8px;
    border-bottom: 1px solid #DEE6F3;
}

.income-label:last-child {
    border: none;
    padding-bottom: 0;
    margin-bottom: 0;
}

.income-label .income-text {
    color: #788394;
    font-weight: 500;
    font-size: 12px;
    margin-right: 16px;
}

.income-label .income-label-value {
    font-weight: 600;
    color: #17B059;
    font-size: 20px;
}

.income-label .expenses-value {
    color: #FF6A99!important;
}

.table-main-header {
    margin-top: 16px;
    margin-bottom: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.table-main-header h2 {
    color: #686868;
    font-size: 18px;
    font-weight: 500;
}

.table-main-header .calendar-widget {
    margin-left: 20px;
        padding: 11px 12px;
}

.table-main-header .selector-button {
    background: #ffffff;
}

.analytic-table {
    border-collapse;
    overflow: hidden;
    position: relative;
    border-radius: 2px;
    overflow-x: scroll;
    min-width: 120%;
}

.analytic-table thead td {
    padding: 12px 16px;
    color: #97A3B5;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
}

.analytic-table tbody tr {
    background: #FFFFFF;
    border-bottom: 1px solid #DEE6F3;
}

.analytic-table tbody tr:last-child {
    border: none;
}

.analytic-table tbody tr td {
    padding: 16px;
    color: #272626;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
}

.analytic-table tbody .income-row td {
    color: #17B059;
    font-size: 16px;
    font-weight: 600;
    white-space: nowrap;
}

.analytic-table tbody .income-row td:first-child {
    color: #272626;
}

.analytic-table tbody .expenses-row td {
    color: #F0495F;
    font-size: 16px;
    font-weight: 600;
    white-space: nowrap;
}

.analytic-table tbody .expenses-row td:first-child {
    color: #272626;
}

.analytic-table-container {
    overflow: auto;
}

.top-scroll { overflow-x: auto; overflow-y: hidden; height: 16px; }
.top-scroll .spacer { height: 1px; width: 0; }

.top-scroll { margin-bottom: 8px; }
.analytic-table-container { margin-top: 6px; }

.bottom-offset { height: 8px; }

#sales-page .table-main-header {
    margin-bottom: 8px;
}

#sales-page .page-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.table-parameters {
    display: flex;
    align-items: center;
}

.table-parameters .selector {
    margin-right: 16px;
}

.table-parameters .selector-button {
    background: #ffffff;
}

.table-parameters .calendar-widget {
    background: #FFFFFF;
    padding: 11px 12px;
}

#income-page, #sales-page, #services-page, #employers-page, #clients-page, #fot-page {
    padding-bottom: 30px;
}

#services-page .table-main-header {
    margin-bottom: 8px;
}

#services-page .page-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#services-page table {
    min-width: 100%;
}

.link-grey {
    font-size: 12px;
    font-weight: 500;
    margin-right: 25px;
}

.link-grey p {
    color: #788394!important;
}

.table-parameters .modal-link {
    margin-right: 16px;
}

#employers-page .analytic-table-container {
    position: relative;
}

.bar-container {
    display: flex;
    align-items: center;
}

.bar-container .table-bar {
    width: 100px;
    height: 10px;
    border-radius: 30px;
    margin-right: 8px;
    background: #DEE6F3;
}

.bar-container .table-bar .table-bar-process {
    height: 100%;
    display: block;
    border-radius: 16px;
}

.bar-container p {
    color: #272626;
    font-size: 12px;
}

.analytic-table-container .table-fixed {
    min-width: auto!important;
    position: sticky;
    right: 0;
    top: 0;
    z-index: 100000;
}

.fixed-col {
    position: sticky;
    right: 0;
    background: #fff; /* обязательно, чтобы не просвечивало */
    z-index: 2;
    min-width: 180px;
}

.fixed-plan {
    right: 180px;
    box-shadow: -10px 0px 10px 0px rgba(198, 205, 217, 0.3);
}

thead .fixed-col {
  position: sticky;
  top: 0;
  background: #f7f7f7;
  z-index: 3;
  min-width: 180px;
  max-width: 180px;
  background: #F2F3F7;
}

.guru-alert {
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
}

.guru-alert p {
    font-size: 14px;
    font-weight: 500;
}

.blue-alert {
    border: 1px solid #428FFF;
    background: #DEE6F3;
}

.blue-alert p {
    color: #428FFF;
}

.guru-alert a {
    line-height: 100%;
}

#stopClients .chart-labels .type-circle {
    width: 40px;
    height: 18px;
    border: none;
    border-radius: 0px;
}

#typeSalesBlock, #dynamicLoyalty {
    padding: 24px;
}

.top-chart-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 16px;

    border-bottom: 1px solid #DEE6F3;
}

.top-chart-container h3 {
    color: #272626;
    text-align: center;
    font-size: 18px;
    margin-bottom: 16px;
}

#clients-page #typeSalesBlock .chart-table tr {
    border-bottom: none;
}

#clients-page #typeSalesBlock .chart-table {
    overflow: visible!important; 
}

.chart-row-labels {
    display: flex;
    flex-wrap: wrap;
    margin-top: 25px;
}

.chart-row-labels .type-detail {
    margin-right: 16px;
    cursor: pointer;
}

.chart-row-labels .type-detail.active .type-detail-title {
    text-decoration: underline;
    color: #428FFF;
}

#fot-filial {
    padding: 16px;
}

#dop-expenses {
    padding: 16px 25px;
}

.expenses-container {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.expenses-table {
    border-collapse: collapse;
    overflow: hidden;
    width: 30%;
    margin-top: 16px;
    position: relative;
}

.expenses-table:nth-child(3n+1) tr td:last-child {
    padding-right: 20px;
}

.expenses-table:nth-child(3n+2) tr td:first-child {
    padding-left: 20px;
}

.expenses-table:nth-child(3n+2) tr td:last-child {
    padding-right: 20px;
}

.expenses-table:nth-child(3n+2) {
    border-right: 1px solid #DEE6F3;
    border-left: 1px solid #DEE6F3;
}

.expenses-table:nth-child(3n) tr td:first-child {
    padding-left: 20px;
}

.expenses-table thead td {
    color: #788394;
    font-size: 12px;
    font-weight: 500;
}
.expenses-table td {
    padding: 4px;
}

.expenses-table tbody td {
    color: #272626;
    font-size: 14px;
}

#fot-page .block-name {
    font-weight: 600;
    font-size: 16px;
    color: #272626;
}

#fot-page .money-value {
    font-size: 20px;
    font-weight: 600;
    color: #272626;
}

.fot-bottom-info {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding-top: 16px;
    border-top: 1px solid #DEE6F3;
}

.fot-bottom-info .total-all {
    color: #788394;
    font-size: 14px;
}

.fot-bottom-info .total-expenses {
    font-weight: 600;
    color: #272626;
}

.fot-bottom-info .modal-link p {
    font-size: 14px;
}

.negative-fot {
    color: #17B059!important;
}

.plus-fot {
    color: #F0495F!important;
}

#fot-page .analytic-table {
    min-width: auto;
    width: 100%;
}

@media (min-width: 576px) {
    #addExpenses .modal-dialog {
        max-width: 450px;
    }
}

.settings-list {
    transition: 0.4s;
    opacity: 0;
    visibility: hidden;
    position: absolute;
    right: 0;
    top: 40px;
    width: 300px;
    background: #ffffff;
    box-shadow: 0px 4px 15px 0px rgba(198, 205, 217, 0.5);
    border: 1px solid #DEE6F3;
    padding: 16px 20px;
    border-radius: 8px;
    z-index: 10;
}

.settings-active {
    opacity: 1;
    visibility: visible;
}

.settings-list p {
    color: #686868;
    font-size: 12px;
    font-weight: 500;
    padding-bottom: 16px;
    border-bottom: 1px solid #DEE6F3;
}

.settings-radio-el {
    display: flex;
    align-items: center;
    padding-top: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid #DEE6F3;
}

.settings-radio-el input {
    margin-left: 8px;
    margin-right: 8px;
    width: 24px;
    height: 24px;
}

.settings-radio-el label {
    color: #272626;
    font-size: 14px;
}

#visitsClients .chart-labels .type-circle {
    width: 40px;
    height: 18px;
    border: none;
    border-radius: 0px;
}

.celery-value {
       display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    top: 40%;
    left: 0;
    right: 0;
    text-align: center;
}

.celery-value h3 {
    font-size: 16px;
    text-align: center;
    color: #788394;
    margin-bottom: 0;
}

.celery-value p {
    color: #272626;
    font-size: 14px;
    text-align: center;
}

#employerAnalytic .main-block {
    background: #F2F3F7;
    padding: 16px;
    margin-bottom: 8px;
}

#employerAnalytic .main-block .block-name {
    color: #788394;
    font-size: 14px;
    margin-bottom: 8px;
}

#employerAnalytic .main-block .bottom-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#employerAnalytic .main-block .block-value {
    font-size: 18px;
    font-weight: 500;
    color: #272626;
}

.main-employer {
    padding-bottom: 16px;
    border-bottom: 1px solid #DEE6F3;
    margin-bottom: 32px;
}

#employerAnalytic h4 {
    font-size: 18px;
    font-weight: 500;
    color: #272626;
    margin-bottom: 32px;
}

.table-employer-table {
    border-collapse: collapse;
    overflow: hidden;
    position: relative;
    width: 100%;
}

.table-employer-table thead tr td:first-child, .table-employer-table tbody tr td:first-child {
        width: 65%;
}

.table-employer-table thead td {
    color: #788394;
    font-size: 14px;
    padding: 4px;
}

.table-employer-table tbody td {
    padding: 10px;
    padding-left: 4px;
    color: #272626;
    font-size:14px;
}


#fot-page .calendar-input {
    width: 200px;
    right: 0;
}

.warning-alert {
    margin-left: 20px;
    display: flex;
    align-items: center;
}

.warning-alert img {
    margin-right: 7px;
}

.warning-alert p {
    color: #F0495F;
    font-size: 12px;
    font-weight: 400;
}

#dynamic-income .income-info, #dynamic-income .expenses-info {
    display: none;
}

#dynamic-income .active {
    display: block;
}

.task-button {
    width: auto;
    padding-left: 20px;
    padding-right: 20px;
}

.settings-tasks {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
}

.statuses-tasks {
    display: flex;
    align-items: center;
}

.statuses-tasks .status-link {
    font-size: 16px;
    margin-right: 28px;
    color: #788394;
}

.statuses-tasks .status-link:last-child {
    margin-right: 0px;
}

.statuses-tasks .status-link.expired-status {
    color: #F0495F;
}

.statuses-tasks .status-link.active {
    color:#272626;
    font-weight: 600;
    text-decoration: underline!important;
}

.date-tasks {
    display: flex;
    align-items: center:
}

.date-tasks p {
    font-size: 14px;
    color: #788394;
    margin-right: 24px;
}

.date-tasks .selector-button {
    background: inherit;
    font-size: 14px;
    color: #428FFF;
    border: none;
    padding: 0;
}

.search-container {
    position: relative;
}

.search-container img {
    position: absolute;
    top: 30%;
    left: 10px;
}

.search-container .search-input {
    padding-left: 38px;
    padding-top: 12px;
    padding-bottom: 12px;
    font-size: 14px;
    font-weight: 500;
    color: #97A3B5;
    background: #ffffff;
    border-radius: 8px;
}

.tasks-container {
    overflow-x: hidden;
    display: flex;
    gap: 20px;
    margin-top: 30px;
}

.tasks-block {
    display: flex;
    flex-direction: column;
    min-width: 168px;
}

.tasks-block .tasks-date {
    margin-bottom: 15px;
    color: #788394;
    font-size: 16px;
    font-weight: 600;
}

.tasks-block .tasks-date span {
    color: #272626;
}

.tasks-block .task-block {
    margin-bottom: 15px;
    background: #ffffff;
    border-radius: 16px;
    padding: 16px;
    cursor: pointer;
}

.task-block .task-header {
    padding-bottom: 8px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #DEE6F3;
}

.task-header p {
    color: #788394;
    font-size: 12px;
    font-weight: 500;
}

.task-block .description-task {
    color: #272626;
    font-weight: 500;
    font-size: 14px;
}

.tasks-block .new-task-link {
    color: #788394;
    font-weight: 500;
    font-size: 14px;
}

#tasks-page {
    padding-bottom: 50px;
}

.noscroll-table {
    overflow: hidden;
}

.noscroll-table .analytic-table {
    overflow: hidden;
    min-width: 100%;
}

.list-pages {
    display: flex;
    justify-content: center;
    margin-top: 24px;
    align-items: center;
}

.list-pages ul {
    align-items: center;
    padding: 0;
    margin: 0;
    display: flex;
}

.list-pages ul .page-num {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content :center;
    font-size: 12px;
    color: #7E8299;
    font-weight: 500;
}

.list-pages ul .page-num-selected {
    background: #3E97FF;
    border-radius: 6px;
    color: #FFFFFF;
}

.page-num a {
    line-height: 50%;
    color: #7E8299;
}

.tasks-table {
    border-collapse: separate;
    border-spacing: 0 8px;
    overflow: hidden;
    min-width: 100%;
}

.tasks-table thead td {
    padding: 16px;
    padding-bottom: 8px;
    color: rgba(120, 131, 148, 1);
    font-weight: 500;
    font-size: 14px;
}

.tasks-table tbody tr {
    border-radius: 16px;
    margin-bottom: 8px;
}

.tasks-table tbody tr td {
    color: #788394;
    font-size: 12px;
    font-weight: 500;
    padding: 18px 16px;
    background: #ffffff;
}
.tasks-table tbody tr td:first-child {
    border-radius: 16px 0 0 16px
}

.tasks-table tbody tr td:last-child {
    border-radius: 0 16px 16px 0;
}


.tasks-table tbody tr .table-description {
    display: flex;
    align-items: center;
}

.tasks-table tbody tr .table-description p {
    margin-left: 8px;
    color: #F0495F;
    font-weight: 500;
    font-size: 14px;
}

.tasks-confirmed tbody tr .table-description p {
    color: #97A3B5;
}

.task-modal .modal-title {
    font-weight: 600;
    font-size: 20px!important;
    word-wrap: break-word;
}

.task-modal .modal-header {
    margin-bottom: 17px;
    padding-bottom: 0;
    border-bottom: none;
}

#addTask .add-task-text {
    margin-bottom: 25px;
    color: #686868;
    font-size: 16px;
}

#addTask .modal-dialog {
    max-width: 420px;
}

#addTask .modal-add {
    background: #F2F3F7;
    padding: 16px 12px;
    display: flex;
    align-items: center;
    border-radius: 8px;
    margin-bottom: 8px;
    width: 100%;
}

#addTask .modal-add p {
    color: #428FFF;
    font-size: 16px;
    margin-left: 10px;
}

.task-modal .modal-body {
    padding: 0;
}

.guru-form-group {
    display: flex;
    align-items: flex-end;
    margin-bottom: 23px;
}

.guru-form-group .checkbox-label {
    margin-left: 40px;
    display: flex;
}

.checkbox-label input[type="checkbox"] {
    background: #DEE6F3;
    border-radius: 4px;
    width: 24px;
    height: 24px;
}

.guru-form-group .input-label {
    margin-bottom: 0px;
}

.guru-form-group .input-label label {
    font-weight: 500;
    font-size: 14px;
    color: #788394;
}

.guru-form-group .checkbox-label label {
    margin-left: 16px;
    font-size: 16px;
    color: #272626;
}

#createTemplateTask .modal-header {
    margin-bottom: 25px;
}

.checkbox-label img {
    margin-left: 8px;
}

.bottom-form-modal {
    padding-top: 24px;
    border-top: 1px solid #DEE6F3;
}

textarea {
    border: none;
}

.task-modal .selector-button {
    min-width: 210px;
}

.checkbox-label input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 24px;
  height: 24px;
  background: #DEE6F3; /* цвет фона */
  border: none; /* убираем бордер */
  border-radius: 4px; /* скругление, если нужно */
  cursor: pointer;
  position: relative;
  vertical-align: middle;
  outline: none;
}

/* Состояние при checked */
.checkbox-label input[type="checkbox"]:checked {
  background-color: #4780ff; /* цвет фона при выборе */
}

/* Можно добавить галочку через псевдоэлемент */
.checkbox-label input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
      top: 7px;
    left: 10px;
  width: 4px;
  height: 8px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* Для удобства клика на label */
.checkbox-label label {
  cursor: pointer;
  user-select: none;
}

.option-more {
    display: none;
    align-items: flex-end;

}

.option-active {
    display: flex;
}

.option-more .period-value {
    margin-left: 16px;
    font-size: 12px;
    margin-bottom: 10px;
}

.option-more .period-text {
    margin-left: 40px;
    margin-bottom: 12px;
    font-size: 12px;
    color: #788394;
}

.text-group {
    display: flex;
    align-items: center;
    margin-bottom: 23px;
    border-bottom: 1px solid #DEE6F3;
    padding-bottom: 23px;
}

.text-group .text-item {
    min-width: 200px;
}

.text-group .text-item .text-label {
    color: #788394;
    font-weight: 500;
    font-size: 14px;
    margin-bottom: 8px;
}

.text-group .text-item .text-description {
    font-size: 16px;
    color: #272626;
        word-wrap: break-word;
}


#viewTask .bottom-form-modal {
    border-top: none;
    padding-top: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
}

.task-settings {
    display: flex;
    align-items: center;
    width: 33%;
    cursor: pointer;
}

.task-settings p {
    color: #788394;
    font-size: 14px;
    font-weight: 500;
    margin-left: 8px;
}

.calendar-block .calendar-container {
            width: 100%;
            background: white;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
            overflow: hidden;
}

.calendar-block .calendar-header {
    background: #2c3e50;
    color: white;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.calendar-block .calendar-header h2 {
    font-weight: 500;
    font-size: 1.5rem;
}

.calendar-block .nav-btn {
    background: none;
    border: none;
    color: white;
    font-size: 1.2rem;
    cursor: pointer;
    padding: 5px 10px;
    border-radius: 5px;
    transition: background 0.3s;
}

.calendar-block .nav-btn:hover {
    background: rgba(255, 255, 255, 0.1);
}

.calendar-block .calendar {
    width: 100%;
    border-collapse: collapse;
}

.calendar-block .weekdays {
        background: #ffffff;
    color: #97A3B5;
}

.calendar-block .weekdays th {
    padding: 12px;
    font-size: 14px;
    font-weight: 500;
    border: 1px solid #DEE6F3;
}

.calendar-block .calendar td {
    width: 14.28%; /* 100% / 7 */
    height: 200px;
    text-align: center;
    vertical-align: middle;
    border: 1px solid #DEE6F3;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
    padding: 12px;
    padding-top: 60px;
}

.calendar-block .calendar td .date-value {
    color: #272626;
    font-size: 22px;
    font-weight: 600;
    position: absolute;
    left: 12px;
    top: 12px;
}

.calendar-block .calendar td:hover {
    background: #f5f9ff;
}

.calendar-block .current-month {
    font-weight: 500;
    color: #2c3e50;
}

.calendar-block .other-month {
    color: #95a5a6;
    opacity: 0.5;
    background: #F2F3F7;
}

.calendar-block .today {
    background: #3498db;
    color: white;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}

.calendar-block .controls {
    padding: 15px;
    display: flex;
    justify-content: center;
    gap: 10px;
    background: #f8f9fa;
    border-top: 1px solid #e0e0e0;
}

.calendar-block select button {
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 5px;
    background: white;
    cursor: pointer;
}

.calendar-block button {
    background: #3498db;
    color: white;
    border: none;
    transition: background 0.3s;
}

.calendar-block button:hover {
    background: #2980b9;
}

.calendar-task-item {
    width: 100%;
    padding: 8px;
    background: #DEE6F3;
    border-radius: 4px;
    color: #272626;
    font-size: 12px;
    font-weight: 500;
}

.settings-item {
    width: fit-content;
    margin-bottom: 25px;
    display: flex;
    background: #DEE6F3;
    border-radius: 40px;
    padding: 8px 14px;
    align-items: center;
}

.settings-item p {
    font-size: 16px;
    color: #272626;
    margin-right: 10px;
}

.settings-item .cancel-settings {
    background: inherit;
    border: navajowhite;
    display: flex;
    align-items: center;
    padding: 0;
}

.cancel-settings img {
    width: 13px;
    height: 13px;
}

.empty-tasks {
    color: #788394;
    font-size: 16px;
}

.light-guru {
    background: #ffffff;
    border: 1px solid #428FFF;
    color: #428FFF;
}

.calendar-task {
    background: #DEE6F3;
    border-radius: 4px;
    padding: 8px;
    color: #272626;
    font-size: 12px;
    font-weight: 500;
    margin-bottom: 4px;
    display: block;
    text-align: left;
}

.view-more {
    color: #428FFF;
    font-size: 12px;
    font-weight: 500;
}


.tasks-day tbody tr .table-description p {
    color: black!important;
}

.return-month {
    display: flex;
    align-items: center;
    cursor: pointer;
}

.return-month .tasks-date {
    color: #788394;
    font-size: 16px;
    font-weight: 600;
    margin-left: 8px;
}

.return-month .tasks-date span {
    color: #272626;
}

.mini-modal .modal-dialog {
    width: 400px;
}

.selector-button.disabled {
    pointer-events: none;
    opacity: 0.5;
}

.empty-search {
    color: #788394;
    font-size: 16px;
}

.settings-radio-el {
	    cursor: move;
	        user-select: none;
		    transition: background-color 0.2s;
	    }

	    .settings-radio-el.dragging {
		        opacity: 0.5;
			    background-color: #f0f0f0;
		    }

		    .settings-radio-el.drag-over {
			        border-top: 2px solid #007bff;
			}

			.column-hidden {
				    display: none !important;
			    }

			    /* Стили для перетаскивания */
			    .settings-radios {
				        min-height: 50px;
				}

.selector-button.light-selector {
    background: inherit;
    font-size: 14px;
    color: #428FFF;
    border: none;
    padding: 0;
}

.breadcrumbs-main {
	    display: flex;
	        margin-bottom: 25px;
	}

.breadcrumbs-main .bread-item {
    font-weight: 500;
    font-size: 14px;
    color: #788394;
}

.bread-item a {
    color: #788394;
}

.bread-item.active {
    color: #272626;
}

.card-user {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    flex-direction: column;
    margin-bottom: 0;
}

.avatar-user {
    border-radius: 100%;
    width: 100px;
    height: 100px;
    border: 1px solid #C6CDD9;
    margin-bottom: 25px;
}

.card-user h3 {
    font-size: 16px;
    color: #2F2E2E;
    margin-bottom: 24px;
}

.card-user .delete-account {
    display: flex;
    align-items: center;
}

.delete-account p {
    color: #788394;
    font-size: 12px;
    font-weight: 500;
    margin-left: 8px;
}

.main-block.info-user {
    padding: 16px 24px;
    height: 100%;
}

.block-header-info {
    display: flex;
    justify-content: flex-end;
}

.info-user .text-group {
    border-bottom: none;
    margin-bottom: 0;
}

.info-user .text-group .text-item {
    min-width: 300px;
}

#editSettings .modal-dialog {
    max-width: 400px;
}

.main-block.profile-links {
    padding: 16px;
}

.profile-links .profile-item {
    display: flex;
    align-items: center;
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid #DEE6F3;
}

.profile-links .profile-item:last-child {
    margin-bottom: 0;
    border-bottom: none;
    padding-bottom: 0;
}

.profile-links .profile-item p {
    margin-left: 8px;
    font-size: 16px;
    color: #788394;
}

.profile-links .profile-item.active p {
    color: #428FFF;
}

.employers-header {
    display: flex;
    align-items: center;
    margin-bottom: 27px;
}

.info-alert {
    position: relative;
}

.info-alert.employer-alert {
    background: #DEE6F3;
    display: flex;
    padding: 8px 12px;
    border-radius: 8px;
    position: relative;
}

.info-alert p {
    margin-left: 8px;
    color: #428FFF;
    font-size: 14px;
    font-weight: 500;
    height: 100%;
}



.employers-header .selector, .employers-header .info-alert {
    margin-left: 20px;
    width: 30%;
}

.employers-header .selector {
    width: 20%;
}

.employers-header form {
    width: 30%;
}

.employers-header form input {
    width: 100%;
}

.circle-edit {
    background: #F2F3F7;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 31px;
    height: 31px;
    border-radius: 100%;
    position: relative;
}

.circle-edit img {
    margin: 0;
}

.employers-table thead tr {
    background: #DEE6F3;
    border-radius: 8px;
    position: relative;
}

.employers-table thead tr td:first-child {
    border-radius: 16px 0 0 16px;
}

.employers-table thead tr td:last-child {
    border-radius: 0 16px 16px 0;
}

.employers-table thead td {
    padding: 12px 16px;
}

.employers-table tbody tr td {
    color: #272626;
    font-weight: 500;
    font-size: 14px;
    position: relative;
}

.employer-role {
    color: #788394!important;
}

.main-block.notifications-block {
    padding: 16px 24px;
}

.notifications-block h3 {
    margin-bottom: 25px;
    color: #272626;
    font-size: 16px;
    font-weight: 600;
}

.notifications-block .settings-radio-el {
    border-bottom: none;
    margin-bottom: 8px;
    padding-bottom: 0;
}

.notifications-block .settings-radio-el input {
    background: #DEE6F3;
    margin-left: 0;
    margin-right: 0;
}

.notifications-block .settings-radio-el label {
    margin-left: 16px;
    color: #272626;
    font-weight: 500;
    font-size: 14px;
}

.service-button {
    background: #DEE6F3;
    border-radius: 8px;
    display: flex;
    padding: 9px 16px;
    cursor: pointer;
    align-items: center;
    justify-content: space-between;
}

.dropdown-services {
    margin-bottom: 8px;
}

.service-button img {
    margin-right: 16px;
    transform: rotate(180deg);
}

.service-button.active img {
    transition: 0.3s;
    transform: none;
}

.service-button p {
    color: #272626;
    font-size: 16px;
    font-weight: 400;
}

.service-button .count-services {
    font-weight: 500;
    font-size: 14px;
    color: #788394;
}

.extra-table thead tr td {
    padding: 0;
    padding-left: 16px;
}

.extra-table tbody tr td {
    padding: 10px 16px;
    color: #272626;
    font-weight: 500;
    font-size: 14px;
}

.extra-table thead tr td:last-child {
    padding-right: 16px;
}

.extra-table tbody tr td input {
    width: 24px;
    height: 24px;
    margin-top: 5px;
}

.extra-table tbody tr td:first-child {
    width: 100%;
}

.service-button + table {
    display: none;
}

.service-button.active + table {
    display: table;
}


.employer-dropdown { width: 200px; min-width: auto; right: 0; padding: 0!important; box-shadow: 0px 4px 10px 0px rgba(223, 226, 232, 1); top: 60%;
}
.employer-dropdown li { border-bottom: 1px solid #DEE6F3;
}
.employer-dropdown li a { display: flex; align-items: center;
}
.employer-dropdown li a p { margin-left: 8px; color: #272626; font-weight: 500; font-size: 12px;
}
.circle-edit.active img { transform: none;
}
.editAccess .modal-dialog { width :400px;
}
.subtitle-modal { margin-bottom: 16px; color: #716F6F; font-size: 16px;
}
.editAccess .settings-radio-el { border-bottom: 0; margin-bottom: 8px; padding: 0;
}
.editAccess .bottom-form-modal { border-top: none;
}
.editAccess .settings-radio-el input { margin-left: 0;
}
.access-list { max-height: 280px; overflow-y: scroll;
}
.editAccess .settings-item { margin-bottom: 16px;
}
.default-avatar { background: #F2F3F7; border: none; display: flex; align-items: center; justify-content: center;
}
.avatar-container { position: relative; cursor: pointer;
}
.avatar-container::after { content: ""; border-radius: 100%; z-index: 100; background-image: url(/static/img/change_avatar.svg); background-position: center; position: absolute; background-repeat: no-repeat; width: 100px; height: 100px; left: 0; 
    top: 0; display: none;
}
.avatar-container::before { content: ""; border-radius: 100%; z-index: 10; background: rgb(0, 0, 0, 0.5); position: absolute; width: 100px; height: 100px; left: 0; top: 0; display: none;
}
.avatar-container:hover::after, .avatar-container:hover::before { display: block;
}
.avatar-input { position: absolute; width: 100%; height: 100%; opacity: 0; cursor: pointer; z-index: 1000;
}
.profile-img.default-avatar { width: 50px; height: 50px;
}
.profile-img.default-avatar img { width: 25px;
}
.link-cell a { color: #428FFF!important;
}
.employers-empty { font-size: 14px; font-weight: 500;
}

.main-alert {
    background: #203148;
    border-radius: 16px;
    padding: 8px;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;

    left: 50%;
    bottom: 110%;
    transform: translateX(-50%);

    opacity: 0;
    visibility: hidden;

    /* по желанию: можно ограничить максимальную ширину */
    white-space: normal; /* для переносов текста */
    box-sizing: border-box;
    z-index: 10;
}

.info-alert:hover .main-alert {
    visibility: visible;
    opacity: 1;
    transition: 0.3s;
}

.main-alert p {
    font-size: 12px;
    font-weight: 500;
    color: #ffffff;
}

.employers-table {
    padding-bottom: 100px;
}

.main-alert::before {
    content: "";
    width: 0;
    height: 0;
    border-left: 17px solid transparent;
    border-right: 17px solid transparent;
    border-top: 25px solid #203148;
    position: absolute;
    bottom: -20px;

    /* Центрируем стрелку */
    left: 50%;
    transform: translateX(-50%);
}

.indicator-alert .main-alert {
    width: 250px;
}

.employer-alert .main-alert {
    width: 130%;
}

.education-item {
    background: #ffffff;
    padding: 16px 24px;
    border-radius: 16px;
    margin-bottom: 16px;
}

.education-header {
   display: flex;
   align-items: center;
   margin-bottom: 16px;
}

.education-header .education-category {
    color: #272626;
    background: #EBF8A9;
    border-radius: 40px;
    padding: 4px 8px 4px 8px;
}

.education-header .education-category p {
    color: #272626;
    font-weight: 500;
    font-size: 12px;
}

.education-hashtag a {
    margin-left: 22px;
    font-weight: 500;
    font-size: 14px;
}

.education-title {
    margin-bottom: 16px;
    font-weight: 600;
    font-size: 20px;
}

.education-item .education-description {
    color: #686868;
    font-weight: 500;
    font-size: 14px;
}

.certification-materials {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.certification-item {
    background: #ffffff;
    padding: 16px;
    display: flex;
    flex-direction: column;
    border-radius: 16px;
    width: 190px;
    align-items: flex-end;
}

.certification-item .options-icon {
    margin-bottom: 2px;
}

.certification-item .cert-image {
    margin-bottom: 8px;
}

.certification-item .certification-title {
    font-weight: 500;
    font-size: 14px;
    color: #272626;
    margin-bottom: 0;
}

.toogle-links {
    margin-bottom: 30px;
}

.toogle-links .toogle-link {
    margin-right: 8px;
    padding: 10px 12px;
    font-size: 16px;
    color: #788394;
    padding-bottom: 4px;
    background: inherit;
}

.toogle-links .toogle-link.active {
    color: #272626;
    border-bottom: 1px solid #272626;
}

.question-block {
    margin-bottom: 24px;
}

.question-block .question-text {
    font-weight: 600;
    font-size: 16px;
    color: #272626;
}

.question-block .option-answer {
    color: #272626;
    font-size: 16px;
    margin-bottom: 8px;
    padding-left: 4px;
}

.certification-questions {
    display: none;
}

.certification-questions.active {
    display: block;
}

.material-page {
    padding-bottom: 50px;
}

.material-content {
    margin-bottom: 32px;
}

.material-content img {
    border-radius: 10px;
}

.marketing-card {
    background: #DEE6F3;
    border-radius: 16px;
    padding: 24px;
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.marketing-card .marketing-title {
    color: #272626;
    margin-bottom: 16px;
    font-weight: 600;
    font-size: 26px;
}

.marketing-card .marketing-description {
    color: #67707F;
    font-weight: 500;
    font-size: 14px;
    line-height: 120%;
    margin-bottom: 16px;
}

.marketing-card .service-price {
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 16px;
    color: #272626;
}

.marketing-card .marketing-button {
    background: #DAF54E;
    border-radius: 8px;
    color: #272626;
    padding: 10px 12px;
    text-align: center;
    width: 200px;
    margin-top: auto;
}

.audit-image {
    position: absolute;
    bottom: 24px;
    right: 0;
}

.audit-image img {
    width: 140px;
}

.blue-button {
    background: #428FFF;
    color: #ffffff;
}

.key-image {
    position: absolute;
    bottom: 24px;
    right: 24px;
}

.key-image img {
    width: 140px;
}

.strategy-image {
    width: 120px;
    margin-bottom: 16px;
}

.consultation-image {
    margin-bottom: 10px;
    width: 90px;
}

.light-card {
    background: #FFFFFF;
}

.light-card .marketing-button {
    border: 1px solid #428FFF;
    background: #ffffff;
    color: #428FFF;
    font-size: 16px;
    font-weight: 600;
}

#detailMarketing .detail-description {
    margin-bottom: 25px;
}

#detailMarketing .detail-description p {
    color: #272626;
    font-size: 16px;
}

#detailMarketing .bottom-form-modal {
    border-top: none;
    padding-top: 0;
}

#detailMarketing .guru-form-group .input-label {
    width: 100%;
}

.help-alert .main-alert {
  bottom: -65px;
  line-height: 15px;
  width: 120px;
  left: 28%;
}

.help-alert .main-alert p {
  font-size: 10px;
}

.help-alert .main-alert::before {
  display: none;
}

.help-alert .main-alert::after {
  content: "";
      width: 0;
          height: 0;
	      border-left: 17px solid transparent;
	          border-right: 17px solid transparent; 
  position: absolute;
  border-bottom: 25px solid #203148;
  top: -30%;
  left: 50%;
  transform: translateX(-50%);

}

.tab-list {
    background: #DEE6F3;
    border-radius: 8px;
    padding: 8px;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    gap: 16px;
    width: max-content;
}

.tab-list .tab-element {
    padding: 8px 12px;
    background: inherit;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.tab-list .tab-element p {
    color: #272626;
    font-size: 16px;
}

.sales-value {
    background: #DAF54E;
    font-weight: 500;
    font-size: 12px;
    border-radius: 40px;
    padding: 4px 10px;
    color: #272626;
}

.tab-list .tab-element.active {
    background: #ffffff;
}

.tab-list .tab-element.active p {
    font-weight: 600;
}

.tariff-block {
    background: #FFFFFF;
    padding: 16px 24px;
    border-radius: 16px;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.tariff-block .tariff-title {
    color: #272626;
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 8px;
}

.tariff-block .tariff-price {
    color: #272626;
    font-weight: 600;
    font-size: 22px;
    margin-bottom: 8px;
}

.header-tariff {
    border-bottom: 1px solid #DEE6F3;
    margin-bottom: 16px;
    padding-bottom: 16px;
}

.tariff-sales {
    display: flex;
    align-items: center;
    gap: 8px;
}

.tariff-sales p {
    color: #272626;
    font-weight: 500;
    font-size: 14px;
}

.tariff-sales .old-price {
    color: #686868;
    text-decoration: line-through;
}

.tariff-block .tariff-description {
    color: #686868;
    font-size: 14px;
    font-weight: 500;
    padding-bottom: 16px;
    border-bottom: 1px solid #DEE6F3;
    margin-bottom: 8px;
}

.features-list {
    margin-bottom: 24px;
    padding: 0;
    margin-top: auto;
}

.tariff-block .features-list li {
    padding-top: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid #DEE6F3;
    padding-left: 32px;
    color: #272626;
    font-size: 16px;
    position: relative;
}



.tariff-block .features-list li::after {
    content: "";
    background: url(/static/img/include.svg);
    position: absolute;
    left: 0;
    bottom: 33%;
    width: 16px;
    height: 12px;
}

.tariff-block .features-list li.disabled-features {
    color: #C6CDD9;
}

.tariff-block .features-list li.disabled-features::after {
    display: none;
}

.tariff-block .features-list li.disabled-features::before {
    content: "";
    background: url(/static/img/exclude.svg);
    position: absolute;
    left: 0;
    bottom: 33%;
    width: 16px;
    height: 12px;
}

.tariff-button {
    background: #DAF54E;
    border-radius: 8px;
    color: #272626;
    padding: 10px 12px;
    text-align: center;
    font-weight: 600;
    font-size: 16px;
    width: 100%;
}

.tariff-block.priority {
    border: 2px solid #428FFF;
}

.tariff-block.priority .tariff-button {
    color: #FFFFFF;
    background: #428FFF;
}

.hide-col {
  position: relative!important;
  right: 0!important;
}

.hidden-eye {
  position: absolute;
  z-index: 100;
  top: 20%;
  right: -20px;
  cursor: pointer;
}

.hidden-eye img {
  width: 20px;
  display: none;
}

.hidden-eye img.active-eye {
  display: block!important;
}


.handler-container {
    height: 80vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.handler-container .handler-title {
    color: #272626;
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 16px;
}

.handler-container .handler-subtitle {
    color: #67707F;
    font-weight: 500;
    font-size: 18px;
    margin-bottom: 30px;
}

.handler-container .guru-button {
    width: 100%;
}

.menu-burger {
    display: none;
    border-top: 1px solid black;
    padding: 0;
    background: inherit;
    margin-right: 20px;
}

.menu-burger span {
    width: 25px;
    height: 1px;
    background: black;
    margin-top: 7px;
    display: block;
}

.title-container {
    display: flex;
    align-items: center
}

.custom-admin .multiple-label {
    display: block;
}

.custom-admin .add-label {
    position: relative;
}

.custom-admin .add-label:after {
    content: "+";
    width: 15px;
    height: 15px;
    position: absolute;
    font-size: 30px;
    right: -20px;
    cursor: pointer;
}

.edit-fot {
    background: inherit;
    padding: 0;
    padding-left: 5px;
}

.edit-fot img {
    width: 15px;
    margin-bottom: 5px;
}

.custom-admin .page-content {
    padding-left: 250px;
}

.modal-checkbox {
    display: flex;
}

.modal-checkbox input[type="checkbox"] {
    width: auto;
    margin-left: 5px;
    margin-bottom: 5px;
}

.table-more-options {
    margin-bottom: 20px!important;
}

.table-more-options .btn .fas {
    margin: 0;
}

#add-question-option {
    background: inherit;
}

.settings-items {
    display: flex;
    align-items: center;
    gap: 15px;
}

.info-link {
    color: #428FFF;
    font-weight: 500;
    font-size: 14px;
}

.main-block.info-tariff {
    height: auto;
}

.main-block.info-tariff .text-group {
    padding-bottom: 0;
}

.tariff-button[disabled] {
  opacity: 0.7;
}

.selector-list .search-container img {
    width: 16px;
    top: 20%;
}

.selector-list .search-container input {
    color: black;
    display: block;
    padding: 0;
    font-size: 12px;
    border: 1px solid #DEE6F3;
    border-radius: 8px;
    padding-left: 25px;
    height: 30px;
    margin-left: 5px;
    padding-top: 0;
    width: 100%;
}

.sort-icon {
    font-size: 12px;
    opacity: 1;
    transition: opacity 0.3s;
    margin-left:5px;
}

.analytic-table td:hover .sort-icon {
    opacity: 1;
}

.analytic-table td[data-order="asc"] .sort-icon::after {
    content: "↑";
    opacity: 1;
}

.analytic-table td[data-order="desc"] .sort-icon::after {
    content: "↓";
    opacity: 1;
}

.analytic-table td[data-order="asc"]:not(.fixed-col),
.analytic-table td[data-order="desc"]:not(.fixed-col) {
    background-color: rgba(0, 123, 255, 0.1);
}