.xp_frame {

}
.xp_panel {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: start; 
    margin: 0 0 0.2vh; 
    align-items: center; 
}
.xp_panelLeft {
    width: 30%;
    font-size: 2vh;
    font-family: "Merriweather Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    font-weight: 800;
    color: #e0e6ed;
    padding: 0.1vh 0.4vw; 
    text-align: end;
    justify-content: center;
}
.xp_panelRight {
    width: 70%;
}
.xp_smaltext {
    font-size: 1.4vh;
    font-family: "Merriweather Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    color: #e0e6ed; 
}

.xp_barBG {
    width: 100%;
    height: 100%;
    background-color: gray;
    padding: 0.2vh 0.2vh;
    text-align: center;
    justify-content: center;
    border-radius: 0 1vh 0 1vh ;
}
.xp_bar {
    height: 100%;
    background-color: orange;
    border-radius: 0 1vh 0 1vh ;
    padding: 0 1vh 0 0;
    text-align: right;
    justify-content: center;
    font-size: 1.4vh;
    font-family: "Merriweather Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    color: whitesmoke; 
}

.xp_panelRightGraf {
    width: 70%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: start; 
    margin-bottom: 1.5vh;
}
xp_c_vl {
    width: 1%;
    height: 2vh;
    border-left: 0.4vh solid gray;
}

xp_c_de,
xp_c_re,
xp_c_po,
xp_c_ex,
xp_c_me {
    width: 8%;
	height: 2vh;
    border-left: 0.4vh solid gray;
    border-bottom: 0.4vh solid gray;
}
xp_c_de {
    width: 17%;
}
xp_c_re {
    width: 23%;
}
xp_c_po {
    width: 36%;
}
xp_c_ex {
    width: 18%;
}

@media screen and (max-device-width: 1000px), screen and (orientation: portrait) { /* 9/16 mobile*/
    .xp_frame {

    }
    .xp_panelLeft {
        width: 30%;
        font-size: 1.9vh;
        font-family: "Merriweather Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
        font-weight: 800;
        color: #e0e6ed;
        padding: 0.1vh 0.4vw; 
        text-align: end;
        justify-content: center;
    }
    xp_c_de,
    xp_c_re,
    xp_c_po,
    xp_c_ex,
    xp_c_me {
        display: none;
    }
    .xp_bar {
        height: 100%;
        background-color: orange;
        border-radius: 0 1vh 0 1vh ;
        padding: 0 1vh 0 0;
        text-align: right;
        justify-content: center;
        font-size: 1.4vh;
        font-family: "Merriweather Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
        color: whitesmoke; 
    }
    .xp_smaltext {
        font-size: 1.4vh;
        font-family: "Merriweather Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
        color: #e0e6ed; 
    }
  }
@media screen and (orientation: landscape) { /* 19/9 DeskTop/Mobile */
    .xp_frame {

    }
    .xp_smaltext {
        font-size: 1.4vh;
        font-family: "Merriweather Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
        color: #e0e6ed; 
    }

    @media screen and (min-device-width: 1000px) and (orientation: landscape) { /* 19/9 DeskTop*/
       
        xp_c_de,
        xp_c_re,
        xp_c_po,
        xp_c_ex,
        xp_c_me {
            width: 8%;
            height: 2vh;
            border-left: 0.4vh solid gray;
            border-bottom: 0.4vh solid gray;
        }
        xp_c_de {
            width: 17%;
        }
        xp_c_re {
            width: 23%;
        }
        xp_c_po {
            width: 36%;
        }
        xp_c_ex {
            width: 18%;
        }

        .xp_panelLeft {
            width: 30%;
            font-size: 1.9vh;
            font-family: "Merriweather Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
            font-weight: 800;
            color: #e0e6ed;
            padding: 0.1vh 0.4vw; 
            text-align: end;
            justify-content: center;
        }
        .xp_bar {
            height: 100%;
            background-color: orange;
            border-radius: 0 1vh 0 1vh ;
            padding: 0 1vh 0 0;
            text-align: right;
            justify-content: center;
            font-size: 1.4vh;
            font-family: "Merriweather Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
            color: whitesmoke; 
        }
        .xp_smaltext {
            font-size: 1.4vh;
            font-family: "Merriweather Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
            color: #e0e6ed; 
        }
    }
    @media screen and (max-device-width: 1000px) and (orientation: landscape) { /* 19/9 mobile*/
        
        xp_c_de,
        xp_c_re,
        xp_c_po,
        xp_c_ex,
        xp_c_me {
            width: 8%;
            height: 2vh;
            border-left: 0.4vw solid gray;
            border-bottom: 0.4vw solid gray;
        }
        xp_c_de {
            width: 17%;
        }
        xp_c_re {
            width: 23%;
        }
        xp_c_po {
            width: 36%;
        }
        xp_c_ex {
            width: 18%;
        }

        .xp_panelLeft {
            width: 30%;
            font-size: 1.4vw;
            font-family: "Merriweather Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
            font-weight: 800;
            color: #e0e6ed;
            padding: 0.1vh 0.4vw; 
            text-align: end;
            justify-content: center;
        }
        .xp_bar {
            height: 100%;
            background-color: orange;
            border-radius: 0 1vh 0 1vh ;
            padding: 0 1vh 0 0;
            text-align: right;
            justify-content: center;
            font-size: 1.2vw;
            font-family: "Merriweather Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
            color: whitesmoke; 
        }
        .xp_smaltext {
            font-size: 1.1vw;
            font-family: "Merriweather Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
            color: #e0e6ed; 
        }
    }
}