/* Make the scrollbar always visible.  This ensures centered things don't shift left/right based on page sizes */
html {
    overflow-y: scroll;
}

body { 
    line-height: 1.4;
}

textarea { 
    line-height: 1.2;
}

.fill {
    height: 100%;
}

th { 
    text-align: center
}

.BackgroundImage {
    background-image: linear-gradient(-10deg, #33333322 0%, transparent 70%), url("https://warzonecdn.com/Images/Warzone/Background2.jpg");
    background-repeat: no-repeat, repeat;
    background-size: 100% 100%, 10px 15px;
}

.popover, .popover-header, .popover-body {
    background-color: #565353;
    color: #eae6e6;
}

/*Forums */
blockquote {
    padding-left: 30px;
    margin-bottom: 0px;
}

hr {
    border-top: 1px solid white;
}

.DiscussionPostDiv {
    max-width: 346px;
}

@media (min-width: 576px) { 

}

@media (min-width: 768px) { 
    .DiscussionPostDiv {
        max-width: 530px;
    }
}

@media (min-width: 992px) { 
    .DiscussionPostDiv {
        max-width: 762px;
    }
}

@media (min-width: 1200px) { 
    .DiscussionPostDiv {
        max-width: 970px;
    }
}



/********************************/
/************ Modals ************/
/********************************/
.modal-content { 
    background-color: #dadada;
    color: black;
}
.modal-content a {
    color: blue;
}
/*For some reason, we must !important the padding-right on body and MainNavBar otherwise opening a bootstrap modal causes things to shift around.  Might be a bootstrap bug.*/
.modal-open {
    padding-right: 0px !important;
}
#MainNavBar {
    padding-right: 16px !important;
}

/*************************************/
/*********** Backgrounds *************/
/*************************************/
body {
    background-color: #0f0802;
}

.bg-blue {
    background-color: #021127 !important;
    border: 1px solid #2b556f;
}

.bg-green {
    background-color: #0e1504;
    border: 1px solid #4b5733;
}

.bg-gray {
    background-color: #151414;
    border: 1px solid #4e4e4e;
}

.bg-black {
    background: black !important;
    border: 1px solid #444343;
}

.card {
    background-color: rgba(0, 0, 0, 0);
}
.card-header {
    background-color: rgba(115, 115, 115, 0.18823529411764706);
}

.list-group-item {
    background-color: rgba(255, 255, 255, 0.13);
    color: #c3c3c3;
}
.list-group-item-action:focus, .list-group-item-action:hover {
    background-color: rgba(125, 126, 127, 0.4);
    color: #c3c3c3;
}

.btn-primary {
    background-color: #0E5C83;
    border-color: #07003a;
}

.btn-primary.active, .btn-primary:active, .show>.btn-primary.dropdown-toggle {
    background-color: #2a6aaf;
}


/*************************************/
/*********** Text colors *************/
/*************************************/
body {
    color: #c7c7c7;
}

a {
    color: #5a9da5;
}

.text-muted {
    color: #6b6b6a !important;
}

a, a:hover, a:focus {
    text-decoration: none;
}

.text-gold {
    color: #f0d56a !important;
}

.text-gray {
    color: #e4dcd9 !important;
}

.text-brown {
    color: #460826 !important;
}

.text-black {
    color: #524e50 !important;
}

pre {
    color: #c7c7c7;
}

.ui-widget-content a {
    color:  #5a9da5;
}



/*************************************/
/*********** Footer      *************/
/*************************************/

/*   http://v4-alpha.getbootstrap.com/examples/sticky-footer-navbar/ */
html {
    position: relative;
    min-height: 100%;
}

footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    /* Set the fixed height of the footer here */
    height: 30px;
    line-height: 21px; /* Vertically center the text there */
    color: #e4dcd9;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    padding-top: 4px;
    font-size: 12px;
    background-color: #1d1d1d; /* for before the image loads */
}

footer a, footer a:visited, footer a:hover {
    color: #9e9c9c;
}

footer > .container {
    padding-right: 15px;
    padding-left: 15px;
}


/************************************************************************/
/**************************** Helper Clases *****************************/
/************************************************************************/

h1,
h2,
h3,
h4,
h5,
h6,
p {
    margin: 0 0 10px 0;
}

.br-4 {
    border-radius: 4px;
}

/************************************/
/************ Font sizes ************/
/************************************/
.text-xs {
    font-size: 12px !important;
}

