/* //// SİTE YAPISI //// */

/* White Theme */
:root {
    --background-color: #fff;
    --box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    --a-color: #007bff;
    --a-hover-color: #0056b3;
    --orb-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 0px 2px;
    --konsolyazi-color: rgba(0,0,0,0.6);
    --menu-content-background: #fff;
    --menu-content-text-color: #000;
    --menu-content-hover-background: rgba(0,0,0,0.1);
    --yakinda: rgba(0, 0, 0, 0.4);
    --header-background: #fff;
    --header-border-top: #4DB369;
    --headerbaslik-hover: rgba(70, 148, 104,0.2);
    --headerbaslik-a-color: #4DB369;
    --headerbaslik-a-hover: #1c8c3a;
    --ara-input-box-shadow: rgba(0, 0, 0, 0.05) 0 0 0 1px;
    --ara-input-background: #rgb(252, 252, 252);
    --ara-input-color: #2d2d2d;
    --ara-focus-background: #ffffff;
    --ara-focus-box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
    --ara-sonuc-background: #fff;
    --ara-sonuc-color: #2d2d2d;
    --ara-sonuc-hover: #000;
    --aramasagoa: #d86654;
    --aramasagoa-hover-background: rgba(204,60,60,0.30);
    --aramasagsecenek: #3A3A3A;
    --aramasagsecenek-hover-background: rgba(0,0,0,0.2);
    --soltaraf-color: #000;
    --soltaraf-background: #fff;
    --soltaraf-span-color: #000;
    --soltaraf-a-color: rgba(0, 0, 0, 0.733);
    --soltaraf-sayi-color: #007bff;
    --hosgeldin: rgba(0,0,0,0.60);
    --hosgeldin-background: rgba(0,0,0,0.05);
    --consoleuni-background: #fff;
    --consoleuni-color: #000;
    --consolelise-background: #fff;
    --consolelise-color: #000;
    --consoleortak-background: #fff;
    --consoleortak-color: #000;
    --hr-color: rgba(0, 0, 0, 0.03);
    --alertmsg-color: rgba(255,255,255,1.00);
    --alertmsg-background: rgba(0,0,0,0.80);
    --alertmsg-border-color: rgba(0,0,0,0.80);
    --yorumlar-background: rgba(0,0,0,0.02);
    --yorumlar-color: rgba(0,0,0,0.70);
    --yorumlar-hover: rgba(0,0,0,0.06);
    --yazar: rgba(0,0,0,0.70);
    --yazar-background: rgba(0,0,0,0.02);
    --yazar-hover: rgba(0,0,0,0.06);
    --kadin-color: #FF0080;
    --kadin-hover: #ca0065;
    --tarih: rgba(0,0,0,0.70);
    --basliklise: #008E3D;
    --basliklise-hover: #007431;
    --baslikuni: #013bc1;
    --baslikuni-hover: #002782;
    --baslikortak: #ce1212;
    --baslikortak-hover: #910000;
    --linkler-background: rgba(0,123,255,0.05);
    --linkler-hover-background: rgba(0,123,255,0.1);
    --linkler-visited-color: rgba(0,0,0,0.80);
    --linkler-visited-background: rgba(0,0,0,0.0.5);
    --kutu-background: rgba(0,0,0,0.02);
    --konsol-background: rgba(0, 0, 0, 0.02);
    --konsol-color: #0B0B0B;
    --konsol-box-shadow: rgba(0, 0, 0, 0.05) 0 0 0 1px;
    --konsol-focus-background: #fff;
    --konsol-white-background: #fff;
    --konsol-invalid-background: #ffdddd;
    --buton-color: #636363;
    --buton-background-color: rgb(248, 248, 248);
    --buton-box-shadow: inset 0 -3px 1px rgba(0,0,0,0.3);
    --buton-hover-background-color: rgba(0,0,0,0.1);
    --buton-active-background-color: rgba(0,0,0,0.1);
    --buton-active-box-shadow: inset 0 -1px 0 rgba(0,0,0,0.1);
    --buton-disabled-background-color: rgba(0,0,0,0.09);
    --buton-disabled-color: #747474;
    --lise-background: #469468;
    --lise-color: #fff;
    --universite-background: #4C7AE4;
    --universite-color: #fff;
    --ortakalan-background: #E66969;
    --ortakalan-color: #fff;
    --lise-goster-saydam-background: rgba(70, 148, 104,0.2);
    --universite-goster-saydam-background: rgba(76, 122, 228,0.2);
    --ortakalan-goster-saydam-background: rgba(230, 105, 105,0.2);
    --iduni-color: #fff;
    --iduni-hover-color: #e6e6e6;
    --bosamabu-color: #5E5E5E;
    --bosamabu-background-color: rgba(0,0,0,0.02);
    --yorumyok-color: #5E5E5E;
    --yorumyok-background: rgba(0,0,0,0.02);
    --goster-color: #525252;
    --sehir-color: rgba(255, 255, 255, 0.7);
    --cityandstate-color: #000000ab;
    --toplamgonderi-color: #9E9E9E;
    --console-color: #000;
    --yaziboyutu-color: #000;
    --yaziboyutu-button-active: rgba(0,0,0,0.05);
    --footer-color: #565555;
    --footer-background: rgba(0, 0, 0, 0.02);
    --reklam-color: #5E5E5E;
    --reklam-background: rgba(0,0,0,0.02);
    --readmore-color: #007bff;
    --readmore-hover-color: #0056b3;
    --birthday-picker-background: #fff;
    --birthday-picker-box-shadow: rgba(0, 0, 0, 0.05) 0 0 0 1px;
    --birthday-picker-invalid-background: #ffdddd;
    --birthday-picker-input-color: #0B0B0B;
    --uyari-color: rgba(0,0,0,0.30);
    --kurallar-color: rgba(0,0,0,0.60);
    --konubilgi-color: rgba(70, 148, 104, 0.8);
    --konusoru-color: rgba(76, 122, 228, 0.8);
    --konuitiraf-color: rgba(230, 105, 105, 0.8);
    --konuilan-color: rgba(235, 204, 8, 0.8);
    --konuozel-color: rgba(0, 0, 0, 0.8);
    --konubilgi-box-shadow: rgba(0, 0, 0, 0.04) 0 1px 3px 0, rgba(70, 148, 104, 0.4) 0 0 0 1px inset;
    --konusoru-box-shadow: rgba(0, 0, 0, 0.02) 0 1px 3px 0, rgba(76, 122, 228, 0.4) 0 0 0 1px inset;
    --konuitiraf-box-shadow: rgba(0, 0, 0, 0.02) 0 1px 3px 0, rgba(230, 105, 105, 0.4) 0 0 0 1px inset;
    --konuilan-box-shadow: rgba(0, 0, 0, 0.02) 0 1px 3px 0, rgba(228, 198, 5, 0.705) 0 0 0 1px inset;
    --selekt-color: rgba(0,0,0,0.40);
    --selekt-color2: rgba(0,0,0,0.01);
    --bilgi-color: #606060;
    --bilgi-background: rgba(0,0,0,0.03);
    --button-label-color: #8E8E8E;
    --button-label-background: rgba(255,255,255,1.00);
    --button-label-box-shadow: inset 0 -2px 0 rgba(0,0,0,0.1);
    --button-label-hover-color: #101010;
    --button-label-hover-background: rgba(0,0,0,0.01);
    --genel-button-color: #3A3A3A;
    --genel-button-box-shadow: rgba(0, 0, 0, 0.02) 0 1px 3px 0 inset, rgba(0,0,0,0.15) 0 0 0 1px inset;
    --bilgi-button-box-shadow: rgba(0, 0, 0, 0.02) 0 1px 3px 0 inset, rgba(70, 148, 104, 0.5) 0 0 0 1px inset;
    --soru-button-box-shadow: rgba(0, 0, 0, 0.02) 0 1px 3px 0 inset, rgba(76, 122, 228, 0.5) 0 0 0 1px inset;
    --itiraf-button-box-shadow: rgba(0, 0, 0, 0.02) 0 1px 3px 0 inset, rgba(230, 105, 105, 0.5) 0 0 0 1px inset;
    --ilan-button-box-shadow: rgba(0, 0, 0, 0.02) 0 1px 3px 0 inset, rgba(255,221,0,1) 0 0 0 1px inset;
    --adminmodu-color: rgba(0,0,0,0.5);
    --gonderiler-color: rgba(0, 0, 0, 0.3);
    --aciklamabos-border: 5px dotted rgba(0, 0, 0, 0.05);
    --instagrambos-border: 3px dotted rgba(0, 0, 0, 0.05);
    --aciklama-color: #505050;
    --avatars-hover-box-shadow: rgba(0, 0, 0, 0.02) 0 1px 3px 0, rgba(0, 0, 0, 0.8) 0 0 0 1px;
    --avatars-active-box-shadow: rgba(0, 0, 0, 0.02) 0 1px 3px 0, rgb(0, 0, 0, 0.8) 0 0 0 2px;
    --avatars-checked-box-shadow: rgba(0, 0, 0, 0.02) 0 1px 3px 0, rgb(0, 0, 0, 0.8) 0 0 0 3px;
    --sayfalama-disabled-color: #999999;
    --hangisayfa-background: rgba(0, 0, 0, 0.50);
    --sayfalama-li-a-background: rgba(0, 0, 0, 0.55);
    --sayfalama-li-a-hover-background: rgba(0, 0, 0, 0.60);
    --geri-ileri-hover: rgba(0, 0, 0, 0.65);
    --sayfalama-disabled-background: rgba(0, 0, 0, 0.02);
    --sayfalama-li-color: #c8c6c6;
    --sayfalama-li-a-color: #fff;
    --tablo-border: 0 solid #ddd;
    --tablo--child-bg: #f9f9f9;
    --tablo-hover-bg: #ddd;
    --basliklink-visited-color: #333333;
    --basliklink3-color: #000;
    --basliklink3-hover-color: #707070;
    --basliklink3-visited-color: #707070;
    --reklamicin-color: rgba(0, 0, 0, 0.3);
    --highlight-background: rgba(0, 149, 255, 0.11);
    --scrollbar-hover-background: #f4f4f4;
    --scrollbar-hover: #8f8f8f;
    --scrollbar-active: #727272;
    
}
/* Dark Theme */
@media (prefers-color-scheme: dark) {
    :root {
        --background-color: #212121;
        --box-shadow: 0px 0px 0px 0.5px rgba(255, 255, 255, 0.349);
        --a-color: #8dc4ff;
        --a-hover-color: #5ba8ff;
        --orb-box-shadow: rgba(255, 255, 255, 0.5) 0px 0px 0px 2px;
        --konsolyazi-color: rgba(255,255,255,0.6);
        --menu-content-background: #333;
        --menu-content-text-color: #fff;
        --menu-content-hover-background: rgba(255,255,255,0.10);
        --yakinda: rgba(255, 255, 255, 0.4);
        --header-background: #333;
        --header-border-top: #4DB369;
        --headerbaslik-hover: rgba(70, 148, 104,0.1);
        --headerbaslik-a-color: #4DB369;
        --headerbaslik-a-hover: #1c8c3a;
        --ara-input-box-shadow: rgba(255, 255, 255, 0.2) 0 0 0 1px;
        --ara-input-background: rgba(255, 255, 255, 0.10);
        --ara-input-color: #fff;
        --ara-focus-background: #1f1f1f;
        --ara-focus-box-shadow: rgba(255, 255, 255, 0.02) 0px 1px 3px 0px, rgba(255, 255, 255, 0.15) 0px 0px 0px 1px;
        --ara-sonuc-background: #1f1f1f;
        --ara-sonuc-color: #fff;
        --ara-sonuc-hover: #cccccc;
        --aramasagoa: #d86654;
        --aramasagoa-hover-background: rgba(204,60,60,0.30);
        --aramasagsecenek: #fff;
        --aramasagsecenek-hover-background: rgba(255,255,255,0.20);
        --soltaraf-color: #fff;
        --soltaraf-background: #333;    
        --soltaraf-span-color: #fff;
        --soltaraf-a-color: rgba(255, 255, 255, 0.733);
        --soltaraf-sayi-color: #58a9ff;
        --hosgeldin: rgba(255,255,255,0.60);
        --hosgeldin-background: rgba(255,255,255,0.05);
        --consoleuni-background: #333;
        --consoleuni-color: #fff;
        --consolelise-background: #333;
        --consolelise-color: #fff;
        --consoleortak-background: #333;
        --consoleortak-color: #fff;
        --hr-color: rgba(255, 255, 255, 0.04);
        --alertmsg-color: rgba(0,0,0,1.00);
        --alertmsg-background: rgba(255,255,255,0.80);
        --alertmsg-border-color: rgba(255,255,255,0.80);
        --yorumlar-background: rgba(255,255,255,0.07);
        --yorumlar-color: rgba(255,255,255,0.70);
        --yorumlar-hover: rgba(255,255,255,0.15);
        --yazar: rgba(255,255,255,0.70);
        --yazar-background: rgba(255,255,255,0.07);
        --yazar-hover: rgba(255,255,255,0.15);
        --kadin-color: #ff69b4;
        --kadin-hover: #f7429c;
        --tarih: rgba(255,255,255,0.70);
        --basliklise: #4ac981;
        --basliklise-hover: #34ad69;
        --baslikuni: #adc6ff;
        --baslikuni-hover: #8eb0ff;
        --baslikortak: #ff8888;
        --baslikortak-hover: #f05b5b;
        --linkler-background: rgba(106, 178, 255, 0.1);
        --linkler-hover-background: rgba(147, 199, 255, 0.1);
        --linkler-visited-color: rgba(255,255,255,0.80);
        --linkler-visited-background: rgba(255,255,255,0.3);
        --kutu-background: #333;
        --konsol-background: rgba(255, 255, 255, 0.04);
        --konsol-color: #ffffff;
        --konsol-box-shadow: 0px 0px 0px 0.5px rgba(255, 255, 255, 0.349);
        --konsol-focus-background: #1f1f1f;
        --konsol-white-background: #333;
        --konsol-invalid-background: #2e0f0f;
        --buton-color: #ffffff;
        --buton-background-color: rgba(255, 255, 255, 0.3);
        --buton-box-shadow: inset 0 -3px 1px rgba(255, 255, 255, 0.4);
        --buton-hover-background-color: rgba(255, 255, 255, 0.35);
        --buton-active-background-color: rgba(255, 255, 255, 0.35);
        --buton-active-box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.1);
        --buton-disabled-background-color: rgba(255, 255, 255, 0.1);
        --buton-disabled-color: #747474;
        --lise-background: #469468;
        --lise-color: #fff;
        --universite-background: #4C7AE4;
        --universite-color: #fff;
        --ortakalan-background: #E66969;
        --ortakalan-color: #fff;
        --lise-goster-saydam-background: rgba(70, 148, 104,0.3);
        --universite-goster-saydam-background: rgba(76, 122, 228,0.3);
        --ortakalan-goster-saydam-background: rgba(230, 105, 105,0.3);
        --iduni-color: #fff;
        --iduni-hover-color: #e6e6e6;
        --bosamabu-color: #747474;
        --bosamabu-background-color: rgba(255, 255, 255, 0.03);
        --yorumyok-color: #747474;
        --yorumyok-background: rgba(255, 255, 255, 0.03);
        --goster-color: #cecece;
        --sehir-color: rgba(255, 255, 255, 0.705);
        --cityandstate-color: #ffffffab;
        --toplamgonderi-color: #9E9E9E;
        --console-color: #fff;
        --yaziboyutu-color: #fff;
        --yaziboyutu-button-active: rgba(255,255,255,0.05);
        --footer-color: #cecece;
        --footer-background: rgba(255, 255, 255, 0.03);
        --reklam-color: #747474;
        --reklam-background: rgba(255, 255, 255, 0.03);
        --readmore-color: #8dc4ff;
        --readmore-hover-color: #5ba8ff;
        --birthday-picker-background: #1f1f1f;
        --birthday-picker-box-shadow: rgba(255, 255, 255, 0.2) 0 0 0 1px;
        --birthday-picker-invalid-background: #2e0f0f;
        --birthday-picker-input-color: #fff;
        --uyari-color: rgba(255,255,255,0.30);
        --kurallar-color: rgba(255,255,255,0.60);
        --konubilgi-color: rgba(57, 238, 135, 0.651);
        --konusoru-color: rgba(154, 189, 255, 0.822);
        --konuitiraf-color: rgba(255, 139, 139, 0.712);
        --konuilan-color: rgba(255, 229, 59, 0.644);
        --konuozel-color: rgba(255, 255, 255, 0.8);
        --konubilgi-box-shadow: rgba(0, 0, 0, 0.04) 0 1px 3px 0, rgba(66, 228, 136, 0.671) 0 0 0 1px inset;
        --konusoru-box-shadow: rgba(0, 0, 0, 0.02) 0 1px 3px 0, rgb(146, 179, 255) 0 0 0 1px inset;
        --konuitiraf-box-shadow: rgba(0, 0, 0, 0.02) 0 1px 3px 0, rgba(255, 151, 151, 0.74) 0 0 0 1px inset;
        --konuilan-box-shadow: rgba(0, 0, 0, 0.02) 0 1px 3px 0, rgba(255, 224, 24, 0.596) 0 0 0 1px inset;
        --selekt-color: rgba(255,255,255,0.40);
        --selekt-color2: #444444;
        --bilgi-color: #cecece;
        --bilgi-background: rgba(255,255,255,0.03);
        --button-label-color: rgba(255, 255, 255, 0.4);
        --button-label-background: rgba(0, 0, 0, 0.15);
        --button-label-box-shadow: inset 0 -2px 0 rgba(255, 255, 255, 0.180);
        --button-label-hover-color: #d8d8d8;
        --button-label-hover-background: rgba(0, 0, 0, 0.2);
        --genel-button-color: #fff;
        --genel-button-box-shadow: rgba(255, 255, 255, 0.02) 0 1px 3px 0 inset, rgba(255,255,255,0.5) 0 0 0 1px inset;
        --bilgi-button-box-shadow: rgba(255, 255, 255, 0.02) 0 1px 3px 0 inset, rgba(66, 228, 136, 0.5) 0 0 0 1px inset;
        --soru-button-box-shadow: rgba(255, 255, 255, 0.02) 0 1px 3px 0 inset, rgba(146, 179, 255, 0.5) 0 0 0 1px inset;
        --itiraf-button-box-shadow: rgba(255, 255, 255, 0.02) 0 1px 3px 0 inset, rgba(255, 151, 151, 0.5) 0 0 0 1px inset;
        --ilan-button-box-shadow: rgba(255, 255, 255, 0.02) 0 1px 3px 0 inset, rgba(255, 224, 24, 0.5) 0 0 0 1px inset;
        --adminmodu-color: rgba(255,255,255,0.50);
        --gonderiler-color: rgba(255, 255, 255, 0.3);
        --aciklamabos-border: 5px dotted rgba(255, 255, 255, 0.1);
        --instagrambos-border: 3px dotted rgba(255, 255, 255, 0.1);
        --aciklama-color: #a0a0a0;
        --avatars-hover-box-shadow: rgba(255, 255, 255, 0.02) 0 1px 3px 0, rgba(255, 255, 255, 0.8) 0 0 0 1px;
        --avatars-active-box-shadow: rgba(255, 255, 255, 0.02) 0 1px 3px 0, rgb(255, 255, 255, 0.8) 0 0 0 2px;
        --avatars-checked-box-shadow: rgba(255, 255, 255, 0.02) 0 1px 3px 0, rgb(255, 255, 255, 0.8) 0 0 0 3px;
        --sayfalama-disabled-color: #999999;
        --hangisayfa-background: rgba(255, 255, 255, 0.20);
        --sayfalama-li-a-background: rgba(255, 255, 255, 0.25);
        --sayfalama-li-a-hover-background: rgba(255, 255, 255, 0.30);
        --geri-ileri-hover: rgba(255, 255, 255, 0.35);
        --sayfalama-disabled-background: rgba(255, 255, 255, 0.02);
        --sayfalama-li-color: #c8c6c6;
        --sayfalama-li-a-color: #fff;
        --tablo-border: 0 solid #ddd;
        --tablo--child-bg: #252525;
        --tablo-hover-bg: #303030;
        --basliklink-visited-color: #aaaaaa;
        --basliklink3-color: #fff;
        --basliklink3-hover-color: #aaaaaa;
        --basliklink3-visited-color: #aaaaaa;
        --reklamicin-color: rgba(255, 255, 255, 0.2);
        --highlight-background: rgba(0, 149, 255, 0.11);
        --scrollbar-hover-background: #303030;
        --scrollbar-hover: #bbbbbb;
        --scrollbar-active: #ebebeb;
    }
}
/* Switch Styles */
.switch {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    width: 40px;
    height: 20px;
    cursor: pointer;
}

