/*GENERAL*/

:root{
    --color: #000;
    --color-background: #fff;
    --color-background-input: #fff;
    --color-background-description: rgba(244, 244, 245, 0.5);
    --color-hover: rgba(0,0,0,0.8);
    --border-radius: .5rem;
    --border-radius-s: .2rem;
    --border-color: #000;
    --border-color-light: #ccc;
    --border-color-light-light: rgb(228, 228, 231);
    --border-color-focus: #2563eb;
    /*--border-color-focus: #48ff4f;*/
    --button-color: #fff;
    --button-color-hover: #fff;
    --button-background: #000;
    --button-background-hover: rgba(0,0,0,0.8);
    --color-checkbox: #000;
    --color-search-input: #000;
    --color-background-modal: rgb(244, 244, 245);
}

.dark,
.dark-mode {
    --color: #fff;
    --color-background: #1b1b1b;
    --color-background-input: #343434;
    --color-background-description: #343434;
    --color-hover: rgba(255,255,255,0.8);
    --border-color: #fff;
    --border-color-light: #ccc;
    --border-color-light-light: rgba(228, 228, 231, 0.2);
    --border-color-focus: #2563eb;
    /*--border-color-focus: #48ff4f;*/
    --button-color: #000;
    --button-color-hover: #fff;
    --button-background: #fff;
    --button-background-hover: rgba(0,0,0,0.8);
    --color-checkbox: rgba(228, 228, 231, 0.2);
    --color-search-input: transparent;
    --color-background-modal: #343434;
}

/*.dark-mode{*/
/*    .app-logo{*/
/*        filter: invert(1);*/
/*    }*/
/*}*/


/*html, body {*/
/*    min-height: 100vh;*/
/*    color: var(--color);*/
/*    background: var(--color-background);*/
/*    overscroll-behavior-y: none;*/
/*    scroll-behavior: smooth;*/
/*}*/


.border-gray-100{
    border-color: transparent;
}

[type=text], input:where(:not([type])), [type=email], [type=url], [type=password], [type=number], [type=date], [type=datetime-local], [type=month], [type=search], [type=tel], [type=time], [type=week], [multiple], textarea, select {
    background: var(--color-background-description);
}

[type=text]:focus, input:where(:not([type])):focus, [type=email]:focus, [type=url]:focus, [type=password]:focus, [type=number]:focus, [type=date]:focus, [type=datetime-local]:focus, [type=month]:focus, [type=search]:focus, [type=tel]:focus, [type=time]:focus, [type=week]:focus, [multiple]:focus, textarea:focus, select:focus {
    outline: none;
    border-color: transparent;
    box-shadow: 0 0 0 2px var(--background), 0 0 0 4px var(--ring);
}

.bg-white{
    background: var(--color-background);
}

.text-black{
    color: var(--color);
}

.button-dark{
    color: var(--button-color);
    background: var(--button-background);
    border-radius: var(--radius-m);
    i{
        color: var(--button-color);
    }
}

.button-dark-mode{
    margin-left: 1rem;
    i{
        font-size: .8rem;
    }
}

.button-danger:hover{
    color: var(--button-color)
}

.button-dark:hover{
    color: var(--button-color-hover);
    background: var(--button-background-hover);
}

.text-input{
    border-radius: var(--border-radius);
}

.text-input:focus{
    outline: none;
    border-color: var(--ring);
    box-shadow: 0 0 0 1px var(--ring);
}

.checkbox-input{
    color: var(--color-checkbox);
}

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

.top-header{
    display: flex;
    justify-content: space-between;
}

.project-header{
    position: relative;
}

