/*************************************************************/
/* css/style_colllist.css                                    */
/*                                                           */
/* DESCRIPTION: CSS Stylesheet for Collection List page      */
/*                                                           */
/*************************************************************/

#cl_container #topnav {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.cl_navigation {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

.cl_nav_types {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.cl_topnav {
    font-size: 18px;
}

.cl_view_wrap {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 96px;
    row-gap: 12px;
}
@media screen and (max-width: 575px) {
    .cl_view_wrap {
        flex-wrap: wrap;
    }
}
.cl_view_options {
    display: flex;
    flex-direction: row;
    gap: 16px;
}

.cl_collection_list {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
}

.collections_table {
    display: flex;
    flex-direction: column;
    font-size: 13px;
    width: 100%;
    margin-bottom: 24px;
}

.collections_header {
    color: var(--color-greyblue-60);
    font-weight: 500;
}

.collections_sort_wrap {
    display: flex;
    align-items: center;
    font-size: 13px;
    padding-left: 10px;
}

.collection_row .collection_card_remove {
    justify-content: flex-start;
    margin-left: 8px;
}

.collection_row {
    padding: 4px 12px 6px 12px;
    display: flex;
    justify-content: space-between;
    flex-wrap: nowrap;
    width: 100%;
}
.collection_row:nth-child(odd) {
    background: var(--bg-subtle);
}
.collrow_top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}
.collrow_bottom {
    display: flex;
    justify-content: flex-end;
}
.collrow_bottom_left, 
.collrow_bottom_right {
    display: flex;
}
.collrow_name {
    font-size: 13px;
}
.collrow_name a {
    color: var(--color-mono-black);
}
.collrow_collname {
}
.collrow_collname_name {
}
.collrow_collname_name a.textlink {
    color: var(--color-mono-black);
}
.collrow_moderate {
    line-height: normal;
    align-self: center;
}
.collrow_moderator {
    display: flex;
    width: 130px;
    flex-shrink: 0;
}
.collrow_datawrap {
}
.collrow_data {
    text-align: left;
}
.collrow_lastupdated,
.collrow_numtitles,
.collrow_numseen,
.collrow_avgpct,
.collrow_bookmark {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
}

.collrow_lastupdated {
    width: 90px;
}
.collrow_numtitles {
    width: 50px;
}
.collrow_numseen {
    width: 50px;
}
.collrow_avgpct {
    width: 60px;
}
.collrow_bookmark {
    width: 70px;
}
.collrow_data_label {
    display: none;
}
.collrow_separator {
    display: none;
}

@media screen and (max-width: 900px) {
    .collection_row {
        border-bottom: 1px solid var(--color-mono-90);
        padding: 10px;
        gap: 4px;
        flex-wrap: wrap;
    }
    .collection_row:nth-child(odd) {
        background: var(--color-mono-white);
    }
    .collections_header {
        display: none;
    }
    .collrow_name {
        max-width: 100%;
    }
    .collrow_name a {
        flex-grow: 0;
    }
    .collrow_collname_link {
        overflow-x: hidden;
    }
    .collrow_moderator {
        justify-content: flex-end;
    }
    .collrow_bottom {
        justify-content: space-between;
        width: 100%;    
    }
    .collrow_bottom_left {
        gap: 8px;
    }
    .collrow_lastupdated {
        display: none;
    }
    .collrow_data {
    }
    .collrow_datawrap {
        width: 100%;
    }
    .collrow_numtitles,
    .collrow_numseen,
    .collrow_avgpct {
        width: auto;
    }
    .collrow_data_value {
        font-weight: 700;
    }
    .collrow_data_label {
        display: flex;
    }
    .collrow_bookmark {
        justify-content: flex-end;
    }
    .collrow_separator {
        width: 1px;
        height: 30px;
        background: var(--color-mono-90);
        display: flex;
    }
}


.dropdown.selectinput.collections_sort {
    padding-left: 46px;
    font-weight: 600;
}

#cl_container .form_row {
    margin-bottom: 0;
}

.cl_mod_banuser {
    font-size: 12px;
}

.cl_list_avg {
    text-align: center;
}

/*** Collections Moderations ***/
#container_modcoll .cr_leftcol {
    gap: 0px;
}

.cm_coll_details {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 12px;
}
.cm_addttitle_form {
    margin-top: 24px;
}
.cm_mod_colldetails {
    display: flex;
    flex-direction: row;
    gap: 4px;
    align-items: center;
}
.cm_mod_colldetails label {
    width: 150px;
    flex-shrink: 0;
}
.cm_mod_colldetails button {
    display: inline;
    visibility: visible;
    opacity: 1;
}
#cm_colldesc_textarea {
    width: 400px;
}

.cm_tableheader {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin: 12px 0;
}

@media screen and (max-width: 575px) {
    #cm_colldesc_textarea {
        width: 100%;
    }
}

#cl_bannedusers_list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.cl_banneduser {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    border-bottom: 1px var(--color-mono-85) solid;
    padding: 4px 0;
}
.cl_banneduser:last-child {
    border-bottom: none;
}

#cl_options {
    margin: 24px 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

body.touch #cl_options #reorder {
    display: none;
}

#cl_options #removeall {
    color: var(--color-red);
}

#cm_sortable li {
    margin: 0 3px 3px 3px;
    padding: 2px;
    cursor: grab;
}

#cm_sortable li span {
    position: absolute;
    margin-left: -1.3em;
}

#cm_addtitles_results {
    display: none;
}

#addtitles_results .checkboxinput {
    font-weight: 500;
}

#cl_addanother input {
    width: 300px;
}
#cl_collsearch_form {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
@media screen and (max-width: 743px) {
    #cl_addanother {
        flex-wrap: wrap;
    }
    .cl_mod_titlename .cl_mod_titlename_link {
        font-weight: 600;
    }
}

.cl_nocollections {
    font-size: 24px;
    margin: 24px 0;
}

.cl_mod_mobileinfo {
    margin: 8px 0 4px 0;
}