html, body {
    padding: 0;
    margin: 0;
    overflow-x: hidden;
    overflow-y: hidden;
}

@font-face {
    font-family: "Inter Medium";
    src: url("../fonts/Inter-Medium.ttf");
}

* {
    outline: none;
    font-family: "Inter Medium", sans-serif;
}

code {
    color: #7367F0;
}

.header {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    background: #7367F0;
    height: 60px;
}

.header__logotype {
    color: #fff;
    font-weight: 700;
    text-decoration: none;
}

.header__nav {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    gap: .5rem;
}

.header-nav__link {
    color: #fff;
}

form {
    display: flex;
    flex-direction: column;
    gap: .7rem;
    max-width: 400px;
    width: 95%;
}
.modal form {
    width: 100%;
    max-width: unset;
}

form > label {
    display: flex;
    flex-direction: column;
    gap: .4rem;
}

.form-input {
    padding: .5rem;
    border-radius: .3rem;
    border: 1px solid #e9e9e9;
    background: #fff;
    max-width: 100%;
    box-sizing: border-box !important;
    width: 100%;
}

.modal .form-input {
    max-width: 100%;
}

.button-primary {
    border: none;
    padding: .5rem .8rem;
    color: #fff;
    background: #7367F0;
    transition: .1s;
    text-decoration: none;
    border-radius: .3rem;
    white-space: nowrap;
}

.button-primary:hover {
    background: var(--secondary);
    cursor: pointer;
}

.button-secondary, .info-block {
    border: none;
    padding: .8rem;
    color: #333;
    border-radius: .3rem;
    background: #f0f0f0;
    transition: .1s;
    text-decoration: none;
}

.button-secondary:hover {
    background: #dedede;
    cursor: pointer;
}

.button-secondary.active {
    background: #7367F0;
}

.button-secondary.active svg path {
    stroke: #fff;
}

.button-secondary.active span {
    color: #fff !important;
}

.button-secondary.active:hover {
    background: #7367F0;
}

.button-secondary.active:hover span {
    color: #fff !important;
}

.link {
    color: #7367F0;
}

.link:hover {
    color: var(--secondary);
}

.error {
    background: crimson;
    border: 1px solid crimson;
    color: #fff;
    padding: .8rem;
    border-radius: 4px;
    margin-bottom: 1.5rem;
}

.success {
    background: forestgreen;
    border: 1px solid forestgreen;
    color: #fff;
    padding: .8rem;
    border-radius: 4px;
    margin-bottom: 1.5rem;
}

.warning {
    background: gold;
    border: 1px solid goldenrod;
    color: #fff;
    padding: .8rem;
    border-radius: 4px;
    margin-bottom: 1.5rem;
}

.dashboard {
    display: flex;
    gap: 2rem;
    flex-direction: row;
    height: 100%;
}

.dashboard__sidebar {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    max-width: 300px;
    width: 100%;
    padding: 15px;
    box-sizing: border-box;
    background: #fff;
    height: 100vh;
}

.dashboard__content {
    padding: 15px;
}

.dashboard__content > h2 {
    height: 50px;
}

.table {
    width: 100%;
}

.table tr:has(th) {
    border-bottom: 1px solid #888;
}

.table td, .table th {
    padding: .8rem 1rem;
}

thead th {
    background: #7367F0;
    color: #fff;
}

tbody td {
    background: #e0e0e0;
    color: #222;
}

@font-face {
    font-family: "Inter Medium";
    src: url("../fonts/Inter-Medium.ttf");
}

* {
    font-family: "Inter Medium", sans-serif !important;
    font-weight: 500 !important;
}

*, :before, :after {
    box-sizing: inherit !important;
}

html, body {
    background: #f9f9f9 !important;
}

.header {
    background: #fff !important;
    color: #7367F0 !important;
}

.header__logotype, .header-nav__link {
    color: #333 !important;
}

