/* -- Post/Candidate Page -- */

/* Search Bar */
.search-wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    font-size:1rem;
    margin: 1rem 0;
}

    .search-wrap input {
        flex-grow: 1;
        padding: 0.5rem .75rem;
        border: 1px solid #ccc;
        margin: 0;
    }

    .search-wrap a {
        margin-left: .75rem;
        padding: 0.5rem 0.75rem;
        border-radius: 5px;
        cursor: pointer;
        transition: 0.2s ease all;
        text-decoration: none;
        border: 1px solid transparent;
    }

        .search-wrap a#searchPosts {
            background: #337ab7;
            color: #fff;
        }

            .search-wrap a#searchPosts:hover, .search-wrap a#searchPosts:focus {
                border-color: #337ab7;
                color: #337ab7;
                background: #fff
            }

        .search-wrap a#resetSearch {
            background: #c00;
            color: #fff;
        }

            .search-wrap a#resetSearch:hover, .search-wrap a#resetSearch:focus {
                border-color: #c00;
                color: #c00;
                background: #fff;
            }

.filter-wrap {
    padding: 0.5rem;
    background: #eee;
    margin: 1rem 0;
    border-radius: 10px;
}

.search-wrap .filter-wrap {
    margin:0 0 0 1rem;
}

    .filter-wrap label {
        padding-left: 36px;
        width: 100%;
        cursor: pointer;
    }

    .filter-wrap .msl-switch .msl-switch-label {
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        max-width: 80%;
    }

    /* Post wrapper */
#election_candidates {}
#election_candidates:after {
  content: "";
  clear: both;
  display: table;
}

/* Post details */
section.msl-post {
    padding: 1rem;
    border: 1px solid #ccc;
    border-radius: 3px;
    background: #fff;
    margin: 1rem 0;
    float: none;
}

    section.msl-post h2 {
        margin: -1rem -1rem 1rem;
        padding: 1rem;
        font-size: 1.5rem;
        background: #98c8e7;
        display: flex;
        align-items: center;
    }

        section.msl-post h2 a.msl-action {
            margin-left: auto;
            font-size: 1rem;
            padding: 0.75rem 1rem;
            background: #2196F3;
            text-decoration: none;
            border-radius: 5px;
            margin-top: -0.25rem;
            margin-bottom: -0.25rem;
            border-bottom: 1px solid #036ab7;
            transition: 0.2s ease all;
            color: #fff;
            font-weight: normal;
        }
    section.msl-post h2 a.msl-action:hover {
        background: #6a0;
        color: #fff;
        border-bottom-color: #380;
    }

    section.msl-post .msl-post-details {
        display: flex;
        align-items: center;
    }

.msl-post-details > * {
    padding: 0.5rem .75rem;
    margin: 0 1rem 1rem 0;
    background: #eee;
    border-left: 5px solid #ccc;
}

.msl-post-details .msl-post-places {
    background: #ddd;
    color: #333;
    border-color: #333;
}

.msl-post-details .msl-post-eligibility {
    background: rgba(96,144,48,0.25);
    color: #334818;
    border-color: #693;
}

.ineligible .msl-post-details .msl-post-eligibility {
    background: rgba(208,48,48,0.25);
    color: #600;
    border-color: #600;
}

.public .msl-post-details .msl-post-eligibility {
    background: #ccc;
    color: #333;
    border-color: transparent;
}

.public .msl-post-details a.msl-post-eligibility {
    text-decoration: none;
    transition: 0.2s ease all;
}
.public .msl-post-details a.msl-post-eligibility:hover {
    text-decoration: none;
    background: #6a0;
    color: #fff;
    border-bottom: none;
}

.msl-post-details .msl-post-full {
    background: #2196F3;
    color: #fff;
    border:none;
    border-bottom: 1px solid #036ab7;
    text-decoration: none;
    color: #fff;
    transition: 0.2s ease all;
    cursor: pointer;
    padding: .5rem .75rem;
    border-radius: 5px;
}

    .msl-post-details .msl-post-full:hover, .msl-post-details .msl-post-full:focus {
        background: #6a0;
        border-bottom: 1px solid #380;
        color: #fff;
    }

.msl-post .msl_notification, #post-wrapper + .msl_notification, ul + .msl_notification {
    float: none;
    background: #ffc;
    padding: 1rem;
    font-size: 16px;
    margin: 0;
}

/* Candidates */

.msl-post ul {
    list-style: none;
    margin: 1rem 0;
    padding: 0;
    display: grid;
    grid-gap: 1rem;
}

    .msl-post ul li {
        text-align: center;
        border: 1px solid #ccc;
        border-radius: 5px;
        padding: 1rem;
        position: relative;
        transition: 0.2s ease all;
        display: flex;
        flex-direction: column;
    }