.text-small {
    font-size: 16px !important;
}

.text-medium {
    font-size: 22px !important;
}

.text-large {
    font-size: 28px !important;
}

.text-xlarge {
    font-size: 32px !important;
}

.text-xxlarge {
    font-size: 36px !important;
}

.text-xxxlarge {
    font-size: 40px !important;
}

@media (max-width: 768px) {
    .text-small {
        font-size: 14px !important;
    }

    .text-medium {
        font-size: 18px !important;
    }

    .text-large {
        font-size: 24px !important;
    }

    .text-xlarge {
        font-size: 28px !important;
    }

    .text-xxlarge {
        font-size: 32px !important;
    }

    .text-xxxlarge {
        font-size: 36px !important;
    }
}
/***********************************************/
/***************** Generic classes ******************/
/***********************************************/
.flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.bold {
    font-weight: bold;
}


/***********************************************/
/***************** Navigation ******************/
/***********************************************/

.dropdown-item:focus, .dropdown-item:hover {
    background-color: #404244;
}
#MailLink:hover {  
    text-decoration: none 
}

.activeTab {
    color: white !important;
}

#MainNavBar {
    background-color: #252625; /* for before the image loads */
    background-image: radial-gradient(circle at center, #88888855, transparent), url("https://warzonecdn.com/Images/Warzone/MainNavBacking2.jpg");
    background-repeat: no-repeat, repeat;
    background-size: 100% 100%, 194px 194px; 
    border-bottom: 2px solid #838282;
}


.navbar-light .navbar-toggler {
    color: rgb(253, 238, 130);
    border-color: rgb(253, 238, 130);
    outline: none !important;
    cursor: pointer;
}

.navbar-dark .navbar-nav .nav-link {
    color: #a28958;
    font-weight: bold;
}

#PlayBtn {
    background-image: url("https://warzonecdn.com/Images/Warzone/BtnRed.png");
    background-repeat: no-repeat;
    background-size: contain;
    width: 87px;
    text-align: center;
}

#PlayBtn a {
    color: #f4ffca;
}

.dropdown-menu {
    background-color: #101010;
    border: 1px solid #5f5034;
    right: -30px;
    left: auto;
}

.dropdown-menu .dropdown-item {
    padding: .3rem 1.5rem;
    color: #dadada;
}

.dropdown-menu .dropdown-item:nth-of-type(even):not(:hover) {
    background-color: black;
}

.dropdown-divider {
    border-top: 1px solid #405d40;
}

/***************************/
/*******Home Page **********/
/***************************/

#HomeSection {
    background-image: url("https://warzonecdn.com/Images/Warzone/warzone.jpg");
    background-repeat: no-repeat;
    height: 570px;
    background-size: contain;
    background-position: center;
}

#PlayNowBtnContainer {
    position: relative;
    margin-top: 14rem;
}

#PlayNowBtn {
    color: #f8efb4;
    background-image: url("https://warzonecdn.com/Images/Warzone/BtnRedBig.png");
    background-size: cover;
    width: 200px;
    height: 94px;
    padding-top: 1.8rem;
    position: relative;
}

#PlayNowBtnShadow {
    background-image: url("https://warzonecdn.com/Images/Warzone/BtnRedBigShadow.png");
    background-size: cover;
    width: 292px;
    height: 185px;
    position: absolute;
    left: -46px;
    top: -34px;
}

/***************************/
/*******Community***********/
/***************************/
.MapThumbnail {
    width: 200px;
    height: 100px;
}

.nav-tabs {
    border-bottom: 2px solid #524e50;
}

.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link {
    color: #fdee82;
    background-color: #524e50;
    border-color: #524e50 #524e50 #524e50;
}

.nav-tabs .nav-link {
    border: 2px solid #524e50;
    border-top-left-radius: 0.25rem;
    border-top-right-radius: 0.25rem;
    border-bottom: none;
    color: #524e50;
    font-weight: bold;
}

.nav-tabs .nav-link:focus, .nav-tabs .nav-link:hover {
    border-color: #524e50 #524e50 #e4dcd9;
}

.nav-tabs .nav-item {
    margin: 0 4px 0 0;
}

/************************/
/******* Tables *********/
/************************/


.table {
    border: 1px solid #2c2822; /* outside border */
    background-color: #101010;
}

.table td, .table th {
    border-top: 1px solid #2c2822; /*inside border*/
}

