@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css");

:root {
    --base-size: 1.1rem;
    --base-weight: 400;

    --box-shadow: 0 0 0 rgba(0, 0, 0, 0);
    --box-shadow-hover: 0 10px 26px rgba(0, 0, 0, 0.2);

    --modal-bg: rgba(255, 255, 255, 0.2);
    --modal-filter: blur(12px);

    --transition: all .7s cubic-bezier(.25, .8, .25, 1);

    --transform: scale(1) translateY(0px);
    --transform-hover: scale(1.01) translateY(-3px);

    --font-awesome: "Font Awesome 7 Free";

    /* Alerts */
    --alert-radius: 14px;
    --alert-padding: 1rem 1.25rem;
    --alert-gap: 0.85rem;
    --alert-shadow: 0 10px 25px rgba(0, 0, 0, 0.06);
    --alert-border-width: 4px;
    --alert-transition: 0.25s ease;
}

html,
body {
    height: 100%;
    margin: 0;
}


html {
    font-size: 100%;
}

body {
    font-size: var(--base-size);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: rgba(55, 21, 75, .05);
}

a,
a:active,
a:visited {
    outline: none !important;
    color: #c82127;
    text-decoration: underline;
}

a:hover,
a:focus {
    outline: none !important;
    color: #af5ea3;
    text-decoration: none;
}

#wrapper {
    flex: 1;
    max-width: 90%;
    margin: 0px auto;
    width: 100%;
    box-shadow: none;
    border: none;
    height: unset;
    min-height: unset;
    max-height: unset;
}

#pa .inner-element {
    display: grid;
    grid-template-columns: 22% 75%;
    gap: 1rem;
}

#pa .inner-element #navigation {
    width: 100%;
    margin: 0px;
    float: none;
}

#pa .inner-element #main {
    padding: 10px 20px 0;
    position: relative;
    background: #FFFFFF;
    margin: 0;
    min-height: 375px;
}

#pa .inner-element.login-page #main {
    padding: 55px;
    position: relative;
    background: #FFFFFF;
    margin: 5% auto;
    min-height: auto;
    width: 100%;
    max-width: 51%;
    border-radius: 25px;
    box-shadow: 0px 0px 20px rgba(00, 00, 00, 0.1);
}

#pa .inner-element.login-page #main div #page div h2 {
    font-size: 1.4rem;
    margin: 0 0 20px;
    background: #ae5ea3;
    padding: 15px 25px;
    border-radius: 55px;
    color: #ffffff;
    font-weight: 400;
    font-family: 'Open Sans', sans-serif;
    text-align: center;
    box-shadow: 0px 0px 10px rgba(00, 00, 00, 0.23);
    text-shadow: 2px 2px 10px rgba(00, 00, 00, 0.6);
}

p.lostPassword,
p.createAccount {
    margin: 10px 0px;
}

p.lostPassword a,
p.createAccount a {
    background: transparent;
    color: #333333;
    padding: 0px;
    text-decoration: underline;
    margin: 0px;
}

p.lostPassword a:hover,
p.createAccount a:hover,
p.lostPassword a:focus,
p.createAccount a:focus {
    background: transparent !important;
}

#submitHldr {
    display: flex;

    align-items: center;
}

#submitHldr input,
#registerbtn {
    background: rgba(39, 174, 96, 0.8);
    border: 2px solid rgba(39, 174, 96, 1.0);
    padding: 20px 37px;
    border-radius: 55px;
    width: auto;
    height: auto;
    line-height: normal;
    font-size: 1.3rem;
    transition: var(--transition);
    transform: var(--transform);
    box-shadow: 0px 0px 8px rgba(00, 00, 00, 0.1);
    color: #ffffff;
    margin: 9px 0;
}

#submitHldr input:hover,
#submitHldr input:focus,
#registerbtn:hover,
#registerbtn:focus {
    background: rgba(46, 204, 113, 1.0);
    border-color: rgba(39, 174, 96, 1.0);
    transform: var(--transform-hover);
    box-shadow: var(--box-shadow-hover);
    color: #ffffff;
}

.has-error .form-control,
.form-control.valid {
    border-color: #cccccc;
}

.has-error .form-control:focus,
.form-control.valid:focus {
    border-color: #013745;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #013745;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #013745;
}

.has-error .form-control.error {
    border-color: rgba(192, 57, 43, 1.0);
}

.required {
    color: rgba(192, 57, 43, 1.0);
}

.has-error .form-control.error:focus {
    border-color: #953b39;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #d59392;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #d59392;
}