.switch__label {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
    background-color: #fff; /* Default light mode background */
    border-radius: 25px;
    transition: 0.4s;
}

.switch__label::before {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    left: 0px; /* Default position for light mode */
    width: 20px;
    height: 20px;
    border-radius: 100%;
    border: 2px solid #fff;
    background-color: #333;
    color: #fff;
    transition: 0.4s;
    content: ""; /* Default icon for light mode */
    font-family: "Font Awesome 5 Free";
    font-size: 10px;
    font-weight: 900;
    box-sizing: border-box;
}
.switch.dark .switch__label {
    background-color: #333; /* Background for dark mode */
}
.switch.dark .switch__label::before {
    left: calc(100% - 20px); /* Move to the right for dark mode */
    border-color: #333;
    background-color: #fff; /* Light circle for dark mode */
    color: #333; /* Dark icon for dark mode */
    content: ""; /* Icon for dark mode */
}

::-webkit-scrollbar {
    width:auto;
}
/* background of the scrollbar except button or resizer */
::-webkit-scrollbar-track {
    background:transparent;
}
::-webkit-scrollbar-track:hover {
    background-color: var(--scrollbar-hover-background);
}
/* scrollbar itself */
::-webkit-scrollbar-thumb {
    background:transparent;
    background-clip: padding-box;
    border-radius: 50px;
    background-color: #AAAAAA;
    border: 5px solid rgba(0, 0, 0, 0);
}
::-webkit-scrollbar-thumb:hover {
    background-color: var(--scrollbar-hover);
}
::-webkit-scrollbar-thumb:active {
    background-color: var(--scrollbar-active);
}
/* set button(top and bottom of the scrollbar) */
::-webkit-scrollbar-button {display:none}

