*{
    margin: 0%;
    padding: 0%;
    box-sizing: border-box;
}
body{
    font-family: "Rowdies", sans-serif !important;
    background: #0B0E13 !important;
}
$BebasNeue : "Bebas Neue", sans-serif;
.Bebas_Neue{
    font-family: "Bebas Neue", sans-serif;
}
a{
    text-decoration: none;
}
.gray_f{
    color: #D1D1D1 !important;
}
.yellow_f{
    color: #E5C453 !important;
}
%yellow_btn{
    border: 1px solid #FFF;
    border-radius: 5px;
    height: 70px;
    padding: 3px;
    .custome_yellow_btn{
        background: #E5C453;
        border-radius: 5px;
        color: #041C5E;
        font-size: 18px;
        padding: 5px 20px;
        transition: background-color 0.7s ease;
        border: none;
    }
    &:hover{
        .custome_yellow_btn{
            background: #FFF;
        }
    }
}
.big_title{
    font-size: 75px;
    color: #FFF;
    font-family: $BebasNeue;
    span{
        color: transparent;
        -webkit-text-stroke: 2px #E5C453;
        margin-left: 80px;
    }
}
::-webkit-scrollbar {
    width: 5px;
    height: 12px;
  }
  ::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 6px;
  }
  ::-webkit-scrollbar-thumb {
    background: #DB7607;
    border-radius: 6px;
  }
  ::-webkit-scrollbar-thumb:hover {
    background: #DB7607;
  }
//   Dixit custome create mobile view menu start
.active_mobile_menu{
    background-color: #0C3090;
}
.custome_dp_menu {
    position: absolute;
    top: 0;
    right: 0;
    height: 0;
    width: 0;
    background-color: #002484;
    z-index: 5;
    overflow: hidden;
    opacity: 0;
    transform: translate(50%, -50%);
    border-radius: 0% 0% 0% 50%;
    transition: height 0.5s ease, width 0.5s ease, opacity 0.5s ease, transform 0.5s ease, border-radius 0.5s ease;
    .menu-items {
        list-style: none;
        padding: 0;
        margin: 15px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: 100%;
        .li {
          margin: 0px 0;
          a {
            color: white;
            font-size: 16px;
            text-decoration: none;
            transition: color 0.3s ease;
          }
          .menu_list_box{
            background-color: #0C3090;
            border-radius: 10px;
            padding: 35px 0px;
            height: auto;
          }
          .admin_img_show{
            height: 50px;
            width: 50px;
            border: 1px dashed #FFF;
            border-radius: 50%;
            overflow: hidden;
            img{
                height: 48px;
                border-radius: 50%;
                width: 48px;
            }
        }
        }
        .menu_user_profile_btn{
            background-color: #0C3090;
            border-radius: 10px;
            padding: 10px 10px;
            width: 285px;
            display: flex;
            justify-content: center;
            align-items: center;
            p{
                color: #FFF;
                font-size: 16px;
            }
        }
    }
}
.custome_dp_menu.open {
    height: 100vh;
    width: 100%;
    opacity: 1;
    transform: translate(0, 0);
    border-radius: 0% 0% 0% 0%;
  }
  .menu_dp_btn{
    height: 15px;
    width: 20px;
  }
  .menu-toggle-custome {
    position: absolute;
    right: 1.5rem;
    top: 49%;
    transform: translate(0, -50%);
    height: 26px;
    width: 23px;
    &, &:hover {
      color: #FFF;
    }
  }
  .menu-toggle-bar {
    display: block;
    position: absolute;
    top: 50%;
    margin-top: -1px;
    right: 0;
    width: 100%;
    height: 2px;
    border-radius: 4px;
    background-color: #FFF;
    transition: all 0.3s ease;
    &.menu-toggle-bar--top {
      transform: translate(0, -8px);
    }
    // &.menu-toggle-bar--middle {
    // }
    &.menu-toggle-bar--bottom {
      transform: translate(0, 8px);
    }
    .nav-open & {
      &.menu-toggle-bar--top {
        transform: translate(0, 0) rotate(45deg);
      }
      &.menu-toggle-bar--middle {
        opacity: 0;
      }
      &.menu-toggle-bar--bottom {
        transform: translate(0, 0) rotate(-45deg);
      }
    }
  }

  //   Dixit custome create mobile view menu start

.custome_nav{
    position: absolute;
    width: 100%;
    background: #0024848a;
    z-index: 10;
    ul{
        li{
            span{
                color: #FFF;
                font-size: 16px;
                font-weight: 300;
            }
        }
        .tournament_dropdown{
            ul{
                background: rgba(4, 28, 94, 0.4);
                border: 1px solid #FFF;
                border-radius: 10px;
                li{
                    text-align: center;
                    hr{
                        background: #FFF;
                        height: 2px;
                    }
                    a{
                        color: #FFF;
                        font-size: 16px;
                        font-weight: 400;
                        &:hover{
                            background: none;
                        }
                    }
                }
            }
            &:hover .dropdown-menu {
                display: block;
            }
        }

    }
    .notification_dropdown{
        button{
            outline: none;
        }
        ul{
            background: rgba(4, 28, 94, 0.4);
            border: 1px solid #FFF;
            border-radius: 10px;
            li{
                a{
                    color: #FFF;
                    font-size: 18px;
                    font-weight: 400;
                    &:hover{
                        background: none;
                    }
                }
            }
        }
    }
    .custome_btn_border{
        border: 1px solid #FFF;
        border-radius: 5px;
        height: 70px;
        padding: 4px;
        .custome_login_btn{
            background: #E5C453;
            border-radius: 5px;
            color: #041C5E;
            font-size: 18px;
            padding: 5px 20px;
            transition: background-color 0.7s ease;
        }
        &:hover{
            .custome_login_btn{
                background: #FFF;
            }
        }
    }
    .after_login{
        p{
            font-size: 12px;
        }
        .custome_btn_border{
            border: 1px solid #FFF;
            border-radius: 5px;
            height: 50px;
            padding: 3px;
            .custome_login_btn{
                background: #E5C453;
                border-radius: 5px;
                color: #041C5E;
                font-size: 18px;
                padding: 5px 20px;
                transition: background-color 0.7s ease;
            }
            &:hover{
                .custome_login_btn{
                    background: #FFF;
                    color: #041C5E;
                }
            }
        }
        .admin_img_show{
            height: 50px;
            width: 50px;
            border: 1px dashed #FFF;
            border-radius: 50%;
            overflow: hidden;
            img{
                height: 48px;
                width: 48px;
                border-radius: 50%;
            }
        }
    }
}
.message_sidebar{
    margin: 100px 0px !important;
    width: 40% !important;
    border-radius: 5px 0px 0px 5px;
    overflow: hidden;
    .offcanvas-header{
        background: #171A1F;
        border-radius: 5px 0px 0px 0px;
        h5{
            color: #FFF;
            font-size: 18px;
        }
        .close_btn{
            position: absolute;
            right: 5%;
        }
    }
    .offcanvas-body{
        background-color: #0B0E13;
        border-radius: 0px 0px 0px 5px;
        h4{
            color: #FFF;
            font-size: 16px;
        }
        .msg_box{
            background-color: #171A1F;
            padding: 10px 15px;
            border-radius: 5px;
            h3{
                color: #FFF;
                font-size: 16px;
            }
            p{
                color: #D1D1D1;
                font-size: 12px;
                font-weight: 300;
            }
            .dropdown-btn {
                // padding: 6px 8px 6px 16px;
                text-decoration: none;
                font-size: 20px;
                color: #818181;
                display: block;
                border: none;
                background: none;
                width: 100%;
                text-align: left;
                cursor: pointer;
                outline: none;
              }
              .active {
                // background-color: green;
                color: white;
              }
              .dropdown-container {
                display: none;
                // background-color: #262626;
                // padding-left: 8px;
                .notification_img{
                    // height: 250px;
                    width: 100%;
                    overflow: hidden;
                }
              }
              .fa-caret-down {
                float: right;
                padding-right: 8px;
              }
        }
    }
}

.Main_Banner{
    background: url('../img/main_banner_img.webp');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding-top: 250px;
    padding-bottom: 150px;
    .container{
        position: relative;
        padding: 30px;
        .space_part{
            padding: 0px 40px;
            .title_part{
                position: relative;
                h1{
                    font-size: 75px;
                    font-family: 400;
                    color: #FFF;
                    font-family: $BebasNeue;
                    span{
                        color: transparent;
                        -webkit-text-stroke: 2px #E5C453;
                        margin: 0;
                    }
                }
            }
            p{
                color: #FFF;
                font-size: 18px;
                font-weight: 300;
            }
            .custome_btn_border{
                @extend %yellow_btn;
            }
        }
        &::before{
            position: absolute;
            content: '';
            height: 180px;
            width: 4px;
            background: #DB7607;
        }
    }
}

.Serach_Acording{
    position: relative;
    .container{
        .space_part{
            position: relative;
            padding: 0px 40px;
            .sec_title{
                h3{
                    color: #041C5E;
                    font-size: 22px;
                    background-color: #E5C453;
                    border-radius: 10px 10px 0px 0px;
                    position: relative;
                    z-index: 1;
                }
            }
            .main_banner_left_img{
                position: absolute;
                max-width: 768px;
                bottom: 77%;
                right: 3%;
            }
            .border_box{
                border: 1px solid #8A8A8A;
                border-radius: 5px;
                .serch_fild{
                    label{
                        color: #FFF;
                        font-size: 18px;
                        font-weight: 300;
                    }
                    input{
                        color: #D1D1D1;
                        border: 1px solid #8A8A8A;
                        background: transparent;
                        height: 70px;
                        border-radius: 3px;
                        font-size: 18px;
                        font-weight: 300;
                    }
                    select{
                        color: #D1D1D1;
                        border: 1px solid #8A8A8A;
                        background: transparent;
                        height: 70px;
                        border-radius: 3px;
                        font-size: 18px;
                        font-weight: 300;

                        display: block;
                        width: 100%;
                        padding: .469rem 2.4rem .469rem .8rem;
                        -moz-padding-start: calc(.8rem - 3px);
                        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3E%3C/svg%3E");
                        background-repeat: no-repeat;
                        background-position: right .8rem center;
                        background-size: 16px 12px;
                        transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
                        appearance: none;


                        option{
                            color: #D1D1D1;
                            background: #000;
                            &:hover{
                                color: #FFF;
                                background: #FFF;
                            }
                        }
                    }
                    .custome_btn_border{
                        @extend %yellow_btn;
                    }
                }
            }
        }
        &::before{
            position: absolute;
            content: '';
            height: 180px;
            width: 4px;
            background: #DB7607;
        }
    }
}

.Exclusive_Banner_Show{
    .container{
        .space_part{
            padding: 0px 40px;
            .custome_btn_border{
                @extend %yellow_btn;
            }
        }
    }
}

.Starting_Easy{
    .container{
        .space_part{
            padding: 0px 40px;
            .custome_slider{
                .custome_card{
                    background: url('../img/card_bg_image.png');
                    background-position: center;
                    background-repeat: no-repeat;
                    background-size: cover;
                    border-radius: 10px;
                    p{
                        color: #FFF;
                        font-size: 18px;
                        font-weight: 300;
                        line-height: 22px;
                    }
                }
            }
        }
        &::before{
            position: absolute;
            content: '';
            height: 180px;
            width: 4px;
            background: #DB7607;
        }
    }
}

.Explore_Virtual{
    .container{
        .space_part{
            padding: 0px 40px;
            .custome_btn_border{
                @extend %yellow_btn;
            }
            .custome_slider{
                .custome_card{
                    border: 1px solid #FFFFFF;
                    border-radius: 5px;
                    .image_box{
                        position: relative;
                        .image {
                            display: block;
                            width: 100%;
                            height: auto;
                        }
                        .overlay {
                            position: absolute;
                            top: 0;
                            bottom: 0;
                            left: 0;
                            right: 0;
                            height: 100%;
                            width: 100%;
                            opacity: 0;
                            transition: .5s ease;
                            background-image: linear-gradient(rgba(8, 58, 196, 0), rgba(4, 28, 94, 1));
                            .text {
                                color: white;
                                font-size: 20px;
                                position: absolute;
                                top: 85%;
                                left: 50%;
                                -webkit-transform: translate(-50%, -50%);
                                -ms-transform: translate(-50%, -50%);
                                transform: translate(-50%, -50%);
                                text-align: center;
                              }
                        }
                    }
                }
            }
        }
        &::before{
            position: absolute;
            content: '';
            height: 180px;
            width: 4px;
            background: #DB7607;
        }
    }
}

.Top_Tournaments{
    .container{
        .space_part{
            padding: 0px 40px;
            .custome_btn_border{
                @extend %yellow_btn;
            }
            .custome_accordion{
                border: 1px solid #FFF;
                border-radius: 5px;
                h4{
                    font-size: 18px;
                    color: #FFF;
                }
                .accordion-item{
                    background: transparent;
                    border: 1px solid #FFF;
                    border-radius: 5px;
                    button{
                        background: transparent;
                        color: #D1D1D1;
                        &::after{
                            background-image: url('../img/down_arrow.png');
                        }
                        &:focus {
                            z-index: 3;
                            outline: 0;
                            box-shadow: none !important;
                            border-bottom: 1px solid #FFF;
                        }
                    }
                    p{
                        font-size: 16px;
                        font-weight: 300;
                    }
                    h6{
                        font-size: 12px;
                        font-weight: 300;
                    }
                }
            }
        }
        &::before{
            position: absolute;
            content: '';
            height: 180px;
            width: 4px;
            background: #DB7607;
        }
    }
}

.Challenge_Accepted{
    .container{
        .space_part{
            padding: 0px 40px;

            .left_right_arrow{
                width: 78px;
            }
        }
        &::before{
            position: absolute;
            content: '';
            height: 180px;
            width: 4px;
            background: #DB7607;
        }
    }
}
.Merchandise .swiper-button-prev:after, .Merchandise .swiper-rtl .swiper-button-next:after,
.Challenge_Accepted .swiper-button-prev:after, .Challenge_Accepted .swiper-rtl .swiper-button-next:after {
    content: 'prev';
    display: none;
}
.Merchandise .swiper-button-next:after, .Merchandise .swiper-rtl .swiper-button-prev:after,
.Challenge_Accepted .swiper-button-next:after, .Challenge_Accepted .swiper-rtl .swiper-button-prev:after {
    content: 'next';
    display: none;
}
.Merchandise .swiper-button-next, .Merchandise .swiper-button-prev ,
.Challenge_Accepted .swiper-button-next, .Challenge_Accepted .swiper-button-prev {
    width: calc(var(--swiper-navigation-size) / 44* 52) !important;
}
.Merchandise .swiper-button-next.swiper-button-disabled, .Merchandise .swiper-button-prev.swiper-button-disabled,
.Challenge_Accepted .swiper-button-next.swiper-button-disabled, .Challenge_Accepted .swiper-button-prev.swiper-button-disabled {
    opacity: .8;
    cursor: auto;
    pointer-events: none;
}