#page {
    overflow: visible;
}

/*****************************************************************
HEADER
*****************************************************************/
/* layout */
#header {
    background: transparent;
    display: grid;
    gap: 1rem;
    height: stretch;
    border: none;
}

#header:before,
#header:after {
    content: "";
    display: block;
    position: relative;
}

#header:before {
    height: 73px;
    width: 500px;
    background: url('https://events.decorporate.ca/NPAC2027/abstract/download.php?t=document&f=1708&y=ZmlsZUlkPTE3MDg=') no-repeat left center / contain;
    top: 8px;
}

#header:after {
    height: 100px;
    width: 500px;
    background: url('https://events.decorporate.ca/NPAC2026/abstract/download.php?t=document&f=1456&y=ZmlsZUlkPTE0NTY=') no-repeat center center / contain;
    top: 32px;
    right: 23px;
    display: none;
}

#elementHeaderBottom p {
    margin: 0;
}

#elementHeaderBottom p img {
    width: 100%;
    border-radius: 25px;
    box-shadow: 0px 24px 24px rgba(00, 00, 00, .2);
    padding: 10px;
    background: #ffffff;
}

/* styles */
#header h1,
#header h2 {
    display: none;
}

#user {}

/*****************************************************************
NAVIGATION
*****************************************************************/
/* layout */
#navigation ul {
    margin: 0px;
}

#navigation ul.main-nav li div.panel-heading a {
    will-change: transform, background, border, color;
    background: rgba(224, 39, 68, 0.8);
    text-align: center;
    color: #ffffff;
    font-size: 1.1rem;
    margin: 2px 0px;
    border: 2px solid rgba(224, 39, 68, 1);
    border-radius: 14px;
    transition: var(--transition);
    transform: var(--transform);
    box-shadow: var(--box-shadow);
    padding: 1rem;
    text-decoration: none;
}

#navigation ul.main-nav li div.panel-heading a:hover,
#navigation ul.main-nav li div.panel-heading a:focus {
    transform: var(--transform-hover);
    background: rgba(170, 94, 163, 0.8);
    border-color: rgba(170, 94, 163, 1);
    box-shadow: var(--box-shadow-hover);
    text-decoration: none;
    text-shadow: 0px 5px 10px rgba(0, 0, 0, 0.3);
}

#navigation ul.main-nav li div.sideSubNav ul li a {
    text-decoration: none;
    will-change: transform, background, border, color;
    background: rgba(170, 94, 163, 0.8);
    text-align: center;
    color: rgba(255, 255, 255, 1);
    font-size: 1.1rem;
    margin: 2px 0px;
    border: 2px solid rgba(170, 94, 163, 1);
    border-radius: 14px;
    transition: var(--transition);
    transform: var(--transform);
    box-shadow: var(--box-shadow);
}

#navigation ul.main-nav li div.sideSubNav ul li a:hover,
#navigation ul.main-nav li div.sideSubNav ul li a:focus {
    text-decoration: none;
    transform: var(--transform-hover);
    box-shadow: var(--box-shadow-hover);
    background: rgba(170, 94, 163, 1);
    border-color: rgba(170, 94, 163, 1);
}

#navigation ul.main-nav li div.sideSubNav {
    background: transparent;
}

#navigation ul.main-nav li div.sideSubNav ul li {
    border: none;
}

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

/*****************************************************************
CONTENT
*****************************************************************/
/* layout */
#main {}

/* breadcrumb */
.navBreadcrumb {}

/* navigation buttons */
div.navButtons {}

/* general styles */
#pa.outer-element {
    background: #ffffff;
    padding: 2rem;
    border-radius: 25px;
    border: none;
    margin: 2rem auto;
    box-shadow: 0px 14px 32px rgba(00, 00, 00, 0.05);
}

/*****************************************************************
FOOTER
*****************************************************************/
/* layout */
#footer {
    height: unset;
    position: relative;
    border: none;
    font-size: 87%;
    padding: 2rem;
    background: #222222;
    border-radius: 25px;
    margin: 1rem 0;
    box-shadow: 0px 14px 28px rgba(00, 00, 00, 0.2);
    color: rgba(250, 250, 250, 0.5);
}

#ers {
    background: url('../../../asset/image/mycs-logo.png') no-repeat center center / contain;
    top: unset;
    width:75px;
    height:72px;
}

