/* chest counter css, (c) 2025 by wind */

/*------------------------------------------ */
/* ------ chestcounter_synposis.css -------- */
/*------------------------------------------ */


.box100 {
    width: 87.4rem;
}


/** UPPER BOXES **/
/** that's the first box "player activity in clan" and time machine (date) **/
.date_clan_box {
    align-items: center; 
    width: 28%;

    h1 {
        width: 100%;
        height: 6rem; 
    }
    
    .box_cal_week  {
        
        width: 100%;
        width: calc(100% - 0.6rem); 
    }

    .box_nav   {
        width: 100%;
        height: 1.4rem; 
        width: calc(100% - 0.6rem); 
    }
}

.box_stats  {
    width: 12%;
    margin-left: 0.6rem;
}


.box_abbrev  {
    width: 13%;
    margin-left: 0.6rem;
}

.box_time  {
    width: 24%;  /* auto fills remaining x% */
    margin-left: 0.6rem;
}

.box_last {
    flex: 1;  /* auto fills remaining x% */
    margin-left: 0.6rem; 
}


/** --------- navbox ---------**/

.box_nav {          /** outer box (lowest in 3 boxes-column) **/
    padding: 0.3rem; 
    background-color: #F6F7C455;
    font-size: 1rem;
    font-family: "Open Sans", sans-serif;
    border: 1px solid #CCC;
    border-top: 0;
    display: flex; 
    flex-direction: row; 
    align-items: center;
    justify-content: center;
    letter-spacing: 0.05rem;
}

.navbox {       /** inner box, content of inc.nav.php **/
    display: flex;
    flex-direction: row;
    justify-content: center; 
    font-size: 0.8rem;
    background-color: #FFFFF3;
}

.nav_current {
    color: grey;
    text-decoration: underline;
}

/* ---------------------------- */
h1 { 

    color: #444;
    font-size: 1.3rem;
    font-family: "Rosario", sans-serif;
    margin: 0;
    margin-bottom: 7px;
    padding: 0;
    background-color: #F6F7C455;
    border: 1px solid #CCC;
    text-align:center;
    display: flex;
    align-items: center;
    justify-content: center;

    .cal_week_text {
        color: #d23600;
    }
}

.box_cal_week {
    padding: 0.3rem; 
    background-color: #F6F7C455;
    font-size: 1rem;
    font-family: "Open Sans", sans-serif;
    border: 1px solid #CCC;
    border-bottom: 1px dashed #CCC;
    display: flex; 
    flex-direction: row; 
    /* width: 23.3rem;  */
    align-items: center;
    justify-content: center;

    .back {
        text-align:right; 
        margin-right: 0.4rem;
        width: 2rem; 
    }
    
    .img_back {
        margin: 0;
        padding: 0;
        margin-top: 0.3rem;
        opacity: 80%;
    }
    
    .current {
        text-align: center;
        font-weight: 700;
        color: #d23600;
        padding-left: 0.5rem; 
        padding-right: 0.5rem;
    }

    .cal_week_plain {
        color: #444;
        padding-left: 0.7rem; 
        padding-right: 0.7rem; 
    }
    
    .forward {
        margin: 0;
        padding: 0;
        margin-left: 0.4rem;
        width: 2rem; 
    }
    
    .img_forward {
        margin: 0;
        padding: 0;
        margin-top: 0.3rem;
        opacity: 80%;
    }
}

/** header of each box (black solid font) **/
.box_header {
    font-weight: 700;
    color: #444;
    margin-bottom: 0.2rem;
}


/** --------- box_time ---------**/

.box_time {
    padding: 0.8rem; 
    /* padding-right: 0.8rem; */
    /* width: 100%; */
    display: flex; 
    flex-direction: column; 
    align-items: flex-start;
    font-family: "Open Sans", sans-serif;
    font-size: 0.8rem;
    background-color: #F6F7C455;
    border: 1px solid #CCC;
    border-radius: 0.3rem;
    font-weight: 500;

      

    select {
        color: black;
    }

    form.select_timezone {

    } 

    .optgroup {
        font-style: normal;
        font-weight: 500;
        color: grey; 
        background-color: white;
    } 

    .option {
        font-style: normal;
        font-weight: 500;
        color: black; 
        background-color: white;
    } 

    .highlight {
        margin-top: 0.2rem;
        margin-bottom: 0.2rem;
        padding: 0.3rem 0.8rem;
        border: 1px solid #CCC;
        border-radius: 0.3rem;
        font-weight: 700;
        white-space: nowrap;
    } 
    
    .timezone {
        /* color: #0070C0; */
        margin-top: 0.2rem; 
        width: 100%;
        text-align:right;
    } 

    
    li {
        list-style-type: circle;
        list-style-type: "-";
        list-style-position: outside;
        margin-left: 0.9rem;
        padding-left: 0.5rem;
    }


    .select_box {
        align-items: flex-start; 
        justify-content: center; 
        margin-top: 0.7rem;
    }

    .select_text {
        text-align: left;
        font-style: italic;
        color: grey;
        padding-bottom: 0.3rem;
        padding-left: 0.2rem;

    }

}

/** --------- box_last ---------**/