html {
scroll-behavior: auto;
scroll-padding-top: 130px;
overflow-y: scroll;
}
#body {
padding-top: 65px !important;
padding-left: 370px;
width: 75%;
margin: 0 auto;
transition:all 1s;
}
body {
background-color: var(--background-color);
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
}
@font-face {
        font-family: header;
        src: url('fonts/header.ttf');
        font-display: swap;
}
/* Animations */
@-webkit-keyframes slideIn {
	from {bottom: -300px; opacity: 0} 
	to {bottom: 0; opacity: 1}
}
@keyframes slideIn {
	from {bottom: -300px; opacity: 0}
	to {bottom: 0; opacity: 1}
}
@-webkit-keyframes fadeIn {
	from {opacity: 0} 
	to {opacity: 1}
}
@keyframes fadeIn {
	from {opacity: 0} 
	to {opacity: 1}
}
@keyframes orb {
    0% {
        box-shadow: none;
    }
    5% {
        box-shadow: none;
    }
    25% {
        box-shadow: var(--orb-box-shadow);
    }
    80% {
        box-shadow: var(--orb-box-shadow);
    }
    100% {
        box-shadow: none;
    }
  }
@media only screen and (min-width:800px) {
    .padding {
        padding-left: 0!important;
        padding-right: 0!important;
        transition:all 2s;
        width: 50%!important;
        }
}
@media only screen and (max-width:1200px) {
	.yazar a {
        max-width: 120px;
    }
	.header{
	min-width: 100%;
	}
	#body {
	width: 95%;
    }
	#soltaraf {
    left: 2.5%!important;
    }
}
@media only screen and (max-width:800px) {
	.yazar a {
        max-width: 90px;
    }
	.header{
	min-width: 100%;	
	}
	.footer {
	font-size: 12px;
	}
	.universiteler {
	width: 30%!important;
	}
	.girisyap {
	width: 30%!important;
	left: 70%!important;
	}
	.liseler {
	width: 20%!important;
	left: 30%!important;
	}
	.kayitol {
	width: 20%!important;
	}
    #body {
	width: 95%;
    padding-left: 0 !important;
    padding-right: 0 !important;
    }
	#search {
	padding-left: 55px !important;
    }
    .buton {
    min-width: 50%;
    left: 49% !important;
    }
    #soltaraf {
    display: none!important;
    }
    sosyo {
    display: none;
    }
    .headerbaslik {
    width: 40px;
    padding-left: 10px;
    padding-right: 10px;
    }
    #sonuc {
    margin-left: 0;
    }
    #sonuc a {
    font-size: 15px!important;
    }
	.resimid {
	max-width: 150px!important;
	max-height: 150px!important;
	}
    .bosluk {
    margin-top: 20px;
    }
    h1 {
        font-size: 17px;
    }
    h2 {
        font-size: 17px;
    }
    #icerik {
        font-size: 16px;
    }
    h1 {
        font-size: 17px!important;
    }
    h2 {
        font-size: 17px!important;
    }
    #reklam p, #reklam1 p, #reklam2 p{
        font-size: 14px!important;
    }
    .profilresmi {
        width: 80px!important;
        height: 80px!important;
    }
    .kullaniciadi {
        font-size: 15px!important;
    }
    .isim {
        font-size: 12px!important;
    }
    ul.sayfalama li a{
        font-size: 14px;
        padding: 1.6vw 5vw!important;
    }
    .hangisayfa {
        font-size: 14px;
    }
    ul.sayfalama li a:hover{
        padding: 1.6vw 5vw!important;
    }
    .hangisayfa{
        padding: 1.6vw 2.5vw!important;
    }
    .button-wrap {
        text-align: center;
    }
    .button-label h1 {
        font-size: 0.7em!important;
   }
   .tarih {
        padding-top: 5px!important;
        padding-bottom: 5px!important;
    }
}
@media only screen and (max-width:400px) {
    .aciklamabos {
        display: none;
    }
    .yazar a {
        max-width: 50px;
    }
}
h1 {
display: table;
font-size: 20px;
margin: 3px 0;
font-weight: bold;
}
h2 {
    display: table;
    font-size: 20px;
    margin: 3px 0;
    font-weight: bold;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
a {
    color: var(--a-color);
    text-decoration: none;
    background-color: transparent;
    /*-webkit-text-decoration-skip: objects;*/
    margin: 0;
    -webkit-transition: all 0.4s;
    -o-transition: all 0.4s;
    -moz-transition: all 0.4s;
    transition: all 0.4s;}
a:focus {
outline: none !important;
}
a:hover {
  color: var(--a-hover-color);
  text-decoration: underline;
}
a:not([href]):not([tabindex]) {
  color: inherit;
  text-decoration: none;
}
a:not([href]):not([tabindex]):hover, a:not([href]):not([tabindex]):focus {
  color: inherit;
  text-decoration: none;
}

a:not([href]):not([tabindex]):focus {
  outline: 0;
}
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  margin-bottom: 0.5rem;
  font-family: inherit;
  font-weight: 500;
  line-height: 1.2;
  color: inherit;
}
p {
  margin-top: 0;
}
pre {
    white-space:pre-line;
}
ul, li {
margin: 0;
list-style-type: none;
table-layout:fixed; 
word-wrap:break-word; 
overflow:auto;
}
input {
display: block;
outline: none;
border: none !important;
}
textarea {
display: block;
outline: none;
}
textarea:focus, input:focus {
border-color: transparent !important;
}
button {
outline: none !important;
border: none;
background: transparent;
}
button:hover {
cursor: pointer;
}
iframe {
border: none !important;
}
img {
  vertical-align: middle;
  border-style: none;
}
input,
button,
select,
optgroup,
textarea {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}
button,
input {
  overflow: visible;
}
button,
select {
  text-transform: none;
}
button,
html [type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
  appearance: button;
}
hr {
  margin-top: 1rem;
  margin-bottom: 1rem;
  border: 0;
  border-top: 1px solid var(--hr-color);
}
/* //// KENARLAR //// */
.menu-content, .consoleuni, .consolelise, .consoleortak, #soltaraf, .header{
    /*box-shadow: rgba(149, 157, 165, 0.2) 0 8px 24px;*/
    /*box-shadow: rgba(17, 17, 26, 0.05) 0px 4px 16px, rgba(17, 17, 26, 0.05) 0px 8px 32px;*/
    box-shadow: var(--box-shadow);

}
/* //// HEADER.PHP //// */
#aramasagoa {
z-index: 24;
position: absolute;
top: 15px;
right: 80px;
width: 30px;
height: 30px;
color: var(--aramasagoa);
font-weight: bold;
text-align: center;
display: grid;
place-items: center;
transition: 0.5s;
}
#aramasagoa:hover {
background-color: var(--aramasagoa-hover-background);
border-radius: 15px;
}
#aramasaghesap {
z-index: 24;
position: absolute;
top: 18px;
right: 47px;
width: 25px;
height: 25px;
transition: 0.5s;
border-radius: 30px;
box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px, rgb(209, 213, 219) 0px 0px 0px 1px inset;
}
#aramasaghesap:hover {
background-color:rgba(76,122,228,0.30);
}
#aramasagsecenek {
cursor: pointer;
z-index: 24;
position: absolute;
top: 15px;
right: 11px;
width: 30px;
height: 30px;
color: var(--aramasagsecenek);
font-weight: bold;
text-align: center;
display: grid;
place-items: center;
transition: 0.5s;
}
#aramasagsecenek:hover {
background-color: var(--aramasagsecenek-hover-background);
border-radius: 15px;
}
#ulke::-webkit-scrollbar-thumb, #soltaraf::-webkit-scrollbar-thumb {
    border: 0px;
    background-color: #bebebe!;
}
#ulke::-webkit-scrollbar-thumb:hover, #soltaraf::-webkit-scrollbar-thumb:hover {
    background-color: var(--scrollbar-hover);
}
#ulke::-webkit-scrollbar-thumb:active, #soltaraf::-webkit-scrollbar-thumb:active {
    background-color: var(--scrollbar-active);
}
#ulke::-webkit-scrollbar, #soltaraf::-webkit-scrollbar {
    width:4px;
}
#ulke::-webkit-scrollbar-track, #soltaraf::-webkit-scrollbar-track {
    margin: 30px;
}
#ulke {
    max-height: 360px;
    overflow-y: overlay;
}
.menu-content {
display: none;
top: 50px;
right: 0;
position: absolute;
background-color: var(--menu-content-background);
width: auto;
height: auto;
overflow: auto;
border-radius: 20px;
z-index: 1;
white-space: nowrap;
}
.menu-content a {
    color: var(--menu-content-text-color);
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    }
    .menu-content a:hover {
    background: var(--menu-content-hover-background);
}
.menu-content span {
color: var(--menu-content-text-color);
padding: 12px 16px;
text-decoration: none;
display: block;
margin: auto;
}
.menu-content span:hover {
background: var(--menu-content-hover-background);
}
.ulkeler {
    position: relative;
    width: 20px;
    height: 20px;
    top: -2px;
    margin-right: 5px;
}
.yakinda {
    color: var(--yakinda)!important;
    -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
    pointer-events: none;
}
.header {
background: var(--header-background);
border-radius: 0 0 20px 20px;
position: fixed;
top: 0;
left: 50%;
transform: translate(-50%, 0);
border-top:4px solid var(--header-border-top);
width: 75.2%;
z-index: 24;
padding-top: 8px;
}
.headerbaslik {
padding-left: 6px;
padding-right: 6px;
padding-bottom: 0;
left: 8px;
top: -2px;
position: relative;
z-index: 24;
float: left;
text-align: center;
vertical-align: middle;
transition: 0.5s;
cursor: pointer;
}
.headerbaslik img{
width: 30px;
height: 35px;
padding-bottom:4px;
}
.headerbaslik:hover {
border-radius: 20px 20px 20px 20px;
background-color: var(--headerbaslik-hover);
}
.headerbaslik a {
display: block;
z-index: 9;
font-family: header, sans-serif;
font-size: 30px;
color: var(--headerbaslik-a-color);
text-align: center;
text-decoration: none;
}
.headerbaslik a:hover {
text-decoration:none;
color: var(--headerbaslik-a-hover);
}
#search {
position: relative;
height:50px;
padding-left: 185px; /* BAŞLIĞA GÖRE DEĞİŞTİR */
padding-right: 120px;
}
#kapat {
display: none;
z-index: 26;
position: absolute;
top: 12px;
left: 21px;
font-size: 25px;
cursor: pointer;
color: var(--konsolyazi-color)
}
#secenek{
position: absolute;
top: 0;
right: 120px;
}
#ara input{
box-shadow: var(--ara-input-box-shadow);
background: var(--ara-input-background);
position: relative;
border-radius: 20px;
padding-left: 20px;
margin-top:3px;
height: 38px;
width:100%;
color: var(--ara-input-color);
font-size:16px;
-webkit-appearance: none;
appearance: none;
z-index: 25;
}
#ara :focus{
background: var(--ara-focus-background);
box-shadow: var(--ara-focus-box-shadow);
}
#sonuc {
box-shadow: var(--ara-focus-box-shadow);
z-index: 25;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
display: none;
position: relative;
border-radius: 20px;
padding: 10px 17px;
background: var(--ara-sonuc-background);
color: var(--ara-sonuc-color);
text-decoration: none;
width: 100%;
}
#sonuc a {
font-size:16px;
z-index: 9;
color: var(--ara-sonuc-color);
text-decoration: none;	
}
#sonuc a:link {
text-decoration:none;
}
#sonuc a:hover {
text-decoration:none;
color: var(--ara-sonuc-hover);
}
#sonuc a:active {
text-decoration:none;
}
/* \\\\ HEADER.PHP \\\\ */