.project-header.-detail{
    flex: .5;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.-show-project-name{
    text-transform: uppercase;
}


.project-subheader{
    font-weight: bold;
    margin-top: 2rem;
    padding-left: 1rem;
    color: var(--color);
}

.button-save, .button-create, .button-delete, .button-edit {
    cursor: pointer;
    border-radius: .5rem;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
    padding: .3rem;
    background: var(--color-background);
}

.button-profile{
    padding-inline: 0;
}

.user-name{
    text-wrap: nowrap;
}

.-button-settings{
    font-weight: bold;
}

.profile-dropdown{

    color: var(--color);
    transition-timing-function: cubic-bezier(.4,0,.2,1);
    transition-duration: .15s;
}

.profile-dropdown:hover{
    color: var(--color-hover);
    background: unset;
}

.border-black {
    /*border-color: rgb(31 41 55);*/
    /*border-color: rgb(140 164 198);*/
    /*border-color: #5dff87;*/
    border-color: var(--color);

}

/* basic table styling – commented out (use custom classes for table styling)
table {
    width: 100%;
    border-collapse: collapse;
    background: var(--background);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

thead {
    width: 100%;
}

tbody{
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%;
}

th, td {
    padding: 5px;
    text-align: center;
    width: 100%;
}

td{
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: .9rem;
}

th:first-child, td:first-child{
    border-left: none;
}
th:last-child, td:last-child{
    border-right: none;
}

tr{
    display: flex;
    justify-content: center;
    width: 100%;
    margin-bottom: 1rem;
}

tr:last-child td{
    border-bottom: none;
}
*/

.table-wrapper{
    display: flex;
    width: 33%;
    padding: 1rem;
}

@media (max-width: 768px) {
    .table-wrapper{
        width: 100%;
    }
}

.table-wrapper.-features{
    width: 100%;
    padding-inline: 0;
}

.table-wrapper.-packages{
    width: 100%;
    padding-top: 2rem;
}

.table-wrapper.-prices{
    width: 100%;
}

.table-wrapper.-extras{
    width: 100%;
    box-shadow: none;
    margin-top: 0;
    padding: 1.5rem 0 0;
    tr{
        td:first-child, th:first-child{
            padding-left: 0;
        }
        td:last-child, th:last-child{
            padding-right: 0;
        }

    }
}

.table-wrapper.-features-extras{
    margin-bottom: 4rem;
}

.table-project, .table-feature, .table-packages, .table-prices, .table-new-features {
    overflow: hidden;
    border-radius: var(--border-radius);
}

.table-packages{
    tr{
        flex-direction: column;
        margin-bottom: 2rem;
    }
}

.table-project{
    background: var(--color-background-description);
    tr{
        margin: 0;
    }
}

.dark .table-project,
.dark-mode .table-project {
    border: 1px solid transparent;
}

.table-new-features{
    margin-bottom: 4rem;
}


.tr-project-features{
    flex: 1;
}

.table-header{
    text-transform: uppercase;
    border-top: none;
    position: relative;
}

.complexity-header{
    border-radius: var(--border-radius);
    font-size: .8rem;
    color: var(--border-color-light);

}

.project-features-inner{
    font-size: .8rem;
    font-weight: 600;
    max-height: 10.5rem;
    overflow: auto;
    width: 100%;
}

.table-price-wrapper{
    justify-content: flex-start;
    padding-left: 1rem;
    padding-bottom: 1rem;
}

.table-header.-projects{
    font-size: 1.5rem;
    display: flex;
    flex-direction: column-reverse;
    justify-content: center;
    align-items: flex-start;
    padding-top: 1rem;
    padding-left: 1rem;
    text-align: left;
}

.table-price{
    display: flex;
    justify-content: center;
}

.table-price.-show{
    flex-direction: column;
    align-items: flex-start;
}

.table-price-value{
    margin-right: 1em;
}

.table-edit{
    position: relative;
}

.table-extra{
    th{
        border-top: none;
    }
}

.main-header{
    display: block;
    text-transform: uppercase;
    font-weight: bold;
    text-align: center;
    width: 100%;
    padding-block: 2rem;
    color: var(--color);
}

.main-header-dashboard{
    display: block;
    text-transform: uppercase;
    font-weight: bold;
    padding-top: 2rem;
    color: var(--color);
    padding-bottom: 1rem;
}

.header-detail {
    flex: .5;
}

.header-text-fade{
    /*transition: opacity .25s;*/
    opacity: 0;
}

.main-header-wrapper{
    position: absolute;
    background: var(--color-background);
    padding: .5rem;
    border: 1px solid rgb(243 244 246);
    border-radius: var(--border-radius);
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 10px;
    text-align: center;
    display: flex;
    flex-direction: column;
    right: 0;
}

.main-header-wrapper.-packages{
    min-width: 200px;
}

.main-header-wrapper.hidden{
    display: none;
}

.main-header-wrapper a {
    padding: .2em;
    color: var(--color);
    transition-timing-function: cubic-bezier(.4,0,.2,1);
    transition-duration: .15s;
}

.main-header-wrapper a:hover {
    color: var(--color-hover);
}

.main-header-project{
    display: block;
    font-weight: bold;
    width: 100%;
    color: var(--color);
    padding-left: 1rem;
    font-size: 2rem;

}

.main-header-project.-sub{
    padding-bottom: 1rem;
}

.main-header-project.-packages{
    padding-inline: 1rem;

}

.main-header-link-project{
    padding: .5em;
    font-weight: bold;
    display: flex;
    align-items: center;
    padding-right: 0;
    transition-timing-function: cubic-bezier(.4,0,.2,1);
    transition-duration: .15s;
}

.main-header-link-project:hover{
    color: var(--color-hover);

}

.main-header-link, .button-form{
    border: 1px solid var(--color);
    border-radius: var(--border-radius);
    padding: .5em;
    font-weight: bold;
    transition: box-shadow .3s;
    display: flex;
    align-items: center;
    align-self: flex-end;
}

.main-header-link-icon{
    margin-inline-start: .25rem;

}

.button-form{
    margin-top: 3rem;
    transition-timing-function: cubic-bezier(.4,0,.2,1);
    transition-duration: .15s;
    /*letter-spacing: .1em;*/
    /*text-transform: uppercase;*/
    /*font-size: .8rem;*/
}

.button-form.-show{
    margin-top: 0;
}

.button-form.-show a,button{
    color: unset;
}

.button-table{
    border: 1px solid #ccc;
    border-radius: var(--border-radius);
    background: var(--color-background);
    padding: .2em;
    transition: box-shadow .3s;
    font-weight: bold;
}

.button-table-project, .button-table-features, .button-table-packages{
    text-transform: none;
    font-weight: normal;
    border-radius: var(--border-radius);
    padding: .2em;
    transition-timing-function: cubic-bezier(.4,0,.2,1);
    transition-duration: .15s;
    color: var(--color);

}

.button-table-project{
    border: 1px solid var(--color);
    padding-inline: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    transition: background .15s;
    i {
        font-size: .7rem;
        transition: color .15s;
    }
}

.button-table-project:hover{
    background: var(--color);
    i {
        color: var(--color-background);
    }
}

.button-table-project.button-dark:hover{
    background: var(--button-background-hover);
    border: 1px solid var(--button-background-hover);
}

.dark .button-table-project.button-dark:hover,
.dark-mode .button-table-project.button-dark:hover {
    background: var(--color-hover);
    border: 1px solid transparent;
    color: var(--color-background);
}

.dark .button-table-project.button-dark:hover i,
.dark-mode .button-table-project.button-dark:hover i {
    color: var(--color-background);
}

.dark .button-form.button-dark:hover,
.dark-mode .button-form.button-dark:hover {
    background: var(--color-hover);
    border: 1px solid transparent;
    color: var(--color-background);
}

.plus .button-table-features, .extra .button-table-features{
    color: var(--color-background);
}

.button-table-project:hover, .button-table-features:hover, .button-table-packages:hover{
    color: var(--color-hover);
}

.main-header-link:hover, .button-table:hover{
    color: var(--color-hover);
}

.extra .button-table-features:hover {
    color: var(--color-hover);

}

.form-check-wrapper{
    background: var(--color-background);
    overflow: scroll;
    border: 1px solid #ccc;
    border-radius: var(--border-radius);
    height: auto;
    padding-block: .5rem;
}

.form-check-wrapper.-filter{
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    background: unset;
    border: none;
    overflow: visible;
    padding-top: 0;
}

.form-check-wrapper.-filter .form-check:hover{
    background: unset;
}

.form-check-wrapper.-filter .form-check{
    padding-inline: 0;
    margin-right: 2rem;
}

.form-check-wrapper.-filter .form-check-label{
    font-weight: bold;
}

.form-check-wrapper.-extras{
    border: none;
    overflow: unset;
}



.form-check.-filter{
    padding-inline: 0;
}

.form-check.-filter:hover{
    background: var(--color-background);
}

.form-check:hover{
    /*background: #d2e3ff;*/
    background: var(--color-background-description);
}

.form-check-label, .form-check-input{
    cursor: pointer;
}

.form-check-label{
    width: 100%;
    padding-right: .5em;
}

.form-check-label.-active{
    background: var(--color);
    color: var(--color-background);
    border: solid 1px transparent;
}

.form-check-select-all{
    font-weight: 600;
    cursor: pointer;
}

.form-check-select-all-wrapper{
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    border-bottom: solid 1px var(--color);
    padding-bottom: 1rem;
}

.form-features, .form-projects, .form-packages{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    max-width: 80rem;
    margin: auto;
    padding-inline: 1rem;
    padding-bottom: 4rem;
}

.form-projects.-show{
    padding-bottom: 2rem;
}

.form-flex-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-l, 1rem);
}