.swiper-pagination-bullet{
    background: #E5C453 !important;
}

.Merchandise{
    .container{
        .space_part{
            padding: 0px 40px;

            .left_right_arrow{
                width: 65px;
            }
            .custome_card{
                .img_border{
                    border: 1px solid #FFF;
                    height: 250px;
                    border-radius: 5px;
                    .img_bg{
                        border-radius: 5px;
                        background: #1F242C;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        height: 100%;
                        overflow: hidden;
                        img{
                            max-width: 100%;
                            height: auto;
                            max-height: 100%;
                            object-fit: cover;
                        }
                    }
                }
                p{
                    font-size: 18px;
                    font-weight: 300;
                    color: #FFF;
                }
                .custome_btn_border{
                    border: 1px solid #FFF;
                    border-radius: 5px;
                    height: 52px;
                    padding: 3px;
                    .custome_yellow_btn{
                        background: #E5C453;
                        border-radius: 5px;
                        color: #041C5E;
                        font-size: 18px;
                        padding: 5px 30px;
                        transition: background-color 0.7s ease;
                    }
                    &:hover{
                        .custome_yellow_btn{
                            background: #FFF;
                        }
                    }
                }
            }
        }
        &::before{
            position: absolute;
            content: '';
            height: 180px;
            width: 4px;
            background: #DB7607;
        }
    }
}

footer{
    position: relative;
    border-top: 2px solid #434343;
    .container{
        .space_part{
            padding: 0px 40px;
            h5{
                font-size: 16px;
                color: #FFF;
                font-weight: 300;
            }
            .social_icon{
                border: 1px solid #434343;
                height: 50px;
                width: 50px;
                border-radius: 5px;
                &:hover{
                    background-color: #000;
                    svg{
                        path{
                            fill: #DB7607;
                        }
                    }
                }
            }
            p{
                font-size: 16px;
                color: #FFF;
                font-weight: 300;
            }
            #animationContainer{
                height: 83px;
                width: 150px;
            }
        }
    }
    .footer_bottom{
        border-top: 2px solid #434343;
        p{
            font-size: 16px;
            color: #888888;
            font-weight: 300;
            a{
                color: #888888;
            }
        }
    }
}

.About_Banner{
    background: url('../img/about_banner_img.webp');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding-top: 250px;
    padding-bottom: 150px;
    .container{
        position: relative;
        padding: 30px;
        .space_part{
            padding: 0px 40px;
            .title_part{
                position: relative;
                h1{
                    font-size: 75px;
                    font-family: 400;
                    color: #FFF;
                    font-family: $BebasNeue;
                    span{
                        color: transparent;
                        -webkit-text-stroke: 2px #E5C453;
                        margin: 0;
                    }
                }
            }
            p{
                color: #FFF;
                font-size: 18px;
                font-weight: 300;
            }
            .custome_btn_border{
                @extend %yellow_btn;
            }
        }
        &::before{
            position: absolute;
            content: '';
            height: 180px;
            width: 4px;
            background: #DB7607;
        }
    }
}

.About_Serach_Acording{
    position: relative;
    .container{
        .space_part{
            position: relative;
            padding: 0px 40px;
            .sec_title{
                h3{
                    color: #041C5E;
                    font-size: 22px;
                    background-color: #E5C453;
                    border-radius: 10px 10px 0px 0px;
                    position: relative;
                    z-index: 1;
                }
            }
            .main_banner_left_img{
                position: absolute;
                max-width: 370px;
                bottom: 77%;
                right: 3%;
            }
            .border_box{
                border: 1px solid #8A8A8A;
                border-radius: 5px;
                .serch_fild{
                    label{
                        color: #FFF;
                        font-size: 18px;
                        font-weight: 300;
                    }
                    input{
                        color: #D1D1D1;
                        border: 1px solid #8A8A8A;
                        background: transparent;
                        height: 70px;
                        border-radius: 3px;
                        font-size: 18px;
                        font-weight: 300;
                    }
                    select{
                        color: #D1D1D1;
                        border: 1px solid #8A8A8A;
                        background: transparent;
                        height: 70px;
                        border-radius: 3px;
                        font-size: 18px;
                        font-weight: 300;
                        display: block;
                        width: 100%;
                        padding: .469rem 2.4rem .469rem .8rem;
                        -moz-padding-start: calc(.8rem - 3px);
                        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3E%3C/svg%3E");
                        background-repeat: no-repeat;
                        background-position: right .8rem center;
                        background-size: 16px 12px;
                        transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
                        appearance: none;

                        option{
                            color: #D1D1D1;
                            background: #000;
                            &:hover{
                                color: #FFF;
                                background: #FFF;
                            }
                        }
                    }
                    .custome_btn_border{
                        @extend %yellow_btn;
                    }
                }
            }
        }
        &::before{
            position: absolute;
            content: '';
            height: 180px;
            width: 4px;
            background: #DB7607;
        }
    }
}

.Our_Gaming{
    .container{
        .space_part{
            padding: 0px 40px;
            .custome_btn_border{
                border: 1px solid #FFF;
                border-radius: 5px;
                height: 70px;
                padding: 5px;
                width: 160px;
                .custome_yellow_btn{
                    background: #FFF;
                    border-radius: 5px;
                    color: #041C5E;
                    font-size: 18px;
                    padding: 5px 20px;
                    transition: background-color 0.7s ease;
                    width: 100%;
                }
            }
            .custome_card{
                .img_border{
                    border: 1px solid #FFFFFF;
                    border-radius: 5px;
                    position: relative;
                    .game_type_btn{
                        position: absolute;
                        width: 75px;
                        height: 35px;
                        background-color: #232C89;
                        border: 1px solid #434EBB;
                        border-radius: 50px;
                        font-size: 12px;
                        font-weight: 300;
                        color: #FFF;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        right: 13px;
                        top: 13px;
                    }
                }
                .gaming_detail{
                    border: 1px solid #FFFFFF;
                    border-radius: 5px;
                    transition: background-color 0.7s ease;
                    position: relative;
                    .d_game_names{
                        font-size: 12px;
                        color: #B3B3B3;
                    }
                    h3{
                        color: #FFF;
                        font-size: 20px;
                        font-weight: 400;
                        text-decoration: underline;
                    }
                    .game_time{
                        color: #FFF;
                        font-size: 14px;
                        font-weight: 400;
                    }
                    .game_live{
                        color: #FF0000;
                        font-size: 22px;
                        font-weight: 400;
                    }
                    h4{
                        color: #E5C453;
                        font-size: 18px;
                    }
                    p{
                        color: #FFF;
                        font-size: 18px;
                    }
                }
                &:hover{
                    .gaming_detail{
                        &::after{
                            position: absolute;
                            content: '';
                            width: 100%;
                            height: 3px;
                            background: #DB7607;
                            bottom: -1px;
                            left: 0%;
                            border-radius: 2px;
                        }
                    }
                }
            }
        }
        &::before{
            position: absolute;
            content: '';
            height: 180px;
            width: 4px;
            background: #DB7607;
        }
    }
}

.Our_Gaming .nav-pills .nav-link.active, .nav-pills .show>.nav-link {
    background-color: #E5C453 !important;
}

.Tunament_details{
    margin-top: -150px;
   .container{
        .right_part{
            position: relative;
            h2{
                padding-left: 40px;
                font-size: 70px;
            }
            &::before{
                position: absolute;
                content: '';
                height: 75px;
                width: 4px;
                background: #DB7607;
            }
        }
        .all_detail{
            background: #1F242C;
            border-radius: 5px;
            p{
                color: #FFF;
                font-size: 14px;
            }
            h6{
                color: #D1D1D1;
                font-size: 14px;
            }
        }
        .custome_btn_border{
            @extend %yellow_btn;
        }
   }
}

.Epic_Gaming{
    .container{
        .space_part{
            padding: 0px 40px;
            .custome_btn_border{
                border: 1px solid #FFF;
                border-radius: 5px;
                height: 70px;
                padding: 5px;
                width: 165px;
                .custome_yellow_btn{
                    background: #FFF;
                    border-radius: 5px;
                    color: #041C5E;
                    font-size: 18px;
                    padding: 5px 0px;
                    transition: background-color 0.7s ease;
                    width: 100%;
                }
            }
            .rules_card{
                border: 1px solid #FFFFFF;
                padding: 40px;
                border-radius: 5px;
                h3{
                    color: #FFF;
                    font-size: 32px;
                }
                h4{
                    color: #FFF;
                    font-size: 18px;
                    font-weight: 300;
                }
                ul{
                    li{
                        color: #D1D1D1;
                        font-size: 18px;
                        font-weight: 300;
                    }
                }
                .hr{
                    border: 1px solid #D1D1D1 !important;
                    margin: 30px 0px;
                }
                p{
                    color: #D1D1D1;
                    font-size: 18px;
                    font-weight: 300;
                }
                .prizepool_tab{
                    .price_tag{
                        background-color: #171B22;
                        border-radius: 50px;
                        width: 215px;
                        margin: 0 auto;
                        h3{
                            font-size: 35px;
                            color: #FFF;
                            font-weight: 300;
                        }
                        p{
                            font-size: 16px;
                        }
                    }
                }
            }

        }
        &::before{
            position: absolute;
            content: '';
            height: 180px;
            width: 4px;
            background: #DB7607;
        }
    }
}

.Epic_Gaming .nav-pills .nav-link.active, .nav-pills .show>.nav-link {
    background-color: #E5C453 !important;
}



.Tournaments_Leaderboard{
        .leader_board_bg{
            position: fixed;
            width: 100%;
            height: 100vh;
            top: -100px;
        }
        .container{
        padding-top: 250px;
        padding-bottom: 150px;
        position: relative;
        .space_part{
            padding: 0px 40px;
        }
        .custome_accordion{
            border: 1px solid #FFF;
            border-radius: 5px;
            h4{
                font-size: 18px;
                color: #FFF;
            }
            .accordion-item{
                background: transparent;
                border: 1px solid #FFF;
                border-radius: 5px;
                button{
                    background: transparent;
                    color: #D1D1D1;
                    &::after{
                        background-image: url('../img/down_arrow.png');
                    }
                    &:focus {
                        z-index: 3;
                        outline: 0;
                        box-shadow: none !important;
                        border-bottom: 1px solid #FFF;
                    }
                }
                p{
                    font-size: 16px;
                    font-weight: 300;
                }
                h6{
                    font-size: 12px;
                    font-weight: 300;
                }
            }
        }
        &::before{
            position: absolute;
            content: '';
            height: 180px;
            width: 4px;
            background: #DB7607;
        }
    }
}
.Tournaments_Leaderboard #numberFilter button.active {
    border: 1px solid #FFF;
    .num{
        background-color: #E5C453;
        color: white;
        height: 44px;
        width: 44px;
        border-radius: 5px;
        font-size: 18px;
    }
}
.Tournaments_Leaderboard #numberFilter button {
    .num{
        color: white;
        height: 44px;
        width: 44px;
        border-radius: 5px;
        font-size: 18px;
    }
}

.How_Assist{
    padding-top: 250px;
    padding-bottom: 150px;
    .container{
        .space_part{
            padding: 0px 40px;
        }
        .cusome_card{
            border: 1px solid #FFF;
            padding: 60px;
            border-radius: 5px;
            h3{
                color: #FFF;
                font-size: 32px;
            }
            p{
                color: #D1D1D1;
                font-size: 18px;
                font-weight: 300;
                line-height: 35px;
                span{
                    color: #E5C453;
                }
            }
            .custome_btn_border{
                border: 1px solid #FFF;
                border-radius: 5px;
                height: 52px;
                padding: 3px;
                .custome_yellow_btn{
                    background: #E5C453;
                    border-radius: 5px;
                    color: #041C5E;
                    font-size: 18px;
                    padding: 5px 0px;
                    transition: background-color 0.7s ease;
                    width: 142px;
                    border: none;
                }
                &:hover{
                    .custome_yellow_btn{
                        background: #FFF;
                    }
                }
            }
        }
        &::before{
            position: absolute;
            content: '';
            height: 180px;
            width: 4px;
            background: #DB7607;
        }
    }
}

