/* User Utility Page*/
.user-utility-not-verified {
    display: none;
    background-image: url("/images/UserUtility/stats_logged_bg.jpg");
}
.user-utility-not-logged-in {
    display: none;
    background-image: url("/images/UserUtility/stats_logged_bg.jpg");
}
.user-utility-not-linked{
    display: none;
    background-image: url("/images/UserUtility/stats_logged_bg.jpg");
}
.uu-inactive-container {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow:hidden;
}
.uu-inactive-img {
    padding-top: 100px;
}
.uu-top-bg {
    background-image: url("/images/UserUtility/ds_resources_bg.png");
    background-repeat: no-repeat;
    background-size: cover;
}
.uu-top {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.uu-top-right {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-basis: 50%;
    width: 100%;
}
.uu-gif-mobile  {
    display: none;
}
.uu-top-left {
    flex-basis: 50%;
    display: flex;
    justify-content: center;
}
.uu-top-left-img{
    display: block;
}
.uu-top-left-img-small {
    display: none;
}
.uu-launch-game-btn {
    font-size: 3rem;
}
.uu-resources {
    display: flex;
    flex-direction: column;
    background-color: #387B85;
    border-radius: 10px;
    border: 2px solid black;
    margin: 5px 10px 5px 10px;
    width: 487px;
}
.uu-resources-grid {
    display: inline-grid;
    width: 100%;
    grid-template-columns: 50% 50%;
    grid-template-rows: auto;
    column-gap: 5px;
    row-gap: 5px;
    justify-items: center;
    background-color: #387B85;
    border-radius: 10px;
    padding: 5px 10px 5px 5px;
}
.uu-resources-label {
    background-color: #316369;
    font-size: 2rem;
    color: #73d1ed;
    padding-left: 10px;
    border-radius: 10px 10px 0px 0px;
    font-family: "acumin-variable",sans-serif;
    font-variation-settings: 'wght' 800, 'wdth' 67.5, 'slnt' 0;

}
.uu-resources-item {
    border: 1px solid black;
    border-radius: 5px;
    width: 100%;
    margin: 0px 5px 0px 5px;
    display: flex;
    flex-direction: row;
    font-size: 1.5rem;
    color: white;
    align-items: center;
    font-family: "acumin-variable",sans-serif;
    font-variation-settings: 'wght' 600, 'wdth' 90, 'slnt' 0;
    overflow: hidden;
}
.uu-resources-item-img {
    border-right: 2px solid black;
}
.uu-resources-item-stat {
    padding-left: 5px;
}
.uu-alliance {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    background-color: #387B85;
    border: 2px solid black;
    border-radius: 10px;
    margin: 5px 10px 5px 10px;
    width: 487px;
}
.uu-alliance-grid {
    width: 66%;
    display: grid;
    grid-template-columns: 50% 50%;
    grid-template-rows: auto;
    grid-template-areas: 
        "label label"
        "name name"
        "glory glory"
        "allies allies"
    ;
    border-right: 2px solid black;
    border-radius: 10px 0px 0px 10px;
}
.uu-alliance-label {
    grid-area: label;
    background-color: #316369;
    font-size: 1.5rem;
    color: #73d1ed;
    padding-left: 10px;
    border-radius: 10px 0px 0px 0px;
    font-family: "acumin-variable",sans-serif;
    font-variation-settings: 'wght' 800, 'wdth' 67.5, 'slnt' 0;
}
.uu-alliance-name {
    grid-area: name;
    font-size: 2rem;
    color: white;
    padding-left: 10px;
    font-family: "acumin-variable",sans-serif;
    font-variation-settings: 'wght' 800, 'wdth' 67.5, 'slnt' 0;
    overflow: hidden;
}
.uu-alliance-medals {
    grid-area: medals;
    border: 1px solid black;
    border-radius: 5px;
    margin: 5px 10px 5px 10px;
}
.uu-alliance-glory {
    grid-area: glory;
    border: 1px solid black;
    border-radius: 5px;
    margin: 5px 10px 5px 10px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 0px 3px 0px 3px;
    font-size: 1.5rem;
    color: white;
    font-family: "acumin-variable",sans-serif;
    font-variation-settings: 'wght' 600, 'wdth' 90, 'slnt' 0;
    overflow: hidden;
}
.uu-alliance-allies {
    grid-area: allies;
    padding-left: 10px;
    font-size: 1rem;
    color: white;
    display: flex;
    flex-direction: row;
    align-items: center;
    font-family: "acumin-variable",sans-serif;
    font-variation-settings: 'wght' 800, 'wdth' 67.5, 'slnt' 0;
    overflow: hidden;
}
.uu-alliance-allies-stat {
    padding-left: 5px;
}
.uu-alliance-crest {
    width: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.uu-mid-bg {
    background-image: url("/images/UserUtility/ds_combat_bg.png");
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
}
.uu-combat-label-container {
    background-color: #142229;
    padding: 10px;
}
.uu-combat-label {
    color: #588ca8;
    font-size: 3rem;
    font-family: "acumin-variable",sans-serif;
    font-variation-settings: 'wght' 800, 'wdth' 67.5, 'slnt' 0;
}
.uu-mid {
    display: grid;
    grid-template-columns: 466px 721px;
    justify-content: center;
}
.uu-combat-left {
    grid-column: 1;
   display: grid;
   grid-template-columns: repeat(24, 20px);
   position: relative;
}
.uu-combat-img-back-left {
    grid-column: 1/span 8;
    grid-row: 1;
    z-index: 1;
}
.uu-combat-left-stat {
    grid-column: 3/span 10;
    grid-row: 1;
    z-index: 2;
}
.uu-combat-left-stat-grid {
    display: grid;
   grid-template-rows: repeat(22, 20px);
   grid-template-columns: repeat(20, 20px);
   position: relative;
}
.uu-league-container-mobile {
    display: none;
}
.uu-league-container {
    grid-row: 20;
    grid-column: 4/span 20;
    background-color: rgba(0, 0, 0, 0.46);
    width: 375px;
    height: 50px;
    margin-right: 1px;
    clip-path: polygon(0% 0%, 97% 0%, 100% 100%, 2.5% 100%);
    color: white;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding-left: 10px;
}
.uu-league-name {
    width: 200px;
    font-size: 2rem;
    font-family: "acumin-variable",sans-serif;
    font-variation-settings: 'wght' 800, 'wdth' 67.5, 'slnt' 0;
    overflow: hidden;
}
.uu-medal-img {
    
}
.uu-medal-flex {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    font-size: 1rem;
    font-family: "acumin-variable",sans-serif;
    font-variation-settings: 'wght' 600, 'wdth' 90, 'slnt' 0;
    line-height: 15px;
}
.uu-medals-stat {
    color: yellow;
}
.uu-combat-right {
    grid-column: 2;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    position: relative;
 }
 .uu-combat-img-back-right {
     grid-column: 1/span 8;
     grid-row: 1;
     z-index: 1;
 }
 .uu-combat-img-back-right-mobile {
    display: none;
}
 .uu-combat-right-stat {
     grid-column: 3/span 15;
     grid-row: 1;
     z-index: 2;
 }
 .uu-combat-right-stat-grid {
    display: grid;
    grid-template-rows: repeat(4, 1fr);
    grid-template-columns: repeat(15, 1fr);
    position: relative;
 }
 .uu-active-combat-stat-container {
    grid-row: 4;
    grid-column: 5/span 10;
    background-color: #1E4546;
    /* width: 560px; */
    margin-right: 1px;
    color: white;
    display: grid;
    grid-template-columns: 70px 320px;
    grid-template-rows: auto;
    justify-content: center;
    margin-top: 10px;
    border-radius: 10px;
    font-family: "acumin-variable",sans-serif;
    font-variation-settings: 'wght' 800, 'wdth' 67.5, 'slnt' 0;
 }
 .uu-peace-treaty-img {
    grid-column: 1;
    border: 1px solid #458082;
    border-radius: 10px;
    margin: 5px;
 }
 .uu-peace-treaty-container {
    grid-column: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: white;
    font-size: 1.5rem;
    border: 1px solid #458082;
    border-radius: 10px;
    margin: 5px;
 }
 .uu-peace-treaty-stat {
    color: yellow;
    font-size: 2rem;
 }
 .uu-triumph-img {
    grid-column: 3;
    border: 1px solid #458082;
    border-radius: 10px;
    margin: 5px;
 }
 .uu-triumph-container {
    grid-column: 4;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: white;
    font-size: 1.5rem;
    border: 1px solid #458082;
    border-radius: 10px;
    margin: 5px;
 }
 .uu-triumph-stat {
    color: yellow;
    font-size: 2rem;
 }
.uu-bottom-bg {
    background-image: url("/images/UserUtility/ds_leaderboard_bg.png");
    background-repeat: no-repeat;
    background-size: cover;
}
.uu-bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.uu-combat-grid {
    width: 100%;
    display: grid;
    grid-template-columns: 309px 309px 309px 309px;
    grid-template-rows: auto;
    justify-content: center;
    grid-template-areas: 
        "victories victories losses losses"
        "troopstrained goldstolen oilstolen foodstolen"
    ;
    column-gap: 10px;
    row-gap: 5px;
    margin-top: 70px;
}
.uu-victories {
    grid-area: victories;
    background-image: url("/images/UserUtility/DS_Icon_wide_win.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    border: 2px solid #458082;
    height: 290px;
}
.uu-victories-overlay {
    background-color: rgba(0, 0, 0, 0.3);
    width: 98%;
    height: 48%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 0px 0px 10px 10px;
    font-family: "acumin-variable",sans-serif;
    font-variation-settings: 'wght' 800, 'wdth' 67.5, 'slnt' 0;
    overflow: hidden;
}
.uu-victories-label {
    font-size: 2rem;
    color: white;
}
.uu-victories-stat {
    font-size: 3rem;
    color: white;
}
.uu-losses {
    grid-area: losses;
    background-image: url("/images/UserUtility/DS_Icon_wide_loss.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    border: 2px solid #458082;
    height: 290px;
}
.uu-losses-overlay {
    background-color: rgba(0, 0, 0, 0.3);
    width: 98%;
    height: 48%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 0px 0px 10px 10px;
    font-family: "acumin-variable",sans-serif;
    font-variation-settings: 'wght' 800, 'wdth' 67.5, 'slnt' 0;
    overflow: hidden;
}
.uu-losses-label {
    font-size: 2rem;
    color: white;
}
.uu-losses-stat {
    font-size: 3rem;
    color: white;
}
.uu-combat-item-overlay {
    background-color: rgba(0, 0, 0, 0.3);
    width: 99%;
    height: 30%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    border-radius: 0px 0px 10px 10px;
    padding: 10px;
    font-family: "acumin-variable",sans-serif;
    font-variation-settings: 'wght' 800, 'wdth' 67.5, 'slnt' 0;
    overflow: hidden;
}
.uu-combat-item-label {
    font-size: 1.5rem;
    color: white;
}
.uu-troops-trained {
    grid-area: troopstrained;
    background-image: url("/images/UserUtility/DS_Icon_troop.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    border-radius: 10px;
    border: 2px solid #458082;
    height: 282px;
}
.uu-troops-trained-stat {
    font-size: 1.5rem;
    color: white;
}
.uu-gold-stolen {
    grid-area: goldstolen;
    background-image: url("/images/UserUtility/DS_Icon_gold.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    border-radius: 10px;
    border: 2px solid #458082;
    height: 282px;
}
.uu-gold-stolen-stat {
    font-size: 1.5rem;
    color: white;
}
.uu-oil-stolen {
    grid-area: oilstolen;
    background-image: url("/images/UserUtility/DS_Icon_oil.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    border-radius: 10px;
    border: 2px solid #458082;
    height: 282px;
}
.uu-oil-stolen-stat {
    font-size: 1.5rem;
    color: white;
}
.uu-food-stolen {
    grid-area: foodstolen;
    background-image: url("/images/UserUtility/DS_Icon_food.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    border-radius: 10px;
    border: 2px solid #458082;
    height: 282px;
}
.uu-food-stolen-stat {
    font-size: 1.5rem;
    color: white;
}
.uu-war {
    display: flex;
    flex-direction: column;
    width: 1266px;
    background-color: #14232a;
    margin-bottom: 10px;
}
.uu-war-label {
    text-align: left;
    color: #588ca8;
    font-size: 2rem;
    font-family: "acumin-variable",sans-serif;
    font-variation-settings: 'wght' 800, 'wdth' 67.5, 'slnt' 0;
    display: none;
    padding: 10px;
}
.uu-war-item {
    display: grid;
    grid-template-columns: 13% 34% 6% 34% 13%;
    grid-template-rows: auto;
    grid-template-areas: 
    "winner-score winner-name vs loser-name loser-score"
    ;
    color: #588ca8;
    margin: 5px 10px 5px 10px;
    font-family: "acumin-variable",sans-serif;
    font-variation-settings: 'wght' 800, 'wdth' 67.5, 'slnt' 0;
    border: 1px solid black;
}
.uu-war-star {
    width: 40px;
}
.uu-score-flex {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    font-size: 2.5rem;
}
.uu-score-label {
    font-size: 2rem;
}
.uu-winner-score {
    grid-area: winner-score;
    background-color: #085d82;
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.uu-winner-name {
    grid-area: winner-name;
    background-color: #0a2740;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 10px;
    font-size: 2rem;
}
.uu-vs {
    grid-area: vs;
    background-color: #000000;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2rem;
}
.uu-loser-name {
    grid-area: loser-name;
    background-color: #0a2740;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 10px;
    font-size: 2rem;
}
.uu-loser-score {
    grid-area: loser-score;
    background-color: #6a0f0f;
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.uu-world {
    display: flex;
    flex-direction: column;
    width: 100%;
    background-color: #14232a;
    width: 1266px;
}
.uu-world-label {
    text-align: left;
    color: #588ca8;
    font-size: 3rem;
    font-family: "acumin-variable",sans-serif;
    font-variation-settings: 'wght' 800, 'wdth' 67.5, 'slnt' 0;
    padding: 10px;
}
.uu-world-item {
    display: grid;
    grid-template-columns: 261px 675px 310px;
    grid-template-rows: 91px;
    grid-template-areas: 
    "world-img world-name world-stat"
    ;
    color: #588ca8;
    margin: 5px 10px 5px 10px;
    font-family: "acumin-variable",sans-serif;
    font-variation-settings: 'wght' 800, 'wdth' 67.5, 'slnt' 0;
    border: 1px solid black;
    height: 91px;
    width: 1248px;
}
.uu-world-img {
    grid-area: world-img;
}
.uu-world-img-lg {
    display: block;
}
.uu-world-img-mobile {
    display: none;
}
.uu-world-name-flex {
    grid-area: world-name;
    color: #588ca8;
    background-color: #0a2740;
    font-size: 2.5rem;
    height: 89px;
    display: flex;
    align-items: center;
    padding: 10px;
}
.uu-world-flex {
    grid-area: world-stat;
    color: white;
    font-size: 2rem;
    background-color: #081f32;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 89px;
    overflow: hidden;
}
.uu-world-stat-label {
    color: #588ca8;
    font-size: 1rem;
}
/*  ------- Reactive Sizing -------  */


/* Mobile Screen */
@media screen and (max-width: 790px) {

    .user-utility .subheader-card-container-right-content {
        width: 100%;
    }

    .uu-inactive-img {
        width:100%;
    }

    .uu-top-left {
        display: none;
    }
    .uu-top-right {
        margin: 150px 0px 50px 0px;
    }
    .uu-gif-mobile  {
        z-index: 3;
        position: absolute;
        display: block;
        top: 0;
    }
    .uu-gif-mobile-img {
        height: 650px;
    }
    .uu-launch-game-btn {
        width: 320px;
        z-index: 4;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .uu-launch-game-btn-img {
        width: 320px;
    }
    .uu-resources {
        width: 320px;
        z-index: 4;
    }
    .uu-resources-grid {
        grid-template-columns: 100%;
    }
    .uu-alliance {
        width: 320px;
        flex-direction: column;
        z-index: 4;
    }
    .uu-alliance-label{
        border-radius: 10px 10px 0px 0px;
    }
    .uu-alliance-grid {
        width: 100%;
        border-right: none;
        border-radius: none;
    }
    .uu-alliance-crest {

    }
    .uu-combat-label {
        font-size: 2rem;
    }
    .uu-mid {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .uu-combat-left {
        display: none;
    }
    .uu-combat-right {
        grid-template-columns: repeat(8, 40px);
        
    }
    .uu-combat-img-back-right {
        display: none;
    }
    .uu-combat-img-back-right-mobile {
        display: block;
        width: 350px;
        grid-column: 1/span 8;
        grid-row: 1;
        z-index: 1;
    }
    .uu-combat-right-stat {
        grid-column: 1/ span 8;
    }
    .uu-combat-right-stat-grid {
        grid-template-rows: repeat(3, 1fr);
        grid-template-columns: repeat(8, 40px);
    }
    .uu-league-container-mobile {
        grid-row: 1;
        grid-column: 1/ span 5;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        color: white;
        background-color: rgba(0, 0, 0, 0.46);
        height: 60px;
    }
    .uu-league-name {
        font-size: 1.5rem;
    }
    .uu-medal-flex {
        font-size: 0.75rem;
    }
    .uu-active-combat-stat-container {
        grid-row: 3;
        grid-column: 1/span 8;
        width: 320px;
        grid-template-columns: 70px 235px;
        grid-template-rows: repeat(1, 1fr);
    }
    .uu-peace-treaty-img {
        grid-row: 1;
    }
    .uu-peace-treaty-container {
        grid-row: 1;
    }
    .uu-triumph-img {
        grid-column: 1;
        grid-row: 2;
    }
    .uu-triumph-container {
        grid-column: 2;
        grid-row: 2;
    }
    .uu-combat-grid {
        grid-template-columns: 155px 155px;
        grid-template-rows:auto;
        grid-template-areas:
        "victories victories"
        "losses losses"
        "troopstrained goldstolen"
        "oilstolen foodstolen";
        justify-content: center;
    }
    .uu-victories-overlay {
        width:100%;
    }
    .uu-losses-overlay {
        width:100%;
    }
    .uu-combat-item-label {
        font-size: 1rem;
    }
    .uu-war {
        width: 320px;
    }
    .uu-war-item {
        grid-template-columns: 40% 60%;
        grid-template-rows: auto;
        grid-template-areas: "winner-score winner-name"
        "vs vs" 
        "loser-score loser-name";
        margin: 10px;
        border: 4px solid black;
    }
    .uu-vs {
        background-color: #14232a;
    }
    .uu-world {
        width: 320px;

    }
    .uu-world-img-lg {
        display: none;
    }
    .uu-world-img-mobile {
        display: block;
    }
    .uu-world-label {
        font-size: 2rem;
    }
    .uu-world-item {
        grid-template-columns: 100px 105px 95px;
        grid-template-rows: auto;
        width: 302px;
    }
    .uu-world-flex {
        font-size: 1.25rem;
    }
    .uu-world-name-flex {
        font-size: 1.25rem;
        padding: 5px;
    }
}


/* Small Screen */
@media screen and (min-width: 791px) and (max-width: 1049px) {
    .uu-gif-mobile  {
        display: none;
    }
    .uu-launch-game-btn-img {
        width: 350px;
    }
    .uu-resources {
        width: 350px;
    }
    .uu-top-left-img {
        display: none;
    }
    .uu-top-left-img-small {
        display: block;
        width: 350px;
    }
    .uu-alliance {
        width: 350px;
    }
    .uu-mid {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .uu-combat-left {
        display: none;
    }
    .uu-combat-right {
        grid-template-columns: repeat(8, 1fr);
        
    }
    .uu-combat-img-back-right {
        display: none;
    }
    .uu-combat-img-back-right-mobile {
        display: block;
        width: 450px;
        grid-column: 2/span 7;
        grid-row: 1;
        z-index: 1;
    }
    .uu-league-container-mobile {
        grid-row: 1;
        grid-column: 1/ span 5;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        color: white;
        background-color: rgba(0, 0, 0, 0.46);
        height: 60px;
    }
    .uu-combat-right-stat {
        grid-column: 1/ span 8;
    }
    .uu-combat-right-stat-grid {
        grid-template-rows: repeat(4, 1fr);
        grid-template-columns: repeat(8, 1fr);
    }
    .uu-active-combat-stat-container {
        grid-row: 4;
        grid-column: 1/span 8;
        width: 580px;
        grid-template-columns: 70px 500px;
        grid-template-rows: repeat(1, 1fr);
    }
    .uu-peace-treaty-img {
        grid-row: 1;
    }
    .uu-peace-treaty-container {
        grid-row: 1;
    }
    .uu-peace-treaty-stat {
        font-size: 2.5rem;
    }
    .uu-triumph-img {
        grid-column: 1;
        grid-row: 2;
    }
    .uu-triumph-container {
        grid-column: 2;
        grid-row: 2;
    }
    .uu-combat-grid {
        grid-template-columns: 175px 175px 175px 175px;
    }
    .uu-combat-item-label {
        font-size: 1.25rem;
    }
    .uu-war {
        width: 750px;
    }
    .uu-score-label {
        font-size: 1.25rem;
    }
    .uu-score-flex {
        font-size: 1.75rem;
    }
    .uu-world {
        width: 750px;
    }
    .uu-world-item {
        grid-template-columns: 200px 350px 180px;
        grid-template-rows: 71px;
        height: 71px;
        width: 732px;
    }
    .uu-world-img {
        width: 200px;
    }
    .uu-world-img img {
        width: 200px;
    }
    .uu-world-name-flex {
        font-size: 2rem;
        height: 69px;
    }
    .uu-world-flex {
        height: 69px;
    }
}
/* Medium Screen */
@media screen and (min-width: 1050px) and (max-width: 1280px) {
    .uu-launch-game-btn-img {
        width: 400px;
    }
    .uu-resources {
        width: 400px;
    }
    .uu-gif-mobile  {
        display: none;
    }
    .uu-top-left-img {
        display: none;
    }
    .uu-top-left-img-small {
        display: block;
        width: 350px;
    }
    .uu-alliance {
        width: 400px;
    }
    .uu-mid {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .uu-combat-left {
        display: none;
    }
    .uu-combat-right {
        grid-template-columns: repeat(8, 1fr);
        
    }
    .uu-combat-img-back-right {
        display: none;
    }
    .uu-combat-img-back-right-mobile {
        display: block;
        width: 450px;
        grid-column: 2/span 7;
        grid-row: 1;
        z-index: 1;
    }
    .uu-league-container-mobile {
        grid-row: 1;
        grid-column: 1/ span 5;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        color: white;
        background-color: rgba(0, 0, 0, 0.46);
        height: 60px;
    }
    .uu-combat-right-stat {
        grid-column: 1/ span 8;
    }
    .uu-combat-right-stat-grid {
        grid-template-rows: repeat(4, 1fr);
        grid-template-columns: repeat(8, 1fr);
    }
    .uu-active-combat-stat-container {
        grid-row: 4;
        grid-column: 1/span 8;
        width: 580px;
        grid-template-columns: 70px 500px;
        grid-template-rows: repeat(1, 1fr);
    }
    .uu-league-container-mobile {
        grid-row: 1;
        grid-column: 1/ span 5;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        color: white;
        background-color: rgba(0, 0, 0, 0.46);
        height: 60px;
    }
    .uu-league-name {
        font-size: 2rem;
    }
    .uu-medal-flex {
        font-size: 1rem;
    }
    .uu-peace-treaty-img {
        grid-row: 1;
    }
    .uu-peace-treaty-container {
        grid-row: 1;
    }
    .uu-peace-treaty-stat {
        font-size: 2.5rem;
    }
    .uu-triumph-img {
        grid-column: 1;
        grid-row: 2;
    }
    .uu-triumph-container {
        grid-column: 2;
        grid-row: 2;
    }
    .uu-combat-grid {
        grid-template-columns: 175px 175px 175px 175px;
    }
    .uu-combat-item-label {
        font-size: 1.25rem;
    }
    .uu-war {
        width: 750px;
    }
    .uu-score-label {
        font-size: 1.25rem;
    }
    .uu-score-flex {
        font-size: 1.75rem;
    }
    .uu-world {
        width: 750px;
    }
    .uu-world-item {
        grid-template-columns: 200px 350px 180px;
        grid-template-rows: 71px;
        height: 71px;
        width: 732px;
    }
    .uu-world-img {
        width: 200px;
    }
    .uu-world-img img {
        width: 200px;
    }
    .uu-world-name-flex {
        font-size: 2rem;
        height: 69px;
    }
    .uu-world-flex {
        height: 69px;
    }
}