.image-containerDeneme {
    position: relative; /* Div'i konumlandırmak için gerekli */
    display: inline-block; /* Resmin etrafında dikey ve yatay düzenleme */
}
    
.youtube-icon {
    position: absolute;
    bottom: 10px; /* Div'in altından 10px içeride */
    left: 10px; /* Div'in solundan 10px içeride */
    width: 30px; /* YouTube ikonunun boyutunu ayarlayabilirsiniz */
    height: 30px;
    display: inline-block;
}

.youtube-icon img {
    width: 100%;
    height: 100%;
}

.game-grid-container {
    display: grid;
    grid-template-columns: 2fr 10fr 1fr 10fr 1fr 10fr 2fr 10fr 1fr 10fr 1fr 10fr 2fr 10fr 1fr 10fr 1fr 10fr 2fr 20fr;
    grid-template-rows: 20fr 2fr 10fr 1fr 10fr 1fr 10fr 2fr 10fr 1fr 10fr 1fr 10fr 2fr 10fr 1fr 10fr 1fr 10fr 2fr;
}

.demo-language-icon {
    width: 1rem;
    height: 1rem;
    background-color: var(--bs-body-color);
    mask-image: url("../images/language4.svg");
    -webkit-mask-image: url("../images/language4.svg");
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
}
.IsaretHover {
    cursor: pointer;
}
.divStandart {
    background-color: #f2f2f2 !important;
    border: #cccccc solid 1px !important;
    border-radius: 0.75rem !important;
    box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.1), 0px 2px 4px -2px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.2s ease-in-out;
}

 
.divStandart:hover {
        box-shadow: 0px 20px 25px -5px rgba(0, 0, 0, 0.1), 0px 8px 10px -6px rgba(0, 0, 0, 0.1);
    }
.kapat-purple {
    color: purple;
    font-size: 30px;
}
.dxWindowArkaPlan {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.1); /* Yarı saydam arka plan */
    z-index: 9998; /* DXWindow'ın altındaki z-index. DXWindow'ın diğer bileşenlerin üzerinde görünmesini sağlıyor. */
}

.language-settings:hover .demo-language-icon {
    background-color: currentColor;
}
.demo-user-icon {
    width: 1rem;
    height: 1rem;
    background-color: var(--bs-body-color);
    mask-image: url("../images/UserProfile.svg");
    -webkit-mask-image: url("../images/UserProfile.svg");
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
}
.user-settings:hover .demo-user-icon {
    background-color: currentColor;
}

.demo-close-icon {
    width: 1rem;
    height: 1rem;
    background-color: var(--bs-body-color);
    mask-image: url("../images/close.svg");
    -webkit-mask-image: url("../images/close.svg");
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
}
.close-settings:hover .demo-close-icon {
    background-color: currentColor;
}

.demo-free-icon {
    width: 1rem;
    height: 1rem;
    background-color: var(--bs-body-color);
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
}

.free-settings:hover .demo-free-icon {
    background-color: currentColor;
}

.blazor_topnov {
    position: relative;
    overflow: hidden;
}
.blazor_leftnov {
    position: relative;
    float:left;
    overflow: hidden;
}
.blazor_rightnov {
    position: relative;
    float: right; 
    overflow: hidden;
}
.blazor_centertnov {
    position: relative;
    overflow: hidden;
}

.material-icons {
    vertical-align: -14%
}

/* The Modal (background) */
.modal-Blazor-2 {
    display: block; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 20000; /* Sit on top */
    padding-top: 20px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.0); /* Black w/ opacity */
}
/* Modal Content */
.modal-content-Blazor-2 {
    position: relative;
    background-color: #6e6e6e;
    margin: auto;
    padding: 0px;
    border: 1px solid #888;
    width: 40%;
    border-radius: 8px;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
}
.modal-content-Blazor-2-w1 {
    width: 1%;
}

.modal-content-Blazor-2-w2 {
    width: 2%;
}

.modal-content-Blazor-2-w3 {
    width: 3%;
}

.modal-content-Blazor-2-w4 {
    width: 4%;
}

.modal-content-Blazor-2-w5 {
    width: 5%;
}

.modal-content-Blazor-2-w6 {
    width: 6%;
}

.modal-content-Blazor-2-w7 {
    width: 7%;
}

