html {
    scroll-behavior: smooth;
    /* Prevent font scaling in landscape while allowing user zoom */
    text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0px;
    padding: 0px;
    height: 100%;
    width: 100%;
    font-family: proxima-nova,sans-serif;
    font-style: normal;
    font-weight: 400;
    -webkit-overflow-scrolling: touch;
}

/* size1 - minimal font-size - 12px - should not be smaller according to Google Material */
/* size3 = html, i.e. size3 and 1rem are equal*/
@media (max-width: 360px) {
    html { font-size : 13px; }
    .size1 { font-size : 12px; }
    .size2 { font-size : 12px; }
    .size3 { font-size : 13px; }
    .size4 { font-size : 14px; }
}
@media (min-width: 361px) and (max-width: 600px) {
    html { font-size : 14px; }
    .size1 { font-size : 12px; }
    .size2 { font-size : 13px; }
    .size3 { font-size : 14px; }
    .size4 { font-size : 16px; }
}
@media (min-width: 601px) and (max-width: 990px) {
    html { font-size : 15px; }
    .size1 { font-size : 12px; }
    .size2 { font-size : 13px; }
    .size3 { font-size : 15px; }
    .size4 { font-size : 17px; }
}
@media (min-width: 991px) and (max-width:1200px) {
    html { font-size : 16px; }
    .size1 { font-size : 12px; }
    .size2 { font-size : 14px; }
    .size3 { font-size : 16px; }
    .size4 { font-size : 18px; }
}
@media (min-width:1201px) and (max-width:1500px) {
    html { font-size : 16px; }
    .size1 { font-size : 12px; }
    .size2 { font-size : 14px; }
    .size3 { font-size : 16px; }
    .size4 { font-size : 18px; }
}
@media (min-width:1501px) {
    html { font-size : 16px; }
    .size1 { font-size : 12px; }
    .size2 { font-size : 14px; }
    .size3 { font-size : 16px; }
    .size4 { font-size : 19px; }
}

.arrow { height: auto; }
.bold { font-weight: 600; }
.btn {
    width: min-content;
    padding: 10px 16px;
    background-color: #e0e0e0;
    border-radius : 4px;
    font-weight: 600;
    text-align: center;
    box-sizing: border-box;
    height: calc(26px + 1em);
}
.center-content {
	display: flex;
	justify-content: center;
	align-items: center;
    text-align: center;
    width: 100%;
    height: 100%;
}
.hidden { display: none; }
.invisible { visibility: hidden; }
.noscroll { overflow: hidden; }
.text_red { color : var(--jbjs-color); }
.text_blue { color : blue; }
.text-link { color : var(--link-color); }
.ellipsys {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.rounded_box {
    border          : 1px #a2aaad solid;
    border-radius   : 4px;
}
.placeholder {
    width: 100%;
    height: 100%;
    cursor: auto;
}
#close_icon {
    background-image    : url('../images/close_icon_normal.png');
    background-size     : contain;
    background-repeat   : no-repeat;
}
.article-title-blue {
    display: inline-block;
    line-height: normal;
    text-decoration: none;
    margin: 0;
    padding: 0;
    color: var(--link-color);
}
.article-title-blue.article-title {
    font-weight: 700;
    font-size: 1.2em;
}
.article-title-blue.article-subtitle {
    font-weight: 600;
    font-size: 1.1em;
}
.article-authors {
    display: inline-block;
    line-height: normal;
    font-weight: normal;
    margin: 0;
    padding: 0;
    font-size:1em;
}


.advertisment { text-align: center; }

.advertisment-blocked {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-style: solid;
    border-width: 1px;
    border-radius: 4px;
    text-align: center;
    z-index: -1;
    box-sizing: border-box;
}

.advertisment-blocked > span {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
}

form {
	margin : 0;
}

div#search_box.desktop {
    width: 100%;
}

div#search_container {
    border : solid 2px #a2aaad;
    border-radius: 4px;
}

div#search_icon_box {
    display : table-cell;
    vertical-align : middle;
}

div#search_input_box {
    display : table-cell;
    width : 100%;
    vertical-align : middle;
    padding : 0 0 0 16px;
}

