@import url('dark.css');
*
{
    font-family: Arial, Helvetica, sans-serif;
}
body
{
    padding: 0;
    margin: 0;
    background: linear-gradient(to bottom , rgb(5, 5, 5) , rgb(12, 12, 10));
}

*::selection
{
    background-color: #303030;
}


#section_nav
{
    background: linear-gradient(to bottom , rgb(5, 5, 5) , rgb(12, 12, 10));
    width: calc(100% - 220px);
    height: 100%;
    position: absolute;
    right: 0;
    overflow: auto;
    cursor: var(--default);
}


#bgl {
    background-color: rgba(0, 0, 0, 0.500);
    width: 100%;
    height: 100vh;
    position: fixed;
    display: block;
    top:0;
}
#bgl img{
    width: 50px;
    position: absolute;
    left: calc(50% - 25px);
    animation: loadingimg 5s infinite;
    top: calc(50% - 75px);
}
#bgl #loadingbar{
    background-color: #555;
    width: 200px;
    position: absolute;
    height: 3px;
    top: calc(50% - 1.5px);
    left: calc(50% - 100px);
    overflow: hidden;
}

#bgl #loadingbar div{
    background-color: var(--color1);
    width: 25%;
    position: relative;
    height: 100%;
    animation: loading 2s infinite;
}

@keyframes loadingimg{
    0%{
        filter: drop-shadow(-1px 1px 5px  var(--color1));
    }

    

    50%{

        filter: drop-shadow(-1px 1px 10px  var(--color2));
       }


    100%{
        filter: drop-shadow(-1px 1px 5px  var(--color1));
    }
}


@keyframes loading {
    0%{
        left: -25%;
        width: 25%;
    }
    50%{
        left: 25%;
        width: 40%;
    }
    100%{
        left: 100%;
        width: 25%;
    }
}

#logo
{
    position: fixed;
    width: 100%;
    height: 100vh;
    display: flex;
    align-items:center;
    justify-content: center;
    overflow: hidden;
    z-index: -2;
}

#logo img::selection
{
    background-color: transparent;
}

#logo img
{
    width: 20%;
    position: relative;
    right: 70px;
}


#list
{
    display: none;
}

#backgroundimg
{
    position: absolute;
    width: 100%;
    height: 100vh;
    z-index: -5;
}

#backgroundimg::selection
{
    background-color: transparent;
}


#leftnav
{
    background: linear-gradient(to top , rgb(5, 5, 5) , rgb(12, 12, 10));
    width: 220px;
    height: 100vh;
    position: fixed;
    overflow: auto;
    
}

#leftnav #navplayer li i
{
    position: relative;
    color: white;
    margin-right: 15%;
    left: 2px;
}

#leftnav #logodiv #logo
{
    position: relative;
    width: 65px;
    height: 65px;
    border-radius: 49.5% 50%;
    border: solid rgb(141, 141, 141) 2px;
}

#leftnav #logodiv{
    position: relative;
    width: 65px;
    height: 65px;
    border-radius: 49.5% 50%;
    left: 35%;
    margin-top: 35px;
}

#leftnav  #E-Mail
{
    position: relative;
    margin-top: 20px;
    color: white;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 400;
    background-color: rgb(30,30,30);
    width: 78%;
    left: 10%;
    padding: 5px 2.5px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;    
}


@keyframes viplogo{
    0%{
        box-shadow:  0  0 10px var(--vip1),
        inset 0  0 10px var(--vip1);
        border: solid var(--vip1) 2px;

    }
    25%{
        box-shadow:  0  0 7px var(--vip1),
        inset 0  0 5px var(--vip1);
    }
    50%{
        box-shadow:  0  0 5px var(--vip1),
        inset 0  0 7px var(--vip1);
    }
    75%{
        box-shadow:  0  0 7px var(--vip1),
        inset 0  0 4px var(--vip1);
    }
    100%{
        box-shadow:  0  0 10px var(--vip1),
        inset 0  0 10px var(--vip1);
        border: solid var(--vip1) 2px;

    }
}

@keyframes vip{
    0%{
        box-shadow:  0  0 10px var(--vip1),
        inset 0  0 10px var(--vip1);
        background-color: var(--vip2);

    }
    25%{
        box-shadow:  0  0 7px var(--vip1),
        inset 0  0 5px var(--vip1);
    }
    50%{
        box-shadow:  0  0 5px var(--vip1),
        inset 0  0 7px var(--vip1);
    }
    75%{
        box-shadow:  0  0 7px var(--vip1),
        inset 0  0 4px var(--vip1);
    }
    100%{
        box-shadow:  0  0 10px var(--vip1),
        inset 0  0 10px var(--vip1);
        background-color: var(--vip2);

    }
}