.form-features div, .form-projects-input-wrapper, .form-packages div{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    width: 100%;
    margin-block: 1rem;
}

.form-projects-input-wrapper.-new-extra-feature{
    background: var(--color-background);
    --display: flex;
    flex-direction: column;
    align-items: unset;
    border: 1px solid var(--color);
    padding: 1rem;
    border-radius: 0 var(--border-radius) var(--border-radius) var(--border-radius);
    .form-projects-input{
        margin-top: .5rem;
        margin-bottom: 1rem;
    }
    label{
        font-weight: bold;
    }
    .button-form{
        width: fit-content;
        margin: 0 0 .5rem 0;
    }
}

.new-extra-feature-wrapper{
    overflow: hidden;
    width: 100%;
    margin-top: -2.5rem;
}


.new-extra-feature-wrapper.-hidden{
    display: none;
}

.new-extra-feature-button{
    margin: 0 0 1.5rem 0;
    position: relative;
}

.fa-plus.-new-extra-feature{
    font-size: .9rem;
    margin-left: .5rem;
}

.new-extra-feature-button.--active{
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}

.new-extra-feature-button.--active:before{
    content:'';
    display: block;
    position: absolute;
    bottom: -.5rem;
    left: 0;
    width: 100%;
    height: 1rem;
    background: var(--color-background);
}