.lower-footer{
    flex: 1 1 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
#tagline {
    padding-top: 6px;
    color: rgba(250, 250, 250, 0.5);
    font-size: 2rem;
    font-weight: 500;
    margin-left: 90px;
    display: grid;
    gap: 0.5rem;
    margin-bottom: 0;
}
#tagline br{
    display:none;
}
#footer a{
    color: rgba(250, 250, 250, 0.5);
    text-decoration: none;
}
#footLinks li{
        padding: 0 8px 0 0;
    border-color:rgba(250, 250, 250, 0.3);
}
#footLinks li a, #footLinks li a.btn {
    color: rgba(250, 250, 250, 0.5);
}
.toggle-wrapper{
    margin:1rem 0;
}
/* menu */
#footLinks {
    display:flex;
    gap:0.5rem;
}

/*****************************************************************
PAGE SPECIFIC
*****************************************************************/
/* SUPPORT FORM */

/*****************************************************************
Custom
- set the custom field display options
*****************************************************************/

.inner-element.login-page,
.inner-element.logout-page {
    display: block !important;
}

#content-login ol {
    list-style: decimal;
    margin: 20px 23px;
}

#content-login ol li {
    padding: 8px 5px;
}

@media (max-width: 767.98px) {

    #pa .inner-element,
    html,
    body,
    #wrapper,
    #header,
    #pa {
        width: 100% !important;
        max-width: 100% !important;
    }

    #header:before,
    .content {
        width: 100% !important;
    }

    #pa .inner-element.login-page #main {
        max-width: 90% !important;
        margin: 25px auto !important;
        padding: 15px;
    }

    #header {
        display: grid;
        position: relative;
        flex-direction: row;
        padding: 14px;
    }

    #header:before,
    #header:after {
        display: block;
        position: relative;
        flex: 1;
        min-height: 69px !important;
        height: auto !important;
        top: unset;
        background-position: center center !important;
        background-size: 81%;
        width: 100% !important;
        right: 0;
        left: 0;
    }

    #header #inner-header {
        position: absolute;
        top: 0;
        right: 0;
    }

    .form-control {
        height: auto;
        font-size: 1.1rem;
        line-height: normal;
        padding: 12px;
    }

    #pa .inner-element {
        grid-template-columns: 100%;
        padding: 15px;
    }
}

.form-control {
    height: unset;
    line-height: unset;
    font-size: 1.2rem;
    padding: 1rem;
    border-radius: 9px;
}

.field-values {
    display: grid;
    gap: 0.75rem;
    padding: 1rem;
}

.field-values p {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin: 0;
    gap: 0.5rem;
}

.field-values p input,
.field-values p label {
    margin: 0;
}

.field-values p .blank_space {
    display: none;
}

textarea {
    min-height: 120px;
}

p.radfield input,
p.checkfield input {
    display: none !important;
}

.field-values p.radfield label:before,
.field-values p.checkfield label:before {
    font-family: var(--font-awesome);
    display: inline-block;
    font-weight: 400;
    content: "\f111";
    transition: var(--transition);
    transform: scale(1);
    text-shadow: none;
    will-change: transform, text-shadow;
}

.field-values p.radfield label:before {
    content: "\f111";
}

.field-values p input[type="radio"]:checked~label:before {
    font-weight: 900;
    content: "\f058";
    transform: scale(1.01);
    color: rgba(46, 204, 113, 1.0);
    transform: scale(1.2);
    text-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1);
}

.field-values p.checkfield label:before {
    content: "\f0c8";
}

.field-values p.checkfield input[type="checkbox"]:checked~label:before {
    font-weight: 900;
    content: "\f14a";
    color: rgba(46, 204, 113, 1.0);
    transform: scale(1.2);
    text-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1);
}



.field-values p.checkfield input,
.field-values p.checkfield label,
.field-values p.radfield input,
.field-values p.radfield label {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.2rem;
    font-weight: normal;
    transition: var(--transition);
    transform: var(--transform);
    padding: 1rem;
    border-radius: 14px;
    box-shadow: 0px 0px 20px rgba(00, 00, 00, .1);
    width: 100%;
}

.field-values p.radfield label,
.field-values p.checkfield label {
    transition: var(--transition);
    transform: var(--transform);
    border: 1px solid transparent;
}


.field-values p.radfield label:hover,
.field-values p.checkfield label:hover {
    transform: var(--transform-hover);
    box-shadow: var(--box-shadow-hover);
}

.field-values p input[type="radio"]:checked~label {
    box-shadow: var(--box-shadow-hover);
    transform: var(--transform-hover);
    border-color: rgba(46, 204, 113, 1.0);
}

