body { font-family: 'Inter', sans-serif !important; color: #202124 !important; -webkit-font-smoothing: antialiased !important; -moz-osx-font-smoothing: grayscale !important; } /* styles from Laptops to XL screens (1024px - 1536px) */ @media only screen and (min-width: 1024px) { .{} #IMDSdiv, #Regdiv {margin-top: 1rem} #extendedPrivacyCheckpoint {width: 93%;} #removeEmployee {height: 73vh;} #headFunctions {font-weight: 370;} #modalBox {max-height: 65vh;} #thisEmployerMess {margin-bottom: 1rem !important;} #messageEmployer {height: 60vh; border-right: 1px solid darkgrey; padding-top: 0rem !important; padding-left: 1rem; padding-right: 0} #inboxEmployer {height: 60vh; border-right: 1px groove darkgrey; width: 35% !important;} #MasterModal {--bs-modal-width: 100% !important;} #noteThis0 {margin-bottom: 2rem !important;} #privateHomeRow, #orgHomeRow {margin-top: 6rem !important;} .HideThis0, .HideThis {display: table-row !important;} #mobiPassRules, #spanThis, #spanThis0, .arrowThis, #TR0, #messageTextArea, #par5, #insbutt9, #insNames, #inshead, #list-container, #showTextarea, #mobileOnly, #thisTopic, #closeTabButt01, #buttReviewMesMobi, #replyBox01, #btn1501, #sent001, #orgCD, #insLKU00, #closeOrgP, #closeCOC, #goToMobi, #closeOrgOffice, #btn13 {display: none !important;} #private_home, #orghome00 {width: 22%; border-left: 1px solid darkgray; border-right: 1px solid darkgray; height: 65vh; margin-left: 2rem} #staff_management_databaseResults, #staff_management, #orgOffice, #extended_networks_searchResults {height: 65vh; border-right: 1px solid darkgrey; width: 22%;} #employerMessagesMasterColumn {height: 65vh; border-right: 1px solid darkgrey; width: 44%;} #staff_management_databaseResults {animation: none;} #logout {background-color: transparent !important; color: #57abfa; padding: 0; font-size: 14px; margin-top: 2.5rem} #btn1, #btn2, #btn16, #btn3, #ofiiceButt, #btn70, #btn21, #inbt14, #inbtn5, #btn10, #btn11 {font-size: 13px;} #inpar2, #inpar35, #list-container {font-size: 14px !important;} #filter, #extendednetworks_filter {margin-top: .5rem; width: 95%; margin-left: 2.5%;} #content {zoom: 0.87; height: 114.94%; position: relative;} #signUpScreenInstitution{width: 22% !important;} #signUpScreen {width: 22% !important;} #logo {margin-left: 2rem !important; padding-bottom: 1rem} #inslogo {margin-left: 1.5rem !important; padding-bottom: 4rem} #TR {margin-right: .5rem !important; margin-left: .5rem !important;} #OfficeLookup, #profileInstitutions, #profileInstitutionsEXTNDD {height: 65vh; border-right: 1px solid darkgrey; width: 22%;} #officeDirectory {height: 65vh; border-right: 1px solid darkgrey; width: 22%; margin-top: 0 !important;} #queryDesk1Topic {height: 65vh; width: 22% !important; border-right: 1px solid darkgrey !important;} #header {margin-bottom: 3rem;} #btn4 {background-color: transparent !important; color: #57abfa; padding: 0;} #officelookup { margin-top: 3rem !important; font-size: 13px !important;} #officelookup::-moz-placeholder { font-size: 13px !important;} #officelookup::placeholder { font-size: 13px !important;} #devcount {color: #57abfa;font-size: 11px;} #BXEM { max-height: 58vh !important; padding-top: 20px;} #BXEM00 { max-height: 31.5vh !important;} #week1Grid, #week2Grid, #week3Grid, #week4Grid {margin-left: 0; margin-right: 0;} #par13, #insLKUE {margin-top: 0 !important;} #btn21, #btn7 {display: none;} #closeTabButt, #closeTabButt02 {display: block !important;} #employermes {margin-top: -1rem;padding-left: 0 !important;padding-right: 0 !important;} #h001 {margin-top: 5em;} .content00 {overflow-y: scroll; &::-webkit-scrollbar {display: none;} & {-ms-overflow-style: none; /* for IE and Edge */}} .box00 {width: 100%; height: auto; max-height: 62vh; background-color: transparent; display: flex; flex-direction: column; margin-top: 0rem;} } /* BELOW LAPTOPS */ @media (max-width: 1023px) { .{} #activeChats {top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100% !important;} #termsWraper {padding-bottom: 30px !important;} #terms_and_conditions {overflow-y: auto !important; height: 100vh !important;} .report-header {margin-left: 0 !important; margin-right: 0 !important;} .ish-report-wrapper {padding-left: 0 !important; padding-right: 0 !important} #colOne, #colTwo, #colThree, #colFour {flex: 0 0 auto !important; width: 100% !important; border-right: unset !important;} #colOne, #colTwo, #colThree, #colFour {padding-left: 0 !important; padding-right: 0 !important;} #colOne, #colTwo, #colThree {border-bottom: 1px dotted black !important; margin-bottom: 1rem !important; padding-bottom: 1rem !important;} #Achievements {margin-right: .8rem !important;} #TBLSE01, #TBLSE02, #TBLSE03 {margin-right: 1rem !important;} #closeAP {margin-top: 2rem !important} #MODE001E, #MODE002E, #MODE003E {border-top-right-radius: calc(.3rem - 1px); border-top-left-radius: calc(.3rem - 1px);} #modalBox {max-height: 68.5vh !important;} #coc00 {max-height: 72.5vh !important;} #insbox, #clusterBox {height: 55vh !important;} #removeEmployee {top: 0 !important;} #btn71 {margin-top: -2rem;} #NFAT {margin-top: 20rem;} #modalBox, #par34 {padding-bottom: 0px !important;} #hideThisPalette {margin-bottom: 1rem} #coms {margin-bottom: 1.5rem;} #profileInstitutions, #private_home {margin-top: 2rem} #Hd1cBox {height: 80vh !important;} #content, #normal {zoom: 0.87;height: 114.94%;position: relative } #thisTopic {margin-top: 0 !important; margin-bottom: 0 !important; padding-bottom: 0 !important;} #inboxHead {margin-top: 1rem !important;padding-right: 1rem;} #inboxFooter {margin: 0 !important;} #BXEM1 {max-height: 90vh; overflow-y: auto; scrollbar-width: none; -ms-overflow-style: none; } #inboxEmployer, #messageEmployer {height: 65vh !important; overflow: hidden;padding-left: 1rem; padding-right: 1rem;} #bodyMODE00, #bodyMODE {padding-left: .5rem; padding-right: .5rem} .nameLists00 {font-weight: 500 !important} .LNThis, #ledgerBody {padding-top: 1rem !important;} #accountIDThis {margin-bottom: 0 !important;} #WWS, #DMG {padding-top: 0 !important;} #noteThis {margin-bottom: .1rem !important;} #bodyThis {padding-bottom: 0 !important} #appointmentLists, #userProfile, #notifications, #COCdefined {width: 100% !important} #butt0, #HD1messageAreaReceiver, #desktopOnly, #helpDesk1MessageArea, #sent, #butt03, .mobileRect, #closeFunctionT, #locateEMP, #insLKU, #userRegistrationPasswordError, #buttReviewMes, #closeFunctionT, #CL01, #CD, #goToLap {display: none !important;} .noteThis, .HideThis, .HideThis0 {display: none; opacity: 0;} .ThisHide, #noteThis, #noteThis0 {display: inline; opacity: 1;} #signUpScreenInstitution {margin-left: 0 !important;margin-top: -3rem !important;} #signUpScreen {margin-left: 0 !important;margin-top: 0rem !important;} #userLoginBody {border-top-left-radius: calc(.3rem - 1px); border-top-right-radius: calc(.3rem - 1px);} #logout {margin-top: 3rem; color: #000 !important; font-size: 13px;} #confirmLogoutBtn {font-weight: 520;} #logo, #LogOutText {font-weight: normal;} #btn4 { color: #202124 !important;} #par1 {font-size:13px; margin-top:1rem; font-weight: normal !important;} #par2, #par6, #btn9, #c26, #par11, #bg, #office_title {font-size:13px !important;} #par12 {font-size: 12px; color: darkgray;} #par3, #par4 {display: none;} #par5 {display: block !important;} #btn15, #sent, #btn5, #spanWeek1, #spanWeek2, #spanWeek3,#spanWeek4 {font-size: 13px !important;} #btn1, #btn2, #btn16, #btn3, #ofiiceButt, #btn70, #btn21, #btn22, .butt4, .butt17, #btn13, .ul2{font-size: 13px !important;font-weight: normal;} #buttReviewMes {font-size: 11px; margin-top: 1rem !important; border-bottom: none !important;} #btn4 {font-size: 13px; font-weight: normal;} #btn8 {margin-top: 0; font-size: 11px;} #h003 { font-size: 14px !important; font-weight: 500;} #box001 { height: 35vh !important;} #nameInstitution {font-size: 13px !important; font-weight: 520 !important;} #queryDesk1, #h002, #par6 {margin-top: 1rem !important;} #chat, #helpDesk1MessageArea, #topic1, #paragraph, #parMess{font-size: 12px} #topic00 {font-size: 11.5px;} #par7, #par8, #par9 {padding-left: 20px; padding-right: 20px;} #modal01 {padding-left: 20px !important; padding-right: 20px !important;} #conversation {margin-left: 24px !important;} #acc01 {margin-left: 24px; margin-right: 24px;} #paar10, #spanName, #inpar2 {font-size: 13px !important;} #officeTittle {display: block !important;} .spanTime {font-size: 11px !important; color: darkgray !important;} /* Universal fix for mobile browser address bar offset */ @media (max-width: 576px) { .{} .modal-dialog.modal-dialog-centered { /* Ensures alignment centers within the true visible window */ min-height: calc(100dvh - 1.5rem) !important; margin: 1.75rem auto; display: flex; align-items: center; } } } #signUpScreenInstitution { position: absolute; margin-top: 4.3rem; width: 100%; margin-left: 2rem; display: flex; flex-direction: column; justify-content: center; height: auto; min-height: 100vh; scrollbar-width: none; -ms-overflow-style: none; transition: height 0.3s ease-in-out;} #signUpScreen { position: absolute;margin-top: 4.3rem; width: 100%; margin-left: 2rem; display: flex; flex-direction: column; justify-content: center; height: auto; min-height: 100vh; scrollbar-width: none; -ms-overflow-style: none; transition: height 0.3s ease-in-out; } #BXEM::-webkit-scrollbar { /* for Chrome, Safari, and Opera */ display: none; } /*Default Styles*/ input, textarea { caret-color: invert(100%); }/*input::-moz-placeholder {color: rgb(255, 255, 255) ;} input::placeholder {color: rgb(255, 255, 255) ;}*/ #input_reports::-webkit-input-placeholder { /* WebKit, Blink, Edge */ color: rgb(0, 0, 0); } #input_reports::-moz-placeholder { /* Mozilla Firefox 19+ */ color: rgb(0, 0, 0); opacity: 1; } #input_reports:-ms-input-placeholder { /* Internet Explorer 10-11 */ color: rgb(0, 0, 0); } /* Schedule Styles */ #schedule>input::-webkit-input-placeholder, #schedule>input::-moz-placeholder, #schedule>input:-ms-input-placeholder, #schedule>input::-ms-input-placeholder, #schedule>input::placeholder { color: #202124; font-weight: 510; } /* Span2 Styles */ .span2>.form-control3::-webkit-input-placeholder, .span2>.form-control3::-moz-placeholder, .span2>.form-control3:-ms-input-placeholder, .span2>.form-control3::-ms-input-placeholder, .span2>.form-control3::placeholder { color: #202124 !important; opacity: 1; } /* Text1 Styles */ #text1::-webkit-input-placeholder, #text1::-moz-placeholder, #text1:-ms-input-placeholder, #text1::-ms-input-placeholder, #text1::placeholder { color: #202124; font-size: 13px; font-weight: 500; } #Email_address:focus { caret-color: #202124 !important} #myInput:focus { caret-color: #202124 !important} /* Office Lookup Styles */ #officelookup::-webkit-input-placeholder, #officelookup::-moz-placeholder, #officelookup:-ms-input-placeholder, #officelookup::-ms-input-placeholder, #officelookup::placeholder { color: white; text-align: left; font-weight: 370; font-size: 14px; } /* Panel Styles */ .panel>.textareaAppointment::-webkit-input-placeholder, .panel>.textareaAppointment::-moz-placeholder, .panel>.textareaAppointment:-ms-input-placeholder, .panel>.textareaAppointment::-ms-input-placeholder, .panel>.textareaAppointment::placeholder { color: #202124; min-height: 1; } /* Topic1 Styles */ #topic1::-webkit-input-placeholder, #topic1::-moz-placeholder, #topic1:-ms-input-placeholder, #topic1::-ms-input-placeholder, #topic1::placeholder { color: #202124; } /* Help Desk Message Area Styles */ #helpDesk1MessageArea::-webkit-input-placeholder, #helpDesk1MessageArea::-moz-placeholder, #helpDesk1MessageArea:-ms-input-placeholder, #helpDesk1MessageArea::-ms-input-placeholder, #helpDesk1MessageArea::placeholder { color: #202124; } /* HD1 Message Area Receiver Styles */ #HD1messageAreaReceiver::-webkit-input-placeholder, #HD1messageAreaReceiver::-moz-placeholder, #HD1messageAreaReceiver:-ms-input-placeholder, #HD1messageAreaReceiver::-ms-input-placeholder, #HD1messageAreaReceiver::placeholder { color: #202124; padding-top: calc(50% - 2.2em); text-align: center; } /* HD1 Message Area Receiver Styles */ #HD1messageAreaReceiver1::-webkit-input-placeholder, #HD1messageAreaReceiver1::-moz-placeholder, #HD1messageAreaReceiver1:-ms-input-placeholder, #HD1messageAreaReceiver1::-ms-input-placeholder, #HD1messageAreaReceiver1::placeholder { color: white; } /* Reference01 Styles */ #Reference01::-webkit-input-placeholder, #Reference01::-moz-placeholder, #Reference01:-ms-input-placeholder, #Reference01::-ms-input-placeholder, #Reference01::placeholder { color: rgb(0, 0, 0); } /* Reference1 Styles */ #Reference1::-webkit-input-placeholder, #Reference1::-moz-placeholder, #Reference1:-ms-input-placeholder, #Reference1::-ms-input-placeholder, #Reference1::placeholder { color: rgb(255, 255, 255); } /* Reference1 Styles */ .SP::-webkit-input-placeholder, .SP::-moz-placeholder, .SP:-ms-input-placeholder, .SP::-ms-input-placeholder, .SP::placeholder { color: rgb(0, 0, 0); } /* Styles for the SVG bullet points */ .bullet { margin-left: -20.1px; width: 20px; fill: white; float: left; padding-right: 9px } /*ROWS*/ /*COLUMNS*/ /*PARAGRAPHS*/ /*BUTTONS*/ /*ICONS*/ ANIMATIONS*/ #colGrid1 {animation: fadeOut 0.7s; } @keyframes fadeOut { 0% { opacity: 0; } 100% { opacity: 1; } } .col2 , .col14 , .col13 , .col15 , .par38 , .par34 , .par35 , .par39 , .col16 , #par_inline , #par_inline1 , .par1 , .par5 , .alert1 , #submit, #colGrid1 , #proceed, #done, #colGrid2 , #codeofconduct_butt2 , #reports_butt2, .reports_alert, #monday_update_form, #par, #col_wefeks, #office_notice, #monday_col2, #office_title, #btn4, #office_EMPLOYEE_week1, .date, #notice2, #alert_record_exists, #update1, #submit, #submitSchedule, #spn1, #weekSuccess, #datesSuccess, #sessionSuccess, #dayMO, #dayTU, #dayWE, #appointmentsTicket, #dayTH, #dayFR, #daySA, #daySU, #currentWeekError, #currentWeekForbidden, #currentWeekSuccess, #officeDirectory, #private_home, #queryResults, .monInput .grid10, #c27, #inboxEmployer, #conversation #messageEmployer, #profileInstitutions, #successNotice, #onboarding, #OfficeLookup, #par2, #HD1messageAreaReceiver, #btn03, #userValidation, #userForgotPassword, #accountSuccess, #confirmAccount, #preloader01, #preloader02, #preloader, #AIE, #SPE, #PCS, #NC, #butt01, #butt02, #butt03, #formSubmitting, #securitySuccess, #orgOffice, #dismissBT, #successMess, #spanThis0, #ADAS, .arrowThis, #inboxEmployerMobi, #messageEmployerMobi, #orghome00, #par1, #btn22, #conditional1, #conditional6, #conditional39, #ofiiceButt, #btn4, #Employee, #LedgerProfilesHigherResRow, #privateHomeRow, #clearLanguage, #deleteLanguage, #deleteMatric, #clearMatric, #matric-content, #tertiary-content, #postgrad-content, #shortcourse-content, #noWorkhistory, #noMatric, #noProfBody, #noLanguage, #noPostgrad, #noTertiary, #noShortcourse, .language-item, .matric-item, .professionalbody-item, .tertiary-item, .postgrad-item, .workhistory-item, .shortcourse-item, #clearPostgrad, #clearWorkhistory, #clearShortcourse, #clearProfessionalbody, #deleteProfessionalbody, #deletePostgrad, #deleteWorkhistory, #deleteShortcourse, #clearTertiary, #deleteTertiary, #editClusterProfile01, #submitClusterProfile01, #cancelClusterEdit01, #editClusterProfile, #submitClusterProfile, #cancelClusterEdit, #page02, #archieveList, #listDetails, #btnArchieve, #statsNoData, #closeIMDS, .legal, .search-result-list, #Regdiv, #getPlace, #placeLookup, .settlement-card, #feedback, #statsTable, #statsTableUser, #statsHead, #statsSummary, #statsSummaryUser, .users, #roleOverview, #rolePermissionsEdit, #editBlock, #createBlock, #forbiddenAdmin, #AdminLoginContainer {animation: fadeIn 0.7s;} @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } #detailPanel, #detailPanel0 { opacity: 0; visibility: hidden; transition: opacity 0.4s ease, visibility 0.4s ease; } #detailPanel.show, #detailPanel0.show { opacity: 1; visibility: visible; } #detailPanel, #detailPanel0{ width: 92%; border: 1px solid #dee2e6; margin: auto; } #detailPanel[style*="display: block"], #detailPanel0[style*="display: block"] { opacity: 1; transform: translateY(0); } .par1 {color:#57abfa;font-size:30px;text-align:left;font-family:sans-serif;font-weight:370;margin-top: 30px;margin-left: .5rem;} .container1 { margin-left: 0px; margin-right: 0px; padding-bottom: 50px;} .col1 .col2 {position: absolute;} .col2 {width: 100%;position: relative;height: 0px;} .par2 {color: white;font-size:15px;margin-top:2rem;margin-left:.5rem;margin-right:.5rem;font-weight: normal;} .par02 {margin-left: .5rem; margin-right: .5rem; margin-top: .5rem; color: white; font-size: 14px; font-weight: normal } .butt1 {color:#57abfa;font-size: 13px;font-family: sans-serif;font-weight:370;border-style: unset;/* margin-top: -35px */margin-left: .5rem;padding: 0px;background-color: transparent;} .butt1:hover {color: #57abfa;} .butt1:focus { box-shadow: none; border-style: none; color: #57abfa} .butt2 {color: white;font-size: 14px;text-align: left;font-weight: 370;padding: 0px;margin-left: .5rem;margin-top: 1rem;border-style: none;} .butt2:focus {box-shadow: none; color: white !important} .butt2:hover {color: white;} .butt3 {color: #000;font-size: 14px;background-color: #57abfa; font-weight: normal;border-radius: 1rem;padding-top: 3px;padding-bottom: 2px;border-style: unset;} .butt3:hover {color: #000; background-color: #57abfa;} .butt3:focus {box-shadow: none;color: white;background-color: #57abfa} .butt4 {color: white;padding: 0px;margin-left: .5rem;margin-top: 1rem;border-style: unset;} .butt4:hover {color: white;} .butt4:focus {box-shadow: none;color: white !important} .par4 {color: #fff;margin-top: 2rem;font-family: sans-serif;font-weight: 370;margin-left: .5rem;} .par5 {position: relative; color: grey;font-size: 15px;font-family: sans-serif;font-weight: 350;margin-top: 2rem;margin-left: .5rem;text-transform: capitalize;margin-bottom: 0;} .par6 {color: grey;font-size:14px;text-align: left;margin-top: 10rem;font-weight: 370;} .par7 { margin-top: 8rem; color:white; font-size:13px; font-weight: 400;} .par8 { color: #0087ff; font-size: 13px; font-weight: 370; margin-top: -15px;} .par9 { color: white; font-size: 16px; font-weight: 370; margin-top: 5rem; font-family: sans-serif;} .par10 { font-size: 15px; font-weight: 370; color: grey; margin-top: -1rem;} .par11 { color: white; font-size: 16px; font-weight: 370; margin-top: 2rem; font-family: sans-serif;} .par12 { color: grey; font-size: 15px; font-weight: 370; margin-top: -1rem;} .butt5 { color: #0087ff; font-size: 14px; padding: 0px; font-weight: 370; margin-top: 2rem;} .butt6 { color: #0087ff; padding: 0px;} .butt7 { color:#0087ff; font-size: 15px; padding: 0; font-family: sans-serif; font-weight: 370;} .butt7:hover {color: #0087ff; text-decoration: underline;} .butt7:focus { box-shadow: none;} .butt8 { color: #0087ff; font-size: 15px; padding: 0px; font-family: sans-serif; font-weight: 370;} .butt8:hover { color: #0087ff; text-decoration: underline;} .butt8:focus { box-shadow: none;} .col4 { bottom: 205px; position: absolute;} body { margin: 0; font-size: var(--bs-body-font-size); font-weight: var(--bs-body-font-weight); line-height: var(--bs-body-line-height); color: var(--bs-body-color); text-align: var(--bs-body-text-align); -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; background-repeat: no-repeat;height: 100svh; overflow: hidden !important; /* Prevent overflow issues */ /* Scale the content to 87% using zoom */ font-smooth: always; -ms-touch-action: none; background-color: rgba(0, 0, 0, 0.8); } /*.elegant-#202124-bg { background-attachment: fixed; background-color: #929192; } .elegant-cover { position: fixed; inset: 0; z-index: 0; background-color: rgba(0, 0, 0, 0.7); backdrop-filter: blur(25px) saturate(120%); -webkit-backdrop-filter: blur(25px) saturate(120%); pointer-events: none; } .custom-bg { background-image: url("../assets/images/cool%20colorful.jpeg"); background-size: cover; background-attachment: fixed; background-position: center; } .custom-cover { position: fixed; inset: 0; z-index: 0; background-color: rgba(0, 0, 0, 0.7); backdrop-filter: blur(25px) saturate(120%); -webkit-backdrop-filter: blur(25px) saturate(120%); pointer-events: none; }*/ .par13 { font-size: 15px; margin-top: 3rem; color:#0087ff;} .par14 { position: relative; color: #0087ff; font-size: 16px; font-family: sans-serif; font-weight: 370; margin-top: 2.3rem;margin-left:.5rem;} .par15 { color: grey; margin-left: .5rem; font-size: 16px; font-family: sans-serif; margin-top: 1rem; font-weight: 370;} .par16 { color: white; margin-left: .5rem; font-size: 15px; font-family: sans-serif; margin-top: 1rem; font-weight: 370;} .par17 { position: relative; color: grey; margin-left: .5rem; font-size: 15px; font-family: sans-serif; margin-top: -.7rem; font-weight: 370; margin-right: .5rem;} .par3 { margin-left: .5rem; color: grey; font-size: 14px;} .butt9 { color: white; padding: 0px; font-size: 14px; font-family: sans-serif; margin-left: .5rem; font-weight: 370; margin-top: 1rem; border-style: unset;} .butt9:hover { color: white;} .butt9:focus { box-shadow: none; color: white !important} .par18 { color: grey; margin-left: .5rem; font-size: 15px; font-family: sans-serif; text-align: center;} .Footer {color: grey;font-size: 15px;font-family: sans-serif;margin-top: 3rem;font-weight: 350;margin-left: .5rem;} .container2 {position: relative; height: 100vh;} .par19 { color:white;font-size:30px;font-family:sans-serif;font-weight: 390;text-align: center;margin-top: 15rem;} .col6 {color: rgb(85, 79, 79);text-align: center;font-size: 16px;font-family: sans-serif;} .col7 {color: white;} .form-control{display:block; width:70%; padding:.375rem .75rem; font-size:16px; font-weight:400; line-height:1;color:#000; background-color:transparent; background-clip:padding-box; -moz-appearance:none;-webkit-appearance:none; appearance:none; margin-left: auto; margin-right: auto; text-align: center; transition: unset; border-width: 0px; border-style: none; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px} .form-codeofconduct{display:block; width:100%; padding:.375rem 0rem; font-size:14px; font-weight:400; line-height:1;color:#000; background-color:transparent; background-clip:padding-box; -moz-appearance:none;-webkit-appearance:none; appearance:none; margin-left: auto; margin-right: auto; text-align: left; transition: unset; border-width: 0px; border-style: none; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px} .form-control:focus { box-shadow: none; color: #202124; background-color: transparent;} .par21 {color:white; font-size: 15px; margin-top: 1.5rem;} .butt10 {color: #5fb3ff; font-size: 15px; margin-top: 1rem; padding: 0px;} .butt10:hover {color: #0087ff; text-decoration: underline;} .butt10:focus { box-shadow: none;} .butt11 {color: #5fb3ff; font-size: 15px; padding: 0px 0px 2px;} .butt11:focus {box-shadow: none;} .butt11:hover {color: #0087ff; text-decoration: underline;} .butt12 {color: #ffffff; font-size: 15px; padding: 0px 0px 2px;} .butt12:focus {box-shadow: none;} .butt12:hover {color: #ffffff; text-decoration: underline;} .butt13 {color: #5fb3ff; font-size: 15px;padding: 0px;text-decoration: none;} .butt13:focus {box-shadow: none;} .butt13:hover {color: #0087ff; text-decoration: underline;} .par22 {color: #5fb3ff;padding: 0px;margin-top: 1.5rem;} .butt14 {color: #5fb3ff; font-size: 15px; padding: 0px;} .butt14:hover {color: #0087ff; text-decoration: underline;} .butt14:focus { box-shadow: none;} .list-unstyled{padding-left:0; list-style:none; margin-top: 2.5rem} .col8 {width: 100%; margin-top: 0;} .butt15{color: #0087ff; font-size: 15px; font-weight: 400; padding: 0;} .butt15:hover {color: #0087ff; text-decoration: underline;} .butt15:focus { box-shadow: none;} .col9 {padding-left: 30px} .par23 {width:50%; font-size:15px; color: #0087ff;font-weight: 400} .par24 {margin-top: 8.7rem; position: absolute;} .container3 {background-color: rgba(0, 0, 0, 0.8); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); height: 100vh;} .par25 {color: grey; font-size: 14px; margin-top: -5px;} .par26 {color:#0087ff; font-size:30px; font-family:sans-serif; font-weight: 390; text-align: center; margin-top: 20rem;margin-left: 40px;} .par27 {margin-top: 5rem; color: white; font-weight: 400;} .l1 {color: rgb(255, 255, 255); text-decoration: none;} .image1 {position: absolute; margin-left: -5rem; margin-top: -1.5rem;} .par28 {position: relative; margin-top: 3.5rem; margin-left: .5rem; color:#0087ff; font-weight: 400; font-size: 15px;} .style2 {background-position: center 0%; background-image: url("../assets/images/241571.jpg"); background-repeat: no-repeat;} .col11 {margin-top: 5rem; margin-left: auto; margin-right: auto;} .butt16 {font-size: 15px; color:#0087ff; padding: 0px;} .butt16:hover {color: #0087ff; text-decoration: underline;} .butt16:focus { box-shadow: none;} .par29 {text-align: center; margin-top: 1rem;} .par30 {color: white; font-size: 14px; text-align: center; background-color: lightblue; width:370px; margin-right: auto;margin-left: auto; padding: 5px; margin-top: 1.7rem; border-top-left-radius: 15px; border-top-right-radius: 15px;border-bottom-left-radius: 15px; border-bottom-right-radius: 15px;} /*----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ /*BOOTSTRAP FORM ERROR MESSAGES MODIFICATION*/ /* the error message produced by bootstrap (if not in a form control group) */ .invalid-feedback{ color:grey; text-align: center; font-size: 15px;} /* Removes the red border and the red focus glow */ .form-control.is-invalid, .was-validated .form-control:invalid {border-color: #dee2e6 !important; box-shadow: none !important;} /* Removes the green border and the green focus glow */ .form-control.is-valid, .was-validated .form-control:invalid {border-color: #dee2e6 !important; box-shadow: none !important;} /* Removes the green tick icon */ .form-control.is-valid, .form-control.is-invalid, .form-control:focus:invalid { background-image: none !important; padding-right: .75rem !important; } /*----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ input { font-size: 1rem; min-width: 0px; background-color: transparent; margin: .25rem auto; padding: 0px; border-style: none; color: white; } input:focus { outline: none; } input::-ms-reveal, input::-ms-clear { display: none; } .check1 { float: left; accent-color: #0087ff; margin-top: 1rem; margin-left: 3px;} .modal-body{position:relative;flex:1 1 auto;background: rgb(255, 255, 255);color: rgb(0, 0, 0);border-bottom-left-radius:0rem; font-size: 15px; font-weight: normal; border-bottom-right-radius:0rem; border-top:0rem;} .modal-content{position:relative;display:flex;flex-direction:column;pointer-events:auto;background-color:transparent;background-clip:padding-box;border:none;outline:0;width:96%;margin-left: auto; margin-right: auto;} .modal.fade .modal-dialog{transition:transform .3s ease-out;transform:translate(0,0rem);} .par31 {border: none;text-decoration: underline;font-family: sans-serif;font-size: 15px;} .parL { color:white;font-size:30px;font-family:sans-serif;font-weight: 390;text-align: center;margin-top: 15rem;} .log { color:white;font-size:14px;font-weight: 370;border-style: unset;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%); margin-top: 6.5vh} .log:hover {color: white;} .log:focus {color: white !important;} input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:active { -webkit-transition: background-color 5000s ease-in-out 0s; transition: background-color 5000s ease-in-out 0s; -webkit-text-fill-color: #ffffff; } .ul1 {list-style: none;padding-right: .5rem;margin-top: 1rem;padding-left: .5rem;} .par32 {margin-right: .5rem;padding-bottom: 2rem;} .search1 {background-color: grey; width:100%; border-top-left-radius: 20px; border-top-right-radius: 20px; border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; padding: .5rem .5rem .5rem 1rem;} #filter::-moz-placeholder {color: white} #filter::placeholder {color: white} .par33 {margin-left: .5rem;margin-right: .5rem;} .butt17 {font-size: 13px; padding: 0;color:#fff;font-weight: normal;border-style: unset;} .butt17:hover { color: #fff;} .butt17:focus { box-shadow: none; color: #fff !important} .par34 {margin-left: .5rem;color: white;margin-top: -1.5rem;padding-bottom: .5rem;} .butt18 {color: #57abfa;font-size: 11px;padding-bottom: 0px;padding-top: 2.4px;padding-left: 0px;} .butt19 {color: white;font-size: 11px;padding-bottom: 0px;padding-top: 2.4px;padding-right: 0px;} .butt20 {font-size: 13px;color: #57abfa;font-weight: normal;padding: 0px;border-style: unset;background-color: transparent;} .butt20:hover {color: #57abfa; text-decoration: underline;} .butt20:focus { box-shadow: none;color: #57abfa} .employee_insert_notification {margin-top: 25rem;font-size:13px;border: none;padding: 0.375rem;} .dmx-notify { border-radius: 20px; background-color: lightblue; font-size: 14px; width: 200px; } .invalid-feedback:input3 {display: block; text-align: left;} .modal-dialog1{position:relative;width:auto;pointer-events:none;margin: .6rem} .modal1{position:fixed;top:0;left:0;z-index:1055;display:none;width:100%;height:100%;overflow-x:hidden;overflow-y:auto;outline:0} .modal-body1{position:relative;flex:1 1 auto;background: white;color: rgb(0, 0, 0);border-radius: .6rem;padding: 0 20px} .modal-body3 {position:relative;flex:1 1 auto;background: white;color: rgb(0, 0, 0);border-radius: .6rem;padding: 0 20px} .modal1.fade .modal-dialog1{transition:transform .3s ease-out;transition:transform .1s ease-out;transform:translate(0rem,0rem)} .modal2.fade .modal-dialog1{transition:transform .3s ease-out;transition:transform .1s ease-out;transform:translate(0rem,0rem)} .modal-content1{position: relative;text-align: center;margin-top: -3rem;width: 96%;margin-left: auto;margin-right: auto;} .par36 {font-size: 13px;text-align: left;} .modal-header1 {padding-top: 25rem;} .modal-content2 {text-align: center;} .modal-body2 {position:relative;flex:1 1 auto;background: white;color: rgb(0, 0, 0);border-radius: .6rem;padding: 0 20px} .modal-content3 {position: relative;text-align: center;margin-top: -3rem;width: 96%;margin-left: auto;margin-right: auto;} .modal-body4 {position:relative;flex:1 1 auto;background: white;color: rgb(0, 0, 0);border-radius: .6rem;padding: 0 20px 5px} .modal-content4 {position:relative;display:flex;flex-direction:column;width:96%;pointer-events:auto;background-color:transparent;background-clip:padding-box;border:none;outline:0;width:96%;margin-left: auto; margin-right: auto; margin-top: -3rem;} .modal-content5{position:relative;display:flex;flex-direction:column;width:100%;pointer-events:auto;background-color:transparent;background-clip:padding-box;border:none;outline:0;width:96%;margin-left: auto; margin-right: auto;margin-top: -8px;} .modal-body5 {position:relative;flex:1 1 auto;background: white;color: rgb(0, 0, 0);padding: 0 20px 5px;width: 100%;} .modal-header5 {background-color: white;display:flex;flex-shrink:0;align-items:left;border-top-left-radius:calc(.3rem - 1px);border-top-right-radius:calc(.3rem - 1px);/* padding-top: 20px */padding-left: 20px;padding-right: 20px/* border-top: 2px solid #57fa70 */ } .delete_header {border-top: none;} .modal-footer5{display:flex;flex-wrap:wrap;flex-shrink:0;align-items:center;justify-content:flex-end;padding:.75rem;border-top:none;border-bottom-right-radius:calc(.3rem - 1px);border-bottom-left-radius:calc(.3rem - 1px);background-color: rgb(255, 255, 255);} .modal-content6{position:relative;display:flex;flex-direction:column;width:100%;pointer-events:auto;background-color:transparent;background-clip:padding-box;border:none;outline:0;width:96%;margin-left: auto; margin-right: auto; margin-top: -8px;} .modal-body6 {position:relative;flex:1 1 auto;background: white;color: rgb(0, 0, 0);padding: 0 20px 5px;width: 100%;} .modal-header6 {background-color: rgb(255, 255, 255);display:flex;flex-shrink:0;align-items:left;border-top-left-radius:calc(.3rem - 1px);border-top-right-radius:calc(.3rem - 1px);padding-top: 20px;padding-left: 20px;padding-right: 20px;border-top: 2px solid #57fa70 } .modal-content7{position:relative;display:flex;flex-direction:column;width:100%;pointer-events:auto;background-color:transparent;background-clip:padding-box;border:none;outline:0;width:96%;margin-left: auto;margin-right: auto;} .modal-body7 {position:relative;flex:1 1 auto;background: white;color: rgb(0, 0, 0);padding: 0 20px 20px; border-bottom-left-radius:calc(.3rem - 1px);border-bottom-right-radius:calc(.3rem - 1px)} .modal-header7 {background-color: rgb(255, 255, 255);display:flex;flex-shrink:0;align-items:left;border-top-left-radius:calc(.3rem - 1px);border-top-right-radius:calc(.3rem - 1px);padding-top: 20px;padding-left: 20px;padding-right: 20px } .modal-header3 {background-color: rgb(255, 255, 255);display:flex;flex-shrink:0;align-items:left;border-top-left-radius:calc(.3rem - 1px);border-top-right-radius:calc(.3rem - 1px);padding-top: 20px;padding-left: 20px;padding-right: 20px;border-top: 2px solid #57fa70 } .modal-footer6{display:flex;flex-wrap:wrap;flex-shrink:0;align-items:center;justify-content:flex-end;padding:.75rem;border-top:none;border-bottom-right-radius:calc(.3rem - 1px);border-bottom-left-radius:calc(.3rem - 1px);background-color: rgb(255, 255, 255);} * { box-sizing: border-box; } .box { width: 100%;height: auto; max-height: 77vh; background-color: transparent; display: flex; flex-direction: column; margin-top: 0rem; } #MBC::-webkit-scrollbar { width: 2px !important; /* Adjust the width as needed */ background-color: transparent; } .content::-webkit-scrollbar { display: none; } .content { overflow: auto; -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; /* Firefox */ } .content2 { -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; /* Firefox */ } .content2::-webkit-scrollbar { display: none; } .box1 { width: 100%; height: auto; max-height: 75vh; background-color: transparent; border-radius: 16px; padding: 0px; display: flex; flex-direction: column; margin-top: 0rem; } .content1 { overflow-y: auto; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #202124 var(--top-mask-size, 0), #202124 calc(100% - var(--bottom-mask-size, 0)), transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #202124 var(--top-mask-size, 0), #202124 calc(100% - var(--bottom-mask-size, 0)), transparent 100%); --top-mask-size: 0px; --bottom-mask-size: 0px; } .box2 { width: 100%; height: auto; max-height: 75vh; background-color: transparent; border-radius: 16px; padding: 0px; display: flex; flex-direction: column; margin-top: 5px; } .content2 { overflow-y: auto; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #202124 var(--top-mask-size, 0), #202124 calc(100% - var(--bottom-mask-size, 0)), transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #202124 var(--top-mask-size, 0), #202124 calc(100% - var(--bottom-mask-size, 0)), transparent 100%); --top-mask-size: 0px; --bottom-mask-size: 0px; } .box3 { width: 100%; height: auto; max-height: 35vh; background-color: transparent; border-radius: 16px; padding: 0px; display: flex; flex-direction: column; margin-top: 0rem; } /* Hide scrollbar for Chrome, Safari and Opera */ .content3::-webkit-scrollbar { display: none; } /* Hide scrollbar for IE, Edge and Firefox */ .content3 { -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; /* Firefox */ } .content3 { overflow-y: auto; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #202124 var(--top-mask-size, 0), #202124 calc(100% - var(--bottom-mask-size, 0)), transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #202124 var(--top-mask-size, 0), #202124 calc(100% - var(--bottom-mask-size, 0)), transparent 100%); --top-mask-size: 0px; --bottom-mask-size: 0px; } @media (min-width: 576px) { .style5 {padding-left: 0px;} .search2 {width: 100%;}} .p37 {color: #fff;font-weight: normal;margin-top: 0rem;} .search2 { font-size: 14px;width: 100%;border-radius:1rem; font-weight: 370; background-color: white; margin: -1rem auto 1rem; padding: .5rem .5rem .5rem 1rem; color: #202124;} .btn:focus {border-style: unset; box-shadow: none;} .par37 {color: grey;font-size: 15px;font-weight: 370;margin-left: .5rem;margin-top: 1rem;} .ul2 {color: white;list-style: none;margin-top: 2rem;margin-left: .5rem;margin-right: .5rem;padding-left: 0;font-size: 14px;font-weight: normal;} .col13 {flex:0 0 auto;width:100%;display: none } .butt21 {font-size: 14px; padding: 0;color:white;font-weight: 370;margin-top: 1rem;border-style: unset;} .butt21:hover { color: white;} .butt21:focus { box-shadow: none; color: white !important} .butt22 {font-size: 14px; padding: 0;color:white;font-weight: normal;margin-top: 1rem;border-style: unset;} .butt22:hover { color: white;} .butt22:focus { box-shadow: none; color: white !important} .col14 {flex:0 0 auto;width:100%;display: none} .butt23 {margin-left: .8rem; font-size: 14px; color: #202124; margin-top: 1rem; background-color: white; padding-top: 2px; padding-bottom: 2px; border-radius: 1rem; font-weight: normal; border-style: unset;} .butt23:hover { color: #202124;} .butt23:focus { box-shadow: none; } .butt24:hover { color: #57fa70;} .butt24:focus { box-shadow: none;} .butt24 {color: #57abfa;padding: 0;margin-top: -2rem;font-size: 13px;font-weight: normal;border-style: unset;} .text-dark{--bs-text-opacity:1; font-weight: 370; font-size: 17px; color: rgb(0, 0, 0)!important} .modal-footer{display:flex;flex-wrap:wrap;flex-shrink:0;align-items:center;justify-content:flex-end;padding:.75rem;border-top:none;border-bottom-right-radius:calc(.3rem - 1px);border-bottom-left-radius:calc(.3rem - 1px);background-color: rgb(255, 255, 255); margin-top: -1rem;} .btn-danger {color:rgb(255, 255, 255);font-size: 11px;font-weight: 370;border: none;float: right} .btn-primary{color:rgb(255, 255, 255);font-size: 11px;font-weight: normal;border: none;float: right } .btn-secondary{color:rgb(255, 255, 255);display: none; background-color:#6c757d;border:none;font-size: 11px;font-weight: normal} .par35 {color: white;margin-left: .5rem;margin-top: -1rem;font-size: 15px;font-weight: normal;padding-bottom: 1rem;} .par39 {margin-left: .5rem;color: white;margin-top: 1rem;padding-bottom: 1rem;margin-right: .5rem;font-size: 15px;font-weight: 370;} .par38 {margin-left: .5rem;color: white;margin-top: 1rem;padding-bottom: 1rem;} .butt25 {font-size: 13px; padding: 0;color:white;font-weight: normal;margin-top: 0rem;margin-left: .5rem;border-style: unset;} .butt25:hover { color: white;} .butt25:focus { box-shadow: none; color: white !important} .butt26 {font-size: 14px; padding: 0;color:#fff;font-weight: normal;margin-top: 1rem;margin-left: .5rem;border-style: unset;} .butt26:hover { color: white;} .butt26:focus { box-shadow: none; color: white !important} .col16 {display: none;} .butt27 {font-size: 14px;color:white;font-weight: 370;margin-top: 1rem; background-color: transparent;border-radius: 1rem;padding-top: 2px;padding-bottom: 2px;border-style: unset;} .butt27:hover { color: white;} .butt27:focus { box-shadow: none;color: #fff !important} .search3 {margin-bottom: 2rem;width: 100%;background-color: #fff;border-radius: 1rem;margin-left: auto;margin-right: auto;padding-top:.5rem;color: #000;padding-bottom:.5rem;padding-left: 1rem;font-size: 14px;font-weight: 370;} .par40 {font-size: 35px;margin-left: .5rem;color: white;margin-top: 1rem;font-weight: 370;} .par41 {font-size: 14px;font-weight: 370;text-align: left;padding-bottom: 0rem;} .butt28 {padding: 0;color: rgb(0, 0, 0);font-size: 14px;font-weight: 420;border-style: unset;} .butt28:hover { color: rgb(39, 38, 38);} .butt28:focus { box-shadow: none;} .par39 {font-size: 14px;font-weight: 370;text-align: left;color: rgb(255, 255, 255);} .butt29 { font-size: 13px;font-weight:normal; border-style: unset; padding: 0px;} .butt29:hover {color: #57abfa;} .butt29:focus {-webkit-box-shadow: none; color: #57abfa; box-shadow: none; border: none;} .butt29a { outline: none; border-style: unset; padding: 0px; color: white; background-color: transparent;} .butt29a:hover {color: #57abfa;} .butt29b {margin-left: .5rem; font-weight: 450; color:white; font-size: 13px; font-family: sans-serif;font-weight:normal; border-style: unset; padding: 0px;} .butt29b:hover {color: white;} .butt29b:focus {-webkit-box-shadow: none; color: white !important; box-shadow: none; border: none;} .butt29c {color:#202124; font-size: 13px;font-weight:normal; border-style: unset; padding: 0px;} .butt29c:hover {color: #202124;} .butt29c:focus {-webkit-box-shadow: none; color: #202124 !important; box-shadow: none; border: none;} .butt30 {color: #000; font-size: 14px; border-style: unset; font-weight: 370; background-color: #57abfa; border-radius: 1rem; padding: 2px 10px;} .butt30:focus { box-shadow: none; background-color: #57abfa;} .butt30:hover {background-color: #57abfa;;} .buttCurrentWeek {font-size: 13px;border-style: none;background: transparent;padding: 0rem;font-weight: 370;color: #57abfa;} .buttCurrentWeek:focus {box-shadow: none;} .form-control1 {display:block; padding:0rem; font-size:14px; line-height:0;color:#fff; background-color:transparent; -moz-appearance:none;-webkit-appearance:none; appearance:none; margin-left: 0; margin-right: auto; text-align: left; transition: unset; border-width: 0px; border-style: none; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; font-weight: 400; width: 100% } .form-control2 {display:block; padding:0rem; font-size:13px; font-weight:normal;line-height:0;color:#202124; background-color:transparent; -moz-appearance:none;-webkit-appearance:none; appearance:none; margin-left: 0; margin-right: auto; text-align: left; transition: unset; border-width: 0px; border-style: none; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; width: 100% } .form-control3 {/* display:block */ padding:0rem; font-size:13px;line-height:0;color:#202124; background-color:transparent; -moz-appearance:none;-webkit-appearance:none; appearance:none; margin-left: 0; margin-right: auto; text-align: left; transition: unset; border-width: 0px; border-style: none; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; font-weight: 370; width: 100% } .btn-primary1{color:#000; font-size: 15px; font-weight: 600; padding: 0px; margin-right: 5px;} .btn-primary1:hover { color: rgb(39, 38, 38); text-decoration: none;} .btn-primary1:focus { box-shadow: none;} .btn-primary2{color:rgb(0, 0, 0); background-color:transparent; font-size: 15px; padding: 0px; font-weight: 600; margin-right: 5px} .btn-primary2:hover { color: rgb(39, 38, 38); text-decoration: none;} .btn-primary2:focus { box-shadow: none;} .btn-primary3{color:rgb(0, 0, 0); background-color:transparent; font-size: 13px; padding: 0px; font-weight: 500; margin-right: 5px; border-style: unset} .btn-primary3:hover { color: rgb(39, 38, 38); text-decoration: none; } .btn-primary3:focus { box-shadow: none;} .grid00 { display:grid; border-top: 1px solid #000; grid-template-columns: 2fr 2fr 3fr;} .grid00>span {padding: 15px; border-left: 1px solid rgb(0, 0, 0);border-bottom: 1px solid rgb(0, 0, 0); font-size: 13px;} .grid00 > span:last-child { border-right: 1px solid #202124;} .grid01 { display:grid;grid-template-columns: 2fr 2fr 3fr;/* border: .5px solid #202124 */} .grid01>span { padding: 0px 5px;/* border: 1px solid #202124 */} .grid { display:grid; border-right: 1px solid #202124;border-top: .7px solid #000;grid-template-columns: 2fr 2fr 3fr;} .grid>span { padding: 0px 5px; border-left: 1px solid rgb(0, 0, 0); /* border-bottom: 1px solid rgb(0, 0, 0) */} .grid1 { display:grid; border-top: 1px solid #000; grid-template-columns: 2fr 2fr 3fr; border-right: 1px solid #202124;} .grid1>span {padding: 5px; border-left: 1px solid rgb(0, 0, 0); border-bottom: 2px solid rgb(0, 0, 0); font-size: 15px;} .grid2 { display:grid; border-right: 1px solid #202124; border-top: .7px solid #000; grid-template-columns: 3fr 2fr; animation-name: slide-right; animation-duration: 4s;} .grid2>span { padding: 0px 5px; border-left: 1px solid rgb(0, 0, 0); border-bottom: 1px solid rgb(0, 0, 0);} .grid3 { display:grid; border-right: 1px solid #202124; border-top: 1px solid #000; grid-template-columns: 3fr 2fr;} .grid3>span {padding: 5px; border-left: 1px solid rgb(0, 0, 0); border-bottom: 2px solid rgb(0, 0, 0); font-size: 15px;} .grid4 { display:grid; grid-auto-flow: row dense; border-right: 1px solid #202124; border-top: 1px solid #000; grid-template-columns: 2fr 2fr;} .grid4>span {padding: 5px; grid-column-start: 3; border-left: 1px solid rgb(0, 0, 0); border-bottom: 2px solid rgb(0, 0, 0); font-size: 15px;} .grid41 {display:grid; border-right: 1px solid #202124; border-top: 1px solid #000; grid-template-columns: 2fr, 2fr, 3fr;} .span2 { border-left: 1px solid rgb(0, 0, 0); border-bottom: 1px solid rgb(0, 0, 0); font-size: 13px; padding: 5px 10px} .span1 {padding: 5px; grid-column-start: 1; border-left: 1px solid rgb(0, 0, 0); border-bottom: 1px solid rgb(0, 0, 0); font-size: 13px;} .grid5 { display:grid; border-right: 1px solid grey; border-top: 1px solid grey; grid-template-columns: 1fr 1fr 2fr;} .grid5>span { border-left: 1px solid grey; border-bottom: 1px solid grey; font-size: 15px; padding: 3px 5px;} .grid6 { padding-bottom:0; display:grid; grid-template-columns: .5fr .5fr 3fr;} .grid6>span {font-size: 15px; margin-top:-1px; padding-left:5px;} .grid6:hover {background-color:#57abfa} .grid7 {border-left: 1px solid grey; padding-bottom:0; display:grid; grid-template-columns: .5fr .5fr 3fr;} .grid7>span {font-size: 15px; margin-top:-1px; border-right:1px solid grey; padding-left:5px; border-bottom: 1px solid grey;} .grid7:hover {background-color:#57abfa ;} .grid8 { display:grid; grid-auto-flow: row dense; border-right: 1px solid #202124; border-top: 1px solid #000; grid-template-columns: 2fr 2fr;} .grid8>span {padding: 5px; grid-column-start: 2; border-left: 1px solid rgb(0, 0, 0); border-bottom: 1px solid rgb(0, 0, 0); font-size: 15px;} .grid9 { display: grid;margin-left: 1rem; margin-right: 1rem; grid-auto-flow: row dense; border-right: 1px solid gray; border-top: 1px solid gray; grid-template-columns: 2fr 2fr; border-left: 1px solid gray;} .grid9>span {padding: 5px; grid-column-start: 2; border-left: 1px solid gray; font-size: 15px;} .span9 {padding: 5px; grid-column-start: 1; font-size: 15px;} .span9:hover {background-color: #57abfa; border-radius: unset;} .span9:hover {background-color: var(--checkbox-color); border-radius: unset;} .grid9_style_toggle {backgroundm-color: #57abfa;} .grid10 { display: grid; margin-left: 1rem; margin-right: 1rem; grid-auto-flow: row dense; border-right: 1px solid gray; border-top: 1px solid gray; grid-template-columns: 2fr 2fr; border-left: 1px solid gray;} .grid10>span {padding: 5px; grid-column-start: 2; border-left: 1px solid gray; color: white; font-size: 13px; font-weight: 370; text-align: center;} .span10 {padding: 5px; grid-column-start: 1; font-size: 15px;} .grid10_style_toggle {backgroundm-color: #57abfa;} .modalTittle {font-size: 12px; text-align: center; color: #57abfa; font-weight: 370; margin-top: 0;} .alert1 {background-color: transparent;padding: 0;margin-bottom: 0;border: none;font-size: 14px;color: red;} .reports_alert {background-color: #fff;padding: 0;margin-bottom: 0;border: none;font-size: 14px;color: red;margin-top: 10px;} .colGrid2 {animation-name: slide-right;animation-duration: 4s;} .btn-close {margin-top:-14px; font-size:10px} .btn-close:focus { box-shadow: none;} .span1 .tooltiptext { visibility: hidden; width: auto; background-color: grey; color: rgb(255, 255, 255); text-align: center; border-radius: 6px; padding: 7px 8px; position: absolute; z-index: 1; bottom: 125%; left: 50%; margin-left: -60px; opacity: 0; transition: opacity 0.3s; font-weight: 370; } .span1 .tooltiptext::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px; border: 5px solid transparent; border-top-color: grey; } .span1:hover .tooltiptext { visibility: visible; opacity: 1; } .options { display: flex; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; justify-content: space-between; } select { padding: 7px; border: 1px solid #020929; border-radius: 3px; } .options label, .options select { font-family: "Poppins", sans-serif; } .active {background-color: #ffffff;} .style1 {padding-left: 0px;padding-right: 0px;} .codeofconduct_textarea {font-size: 14px;border: none;padding: 10px 0px 0px;margin-bottom: -1rem} .codeofconduct_textarea:focus {outline: none;} .style6 {padding-top: 0px;padding-bottom: 0px;} .reports_editor:focus {outline: none;} .par42 {color: white;font-size: 14px;font-weight: 370;margin-top: 1rem;} .butt31 {color: #000; font-size: 14px; background-color: #fff; padding: 0rem;text-decoration: underline; font-weight: 370;} .butt31:hover {color:#000} .butt31:focus { box-shadow: none;} .butt32 {color: rgb(255, 255, 255); font-size: 12px; font-weight: 600; /* padding-bottom: 0rem */} .butt32:hover {color:rgb(255, 255, 255)} .butt32:focus { box-shadow: none;} .butt33 {color: #000; font-size: 14px; background-color: #fff;text-decoration: underline; font-weight: 370; padding: 0rem;} .butt33:hover {color:#000} .butt33:focus { box-shadow: none;} .butt34 {color:grey; font-size: 13px; margin-top: -20px; padding: 0px; font-family: sans-serif; font-weight:370; border-style: unset;} .butt34:hover {text-decoration: none; color: #57abfa;} .butt34:focus { box-shadow: none; border-style: none} .butt35:hover {text-decoration: none; color: #57abfa;} .butt35:focus { box-shadow: none; border: none} .butt36:hover {color: white;} .butt36:focus { box-shadow: none;} //ACCORDION .accNordion, .tuesday{background-color: #eee; color: #444; cursor: pointer; padding: 0px; width: 100%; border: none; text-align: left; outline: none;} .panuel {background-color: transparent; color: white; display: none;} .span, .spanM {animation: fadeIn .8s; -webkit-animation: fadeIn .8s; -moz-animation: fadeIn .8s; border: fadeIn .8s; -ms-animation: fadeIn .8s;} @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; }} .butt35 { background-color: transparent;border: none;padding: 0;} .butt37 {color: #000; font-size: 13px; background-color: #fff; font-weight: 370; padding: 0rem;} .butt37:hover {color:#000} .butt37:focus { box-shadow: none;} .link {position: relative;margin-top: 10px; width: 100%;} .link button {text-decoration: none; background-color: #fff; text-transform: capitalize; font-size: 13px; border-style: none;} .link button:focus { box-shadow: none;} .link:first-child {margin-left: -50px} .link:last-child {margin-right: -50px;} .style7 {margin-top: 0px;margin-bottom: 5px;position: relative;} .grid_htag {font-size: 13px;font-weight: normal;margin-top: 0rem; margin-bottom: 5px;} .butt_select {padding: 0rem; border: none; margin-right: 16px; background-color: white;} .butt_select_special {color:#3e88f7;} .spanTime {font-weight: 500;font-size: 13px;} .spanDescription {margin-left: 20px;font-weight: 370;font-size: 13px;} .spanButt {border: none;padding: 0;background-color: transparent; width: 100%; text-align: left} .spanButt:focus {background-color: #3e88f7; color: white; border-radius: 2px;} .spn {float: right; display: none; font-size: 13px;} .special {font-weight: bold;} .butt36 {color: #202124; font-size:13px; padding: 0; border-style: unset; background-color: transparent;} .butt36:hover {text-decoration: none; font-weight: 510; color: #202124;} .butt36:focus { box-shadow: none; border: none;} .buttdefault1 {padding: 0; font-size: 13px; color: white; border-style: none; background-color: transparent; font-weight: 370;} .buttdefault1:focus {box-shadow: none; border: none; outline: none;} .buttdefault1:hover {color: white;} .pardefault {font-size: 13px; color: white;margin-right: .5rem;margin-left: .5rem;} .buttdefault {padding: 0; margin-left: .5rem; margin-right: .5rem; font-size: 13px; color: white; border-style: unset; background-color: transparent; font-weight: normal;} .buttdefault:focus {box-shadow: none; border: none; outline: none; color: white} .buttdefault:hover {color: white;} .parcontent {color: #202124; font-size: 13px; font-weight: normal; margin-left: .5rem; margin-right: .5rem;} .switch { position: relative; display: inline-block; width: 40px; height: 15px; } .switch input { opacity: 0; width: 0; height: 0; } .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: .4s; } .slider:before { position: absolute; content: ""; height: 7.7px; width: 7.7px; left: 4px; bottom: 4px; background-color: white; transition: .4s; } input:checked + .slider { background-color: #2196F3; } input:checked + .slider:before { transform: translateX(24px); } /* Rounded sliders */ .slider.round { border-radius: 34px; } .slider.round:before { border-radius: 50%; } .accordion {background-color: transparent; color: #444; cursor: pointer; width: 100%; border: none; text-align: left; outline: none; font-size: 13px; -webkit-transition: unset; font-weight: 500; padding: 18px 0px 5px; } .panel { padding: 0 18px; /* background-color: rgb(255, 255, 255) *//* max-height: 0 */ } .form-check-input:focus {box-shadow: none;} .monInput {color: #202124; font-weight: 370; width: 90%; float: right; margin-right: 5px;} .monInput::first-letter {text-transform: uppercase;} .textareaAppointment {font-size: 12px; width: -webkit-fill-available; color: #202124; text-align: left;padding: 0; overflow: hidden; resize: none; line-height: 1.5;font-weight: normal;margin-bottom: .5rem;} .textareaAppointment:focus {color: #202124;} .wSummary { margin-bottom: 0; font-size: 13px; font-weight: normal;} .wSummary::first-letter { text-transform: uppercase;} .date {float: right;font-weight: normal;font-size: 12px;padding-bottom: 5px;padding-right: 0;}ate {float: right;} .queue { font-weight: normal; font-size: 13px; padding-bottom: ;} .listQueryDesk {color: #fff; font-size: 13px; font-weight: 370; margin-bottom: .5rem;} .chat001 { font-size: 13px;font-weight: normal; /* margin: 1.5 0 1.5rem */ color: #202124; margin-right: 1rem; margin-left: 1rem;} .fadeOut { animation: fadeOut 5s forwards; } @keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } } textarea#helpDesk1MessageArea::-webkit-scrollbar, textarea#HD1messageAreaReceiver::-webkit-scrollbar, textarea#Textarea01::-webkit-scrollbar { display: none; } textarea#helpDesk1MessageArea, textarea#HD1messageAreaReceiver, textarea#Textarea01 { -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; /* Firefox */ } #Hd1cBox { overflow-y: scroll !important; scrollbar-width: none !important; -ms-overflow-style: none !important; } #Hd1cBox::-webkit-scrollbar { width: 0 !important; height: 0 !important; display: none !important; } #btn17:focus { border: none;} .accordion-content { height: 0; overflow: hidden; transition: max-height 0.5s ease-in-out, opacity 0.5s ease-in-out; margin-left: 14px; margin-right: 14px; margin-top: 0; opacity: 0; } /* When open, transition smoothly up to an explicit maximum boundary */ .accordion-content.open { max-height: 250px; /* Adjust this value to safely cover the height of your textarea and button */ opacity: 1; transition: max-height 0.5s ease-in-out, opacity 0.5s ease-in-out; } /* Simplifies child element visibility */ .accordion-content * { transition: opacity 0.3s ease-in-out; } .className { margin-top: 1rem; } .head {margin-top: 2rem; margin-left: .5rem; margin-right: .5rem; padding: 0; font-size: 1px; border-left: solid #57abfa; border-width: 5px; text-transform: uppercase;} .topic001 {margin-left: 0; text-align: left;max-width: -webkit-fill-available; color: #202124; padding: 0 .8rem; min-width: -webkit-fill-available; font-size: 13px; text-transform: capitalize; font-weight: normal;} #topic00 {color: white; text-transform: capitalize; font-size: 12px; font-weight: 370} .helpDesk1MessageArea00 {background-color: transparent; width: -webkit-fill-available; text-align: left; transition: height 0.2s; color: white; font-size: 13px; resize: none; font-weight: 370; padding: 10px .8rem 0; line-height: 1.5;} .colorSpan { width: -moz-fit-content; width: fit-content; font-size: 13px; color: #202124; font-weight: 370; margin-bottom: 0; margin-left: -.8rem; padding-left: .8rem;} .activeMes {padding-left: 10px; padding-right: 10px;} #par7 {font-size: 13px; color: #202124; font-weight: 500; margin-bottom: 0; border-left: 4px solid #57abfa !important; margin-top: 1rem;} .wrapper-div { position: relative; } .content-div { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; } #canvas { position: absolute; top: 0; left: 0; z-index: -1; } input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, textarea:-webkit-autofill, textarea:-webkit-autofill:hover, textarea:-webkit-autofill:focus, select:-webkit-autofill, select:-webkit-autofill:hover, select:-webkit-autofill:focus { background-color: #000000; /* or any other color you prefer */ -webkit-text-fill-color: #202124; -webkit-box-shadow: 0 0 0px 1000px white inset; /* optional, to remove the yellow background */ } .form-table {width: calc(100% - 1rem); max-width: 100% !important; margin-left: .5rem; border-collapse: collapse; } .form-table td { padding-left: 0px; padding-bottom: 0px; padding-top: 0; /* Padding to 5px */ border: 1px solid darkgrey; /* Border 1px dark grey for rows and columns */ text-align: left; } .label { font-weight: normal; color: #202124; font-size: 13px; /* margin-left: 5px */} .form-table00 td { padding-left: 0px; padding-bottom: 0px; padding-top: 0; /* Padding to 5px */ border: 1px solid #202124; /* Border 1px dark grey for rows and columns */ text-align: left; } .input-field { width: 100%; margin: 0; /* Text inputs fill available space */ padding: 5px; box-sizing: border-box; } .form-table td:nth-child(1) { padding-left: 8px;}/* Padding only for the first column */ .form-table00 td:nth-child(1) { padding-left: 8px;} .separator { display: inline-block; vertical-align: middle; /* Aligns the separator with the middle of the text */ color: white; padding-bottom: 3px;} #userRegistrationError .btn-close { filter: invert(100%) brightness(100%); } #userLoginError .btn-close { filter: invert(100%) brightness(100%); } #userVerError .btn-close { filter: invert(100%) brightness(100%); } .regError { /* color: #202124 */margin-left: .5rem; margin-bottom: 0; font-size: 13px; font-weight: normal;} .fadeIn { animation: fadeIn 0.5s; } .fadeOut { animation: fadeOut 0.5s; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } } .valid { color: #57abfa; } .invalid { /* color: #202124 */ } .rule-met { color: #57abfa; /* or any other color/style you want to apply */ } .modalCustom {position: absolute; /* Position relative to the container */ top: 50%; /* Center vertically */ left: 50%; /* Center horizontally */ transform: translate(-50%, -50%); /* Adjust to truly center */ width: 95%; /* Adjust the width as needed */ background-color: transparent; height: auto;} .modalContentCustom {margin-top: 0; width: 100%;} .modalBodyCustom {border-top-left-radius: calc(.3rem - 1px);border-top-right-radius: calc(.3rem - 1px); margin-top: 0;} .Alblrules {margin-right: .5rem; margin-left: .5rem; margin-bottom: 0; color: darkgray; font-size: 14px; font-weight: 370;} .Allrules p { position: relative; padding-right: 0px; color: #202124; font-size: 13px; } .Allrules p[id^="rule"].valid:after { content: "\f00c"; /* Font Awesome check icon */ font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: 1em; margin-left: 5px; color: rgb(26, 189, 26); } .Allrules p[id^="rule"]:not(.valid):after { content: '\2716'; /* Unicode character for cross */ color: #4793d9; /* Red color for cross */ font-size: .9em; margin-left: 5px; } #CD::after, #bti::after { content: '\2716'; /* Unicode character for cross */ color: #57abfa; /* Red color for cross */ font-size: .9em; margin-left: 5px; } #bti::after { color: darkgrey } #CL::after, #CL01::after, #CD::after { content: '\2716'; color: var(--button-color); font-size: .9em; margin-left: 5px; } #closeTabButt::after, #returnToDirectory::after, #orgCD::after { content: "−"; /* Unicode character for cross */ color: white; /* Red color for cross */ font-size: .9em; margin-left: 5px; } #closeTabButt::after { content: "−"; /* Unicode character for cross */ color: #202124; /* Red color for cross */ font-size: .9em; margin-left: 5px; } #TBLSE::after, #TBLSE00::after, #TBLSE01::after, #TBLSE02::after, #TBLSE03::after { content: '\2716'; /* Unicode character for cross */ color: #202124; /* Red color for cross */ font-size: .9em; float: right; } .warning-icon { color: red; /* Red font color */ font-family: 'Font Awesome 5 Free'; /* Font Awesome 5 font family */ content: '\f146'; /* Awesome triangle icon */ animation: fadeInOut 2s infinite; /* Fade in and out animation */ margin-left: 10px ; } @keyframes fadeInOut { 0%, 100% { opacity: 0; } 50% { opacity: 1; } } #CQD1T::after { content: "−"; /* Unicode character for cross */ color: #202124; /* Red color for cross */ margin-left: 5px; } .Allrules.valid::after { content: "\f00c"; /* Font Awesome check icon */ font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: 1em; margin-left: 5px; color: rgb(26, 189, 26); } .AccSuccess::after { content: "\f00c"; /* Font Awesome check icon */ font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: 1em; margin-left: 5px; color: rgb(26, 189, 26); } #consultantAdded::after { content: "\f00c"; /* Font Awesome check icon */ font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: 1em; margin-left: 5px; color: #36fc36; } #employeeAdded::after { content: "\f00c"; /* Font Awesome check icon */ font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: 1em; margin-left: 5px; color: var(--butt00-color); display: none; } #employeeAdded.show-icon::after { display: inline-block; /* Show icon when .show-icon class is added */ } @keyframes fadeIn { 0% { display: none; } 1% { display: inline-block; opacity: 0; } 100% { opacity: 1; } } @keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; display: none; } } #consultantAdded::after, #consultantPAdded::after, #roleUpdated::after { content: "\f00c"; /* Font Awesome check icon */ font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: 1em; color: var(--butt00-color); } #consultantRemoved::after, #consultantPRemoved::after { content: "\f00c"; /* Font Awesome check icon */ font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: 1em; color: red; } .AccSuccess001::after { content: '\f071'; /* Font Awesome check icon */ font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: 1em; margin-left: 10px; color: #ff9900; } .terms::after { content: '\f3ed'; /* Font Awesome check icon */ font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: 1em; margin-left: 10px; color: #57abfa; } .Allrules.invalid::after { content: '\2716'; /* Font Awesome exclamation circle icon */ font-size: .9em; color: red; margin-left: 5px; } .Allrules span { color: #202124 !important; } .preloader01 { display: inline-block; /* Add this */ justify-content: center; align-items: center; z-index: 1000; } .preloader { position: absolute; top: 0; left: 1rem; width: 100%; height: 100%; justify-content: center; align-items: center; z-index: 1000; } .preloader.show, .preloader01.show { display: flex; } .spinner { display: flex; justify-content: space-between; width: 50px; } .dot1, .dot2, .dot3 { margin-left: .5rem; width: 10px; height: 10px; border-radius: 50%; background-color: white; animation: spinner 1.5s infinite; } .dot2 { animation-delay: 0.2s; } .dot3 { animation-delay: 0.4s; } @keyframes spinner { 0% { transform: scale(1); } 50% { transform: scale(1.5); } 100% { transform: scale(1); } } button[type="submit"]:disabled { color: #d6d6d6 !important; } .VR {position: absolute; font-size: 13px; margin-left: 1rem; margin-right: .5rem; color:#202124;/* display: none */} /* Common styles for all elements */ .fade-element {display: none;opacity: 0; transition: opacity 0.5s; } .fade-element.show { display: inline-block; opacity: 1; } .unauth::after { content: '\f256'; /* Font Awesome check icon */ font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: 1.2em; margin-left: 10px; color: #ff9900; } #sent:disabled { color: #202124 !important; border: none; } .slide-container { width: 70%; display: inline-flex; margin-bottom: 0.5rem; overflow: hidden; position: relative; } .slide-title { font-size: 12px; font-weight: bolder; display: inline-block; position: relative; white-space: nowrap; overflow: hidden; text-overflow: ellipsis !important; } #dropdown-menu { display: none; position: absolute; right: 0; background-color: #fff; padding: 10px; border: 1px solid #ddd; z-index: 1; } #dropdown-option { font-size: 12px; background-color: #fff; /* padding: 10px 20px */ border: none; cursor: pointer; font-weight: bolder; text-align: left; } .input-group0 { position: relative; } #update1:focus, #submit:focus { color: #202124 !important; } .attended{color: #202124 !important} .attendedb{color: white !important} #MODE001E::before, #MODE002E::before, #MODE003E::before { content: ""; position: absolute; top: 0; left: 0; border-style: solid; border-width: 15px 15px 0 0; border-top-left-radius: calc(.3rem - 1px) } #MODE001E::before { border-color: #ff0000 transparent transparent; } #MODE002E::before { border-color: #ffbb00 transparent transparent; } #MODE003E::before { border-color: #09ff00 transparent transparent; } .modal-state.open { /* Add styles to indicate the open state */ background-color: #f00; } .TRPhidden { display: none; } .TRP { transition: opacity 0.5s; } td.AT { padding-left: 30px; /* or any other style */ } .appointments-table td:first-child { vertical-align: top; } .appointments-table td:nth-child(2) { vertical-align: top; } .rect { display: inline-block; width: 10px; /* adjust the width to your liking */ height: 20px; /* adjust the height to your liking */ margin-right: 1px; /* 5px space between rectangles */ } /*Monochromatic Gradient effect with three shades of blue for Appointment tickets*/ .rect-blue {background-color: #3a69af;} .rect-orange {background-color: #3498DB;} .rect-green {background-color: #ADD8E6; margin-right: 0;} /* Color Schemes */ .blue-1 { background-color: #2F4F7F; } .blue-2 { background-color: #4682B4; } .blue-3 { background-color: #87CEEB; } .ADI {font-size: 13px; width: -moz-fit-content; width: fit-content; text-align: left; padding: 0; padding-left: 5px !important} .ADS {appearance: none; -moz-appearance: none; -webkit-appearance: none; outline: none; border: none; border-radius: 5px; box-shadow: none; font-size: 13px; padding: 0 5px; background-color: transparent;} .tooltip-inner { background-color: grey !important; color: white !important; font-weight: normal; font-size: 13px; } .tooltip-arrow {display: none !important;} .ADD {pointer-events: none;} .color-palette { display: flex; flex-wrap: wrap; justify-content: space-between; margin-top: 1.5rem; } .color-button { width: 30px; height: 30px; border-radius: 50%; border: none; cursor: pointer; } /*Change checkboxes when user changes color*/ .form-check-input:checked {background-color: var(--checkbox-color); border-color: var(--checkbox-color);} .form-check-input {border-color: var(--checkbox-color);} .butt_select_special {color: var(--checkbox-color);} #input1 {border-color: var(--checkbox-color);} #input2 {border-color: var(--checkbox-color);} #input1:checked {background-color: var(--checkbox-color);} #input2:checked {background-color: var(--checkbox-color);} input[type="checkbox"]:checked + .slider {border-color: var(--checkbox-color); background-color: var(--checkbox-color);} .message {display: none;} #emNames span:not(:last-child):after {content: "·";} .declined {text-decoration: line-through;} .accepted {color: rgb(0, 160, 0);} .buttdefault00 {background-color: transparent; border-style: unset; font-size: 13px; margin-bottom: 1rem; color: white; padding: 0; margin-left: .5rem} #NFAT {color: var(--butt00-color);} #btn3:disabled {opacity: 0.5; cursor: not-allowed;} .simple-table { width: 100%; border-collapse: collapse; /* This is key to making single lines instead of double */ font-size: 13px; } .simple-table th, .simple-table td { /* This is the key change */ border: 1px solid #ddd; /* Changed from #000 to a light gray */ padding: 15px; text-align: left; } .simple-table th { background-color: white; font-weight: normal; } .simple-table td { padding: 5px 10px; } .simple-table .form-control1 { width: 100%; padding: 5px 7px; color: #202124; font-size: 13px; border: none; box-sizing: border-box; } .colorswap {color: transparent !important;} .Allrules {font-weight: normal;} .AT::first-letter {text-transform: uppercase;} #topic1::first-letter {text-transform: uppercase !important;} .list-item { display: flex; align-items: flex-start;} .item-number { flex-shrink: 0;} .item-text { flex-grow: 1;} .arrowThis {position: absolute; top: 50%; right: 0; transform: translateY(-50%); margin-right: 1.5rem; display: none;} #HD1messageAreaReceiver { position: absolute; /* Position absolutely within its relative parent */ bottom: 0; /* Align to the bottom of the parent */ left: 50%; /* Start the left edge at 50% from the parent's left edge */ transform: translateX(-50%); /* Move the element back by half its own width to center it */ width: 90%; /* Now you can play with this width, e.g., 60%, 70%, etc. */ height: 45%; /* Set height to 20% of the parent's height */ background-color: white; /* White background */ /* Horizontal, Vertical, Blur, Spread, Color */ box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2); padding: 15px !important; /* Adjust padding as needed for text inside */ box-sizing: border-box; /* Include padding and border in the element's total width and height */ line-height: normal; text-align: left; transition: height 0.2s; color: #202124; font-size: 17px; resize: none; /* Prevent manual resizing if you want a fixed height */ font-weight: normal; border: 10px } #BXEM { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #202124 20px, #202124 100%); mask-image: linear-gradient(to bottom, transparent 0, #202124 20px, #202124 100%); } .matric-item, .tertiary-item, .postgrad-item, .language-item, .shortcourse-item, .professionalbody-item, .workhistory-item {transition: color 0.2s ease; padding: 0;} .matric-item:hover, .tertiary-item:hover, .postgrad-item:hover, .language-item:hover, .shortcourse-item:hover, .professionalbody-item:hover, .workhistory-item:hover {color: var(--checkbox-color) !important;} .matric-item.selected, .tertiary-item.selected, .postgrad-item.selected, .language-item.selected, .shortcourse-item.selected, .professionalbody-item.selected, .workhistory-item.selected {color: var(--checkbox-color) !important;} /* Horizontal radio layout + circle style - refined */ .qualification-type-group { display: flex; flex-wrap: wrap;justify-content: space-between; padding-left: 0; margin-left: -0.25rem; } .qualification-type-option { cursor: pointer; font-size: 13px; white-space: nowrap; } .qualification-type-radio { -webkit-appearance: none; -moz-appearance: none; appearance: none; width: 14px; height: 14px; border: 2px solid #6c757d; border-radius: 50%; margin-right: 8px; position: relative; background: white; flex-shrink: 0; vertical-align: middle; } .qualification-type-radio:checked { border-color: var(--checkbox-color) !important; } .qualification-type-radio:checked::after { content: ''; position: absolute; width: 8px; height: 8px; background: var(--checkbox-color) !important; border-radius: 50%; top: 50%; left: 50%; transform: translate(-50%, -50%); } .qualification-type-option:hover { color: #202124; } .editable-field:disabled, .editable-field[disabled] { background-color: white !important; opacity: 1 !important; cursor: not-allowed; } /* Useful DIV with shadow inside a modal */ .fade-siblings > .col:not(#colFour) { opacity: 0.35; transition: opacity 0.4s ease; pointer-events: none; } .fade-siblings > .col:not(#colFour) { filter: blur(1.5px); } #Achievements { overflow: scroll; scrollbar-width: none; background-color: #EDEDED; margin-left: 0.8rem; padding-top: .5rem; padding-bottom: .5rem; line-height: 1.8; } #Achievements::-webkit-scrollbar { display: none; } .checkbox-columns { display: flex; gap: 80px; /* spacing between columns */ margin-left: .5rem; background-color: #f9f9f9; border-radius: 8px; font-family: Arial, sans-serif;/* margin-right: -.5rem */ } .column { display: flex; flex-direction: column; gap: 10px; /* spacing between checkboxes */ flex: 1; /* makes columns equal width */ } .column label { display: flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; } .checkbox-columns input[type="checkbox"] { /* Hide default checkbox */ -webkit-appearance: none; -moz-appearance: none; appearance: none; /* Custom square */ width: 1em; /* Adjust size */ height: 1em; /* Adjust size */ border: 2px solid var(--checkbox-color); /* Custom border color (blue) */ border-radius: 0.25em; /* Slightly rounded corners */ cursor: pointer; display: inline-block; vertical-align: middle; position: relative; /* For custom checkmark */ } /* Style when checked */ .checkbox-columns input[type="checkbox"]:checked { background-color: var(--checkbox-color); /* Blue background when checked */ border-color: var(--checkbox-color); } /* Custom checkmark (example - might need SVG or clever pseudo-elements) */ .checkbox-columns input[type="checkbox"]:checked::after { content: '✓'; /* Or use an SVG icon */ color: white; font-size: .7em; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } #fadeContainer { display: flex; flex-wrap: wrap; /* allows wrapping if too many messages */ gap: 8px; /* nice spacing between texts */ margin-top: 15px; font-family: Arial, sans-serif; font-size: 14px; color: var(--checkbox-color); font-weight: bold; margin-left: .5rem; margin-right: .5rem; } .filter{--bs-text-opacity:1; font-size: .875em;} /* 1. Set the Hover Background Color */ .search-item:hover { background-color: #e9ecef !important; /* Adjust this to your preferred hover shade */ cursor: pointer; } /* 2. Prevent Font Weight changes and Color shifts on the whole block */ .search-item, .search-item:hover { font-weight: 400 !important; /* Force normal weight */ transition: background-color 0.2s ease; } /* 3. Lock the text colors so they DON'T turn #202124 or blue on hover */ .search-item:hover .name-text { color: #202124 !important; /* Keeps your primary blue name */ } .search-item:hover .text-muted, .search-item:hover .info-row, .search-item:hover .field-value { color: #6c757d !important; /* Keeps the subtle grey look */ } .search-item:hover .text-secondary { color: #6c757d !important; /* Keeps icons dark grey */ } /* 4. Active (On Click) State */ .search-item:active { background-color: #e9ecef !important; } /* Target spans inside our info-row */ .custom-separator span { display: inline-flex; align-items: center; } /* Add a dot BEFORE every span... */ .custom-separator span:not(:empty)::before { content: "•"; margin: 0 8px; color: #202124; } /* ...but REMOVE the dot from the very first VISIBLE span */ .custom-separator span[style*="display: inline"]:first-of-type::before, .custom-separator span:first-child::before { display: none; content: ""; margin: 0; } /* Only add a dash before items that are NOT the first child */ .lang-wrapper:not(:first-child)::before { content: " - "; margin: 0 8px; color: #6c757d; /* Bootstrap text-muted */ cursor: default; } /* Report Container */ .ish-report-wrapper { max-width: 800px; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; color: #333; line-height: 1.6; padding: 20px 20px 0; margin: 20px auto; /* display: none */ } /* Section Headings with 3px Left Border */ .report-section { border-left: 3px solid #1a1a1a; padding-left: 15px; margin-bottom: 30px; margin-top: 40px; } .report-section h2 { font-size: 1.25rem; text-transform: uppercase; letter-spacing: 1px; margin: 0; } /* Data Row with Broken Bottom Border */ .data-row { display: flex; justify-content: space-between; align-items: flex-end; padding: 12px 0; border-bottom: 1px dashed #ccc; /* The Broken Border */ } .data-label { flex: 2; } .data-label span { display: block; } .data-definition { font-size: 0.85rem; color: #666; font-style: italic; margin-top: 2px; } .data-value { flex: 1; text-align: right; font-weight: 700; font-size: 1rem; color: #1a1a1a; } /* Header Styling */ .report-header { text-align: center; border-bottom: 2px solid darkgrey; padding-bottom: 20px; margin-bottom: 0px; margin-left: 20px; margin-right: 20px; } /* Vertical List Item */ .archive-item { padding: 20px 0; border-bottom: 1px dashed darkgrey; /* Broken border between items */ transition: all 0.2s ease; cursor: pointer; position: relative; border-left: 3px solid transparent; /* Placeholder for hover state */ } /* The Beauty Border: 3px Left with Radius */ .archive-item { /* Always visible or use #e0e0e0 for neutral */ /* margin-bottom: .5rem */ } .archive-item:hover { background: rgba(0, 123, 255, 0.03); border-left-color: var(--checkbox-color);; /* Darken on hover */ padding-left: 20px; /* Subtle slide effect */ } .archive-content { display: flex; justify-content: space-between; align-items: center; } .archive-info { display: flex; flex-direction: column; } .archive-date { font-size: 0.75rem; font-weight: 700; color: #888; text-transform: uppercase; } .archive-title { font-size: 1.1rem; color: #1a1a1a; margin: 2px 0; } .archive-meta { font-size: 0.85rem; font-style: italic; } .archive-status { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; font-size: 13px; } /*delete this it is unused?? delete and check stats to confirm if any affected*/ .archive-arrow { font-size: 0.8rem; font-weight: 700; color: #007bff; opacity: 0.5; } .archive-item:hover .archive-arrow { opacity: 1; } /*delete block up to here*/ /*----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ /*TERMS AND CONTIONS STYLES ON ADMINISTRATION PANEL*/ .subdescription:focus, #docType:focus, #policyIcon:focus { outline: none; box-shadow: none; border: var(--bs-border-width) solid var(--bs-border-color); } .subdescription { border: var(--bs-border-width) solid var(--bs-border-color); resize: none; border-radius: calc(.3rem - 1px); } .head-block { border: 1px solid #ccc; padding: 1rem 0 1rem 1rem; margin-bottom: 1rem; border-radius: 6px; background: #f9f9f9; } .subhead-block { border-left: 3px solid #ddd; padding-left: 1rem; margin: 0.5rem 0; } .headbutton { margin-right: 0.25rem; font-size: 0.8rem; border-style: none; font-weight: bold; background-color: #eeeded; padding: .5rem 1rem; border-radius: calc(.3rem - 1px); } .removehead { background-color: #ff0011; margin-right: 1rem; } #notes { line-height: 1.3; /* yellow accent */ background-color: transparent; height: 283px; width: -webkit-fill-available; text-align: left; resize: none; } #source {background-color: #f9f9f9;} .column-content {display: none;} .column-content.active {display: block;} .active-btn {color: #0056b3 !important;} #buttons:hover {color: #0056b3 !important;} #policyIcon, #policyIcon option {font-family: "Font Awesome 5 Free", sans-serif !important; font-weight: 400;} .btn-outline-secondary { font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; } .editor-toolbar button { background-color: transparent !important; border: 1px solid #ccc; outline: none !important; box-shadow: none !important; transition: color 0.2s ease; } .editor-toolbar button:active, .editor-toolbar button:focus, .editor-toolbar button:hover { background-color: transparent !important; outline: none !important; box-shadow: none !important; border: 1px solid #ccc !important; color: #6c757d !important; } /*----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ /*----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ /* CLUSTER VILLAGE SEARCH SYSTEM STARTS HERE */ .search-result-list { list-style-type: none; padding-left: 0; margin-left: 20px; } /* Individual items establish the positioning space */ .search-result-item { position: relative; padding: 10px 0 10px 25px; font-family: Arial, sans-serif; font-size: 14px; } /* The Vertical Line segments */ .search-result-item::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background-color: darkgrey; /* Color of the vertical line */ } /* The Horizontal Pointer lines */ .search-result-item::after { content: ""; position: absolute; left: 0; top: 19px; /* Aligns perfectly with the middle of the first line of text */ width: 15px; border-top: 1px solid darkgrey; /* Color of the horizontal pointer */ } /* Fix the Top: Stops the line from overshooting the first item */ .search-result-item:first-child::before { top: 9px; /* Starts exactly where the first horizontal pointer begins */ } /* Fix the Bottom: Stops the line from overshooting the last item */ .search-result-item:last-child::before { bottom: calc(100% - 19px); /* Ends exactly at the last horizontal pointer */ } /* Text styling adjustments for scannability */ .settlement-name { font-weight: bold; color: #111; display: inline-block; cursor: pointer; } .location-details, .province-details { color: #666; font-size: 0.95em; } /* Kills the top padding for the first item only */ .search-result-item:first-child { padding-top: 0; } /* Kills the bottom padding for the last item only */ .search-result-item:last-child { padding-bottom: 0; } /* Realignment for First Child: Adjusts pointer and line start since top padding is 0 */ .search-result-item:first-child::after { top: 9px; /* Moves pointer up to match the text's new higher position */ } /* CLUSTER VILLAGE SEARCH SYSTEM ENDS HERE */ /*----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ /*----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ /*POST-SELECTING-SETTLEMENT ON USER CLUSTER REGISTRATION STYLES*/ .settlement-card { background: #fff; max-width: 400px; font-family: sans-serif; } .card-item { display: flex; align-items: center; margin-bottom: 12px; } .card-item i { margin-right: 10px; font-size: 1em; } .card-item .label { font-weight: normal; margin-right: 6px; font-size: 14px } .card-item .value { color: #333; } /*--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ /*---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ /*STATISTICS STYLES ON ADMIN PAGE*/ /* 1. Force the table to respect exact width constraints */ .fixed-layout-table { table-layout: fixed !important; width: 100% !important; } /* 2. Text clipping truncation engine applied to cells */ .truncate-cell { white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } /* 3. OPTIONAL: A subtle visual hint to show the cell can be hovered */ .truncate-cell:hover { cursor: help; background-color: #f8fafc; /* Very light slate shift on hover */ } #statsHead button { position: relative; padding-bottom: 4px !important; /* Space for the dash line */ } /* Base style for the active indicator dash */ #statsHead button::after { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 3px; /* Thickness of the dash */ border-radius: 2px; opacity: 0; transform: scaleX(0.8); transition: opacity 0.3s ease, transform 0.3s ease; } /* Reveal animation when active */ #statsHead button.active::after { opacity: 1; transform: scaleX(1); } /* Color Rule for Users button (Bootstrap Primary Color) */ #statsHead button[data-target="statsUser"]::after { background-color: var(--bs-primary, #0d6efd); } /* Color Rule for Institution button (Orange Color) */ #statsHead button[data-target="stats"]::after { background-color: #fd7e14; /* Bootstrap orange */ } /*----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ /*----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ /*ERROR ALERT AND INVALID ALERTS ON LANDING-PAGE AND ADMIN-LOGIN PAGES FOR SMOOTH SHRINK OF ALERT CARD*/ #alert00, #alertInvalid { display: grid !important; grid-template-rows: 0fr; opacity: 0; overflow: hidden; padding-top: 0; padding-bottom: 0; margin-top: 0; margin-bottom: 0; border-width: 0; transition: grid-template-rows 300ms ease, opacity 200ms ease, padding 300ms ease, margin 300ms ease, border-width 300ms ease; } #alert00 > span, #alertInvalid > span { min-height: 0; overflow: hidden; } #alert00.show, #alertInvalid.show { grid-template-rows: 1fr; opacity: 1; padding-top: .5rem; padding-bottom: .5rem; margin-bottom: 1rem; border-width: 1px; } /*----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ /* Help Desk — ID scoped only */ #HelpDesk1chat > div { margin-bottom: 14px !important; padding: 0 4px; } #HelpDesk1chat #paragraph, #HelpDesk1chat #Inquirer { font-size: 12px !important; font-weight: 500 !important; } #HelpDesk1chat #chat { display: inline-block; margin-left: 7px; font-size: 13px; line-height: 1.55; color: #30343b; cursor: pointer; } #topic1 { width: auto; min-width: 180px; border: 0; border-bottom: 1px solid #d9dce1; border-radius: 0; padding: 2px 4px; font-size: 13px; background: transparent; box-shadow: none !important; } #topic1:focus { border-bottom-color: #6b7280; outline: none; } #helpDesk1MessageArea { margin-top: 12px !important; padding: 10px 12px !important; min-height: 42px; border: 1px solid #e1e4e8; border-radius: 10px; font-size: 13px !important; line-height: 1.45 !important; background: #fafbfc; transition: border-color .2s ease, background .2s ease; } #helpDesk1MessageArea:focus { background: #fff; border-color: #b8bdc5; box-shadow: none; outline: none; } #sent, #sent001 { margin-top: 8px; padding: 5px 9px; background: transparent; color: #30343b; border: 0 !important; font-size: 12px; font-weight: 500 !important; border-radius: 6px; transition: background .15s ease; } #sent:hover, #sent001:hover { background: #f2f3f5; } #CQD1T, #CQDc1T { color: #5f6368; padding: 4px 7px; background: transparent; } #CQD1T:hover, #CQDc1T:hover { background: #f3f4f6; border-radius: 6px; } #dropdown-menu { padding: 6px !important; background: #fff !important; border: 1px solid #e4e6e9 !important; border-radius: 8px; box-shadow: 0 6px 20px rgba(0,0,0,.08); } #dropdown-option { border: 0; background: transparent; padding: 7px 10px; font-size: 12px; color: #30343b; border-radius: 5px; } #dropdown-option:hover { background: #f4f5f6; }