.table-striped tbody tr:nth-of-type(even) {
    background-color: rgba(0,0,0,.25) /* this assigns another 25% background on top of the 25% background specified in .table, so it ends up being darker even with the same value */
}

.table thead th {
    border-bottom: 2px solid #565656;
}


/*************************/
/*******Sign In***********/
/*************************/


/*************************/
/******* Livestream*******/
/*************************/


#LivestreamContainer {
    max-width: 180px;
    font-size: 9px;
}
#LivestreamInner {
    padding: 1px 5px 1px 5px;
    background-color: rgba(0,0,0,0.7);
    color: #888;
}
#LivestreamTimer {
    color: gray;
}
#LivestreamViewers { 
    color: gray;
}

/*************************/
/******* MyGamesGame******/
/*************************/

.MyGamesGameBoxesRow {
    display: inline-block; 
    max-width: 400px;
    height: 16px;
}


.MyGamesGameBox {
    display: inline-block; 
    cursor:default; 
    text-align: center; 
    color: black; 
    margin-right: 1px; 
}

.MyGamesGameBox img {
    vertical-align: top;
}

.MyGamesGameBoxDot, .MyGamesGameBoxOpenSeat, .MyGamesGameBoxAI {
    position: relative; 
    top: -5px;
}

.MyGamesGameThumbnail {
    vertical-align: bottom;
}

.BootTimeLabel {
    text-shadow: -1px -1px 1px #000, 1px -1px 1px #000, -1px 1px 1px #000, 1px 1px 1px #000;
    position: absolute;
    right: 4px;
    bottom: -3px;
    font-weight: bold;
    font-size: 15px;
}

/***********************************/
/****** Old "region" table style ***/
/***********************************/

.region th:first-child
{
    border-top-left-radius: 8px;
}

.region th:last-child
{
    border-top-right-radius: 8px;
}

.region th
{
    /*background-image: url('https://warzonecdn.com/Images/RegionGradient.png');*/
    padding: 5px;
    background-color: #1d0f04;
}

.region td
{
	padding: 3px;
}

.region
{
	border-color:#666666;
    border-style:solid;
    border-width:1px;
    margin-bottom: 4px;
    background-color: #131313;
    border-radius: 8px;
    border-collapse: separate;
}

.region td
{
	text-align: center;
}

/*************************/
/****** dataTable ********/
/*************************/


table.dataTable thead
{
    background-color: #282828;
    letter-spacing: 1px;
}

table.dataTable thead tr td:first-child
{
    border-top-left-radius: 8px;
}
table.dataTable thead tr td:last-child
{
    border-top-right-radius: 8px;
}

table.dataTable
{
    border-top-right-radius: 8px;
    border-top-left-radius: 8px;
    background-color: #131313;
    border-left: 1px solid gray;
    border-right: 1px solid gray;
    border-top: 1px solid gray;
    border-collapse: separate;
}

table.dataTable td
{
    padding-bottom: 5px; padding-top: 5px;
    padding-left:6px; padding-right: 6px;
    border-collapse: collapse;
    border-bottom: 1px solid #444444;
}

td.dataTableTitleRow
{
    background-color: #330000;
    border-top-right-radius: 8px;
    border-top-left-radius: 8px;
}

.DataTableHeader
{
    margin-top: 0px;
    margin-bottom: 0px;
}

/*************************/
/******* Legacy **********/
/*************************/

table.LadderGameTable td
{
    border: 0px;
}

object, embed {

    outline: none !important;
}


.TabLink
{
	font-weight: bold;
	font-size: 14px;
	color:white;
	text-decoration:none
}

.TabLink:Hover
{
	color:Yellow;
}

.SubTabCell
{
    vertical-align: top;
}

.SubTabCellSelected
{
    vertical-align: top;
    background-image: url('https://warzonecdn.com/Images/Tabs/SubSelectedMiddle.png'); 
    background-repeat: repeat-x;
}

#SubTabRow a
{
	font-weight:bold;
	color:White;
	padding-left: 8px;
	padding-right: 8px;
}

#SubTabRow a:Hover
{
	color:Yellow;
}


#StatusIndicatorContainer {
    position: absolute;
    right: 5px;
    top: 5px;
    color: #888888;
}

#TopRightConnectSpan {
    background-color: black;
    padding: 3px;
}



.ColorPickerTbl td {
    padding: 0 10px 0 10px;
}



/********************************/
/************ UJS ***************/
/********************************/