div#authorAddButtons {
    display: flex;
    align-items: center;
    width: 100%;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
}

.authorTypeSelection {
    display: flex;
    gap: 1rem;
}

.systemMsg ul {
    background: none;
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: var(--alert-gap);
    padding: var(--alert-padding) !important;
    border-radius: var(--alert-radius);
    border: none;
    font-size: 0.95rem;
    line-height: 1.55;
    font-weight: 500;
    box-shadow: var(--alert-shadow);
    transition: all var(--alert-transition);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    animation: alertFadeIn 0.35s ease;
}

.systemMsg .notice {
    background: rgba(245, 158, 11, 0.15);
    color: #78350f;
    border-left: var(--alert-border-width) solid #f59e0b;
}

.systemMsg ul:hover {
    transform: translateY(-2px);
}

.systemMsg .success {
    background: linear-gradient(#FFFFFF, #FFFFFF) padding-box, linear-gradient(180deg, #10b981, #059669) border-box;
    border-left: 4px solid rgba(46, 204, 113, 1);
}

div.systemMsg ul,
div.field.message.notice div.fieldBody,
div.field.message.notice div.field-body {
    background-image: none !important;
}

div.systemMsg ul,
div.systemMsg ul li,
div.systemMsg fieldset,
div.field.message div.fieldBody {
    margin: 0 !important;
}

.required-dynamic {
    float: none !important;
}

.field h3 {
    border-bottom: 1px solid rgba(224, 39, 68, 0.3);
    padding-bottom: 0.5rem;
    margin-bottom: 0.75rem;
    color: rgba(170, 94, 163, 1);
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

/*
.field h3:before{
    font-family: var(--font-awesome);
    display: inline-block;
    font-weight: 900;
    content: "\f219";
    color: rgba(238, 82, 83, 0.7);
    position: absolute;
    left: -1.8rem;
    top: 0.3rem;
    font-size: 0.85rem;
}
    */

div[data-id="14189"] h3 {
    color: rgba(238, 82, 83, 1.0) !important;
    margin-top: 0 !important;
}

/******************************
Alerts
******************************/

div.field.message div.field-body {
    padding: 0px !important;
    background: transparent !important;
    min-height: unset !important;
    margin: 0 !important;
}

.alert,
div.field.message {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: var(--alert-gap);
    padding: var(--alert-padding) !important;
    border-radius: var(--alert-radius);
    border: none;
    font-size: 0.95rem;
    line-height: 1.55;
    font-weight: 500;
    box-shadow: var(--alert-shadow);
    transition: all var(--alert-transition);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    animation: alertFadeIn 0.35s ease;
}

div.field.message {
    display: grid;
    margin: 0 0 1rem 0;
}

.alert strong,
div.field.message strong {
    font-weight: 600;
}

.alert:hover,
div.field.message:hover {
    transform: translateY(-2px);
}

.alert-success {
    border-left: none;
    background:
        linear-gradient(white, white) padding-box,
        linear-gradient(180deg, #10b981, #059669) border-box;
    border-left: 4px solid rgba(46, 204, 113, 1);
}


.alert-info {
    background: rgba(59, 130, 246, 0.12);
    color: #1e3a8a;
    border-left: var(--alert-border-width) solid #3b82f6;
}

.alert-warning,
div.field.message.notice {
    background: rgba(245, 158, 11, 0.15);
    color: #78350f;
    border-left: var(--alert-border-width) solid #f59e0b;
}

.alert-danger {
    background: rgba(239, 68, 68, 0.12);
    color: #7f1d1d;
    border-left: var(--alert-border-width) solid #ef4444;
}

.alert-inclusive {
    background: rgba(155, 89, 182, 0.03);

    border-left: var(--alert-border-width) solid rgba(155, 89, 182, 1);
}

.alert-inclusive i {
    color: rgba(155, 89, 182, 1);
}

.alert-inclusive span {
    display: flex;
    gap: 0.5rem;
}

.alert-icon {
    font-size: 1.2rem;
    margin-top: 2px;
    flex-shrink: 0;
    opacity: 0.95;
    transition: transform var(--alert-transition),
        opacity var(--alert-transition);
}

.alert:hover .alert-icon {
    transform: scale(1.15);
    opacity: 1;
}

#content .alert i {
    font-size: 1.5rem;
}

@keyframes alertFadeIn {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.alert .close {
    margin-left: auto;
    font-size: 1rem;
    opacity: 0.5;
    transition: opacity 0.2s ease;
}

.alert .close:hover {
    opacity: 1;
}

div.field.message .field-values {
    display: none;
}


#authorAddButtons a {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #ffffff;
    transition: var(--transition);
    transform: var(--transform);
    box-shadow: var(--box-shadow);
    padding: 0.85rem 1.4rem;
    border-radius: 10px;
    border: 1px solid rgba(236, 32, 40, 1);
    background: rgba(236, 32, 40, 0.9);

}

#authorAddButtons a:hover {
    color: #f1f1f1;
    background: rgba(236, 32, 40, 0.8);
    transform: var(--transform-hover);
    box-shadow: var(--box-shadow-hover);
}

#authorAddButtons a:before {
    font-family: var(--font-awesome);
    font-weight: 900;
    display: inline-block;
    content: "";
}