.Organize_Banner{
    background: url('../img/main_banner_img.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding-top: 150px;
    padding-bottom: 50px;
    .container{
        position: relative;
        padding: 30px;
        .space_part{
            padding: 0px 40px;
            .title_part{
                position: relative;
                h1{
                    font-size: 75px;
                    font-family: 400;
                    color: #FFF;
                    font-family: $BebasNeue;
                    span{
                        color: transparent;
                        -webkit-text-stroke: 2px #E5C453;
                        margin: 0;
                    }
                }
            }
            p{
                color: #FFF;
                font-size: 18px;
                font-weight: 300;
            }
            .custome_btn_border{
                border: 1px solid #FFF;
                border-radius: 5px;
                height: 70px;
                padding: 4px;
                .custome_yellow_btn{
                    background: #E5C453;
                    border-radius: 5px;
                    color: #041C5E;
                    font-size: 18px;
                    padding: 5px 0px;
                    transition: background-color 0.7s ease;
                    width: 142px;
                }
                &:hover{
                    .custome_yellow_btn{
                        background: #FFF;
                    }
                }
            }
        }
        &::before{
            position: absolute;
            content: '';
            height: 180px;
            width: 4px;
            top: 25%;
            background: #DB7607;
        }
    }
}

// LOGIN PAGE START
.Login_page{
    margin: auto 0px;
    display: flex;
    align-items: center;
    height: 100vh;
}
.slider{
    position:relative;
    width: 100%;
  }
  .items{
    position: relative;
    overflow: hidden;
    width: 100%;
    padding-bottom: 83%;
    border-radius: 20px;
    height: 100%;
  }
  .item{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity .6s ease-in-out;
    &.current{
      opacity: 1;
    }
    img{
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  .buttons{
    position:absolute;
    z-index: 1;
    top:0;
    left:0;
    width:100%;
    height:100%;
    display:flex;
    justify-content:space-between;
    align-items:center;
  }
  .button{
    width:32px;
    height:32px;
    border:none;
    outline:none;
    padding:0;
    background:transparent center no-repeat;
    cursor:pointer;
    opacity:.4;
    &.prev{
      background-image: url(https://codeisle.info/blog/wp-content/uploads/2018/12/ico_next_b32.png);
    }
    &.next{
      background-image:url(https://codeisle.info/blog/wp-content/uploads/2018/12/ico_next_b32-1.png);
    }
    &:hover{
      opacity:.8;
    }
  }

  .dots{
    position: absolute;
    bottom: -20px;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
  }
  .dot{
    display: block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: none;
    outline: none;
    padding: 0;
    background: #777;
    cursor: pointer;
    opacity: .5;
    transition: opacity .4s ease-in-out;
    &:nth-child(n+2){
      margin-left: 5px;
    }
    &.current{
      opacity: 1;
    }
  }


  .login_form{
    background-image: linear-gradient(to right, rgba(50, 50, 50, 0.8) , rgba(77, 77, 77, 0.8), rgba(50, 50, 50, 0.8), rgba(77, 77, 77, 0.8));
    padding: 30px 30px;
    border-radius: 20px;
    height: 100%;
    position: relative;
    h2{
        font-size: 34px;
        color: #FFF;
        text-transform: uppercase;
        font-family: $BebasNeue;
    }
    form{
        label{
            color: #FFF;
            font-size: 16px;
            font-weight: 300;
        }
        .form_field{
            border: 1px solid #8A8A8A;
            position: relative;
            select{
                background: transparent;
                padding: 12px 20px;
                color: #D1D1D1;
                font-size: 14px;
                font-weight: 300;
                border:1px solid #ccc;
                outline: none;
                cursor: pointer;

                display: block;
                width: 100%;
                -moz-padding-start: calc(.8rem - 3px);
                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3E%3C/svg%3E");
                background-repeat: no-repeat;
                background-position: right .8rem center;
                background-size: 16px 12px;
                transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
                appearance: none;
                option{
                    background: rgba(77, 77, 77, 0.8);
                    border: 1px solid #8A8A8A;
                    li{
                        color: red;
                    }
                    li:hover{
                        background-color: #161616 !important;
                    }
                }
            }
            input{
                background: transparent;
                padding: 12px 20px;
                color: #D1D1D1;
                font-size: 14px;
                font-weight: 300;
                border:1px solid #ccc;
                outline: none;
            }
            .password-toggle-icon {
                position: absolute;
                top: 69%;
                right: 15px;
                transform: translateY(-50%);
                cursor: pointer;
              }

              .password-toggle-icon i {
                font-size: 18px;
                line-height: 1;
                color: #7D7D7D;
                transition: color 0.3s ease-in-out;
                margin-bottom: 20px;
              }

              .password-toggle-icon i:hover {
                color: #FFF;
              }
            .fild_icon{
                position: absolute;
                right: 17px;
                top: 9px;
            }
        }
        input[type="checkbox"] {
            width: 21px;
            height: 21px;
            background-color: transparent;
            border: 2px solid #FFF;
            border-radius: 3px;
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            cursor: pointer;
            position: relative;

            &:checked {
              background-color: transparent;
              border: 2px solid #FFF;
              &::after {
                content: "";
                position: absolute;
                top: 2px;
                left: 6px;
                width: 6px;
                height: 12px;
                border: solid white;
                border-width: 0 3px 3px 0;
                transform: rotate(45deg);
              }
            }
          }
          .custome_btn_border{
            border: 1px solid #FFF;
            border-radius: 5px;
            height: 50px;
            padding: 3px;
            .custome_yellow_btn{
                background: #E5C453;
                border-radius: 5px;
                color: #041C5E;
                font-size: 16px;
                padding: 5px 30px;
                transition: background-color 0.7s ease;
            }
            &:hover{
                .custome_yellow_btn{
                    background: #FFF;
                }
            }
        }
        .or_login{
            position: relative;
            &::before{
                position: absolute;
                content: '';
                width: 36%;
                height: 1px;
                background: #8A8A8A;
                top: 50%;
            }
            &::after{
                position: absolute;
                content: '';
                width: 36%;
                height: 1px;
                background: #8A8A8A;
                top: 50%;
                right: 0%;
            }
        }
        .custome_Login_btn{
            border: 1px solid #8A8A8A;
            border-radius: 3px;
            width: 100%;
            text-align: center;
            padding: 8px 0px;
            color: #D1D1D1;
            font-size: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    }
  }

  .register_form{
    background-image: linear-gradient(to right, rgba(50, 50, 50, 0.8) , rgba(77, 77, 77, 0.8), rgba(50, 50, 50, 0.8), rgba(77, 77, 77, 0.8));
    padding: 30px 30px;
    border-radius: 20px;
    height: 100%;
    position: absolute;
    overflow-y: scroll;
    width: 100%;
    /* width */
        &::-webkit-scrollbar {
            width: 5px;
        }
        /* Track */
        &::-webkit-scrollbar-track {
            box-shadow: inset 0 0 5px grey;
            border-radius: 10px;
        }
        /* Handle */
        &::-webkit-scrollbar-thumb {
            background: #161616;
            border-radius: 10px;
        }
        /* Handle on hover */
        &::-webkit-scrollbar-thumb:hover {
            background: #161616;
        }
    h2{
        font-size: 34px;
        color: #FFF;
        text-transform: uppercase;
        font-family: $BebasNeue;
    }
    form{
        label{
            color: #FFF;
            font-size: 16px;
            font-weight: 300;
        }
        .form_field{
            border: 1px solid #8A8A8A;
            position: relative;
            select{
                background: transparent;
                padding: 12px 20px;
                color: #D1D1D1;
                font-size: 14px;
                font-weight: 300;
                border:1px solid #ccc;
                outline: none;
                cursor: pointer;

                display: block;
                width: 100%;
                -moz-padding-start: calc(.8rem - 3px);
                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3E%3C/svg%3E");
                background-repeat: no-repeat;
                background-position: right .8rem center;
                background-size: 16px 12px;
                transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
                appearance: none;

                option{
                    background: rgba(77, 77, 77, 0.8);
                    border: 1px solid #8A8A8A;
                    li{
                        color: red;
                    }
                    li:hover{
                        background-color: #161616 !important;
                    }
                }
            }
            input[type="date"] {
                display: block;
                width: 100%;
                padding: 0.5rem;
                -moz-padding-start: calc(.8rem - 3px);
                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M3 8h18M5 3v5m14-5v5M3 8v12a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V8M8 11h8m-8 4h5'/%3E%3C/svg%3E");
                background-repeat: no-repeat;
                background-position: right .8rem center;
                background-size: 19px 19px;
                transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
                appearance: none;
                -webkit-appearance: none; /* For Chrome */
                -moz-appearance: none;    /* For Firefox */
            }

            input[type="date"]::-webkit-calendar-picker-indicator {
                opacity: 0;
            }
            input{
                background: transparent;
                padding: 12px 20px;
                color: #D1D1D1;
                font-size: 14px;
                font-weight: 300;
                border:1px solid #ccc;
                outline: none;
            }
            .password-toggle-icon {
                position: absolute;
                top: 69%;
                right: 15px;
                transform: translateY(-50%);
                cursor: pointer;
              }

              .password-toggle-icon i {
                font-size: 18px;
                line-height: 1;
                color: #7D7D7D;
                transition: color 0.3s ease-in-out;
                margin-bottom: 20px;
              }

              .password-toggle-icon i:hover {
                color: #FFF;
              }
            .fild_icon{
                position: absolute;
                right: 17px;
                top: 9px;
            }
        }
        input[type="checkbox"] {
            width: 21px;
            height: 21px;
            background-color: transparent;
            border: 2px solid #FFF;
            border-radius: 3px;
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            cursor: pointer;
            position: relative;

            &:checked {
              background-color: transparent;
              border: 2px solid #FFF;
              &::after {
                content: "";
                position: absolute;
                top: 2px;
                left: 6px;
                width: 6px;
                height: 12px;
                border: solid white;
                border-width: 0 3px 3px 0;
                transform: rotate(45deg);
              }
            }
          }
          .custome_btn_border{
            border: 1px solid #FFF;
            border-radius: 5px;
            height: 50px;
            padding: 3px;
            .custome_yellow_btn{
                background: #E5C453;
                border-radius: 5px;
                color: #041C5E;
                font-size: 16px;
                padding: 5px 30px;
                transition: background-color 0.7s ease;
                border: none;
            }
            &:hover{
                .custome_yellow_btn{
                    background: #FFF;
                }
            }
        }
        .or_login{
            position: relative;
            &::before{
                position: absolute;
                content: '';
                width: 36%;
                height: 1px;
                background: #8A8A8A;
                top: 50%;
            }
            &::after{
                position: absolute;
                content: '';
                width: 36%;
                height: 1px;
                background: #8A8A8A;
                top: 50%;
                right: 0%;
            }
        }
        .custome_Login_btn{
            border: 1px solid #8A8A8A;
            border-radius: 3px;
            width: 100%;
            text-align: center;
            padding: 8px 0px;
            color: #D1D1D1;
            font-size: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    }
  }



  .otp_form{
    background-image: linear-gradient(to right, rgba(50, 50, 50, 0.8) , rgba(77, 77, 77, 0.8), rgba(50, 50, 50, 0.8), rgba(77, 77, 77, 0.8));
    padding: 30px 30px;
    border-radius: 20px;
    height: 100%;
    position: relative;
    h2{
        font-size: 32px;
        color: #FFF;
        text-transform: uppercase;
        font-family: $BebasNeue;
    }
    h6{
        color: #D1D1D1;
        font-size: 15px;
        font-weight: 300;
    }
    h5{
        font-size: 16px;
        color: #FFFFFF;
        span{
            color: #E5C453;
            font-size: 14px;
        }
    }
    form{
        label{
            color: #FFF;
            font-size: 16px;
            font-weight: 300;
        }

            /* otp code start */
            .verification-code {
                // max-width: 334px;
                position: relative;
                margin: 25px 0px;
                // text-align:center;
                input{
                    background: transparent !important;
                    color: #D1D1D1 !important;
                    text-align: center !important;
                    border: 1px solid #8A8A8A;
                    position: relative;
                    font-size: 20px;
                    border-radius: 3px !important;
                }
            }
            .control-label{
            display:block;
            margin:40px 0px;
            font-weight:900;
            }
            .verification-code--inputs input[type=text] {
                /* border: 2px solid #e1e1e1; */
                width: 80px;
                height: 46px;
                padding: 10px;
                text-align: center;
                display: inline-block;
                box-sizing:border-box;
            }
            /* otp code end */

          .custome_btn_border{
            border: 1px solid #FFF;
            border-radius: 5px;
            height: 55px;
            padding: 3px;
            .custome_yellow_btn{
                background: #E5C453;
                border-radius: 5px;
                color: #041C5E;
                font-size: 16px;
                padding: 5px 30px;
                transition: background-color 0.7s ease;
            }
            &:hover{
                .custome_yellow_btn{
                    background: #FFF;
                }
            }
        }

    }
  }
  // LOGIN PAGE END

  .Why_Host{
    .container{
        .space_part{
            padding: 0px 40px;
            .custome_btn_border{
                @extend %yellow_btn;
            }
            .custome_accordion{
                h4{
                    font-size: 18px;
                    color: #FFF;
                }
                .accordion-item{
                    background: transparent;
                    border: 1px solid #FFF;
                    border-radius: 5px;
                    button{
                        background: transparent;
                        color: #D1D1D1;
                        &::after{
                            background-image: url('../img/down_arrow.png');
                        }
                        &:focus {
                            z-index: 3;
                            outline: 0;
                            box-shadow: none !important;
                            border-bottom: 1px solid #FFF;
                        }
                    }
                    .contains{
                        p{
                            color: #ADADAD;
                            font-size: 16px;
                            font-weight: 300;
                        }
                    }
                    p{
                        font-size: 16px;
                        font-weight: 300;
                    }
                    h6{
                        font-size: 12px;
                        font-weight: 300;
                    }
                }
            }
            .right_cards{
                background: url('../img/card_bg_image.png');
                background-position: center;
                background-repeat: no-repeat;
                background-size: cover;
                border-radius: 10px;
                p{
                    color: #FFF;
                    font-size: 18px;
                    font-weight: 300;
                    line-height: 22px;
                }
            }
        }
        &::before{
            position: absolute;
            content: '';
            height: 180px;
            width: 4px;
            background: #DB7607;
        }
    }
}

.Easy_Peasy{
    .container{
        .space_part{
            padding: 0px 40px;
            .custome_btn_border{
                @extend %yellow_btn;
            }
            .custome_card{
                background-color: #1F1F1F;
                border-radius: 8px;
                padding: 60px 30px;
                text-align: center;
                height: 100%;
                h4{
                    font-size: 18px;
                    font-weight: 300;
                    color: #FFFFFF;
                    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
                }
                p{
                    font-size: 16px;
                    font-weight: 300;
                    color: #ADADAD;
                }
            }
        }

        &::before{
            position: absolute;
            content: '';
            height: 180px;
            width: 4px;
            background: #DB7607;
        }
    }
}

.Launch_Your_Journey{
    .container{
        .Journey_part{
            background-image: url('../img/Journey_background.png');
            background-repeat: no-repeat;
            background-position: center;
            background-size: 100% 100%;
            padding: 150px 0px;
            .custome_btn_border{
                border: 1px solid #FFF;
                border-radius: 5px;
                height: 70px;
                padding: 5px;
                .custome_yellow_btn{
                    background: #E5C453;
                    border-radius: 5px;
                    color: #041C5E;
                    font-size: 18px;
                    padding: 5px 0px;
                    transition: background-color 0.7s ease;
                    width: 200px;
                }
                &:hover{
                    .custome_yellow_btn{
                        background: #FFF;
                    }
                }
            }
        }
    }
}

.User_Login{
    background-image: linear-gradient(#091022, rgba(11, 14, 19, 1));
    height: 100vh;
    h2{
        font-family: $BebasNeue;
        color: #FFF;
        font-size: 52px;
        font-weight: 400;
        span{
            color: #E5C453;
        }
    }
    p{
        font-size: 18px;
        font-weight: 300;
        color: #FFF;
    }

    form{
        width: 50%;
        margin: 0 auto;
        .avatar-upload {
            position: relative;
            max-width: 147px;
            margin: 50px auto;
            .avatar-edit {
                position: absolute;
                right: -5px;
                z-index: 1;
                bottom: 8px;
                input {
                    display: none;
                    + label {
                        width: 38px;
                        height: 38px;
                        margin-bottom: 0;
                        border-radius: 100%;
                        background: #1F2D53;
                        border: 1px solid transparent;
                        box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.12);
                        cursor: pointer;
                        font-weight: normal;
                        transition: all 0.2s ease-in-out;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        &:hover {
                            background: #f1f1f1;
                            border-color: #d6d6d6;
                        }
                        // &:after {
                        //     content: "\f040";
                        //     font-family: 'FontAwesome';
                        //     color: #757575;
                        //     position: absolute;
                        //     top: 10px;
                        //     left: 0;
                        //     right: 0;
                        //     text-align: center;
                        //     margin: auto;
                        // }
                    }
                }
            }
            .avatar-preview {
                width: 145px;
                height: 145px;
                position: relative;
                border-radius: 100%;
                // border: 6px solid #F8F8F8;
                // box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
                > div {
                    width: 100%;
                    height: 100%;
                    border-radius: 100%;
                    background-size: cover;
                    background-repeat: no-repeat;
                    background-position: center;
                }
            }
        }
        label{
            color: #FFF;
            font-size: 18px;
            font-weight: 300;
        }
        input{
            border: 1px solid #686868;
            border-radius: 5px;
            background: #0C142B;
            color: #FFF;
            width: 100%;
            height: 50px;
            padding: 0px 20px;

        }
        .password-toggle-icon {
            position: absolute;
            top: 80%;
            right: 15px;
            transform: translateY(-50%);
            cursor: pointer;
          }

          .password-toggle-icon i {
            font-size: 18px;
            line-height: 1;
            color: #7D7D7D;
            transition: color 0.3s ease-in-out;
            margin-bottom: 20px;
          }

          .password-toggle-icon i:hover {
            color: #FFF;
          }
    }
    .next_back_part{
        border-top: 1px solid #686868;
        .custome_btn_border{
            border: 1px solid #FFF;
            border-radius: 5px;
            height: 70px;
            padding: 5px;
            .custome_yellow_btn{
                background: #E5C453;
                border-radius: 5px;
                color: #041C5E;
                font-size: 18px;
                padding: 5px 0px;
                transition: background-color 0.7s ease;
                width: 150px;
            }
            &:hover{
                .custome_yellow_btn{
                    background: #FFF;
                }
            }
            .custome_white_btn{
                background: #FFF;
                border-radius: 5px;
                color: #041C5E;
                font-size: 18px;
                padding: 5px 0px;
                transition: background-color 0.7s ease;
                width: 150px;
            }
            &:hover{
                .custome_white_btn{
                    background: #E5C453;
                }
            }
        }
    }

}

.select_game_card {
    width: 70%;
    margin: 0 auto;

    .custome_game_card {
        text-align: center;
        .img_border {
            border: 2px solid transparent;
            cursor: pointer;
            padding: 5px;
            transition: border 0.3s ease;
            border-radius: 5px;

            &.selected {
                border: 2px solid #E5C453;
                box-shadow: 0 0 10px #E5C453;
            }
        }
        p {
            color: #FFF;
            font-size: 18px;
            font-weight: 300;
            margin-top: 10px;
        }
    }
}
.process25{
    position: absolute;
    content: '';
    width: 25%;
    background: #E5C453;
    height: 2px;
    border-radius: 2px;
}

.rules_books{
    border: 1px solid #FFFFFF;
    border-radius: 8px;
    padding: 50px 50px;
    h3{
        color: #FFF;
        font-size: 18px;
        font-weight: 300;
    }
    ul{
        li{
            color: #D1D1D1;
            font-size: 18px;
            font-weight: 300;
        }
    }
}

.process50{
    position: absolute;
    content: '';
    width: 50%;
    background: #E5C453;
    height: 2px;
    border-radius: 2px;
}

.user_banners{
    position: relative;
    .avatar-upload {
        position: relative;
        max-width: 100%;
        margin: 50px auto;
        .avatar-edit {
            position: absolute;
            right: 31px;
            z-index: 1;
            top: 28px;
            input {
                display: none;
                + label {
                    width: 170px;
                    height: 41px;
                    margin-bottom: 0;
                    // border-radius: 100%;
                    color: #FFF;
                    background: #1F2D53;
                    border: 1px solid transparent;
                    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.12);
                    cursor: pointer;
                    font-weight: normal;
                    transition: all 0.2s ease-in-out;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    border-radius: 3px;
                    &:hover {
                        // background: #f1f1f1;
                        // border-color: #d6d6d6;
                        // color: #1F2D53;
                        // svg{
                        //     path{
                        //         fill: #1F2D53;
                        //     }
                        // }
                    }
                    // &:after {
                    //     content: "\f040";
                    //     font-family: 'FontAwesome';
                    //     color: #757575;
                    //     position: absolute;
                    //     top: 10px;
                    //     left: 0;
                    //     right: 0;
                    //     text-align: center;
                    //     margin: auto;
                    // }
                }
            }
        }
        .avatar-preview {
            width: 100%;
            height: 600px;
            position: relative;
            border-radius: 5px;
            // border: 6px solid #F8F8F8;
            // box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
            > div {
                width: 100%;
                height: 100%;
                // border-radius: 100%;
                background-size: cover;
                background-repeat: no-repeat;
                background-position: center;
            }
        }
    }
    .show_details{
        position: absolute;
        top: 0%;
        .user_img_uplode{
            .avatar-upload {
                position: relative;
                max-width: 205px;
                margin: 50px auto;
                .avatar-edit {
                    position: absolute;
                    right: -12px;
                    z-index: 1;
                    top: 102px;
                    input {
                        display: none;
                        + label {
                            width: 42px;
                            height: 42px;
                            margin-bottom: 0;
                            border-radius: 100%;
                            background: #1F2D53;
                            border: 1px solid transparent;
                            box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.12);
                            cursor: pointer;
                            font-weight: normal;
                            transition: all 0.2s ease-in-out;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            // &:hover {
                            //     background: #f1f1f1;
                            //     border-color: #d6d6d6;
                            // }
                            // &:after {
                            //     content: "\f040";
                            //     font-family: 'FontAwesome';
                            //     color: #757575;
                            //     position: absolute;
                            //     top: 10px;
                            //     left: 0;
                            //     right: 0;
                            //     text-align: center;
                            //     margin: auto;
                            // }
                        }
                    }
                }
                .avatar-preview {
                    width: 150px;
                    height: 150px;
                    position: relative;
                    border-radius: 100%;
                    // border: 6px solid #F8F8F8;
                    // box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
                    > div {
                        width: 100%;
                        height: 100%;
                        border-radius: 100%;
                        background-size: cover;
                        background-repeat: no-repeat;
                        background-position: center;
                    }
                }
            }
        }
        .user_name{
            h3{
                color: #FFF;
                font-size: 30px;
            }
        }
        .custome_card{
            .user_bg{
                height: 49px;
                width: 66px;
                border-radius: 50%;
            }
        }
    }
}

.process75{
    position: absolute;
    content: '';
    width: 75%;
    background: #E5C453;
    height: 2px;
    border-radius: 2px;
}

.All_Set_part{
    h2{
        color: #FFF;
        font-size: 60px;
        font-family: $BebasNeue;
    }
    p{
        color: #FFF;
        font-size: 18px;
        width: 50%;
        margin: 0 auto;
    }
}

.process100{
    position: absolute;
    content: '';
    width: 100%;
    background: #E5C453;
    height: 2px;
    border-radius: 2px;
}



.user_custome_nav{
    position: relative;
    width: 100%;
    background: rgba(0, 36, 132, 0.5411764706);
    z-index: 10;
    ul{
        li{
            span{
                color: #FFF;
                font-size: 16px;
                font-weight: 300;
            }
        }
        .tournament_dropdown{
            ul{
                background: rgba(4, 28, 94, 0.4);
                border: 1px solid #FFF;
                border-radius: 10px;
                li{
                    text-align: center;
                    hr{
                        background: #FFF;
                        height: 2px;
                    }
                    a{
                        color: #FFF;
                        font-size: 18px;
                        font-weight: 400;
                        &:hover{
                            background: none;
                        }
                    }
                }
            }
            &:hover .dropdown-menu {
                display: block;
            }
        }
    }
    .notification_dropdown{
        button{
            outline: none;
        }
        ul{
            background: rgba(4, 28, 94, 0.4);
            border: 1px solid #FFF;
            border-radius: 10px;
            li{
                a{
                    color: #FFF;
                    font-size: 18px;
                    font-weight: 400;
                    &:hover{
                        background: none;
                    }
                }
            }
        }
    }
    .custome_btn_border{
        border: 1px solid #FFF;
        border-radius: 5px;
        height: 70px;
        padding: 5px;
        .custome_login_btn{
            background: #E5C453;
            border-radius: 5px;
            color: #041C5E;
            font-size: 18px;
            padding: 5px 20px;
            transition: background-color 0.7s ease;
        }
        &:hover{
            .custome_login_btn{
                background: #FFF;
            }
        }
    }
    .admin_img_show{
        height: 50px;
        width: 50px;
        border: 1px dashed #FFF;
        border-radius: 50%;
        overflow: hidden;
        img{
            height: 48px;
            width: 48px;
            border-radius: 50%;
        }
    }
}

.admin_profile_turnament{
    position: relative;
    .avatar-upload {
        position: relative;
        max-width: 100%;
        margin: 0px auto;
        .avatar-edit {
            position: absolute;
            right: 9%;
            z-index: 1;
            top: 28px;
            input {
                display: none;
                + label {
                    width: 170px;
                    height: 41px;
                    margin-bottom: 0;
                    // border-radius: 100%;
                    color: #FFF;
                    background: #3C3C3C;
                    border: 1px solid #1C232F;
                    border-radius: 3px;
                    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.12);
                    cursor: pointer;
                    font-weight: normal;
                    transition: all 0.2s ease-in-out;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    &:hover {
                        background: #f1f1f1;
                        border-color: #d6d6d6;
                        color: #1F2D53;
                        svg{
                            path{
                                fill: #1F2D53;
                            }
                        }
                    }
                    // &:after {
                    //     content: "\f040";
                    //     font-family: 'FontAwesome';
                    //     color: #757575;
                    //     position: absolute;
                    //     top: 10px;
                    //     left: 0;
                    //     right: 0;
                    //     text-align: center;
                    //     margin: auto;
                    // }
                }
            }
        }
        .avatar-preview {
            width: 100%;
            height: 450px;
            position: relative;
            border-radius: 5px;
            // border: 6px solid #F8F8F8;
            // box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);

            > div {
                width: 100%;
                height: 100%;
                // border-radius: 100%;
                background-size: cover;
                background-repeat: no-repeat;
                background-position: center;
            }
            .overlay {
                position: absolute;
                bottom: 0;
                background-image: linear-gradient(#041C5E00, #0B0E13);
                color: #f1f1f1;
                width: 100%;
                transition: .5s ease;
                opacity:0;
                color: white;
                font-size: 20px;
                padding: 20px;
                text-align: center;
                opacity: 1;
              }
        }
    }
    .show_details{
        position: absolute;
        top: 60%;
        width: 100%;
        .user_img_uplode{
            .avatar-upload {
                position: relative;
                max-width: 205px;
                margin: 50px auto;
                .avatar-edit {
                    position: absolute;
                    right: -12px;
                    z-index: 1;
                    top: 102px;
                    input {
                        display: none;
                        + label {
                            width: 42px;
                            height: 42px;
                            margin-bottom: 0;
                            border-radius: 100%;
                            background: #1F2D53;
                            border: 1px solid transparent;
                            box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.12);
                            cursor: pointer;
                            font-weight: normal;
                            transition: all 0.2s ease-in-out;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            &:hover {
                                background: #f1f1f1;
                                border-color: #d6d6d6;
                            }
                            // &:after {
                            //     content: "\f040";
                            //     font-family: 'FontAwesome';
                            //     color: #757575;
                            //     position: absolute;
                            //     top: 10px;
                            //     left: 0;
                            //     right: 0;
                            //     text-align: center;
                            //     margin: auto;
                            // }
                        }
                    }
                }
                .avatar-preview {
                    width: 180px;
                    height: 180px;
                    position: relative;
                    border-radius: 100%;
                    // border: 1px solid #D9D9D9;
                    // padding: 15px;
                    padding: 52px;
                    .frem_set{
                        position: absolute;
                        height: 139%;
                        width: 154%;
                        left: -49px;
                        top: -36px;
                    }
                    > div {
                        width: 100%;
                        height: 100%;
                        border-radius: 100%;
                        background-size: cover;
                        background-repeat: no-repeat;
                        background-position: center;
                    }
                }
            }
        }
        .user_name{
            h3{
                color: #FFF;
                font-size: 30px;
            }
        }
        .EXP_Level{
            background: #041C5E;
            border-radius: 35px;
            font-size: 16px;
            color: #FFF;
            // width: 111px;
            padding: 10px;
            height: 30px;
            display: flex;
            align-items: center;
            justify-content: center;

        }
        .exp_range_bar{
            width: 350px;
            p{
                color: #FFF;
                font-size: 18px;
                font-weight: 300;
            }

            #myinput{
                background: linear-gradient(to right, #E5C453 0%, #E5C453 50%, #fff 50%, #fff 100%);
                border: solid 1px #E5C453;
                border-radius: 8px;
                height: 4px;
                width: 356px;
                outline: none;
                transition: background 450ms ease-in;
                -webkit-appearance: none;
            }


        }
        .create_turnament_btn{
            background-color: #3C3C3C;
            border-radius: 5px;
            padding: 9px 20px;
            color: #FFF;
            font-size: 18px;
            &:hover{
                color: #071640;
                background-color: #FFF;
                svg{
                    path{
                        fill: #071640;
                    }
                }
            }
        }
    }
}

.turmanebt_show{
    .turnament_list{
        .dp_turnament_tab{
            .custome_blue_player_card{
                background-color: #051338;
                border-radius: 20px;
                padding: 25px;
                h4{
                    color: #E5C453;
                    font-size: 18px;
                }
                p{
                    color: #FFF;
                    font-size: 18px;
                }
            }
            .nav-tabs{
                border-bottom: 4px solid #071744;
                .nav-link{
                    color: #5E5E5E;
                    border: none;
                    position: relative;
                    &:hover{
                        background-color: transparent !important;
                        border: none;
                    }
                    .active{
                        &::after{
                            content: '';
                            position: absolute;
                            width: 100%;
                            height: 4px;
                            background: #E5C453;
                        }
                    }
                }
            }
            .tab-content{
                form{
                    label{
                        color: #FFF;
                        font-size: 16px;
                        font-weight: 300px;
                    }
                    .input_field{
                        background: transparent;
                        border: 1px solid #8A8A8A;
                        padding: 15px 20px;
                        border-radius: 4px;
                        color: #D1D1D1;



                    }
                    select{
                        background: transparent;
                        border: 1px solid #8A8A8A;
                        padding: 15px 20px;
                        border-radius: 4px;
                        color: #D1D1D1;

                        display: block;
                        width: 100%;
                        -moz-padding-start: calc(.8rem - 3px);
                        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3E%3C/svg%3E");
                        background-repeat: no-repeat;
                        background-position: right .8rem center;
                        background-size: 16px 12px;
                        transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
                        appearance: none;

                        option{
                            background: rgba(77, 77, 77, 0.8);
                            border: 1px solid #8A8A8A;
                        }
                    }
                    input[type="date"] {
                        display: block;
                        width: 100%;
                        // padding: 0.5rem;
                        -moz-padding-start: calc(.8rem - 3px);
                        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M3 8h18M5 3v5m14-5v5M3 8v12a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V8M8 11h8m-8 4h5'/%3E%3C/svg%3E");
                        background-repeat: no-repeat;
                        background-position: right .8rem center;
                        background-size: 19px 19px;
                        transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
                        appearance: none;
                        -webkit-appearance: none; /* For Chrome */
                        -moz-appearance: none;    /* For Firefox */
                    }

                    input[type="date"]::-webkit-calendar-picker-indicator {
                        opacity: 0;
                    }
                    .iti{
                        width: 100%;
                    }
                    .iti--separate-dial-code .iti__selected-dial-code{
                        color: #D1D1D1;
                    }
                    .up_profile_link{
                        color: #FFF;
                        text-decoration: underline;
                    }
                }
            }
            h3{
                color: #FFF;
                font-size: 22px;
            }
            .custome_card{
                border-radius: 5px;
                overflow: hidden;
                position: relative;
                .t_u_img{
                    background: #1C232F;
                    height: 58px;
                    width: 58px;
                    border-radius: 50%;
                    padding: 5px;
                }
                h4{
                    color: #FFF;
                    font-size: 18px;
                    font-weight: 300;
                }
                p{
                    color: #ADADAD;
                    font-size: 16px;
                    font-weight: 300;
                }
                .live_btn{
                    position: absolute;
                    width: 76px;
                    height: 35px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    border-radius: 50px;
                    background-color: #FF1E22;
                    border: 1px solid #FF5255;
                    color: #FFF;
                    font-size: 12px;
                    right: 7px;
                    top: 7px;
                }
                .Upcoming_btn{
                    position: absolute;
                    width: 76px;
                    height: 35px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    border-radius: 50px;
                    background-color: #232C89;
                    border: 1px solid #434EBB;
                    color: #FFF;
                    font-size: 12px;
                    right: 7px;
                    top: 7px;
                }
                .Result_btn{
                    position: absolute;
                    width: 76px;
                    height: 35px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    border-radius: 50px;
                    background-color: #DB7607;
                    border: 1px solid #F6AE5F;
                    color: #FFF;
                    font-size: 12px;
                    right: 7px;
                    top: 7px;
                }
            }

        }


    }
}
.dp_turnament_tab .nav-tabs .nav-item.show .nav-link, .dp_turnament_tab .nav-tabs .nav-link.active {
    background-color: transparent !important;
    border-bottom: 4px solid #E5C453 !important;
    border-top: none;
    border-left: none;
    border-right: none;
    position: relative;
    border-radius: 5px;
    color: #FFF !important;
}

.create_turnament_part{
    h2{
        color: #FFF;
        font-size: 52px;
        font-family: $BebasNeue;
    }
    .logo_img{
        width: 150px;
    }
    form{
        width: 60%;
        margin: 0 auto;
        .turnament_filter{
            label{
                font-size: 16px;
                color: #FFFFFF;
                font-weight: 300;
            }
            .field_part{
                position: relative;
                background-color: #121925;
                border-radius: 5px;
                select{
                    border: none;
                    outline: none;
                    background: transparent;
                    color: #7D7D7D;
                }
                input{
                    border: none;
                    outline: none;
                    background: transparent;
                    color: #7D7D7D;
                }
                input[type="date"] {
                    display: block;
                    width: 100%;
                    // padding: 0.5rem;
                    -moz-padding-start: calc(.8rem - 3px);
                    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M3 8h18M5 3v5m14-5v5M3 8v12a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V8M8 11h8m-8 4h5'/%3E%3C/svg%3E");
                    background-repeat: no-repeat;
                    background-position: right .2rem center;
                    background-size: 19px 19px;
                    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
                    appearance: none;
                    -webkit-appearance: none; /* For Chrome */
                    -moz-appearance: none;    /* For Firefox */
                }

                input[type="date"]::-webkit-calendar-picker-indicator {
                    opacity: 0;
                }
                input[type="time"] {
                    display: block;
                    width: 100%;
                    // padding: 0.5rem;
                    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='%23ffffff' stroke-width='2'/%3E%3Cline x1='12' y1='6' x2='12' y2='12' stroke='%23ffffff' stroke-width='2'/%3E%3Cline x1='12' y1='12' x2='16' y2='10' stroke='%23ffffff' stroke-width='2'/%3E%3C/svg%3E");
                    background-repeat: no-repeat;
                    background-position: right 0.2rem center;
                    background-size: 20px 20px;
                    appearance: none;
                    -webkit-appearance: none; /* For Chrome */
                    -moz-appearance: none;    /* For Firefox */
                }

                input[type="time"]::-webkit-calendar-picker-indicator {
                    opacity: 0;
                }

                .remove_rules{
                    position: absolute;
                    right: 2%;
                    top: 26%;
                }
            }

            .custome_game_card {
                text-align: center;
                .img_border {
                    border: 2px solid transparent;
                    cursor: pointer;
                    padding: 5px;
                    transition: border 0.3s ease;

                    &.selected {
                        border: 2px solid #E5C453;
                        box-shadow: 0 0 10px #E5C453;
                    }
                }
                p {
                    color: #FFF;
                    font-size: 18px;
                    font-weight: 300;
                    margin-top: 10px;
                }
            }
        }
        .custome_btn_border{
            border: 1px solid #FFF;
            border-radius: 5px;
            height: 70px;
            padding: 5px;
            .custome_yellow_btn{
                background: #E5C453;
                border-radius: 5px;
                color: #041C5E;
                font-size: 18px;
                padding: 5px 20px;
                transition: background-color 0.7s ease;
                // width: 250px;
            }
            &:hover{
                .custome_yellow_btn{
                    background: #FFF;
                }
            }
        }
        .custome_btn_border{
            border: 1px solid #FFF;
            border-radius: 5px;
            height: 55px;
            padding: 3px;
            cursor: pointer;
            .custome_white_btn{
                background: #FFF;
                border-radius: 5px;
                color: #041C5E;
                font-size: 18px;
                padding: 5px 20px;
                transition: background-color 0.7s ease;
                // width: 250px;
            }
            &:hover{
                .custome_white_btn{
                    background: #E5C453;
                }
            }
        }
        .prize_distribution{
            color: #FFF;
            font-size: 22px;
            text-align: center;
            position: relative;
            &::before{
                position: absolute;
                content: '';
                width: 35%;
                background: #FFF;
                height: 1px;
                top: 50%;
                left: 0%;
            }
            &::after{
                position: absolute;
                content: '';
                width: 35%;
                background: #FFF;
                height: 1px;
                top: 50%;
                right: 0%;
            }
        }
        input[type="checkbox"] {
            width: 21px;
            height: 21px;
            background-color: transparent;
            border: 2px solid #FFF;
            border-radius: 3px;
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            cursor: pointer;
            position: relative;

            &:checked {
              background-color: transparent;  /* Background color when checked */
              border: 2px solid #FFF;
              /* Add white arrow-style checkmark */
              &::after {
                content: "";
                position: absolute;
                top: 2px;
                left: 6px;
                width: 6px;
                height: 12px;
                border: solid white;
                border-width: 0 3px 3px 0;
                transform: rotate(45deg); /* Rotate to form the arrow */
              }
            }
        }
    }
}

.user_profile_turnament{
    position: relative;
    .avatar-upload {
        position: relative;
        max-width: 100%;
        margin: 0px auto;
        .avatar-edit {
            position: absolute;
            right: 9%;
            z-index: 1;
            top: 28px;
            input {
                display: none;
                + label {
                    width: 170px;
                    height: 41px;
                    margin-bottom: 0;
                    // border-radius: 100%;
                    color: #FFF;
                    background: #0C142B;
                    border: 1px solid #1C232F;
                    border-radius: 3px;
                    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.12);
                    cursor: pointer;
                    font-weight: normal;
                    transition: all 0.2s ease-in-out;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    &:hover {
                        background: #f1f1f1;
                        border-color: #d6d6d6;
                        color: #1F2D53;
                        svg{
                            path{
                                fill: #1F2D53;
                            }
                        }
                    }
                }
            }
        }
        .avatar-preview {
            width: 100%;
            height: 450px;
            position: relative;
            border-radius: 5px;

            // border: 6px solid #F8F8F8;
            // box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
            > div {
                width: 100%;
                height: 100%;
                // border-radius: 100%;
                background-size: cover;
                background-repeat: no-repeat;
                background-position: center;
            }
            .overlay {
                position: absolute;
                bottom: 0;
                background-image: linear-gradient(#041C5E00, #0B0E13);
                color: #f1f1f1;
                width: 100%;
                transition: .5s ease;
                opacity:0;
                color: white;
                font-size: 20px;
                padding: 20px;
                text-align: center;
                opacity: 1;
              }
        }
    }
    .show_details{
        position: absolute;
        top: 60%;
        width: 100%;
        .user_img_uplode{
            .avatar-upload {
                position: relative;
                max-width: 205px;
                margin: 50px auto;
                .avatar-edit {
                    position: absolute;
                    right: -12px;
                    z-index: 1;
                    top: 102px;
                    input {
                        display: none;
                        + label {
                            width: 42px;
                            height: 42px;
                            margin-bottom: 0;
                            border-radius: 100%;
                            background: #1F2D53;
                            border: 1px solid transparent;
                            box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.12);
                            cursor: pointer;
                            font-weight: normal;
                            transition: all 0.2s ease-in-out;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            &:hover {
                                background: #f1f1f1;
                                border-color: #d6d6d6;
                            }

                        }
                    }
                }
                .avatar-preview {
                    width: 180px;
                    height: 180px;
                    position: relative;
                    border-radius: 100%;
                    // border: 1px solid #D9D9D9;
                    padding: 52px;
                    .frem_set{
                        position: absolute;
                        height: 139%;
                        width: 154%;
                        left: -49px;
                        top: -36px;
                    }
                    > div {
                        width: 100%;
                        height: 100%;
                        border-radius: 100%;
                        background-size: cover;
                        background-repeat: no-repeat;
                        background-position: center;
                    }
                }
            }
        }
        .user_name{
            h3{
                color: #FFF;
                font-size: 30px;
            }
        }
        .EXP_Level{
            background: #041C5E;
            border-radius: 35px;
            font-size: 16px;
            color: #FFF;
            width: 111px;
            height: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
        }
        // .exp_range_bar{
        //     width: 350px;
        //     p{
        //         color: #FFF;
        //         font-size: 18px;
        //         font-weight: 300;
        //     }
        //     #myinput{
        //         background: linear-gradient(to right, #E5C453 0%, #E5C453 50%, #fff 50%, #fff 100%);
        //         border: solid 1px #E5C453;
        //         border-radius: 8px;
        //         height: 4px;
        //         width: 356px;
        //         outline: none;
        //         transition: background 450ms ease-in;
        //         -webkit-appearance: none;
        //     }
        // }

        //new add
        .exp_range_bar {
            width: 350px;
        }

        .exp_range_bar p {
            color: #FFF;
            font-size: 18px;
            font-weight: 300;
        }

        #myinput {
            background: linear-gradient(to right, #E5C453 0%, #E5C453 0%, #fff 0%, #fff 100%);
            border: solid 1px #E5C453;
            border-radius: 8px;
            height: 4px;
            width: 356px;
            outline: none;
            -webkit-appearance: none;
        }

        #myinput::-webkit-slider-runnable-track {
            height: 4px;
            background: transparent;
        }

        #myinput::-webkit-slider-thumb {
            -webkit-appearance: none;
            width: 12px;
            height: 12px;
            background-color: #E5C453;
            border-radius: 50%;
            cursor: pointer;
            margin-top: -4px;
        }

        #myinput::-moz-range-thumb {
            width: 12px;
            height: 12px;
            background-color: #E5C453;
            border: none;
            border-radius: 50%;
        }
        // new End

        .custome_btn_border{
            @extend %yellow_btn;
        }
    }
}

