@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css');

html {
    font-size: 100% !important;
}

body {
    font: 1rem 'Open Sans', sans-serif;
    font-family: "Open Sans", sans-serif;
}

#wrapper {
    max-width: 100%;
    width: 100%;
    margin: 0 auto;
    box-shadow: none;
    min-width: auto;
    position: relative;
    min-height: auto;
    height: auto;
    box-shadow: none;
}

a,
a:active,
a:visited {
    color: #5e1a91;
    font-weight: bold;
    text-decoration: underline;
}

a:hover,
a:focus {
    text-decoration: none;
    color: #5e1a91 !important;
    opacity: 0.8 !important;
}

/*********************************
	Header
********************************/

#header {
    height: auto;
    background: #ffffff;
    background-image: none;
    border: none;
    width: 100%;
}

#header #inner-header {
    max-width: 100%;
    width: 100%;
    margin: 0 auto;
    background: #ffffff;
}

#header .top-bar {
    max-width: 80%;
    width: 100%;
    margin: 0 auto;
}

#header.scrolled #inner-header {
    position: fixed;
    top: 0;
    z-index: 999;
    left: 0;
    right: 0;
    width: 100%;
    height: auto;
    box-shadow: 0px 0px 8px rgba(00, 00, 00, 0.3);
    padding: 10px 0px;
}

#header #top-bar {
    display: grid;
    grid-template-columns: 40% 60%;
    gap: 1rem;
    background: transparent;
    max-width: 80%;
    margin: 0 auto;
    width: 100%;
    position: relative;
}



#header .bottom-images {
    display: grid;
    grid-template-columns: 49.9% 50.7%;
    gap: 0rem;
    align-items: center;
    justify-content: center;
    max-width: 80%;
    width: 100%;
    margin: 0 auto;
}

#elementHeaderBottom p {
    margin: 0px;
}

#user {
    padding: 0px;
    position: relative;
    text-align: inherit;
    margin: 0px;
    display: flex;
    justify-content: end;
    align-items: center;
    gap: 0.5rem;
}

#user li {
    padding: 0px;
    margin: 0px;
    float: none;
    border: none;
}

#user li a {
    position: relative;
    background: rgba(94, 26, 145, 1);
    padding: 8px 26px;
    border-radius: 25px;
    color: #ffffff;
    transform: scale(1);
    transition: all 0.3s ease;
    font-weight: bold;
    text-decoration: none;
}

#user li a:hover,
#user li a:focus {
    background: rgba(94, 26, 145, 0.8);
    box-shadow: 0px 0px 5px rgba(00, 00, 00, 0.3);
    transform: scale(1.1);
    transition: all 0.3s ease;
    text-decoration: none;
    color: #ffffff !important;
}

/*
#user li a:before{
    content: "";
    width: 1px;
    background: #333333;
    display: flex;
    height: 22px;
    padding: 0px;
    position: absolute;
    left: -8px;
}
#user li:first-of-type a:before{
	background:transparent;
}
	*/
.logo {
    padding: 0;
}

.logo a {
    display: block;
}

.copytxt {
    padding: 0;
}

.copytxt h2 {
    margin: 0px;
    line-height: 2.8rem;
}

.copytxt h2 small {
    display: block;
}




/******************************
	NAvigation
******************************/
#navigation {
    width: auto !important;
    float: none !important;
    position: sticky !important;
    top: 0 !important;

    padding: 15px 0px;
}

#navigation ul {
    margin: 0px;
}

#navigation ul.main-nav li div.panel-heading a {
    background: rgba(228, 122, 38, 1);
    color: #ffffff;
    font-weight: normal;
    transform: scale(1);
    transition: all 0.3s ease;
    font-weight: bold;
    text-decoration: none;
    position: relative;
    z-index: 4;
}

#navigation ul.main-nav li div.panel-heading a:hover,
#navigation ul.main-nav li div.panel-heading a:focus {
    background: rgba(228, 122, 38, 1) !important;
    color: #ffffff !important;
    text-shadow: 1px 1px 3px rgba(00, 00, 00, 0.3);
    box-shadow: 0px 0px 8px rgba(00, 00, 00, 0.3);
    text-decoration: none;
    transform: scale(1.1);
    transition: all 0.3s ease;
    z-index: 6;
}

#navigation ul.main-nav li div.sideSubNav {
    background: #5e1a91;
    border-radius: 19px;
    margin: 6px auto;
    width: 95%;
}

#navigation ul.main-nav li div.sideSubNav ul li a {
    margin: 2px 0px;
    text-align: left;
    white-space: normal;
    background: transparent;
    color: #ffffff;
    text-decoration: none;
    font-weight: bold;
    padding: 15px 30px;
    transform: scale(1);
    transition: all 0.3s ease;
    text-align: center;
}

#navigation ul.main-nav li div.sideSubNav ul li a:hover,
#navigation ul.main-nav li div.sideSubNav ul li a:focus {
    color: #ffffff !important;
    transform: scale(1.2);
    transition: all 0.3s ease;
    text-shadow: 1px 1px 3px rgba(00, 00, 00, 0.3);
}