/* //// INDEX.PHP //// */
.hosgeldin {
margin-top: 20px;
text-align: center;
color: var(--hosgeldin);
background-color: var(--footer-background);
border-radius: 30px;
padding: 10px 15px 10px;
-webkit-animation-name: fadeIn; /* Fade in the background */
-webkit-animation-duration: 1s;
animation-name: fadeIn;
animation-duration: 1s;
}
/* \\\\ INDEX.PHP \\\\ */
/* //// GONDERİLER.PHP //// */
.id {
position: relative;
float: right;
font-weight: normal;
font-size: 10px;
top: 7px;
margin-right:3px;
}
.id:hover {
color: var(--a-hover-color);
text-decoration: underline;
}
.id2 {
color: var(--yazar);
position: relative;
float: right;
text-decoration: none;
font-weight: normal;
font-size: 10px;
top: 7px;
margin-right: 3px;
}
.iddiger {
color: var(--a-color);
position: relative;
float: right;
font-weight: normal;
font-size: 10px;
top: 7px;
margin-right: 12px;
cursor: pointer;
-webkit-appearance: none;
appearance: none;
}
.iddiger:hover {
color: var(--a-hover-color);
}
.alertMsg {
display: none;
z-index: 9;
position: absolute;
font-size: 13px;
color: var(--alertmsg-color);
border-radius: 20px;
padding: 4px 9px;
right: -3px;
bottom: 20px;
background: var(--alertmsg-background);
}
.alertMsg:after {
content:'';
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
width: 0;
height: 0;
border-top: solid 5px var(--alertmsg-border-color);
border-left: solid 5px transparent;
border-right: solid 5px transparent;
}
.yorumlar {
margin-top: 5px;
bottom: 5px;
left: -5px;
border-radius: 30px;
z-index: 8;
margin-left: 5px;
color: var(--yorumlar-color);
position: relative;
float: left;	  
font-weight: normal;
font-size: 12px;
background: var(--yorumlar-background);
text-decoration: none;
padding: 5px 10px 4px;
transition: 0.5s;
}
.yorumlar:hover {
background: var(--yorumlar-hover);
}
.begeni {
    color: var(--a-color);
}
.yazar {
margin-top: 5px;
bottom: 5px;
left: -5px;
border-radius: 30px;
z-index: 8;
color: var(--yazar);
position: relative;
float: left;	  
font-weight: normal;
font-size: 12px;
background: var(--yazar-background);
text-decoration: none;
padding: 2px 13px 2px 5px;
transition: 0.5s;
}
.yazar:hover {
    background: var(--yazar-hover);
}
.yazar a{
display: inline-block;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
position: relative;
left: 5px;
top: 1px;
}
.yazar span{
display: inline-block;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
position: relative;
left: 5px;
top: 3px;
}
.kadin {
color: var(--kadin-color)
}
.kadin:hover{
color: var(--kadin-hover)
}
.yazar img {
margin-top: -8px;
}