#authorAddButtons a.author-create:before {
    content: "\f234";
}

#authorAddButtons a.author-create:before {
    content: "\f234";
}

#authorAddButtons div:nth-of-type(2) a.author-create:before {
    content: "\f0c0";
}

#authorAddButtons a.author-listing:before {
    content: "\f2b9";
}

.field-footer p {
    background: rgba(245, 158, 11, 0.15);
    color: #78350f;
    border-left: var(--alert-border-width) solid #f59e0b;
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: var(--alert-gap);
    padding: var(--alert-padding) !important;
    border-radius: var(--alert-radius);
    /* border: none; */
    font-size: 0.95rem;
    line-height: 1.25;
    font-weight: 500;
    box-shadow: var(--alert-shadow);
    transition: all var(--alert-transition);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    animation: alertFadeIn 0.35s ease;
    margin: .75rem 0;
}

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

.btn-group * {
    transition: var(--transition);
    transform: var(--transform);
    padding: 1rem 2rem;
    border-radius: 12px;
    font-size: 1.2rem;
    background: rgba(39, 174, 96, 1.0);
    color: #ffffff;
    text-shadow: none;
    box-shadow: var(--box-shadow);
    border: 2px solid rgba(39, 174, 96, 1.0);
}

.btn-group *:hover {
    background: rgba(39, 174, 96, 0.8);
    border-color: rgba(39, 174, 96, 1);
    transform: var(--transform-hover);
    box-shadow: var(--box-shadow-hover);
    color: #ffffff;
}

#user {
    position: absolute;
    top: 0;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0.5rem .75rem;
    border-radius: 0 0 16px 16px;
    font-size: 0.85rem;
    background: #af5ea3;
    box-shadow: var(--box-shadow-hover);
}

#user a {
    color: #ffffff;
    transition: var(--transition);
    transform: var(--transform);
}

#user a:hover {
    text-decoration: none;
    transform: var(--transform-hover);
    text-shadow: 0px 3px 10px rgba(0, 0, 0, 0.3);
}

#user li {
    border-color: rgba(250, 250, 250, 1);
    position: relative;
}

div[data-id="13965"] .field-values p:nth-of-type(2) input:checked~label {
    border-color: rgba(231, 76, 60, 1.0);
}

div[data-id="13965"] .field-values p:nth-of-type(2) input:checked~label:before {
    color: rgba(231, 76, 60, 1.0);
}

.loginsys #pa.outer-element {
    background: transparent;
    box-shadow: none;
    padding: 0;
}

.form-control {
    transition: var(--transition);
    transform: var(--transform);
}

.form-control:focus {
    transform: var(--transform-hover);
    border-color: #af5ea3 !important;
    -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.075), 0 0 6px #af5ea3 !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.075), 0 4px 13px rgba(175, 94, 163, 0.3) !important;
}

#page {
    overflow: visible;
}

#recentAbstract .table>colgroup+thead>tr:first-child>th:nth-of-type(2) {
    width: 50% !important;
}

#recentAbstract .table>colgroup+thead>tr:first-child>th:nth-of-type(3) {
    width: 12% !important;
}

#loading,
.modal-backdrop{
    background: rgba(255, 255, 255, 0.2) !important;
    opacity: 1 !important;
    backdrop-filter: blur(8px) !important;
}

.modal-content {
    border-radius: 25px;
    box-shadow: 0px 18px 32px rgba(00, 00, 00, .3);
}
#spinner {
    background: url('../image/loading-2026.gif') no-repeat center center / contain;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 140px;
    height: 190px;
    text-align: center;
    font-size: 1.4rem;
    font-weight: bold;
    text-transform: uppercase;
    animation: pulse 1.8s ease-in-out infinite;
    filter: drop-shadow(0px 13px 8px rgba(00, 00, 00, 0.15));
}