.Wallet_section{
    padding-top: 200px;
    padding-bottom: 100px;
    .container{
        .space_part{
            padding: 0px 40px;
            .custome_btn_border{
                @extend %yellow_btn;
            }
        }
        .cusome_card{
            border: 1px solid #FFF;
            padding: 40px;
            border-radius: 5px;
            background-color: #141414;
            h4{
                color: #FFF;
                font-size: 24px;
            }
            p{
                color: #D1D1D1;
                font-size: 20px;
                font-weight: 300;
            }
            .exp_convert{
                font-size: 14px;
            }
            .custome_btn_border{
                border: 1px solid #FFF;
                border-radius: 5px;
                height: 52px;
                padding: 3px;
                .custome_yellow_btn{
                    background: #E5C453;
                    border-radius: 5px;
                    color: #041C5E;
                    font-size: 16px;
                    padding: 5px 0px;
                    transition: background-color 0.7s ease;
                    width: 160px;
                    border: none;
                }
                &:hover{
                    .custome_yellow_btn{
                        background: #FFF;
                        color: #1F2D53;
                    }
                }
            }
        }
        &::before{
            position: absolute;
            content: '';
            height: 180px;
            width: 4px;
            background: #DB7607;
        }
    }
}

.UserProfileTab{
    .custome_blue_player_card{
        background-color: #051338;
        border-radius: 20px;
        padding: 25px;
        h4{
            color: #E5C453;
            font-size: 18px;
        }
        p{
            color: #FFF;
            font-size: 18px;
        }
    }
    .nav-tabs{
        border-bottom: 4px solid #071744;
        .nav-link{
            color: #5E5E5E;
            border: none !important;
            position: relative;
            &:hover{
                background-color: transparent !important;
                border: none;
            }
            .active{
                &::after{
                    content: '';
                    position: absolute;
                    width: 100%;
                    height: 4px;
                    background: #E5C453;
                }
            }
        }
    }
    .tab-content{
        form{
            label{
                color: #FFF;
                font-size: 16px;
                font-weight: 300px;
            }
            .input_field{
                background: transparent;
                border: 1px solid #8A8A8A;
                padding: 15px 20px;
                border-radius: 4px;
                color: #D1D1D1;
                // option{
                //     background: rgba(77, 77, 77, 0.8);
                //     border: 1px solid #8A8A8A;
                // }
            }
            select{
                background: transparent;
                border: 1px solid #8A8A8A;
                padding: 15px 20px;
                border-radius: 4px;
                color: #D1D1D1;

                display: block;
                width: 100%;
                -moz-padding-start: calc(.8rem - 3px);
                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3E%3C/svg%3E");
                background-repeat: no-repeat;
                background-position: right .8rem center;
                background-size: 16px 12px;
                transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
                appearance: none;

                option{
                    background: rgba(77, 77, 77, 0.8);
                    border: 1px solid #8A8A8A;
                }
            }
            input[type="date"] {
                display: block;
                width: 100%;
                // padding: 0.5rem;
                -moz-padding-start: calc(.8rem - 3px);
                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M3 8h18M5 3v5m14-5v5M3 8v12a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V8M8 11h8m-8 4h5'/%3E%3C/svg%3E");
                background-repeat: no-repeat;
                background-position: right .8rem center;
                background-size: 19px 19px;
                transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
                appearance: none;
                -webkit-appearance: none; /* For Chrome */
                -moz-appearance: none;    /* For Firefox */
            }

            input[type="date"]::-webkit-calendar-picker-indicator {
                opacity: 0;
            }
            .iti{
                width: 100%;
            }
            .iti--separate-dial-code .iti__selected-dial-code{
                color: #D1D1D1;
            }
            .up_profile_link{
                color: #FFF;
                text-decoration: underline;
            }
        }
    }
    .Without_turnament{
        border: 1px solid #D9D9D9;
        padding: 15px;
        h4{
            color: #FFFFFF;
            font-size: 18px;
        }
        p{
            color: #ADADAD;
            font-size: 16px;
            font-weight: 300;
        }
    }
    .tournament_card{
        cursor: pointer;
        .game_type{
            position: absolute;
            background-color: #FF1E22;
            border: 1px solid #FF5255;
            border-radius: 17px;
            font-size: 12px;
            color: #FFF;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 75px;
            height: 35px;
            top: 4%;
            right: 2%;
        }
        .logo_div{
            height: 74px;
            width: 74px;
            background-color: #1C232F;
            border-radius: 50%;
            img{
                border-radius: 50%;
            }
        }
        .small_title{
            color: #B3B3B3;
            font-size: 12px;
            display: flex;
            align-items: center;
        }
        h4{
            color: #FFFFFF;
            font-size: 18px;
        }
        .date_time{
            color: #ADADAD;
            font-size: 12px;
            display: flex;
            align-items: center;
        }
        .custome_start_turnament{
            background: #161A21;
            border-radius: 17px;
            color: #FFF;
            font-size: 12px;
            padding: 7px 0px;
            transition: background-color 0.7s ease;
            width: 75px;
            text-align: center;
            &:hover{
                background: #FFF;
                color: #1F2D53;
            }
        }
        .win_status{
            p{
                color: #ADADAD;
                font-size: 16px;
                font-weight: 300;
            }
        }

    }
}
.UserProfileTab .nav-tabs .nav-item.show .nav-link, .UserProfileTab .nav-tabs .nav-link.active {
    background-color: transparent !important;
    border-bottom: 4px solid #E5C453 !important;
    border-top: none;
    border-left: none;
    border-right: none;
    position: relative;
    border-radius: 5px;
    color: #FFF;
}

