/* Best Practice: Do not include padding or margin in css main clases. We don't know beforehand where this class shall be used. There may be old padding in the place where this class will be used. */

/* Font colors */
.c1{
    color: var(--c1);
}
.c2{
    color: var(--c2);
}
.c3{
    color: var(--c3);
}
.c4{
    color: var(--c4);
}
.c5{
    color: var(--c5);
}
.c6{
    color: var(--c6);
}
.c7{
    color: var(--c7);
}
.c8{
    color: var(--c8);
}
.c14 {
    color: var(--c14);
}
.c15 {
    color: var(--c15);
}
.c17 {
    color: var(--c17);
}
/* Font weight */
.fw-200{
    font-weight: 200;
}
.fw-300{
    font-weight: 300;
}
.fw-400{
    font-weight: 400;
}
.fw-500{
    font-weight: 500;
}
.fw-600{
    font-weight: 600;
}

/* Font size */
.fs-13px{
    font-size: 13px;
}
.fs-14px{
    font-size: 14px;
}
.fs-16px{
    font-size: 16px;
}
.fs-22px{
    font-size: 22px;
}
.fs-28px{
    font-size: 28px;
}
.fs-30px{
    font-size: 30px;
}
.fs-40px{
    font-size: 40px;
}
.fs-42px{
    font-size: 42px;
}
.fs-52px{
    font-size: 52px;
}

/* Line height */
.lh-1-2{
    line-height: 1.2;
}

/* y padding */
.py-71 {
    padding: 71px 0;
}

.py-128 {
    padding: 128px 0;
}

.py-90 {
    padding: 90px 0;
}

.py-107 {
    padding: 107px 0;
}

/* Margin */
.mt-minus-10{
    margin-top: -10px;
}
.mb-minus-10{
    margin-bottom: -10px;
}

/* Radius */
.border-radius-6 {
    border-radius: 6px;
}

/* Background */
.bckgnd1 {
    background-image: linear-gradient(216deg, var(--c9), var(--c10));
}
.bckgnd2 {
    background: var(--c11);
}
.bckgnd3{
    background-image: linear-gradient(179deg, var(--c1), var(--c6));
}
.bckgnd4 {
    background-image: linear-gradient(215deg, var(--c11), var(--c12));
}
.bckgnd5 {
    background-color: var(--c13);
}
.bckgnd6 {
    background-color: var(--c16);
}
.bckgnd7 {
    background-image: linear-gradient(179deg, var(--c1), var(--c6));
}


/* Page headings */
.page-heading {
    color: var(--c6);
    font-size: 30px;
    font-weight: 200;
    text-align: center;
}

.page-heading-abstract {
    font-size: 17px;
    font-weight: 200;
    text-align: center;
}

.page-becareful-warning {
    font-size:13px;
    font-weight: 400;
    text-align: center;
    color: var(--c4);
    border-radius: 4px;
    background-image: linear-gradient(216deg, var(--c1), var(--c10));

    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
    padding-right: 10px;
}

.page-subheading1 {
    color: var(--c6);
    font-size:14px;
}

.page-subheading2 {
    color: var(--c6);
    font-size:16px;
    font-weight: 500;
}

/* Buttons */
.alpha-button {                             
    background-color: var(--c8);
    padding: 12px;
    border-radius: 4px;
    display: inline-block;
    font-weight: 400;
    font-size: 16px;
    color: var(--c4);
}
.alpha-button:hover {                       
    color:var(--c12);
    cursor: pointer;
}

.beta-button {                              
    background-color: var(--c4);
    padding: 12px;
    border-radius: 4px;
    display: inline-block;
    font-weight: 400;
    font-size: 16px;
    color: var(--c2);
}
.beta-button:hover {                        
    color:var(--c6);
    cursor: pointer;
}

.charlie-button {
    background-color: var(--c8);
    border-radius: 4px;
    display: inline-block;
    padding: 12px;
    color: var(--c4);
}
.charlie-button:hover {
    color: var(--c5);
    cursor: pointer;
}

