/* 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 .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 .extra-field-block { } #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.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 { margin: 0% auto; max-width: 800px; } #account-management .section-menu + .account-panel { margin: 0% 13.5% 0% 0%; vertical-align: top; display: inline-block; } #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; } /* Search */ #account-management .account-search { background-color: #F1F1F1; } #account-management .account-search .search-filter { padding: 1em; background-color: #EEEEEE; cursor: pointer; } #account-management .account-search .search-filter .icon { font-weight: 900; float: right; } #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 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 { width: 100%; 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; } /* Account Listing Styles */ #account-management .account-listing { margin: 1.5rem 0; background-color: #F7F7F7; -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-listing-panel { padding: 1rem; 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.25rem; } #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: 1rem 1rem; } #account-management .account-listing.small-list .button { padding: 7px 10px; } #account-management .account-listing.small-list .button span { font-size: 0.8em; } /* General Error Page Styles */ #account-management div.account-panel.general-error { margin: 1.5em auto; padding: 30px 50px 50px 50px; max-width: 575px; background-color: #FFFFFF; text-align: center; } #account-management div.account-panel.general-error p { margin: 0 0 0.5em; } /* Password Reset Styles */ #account-management div.account-panel.password-reset { margin: 1.5em auto; padding: 30px 50px 50px 50px; max-width: 575px; background-color: #FFFFFF; text-align: center; } #account-management div.account-panel.password-reset 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 { margin: 0 auto; padding: 30px 50px 50px 50px; max-width: 450px; background-color: #FFFFFF; text-align: center; } /* Account Register Styles */ #account-management.registration .account-panel { margin: 0 auto; padding: 30px 50px 50px 50px; max-width: 700px; background-color: #FFFFFF; text-align: center; } #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 div.account-panel.generate-password { margin: 1.5em auto; padding: 30px 50px 50px 50px; max-width: 575px; background-color: #FFFFFF; text-align: center; } #account-management div.account-panel.generate-password p { margin: 0 0 0.5em; } #account-management .generate-password h1 { text-align: center; } #account-management .generate-password form { margin: 0 auto; max-width: 400px; width: 100%; } #account-management .generate-password form label { margin-top: 1rem; width: 100%; } #account-management .generate-password form input { margin-top: 0.5rem; width: 100%; } #account-management .generate-password form input:first-of-type { margin-top: 0; } /* 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.5rem; 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 { padding-top: 50px; margin:0.5rem 0; } #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-container { } #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 > .title { } #account-management div.exam_headings > .value { } #account-management div.exam_headings > .value .note { font-size: 1.313rem; } #account-management ul.form_entry_detail { margin: 2.5rem 0% 0% 0%; padding: 0%; list-style: none; } #account-management ul.form_entry_detail li { margin: 0% 0% 2.25rem 0%; } #account-management ul.form_entry_detail li > span { display: block; } #account-management ul.form_entry_detail li > span.form_field { background-color:#e4e4e4; padding:1em; margin: 0% 0% 1rem 0%; font-size: 1.063rem; font-weight: 700; } #account-management ul.form_entry_detail li > span.feedback { margin: 0.75rem 0% 0% 0%; } #account-management ul.form_entry_detail li.user { margin: 0% 0% 2rem 0%; font-size: 1.125rem; } #account-management ul.form_entry_detail li.user > span { display: inline-block; } #account-management ul.form_entry_detail li.user > span.form_field { margin: 0%; font-size: 1rem; font-weight: 400; } #account-management ul.form_entry_detail li.user > span.form_field_value { font-weight: 700; } #account-management ul.form_entry_detail li.user > span.feedback { display: none; } /* 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 { } #account-management div.directory-files p { } #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; } /* 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; } /* 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 div.account-panel.password-reset 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; } } /* 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; } } /* 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%; } }