.Tournament_joining{
    .container{
        .space_part{
            padding: 0px 40px;
            .join_form{
                border: 1px solid #FFFFFF;
                padding: 40px;
                border-radius: 5px;
                h3{
                    color: #FFF;
                    font-size: 32px;
                }
                form{
                    width: 80%;
                    margin: 0 auto;
                    label{
                        color: #FFFFFF;
                        font-size: 16px;
                    }
                    .input_field{
                        background-color: #121925;
                        border-radius: 5px;
                        color: #D1D1D1;
                        font-size: 16px;
                        border: none;
                        outline: none;
                        padding: 15px 15px;
                    }
                    .select2-single{
                        background-color: #121925;
                        border-radius: 5px;
                        color: #D1D1D1;
                        font-size: 16px;
                        border: none;
                        outline: none;
                        padding: 15px 15px;
                    }
                    input[type="checkbox"] {
                        width: 21px;
                        height: 21px;
                        background-color: transparent;
                        border: 2px solid #FFF;
                        border-radius: 3px;
                        -webkit-appearance: none;
                        -moz-appearance: none;
                        appearance: none;
                        cursor: pointer;
                        position: relative;

                        &:checked {
                          background-color: transparent;  /* Background color when checked */
                          border: 2px solid #FFF;
                          /* Add white arrow-style checkmark */
                          &::after {
                            content: "";
                            position: absolute;
                            top: 2px;
                            left: 6px;
                            width: 6px;
                            height: 12px;
                            border: solid white;
                            border-width: 0 3px 3px 0;
                            transform: rotate(45deg); /* Rotate to form the arrow */
                          }
                        }
                    }
                    .remove_id_name{
                        position: absolute;
                        width: 46px;
                        right: 1%;
                        top: 56%;
                        cursor: pointer;
                    }
                    .add_id_name{
                        color: #FFF;
                        cursor: pointer;
                    }
                    .custome_btn_border{
                        border: 1px solid #FFF;
                        border-radius: 5px;
                        height: 52px;
                        padding: 3px;
                        .custome_yellow_btn{
                            background: #E5C453;
                            border-radius: 5px;
                            color: #1F2D53;
                            font-size: 16px;
                            padding: 5px 0px;
                            transition: background-color 0.7s ease;
                            width: 220px;
                        }
                        &:hover{
                            .custome_yellow_btn{
                                background: #FFF;
                                color: #1F2D53;
                            }
                        }
                    }
                }
            }
            .turnament_joining_balance{
                h6{
                    font-size: 16px;
                }
                .hr_line{
                    width: 200px;
                    background-color: #E5C453;
                    height: 2px;
                    margin: 8px 0px;
                }
            }
            .turnament_joining_condition{
                font-size: 16px;
            }
        }
        &::before{
            position: absolute;
            content: '';
            height: 180px;
            width: 4px;
            background: #DB7607;
        }
    }
}
.select2-container--bootstrap .select2-selection {
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    background-color: #121925 !important;
    border: none !important;
    border-radius: 4px;
    color: #555;
    font-size: 14px;
    outline: 0;
    padding: 15px 15px !important;
}
.select2-container--bootstrap .select2-selection--single {
    height: auto !important;
}
.select2-container--bootstrap .select2-selection--single .select2-selection__rendered {
    color: #D1D1D1 !important;
    padding: 0;
}

