@keyframes fadeIn {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes fadeInUp {
    from {
        transform: translate3d(0, 20px, 0)
    }

    to {
        transform: translate3d(0, 0, 0);
        opacity: 1
    }
}

@keyframes fadeInDown {
    from {
        transform: translate3d(0, -20px, 0)
    }

    to {
        transform: translate3d(0, 0, 0);
        opacity: 1
    }
}

.fadeInDown {
    opacity: 0;
    animation-name: fadeInDown;
    -o-animation-name: fadeInDown;
    -moz-animation-name: fadeInDown;
    -webkit-animation-name: fadeInDown;
    animation-fill-mode: both;
    -o-animationn-fill-mode: both;
    -moz-animationn-fill-mode: both;
    -webkit-animationn-fill-mode: both;
}

.fadeInUp {
    opacity: 0;
    animation-name: fadeInUp;
    -o-animation-name: fadeInUp;
    -moz-animation-name: fadeInUp;
    -webkit-animation-name: fadeInUp;
    animation-fill-mode: both;
    -o-animationn-fill-mode: both;
    -moz-animationn-fill-mode: both;
    -webkit-animationn-fill-mode: both;
}

.fadeIn {
    opacity: 0;
    animation-name: fadeInUp;
    -o-animation-name: fadeInUp;
    -moz-animation-name: fadeInUp;
    animation-fill-mode: both;
    -o-animationn-fill-mode: both;
    -moz-animationn-fill-mode: both;
    -webkit-animationn-fill-mode: both;
}

.delay05 {
    animation-delay: 0.5s;
    -o-animation-delay: 0.5s;
    -moz-animation-delay: 0.5s;
    -webkit-animation-delay: 0.5s;
}

.delay1 {
    animation-delay: 1s;
    -o-animation-delay: 1s;
    -moz-animation-delay: 1s;
    -webkit-animation-delay: 1s;
}

.delay2 {
    animation-delay: 2s;
    -o-animation-delay: 2s;
    -moz-animation-delay: 2s;
    -webkit-animation-delay: 2s;
}

.duration01 {
    animation-duration: 0.1s;
    -o-animation-duration: 0.1s;
    -moz-animation-duration: 0.1s;
    -webkit-animation-duration: 0.1s;
}

.duration03 {
    animation-duration: 0.3s;
    -o-animation-duration: 0.3s;
    -moz-animation-duration: 0.3s;
    -webkit-animation-duration: 0.3s;
}

.duration1 {
    animation-duration: 1s;
    -o-animation-duration: 1s;
    -moz-animation-duration: 1s;
    -webkit-animation-duration: 1s;
}

.stats {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: unset !important;
}

.value {
    display: flex;
    align-items: center;
    justify-content: center;
}


hr {
    height: 2px;
}


/*Bu İhaleyi Bir Daha Gösterme & Geri Al*/

.show-content {
    opacity: 1 !important;
}

.hide-content {
    opacity: 0 !important;
}

.show-undo {
    opacity: 1 !important;
    z-index: 9 !important;
}

.hide-undo {
    opacity: 0 !important;
}

@keyframes removeResultAnimation {
    0% {
        max-height: 600px;
        opacity: 1;
        display: block;
        max-height: 148px;
        margin-bottom: 32px;
    }

    80% {
        max-height: 0;
        opacity: 0;
        min-height: 0;
        margin-bottom: 0;
    }

    100% {
        margin-bottom: 0;
        max-height: 0;
        opacity: 0;
        min-height: 0;
        display: none;
    }
}

.remove-result {
    max-height: 400px;
    animation-name: removeResultAnimation;
    animation-duration: 1s;
    animation-delay: 4s;
    animation-timing-function: ease;
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
}
.remove-result-goster {
    max-height: 400px;
    animation-name: removeResultAnimation;
    animation-delay: 1s;
    animation-timing-function: ease;
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
}

/* BU İHALETİ GİZLEDİKLERİMDEN ÇIKART */

.show-again {
    min-height: 0;
    height: 0;
    opacity: 0;
    transition: 0.3s;
}

/* İHALE ARAMA SONUÇALRI LOADER */
.loader-content {
    position: absolute;
    left: 50%;
    bottom: 0;
    margin: 0;
    transform: translate(-50%, 144%);
    color: rgb(52 149 177);
    font-family: Arial, sans-serif;
}

.loader-line-mask {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 100px;
    height: 200px;
    margin-left: -100px;
    margin-top: -100px;
    overflow: hidden;
    transform-origin: 100px 100px;
    -webkit-mask-image: -webkit-linear-gradient(top, #000000, rgb(0 0 0));
    animation: rotate 1.2s infinite linear;
}

.loader-line-mask .loader-line {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    box-shadow: inset 9px 20px 0px -16px rgb(163 36 70 / 74%);
}

.loader-logo {
    display: flex;
    flex-wrap: wrap;
    width: 150px;
}

@keyframes loaderLogoTopLeft {
    0% {
        top: 10px;
        left: 4px;
    }

    25% {
        top: 37px;
        left: 25px;
    }

    75% {
        top: 37px;
        left: 25px;
    }

    100% {
        top: 10px;
        left: 4px;
    }
}

@keyframes loaderLogoTopRight {
    0% {
        top: 24px;
        left: 121px;
    }

    25% {
        top: 37px;
        left: 100px;
    }

    75% {
        top: 37px;
        left: 100px;
    }

    100% {
        top: 24px;
        left: 121px;
    }
}

@keyframes loaderLogoBotLeft {
    0% {
        top: 120px;
        left: 4px;
    }

    25% {
        left: 25px;
        top: 99px;
    }

    75% {
        left: 25px;
        top: 99px;
    }

    100% {
        top: 120px;
        left: 4px;
    }
}

@keyframes loaderLogoBotRight {
    0% {
        left: 121px;
        top: 121px;
    }

    25% {
        left: 100px;
        top: 99px;
    }

    75% {
        left: 100px;
        top: 99px;
    }

    100% {
        left: 121px;
        top: 121px;
    }
}


.loader-circle {
    position: absolute;
    left: calc(50% - 100px);
    top: calc(50% - 150px);
    width: 200px;
    height: 200px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.loader-circle-sonucDiv {
    position: relative;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.loader-logo img {
    width: 75px;
    position: absolute;
}

.loader-logo img:nth-child(1) {
    top: 4px;
    left: 0px;
    animation-name: loaderLogoTopLeft;
    animation-delay: .1s;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    animation-fill-mode: forwards;
}

.loader-logo img:nth-child(2) {
    top: 24px;
    left: 121px;
    animation-name: loaderLogoTopRight;
    animation-delay: 0.3s;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    animation-fill-mode: forwards;
}

.loader-logo img:nth-child(3) {
    top: 120px;
    left: 4px;
    animation-name: loaderLogoBotLeft;
    animation-delay: .6s;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    animation-fill-mode: forwards;
}

.loader-logo img:nth-child(4) {
    left: 121px;
    top: 121px;
    animation-name: loaderLogoBotRight;
    animation-delay: .75s;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    animation-fill-mode: forwards;
}

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

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

@keyframes gloving-buttons {
    0% {
        background: #4f23b9;
        box-shadow: 0 0 4px 1px transparent;

    }

    50% {
        background: #7e57dc;
        box-shadow: 0 0 13px 12px #ccbbf4
    }

    100% {
        background: #4f23b9;
        box-shadow: 0 0 4px 1px transparent;
    }
}

#header .loader-circle {
    display: none
}

/* header animation css*/
    @keyframes navLogoTopLeft {
        0% {
            top: 16px;
            left: 25px;
        }

        25% {

            top: 0px;
            left: 14px;
        }

        50% {
            top: 16px;
            left: 25px;
        }

        75% {
            top: 16px;
            left: 25px;
        }

        100% {
            top: 16px;
            left: 25px;
        }
    }

    @keyframes navLogoTopRight {
        0% {
            top: 15.5px;
            left: 49px;
        }

        25% {

            top: 5px;
            left: 53px;
        }

        50% {
            top: 15.5px;
            left: 49px;
        }

        75% {
            top: 15.5px;
            left: 49px;
        }

        100% {
            top: 15.5px;
            left: 49px;
        }
    }

    @keyframes navLogoBotLeft {
        0% {
            left: 25px;
            top: 36px;
        }

        25% {
            top: 40px;
            left: 20px;
        }

        50% {
            left: 25px;
            top: 36px;
        }

        75% {
            left: 25px;
            top: 36px;
        }

        100% {
            left: 25px;
            top: 36px;
        }
    }

    @keyframes navLogoBotRight {
        0% {
            left: 49px;
            top: 36px;
        }

        25% {
            top: 40px;
            left: 53px;
        }

        50% {
            left: 49px;
            top: 36px;
        }

        75% {
            left: 49px;
            top: 36px;
        }

        100% {
            left: 49px;
            top: 36px;
        }
    }

    #header .loader-logo {
        width: unset !important;
    }

    #header .loader-circle {
        left: -23px;
        top: calc(50% - 38px);
        width: 76px;
        height: 76px;
        overflow: hidden;
        display: block !important;
        animation: headerOpacity 5s ease 0.1s 1 normal forwards; 

    }

    #header .loader-logo img {
        width: 25px !important;
    }

    #header .loader-logo img:nth-child(1) {
        animation: navLogoTopLeft 5s ease 0.1s 1 normal forwards;

    }

    #header .loader-logo img:nth-child(2) {
        animation: navLogoTopRight 5s ease 0.1s 1 normal forwards;

    }

    #header .loader-logo img:nth-child(3) {
        animation: navLogoBotLeft 5s ease 0.1s 1 normal forwards;

    }

    #header .loader-logo img:nth-child(4) {
        animation: navLogoBotRight 5s ease 0.1s 1 normal forwards;

    }

    .logged-in h1 {
        position: relative;
        left: 45px;
    }