.tarih {
width: 100%;
text-align: right;
display:table;
z-index: 8;
margin-left: 5px;
color: var(--tarih);
font-weight: normal;
font-size: 12px;
text-decoration: none;
padding-right: 8px;
padding-top: 5px;
padding-bottom: 3px;
}
.basliklise {
z-index: 7;
position: relative;
text-decoration: none;
font-weight: 600;
color: var(--basliklise);
}
.basliklise:hover{
color: var(--basliklise-hover);
}
.baslikuni {
z-index: 7;
position: relative;
text-decoration: none;
font-weight: 600;
color: var(--baslikuni);
}
.baslikuni:hover{
color: var(--baslikuni-hover);
}
.baslikortak {
z-index: 7;
position: relative;
text-decoration: none;
font-weight: 600;
color: var(--baslikortak);
}
.baslikortak:hover{
color: var(--baslikortak-hover);
}
.sayfalama2 {
margin: auto;
width:100%;
display:flex;
justify-content:center;
align-items: center;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
ul.sayfalama li{
float:left;
text-decoration:none;
color:var(--sayfalama-li-color);
display:block;
}
ul.sayfalama li a{
background:var(--sayfalama-li-a-background);
text-decoration:none;
color:var(--sayfalama-li-a-color);
display:block;
padding: 0.4vw 2.5vw;
border-color: #000000;
border-style: solid;
border-width: 0 0 0 0;
}
ul.sayfalama li a:hover{
background:var(--sayfalama-li-a-hover-background);
text-decoration:none;
display:block;
padding: 0.4vw 3vw;
}
.sayfalama>.disabled>a,.sayfalama>.disabled>a:focus,.sayfalama>.disabled>a:hover,.sayfalama>.disabled>span,.sayfalama>.disabled>span:focus,.sayfalama>.disabled>span:hover{
cursor:not-allowed;
background: var(--sayfalama-disabled-background)!important;
text-decoration:none;
color: var(--sayfalama-disabled-color);
display:block;
pointer-events: none;
}
.hangisayfa{
position: relative;
overflow: hidden;
white-space: nowrap; 
text-overflow: ellipsis; /* eğer uzunsa üç nokta koy */
float:left;
display:block;
color: var(--sayfalama-li-a-color)!important;
padding: 0.4vw 1vw;
text-decoration: none;
background:var(--hangisayfa-background);
}
.geri {
border-top-left-radius: 10px;
border-bottom-left-radius: 20px;
padding: 0.3vw 1.5vw;
background: var(--sayfalama-li-a-hover-background)!important;
}
.geri:hover {
background: var(--geri-ileri-hover)!important;
}
.ileri {
border-bottom-right-radius: 20px;
border-top-right-radius: 10px;
background: var(--sayfalama-li-a-hover-background)!important;
padding: 0.3vw 1.5vw;
}
.ileri:hover {
background: var(--geri-ileri-hover)!important;
}
.boslukekle {
margin-top: 15px;
}
.bosluk {
margin-top: 20px;
}
.bosluk20px {
margin-top: 20px;
width: 100%;
}
.bosluk30px {
margin-top: 30px;
}
.kutubox {
z-index: 5;
position: relative;
margin:auto;
-webkit-animation-name: fadeIn; /* Fade in the background */
-webkit-animation-duration: 0.4s;
animation-name: fadeIn;
animation-duration: 0.4s;
}
#highlight {
background: var(--highlight-background);
border-radius: 20px;
padding: 15px 15px 5px 15px;
margin-bottom: 20px;
}
.consoleuni {
background: var(--consoleuni-background);
border-radius: 20px 20px 20px 20px;
font-size: 18px;
margin-bottom: 15px;
position: relative;
overflow: hidden;
word-wrap: break-word;
text-align:left;
line-height: 1.5!important;
padding: 15px 10px 5px 15px;
color: var(--consoleuni-color)!important;
}
.consolelise {
background: var(--consolelise-background);
border-radius: 20px 20px 20px 20px;
font-size: 18px;
margin-bottom: 15px;
position: relative;
overflow: hidden;
word-wrap: break-word;
text-align:left;
line-height: 1.5!important;
padding: 15px 10px 5px 15px;
color: var(--consolelise-color)!important;
}
.consoleortak {
background: var(--consoleortak-background);
border-radius: 20px 20px 20px 20px;
font-size: 18px;
margin-bottom: 15px;
position: relative;
overflow: hidden;
word-wrap: break-word;
text-align:left;
line-height: 1.5!important;
padding: 15px 10px 5px 15px;
color: var(--consoleortak-color)!important;
}
.linkler  {
position: relative;
color: var(--a-color);
background: var(--linkler-background);
text-decoration: none;
}
.linkler:hover {
background: var(--linkler-hover-background);
text-decoration: underline!important;
}
.linkler:visited {
color: var(--linkler-visited-color);
background: var(--linkler-visited-background);
text-decoration: none;
}
.kucul a:link {
font-size: 15px;
top: 0;
left: 0;
text-decoration: none;
}
.resim {
position: relative;
float: left;
max-width: 100px;
max-height: 100px;
margin-top: 5px;
margin-right: 15px;
margin-bottom: 3px;
border-radius: 4px;
}
.resimid {
position: relative;
float: left;
max-width: 250px;
max-height: 250px;
margin-top: 5px;
margin-right: 15px;
margin-bottom: 5px;
border-radius: 4px;
-webkit-animation-name: fadeIn; /* Fade in the background */
-webkit-animation-duration: 0.4s;
animation-name: fadeIn;
animation-duration: 0.4s;
}
#adminmodu {
position: relative;overflow: hidden;
font-size: 12px;
background-color: var(--bilgi-background);
color: var(--adminmodu-color);
padding: 10px 20px;
border-radius: 0 0 30px 30px;
margin: -15px 17px 10px 17px;
}
#adminmodu button {
color: var(--a-color);
}
#uyemodu {
position: relative;overflow: hidden;
font-size: 12px;
background-color: var(--bilgi-background);
color: var(--adminmodu-color);
padding: 10px 20px;
border-radius: 0 0 30px 30px;
margin: -15px 17px 10px 17px;
}
#uyemodu button {
color: var(--a-color);
}
#duzenle {
display: none;
border-radius: 30px;
background-color: var(--bilgi-background);
position: relative;
overflow: hidden;
padding: 10px 5px;
margin: 0px 10px;
color: var(--konsolyazi-color)
}
#duzenle a{
padding-left: 20px;
position:relative;
font-size: 18px;
}
.kutu {
z-index: 1;
position: relative;
margin:auto;
height: auto;
padding:6px;
background: var(--kutu-background);
-webkit-animation-name: fadeIn; /* Fade in the background */
-webkit-animation-duration: 0.4s;
animation-name: fadeIn;
animation-duration: 0.4s;
}
.kutu2 {
border-radius: 0 0 20px 20px;
z-index: 1;
position: relative;
margin:auto;
height: auto;
padding:6px;
background: var(--kutu-background);
-webkit-animation-name: fadeIn; /* Fade in the background */
-webkit-animation-duration: 0.4s;
animation-name: fadeIn;
animation-duration: 0.4s;
}
.konsol {
border-radius: 20px;
background: var(--konsol-background);
position: relative;
height: 40px;
text-align:left;
padding: 5px 15px 5px 17px;
color: var(--konsol-color);
min-width:99%;
max-width:99%;
margin: auto;
box-shadow: var(--konsol-box-shadow);
-webkit-appearance: none;
appearance: none;
}
.konsol:focus {
background: var(--konsol-focus-background)
}
.konsol.white {
background: var(--konsol-white-background);
}
.konsol.invalid {
background: var(--konsol-invalid-background) !important;
}
.konsol2 {
position: relative;
top: 0;
text-align:left;
padding: 10px 15px 5px 17px;
color: var(--konsol-color);
min-width:99%;
max-width:99%;
margin: auto;
background: var(--konsol-focus-background);
border:0;
min-height: 50px;
border-radius: 20px 20px 20px 20px;
box-shadow: var(--konsol-box-shadow);
-webkit-appearance: none;
appearance: none;
}
.konsol2.invalid {
background-color: var(--konsol-invalid-background);
transition: 0.5s;
}
.konsolresim {
border-radius: 20px;
background: var(--konsol-background);
position: relative;
height: 40px;
text-align:left;
    padding: 5px 15px 7px 17px;
    color: var(--konsol-color);
min-width:99%;
max-width:99%;
margin: auto;
box-shadow: var(--konsol-box-shadow);
-webkit-appearance: none;
appearance: none;
}
.konsolresim:focus {
background: var(--konsol-focus-background)
}
.buton {
border-radius: 20px;
position: relative;
width: 25%;
cursor: pointer;
display:flex;
justify-content:center;
align-items: center;
left: 74.3%;
bottom: 0;
height: 37px;
padding-bottom: 3px;
color: var(--buton-color);
background: var(--buton-background-color);
text-decoration: none;
overflow:hidden; /* Verilen genişlikten (150px) artanı gizlemesini istiyoruz */
white-space: nowrap; /* Yazıyı tek satırla sınırlandırıyoruz */
text-overflow:ellipsis; /* Yazının kesildiği yerden üç nokta vermesini sağlıyoruz*/
transition: 0.5s;
box-shadow: var(--buton-box-shadow);
}
.buton:hover {
background: var(--buton-hover-background-color);
text-decoration: none;
}
.buton:active{
box-shadow: var(--buton-active-box-shadow);
background: var(--buton-active-background-color);
transform: translateY(2px);
}
.buton:disabled {
background: var(--buton-disabled-background-color);
color: var(--buton-disabled-color);
text-decoration: none;
cursor: default;
}
.goster {
border-bottom-right-radius: 20px;
border-bottom-left-radius: 20px;
position: relative;
width: 100%;
cursor: pointer;
display:flex;
justify-content:center;
align-items: center;
height: 40px;
color: var(--goster-color);
overflow:hidden; /* Verilen genişlikten (150px) artanı gizlemesini istiyoruz */
white-space: nowrap; /* Yazıyı tek satırla sınırlandırıyoruz */
text-overflow:ellipsis; /* Yazının kesildiği yerden üç nokta vermesini sağlıyoruz*/
transition: 0.5s;
}
.konsolyazi {
position: relative;
color: var(--konsolyazi-color);
}
.konsolyazi a {
border-radius: 20px;
position: relative;
font-size: 18px;
top: 5px;
min-height: 100px;
left: 0.8em;
}

