/*
    Style for portal pages
*/
/* Registration */
.volunteer-registration img {
    height: 125px;
}
.page-title h1 {
    margin: 1em auto;
    font-size: 2.4em;
    font-weight: 600;
}
/* Login */
.login-container .wpforms-required-label {
    display:none;
}
.login-container .reset-link {
    text-align:right;
}
.login-container .wpforms-submit-container {
    margin-top:30px !important;
}
/* Volunteer edit profile */
.body.profile {
    display:flex;
}
.profile .profile-menu {
    flex: 0 0 185px;
}
.profile .profile-menu .menu-list {
    list-style: none;
    padding-left: 0;
    border-radius: 20px;
    border: 1px solid #00000040;
    overflow: hidden;
}
.profile .profile-menu .menu-list li {
    font-size: 14px;
    padding: 10px 15px;
    font-weight: 700;
}
.profile .profile-menu .menu-list li:hover {
    background-color:var(--e-global-color-highlight);
}
.profile .profile-content {
    padding-left:20px;
    flex: 1;
}
.custom-form .wpforms-container-full .wpforms-field.wpforms-field-checkbox.wpforms-list-1-columns ul {
    grid-template-columns: repeat(1, minmax(0, 1fr));
}
.custom-form .wpforms-container-full .wpforms-field.wpforms-field-checkbox.wpforms-list-2-columns ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.custom-form .wpforms-container-full .wpforms-field.wpforms-field-checkbox.wpforms-list-3-columns ul {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.custom-form .wpforms-field-checkbox legend {
    margin:10px 0 !important;
}
.custom-form .wpforms-container-full .wpforms-field.wpforms-field-checkbox ul li label {
    padding-inline-start: 12px;
}
.custom-form .experience-table {
    border:0;
    width:100%;
}
.custom-form .experience-table tr th {
    text-align:left;
}
/* Volunteer Dashboard */
.dashboard .header,.volunteer-upcoming .header,.volunteer-history .header  {
    display:flex;
    justify-content: space-between;
    align-items: center;
}
.stats {
    display: flex;
    gap: 20px;
}
.stats .total-hours {
    flex: 1;
}
.stats .total-hours #volunteer-hours-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    background-color: var(--e-global-color-grey);
    border-radius:5px;
    gap: 10px;
}
.stats .total-hours #volunteer-hours-box h2 {
    color: #FFF;
    border: 4px solid #FFF;
    margin: 0;
    width: 100px;
    height: 100px;
    line-height: 90px;
    border-radius: 50px;
    text-align: center;
    vertical-align: middle;
}
.stats .total-hours #volunteer-hours-box p {
    color: #FFF;
    font-weight: 600;
    margin:0;
}
.stats .total-hours #volunteer-hours-box h6 {
    margin:0;
    color: #FFF;
    font-weight: 600;
}
.stats .total-hours #volunteer-hours-box .buttons {
    display: flex;
    align-items: center;
}
.stats .total-hours #volunteer-hours-box button,.stats .total-hours #volunteer-hours-box button:hover {
    background-color: transparent;
    padding: 0 20px;
}
.stats .total-hours #volunteer-hours-box button:disabled {
    color: #FFFFFF4D;
}
.stats .actions {
    flex: 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 10px;
    border-radius: 5px;
}
.stats .actions .box {
    background-color: var(--e-global-color-other);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 15px 10px;;
    border-radius:5px;
}
.stats .actions .box h6 {
    margin: 0;
    text-align: center;
    font-weight: 600;
    font-size:14px;
}
.stats .actions .box h6 a {
    color: #333;
}
.volunteer-upcoming .volunteer-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid var(--e-global-color-grey);
    padding: .8em 1.5em;
    border-radius: 5px;
    margin-top: 10px;
}
.volunteer-upcoming .volunteer-box .details h6 {
    font-weight: 600;
    font-size: 18px;
    margin-bottom: 5px;
}
.volunteer-upcoming .volunteer-box .details h6 a {
    color: #333;
}
.volunteer-upcoming .volunteer-box .details p {
    color: var(--e-global-color-text);
    margin-bottom:5px;
}
.volunteer-upcoming .volunteer-box .status a:hover {
    color:#FFF;
}
.pagination {
    text-align: center;
    margin-top: 20px;
}
.pagination .page-btn {
    background-color: transparent;
    color: #333;
}
.pagination .page-btn.active {
    font-weight:bold;
}
.pagination .page-btn:disabled {
    color: var(--e-global-color-grey);
}
.volunteer-history .year-link {
    padding: 0px 10px;
    border-radius: 10px;
    color: #333;
}
.volunteer-history .year-link:hover {
    text-decoration:none;
}
.volunteer-history .year-link.selected {
    color: #FFF;
    background-color: var(--e-global-color-primary);
}
.orientation {
    display:flex;
    gap:20px;
}
.orientation-table td {
    border: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.15);
    border-bottom: 1px solid rgba(0, 0, 0, 0.15);
    padding: 1em 0;
}