.form-projects-input-wrapper.hidden{
    display: none;
}

.form-projects-input-wrapper.-kulanz{
    margin-top: 2rem;
    .form-projects-label{
        min-width: unset;
    }

}

.form-projects-input-wrapper.-period {
    margin-top: 1rem;
}

.form-projects-hint {
    font-size: var(--text-s, 0.875rem);
    color: var(--muted-foreground, #6b7280);
    margin: 0 0 1rem 0;
    max-width: 36rem;
}

.period-fields {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 1rem 1.5rem;
    align-items: end;
    width: 100%;
}

@media (max-width: 640px) {
    .period-fields {
        grid-template-columns: 1fr;
    }
}

.period-calculated-info {
    font-size: var(--text-s, 0.875rem);
    color: var(--muted-foreground, #6b7280);
    margin: 0.5rem 0 0 0;
    min-height: 1.25rem;
}

.form-projects-input-wrapper.-extras{
    flex-direction: column;
    padding: 1rem;
    border-radius: var(--border-radius);
    padding: 0;
    margin-top: 0;
    padding-top: 2rem;
}

.form-projects-input-wrapper.-selected-extras{
    flex-direction: column;
    padding-top: 2rem;
}

.form-projects-input-wrapper.-show-kulanz{
    flex-direction: row;
    align-items: center;
    margin-bottom: 0;
}

.form-projects-input.-number{
    margin: 0 !important;
}

.form-features div label, .form-projects-label, .form-packages div label{
    margin-bottom: 1rem;
    font-weight: bold;
    min-width: 11rem;
}

.form-projects-label.-filter{
    display: flex;
    align-self: flex-start;
    margin: 0;
}

.form-projects-label.-expense.-show{
    margin-bottom: 0;
}

.form-projects-label.-text{
    align-self: flex-start;
}

.form-projects-label.-filter.-show{
    margin-bottom: 1rem;
    padding-left: 1rem;
    gap: .5rem;
    align-items: center;
}



.icon-show{
    padding-top: .2rem;
}

.form-projects-label.-selected-extras{
    display: flex;
    padding-bottom: 1rem;
    align-self: flex-start;
    width: 100%;
    border-bottom: 1px solid var(--color);
}

.form-features-input, .form-projects-input, .form-check-wrapper{
    width: 100%;
    border-radius: var(--border-radius); !important;
    border-color: transparent;
}

/*.form-projects-input.-name, .form-projects-input.-select{*/
/*    width: unset;*/
/*}*/

textarea{
    overflow: hidden;
}

.form-features.-sub{
    padding-top: 2rem;
}


.basic{
    color: var(--color);
    .fa-solid.-icon-edit{
        color: var(--color);
    }
}

.plus{
    color: var(--color);
}

.extra{
    color: var(--color);
}

.no-extras, .has-extras{
    justify-content: flex-start;
    align-items: flex-start;
    text-align: left;
    padding-left: 1rem;
}

.app-logo svg{
    width: 60%;
    min-width: 5rem;
}

.dashboard__brand svg {
    width: 3rem;
    height: 3rem;
}

.package-basic{
    /*background: #A3CFCD;*/
    color: var(--color);
    /*background: #e8ffee;*/

}

.package-plus{
    /*background: #00C9C8;*/
    color: var(--color);
    /*background: #83ffa6;*/

}

.package-old{
    color: var(--color);
}

.table-kulanz{
    color: var(--color);
}

/*main{*/
/*    flex: 1;*/
/*    width: 100%;*/
/*    max-width: 80rem;*/
/*    margin-inline: auto;*/
/*    padding-left: 2rem;*/
/*    padding-right: 2rem;*/
/*}*/

input[type=range] {
    width: 100%;
    margin: 10px 0;
}

input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 15px;
    height: 15px;
    background: #4CAF50;
    cursor: pointer;
}

input[type=range]::-moz-range-thumb {
    width: 15px;
    height: 15px;
    background: #4CAF50;
    cursor: pointer;
}

.slider-container {
    position: relative;
    width: 100%;
}

.slider-labels {
    position: absolute;
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.slider-label {
    position: absolute;
    transform: translateX(-50%);
    bottom: -20px;
}

.offer-text-label{
    font-weight: bold;
    margin-bottom: 1rem;
}

.offer-text-header{
    margin-bottom: .5rem;
}

.price-container{
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.price-container.-show{
    justify-content: flex-start;
}


.price-wrapper{
    width: 100%;
    margin-top: 1rem;
}

.price-wrapper.-show{
    margin-top: 2rem;
}

.price-label{
    margin-right: 1rem;
}

.price-label.-show{
    min-width: 11rem;
    margin-right: 0;
}

.price-value{
    font-size: 1.2rem;
    position: relative;
}

.fa-circle-exclamation{
    color: var(--color);
    margin-left: 1rem;
}

.fa-angle-down.-project{
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    margin-right: 1rem;
    cursor: pointer;
    transition-timing-function: cubic-bezier(.4,0,.2,1);
    transition-duration: .15s;
    color: var(--color);
}

.fa-angle-down.-project:hover{
    color: var(--color-hover);
}

.fa-ellipsis-vertical{
    cursor: pointer;
}

.edit-wrapper{
    position: absolute;
    right: 0;
    top: 2rem;
    padding: .5rem;
    justify-content: space-between;
    background: var(--color-background);
    flex-direction: column;
    border: 1px solid rgb(243 244 246);
    border-radius: var(--border-radius);
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 10px;
    opacity: 1;
    transition: opacity .3s;
    display: flex;
    min-width: 6%;
    z-index: 1;
    color: var(--color);
    font-size: .8rem;
}

.edit-wrapper-features{
    cursor: default;
}

.edit-wrapper.hidden{
    opacity: 0;
    display: none;
}

.cta-wrapper-inner{
    display: flex;
    gap: 1rem;
    height: 100%;
}

.cta-wrapper-left, .cta-wrapper-right{
    height: 100%;
}

.cta-table{
    padding-block: 1rem;
    border-top: 1px solid var(--border-color-light-light);
    margin-inline: 1rem;
    justify-content: space-between;
}

.new-projects-section{
    margin-bottom: 2rem;
}

.new-projects-section-inner{
    display: flex;
    flex-wrap: wrap;
}

.old-projects-section-inner{
    margin-bottom: 4rem;
    display: flex;
    flex-wrap: wrap;
}

.header-wrapper-left{
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    margin-left: 1rem;
    display: flex;
}

.fa-expand{
    cursor: pointer;
    transition-timing-function: cubic-bezier(.4,0,.2,1);
    transition-duration: .15s;
}

.fa-expand:hover{
    color: var(--color-hover);
}

[type=checkbox]:focus{
    box-shadow: none;
}

[type=checkbox] {
    border-radius: var(--border-radius-s);
    color: var(--color-checkbox);
    border-color: #ccc;
    cursor: pointer;
    background: white;
}

[type=checkbox]:checked {
    background-color: var(--color-checkbox);
}

[type=checkbox]:checked:hover {
    background-color: var(--color-checkbox);
}



.flex.-navigation{
    flex: 1;
}

.-navigation-item{
    flex: 1;
    justify-content: center;
    margin: 0;
}

.-logo-wrapper{
    flex: .25;
}

.-settings{
    margin: 0;
    flex: .25;
    justify-content: flex-end;
}

.-icon-edit{
    width: 100%;
    transition-timing-function: cubic-bezier(.4,0,.2,1);
    transition-duration: .15s;
}

.-icon-edit-extras{
    width: 100%;
}

.-icon-edit:hover{
    color: var(--color-hover);
}

/*nav{*/
/*    position: fixed;*/
/*    width: 100%;*/
/*    z-index: 2;*/
/*}*/

.-header{
    top: 65px;
    position: fixed;
    width: 100%;
    z-index: 1;
    transition: transform 0.3s ease-in-out, opacity 0.3s;
}

.-header:has(#warningMessage.-active){
    transform: translate(0) !important;
}

.warning-message-detail{
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
}

.fa-solid{
    font-size: 1.2rem;
}

.fa-solid.-icon-edit{
    color: var(--color);
}

.dashboard-wrapper-outer{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.dashboard-wrapper-inner{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    .fa-solid{
        font-size: 3rem;
    }
    a{
        color: var(--color);
    }
}

.dashboard-item{
    flex-basis: calc(50% - 8rem);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    border: solid 1px #ccc;
    border-radius: var(--border-radius);
    margin: 2rem;
    padding-block: 2rem;
    transition: border-color .2s;
    max-width: 18rem;
}

.dashboard-item:hover{
    border-color: var(--color-hover);
}

.dashboard-item-inner{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.dashboard-item-text{
    font-weight: bold;
    font-size: 1.5rem;
    margin-top: 1rem;
}

.textarea{
    width: 100%;
    resize: none;
    border-radius: var(--border-radius);
    padding: 2rem;
    overflow-y: hidden;
    overflow-x: scroll;
    border-color: #ccc;
}

.textarea.-show{
    margin-left: -.75rem;
    margin-right: -.75rem;
    background: var(--color-background);
    padding: .5rem .75rem;
}

.textarea.-show:focus{
    border-color: var(--border-color-focus);
}

.form-control.textarea{
    border-color: transparent;
}

.plain-text-features {
    padding-inline: 1rem;
    padding-bottom: 4rem;
}


/* Delete confirmation modal */
.modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 999;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-xl);
}

.modal.is-open,
.modal[style*="block"] {
    display: flex;
}

.modal__backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 0;
}

.modal__content {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 22rem;
    padding: var(--spacing-xl);
    background: var(--card);
    color: var(--card-foreground);
    border: 1px solid var(--border);
    border-radius: var(--radius-l);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    margin-inline: auto;
}

.modal__text {
    margin: 0 0 var(--spacing-l);
    font-size: var(--text-s);
    line-height: var(--text-s--line-height);
    color: var(--foreground);
}

.modal__footer {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-s);
    justify-content: flex-end;
}

.project-search-wrapper{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-s, 0.5rem);
}