a[data-toggle="collapse"] {
    transform: scale(1.2);
    transition: all 0.3s ease;
}

a[data-toggle="collapse"].collapsed {
    transform: scale(1);
    transition: all 0.3s ease;
}

/**************************
	Main
**************************/
#main {
    padding: 0px;

    background: transparent;
    margin: 0px;
    min-height: auto;
}

#main>h2 {
    font-size: 1.7em;
    margin: 0.67em 0;
    color: #ffffff;
    background: #5e1a91;
    font-weight: 300;
    font-family: 'Open Sans', SANS-SERIF;
    padding: 15px 25px;
    border-radius: 50px;
}

#pa .inner-element {
    display: grid;
    grid-template-columns: 22% 75.8%;
    gap: 2rem;
    background: transparent;
    max-width: 80%;
    width: 100%;
    margin: 0 auto;
}

#main h3 {
    font-size: 20px;
    margin: 16px 0 15px;
}

#main p {
    margin-top: 10px;
    line-height: 1.5;
}

#main ul {
    counter-reset: none;
    list-style: none;

}

#main ul li {
    margin: 12px 15px;
    list-style: none;
    position: relative;
    counter-increment: none;
}

#main ul li:before {
    display: inline-block;
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #333333;
    position: absolute;
    left: -21px;
    top: 6px;
}


#main ol {
    counter-reset: list-counter;
    list-style: none;
    padding-left: 0;
}

#main ol>li {
    counter-increment: list-counter;
    position: relative;
    padding-left: 2em;
    margin: 34px 0px;
}

#main ol>li::before {
    content: counter(list-counter) ". ";
    position: absolute;
    left: 0;
    font-weight: bold;
    color: #333;
}

#main ol ul li::before {
    display: inline-block;
    content: "" !important;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #5e1a91;
    position: absolute;
    left: -21px;
    top: 6px;
}

/*******************************
	Footer
*******************************/

#footer {
    font-size: 1rem !important;
    max-width: 80%;
    width: 100%;
    margin: 0 auto;
    padding: 25px 0px 0px 0px;
}

#footLinks:before {
    display: inline-block;
    padding: 1rem;
    content: "";
    min-width: 108px;
}

#footLinks {
    margin: 0;
    clear: none;
    display: flex;
    gap: 1rem;
    float: left;
}

#footLinks li {
    float: none;
    border: none;
    padding: 0px;
    margin: 0px;
}

#footLinks li a {
    font-size: 1rem;
}

.footer-copy {
    display: grid;
    grid-template-columns: 110px auto;
    gap: 1rem;
    align-items: center;
}

/*****************************
	Systems Notifications
*****************************/
.systemMsg {}

.systemMsg fieldset {
    padding: 0px !important;
    display: grid !important;
}

.systemMsg fieldset ul.notice {
    background: transparent !important;
}

.systemMsg fieldset ul li {}



div.systemMsg ul.notice li,
div.systemMsg ul.warning li,
div.systemMsg ul.error li,
div.systemMsg ul.success li,
div.success.systemMsg ul li {
    background: transparent !important;
    padding: 8px 15px 10px 74px !important;
    margin-bottom: 20px !important;
    border: 1px solid transparent !important;
    border-radius: 18px !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.11) !important;
    position: relative !important;
    margin: 20px 0 !important;
    display: flex;
    height: auto;
    min-height: 61px;
    align-items: center;
}

div.success.systemMsg ul {
    margin: 15px 0px !important;
    padding: 0px !important;
}

div.systemMsg ul.notice li:before,
div.systemMsg ul.warning li:before,
div.systemMsg ul.error li:before,
div.systemMsg ul.success li:before,
div.success.systemMsg ul li:before {
    display: grid !important;
    width: 62px !important;
    height: 100% !important;
    position: absolute !important;
    top: 0 !important;
    left: -1px !important;
    border-radius: 16px 0px 0px 16px !important;
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
    font-size: 2rem !important;
    color: #ffffff !important;
    text-align: center !important;
    align-items: center !important;
}

div.systemMsg ul.notice li:before {
    content: "\f05a" !important;
    background: rgba(52, 152, 219, 1.0) !important;
}

div.systemMsg ul.warning li:before {
    background: rgba(241, 196, 15, 1.0) !important;
    content: "\f071" !important;
}

div.systemMsg ul.error li:before {
    background: rgba(231, 76, 60, 1.0) !important;
    content: "\f06a" !important;
}

div.systemMsg ul.success li:before,
div.success.systemMsg ul li:before {
    background: rgba(26, 188, 156, 1.0) !important;
    content: "\f058" !important;
}

div.systemMsg ul.notice li p {
    margin: 7px 0px !important;
    line-height: normal !important;
}

div.systemMsg ul,
div.field.message div.fieldBody,
div.field.message div.field-body {
    height: auto;
    min-height: auto;
}

