.ad_component{
    width:100%;
    margin-top:10px;
    margin-bottom:10px;
    cursor:pointer;
    position:relative;
}
.ad_sponserod_title{
    position:absolute;
    top:1vw;
    left:1vw;
    color:#fff;
    background:rgba(0,0,0,.5);
    border-radius:5px;
    padding: 0.5vw 1.1vw;
    font-size: 2vw;

    backdrop-filter:blur(10px);
}
.ad_component img{
    width:100%;
}
.header_container{
    height:50px;
    width:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0px 20px;
    position:fixed;
    top:0;
    background: #031022;
    backdrop-filter: blur(3.5px);
    z-index:999;
}
.page_reload_btn{
    height:30px;
    width:30px;
    position:fixed;
    bottom:90px;
    right:30px;
    display:none;
    z-index:9999999;
    cursor:pointer;
}
.page_reload_btn.active{
    animation: spin_page_load 1s linear infinite;
}
@keyframes spin_page_load {
    0% { transform: rotate(360deg); }
    100% { transform: rotate(0deg); }
}
.header_container .left_div{
    
}
.header_container .left_div .toggle_menu_button{
    font-size:1.5rem;
    cursor:pointer;
    color:var(--white);
    height:30px;
    width:30px;
    transition:.3s;
}

.header_container .left_div .app_name{
    font-size:1.6rem;
    margin-left:2rem;
    font-weight:bold;
    color:var(--white);
}
.header_container .left_div .app_name img{
    height:30px;
    
}
.header_container .right_div{
    padding-right:2rem;
    display:flex;
    align-items:center;
    column-gap:10px;
}
.header_container .right_div i{
    font-size:1.5rem;
    margin:0px 1rem;
    cursor:pointer;
    color:var(--white);
}
.header_container .right_div .header_profile_div{
    position:relative;
}
.header_container .right_div .verify_tick{
    color: #e9ffe9;
    position: absolute;
    bottom: 0;
    left: 7px;
    font-size: 15px;
}
.header_container  .right_div i:hover{
    color:var(--pink)!important;
}
.header_container .right_div .verify_tick:hover{
    color:#fff!important;
}

.header_container .right_div .header_profile_img{
    height:35px;
    width:35px;
    border-radius:50%;
}

.header_menu_items{
    display:none;
    background:rgb(17 11 11 / 90%);
    animation: mobileMenuLeftHide .3s ease forwards;
    z-index: 999999;
    
}
.header_menu_items .header_menu_item{
    color:#fff;
    text-decoration:none;
    font-size: 20px;
    height: auto;
    padding: 15px 20px;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    transition:.3s;
    
}
.header_menu_items .header_menu_item:hover{
    color:var(--pink);
}
.header_container .menu_open{
    display: flex;
    position: absolute;
    top: 50px;
    left: 0;
    flex-direction: column;
    border-top: 1px solid rgba(255,255,255,.1);
    animation: mobileMenuLeft .3s ease forwards;
    overflow-y:auto;
    height:calc(100vh - 110px);
    max-width:400px;
    min-width:300px;
}
.header_container .menu_open::-webkit-scrollbar{
    width:5px;
    background:lightgray;
}
.header_container .menu_open::-webkit-scrollbar-thumb{
    background:var(--pink);
}
.notification_btn_div{
    position:relative;
}
.right_div .notification_btn_div:after{
    content: " ";
    position: absolute;
    top: -4px;
    right: 13px;
    height: 10px;
    width: 10px;
    background: red;
    border-radius: 50%;
}
.notification_blur_div,.menu_blur_div{
    display:none;
    height:100vh;
    width:100vw;
    position:fixed;
    top:0;
    left:0;
    background:rgba(0,0,0,.3);
    z-index:99999;
    height: calc(100vh - 110px);
    top:50px;
}

.notification_blur_open{
    display:inherit;
}
.menu_blur_open{
    display:inherit;
}
.header_notification_items_scroll{
    height:100%;
    overflow-y:auto;
}
.header_container .notification_open {
    display:block;
    position: absolute;
    top: 50px;
    right: 0;
    width: 100%;
    border-top: 1px solid rgba(255,255,255,.1);
    animation: mobileMenuRight .3s ease forwards;
    overflow:auto;
    height:calc(100vh - 110px);
    width:400px;
    z-index:999999;
}
.header_notification_items_data{
    display:flex;
    flex-direction:column;
    column-gap:10px;
}

.header_notification_items{
    display:none;
    background:rgb(17 11 11 / 90%);
    row-gap:10px;
    padding:10px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
}
.notification_item{
    color:#fff;
    display:flex;
    flex-direction:column;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    padding:10px;
    border-radius:10px;
    border:1px solid gray;
    position:relative;
    margin-bottom:10px;
}
.notification_item .notification_title{
    font-size:14px;
}
.notification_item .notification_description{
    font-size:12px;
    opacity:.8;
    margin-top:5px;
}
.notification_item .for_you{
    position:absolute;
    top:0px;
    right:0px;
    font-size:9px;
    background:var(--gradient);
    padding:3px 5px;
    border-radius:2px;
    line-height:9px;
    border-top-right-radius:10px;
    
}
/*==============sweet alert=======================================*/
.swal2-popup{
    background: #020c1b;
    color: #fff;
    border: 1px solid #777373;
    border-radius:5px;
    box-shadow: #302a41 0px 0px 10px 0px;
}
.swal2-popup .swal2-confirm {
    background:var(--gradient);
    background-color:#da2f68 ;
    box-shadow:none;
}
/*==============sweet alert=======================================*/
@keyframes mobileMenuLeft{
    0% {
    transform: translateX(-130%);
    }
    100% {
        transform: translateX(0);
    }    
}

@keyframes mobileMenuRight{
    0% {
    transform: translateX(130%);
    }
    100% {
        transform: translateX(0);
    }    
}
/*======================notification iframe start============*/
#notificationIframeModel{
    z-index: 999999;
    overflow:hidden;
}
#notificationIframeModel .modal-dialog{
    max-width:100%!important;
    width:100%!important;
    margin:0!important;
}
#notificationIframeModel .modal-header{
    padding:5px 10px;
}
#notificationIframeModel .modal-content{
    background-color:#04152d;
    color:#fff;
    height:100vh;
    background:var(--background_color);
}
#notificationIframeModel .modal-body{
    padding:0;
}
#notificationIframeModel .btn-close{
    background-color:#fff;
}
/*======================notification iframe end==============*/
@media screen and (max-width: 768px) {
.page_reload_btn{
    display:inherit;
}
.right_div .notification_btn_div:after{
    top: -5px;
    right: 5px;
}
.header_container .notification_open{
    width:80%;
}
    .header_container .right_div{
    padding-right:.5rem;
}
.header_container .left_div .app_name{
    margin-left:1rem;
}
.header_container .right_div i{
    margin:0px .5rem;
}
.header_container .right_div .verify_tick{
    left:13px;
}
}