/* \\\\ GONDERİLER.PHP \\\\ */
/* //// OKUL.PHP //// */
.lise {
border-radius: 20px 20px 0 0;
height: auto;
margin: auto;
position: relative;
background-color: var(--lise-background);
color: var(--lise-color);
text-align: center;
font-size: 20px;
    padding: 10px;
}
.lise h1{
font-size: 20px;
margin: auto
}
.universite {
border-radius: 20px 20px 0 0;
height: auto;
margin: auto;
position: relative;
background-color: var(--universite-background);
color: var(--universite-color);
text-align: center;
font-size: 20px;
    padding: 10px;
}
.universite h1{
font-size: 20px;
margin: auto
}
.ortakalan {
border-radius: 20px 20px 0 0;
height: auto;
margin: auto;
position: relative;
background-color: var(--ortakalan-background);
color: var(--ortakalan-color);
text-align: center;
font-size: 20px;
    padding: 10px;
}
.ortakalan h1{
font-size: 20px;
margin: auto
}
.gerigit {
float: left;
cursor: pointer;
position: relative;
bottom: 2px;
left: -5px;
padding: 0 10px;
margin-right: 13px;
transition: 0.5s;
}
.gerigit:hover {
background-color:rgba(255,255,255,0.10); /* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! */
border-radius: 15px;
}
.iduni {
color: var(--iduni-color);
position: relative;
text-decoration: none; }
.iduni:hover {
color: var(--iduni-hover-color);
text-decoration: none; }
.bosamabu{
border-radius: 20px 20px 20px 20px;
color: var(--bosamabu-color);
background: var(--bosamabu-background-color);
width: 100%;
position: relative;
height: 0;
display: table;
text-align: center;
margin: 0 auto;
    padding: 200px 20px;
}
.sehir {
color: var(--sehir-color)!important;
display:block;
font-size: 12px;
}
.cityandstate {
display:block;
color: var(--cityandstate-color);
font-size: 12px;
}
.toplamgonderi {
color: var(--toplamgonderi-color);
font-size: 12px;
margin-bottom: 10px;
margin-top: 15px;
position: relative;
overflow: hidden;
word-wrap: break-word;
text-align:right;
padding-right: 10px;
}
.bilgilendirme {
color: var(--toplamgonderi-color);
font-size: 12px;
margin-bottom: 15px;
margin-top: 15px;
position: relative;
overflow: hidden;
word-wrap: break-word;
text-align:left;
padding-left: 10px;
padding-right: 10px;
}
/* \\\\ OKUL.PHP \\\\ */
/* //// ID.PHP //// */
.kutubox2 {
z-index: 5;
position: relative;
margin:auto;
-webkit-animation-name: fadeIn; /* Fade in the background */
-webkit-animation-duration: 0.4s;
animation-name: fadeIn;
animation-duration: 0.4s
}
#yorumlar {
position: relative;
}
.console2 {
background: var(--footer-background);
border-radius: 20px 20px 20px 20px;
font-size: 18px;
margin-bottom: 15px;
position: relative;
overflow: hidden;
word-wrap: break-word;
text-align:left;
line-height: 1.3!important;
padding: 15px 10px 5px 15px;
color: var(--console-color)!important;
}
.console2:target {
z-index: 1;
animation: orb 5s 1;
}
#yorumlar:target {
    animation: orb 5s;
}
#yorumyap:target {
    animation: orb 5s 1;
}
.consoleortak:target {
    animation: orb 5s 1;
}
.consolelise:target {
    animation: orb 5s 1;
}
.consoleuni:target {
    animation: orb 5s 1;
}
#yorumlar,#yorumyap {
    border-radius: 20px;
}
.console {
border-radius: 20px 20px 20px 20px;
font-size: 18px;
margin-bottom: 10px;
position: relative;
overflow: hidden;
word-wrap: break-word;
text-align:left;
line-height: 1.3!important;
padding-left: 15px;
padding-right: 10px;
color: var(--console-color)!important;
}
.yorumyok {
border-radius: 20px 20px 20px 20px;
position: relative;
color: var(--yorumyok-color);
background: var(--yorumyok-background);
text-align: center;
margin: 15px auto 15px;
padding: 60px 15px;
}
.yaziboyutu {
color: var(--yaziboyutu-color);
text-align: center;
}
.yaziboyutu button {
color: var(--yaziboyutu-color);
font-size: 30px;
padding: 5px;
margin: 10px;
border-radius: 20px;
}
.yaziboyutu button:active {
background-color: var(--yaziboyutu-button-active);
transform: translateY(2px);
}
.yaziboyutux {
color: var(--yaziboyutu-color);
}
#width, #height {
color: var(--yaziboyutu-color);
}
.reklamicin {
font-size: 12px;
top: -13px;
position: relative;
margin-right: 13px;
float: right;
color: var(--reklamicin-color);
}
/* \\\\ ID.PHP \\\\ */
/* //// UNIVERSITELER.PHP //// */
.listeboyut {
margin: auto;
}
#baslikegleuni {
position: relative;
    text-align: center;
    margin: 10px auto 30px;
}
#baslikegleuni a{	
border-width:5px 0 0 0;
border-style:solid solid solid solid;
border-color:#336aea;
color:#fff;
cursor: pointer;
    padding: 5px 60px 8px;
    font-size: 17px;
background: #4C7AE4;
border-radius: 20px 20px 20px 20px;
}
#baslikegleuni a:after{
z-index: -1;
width: 30px;
height:60px;
border: 0 solid transparent;
border-top: 4px solid #0B48D7;
border-radius: 0 100% 0 0;
position: absolute;
content: "";
top: 10px;
margin-left: 48px;
transform: rotate(0deg);
}
#baslikegleuni a:hover {
background: #5E86E1;
}
.basliklink3 {
color: var(--basliklink3-color);
}
.basliklink3:hover {	
color: var(--basliklink3-hover-color);
}
.basliklink3:visited {	
color: var(--basliklink3-visited-color);
}
.basliklink {	
color: var(--a-color);
}
.basliklink:hover {	
color: var(--a-hover-color);
}
.basliklink:visited {
color: var(--basliklink-visited-color);
}
#tablo {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: 100%;
-webkit-animation-name: fadeIn; /* Fade in the background */
-webkit-animation-duration: 0.4s;
animation-name: fadeIn;
animation-duration: 0.4s
}
#tablo td, #tablo th {
border: var(--tablo-border);
color: var(--basliklink3-color);
padding: 8px;
}
#tablo tr:nth-child(even){
background-color: var(--tablo--child-bg);
}
#tablo tr:hover {
background-color: var(--tablo-hover-bg);
}
#tablo th {
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: var(--basliklise);
}
.tablosayi {
color: var(--a-color)!important;
}
#tablo td:nth-child(1){
padding-left: 12px;
}
/* \\\\ UNIVERSITELER.PHP \\\\ */
/* //// LISELER.PHP //// */
#onizleme {
display: table;
text-align: center;
margin: auto auto 20px;
text-transform: capitalize;
border-radius: 30px;
padding: 0 15px;
}
#baslikeglelise {
position: relative;
    text-align: center;
    margin: 10px auto 30px;
}
#baslikeglelise a{	
border-width:5px 0 0 0;
border-style:solid solid solid solid;
border-color:#397a55;
color:#FFFFFF;
cursor: pointer;
    padding: 5px 60px 8px;
    font-size: 17px;
