body{
    background-color: #333;
    color: #fff;
}

.participants{
    border-top: 1px solid #ccc;
    margin-top: 20px;
}
.participant{
    border-bottom: 1px solid #ccc;
    margin-bottom: 20px;
    padding: 10px;
}


.attack-container,
.donation-container > div > ul{
    margin-bottom: 20px;
    border: 1px dotted #ccc;
    background-color: #715324;
    padding: 10px;
}

.donation-container > div{
    flex-basis: 50%;
}

.attack-container{
	background-color: #fff!important;
    color: #000;
}

.show-attack{
	color: #fff!important;
}

.sub-attack-div{
    display: flex;
    justify-content: space-between;
    padding: 10px;
}

.donations-container{
    display: flex;
    justify-content: space-between;
}
.donations-container li{
    text-transform: capitalize;
}

.attacking-troops{
    column-count: 3
}

a{
    color: #fff;
    text-decoration: none!important;
}

#page-war #alliance1 .participant h4,
#page-war #alliance1 .participant h5{
    text-align: right;
}
.font-size-20{
    font-size: 20px;
}

.small{
    text-align: center;
    font-size: 13px;
    color: #ccc;
}

#members{
    flex-wrap: wrap;
}

.member{
    flex-basis: 30%;
    background-color: #000;
    margin: 10px;
}

.member-body{
    position: relative;
    padding: 10px;
    color: #000;
    background-color: #fff;
}

.member-body .fa-swords{
    position: absolute;
    right: 5px;
    bottom: 45px;
    font-size: 40px;
    color: #555!important;
}

.member-body .fa-swords.active{
    color: lightblue!important;
}

#alliance-page .members{
    flex-wrap: wrap;
}

#alliance-page .member-title{
    display: flex;
    justify-content: space-between;
    padding: 10px;
    background-color: #174157;
}

#alliance-page .member-row{
    display: flex;
    justify-content: space-between;

}

.spy-info{
    display: flex;
    justify-content: space-between;
}

.spy-info .fa-check{
    color: lightgreen;
}

.spy-info .fa-times{
    color: pink;
}

.help-text{
    background-color: #174157;
    padding: 10px;
    margin: 5px;
    border: 1px dotted #ccc;
}

.text-muted{
    display:block;
}
@media only screen and (max-width: 900px) {
    .alliances-container,
    .donations-container {
      flex-direction: column;
    }
    .attacking-troops{
        column-count: 1
    }
    
  }


ul {
    list-style: none;
    padding-left: 0;
}

.dataTables_filter {
    text-align: left !important;
    color: #fff;
    margin-top: 5px;
    margin-bottom: 5px;
    float: right;
    margin-right: 10px;
}

button:not(.active),
a:not(.navbar-brand,.text-success,.text-primary)
{
    color: rgb(159, 173, 188) !important
}

.own-alliance td {
    background-color: #470938;
}

tfoot th {
    color: orange !important;
}

#alliance1,
#alliance2 {
    flex-basis: 30%;
}

#war-info {
    flex-basis: 25%;
}

#secret-modal p {
    margin-bottom: 0;
}

#secrets-container {
    display: flex;
    justify-content: space-between;
}

#secrets-container>div {
    flex-basis: 47%;
    font-size: 14px;
}

#secrets-container dt {
    border-top: 1px solid #ccc;
    margin-top: 10px;
    margin-bottom: 10px;
    padding-top: 10px;
}

#secrets-container dl {
    text-transform: capitalize;
}

span.label {
    font-weight: 700;
    width: 300px;
    display: inline-block;
    text-transform: capitalize;
}

#council li,
#museum li {
    padding: 5px;
    margin: 5px;
    border-top: 1px solid #ccc;
}

.top-5{
    flex-basis: 32%;
}

.coa-level{
    font-size: 13px;
}

.alliance-stats{
        flex-basis: 24%;
    }

    .card-header{
        font-size: 17px;
        border-bottom: 1px solid #ccc;
    }

    .mom-defense{
        justify-content: end;
    }


    .tabulator-frozen-right{
        border-left: none!important;
    }
    .tabulator-frozen-left{
        border-right: none!important;
    }

    .tabulator-tooltip{
        color: #000!important;
    }

    .tabulator-footer-contents{
        justify-content: space-around!important;
    }

    .tabulator-tooltip {
        color: #fff!important;
        font-size: 13px;
    }
    
    .tabulator-popup-container {
        background: #333;
        padding: 10px;
    }

    #clear-filter{
        font-weight: normal!important;
    }