.delta-button {
    background-color: var(--c4);
    border-radius: 4px;
    display: inline-block;
    padding: 12px;
    color: var(--c7); 
}
.delta-button:hover {
    color: var(--c3);
    cursor: pointer;
}

.echo-button {
    background-color: var(--c11);
    border-radius: 4px;
    display: inline-block;
    padding: 12px;
    color: var(--c7);
    cursor: pointer;
    text-align: center;
}
.echo-button:hover {
    color: var(--c3);
    cursor: pointer;
}

/* Responsive text */
.text-responsive {
    font-size: calc(40% + 1vw + 1vh);
}

/* Signature */
/* .signature {
    font-family: "The Girl Next Door";
} */

/* Error */
.custom-form-error {
    font-size: 12px;
    color: red;
    font-weight: 400;
}

/* Help text 
Usually displayed in the forms just below the input field */
.helptext {
    font-size: 12px;
    font-weight: 300;
}


/* Breadcrumbs */
.breadcrumb {
    font-size: 13px;
    font-weight: 300;
    color: var(--c4);
    padding-top: 10px;
    padding-bottom: 10px;
}











/* xxx */

/* 
primary - #009185 (buttons, menu items ...) 18
secondary - #005E56 (button border, advert ...) 19
tertiary - #00746a (navbar, footer, ...) 20
borders - rgba(0, 116, 106, 0.23) 21
*/

.breadcrumb-item a{
    color: var(--c20);
}

.breadcrumb i{
    color: var(--c20);
    padding-right: 5px;
}

h1{
    /* make all h2 color grey */
    color: var(--c3);
}

.bckgnd8{
    background-color: var(--c19);
}
.bckgnd9 {
    background-image: linear-gradient(179deg, var(--c20), var(--c6));
}

.c19{
    color: var(--c19);
}


.timezone{
    font-size: 11px;
    background: var(--c21);
    border-radius: 5%;
    padding: 5px;
    display: inline-block;
}



.cfp-card{
    /* Call for paper module in the homepage */
    position: relative;
    top: -10px;
}

.lh2-2{
    /* Used in the forward of homepage */
    line-height: 2.2;
}

.current-issue-items{
    /* Used in the current issue's list items which are displayed in a column */
    border-bottom: 1px dotted var(--c4);
    line-height: 2.2;
    color: var(--c19);
    font-size: 13px;
    font-weight: 300;
}

.journal-card-1{
    /* card design's of 'Current Issue' and 'Editorial Choices' modules */
    background-color: var(--c23);
    border: 1px solid var(--c22);
}

.recent-article-type{
    /* design of the a small part of the 'recent articles' module in homepage */
    display: inline-block;
    padding: 0px;
    font-size: 11px;
    font-weight: 400;
    line-height: 11px;
    text-align: center;
    vertical-align: top;
    text-transform: uppercase;
    border: 0 solid var(--c4);
    border-radius: 0px;
    font-family: 'Open Sans', sans-serif;
    letter-spacing: 1px;
}

.recent-article-title{
    /* design of the a small part of the 'recent articles' module in homepage */
    font-size: 13px;
    font-family: 'Open Sans', sans-serif;
    color: var(--c19);
    margin: 0px 0px 0px 0px;
    text-transform: none;
    line-height: 18px;
    font-weight: 400;
    letter-spacing: 0px;
}

.recent-article-authors{
    /* design of the a small part of the 'recent articles' module in homepage */
    font-size: 13px;
    color: var(--c3);
    margin-top:10px;
}

.recent-article-keywords .keyw{
    /* design of the a small part of the 'recent articles' module in homepage */
    background: var(--c23);
    color: var(--c18);
    font-weight: normal;
    border: 0px;
    border-bottom: 1px dashed var(--c22);
    padding: 1px 6px;
    margin-bottom: 10px;
    font-size: 12px;
    margin-right: 10px;
}

.univ-aff-row{
    /* Instant class to beautify individual paragraph which are stacked on top of each other */
    margin-top: 7.5px;
    margin-bottom: 7.5px;
    font-size: 14px;
    font-weight: 300;
    line-height: 2.2;
}