/* Centre Admin */
.service-centre .title {
    background-color:var(--e-global-color-030d5f6);
    padding:20px 30px;
    border-radius:10px;
}
.service-centre .title h2,.service-centre .title h5 {
    font-weight:bold;
    margin-bottom:0;
}
.wpforms-container-full .wpforms-field.wpforms-field-checkbox.wpforms-list-7-columns ul {
    grid-template-columns: repeat(7, minmax(0, 1fr));
}
.create-opp .submit-two {
    display:flex;
    gap:20px;
}
.service-centre .top {
    display: flex;
    justify-content: space-between;
    margin-bottom:24px;
}
.service-centre .centre.top-left {
    display: flex;
    align-items: center;
    gap: 15px;
}
.service-centre .centre.top-left select {
    font-size: 14px;
    padding: 5px 4px;
}
.service-centre .centre.top-right {
    display: flex;
    align-items: center;
    gap: 15px;
}
.service-centre .table-filters, .dt-search {
    background-color: var(--e-global-color-030d5f6);
    padding: 0 30px 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.list-result .dt-column-header {
    flex-direction:row !important;
    justify-content: flex-start !important;
    gap:8px !important;
}
table tbody>tr:nth-child(odd)>td, table tbody>tr:nth-child(odd)>th {
    background-color:transparent;
}
table.list-result td, table.confirmation-table td, table th {
    border:0;
    padding:10px !important;
    vertical-align:middle;
}
table.dataTable thead>tr>th div.dt-column-header span.dt-column-title, table.dataTable thead>tr>th div.dt-column-footer span.dt-column-title, table.dataTable thead>tr>td div.dt-column-header span.dt-column-title, table.dataTable thead>tr>td div.dt-column-footer span.dt-column-title, table.dataTable tfoot>tr>th div.dt-column-header span.dt-column-title, table.dataTable tfoot>tr>th div.dt-column-footer span.dt-column-title, table.dataTable tfoot>tr>td div.dt-column-header span.dt-column-title, table.dataTable tfoot>tr>td div.dt-column-footer span.dt-column-title {
    flex-grow:0 !important;
}
table.dataTable thead>tr>th.dt-orderable-asc:hover, table.dataTable thead>tr>th.dt-orderable-desc:hover, table.dataTable thead>tr>td.dt-orderable-asc:hover, table.dataTable thead>tr>td.dt-orderable-desc:hover {
    outline:0 !important;
}
.dt-layout-cell.dt-layout-end,.dt-search,.dt-paging {
    width:100%;
}
.dt-paging {
    text-align: center;
}
.dt-paging button.first,.dt-paging button.last {
    display:none !important;
}
div.dt-container .dt-paging .dt-paging-button {
    padding: .3em .6em !important;
    margin: 0 10px;
}
div.dt-container .dt-paging .dt-paging-button.current, div.dt-container .dt-paging .dt-paging-button.current:hover {
    border: 0 !important;
    background: none !important;
    color:#fff !important;
    font-weight:700;
    border-radius:50px;
    padding: .3em .6em;
    cursor: default;
}
div.dt-container .dt-paging button:not(.disabled):not(.current):hover {
    background: none !important;
    background-color: var(--e-global-color-primary) !important;
    font-weight:700;
    border: none !important;
    border-radius:50px;
    padding: .3em .6em;
    cursor: pointer;
}
.dt-search {
    margin-top: -1.5em;
    margin-bottom: 2em;
    border-radius: 0 0 10px 10px;
}
.dt-search label {
    margin-right: 41px;
}
.dt-search input {
    border: 1px solid #666 !important;
    border-radius: 3px !important;
    padding: .5rem 1rem !important;
    background-color: #fff !important;
}
.opportunity-status {
    font-size: 13px;
    font-weight: 700;
    border-radius: 5px;
    display: block;
    width: 100px;
    text-align: center;
    padding: 2px 0;
}
.opportunity-status.status-draft {
    border: 1px solid #000;
}
.opportunity-status.status-pending {
    border: 1px solid var(--e-global-color-fd535a7);
    background-color:var(--e-global-color-fd535a7);
    color:#fff;
}
.opportunity-status.status-open {
    border: 1px solid var(--e-global-color-green);
    background-color:var(--e-global-color-green);
    color:#fff;
}
.opportunity-status.status-closed {
    border: 1px solid var(--e-global-color-grey);
    background-color:var(--e-global-color-grey);
    color:#fff;
}
.opportunity-status.status-rejected {
    border: 1px solid var(--e-global-color-primary);
    background-color:var(--e-global-color-primary);
    color:#fff;
}
.closed-opportunity {
    color: var(--e-global-color-grey);
}
.manage-icons {
    display: flex;
    gap: 15px;
    align-items: center;
}
/* Centre Admi Volunteer List */
.summary-container {
    display:flex;
    gap: 15px;
}
.summary-container .summary-box {
    background-color: var(--e-global-color-030d5f6);
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 30px 20px;
    border-radius:10px;
}
.summary-box strong {
    font-size: 48px;
}
.summary-box .label {
    font-weight: bold;
}
.volunteer-info {
    background-color: var(--e-global-color-030d5f6);
    padding: 20px 30px;
    border-radius: 0 0 10px 10px;
    display:flex;
}
.volunteer-info > div {
    flex:1;
}
.volunteer-info table.info-table {
    margin-bottom:0;
}
.volunteer-info table.info-table td,.volunteer-info table.info-table th {
    padding:2px !important;
    text-align:left;
    border:0;
    min-width:90px;
}
.table-head {
    display: flex;
    justify-content: space-between;
    margin-bottom: -15px;
}

/* Centre Admin Profile Page */
.centre-grid {
    margin: 40px 0 30px;
}
.centre-grid .centre-line {
    display: flex;
}
.centre-grid .centre-line .label {
    font-weight: 700;
    width: 30%;
}
.centre-grid .centre-line .value {
    width: 70%;
}
/* Centre Admin View Opportunity */
.image-view img {
    height: 240px;
    width: 100%;
    object-fit: cover;
    border-radius: 20px;
}
.quick-view {
    background-color: var(--e-global-color-030d5f6);
    padding: 20px 30px 20px;
    margin-top: 0;
    margin-bottom: 2em;
    border-radius: 0 0 10px 10px;
}
.quick-view p {
    margin-bottom:0.5em;
}
button.addUserBtn,button.removeUserBtn {
    background: none;
    color: var(--e-global-color-primary);
    padding: 0 10px;
}
button.addUserBtn:hover,button.removeUserBtn:hover {
    text-decoration: underline;
}
.more-details .centre-line .label,.quick-view .centre-line .label {
    font-weight: 600;
}
.sessions-list .accordion-item {
    border-bottom: 1px solid #ddd;
}
.sessions-list .accordion-header {
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 0;
    margin: 0;
}
.sessions-list .accordion-icon {
    transition: transform 0.3s ease;
}
.sessions-list .accordion-item.active .accordion-icon {
    transform: rotate(-90deg);
}
.sessions-list .accordion-body { 
    display: none; 
    padding-bottom: 10px;
}
.sessions-list .accordion-item.active .accordion-body { 
    display: block; 
}
.sessions-list .accordion-body th {
    border-block-start: none !important;
    text-align: left;
}
.sessions-list .accordion-body td {
    border: 0;
    padding: 0 10px;
    vertical-align: middle;
}
.sessions-list .status-filter-link {
    cursor: pointer;
    text-decoration:underline;
    color:#333;
}
.sessions-list .status-filter-link.active {
    font-weight:bold;
    cursor: default;
}
.sessions-list .status-filter-link.active:hover {
    text-decoration:none;
}
#volunteer-quickview-modal {
    width:50%;
}
#volunteer-quickview-modal .details {
    background-color: var(--e-global-color-other);
    display:flex;
    border-radius:10px;
    padding: 20px 30px;
    gap:20px;
    flex-wrap: wrap;
}
#volunteer-quickview-modal .details div {
    flex-basis: 48%;
    overflow:hidden;
}
#volunteer-quickview-modal .details div.cancel-approve {
    flex-basis: 100%;
    border-top: 1px solid #aaa;
    padding-top: 20px;
}
table.quick-table {
    margin-bottom:0;
}
table.quick-table td,table.quick-table th {
    padding:5px !important;
    text-align:left;
    border:0;
    min-width:90px;
}

/* MSF form related */
.menu-list li.active {
    background-color:var(--e-global-color-highlight);
}
#upload_msf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--e-global-color-other);
    padding: 10px;
    border-radius: 5px;
    margin-top: 1em;
}
#upload_msf input[type=submit] {
    background-color: var(--e-global-color-primary);
    color: var(--e-global-color-781b25c);
    border: 1px solid var(--e-global-color-primary);
    border-radius: 5px;
}
#upload_msf input[type=submit]:hover {
    background-color: #FFF;
    color: var(--e-global-color-primary);
}
/* Edit opportunity related */
.edit-session .dashicons {
    color: var(--e-global-color-primary);
    font-size: 18px;
}
.edit-session input.edit-start, .edit-session input.edit-end {
    width: 100px;
    max-width: 100px;
}