#search_exact_box {
    display: table-cell;
    vertical-align: middle;
    padding: 0 16px 0;
    white-space: nowrap;
    color: #53575a;
}

#search_exact_box > input {
    min-width: 1.2em;
    min-height: 1.2em;
    margin-right: .3em;
}

#search_exact_box > label {
    vertical-align: bottom;
}

#mobile_search_icon {
    cursor: pointer;
    display: block;
    width: 100%;
}

.search_field {
    border : 0;
    font-family : proxima-nova,sans-serif;
    font-weight : 400;
    width: 100%;
}
.search_icon {
    margin : 0 4px;
    vertical-align : middle;
    cursor : pointer;
}

.autocomplete-suggestions {
    margin: 8px 0px 0px !important;
}

.autocomplete-suggestion {
    font-size: 1em !important;
}

.search_field::-moz-placeholder {
    font-size: 1em !important;
    color: #ced2d5;
}

.search_field::-webkit-input-placeholder {
    font-size: 1em !important;
    color: #ced2d5;
}

.search_field:-ms-input-placeholder {
    font-size: 1em !important;
    color: #ced2d5;
}

.filter { font-weight: 600; }

.page_title {
    text-transform: uppercase;
    color:#a12816;
    white-space:nowrap;
    font-size: 19px;
}

.page_title.mobile {
    text-align:center;
}

.page_subtitle {
    position: relative;
    font-size: calc(6px + 1.5vw); // 16px;
}