/*******************************************
    Recent Submissions
*****************************************/

.recentAbstracts {
    --table-bg: #ffffff;
    --table-border: rgba(168, 90, 161, 1);
    --table-header: rgba(168, 90, 161, 0.4);
    --table-text: #273444;
    --table-muted: #718096;
    --table-hover: #f8fafc;
    --primary: #2c3e50;
    width: 100% !important;
    border: 1px solid var(--table-border) !important;
    border-radius: 12px 12px 0 0;
    border-collapse: separate !important;
    border-spacing: 0;
    background: var(--table-bg);
    color: var(--table-text);
    font-size: 14px;
    box-shadow: 0 4px 18px rgba(15, 23, 42, 0.05);
    overflow: visible;
}

/* =========================================================
   COLUMN WIDTHS
   ========================================================= */

/* Submission ID */
.recentAbstracts th:first-child,
.recentAbstracts td:first-child {
    width: 13% !important;
    white-space: nowrap;
}

/* Title - largest column */
.recentAbstracts th:nth-child(2),
.recentAbstracts td:nth-child(2) {
    width: 61% !important;
}

/* Date */
.recentAbstracts th:nth-child(3),
.recentAbstracts td:nth-child(3) {
    width: 10% !important;
}

/* Action */
.recentAbstracts th:last-child,
.recentAbstracts td:last-child {
    width: 8% !important;
}


/* =========================================================
  Table HEADER
========================================================= */

.recentAbstracts thead th {
    background: var(--table-header) !important;
    color: #273444;
    border: 0 !important;
    border-bottom: 1px solid var(--table-border) !important;
    padding: 15px 18px !important;
    height: 52px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    vertical-align: middle;
    white-space: nowrap;
}


/* Rounded corners */
.recentAbstracts thead th:first-child {
    border-top-left-radius: 12px;
}

.recentAbstracts thead th:last-child {
    border-top-right-radius: 12px;
}

/* Header hover */
.recentAbstracts thead th:hover {
    background: rgba(168, 90, 161, 0.7) !important;
}

/* Active sorted column */
.recentAbstracts thead .tablesorter-headerAsc,
.recentAbstracts thead .tablesorter-headerDesc {
    color: var(--primary);
    background: rgba(168, 90, 161, 0.7) !important;
}

/* =========================================================
   Table BODY
========================================================= */

.recentAbstracts tbody tr {
    background: #fff !important;
    transition:
        background-color .18s ease,
        box-shadow .18s ease;
}


/* Remove tablesorter odd/even colors */
.recentAbstracts tbody tr.odd,
.recentAbstracts tbody tr.even {
    background: #fff !important;
}

/* Row hover */
.recentAbstracts tbody tr:hover {
    background: var(--table-hover) !important;
}

/* =========================================================
   CELLS
========================================================= */

.recentAbstracts tbody td {
    border: 0 !important;
    border-bottom: 1px solid var(--table-border) !important;
    padding: 17px 18px !important;
    color: var(--table-text);
    vertical-align: middle;
    line-height: 1.5;
}

/* Last row */
.recentAbstracts tbody tr:last-child td {
    border-bottom: 0 !important;
}

/* =========================================================
   SUBMISSION ID
   ========================================================= */