@media all and (min-width: 600px) {
    .msl-post ul {
        grid-template-columns: 1fr 1fr;
    }
}

@media all and (min-width: 992px) {
    .msl-post ul {
        grid-template-columns: 1fr 1fr 1fr;
    }
}

.msl-post ul li img {
    margin-bottom: 1rem;
    max-width: 100%;
    max-height: 200px;
    align-self: center;
    width: auto;
}

.msl-post ul li h3 {
    font-size: 1.1rem;
    word-break: break-word;
}

.msl-cand-slogan {
    font-size: 0.9rem;
    margin: 0;
}

    .msl-cand-slogan + a {
        margin-top: .5rem;
    }

.msl-cand-manifesto {
    display: block;
    background: #2196F3;
    color: #fff;
    text-decoration: none;
    padding: 0.5rem;
    border-radius: 3px;
    transition: 0.2s ease all;
    cursor: pointer;
    margin-bottom: 1rem;
}

    .msl-cand-manifesto:last-child {
        margin-bottom: 0;
    }

    .msl-cand-manifesto:after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
    }

    .msl-cand-manifesto:hover {
        color: #fff;
        background: #6a0;
    }

.hasmanifesto:hover {
    border-color: #6a0;
    box-shadow: 0 0 10px rgba(0,0,0,0.25);
}

.msl-cand-slate {
    margin: auto -1rem -1rem;
    background: #ddd;
    color: #000;
    font-size: 0.8rem;
    padding: 0.35rem 0.25rem;
    border-top: 1px solid #ccc;
}

/* -- Classic candidate layout -- */

.classic .msl-post ul {
    display: block;
}
.classic .msl-post ul li {
    display: block;
    margin: .5rem 0
}
@media all and (min-width:600px) {
    .classic .msl-post ul li {
        text-align: left;
        min-height: 100px;
        padding-left: 100px;
    }
    .classic .msl-post ul h3 {
        padding-right: 100px;
    }
    .classic .msl-post ul img {
        max-width:80px;
        max-height: 80px;
        position: absolute;
        left: 10px;
        top: 10px;
    }
    .classic .msl-post ul .msl-cand-manifesto {
        width: auto;
        display: inline-block;
        padding: 0.35rem .75rem;
        font-size: 0.9rem;
    }
    .classic .msl-post ul .msl-cand-slate {
        margin: 0 0 0 .5rem;
        border-top: none;
        border-left: 5px solid #ccc;
        padding: 0.25rem 0.5rem;
    }
}

/* Post full description modal */
.msl-blackout {
    position: fixed;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background: rgba(0,0,0,0.75);
    z-index:10;
    display:none;
    cursor: pointer;
}
.msl-modal {
    position: fixed;
    top: 50%;
    left:50%;
    transform: translateX(-50%) translateY(-50%);
    max-width: 90%;
    max-height: 80%;
    width: 600px;
    background: #fff;
    padding: 1.5rem;
    box-sizing: border-box;
    border-radius: 1rem;
    z-index:20;
    display:none;
    overflow-x: hidden;
    overflow-y: auto;

}
.msl-modal > div > *:last-child {
    margin-bottom:0;
}
.msl-blackout.active, .msl-modal.active  {
    display: block;
}
.msl-modal > div > h1:first-child {
    font-size: 1.75rem;
    border-bottom: 2px solid #ccc;
    padding: 0 1.5rem 1rem;
    margin: 0 -1.5rem 1rem;
}

/* Define the scrollbar style */
.msl-modal::-webkit-scrollbar {
  width: 15px;
  height: 15px;
}

/* Define the thumb style */
.msl-modal::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 1rem;
}

/* Define the track style */
.msl-modal::-webkit-scrollbar-track {
 background-color: #fff;
 border: 10px solid #fff;
    border-top-right-radius: 1rem;
    border-bottom-right-radius: 1rem;
    overflow: hidden;
}

/* Style the beginning section of the scrollbar track */
.msl-modal::-webkit-scrollbar-track-piece:vertical:start {
  background-color: ##fff;
    border-top-right-radius: 1rem;
    overflow: hidden;
    margin-top: 1rem;
}

/* Style the end section of the scrollbar track */
.msl-modal::-webkit-scrollbar-track-piece:vertical:end {
  background-color: #fff;
    border-bottom-right-radius: 1rem;
    overflow: hidden;
    margin-bottom: 1rem;
}

/* Modal close */
.msl-modal-close {
    position: absolute;
    top: 1.25rem;
    right: 1rem;
    text-decoration: none;
    line-height:2rem;
    background: #eee;
    border: 1px solid #ccc;
    border-radius: 50%;
    height: 2rem;
    width: 2rem;
    text-align: center;
    font-weight: bold;
}
.msl-modal-close:after {
    content: "X";
}
.msl-modal-close:hover,
.msl-blackout:hover + .msl-modal .msl-modal-close{
    border-color: #c00;
    color: #a00;
    background: #faa;
}