.meta-date{
    /* It's a custom class specifically for creating the enclosing box to
    contain the month and year */
    background: var(--c18);
    /* margin-left: -25px; */
    color: var(--c4);
    text-align: center;
    padding: 2px 0px;
    min-width: 50px;
    border-bottom-right-radius: 5px;
}

.meta-date:hover,
.meta-date:hover .link-style {
    /* Styles for the hover effect, applied to both the button and the link */
    background: var(--c19);
    color: var(--c4);
}

.link-style {
    /* Additional styles for the link */
    text-decoration: none; /* Remove underline */
    color: var(--c4); /* Change link color */
}

.meta-date .month {
    /* Associated class of meta-date */
    width: 100%;
    display: block;
    font-size: 10px;
    line-height: 16px;
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
}

.meta-date .year {
    /* Associated class of meta-date */
    width: 100%;
    display: block;
    font-size: 13px;
    line-height: 20px;
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
}

.dusty-bg{
    background: var(--c4) url(../images/muted.png) 100% 100% no-repeat;
}

.border-at-bottom{
    border-bottom: 2px solid var(--c21);
}

.border-at-top{
    /* Used in boxes like cfp module of homepage */
    border-top: 4px solid var(--c18);
}

.offwhite-gradient-background{
    /* A gradient background with offwhite color */
    background: linear-gradient(70deg, var(--c5), var(--c4));
}



.main-section-background{
    /* Used in all pages.
    Light green.
    Contains all the content except nav and footer */
    background-color: var(--c23);
    max-width: 1000px;
}

.tag-line1{
    font-size: 20px;
    font-weight: 400;
    letter-spacing: .99px;
}

.tag-line2{
    font-size: 12px;
    font-weight: 300;
    font-family: sans-serif;
}

.tag-line3{
    font-size: 12px;
    font-weight: 200;
}

/* navbar start */

.main-nav{
    background-color: var(--c20);
    /* 
    TODO: Try out these designs for the navbar

    background: -webkit-gradient(linear,left top,left bottom,from(var(--c20)),to(var(--c19)));
    background: linear-gradient(180deg,var(--c20),var(--c19));
    border-bottom: 1px solid var(--c21);
    border-top: 1px solid var(--c21); */
}

.nav-link{
    background-color: var(--c18);
    margin-right: 5px;
    margin-top: 5px;
    border-radius: 4px;
    padding: 5px;
    padding-right: 20px;
    color: var(--c4) !important;
}

.nav-link:hover{
    background-color: var(--c19);
    color: var(--c4) !important;
}

.navbar .logo {
    padding: 0px;
    margin: 0px;
    text-align: center;
    height: 100px;
    width: auto;
}

.navbar .tag-lines{
    padding: 0px;
    margin: 0px;
    width: 100px;
    text-align: left;
    min-width: 350px;
}

/* For screens less than 350px, min-width:200px 

This hack is needed to prevent the webpage from going outside the visible screen width 
when the screen width is less than 350px.
*/
@media screen and (max-width: 350px) {
    .navbar .tag-lines {
        min-width: 200px; /* It will be 200px for devices below 350px width */
    }
}

.navbar .navbar-nav a{
    /* make capital */
    text-transform: uppercase;
    font-size: 14px
}

/* navbar end */


.isbn-tag {
    padding: 1px 6px;
    border-bottom-left-radius: 10px;
    display: inline-block;
    margin: 5px 5px 0px 0px;
}

.uk-button-primary {
    background-color: var(--c20);
    color: var(--c4);
    border: 1px solid var(--c20);
}

a.uk-button-primary:hover {
    background-color: var(--c19);
    color: var(--c4);
    border: 1px solid var(--c19);
}

.uk-text-small {
    font-size: 11px;
}

.volume-listing-row:hover {
    background-color: var(--c23);
}
  
.volume-listing-row a, .article-page a{
    color: var(--c19);
}
.volume-listing-row a:hover, .article-page a:hover{
    color: var(--c18);
}   

.article-title{
    font-weight: 400;
    color: var(--c19);
    text-transform: capitalize;
}

