/*HEADER*/
#appHeader{
    width: 100%;
    height: 110px;
    display: block;
    top: 0px;
    left: 0px;
    /* position: relative; */
    float: left;
    overflow: hidden;
    display: none;
}

#Header_div{
    /*position: absolute;*/
    display: block;
    width: 100%;
    /*height: 100%;*/
    top: 0px;
    left: 0px;
    right: 0px;
    margin: auto;
    z-index: 1;
}
#Header_Logo{
    user-select: none;
    /*position: absolute;*/
    display: block;
    pointer-events: none;
    float: left;
}
#Header_content{
    display: block;
    width: 100%;
    height: 35px;
    top: 56%;
    left: 0px;
    right: 0px;
    margin: auto;
    float: left;
    padding-top: 5px;
}
#Header_Arena{
    user-select: none;
    position: relative;
    display: block;
    pointer-events: none;
    background-color: rgb(0, 51, 204);
    width: 35%;
    height: 100%;
    /*left: 1%;*/
    text-align: center;
    line-height: 35px;
    float: left;
}
#Header_Arena_Value{
    line-height: 12px;
    position: absolute;
    top: 50%;
    transform: translate(-0px, -50%);
    width: 100%;
}
#Header_Welcome{
    user-select: none;
    /* position: absolute; */
    display: block;
    pointer-events: none;
    background-color: rgb(51, 51, 51);
    width: 64%;
    height: 100%;
    /*right: 1%;*/
    text-align: right;
    line-height: 35px;
    padding-right: 1%;
    float: right;
}
#Header_btn_logout{
    position: absolute;
    display: block;
    width: 120px;
    height: 30px;
    text-align: center;
    right: 1%;
    top: 25px;
    cursor: pointer;
    background-color: rgb(222, 39, 39);
    border: 2px solid rgb(72, 64, 64);
    border-radius: 8px;
    line-height: 30px;
    user-select: none;
    box-shadow: rgba(0, 0, 0, 0.58) 0px 2px 3px 0px, rgba(0, 0, 0, 0.19) 0px 4px 2px 0px;
}

@media screen and (max-width: 900px), screen and (max-height: 900px) {
    #Header_Arena{
        width: 50%; 
    }
    #Header_Welcome{
        width: 49%;
    }
}
@media screen and (max-width: 750px) , screen and (max-height: 750px) {
    #Header_Arena{
        font-size: 12px;
    }
    #Header_Welcome{
        font-size: 12px;
    }
}
@media screen and (max-width: 500px) , screen and (max-height: 500px) {
     #appHeader{
        height: 98px;
    }
    
    #Header_Logo_Container{
        user-select: none;
        display: block;
        pointer-events: none;
        float: left;
        transform: scale(0.8);
        transform-origin: left top 0px;
    }
    #Header_btn_logout{
        width: 80px;
        font-size: 10px;
        height: 16px;
        line-height: 10px;
        padding-top: 5px;
        top: 25px;
    }
    #Header_content{
        position: absolute;
        top: 52px;
    }
}
@media screen and (max-width: 360px) , screen and (max-height: 370px){
    #appHeader{
        height: 78px;
    }
    
    #Header_Logo_Container{
        user-select: none;
        display: block;
        pointer-events: none;
        float: left;
        transform: scale(0.5);
        transform-origin: left top 0px;
    }
    #Header_btn_logout{
        width: 50px;
        font-size: 10px;
        height: 16px;
        line-height: 10px;
        padding-top: 5px;
        top: 5px;
    }
    #Header_content{
        position: absolute;
        top: 40px;
    }
}

/*MEDIA HEIGHT*/
@media screen and (max-height: 500px) {
    #appHeader{
        height: 80px;
    }
    #Header_content{
        height: 20px;
    }
    #Header_Arena{
        line-height: 20px;
    }
    #Header_Welcome{
        line-height: 20px;
    }
}
@media screen and (max-height: 370px) {
    #appHeader{
        height: 60px;
    }
    #Header_content{
        top: 30px;
    }
}



/* Portrait */
@media screen and (orientation: portrait) {
    #appHeader{
        height: 95px;
        background-color: #48484896;
    }
    #Header_div{
        float: left;
    }
    #Header_Logo_Container{
        transform: scale(0.65) translate(-25%, -28%);
        float: left;
        transform-origin: center center 0px;
        /*width: 188px;
        height: 44px;*/
    }
    #Header_btn_logout{
        width: 68px;
        font-size: 12px;
        height: 18px;
        line-height: 12px;
        padding-top: 5px;
        top: 14px;
    }
    #Header_content{
        float: left;
        height: auto;
        position: static;
        transform: translate(0px, -28px);
    }
    #Header_Welcome{
        width: 100%;
        text-align: center;
        height: 25px;
        line-height: 24px;
    }
    #Header_Arena{
        position: static;
        width: 100%;
        /*margin-top: 12px;*/
        height: 25px;
    }
    #Header_Arena_Value{
        position: static;
        transform: translate(-0px, 0px);
        line-height: 26px;
        /*padding-left: 2%;*/
    }
    
}