/* No results message */

ul + .noresults, [id*="post-wrapper"] + #noresults {
    display: none;
}

ul:empty + .noresults, [id*="post-wrapper"]:empty + #noresults {
    display: block;
}

/* Vote list */
ul[id*="post-wrapper"], ul.msl-voted {
    list-style:none;
    margin: 1rem 0;
    padding:0;
}
ul[id*="post-wrapper"] li.msl-post, ul.msl-voted li {
    margin: 1rem 0;
    padding: .5rem .65rem .5rem 1rem;
    border: 1px solid #aaa;
    border-radius: 3px;
    background:#fff;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
}
ul[id="post-wrapper"] li.msl-post.vote-inactive {
    background: #fafafa;
    border-color: #eee;
    color: #666;
}
li.msl-post[class*="vote"] {
    position: relative;
}
li.msl-post > div {
    font-weight: bold;
    font-size: 1.1rem;
}
li.msl-post > span, li.msl-post > a, li.post_voted {
    padding: 0.4rem 0.75rem;
    border-radius: 5px;
    background: #eee;
    color: #000;
    font-size: 0.9rem;
}
li.msl-post > * > i {
    margin-right: 0.5rem;
}
li.msl-post > a {
    border: 1px solid;
    text-decoration: none;
    transition: 0.2s ease all;
}
li.msl-post > a.vote-link {
    background: #6A3;
    color: #fff;
    border-color: #360;
    font-size: 1rem;
}
li.msl-post > a.vote-link:after, li.msl-post > a.eligibility-link:after {
    content: "";
    position: absolute;
    left:0;
    top:0;
    right:0;
    bottom:0;
    border: 1px solid transparent;
    transition: 0.2s ease all;
}
li.msl-post > a.vote-link:hover, li.msl-post > a.vote-link:focus {
    background: #9C3;
    border-color: #6a3;
    color: #000;
}
li.msl-post > a.vote-link:hover:after, li.msl-post > a.vote-link:focus:after {
    border-color: #9C3;
}
li.msl-post > a.eligibility-link {
    background: #fc0;
    color: #000;
    border-color: #ccc;
        cursor: pointer;
}
li.msl-post > a.eligibility-link:hover, li.msl-post > a.eligibility-link:focus {
    background: #fff;
    border-color: #fc0;
    color: #000;
}
li.msl-post > a.eligibility-link:hover:after, li.msl-post > a.eligibility-link:focus:after {
    border-color: #fc0;
}

/* Layout toggle */

.msl-toggle {}
label.msl-toggle {
    padding: 0;
    display: flex;
}
.msl-toggle input[type="checkbox"] {
    display: none;
}
.msl-toggle svg {
    padding: 0.25rem;
    width: 1.5rem;
    border-radius: 5px;
    background: #aaa;
}
.msl-toggle svg+svg {
    margin-left: 0.25rem;
    background: transparent;
}
.msl-toggle.classic svg {
    background: transparent;
}
.msl-toggle.classic svg+svg {
    background: #aaa;
}

.msl-toggle {}
.msl-toggle input[type="checkbox"] {
    display: none;
}
.msl-toggle svg {
    display: inline-block;
}

/* Layout toggle */

.msl-toggle {}
label.msl-toggle {
    padding: 0;
    display: flex;
}
.msl-toggle input[type="checkbox"] {
    display: none;
}
.msl-toggle svg {
    padding: 4px;
    width: 24px;
    border-radius: 5px;
    background: #aaa;
}
.msl-toggle svg+svg {
    margin-left: 0.25rem;
    background: transparent;
}
.msl-toggle input[type="checkbox"]:checked svg {
    background: transparent;
}
.msl-toggle input[type="checkbox"]:checked svg+svg {
    background: #aaa;
}

/* Tabbed vote sections */
.msl-tab-header {
    list-style:none;
    margin: 1rem 0;
    padding:0;
    border-bottom:1px solid #ccc;
    display: flex;
}
.msl-tab-header li {
    margin: 0 0rem -1px 0.5rem !important;
    padding: 0 !important;
    border: none !important;
}
    .msl-tab-header li.hidden {
        display: none;
    }
    .msl-tab-header li a {
        padding: .5rem 0.75rem 0.45rem;
        background: #ccc;
        border: 1px solid #ccc;
        display: block;
        color: #000;
        text-decoration: none;
        cursor: pointer;
        transition: 0.2s ease all;
        color: #333;
    }

        .msl-tab-header li a:hover {
            background: #fff;
        }

.msl-tab-header li a.active {
    background: #fff;
    border-bottom: 1px solid #fff;
    color: #000;
}