.project-search-input{
    border-radius: var(--border-radius);
    border-color: var(--color-search-input);
    margin-right: 1rem;
    padding: .2rem .75rem;
    width: 11rem;
    font-family: 'FontAwesome', sans-serif;
    transition: font-family 0.2s ease-in-out;
    background: var(--color-background-input);
}


.project-search-input:focus::placeholder,
.project-search-input:not(:placeholder-shown)::placeholder {
    opacity: 0;
}

.project-search-input::placeholder {
    color: var(--color);
}

.project-search-input:not(:placeholder-shown),
.project-search-input:focus {
    font-family: 'Inter', sans-serif;
}

.quantity-input{
    width: 1.5rem;
    border-radius: var(--border-radius);
    border-color: transparent;
    padding: .2rem .75rem;
    font-size: var(--text-s);
}

.no-projects-message{
    padding-inline: var(--spacing-s);
    color: var(--color);
}

.link-show{
    display: flex;
}

.package-wrapper{
    width: fit-content;
    border-radius: var(--border-radius);
    padding: .5rem 1rem;
    color: white;
    font-weight: bold;
}

.package-wrapper.-Plus{

}

.package-wrapper.-Basic{

}

.package-wrapper.-Bestandsprojekt{

}

.package-description{
    text-align: left;
    padding: 2rem;
    justify-content: left;
    background: var(--color-background-description);
    border-radius: var(--border-radius);
}