.page_author { font-size: calc(4px + .6vw); // 9px; }

.page_text {
    width: 100%;
    height: 100%;
    font-size: 14px;
}

.desktop .suggested.summary_title, .desktop .collection_title { font-size: 12px; }
.desktop .suggested.summary_text, .desktop .collection_text { font-size: 10px; }
.desktop .suggested.summary_subtext { font-size: 9px; }
.desktop .suggested.summary_time { font-size: 10px; }

.mobile .suggested.summary_title, .mobile .collection_title { font-size: calc(1.1vmax + 1.7vw); }
.mobile .suggested.summary_text, .mobile .collection_text { font-size: calc(1vmax + 1.7vw); }
.mobile .suggested.summary_subtext { font-size: calc(1vmax + 1.4vw); }
.mobile .suggested.summary_time { font-size: calc(1vmax + 1.1vw); }

.media_title, .media_subtitle, .media_text { font-weight: 400; }

.desktop .media_text { font-size: 9px !important; }
.desktop .media_icon { width: 56px !important; padding: 8px !important; }

.pagination-container { font-size: 14px; }
/*
.information {
    position : absolute;
    right : 5em;
    display : inline-block;
    width : 1em;
    line-height : 1em;
    border-radius : 50%;
    font-size : 1.3em;
    text-align : center;
    margin : 0;
    padding : 0;
    cursor : pointer;
    color : black;
}

.desktop .information,
.video .information {
    border : 2px solid black;
    bottom : -1.3em;
}
*/

.text-with-ellipsis {
    line-height: 1.2em;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.text-with-ellipsis.two-lines {
    max-height: 2.4em;
    -webkit-line-clamp: 2;
}

.text-with-ellipsis.three-lines {
    max-height: 3.6em;
    -webkit-line-clamp: 3;
}

.text-with-ellipsis.five-lines {
    max-height: 6em;
    -webkit-line-clamp: 5;
}

@supports not (-webkit-line-clamp: 3) {
    .text-with-ellipsis {
        overflow: hidden;
        position: relative;
        text-align: justify;
        margin-right: -1em;
        padding-right: 1em;
    }

    .text-with-ellipsis::before {
        content: '...';
        position: absolute;
        right: 0;
        bottom: 0;
    }

    .text-with-ellipsis::after {
        content: '';
        position: absolute;
        right: 0;
        width: 1em;
        height: 1em;
        margin-top: 0.2em;
    }
}

.infoicon.free {
    background-image : url("../images/icons/free_green2.svg");
    background-size  : contain;
    background-repeat: no-repeat;
    margin           : 0.5em 0 0.5em 2.5em;
    height           : 1.4em;
    width            : 3.5em;
    display          : none;
    vertical-align   : middle;
}

.infoicon.free.active {
    display          : inline-block;
}

.article_actions {
     width         : 100%;
     height        : auto;
     margin-bottom : 1vw;
}

.subspecialty_commentaries,
.subspecialty_eletters,
.subspecialty_references {
    margin: 0;
    padding: 0;
}

.subspecialty_references.desktop .article_actions {
    font-size: 1em;
}

@media (min-width:991px) and (max-width:1200px) {
    .subspecialty_references.desktop .article_actions { font-size: 0.8em; }
}

@media (min-width:1201px) and (max-width:1400px) {
    .subspecialty_references.desktop .article_actions { font-size: 0.9em; }
}

.suggested.subspecialty_references.desktop .article_actions {
    font-size: 0.8em;
}

.recommended.subspecialty_references.desktop .article_actions {
    font-size: 1em;
}

@media (max-width:360px) and (max-height:640px) {
    .arrow { width: 14px; }

    .category { font-size: 14px; }

    .page_title { font-size: 16px; }

    .search_field { font-size: 16px; }
    .search_icon { height: 32px; }

    .autocomplete-suggestion { font-size: 16px !important; }
    .search_field::-moz-placeholder { font-size: 16px !important; }
    .search_field::-webkit-input-placeholder { font-size: 16px !important; }
    .search_field:-ms-input-placeholder { font-size: 16px !important; }

}

@media (min-width:361px) and (max-width:640px) {
    .arrow { width: 16px; }

    .category { font-size: 16px; }

    .page_title { font-size: 18px; }

    .search_field { font-size: 16px; }
    .search_icon { height: 32px; }

    .autocomplete-suggestion { font-size: 16px !important; }
    .search_field::-moz-placeholder { font-size: 16px !important; }
    .search_field::-webkit-input-placeholder { font-size: 16px !important; }
    .search_field:-ms-input-placeholder { font-size: 16px !important; }
}

@media (min-width:641px) and (max-width:800px) {
    .arrow { width: 20px; }

    .category { font-size: 20px; }

    .page_title { font-size: 22px; }

    .search_field { font-size: 18px; }
    .search_icon { height: 36px; }

    .autocomplete-suggestion { font-size: 18px !important; }
    .search_field::-moz-placeholder { font-size: 18px !important; }
    .search_field::-webkit-input-placeholder { font-size: 18px !important; }
    .search_field:-ms-input-placeholder { font-size: 18px !important; }
}

@media (min-width:801px) and (max-width:990px) {
    .arrow { width: 20px; }

    .category { font-size: 20px; }

    .page_title { font-size: 22px; }

    .search_field { font-size: 20px; }
    .search_icon { height: 40px; }

    .autocomplete-suggestion { font-size: 20px !important; }
    .search_field::-moz-placeholder { font-size: 20px !important; }
    .search_field::-webkit-input-placeholder { font-size: 20px !important; }
    .search_field:-ms-input-placeholder { font-size: 20px !important; }
}

@media (min-width:991px) and (max-width:1200px) {
    .arrow { width: 20px; }

    .category { font-size: 14px; }

    .search_field { font-size: 16px; }
    .search_icon { height: 32px; }

    .autocomplete-suggestion { font-size: 16px !important; }
    .search_field::-moz-placeholder { font-size: 16px !important; }
    .search_field::-webkit-input-placeholder { font-size: 16px !important; }
    .search_field:-ms-input-placeholder { font-size: 20px !important; }

    .filter { font-size: 14px; }

    .page_title { font-size: 21px; }
    .page_subtitle { font-size: 18px; }
    .page_author { font-size: 10px; }
    .page_text { font-size: 13px; }

    .collections-item.desktop .collection_title { font-size: 14px; }
    .collections-item.desktop .collection_text { font-size: 12px; }

    .summary_title { font-size: 14px; }
    .summary_text { font-size: 14px; }
    .summary_subtext { font-size: 13px; }

    .desktop .suggested.summary_title { font-size: 12px; }
    .desktop .suggested.summary_text { font-size: 10px; }
    .desktop .suggested.summary_subtext { font-size: 9px; }
    .desktop .suggested.summary_time { font-size: 10px; }

    .media_title { font-size: 12px; }
    .media_subtitle { font-size: 10px; }
    .desktop .media_text { font-size: 9px !important; }
    .desktop .media_icon { width: 56px !important; padding: 8px !important; }

    .pagination-container { font-size: 14px; }
}

@media (min-width:1201px) and (max-width:1500px) {
    .arrow { width: 24px; }

    .category { font-size: 16px; }

    .search_field { font-size: 18px; }
    .search_icon { height: 36px; }

    .autocomplete-suggestion { font-size: 18px !important; }
    .search_field::-moz-placeholder { font-size: 18px !important; }
    .search_field::-webkit-input-placeholder { font-size: 18px !important; }
    .search_field:-ms-input-placeholder { font-size: 18px !important; }

    .filter { font-size: 16px; }

    .page_title { font-size: 23px; }
    .page_subtitle { font-size: 20px; }
    .page_author { font-size: 12px; }
    .page_text { font-size: 14px; }

    .summary_title { font-size: 16px; }
    .summary_text { font-size: 16px; }
    .summary_subtext { font-size: 14px; }

    .collections-item.desktop .collection_title { font-size: 16px; }
    .collections-item.desktop .collection_text { font-size: 14px; }

    .desktop .suggested.summary_title { font-size: 14px; }
    .desktop .suggested.summary_text { font-size: 12px; }
    .desktop .suggested.summary_subtext { font-size: 11px; }
    .desktop .suggested.summary_time { font-size: 12px; }

    .media_title { font-size: 15px; }
    .media_subtitle { font-size: 12px; }
    .desktop .media_text { font-size: 11px !important; }
    .desktop .media_icon { width: 66px !important; padding: 10px !important; }

    .pagination-container { font-size: 15px; }
}

@media (min-width:1501px) and (max-width:1920px) {
    .arrow { width: 24px; }

    .category { font-size: 20px; }

    .search_field { font-size: 20px; }
    .search_icon { height: 40px; }

    .autocomplete-suggestion { font-size: 20px !important; }
    .search_field::-moz-placeholder { font-size: 20px !important; }
    .search_field::-webkit-input-placeholder { font-size: 20px !important; }
    .search_field:-ms-input-placeholder { font-size: 20px !important; }

    .filter { font-size: 16px; }

    .page_title { font-size: 27px; }
    .page_subtitle { font-size: 24px; }
    .page_author { font-size: 15px; }
    .page_text { font-size: 18px; }

    .collections-item.desktop .collection_title { font-size: 18px; }
    .collections-item.desktop .collection_text { font-size: 16px; }

    .summary_title { font-size: 21px; }
    .summary_text { font-size: 19px; }
    .summary_subtext { font-size: 17px; }

    .desktop .suggested.summary_title { font-size: 18px; }
    .desktop .suggested.summary_text { font-size: 15px; }
    .desktop .suggested.summary_subtext { font-size: 14px; }
    .desktop .suggested.summary_time { font-size: 15px; }

    .media_title { font-size: 18px; }
    .media_subtitle { font-size: 15px; }
    .desktop .media_text { font-size: 14px !important; }
    .desktop .media_icon { width: 76px !important; padding: 12px !important; }

    .pagination-container { font-size: 16px; }
}

@media (min-width:1921px) {
    .arrow { width: 24px; }

    .category { font-size: 24px; }

    .search_field { font-size: 20px; }
    .search_icon { height: 40px; }

    .autocomplete-suggestion { font-size: 20px !important; }
    .search_field::-moz-placeholder { font-size: 20px !important; }
    .search_field::-webkit-input-placeholder { font-size: 20px !important; }
    .search_field:-ms-input-placeholder { font-size: 20px !important; }

    .filter { font-size: 18px; }

    .page_title { font-size: 31px; }
    .page_subtitle { font-size: 24px; }
    .page_author { font-size: 16px; }
    .page_text { font-size: 18px; }

    .collections-item.desktop .collection_title { font-size: 18px; }
    .collections-item.desktop .collection_text { font-size: 16px; }

    .summary_title { font-size: 23px; }
    .summary_text { font-size: 22px; }
    .summary_subtext { font-size: 20px; }

    .desktop .suggested.summary_title { font-size: 18px; }
    .desktop .suggested.summary_text { font-size: 15px; }
    .desktop .suggested.summary_subtext { font-size: 14px; }
    .desktop .suggested.summary_time { font-size: 15px; }

    .media_title { font-size: 20px; }
    .media_subtitle { font-size: 17px; }
    .desktop .media_text { font-size: 16px !important; }
    .desktop .media_icon { width: 76px !important; padding: 16px !important; }

    .pagination-container { font-size: 16px; }
}

#mobile_search_popup {
    width           : 100%;
    height          : auto;
    padding         : 0;
    margin          : 0;
    position        : absolute;
    z-index         : 1000;
    background-color: #FFF;
    box-shadow      : 0 0 5px rgba(0, 0, 0, 0.5);
}

#mobile_search_popup > #searchfield {
    vertical-align :middle;
    padding        :16px;
    margin-top     :36px;
}