.msl-tab-item {
    display: none;
}
.msl-tab-item.active {
    display: block;
}

.count-badge {
    background: #6c0;
    color: #fff;
    border-radius: 50%;
    line-height: 1.5rem;
    min-width: 1.5rem;
    text-align: center;
    margin-left: 0.5rem;
    display: inline-block;
    font-size: .9rem;
    font-weight: bold;
    box-shadow: 0 0 10px rgba(0,255,0,0.15);
}

/* Requirements list*/

.msl-req-list {
    margin:0;
    padding:0;
    list-style: none;
}
.msl-req-list li {
    padding: 0.75rem;
    border: 1px solid #6a0 !important;
    margin: 1rem 0;
    border-radius: 5px;
    display: flex;
    align-items:center;
}
.msl-req-list li:before {
    content: "\2705";
    margin-right: 0.5rem;
}
@media all and (max-width:600px) {
    .msl-req-list li {
        flex-direction:column;
        align-items:flex-start
    }
    .msl-req-list .msl-req-type {
        margin-bottom: 0.5rem;
        font-size: 0.9rem;
    }
}
.msl-req-list li.msl-req-qual-false {
    background: #fcc;
    border: 1px dashed #600 !important;
}
.msl-req-list li.msl-req-qual-false:before {
    content: "\274C";
}
.msl-req-list .msl-req-type {
    background: #fff;
    padding: 3px 6px;
    border-radius: 5px;
    border: 1px solid #ccc;
    margin-right:0.75rem;
}

/* Voted list */
#votesCast .voted {
    padding:0;
}

#completion-text {
    background: #fec;
    padding: 0.5rem 0.75rem;
    border-radius: 5px;
    border: 1px solid #fc0;
    margin: 0 0 0.75rem;
}

/* Results */
.msl-cand-result {
    background: #fec;
    padding: 0.5rem 0.75rem;
    border-radius: 5px;
    border: 1px solid #fc0;
    margin: 0 0 0.75rem;
}

/* Post Eligibility */
.msl-requirement-list {}
.msl-requirement-list li {
    display: flex;
    align-items: flex-start;
}
.msl-requirement-list li .msl-requirement-info {
    display: flex;
    flex-direction:column;
    flex-grow: 1;
    /* align-items: flex-start; */
}

.msl-requirement-list span[class*="clude"] {
    padding: 0.25rem 0.5rem;
    background: #eee;
    border-radius: 5px;
    margin-top: -2px;
    margin-bottom: -2px;
    margin-right: 0.5rem;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
}
.msl-requirement-list span[class*="Include"]:before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512'%3E%3C!--!Font Awesome Free 6.7.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--%3E%3Cpath d='M96 128a128 128 0 1 1 256 0A128 128 0 1 1 96 128zM0 482.3C0 383.8 79.8 304 178.3 304l91.4 0C368.2 304 448 383.8 448 482.3c0 16.4-13.3 29.7-29.7 29.7L29.7 512C13.3 512 0 498.7 0 482.3zM504 312l0-64-64 0c-13.3 0-24-10.7-24-24s10.7-24 24-24l64 0 0-64c0-13.3 10.7-24 24-24s24 10.7 24 24l0 64 64 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-64 0 0 64c0 13.3-10.7 24-24 24s-24-10.7-24-24z'/%3E%3C/svg%3E");
    width: 0.9rem;
    margin-right: 0.35rem;
    transform: translateY(1px)
}
.msl-requirement-list span[class*="Exclude"]:before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512'%3E%3C!--!Font Awesome Free 6.7.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--%3E%3Cpath d='M96 128a128 128 0 1 1 256 0A128 128 0 1 1 96 128zM0 482.3C0 383.8 79.8 304 178.3 304l91.4 0C368.2 304 448 383.8 448 482.3c0 16.4-13.3 29.7-29.7 29.7L29.7 512C13.3 512 0 498.7 0 482.3zM472 200l144 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-144 0c-13.3 0-24-10.7-24-24s10.7-24 24-24z'/%3E%3C/svg%3E");
    width: 0.9rem;
    margin-right: 0.35rem;
    transform: translateY(2px)
}
.msl-requirement-list span[class*="msl-qual"] {
    margin: 0.25rem 0 0;
    padding: 0.25rem 0.5rem;
    background: #eee;
    border-radius: 5px;
    font-size: 0.9rem;
}
.msl-requirement-list span.msl-qual-true {
    background: #ac0;
}
.msl-requirement-list span.msl-qual-false {
    background: #c22;
    color: #fff;
}

/* Review Nominations */
#election_review {}
#election_review .msl-post-full {
    cursor: pointer;
    display: block;
    padding: 0 0 0.5rem 0;
    font-size: 1.75rem;
}