.article-page table{
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    font-weight: 300;

}

.article-page table td{
    padding: 5px;
}

/* bibtex section of article page */
.nav-link2{
    background-color: var(--c23);
    margin-right: 5px;
    margin-top: 5px;
    padding: 2px;
    padding-right: 20px;
    padding-left: 5px;
    color: var(--c19) !important;
    font-size: 13px;

    /* REMOVE ALL BUTTON PROPERTIES */
    border: 0px;
    border-radius: 0px;
    border-bottom-left-radius: 10px;
}

.biblio-section .nav-item .active{
    background-color: var(--c19);
    color: var(--c4) !important;
}

/* bibliography section in article page */
.biblio-section code{
    color: var(--c19);
}

.header-number-listing-page {
    position: relative;
}

.single-box-number-header{
    display:inline-block;
    position:relative;
    top:10px;
}

.single-box-number-header h6{
    position:relative; top:10px;
}

.article-type h6{
    text-transform: uppercase;
    font-size: 11px;
    font-weight: 400;
    line-height: 11px;
    text-align: left;
    vertical-align: top;
    border: 0 solid var(--c4);
    border-radius: 0px;
    font-family: 'Open Sans', sans-serif;
    letter-spacing: 1px;
    color: var(--c19);

}

.indextop {
    background-color: var(--c18);
    display: table;
    color: var(--c4);
    margin-bottom: 3px;
    text-shadow: none;
    font-size: 10px;
    font-weight: 300;
    border-radius: 25px;
    font-family: 'Muli', Helvetica, Arial, sans-serif;
    padding: 0 8px;
}

.general-info-card{
    background-color: var(--c20);
    border: none;
    padding: 10px;
    margin-bottom: 10px;
    text-align: left;
}

.general-category-item{
    /* background-color: var(--c23); */
    border: none;
    padding: 10px;
    margin-bottom: 10px;
    text-align: left;
}


.general-info-card h5{
    color: var(--c4);
    font-weight: 200;
}

.general-info-card a{
    color: var(--c4);
    margin-bottom: 10px;
}

.general-info-card a:hover{
    color: var(--c5);
}

.eexwjS {
    /* A button with a glamorous shadow. Only to be used as inspiration for the shadow effect. 
    Ref: https://www.linode.com/blog/linode/a-bold-new-approach-to-the-cloud/
    */
    background: #393e44 !important;
    border-bottom-left-radius: 3px !important;
    border-bottom-right-radius: 3px !important;
    border-bottom-width: 2px !important;
    border-color: rgba(1,242,121,0.46) !important;
    border-left-width: 2px !important;
    border-right-width: 2px !important;
    border-style: solid !important;
    border-top-left-radius: 3px !important;
    border-top-right-radius: 3px !important;
    border-top-width: 2px !important;
    box-shadow: 0px 0px 20px 0px rgba(1,242,121,0.27) !important;
    color: #fafafc !important;
    font-family: 'Source Sans Pro' !important;
    font-size: 20px !important;
    font-weight: 500 !important;
    -webkit-letter-spacing: 0 !important;
    -moz-letter-spacing: 0 !important;
    -ms-letter-spacing: 0 !important;
    letter-spacing: 0 !important;
    line-height: 1 !important;
    margin-bottom: 5px !important;
    margin-left: 0px !important;
    margin-right: 0px !important;
    margin-top: 15px !important;
    max-width: 100% !important;
    padding-bottom: 10px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    padding-top: 10px !important;
    text-transform: none !important;
    -webkit-text-decoration: none !important;
    text-decoration: none !important;
    font-style: normal !important;
    width: 55% !important;
    cursor: pointer;
}

.conference-btn{
    /* make a small button with a silver gradient background, a small shadow effect, font size 12px and a svg image at the begining and followed by a text 'conferences' */
    background: linear-gradient(28deg, var(--c5), var(--c4));
    border: 1px solid var(--c5);
    border-radius: 4px;
    padding: 5px;
    padding-left: 10px;
    padding-right: 10px;
    font-size: 12px;
    color: var(--c3);
    box-shadow: 0px 0px 1px 0px var(--c27);
}