background: #469468;
border-radius: 20px 20px 20px 20px;
}
#baslikeglelise a:after{
z-index: -1;
width: 30px;
height:60px;
border: 0 solid transparent;
border-top: 4px solid #306547;
border-radius: 0 100% 0 0;
position: absolute;content: "";
top: 10px;
margin-left: 48px;
transform: rotate(0deg);}
#baslikeglelise a:hover {
background: #3C7F59;}
.selekt {
position: relative;
max-width: 99%;
margin: auto;
}
.selekt select {
border:0 !important;
border-radius: 20px 20px 20px 20px;
box-shadow: var(--birthday-picker-box-shadow);
position: relative;
text-align:left;
padding: 5px 10px 4px 15px;
color: var(--yazar);
min-width:100%;
max-width:100%;
margin: auto;
background: var(--selekt-color2);
min-height: 40px;
-webkit-appearance: none;
appearance: none;
}
.selekt2 select {
font-size: 12px;
border:0 !important;
border-radius: 20px 20px 20px 20px;
background: var(--birthday-picker-background);
box-shadow: var(--birthday-picker-box-shadow);
position: relative;
padding: 3px 10px;
color: var(--selekt-color);
-webkit-appearance: none;
appearance: none;
}
.selekt2 span {
font-size: 12px;
color: var(--selekt-color)!important; 
padding-left: 10px
}
.selekt3 select {
font-size: 12px;
border:0 !important;
border-radius: 20px 20px 20px 20px;
background: var(--birthday-picker-background);
box-shadow: var(--birthday-picker-box-shadow);
position: relative;
padding: 3px 10px;
margin-right: 10px;
color: var(--selekt-color);
-webkit-appearance: none;
appearance: none;
}
.selekt3 span {
font-size: 12px;
color: var(--selekt-color)!important; 
}
.selekt4 select {
z-index: 25;
font-size: 14px;
border:0 !important;
border-radius: 20px 20px 20px 20px;
background: var(--selekt-color2);
box-shadow: var(--birthday-picker-box-shadow);
position: relative;
padding-left:10px;
padding-right:10px;
color: var(--yazar);
height: 38px;
-webkit-appearance: none;
appearance: none;
}
.selekt4 span {
font-size: 14px;
color: var(--yazar)!important; 
}
.bilgi {
width: 99%;
background: var(--bilgi-background);
padding-left: 10px;
padding-top: 10px;
padding-bottom: 10px;
margin: 15px auto 10px;
border-radius: 20px 20px 20px 20px;
}
.bilgi span {
color: var(--bilgi-color);
}
#eklesonuc {
word-wrap: break-word;
padding-right: 10px;
margin-top: 5px;
margin-left: 5px;
}
#eklesonuc a {
font-size: 15px;
}
/* \\\\ LISELER.PHP \\\\ */
/* //// FOOTER //// */
.footer {
border-radius: 20px;
position:relative;
left: 50%;
transform: translate(-50%, 0);
top: 30px;
background-color: var(--footer-background);
float:left;
color: var(--footer-color);
padding: 10px;
margin-bottom: 50px;
width:100%;
height:auto;
display:flex;
justify-content:center;
align-items: center;
text-align: center;
}
/* \\\\ FOOTER \\\\ */
#soltaraf {
top: 80px;
bottom: 20px;
left: 12.5%;
height: auto;
position: fixed;
width: 350px;
padding: 20px;
border-radius: 30px;
color: var(--soltaraf-color);
background-color: var(--soltaraf-background);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

#soltaraf:hover{
    overflow-y: scroll!important;
}
#soltaraf span{
    color: var(--soltaraf-span-color);
    display: grid;
    /*place-items: center;*/
}
#soltaraf a{
    color: var(--soltaraf-a-color)!important;
}
/*#soltaraf .sayi::before{
    content: "| ";
    font-weight: 300;
}*/

#soltaraf .sayi{
    color: var(--soltaraf-sayi-color)!important;
    font-weight: bold;
}
#reklam {
    background: var(--reklam-background);
    float:left;
    color: var(--reklam-color);
    border-radius: 30px;
    width: 100%;
    height: 150px;
    position: relative;
    word-wrap: break-word;
    padding: 15px;
    text-align: center;
    margin-right: 10px;
    }
    #reklam p{
    margin: 0;
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
#reklam1 {
    margin-top: 15px;
    color: var(--reklam-color);
    background: var(--reklam-background);
    word-wrap: break-word;
    text-align: center;
    width: 100%;
    height: 150px;
    padding: 20px;
    border-radius: 30px;    
    }
    #reklam1 p{
    margin: 0;
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
#reklam2 {
    margin-top: 15px;
    color: var(--reklam-color);
    background: var(--reklam-background);
    word-wrap: break-word;
    text-align: center;
    width: 100%;
    height: 150px;
    padding: 20px;
    border-radius: 30px;    
    }
    #reklam2 p{
    margin: 0;
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
/* \\\\ KAYITOL.PHP \\\\ */
.birthday-picker{
    white-space: nowrap;
    text-align: center;
    margin-right: 5vw;
    margin-left: 5vw;
    
}
.birthday-picker select{
    color: var(--birthday-picker-input-color);
    border:0 !important;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    -webkit-appearance: none;
    appearance: none;
    box-shadow: var(--birthday-picker-box-shadow)
    
}
.birthday-picker select.invalid{
    background-color: var(--birthday-picker-invalid-background);
    transition: 0.5s;
}
.birthday-picker select,
.birthday-picker input{
    text-align:center;
    display: inline-block;
    height: 60px;
    width: 33%;
    background-color: var(--birthday-picker-background);
}
.birthday-picker  input#day,#year{
    border-radius: 20px;
    padding: 5px 15px;
    color:var(--birthday-picker-input-color);
    margin: auto;
    box-shadow: var(--birthday-picker-box-shadow)
}
label.error {
    -webkit-animation-name: fadeIn; /* Fade in the background */
    -webkit-animation-duration: 0.5s;
    animation-name: fadeIn;
    animation-duration: 0.5s;
    display: none;
    position: absolute;
    font-size: 13px;
    color: rgba(255,255,255,1.00);
    border-radius: 20px;
    padding: 4px 9px;
    background: rgba(255, 0, 0, 0.8);
    margin-top: -35px;
    margin-left: 10px;
}
label.error:after {
    content:'';
    position: absolute;
    top: 100%;
    left: 20px;
    width: 0;
    height: 0;
    border-top: solid 5px rgba(255, 0, 0, 0.8);
    border-left: solid 5px transparent;
    border-right: solid 5px transparent;
}
.e_mail {
    border-radius: 20px;
    position: relative;
    height: 40px;
    text-align:left;
    padding: 5px 15px;
    background-color: var(--birthday-picker-background);
    color:var(--birthday-picker-input-color);
    min-width:99%;
    max-width:99%;
    margin: auto;
    box-shadow: var(--birthday-picker-box-shadow)
}
/* Hide all steps by default: */
.tab {
    display: none;
}
.tab input:not(#kurallar,#day,#year) {
    border-radius: 20px;
    position: relative;
    height: 40px;
    text-align:left;
    padding: 5px 15px;
    background: var(--birthday-picker-background);
    color:var(--birthday-picker-input-color);
    min-width:99%;
    max-width:99%;
    margin: auto;
    box-shadow: var(--birthday-picker-box-shadow)
}

/* Mark input boxes that gets an error on validation: */
.tab input.invalid {
    background-color: var(--birthday-picker-invalid-background);
    transition: 0.5s;
}
.e_mail.invalid {
    background-color: var(--birthday-picker-invalid-background);
    transition: 0.5s;
}
.kayityazi {
    color: var(--birthday-picker-input-color)!important;
    margin-bottom: 10px;
    text-align: center;
    margin-top: 20px;
}
.kayitbilgi {
    position:relative;
    text-align: center; 
    padding-top: 10px;
    padding-bottom: 10px;
}
.kayitbilgi span {
    font-size: 12px;
    color: var(--uyari-color);
    
}
.kayitbutton {
    background-color: #469468;
    color: #ffffff;
    border: none;
    padding: 5px 20px;
    font-size: 17px;
    cursor: pointer;
    border-radius: 20px;
    margin-right: 5px;
}

.kayitbutton:hover {
    opacity: 0.8;
}

#prevBtn {
    background-color: #bbbbbb;
}

/* Make circles that indicate the steps of the form: */
.step {
    height: 15px;
    width: 15px;
    margin: 0 2px;
    background-color: #bbbbbb;
    border: none;
    border-radius: 50%;
    display: inline-block;
    opacity: 0.5;
}