.faqs_page_section{
    margin-top: -130px;
    .container{
        .space_part{
            padding: 0px 40px;
            .custome_accordion{
                // border: 1px solid #FFF;
                // border-radius: 5px;
                h4{
                    font-size: 18px;
                    color: #FFF;
                }
                .accordion-item{
                    // background-image: linear-gradient(to right, rgba(50, 50, 50, 0.8) , rgba(77, 77, 77, 0.8), rgba(50, 50, 50, 0.8), rgba(77, 77, 77, 0.8));
                    background: transparent;
                    border: 1px solid #FFF;
                    border-radius: 5px;
                    button{
                        background: transparent;
                        color: #D1D1D1;
                        &::after{
                            background-image: url('../img/down_arrow.png');
                        }
                        &:focus {
                            z-index: 3;
                            outline: 0;
                            box-shadow: none !important;
                            // background-color: red;
                            border-bottom: 1px solid #FFF;
                        }
                    }
                    .contains{
                        p{
                            color: #ADADAD;
                            font-size: 16px;
                            font-weight: 300;
                        }
                    }
                    p{
                        font-size: 16px;
                        font-weight: 300;
                    }
                    h6{
                        font-size: 12px;
                        font-weight: 300;
                    }
                }
            }
        }
        &::before{
            position: absolute;
            content: '';
            height: 180px;
            width: 4px;
            background: #DB7607;
        }
    }
}

.Frequently_section{
    .container{
        .space_part{
            padding: 0px 40px;
            .custome_accordion{
                // border: 1px solid #FFF;
                // border-radius: 5px;
                h4{
                    font-size: 18px;
                    color: #FFF;
                }
                .accordion-item{
                    // background-image: linear-gradient(to right, rgba(50, 50, 50, 0.8) , rgba(77, 77, 77, 0.8), rgba(50, 50, 50, 0.8), rgba(77, 77, 77, 0.8));
                    background: transparent;
                    border: 1px solid #FFF;
                    border-radius: 5px;
                    button{
                        background: transparent;
                        color: #D1D1D1;
                        &::after{
                            background-image: url('../img/down_arrow.png');
                        }
                        &:focus {
                            z-index: 3;
                            outline: 0;
                            box-shadow: none !important;
                            // background-color: red;
                            border-bottom: 1px solid #FFF;
                        }
                    }
                    .contains{
                        p{
                            color: #ADADAD;
                            font-size: 16px;
                            font-weight: 300;
                        }
                    }
                    p{
                        font-size: 16px;
                        font-weight: 300;
                    }
                    h6{
                        font-size: 12px;
                        font-weight: 300;
                    }
                }
            }
        }
        &::before{
            position: absolute;
            content: '';
            height: 180px;
            width: 4px;
            background: #DB7607;
        }
    }
}

.Pricing_page_section{
    margin-top: -150px;
    .container{
        .space_part{
            padding: 0px 40px;
           .custome_price_card{
                border: 2px solid #434343;
                border-radius: 5px;
                background-color: #060709;
                position: relative;
                .dp_card_labels{
                    background-color: #E5C453;
                    border-radius: 5px;
                    width: 125px;
                    padding: 4px 10px;
                    color: #041C5E;
                    font-size: 12px;
                    font-weight: 300;
                    position: absolute;
                    right: 0%;
                    top: 0%;
                    text-align: center;
                }
                h5{
                    color: #FFF;
                    font-size: 16px;
                    font-weight: 300;
                    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
                }
                h3{
                    font-size: 35px;
                    color: #FFF;
                    span{
                        color: #ADADAD;
                        font-size: 16px;
                        font-weight: 300;
                        font-family: "Rowdies", sans-serif ;
                    }
                }
                p{
                    color: #ADADAD;
                    font-size: 16px;
                }
                .custome_Li_teg{
                    color: #ADADAD;
                    font-size: 16px;
                }
                .custome_btn_border{
                    border: 1px solid #FFF;
                    border-radius: 5px;
                    height: 50px;
                    padding: 4px;
                    .custome_white_btn{
                        background: #FFF;
                        border-radius: 5px;
                        color: #041C5E;
                        font-size: 16px;
                        padding: 5px 10px;
                        transition: background-color 0.7s ease;
                        // width: 250px;
                    }
                    &:hover{
                        .custome_white_btn{
                            background: #E5C453;
                        }
                    }
                }
           }
           .custome_btn_border{
            border: 1px solid #FFF;
            border-radius: 5px;
            height: 60px;
            padding: 3px;
                .custome_yellow_btn{
                    background: #E5C453;
                    border-radius: 5px;
                    color: #041C5E;
                    font-size: 16px;
                    padding: 5px 0px;
                    transition: background-color 0.7s ease;
                    width: 140px;
                }
                &:hover{
                    .custome_yellow_btn{
                        background: #FFF;
                    }
                }
            }
        }
        &::before{
            position: absolute;
            content: '';
            height: 180px;
            width: 4px;
            background: #DB7607;
        }
    }
}

.Membership_page_section{
    margin-top: -150px;
    .container{
        .space_part{
            padding: 0px 40px;
           .custome_price_card{
                // border: 2px solid #434343;
                border-radius: 5px;
                background-color: #060709;
                position: relative;
                .hr_line{
                    width: 100%;
                    background-color: #E5C453;
                    height: 1px;
                }
                .dp_card_labels{
                    background-color: #E5C453;
                    border-radius: 5px;
                    width: 125px;
                    padding: 4px 10px;
                    color: #041C5E;
                    font-size: 12px;
                    font-weight: 300;
                    position: absolute;
                    right: 0%;
                    top: 0%;
                    text-align: center;
                }
                h5{
                    color: #FFF;
                    font-size: 16px;
                    font-weight: 300;
                    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
                }
                h3{
                    font-size: 35px;
                    color: #FFF;
                    span{
                        color: #ADADAD;
                        font-size: 16px;
                        font-weight: 300;
                        font-family: "Rowdies", sans-serif ;
                    }
                }
                ul{
                    li{
                        color: #ADADAD;
                        font-size: 12px;
                        font-weight: 300;
                    }
                }
                p{
                    color: #ADADAD;
                    font-size: 14px;
                }
                .custome_Li_teg{
                    color: #FFF;
                    font-size: 16px;
                }
                .custome_btn_border{
                    border: 1px solid #FFF;
                    border-radius: 5px;
                    height: 50px;
                    padding: 3px;
                    .custome_white_btn{
                        outline: none;
                        border: none;
                        background: #E5C453;
                        border-radius: 5px;
                        color: #041C5E;
                        font-size: 16px;
                        padding: 5px 10px;
                        transition: background-color 0.7s ease;
                        // width: 250px;
                    }
                    &:hover{
                        .custome_white_btn{
                            background: #FFF;
                        }
                    }
                }
           }
        }
        &::before{
            position: absolute;
            content: '';
            height: 180px;
            width: 4px;
            background: #DB7607;
        }
    }
}