.vip{
    animation: vip 4s infinite;
}

.viplogo{
    animation: viplogo 4s infinite;
}

#leftnav div .status
{
    font-size:16px;
    position: absolute;
    bottom: 0px;
    right: 0;
    border-radius: 50px; 
    background-color: #303030;

}

#leftnav #E-Mail .badge{
    position: relative;
    width: 18px;
    height: 18px;
}
#leftnav #E-Mail #badgediv{
    width: 18px;
    height: 18px;
    margin-left: 5px;
    display: flex;
    justify-content: center;
    position: relative;
}
#leftnav #E-Mail #badgediv span{
    position: absolute;
    top: -18px;
    background: black;
    border-radius: 2px;
    white-space: nowrap;
    padding: 2px;
    font-size: 10px;
    filter: opacity(0%);
    transition: 0.2s;

}


#leftnav #E-Mail #badgediv:hover span{
    filter: opacity(100%);

}

#navplayer #hmenu
{
    top: -5px;
}

#navplayer h1
{
    color: rgb(120, 120, 120);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
    position: relative;
    left: -12%;
}

#navplayer
{
    position: relative;
}

#navplayer li
{
    width: 90%;
    text-align: left;
    list-style: none;
    padding: 10px;
    margin: 5px;
    border-radius: 5px;
    position: relative;
    right: 15%;
    cursor: pointer; 
    color: white;
    font-family: Arial, Helvetica, sans-serif;
    transition: 0.2s;
    font-size: 14px;


}

#navplayer li:hover{
    background-color: var(--hovercolor);
}


#phonenav
{
    background-color: rgba(30,30,30,0.8);
    position: fixed;
    width: 100%;
    height: 100vh;
    z-index: 10;
    overflow: auto;
    display: none;
}

@keyframes phonenav
{
    0%
    {
        height: 0;
    }

    100%
    {
        height: 100vh;
    }
}

@keyframes cphonenav
{
    0%
    {
        height: 100vh;
    }    

    100%
    {
        height: 0;
        display: none;
    }
}

#ulphone
{
    background-color: rgb(15, 15, 15);
    width: 80%;
    padding: 10px;
    position: relative;
    top: 10%;
    border-radius: 5px;
    color: white;
    list-style: none;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    left: 10%;
}

#ulphone li
{
    text-align: center;
    margin-top: 15px;
    background-color: black;
    padding: 10px 15px 10px 15px;
    cursor: pointer;
    border-radius: 5px;
    transition: 0.2s;
}

#ulphone li:hover
{
    background-color: rgb(196, 192, 0);
}



#phonenav #ulphone li i
{
    margin-right: 15px;
    transition: 0.2s;
}

#phonenav #ulphone li .arrow
{
    position: absolute;
    right: 25px;
    filter: opacity(0%);
}

#phonenav #ulphone li .circle
{
    position: absolute;
    margin-left: 5%;
    transition: 0.2s;
    filter: opacity(0%);
    font-size: 8px;
    margin-top: 0.5%;
}
#phonenav #ulphone li:hover .circle
{
    filter: opacity(100%);
    display: inline-block;
}



#phonenav #ulphone #headname
{
    color: rgb(182, 175, 175);
    position: relative;
    left: 10px;
}

#phonelogo
{
    width: 15%;
    position: absolute;
    top: 10px;
    left: 10px;
}

#phonenav #ulphone .cpdiv
{
    background-color: rgb(48, 47, 47);
    margin-top: 10px;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    overflow: hidden;
    height: 0;
}

@keyframes scpdiv 
{
    0%
    {
        height: 0;
    }    

    100%
    {
        height: 125px;
    }
}

@keyframes hcpdiv 
{
    0%
    {
        height: 125px;
    }    

    100%
    {
        height: 0;
    }
}

#phonenav #ulphone .cpdiv ul 
{
    list-style: none;
    width: 90%;
    position: relative;
    right: 2%;

}

#phonenav #ulphone .cpdiv ul li
{
    padding: 0;
    margin: 0;
    margin-top: 15px;
    margin-bottom: 5px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    transition: 0.2s;
    position: relative;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgb(19, 19, 18);
}
#phonenav #ulphone .cpdiv ul li:hover
{
    background-color: black;
}
#leftnav #navplayer li .listarrow
{
    position: absolute;
    left: 85%;
    transition: 0.2s;
    filter: opacity(0%);
}

