/***************************************************************************************
    resource content header has the count of items showing and the sort buttons
*/

div.resource-content-header {
    align-items: center;
    display: flex;
    justify-content: space-between;
}

#end_of_list_img {
    margin-top: 25px;
}

#end_of_list_img a {
    text-align: center;
    display:inline-block;
    width: 100%;
    min-width: 100px;
    margin-top: 0;
    margin-bottom: 10px;
    margin-left: 10px;
    padding: 0;
}

#end_of_list_img img {
    text-align: center;
    display:inline-block;
    margin: 0;
    padding: 0;
    width: 6%;
    max-width: 200px;
}

#result-count,
#in-lit-header {
    color: #14679e;
	font-size: 18px;
	font-weight: bold;
}

#result-count a {
    display: inline;
}

#result-count a.left_margin {
    margin-left: 0.5em;
}

#in-lit-header {
    padding-top: 1em;
    margin-bottom: 0.5em;
}

#result-count.no-results {
    color: red;
    width: 100%;
    text-align: center;
}

#result-count a:hover{
    display: inline-block;
	text-decoration: underline;
}

#sort_menu {
    padding: 6px;
    display: flex;
    justify-content: flex-end;
}

#sort_menu .sort-label {
    font-weight: bold;
    color: #1779ba;
    text-align: right;
    margin-right: 10px;
    padding-top: 0.5em;
}

#sort_menu .sort-button {
    color: #1779ba;
    border: 1px solid #1779ba;
    background-color: transparent;
    margin-bottom: 0;
}

#sort_menu .sort-button:hover {
    text-decoration: none;
}

#sort_menu .sort-button.active-sort {
    color: #fefefe;
    background-color: #1779ba;
}

#sort_menu .sort-button.active-sort:hover {
    background-color: #14679e;
}

/*****************************************************************************************
    resource content div below the count that is the container for all listed resources
*/

#resource_content {
    position: relative;
    min-height: 100vh;
}

/*****************************************************************************************
    main resource card (repeated within resource_content)
*/