.conference-btn:hover{
    /* make some subtle changes */
    background: linear-gradient(90deg, var(--c26), var(--c4));
}


/* 

ChatGPT Pagination

*/

.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
}

.pagination li {
    list-style: none;
    margin: 0 5px;
}

.pagination li a {
    text-decoration: none;
    color: var(--c18);
    padding: 5px 10px;
    border: 1px solid var(--c18);
}

.pagination li a:hover {
    background: var(--c18);
    color: var(--c4);
}

.pagination li.disabled {
    color: var(--c25);
    pointer-events: none;
}

.pagination li.active a {
    background: var(--c18);
    color: var(--c4);
}

.pagination li.active a:hover {
    background: var(--c18);
    color: var(--c4);
}

.pagination li.active a:focus {
    background: var(--c18);
    color: var(--c4);
}

.pagination li.active a:active {
    background: var(--c18);
    color: var(--c4);
}

.pagination li.disabled a {
    background: var(--c18);
    color: var(--c4);
}

.pagination li.disabled a:hover {
    background: var(--c18);
    color: var(--c4);
}


/* xxx a href style */
a{
    color: var(--c19);
}
a:hover{
    color: var(--c18);
}

.date a{
    color: var(--c4);
}

.date a:hover{
    color: var(--c18);
}

/* The style of the message framework messages */
ul.messages{
    list-style-type: none;
    padding-bottom: 20px;
    padding-top: 0px;
    padding-left: 0px;
    margin: 0px;
    color: var(--c18);
    
}

#div_id_captcha{
    /* Reduce the font size of the recaptche field label since its of no use to users. */
    font-size: 5px;
}

.image-container{
    max-width: 100%;
    height: auto;
}


/* nav bar drop down menu item */

.custom-dropdown-toggle {
    color: var(--c4) !important;
}

.custom-dropdown-toggle:hover,
.custom-dropdown-toggle:focus {
    color: var(--c4) !important;
    background-color: var(--c18) !important;
}

.custom-dropdown-menu {
    background-color: var(--c18) !important;
}

.custom-dropdown-menu .dropdown-item {
    color: var(--c4) !important;
}

.custom-dropdown-menu .dropdown-item:hover,
.custom-dropdown-menu .dropdown-item:focus {
    color: var(--c5) !important;
    background-color: var(--c18) !important;
}

.dropdown-item{
    font-weight: 300 !important;
}

/* 
ChatGPT & youtube video
Bootstrap 4 Tutorial [#9] Code a Startup Website (Part 2)
https://www.youtube.com/watch?v=CkoWPp6hdY8&t=15s

This code specifies that the width and margin of the element with the ID #search_input_in_nav should be as specified for any device with a screen width of 992 pixels or less. 

Extra small devices (phones, 600px and down) : .col-
Small devices (portrait tablets and large phones, 600px and up) : .col-sm-
Medium devices (landscape tablets, 768px and up) : .col-md-
Large devices (laptops/desktops, 992px and up) : .col-lg-
Extra large devices (large laptops and desktops, 1200px and up) : .col-xl-

*/
@media screen and (max-width: 992px) {
    #search_input_in_nav {
        margin-left: 5px;
        margin-top: 10px;
        width: 100%;
    }
}




/* WRAPPING/ WRAP */

.force-break-long-sentence {
    /* 
    ChatGPT: To force a line break in a long sentence using CSS, you can use the word-break or 
    overflow-wrap property.

    It will break the word at arbitrary points, even if the break occurs in the middle of a meaningful 
    unit, like a URL or a word like example breaking into exa and mple.

    https://chatgpt.com/c/677f78fb-a23c-8010-9f6e-8978b32b5371

    */
    word-break: break-all;
}

.natural-wrap {
    /*
    More natural wrapping; it doesn't break words arbitrarily if there's enough space to display them on the current line.
    https://chatgpt.com/c/677f78fb-a23c-8010-9f6e-8978b32b5371
    */
    overflow-wrap: anywhere; /* Breaks only when necessary */
}