#leftnav #navplayer li:hover .listarrow
{
    filter: opacity(100%);
    display: inline-block;
}

#leftnav #navplayer li .admin_arrow
{
    position: absolute;
    left: 85%;
    transition: 0.2s;
    filter: opacity(0%);
}

#leftnav #navplayer li:hover .admin_arrow
{
    filter: opacity(100%);
    display: inline-block;
}

#leftnav #navplayer li .circle
{
    position: absolute;
    left: 85%;
    transition: 0.2s;
    filter: opacity(0%);
    font-size: 8px;
    margin-top: 3%;
}
#leftnav #navplayer li:hover .circle
{
    filter: opacity(100%);
    display: inline-block;
}



.cdiv
{
    background-color: var(--hovercolor);
    width: 100%;
    position: relative;
    right: 15%;
    height: 0;
    margin: 5px;
    border-radius: 5px;
    overflow: hidden;
}

.cdiv ul
{
    position: relative;
    left: 5px;
    width: 100%;
}

#leftnav #navplayer .cdiv ul a li
{
    padding: 0;
    margin: 0;
    margin-top: 15px;
    margin-bottom: 5px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    transition: 0.2s;
    position: relative;
    left: -15%;
}

#leftnav .cdiv ul a li:hover , #leftnav .cdiv ul a li:hover i 
{
    color: var(--vip1);
}

#leftnav .cdiv ul a li i
{
    margin: 0;
    position: absolute;
    left: -15%;
    font-size: 14px;

}


#leftnav #cndiv ul a li:hover , #leftnav #cndiv ul a li:hover i,
#leftnav #adiv ul a li:hover , #leftnav #adiv ul a li:hover i,
#leftnav #adivadmin_div ul a li:hover , #leftnav #admin_div ul a li:hover i,
#leftnav #cdiv ul a li:hover , #leftnav #cdiv ul a li:hover i

{
    color: var(--vip1);
}


::-webkit-scrollbar {
    width: 2px;
    border-radius: 20px 20px 20px 20px;
  }
  
  /* Track */
  ::-webkit-scrollbar-track {
    background: #555;
    border-radius: 20px 20px 20px 20px;
  
  
  }
  
  /* Handle */
  ::-webkit-scrollbar-thumb {
    background: rgb(126, 126, 126);
    border-radius: 20px 20px 20px 20px;
  
  
  }
  
  /* Handle on hover */
  ::-webkit-scrollbar-thumb:hover {
    background: rgb(134, 133, 133);
  }

::-webkit-scrollbar-thumb:hover {
    background: rgb(134, 133, 133);
  }

::-webkit-scrollbar:horizontal{
    height: 4px;
    
}


  a
{
    text-decoration: none;
    color: white;
}



@keyframes hcdiv
{
    0%
    {
        height: 75px;
}

    100%
    {
        height: 0;
    }
}

@keyframes scdiv 
{
    0%
    {
        height: 0;

    }    

    100%
    {
        height: 75px;

    }
}



@keyframes hacdiv
{
    0%
    {
        height: 75px;
}

    100%
    {
        height: 0;
    }
}

@keyframes oacdiv 
{
    0%
    {
        height: 0;

    }    

    100%
    {
        height: 75px;

    }
}

@media screen and (max-width: 1200px) 
{

    
    #section_nav{
        left: 0;
        width: 100%;
    }

    #leftnav
        {
            display: none;
        }
    #list
    {
        display: block;
        width: 25px;
        position: absolute;
        top: 30px;
        right: 30px;
        cursor: pointer;
        padding: 5px 10px 5px 10px;
        border-radius: 5px;
        transition: 0.2s;
        z-index: 50;
    }
    #list:hover
    {
        background-color: rgba(255,255,255,0.2);

    }
    #logo img
{
    right: 0px;
}


#leftnav #navplayer li i
{
    margin-right: 10%;
}

#navplayer h1
{
    left: -20%;
}


#navplayer li
{
    width: 100%;
    text-align: left;
    list-style: none;
    padding: 10px;
    margin: 5px;
    border-radius: 5px;
    position: relative;
    right: 30%;
    cursor: pointer; 
    color: white;
    font-family: Arial, Helvetica, sans-serif;
    transition: 0.2s;
    font-size: 14px;


}


.cdiv
{
    width: 110%;
    right: 28%;
}



#leftnav #navplayer  .cdiv ul
{
    width: 100%;
}

#leftnav #navplayer  .cdiv ul a li
{
    left: -25%;
    font-size: 12px;
}




@keyframes hcdiv
{
    0%
    {
        height: 75px;
}

    100%
    {
        height: 0;
    }
}

