/* General Styles */ #account-management { margin: 0 auto; width: 100%; color: #333333; } #account-management h2 { margin: 1em 0; color: #313131; } #account-management p { margin: 0.5em 0; padding: 0; color: #333333; } #account-management p.error { padding:1rem; } #account-management .button, #account-management button { min-width: auto; } #account-management .button span, #account-management button span { margin: 0; padding: 0; } #account-management label { padding: 0; width: 30%; line-height: 1.5em; display: block; } #account-management input, #account-management textarea, #account-management select { padding: 0.6875em 1em; line-height: 1.5em; border: 1px solid #E9E9E9; border-radius: 2px; } #account-management input[type=submit] { width: auto; min-width: auto; } #account-management input[type=checkbox] { width: auto; min-width: auto; vertical-align:middle; } #account-management .field-block label { width: 100%; } #account-management .extra-field-block label { width: 30%; } #account-management .field-block { width: 100%; font-size: 0.875em; } #account-management .field-block.col-2 { padding: 0 0.5em; width: 50%; display: inline-block; } #account-management .field-block button { margin: 2em 0% 0% 0%; } #account-management .field-label { padding: 5px 0%; font-size: 1em; display: inline-block; vertical-align: middle; } #account-management .field-value { padding: 5px 0%; width: 65%; display: inline-block; vertical-align: middle; } #account-management .field-value input, #account-management .field-value select { padding: 6px 12px; width: 100%; max-width: 580px; height: 34px; } #account-management .field-list { width: 70%; float: right; margin: 0; list-style: none; } #account-management .account-table .field-block { text-align: left; } #account-management .account-table .field-label { vertical-align: top; } #account-management .col-2 .field-label { width: 100%; } #account-management .col-2 .field-value { width: 100%; } #account-management .field { padding: 0.5em; width: 50%; vertical-align: top; display: inline-block; } #account-management .field-name { padding: 0.25em 0; width: 30%; vertical-align: top; display: inline-block; } #account-management .field input, #account-management .field select, #account-management .field textarea { width: 70%; vertical-align: top; display: inline-block; } #account-management .my-account p.no-records { margin: 1em 0 0 1.5em; } #account-management div.alert { -webkit-box-align: center; -ms-flex-align: center; align-items: center; border-width: 1px; border-style: solid; display: -webkit-box; display: -ms-flexbox; display: flex; margin: 0% 0% .5em; padding: .5em 1em; } #account-management div.alert:before { font-family: 'Font Awesome 5 Pro'; font-size: 1.5em; padding-right: .75em; } #account-management div.alert.alert-danger { background-color: #F8D7DA; border-color: #F5C6CB; color: #721C24; } #account-management div.alert.alert-danger:before { content: '\f321'; font-weight: 700; } #account-management div.alert.alert-warning { background-color: #FFF3CD; border-color: #FFEEBA; color: #856404; } #account-management div.alert.alert-warning:before { content: '\f06a'; font-weight: 700; } #account-management div.alert.alert-success { color: #155724; background-color: #D4EDDA; border-color: #C3E6CB; } #account-management div.alert.alert-success:before { content: '\f058'; font-weight: 700; } #account-management div.alert a { font-family: inherit !important; color: inherit !important; } div.confirm-container { display: flex; justify-content: space-between; } #account-management .export { float: right; } #account-management .panel-header { margin-bottom: 1em; width: 100%; } /* Custom Select Box */ .custom-select-box { user-select: none; outline: none; position: relative; } .select-box-selected { padding: 12px 40px 12px 14px; background-color: #FFFFFF; border: 1px solid #E2EDED; border-color: #EAF1F1 #E4EDED #DBE7E7 #E4EDED; border-radius: 4px; cursor: pointer; position: relative; display: none; } .selected-value { width: 100%; display: block; } .custom-select-box .select-box-chevrons { padding: 9px 14px; top: 0; right: 0; bottom: 0; position: absolute; } .custom-select-box .select-box-chevrons i { height: 50%; font-size: 0.75em; color: #282828; text-align: right; opacity: 0.4; display: block; } .select-list-open .select-box-chevrons i { opacity: 1; } .custom-select-box ul { list-style-type: none; } .custom-select-box li { padding: 12px 14px; } /* Button Styles */ #account-management .button { margin: 0; padding: 0.75em 1.5em; width: auto; font-size: 1em; text-decoration: none; text-transform: uppercase; text-align: center; border: none; display: inline-block; border-radius: 0px; transition: background-color 0.3s ease; -webkit-transition: background-color 0.3s ease 0s; -moz-transition: background-color 0.3s ease 0s; -o-transition: background-color 0.3s ease 0s; -ms-transition: background-color 0.3s ease 0s; } #account-management .button.small { padding: 0.25em 0.75em; text-transform: none; } #account-management .button + .button { margin-left: 1em; } #account-management .section-buttons { margin: 1em 0; padding: 0% 5px; width: 100%; text-align: center; } /* Generic Section Styles */ #account-management .account-panel { margin: 0 auto; padding: 30px 50px 50px 50px; background-color: #FFFFFF; } #account-management .account-panel.small, #account-management .section-menu + .account-panel { padding: 2.5625em 2.75em 3em 2.75em; width: 54.9%; background-color: #F1F1F1; } #account-management .account-panel.small { max-width: 800px; } #account-management .section-menu + .account-panel { margin: 0% 13.5% 0% 0%; vertical-align: top; display: inline-block; text-align: left; } #account-management .section-menu { width: 31.6%; vertical-align: top; display: inline-block; } #account-management .section-menu ul { margin: 0%; padding: 2.75em 1em 3.5em 1.4375em; list-style-type: none; } #account-management .section-menu li { margin: 0.625em 0% 0% 0%; font-size: 1em; font-weight: 700; opacity: 0.4; cursor: pointer; } #account-management .section-menu li:first-child { margin-top: 0; } #account-management .section-menu li.active { opacity: 1; } #account-management .panel-section { display: none; } #account-management .panel-section.active { display: block; } #account-management .panel-section h2 { margin: 0 0 0.5em; font-size: 1.125em; line-height: 1.5em; font-weight: 400; text-transform: uppercase; } #account-management .panel-section p { margin: 0.5em 0; font-size: 0.75em; } #account-management .panel-section button { margin: 1.25em 0 0; width: auto; } #account-management .account-top-buttons { float: right; } /* Search */ #account-management .account-search { margin-bottom: 1em; background-color: #F1F1F1; } #account-management .account-search .search-filter { padding: 1em; background-color: #EEEEEE; justify-content: space-between; align-items: center; display: flex; cursor: pointer; } #account-management .account-search .search-filter .icon { font-weight: 900; } #account-management .account-search form { padding: 1em; } #account-management .account-search .search-left, #account-management .account-search .search-right { width: 50%; display: inline-block; vertical-align: top; } #account-management .account-search .search-right { text-align: right; vertical-align: bottom; } /* Generic Layout Styles */ #account-management .account-flex, #account-management .account-listing { margin: 1.5em 0; width: 100%; -webkit-box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); } #account-management .account-flex.no-shadow, #account-management .account-listing.no-shadow { -webkit-box-shadow: none; box-shadow: none; } #account-management .panel-section .account-table, #account-management .panel-section .account-flex, #account-management .panel-section .account-listing { -webkit-box-shadow: none; box-shadow: none; } /* Generic Table Styles */ #account-management .account-table { width: 100%; display: table; border-collapse: separate; border-spacing: 0.25em; } #account-management .account-table.table-fixed { table-layout: fixed; } #account-management .account-table-heading, #account-management .account-table-row { display: table-row; } #account-management .account-table-row-group { display: table-row-group; } #account-management .account-table-heading { font-weight: 700; text-align: center; } #account-management .account-table-heading .account-table-cell { color: #FFFFFF; background-color: #9F9F9F; } #account-management .account-table-row-group .account-table-row { background-color: inherit; } #account-management .account-table-row-group:hover .account-table-cell, #account-management .account-table-row:hover .account-table-cell { background-color: #EAEAEA; } #account-management .account-table-cell { padding: 1em; font-size: 0.875em; background-color: #F3F3F3; text-align: center; vertical-align: top; display: table-cell; } #account-management .table-fixed .account-table-cell { word-wrap: break-word; } /* Generic Flex Styles */ #account-management .account-flex { display: flex; flex-wrap: wrap; } #account-management .account-flex-heading, #account-management .account-flex-row, #account-management .account-flex-row-group { flex: 1 100%; } #account-management .account-flex-row { border-top: 3px solid #F0EFEF; } #account-management .account-flex-heading, #account-management .account-flex-row { display: flex; flex-wrap: wrap; } #account-management .account-flex-row:first-child, #account-management .account-flex-row-group .account-flex-row { border-top: none; } #account-management .account-flex-row-group:nth-child(even), #account-management .account-flex-row:nth-child(even) { background-color: #F7F7F7; } #account-management .account-flex-cell { padding: 1em; text-align: center; vertical-align: top; flex: 1 auto; } #account-management .account-flex-row-group .account-flex-row { background-color: inherit; } /* Generic Listing Styles */ #account-management .account-listing { background-color: #F7F7F7; } #account-management .account-listing-panel { padding: 1em; border-top: 3px solid #F0EFEF; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } #account-management .account-listing-panel:first-child { border-top: none; } #account-management .account-listing-panel:nth-child(even) { background-color: #F1F1F1; } #account-management .account-listing-panel:hover { background-color: #EEEEEE; } #account-management .account-listing-panel h3 { font-size: 1.25em; } #account-management .account-listing-panel .listing-panel-details { flex: 1; } #account-management .account-listing-panel .listing-panel-buttons { text-align: right; } #account-management .account-listing-panel.no-results .listing-panel-details { font-size: 0.9em; } #account-management .listing-panel-buttons .button { margin: 0 0 0 0.625em; padding: 0.25em 0.75em; } #account-management .listing-panel-buttons .button:first-child { margin-left: 0; } #account-management .account-listing.small-list .account-listing-panel { padding: 1em; } #account-management .account-listing.small-list .button { padding: 7px 10px; } #account-management .account-listing.small-list .button span { font-size: 0.8125em; } /* Password Reset Styles */ #account-management.reset-password .account-panel { margin: 1.5em auto; max-width: 575px; } #account-management.reset-password .account-panel p { margin: 0 0 0.5em; } /* Account Login Styles */ #account-management.login p { margin: 1em 0 0; } #account-management.login input { width: 100%; } #account-management .account-login { margin-top: 1em; } #account-management.login .field-block, #account-management.registration .field-block { text-align: left; } #account-management.login .account-panel { max-width: 500px; text-align: center; } #account-management.login .account-panel span.verify { font-size: 0.875rem; font-weight: 600; } /* Account 2 Factor Styles */ #account-management.two-factor .account-panel { max-width: 450px; } /* Account Register Styles */ #account-management.registration .account-panel { max-width: 700px; } #account-management.registration input[type=checkbox] { margin: 0.375em; width: auto; min-width: 0; float: left; } #account-management.registration .icheckbox_square { margin-top: 0.25em; float: left; } #account-management.registration .icheckbox_square input { width: auto; min-width: 0; } #account-management.registration .checkbox-label { font-size: 0.875em; text-align: left; overflow: hidden; display: block; } #account-management.registration :-ms-input-placeholder { color: transparent; opacity: 1; } #account-management.registration ::-webkit-input-placeholder { color: transparent; opacity: 0; } #account-management.registration :-moz-placeholder { color: transparent; opacity: 0; } #account-management.registration ::-moz-placeholder { color: transparent; opacity: 0; } #account-management.registration ::placeholder { color: transparent; opacity: 0; } #account-management .helpmessage_returning_user, #account-management .helpmessage_new_user { cursor: pointer; } #account-management .account-promo { margin: 0.625em 0px; padding: 0px 20px 10px 20px; width: 39%; float: right; } #account-management .alternative { padding: 4em 0 2em; font-size: 0.875em; text-align: center; display: block; } /* Account Generate Password Styles */ #account-management.generate-password .account-panel { margin: 1.5em auto; max-width: 575px; } #account-management.generate-password form { margin: 0 auto; max-width: 400px; } #account-management.generate-password .field-block { margin-bottom: 1em; } /* Account Dashboard Styles */ #account-management.dashboard { max-width: 902px; } #account-management .dashboard-info { padding-bottom: 1.1875em; } #account-management .info-left, #account-management .info-right { width: 50%; display: inline-block; } #account-management .info-left p { font-size: 1.125em; font-weight: 600; } #account-management .info-left .info-reference { font-size: 0.75em; font-weight: 400; } #account-management .info-right { text-align: right; } #account-management .info-right p { font-size: 0.875em; } #account-management .info-right .icon { margin-top: -2px; margin-right: 0.5em; font-size: 1.6875em; font-weight: 900; } #account-management #account-dashboard-buttons { margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: center; } #account-management .section-panel { margin: 0% 0% 3.9% 8.375%; padding: 0.5em 0.5em; width: 27.75%; min-height: 150px; text-decoration: none; color: #FFFFFF; background-color: #666666; text-align: center; vertical-align: middle; transition: background-color 0.3s ease; -webkit-transition: background-color 0.3s ease 0s; -moz-transition: background-color 0.3s ease 0s; -o-transition: background-color 0.3s ease 0s; -ms-transition: background-color 0.3s ease 0s; display: inline-block; } #account-management .section-panel:nth-of-type(3n+1) { margin-left: 0; } #account-management .section-panel .section-image { margin: 0.5em 0; padding-top: 50px; } #account-management .section-panel .section-image .icon { padding: 0%; max-width: 100%; font-size: 2.75em; } #account-management .section-panel .section-label { width: 100%; font-size: 1em; line-height: 1.5em; font-weight: 700; vertical-align: middle; display: inline-block; } #account-management .section-panel .section-description { margin-bottom:0.375em; } #account-management .section-description span { font-size: 0.8125em; display: block; } #account-management .section-subscription { padding: 0.25em; background-color: #000000; } #account-management .section-panel:hover { background-color: #777777; } /* My Details Styles */ #account-management.details { max-width: 1006px; } #account-management.details .address-listing { font-size: 0.875em; } #account-management.details .back-to-list { margin: 0 0 1em 0.5em; padding: 0.25em 0.75em; float: right; } /* My Saved Baskets and Quotes Styles */ #account-management table.saved-table { width: 100%; border: 1px solid; border-color: inherit; } #account-management table.saved-table th { border: 1px solid; border-color: inherit; } #account-management table.saved-table td { text-align: center; border: 1px solid; border-color: inherit; } #account-management table.saved-table button { margin: 0; padding: 0; width: auto; font-size: 1em; color: inherit; background-color: transparent; display: inline-block; border-radius: 0; } #account-management .details-section.saved-basket table { margin: 0.5em 0 1em; width: 100%; border: 1px solid; border-color: inherit; } #account-management .details-section.saved-basket table th { border: 1px solid; border-color: inherit; } #account-management .details-section.saved-basket table td { text-align: center; border: 1px solid; border-color: inherit; } #account-management .details-section.saved-basket td:nth-of-type(1) { width: 55%; text-align: left; } #account-management .details-section.saved-basket td:nth-of-type(n+2) { width: 15%; } /* My Orders Styles */ #account-management table td.totals_label { text-align: right; } #account-management table td.totals_value { text-align: right; } #account-management .ordertable h4 { margin: 0.25em 0 0.25em 0; font-size: 1.375em; } #account-management .ordertable p { margin: 0.25em 0 0.25em 0; } #account-management #invoice th, #account-management #invoice td { padding: 0.75em 0.375em; border: 1px solid; border-color: inherit; } /* My Subscriptions Styles */ #account-management .subscription .account-table-cell { padding: 0.5em; } #account-management .subscription table tr td span.small { font-size:0.75em; } #account-management .subscription table tr td span.attention { color: #f00; } #account-management .subscription table tr td span.complete { color: #155724; } #account-management .subscription .disclaimer { padding-bottom: 2em; } #account-management .subscription .signature span.signature-date { display: block; font-style: italic; margin-left: 7.5%; } #account-management .subscription .signature span.signature-date span { font-weight: 600; } /* Subscription button to toggle state */ #account-management .button_on_off { margin: 0% 0% 0% 16px; vertical-align: middle; border: 1px solid #E0E0E0; border-radius: 4px; overflow: hidden; display: inline-block; } #account-management .button_on_off span { padding: 6px 12px; font-size: 0.813em; font-weight: 600; text-transform: uppercase; color: #FFFFFF; display: inline-block; cursor: default; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } #account-management .button_on_off span.on { color: #CCCCCC; background-color: #FFFFFF; cursor: pointer; } #account-management .button_on_off span.off { color: #FFFFFF; background-color: #CC1B1B; cursor: pointer; } #account-management .button_on_off.active span.on { color: #FFFFFF; background-color: #0F8C1A; cursor: pointer; } #account-management .button_on_off.active span.off { color: #CCCCCC; background-color: #FFFFFF; cursor: pointer; } #account-management .button_on_off.disabled span.on { display: none; } #account-management .button_on_off.disabled span.off { display: inline-block; cursor: default; } #account-management .button_on_off.disabled.active span.on { display: inline-block; cursor: default; } #account-management .button_on_off.disabled.active span.off { display: none; } /* CPD Record */ /* Will need to look at in the future */ #account-management .attendance-section td span.icon { margin: 0% 0.25em; font-size: 1.125em; } #account-management .attendance-section table, #account-management .attendance_record table { width: 100%; } #account-management .attendance_record table { margin: 0% 0% 2em 0%; } #account-management .attendance-section th, #account-management .attendance_record th { padding: 5px; color: #000000; background-color: #EFEFEF; border: 1px solid #DFDFDF; text-align: center; vertical-align: middle; } #account-management .attendance-section td, #account-management .attendance_record td { padding: 10px 5px; background-color: transparent; border: 1px solid #DFDFDF; text-align: center; vertical-align: middle; } #account-management .attendance_fields { padding-left: 0; list-style-type: none; } #account-management .attendance_fields li { padding: 0.5em; width: 50%; vertical-align: top; display: inline-block; } #account-management .attendance_fields li label { width: 100%; } /* My Vacancies Styles */ #account-management.job-board h2, #account-management.job-board .job-details-buttons { margin: 0; width: 50%; vertical-align: top; display: inline-block; } #account-management.job-board .job-details-buttons { text-align: right; } #account-management.job-board .job-details-buttons .button { margin-left: 0.5em; } #account-management.job-board .job-details-buttons .button:first-of-type { margin-left: 0; } #account-management.job-board .button.placement-button { background-color: #313131; color: #FFFFFF; } #account-management.job-board .button.placement-button:hover { background-color: #484848; color: #FFFFFF; } /* Create a Job Styles */ #account-management .jobs-section { padding: 2em 1.5em; background-color: #F1F1F1; } #account-management .jobs-section h2 { margin: 0% 0% 0.75em 0%; width: 48%; display: inline-block; } #account-management .jobs-section .price-per-job { margin: 0%; width: 50%; font-size: 1.5em; line-height: 1.25em; font-weight: 400; text-align: right; display: inline-block; } #account-management.job-board .section-buttons { margin: 3em 0 1.5em; } #account-management.job-board .section-buttons .button { margin: 0.5em; padding: 0.429em 1.571em; font-size: 1em; color: #FFFFFF; } #account-management.job-board .section-buttons .button:first-of-type { background-color: #313131; } #account-management.job-board .section-buttons .button:first-of-type:hover { background-color: #484848; } /* Exam Styles */ /* Two styles are incredibly inefficient, will need to remove the *s due to how css works */ #account-management .exam-list-heading { display: flex; } #account-management .exam-list-heading > * { background-color: #f7f7f4; font-weight: 600; padding: 1rem; } #account-management .exam-item { display: flex; } #account-management .exam-item.no-results { padding: 1rem; } #account-management .exam-item > * { padding: 1rem; } #account-management .exam-form { width: 30%; } #account-management .exam-course { width: 30%; } #account-management .exam-course-info { width: 25%; } #account-management .exam-options { width: 15%; } #account-management .exam-options a.button { font-size: 1rem; } /* User Management Styles */ #account-management .user-management .new-login { cursor: pointer; } #account-management .user-management .login-buttons { display: inline-block; } #account-management .user-management .login-buttons .icon { margin: 0em 0em 0em 1em; cursor: pointer; } /* Exam section */ #account-management div.exam_headings { margin: 0% 0% 0.75rem 0%; font-size: 1.25rem; font-weight: 700; } #account-management div.exam_headings > .value .note { font-size: 1.313rem; } /* Staff Report */ #account-management .staff-report .account-flex-cell { width: calc(100% / 6); } #account-management .staff-report .staff-report-label { width: 10%; } #account-management .staff-report .staff-report-exams { width: 90%; font-size: 0.8125em; flex-grow: 4; } #account-management .staff-report .account-table-cell { padding: 0.6em; } #account-management .staff-report .staff-report-type { font-size: 0.8125em; font-weight: 700; } #account-management .exam-listing { display: block; padding-bottom:1rem; text-align:left; font-size: 0.9rem; } #account-management .staff-report-exam-complete { color: #25AC4A; font-weight:bold; } #account-management .staff-report-exam-soon { color: #FF8000; font-weight:bold; } #account-management .staff-report-exam-now { color: #DC1F27; font-weight:bold; } #account-management .account-table-row-group .account-table-row.row-extra-details { background-color:#ededed; } #account-management .staff-report.staff p { margin-top: 1.5em; } /* Directory Files */ #account-management div.directory-files p.empty_directory { font-weight:600; margin-top:1.5em; } #account-management div.directory-files ul { margin: 2rem 0%; padding: 0%; list-style: none; } #account-management div.directory-files ul li { margin: 0% 0% 2% 2%; padding: 0%; width: 15%; display: inline-block; vertical-align: top; background-color: #FFFFFF; border: 1px solid #E0E0E0; border-radius: 4px; overflow: hidden; transition: background-color 0.3s ease; } #account-management div.directory-files ul li a { padding: 66% 12px 6% 12px; font-size: 1rem; line-height: 1.25rem; font-weight: 600; text-align: center; display: block; position: relative; overflow: hidden; } #account-management div.directory-files ul li a:before { content: ''; padding-top: 60%; width: 100%; top: 0px; right: 0px; left: 0px; display: block; position: absolute; background-color: #FFFFFF; background-size: auto 60%; background-position: center; background-repeat: no-repeat; border-bottom: 1px solid #E0E0E0; } #account-management div.directory-files ul li.directory-folder a:before { background-image: url('../../../images/icons/noun_folder_132981.svg'); } #account-management div.directory-files ul li.directory-file a:before { background-image: url('../../../images/icons/noun_file_2627306.svg'); } #account-management div.directory-files ul li:hover { background-color: #E0E0E0; } #account-management div.directory-files ul li:nth-of-type(6n+1) { margin-left: 0; } #account-management div.directory-files ul li.doc a:before { background-image: url('../../../images/icons/noun_doc_425616.svg'); } #account-management div.directory-files ul li.ppt a:before { background-image: url('../../../images/icons/noun_ppt_424651.svg'); } #account-management div.directory-files ul li.pdf a:before { background-image: url('../../../images/icons/noun_pdf_425614.svg'); } #account-management div.directory-files ul li.xls a:before { background-image: url('../../../images/icons/noun_xls_424623.svg'); } #account-management div.directory-files ul li.jpg a:before { background-image: url('../../../images/icons/noun_jpg_424632.svg'); } #account-management div.directory-files ul li.png a:before { background-image: url('../../../images/icons/noun_png_424630.svg'); } /* My Saved Forms */ #account-management .my-account ul.display_saved_form li { margin: 0%; padding: 0%; } #account-management .my-account ul.display_saved_form li:before { display: none; } #account-management .my-account ul.display_saved_form > li.heading { margin-bottom: 0.5em; text-align: left; color: #FFFFFF; background-color: #9F9F9F; } #account-management .my-account ul.display_saved_form > li.heading span.heading-label { padding: 1em 1.375em; font-size: 1em; line-height: 1.5em; font-weight: 700; display: block; cursor: pointer; } #account-management .my-account ul.display_saved_form > li.heading i.far { font-size: 1.25em; line-height: 1.25em; float: right; } #account-management .my-account ul.display_saved_form > li.heading ul { margin: 0%; background-color: #F3F3F3; border-top: 2px solid #FFFFFF; } #account-management .my-account ul.display_saved_form > li.heading ul > li { width: 100%; font-size: 0.875em; line-height: 1.5em; text-align: left; display: table; color: #444444; background-color: #F3F3F3; border-bottom: 2px solid #FFFFFF; } #account-management .my-account ul.display_saved_form > li.heading ul > li > div { padding: 1em 1.375em; display: table-cell; vertical-align: top; } #account-management .my-account ul.display_saved_form > li.heading div.question { width: 320px; max-width: 320px; font-weight: 700; } /* My Saved Forms */ #account-management.saved-quotes .my-account > h2 { margin: 0% 0% 1.5em 0%; font-size: 1.5rem; line-height: 1.5em; font-weight: 700; } #account-management.saved-quotes .field { margin: 0% 0% 1rem 0%; } #account-management.saved-quotes .field .field-name, #account-management.saved-quotes .field input { vertical-align: middle; } #account-management.saved-quotes .details-section { margin: 0% 0% 3em 0%; } #account-management.saved-quotes .details-section > h2 { margin: 0% 0% 1em 0%; font-size: 1.25rem; line-height: 1.5em; font-weight: 700; } #account-management table td .item_description span.discount_label { color: #EC0000; } #account-management table td.price .discounted_price { display: block; text-decoration: line-through; color: #EC0000; } #account-management .details-section.saved-basket table th { border: 0px; border-left: 1px solid #FFFFFF; } #account-management .details-section.saved-basket table th:first-of-type { border-left: 0px; } /* inspections_due */ #account-management [data-entry_id] { cursor: pointer; } #account-management .inspection-container { margin-top: 1em; padding: 1em 1.5em; background-color: #777777; color: #FFFFFF; border-radius: 3px; display: flex; justify-content: space-between; align-items: center; position: relative; } #account-management .inspection-status { text-align: right; } #account-management .inspection-status .activity-label { margin-top: 0.5em; font-size: 0.875em; display: block; } #account-management .inspection-status .activity-label .icon { color: #FF220C; } #account-management .inspection-status .activity-label .locked_inspection { margin-top: 0.25em; display: block; } /* Inspections */ #account-management .location-heading { border:1px solid #E0E0E0; background-color: #333; color: #fff; padding: 1.5rem; display: flex; justify-content: space-between; } #account-management .location-heading > div { text-align: center; width: 33.3% } #account-management .location-heading > div.text-left { text-align: left; } #account-management .location, #account-management .inspection { display: block; text-decoration: none; color: #000; } #account-management .location-details, #account-management .inspection-details { display: flex; justify-content: space-between; padding: 1.5rem; border-left:1px solid #E0E0E0; border-right:1px solid #E0E0E0; border-bottom:1px solid #E0E0E0; } #account-management .location-details > div, #account-management .inspection-details > div { text-align: center; width: 33.3%; } #account-management .location-details > div.text-left, #account-management .inspection-details > div.text-left { text-align: left; } /* #account-management .inspection-icon.green { color: #008000; } #account-management .inspection-icon.yellow { color: #FFBF00; } #account-management .inspection-icon.red { color: #ff0000; } */ #account-management .inspection-icon { font-size: 1.4rem; } #account-management a.inspection-icon { font-size: 1.4rem; cursor:pointer; display:inline-block; } #account-management a.inspection-icon:not(:first-of-type) { margin-left:2rem; } #account-management .inspections .green { color: #008522; } #account-management .inspections .yellow { color: #ffbf00; } #account-management .inspections .red { color: #ff220c; } #account-management .inspection-details .button { background-color: #e1e1e1; color: #8e8d8d; margin: 1px 0 0 0; } #account-management .form-group { margin-top: 1rem; } #account-management .location-inspection-heading { display: flex; justify-content: space-between; align-items: center; } #inspections .inspections-header { margin-bottom: 1.5rem; display: flex; align-items: center; justify-content: space-between; } #inspections .inspections-header .icons { display: flex; align-items: center; } #inspections .inspections-header .icons > a { margin-right: 1rem; color: #313131; text-decoration: none; } #inspections .inspections-header .icons .search-inspection > span { color: #5B70AB; } #inspections .inspections-header .icons > a > span { font-size: 1.5rem; } #inspections .inspections-header .icons > a:last-of-type { margin-right: 0.5rem; } #inspections .inspections-list-container { margin-top: 1.5rem; } #inspections .inspections-list { margin: 0; padding: 0; } #inspections .inspections-list > li:first-of-type { margin-top: 1rem; } #inspections .inspections-list-heading { display: flex; align-items: center; padding: 1rem; justify-content: space-between; background-color: #999; } #inspections .inspections-list-heading > div { text-align: center; flex-basis: 15%; } #inspections .inspections-list-heading .list-label { flex-basis: 30%; text-align: left; } #inspections .inspections-list-heading .list-action { flex-basis: 10%; } #inspections .inspections-list-heading .heading > div { width: 100%; } #inspections .inspections-list-heading .heading > :first-child { padding-bottom: 0.25em; } #inspections .inspections-list-heading .heading > .sub-heading { padding: 0% 0.5rem 0% 0%; width: 50%; font-size: 0.75rem; display: inline-block; text-align: right; text-transform: none; } #inspections .inspections-list-heading .heading > .sub-heading:last-of-type { padding: 0% 0% 0% 0.5rem; text-align: left; } #inspections .inspections-list-item { list-style: none; display: flex; justify-content: space-between; align-items: center; padding: 1rem; } #inspections .inspections-list-item > div { text-align: center; flex-basis: 15%; } #inspections .inspections-list-item .list-label { flex-basis: 30%; text-align: left; } #inspections .inspections-list-item .list-action { flex-basis: 10%; } #inspections .inspections-list-item .list-action > a { font-size: 1.125rem; } #inspections .inspections-list-item .inspection_icon.hazard .icon { font-weight:bold; margin-left:1rem; font-size:1.3rem; } #inspections .inspections-list-item .inspection_icon.hazard.green .icon { color: #268F3D; } #inspections .inspections-list-item .inspection_icon.hazard.amber .icon { color: #E6AF2E; } #inspections .inspections-list-item .inspection_icon.hazard.red .icon { color: #CE0000; } /* #inspections .inspections-list-container.inspection_results { max-width: 600px; } */ #inspections .inspection_results .inspections-list-heading .heading { flex-basis: 30%; } #inspections .inspection_results .inspections-list-heading .list-action { min-width: 26%; } #inspections-search-popup { border-radius: 3px; background-color: #F2F2F2; padding: 0; margin: 0; } #inspections-search-popup .search-header { text-align: center; padding: 1rem 2rem; border-bottom: solid 3px #CECECE; } #inspections-search-results .search-header { display: flex; align-items: flex-end; justify-content: space-between; } #inspections-search-results .search-header .icons > a { font-size: 1.5rem; margin-right: 1rem; } #inspections-search-results .search-header .icons > a:last-of-type { margin-right: 0.5rem; } #inspections-search-results .search-results-container { margin-top: 1.5rem; max-width: 500px; } #inspections-search-results .search-results-container .search-results-header { display: flex; align-items: flex-end; padding: 1rem; justify-content: space-between; background-color: #999; } #inspections-search-results .search-results-container .search-results { margin: 0; padding: 0; } #inspections-search-results .search-results-container .search-results > li { list-style: none; padding: 1rem; display: flex; justify-content: space-between; } #inspections .search-inspection, #inspections-search-results .search-inspection { background-color: transparent; font-size: 1.5rem; padding: 0; padding-left: 0.5rem; line-height: 0; } #inspections .search-inspection > span, #inspections-search-results .search-inspection > span { color:#CECECE; } .popup-panel.inspection-search { padding: 0; background-color: #F2F2F2; border-radius: 8px; max-width: 800px; } .popup-panel.inspection-search .inspection-search-header h3 { text-align: center; font-size: 1.125rem; text-transform: uppercase; margin: 0; border-bottom: 2px solid #CECECE; padding: 1.5rem; color: #313131; } .popup-panel.inspection-search .inspection-search-body { padding: 10px 1.5rem 5rem; } .popup-panel.inspection-search .form-group { padding-top: 2.25rem; display: flex; justify-content: space-between; align-items: center; } .popup-panel.inspection-search .form-group label { width: 43%; padding-left: 2.125rem; } .popup-panel.inspection-search .form-group label.date-range { width: 40%; } .popup-panel.inspection-search .form-group select, .popup-panel.inspection-search .form-group input { width: 100%; padding: 1.125rem; border-radius: 6px; border: none; margin-right: 1.75rem; } .popup-panel.inspection-search .form-group button { background-color: #5B70AB; font-weight: 600; padding: 1rem 2rem; min-width: 155px; border-radius: 8px; margin: 0 } .popup-panel.inspection-search .form-group.buttons { padding-left: 29%; } .popup-panel.inspection-search .form-group div.date-range { display: flex; width: 100%; } .popup-panel.inspection-search .form-group div.date-range input { max-width: 146px; } /* Inspection Forms */ #account-management .inspections-forms .form_entry_detail .field-block { font-size: 1em; } #account-management .inspections-forms .form_entry_detail .field-label { padding: 0; width: 10%; } #account-management .inspections-forms .form_entry_detail .field-value { padding: 0; } #account-management .inspections-forms .form_entry_detail .field-block p { margin: 0; } /* Participants */ #account-management #account-participants .participant-list { padding: 1rem; background-color: #eee; width: 50%; } #account-management #account-participants .participant-heading { display: flex; justify-content: space-between; padding: 1rem; background-color: #444444; color: #fff; } #account-management #account-participants .participant-row { display: flex; justify-content: space-between; padding: 1rem; background-color: #fff; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); } #account-management #account-participants .participant-row:nth-child(odd) { background-color: #f1f1f2; } #account-management #account-participants .participant-buttons { margin-top: 1rem; padding: 1rem; display: flex; justify-content: flex-end; } #account-management #account-participants a.edit { background-color: #eee; color: #000; } #account-management #account-participants h1 { color: #444; } #account-management #account-participants .form-panel { padding: 1rem; background-color: #eee; margin-top: 1rem; width: 50%; } #account-management #account-participants .form-panel .field-block { display: flex; } #account-management #account-participants .form-panel .field-block label { width: 20%; min-width: 200px; } #account-management #account-participants .participant-form .participant-buttons button { margin: 0 1rem !important; } #account-management #account-participants .participant-form button.delete { background-color: #DC2626; width: 40px; } #account-management #account-participants .participant-form ul { margin: 0; padding: 0; list-style: none; } #account-management #account-participants .participant-form .field-block input { width: 20%; max-width: 200px; } #account-management #account-participants .participant-label { font-size: 1.25rem; } .delete-participant h3 { text-align: center; } .delete-participant .delete-actions { display: flex; justify-content: center; } .delete-participant .delete-actions button:first-of-type { margin-right: 1rem; } /* 1000px Resolution Specific Baheviour */ @media only screen and (min-width: 0px) and (max-width: 1100px) { /* Account Dashboard Styles */ #account-management .section-panel { margin: 0% 0% 2.25em 3.5%; width: 31%; max-width: none; } #account-management .section-panel:nth-of-type(4n+1) { margin-left: 3.5%; } #account-management .section-panel:nth-of-type(3n+1) { margin-left: 0; } } /* 800px Resolution Specific Baheviour */ @media only screen and (min-width: 0px) and (max-width: 800px) { /* General Mobile Styles */ #account-management h1 { margin-top: 5%; font-size: 1.5em; } #account-management span.icon { display: inline; } #account-management label { width: 100%; } #account-management input, #account-management textarea, #account-management select { width: 90%; } #account-management input[type="checkbox"], #account-management input[type="radio"] { width: auto; } #account-management .field { width: 100%; } /* Button Styles */ #account-management .button a { margin: 0px 0px 0px 0px; max-width: 100%; } #account-management .button.logout-account, #account-management .button.back-to-account { margin: 0% 0% 0% 0%; text-align: center; float: none; } /* Search */ #account-management .account-search .search-left, #account-management .account-search .search-right { width: 100%; display: block; } #account-management .account-search .search-right { text-align: left; } #account-management .account-search .search-right button { margin-top: 0.5em; } /* Generic Table Styles */ #account-management .account-table.table-collapse, #account-management .table-collapse tbody, #account-management .table-collapse .account-table-row, #account-management .table-collapse .account-table-row-group, #account-management .table-collapse .account-table-cell { display: block; } #account-management .table-collapse .account-table-cell.empty { display: none; } /* Collapsing the table means no need to show the headings */ #account-management .table-collapse .account-table-heading { display: none; } /* Generic Flex Styles */ #account-management .account-flex, #account-management .account-flex-heading, #account-management .account-flex-row, #account-management .account-flex-row-group, #account-management .account-flex-cell { display: block; } #account-management .account-flex-cell.empty { display: none; } #account-management .staff-report .account-flex-cell { width: 100%; } /* Account Register Styles */ #account-management #account-register { padding: 6% 10% 10% 10%; } #account-management #account-register .label { display: none; } #account-management #account-register :-ms-input-placeholder { color: inherit; opacity: 1; } #account-management #account-register ::-webkit-input-placeholder { color: inherit; opacity: 0.54; } #account-management #account-register :-moz-placeholder { color: inherit; opacity: 0.54; } #account-management #account-register ::-moz-placeholder { color: inherit; opacity: 0.54; } #account-management #account-register ::placeholder { color: inherit; opacity: 0.54; } #account-management .account-promo { width: 100%; float: none; } /* Account Dashboard Styles */ #account-management .section-header { padding: 0.5em; } #account-management .section-header .section-image { max-width: 50px; width: 15%; } #account-management .section-panel { margin: 0% 0% 1.5em 4%; width: 48%; } #account-management .section-panel:nth-of-type(3n+1) { margin-left: 4%; } #account-management .section-panel:nth-of-type(2n+1) { margin-left: 0%; } /* Account Register Styles */ #account-management #account-register h1 { text-align: center; } /* Password Reset Styles */ #account-management.reset-password .account-panel h1 { text-align: center; } /* My Details Styles */ #account-management .details-section { padding: 1.5em 1em; } /* My Orders Styles */ #account-management #invoice th, #account-management #invoice td { display: block; } #account-management #invoice td { border-width: 0 1px 1px; } #account-management #invoice tr.headings { display: none; } #account-management #invoice tr.headings + tr td { border-width: 1px; } #account-management #invoice .product_label { background-color: #EEEEEE; } #account-management #invoice tr.items td { font-size: 0.8125em; } #account-management #invoice tr.items td.description { font-size: 1em; } #account-management #invoice tr.items td.quantity { text-align: right; } #account-management #invoice tr.items .mobile-element { margin-right: 1em; font-weight: 700; } #account-management #invoice tr.items .mobile-element:after { content: ':'; display: inline-block; } #account-management #invoice tr.subtotal, #account-management #invoice tr.delivery, #account-management #invoice tr.vat, #account-management #invoice tr.ordertotal, #account-management #invoice tr.paidtodate { background-color: #EEEEEE; } #account-management #invoice .totals_label { display: none; } #account-management #invoice .totals_value:before { margin-right: 1em; font-weight: 700; display: inline-block; } #account-management #invoice .totals_value .description { font-size: 0.8125em; } #account-management #invoice tr.subtotal .totals_value:before { content: 'Sub Total: '; } #account-management #invoice tr.delivery .totals_value:before { content: 'Delivery: '; } #account-management #invoice tr.vat .totals_value:before { content: 'VAT: '; } #account-management #invoice tr.ordertotal .totals_value:before { content: 'Total: '; } #account-management #invoice tr.paidtodate .totals_value:before { content: 'Paid to Date: '; } /* My Subscriptions Required Fields Styles */ #account-management .subscription .missing-details tr:first-of-type { display: block; } /* CPD Record */ #account-management .attendance_fields li { width: 100%; } /* My Vacancies Styles */ #account-management.job-board h2, #account-management.job-board .job-details-buttons { width: 100%; } #account-management.job-board h2 { margin-bottom: 0.75em; } #account-management.job-board .job-details-buttons { text-align: center; } /* Create a Job Styles */ #account-management .jobs-section { padding: 1.5em 1em; } #account-management .jobs-section h2 { width: 100%; } #account-management .jobs-section .price-per-job { margin: 0% 0% 1.5em 0%; width: 100%; font-size: 1.25em; text-align: left; } #account-management .jobs-section .field-label { padding: 20px 0% 0%; width: 100%; } #account-management .jobs-section .field-value { width: 100%; } #account-management .jobs-section .section-buttons { margin: 3em 0% 1.5em 0%; padding: 5px 5px; width: 100%; } /* Directory Files */ #account-management div.directory-files ul li { margin-left: 2%; width: 23.5%; } #account-management div.directory-files ul li:nth-of-type(4n+1) { margin-left: 0; } #account-management .exam-list-container { background-color: #FFFFFF; } #account-management .exam-list-heading { display: none !important; } #account-management .exam-item { margin: 0% 0% 1rem 0%; padding-bottom: 1.5rem; display: flex; flex-wrap: wrap; justify-content: center; text-align: center; background-color: #F2F2F2; } #account-management .exam-item.no-results { padding: 1rem; } #account-management .exam-form { padding: 1.5rem 1rem; width: 100%; font-weight: 700; } #account-management .exam-course { display: none !important; } #account-management .exam-course-info { width: 100%; } #account-management .exam-options { padding: 0%; width: auto; } #account-management .exam-options a.button { margin: 0% 1rem; } /* Saved Forms */ #account-management #saved-forms .button.primary.small { margin: 0; } #account-management #saved-forms .account-table-row { margin-bottom: 1rem; } #account-management #saved-forms .account-table-row .account-table-cell:first-of-type { padding-top: 1rem; font-size: 1rem; font-weight: 600; } #account-management #saved-forms .account-table-row .account-table-cell:last-of-type { padding-bottom: 1rem; } } /* 600px Resolution Specific Baheviour */ @media only screen and (min-width: 0px) and (max-width: 600px) { #account-management .field-label { width: 100%; } #account-management .field-value { width: 100%; } /* Custom Select Box */ .select-box-selected { display: block; } .custom-select-box ul { margin: 0; padding: 0; right: 0; left: 0; background-color: #FFFFFF; border: 1px solid #E2EDED; border-color: #EAF1F1 #E4EDED #DBE7E7 #E4EDED; border-radius: 4px; position: absolute; z-index: 100; display: none; } .select-list-open ul { display: block; } /* Generic Table Styles */ #account-management .account-table-cell { padding: 0.5em; font-size: 0.875em; } #account-management .account-panel.small, #account-management .section-menu + .account-panel { padding: 1.5em; margin-right: 0; width: 100%; } #account-management .section-menu { margin-bottom: 1em; width: 100%; } #account-management .section-menu ul { padding: 0; } #account-management .section-menu li { margin: 0; padding: 0.5em 1em; opacity: 1; } #account-management .info-left, #account-management .info-right { width: 100%; } /* My Vacancies Mobile Styles */ #account-management .jobs-details-header h2 { width: 100%; } #account-management .jobs-details-header .job-details-buttons { width: 100%; text-align: left; float: none; } #account-management .jobs-details-header a.button { margin: 0%; display: inline-block; float: none; } #account-management .jobs-details-header a.button.placement-button { margin: 0% 0% 0% 1em; } /* Directory Files */ #account-management div.directory-files ul li { margin: 0% 0% 4% 4%; width: 48%; } #account-management div.directory-files ul li:nth-of-type(2n+1) { margin-left: 0; } /* My Saved Forms */ #account-management .my-account ul.display_saved_form > li.heading ul > li > div { width: 100%; display: block; } #account-management .my-account ul.display_saved_form > li.heading div.question { padding: 1em 1.375em 0.75em 1.375em; width: 100%; max-width: 100%; font-weight: 700; } #account-management .my-account ul.display_saved_form > li.heading div.answer { padding: 0px 1.375em 1em 1.375em; } /* Inspection Mobile Styles */ #account-management .location-details, #account-management .inspection-details { flex-direction: column; align-items: center; margin-bottom: 0.5rem; } #account-management .location-details > div, #account-management .inspection-details > div { padding: 0.5rem; width: 100%; } #account-management .location-details > div.text-left, #account-management .inspection-details > div.text-left { text-align: center; } #account-management .location-details .location-name { font-weight: 600; } #account-management .inspection-details .inspection-name { font-weight: 600; } } /* 500px Resolution Specific Baheviour */ @media only screen and (min-width: 0px) and (max-width: 500px) { /* Account Dashboard Mobile Styles */ #account-management .section-panel { margin: 0% 0% 1.5em 0%; width: 100%; } #account-management .section-panel:nth-of-type(3n+1) { margin-left: 0%; } }