:root { --main: #0c9da1; --btn: #3299BB; --star:gold; --trans:transparent; --do:teal; --text: #343a40; }
html { font-size:17px; max-width: 700px;  margin: auto; position: relative; }
body { background-color:#f5f5f5;line-height:24px;margin:0;padding:0;font-family: newsreader, 'Segoe UI', Arial, sans-serif, Georgia, serif, Verdana, sans-serif, ui-sans-serif, system-ui;}

@keyframes inProgress { 0% {  transform: translateX(-100%); }  100% { transform: translateX(250%); } }
.wait{ display: none; }
.progress,.waiting {position: fixed;width: 100%;height: 4px;bottom: 4px;} .waiting { bottom: unset;} .progress::before,html::before {content: "";position: fixed;height: 5px;width: 40%;} .progress.active::before,.waiting::before { background-color: teal; animation: inProgress 1.5s infinite; }
/* .waiting { position: fixed; width: 100%; height: 4px; } html::before { content: ""; position: absolute; height: 3px; width: 40%; } .waiting::before { background-color: #2196f3; animation: inProgress 1.5s infinite; } */


/* sizing, defaults */
header,body,footer,main,div,section,h1,h2,h3,h4,table,p,blockquote,ol,ul,figure { padding:0; margin:0; box-sizing:border-box; }
body,nav,main,div,section { scrollbar-width:thin; }
table,p,blockquote,ol,ul { margin-bottom:7px; } h1,h2,h3,h4,h5 { font-weight:500; padding-bottom:7px; } 
header,footer { background-color:#fff; text-align:center; padding:12px 0 7px;  } header {margin-bottom:12px;} footer { margin-top:12px; }

h1 {font-size:1.3rem; text-align:center; } h2 {font-size:1.2rem; text-align:center; } h3,h4,h5 { font-size:1rem;}
a { text-decoration:none; color:var(--main); }  b,strong { font-weight:500; } ol,ul { padding-left:20px; }
input,button { max-width:100%; box-sizing: border-box; }

img {max-width:100%;max-height:100%;object-fit:scale-down;object-position:center;} .yt img { border-radius:unset; }
blockquote { padding-left:7px; margin-left:7px;  border-left:2px solid #eee;  }

.hide, datalist { display: none; } .float{ float: left; margin-right:10px; } .floatR { float:right; margin-left:10px; }
div { overflow: overlay; scrollbar-width: none; -ms-overflow-style: none; }  div::-webkit-scrollbar { width: 0; height: 0; display: none; }

/*  customizations */
header {position: absolute;padding:0; display: flex;align-items: center;}  header nav{display: none;justify-content: space-evenly;min-width: 90%;}  header.active { width:99%; nav{display: flex;} }

.topic, .expr, .sec, .userPage #top, .homePage #top {background-color: #ffffff; margin-bottom: 15px; padding: 12px;}



.creatorPage {
    .flex, .tags, .features-list, .features-selected, .expr-option {display:flex; gap:10px; align-items: center; white-space: nowrap; overflow-x: overlay; }
    img { max-width:180px; max-height:145px; float:left; margin-right:1em; }
    div { clear:both; margin:5px 0;  }
    form {
        .topicTitle input { display:block; margin-bottom:9px; }
        label input[type='file']{ display:none; }
        textarea { min-height:80px; }
    }
}

.topicPage, .userPage {
    .topicTags, .exprTypes {white-space: nowrap; overflow-x:overlay; padding: 7px 0; display:flex; column-gap: 5px; 
    span {padding: 0 10px;background-color: #f9f8f8;width: 100%;text-align: center;} }
    .topic-expressions {display:flex; flex-direction: column;}
    .topic-expressions:first-child .expr-rating { order:-10; .expr-option div { display:inline-block; margin-left:10px } }


    .expr-poll{ div[data-stanceid] { box-shadow: -2px 0px 1px 0px #aaa; font-weight:500;  } span { width:100%; } }
    .expr-poll, .expr-rating {
        .resultsAfterVote .expr-analytics {max-width: 59px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
        .expr-poll{
            .expr-option { }
        }
        .stars {
            font-size: 24px;
            /* Get the rating avg and then  Calculate the percentage (e.g., 2.8 / 5 * 100 = 56%) */
            --rating-avg: attr(data-avg number, 4); --rating-max: attr(data-max number, 5);
            --fill-percent: calc(var(--rating-avg) / var(--rating-max) * 100%);   
            background: linear-gradient(to right, var(--star) 0%, var(--star) var(--fill-percent), #ccc var(--fill-percent), #ccc 100% );
            /* imp:For Chrome, Safari and standard imp tell only where text is; show bg only. */
            -webkit-background-clip: text; background-clip: text;  color: transparent;
            .stance { background-clip: text; background-image: linear-gradient( to bottom,  transparent 60%, var(--do) 40%,  var(--do) 100% ); }
        } .stars span:hover { -webkit-text-fill-color: var(--do); cursor:pointer; }
                
        .expr-option { display: flex; justify-content: space-between; padding: 12px;  border: 1px solid #eee; margin-bottom:7px; }
        .expr-option:hover {  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); cursor:pointer;  }
    }

    .expr-comment {
        .expr-label, .expr-analytics { text-align:center; display:block;  } .chat-prev-btn { float:right; margin-top:-25px }
        .expr-date { font-size:15px; }
        .expr-stances{
            .user {float:left; margin-right:7px; max-width:50px;  a { max-width: 50px; }  img { max-width:48px }  }
            .edit { float:right; margin-left:7px;  } .stance {clear:both; padding-top:12px;  }
            .stance-val { display:block; }
        }
        
        .expr-form { padding-top:20px;  clear:both; 
            textarea { display:block; width:100%; min-height:80px; }
            button { margin:5px; float:right; }
            div label { display: none; }
        }
    }
    .expr-petition, .expr-donation { .expr-form label { display: inline-block !important; }   }
}


.userPage {
    #top>div{ padding:12px 7px 7px; }
    label input[type='file']{ display:block; }
    .groups, #groupUsers {
        clear:both; display:flex; gap: 12px; flex-wrap: wrap; text-transform: capitalize;
        img { width:52px; display:block; }
    }
    .groups>div{ max-height:72vh; overflow-y: overlay; }

    #groupsDiv{  clear: both;
        img { width:52px; display:block; }
    }
    #top form>*:nth-child(n+2){ display: block; margin-bottom:12px;  }
}

.homePage{
    header{ right:2px; }
    button, label { text-transform: capitalize; border-width: 0; padding: 2px 12px; cursor: pointer; background-color: #f9f9f9; border: 1px solid #eee; }
    .active, label:has(input[type="radio"]:checked) {color2:teal;font-weight2:bold;box-shadow2: -1px 0px 0px 0px; border-bottom2:1px solid gray; background-color:#ddd; }
    .custom-tag { border: 1px solid #eee; width: 93px; text-align: center; }
    .filters>div, #bottom>.tags {  display: flex; white-space: nowrap; column-gap: 5px; margin-bottom:7px; overflow-x: overlay; }

    .title{ margin-top:-5px; border-bottom: 1px solid #eee;  margin-bottom: 7px; 
        h1 { text-align:left; min-width: 33%; } 
        .search-topic { border:1px solid #eee; text-align:center; padding:3px; border-radius:2px;  }
    }    
    .filters {  font-size:16px;
        span { font-weight:500; }
        label input { display:none;  }
    }
    
    #main, #bottom { margin:0 10px 10px; }
    .topic-cards { display:flex; flex-wrap:wrap; gap: 12px; 
        .topic-card {flex-basis: calc((100% - 1 * 12px) / 2); background-color: #ffffff; padding: 5px; }
        .topic-tags,.topic-analytics { display:flex; white-space:nowrap; column-gap:10px; font-size: 16px; }
        a {  span { margin-right:5px; }
            img { max-height:200px; min-height: 120px; width:100% } h3 { text-align:center; }
        }
    }
}