body {
    margin: 0px;
    /* font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; */

    font-family: "Host Grotesk", sans-serif;
    font-optical-sizing: auto;
    font-weight: 16px;
    font-style: normal;
    /* background-color: var(--base-background-color); */
}

.base-container {
    position: absolute;
    left: 65px;
    top: 63px;
    width: calc(100% - 83px);
    min-height: calc(100vh - 90px);
    margin: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}


.hr {
    background-color: rgb(245, 245, 245);
    width: 100%;
    height: 10px;
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

:root {
    /* Color */

    --base-background-color: rgb(29,33,37);

    /* Navbar */
    --navbar-color: rgb(243, 243, 243);
    --navbar-marketing-lang: rgb(230, 236, 241);
    --navbar-hover-link: rgb(225, 225, 225);

    /* Form Area */
    --form-input-danger: rgb(255, 100, 100);
    --form-submit-button: rgb(0 128 255 / 70%);
    --form-submit-button-hover: rgb(0 128 255 / 80%);
    --form-submit-button-disable: rgb(0 128 255 / 50%);

    /* PingUp Pages */
    --pingup-button-hover: rgb(230, 230, 230);
    --pingup-button-b-color: rgb(240, 240, 240, 1);
    --pingup-table-hover: rgb(245, 250, 255);

    /* Modal */
    --modal-b-b-color: rgba(128, 128, 128, 0.6);
    --modal-title-color: rgb(245, 245, 245);

    /* Test Managment */
    --active-tab-color: rgb(135 206 235);

    /* Text Size */
    --font-bold: 700;

    /* Button Colors */
    --form-button-blue-w: rgb(0, 174, 255);
    --form-button-blue: rgb(0, 123, 255);
    --form-button-grey: rgb(108, 117, 125);
    --form-button-green: rgb(40, 167, 69);
    --form-button-red: rgb(220, 53, 69);
    --form-button-yellow: rgb(255, 193, 7);

    /* Button Border */
    --form-button-border: 0px 0px 0px 1px rgba(0, 0, 0, 0.2);
    --form-one-tab-border: 0px 0px 0px 0.5px rgba(0, 0, 0, 0.2);

    /* Background Color */
    --form-one-tab-b-color: rgb(245, 245, 245, 1);

}

/* Scroll Bar */
::-webkit-scrollbar {
    width: 3px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #555;
}



[data-tooltip] {
    position: relative;
    /* Tooltip için referans noktası */
    display: inline-block;
    cursor: pointer;
    z-index: 500;
}

/* Tooltip içeriği */
[data-tooltip]::after {
    content: attr(data-tooltip);
    /* data-tooltip'teki yazıyı göster */
    position: absolute;
    top: 100%;
    /* Kutunun altına hizala */
    left: 50%;
    transform: translateX(-50%);
    background-color: #000;
    /* Tooltip arka plan rengi */
    color: #fff;
    /* Tooltip yazı rengi */
    padding: 5px 10px;
    border-radius: 5px;
    white-space: nowrap;
    /* Uzun yazılar taşmasın */
    opacity: 0;
    /* Görünmez yap */
    visibility: hidden;
    /* Görünürlüğü kaldır */
    transition: opacity 0.2s, transform 0.2s;
    margin-top: 5px;
    /* Kutuyla tooltip arasında boşluk bırak */
    z-index: 500;

}

/* Tooltip okunu oluştur */
[data-tooltip]::before {
    content: '';
    position: absolute;
    top: 100%;
    /* Kutunun altına hizala */
    left: 50%;
    transform: translateX(-50%);
    margin-top: -5px;
    /* Ok ile metin arasında boşluk bırak */
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent #000 transparent;
    /* Siyah ok oluştur */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s;
    z-index: 500;

}

/* Hover durumunda tooltip'i göster */
[data-tooltip]:hover::after,
[data-tooltip]:hover::before {
    opacity: 1;
    visibility: visible;
    z-index: 500;

}



.d-mobile {
    display: none;
}


@media screen and (max-width: 992px) {
    .d-mobile {
        display: block;
    }

    .d-desktop {
        display: none;
    }

}