.Control_Panel_section{
    h2{
        color: #FFF;
        font-size: 60px;
        font-family: $BebasNeue;
    }
    .midle_text{
        h3{
            color: #FFF;
            font-size: 28px;
        }
        p{
            color: #C2C2C2;
            font-size: 16px;
            width: 65%;
            margin: 0 auto;
        }
    }
    .next_back_part{
        // border-top: 1px solid #686868;
        .custome_btn_border{
            border: 1px solid #FFF;
            border-radius: 5px;
            height: 60px;
            padding: 5px;
            .custome_yellow_btn{
                background: #E5C453;
                border-radius: 5px;
                color: #041C5E;
                font-size: 16px;
                padding: 5px 0px;
                transition: background-color 0.7s ease;
                width: 140px;
            }
            &:hover{
                .custome_yellow_btn{
                    background: #FFF;
                }
            }
            .custome_white_btn{
                background: #FFF;
                border-radius: 5px;
                color: #041C5E;
                font-size: 16px;
                padding: 5px 0px;
                transition: background-color 0.7s ease;
                width: 140px;
            }
            &:hover{
                .custome_white_btn{
                    background: #E5C453;
                }
            }
        }
    }
    .Custome_complated_step{
        .step_number{
            height: 50px;
            width: 50px;
            border-radius: 50%;
            background: #786523;
            font-size: 35px;
            color: #FFF;
            font-family: $BebasNeue;
        }
        .border_color{
            border: 4px solid #E5C453;
        }
        label{
            color: #FFF;
            font-size: 14px;
            font-weight: 300;
            position: absolute;
            text-align: center;
            margin-left: -13px;
            margin-top: 6px;
        }
        span{
            width: 21%;
            height: 2px;
            background: #3B3B3B;
        }
        .span_1{
            background: #E5C453;
            height: 3px;
        }
    }
    .result_screensort_form{
        .file-upload-wrapper {
            position: relative;
            width: 100%;
            // max-width: 600px;
            margin: 0 auto;
        }

        .file-upload-box {
            position: relative;
            padding: 1rem;
            text-align: center;
            border: 1px solid #868686;
            border-radius: 8px;
            background-color: transparent;
            transition: all 0.3s ease;
            cursor: pointer;
            width: 100%;
        }

        .file-upload-box:hover {
            background-color: #213467;
            border-color: #adb5bd;
        }

        .file-upload-input {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
            cursor: pointer;
            z-index: 1;
        }

        .upload-content {
            position: relative;
            z-index: 0;
            h5{
                color: #C2C2C2;
                font-size: 28px;
            }
        }

        .upload-icon {
            font-size: 2.5rem;
            color: #6c757d;
            margin-bottom: 1rem;
        }

        .file-list {
            margin-top: 1.5rem;
        }

        .file-item {
            display: flex;
            align-items: center;
            padding: 0.75rem 1rem;
            background-color: white;
            border: 1px solid #dee2e6;
            border-radius: 6px;
            margin-bottom: 0.5rem;
            transition: all 0.2s ease;
        }

        .file-item:hover {
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
        }

        .file-icon {
            color: #6c757d;
            margin-right: 0.75rem;
            font-size: 1.25rem;
        }

        .file-name {
            flex-grow: 1;
            color: #FFF;
            text-decoration: none;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            margin-right: 1rem;
            display: none;
        }

        .file-name:hover {
            color: #007bff;
            text-decoration: none;
        }

        .remove-file {
            color: #dc3545;
            cursor: pointer;
            padding: 0.25rem 0.5rem;
            font-size: 1.25rem;
            transition: color 0.2s ease;
            flex-shrink: 0;
        }

        .remove-file:hover {
            color: #c82333;
        }

        .drag-over {
            background-color: #e9ecef;
            border-color: #007bff;
        }

        .file-item {
            display: flex;
            align-items: center;
            padding: 0.75rem 1rem;
            background-color: transparent;
            border: 1px solid #213467;
            border-radius: 6px;
            margin-bottom: 0.5rem;
            transition: all 0.2s ease;
            position: relative;
        }

        .image-preview {
            width: 96%;
            height: auto;
            overflow: hidden;
            margin-right: 10px;
            border-radius: 6px;
            border: 1px solid #dee2e6;
        }

        .uploaded-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }


        /* Add loading animation */
        @keyframes upload-progress {
            0% { width: 0%; }
            100% { width: 100%; }
        }

        .upload-progress {
            position: absolute;
            bottom: 0;
            left: 0;
            height: 3px;
            background-color: #007bff;
            animation: upload-progress 1s ease-in-out;
        }

        .select_winner{
            border: 1px solid #868686;
            border-radius: 8px;
            h4{
                font-size: 28px;
            }
            .turnament_filter{
                position: relative;
                label{
                    font-size: 16px;
                    color: #C2C2C2;
                    font-weight: 300;
                }
                .field_part{
                    background-color: #121925;
                    border-radius: 5px;
                    select{
                        border: none;
                        outline: none;
                        background: transparent;
                        color: #7D7D7D;
                    }
                    input{
                        border: none;
                        outline: none;
                        background: transparent;
                        color: #7D7D7D;
                    }
                }
            }
        }
    }
}


.custome_coman_model{
    .modal-content{
        background-color: #051338;
        border-radius: 20px;
        .Player_popup{
            .player_img{

            }
            p{
                color: #FFF;
                font-size: 16px;
                span{
                    color: #E5C453;
                    font-size: 16px;
                }
            }
        }
        .Page_open_popup{
            .close-btn {
                background: none;
                border: none;
                padding: 0;
                cursor: pointer;
                position: absolute;
                right: 2%;
                top: 4%;
                svg {
                    transition: transform 0.5s ease;
                }
                &:hover svg {
                    transform: rotate(180deg);
                }
            }
            h3{
                color: #FFF;
                font-size: 24px;
            }
            span{
                color: #C2C2C2;
                font-size: 14px;
            }
            .copy_lick_part{
                border: 1px solid #213467;
                border-radius: 20px;
                overflow-wrap: anywhere;
                .copy_icon{
                    height: 60px;
                    width: 60px;
                    border-radius: 50%;
                    background-color: #0A1C4C;
                    cursor: pointer;
                }
                h4{
                    color: #FFF;
                    font-size: 16px;
                }
                p{
                    color: #153794;
                    font-size: 12px;
                }
            }
            .popup_white_yellow_btn{
                // border-top: 1px solid #686868;
                .custome_btn_border{
                    border: 1px solid #FFF;
                    border-radius: 5px;
                    height: 60px;
                    padding: 3px;
                    .custome_yellow_btn{
                        background: #E5C453;
                        border-radius: 5px;
                        color: #041C5E;
                        font-size: 16px;
                        padding: 5px 0px;
                        transition: background-color 0.7s ease;
                        width: 140px;
                    }
                    &:hover{
                        .custome_yellow_btn{
                            background: #FFF;
                        }
                    }
                    .custome_white_btn{
                        background: #FFF;
                        border-radius: 5px;
                        color: #041C5E;
                        font-size: 16px;
                        padding: 5px 0px;
                        transition: background-color 0.7s ease;
                        width: 140px;
                    }
                    &:hover{
                        .custome_white_btn{
                            background: #E5C453;
                        }
                    }
                }
            }
            .popup_form{
                .suchna{
                    p{
                        color: #969696;
                        font-size: 14px;
                    }
                }
                label{
                    color: #FFF;
                    font-size: 16px;
                }
                .input_field{
                    background-color: #121925;
                    border-radius: 5px;
                    border: none;
                    outline: none;
                    padding: 15px 15px;
                    color: #C2C2C2;
                    font-weight: 300;
                    max-height: 500px;

                }
                .file-upload-wrapper {
                    position: relative;
                    width: 100%;
                    max-width: 600px;
                    margin: 0 auto;
                }

                .file-upload-box {
                    position: relative;
                    padding: 2rem;
                    text-align: center;
                    border: 2px dashed #213467;
                    border-radius: 8px;
                    background-color: transparent;
                    transition: all 0.3s ease;
                    cursor: pointer;
                    width: 100%;
                }

                .file-upload-box:hover {
                    background-color: #213467;
                    border-color: #adb5bd;
                }

                .file-upload-input {
                    position: absolute;
                    left: 0;
                    top: 0;
                    width: 100%;
                    height: 100%;
                    opacity: 0;
                    cursor: pointer;
                    z-index: 1;
                }

                .upload-content {
                    position: relative;
                    z-index: 0;
                    h5{
                        color: #C2C2C2;
                        font-size: 16px;
                    }
                }

                .upload-icon {
                    font-size: 2.5rem;
                    color: #6c757d;
                    margin-bottom: 1rem;
                }

                .file-list {
                    margin-top: 1.5rem;
                }

                .file-item {
                    display: flex;
                    align-items: center;
                    padding: 0.75rem 1rem;
                    background-color: white;
                    border: 1px solid #dee2e6;
                    border-radius: 6px;
                    margin-bottom: 0.5rem;
                    transition: all 0.2s ease;
                }

                .file-item:hover {
                    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
                }

                .file-icon {
                    color: #6c757d;
                    margin-right: 0.75rem;
                    font-size: 1.25rem;
                }

                .file-name {
                    flex-grow: 1;
                    color: #FFF;
                    text-decoration: none;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    margin-right: 1rem;
                }

                .file-name:hover {
                    color: #007bff;
                    text-decoration: none;
                }

                .remove-file {
                    color: #dc3545;
                    cursor: pointer;
                    padding: 0.25rem 0.5rem;
                    font-size: 1.25rem;
                    transition: color 0.2s ease;
                    flex-shrink: 0;
                }

                .remove-file:hover {
                    color: #c82333;
                }

                .drag-over {
                    background-color: #e9ecef;
                    border-color: #007bff;
                }

                .file-item {
                    display: flex;
                    align-items: center;
                    padding: 0.75rem 1rem;
                    background-color: transparent;
                    border: 1px solid #213467;
                    border-radius: 6px;
                    margin-bottom: 0.5rem;
                    transition: all 0.2s ease;
                    position: relative;
                }

                .image-preview {
                    width: 50px;
                    height: 50px;
                    overflow: hidden;
                    margin-right: 10px;
                    border-radius: 6px;
                    border: 1px solid #dee2e6;
                }

                .uploaded-image {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    display: block;
                }


                /* Add loading animation */
                @keyframes upload-progress {
                    0% { width: 0%; }
                    100% { width: 100%; }
                }

                .upload-progress {
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    height: 3px;
                    background-color: #007bff;
                    animation: upload-progress 1s ease-in-out;
                }
            }
        }
    }
}

.custome_coman_model .Page_open_popup .nav-pills .nav-link.active, .custome_coman_model .Page_open_popup .nav-pills .show>.nav-link {
    color: var(--bs-nav-pills-link-active-color);
    background-color: transparent !important;
    border-bottom: 2px solid #E5C453 !important;
    border-radius: 0px;
}


/* CSS */
.button-85 {
    padding: 0.4em 1em;
    font-size: 16px;
    border: none;
    outline: none;
    color: rgb(255, 255, 255);
    background: #111;
    cursor: pointer;
    position: relative;
    z-index: 0;
    border-radius: 20px;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
  }

  .button-85:before {
    content: "";
    background: linear-gradient(
      45deg,
      #ff0000,
      #ff7300,
      #fffb00,
      #ff9b00,
      #00ffd5,
      #002bff,
      #7a00ff,
      #ff00c8,
      #ff0000
    );
    position: absolute;
    top: -2px;
    left: -2px;
    background-size: 400%;
    z-index: -1;
    filter: blur(5px);
    -webkit-filter: blur(5px);
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    animation: glowing-button-85 20s linear infinite;
    transition: opacity 0.3s ease-in-out;
    border-radius: 10px;
  }

  @keyframes glowing-button-85 {
    0% {
      background-position: 0 0;
    }
    50% {
      background-position: 400% 0;
    }
    100% {
      background-position: 0 0;
    }
  }

  .button-85:after {
    z-index: -1;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: #222;
    left: 0;
    top: 0;
    border-radius: 10px;
  }


  .history_page_section{
    margin-top: -130px;
    position: relative;
    .container{
        .space_part{
            padding: 0px 40px;
            .history_table{
                table{

                    thead{
                        tr{
                            th{
                                background-color: transparent;
                                color: #FFF;
                                font-size: 18px;
                                font-weight: 300;
                                text-align: center;
                                padding: 15px 7px;
                            }
                        }
                    }
                    tbody{
                        border-spacing: 10px;
                        tr{
                            border: 1px solid rgba(255, 255, 255, 0.6);
                            td{
                                background-color: transparent;
                                .list_box{
                                    height: 50px;
                                    display: flex;
                                    align-items: center;
                                    .style_text{
                                        font-size: 16px;
                                        color: #FFF;
                                        font-weight: 300;
                                    }
                                    .status_btn{
                                        background: #DBF6CB;
                                        border-radius: 50px;
                                        color: #1C9E08;
                                        font-size: 14px;
                                        font-weight: 300;
                                        padding: 3px 10px;
                                        display: flex;
                                        justify-content: center;
                                        align-items: center;
                                    }
                                    .fail_btn{
                                        background: #FDE2E2;
                                        border-radius: 50px;
                                        color: #E22727;
                                        font-size: 14px;
                                        font-weight: 300;
                                        padding: 3px 10px;
                                        display: flex;
                                        justify-content: center;
                                        align-items: center;
                                    }
                                    .Pending_btn{
                                        background: #ECEFF3;
                                        border-radius: 50px;
                                        color: #969696;
                                        font-size: 14px;
                                        font-weight: 300;
                                        padding: 3px 10px;
                                        display: flex;
                                        justify-content: center;
                                        align-items: center;
                                    }
                                    p{
                                        color: #979797;
                                        font-size: 14px;
                                        font-weight: 300;
                                    }
                                }
                            }
                        }
                    }
                }
            }
            .custome_accordion{
                h4{
                    font-size: 18px;
                    color: #FFF;
                }

                .accordion-item{
                    // background-image: linear-gradient(to right, rgba(50, 50, 50, 0.8) , rgba(77, 77, 77, 0.8), rgba(50, 50, 50, 0.8), rgba(77, 77, 77, 0.8));
                    background: transparent;
                    border: 1px solid #FFF;
                    border-radius: 5px;
                    button{
                        background: transparent;
                        color: #D1D1D1;
                        &::after{
                            background-image: url('../img/down_arrow.png');
                        }
                        .style_text{
                            font-size: 16px;
                            p{
                                font-size: 14px;
                                color: #979797;
                            }
                        }
                        &:focus {
                            z-index: 3;
                            outline: 0;
                            box-shadow: none !important;
                            // background-color: red;
                            border-bottom: 1px solid #FFF;
                        }
                    }
                    .contains{
                        p{
                            color: #ADADAD;
                            font-size: 16px;
                            font-weight: 300;
                        }
                        .status_btn{
                            background: #DBF6CB;
                            border-radius: 50px;
                            color: #1C9E08;
                            font-size: 14px;
                            font-weight: 300;
                            padding: 3px 10px;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                        }
                        .fail_btn{
                            background: #FDE2E2;
                            border-radius: 50px;
                            color: #E22727;
                            font-size: 14px;
                            font-weight: 300;
                            padding: 3px 10px;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                        }
                        .Pending_btn{
                            background: #ECEFF3;
                            border-radius: 50px;
                            color: #969696;
                            font-size: 14px;
                            font-weight: 300;
                            padding: 3px 10px;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                        }
                    }
                    p{
                        font-size: 16px;
                        font-weight: 300;
                    }
                    h6{
                        font-size: 12px;
                        font-weight: 300;
                    }
                }
            }
        }
        &::before{
            position: absolute;
            content: '';
            height: 180px;
            width: 4px;
            background: #DB7607;
        }
    }
}