div.systemMsg ul.notice,
div.field.message.notice div.fieldBody,
div.field.message.notice div.field-body {
    background: none !important;
    margin: 0px !important;
    /*background-image: url(../image/notice.jpg);*/
}

div.systemMsg ul.warning,
div.field.message.warning div.fieldBody,
div.field.message.warning div.field-body {
    background: none !important;
    margin: 0px !important;
    /*background-image: url(../image/warning.jpg); */
}

div.systemMsg ul.error,
div.field.message.error div.fieldBody,
div.field.message.error div.field-body {
    background: none !important;
    margin: 0px !important;
    /*background-image: url(../image/error.jpg); */
}

div.systemMsg ul.success,
div.field.message.success div.fieldBody,
div.field.message.success div.field-body,
div.success.systemMsg ul {
    background: none !important;
    margin: 0px !important;
    /*background-image: url(../image/success.jpg); */
}

.field-information-display {
    color: rgba(192, 57, 43, 1.0) !important;
    border-color: rgba(192, 57, 43, 1.0) !important;
}


.login-page #pa .inner-element {
    display: block;
}

#page {
    min-height: 100vh !important;
}

#page #content-login,
#page #content-register {
    padding: 100px 0px;
}

#page #content-login .content,
#page #content-register .content {
    background: #FAFAFA;
    padding: 33px;
    border-radius: 30px;
    box-shadow: 0px 0px 15px rgba(00, 00, 00, 0.2);
    border: 1px solid rgba(00, 00, 00, 0.1);
    width: 46%;
    margin: 0 auto;
}

#submitHldr {
    text-align: center;
}

#submitHldr input[type="submit"],
#registerbtn,
.field-wrapper .btn-group #submitAbstract{
    width: auto;
    padding: 10px 20px;
    font-size: 1.1rem;
    height: auto;
    transition: all 0.3s ease;
    transform: scale(1);
    background:rgba(39, 174, 96,1.0);
    color:#ffffff;
}

#submitHldr input[type="submit"]:hover,
#submitHldr input[type="submit"]:focus,
#registerbtn:hover,
#registerbtn:focus,
.field-wrapper .btn-group #submitAbstract:hover,
.field-wrapper .btn-group #submitAbstract:focus{
    transition: all 0.3s ease;
    transform: scale(1.1);
    background:rgba(46, 204, 113,1.0);
    box-shadow: 0px 0px 10px rgba(00, 00, 00, 0.1);
}



.field-wrapper .btn-group #submitAbstract{

}

.lostPassword a,
.createAccount a{
    padding:0px;
    background:none;
    color:#333333;
    border:none;
    width:auto;
    height: auto;
    font-weight: normal;
    color:rgba(94, 26, 145, 1);
}


.lostPassword a:hover,
.lostPassword a:focus,
.createAccount a:hover,
.createAccount a:focus{
    background:none;
}

p.regbuttoncontainer{
    text-align: center;
}

.form-control{
height: auto;
    line-height: normal;
    font-size: 1rem;
    padding: 8px 15px;
    margin-top: 10px;
}

.login #page input[type="text"]{
    margin-top: 10px;
}
.login #page label{
    margin-top: 10px;;
}

#authorAddButtons a.btn[data-type="primary"],
#authorAddButtons a.btn[data-type="coauthor"]{
    width:auto;
    height: auto;
    padding:12px 18px;
    text-align: center;
    color:#ffffff !important;
    font-weight: bold;
    transition: all 0.3s ease;
    transform: scale(1);
}
#authorAddButtons a.btn[data-type="primary"]:hover,
#authorAddButtons a.btn[data-type="primary"]:focus,
#authorAddButtons a.btn[data-type="coauthor"]:hover,
#authorAddButtons a.btn[data-type="coauthor"]:focus{
    color:#ffffff !important;
    transition: all 0.3s ease;
    transform: scale(1.1);
    box-shadow: 0px 0px 10px rgba(00, 00, 00, 0.1);
}


#authorAddButtons a.btn[data-type="primary"]{
    background:rgba(228, 122, 38, 1);
}
#authorAddButtons a.btn[data-type="coauthor"]{
    background:#5e1a91;
}

input[type="radio"], input[type="checkbox"] {
    margin:3px 0px;
    width: 18px;
    height:18px;
}

.field-values p{
    display:flex;
    height: 100%;
    
    clear: both;
    margin: 10px 0px !important;
}
.field-values{
    display:grid;
}

div[data-id="11631"] .field-values p,
div[data-id="11632"] .field-values p{
    display:block;
}
textarea.form-control {
    height: auto;
    min-height: 160px;
    width: 88%;
    margin: 15px 5px;
}
div[role="status"]{
        margin: 15px 5px;
}
.field-wrapper .btn-group{
    text-align: center !important;
    display: block;
    height: 100%;
    
}


.field-wrapper .btn-group #submitAbstract{
        float: none;
    padding: 15px 20px;
    font-size: 1.3rem;
}