.modal-content-Blazor-2-w8 {
    width: 8%;
}

.modal-content-Blazor-2-w9 {
    width: 9%;
}

.modal-content-Blazor-2-w10 {
    width: 10%;
}

.modal-content-Blazor-2-w11 {
    width: 11%;
}

.modal-content-Blazor-2-w12 {
    width: 12%;
}

.modal-content-Blazor-2-w13 {
    width: 13%;
}

.modal-content-Blazor-2-w14 {
    width: 14%;
}

.modal-content-Blazor-2-w15 {
    width: 15%;
}

.modal-content-Blazor-2-w16 {
    width: 16%;
}

.modal-content-Blazor-2-w17 {
    width: 17%;
}

.modal-content-Blazor-2-w18 {
    width: 18%;
}

.modal-content-Blazor-2-w19 {
    width: 19%;
}

.modal-content-Blazor-2-w20 {
    width: 20%;
}

.modal-content-Blazor-2-w21 {
    width: 21%;
}

.modal-content-Blazor-2-w22 {
    width: 22%;
}

.modal-content-Blazor-2-w23 {
    width: 23%;
}

.modal-content-Blazor-2-w24 {
    width: 24%;
}

.modal-content-Blazor-2-w25 {
    width: 25%;
}

.modal-content-Blazor-2-w26 {
    width: 26%;
}

.modal-content-Blazor-2-w27 {
    width: 27%;
}

.modal-content-Blazor-2-w28 {
    width: 28%;
}

.modal-content-Blazor-2-w29 {
    width: 29%;
}

.modal-content-Blazor-2-w30 {
    width: 30%;
}

.modal-content-Blazor-2-w31 {
    width: 31%;
}

.modal-content-Blazor-2-w32 {
    width: 32%;
}

.modal-content-Blazor-2-w33 {
    width: 33%;
}

.modal-content-Blazor-2-w34 {
    width: 34%;
}

.modal-content-Blazor-2-w35 {
    width: 35%;
}

.modal-content-Blazor-2-w36 {
    width: 36%;
}

.modal-content-Blazor-2-w37 {
    width: 37%;
}

.modal-content-Blazor-2-w38 {
    width: 38%;
}

.modal-content-Blazor-2-w39 {
    width: 39%;
}

.modal-content-Blazor-2-w40 {
    width: 40%;
}

.modal-content-Blazor-2-w41 {
    width: 41%;
}

.modal-content-Blazor-2-w42 {
    width: 42%;
}

.modal-content-Blazor-2-w43 {
    width: 43%;
}

.modal-content-Blazor-2-w44 {
    width: 44%;
}

.modal-content-Blazor-2-w45 {
    width: 45%;
}

.modal-content-Blazor-2-w46 {
    width: 46%;
}

.modal-content-Blazor-2-w47 {
    width: 47%;
}

.modal-content-Blazor-2-w48 {
    width: 48%;
}

.modal-content-Blazor-2-w49 {
    width: 49%;
}

.modal-content-Blazor-2-w50 {
    width: 50%;
}

.modal-content-Blazor-2-w51 {
    width: 51%;
}

.modal-content-Blazor-2-w52 {
    width: 52%;
}

.modal-content-Blazor-2-w53 {
    width: 53%;
}

.modal-content-Blazor-2-w54 {
    width: 54%;
}

.modal-content-Blazor-2-w55 {
    width: 55%;
}

.modal-content-Blazor-2-w56 {
    width: 56%;
}

.modal-content-Blazor-2-w57 {
    width: 57%;
}

.modal-content-Blazor-2-w58 {
    width: 58%;
}

.modal-content-Blazor-2-w59 {
    width: 59%;
}

.modal-content-Blazor-2-w60 {
    width: 60%;
}

.modal-content-Blazor-2-w61 {
    width: 61%;
}

.modal-content-Blazor-2-w62 {
    width: 62%;
}

.modal-content-Blazor-2-w63 {
    width: 63%;
}

.modal-content-Blazor-2-w64 {
    width: 64%;
}

.modal-content-Blazor-2-w65 {
    width: 65%;
}

.modal-content-Blazor-2-w66 {
    width: 66%;
}

.modal-content-Blazor-2-w67 {
    width: 67%;
}

.modal-content-Blazor-2-w68 {
    width: 68%;
}