.resource-info {
    background: linear-gradient(to left, #fcfcfd, #ececec);
    border-radius: 5px;
    padding-bottom: 0.5rem;
    margin-right: 10px;
    min-height: 215px;

    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: auto;
}

.resource-info.in-lit {
    min-height: 0;
}

div.resource-header-row {
    display: flex;
    flex-flow: row;
    justify-content: space-between;
    grid-row: 1;
}

p.resource_name,
div.resource_name,
div.collection-header {
	font-size: 16px;
	font-weight: bold;
	color: #4d4d4d;
	margin-bottom: 0;
	padding-bottom: 0;
}

div.resource_info {
	font-size: 13px;
	color: #4d4d4d;
	margin-top: 0;
    padding-top: 4pt;
    margin-bottom: 8px;
}

div.category-labels {
    position: relative;
    display: inline-block;
}

.resource_version {
	font-size: 13px;
	font-weight: normal;
}

.icon-container {
    display: -ms-grid;
    display: grid;
    -ms-grid-rows: min-content;
    grid-template-rows: min-content;
    -ms-grid-columns: max-content max-content max-content;
    grid-template-columns: max-content max-content max-content;
    justify-items: center;
    margin-left: 1rem;
}

div.citation_id {
    font-size: small;
    height: 35px;
    margin-right: 7px;
    margin-left: 10px;
    color: #4d4d4d;

    &.has-tip {
        cursor: initial;
    }

    & > span {
        display: inline-block;
        margin-top: 8px;
    }

    & > svg {
        margin-top: 8px;
    }
}

.has-tip {
    border-bottom: none;
}

span.copy_link {
    display:none;
}

.copy_img,
.citation_id > svg {
    cursor: pointer;
}

.copy-icon {
    height: 35px;
    filter: opacity(70%);
    padding-right: 7px;
}

.citation_id.has-tip {
    font-weight: normal;
}

.feedback-icon {
    height: 33px;
    cursor: pointer;
}
/* end resource-header-row */

/* grid-x is second row, has description, logo, buttons */
div.grid-x {
    grid-row: 2;
}

p.resource_description,
div.resource_description,
div.collection-description {
	font-size: 15px;
	color: #4d4d4d;
    margin: 0.75rem 0.5rem 0.75rem 0;
}

div.resource_description {
    line-height: 1.6;
    text-rendering: optimizeLegibility;
}

div.resource-details p {
    font-size: 13px;
	color: #4d4d4d;
    margin: 0;
}

div.resource-details p.github-notes {
    margin-left: 8.1rem;
    text-indent: -8.1rem;
}

div.resource-details p:last-of-type {
    margin-bottom: 1.15rem;
}

div.logo_container {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

a.logo_link {
    margin: 1em;
}

img.resource_logo {
    max-width: 150px; 
    object-fit: contain;
    /* add margin in case wrapping link
       is not rendered by the template */
    margin: 1em;
}

a.logo_link img.resource_logo {
    /* remove margin if image is wrapped */
    margin: 0;
}

.in-lit-buttons {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: flex-end;
}


/* arrow div is third row */
div.arrow {
    grid-row: 3;
    display: flex;
    justify-content: center;
    position: absolute;
    left: 50%;
    bottom: -12px;
    cursor: pointer;

    .fa-angle-down {
        border: 1px solid #3498db;
        background: white;
        color: #3498db;
        width: 30px;
        height: 30px;
        font-size: 20px;
        border-radius: 25px;
        padding-top: 5px;
        padding-left: 0px;
        margin-left: 0px;
        text-align: center;
        font-weight: 700;
    }
    
    .rotate {
        -moz-transition: all .25s linear;
        -webkit-transition: all .25s linear;
        transition: all .25s linear;
    }

    .rotate.down {
        -moz-transform:rotate(180deg);
        -webkit-transform:rotate(180deg);
        transform:rotate(180deg);
    }
}

/* hidden div that follows a .resource-info div to hold the tagged category ids */
/* div.child-category-list {
    display: none;
} */

/*******************************************************************************
    main card expanded section (desktop)
*/

.expanded-card {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto;

    .tag-section {
        display: flex;
        flex-direction: column;
    }
    .tag-list {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: flex-start;
        margin-bottom: 0.5rem;
        &:last-of-type {
            margin-bottom: 1rem;
        }
        .tag-list-label {
            font-size: 13px;
            width: 100%;
        }
        .filter-chip {
            cursor: pointer;
            width: max-content;
            height: max-content;
        }
    }
}


/*******************************************************************************
    collapsed main card (desktop)
*/
.resource-info.collapsed {
    min-height: 0px;
}

.resource-info.collapsed .logo_container {
    display: none;
}

.resource-info.collapsed .grid-x > .large-9 {
    width: 100%;
}

.resource-info.collapsed .resource_description {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 1.15rem;
}

.resource-info.collapsed .resource_description > *:not(a),
.resource-info.collapsed .resource_description ~ * {
    display: none;
}


/*****************************************************************************************
    main resource card when it is the highlighted resource or a collection info box
*/

div.resource-info.highlighted-resource,
div.resource-info.collection {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    margin-bottom: 0;
}

div.resource-info.collection {
    min-height: auto;
    padding-bottom: 1.1rem;
}

/****************************************************************************************
    indented "related resource" and "collection" lists under the main card/box
*/

div.related-resource-list,
div.collection-resources-list {
    padding: 0 1rem 0 1.5rem;
    border: 1px solid rgba(10,10,10,.25);
    border-top: 0;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    margin-right: 10px;
    background-image: linear-gradient(to right, rgba(255, 255, 255, 0), #e9e9e9);
}

div.collection-resources-list {
    padding-top: 1rem;
}

.related-resource-header {
    padding: 1rem 0 0 0;
}

div.related-resource-list .resource-info,
div.collection-resources-list .resource-info {
    margin-right: 0;
}

/**************************************************************************
    dialog pop-up that has EMAC badge markup
*/

.badge-dialog-title {
    text-align: center;
    font-weight: bold;
    font-size: 19px;
    margin-bottom: 0.5em;
}

.badge-label {
    font-size: 0.875rem;
    margin-bottom: 0.5em;
}

.badge-label .copy-markup-icon {
    cursor: pointer;
    margin: 0 0.3em;
}

.badge-label .copy-message {
    display: none;
}

textarea.badge-markup {
    font-size: 0.875rem;
    overflow-x: auto;
    overflow-y: hidden;
    resize: none;
    cursor: text;
    white-space: nowrap;
    font-family: Monaco,Consolas,"Courier New",Courier,monospace;
    padding-top: 0.4em;
}


/**********************************************************************************
    feedback dialog pop-up
*/

.popup-title::first-line {
    text-align: center !important;
    text-align: -webkit-center !important;
    font-weight: bold;
    font-size: 19px;
    line-height: 250%;
    position: absolute;
}

.popup-title {
    text-align: center !important;
    text-align: -webkit-center !important;
    
}

#resource_feedback_form {
    text-align: left;
}

/*********************************************************************
    other misc
*/

/* used */
.reveal.small {
	background-color: white;
    width: 35%;
    /* prevent from getting so narrow the text wraps */
    min-width: max-content;
}

/* maybe used in submission or subscription form?? */
.control-label {
    font-weight: 500;
}