.auth-wrapper {
    height: calc(100vh - 1rem);
    overflow: hidden;
    background: #7367F0;
    margin: .5rem;
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.auth-form {
    background: #fff;
    padding: 2rem;
    border-radius: 2rem;

}

.auth-form .form-input {
    max-width: 100%;
}

.form-input {
    padding: 1rem;
    border-radius: 0.375rem;
    border: 1px solid #CADBEF;
    font-weight: 600;
}
input[name="certificate_ready_page"] {
    max-width: 100%;
    width: 100%;
}

@media screen and (min-width: 900px){
    input[name="certificate_ready_page"] {
        width: 50%;
    }
}

.button-primary {
    padding: .5rem 1rem;
    border-radius: 0.375rem;
    font-weight: 600;
    background: #7367F0;
    text-align: center;
    color: #fff !important;
}

.button-primary:hover {
    opacity: 1;
    color: #fff;
    text-decoration: none;
    background: #6055d6;
}

.button-tertiary {
    padding: .5rem 1rem;
    border-radius: 0.375rem;
    font-weight: 600;
    background: #e7e7e7;
    text-align: center;
    color: #333 !important;
}

.button-tertiary:hover {
    opacity: 1;
    color: #111 !important;
    text-decoration: none;
    background: #e0e0e0;
    cursor: pointer;
}

.auth-form-toggle {
    padding: 5px;
    border-radius: .7rem;
    background: #E5EFFA;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 35px;
}

.auth-form-toggle__item {
    background: #E5EFFA;
    color: #9CB1C9;
    transition: .1s;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.auth-form-toggle__item:hover {
    cursor: pointer;
    color: #222;
    border-radius: .5rem;
}

.auth-form-toggle__item-active {
    color: #222;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: .5rem;
}

.dashboard {
    /*padding: 15px;*/
    height: 100vh;
    gap: 15px !important;
}

.dashboard__sidebar {
    background: #fff;
    /*border-radius: 2rem;*/
    padding: 15px;
    height: 100%;
    max-width: 250px;
    position: relative;
}

.dashboard-sidebar__bottom {
    display: flex;
    flex-direction: row;
    justify-content: stretch;
    position: fixed;
    bottom: 1rem;
    align-items: center;
    gap: .75rem;
}

.auth-text, .auth-link {
    font-size: 14px;
    color: #9FA4BC;
}

.auth-link {
    text-decoration: underline !important;
}

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

.dashboard-sidebar__bottom a:hover {
    opacity: .8;
    cursor: pointer;
}

.button-white {
    background: #e0e0e0;
    color: #1a202c !important;
    padding: .5rem 1.5rem;
    border-radius: 3rem;
    text-decoration: none !important;
}

.info-block {
    background: transparent;
    padding: 0;
}

.info-block p {
    font-size: 1.2rem;
    color: #fff;
}

.info-block p:first-child {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.cashin-btn {
    color: #7367F0;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 30px;
    width: 30px;
    text-decoration: none;
    border-radius: 50%;
}

.button-secondary {
    background: #ffffff10; /*#24384F;*/
    color: #fff;
    display: flex;
    flex-direction: row;
    gap: 1rem;
    /*border-radius: 10px;*/
    align-items:center;
}

.button-secondary span {
    color: #6F6B7D !important;
}

.button-secondary:hover {
    background: #f5f5f5;/*#005DC2;*/
    color: #4d495a !important;
    text-decoration: none;
}

.dashboard__content {
    background: transparent;
    padding: 3rem 15px;
    border-radius: 2rem;
    height: calc(100% - 2rem);
    width: 100%;
}

tr th {
    background: #7367F0;
    color: #fff;
    border-radius: 0;
    margin: .1rem !important;
}

tr {
    border-top: 1px solid #dedede;
}

tr td {
    background: #fff;
    color: #333;
    border-radius: .4rem;
    margin: .1rem !important;
}

.dashboard__content > h2 {
    text-align: center;
    margin-bottom: 35px;
}

.radio-label span {
    padding: .8rem;
    display: flex;
    border-radius: .8rem;
    border: 1px solid #4b5563;
    color: #4b5563;
    background: transparent;
}

.radio-label span:hover {
    border-color: #7367F0;
    color: #7367F0;
    outline: 1px solid #7367F0;
    font-weight: 500;
}

.radio-label > input {
    visibility: hidden;
    width: 0;
    height: 0;
}

.radio-label-active {
    border-color: #7367F0;
    color: #7367F0;
    outline: 1px solid #7367F0;
    font-weight: 500;
}

.dashboard-sidebar__droprown {
    padding: 15px;
    border-radius: .3rem;
    display: flex;
    flex-direction: column;
    gap: .6rem;
}

.dashboard-sidebar__droprown a {
    color: #6F6B7D;
    text-decoration: none;
}

#tm-color-span, #tm-color-span1 {
    white-space: nowrap;
    overflow: hidden;
    width:100%;
}

.dashboard-sidebar__droprown a:hover {
    color: #5c5968;
    text-decoration: none;
}

.no-hover {
    background: /*#24384F*/ #f5f5f5 !important;
}

.my-services {
    display: flex;
    flex-direction: column;
}

.my-services > h2 {
    text-align: left;
}

.dashboard__my-services {
    display: flex;
    flex-direction: row;
    gap: 15px;
    margin-top: 1rem;
}

.my-service__item {
    background: #fff;
    border-radius: 0.375rem /*40px*/;
    padding: 2.5rem 1.5rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1rem;
    
    text-decoration: none;
    transition: .2s;
}

.my-service__item > span {
    color: #000;
    transition: .2s;
}

.my-service__item:hover > span {
    color: #7367F0;
    cursor: pointer;
}

.in-future {
    color: #666 !important;
}

.my-services__add-new {
    background: #7367F0;
    padding: 2.5rem;
    border-radius: 0.375rem /*40px*/;
    color: #fff;
    text-decoration: none;
    display: flex;
    flex-direction: row;
    gap: 1.5rem;
    align-items: center;
    justify-content: center;
    transition: .2s;
    margin-top: 5vh;
}

.my-services__add-new:hover {
    cursor: pointer;
    background: #4e45ae;
}

.infoblock {
    background: #FFF;
    padding: 2.5rem;
    border-radius: 0.375rem /*40px*/;
    display:flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-top: 5vh;
}

.infoblock__text {
    display: flex;
    gap: 1rem;
    flex-direction: column;
}

.infoblock__text > h3 {
    font-size: 35px;
    color: #000;
    font-weight: 500;
    margin: 0;
}

.infoblock__text > p {
    color: #00000050;
    font-size: 18px;
    max-width: 340px;
    font-weight: 400 !important;
}

.infoblock__text > a {
    max-width: 170px;
}

.sms-board {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-auto-rows: 155px;
    grid-gap: 15px;
}

.sms-board__item {
    border-radius: 0.375rem;
    padding: 1.5rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    height: 100%;
}

.sms-board a {
    text-decoration: none !important;
    box-sizing: border-box !important;
    min-width: 300px;
}

.sms-board__item > span:nth-child(2) {
    text-align: right;
    opacity: 0.5;
}

.sms-board__item.paid > span:nth-child(3) .semi-transparent {
    opacity: 0.5;
}

.sms-board__item.unpaid > span:nth-child(3) {
    color: #7367F0;
}

.sms-board__item.unpaid > span:nth-child(3) .semi-transparent {
    color: #000;
}

.sms-board__item > span:nth-child(3) {
    text-align: left;
    margin-top: auto;
}

.sms-board__item > span:nth-child(4) {
    text-align: right;
    margin-top: auto;
}

.paid {
    background: #7367F0;
    color: #fff;
    transition: .15s;
}

.paid:hover {
    background: #5950b6;
}

.unpaid:hover {
    border-color: #7367F0;
}

.unpaid {
    background: #fff;
    
    color: #000;
    transition: .15s;
    border:1px solid transparent;
}

.paid .edit-unpaid, .unpaid .edit-paid {
    display: none;
}

.sms-board__add-new {
    border-radius: 0.375rem;
    padding: 1.5rem;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    box-sizing: border-box !important;
    border: 2px dashed #ACACAC;
    color: #7367F0;
    font-size: 2.5rem;
    transition: .2s;
    text-decoration: none;
}

.sms-board__add-new .white-plus {
    display: none;
}
/*
.sms-board__add-new:hover .white-plus {
    display: flex;
}

.sms-board__add-new:hover .blue-plus {
    display: none;
}*/

.sms-board__add-new:hover {
    /*background: #7367F0;
    color: #fff;*/
    cursor: pointer;
    border-color: #7367F0;
}

.row {
    display: flex;
    flex-direction: row;
}

.column {
    display: flex;
    flex-direction: column;
}

.new-project__parameters {
    display: grid;
    /*grid-template-columns: 2fr 1fr;*/
    grid-template-columns: 1fr auto;
    grid-gap: 15px;
    /*padding-bottom: 5vh;*/
}

.add-new-project form {
    max-width: 100%;
    width: 100%;
}

.add-new-project > h2 {
    text-align: left;
}

.new-project-parameters__info, .new-project-parameters__edit, .new-project-parameters-edit__block {
    display: flex;
    flex-direction: column;
    gap: 15px;
    box-sizing: border-box !important;
}

/*.new-project-parameters__edit > .new-project-parameters-edit__block {
    margin-top: 3rem !important;
}*/

.new-project-parameters__edit {
    padding-bottom: 2rem;
}

.new-project-parameters-edit__row, .new-project-parameters-edit__block.row-block {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 15px;
}

.new-project-parameters-edit__block.row-block > .column {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.new-project-parameters-info__warning {
    padding: 25px;
    border-radius: 0.375rem /*40px*/;
    display: flex;
    flex-direction: column;
    background: #FFF;
    gap: 30px;
}

.new-project-parameters-info__warning > h3 {
    font-size: 20px;
    color: #081524;
}

.new-project-parameters-info__warning > p {
    font-size: 16px;
    color: #08152475;
}

.new-project-parameters-info__cost {
    padding: 25px;
    border-radius: 0.375rem /*40px*/;
    display: flex;
    flex-direction: column;
    background: #7367F0;
    gap: 30px;
}

.new-project-parameters-info__cost > h3 {
    font-size: 20px;
    color: #fff;
}

.new-project-parameters-info__cost > p {
    font-size: 16px;
    color: #ffffff75;
}

.new-project-parameters-edit__block {
    padding: 2rem;
    border-radius: 0.375rem /*40px*/;
    display: flex;
    flex-direction: column;
    background: #fff;
    
    gap: 15px;
    box-sizing: border-box !important;
}
div#add-color-variant {
    display: flex;
    align-items: center;
    justify-content: center;
}
.new-project-parameters__edit .button-primary {
    width: 250px;
}

.new-project__name-wrapper input {
    width: 580px;
}

.subscribe__wrapper {
    display: grid;
    grid-template-columns: 6fr 5fr;
    grid-gap: 15px;
}

.subscribe__info {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 0.375rem /*40px*/;
    
    padding: 2rem;
    gap: 15px;
}

.subscribe__info > .comments {
    display: flex;
    flex-direction: column;
}

.subscribe__info > .comments > h3 {
    font-size: 20px;
}

.subscribe__info > .comments > span {
    color: #676767;
    font-size: 14px;
}

.subscribe__info small {
    font-size: 12px;
    color: #676767;
}

.subscribe-info__duration {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 15px;
    grid-auto-rows: 40px;
}

.subscribe-info__duration div {
    box-sizing: border-box !important;
}

.subscribe-info__duration label {
    background: #F1F3F7;
    color: #000;
    font-size: 14px;
    padding: 10px;
    border-radius: 10px;
    width: 100%;
    transition: .1s;
    text-align: center;
}

.subscribe-info__duration label:hover {
    background: #e5e5e5;
    cursor: pointer;
}

.subscribe-info__duration input[name="duration"] {
    width: 0;
    height: 0;
    visibility: hidden;
    padding: 0;
    margin: 0;
}

.duration-label-active {
    background: #7367F0 !important;
    color: #fff !important;
}

.subscribe-info__autopay {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    background: #f0f0f0;
    border-radius: 10px;
    padding: 19px;
    box-sizing: border-box !important;
}

.subscribe-info__autopay h4 {
    font-size: 16px;
}

.subscribe-info__autopay p {
    font-size: 14px;
    color: #626262;
    max-width: 260px;
}

.subscribe-info__totals {
    display: flex;
    flex-direction: column;
}

.subscribe-info__total {
    border-bottom: 1px solid #ECECEC;
    padding: 15px 0;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    font-size: 20px;
    color: #000;
}

.subscribe-info__total:last-child {
    border-bottom: none;
}

.subscribe-info__total:nth-child(2) > span:first-child {
    font-size: 14px;
    color: #a8a8a8;
}

.subscribe-info__total:nth-child(2) > span:last-child {
    font-size: 14px;
    color: #FF6A56;
}

.subscribe__limits {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.subscribe-limits__item {
    background: #FFF;
    border-radius: 0.375rem /*40px*/;
    padding: 2rem;
    display: flex;
    max-width: 650px;
    min-width: 650px;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: nowrap;
    white-space: nowrap;
    gap: 15px;
}

.subscribe-limits-item__info {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.subscribe-limits-item__list {
    display: grid;
    grid-template-columns: repeat(2, 180px);
    grid-auto-rows: 40px;
    grid-gap: 15px;
}

.subscribe-limits-item__list > label {
    padding: 10px;
    background: #F1F3F7;
    color: #000;
    transition: .1s;
    border-radius: 10px;
    text-align: center;
    border: 1px dashed var(--secondary);
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 160px;
    min-width: 160px;
}

.subscribe-limits-item__list > label > input {
    width: 0;
    height: 0;
    visibility: hidden;
}

.subscribe-limits-item__link {
    text-decoration: underline;
    color: #000;
}

.subscribe-limits-item__link:hover {
    text-decoration: none;
}

.subscribe-limits-item__list > label:hover {
    background: #e5e5e5;
    cursor: pointer;
}

.subscribe-limits-item__price {
    min-width: 126px !important;
}

.subscribe-limits-item__price-stock {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    flex-wrap: nowrap;
    white-space: nowrap;
}

.subscribe-limits-item__price-stock > span:first-child {
    font-size: 25px;
}

.subscribe-limits-item__price-stock > span:last-child {
    color: #fff;
    padding: 2px 8px;
    font-size: 12px;
    background: #FF6A56;
    border-radius: 10px;
}

.subscribe-limits-item__price-total {
    color: #7E7D7F;
    font-size: 14px;
    text-decoration: line-through;
}

.install-promo {
    position: relative;
}

.install-promo input {
    width: 100%;
    box-sizing: border-box !important;
}

#install-promo-btn {
    background: none;
    position: absolute;
    color: #7367F0;
    border: none;
    right: 4rem;
    bottom: 50%;
    transform: translate(50%, 50%);
    height: 30px;
}

.text-page h2 {
    text-align: left;
}

.text-page, .add-new-project {
    overflow-y: auto;
}

.balance {
    display: grid;
    grid-template-columns: 7fr 3fr;
    grid-gap: 3rem;
    margin: 0 0 40px 0;
}

.subscribes {
    display: grid;
    grid-template-columns: 7fr 4fr;
}

.loyalty {
    display: flex;
    flex-direction: column;
    gap: 30px;
    max-width: 1000px;
    width: 90%;
}

.phones {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.balance h3 {
    font-size: 25px;
}

.balance__info, .balance__history {
    display: flex;
    flex-direction: column;
    gap: 0px;
    background: #fff;
    padding: 15px;
    border-radius: 0.375rem;
    box-sizing: border-box !important;
}

.balance__history table {
    width: 100%;
    box-sizing: border-box;
    border-radius: 0.375rem;
}

.balance-info__amount {
    width: 100%;
    display: flex;
    flex-direction: row;
    gap: 15px;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box !important;
}

.balance-info__amount span {
    font-size: 16px;
}

.balance .install-promo {
    box-sizing: border-box !important;
}

.balance .install-promo input {
    box-sizing: border-box !important;
    width: 100%;
}

.dashboard-table {
    border-radius: 0.375rem /*40px*/;
}

.dashboard-table th {
    text-align: left;
    color: #111111;
}

.dashboard-table td {
    font-weight: 400;
}

.phones__checkbox {
    width: 16px;
    height: 16px;
    border-radius: 2px;
    border: 1px solid #9c9c9c;
    background: #fff;
}

.project-code-insertion__wrapper {
    border-radius: 0.375rem /*40px*/;
    
    background: #fff;
    padding: 2rem;
    display: flex;
    flex-direction: column;
}

.project-code-insertion__wrapper > p {
    font-size: 14px;
}

#project-code-text, #project-code-text1, #project-code-text2, #project-code-text3, #project-code-text-friend,
.code_textarea{
    border-radius: 10px;
    padding: 15px;
    margin-top: 15px;
    width: 100%;
    background: #F1F3F7;
    border: none;
    font-size: 10px;
    font-family: "Consolas", "Courier New", monospace;
}

.with-heading {
    margin-top: 2rem;
    display: flex;
    flex-direction: column !important;
}

.edit-row {
    display: flex;
    flex-direction: row;
    gap: 30px;
}

.edit-row .column {
    justify-content: space-between;
    gap: 15px;
    width: 50%;
    box-sizing: border-box;
}

h3 a, h2 a {
    text-decoration: none;
}

.new-project-parameters-edit-block__heading {
    background: #FFF;
    margin: -1.5rem -1.5rem 0 -1.5rem;
    border-radius: 0.375rem /*40px*/ 40px 0 0;
    box-sizing: border-box !important;
    padding: 1rem 1.5rem;
    display: flex;
    flex-direction: row;
    gap: 1rem;
}

.disabled .new-project-parameters-edit-block__heading {
    background: #EBEBEB;
}

.profile__form {
    width: 420px;
    border-radius: 0.375rem /*40px*/;
    background: #FFF;
    margin:  25px 0;
    padding: 34px 36px 35px 38px;
    box-sizing: border-box;
}

.profile__form .fields {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.profile__form #btn{
    font-size: 18px;
    color: #7367F0;
    border: none;
    background-color: transparent;
    text-align: left;
    cursor: pointer;
}

.profile__form .fields button {
    width:  208px ;
}

.profile__form #change__password {
    display: none;
    flex-direction: column;
    gap: 15px;
}

h2, h3 {
    text-align: left !important;
    display: flex;
    align-items: center;
    gap: 1rem;
    color: #93909E;
}

.text-page details {
    padding: 1rem;
    border-radius: 0.375rem /*40px*/;
    transition: .1s;
    background: #fff;
    
    border: 1px solid transparent;
}

.text-page details:hover {
    border-color: #7367F0;
    cursor: pointer;
}

.max-width-text {
    max-width: 900px;
}

.project-code__wrapper {
    position:relative;
    box-sizing: border-box;
}

.project-code__wrapper .button-primary {
    position: absolute;
    right: 0.5rem;
    top: 1.5rem;
    padding: .4rem;
    box-sizing: border-box;
}

.form-switch {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 1rem !important;
}

.form-switch .form-check-input {
    width: 3rem !important;
    height: 1.65rem !important;
}

.form-input[disabled] {
    color: #e0e0e0 !important;
    border: 1px solid #e0e0e0;
}

.balance-btn {
    text-decoration: none;
    color: #6F6B7D;
}

.balance-btn:hover {
    color: #6F6B7D;
    text-decoration: none;
}

.subscribes__durations {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 15px;
    margin: 0 0 5vh;
    padding: 0 0 1rem;
}

.subscribes-durations__item {
    padding: 15px;
    border-radius: 0.375rem;
    background: #fff;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    gap: 25px;
}

table {
    background: #fff !important;
}

.subscribes-durations-item__bar {
    border-radius: 5px;
    height: 40px;
    width: 100%;
    box-sizing: border-box;
    background: #efefef;
    position: relative;
    border: 1px solid #ccc;
}

.subscribes-durations-item-bar__progress {
    border-radius: 5px;
    height: 100%;
    background: #7367F0;
    opacity: .35;
}
.subscribes-durations-item__bar > span {
    position: absolute;
    left:50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: .8rem;
    width: 100%;
    text-align: center;
}

.info__balance-down {
    display: flex;
    flex-direction: row;
    gap: 15px;
    padding: 10px;
    font-size: .9rem;
    background: #24384F;
    color: #6F6B7D;
    border-radius: 10px;
    width: 100%;
    box-sizing: border-box !important;
}

.info__balance-down > span > a {
    color: #7367F0;
    transition: .15s;
}

.info__balance-down > span > a:hover {
    color: #6F6B7D;
    cursor: pointer;
}

.new-project__gift-card-amounts {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 15px;
}

.new-project-gift-card__amount {
    padding: 10px;
    background: #dedede;
    transition: .1s;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
}

.new-project-gift-card__amount:hover {
    outline: 1px solid #7367F0;
    cursor: pointer;
}

.new-project-gift-card__amount input {
    width: 0;
    height: 0;
    visibility: hidden;
}

.gift-card__set-amount {
    display: flex;
    flex-direction: row;
    gap: 15px;
}

.gift-card__set-amount > button {
    max-width: 58px;
}

.card-cover__db-thumbnails {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 15px;
}

.card-cover__db-thumbnail {
    width: 90px;
    height: 90px;
    border: 1px solid #dedede;
    border-radius: 10px;
    object-fit: contain;
    background: #e3e3e3;
}

.reports__item {
    padding: 2rem;
    border-radius: 0.375rem /*40px*/;
    margin: 5vh 1rem;
    max-width: 350px;
    min-width: 310px;
}

.reports__item > span {
    font-size: 2.5rem;
    color:#888;
}

.dashboard-sidebar__droprown a[disabled], .dashboard-sidebar__droprown a:not([href]) {
    color: #6F6B7D !important;
}

.my-services__add-new {
    color: #fff !important;
    text-decoration: none !important;
}

.my-service__item {
    text-decoration: none !important;
}

.modal__subscribe-services {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 15px;
}

.modal__subscribe-services > a {
    border: 1px dashed #7367F0;
}

.table td {
    background: none;
    border-radius: 0 !important;
}

.table th {
    border-radius: 0 !important;
}

.sidebar-nav-col {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    height: fit-content;
    overflow-y: hidden;
}

.sidebar__fade {
    display: flex;
    flex-direction: column;
    padding: 1rem;
    border-bottom: .5rem solid transparent;
    border-radius: 10px;
    gap: 1rem;
    background: #fff;
    margin-bottom: 1rem;
    position: absolute;
    z-index: 20;
    width: 100%;
    top: -16rem;
    transition: .3s;
    padding-bottom: 2.5rem;
}

.sidebar-fade__item {
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
    color: #333 !important;
    text-decoration: none !important;
    margin: 0 12px;
}

.sidebar-fade__item:hover * {
    stroke: #7367F0;
    color: #7367F0;
}

.project-forms__item {
    display: flex;
    flex-direction: row;
    align-items: center;
    position: relative;
    max-width: 260px;
}

.project-forms__item > span {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
}

.project-forms__item > input {
    width: 100%;
}

.crm-filters {
    margin: 1.5rem 0;
    border-radius: 0.375rem /*40px*/;
    padding: 1.5rem;
    background: #f0f0f0;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: end;
    gap: 1rem;
}

.crm-filters input, .crm-filters select, .crm-filters button {
    height: 42px;
    box-sizing: border-box !important;
    -webkit-appearance: none;
    padding: 0 .7rem;
}

.crm-filters form {
    margin: 0;
}

.crm-filters__filters, .crm-filters__export, .crm-filters__search, .crm-filter__row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
}

.crm-filters__export {
    flex-direction: column;
}

.crm-filters__search {
    justify-content: right;
}

.crm-filters__export small {
    white-space: nowrap;
}

.crm-filters__export button {
    border: 1px solid #dedede;
    background: #f0f0f0;
    color: #333;
    border-radius: 5px;
    text-decoration: none;
    text-align: center;
    font-size: .85rem;
}

.crm-filters__export button:hover {
    background: #dedede;
    border-color: #666;
    color: #111;
    cursor: pointer;
    text-decoration: none;
}

.badge {
    padding: .3rem .7rem;
    border-radius: .25rem;
    cursor: default;
}

.badge-success {
    background: #198754;
    color: #fff;
}

.badge-danger {
    background: #dc3545;
    color: #fff;
}

.badge-pending {
    background: #e0e0e0;
    color: #333;
}

.badge-warning, .warning-badge {
    background: #FFC823;
    color: #333;
}

.reports__item-long {
    max-width: 700px;
}

.deals {
    box-sizing: border-box;
    height: 100%;
    display: flex;
    flex-direction: row;
    overflow-x: scroll;
    gap: 10px;
}

.deals__column {
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 15px;
    width: 300px;
    overflow-y: scroll;
    box-sizing: border-box;
    border-radius: 0.375rem;
    background: #f9f9f9;
}

.deals .deals__column:last-child {
    border-right: none;
}

.deals-column__header {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 25px;
    padding: 15px;
    border-bottom: 1px solid #777;
}

* {
    scrollbar-width: thin;
}

.deals-color {
    display: flex;
    height: 15px;
    width: 15px;
    border-radius: 50%;
}

.deals-column__quick-add {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.deals-column-quick-add__button {
    border-radius: 10px;
    padding: 15px;
    background: transparent;
    border: 1px dashed #777;
    transition: .1s;
}

.deals-column-quick-add__button:hover {
    border-color: #7367F0;
    color: #7367F0;
    background: #7367F020;
    cursor: pointer;
}

.deals-column-quick-add__form {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    margin: 0 !important;
}

.quick-deal__input {
    padding: 8px 10px;
    border: 1px solid #dedede;
    background: #fff;
    border-radius: 0.375rem;
    width: 100%;
    box-sizing: border-box !important;
}

.quick-deal__input:focus {
    border-color: #888;
}

.quick-deal__submit {
    padding: 8px 10px;
    border: none;
    background: #7367F0;
    border-radius: 5px;
    color: #fff;
    transition: .1s;
}

.quick-deal__submit:hover {
    cursor: pointer;
    background: #7367F090;
}

.deals-column__body {
    height: 100%;
}

.deals-amount__row {
    display: flex;
    gap: 5px;
    flex-direction: row;
    box-sizing: border-box;
}

.deal {
    box-sizing: border-box;
    padding: .8rem;
    border-radius: 10px;
    background: #fff;
    transition: .1s;
    margin: 5px 0;
    border: 1px solid #dedede;
}

.deal:hover {
    background: #f9f9f9;
    border-color: #333;
    cursor: move;
}

.ui-draggable-handle {
    transition: .3s;
}

.ui-draggable-dragging {
    transform: rotate(10deg);
    width: calc(300px - 1.6rem);
}

.deal > p {
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
}

.deal > p > span {
    color: #222;
    font-size: .9rem;
}

.select-week-day__label {
    display: flex;
}

.select-week-day__label input {
    width: 0;
    height: 0;
    visibility: hidden;
}

.select-week-day__label span {
    padding: .6rem .85rem;
    border-radius: .3rem;
    background: #f0f0f0;
    transition: .1s;
    color: #333;
}

.select-week-day__label:hover span {
    background: #e0e0e0;
    cursor: pointer;
    color: #7367F0;
}

.select-week-day__label input:checked ~ span {
    background: #7367F0;
    color: #6F6B7D;
}

.delete-onlyform {
    text-decoration: none !important;
    transition: .2s;
}

.delete-onlyform:hover {
    opacity: .6;
    cursor: pointer;
}
body .button-outline,
body .button-delete,
body .button-success,
body .button-info{
    padding: .5rem 1rem;
    border-radius: 0.375rem;
    font-weight: 600;
    box-sizing: border-box;
    text-align: center;
    text-decoration: none;
    transition: .2s;
    border: 1px solid #cccccc;
    opacity: .9;
}

body .button-outline {
    background: #fff;
    border: 1px solid #7367F0;
    color: #7367F0 !important;
}
body .button-delete {
    background: #fce4e4;
    color: #ea5455 !important;
}
body .button-success {
    background: #cbddbc !important;
    color: #315628 !important;
}
body .button-info {
    background: #b8c6da !important;
    color: #283556 !important;
}

body .button-success:hover {
    background: #e4e6e3 !important;
}
body .button-delete:hover {
    background: #e4cece !important;
}
body .button-info:hover {
    background: #dde2ee !important;
}

body .button-outline:hover,
body .button-delete:hover,
body .button-success:hover,
body .button-info:hover {
    cursor: pointer;
}

body .button-notactive, body .button-notactive:hover {
    cursor: not-allowed !important;
    background: #eee !important;
}

.sidebar__fade-close {
    display: flex;
    flex-direction: row;
    justify-content: right;
    padding-left: .5rem;
}

.site-error-label {
    color: #FF0040;
    font-size: .9rem;
    margin-bottom: .3rem;
}

.link.site-error-label {
    text-decoration: none;
    color: crimson !important;
}

.site-error-input {
    border-color: #FF0040 !important;
}

.new-project-gift-card__color {
    opacity: 0;
    overflow: hidden;
    width: 0 !important;
    height: 0 !important;
    transition: .15s;
    position: relative;
    border: 1px solid #dedede;
}

.new-project-gift-card__color:has(input[name="colors[]"]:checked) {
    opacity: 1;
    width: 58px !important;
    height: 58px !important;
}

.card-cover-db-thumbnail__wrapper, .krajee-default.file-preview-frame, .new-project-gift-card__amount {
    position: relative;
}

.card-cover-db-thumbnail__wrapper > span, .new-project-gift-card__color > label, .new-project-gift-card__amount > .remove {
    background: #ffffff40;
    width: 20px;
    height: 20px;
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: #111;
    border-radius: 0 10px 0 5px;
    transition: .2s;
}

.card-cover-db-thumbnail__wrapper > span[data-forward-cover] {
    right: 20px;
    border-radius: 0;
}

.card-cover-db-thumbnail__wrapper > span[data-backward-cover] {
    right: 40px;
    border-radius: 0;
}

.card-cover-db-thumbnail__wrapper > span:hover, .new-project-gift-card__color > label:hover, .new-project-gift-card__amount > .remove:hover {
    color: #7367F0;
    background: #ffffff90;
    cursor: pointer;
}

.new-project__gift-card-colors {
    display: flex;
    flex-direction: row;
    gap: 10px;
    flex-wrap: wrap;
}

.extrasmall {
    font-size: 8px;
    font-weight: 400;
    margin-bottom: 0;
}

.top-panel {
    background: #fff;
    margin-top: -2rem;
    padding: 10px 25px 10px 25px;
    margin-bottom: 2rem;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    border-radius: .375rem;

    &-nav {
        display: flex;
        flex-direction: row;
        gap: 10px;
        align-items: center;

        a {
            color: #333;
            text-decoration: none;
        }
    }
}

.top-panel .sidebar__with-fade > a > svg:hover {
    opacity: .85;
    cursor: pointer;
    transition: .2s;
}

.crm-filters label {
    margin-bottom: 0 !important;
}

.top-panel-notifications {
    position: relative;
}

.top-panel-notifications__list {
    background: #f8f7fa;
    padding: 1rem 6px;
    border-radius: .375rem;
    position: absolute;
    width: 300px;
    right: 0;
    height: fit-content;
    max-height: 550px;
    box-sizing: border-box;
    overflow-y: auto;
    z-index: 99999;
}

::placeholder {
    color: #6c757d;
}

.form-input:disabled::placeholder {
    color: #b9bdc1;
}

.top-panel-notifications__list.hidden {
    display: none;
}

.top-panel-notifications__list > div > p {
    box-sizing: border-box;
    padding: 6px;
    border-radius: 6px;
    background: #f0f0f0;
    transition: .1s;
}

.top-panel-notifications__list > div > p:hover {
    background: #e5e5e5;
}

.top-panel-notifications__btn {
    width: 24px;
    height: 24px;
    transition: .2s;
}

.top-panel-notifications__btn:hover {
    cursor: pointer;
    background: #ffffff10;
    border-radius: .375rem;
}

.button-outline.active {
    background: #7367F0;
    color: #fff !important;
}

.gift-card__set-amount > label {
    position: relative;
}

.gift-card__set-amount > label > svg {
    position: absolute;
    top: 50%;
    right: 1rem;
    transform: translate(0, -50%);
}

.gift-card__set-amount > label > svg:hover {
    cursor: pointer;
}

.gift-card__set-amount > label > svg path {
    stroke: #111;
    transition: .2s;
}

.gift-card__set-amount > label > svg:hover path {
    stroke: #7367F0;
    transition: .2s;
}

.new-project__nav {
    padding: .5rem;
    border-radius: .375rem;
    background: #fff;
    box-sizing: border-box;
    margin: 1rem 0;
    display: flex;
    flex-direction: row;
    gap: 10px;
    margin-top: 0;
    
}

.project-code-insertion__wrapper > h4 {
    margin-bottom: 20px;
}

.form-check {
    padding-left: 40px !important;
}

.new-project__select-card-color {
    display: flex;
    flex-direction: row-reverse;
}

.new-project__select-card-color #color-input {
    visibility: hidden;
    width: 0;
    height: 0;
    overflow: hidden;
}

.project-form__inputs-column {
    max-width: 700px;
    width: 95%;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.bg-diffrent .container {
    padding-left: 0 !important;
}

a {
    color: #6F6B7D !important;
    text-decoration: none !important;
}

.dashboard-sidebar__droprown a {
    color: #6F6B7D !important;
    width: 100% !important;
    display: block;
}

.dashboard-sidebar__droprown a:hover {
    color: #464157 !important;
}

.info__balance-down a {
    color: #7367F0 !important;
    text-decoration: underline !important;
}

.info__balance-down a:hover {
    color: #6F6B7D !important;
}

.form-check-input:checked {
    background-color: #7367F0 !important;
    border-color: #7367F0 !important;
}

.modal .new-project__name-wrapper, .modal .new-project-parameters__edit, .modal .new-project-parameters__edit label, .modal .new-project-parameters__edit .button-primary {
    width: 100% !important;
}

.modal .new-project__parameters {
    grid-template-columns: 1fr;
}

.card-cover__db-thumbnails .btn.btn-danger.btn-file {
    margin: 0;
}

.dashboard-cashin-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 15px;
    margin-bottom: 25px;
    box-sizing: border-box !important;
}

.dashboard-cashin-row label {
    display: flex;
    flex-direction: column;
    box-sizing: border-box !important;
}

.dashboard-cashin-row label span {
    padding: 15px;
    border-radius: .375rem;
    border: 1px solid #dedede;
    background: #fff;
    color: #333;
    width: 100%;
    box-sizing: border-box !important;
    text-align: center;
    transition: .2s;
}

.dashboard-cashin-row label span:hover {
    cursor: pointer;
    border-color: #7367F0;
    color: #222;
}

.dashboard-cashin-row label input[type="radio"] {
    visibility: hidden;
    width: 0;
    height: 0;
    overflow: hidden;
}

.dashboard-cashin-row label input[type="radio"]:checked ~ span {
    border-color: #7367F0;
    color: #111;
}

.table th {
    border-bottom-width: 1px !important;
}

.page-item.active .page-link {
    background: #7367F0 !important;
}

.lk-partner-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 15px;
    margin-top: 25px;
}

.lk-partner-grid > .item {
    background: #fff;
    border: 1px solid #dedede;
    padding: 1rem;
    border-radius: .375rem;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 15px;
}





.sel_filter a {
    font-size: 14px;
    color: #999 !important;
    text-decoration: underline !important;
    padding: 0 10px;
    cursor: pointer;
}
.sel_filter a:hover{
    text-decoration: none !important;
    color:#555 !important;
}
.sel_filter a.current,
.sel_filter a.current:hover {
    font-size: 14px;
    color: #000 !important;
    text-decoration: none !important;
    cursor: default;
}

span.recinfos{
    font-size:15px;color:#555
}

body tr.notpayed * {
    color: #999;
}

a.small_,
a.small_green,
a.small_red,
a.small_blue{
    color:forestgreen !important;
    text-decoration: underline !important;
    cursor:pointer !important;
}

a.small_green{
    color:forestgreen !important;
}
a.small_red{
    color:#ea5455 !important;
}
a.small_blue{
    color: #5468ea !important;
}

a.small_:hover,
a.small_green:hover,
a.small_red:hover,
a.small_blue:hover{
    text-decoration: none !important;
}

.filter_inp input {
    padding: 10px;
    font-size: 16px;
}

.tr_musthide{
    display: none;
}
.tr_mustshow{
    display: table-row;
}



.h2_fix .cell{
    font-size: 16px;
}
body .gift-card__info{
    height: auto;
}


.project-code-insertion__wrapper p b{
    font-weight:bold !important;
}
.project-code-insertion__wrapper h6 {
    font-size: 18px;
}

.modal {
    display: none !important;
    justify-content: center !important;
    align-items: center !important;
}

.modal.show {
    display: flex !important;
}

.modal.show .modal-dialog {
    margin: auto;
}

.dropdown-item.selected.active {
    background: #7367F0 !important;
}

.dropdown-item.selected.active span {
    color: #fff !important;
}