.modal-icon{
    margin-left: .5rem;
}

.news-wrapper{
    width: 100%;
}

.news-text:focus-visible{
    background: var(--color-background);
}

.checkbox-new-feature {
    width: 1rem !important;
}

.new-extra-feature-button-wrapper{
    display: flex;
    justify-content: flex-start;
    width: 100%;
}

.new-extra-feature-number-input{
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-top: .5rem;
    margin-bottom: 1rem;
    input{
        width: 4rem;
    }
}

.extra-feature-inner{
    display: flex;
    align-items: center;
    position: relative;
}

.extra-feature-info-icon{
    margin-right: .5rem;
    cursor: pointer;
    font-size: .6rem;
    color: var(--border-color-light);
}

.description-modal{
    position: absolute;
    top: 0;
    left: 1.5rem;
    background: var(--color-background-modal);
    padding: 1rem;
    border-radius: var(--border-radius);
    z-index: 9999999;
    max-width: 40rem;
}

.sorting-table-header {
    position: relative;
}

.sort-icon-wrapper{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-left: .5rem;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

.sort-icon {
    cursor: pointer;
    color: #ccc;
    font-size: .1rem !important;
    .fa-solid{
        font-size: .6rem;
    }
}

.sort-icon:hover {
    color: #000;
}

.sort-icon.active {
    color: #000;
}

.form-control.price-input{
    background: var(--color-background);
    border: none;
    box-shadow: none;
    text-align: end;
}

.form-control.price-input.price-value{
    padding-right: 0;
}

.fa-solid.price-info{
    position: absolute;
    font-size: .5rem;
    cursor: pointer;
    color: #ccc;
}

.price-value-info-wrapper{
    display: flex;
    font-size: .8rem;
    justify-content: space-between;
    opacity: .5;
}


.price-value-info-wrapper.-highlighted {
    opacity: 1;
    p:nth-child(1){
        opacity: .5;
    }
    p:nth-child(2){
        color: red;
        font-weight: bold;
    }
}

.calculation-alert-intern, .calculation-alert-extern{
    flex: 1;
    opacity: 0;
    transition: opacity .3s;
    color: red;
}

.calculation-alert-intern.-highlighted, .calculation-alert-extern.-highlighted{
    opacity: 1;
}

#intern-price-info{
    margin-right: .3rem;
}