.modal-content-Blazor-2-w69 {
    width: 69%;
}

.modal-content-Blazor-2-w70 {
    width: 70%;
}

.modal-content-Blazor-2-w71 {
    width: 71%;
}

.modal-content-Blazor-2-w72 {
    width: 72%;
}

.modal-content-Blazor-2-w73 {
    width: 73%;
}

.modal-content-Blazor-2-w74 {
    width: 74%;
}

.modal-content-Blazor-2-w75 {
    width: 75%;
}

.modal-content-Blazor-2-w76 {
    width: 76%;
}

.modal-content-Blazor-2-w77 {
    width: 77%;
}

.modal-content-Blazor-2-w78 {
    width: 78%;
}

.modal-content-Blazor-2-w79 {
    width: 79%;
}

.modal-content-Blazor-2-w80 {
    width: 80%;
}

.modal-content-Blazor-2-w81 {
    width: 81%;
}

.modal-content-Blazor-2-w82 {
    width: 82%;
}

.modal-content-Blazor-2-w83 {
    width: 83%;
}

.modal-content-Blazor-2-w84 {
    width: 84%;
}

.modal-content-Blazor-2-w85 {
    width: 85%;
}

.modal-content-Blazor-2-w86 {
    width: 86%;
}

.modal-content-Blazor-2-w87 {
    width: 87%;
}

.modal-content-Blazor-2-w88 {
    width: 88%;
}

.modal-content-Blazor-2-w89 {
    width: 89%;
}

.modal-content-Blazor-2-w90 {
    width: 90%;
}

.modal-content-Blazor-2-w91 {
    width: 91%;
}

.modal-content-Blazor-2-w92 {
    width: 92%;
}

.modal-content-Blazor-2-w93 {
    width: 93%;
}

.modal-content-Blazor-2-w94 {
    width: 94%;
}

.modal-content-Blazor-2-w95 {
    width: 95%;
}

.modal-content-Blazor-2-w96 {
    width: 96%;
}

.modal-content-Blazor-2-w97 {
    width: 97%;
}

.modal-content-Blazor-2-w98 {
    width: 98%;
}

.modal-content-Blazor-2-w99 {
    width: 99%;
}

.modal-content-Blazor-2-w100 {
    width: 100%;
}


.modal-content-Blazor-2-animation {
    position: relative;
    background-color: #fefefe;
    margin: auto;
    padding: 0;
    border: 3px solid #888;
    width: 50%;
    border-radius: 3px;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    -webkit-animation-name: animatetop;
    -webkit-animation-duration: 0.4s;
    animation-name: animatetop;
    animation-duration: 0.4s
}

/* Add Animation */
@-webkit-keyframes animatetop {
    from {
        top: -300px;
        opacity: 0
    }

    to {
        top: 0;
        opacity: 1
    }
}

@keyframes animatetop {
    from {
        top: -300px;
        opacity: 0
    }

    to {
        top: 0;
        opacity: 1
    }
}

/* The Close Button */
.close-Blazor-2 {
    color: white;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close-Blazor-2:hover,
.close-Blazor-2:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

.modal-header-Blazor-2 {
    padding: 2px 16px;
    background-color: #4A227A;
    color: lightgray;
    border-top-left-radius:8px;
    border-top-right-radius: 8px;
}

.modal-body-Blazor-2 {
    padding: 2px 16px;
}
.modal-body-Blazor-SubBody {
    padding: 3px 6px 3px 6px;
}
.modal-subbody-Blazor {
    padding: 0px;
    margin: 0px -12px 0px -12px;
}
.modal-footer-Blazor-2 {
    padding: 8px;
    background-color: transparent;
    color: white;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    text-align:center;
}

/* The Modal (background) */
.modal-Blazor {
    position: fixed; /* Stay in place */
    z-index: 2000 !important; /* Sit on top */
    padding-top: 10px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: transparent; /* Fallback color */
    opacity:1.0; /* Black w/ opacity */
}

/* Modal Content */
.modal-content-Blazor {
    background-color: white;
    margin: auto;
    padding: 10px;
    border: 1px solid #888;
    width: 50%;
}

/* The Close Button */
.close-Blazor {
    color: #aaaaaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

    .close-Blazor:hover,
    .close-Blazor:focus {
        color: #000;
        text-decoration: none;
        cursor: pointer;
    }