#mobile_search_popup > #searchfield > #search_exact_box {
    padding: 0;
}

#mobile_search_popup > #searchfield > #adv_search_btn_box {
    display: table-cell;
    vertical-align :middle;
    text-align : right;
    width      : 100%;
}

#mobile_search_popup > #searchfield > #adv_search_btn_box > .button {
    cursor:pointer;
    padding:10px 5px;
}

#mobile_search_popup > #searchfield > #recent_queries {
    padding     : 16px 16px 0;
    white-space : nowrap;
}

#mobile_search_popup > #searchfield > #recent_queries > div {
   cursor      : default;
   font-weight : 600;
   color       : #a12816;
}

#mobile_search_popup > #searchfield > #recent_queries > div > a {
    display         : block;
    padding-top     : 8px;
    text-decoration : none;
    text-overflow   : ellipsis;
    overflow        : hidden;
}

#search_input_box > input {
    border      : 0;
    font-weight : 400;
}

#search_icon_box > img {
    margin         : 0 4px;
    vertical-align : middle;
    cursor         : pointer;
}

#mobileFilterByLabel {
    width         : 100%;
    height        : 100%;
    text-align    : center;
    cursor        : pointer;
    border        : 1px #a2aaad solid;
    border-radius : 4px;
    box-sizing:   border-box;
}