.step.active {
    opacity: 1;
}

/* Mark the steps that are finished and valid: */
.step.finish {
    background-color: #469468;
}
#yazarresim {
    width: 20px;
    height: 20px;
    border-radius: 30px;
}
/* AYARLAR AVATARLAR */
#ayarlarresim {
    width: 50px;
    height: 50px;
    border-radius: 30px;
}
#avatars{
    position: relative;
    display: inline;
}
.avatars > input{
    display: none;
}
.avatars > input + img{
    cursor: pointer;
    border-radius: 30px;
    margin: 3px;
    width:50px;
    height:50px;
    transition: 0.3s;
}
.avatars > input:hover + img{
    box-shadow: var(--avatars-hover-box-shadow);
}
.avatars > input:active + img{
    transform: translateY(1px);
    box-shadow: var(--avatars-active-box-shadow)
}
.avatars > input:checked + img{
    box-shadow: var(--avatars-checked-box-shadow)
}
/* AYARLAR AVATARLAR */
/* \\\\ REKLAM \\\\ */
.uyari {
    margin-left: 1%; 
    font-size: 12px; 
    float: left; 
    color: var(--uyari-color);
    padding-top: 5px
}
#kurallar {
display: inline;
margin-left: 1%;
margin-bottom: 15px;
margin-top: 5px;
font-size: 12px;

}
.kurallabel {
    color: var(--kurallar-color);
}
 .button-wrap {
	 position: relative;
     margin: 0 15px 15px 0.5%;
}
 .button-label {
    padding: 2px 2.5vw;
    margin-top: 5px;
    background: var(--button-label-background);
    box-shadow: var(--button-label-box-shadow);
    color: var(--button-label-color);
    display: inline-block;
    cursor: pointer;
    border-radius: 20px;
    transition: 0.3s;
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
}
 .button-label h1 {
	 padding-top: 5px;
	 font-size: 1em;
	 font-weight: 400;
}
 .button-label:hover {
	 background: var(--button-label-hover-background);
	 color: var(--button-label-hover-color);
}
 .button-label:active {
	 transform: translateY(1px);
	 box-shadow: inset 0 -1px 0 var(--button-label-hover-background);
}
 #genel-button:checked + .button-label {
	 box-shadow: var(--genel-button-box-shadow);
	 color: var(--genel-button-color);
}
 #genel-button:checked + .button-label:hover {
    color: var(--genel-button-color);
}
 #bilgi-button:checked + .button-label {
	 box-shadow: var(--bilgi-button-box-shadow);
	 color: var(--genel-button-color);
}
 #bilgi-button:checked + .button-label:hover {
    color: var(--genel-button-color);
}
 #soru-button:checked + .button-label {
	 box-shadow: var(--soru-button-box-shadow);
	 color: var(--genel-button-color);
}
 #soru-button:checked + .button-label:hover {
    color: var(--genel-button-color);
}
 #itiraf-button:checked + .button-label {
	 box-shadow: var(--itiraf-button-box-shadow);
	 color: var(--genel-button-color);
}
 #itiraf-button:checked + .button-label:hover {
    color: var(--genel-button-color);
}
 #ilan-button:checked + .button-label {
	 box-shadow: var(--ilan-button-box-shadow);
	 color: var(--genel-button-color);
}
 #ilan-button:checked + .button-label:hover {
    color: var(--genel-button-color);
}
 .hidden {
	 display: none;
}
.konubilgi {
	overflow: visible!important;
	position: absolute;
	right: -1px;
    top: -1px;
	border-radius: 0 0 0 30px;
	padding: 0 0.7em 0.05em 1em;
    margin-left: 3px;
	font-weight: 400;
	font-size: 12px;
	color: var(--konubilgi-color)!important;
	box-shadow: var(--konubilgi-box-shadow)
}
.konusoru {
	position: absolute;
	right: -1px;
    top: -1px;
	border-radius: 0 0 0 30px;
	padding: 0 0.7em 0.05em 1em;
    margin-left: 3px;
	font-weight: 400;
	font-size: 12px;
	color: var(--konusoru-color)!important;
	box-shadow: var(--konusoru-box-shadow)
}
.konuitiraf {
	position: absolute;
	right: -1px;
    top: -1px;
	border-radius: 0 0 0 30px;
	padding: 0 0.7em 0.05em 1em;
    margin-left: 3px;
	font-weight: 400;
	font-size: 12px;
	color: var(--konuitiraf-color)!important;
	box-shadow: var(--konuitiraf-box-shadow)
}
.konuilan {
	position: absolute;
	right: -1px;
    top: -1px;
	border-radius: 0 0 0 30px;
	padding: 0 0.7em 0.05em 1em;
    margin-left: 3px;
	font-weight: 400;
	font-size: 12px;
	color: var(--konuilan-color)!important;
	box-shadow: var(--konuilan-box-shadow)
}
.konuozel {
	position: relative;
	float: right;
	border-radius: 20px;
	padding: 0.15em 0.5em 0.15em 0.5em;
	font-weight: 400;
	font-size: 12px;
	color: var(--konuozel-color)!important;
}
/* \\\\ SİKAYET.PHP \\\\ */
.sikayetyorumvar {
z-index: 0;
position: relative;
font-size: 30px;
color: #B0B0B0;
text-align: center;
top: -5px;
padding-left: 15px;
padding-right: 15px;
}
.sikayetbilgi {
color: #8C8C8C;
text-align: center; 
margin-top:30px;
padding-left: 15px;
padding-right: 15px;
}

.ReadMore {
    display: visible;
    color: var(--readmore-color)!important;
    font-weight: 500;
    cursor: pointer;
}
.ReadMore:hover {
    color: var(--readmore-hover-color)!important;
}

/* \\\\ PROFİL.PHP \\\\ */
#profilkutu {
    background: var(--footer-background);
    border-radius: 20px 20px 20px 20px;
    position: relative;
    overflow: hidden;
    word-wrap: break-word;
    text-align:left;
    line-height: 1.3!important;
    padding: 15px;
}
.profilresmi {
    width: 100px;
    height: 100px;
    border-radius: 30px;
    margin-right: 15px;
    float: left;
}
.kullaniciadi {
    position: relative;
    top: 5px;
    font-size: 20px;
    display:inline-table;
    min-width: 120px;
}
.isim {
    position: relative;
    display:inline-table;
    top: -2px;
    margin-left: 5px;
    font-size: 15px;
    color: var(--adminmodu-color);
    background-color: var(--hosgeldin-background);
    padding: 0.25em 0.5em 0.15em 0.5em;
    border-radius: 20px;
}
.aciklama {
    display:table-cell;
    position: relative;
    word-wrap: break-word;
    padding-top: 5px;
    font-size: 15px;
    min-width: 250px;
    color: var(--aciklama-color);
}
.aciklamabos {
    position: relative;
    top: 5px;
    width: 100%;
    height: 60px;
    border-radius: 20px;
    border: var(--aciklamabos-border)
}
.instagrambos {
    position: relative;
    float: right;
    top: 2px;
    margin-left: 8px;
    width: 25px;
    height: 25px;
    border-radius: 20px;
    border: var(--instagrambos-border)
}
.gonderiler {
    margin-left: 10px;
    font-size: 20px;
    color: var(--gonderiler-color);
}
.instagram {
    overflow: visible!important;
    position: relative;
    margin-left: 8px;
    float: right;
    border-radius: 20px;
    padding: 0.05em 0.2em 0.05em 0.2em;
    font-weight: 400;
    font-size: 20px;
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.twitter {
    overflow: visible!important;
    margin-left: 8px;
    position: relative;
    float: right;
    border-radius: 20px;
    padding: 0.05em 0.2em 0.05em 0.2em;
    font-weight: 400;
    font-size: 19px;
    color: #3daaee !important;
}


/* \\\\ LOADING \\\\ */
.lds-ellipsis {
    display: inline-block;
    position: relative;
    width: 15px;
    height: 15px;
  }
  .lds-ellipsis div {
    position: absolute;
    top: 7px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgb(165, 165, 165);
    animation-timing-function: cubic-bezier(0, 1, 1, 0);
  }
  .lds-ellipsis div:nth-child(1) {
    left: 8px;
    animation: lds-ellipsis1 0.6s infinite;
  }
  .lds-ellipsis div:nth-child(2) {
    left: 8px;
    animation: lds-ellipsis2 0.6s infinite;
  }
  .lds-ellipsis div:nth-child(3) {
    left: 32px;
    animation: lds-ellipsis2 0.6s infinite;
  }
  .lds-ellipsis div:nth-child(4) {
    left: 56px;
    animation: lds-ellipsis3 0.6s infinite;
  }
  @keyframes lds-ellipsis1 {
    0% {
      transform: scale(0);
    }
    100% {
      transform: scale(1);
    }
  }
  @keyframes lds-ellipsis3 {
    0% {
      transform: scale(1);
    }
    100% {
      transform: scale(0);
    }
  }
  @keyframes lds-ellipsis2 {
    0% {
      transform: translate(0, 0);
    }
    100% {
      transform: translate(24px, 0);
    }
  }