.ujsBody, .ujsHtml { 
    height: 100%;
}

.ujsGameObject {
    position: absolute;
    width: 0px;
    height: 0px;
}

.ujsContentSpacer {
    position: absolute;
    pointer-events: none;
}

.ujsInner {
    position: absolute;
    bottom: 0px;
    left: 0px;
    -webkit-user-drag: none; 
    padding: 0px; border: 0px; 
}

.ujsPulsateColorDiv {
    pointer-events: none;
}

.ujsBtn .ujsText {
    pointer-events: none;
}
.ujsExternalLinkBtn .ujsText {
    pointer-events: none;
}


.ujsBtnInner:focus {
    box-shadow: none;
}
.ujsDisabledBtn {
    opacity: .5;
    pointer-events: none;
}

.ujsTextInner {
    display: flex;
    position: absolute;
    

    
}
.ujsImg {
            
}
.ujsImgInner {
    pointer-events: none;
    
    border-image-repeat: stretch;
    
}
.ujsRawImgInner {
    pointer-events: none;
}

.ujsInputField {
    font-size: 13px;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 1px;
    padding-right: 1px;
    overflow: hidden;
    resize: none;
}

.ujsDropdown { 
}


#UjsContainer {
    height: calc(100% - 66px);
    position: relative;
}

#UjsCanvasHolder  {
    height: 100%;
    position: relative;
}

#UjsWorldHolder {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
}

#CameraManagerMap {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
}

.BonusLinkText {
    position: absolute;
    width: 100px;
    height: 14px;
    text-align: center;
    font-size: 14px;
    line-height: 14px;
    font-weight: bold;
    pointer-events: none;
}
.ujsTerritoryText {
    position: absolute;
    width: 100px;
    height: 14px;
    text-align: center;
    font-size: 14px;
    line-height: 14px;
    font-weight: bold;
    pointer-events: none;
}

#HighlightedTerritories {
    transform: scale(1);
    transform-origin: center;
    transition: transform 100ms linear;
}

.ujsSprite {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.ujsMapTooltip {
    position: absolute;
    background-color: #c1c100;
    border-radius: 7px;
    border: 2px solid gray;
    filter: drop-shadow(3px 1px 3px #888888);
    text-align: center;
    color: black;
    pointer-events: none;
    font-weight: bold;
    font-size: 14px;
    padding: 3px;
    white-space: pre;
}

.ujsArmiesInBoxContainer {
    position: absolute;
    pointer-events: none;
}


.ujsArmiesInBox {
    border-radius: 7px;
    border-width: 2px;
    border-style: solid;
    text-align: center;
    font-weight: bold;
    font-size: 14px;
    white-space: pre;
    transform: translate(-50%, -50%);
    padding-top: 3px;
    padding-bottom: 3px;
    padding-left: 5px;
    padding-right: 5px;
}


.ujsPCH .ujsTextInner {
    pointer-events: none;
}

.ujsPCHInner { 
    cursor: pointer;
}

.LocatorIndicator {
    border: 1px solid white;
    position: absolute;
    pointer-events: none;
}

.WMG_Axis_Graph {
    width: 100%;
    height: 100%;
    padding: 10px;
    background: linear-gradient(#FFF, #BBB);
    border-radius: 20px;
}

.ujsArmyImage {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    position: relative; 
}

.ujsTextOverHead {
    position: absolute;
    font-size: 12px;
    width: 100px;
    left: -45px;
    text-align: center;
    bottom: 18px;
}

.ujsArmyNumberTextCoord {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.ujsPickStar {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    font-weight: bold;
    text-align: center;
}

.ujsTMPLink {
    color: inherit;
    cursor: pointer;
}


.ujsSlider {
    bottom: 1px;
    left: 9px;
}


.ui-slider .ui-slider-range {
    z-index: unset;
}
.ui-slider .ui-slider-handle {
    z-index: unset;
}

.ui-slider-NoHandle .ui-slider-handle {
    display: none;
}
.ui-slider-NoHandle {
    opacity: 1; 
}
.ujsSliderTicks {
}

.ujsSliderTick {
    top: 3px;
    text-align: center;
}




svg {
    overflow: visible; 
}


#UjsChatRoomIconNumber {
    background-color: red; position: absolute; left: 5px; top: -2px; width: 14px; height: 15px; text-align: center; line-height: 14px; font-size: 10px; border-radius: 3px; pointer-events: none; color: white
}