#extern-price-info{
    margin-right: .3rem;
}

.price-container.-upper{
    margin-bottom: 2rem;
}

.column-expense, .column-extra {
    flex: .3;
    justify-content: center;
}

/*.column-delete{*/
/*    flex: .1;*/
/*    justify-content: center;*/
/*}*/

/*.column-delete-icon{*/
/*    font-size: .8rem;*/
/*}*/

/*.column-price{*/
/*    flex: .4;*/
/*}*/

/*.column-quantity{*/
/*    flex: .3;*/
/*    text-align: left;*/
/*    justify-content: flex-start;*/
/*}*/

/*.column-quantity.-show{*/
/*    text-align: center;*/
/*    justify-content: center;*/
/*}*/

/*.column-category{*/
/*    flex: .5;*/
/*}*/

/*.column-designation{*/
/*    flex: 1;*/
/*    padding-inline: 1rem;*/
/*    font-weight: 700;*/
/*    justify-content: left;*/
/*    text-align: left;*/
/*}*/

/*.column-designation.-show{*/
/*    flex: 0.6;*/
/*}*/

/*.column-designation-header.-show{*/
/*    flex: 0.6;*/
/*}*/

/*.column-designation-header{*/
/*    flex: 1;*/
/*    justify-content: left;*/
/*    text-align: left;*/
/*    padding-inline: 1rem;*/
/*}*/

/*.column-description{*/
/*    flex: 2;*/
/*    padding-inline: 1rem;*/
/*    text-align: left;*/
/*    padding-block: 1rem;*/
/*    justify-content: left;*/
/*    border-radius: var(--border-radius);*/
/*    background: var(--color-background-description);*/
/*}*/

/*.column-description-header{*/
/*    padding-inline: 1rem;*/
/*    flex: 2;*/
/*    justify-content: left;*/
/*    text-align: left;*/
/*    background: var(--color-background);*/
/*}*/

/*.feature-column-designation {*/
/*    flex: 1;*/
/*    padding-inline: 1rem;*/
/*}*/

/*.feature-column-description{*/
/*    flex: 2;*/
/*    padding-inline: 1rem;*/
/*}*/

/*.feature-column-designation.-data {*/
/*    font-weight: 700;*/
/*    text-align: left;*/
/*    justify-content: left;*/
/*}*/