.box_last {
    padding: 0.8rem; 
    /* padding-right: 0.8rem; */
    /* width: 100%; */
    display: flex; 
    flex-direction: column; 
    align-items: flex-start;
    font-family: "Open Sans", sans-serif;
    font-size: 0.8rem;
    background-color: #F6F7C455;
    border: 1px solid #CCC;
    border-radius: 0.3rem;
    font-weight: 500;

    .last_header {
        font-weight: 700;
        color: #444;
        margin-bottom: 0.4rem;
    }

    .perf {
        padding: 0.2rem 0.6rem;
        margin-top: 0.3rem;
        border-radius: 0.2rem;
        border: 1px solid #888;
        color: #444;
        font-weight: 500;
    }

    .perf-right {
        padding: 0.2rem;
        margin-top: 0.3rem;
        width: 3.8rem;
        color: #444;
        font-family: "Rosario", sans-serif;
        font-weight: 500;
        text-align: right;
    }

    .perf-right2 {
        padding: 0.2rem ;
        margin-top: 0.3rem;
        width: 2.6rem;
        color: #444;
        font-family: "Rosario", sans-serif;
        font-weight: 500;
        text-align: right;
    }


}

/** ------------------------- **/


/** middle box right side **/
.box_abbrev {
    padding: 0.8rem; 
    /* padding-right: 0.8rem; */
    /* width: auto; */
    display: flex; 
    flex-direction: column; 
    align-items: flex-start;
    font-family: "Open Sans", sans-serif;
    font-size: 0.8rem;
    background-color: #F6F7C455;
    border: 1px solid #CCC;
    font-weight: 500;
    white-space: nowrap;

    .middle_something {
        font-weight: 700;
        color: #d23600;
    }   
    
    .abrev {
        width: 2.6rem;
    }    
}



/** box stats **/
.box_stats {
    padding: 0.8rem;
    display: flex; 
    /* min-width: 8.3rem; */
    flex-direction: column; 
    align-items: flex-end;
    font-family: "Open Sans", sans-serif;
    font-size: 0.8rem;
    background-color: #F6F7C455;
    border: 1px solid #CCC;
    font-weight: 500;
    white-space: nowrap;

    .stats_number {
        font-weight: 700;
        color: #d23600;
    }    

    .stats_number2 {
        font-weight: 500;
        color: #d23600;
    }    

    .highlight {
        margin-top: 0.4rem;
        padding: 0.3rem 0.8rem;
        border: 1px solid #CCC;
        border-radius: 0.3rem;
        color: #d23600;
        font-weight: 700;
        white-space: nowrap;
    } 

    a { color: #d23600; }


    .HELP {
        margin-top: 1rem;
        padding: 0.3rem 0.8rem;
        border: 1px solid #CCC;
        border-radius: 0.3rem;
        font-size: 1.1rem;
        font-weight: 700;
        white-space: nowrap;
    } 



}


.grid-row {
    display: grid;
    grid-template-columns: 10rem 4rem 3rem 3rem 3rem 3rem 3rem 10rem 10rem 2.3rem 10rem 10rem 4rem 12rem 10rem 3rem;
    grid-gap: 0;
    align-content: center;
    line-height: 1.5rem;
    font-size: 0.88rem;
    border-left: 1px solid #999;
    
}

.header {
    div {
        background-color: #DDD;
        border-top: 1px solid #999;
        font-weight: 500;
        color: #111;
    }    
}

.header2 {

    div {
        background-color: #DDDDDD77;
        font-weight: 500;
        font-family: "Open Sans", sans-serif;
        color: #111;
    }
}

.spacer {
    border-left: 0;

    div { 
        background-color: #fff;
        font-size: 0;
        line-height: 0.3rem;
        border-top: 1px solid #555;
        border-bottom: 1px solid #aaa; 
        border-left: 0;
    }
}

.table-body {

    font-weight: 400;
    font-size: 0.8rem;
    color: #444;

}

.Crypts_Citadels {
    display: flex; 
    flex-direction: row;
}



.header, .header2, .table-body {
    
    div {
        /* border-right: 1px solid #999; */
        border-right: 1px solid #666;
        border-bottom: 1px solid #999;
        text-align: center;
    }

    .level {
        width: 2rem;
        border: 0;
        border-right: 1px solid #999;
    }

    .last {
        border: 0;
    }

    .player {
        text-align: left;
        padding-left: 0.3rem;
    }

    .pN {
        text-align: left;
        padding-left: 0.3rem;
    }

    .blank {
        border: none;
        font-size: 0;
        background-color: #fff;
    }

    .points {
        text-align:right;
        padding-right: 0.3rem; 
    }

}


.lessp25 {
    font-weight: 700;  
    background-color: #f85857;/* */
    background-color: #ff6c6a; 
    background-color: #ff927c;
    color: #333;
}

.lessp50 {
    font-weight: 600;
    color: #333;
    background-color: #ff927cAA;   /* tc_on */
}

.lessp100 {
    font-weight: 600;
    color: #333;
    background-color: #98D8C9;      /* ez_on */
}

.enough {
    font-weight: 600;
    color:black;
    background-color: #9FD356;      /* cc_on */
}

.set {
    font-weight: bold;
    color: black;
}