@import url('https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap');


            .container {
                position: relative;
                width: 400px;
                height: 400px;
                display: flex;
                justify-content: center;
                align-items: center;
                margin: 40px auto;
            }
            .container .spinBtn {
                position: absolute;
                width: 80px;
                height: 80px;
                background: #fff;
                border-radius: 50%;
                z-index: 10;
                display: flex;
                justify-content: center;
                align-items: center;
                font-weight: 700;
                color: #333;
                letter-spacing: 0.1em;
                border: 4px solid rgba(0, 0, 0, 0.75);
                cursor: pointer;
                user-select: none;
            }
            .container .spinBtn::before {
                content: '';
                position: absolute;
                top: -28px;
                width: 50px;
                height: 40px;
                background: #fff;
                clip-path: polygon(50% 0%, 15% 100%, 85% 100%);
            }
            .container .wheel {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: #333;
                border-radius: 50%;
                overflow: hidden;
                box-shadow: 0 0 0 5px #333, 0 0 0 15px #fff, 0 0 0 18px #111;
                transition: transform 5s ease-in-out;
            }
            .container .wheel .number {
                position: absolute;
                width: 50%;
                height: 50%;
                transform-origin: bottom right;
                clip-path: polygon(0 0, 56% 0, 100% 100%, 0 56%);
                display: flex;
                justify-content: center;
                align-items: center;
                user-select: none;
                cursor: pointer;
            }
            .container .wheel .number span {
                position: absolute;
                left: 22%;
                top: 56%;
                transform: translate(-50%, -50%) rotate(300deg);
                font-size: 1em;
                font-weight: 600;
                color: #fff;
                text-shadow: 2px 3px 2px rgba(0, 0, 0, 0.15);
                text-align: center;
                width: 100%;
            }

            .wheel {
                rotate: 60deg;
            }

            .wheel .number:last-child {
                clip-path: polygon(0 20%, 0 55%, 100% 100%);
            }
            .wheel .number:first-child {
                clip-path: polygon(0 20%, 0 55%, 100% 100%);
                z-index: 1;
            }
            .wheel .number:nth-child(2) {
                clip-path: polygon(0 30%, 0 55%, 100% 100%);
                z-index: 1;
            }
            .selected {
                background-color: black !important;
            }

            .langdiv {
                position: absolute;
                bottom: -85px;
                background-color: white;
                width: 350px;
                height: 50px;
                display: inherit;
                justify-content: center;
                /*flex-direction: column;*/
                align-items: center;
                border-radius: 2%;
                user-select: none;
            }
            .button-27 {
               
                background-color: #000000;
                border: 2px solid #1A1A1A;
                border-radius: 15px;
                box-sizing: border-box;
                color: #FFFFFF;
                cursor: pointer;
                display: inline-block;
                font-size: 20px;
                font-weight: 600;
                outline: none;
                padding: 10px 25px;
                text-align: center;
                text-decoration: none;
                transition: all 300ms cubic-bezier(.23, 1, 0.32, 1);
                user-select: none;
                -webkit-user-select: none;
                touch-action: manipulation;
                width: 40%;
                will-change: transform;
                display: flex;
                justify-content: center;
                position: absolute;
                bottom: -165px;
                }

                .button-27:disabled {
                pointer-events: none;
                }

                .button-27:hover {
                box-shadow: rgba(0, 0, 0, 0.25) 0 8px 15px;
                transform: translateY(-2px);
                }

                .button-27:active {
                box-shadow: none;
                transform: translateY(0);
                }
                #harf_p
                {
                    display: none;
                    font-size: 25pt;
                    font-weight: 700;
                    background-color: wheat;
                    padding: 5px 30px;
                    border-radius: 6px;
                    margin:28px auto;
                    text-align:center;
                    width:250px;
                }
                label {
                  color: black;
                }