/* roboto-condensed-regular - latin-ext_latin */
@font-face {
    font-family: 'Roboto Condensed';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/roboto-condensed-v18-latin-ext_latin-regular.eot'); /* IE9 Compat Modes */
    src: local('Roboto Condensed'), local('RobotoCondensed-Regular'),
         url('../fonts/roboto-condensed-v18-latin-ext_latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../fonts/roboto-condensed-v18-latin-ext_latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
         url('../fonts/roboto-condensed-v18-latin-ext_latin-regular.woff') format('woff'), /* Modern Browsers */
         url('../fonts/roboto-condensed-v18-latin-ext_latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
         url('../fonts/roboto-condensed-v18-latin-ext_latin-regular.svg#RobotoCondensed') format('svg'); /* Legacy iOS */
}

*[onclick]{
    cursor:pointer;
}

body
{
    background-image: linear-gradient(#000000aa, #000000aa), url("../images/custom/nebula.jpeg");
    background-size:cover;
    background-position:center center;
}

.AppContainer
{
    background-image: radial-gradient(#000000aa, #000000ff), url(../images/custom/bg4.jpeg);
    background-size:cover;
    background-position:center center;
    color:white;
    font-size:16px;
    font-family: "Roboto Condensed";
    max-width:1024px;
    margin:auto;
}

.AppContainer_version
{
    position:absolute;
    bottom:0px;
    right:0px;
    font-size:10px;
    color:#ffffff88;
}

.AppContainer_modal
{
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background-color:rgba(0,0,0,0.7);
    display:flex;
    align-items: center;
    justify-content: center;
    animation: boingIn 0.15s;
}

.AppContainer_modal_content
{

}

.IntroView
{
    padding:20px;
    overflow:auto;
    display: flex;
    align-items: center;
    justify-content: center;
    height:100%;
    background-image:radial-gradient(#00000066, black), url("../images/custom/icon.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

.IntroView_story
{
    padding:10px;
    border:1px solid #ffffffaa;
    background-color:#000000aa;
    animation: fadeIn 1s;
}

@keyframes fadeIn
{
    0%{
        opacity:0;
    }

    100%{
        opacity:1;
    }
}

@keyframes scrollIn
{
    0%{
        /*margin-right:-50%;*/
        width:0;
    }

    100%{
        /*margin-right:0%;*/
    }
}

@keyframes boingIn
{
    0%{
        transform: scale(2);
        opacity:0;
    }

    100%{
        transform:scale(1);
        opacity:1;
    }
}

.button
{
background-color:#006680ff;
border: 2px solid #55ddffe3;
padding:5px;
border-radius:7px;
text-align: center;
}

.button-2
{
    background-color:#536c5dff;
    color:white;
    border-color:#d7f4e3e3;
    font-weight: normal;
    font-size:12px;
}

.button-3
{
    background-color: #800000ff;
    border-color: #d40000e3;
    font-size:13px;
    padding:2px;
}

.button-4
{
    background-color: #2ca02cff;
    border-color: #87de87e3;
    font-size:13px;
    padding:2px;
}

.button-5
{
    font-size:13px;
}

.button-6
{
    /*box-shadow:0px 0px 5px white;*/
    animation: blink 0.5s infinite alternate-reverse;
}

@keyframes blink
{
    0%{
        filter:brightness(1);
    }

    100%{
        filter:brightness(1.5);
    }
}

.MainLayout
{
    height:100%;
    width:100%;
    display:flex;
    flex-direction: column;
}

.MainLayout_menuWrapper
{
    overflow:auto;
}

.MainLayout_menu
{
    background-color:rgb(0, 16, 36);
    display:flex;
    justify-content: space-between;
    width:100%;
}

.MainLayout_menu_item
{
    border-left:1px solid white;
    padding:15px 0px;
    font-size:12px;
    flex-grow:1;
    text-align: center;
    display:flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}

.MainLayout_menu_item-1
{
    background-color:#ffffff30;
}

.MainLayout_menu_item-2
{
    background-color:rgb(62, 124, 218);
    animation: blink 1s infinite alternate-reverse;
}

.MainLayout_header
{
    font-size:22px;
    padding:10px;
    border-bottom: 5px solid #5d6c53ff;
    display:flex;
    justify-content: space-between;
}

.MainLayout_content
{
    height:0;
    flex-grow: 1;
    overflow:auto;
}

.MainLayout_footer
{

}

.CharacterSelect
{
    display:flex;
    flex-direction: column;
    padding:20px;
}

.TextBox
{
    border:2px solid white;
    background-color:#00222bff;
    color:white;
    padding:5px;
}

.Dashboard
{
    width:100%;
    height:100%;
    overflow:auto;
    background-position: center center;
    background-size: cover;
}

.Dashboard_players
{
    padding:10px;
    font-size:14px;
}

.Dashboard_players_item
{
    display:inline-block;
    padding:2px;
}

.Dashboard_title
{
    display:flex;
    justify-content: space-between;
    background-color:white;
    color:#000080ff;
    align-items: center;
    padding:5px;
}

.Dashboard_title-2
{
    margin-bottom:20px;
}

.Dashboard_title-3
{
    background-color:#b9d2ff;
    font-weight: bold;
}

.Dashboard_title-4
{
    background-color:#000000aa;
    color:white;
}

.Dashboard_subtitle
{
    padding:5px;
    color:#80e5ffff;
}

.Dashboard_list
{
    display:grid;
    grid-template-columns: auto 50px 100px;
    margin-bottom:10px;
}

.Dashboard_list_item_boss
{
    color:red;
}

.Dashboard_list > *
{
    border-bottom:1px solid white;
    padding:5px;
    height:100%;
    width:100%;
}

.bar
{
width:100%;
height:15px;
background-color:#e3dbdbff;
position:relative;
border-bottom:1px solid white;
}

.bar-2
{
    background-color:transparent;
}

.bar-3
{
    background-color:rgb(255, 200, 99);
}

.bar_inner
{
    height:100%;
    width:50%;
    background-color: #2ca02cff;
}

.bar_text
{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    display:flex;
    align-items: center;
    justify-content: center;
    color:black;
    font-size:11px;
}

.bar_text-2
{
    color:white;
}

.Footer
{
    border-top:1px solid white;
}

.Footer_resources
{
    display:flex;
    justify-content: space-evenly;
    font-size:13px;
}

.Footer_resources_gold
{
    color:yellow;
}

.Footer_resources_energy
{
    color:rgb(212, 121, 255);
}

.EquipView_equip
{
    margin-bottom:21px;
}

.EquipView_attributesList
{
    display:grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    font-size:13px;
    margin-bottom:30px;
}

.EquipView_attributesList_title
{
    background-color:#000000aa;
    width:100%;
    height:100%;
    padding:10px;
    border:1px solid #ffffff33;
}

.EquipView_attributesList_title-2
{
    grid-column: span 2;
}

.EquipView_attributesList_value
{
    background-color:#00000033;
    width:100%;
    height:100%;
    padding:10px;
}

.EquipView_content
{
    padding:20px;
}

.EquipView_item
{
    display:grid;
    grid-template-columns: 70px 1fr auto;
    margin-bottom:15px;
    border:1px solid white;
    background-color:#00000055;
    padding-right:5px;
}

.EquipView_item-2
{
    margin-bottom:-1px;
    font-size:13px;
    border:1px solid #ffffff66;
}

.EquipView_item_action
{
    display:flex;
    width:100%;
    height:100%;
    align-items: center;
}

.EquipView_item_item
{
    padding:10px;

}

.EquipView_list
{
    display:grid;
    grid-template-columns: auto 100px;
}

.EquipView_list-2
{
    margin-bottom:20px;
}

.EquipView_list > *
{
    padding:5px;
    border-bottom:1px solid white;
}

.EquipView_list_item
{
    border-left:10px solid rgb(255, 196, 0);
    background-color:#ffffff22;
}

.EquipView_list_item_attributes
{
    display:flex;
    flex-wrap:wrap;
}

.EquipView_list_item_attributes_item
{
    background-color:#630000;
    padding:3px 4px;
    border-radius: 5px;
    font-size:13px;
    margin-right:4px;
    margin-bottom:2px;
}

.EquipView_list_item_attributes_item-2
{
    background-color:#636100;
}

.EquipView_list_item_attributes_item-3
{
    background-color:#135d00;
    border:1px solid white;
}

.CombatView
{
    display:flex;
    flex-direction: column;
    width:100%;
    height:100%;
    /*background-color:#550022ff;*/
    background-image:linear-gradient(to bottom, #6b0000aa, #ffee0033), url("../images/custom/bg1.jpeg");
    background-size:cover;
    background-position:center center;

}

.CombatView-2
{
    animation:shake 0.1s;
}

@keyframes shake
{
    33%{
        transform:translateX(1%);
    }

    66%{
        transform:translateX(-1%);
    }

    100%{
        transform:translateX(0%);
    }
}

.CombatView_modal
{
    background-color:#004c8a;
    padding:20px;
    border:1px solid rgb(0, 131, 192);
}

.CombatView_modal-2
{
    background-color:#8a001e;
    border:1px solid rgb(255, 73, 143);
}

.CombatView_modal-3
{
    margin:auto;
}

.CombatView_modal_rewards
{
    margin-bottom:10px;
}

.CombatView_modal_rewards_level
{
    color:orange;
}

.CombatView_modal_title
{
    font-size:20px;
    margin-bottom:10px;
}

.CombatView_enemyName
{
    text-align: right;
    padding:5px 20px;
}

.CombatView_enemyName-2
{
    text-align: left;
}

.CombatView_enemyBuffs
{
    margin-bottom:50px;
}

.CombatView_abilities
{
    display:grid;
    grid-template-columns: 1fr;
    flex-grow: 1;
    align-items: flex-end;
    align-content: flex-end;
}

.CombatView_abilities_item
{
    margin:5px;
    background-color:#782121ff;
    border:1px solid #ffaaaae3;
    padding:10px;
    text-align: center;
}

.CombatView_abilities_item-2
{
    animation: pop 0.2s alternate-reverse;
}

@keyframes pop{
    0%{
        transform:scale(1);
    }

    50%{
        transform:scale(1.2);
    }

    100%{
        transform:scale(1);
    }
}

.CombatView_console
{
    background-color:black;
    padding:10px;
    color:white;
    height:100px;
    font-size:12px;
    overflow:auto;
}

.LootboxesView
{

    position:relative;
    height:100%;
    width:100%;
    overflow:auto;
}

.LootboxesView_list
{
    display:grid;
    grid-template-columns: 1fr auto;
    align-content: flex-start;
}

.LootboxesView_list > *
{
    border-bottom:1px solid white;
    padding:5px;
    display:flex;
    align-items: center;
}

.LootboxesView_opening
{
    position:absolute;
    top:0;
    left:0;
    bottom:0;
    right:0;
    background-color:rgba(0,0,0,0.8);
    overflow:auto;
}

.LootboxesView_opening_bar
{
    height:10px;
    background-color:rgb(0, 255, 191);
    width:100%;
    animation: fill 2s;
}

@keyframes fill
{
    0%{
        width:0;
    }

    100%{
        width:100%;
    }
}

.LootboxesView_opening_rewards
{
    background-color:#004c8a;
    padding:20px;
    border:1px solid rgb(0, 131, 192);
    margin:auto;
    min-width:150px;
}

.LootboxesView_opening_rewards_item
{
    border:1px solid rgb(0, 162, 211);
    padding:5px;
    margin-bottom:5px;
}

.LoadingView
{
    background-color:#000000aa;
    font-size:20px;
    padding:30px;
    border-radius:20px;
    text-align: center;
}

.LoadingView_bar
{
    width:200px;
    height:10px;
    margin-bottom:10px;
    overflow:hidden;
}

.LoadingView_bar_inner
{
    background-image:linear-gradient(to right, #00000000, #006effd0, #00000000);
    background-position: 0px center;
    width:100%;
    height:100%;
    animation: bgRotate 1s infinite linear;
}

@keyframes bgRotate
{
    0%{
        transform:scale(0.5);
    }

    50%{
        transform:scale(2);
    }

    100%{
        transform:scale(0.5);
    }
}

@keyframes rotate
{
    0%{
        transform:rotate(0);
    }

    100%{
        transform:rotate(360deg);
    }
}

.ItemsView
{
    width:100%;
    height:100%;
}

.ItemsView_items
{
    display:grid;
    grid-template-columns: 1fr auto;
}

.ItemsView_title
{
    margin-bottom:20px;
    padding:5px;
}

.ItemsView_actions
{
    display:flex;
    margin-bottom:10px;
    padding:5px;
}

.ItemsView_items > *
{
    padding:10px;
    border-top:1px solid white;
}

.ItemsView_items_actions
{
    font-size:12px;
    display:flex;
    align-items: center;
    justify-content: space-between;
}

.ItemsView_items_actions > *
{
    margin-left:10px;
}

.ChangeZoneView_list
{
    display:flex;
    flex-direction: column;
}

.ChangeZoneView_list_item
{
    border-top:1px solid white;
    background-position: center center;
    background-size:cover;
}

.ChangeZoneView_list_item_content
{
    padding:20px;
    background-image:radial-gradient(#00000000, #000000aa);
    display:grid;
    grid-template-columns: 1fr auto 50px;
    grid-gap:20px;
    justify-content: space-between;
}

.OnlinePlayersList
{
    background:#00000077;
}

.ChatView
{
    height:100%;
    display:flex;
    flex-direction: column;
}

.ChatView_messages
{
    flex-grow:1;
    overflow:auto;
    font-size:12px;
}

.ChatView_messages_item
{
    border-bottom:1px solid white;
    padding:5px;
}

.ChatView_messages_item-2
{
    background-color:#004492;
}

.ChatView_messages_item_name
{
    font-weight: bold;
}

.BlacksmithView
{
    padding:20px;
    height:100%;
}

.BlacksmithView-2
{
    background-image:url("../images/custom/dialogue.jpeg");
    background-size:cover;
    overflow:auto;
}

.BlacksmithView-3
{
    background-image:radial-gradient(#00000066, #000000ff), url("../images/custom/magician.jpeg");
    background-size:cover;
    overflow:auto;
}

.BlacksmithView_table
{
    display:grid;
    grid-template-columns: 100px auto;
    border:2px solid white;
    width:100%;
    overflow:hidden;
    border-radius:11px;
}

.BlacksmithView_table > *
{
    padding:10px;
}

.BlacksmithView_table > *:nth-child(2n+1){
    background-color:#000000;
}

.BlacksmithView_table > *:nth-child(2n){
    background-color:#000000aa;
}

.BlacksmithView_table_actions
{
    grid-column: 1 / -1;
    text-align: center;
}

.BlacksmithView_dialogue
{
    padding:10px;
    background-color:#002770b2;
    border:2px solid white;
    border-radius: 7px;
    margin-bottom:20px;
}

.BlacksmithView_craftPanel
{
    border:1px solid rgba(255, 255, 255, 0.616);
    border-radius: 10px;
    background-color:#00000055;
    display:grid;
    grid-template-columns: 100px 1fr;
    overflow:hidden;
    align-items: center;
}

.BlacksmithView_craftPanel_header
{
    background-color:rgb(41, 41, 41);
    padding:10px;
    margin-right:10px;
}

.BlacksmithView_craftPanel_full
{
    grid-column: span 2;
}

select
{
    border:2px solid white;
    background-color:black;
    color:white;
    border-radius: 6px;
    padding:5px;
}

.modal
{
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background-color:#000000aa;
    display:flex;
    z-index:2;
}

.modal_content
{
    margin:auto;
    border:2px solid #ffffffaa;
    padding:10px;
    background-color:rgb(51, 51, 51);
    border-radius: 6px;
}

.IdleRewardPanel
{
    background-color:rgb(32, 32, 32);
    padding:10px;
    border:2px solid white;
    border-radius:11px;
}

.EndingView
{
    background-image: linear-gradient(#ffffffcc, #ffffffcc), url("../images/custom/icon.png");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    color:black;
    padding:20px;
    height:100%;
    font-size:30px;
    font-family: "Roboto Condensed";
    position:relative;
    animation: shrinkIn 20s forwards;
    animation-timing-function: linear;
    overflow:auto;
}

@keyframes shrinkIn
{
    0%{
        padding-top:500px;
    }

    100%{
        /*padding-top:0px;*/
    }
}

.EndingView_overlay
{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background-color:white;
    opacity:1;
    animation: fadeOut 10s forwards;
    animation-delay: 2s;
}

@keyframes fadeOut
{
    0%{
        opacity:1;
    }

    100%{
        opacity:0;
        height:0%;
    }
}

.MessageModal
{
    background-color:black;
    padding:20px;
    display:flex;
    flex-direction: column;
    border:2px solid white;
    border-radius: 11px;
    align-items: center;
    max-width: 90%;
    min-width:300px;
    margin:auto;
    text-align: center;
}

.MessageModal_message
{
    margin-bottom:20px;
}