body {
    margin: 0;
    font-family: "Inter", "Sans-serif";
    background-color: rgb(245, 245, 245);
    height: 100dvh;
    transition: all ease-in-out 75ms;
    overflow: hidden;
}



/* --------------- */
/* generic classes */
/* --------------- */

.d-none {
    display: none !important;
}

.d-flex {
    display: flex;
}

.flex-grow {
    flex-grow: 1;
}

.v-hidden {
    visibility: hidden;
}

.overflow-y-scroll {
    overflow-y: scroll;
}

.p-relative {
    position: relative;
}

.p-absolute {
    position: absolute;
}

.m-0 {
    margin: 0;
}

.cursor-p {
    cursor: pointer;
}

.t-align-center {
    text-align: center;
}

.b-top-left-radius {
    border-top-left-radius: 10px;
}

.b-top-right-radius {
    border-top-right-radius: 10px;
}

.b-bottom-left-radius {
    border-bottom-left-radius: 10px;
}

.b-bottom-right-radius {
    border-bottom-right-radius: 10px;
}

.width-100-prozent {
    width: 100%;
}

.box-shadow-0-2-4-0 {
    box-shadow: 0px 2px 4px 0px lightgray;
}



/* -------------------- */
/* generic classe color */
/* -------------------- */

.color-grey {
    color: rgb(168, 168, 168);
}

.color-blue {
    color: rgb(0, 124, 237);
}

.background-color-white {
    background-color: white;
}

.background-color-red {
    background-color: rgba(255 0 0 / 50%);
}

.contact-card-click {
    background-color: rgb(42, 54, 71);
    border-radius: 10px;

    .contact-name-color-white {
        color: white;
    }

}

.contact-card-click:hover {
    background-color: rgb(10, 25, 49) !important;
}



/* --------------------- */
/* generic classes fonts */
/* --------------------- */

.f-s-27px {
    font-size: 27px;
}

.f-s-61px {
    font-size: 61px;
    padding: unset;
    margin: 0;
}

.f-s-w-12px-400 {
    font-size: 12px;
    font-weight: 400;
}

.f-s-w-16px-400 {
    font-size: 16px;
    font-weight: 400;
}

.f-s-w-16px-700 {
    font-size: 16px;
    font-weight: 700;
}

.f-s-w-19px-400 {
    font-size: 19px;
    font-weight: 400;
}

.f-s-w-20px-400 {
    font-size: 20px;
    font-weight: 400;
}

.f-s-w-23px-400 {
    font-size: 23px;
    font-weight: 400;
}

.f-s-w-27px-400 {
    font-size: 27px;
    font-weight: 400;
}

.f-s-w-20px-700 {
    font-size: 20px;
    font-weight: 700;
}

.f-s-w-16px-700 {
    font-size: 16px;
    font-weight: 700;
}

.f-s-w-21px-700 {
    font-size: 21px;
    font-weight: 700;
}

.f-s-w-47px-500 {
    font-size: 47px;
    font-weight: 500;
}

.f-s-w-64px-600 {
    font-size: 64px;
    font-weight: 600;
}

.f-s-w-64px-700 {
    font-size: 64px;
    font-weight: 700;
}



/* ----------------- */
/* headlines default */
/* ----------------- */

.separator-3px-blue {
    border: 3px solid rgb(41, 170, 227);
    border-radius: 8px;
}

.separator-1px-lightgrey {
    min-height: calc(100% - 24px);
    max-height: 437px;
    border: 1px solid lightgray;
    border-radius: 8px;
}



/* ------------- */
/* input default */
/* ------------ */

input {
    padding: 12px 21px;
    border: 1px solid lightgrey;
    outline: none;
}

input::placeholder {
    color: rgb(209, 209, 209);
}

input:focus {
    box-shadow: none;
    border-color: rgb(41, 170, 227);
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

.input-whitout-border-right {
    height: calc(48px - 24px);
    width: calc(422px - 42px - 37px);
    border-right: unset;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}

@media (max-width: 700px) {
    .input-whitout-border-right {
        width: calc(364px - 42px - 37px);
    }
}

@media (max-width: 400px) {
    .input-whitout-border-right {
        width: calc(288px - 42px - 37px);
    }
}

.input-img-area {
    display: flex;
    align-items: center;
}

.input-img {
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 48px;
    padding-right: 12px;
    border: 1px solid lightgray;
    border-left: unset;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    background-color: white;
    gap: 4px;
}

.input-img-area:focus-within .input-img {
    border-color: rgb(41, 170, 227);
}



/* ---------------- */
/* textarea default */
/* ---------------- */

textarea {
    padding: 18px 16px;
    border: 1px solid lightgrey;
    outline: none;
}

@media (max-width: 550px) {
    textarea {
        padding: 18px 21px;
    }
}

textarea::placeholder {
    color: rgb(209, 209, 209);
}

textarea:focus {
    border-color: rgb(41, 170, 227);
}




/* ------------------ */
/* checkboxes default */
/* ------------------ */

.checkbox-text-area {
    cursor: pointer;
    display: flex;
    align-items: center;
}

input[type="checkbox"] {
    display: none;
}

/* checkbox black empty */
input[type="checkbox"]+div {
    content: url('../assets/img/icon_checkbox_empty.png');
    margin-right: 4px;
}

/* checkbox black empty hover */
input[type="checkbox"]:hover+div {
    content: url('../assets/img/icon_checkbox_empty_hover.png');
    margin-right: 4px;
}

/* checkbox black checked */
input[type="checkbox"]:checked+div {
    content: url('../assets/img/icon_checkbox_marked.png');
}

/* checkbox black checked hover */
input[type="checkbox"]:checked:hover+div {
    content: url('../assets/img/icon_checkbox_marked_hover.png');
}

/* checkbox white checked */
input[type="checkbox"]:checked+#add-task-check {
    content: url('../assets/img/icon_checkbox_marked_white.png');
}