.btn-close{
    color: #fff!important;
}

.row-highlight{
    background-color: #f2fceb!important;
    color: #000;
}

.mobile-only{
    display: none!important;
}
#alliance1{
    text-align:right;
}
#alliance2{
    text-align: left;
}
.hide-everywhere{
    display: none!important;
}

.tabulator-responsive-collapse table{
    color: #000;
}
@media (max-width: 450px) {


    .hide-everywhere{
        display: none!important;
    }


    .mobile-war-header div{
        flex-basis:20%;
        text-align: center;
    }

    .mobile-war-header .alliance1,
    .mobile-war-header .alliance2{
        flex-basis:40%;
    }


    .mobile-war-header .alliance1{
        text-align:right;
    }


    .mobile-war-header .alliance2{
        text-align:left;
    }
    .mobile-only{
        display: initial!important;
    }

    #alliance1,
    #alliance2 {
        flex-basis: 48%;
    }
    #alliance1{
        text-align:left;
    }
    #alliance2{
        text-align: right;
    }

    .navbar .navbar-nav .nav-item {
        margin-left: 30px;
    }
    .mobile-hide{
        display: none!important;
    }
    
}
@media (max-width: 1400px){
    .desktop-only{
        display: none!important;
    }
}

@media (max-width: 1250px) {

    #alliance1>*,
    #alliance2>*,
    #war-info>* {
        font-size: 1rem !important;
    }

    #war-info>div>span {
        display: block;
    }

    #secrets-container {
        flex-direction: column;
    }

    #secrets-container>div {
        margin-bottom: 10px;
    }
    .top-5{
        flex-basis: 100%;
    }

    .alliance-stats{
        flex-basis: 100%;
    }

    .alliance-stats.card-container{
        order: 1;
    }
}

@media (max-width: 1000px) {
    .mobile-column{
        flex-direction: column!important;;
    }    
}

.tooltip-wide .tooltip.bottom, .tooltip-inner  {
    max-width: none;
  }

  .sortableTable th{
    cursor: pointer;
    position: relative;
  }

  .sortable-icon {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
  }

  .asc .sortable-icon::before {
    content: '↑';
    color: #333; /* Highlight color for ascending */
  }

  .desc .sortable-icon::before {
    content: '↓';
    color: #333; /* Highlight color for descending */
  }

  .tutti-type-container{
    display:flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
  }

  .tutti-type-container > div{
    flex-basis: 45%;
    margin: 0 10px;
  }

.summary-attributes{
    background-color: #002554;
    border: 1px solid #32baf2;
    padding: 10px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
  }

.unit-container{
    background: #32baf2;
    color: #000;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    padding: 10px;
    text-transform: capitalize;
}

  .text-muted{
    white-space: pre;
  }
  
  .tabulator-cell a {
    color: rgb(74, 98, 124) !important;
  }

[contenteditable=true]:empty:before{
  content: attr(placeholder);
  pointer-events: none;
  display: block; /* For Firefox */
}

.tabulator-paginator{
    text-align: center!important;
}

.tabulator-page.active{
    background-color: rgb(159, 173, 188) !important;
    border-color: rgb(159, 173, 188) !important;
}

.fa-star.gold{
    color: #ffbc40!important;    
}

.tabulator-tooltip {
    color: #000 !important;
  }


@keyframes placeHolderShimmer{
    0%{
        background-position: -468px 0
    }
    100%{
        background-position: 468px 0
    }
}
.loader {
    animation-duration: 1s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-name: placeHolderShimmer;
    animation-timing-function: linear;
    background: #f6f7f8;
    background: linear-gradient(to right, #f4f4f4 8%, #dddddd 18%, #f4f4f4 33%);
    background-size: 1000px 104px;
    position: relative;
    overflow: hidden;
    height: 100%;
}  

.mb-20{
    margin-bottom:20px;
}