// OUNTER CSS START

.count-down .flipdown {
    margin: auto;
    // width: 100%;
    margin-top: 30px;
}
// .count-down h1 {
//     text-align: center;
//     font-weight: 400;
//     font-size: 2em;
//     margin-top: 0;
//     margin-bottom: 10px;
// }
.count-down {
    width: 90%;
    max-width: 550px;
    margin: 20px auto;
    text-align: center;
}
.count-down h1 {
    font-size: 2em;
    margin-bottom: 10px;
}
@media (max-width: 550px) {
    .count-down {
        width: 100%;
        height: 180px;
    }
    .count-down h1 {
        font-size: 2.5em;
    }
}

// OUNTER CSS END


.about_page_section{
    margin-top: -130px;
    .container{
        .space_part{
            padding: 0px 40px;
            .about_details{
                p{
                    color: #fff;
                    font-size: 16px;
                    font-weight: 300;
                }
                .left_line{
                    border-left: 4px solid #E5C453;
                    padding-left: 15px;
                }
                .right_part{
                    img{
                        width: 100%;
                    }
                }
            }
        }
        &::before{
            position: absolute;
            content: '';
            height: 180px;
            width: 4px;
            background: #DB7607;
        }
    }
}

.participed_player_details{
    margin-top: -150px;
   .container{
        .right_part{
            position: relative;
            h2{
                padding-left: 40px;
                font-size: 70px;
            }
            &::before{
                position: absolute;
                content: '';
                height: 75px;
                width: 4px;
                background: #DB7607;
            }
        }
        .all_detail{
            background: #1F242C;
            border-radius: 5px;
            p{
                color: #FFF;
                font-size: 14px;
            }
            h6{
                color: #D1D1D1;
                font-size: 14px;
            }
        }
        .custome_btn_border{
            @extend %yellow_btn;
        }
   }
}
.All_player_details{
    .container{
        .space_part{
            padding: 0px 40px;
        }
        label{
            color: #FFF;
            font-size: 16px;
        }
        .blue_border{
            border: 1px solid #041C5E;
            border-radius: 5px;
            padding: 15px;
            p{
                color: #FFF;
                font-size: 16px;
                font-weight: 300;
            }
            .img_box{
                height: auto;
                max-height: 100px;
                max-width: 100px;
                width: 100%;
                border: 2px solid #FFF;
                border-radius: 8px;
                overflow: hidden;
                img{
                    height: 100%;
                    width: 100%;
                }
            }
        }
        &::before{
            position: absolute;
            content: '';
            height: 180px;
            width: 4px;
            background: #DB7607;
        }
    }
}

.Privicy_policy_detail{
    h2{
        color: #E5C453;
        font-size: 30px;
    }
    h3{
        color: #FFF;
        font-size: 22px;
    }
    p{
        color: #FFF;
        font-size: 16px;
        font-weight: 300;
    }
    ul{
        li{
            color: #FFF;
            font-size: 16px;
            font-weight: 300;
        }
    }
}


.level_show_model{
    h4{
        color: #E5C453;
        font-size: 20px;
    }
    p{
        color: #FFF;
        font-size: 12px;
        font-weight: 300;
    }
}
.Fram_show_model{
    h4{
        color: #E5C453;
        font-size: 16px;
        text-align: center;
    }
    img{
        width: 60%;
    }
    ul{
        padding-left: 0px;
        margin-bottom: 0px;
        li{
            color: #FFF;
            font-size: 12px;
            font-weight: 300;
        }
    }
}

.Basic_Insights_Popup{
    h4{
        font-size: 16px;
    }
    p{
        font-size: 12px;
        color: #FFF;
    }
}


.button-wallet {
    padding: 0.4em 1em;
    font-size: 16px;
    border: 1px solid #FFF;
    outline: none;
    color: rgb(255, 255, 255);
    background: #111;
    cursor: pointer;
    position: relative;
    z-index: 0;
    border-radius: 9px;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;

    h5{
        color: #E5C453;
        font-size: 12px;
    }
    p{
        color: #FFF;
        font-size: 10px !important;
    }
  }

  .button-wallet:before {
    content: "";
    background: linear-gradient(
      45deg,
      #ff0000,
      #ff7300,
      #fffb00,
      #ff9b00,
      #00ffd5,
      #002bff,
      #7a00ff,
      #ff00c8,
      #ff0000
    );
    position: absolute;
    top: -2px;
    left: -2px;
    background-size: 400%;
    z-index: -1;
    filter: blur(5px);
    -webkit-filter: blur(5px);
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    animation: glowing-button-85 20s linear infinite;
    transition: opacity 0.3s ease-in-out;
    border-radius: 10px;
  }

  @keyframes glowing-button-85 {
    0% {
      background-position: 0 0;
    }
    50% {
      background-position: 400% 0;
    }
    100% {
      background-position: 0 0;
    }
  }

  .button-wallet:after {
    z-index: -1;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: #222;
    left: 0;
    top: 0;
    border-radius: 10px;
  }


input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.custome_admin_drop{
    background-color: #0B0E13;
}
.custome_admin_profile .dropdown-menu-arrow::before {
    content: "";
    width: 13px;
    height: 13px;
    background: #0B0E13;
    position: absolute;
    top: -7px;
    right: 20px;
    transform: rotate(45deg);
    border-top: 1px solid #eaedf1;
    border-left: 1px solid #eaedf1;
}
.custome_admin_drop .dropdown-header{
    text-align: center;
}
.custome_admin_drop .dropdown-header h6 {
    font-size: 18px;
    margin-bottom: 0;
    font-weight: 600;
    color: #D1D1D1;
}
  .custome_admin_drop .dropdown-header h6 {
    font-size: 18px;
    margin-bottom: 0;
    font-weight: 600;
    color: #FFF;
  }
  .custome_admin_drop .dropdown-header span {
    font-size: 14px;
    color: #D1D1D1;
  }
  .custome_admin_drop .dropdown-item  span{
    font-size: 14px;
    padding: 5px 15px;
    transition: 0.3s;
  }
  .custome_admin_drop .dropdown-item i {
    margin-right: 10px;
    font-size: 18px;
    line-height: 0;
  }
  .custome_admin_drop .dropdown-item:hover {
    background-color: #000;
  }


  .register_time_img{
      width: 150px;
      width: 150px;
      left: 50%;
      position: relative;
      transform: translateX(-50%);
  }



.Tournament_History_List{
    .custome_blue_player_card{
        background-color: #051338;
        border-radius: 20px;
        padding: 25px;
        h4{
            color: #E5C453;
            font-size: 18px;
        }
        p{
            color: #FFF;
            font-size: 18px;
        }
    }
    .nav-tabs{
        border-bottom: 4px solid #071744;
        .nav-link{
            color: #5E5E5E;
            border: none;
            position: relative;
            &:hover{
                background-color: transparent !important;
                border: none;
            }
            .active{
                &::after{
                    content: '';
                    position: absolute;
                    width: 100%;
                    height: 4px;
                    background: #E5C453;
                }
            }
        }
    }
    .tab-content{
        form{
            label{
                color: #FFF;
                font-size: 16px;
                font-weight: 300px;
            }
            .input_field{
                background: transparent;
                border: 1px solid #8A8A8A;
                padding: 15px 20px;
                border-radius: 4px;
                color: #D1D1D1;



            }
            select{
                background: transparent;
                border: 1px solid #8A8A8A;
                padding: 15px 20px;
                border-radius: 4px;
                color: #D1D1D1;

                display: block;
                width: 100%;
                -moz-padding-start: calc(.8rem - 3px);
                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3E%3C/svg%3E");
                background-repeat: no-repeat;
                background-position: right .8rem center;
                background-size: 16px 12px;
                transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
                appearance: none;

                option{
                    background: rgba(77, 77, 77, 0.8);
                    border: 1px solid #8A8A8A;
                }
            }
            input[type="date"] {
                display: block;
                width: 100%;
                // padding: 0.5rem;
                -moz-padding-start: calc(.8rem - 3px);
                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M3 8h18M5 3v5m14-5v5M3 8v12a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V8M8 11h8m-8 4h5'/%3E%3C/svg%3E");
                background-repeat: no-repeat;
                background-position: right .8rem center;
                background-size: 19px 19px;
                transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
                appearance: none;
                -webkit-appearance: none; /* For Chrome */
                -moz-appearance: none;    /* For Firefox */
            }

            input[type="date"]::-webkit-calendar-picker-indicator {
                opacity: 0;
            }
            .iti{
                width: 100%;
            }
            .iti--separate-dial-code .iti__selected-dial-code{
                color: #D1D1D1;
            }
            .up_profile_link{
                color: #FFF;
                text-decoration: underline;
            }
        }
    }
    h3{
        color: #FFF;
        font-size: 22px;
    }
    .custome_card{
        border-radius: 5px;
        overflow: hidden;
        position: relative;
        .t_u_img{
            background: #1C232F;
            height: 58px;
            width: 58px;
            border-radius: 50%;
            padding: 5px;
        }
        h4{
            color: #FFF;
            font-size: 18px;
            font-weight: 300;
        }
        p{
            color: #ADADAD;
            font-size: 16px;
            font-weight: 300;
        }
        .live_btn{
            position: absolute;
            width: 76px;
            height: 35px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50px;
            background-color: #FF1E22;
            border: 1px solid #FF5255;
            color: #FFF;
            font-size: 12px;
            right: 7px;
            top: 7px;
        }
        .Upcoming_btn{
            position: absolute;
            width: 76px;
            height: 35px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50px;
            background-color: #232C89;
            border: 1px solid #434EBB;
            color: #FFF;
            font-size: 12px;
            right: 7px;
            top: 7px;
        }
        .Result_btn{
            position: absolute;
            width: 76px;
            height: 35px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50px;
            background-color: #DB7607;
            border: 1px solid #F6AE5F;
            color: #FFF;
            font-size: 12px;
            right: 7px;
            top: 7px;
        }
    }

}

.Query_Page_Sec{
    .custome_btn_border{
        @extend %yellow_btn;
    }
}

.Trends_Hosted_Tournaments{
    .Custome_card{
        position: relative;
        border-radius: 15px;
        overflow: hidden;
        img{
            width: 100%;
            height: 100%;
        }
        .text_contain{
            position: absolute;
            bottom: 5%;
            left: 10%;
            h3{
                font-size: 40px;
                font-family: "Bebas Neue", sans-serif !important;
                text-transform: uppercase;
            }
        }
    }
    .Custome_card_two{
        position: relative;
        border-radius: 15px;
        overflow: hidden;
        img{
            width: 100%;
            height: 100%;
        }
        .text_contain{
            position: absolute;
            bottom: 5%;
            left: 10%;
            h3{
                font-size: 24px;
                font-family: "Bebas Neue", sans-serif !important;
                text-transform: uppercase;
            }
        }
    }
}

.Revenu_Brecdown_Popup{
    .custome_card{
        .img_border{
            border: 1px solid #FFFFFF;
            border-radius: 5px;
            position: relative;
            .game_type_btn{
                position: absolute;
                width: 75px;
                height: 35px;
                background-color: #232C89;
                border: 1px solid #434EBB;
                border-radius: 50px;
                font-size: 12px;
                font-weight: 300;
                color: #FFF;
                display: flex;
                justify-content: center;
                align-items: center;
                right: 13px;
                top: 13px;
            }
        }
        .gaming_detail{
            border: 1px solid #FFFFFF;
            border-radius: 5px;
            transition: background-color 0.7s ease;
            position: relative;
            .d_game_names{
                font-size: 12px;
                color: #B3B3B3;
            }
            h3{
                color: #FFF;
                font-size: 20px;
                font-weight: 400;
                text-decoration: underline;
            }
            .game_time{
                color: #FFF;
                font-size: 14px;
                font-weight: 400;
            }
            .game_live{
                color: #FF0000;
                font-size: 22px;
                font-weight: 400;
            }
            h4{
                color: #E5C453;
                font-size: 18px;
            }
            p{
                color: #FFF;
                font-size: 18px;
            }
        }
        &:hover{
            .gaming_detail{
                &::after{
                    position: absolute;
                    content: '';
                    width: 100%;
                    height: 3px;
                    background: #DB7607;
                    bottom: -1px;
                    left: 0%;
                    border-radius: 2px;
                }
            }
        }

        .price_win{
            .price_amount{
                background-color: #171B22;
                border-radius: 50px;
                text-align: center;
                padding: 5px 10px;
                h4{
                    color: #FFF;
                    font-size: 14px;
                }
                p{
                    color: #FFF;
                    font-size: 8px;
                }
            }
        }
        .custome_btn_border{
            @extend %yellow_btn;
        }
    }
}

.F_M_Active{
    color: #DB7607 !important;
}


#dataTables_processing{
    display: none !important;
}
div.dataTables_wrapper div.dataTables_processing {
    display: none !important;
}