.gloving-buttons {
    animation-name: gloving-buttons;
    animation-delay: 1s;
    animation-duration: 1s;
    animation-iteration-count: 1;
}


@keyframes existWord {
    0% {
        background: #5b1399;
    }

    25% {
        background: #eb1212;
    }

    50% {
        background: #a72b2b;
    }

    75% {
        background: #eb1212;
    }

    100% {
        background: #5b1399;
    }
}

@keyframes extractExistWord {
    0% {
        background: #81054b;
    }

    25% {
        background: #eb1212;
    }

    50% {
        background: #a72b2b;
    }

    75% {
        background: #eb1212;
    }

    100% {
        background: #81054b;
    }
}

.exist-word {
    animation-name: existWord;
    animation-duration: 0.6s;
}

.extract .exist-word {
    animation-name: extractExistWord;
}

.loader-circle {
    opacity: 0;
    animation: loaderOpacity 5s ease 0.1s infinite normal forwards;
}

@keyframes loaderOpacity {
    0% {
        opacity: 0;
    }

    1% {
        opacity: 0;
    }

    40% {
        opacity: 1;
    }

    60% {
        opacity: 1;
    }

    82% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

@keyframes headerOpacity {
    0% {
        opacity: 0;
    }

    1% {
        opacity: 0;
    }

    40% {
        opacity: 1;
    }

    60% {
        opacity: 1;
    }

    82% {
        opacity: 1;
    }

    100% {
        opacity: 1;
    }
}