/* Variables */ /* Reset CSS */ html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; } html { overflow-y: scroll; } body { line-height: 1; color: #15233D; max-width: 1920px; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } nav ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after { content: ''; content: none; } q:before, q:after { content: ''; content: none; } a { margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; background: transparent; text-decoration: none; text-decoration-style: dashed; color: #00bdb7; } a:hover { text-decoration: underline; color: #00bdb7; } /* change colours to suit your needs */ ins { background-color: #ff9; color: #000; text-decoration: none; } /* change colours to suit your needs */ mark { background-color: #ff9; color: #000; font-style: italic; font-weight: bold; } del { text-decoration: line-through; } abbr[title], dfn[title] { border-bottom: 1px dotted; cursor: help; } table { border-collapse: collapse; border-spacing: 0; } .table-hover tbody tr:hover td, .table-hover tbody tr:hover th { background-color: #EEFCFB; --bs-table-hover-color: none; --bs-table-hover-bg: none; } .table-small-text { font-size: 0.8rem; } .table-xsmall-text { font-size: 0.7rem; } thead, tbody, tfoot, tr, td, th { border-color: inherit; border-style: solid; border-width: 0; } th { font-weight: 600; } /* change border colour to suit your needs */ hr { display: block; height: 1px; border: 0; border-top: 1px solid #cccccc; margin: 1em 0; padding: 0; } input, select { vertical-align: middle; } .container { max-width: 1140px; } .plr-0 { padding-left: 0px; padding-right: 0px; } /* FONTS CSS*/ @font-face { font-family: 'Inter'; src: url("../fonts/Inter-Medium.eot"); src: url("../fonts/Inter-Medium.eot?#iefix") format("embedded-opentype"), url("../fonts/Inter-Medium.woff2") format("woff2"), url("../fonts/Inter-Medium.woff") format("woff"), url("../fonts/Inter-Medium.ttf") format("truetype"), url("../fonts/Inter-Medium.svg#Inter-Medium") format("svg"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Inter'; src: url("../fonts/Inter-Black.eot"); src: url("../fonts/Inter-Black.eot?#iefix") format("embedded-opentype"), url("../fonts/Inter-Black.woff2") format("woff2"), url("../fonts/Inter-Black.woff") format("woff"), url("../fonts/Inter-Black.ttf") format("truetype"), url("../fonts/Inter-Black.svg#Inter-Black") format("svg"); font-weight: 900; font-style: normal; font-display: swap; } @font-face { font-family: 'Inter'; src: url("../fonts/Inter-ExtraBold.eot"); src: url("../fonts/Inter-ExtraBold.eot?#iefix") format("embedded-opentype"), url("../fonts/Inter-ExtraBold.woff2") format("woff2"), url("../fonts/Inter-ExtraBold.woff") format("woff"), url("../fonts/Inter-ExtraBold.ttf") format("truetype"), url("../fonts/Inter-ExtraBold.svg#Inter-ExtraBold") format("svg"); font-weight: bold; font-style: normal; font-display: swap; } @font-face { font-family: 'Inter'; src: url("../fonts/Inter-Light.eot"); src: url("../fonts/Inter-Light.eot?#iefix") format("embedded-opentype"), url("../fonts/Inter-Light.woff2") format("woff2"), url("../fonts/Inter-Light.woff") format("woff"), url("../fonts/Inter-Light.ttf") format("truetype"), url("../fonts/Inter-Light.svg#Inter-Light") format("svg"); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: 'Inter'; src: url("../fonts/Inter-Bold.eot"); src: url("../fonts/Inter-Bold.eot?#iefix") format("embedded-opentype"), url("../fonts/Inter-Bold.woff2") format("woff2"), url("../fonts/Inter-Bold.woff") format("woff"), url("../fonts/Inter-Bold.ttf") format("truetype"), url("../fonts/Inter-Bold.svg#Inter-Bold") format("svg"); font-weight: bold; font-style: normal; font-display: swap; } @font-face { font-family: 'Inter'; src: url("../fonts/Inter-Regular.eot"); src: url("../fonts/Inter-Regular.eot?#iefix") format("embedded-opentype"), url("../fonts/Inter-Regular.woff2") format("woff2"), url("../fonts/Inter-Regular.woff") format("woff"), url("../fonts/Inter-Regular.ttf") format("truetype"), url("../fonts/Inter-Regular.svg#Inter-Regular") format("svg"); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'Inter'; src: url("../fonts/Inter-ExtraLight.eot"); src: url("../fonts/Inter-ExtraLight.eot?#iefix") format("embedded-opentype"), url("../fonts/Inter-ExtraLight.woff2") format("woff2"), url("../fonts/Inter-ExtraLight.woff") format("woff"), url("../fonts/Inter-ExtraLight.ttf") format("truetype"), url("../fonts/Inter-ExtraLight.svg#Inter-ExtraLight") format("svg"); font-weight: 200; font-style: normal; font-display: swap; } @font-face { font-family: 'Inter'; src: url("../fonts/Inter-SemiBold.eot"); src: url("../fonts/Inter-SemiBold.eot?#iefix") format("embedded-opentype"), url("../fonts/Inter-SemiBold.woff2") format("woff2"), url("../fonts/Inter-SemiBold.woff") format("woff"), url("../fonts/Inter-SemiBold.ttf") format("truetype"), url("../fonts/Inter-SemiBold.svg#Inter-SemiBold") format("svg"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'Inter'; src: url("../fonts/Inter-Thin.eot"); src: url("../fonts/Inter-Thin.eot?#iefix") format("embedded-opentype"), url("../fonts/Inter-Thin.woff2") format("woff2"), url("../fonts/Inter-Thin.woff") format("woff"), url("../fonts/Inter-Thin.ttf") format("truetype"), url("../fonts/Inter-Thin.svg#Inter-Thin") format("svg"); font-weight: 100; font-style: normal; font-display: swap; } @font-face { font-family: 'Inter'; src: url("../fonts/Inter-Medium.eot"); src: url("../fonts/Inter-Medium.eot?#iefix") format("embedded-opentype"), url("../fonts/Inter-Medium.woff2") format("woff2"), url("../fonts/Inter-Medium.woff") format("woff"), url("../fonts/Inter-Medium.ttf") format("truetype"), url("../fonts/Inter-Medium.svg#Inter-Medium") format("svg"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Inter'; src: url("../fonts/Inter-Black.eot"); src: url("../fonts/Inter-Black.eot?#iefix") format("embedded-opentype"), url("../fonts/Inter-Black.woff2") format("woff2"), url("../fonts/Inter-Black.woff") format("woff"), url("../fonts/Inter-Black.ttf") format("truetype"), url("../fonts/Inter-Black.svg#Inter-Black") format("svg"); font-weight: 900; font-style: normal; font-display: swap; } @font-face { font-family: 'Inter'; src: url("../fonts/Inter-ExtraBold.eot"); src: url("../fonts/Inter-ExtraBold.eot?#iefix") format("embedded-opentype"), url("../fonts/Inter-ExtraBold.woff2") format("woff2"), url("../fonts/Inter-ExtraBold.woff") format("woff"), url("../fonts/Inter-ExtraBold.ttf") format("truetype"), url("../fonts/Inter-ExtraBold.svg#Inter-ExtraBold") format("svg"); font-weight: bold; font-style: normal; font-display: swap; } @font-face { font-family: 'Inter'; src: url("../fonts/Inter-Light.eot"); src: url("../fonts/Inter-Light.eot?#iefix") format("embedded-opentype"), url("../fonts/Inter-Light.woff2") format("woff2"), url("../fonts/Inter-Light.woff") format("woff"), url("../fonts/Inter-Light.ttf") format("truetype"), url("../fonts/Inter-Light.svg#Inter-Light") format("svg"); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: 'Inter'; src: url("../fonts/Inter-Bold.eot"); src: url("../fonts/Inter-Bold.eot?#iefix") format("embedded-opentype"), url("../fonts/Inter-Bold.woff2") format("woff2"), url("../fonts/Inter-Bold.woff") format("woff"), url("../fonts/Inter-Bold.ttf") format("truetype"), url("../fonts/Inter-Bold.svg#Inter-Bold") format("svg"); font-weight: bold; font-style: normal; font-display: swap; } @font-face { font-family: 'Inter'; src: url("../fonts/Inter-Regular.eot"); src: url("../fonts/Inter-Regular.eot?#iefix") format("embedded-opentype"), url("../fonts/Inter-Regular.woff2") format("woff2"), url("../fonts/Inter-Regular.woff") format("woff"), url("../fonts/Inter-Regular.ttf") format("truetype"), url("../fonts/Inter-Regular.svg#Inter-Regular") format("svg"); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'Inter'; src: url("../fonts/Inter-ExtraLight.eot"); src: url("../fonts/Inter-ExtraLight.eot?#iefix") format("embedded-opentype"), url("../fonts/Inter-ExtraLight.woff2") format("woff2"), url("../fonts/Inter-ExtraLight.woff") format("woff"), url("../fonts/Inter-ExtraLight.ttf") format("truetype"), url("../fonts/Inter-ExtraLight.svg#Inter-ExtraLight") format("svg"); font-weight: 200; font-style: normal; font-display: swap; } @font-face { font-family: 'Inter'; src: url("../fonts/Inter-SemiBold.eot"); src: url("../fonts/Inter-SemiBold.eot?#iefix") format("embedded-opentype"), url("../fonts/Inter-SemiBold.woff2") format("woff2"), url("../fonts/Inter-SemiBold.woff") format("woff"), url("../fonts/Inter-SemiBold.ttf") format("truetype"), url("../fonts/Inter-SemiBold.svg#Inter-SemiBold") format("svg"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'Inter'; src: url("../fonts/Inter-Thin.eot"); src: url("../fonts/Inter-Thin.eot?#iefix") format("embedded-opentype"), url("../fonts/Inter-Thin.woff2") format("woff2"), url("../fonts/Inter-Thin.woff") format("woff"), url("../fonts/Inter-Thin.ttf") format("truetype"), url("../fonts/Inter-Thin.svg#Inter-Thin") format("svg"); font-weight: 100; font-style: normal; font-display: swap; } /* General CSS */ body { font-family: 'Inter'; } h1 { font-style: normal; font-weight: 700; font-size: 28px; line-height: 120%; margin: 10px 0px 10px 0px; } h2 { font-style: normal; font-weight: 700; font-size: 24px; line-height: 120%; margin: 10px 0px 10px 0px; color: #3EA9A6; } h3 { font-style: normal; font-weight: 700; font-size: 24px; line-height: 120%; margin: 10px 0px 10px 0px; } h4 { font-style: normal; font-weight: 700; font-size: 16px; line-height: 120%; margin: 6px 0px 6px 0px; color: #3EA9A6; } h5 { font-style: normal; font-weight: 600; font-size: 16px; } button { outline: none; background: none; -webkit-box-shadow: none; box-shadow: none; border: none; padding: 0px; } .btn.disabled, .btn:disabled, fieldset:disabled { opacity: .9; } .btn-primary { background: #51DCD8; padding: 14px 16px; display: inline-block; border: 1px solid #51DCD8; border-radius: 4px; font-size: 14px; line-height: 14px; text-align: center; color: #000000; font-weight: bold; } .btn-primary:disabled { background: #51DCD8; border: 1px solid #51DCD8; color: #000000; font-weight: bold; } .btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open > .dropdown-toggle.btn-primary { color: #000; background-color: #7CE5E2; border-color: #7CE5E2; box-shadow: none; } .btn-primary:active:focus { box-shadow: none; } .btn-outline-primary { background: #fff; padding: 14px 16px; display: inline-block; border: 1px solid #4ACCC6; border-radius: 4px; font-size: 14px; line-height: 14px; text-align: center; color: #000000; font-weight: bold; } .btn-outline-primary:hover, .btn-outline-primary:focus, .btn-outline-primary:active, .btn-outline-primary.active, .open > .dropdown-toggle.btn-outline-primary { background-color: #51DCD8; border-color: #51DCD8; color: #000000; box-shadow: none; } .btn-outline-primary:active:focus { box-shadow: none; } .btn-secondary { background: #6c757d; padding: 14px 16px; display: inline-block; border: 1px solid #6c757d; border-radius: 4px; font-size: 14px; line-height: 14px; text-align: center; color: #ffffff; font-weight: 400; } .btn-secondary:hover, .btn-secondary:focus, .btn-secondary:active, .btn-secondary.active, .open > .dropdown-toggle.btn-secondary { background-color: #565e64; border-color: #565e64; box-shadow: none; } .btn-secondary:focus, .btn-secondary:active:focus { box-shadow: none; } .btn-input-group { background: #fff; /*padding: 14px 16px;*/ display: inline-block; border: 1px solid #BEC5D4; border-radius: 4px; font-size: 14px; line-height: 14px; text-align: center; color: #ffffff; font-weight: 400; box-shadow: 0px 0px 2px #a1a1a1; } .btn-input-group:hover, .btn-input-group:focus, .btn-input-group:active, .btn-input-group.active, .open > .dropdown-toggle.btn-input-group { background-color: #dddddd; border-color: #BEC5D4; box-shadow: 0px 0px 2px #a1a1a1; } .btn-input-group:focus, .btn-input-group:active:focus { box-shadow: 0px 0px 2px #a1a1a1; } .btn-danger { background: #FE867B; padding: 14px 16px; display: inline-block; border: 1px solid #FE867B; border-radius: 4px; font-size: 14px; line-height: 14px; text-align: center; color: #ffffff; font-weight: 700; } .btn-danger:hover, .btn-danger:focus, .btn-danger:active, .btn-danger.active, .open > .dropdown-toggle.btn-danger { color: #fff; background-color: #F9695C; border-color: #F9695C; } .btn-danger:focus, .btn-danger:active:focus { box-shadow: none; } .btn-outline-danger { background: #fff; padding: 14px 16px; display: inline-block; border: 1px solid #F9695C; border-radius: 4px; font-size: 14px; line-height: 14px; text-align: center; color: #000000; font-weight: bold; } .btn-outline-danger:hover, .btn-outline-danger:focus, .btn-outline-danger:active, .btn-outline-danger.active, .open > .dropdown-toggle.btn-outline-danger { background-color: #F9695C; border-color: #F9695C; color: #fff; box-shadow: none; } .btn-outline-danger:active:focus { box-shadow: none; } .btn-with-icon { padding: 8px 16px 8px 16px; display: inline-block; border-radius: 4px; font-size: 14px; line-height: 14px; text-align: center; color: #000000; font-weight: bold; } .btn-with-icon .btn-with-icon-image { float: left; padding: 1px 0px 0px 0px; } .btn-with-icon .btn-with-icon-text { float: left; padding: 6px 0px 0px 10px; } .btn-with-icon:active:focus { box-shadow: none; } .btn-with-icon-compact { padding: 8px 16px 8px 16px; display: inline-block; border-radius: 4px; font-size: 14px; line-height: 4px; text-align: center; color: #000000; font-weight: bold; } .btn-with-icon-compact .btn-with-icon-compact-image { float: left; padding: 0px 0px 0px 0px; } .btn-with-icon-compact .btn-with-icon-compact-text { float: left; padding: 5px 0px 0px 6px; } .btn-with-icon-compact:active:focus { box-shadow: none; } .btn-with-icon-green { background: #E6FAF0; border: 1px solid #51DC99; color: #000000; } .btn-with-icon-green:hover, .btn-with-icon-green:focus, .btn-with-icon-green:active, .btn-with-icon-green.active, .open > .dropdown-toggle.btn-with-icon-green { color: #000; background-color: #CBF5E1; border-color: #51DC99; box-shadow: none; } .btn-with-icon-amber { background: #FBF7E2; border: 1px solid #E6CA34; color: #000000; } .btn-with-icon-amber:hover, .btn-with-icon-amber:focus, .btn-with-icon-amber:active, .btn-with-icon-amber.active, .open > .dropdown-toggle.btn-with-icon-amber { color: #000; background-color: #F8F1CB; border-color: #E6CA34; box-shadow: none; } .btn-with-icon-red { background: #FFEFED; border: 1px solid #FE867B; color: #000000; } .btn-with-icon-red:hover, .btn-with-icon-red:focus, .btn-with-icon-red:active, .btn-with-icon-red.active, .open > .dropdown-toggle.btn-with-icon-red { color: #000; background-color: #FFE7E5; border-color: #FE867B; box-shadow: none; } .btn-send-law-firm-message { padding: 2px 8px 2px 8px; display: inline-block; border-radius: 4px; font-size: 14px; line-height: 14px; text-align: center; color: #000000; font-weight: 600; } .btn-send-law-firm-message .btn-send-law-firm-message-image { float: left; padding: 1px 0px 0px 0px; } .btn-send-law-firm-message .btn-send-law-firm-message-text { float: left; padding: 1px 0px 0px 5px; } .btn-send-law-firm-message:active:focus { box-shadow: none; } .btn-compact { padding: .4rem .4rem; font-weight: 600; font-size: .875rem; border-radius: .2rem; } .btn-compact-120 { padding: .4rem .4rem; font-weight: 600; font-size: .875rem; border-radius: .2rem; width: 120px; } .btn-full-width { width: 100%; } .btn-month { background: #fff; padding: 14px 16px; display: inline-block; border: 1px solid #4ACCC6; border-radius: 4px; font-size: 14px; line-height: 14px; text-align: center; color: #000000; font-weight: bold; width: 75px; } .btn-month:hover, .btn-month:focus, .btn-month:active, .btn-month.active, .open > .dropdown-toggle.btn-month { background-color: #51DCD8; border-color: #51DCD8; color: #000000; box-shadow: none; } .btn-month:active:focus { box-shadow: none; } .btn-month-selected { background-color: #51DCD8; border-color: #51DCD8; color: #000000; box-shadow: none; } /* Button with loading dot */ .btn-with-loading { position: relative; } .btn-with-loading.working-faded:disabled { opacity: .5; } .btn-loader { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: none; } .btn-loader.show { display: block; } .btn-text.invisible { visibility: hidden; } input[type=file]::-webkit-file-upload-button { padding: .4rem .4rem; font-weight: 600; font-size: .875rem; border-radius: .2rem; background: #fff; display: inline-block; border: 1px solid #4ACCC6; border-radius: 4px; text-align: center; color: #000000; font-weight: bold; } input[type=file]::-webkit-file-upload-button:hover { cursor: pointer; background-color: #51DCD8; border-color: #51DCD8; color: #000000; box-shadow: none; } input[type=file]::file-selector-button { padding: .4rem .4rem; font-weight: 600; font-size: .875rem; border-radius: .2rem; background: #fff; display: inline-block; border: 1px solid #4ACCC6; border-radius: 4px; text-align: center; color: #000000; font-weight: bold; } input[type=file]::file-selector-button:hover { cursor: pointer; background-color: #51DCD8; border-color: #51DCD8; color: #000000; box-shadow: none; } .visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } .clickable { cursor: pointer; } .standard-link { text-decoration: none; color: #00bdb7; } .standard-link:hover { text-decoration: underline; color: #00bdb7; } .bg-rello-navy { background-color: #15233D; } .rello-text-small { font-size: 0.8rem; } .rello-text-amber { color: #E6CA34; } .rello-text-blue { color: #4ACCC6; } .rello-text-green { color: #51DC99; } .rello-text-grey { color: #BEC5D4; } .rello-text-red { color: #FE867B; } .rello-font-weight-500 { font-weight: 500; } .rello-font-weight-600 { font-weight: 600; } .error-message { color: #ff0000; } .warning-block-wrapper { background: #FBF7E2; border: 1px solid #E6CA34; color: #000000; height: 30px; padding: 5px 10px 5px 5px; } .warning-block-icon { float: left; height: 18px; width: 18px; } .warning-block-text { float: left; font-size: 14px; margin-left: 8px; margin-top: 2px; color: #333333; } .warning-message-wrapper { background: #FBF7E2; border: 1px solid #E6CA34; color: #000000; padding: 5px 10px 5px 5px; width: fit-content; } .warning-message-text { font-size: 14px; margin-left: 5px; margin-top: 1px; color: #333333; line-height: 18px; } .action-buttons { text-align: right; } .col-form-label { font-weight: 600; } .col-form-value { padding-top: calc(0.375rem + 1px); padding-bottom: calc(0.375rem + 1px); margin-bottom: 0; font-size: inherit; line-height: 1.5; } .general-information { line-height: 1.5rem; } .general-item-list { margin-top: 5px; } .general-item-list li { margin-left: 30px; padding: 5px 0px 5px 0px; } .modal-content-wrapper-medium { width: 400px; } .modal-content-wrapper-large { width: 600px; } .modal-content-wrapper-xlarge { width: 800px; } .modal-content-wrapper-xxlarge { width: 1000px; } .modal-content-wrapper-scrollable { overflow-y: auto; max-height: 750px; padding-right: 12px; } /* Width */ .modal-content-wrapper-scrollable::-webkit-scrollbar { width: 10px; } /* Track */ .modal-content-wrapper-scrollable::-webkit-scrollbar-track { background: #f1f1f1; } /* Handle */ .modal-content-wrapper-scrollable::-webkit-scrollbar-thumb { background: #4ACCC6; } /* Handle on hover */ .modal-content-wrapper-scrollable::-webkit-scrollbar-thumb:hover { background: #22ADA1; } .modal-content-wrapper-large-scrollable { min-width: 600px; max-width: 800px; overflow-y: auto; max-height: 750px; padding-right: 12px; } /* Width */ .modal-content-wrapper-large-scrollable::-webkit-scrollbar { width: 10px; } /* Track */ .modal-content-wrapper-large-scrollable::-webkit-scrollbar-track { background: #f1f1f1; } /* Handle */ .modal-content-wrapper-large-scrollable::-webkit-scrollbar-thumb { background: #4ACCC6; } /* Handle on hover */ .modal-content-wrapper-large-scrollable::-webkit-scrollbar-thumb:hover { background: #22ADA1; } .modal-content-list { margin-top: 5px; } .modal-content-list li { margin-left: 30px; padding: 5px 0px 5px 0px; } .modal-content-list-small { font-size: 0.8rem; } .progress-bar-container { border-radius: 8px; background-color: #f1f1f1; } .progress-bar-completed { background-color: #51DC99; padding: 0.5em 16px 0.5em 5px; border-radius: 8px; text-align: center !important; } .progress-bar-not-started { background-color: #f1f1f1; padding: 0.5em 16px 0.5em 5px; border-radius: 8px; text-align: left !important; } .icon-light-grey { filter: invert(87%) sepia(15%) saturate(209%) hue-rotate(183deg) brightness(90%) contrast(88%); } .icon-green { filter: invert(59%) sepia(65%) saturate(369%) hue-rotate(129deg) brightness(86%) contrast(89%); } .icon-copy { filter: invert(59%) sepia(65%) saturate(369%) hue-rotate(129deg) brightness(86%) contrast(89%); width: 16px; vertical-align: bottom; } .icon-edit { filter: invert(59%) sepia(65%) saturate(369%) hue-rotate(129deg) brightness(86%) contrast(89%); width: 16px; vertical-align: bottom; } .icon-upload { filter: invert(59%) sepia(65%) saturate(369%) hue-rotate(129deg) brightness(86%) contrast(89%); width: 16px; vertical-align: bottom; } .tooltip-help-container { font-size: 14px; padding: 2px; text-align: left; } .tooltip-help-container p { line-height: 1.0rem; padding: 5px 0px 5px 0px; } .tooltip-help-title { font-weight: 700; } .rbz-drop-zone { cursor: pointer; } /************************ HEADER ********************************/ .header-container { padding-top: 1em; padding-left: 1em; padding-right: 1em; padding-bottom: 0.5em; background-color: #15233D; color: #ffffff; } .header-transaction { text-align: center; line-height: 1.35; } .header-transaction .col-left { width: 75px; float: left; margin: 0px 10px 0px 10px; } .header-transaction .col-left .law-firm-logo { width: 75px; height: 75px; border-radius: 100%; } .header-transaction .col-middle { float:left; display: flex; flex-direction: column; align-items: center; /* centers all rows horizontally */ text-align: center; /* centers text */ } .header-transaction .col-middle .law-firm-name { padding-top: 0px; font-size: 18px; font-weight: 600; display: flex; align-items: center; /* vertical alignment */ justify-content: left; /* center the whole row */ gap: 6px; /* space between phone and button */ margin: 0px 0; /* optional spacing */ } .header-transaction .col-middle .law-firm-contact { display: flex; align-items: center; /* vertical alignment */ justify-content: left; /* center the whole row */ gap: 12px; /* space between phone and button */ margin: 4px 0; /* optional spacing */ } .header-transaction .col-middle .law-firm-contact .law-firm-telephone { display: flex; align-items: center; /* vertical centering */ gap: 6px; /* optional spacing between icon and text */ } .header-transaction .col-middle .law-firm-contact .law-firm-telephone img { height: 16px; width: 16px; filter: invert(71%) sepia(52%) saturate(437%) hue-rotate(129deg) brightness(98%) contrast(90%); } .header-transaction .col-middle .law-firm-contact .law-firm-telephone a { font-weight: 600; line-height: 1; } .header-transaction .col-middle .law-firm-contact .law-firm-telephone a:hover { color: #7CE5E2; } .header-transaction .col-middle .law-firm-contact .law-firm-send-message { margin-left: 10px; } .header-transaction .col-middle .property { font-size: 14px; color: #BEC5D4; display: flex; align-items: center; /* vertical alignment */ justify-content: left; /* center the whole row */ gap: 12px; /* space between phone and button */ margin: 0px 0; /* optional spacing */ } .header-transaction .col-right { width: 75px; float: left; } .attach-document-container { position: absolute; top: 46px; right: 0px; cursor: pointer; } .attach-document-container .attach-document-button { background-color: #51DCD8; height: 45px; width: 45px; border-radius: 10px; border: 2px solid #51DCD8; padding: 5px; -webkit-box-shadow: 0px 3px 8px rgb(0 0 0 / 15%); box-shadow: 0px 3px 8px rgb(0 0 0 / 15%); } .attach-document-container .attach-document-button:hover { background-color: #7CE5E2; border-color: #7CE5E2; } .attach-document-container .attach-document-button img { filter: invert(11%) sepia(8%) saturate(5966%) hue-rotate(184deg) brightness(92%) contrast(94%); width: 32px; } .send-message-container { position: absolute; top: 46px; left: 0px; cursor: pointer; display: none; } .send-message-container .send-message-button { background-color: #51DCD8; height: 45px; width: 45px; border-radius: 10px; border: 2px solid #51DCD8; padding: 5px; -webkit-box-shadow: 0px 3px 8px rgb(0 0 0 / 15%); box-shadow: 0px 3px 8px rgb(0 0 0 / 15%); } .send-message-container .send-message-button:hover { background-color: #7CE5E2; border-color: #7CE5E2; } .send-message-container .send-message-button img { filter: invert(11%) sepia(8%) saturate(5966%) hue-rotate(184deg) brightness(92%) contrast(94%); width: 32px; } /*.header-law-firm { font-size: 18px; font-weight: 600; } .header-law-left { width: 50px; } .header-law-firm-logo { width: 50px; height: 50px; border-radius: 100%; } .header-law-right { width: 50px; } .header-property { font-size: 14px; color: #BEC5D4; }*/ /************************ NAVBAR ********************************/ .navbar { height: 60px; display: flex; justify-content: center; align-items: center; padding: 0px 0px 0px 0px; } .nav-container { display: flex; gap: 60px; } .nav-item { display: flex; flex-direction: column; align-items: center; text-decoration: none; color: #BEC5D4; font-size: 13px; font-weight: 500; padding: 2px 12px 4px 12px; } /*.nav-item { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 80px; height: 52px; color: #BEC5D4; text-decoration: none; font-size: 11px; font-weight: 600; border-radius: 999px; transition: all .2s ease; }*/ .nav-item svg { width: 26px; height: 26px; margin-bottom: 6px; fill: currentColor; } .nav-item:hover { color: #51DCD8; fill: #51DCD8; text-decoration: none !important; } .nav-item.active { color: #51DCD8; border-bottom: solid 2px #51DCD8; /*background: #4ACCC6; color: #15233D;*/ } .nav-item.active svg { transform: scale(1.1); } /************************UNAUTHENTICATED-VIEW STYLING ********************************/ .unauthenticated-view-wrapper { height: 90vh; } .unauthenticated-view-wrapper .unauthenticated-header { margin: 24px 42px; } .unauthenticated-view-wrapper .unauthenticated-header .logo { display: block; margin: 0; } .unauthenticated-view-wrapper .unauthenticated-view { margin: auto; margin-top: 115px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; line-height: 28px; padding: 0px; max-width: 490px; } .unauthenticated-view-wrapper .unauthenticated-view .main-heading { text-align: center; font-style: normal; font-weight: 700; font-size: 28px; } .unauthenticated-view-wrapper .unauthenticated-view .unauthenticated-strapline { text-align: center; margin: 25px 0; } .unauthenticated-view-wrapper .unauthenticated-view .entry .entry-item { margin-bottom: 25px; } .unauthenticated-view-wrapper .unauthenticated-view .entry .entry-item label { font-weight: 700; font-size: 12px; } .unauthenticated-view-wrapper .unauthenticated-view .entry .entry-item .input-wrapper { margin: 0; } .unauthenticated-view-wrapper .unauthenticated-view .entry .entry-item .input-wrapper .input-rello { padding: 13px 16px; } .unauthenticated-view-wrapper label { font-weight: 700; font-size: 12px; } .unauthenticated-view-wrapper .unauthenticated-view .rello-btn { margin: 35px 0; width: 100%; } .unauthenticated-view-wrapper .unauthenticated-view .bottom-text { color: #4ACCC6; font-size: 16px; } .unauthenticated-view-wrapper .unauthenticated-view .unauthenticated-button { text-align: center; } .unauthenticated-view-wrapper .unauthenticated-view .unauthenticated-button .btn-primary { width: 300px; } /***************** CIRCULAR PROGRESS RING STYLING **************/ .circular-progress { --size: 250px; --half-size: calc(var(--size) / 2); --stroke-width: 20px; --radius: calc((var(--size) - var(--stroke-width)) / 2); --circumference: calc(var(--radius) * pi * 2); --dash: calc((var(--progress) * var(--circumference)) / 100); } .circular-progress circle { cx: var(--half-size); cy: var(--half-size); r: var(--radius); stroke-width: var(--stroke-width); fill: none; stroke-linecap: round; } .circular-progress circle.bg { stroke: #ddd; } .circular-progress circle.fg { transform: rotate(-90deg); transform-origin: var(--half-size) var(--half-size); stroke-dasharray: var(--dash) calc(var(--circumference) - var(--dash)); transition: stroke-dasharray 0.3s linear 0s; stroke: #51DC99; } /***************** RADIO BUTTON STYLING **************/ .rello-radio-group { position: relative; display: flex; flex-wrap: wrap; align-items: stretch; margin-top: 4px; float: left; } .rello-radio { position: relative; display: block; margin-right: 10px; min-width: 200px; } .rello-radio-small { min-width: 100px; } .rello-radio-medium { min-width: 180px; } .rello-radio-large { min-width: 250px; } .rello-radio-115 { min-width: 115px; } .rello-radio label { display: block; background: #D9DDE6; color: #000; border-radius: 5px; padding: 10px 40px 10px 20px; border: 2px solid #BEC5D4; margin-bottom: 5px; cursor: pointer; } .rello-radio label:after, .rello-radio label:before { content: ""; position: absolute; right: 11px; top: 11px; width: 20px; height: 20px; border-radius: 10px; background: #BEC5D4; } .rello-radio label:before { background: transparent; /*transition: 0.1s width cubic-bezier(0.075, 0.82, 0.165, 1) 0s, 0.3s height cubic-bezier(0.075, 0.82, 0.165, 2) 0.1s;*/ z-index: 2; overflow: hidden; background-repeat: no-repeat; background-size: 10px; background-position: center; width: 0; height: 0; background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNS4zIDEzLjIiPiAgPHBhdGggZmlsbD0iI2ZmZiIgZD0iTTE0LjcuOGwtLjQtLjRhMS43IDEuNyAwIDAgMC0yLjMuMUw1LjIgOC4yIDMgNi40YTEuNyAxLjcgMCAwIDAtMi4zLjFMLjQgN2ExLjcgMS43IDAgMCAwIC4xIDIuM2wzLjggMy41YTEuNyAxLjcgMCAwIDAgMi40LS4xTDE1IDMuMWExLjcgMS43IDAgMCAwLS4yLTIuM3oiIGRhdGEtbmFtZT0iUGZhZCA0Ii8+PC9zdmc+); } .rello-radio input[type="radio"] { display: none; position: absolute; width: 100%; appearance: none; } .rello-radio input[type="radio"]:checked + label { background: #51DCD8; border-color: #4ACCC6; } .rello-radio input[type="radio"]:checked + label:after { background: #15233D; } .rello-radio input[type="radio"]:checked + label:before { width: 20px; height: 20px; } .rello-radio-reduced { position: relative; display: block; margin-right: 10px; } .rello-radio-reduced label { display: block; background: #D9DDE6; color: #000; border-radius: 5px; padding: 7px 7px; border: 2px solid #BEC5D4; margin-bottom: 5px; cursor: pointer; font-weight: 400; font-size: 14px; } .rello-radio-reduced label:after, .rello-radio-reduced label:before { content: ""; position: absolute; right: 9px; top: 7px; width: 17px; height: 17px; border-radius: 10px; background: #BEC5D4; } .rello-radio-reduced label:before { background: transparent; /*transition: 0.1s width cubic-bezier(0.075, 0.82, 0.165, 1) 0s, 0.3s height cubic-bezier(0.075, 0.82, 0.165, 2) 0.1s;*/ z-index: 2; overflow: hidden; background-repeat: no-repeat; background-size: 9px; background-position: center; width: 0; height: 0; background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNS4zIDEzLjIiPiAgPHBhdGggZmlsbD0iI2ZmZiIgZD0iTTE0LjcuOGwtLjQtLjRhMS43IDEuNyAwIDAgMC0yLjMuMUw1LjIgOC4yIDMgNi40YTEuNyAxLjcgMCAwIDAtMi4zLjFMLjQgN2ExLjcgMS43IDAgMCAwIC4xIDIuM2wzLjggMy41YTEuNyAxLjcgMCAwIDAgMi40LS4xTDE1IDMuMWExLjcgMS43IDAgMCAwLS4yLTIuM3oiIGRhdGEtbmFtZT0iUGZhZCA0Ii8+PC9zdmc+); } .rello-radio-reduced input[type="radio"] { display: none; position: absolute; width: 100%; appearance: none; } .rello-radio-reduced input[type="radio"]:checked + label:before { width: 17px; height: 17px; } .rello-radio-reduced input[type="radio"]:checked + label { background: #51DCD8; border-color: #4ACCC6; } .rello-radio-reduced input[type="radio"]:checked + label:after { background: #15233D; } .rello-radio-reduced input[type="radio"]:checked + label:before { width: 17px; height: 17px; } /***************** CHECKBOX STYLING **************/ .basic-checkbox-wrapper { float: left; margin-right: 8px; } .checkbox-and-label-wrapper { } .checkbox-and-label-wrapper .form-check-input { float: left; margin-right: 10px; } .checkbox-and-label-wrapper .form-check-label { float: left; } .rello-checkbox-group { position: relative; display: flex; flex-wrap: wrap; align-items: stretch; margin-top: 4px; float: left; } .rello-checkbox { position: relative; display: block; margin-right: 10px; min-width: 200px; } .rello-checkbox-small { min-width: 160px; } .rello-checkbox-medium { min-width: 250px; } .rello-checkbox-large { min-width: 300px; } .rello-checkbox label { display: block; background: #D9DDE6; color: #000; border-radius: 5px; padding: 10px 40px 10px 20px; border: 2px solid #BEC5D4; margin-bottom: 5px; cursor: pointer; } .rello-checkbox label:after, .rello-checkbox label:before { content: ""; position: absolute; right: 11px; top: 11px; width: 20px; height: 20px; background: #BEC5D4; } .rello-checkbox label:before { background: transparent; /*transition: 0.1s width cubic-bezier(0.075, 0.82, 0.165, 1) 0s, 0.3s height cubic-bezier(0.075, 0.82, 0.165, 2) 0.1s;*/ z-index: 2; overflow: hidden; background-repeat: no-repeat; background-size: 10px; background-position: center; width: 0; height: 0; background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNS4zIDEzLjIiPiAgPHBhdGggZmlsbD0iI2ZmZiIgZD0iTTE0LjcuOGwtLjQtLjRhMS43IDEuNyAwIDAgMC0yLjMuMUw1LjIgOC4yIDMgNi40YTEuNyAxLjcgMCAwIDAtMi4zLjFMLjQgN2ExLjcgMS43IDAgMCAwIC4xIDIuM2wzLjggMy41YTEuNyAxLjcgMCAwIDAgMi40LS4xTDE1IDMuMWExLjcgMS43IDAgMCAwLS4yLTIuM3oiIGRhdGEtbmFtZT0iUGZhZCA0Ii8+PC9zdmc+); } .rello-checkbox input[type="checkbox"] { display: none; position: absolute; width: 100%; appearance: none; } .rello-checkbox input[type="checkbox"]:checked + label { background: #51DCD8; border-color: #4ACCC6; } .rello-checkbox input[type="checkbox"]:checked + label:after { background: #15233D; } .rello-checkbox input[type="checkbox"]:checked + label:before { width: 20px; height: 20px; } .rello-checkbox-narrow { position: relative; display: block; margin-right: 10px; } .rello-checkbox-narrow label { display: block; background: #D9DDE6; color: #000; border-radius: 5px; padding: 5px 10px; border: 2px solid #BEC5D4; margin-bottom: 5px; cursor: pointer; font-size: 0.8rem; } .rello-checkbox-narrow label:after, .rello-checkbox-narrow label:before { content: ""; position: absolute; right: 11px; top: 6px; width: 15px; height: 15px; background: #BEC5D4; } .rello-checkbox-narrow label:before { background: transparent; /*transition: 0.1s width cubic-bezier(0.075, 0.82, 0.165, 1) 0s, 0.3s height cubic-bezier(0.075, 0.82, 0.165, 2) 0.1s;*/ z-index: 2; overflow: hidden; background-repeat: no-repeat; background-size: 10px; background-position: center; width: 0; height: 0; background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNS4zIDEzLjIiPiAgPHBhdGggZmlsbD0iI2ZmZiIgZD0iTTE0LjcuOGwtLjQtLjRhMS43IDEuNyAwIDAgMC0yLjMuMUw1LjIgOC4yIDMgNi40YTEuNyAxLjcgMCAwIDAtMi4zLjFMLjQgN2ExLjcgMS43IDAgMCAwIC4xIDIuM2wzLjggMy41YTEuNyAxLjcgMCAwIDAgMi40LS4xTDE1IDMuMWExLjcgMS43IDAgMCAwLS4yLTIuM3oiIGRhdGEtbmFtZT0iUGZhZCA0Ii8+PC9zdmc+); } .rello-checkbox-narrow input[type="checkbox"] { display: none; position: absolute; width: 100%; appearance: none; } .rello-checkbox-narrow input[type="checkbox"]:checked + label { background: #51DCD8; border-color: #4ACCC6; } .rello-checkbox-narrow input[type="checkbox"]:checked + label:after { background: #15233D; } .rello-checkbox-narrow input[type="checkbox"]:checked + label:before { width: 15px; height: 15px; } /***************** GENERAL PAGE STYLING **************/ .logo { /*margin-bottom: 30px;*/ } .logo-authenticated { /*margin-bottom: 30px;*/ cursor: pointer; } .nav-link { color: #BEC5D4; padding: 0.5rem 0rem; } .nav-link a { text-decoration: none; } .nav-link:hover { color: #ffffff; text-decoration: none; } .nav-link:focus { color: #ffffff; text-decoration: none; } /***** COOKIE BANNER *****/ .cookie-banner-wrapper { border: 1px solid #00bdb7; padding: 10px; margin-top: 10px; width: 100%; } .cookie-banner-text { padding: 0px 0px 0px 0px; float: left; } .cookie-banner-text p { line-height: 20px; } .cookie-banner-buttons { float: right; } .cookie-information { font-size: 0.8rem; } .cookie-information ul { padding-left: 20px; } .cookie-information ul li { padding-top: 10px; padding-left: 0px; } /***** MAIN CONTENT *****/ .main-content { padding: 5px 5px 20px 5px; } .main-content .header-wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } /*.main-content .inner-content {*/ /*margin-top: -40px; margin-left: 10px; margin-right: 10px;*/ /*}*/ .page-header { text-align: center !important; } .inner-container { max-width: 700px; margin: 0 auto; padding: 2rem 1rem; } .content-card { background-color: #f1f4f9; border-radius: 1rem; padding: 2rem; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); } .content-card p { line-height: 1.6; margin-bottom: 1rem; } .standard-page-container { display: flex; justify-content: center; } .standard-page-inner-content { width: 800px; /*border: 1px solid green;*/ } .desktop-header { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .desktop-header-fixed { padding: 5px 20px 0px 0px; position: absolute; width: 100%; } .desktop-header-action-buttons { margin-top: 10px; } .mobile-header { display: none; } .mobile-only { display: none !important; } .back-link-wrapper { top: 15px; position: absolute; z-index: 1; } .back-link { cursor: pointer; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: relative; } .back-link span { font-weight: 700; font-size: 16px; min-height: 24px; line-height: 24px; margin-left: 10px; color: #000; text-decoration: none; } .back-link-wrapper-mobile { top: 10px; left: 10px; } .profile-name { font-size: 16px; line-height: 16px; margin-right: 8px; } .profile-name span { font-weight: 700; } .input-label { font-weight: 700; font-size: 12px; } .input-label-disabled { color: #BEC5D4; } .input-rello { background: #FFFFFF; border: 1px solid #BEC5D4; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-box-shadow: 0px 0px 2px #A1A1A1; box-shadow: 0px 0px 2px #A1A1A1; border-radius: 4px; height: 46px; width: 100%; padding: 13px 39px; padding-right: 0px; color: #192835; } .input-rello-xsmall { max-width: 30px; } .input-rello-small { max-width: 70px; } .input-rello-percentage { max-width: 80px; } .input-rello-100 { max-width: 150px; } .input-rello-150 { max-width: 150px; } .input-rello-400 { width: 400px; } .input-rello-medium { max-width: 250px; } .input-rello-large { max-width: 400px; } .input-rello-xlarge { max-width: 600px; } .input-rello-select { height: 46px; } .input-rello-textarea { height: auto; padding: 13px 10px; } .input-date-picker { padding-left: 16px; padding-right: 10px; } .input-date-picker-small { padding-left: 16px; padding-right: 10px; min-width: 170px; width: 170px; } .input-rello-disabled { color: #BEC5D4; } .no-icon { padding-left: 16px; } input.input-rello[type="search"] { outline-offset: 0px; padding-left: 45px; padding-right: 8px; } .input-wrapper { position: relative; margin-top: 18px; } .input-wrapper .input-icon { position: absolute; left: 14px; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .input-wrapper.no-icon input { padding-left: 16px; } .input-wrapper-checkbox { margin-top: 12px; float: left; } .input-wrapper-checkbox-label { margin-top: 12px; float: left; padding-left: 10px; } .input-wrapper-narrow-checkbox { margin-top: 5px; float: left; } .input-wrapper-narrow-checkbox-label { margin-top: 6px; float: left; padding-left: 10px; } .input-wrapper-narrow { margin-top: 5px; } .input-wrapper-none { margin-top: 0px; } .input-wrapper-search { margin-top: 5px; min-width: 60%; float: left; } .input-wrapper-search.input-wrapper-search-wide { min-width: 90%; } .input-wrapper-address { max-width: 600px; } .input-movable-placeholder { position: relative; } .input-movable-placeholder input { background: #FFFFFF; border: 1px solid #BEC5D4; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-box-shadow: 0px 0px 2px #A1A1A1; box-shadow: 0px 0px 2px #A1A1A1; border-radius: 4px; height: 46px; width: 100%; padding: 18px 39px 8px 39px; padding-right: 0px; color: #192835; } .input-movable-placeholder label { position: absolute; left: 39px; top: 0; color: #BEC5D4; display: flex; align-items: center; cursor: text; transition: .3s ease-in-out; } .input-movable-placeholder input { font-size: 1em; width: 100%; height: 46px; } .input-movable-placeholder label { font-size: 1em; width: 100%; height: 46px; color: #BEC5D4; } .input-movable-placeholder input:focus + label, .input-movable-placeholder input:valid + label { color: #15233D; font-size: .7em; top: -13px; pointer-events: none; } .rello-tooltip-wrapper { float: left; padding-left: 10px; padding-top: 5px; } .rello-tooltip-wrapper-right { float: right; padding-left: 10px; padding-top: 0px; padding-bottom: 5px; } .form-check-input[type=checkbox] { margin-top: 3px; } .form-check-input:checked { background-color: #ffffff; border-color: #000000; } .form-check-input:focus { border-color: #000000; outline: 0; box-shadow: 0 0 0 0.25rem rgb(81 220 216 / 25%); } .form-check-label { line-height: 20px; } input[type="checkbox"] { /* Add if not using autoprefixer */ -webkit-appearance: none; /* Remove most all native input styles */ appearance: none; /* For iOS < 15 */ background-color: var(--form-background); /* Not removed via appearance */ margin: 0; font: inherit; color: currentColor; width: 1.15em; height: 1.15em; border: 0.15em solid #000000; border-radius: 0.15em; transform: translateY(-0.075em); display: grid; place-content: center; } input[type="checkbox"]::before { content: ""; width: 0.65em; height: 0.65em; clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%); transform: scale(0); transform-origin: bottom left; transition: 120ms transform ease-in-out; box-shadow: inset 1em 1em var(--form-control-color); /* Colour of tick */ background-color: #000000; } input[type="checkbox"]:checked::before { transform: scale(1); } input[type="checkbox"]:focus { outline: max(2px, 0.15em) solid #51DCD8; outline-offset: max(2px, 0.15em); } .validation-wrapper { clear: left; margin: 5px 0px 5px 0px; } .white-space-pre-wrap { white-space: pre-wrap; } .status-icon-wrapper { margin: 5px; } .status-icon-wrapper .status-icon-image-medium { width: 35px; } .date-input-text-container { display: flex; gap: 1rem; align-items: flex-start; } .date-input-text-part { display: flex; flex-direction: column; } .date-input-text-part label { margin-bottom: 10px; font-weight: 700; font-size: 12px; } .date-input-text-part .date-input-text-part-day { max-width: 55px; } .date-input-text-part .date-input-text-part-month { max-width: 55px; } .date-input-text-part .date-input-text-part-year { max-width: 80px; } /********** General Search Page CSS ******************/ .search-filter { padding-bottom: 20px; } .search-filter-wrapper { float: left; } .search-filter-advanced { float: left; padding: 18px 15px 0px 10px; } .search-filter-reset { padding: 2px 0px 0px 10px; color: #4ACCC6; font-size: 0.9rem; cursor: pointer; } .search-filter-inpage { max-width: 600px; } .filter-icon { filter: invert(68%) sepia(47%) saturate(473%) hue-rotate(128deg) brightness(93%) contrast(94%); cursor: pointer; } .search-description { margin: 10px 0px 0px 0px; font-size: 0.8rem; line-height: 1.2rem; } .search-description ul { padding-left: 20px; } .search-help-wrapper { float: right; padding-top: 15px; } .search-help-icon { } .search-action-buttons-wrapper { padding-top: 5px; float: right; } .search-criteria-wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-top: 10px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .search-criteria-wrapper .criterion-wrapper { border: 1px solid #51DCD8; margin-right: 6px; font-size: 14px; line-height: 14px; padding: 5px; border-radius: 4px; position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .search-criteria-wrapper .criterion-wrapper img { margin-left: 3px; } .search-pagination-container { display: flex; justify-content: right; padding: 10px 0px 0px 0px; } .search-pagination { list-style: none; margin: 0; padding: 0; display: flex; } .search-pagination a { display: block; padding: 7px 10px; border: 0px solid #999; border-radius: 50%; width: 30px; height: 30px; text-decoration: none; color: #4ACCC6; } .search-pagination a[aria-current="page"] { background-color: #4ACCC6; color: #fff; } .search-pagination li { margin: 0 0px; } .search-pagination-items { display: block; padding: 9px 10px 10px 5px; text-decoration: none; font-size: 0.8rem; } .search-action-button-wrapper { padding: 22px 0px 0px 0px; } .search-result-row-item-link { cursor: pointer; text-decoration: underline; color: #3EA9A6; } .search-results-divider { padding-bottom: 10px; border-bottom: 1px solid #BEC5D4; } .search-results-header-row { margin-top: 10px; padding-bottom: 10px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-left: 0px !important; margin-right: 0px !important; border-bottom: 1px solid #BEC5D4; color: #000000; } .search-results-header-row p { font-weight: 700; font-size: 12px; line-height: 12px; color: #000; margin-bottom: 0px; } .search-results-header-row .main-column-wrapper { padding-left: 0px !important; } .search-result-row { background: #F4F4F4; padding-top: 24px; padding-bottom: 24px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-bottom: 20px !important; margin-left: 0px !important; margin-right: 0px !important; /*border-bottom: 1px solid #BEC5D4;*/ border-radius: 12px; color: #000000; -webkit-box-shadow: 0px 3px 8px rgb(0 0 0 / 15%); box-shadow: 0px 3px 8px rgb(0 0 0 / 15%); } .search-result-row:hover { background-color: #EEFCFB; } .search-results .search-result-row .main-column-wrapper { padding-left: 0px !important; } .search-results .search-result-row .main-column-wrapper .main-column-wrapper-outer { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .search-results .search-result-row .action-icon { text-align: right !important; cursor: pointer; } .search-results .search-result-row p { line-height: 1.3rem; } .search-result-row .test-lozenge { background-color: #FE867B; color: #fff; border-radius: 4px; font-size: 14px; line-height: 14px; font-weight: 700; padding: 0px 5px 0px 5px; margin-left: 5px; } .search-result-row .on-hold-lozenge { background-color: #E6CA34; color: #fff; border-radius: 4px; font-size: 14px; line-height: 14px; font-weight: 700; padding: 0px 5px 0px 5px; margin-left: 5px; } /* Task List CSS */ .task-tab-items { /*margin-top: 37px;*/ position: relative; /*z-index: 2;*/ display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; /*justify-content: space-between;*/ -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .task-tab-item { float: left; font-weight: 700; font-size: 16px; background: transparent; border: none; color: #15233D; min-height: 26px; min-width: 100px; position: relative; margin-left: 20px; margin-right: 20px; cursor: pointer; text-align: center; } .task-tab-item.active { color: #15233D; border-bottom: 2px solid #51DCD8; } a.task-tab-item:hover { color: #15233D; border-bottom: 2px solid #51DCD8; text-decoration: none; } .task-list-container { /*max-width: 800px;*/ margin: 0 auto; padding: 2rem 0rem; } .task-list-container .task-list-item { cursor: pointer; background: #F4F4F4; padding: 20px 20px 20px 20px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-bottom: 20px !important; margin-left: 0px !important; margin-right: 0px !important; /*border-bottom: 1px solid #BEC5D4;*/ border-radius: 12px; color: #000000; -webkit-box-shadow: 0px 3px 8px rgb(0 0 0 / 15%); box-shadow: 0px 3px 8px rgb(0 0 0 / 15%); } .task-list-container .task-list-item:hover { background-color: #EEFCFB; } .task-list-container .task-list-item .detail-wrapper .task-added { font-weight: 400; font-size: 0.8rem; margin: 0px 0px 15px 0px; color: #15233D; } .task-list-container .task-list-item .detail-wrapper .new-task-lozenge { background-color: #FE867B; color: #fff; border-radius: 10px; font-weight: 700; padding: 0px 10px 0px 10px; margin-left: 10px; } .task-list-container .task-list-item .detail-wrapper .task-description { font-weight: 600; font-size: 1.2rem; margin: 0px 0px 5px 0px; color: #15233D; } .task-list-container .task-list-item .detail-wrapper .task-type-description { font-size: 0.9rem; font-weight: 400; line-height: 1.3rem; margin: 0px 0px 10px 0px; color: #15233D; } .task-list-container .task-progress-status-text { margin-top: .5rem !important; font-size: .8rem; font-weight: 400; color: rgba(21, 35, 61, 0.75); /*color: rgba(33, 37, 41, 0.75);*/ } .task-list-container .task-progress-status-text.completed { color: #51DC99; font-weight: 500; } .task-list-container .task-progress-status-text.in-progress { color: rgba(21, 35, 61, 0.75); } .task-list-container .task-progress-status-text.not-started { color: #FE867B; } .task-list-container .task-progress-bar-container { border-radius: 8px; background-color: #f1f1f1; } .task-list-container .task-progress-bar { background-color: #51DC99; /*padding: 0.5em 16px 0.5em 5px;*/ height: 6px; border-radius: 8px; margin-top: .5rem !important; text-align: center !important; } .task-list-container .task-progress-bar.completed { background-color: #51DC99; } .task-list-container .task-progress-bar.in-progress { background-color: #4ACCC6; } .task-list-container .task-progress-bar.not-started { background-color: #FE867B; } /* Document List CSS */ .document-tab-items { /*margin-top: 37px;*/ position: relative; /*z-index: 2;*/ display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; /*justify-content: space-between;*/ -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .document-tab-item { float: left; font-weight: 700; font-size: 16px; background: transparent; border: none; color: #15233D; min-height: 26px; min-width: 100px; position: relative; margin-left: 20px; margin-right: 20px; cursor: pointer; text-align: center; } .document-tab-item.active { color: #15233D; border-bottom: 2px solid #51DCD8; } a.document-tab-item:hover { color: #15233D; border-bottom: 2px solid #51DCD8; text-decoration: none; } .document-section { font-style: normal; font-weight: 600; font-size: 22px; line-height: 120%; margin: 5px 0px 15px 0px; color: #3EA9A6; } .document-list-container { /*max-width: 800px;*/ margin: 0 auto; padding: 1rem 0rem; } .document-list-container .document-list-item { cursor: pointer; background: #F4F4F4; padding: 20px 20px 20px 20px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-bottom: 20px !important; margin-left: 0px !important; margin-right: 0px !important; /*border-bottom: 1px solid #BEC5D4;*/ border-radius: 12px; color: #000000; -webkit-box-shadow: 0px 3px 8px rgb(0 0 0 / 15%); box-shadow: 0px 3px 8px rgb(0 0 0 / 15%); } .document-list-container .document-list-item:hover { background-color: #EEFCFB; } .document-list-container .document-list-item .detail-wrapper .document-added { font-weight: 400; font-size: 0.8rem; margin: 0px 0px 10px 0px; color: #9095a0; } .document-list-container .document-list-item .detail-wrapper .document-name { font-weight: 600; font-size: 1.2rem; margin: 0px 0px 5px 0px; color: #15233D; } .document-list-container .document-list-item .detail-wrapper .document-context { font-size: 0.8rem; font-weight: 400; line-height: 1.3rem; margin: 0px 0px 0px 0px; color: #15233D; } .pending-document-list-container { max-width: 800px; margin: 0 auto; padding: 1rem 1rem; } .pending-document-list-container .pending-document-list-item { cursor: pointer; background: #F4F4F4; padding: 20px 20px 20px 20px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-bottom: 20px !important; margin-left: 0px !important; margin-right: 0px !important; /*border-bottom: 1px solid #BEC5D4;*/ border-radius: 12px; color: #000000; -webkit-box-shadow: 0px 3px 8px rgb(0 0 0 / 15%); box-shadow: 0px 3px 8px rgb(0 0 0 / 15%); } .pending-document-list-container .pending-document-list-item:hover { background-color: #EEFCFB; } .pending-document-list-container .pending-document-list-item .detail-wrapper .pending-document-context { font-weight: 600; font-size: 1.2rem; margin: 0px 0px 5px 0px; color: #15233D; } .pending-document-list-container .pending-document-list-item .detail-wrapper .related-to { font-size: 0.8rem; font-weight: 400; line-height: 1.3rem; margin: 0px 0px 0px 0px; color: #15233D; } .pending-document-list-container .pending-document-list-item .detail-wrapper .attached-documents { /* font-size: 0.8rem; font-weight: 400; line-height: 1.3rem; margin: 0px 0px 0px 0px; color: #15233D;*/ font-weight: 400; font-size: 0.8rem; margin: 5px 0px 0px 0px; color: #9095a0; } .pending-document-grid-container { /*max-width: 800px;*/ margin: 0 auto; /*padding: 1rem 1rem;*/ } .pending-document-grid-container .pending-document-grid-item { cursor: pointer; background: #F4F4F4; padding: 20px 20px 20px 20px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-bottom: 20px !important; margin-left: 0px !important; margin-right: 0px !important; /*border-bottom: 1px solid #BEC5D4;*/ border-radius: 12px; color: #000000; -webkit-box-shadow: 0px 3px 8px rgb(0 0 0 / 15%); box-shadow: 0px 3px 8px rgb(0 0 0 / 15%); } .pending-document-grid-container .pending-document-grid-item:hover { background-color: #EEFCFB; } .pending-document-grid-container .pending-document-grid-item .detail-wrapper .pending-document-context { font-weight: 600; font-size: 1rem; margin: 0px 0px 5px 0px; color: #15233D; } .pending-document-grid-container .pending-document-grid-item .detail-wrapper .related-to { font-size: 0.8rem; font-weight: 400; line-height: 1.3rem; margin: 0px 0px 0px 0px; color: #15233D; } /* Preview Form Page */ .preview-form-page-wrapper { padding: 20px 20px 20px 20px; } /* Form Progress Indicator CSS */ .form-progress-indicator-container { margin-bottom: 10px; width: 95%; height: 75px; } .form-progress-ring-wrapper { position: relative; float: left; } .form-progress-ring { /*position: absolute;*/ top: 0px; /*float: left;*/ } .form-progress-percentage-wrapper { position: absolute; top: 26px; width: 75px; text-align: center; color: #51DC99; } .form-progress-percentage-text { /*margin-top: 27px;*/ margin-left: 5px; font-weight: 600; font-size: 24px; /*float: left;*/ } .form-progress-percentage-text-small { /*margin-top: 27px;*/ /*margin-left: 5px;*/ font-weight: 600; font-size: 12px; /*float: left;*/ vertical-align: top; line-height: 1rem; } .form-progress-status { float: left; width: 230px; } .form-progress-status-label { font-weight: 400; font-size: 14px; /*float: left;*/ margin-left: 10px; margin-top: 14px; } .form-progress-status-value { font-weight: 600; font-size: 24px; margin-left: 10px; margin-top: 2px; } .form-progress-status-submit-link { font-weight: 400; font-size: 16px; margin-left: 10px; margin-top: 5px; } .form-guide-notes-container { margin-top: 5px; margin-bottom: 10px; } .form-guide-notes-link { font-weight: 400; font-size: 16px; } /* Manage Response CSS */ .attached-files-wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-top: 10px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .attached-files-wrapper .attached-file-wrapper { border: 1px solid rgba(81, 220, 153, 1.0); background-color: rgba(81, 220, 153, 0.1); margin-right: 6px; margin-bottom: 10px; font-size: 14px; line-height: 14px; padding: 5px; border-radius: 4px; position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; float: left; clear: both; } .attached-files-wrapper .attached-file-wrapper:hover { /*background-color: rgba(81, 220, 216, 0.2);*/ } .attached-files-wrapper .attached-file-wrapper .attached-file-icon img { height: 20px; width: 20px; } .attached-files-wrapper .attached-file-wrapper .attached-file-name { margin-left: 10px; margin-right: 10px; } .attached-files-wrapper .attached-file-wrapper .attached-file-remove img { height: 20px; width: 20px; cursor: pointer; } .attached-files-wrapper .attached-file-wrapper .attached-file-remove:hover { /*background-color: rgba(254, 134, 123, 0.5);*/ background-color: #BEC5D4; } /* Yes/No Toggle */ .yes-no-toggle-wrapper { float: left; } .yes-no-toggle { --width: 80px; --height: 30px; position: relative; display: inline-block; width: var(--width); height: var(--height); box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3); border-radius: var(--height); cursor: pointer; } .yes-no-toggle input { display: none; } .yes-no-toggle .yes-no-toggle-slider { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: var(--height); background-color: #FE867B; transition: all 0.4s ease-in-out; } .yes-no-toggle .yes-no-toggle-slider::before { content: ''; position: absolute; top: 0; left: 0; width: calc(var(--height)); height: calc(var(--height)); border-radius: calc(var(--height) / 2); background-color: #fff; box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3); transition: all 0.4s ease-in-out; } .yes-no-toggle input:checked + .yes-no-toggle-slider { background-color: #4ACCC6; } .yes-no-toggle input:checked + .yes-no-toggle-slider::before { transform: translateX(calc(var(--width) - var(--height))); } .yes-no-toggle .yes-no-toggle-labels { position: absolute; top: 7px; left: 0; width: 100%; height: 100%; font-size: 16px; font-weight: 700; transition: all 0.4s ease-in-out; } .yes-no-toggle .yes-no-toggle-labels::after { content: attr(data-off); position: absolute; right: 18px; color: #fff; opacity: 1; transition: all 0.4s ease-in-out; } .yes-no-toggle .yes-no-toggle-labels::before { content: attr(data-on); position: absolute; left: 11px; color: #fff; opacity: 0; transition: all 0.4s ease-in-out; } .yes-no-toggle input:checked ~ .yes-no-toggle-labels::after { opacity: 0; } .yes-no-toggle input:checked ~ .yes-no-toggle-labels::before { opacity: 1; } /* MOBILE MENU */ .mobile-menu-container { position: relative; } .mobile-menu { display: none; top: 0; z-index: 9999; position: absolute; background: #15233D; padding: 16px 16px; right: 0px; width: 100%; height: 100vh; -webkit-box-shadow: 0px 0px 2px #A1A1A1; box-shadow: 0px 0px 2px #A1A1A1; border-radius: 0px 0px 0px 0px; color: #ffffff; } .mobile-menu ul { list-style: none; line-height: 1.3rem; } .mobile-menu ul .link { margin-bottom: 10px; } .mobile-menu.show { display: block; } .mobile-menu .profile-person-name { font-size: 20px; font-weight: 700; padding-bottom: 5px; } .mobile-menu .profile-email { font-size: 15px; color: #9095A1; } .mobile-menu .profile-organisation-name { font-size: 15px; color: #9095A1; } .mobile-menu .divider { width: 100%; height: 1px; background: #dae0ee; margin: 15px auto; } .mobile-menu-close { position: relative; float: right; cursor: pointer; } /* PROFILE MENU */ .profile-menu-container { position: relative; /*top: 6px;*/ } .profile-menu-container .avatar { width: 48px; display: -webkit-box; display: -ms-flexbox; display: flex; height: 48px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; border-radius: 50%; background: #51DCD8; color: #15233D; font-size: 16px; font-weight: 700; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .profile-menu { display: none; top: 100%; z-index: 9999; position: absolute; background: #fff; padding: 16px 16px; right: 0px; min-width: 300px; -webkit-box-shadow: 0px 0px 2px #A1A1A1; box-shadow: 0px 0px 2px #A1A1A1; border-radius: 8px; } .profile-menu ul { list-style: none; } .profile-menu ul .link { margin-bottom: 10px; } .profile-menu ul .link a { color: #212529; text-decoration: none; } .profile-menu.show { display: block; } .profile-menu .profile-person-name { color: #15233D; font-weight: 700; padding-bottom: 5px; } .profile-menu .profile-email { font-size: 15px; color: #9095A1; padding: 3px 0px 3px 0px; } .profile-menu .profile-organisation-name { font-size: 15px; color: #9095A1; padding: 3px 0px 3px 0px; } .profile-menu .divider { width: 100%; height: 1px; background: #dae0ee; margin: 15px auto; } .profile-menu-close-icon { float: right; margin: -5px; cursor: pointer; filter: invert(59%) sepia(65%) saturate(369%) hue-rotate(129deg) brightness(86%) contrast(89%); } /******** Tasks ********/ .task-main-content-wrapper { justify-content: center; display: flex; } .task-main-content { max-width: 800px; width: 100%; text-align: center; } .task-main-content-wide { max-width: 1000px; } .task-main-content-medium { max-width: 600px; } .task-main-content-left { text-align: left; } /******** Form Sections ********/ .form-container { display: flex; } .form-title { padding: 10px 0px 20px 0px; font-size: 24px; font-weight: 600; } .desktop-form-sections-container { max-width: 335px; min-width: 335px; /*min-height: 100vh;*/ /*background: #15233D;*/ /*padding: 24px 33px;*/ } .form-section { padding: 10px 0px 0px 0px; height: 40px; width: 95%; } .form-section.selected { background-color: rgba(81, 220, 216, 0.2); border-radius: 5px; } .form-section-status { float: left; padding: 0px 10px 0px 5px; } .form-section-name { float: left; font-weight: 500; } .form-section-navigator-container { padding: 10px 0px 10px 0px; } .form-section-navigator-wrapper { } .form-section-navigator-wrapper .navigator-question-set { float: left; width: 50px; height: 20px; margin: 0px 5px 10px 0px; padding: 4px 0px 0px 0px; text-align: center; font-size: 12px; font-weight: 500; } .form-section-navigator-wrapper .navigator-question-set.is-applicable { } .form-section-navigator-wrapper .navigator-question-set.not-applicable { background-color: rgba(190, 197, 212, 0.2); color: #aaaaaa; text-decoration: line-through; } .form-section-navigator-wrapper .navigator-question-set.is-complete { background-color: #51DC99; } .form-section-navigator-wrapper .navigator-question-set.not-complete { background-color: #BEC5D4; } .form-section-navigator-wrapper .navigator-question-set.selected::after { content: ''; display: inline-block; position: relative; background-color: #15233d; width: 50px; height: 5px; top: 1px; left: 0; } .form-main-content { /*-webkit-box-flex: 0; -ms-flex: 0 0 calc(100% - 335px); flex: 0 0 calc(100% - 335px); max-width: calc(100% - 335px);*/ -webkit-box-flex: 0; -ms-flex: 0 0 calc(100% - 335px); flex: 0 0 calc(100% - 335px); /*max-width: 600px;*/ } .form-header-main { padding: 30px 0px 0px 0px; font-weight: 600; font-size: 24px; } .form-help-button { margin-top: 10px; display: inline-flex; align-items: center; gap: 8px; padding: 4px 8px; border: 2px solid #4ACCC6; border-radius: 999px; background-color: #fff; color: #333; font-family: Arial, sans-serif; font-size: 16px; font-weight: 600; cursor: pointer; } .form-help-button:hover { background-color: #f5fffe; } .form-help-icon { width: 24px; height: 24px; background-color: #4ACCC6; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 14px; line-height: 1; flex-shrink: 0; } .form-help-text { padding: 0px 4px 0px 4px; } .form-help-content { line-height: 1.5rem; } .form-help-content ul { display: block; list-style-type: disc; margin-block-start: 1em; margin-block-end: 1em; padding-inline-start: 40px; unicode-bidi: isolate; } .form-guide-notes-content { line-height: 1.5rem; } .form-guide-notes-content ul { display: block; list-style-type: disc; margin-block-start: 1em; margin-block-end: 1em; padding-inline-start: 40px; unicode-bidi: isolate; } .response-item-set-container { clear: left; font-size: 16px; padding: 10px 0px 0px 0px; min-height: 300px; } .response-item-set-question-sub-header { font-weight: 700; font-size: 14px; } .response-item-set-question-text { } /* Fittings and Contents Form */ .other-rooms-container { padding-top: 10px; } .other-room-wrapper { font-size: 16px; float: left; padding: 2px 6px 0px 0px; border-radius: 4px; padding: 5px 10px 5px 10px; margin: 0px 6px 5px 0px; border: 1px solid rgba(81, 220, 153, 1.0); background-color: rgba(81, 220, 153, 0.1); } .other-room-icon { padding: 0px 0px 0px 0px; height: 20px; width: 20px; margin-left: 5px; } .other-room-text { padding: 1px 0px 0px 2px; } .fac-item-row { padding-top: 5px; padding-bottom: 5px; border-bottom: 1px dashed #d9dde6; } .fac-item-label { float: left; padding-top: 10px; font-size: 14px; } .fac-item-remove { float: left; } .fac-item-remove-icon { filter: invert(60%) sepia(21%) saturate(1111%) hue-rotate(316deg) brightness(101%) contrast(99%); margin-left: 5px; margin-top: 7px; height: 20px; width: 20px; } .fac-item-comments { padding-top: 5px; } /************ Disable Type Numbers ICONS ********/ /* Chrome, Safari, Edge, Opera */ input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } /* Firefox */ input[type=number] { -moz-appearance: textfield; } .radio-input-wrapper { clear: both; float: left; padding-right: 5px; margin-top: 0px; margin-bottom: 10px; } .radio-input-wrapper-label { float: left; padding-left: 5px; padding-top: 1px; } .radio-input input[type="radio"] { /* Add if not using autoprefixer */ -webkit-appearance: none; float: left; /* Remove most all native input styles */ appearance: none; /* Not removed via appearance */ margin: 0; font: inherit; /*color: currentColor;*/ width: 1.15em; height: 1.15em; border: 0.15em solid #000000; border-radius: 1em; display: grid; place-content: center; } .radio-input input[type="radio"]::before { content: ""; width: 0.5em; height: 0.5em; clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%); clip-path: circle(); transform: scale(0); transform-origin: bottom left; transition: 120ms transform ease-in-out; box-shadow: inset 1em 1em var(--form-control-color); background-color: #51DCD8; } .radio-input input[type="radio"]:checked::before { transform: scale(1); } .radio-input input[type="radio"]:focus { outline: max(2px, 0.15em) solid #51DCD8; outline-offset: max(2px, 0.15em); } /* Messages */ .contact-us-tile { width: 100%; display: inline-block; box-sizing: border-box; background: #fff; padding: 20px; margin-bottom: 10px; background-color: #51DCD8; color: #15233D; border-bottom: 1px solid #BEC5D4; border-radius: 12px; padding: 20px 14px; margin: 12px 0px; max-width: 600px; cursor: pointer; min-height: 225px; min-width: 150px; } .contact-us-tile:hover { background-color: #5BF7EF; color: #15233D; text-decoration: none; } .contact-us-tile-title { margin-top: 0px; } .contact-us-tile-description { line-height: 1.4rem; } .contact-information-item-wrapper { padding: 0px 0px 5px 0px; float: left; clear: left; } .contact-information-item-icon { width: 20px; float: left; } .contact-information-item-detail { margin: 1px 0px 0px 10px; float: left; } /*Media Queries */ @media screen and (max-width: 1440px) { } @media screen and (max-width: 1280px) { .main-content-wrapper { -webkit-box-flex: 0; -ms-flex: 0 0 calc(100% - 200px); flex: 0 0 calc(100% - 200px); max-width: calc(100% - 200px); } .input-wrapper-outer .input-wrapper { min-width: 48%; } .input-wrapper-outer .input-wrapper-address { min-width: 70%; } .desktop-header-action-buttons { display: none; } } @media screen and (max-width: 1024px) { } @media screen and (max-width: 768px) { h1 { font-size: 24px; } .header-container { padding-top: 0.5em; padding-right: 0.5em; padding-bottom: 0.5em; padding-left: 0.5em; } .header-container .container { padding: 0; } .header-container .rello-logo img { width: 50px; margin-top: 2px; } .header-container .header-transaction .col-left { display: none; } .header-container .header-transaction .col-right { display: none; } .header-container .header-transaction .col-middle .law-firm-name { /*display: none;*/ padding-top: 0px; font-size: 14px; } .header-container .header-transaction .col-middle .property { /*display: none;*/ font-size: 11px; } .attach-document-container { top: 37px; right: 0px; cursor: pointer; } .attach-document-container .attach-document-button { height: 28px; width: 28px; border-radius: 6px; border: 2px solid #51DCD8; padding: 3px; } .attach-document-container .attach-document-button img { width: 18px; } .send-message-container { top: 37px; right: 0px; cursor: pointer; display: block; } .send-message-container .send-message-button { height: 28px; width: 28px; border-radius: 6px; border: 2px solid #51DCD8; padding: 3px; } .send-message-container .send-message-button img { width: 18px; } /************************ NAVBAR ********************************/ .navbar { margin-top: 10px; height: 42px; } .nav-container { gap: 15px; } .nav-item { font-size: 11px; padding: 2px 8px 4px 8px; } .nav-item svg { width: 18px; height: 18px; margin-bottom: 6px; } .profile-menu-container { top: 0px; width: 50px; text-align: right; } .profile-menu-container .avatar { height: 30px; width: 30px; font-size: 12px; color: #15233d; font-weight: 600; float: right; } .desktop-header { display: none !important; } .mobile-none { display: none !important; } .mobile-only { display: block !important; } .mobile-full-width { width: 100%; } .mobile-header { display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; width: 100%; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding-top: 10px; padding-bottom: 0px; } .hamburger-wrapper { position: relative; } .hamburger-wrapper-hide { display: none; } .hamburger-icon { display: block; min-height: 22px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .hamburger-icon .line { background: #15233D; display: inline-block; height: 2px; margin-bottom: 8px; } .hamburger-icon .line-1 { width: 15px; } .hamburger-icon .line-2 { width: 30px; } .hamburger-icon .line-3 { width: 20px; } .hamburger-icon .line:last-child { margin-bottom: 0px; } .header-transaction .col-middle .law-firm-name { justify-content: center; } .header-transaction .col-middle .property { justify-content: center; } .btn-mobile-full { width: 100%; margin: 5px 0px 5px 0px; } .btn-mobile-full-margin-top { margin-top: 15px; } .btn-mobile-full-margin-bottom { margin-bottom: 15px; } .modal-content-wrapper-medium { min-width: 100%; } .modal-content-wrapper-large { min-width: 100%; } .modal-content-wrapper-xlarge { min-width: 100%; } .modal-content-wrapper-xxlarge { min-width: 100%; } .main-content-wrapper { -webkit-box-flex: 0; -ms-flex: 0 0 calc(100% - 0px); flex: 0 0 calc(100% - 0px); max-width: calc(100% - 0px); } .input-wrapper-outer { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .input-wrapper-search { min-width: 87%; } .input-rello { min-width: 100%; } /*.main-content .inner-content { margin-top: 16px; margin-left: 0px; margin-right: 0px; }*/ .main-content .header-wrapper .col-right { display: none !important; } .main-content .header-wrapper .back-link::after { display: none; } .main-content .input-wrapper { margin-top: 5px; margin-right: 0px !important; } .input-rello { height: 40px; } .input-rello-textarea { height: 100px; } .main-content .checkbox-wrapper { margin-top: 16px; } .modal-content-wrapper-medium { min-width: 100%; } .modal-content-wrapper-large { min-width: 100%; } .modal-content-wrapper-large-scrollable { min-width: 100%; max-height: 85vh; } .modal-content-wrapper-scrollable { min-width: 100%; max-height: 85vh; } /* Search Results Page */ .search-results-divider { display: none; } .search-results-header-row { display: none; } .search-results .search-result-row { background: #F4F4F4; -webkit-box-shadow: 0px 3px 8px rgb(0 0 0 / 15%); box-shadow: 0px 3px 8px rgb(0 0 0 / 15%); border-radius: 12px; padding: 20px 14px; margin: 12px 0px; } .search-results .search-result-row:hover { background: #EEFCFB; } .search-results .col-wrapper { /*-ms-flex-preferred-size: 0;*/ flex-basis: 0; -webkit-box-flex: 1; /*-ms-flex-positive: 1;*/ flex-grow: 1; max-width: 100%; } .search-results .column-wrapper-1 { -webkit-box-flex: 0 !important; -ms-flex: 0 0 70% !important; flex: 0 0 70% !important; max-width: 70% !important; } .search-results .search-result-row { background: #F4F4F4; -webkit-box-shadow: 0px 3px 8px rgb(0 0 0 / 15%); box-shadow: 0px 3px 8px rgb(0 0 0 / 15%); border-radius: 12px; padding: 20px 14px; margin: 12px 0px; } /* Forms */ .form-main-content { flex: unset; } .mobile-form-sections-container { width: 100%; /*background: #15233D;*/ /*padding: 24px 33px;*/ background-color: rgba(81, 220, 216, 0.1); border-radius: 4px; } .mobile-form-sections-container .col-mobile-sections-left { width: 15%; } .mobile-form-sections-container .col-mobile-sections-center { width: 70%; } .mobile-form-sections-container .col-mobile-sections-right { width: 15%; } .form-section { padding: 10px 0px 0px 0px; height: 40px; width: 100%; border-bottom: 1px solid rgba(81, 220, 216, 0.4); } .form-section-first { padding: 10px 0px 0px 0px; height: 40px; width: 100%; border-bottom: 1px solid rgba(81, 220, 216, 0.4); border-top: 1px solid rgba(81, 220, 216, 0.4); } .form-section-status { float: left; padding: 0px 10px 0px 5px; } .form-current-section-label { float: left; font-weight: 400; font-size: 12px; width: 100%; margin: 7px 0px 2px 0px; } .form-current-section-name { float: left; font-weight: 600; font-size: 18px; width: 100%; } .mobile-section-list-icon { height: 30px; width: 30px; margin: 10px 5px 0px 0px; } .form-progress-indicator-container { margin-bottom: 10px; width: 40px; height: 40px; margin: 5px; background-color: #ffffff; border-radius: 50%; } .form-progress-ring-wrapper { position: relative; float: left; } .form-progress-ring { /*position: absolute;*/ top: 0px; /*float: left;*/ } .form-progress-percentage-wrapper { position: absolute; top: 12px; width: 40px; /*height: 40px;*/ /*float: left;*/ text-align: center; color: #51DC99; } .form-progress-percentage-text { margin-left: 2px; font-weight: 600; font-size: 16px; } .form-progress-percentage-text-100 { margin-left: 0px; font-size: 14px; font-weight: 700; } .form-progress-percentage-text-small { /*margin-top: 27px;*/ /*margin-left: 5px;*/ font-weight: 600; font-size: 6px; /*float: left;*/ vertical-align: top; line-height: 0.8rem; } .form-progress-status { float: left; width: 230px; } .form-progress-status-label { font-weight: 400; font-size: 14px; /*float: left;*/ margin-left: 10px; margin-top: 14px; } .form-progress-status-value { font-weight: 600; font-size: 24px; margin-left: 10px; margin-top: 2px; } .form-progress-status-submit-link { font-weight: 400; font-size: 16px; margin-left: 10px; margin-top: 5px; } } @media print { .no-print, .no-print * { display: none !important; } } /* Blazored Typeahead Overrides */ .blazored-modal-header { padding: 0px 0px 0px 0px; } .blazored-modal-title { margin-top: 0px; } .blazored-typeahead { position: relative; width: 100%; border: 1px solid #BEC5D4; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-box-shadow: 0px 0px 2px #A1A1A1; box-shadow: 0px 0px 2px #A1A1A1; border-radius: 4px; height: 46px; } .blazored-typeahead.valid.modified { border: 0px solid #000; } .blazored-typeahead:focus-within { box-shadow: 0px 0px 2px #A1A1A1; border: 1px solid #000000; } .blazored-typeahead__selected-item { background-color: #dbdbdb; } .blazored-typeahead__selected-item-highlighted { background-color: #d3e2f2; } .blazored-typeahead__active-item, .blazored-typeahead__result:hover, .blazored-typeahead__result:focus { background-color: #f0f0f0; border-top: 1px solid #f0f0f0; border-bottom: 1px solid #f0f0f0; color: #000; cursor: pointer; } .blazored-typeahead__input { padding: 11px 45px; min-width: 376px; } .blazored-typeahead__input-mask { padding: 14px 43px; } .blazored-typeahead__input-mask:focus { /*outline: none;*/ } .blazored-typeahead__input-mask-wrapper { min-width: 376px; } .relloblazor-addresswizard-typeahead__input { min-width: 376px; } .relloblazor-addresswizard-typeahead__input-mask { padding: 0.9rem; } @media screen and (max-width: 768px) { .blazored-typeahead__input { padding: 11px 0px 11px 45px; min-width: 200px; } .blazored-typeahead__input-mask-wrapper { min-width: 260px; } .relloblazor-addresswizard-typeahead__input { min-width: 200px; } .relloblazor-addresswizard-typeahead__input-mask-wrapper { min-width: 260px; } } /* Blazored Modal Overrides */ .bm-header { padding: 0px 0px 10px 0px !important; }