@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700&display=swap');

/* colour declaration */
:root {
    --clr-main:#0162B1;
    --clr-accent:#9FC70A;
    --clr-sky-blue:#DAE5EE;
    --clr-text:#414141;
    --clr-error-text:#BA120E;

    --clr-header-text:#444;
    --clr-menu-text:#444;
    --clr-text-heading:#444;
    --clr-button:#DAC325;    
    --clr-footer:#782C6D;    
    --clr-footer-text:#FFF;    

/*    --clr-icon-bg:#F2F4F9;
    --clr-icon:#6674A6;
*/    
    /* better contrast shades */
    --bs-primary-rgb:1, 98, 177;
    --bs-secondary-rgb:159, 199, 10;
    --bs-pagination-padding-y:0.375rem;
}

html { font-size:14px; color:var(--clr-text); position:relative; height:100%; }
body { margin-bottom:60px; font-family: 'Inter', "Segoe UI", Roboto, Arial, sans-serif; }
/* Custom button definitions */
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus { box-shadow:0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb; }

/* Blue (Primary) & Green (Secondary) */
.btn-iclass-blue { background-color:var(--clr-main); color:#fff; border:none; } .btn-iclass-blue:hover { background-color:#014a86; color:#fff; }.bg-iclass-blue { background-color:var(--clr-main) !important; } .text-iclass-blue { color:var(--clr-main) !important; }
.btn-iclass-green { background-color:var(--clr-accent); color:#fff; border:none; } .btn-iclass-green:hover { background-color:#7fa008; color:#fff; } .bg-iclass-green { background-color:var(--clr-accent) !important; } .text-iclass-green { color:var(--clr-accent) !important; }
.btn-iclass-sky { background-color:var(--clr-sky-blue); color:var(--clr-main); border:none; } .btn-iclass-sky:hover { background-color:#6674A6; color:#fff; } .bg-iclass-sky { background-color:var(--clr-sky-blue) !important; } .text-iclass-sky { color:#6674A6 !important; }

/* Ajax processing & modal styles */
.ajax-processing-container { position:fixed; left:40%; top:40%; color:black; z-index:9999999; }
.ajax-processing { padding:40px; text-align:center; border:1px solid #333; border-radius:10px; background-color:#fff; box-shadow:0 10px 30px rgba(0,0,0,0.4); }

.modal-background { background-color:rgb(108, 117, 125, 0.7); z-index:500 !important; }
.ajax-modal { width:600px; max-width:85%; min-height:250px; text-align:left; background-color:White; border:1px solid #313131; padding:0; min-width:350px; -webkit-border-radius:6px; -moz-border-radius:6px; border-radius:6px; z-index:600 !important; max-height:90%; overflow-y:auto; }
.modal-xl { width:1140px !important; } .modal-lg { width:800px !important; }  .modal-sm { width:300px !important; }
.ajax-modal .modal-header { display:flex; flex-shrink:0; align-items:center; padding:16px; border-bottom:1px solid gray; }
.ajax-modal .modal-title { padding:16px; color:#585858 !important; text-transform:uppercase !important; font-weight:bold !important; border-bottom:1px solid #dee2e6; }
.ajax-modal .modal-container { padding:30px; display:flex; align-content:center; justify-content:center; flex-direction:column; }
.ajax-modal .close-modal { width:100%; height:30px; padding-top:3px; text-align:right; background-color:#313131; }
.ajax-modal .modal-footer { padding:16px; border-top:1px solid #dee2e6; }
.modal-close { color:#fff; font-size:22px; padding-right:10px; cursor:pointer; }
.ajax-modal-video { width:860px !important; }

.auto-completion-list { border:solid 1px var(--clr-main); min-width:250px; margin:0; padding:5px; height:150px; overflow:auto; background-color:#FFFFFF; border-bottom-left-radius:10px; border-bottom-right-radius:10px; }
.auto-list-item { color:#1C1C1C; padding:3px 6px; }
.auto-item-highlighted { background-color:#ffc0c0; padding:3px 6px; cursor:pointer; }

/* Generic styles */
.control-label { font-size:13px; margin-bottom:4px; color:#6b7280; }
.alert { font-size:14px;}
.print-btn { position:absolute; top:50px; right:50px;}
.strike-through { text-decoration:line-through !important; color:var(--clr-error-text) !important; }
.checkbox label { margin-left:10px; }
.icon i { color:var(--clr-main); background-color:var(--clr-sky-blue); font-size:25px; padding:12px; border-radius:25px; width:55px; text-align:center; }
a.disabled { pointer-events:none; color:var(--clr-text) !important; text-decoration:none !important; cursor:default; }
.image-holder { width:100px; height:75px; display:flex; justify-content:center; align-items:center; overflow:hidden; font-family:'FontAwesome'; font-weight:400; font-size:32px; color:#666; }
.image-holder:before { content:"\f03e"; position:absolute; }
.image-holder img { max-width:100%; max-height:100%; object-fit:contain; z-index:99; position:relative; }

.error-overlay { position:fixed; inset:0; background:rgba(0, 0, 0, 0.25); backdrop-filter:blur(4px); display:flex; justify-content:center; align-items:flex-start; padding-top:80px; z-index:9999; animation:fadeIn 0.2s ease; }
.error-panel { position:fixed; left:0; right:0; display:flex; gap:16px; max-width:500px; min-height:100px; padding:20px 24px;margin:40px auto; background:#BA120E; color:#fff; border-radius:12px; border:1px solid #2c2c2c; box-shadow:0 10px 30px rgba(0,0,0,0.4); animation:slideDown 0.25s ease; z-index:9999; }
.error-close { font-size:24px; position:absolute;top:5px; right:15px; }
.field-error, .field-error a { color:var(--clr-error-text); font-weight:500;}
.delete-record {  }

/* Layout template */
.layout-container { display:flex; min-height:100vh; flex-direction:column; }
.site-content { display:flex; flex:1; min-height:0; }
.navigation { background-color:var(--clr-main); color:#fff; padding:0 25px; width:200px; transition:width 0.3s ease; font-size:18px; flex-shrink:0; }
.navigation .iclass-logo { padding:25px 0; text-align:center; }
.navigation .iclass-logo img { height:50px; }
.navigation .nav-links { padding-left:0; }
.navigation .nav-links li { list-style-type:none; margin-bottom:10px; position:relative; }
.navigation .nav-links i { font-size:16px; margin-right:5px; text-align:center; width:20px; }
.navigation .nav-links a { color:#fff; font-weight:300; text-decoration:none; display:inline-flex; align-items:center; }
.navigation .counter { color:#fff; background-color:#FF2626; font-size:10px; font-weight:bold; position:absolute; top:-3px !important; left:-12px; padding:1px 6px; -webkit-border-radius:10px; -moz-border-radius:10px; border-radius:10px; }

.right { flex:1; display:flex; flex-direction:column; min-height:0; background-color:#FAFAFA; }
.header-section { height:85px; padding:0 20px; display:flex; justify-content:space-between; align-items:flex-end; }
.header-section .name { padding-top:30px 0 10px; }
.header-section .name a { color:var(--clr-main); font-size:38px; font-weight:600; text-decoration:none; }
.header-section .logo { display:none; } .header-section .logo img { height:75px; }
.content-panel { flex:1; padding:0 20px 45px; }
.footer-section { font-size:12px; background-color:#333; color:#fff; height:50px; text-align:center; align-content:center; }

/* Page styles */
.page-menu { }
.page-menu .page-title { font-size:28px; font-weight:600; } 
.page-menu .page-title a { text-decoration:none; color:var(--clr-text); cursor:pointer; }
.page-menu .page-title a:hover { text-decoration:underline; }
.page-menu .sub-menu { display:flex; column-gap:15px; justify-content:end;  }
.search-container, .detail-container { display:flex; column-gap:20px; margin-bottom:30px; }
.search-content, .detail-content { height:100%; padding:20px; border:1px solid var(--bs-border-color-translucent); background-color:#FFF; border-radius:0.375rem; }
.search-container .export { }
.detail-content { width:100%; }

table.results-grid { border:1px solid var(--bs-border-color-translucent) !important; border-radius:0.375rem; font-size:14px; background-color:#fff; width:100%;}
.results-grid .header { background-color:#EBF3F7; font-weight:500; }
.results-grid .header th { padding:10px 15px; font-weight:500; }
.results-grid .header a::after { font-family:'FontAwesome'; content:"\f338"; margin-left:5px; }
.results-grid tr { border-bottom:1px solid var(--bs-border-color-translucent); }
.results-grid td { padding:10px 15px; }
.results-grid td.image-column { padding:10px 0; }
.results-grid tr.odd { background-color:#FAFAFA; }
.results-grid tr:hover { background-color:#EFEFEF; }
.results-grid a { color:#00609C; }
.results-total span { font-weight:600; font-size:16px; text-indent:10px; color:red;}

.pagination { display:table-row; }
.pagination span, .pagination a { position:relative; display:inline-block; padding:var(--bs-pagination-padding-y) 0.75rem 0.75rem; font-size:1rem; color:var(--clr-main); background-color:#fff; text-decoration:none; transition:color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;}
.pagination span { background-color:var(--clr-main); color:#fff; }
.pagination a:hover { background-color:var(--clr-accent); color:#fff; }

.btn-delete { font-size:20px; color:var(--clr-error-text) !important; }

/* Login screen */
.login-section { display:flex; margin:0; height:90vh; justify-content:flex-start; align-items:center; margin-left:5%; }
.login-section .login-control { width:500px; padding:50px; background:#fff; border-radius:20px; }
.login-section .school-info { text-align:center; margin-bottom:30px; }
.login-section .school-info h3 { font-size:22px; }

.login-section .more-info { display:flex; justify-content:center; text-align:center; flex-wrap:wrap; }
.login-section .more-info p { margin-top:40px; font-size:18px; }
.page-info { font-size:smaller; padding:12px; }

/*  Home dashboard */
.article { display:flex; column-gap:15px; margin-bottom:20px; border:1px solid #cfcfcf; border-radius:5px; padding:10px }
.article .image-holder { width:125px; height:100px; border:1px solid #bfbfbf; background-color:#bfbfbf; }
.article .image-holder img { object-fit:cover; width:100%; height:100%; max-height:unset; max-width:unset; }
.article .content { width:calc(100% - 140px); }
.article .content .author { font-size:13px; }
.article .content .title { height:25px; overflow:hidden; }
.article .content .title a { color:var(--clr-main); text-decoration:none;}
.article .content .description { max-height:60px; overflow:hidden; }
.article .content .date-published { font-size:13px; }


/*  Print pages  */
.event-results { width:100%; border:0; }
.event-results .event-row { display:flex; border-bottom:1px solid #000; line-height:28px; }
.event-results .event-row.odd { background-color:#efefef; }
.event-results .event-row .event-name { clear:both; width:200px; }
.event-results .event-row .attendee-name { width:300px; }
.event-results .event-row .num-attendees { width:200px; }
.event-results .event-row .date { width:200px; }

#PrintPage .Results .EnquiryRow { display:inline-block; border:0px solid #000; min-width:800px; padding:10px 20px; }
#PrintPage .Results .EmailAddress, #PrintPage .Results .Name, #PrintPage .Results .PhoneNumber, #PrintPage .Results .DateAdded { width:100%; line-height:30px; }
#PrintPage .Results .Enquiry { width:100%; min-height:30px; }

#KeywordContainer { display:flex; flex-wrap:wrap; gap:10px; }
#KeywordContainer .keyword { display:flex; justify-content:space-between; align-items:center; background-color:#F1F6F9; padding:5px 12px; border:1px solid #96B4CD; border-radius:16px; font-size:14px; color:var(--clr-main); box-shadow:0 1px 3px rgba(0, 0, 0, 0.3); }
#KeywordContainer .keyword .fa { color:var(--clr-main); font-size:20px; padding-left:8px; cursor:pointer; }
#KeywordContainer .keyword .remove { color:var(--clr-main); font-size:14px; padding-left:8px; cursor:pointer; }

.app-container i { color:var(--clr-main); background-color:var(--clr-sky-blue);  }
.app-container .card { min-height:550px;  }
.app-container .qty-registered { font-size:42px; font-weight:700; line-height:normal; }
.app-container .summary-box { border-bottom:2px solid var(--clr-main); border-bottom-left-radius:10px; border-bottom-right-radius:10px; padding:10px 15px;   }
.app-container .summary-box span { font-weight:600; }
.app-container .summary-box .text-muted { font-size:14px;  }


@media (min-width:768px) {

  html { font-size:16px; }

}

@media (max-width:768px) {

    .menu { width:100%; height:60px; }
    .right { flex-direction:column;}
    .navigation { width:65px; }
    .navigation .nav-links .title { display:none;}
    .navigation .iclass-logo img { height:25px; position:relative; left:-12px; }
}