.recentAbstracts tbody td:first-child {
    color: #718096;
    font-size: 14px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* # before ID */
.recentAbstracts tbody td:first-child::before {
    content: "#";
    margin-right: 2px;
    color: #a0aab7;
    font-weight: 500;
}
/* =========================================================
   TITLE
   ========================================================= */
.recentAbstracts tbody td:nth-child(2) {
    color: #273444;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
}

/* =========================================================
   DATE
   ========================================================= */
.recentAbstracts tbody td:nth-child(3) {
    color: var(--table-muted);
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* =========================================================
   ACTION COLUMN
   ========================================================= */
.recentAbstracts tbody td:last-child {
    width: 70px;
    text-align: right;
}

/* =========================================================
   ACTION LIST
   ========================================================= */
.recentAbstracts .options {
    margin: 0;
    padding: 0;
    list-style: none;
}

.recentAbstracts .options>li {
    list-style: none;
}

/* =========================================================
   ACTION BUTTON
   ========================================================= */

.recentAbstracts .options .dropdown-toggle {

    text-decoration: none;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0 !important;
    background: #fff !important;
    border: 1px solid #dfe5ec !important;
    border-radius: 9px !important;
    color: #526174 !important;
    box-shadow: 0 2px 5px rgba(15, 23, 42, .04);
    transition:var(--transition);
    transform: var(--transform);
    box-shadow: var(--box-shadow);
}

.options .dropdown.open .dropdown-toggle,
.recentAbstracts .options .dropdown-toggle:hover,
.recentAbstracts .options .dropdown-toggle:focus {
    background: rgba(224, 39, 68, 0.8) !important;
    color: #ffffff !important;
    border-color: rgba(224, 39, 68, 1) !important;
    text-shadow:0px 4px 10px rgba(0, 0, 0, 0.06);
        transform: var(--transform-hover);
    box-shadow: var(--box-shadow-hover);
}

/* Button click */
.recentAbstracts .options .dropdown-toggle:active {
    transform:var(--transform-hover);
}

/* Gear icon */
.recentAbstracts .options .glyphicon-cog {
    margin: 0 !important;
    font-size: 15px;
}


/* Hide Bootstrap caret */
.recentAbstracts .options .dropdown-toggle .caret {
    display: none;
}

/* =========================================================
   ACTION DROPDOWN
   ========================================================= */

.recentAbstracts .actionItems {
    min-width: 235px;
    margin-top: 8px !important;
    padding: 6px !important;
    background: #fff;
    border: 1px solid #e5eaf0 !important;
    border-radius: 10px !important;
    box-shadow:
        0 12px 30px rgba(15, 23, 42, .12),
        0 3px 8px rgba(15, 23, 42, .05);

    overflow: hidden;
}

/* Dropdown links */
.recentAbstracts .actionItems>li>a {
    display: flex !important;
    align-items: center;
    padding: 10px 12px !important;
    border-radius: 7px;
    color: #344054 !important;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    text-decoration: none;
    transition:
        background-color .15s ease,
        color .15s ease;
}

/* Dropdown hover */
.recentAbstracts .actionItems>li>a:hover,
.recentAbstracts .actionItems>li>a:focus {
    background: #f4f7fa !important;
    color: var(--primary) !important;
    text-decoration: none;
}


/* Delete action */
.recentAbstracts .actionItems>li:last-child>a {
    color: #c0392b !important;
}

.recentAbstracts .actionItems>li:last-child>a:hover {
    background: #fff5f4 !important;
    color: #b42318 !important;
}
/*
#main ul{
    display:grid;
    gap:.75rem;
    margin:1rem 1rem 1rem .5rem;
}
#main ul,
#main ul li{
    list-style:none;
}
#main ul li{
    display:flex;
    align-items: flex-start;
    gap:0.5rem;
}
#main ul li:before{
    font-family: var(--font-awesome);
    display:inline-block;
    font-weight:900;
    content:"\f0da";
    color:rgba(10, 189, 227,1.0);
    font-size: 0.85rem;
}
    */
#main h6{
        font-size: 1.4rem;
    font-weight: 600;
    margin: 2rem 0 1rem 0;
    border-bottom: 1px solid rgba(170, 94, 163, .3);
    color: rgba(224, 39, 68, 1);
    padding-bottom: .5rem;
}



/* =========================================================
   MOBILE
   ========================================================= */
@media (max-width: 767px) {
    /* -----------------------------------------------------
       Table container
       ----------------------------------------------------- */
    .recentAbstracts {
        display: block;
        width: 100% !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        background: transparent !important;
    }
    /* -----------------------------------------------------
       Hide table header
       ----------------------------------------------------- */
    .recentAbstracts thead {
        display: none;
    }
    /* -----------------------------------------------------
       Body
       ----------------------------------------------------- */
    .recentAbstracts tbody {
        display: block;
        width: 100%;
    }

    /* -----------------------------------------------------
       Each submission becomes a card
       ----------------------------------------------------- */
    .recentAbstracts tbody tr,
    .recentAbstracts tbody tr.odd,
    .recentAbstracts tbody tr.even {
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "id action"
            "title title"
            "date date";
        width: 100%;
        margin-bottom: 12px;
        background: #fff !important;
        border: 1px solid #e5eaf0 !important;
        border-radius: 12px;
        box-shadow: 0 3px 10px rgba(15, 23, 42, .04);
        overflow: visible;
        transition:
            transform .18s ease,
            box-shadow .18s ease,
            border-color .18s ease;
    }

    /* Card hover */
    .recentAbstracts tbody tr:hover {
        background: #fff !important;
        border-color: #d8e0e8 !important;
        box-shadow: 0 5px 16px rgba(15, 23, 42, .07);
        transform: translateY(-1px);
    }

    /* -----------------------------------------------------
       Cells
       ----------------------------------------------------- */
    .recentAbstracts tbody td {
        display: block;
        width: auto !important;
        border: 0 !important;
        padding: 0 !important;
        background: transparent !important;
    }

    /* -----------------------------------------------------
       Submission ID
       ----------------------------------------------------- */
    .recentAbstracts tbody td:first-child {
        grid-area: id;
        padding: 14px 15px 3px 15px !important;
        color: #98a2b3 !important;
        font-size: 10px;
        font-weight: 600;
        letter-spacing: .02em;
    }

    .recentAbstracts tbody td:first-child::before {
        content: "#";
        margin-right: 1px;
        color: #b0b8c3;
    }

    /* -----------------------------------------------------
       Title
    ----------------------------------------------------- */
    .recentAbstracts tbody td:nth-child(2) {
        grid-area: title;
        padding: 2px 15px 8px 15px !important;
        color: #273444 !important;
        font-size: 16px;
        font-weight: 600;
        line-height: 1.4;
    }

    /* -----------------------------------------------------
       Date
    ----------------------------------------------------- */
    .recentAbstracts tbody td:nth-child(3) {
        grid-area: date;
        padding: 0 15px 15px 15px !important;
        color: #7a8797 !important;
        font-size: 14px;
        font-weight: 500;
    }

    /* Date label */
    .recentAbstracts tbody td:nth-child(3)::before {
        content: "Submitted ";
        color: #a0aab7;
        font-weight: 400;
    }

    /* -----------------------------------------------------
       Action
    ----------------------------------------------------- */
    .recentAbstracts tbody td:last-child {
        grid-area: action;
        width: auto !important;
        padding: 10px 10px 0 0 !important;
        text-align: right;
    }

    /* -----------------------------------------------------
       Mobile action button
    ----------------------------------------------------- */
    .recentAbstracts .options {
        margin: 0 !important;
    }

    .recentAbstracts .options .dropdown-toggle {
        width: 36px !important;
        height: 36px !important;
        border-radius: 9px !important;
        background: #f8fafc !important;
        border-color: #e1e7ee !important;
        box-shadow: none !important;
    }

    .recentAbstracts .options .dropdown-toggle:hover,
    .recentAbstracts .options .dropdown-toggle:focus {
        background: #f1f4f8 !important;
        border-color: #d4dce5 !important;
    }

    .recentAbstracts .options .glyphicon-cog {
        font-size: 14px;
    }

    /* -----------------------------------------------------
       Mobile dropdown
    ----------------------------------------------------- */
    .recentAbstracts .actionItems {
        position: absolute;
        right: 0;
        left: auto;
        min-width: 220px;
        margin-top: 6px !important;
        padding: 6px !important;
        border-radius: 10px !important;
        box-shadow:
            0 12px 30px rgba(15, 23, 42, .14),
            0 3px 8px rgba(15, 23, 42, .06);
        z-index: 1000;
    }

    .recentAbstracts .actionItems>li>a {
        padding: 11px 12px !important;
        font-size: 13px;
        line-height: 1.35;
    }
}

/* =========================================================
   EXTRA SMALL DEVICES
   ========================================================= */
@media (max-width: 400px) {
    .recentAbstracts tbody tr {
        grid-template-columns: 1fr auto;
    }

    .recentAbstracts tbody td:first-child {
        padding-left: 13px !important;
        font-size: 10px;
    }

    .recentAbstracts tbody td:nth-child(2) {
        padding-left: 13px !important;
        padding-right: 13px !important;
        font-size: 15px;
    }

    .recentAbstracts tbody td:nth-child(3) {
        padding-left: 13px !important;
        padding-right: 13px !important;
    }

    .recentAbstracts tbody td:last-child {
        padding-right: 9px !important;
    }

    .recentAbstracts .options .dropdown-toggle {
        width: 34px !important;
        height: 34px !important;
    }
}

/* =========================================================
   EMPTY STATE
========================================================= */
@media (max-width: 767px) {
    .recentAbstracts tbody:empty::after {
        content: "No submissions found";
        display: block;
        padding: 30px 20px;
        background: #fff;
        border: 1px solid #e5eaf0;
        border-radius: 12px;
        color: #7a8797;
        text-align: center;
        font-size: 14px;
    }
}