html {
    font-size: 12px;
}

@media (min-width: 768px) {
    html {
        font-size: 14px;
    }
}

html {
    position: relative;
    min-height: 100%;
}

body {
    margin-bottom: 60px;
}

.validation-summary-errors {
    border: 1px solid red;
    background-color: red;
    padding: 10px;
    border-radius: 10px;
}

    .validation-summary-errors ul {
        list-style-type: none;
        color: #fff;
    }

.cursor-pointer {
    cursor: pointer;
}

.show-grid [class^=col-] {
    padding-top: 10px;
    padding-bottom: 10px;
    background-color: #eee;
    background-color: rgba(86,61,124,.25);
    border: 1px solid #ddd;
    border: 1px solid rgba(86,61,124,.4);
}


.input-validation-error {
    border: 2px solid red;
    background-color: #ffeeee;
    color: red;
    font-weight: bold;
}

.field-validation-error {
    color: red;
    font-weight: bold;
}

.field-validation-error:before {
        font-family: FontAwesome;
        content: "\f06a\00a0";
    }


html, body {
    height: 100%;
    min-height: 100%;
    width: 100%;
    min-width: 100%;
    margin: 0;
    padding: 0;
}

.container {
    height: 100%;
    width: 100%;
    min-width: 100%;
    margin: 0;
    padding: 0;
}

.full-height {
    width: 100%;
    height: 100%;
    min-height: 100%;
    margin: 0;
    padding: 0;
}

.header {
    background-color: #333;
    border: 1px solid white;
    height: 10%;
    color: white;
    margin: 0;
    padding: 0;
}

.lefty {
    background-color: #333;
    border: 1px solid white;
    height: 80%;
    color: white;
    margin: 0;
    padding: 0;
}

.footer {
    background-color: #fff;
    border-top: 1px solid #dee2e6;
    color: #869099;
    padding: 1rem;
    display: block;
}


/* Chat Button CSS */
#chatButton {
    position: fixed;
    bottom: 20px;
    right: 60px;
    /* background-color: #4CAF50; */
    background-color: #000000;
    color: white;
    border: none;
    padding: 15px;
    border-radius: 50px;
    cursor: pointer;
    z-index: 1000;
}

    #chatButton i {
        font-size: 3em;
        animation: shake 0.5s infinite;
    }

@@keyframes shake {
    0% {
        transform: rotate(0deg);
    }

    25% {
        transform: rotate(-5deg);
    }

    50% {
        transform: rotate(5deg);
    }

    75% {
        transform: rotate(-5deg);
    }

    100% {
        transform: rotate(0deg);
    }
}

#chatButton:hover {
    /* background-color: #45a049; */
    background-color: red;
}

@@media only screen and (max-width: 600px) {
    #chatButton {
        bottom: 15px;
        right: 10px;
        padding: 12px;
    }
}
/* Modal (tam ekranı kaplaması ve scrollbar) */
.modaly {
    display: none; /* Başlangıçta gizli */
    position: fixed;
    z-index: 9999; /* En üstte görünmesi için yüksek bir z-index değeri */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Arkaplan siyah ve yarı şeffaf */
}

/* Modal içeriği */
.modaly-content {
    background-color: #fff;
    margin: auto; /* Ortada konumlanması */
    padding: 0; /* İçerik için sıfır padding */
    border: 3px solid #000;
    width: 70%; /* Genişlik ayarlanabilir */
    height: 95%; /* Ekranın %95 yüksekliği */
    border-radius: 10px;
    position: relative; /* İçerik için relative konumlandırma */
    display: flex;
    flex-direction: column; /* Header, Body, Footer sıralaması */
    box-sizing: border-box; /* Kenar boşlukları içerik genişliğine dahil */
}

/* Mobil görünüm için modal */
@media (max-width: 768px) {
    .modaly-content {
        width: calc(100% - 10px); /* Kenarlardan 5px boşluk bırak */
        height: calc(100% - 10px); /* Yükseklikten 5px boşluk bırak */
    }
}

/* Modal header */
.modal-header {
    background-color: #f0f8ff; /* Hafif mavi arka plan */
    padding: 10px 20px;
    border-bottom: 1px solid #ccc;
    position: sticky; /* Sabit header */
    top: 0;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Modal body (scrollable içerik) */
.modaly-body {
    padding: 20px;
    overflow-y: auto; /* Scroll sadece body kısmında */
    flex: 1; /* Body kısmını esnek yap */
}

/* Modal footer */
.modaly-footer {
    background-color: #f0f8ff; /* Hafif açık gri */
    padding: 10px 20px;
    border-top: 1px solid #ccc;
    text-align: center;
}

/* Kapatma butonu */
.closey {
    background-color: #000;
    color: #fff;
    position: absolute; /* Sağ üst köşeye yerleştirme */
    top: -1px;
    right: -1px;
    width: 40px;
    height: 40px;
    border-radius: 50%; /* Yuvarlak simge */
    font-size: 30px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.3);
    border: 2px solid #fff;
    z-index: 2;
}

    .closey:hover, .closey:focus {
        background-color: #555; /* Hover durumunda koyu gri */
    }

/* Mesaj stili */
.message-item {
    border: 1px solid #ddd;
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 5px;
    background-color: #f9f9f9; /* Kullanıcı mesajları için zemin */
}

.admin-response-item {
    margin-top: 10px;
    padding: 10px;
    border-radius: 5px;
    background-color: #e6e6e6; /* Admin yanıtları için gri zemin */
    margin-left: 20px; /* İçeriden başlat */
    border-left: 4px solid #007bff; /* Admin yanıtlarına vurgu için bir şerit */
}

    .admin-response-item p {
        margin: 0; /* Paragraflar arasında boşluk bırakma */
    }


/*yukarı çık butonu*/

#top {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: #00b2f2;
    width: 40px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    border-radius: 35px;
    transition: all .3s ease;
    z-index: 999;
}

#top i {
    color: #fff;
    font-size: 20px;
}

#top:hover {
    background-color: #fcb100;
}

.modal-backdrop {
    display: none !important;
}

.nav-item .dropdown-menu {
    width: 100%; /* Üst elemanla aynı genişlikte yapar */
    box-sizing: border-box; /* Taşma olmaması için kutu boyutunu ayarlar */
}