/*FIGHT HISTORY*/
#FightHistory_div{
    position: absolute;
    bottom: 1%;
    width: 28%;
    height: 270px;
    /*background-color: white;*/
}
#FightHistory_content{
    width: 100%;
    height:100%;
    float: left;
    background-color: white;
}
#FightHistory_top_container{
    width: 100%;
    float: left;
}
#FightHistory_middle_container{
    margin-top: 1%;
    width: 100%;
    float: left;
    color: black;
    text-align: center;
}
#FightHistory_bottom_container{
    width: 100%;
    height: 144px;
    float: left;
    color: black;
    overflow: auto;
    background-color: white;
}
#FightHistory_top_border{
    width: 100%;
    border: 1px solid gray;
    float: left;
    /*transform: translate(5%, 0px);*/
}
#FightHistory_middle_border{
    width: 100%;
    border: 1px solid gray;
    float: left;
    /*transform: translate(5%, 0px);*/
}
#FightHistory_top_label_title{
    float: left;
    font-size: 25px;
    width: 100%;
    text-align: center;
    color: black;
    padding-bottom: 3px;
    background-color: #52b4c3;
    
}
#FightHistory_top_left_container{
    float: left;
    font-size: 20px;
    width: 100%;
    color: black;
    text-align: center;
    background-color: #48e7ff;
    /* transform: translate(0px, 5px); */
    /* padding-left: 2%; */
}
#FightHistory_top_right_container{
    float: left;
    width: 100%;
    text-align: center;
}
#FightHistory_top_right_label_meron{
    float: left;
    color: blue;
    width: 33%;
}
#FightHistory_top_right_label_wala{
    float: left;
    color: red;
    width: 33%;
}
#FightHistory_top_right_label_draw{
    float: left;
    color: #006600;
    width: 33%;
}
#FightHistory_top_right_value_meron{
    float: left;
    color: black;
    width: 33%;
}
#FightHistory_top_right_value_wala{
    float: left;
    color: black;
    width: 33%;
}
#FightHistory_top_right_value_draw{
    float: left;
    color: black;
    width: 33%;
}
#FightHistory_middle_label_fight{
    float: left;
    width: 50%;
}
#FightHistory_middle_label_result{
    float: left;
    width: 50%;
}
#FightHistory_middle_label_slowKill{
    float: left;
    width: 33%;
}
.FightHistory_Result_Container{
    text-align: center;
    float: left;
    width: 100%;
}
.FightHistory_Result_Entry{
    float: left;
    width: 50%;
}
#FightHistory_top_close_btn{
    position: absolute;
    right: 2px;
    height: 14px;
    width: 12px;
    border-radius: 50%;
    font-size: 10px;
    padding-left: 5px;
    padding-top: 3px;
    margin-top: 2px;
    background: linear-gradient(8deg, rgb(106, 202, 4) 11%, rgb(255, 216, 193) 100%);
    box-shadow: rgba(0, 0, 0, 0.58) 0px 2px 3px 0px, rgba(0, 0, 0, 0.19) 0px 4px 2px 0px;
}





/* @ MEDIA*/
@media screen and (max-width: 1200px) {
    #FightHistory_top_label_title{
        font-size: 20px;  
    }
    #FightHistory_top_left_container{
        font-size: 16px;  
    }
    #FightHistory_top_right_container{
        font-size: 13px;
    }
    #FightHistory_middle_container{
        font-size: 13px;
    }
    #FightHistory_bottom_container{
        font-size: 13px;
    }
    
}
@media screen and (max-width: 1100px) {
    
}
@media screen and (max-width: 950px) {
    
}

@media screen and (max-width: 900px) {
    
}
@media screen and (max-width: 750px) {
    #FightHistory_top_label_title{
        font-size: 18px;
    }
    #FightHistory_top_left_container{
        font-size: 12px;  
    }
    #FightHistory_top_right_container{
        font-size: 10px;
    }
    #FightHistory_middle_container{
        font-size: 10px;
    }
    #FightHistory_bottom_container{
        font-size: 10px;
    }
    
}
@media screen and (max-width: 600px) {
    #FightHistory_top_label_title{
        font-size: 14px;
    }
    #FightHistory_top_left_container{
        font-size: 10px;  
    }
    #FightHistory_top_right_container{
        font-size: 8px;
    }
    #FightHistory_middle_container{
        font-size: 8px;
    }
    #FightHistory_bottom_container{
        font-size: 8px;
    }
    
}
@media screen and (max-width: 500px) {
    
}

@media screen and (max-width: 360px) {
    #FightHistory_top_label_title{
        font-size: 11px;
        margin-bottom: 0px; 
    }
    #FightHistory_top_left_container{
        font-size: 10px;  
        width: 100%;
        text-align: center;
    }
    #FightHistory_top_right_container{
        font-size: 10px;
        width: 100%;
        text-align: center;
        margin-top: 5px;
    }
    #FightHistory_middle_container{
        font-size: 8px;
    }
    #FightHistory_bottom_container{
        font-size: 8px;
    }
}

/* Portrait */
@media screen and (orientation: portrait) {
    #FightHistory_div{
        bottom: unset;
        width: 100%;
        display: none;
        height: 100%;
    }   
    #FightHistory_bottom_container{
        height: 83%;
    }
    #FightHistory_top_label_title{
        font-size: 20px;
        text-align: left;
    }
}

/*LANDSCAPE*/
@media screen and (orientation: landscape) {
    #FightHistory_div{
        display: block;
        height: 270px;
    }
    #FightHistory_top_close_btn{
        display: none;
    }
}
@media screen and (max-height: 500px) and (orientation: landscape) {
    #FightHistory_div{
        display: none;
        height: 100%;
        width: 34%;   
        top: 0px;
    }
    #FightHistory_top_close_btn{
        display: block;
    }
    #FightHistory_bottom_container{
        height: 70%;
    }
}