#sort_by_box {
    width         : 100%;
    height        : 100%;
    text-align    : center;
    cursor        : pointer;
    border        : 1px #a2aaad solid;
    border-radius : 4px;
    box-sizing:   border-box;
}

.desktop [data-hint],
.desktop[data-hint] {
    position: relative;
}

.desktop [data-hint]:hover:after,
.desktop[data-hint]:hover:after {
    content: attr(data-hint);
    display: inline-block;
    position: absolute;
    top: 100%;
    left: 100%;
    padding: 4px 8px 2px;
    border-radius: 0 6px 6px 6px;
    background-color: white;
    box-shadow: 0px 4px 6px 0px #343230;
    font-size: 13px;
    line-height: 1;
    white-space: nowrap;
    z-index: 1;
}

/* text-hint fix */

.desktop .tooltip-root {
	position: relative;
}

.desktop .tooltip-root [data-hint] {
	position: initial;
}
.desktop .tooltip-root [data-hint]:hover:after {
	top: 90%;
	left: -10%;
	white-space: initial;
	width: 120%;
	max-width: max-content;
}

.desktop .tooltip-root [data-hint].hint-left:hover:after {
	left: 5%;
}

.desktop .tooltip-root [data-hint].hint-right:hover:after {
	left: unset;
	right: 5%;
}

.desktop .tooltip-root [data-hint].hint-bottom:hover:after {
	top: unset;
	bottom: 25%;
}

.card {
    cursor: pointer;
    background-color: lightgrey;
    border-radius: 5px;
    box-shadow: 4px 4px 8px 0 rgba(0, 0, 0, 0.5);
}