/* ---------------- */
/* calendar default */
/* ---------------- */

input::-webkit-calendar-picker-indicator:hover {
    cursor: pointer;
}

input[type="date"] {
    font-family: "Inter", "Sans-serif";
    color: black;
}

input[type="date"]:invalid {
    color: lightgrey;
}



/* ----------------- */
/* selection default */
/* ----------------- */

select {
    padding: 12px;
    border: 1px solid lightgrey;
    outline: none;
}




/* --------------- */
/* buttons default */
/* --------------- */

.btn-black {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 150px;
    background-color: rgb(42, 54, 71);
    color: white;
    border: none;
    border-radius: 10px;
    padding: 12px;
    gap: 8px;
}

.btn-black:hover {
    cursor: pointer;
    background-color: rgb(41, 170, 227);
    box-shadow: 0 4px 0 rgba(0 0 0 / 15%);
}

.btn-black:disabled {
    opacity: 60%;

    &.btn-black:hover {
        cursor: unset;
        background-color: rgb(42, 54, 71);
        box-shadow: unset;
    }
}

.btn-white {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 150px;
    background-color: white;
    color: black;
    border: 1px solid rgb(42, 54, 71);
    border-radius: 10px;
    gap: 8px;
}

.btn-white:hover {
    cursor: pointer;
    color: rgb(41, 170, 227);
    border: 2px solid rgb(41, 170, 227);
    box-shadow: 0 4px 0 rgba(0 0 0 / 15%);

    .btn-white-img {
        background-image: url('../assets/img/icon_close_hover.png');
        background-repeat: no-repeat;
    }
}

.btn-white-img {
    height: 24px;
    width: 24px;
    background-image: url('../assets/img/icon_close.png');
    background-repeat: no-repeat;
    background-size: contain;
}

.button-area {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 32px;
}

@media (max-width: 700px) {
    .button-area {
        display: flex;
        flex-direction: column;
        gap: 21px;
    }
}

@media (max-width: 400px) {
    .button-area {
        gap: 12px;
    }
}



/* ------------------ */
/* overlay close icon */
/* ------------------ */

.overlay-close-icon {
    height: 32px;
    width: 32px;

    &:hover {
        cursor: pointer;
        background-color: rgba(0, 0, 0, 5%);
        border-radius: 50%;
    }
}



/* ----------------- */
/* scrollbar default */
/* ----------------- */

::-webkit-scrollbar {
    width: 24px;
}

::-webkit-scrollbar-thumb {
    background: #999;
    border-radius: 16px;
    border: 8px solid transparent;
    background-clip: content-box;
}

::-webkit-scrollbar-button:single-button {
    display: flex;
    align-items: center;
    height: 32px;
}

::-webkit-scrollbar-button:single-button:vertical:decrement {
    background-image: url('../assets/img/scrollbar_up_arrow.png');
    background-repeat: no-repeat;
    background-position: center;
}

::-webkit-scrollbar-button:single-button:vertical:increment {
    background-image: url('../assets/img/scrollbar_down_arrow.png');
    background-repeat: no-repeat;
    background-position: center;
}



/* -------------------------- */
/* contact short card default */
/* -------------------------- */

.contact-name-area {
    display: flex;
    align-items: center;
    gap: 16px;

}

@media (max-width: 550px) {
    .contact-name-area {
        &>.f-s-w-20px-400 {
            font-size: 16px;
        }
    }
}

.contact-initals-icon {
    height: 42px;
    width: 42px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    border: 2px solid white;
    background-color: rgb(209, 209, 209);
    border-radius: 50%;
}



/* ---------------------------- */
/* information slidebox default */
/* ---------------------------- */

.information-slidebox {
    color: rgb(255, 255, 255);
    background-color: rgb(42, 54, 71);
    border-radius: 20px;
    box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.15);
    position: absolute;
    z-index: 9;
    height: 64px;
    width: 326px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.information-slidebox-vertical {
    right: calc(50vw - 163px);
    bottom: -80px;
    animation-duration: 1s;
    animation-name: info-slide-up-down;
    animation-delay: 200ms;
}

@keyframes info-slide-up-down {
    25% {
        bottom: 50dvh;
    }

    50% {
        bottom: 50dvh;
    }

    75% {
        bottom: 50dvh;
    }

    100% {
        bottom: -80px;
    }
}


.information-slidebox-horizontal {
    right: calc(-326px - 50px);
    bottom: 80px;
    animation-duration: 1s;
    animation-name: info-slide-in-out;
    animation-delay: 200ms;
}

@keyframes info-slide-in-out {
    25% {
        right: calc(100vw - 232px - 458px - 326px);
    }

    50% {
        right: calc(100vw - 232px - 458px - 326px);
    }

    75% {
        right: calc(100vw - 232px - 458px - 326px);
    }

    100% {
        right: calc(-326px - 50px);
    }
}

@media (max-width: 1400px) {
    .information-slidebox-horizontal {
        right: calc(50vw - 151.5px);
        bottom: -80px;
        animation-duration: 1s;
        animation-name: info-slide-up-down;
        animation-delay: 200ms;
    }

    @keyframes info-slide-in-out {
        25% {
            bottom: 50dvh;
        }

        50% {
            bottom: 50dvh;
        }

        75% {
            bottom: 50dvh;
        }

        100% {
            bottom: -80px;
        }
    }
}



/* ------------- */
/* input warning */
/* ------------- */

.input-warning {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.wrong-mail-password {
  width: 100%;
  font-family: "Poppins";
  font-size: 12px;
  line-height: 14px;
  color: rgb(255, 129, 144);
  margin-bottom: -16px;
}