@keyframes scdiv 
{
    0%
    {
        height: 0;

    }    

    100%
    {
        height: 75px;

    }
}

}


@media screen and (max-width: 700px)
{
    #phonenav #ulphone .cpdiv ul 
    {
        right: 4%;
    
    }
}




@keyframes notifaction
{
    0%
    {
        right: -100%;
    }    

    75% 
    {
        right: 3%;
    }
     
    100%
    {
        right: 2%;
    }
}

@keyframes cnoti 
{
    0% 
    {
        right: 2%;
    }

    25% 
    {
        right: 3%;
    }

    100% 
    {
        right: -100%;
    }
}

.online
{
    color: green;
    text-shadow: 0 0 5px green;

}


.idle
{
    color: rgb(206, 152, 52);
    text-shadow: 0 0 5px rgb(206, 152, 52);

}


.offline 
{
    color: rgb(148, 148, 148);
    text-shadow: 0 0 5px rgb(148, 148, 148);

}

#conmenu{
    width: 160px;
    min-height: 60px;
    background-color: rgb(71, 71, 71);
    display: none;
    position: absolute;
    border-radius: 5px;
    left: 0;
    padding: 0;
    top: 0;
    overflow: hidden;

    z-index: 99999;
    list-style: none;
}

#conmenu li{
    width: 100%;
    left: 0;
    font-family: Arial, Helvetica, sans-serif;
    color: white;
    background-color: transparent;
    font-size: 12px;
    white-space: nowrap;
    padding: 5px 0 5px 0;
    padding: 5px;
    display: flex;
    cursor: default;
    justify-content: left;
    align-items: center;
    position: relative;
}
#conmenu #header{
    background-color: #555;
    font-size: 15px;
    justify-content: center;

}
#conmenu li:hover{
    background-color: #8f8f8f;
}
#conmenu li img{
    width: 20px;
}


#ticketnoti{
    background-color: red;
    min-width: 12px;
    height: 12px;
    border-radius: 50%;
    text-align: center;
    display: flex;
    font-weight: 700;
    align-items: center;
    display: none;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    justify-content: center;
    position: absolute;
    color: white;
    left: 0;
    top: 0;
}

#ticketnotimanage{
    background-color: red;
    min-width: 12px;
    height: 12px;
    border-radius: 50%;
    text-align: center;
    display: none;
    font-weight: 700;
    align-items: center;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    justify-content: center;
    position: absolute;
    color: white;
    left: -190px;
    top: 0;
}

#div_notiffcation
{
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgb(15,15,15);
    min-width: 180px;
    max-width: 300px;
    min-height: 20px;
    right: 50%;
    top: -100%;
    transform: translate(50% , 0);
    padding: 10px 30px;
    color: white;
    font-size: 14px;
    z-index: 9999;
}

#div_notiffcation p 
{
    font-size: 14px;
    font-family: Arial, Helvetica, sans-serif;
}

#div_notiffcation span
{
position: absolute;
width: 100%;
height: 1px;
top: 0;
left: 0;
}

#div_notiffcation i
{
color: white;
font-size: 16px;
position: absolute;
left: -12.5px;
background-color: green;
width: 25px;
display: flex;
justify-content: center;
align-items: center;
height: 25px;
}

@keyframes open_noti
{
0%
{
    top:  -100%;
}    

60% 
{
    top: 4%;
}
100%
{
    top: 2%;
}
}

@keyframes close_noti {
0%
{
    top: 2%;
}

20% 
{
    top: 3%;
}

100%
{
    top: -100%;
}
}

@keyframes timeout 
{
0%
{
    width: 100%;
}    

100% 
{
    width: 0%;
}
}
.server-status {
    position: fixed;
    top: 20px;
    right: 20px;
    padding: 8px 15px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: bold;
    display: flex;
    align-items: center;
    z-index: 1000;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
}

.server-status.online {
    background-color: rgba(46, 125, 50, 0.2);
    border: 1px solid rgba(46, 125, 50, 0.5);
    color: #8bc34a;
}

.server-status.offline {
    background-color: rgba(211, 47, 47, 0.2);
    border: 1px solid rgba(211, 47, 47, 0.5);
    color: #ef5350;
}

.server-status:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
}

.status-icon {
    display: flex;
    align-items: center;
    gap: 8px;
}

.status-icon svg {
    width: 16px;
    height: 16px;
}

  .recaptcha-container {
    border: 2px solid #555;  /* Dark gray border */
    border-radius: 4px;
    padding: 10px;
    display: inline-block;
    background: #222;        /* Dark background */
  }