/*.feature-column-description.-data{*/
/*    text-align: left;*/
/*    padding-block: 1rem;*/
/*    justify-content: left;*/
/*    border-radius: var(--border-radius);*/
/*    background: var(--color-background-description);*/

/*}*/


/*.feature-column-category-inner{*/
/*    padding: .3rem .6rem;*/
/*    border-radius: var(--border-radius);*/
/*    cursor: pointer;*/
/*    transition-timing-function: cubic-bezier(.4,0,.2,1);*/
/*    transition-duration: .15s;*/
/*    border: solid 1px var(--color);*/
/*}*/

/*.feature-column-category-inner:hover {*/
/*    font-weight: 700;*/
/*    background: var(--color);*/
/*    color: var(--color-background);*/
/*    border-radius: var(--border-radius);*/
/*    border: solid 1px transparent;*/
/*}*/

/*.feature-item.active{*/
/*    .feature-column-category-inner{*/
/*        font-weight: 700;*/
/*        background: var(--color);*/
/*        color: var(--color-background);*/
/*        border: solid 1px transparent;*/
/*    }*/
/*}*/


/*.feature-column-expense{*/
/*    flex: .3;*/
/*    justify-content: center !important;*/
/*}*/


/*.feature-column-category{*/
/*    flex: .5;*/
/*    justify-content: center !important;*/
/*}*/

/*.feature-column-edit{*/
/*    flex: .3;*/
/*    justify-content: center !important;*/
/*}*/

/*.feature-table-header{*/
/*    th{*/
/*        display: flex;*/
/*        justify-content: flex-start;*/
/*        align-items: center;*/
/*    }*/
/*}*/

.filter-wrapper{
    padding-inline: 1rem;
    padding-top: 1rem;
}

.category-filters{
    display: flex;
    border-bottom: 1px solid;
    padding-bottom: 1rem;
    border-top: 1px solid;
    padding-top: 1rem;
    align-items: center;
    width: 100%;
    label{
        margin-right: 1rem;
        cursor: pointer;
        font-weight: 700;
        display: flex;
        align-items: center;
        padding: .3rem .6rem;
        border-radius: var(--border-radius);
        transition-timing-function: cubic-bezier(.4,0,.2,1);
        transition-duration: .15s;
        border: solid 1px var(--color);
        input{
            margin-right: .3rem;
            display: none;
        }
    }
    input{
        margin-right: .3rem;
        display: none;
    }
    label:hover{
        background: rgb(173, 250, 29);
        background: var(--color);
        color: var(--color-background);
        border: solid 1px transparent;
    }
    label.active{
        background: rgb(173 250 29);
        background: var(--color);
        color: var(--color-background);
        border: solid 1px transparent;
    }
}

.filter-icon{
    margin-right: 1.3rem;
}

.category-filter{
    cursor: pointer;
}

.feature-edit-icon{
    font-size: .8rem;
}

.package-designation{
    font-weight: bold;
}

.package-designation-header, .package-designation{
    flex: .3;
    text-align: left;
    justify-content: space-between;

}

.package-description-header, .package-description{
    flex: 2;
    text-align: left;
    justify-content: flex-start;
}


.h2-border-bottom{
    border-bottom: 1px solid;
    padding-inline: 1rem;
    padding-bottom: 1rem;
}

.border-light{
    border: 1px solid var(--border-color-light-light);
}

.custom-number-input {
    display: flex;
    align-items: center;
    width: fit-content;
}

.custom-number-input.-billed{
    margin-left: auto;
}

.custom-number-input i {
    cursor: pointer;
    font-size: .5rem;
}

.custom-number-input input[type="number"] {
    width: 3.5rem;
    text-align: center;
    -moz-appearance: textfield;
    padding: 0;
    background: transparent;
    border-color: transparent;
    border-radius: var(--radius-m);
    font-size: var(--text-s);
}


.custom-number-input input[type="number"]:focus {
    box-shadow: none;
    border-color: var(--border)
}

.custom-number-input input[type="number"]::-webkit-outer-spin-button,
.custom-number-input input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.custom-number-input button {
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.number-input-button-wrapper{
    display: flex;
    flex-direction: column-reverse;
    justify-content: center;
    align-items: center;
    gap: .1rem;
    padding: 0 0 0 .5rem;
}

.input {
    border-radius: var(--radius-m);
}

.input:focus {
    box-shadow: 0 0 0 0 var(--background), 0 0 0 2px var(--ring);
}

.login {
    box-shadow: none;
}