:root { /* States */ --color-error: #c0392b; --color-info: #007a8c; --color-warn: #87F069; --color-warning: #87F069; --color-bg-disabled: #EEE; /* Actions */ --color-action-primary: #007a8c; --color-action-secondary: #B4F57D; --color-action-offset: #00373F; /* Layout */ --color-bg-teal: #00373F; --color-bg-offset-dark: #3c4043; --color-bg-gray: #8CEBD7; --color-bg-offset-gray: #00D7BE; --color-bg-white: #FFF; --color-bg-page-header: #8CEBD7; /*#f2f3f3*/ --color-bg-page: #FFF; --color-bg-lime: #B4F57D; --color-bg-lime-tent01: #DCFFC3; --color-bg-lime-tent02: #C3FF9B; --color-bg-lime-tent03: #87F069; --color-bg-lime-tent04: #78DC5F; /* Borders */ --color-border-page: #00ac98; /*#50E6CD; #E2E2E2;*/ --color-border-primary: #00ac98; --color-border-light: #00D7BE; /* Fonts */ --color-font-primary: #3c4043; --color-font-teal: #00383F; --color-font-lime: #B4F57D; --color-font-action: #007a8c; --color-font-gray: #9B9B9B; /*#00D7BE;*/ --color-font-white: #FFF; --color-font-disabled: #9B9B9B; /*#50E6CD*/ --color-font-icon-primary: #00373F; --color-font-icon-secondary: #B4F57D; --color-font-link: #007BFF; /* Bootstrap blue - #1E88E5 is Google Material Design blue 600 */ /* Forms */ --color-bg-input: #F5F0EB; --input-border-color: #cccccc; --default-input-color: #ffffff; --button-background: #B4F57D; /*var(--color-action-primary) - from wheel: #78DC5F; #D2B995*/ --button-font-color: #FFF; --color-highlighted: #DCFFC3; /* Main Header */ --mainheader-background: #00373F; --mainheader-font-color: #8CEBD7; /* FONTS */ --default-font-color-light: #8CEBD7; --default-font-color-dark: #3c4043; --default-font-color-medium: #00D7BE; --primary-font: "Haffer", "Helvetica Neue", Helvetica, Arial, sans-serif; --code-font: SFMono-Medium, "SF Mono", "Segoe UI Mono", sans-serif, "Ubuntu Mono", Menlo, Consolas, Courier, monospace; --code-font-color: #f9e9e9; --anchor-font-color: #007bff; } /* Root from Chrome theme /* :root, [data-bs-theme=light] { --bs-blue: #0d6efd; --bs-indigo: #6610f2; --bs-purple: #6f42c1; --bs-pink: #d63384; --bs-red: #dc3545; --bs-orange: #fd7e14; --bs-yellow: #ffc107; --bs-green: #198754; --bs-teal: #20c997; --bs-cyan: #0dcaf0; --bs-black: #000; --bs-white: #fff; --bs-gray: #6c757d; --bs-gray-dark: #343a40; --bs-gray-100: #f8f9fa; --bs-gray-200: #e9ecef; --bs-gray-300: #dee2e6; --bs-gray-400: #ced4da; --bs-gray-500: #adb5bd; --bs-gray-600: #6c757d; --bs-gray-700: #495057; --bs-gray-800: #343a40; --bs-gray-900: #212529; --bs-primary: #0d6efd; --bs-secondary: #6c757d; --bs-success: #198754; --bs-info: #0dcaf0; --bs-warning: #ffc107; --bs-danger: #dc3545; --bs-light: #f8f9fa; --bs-dark: #212529; --bs-primary-rgb: 13, 110, 253; --bs-secondary-rgb: 108, 117, 125; --bs-success-rgb: 25, 135, 84; --bs-info-rgb: 13, 202, 240; --bs-warning-rgb: 255, 193, 7; --bs-danger-rgb: 220, 53, 69; --bs-light-rgb: 248, 249, 250; --bs-dark-rgb: 33, 37, 41; --bs-primary-text-emphasis: #052c65; --bs-secondary-text-emphasis: #2b2f32; --bs-success-text-emphasis: #0a3622; --bs-info-text-emphasis: #055160; --bs-warning-text-emphasis: #664d03; --bs-danger-text-emphasis: #58151c; --bs-light-text-emphasis: #495057; --bs-dark-text-emphasis: #495057; --bs-primary-bg-subtle: #cfe2ff; --bs-secondary-bg-subtle: #e2e3e5; --bs-success-bg-subtle: #d1e7dd; --bs-info-bg-subtle: #cff4fc; --bs-warning-bg-subtle: #fff3cd; --bs-danger-bg-subtle: #f8d7da; --bs-light-bg-subtle: #fcfcfd; --bs-dark-bg-subtle: #ced4da; --bs-primary-border-subtle: #9ec5fe; --bs-secondary-border-subtle: #c4c8cb; --bs-success-border-subtle: #a3cfbb; --bs-info-border-subtle: #9eeaf9; --bs-warning-border-subtle: #ffe69c; --bs-danger-border-subtle: #f1aeb5; --bs-light-border-subtle: #e9ecef; --bs-dark-border-subtle: #adb5bd; --bs-white-rgb: 255, 255, 255; --bs-black-rgb: 0, 0, 0; --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0)); --bs-body-font-family: var(--bs-font-sans-serif); --bs-body-font-size: 1rem; --bs-body-font-weight: 400; --bs-body-line-height: 1.5; --bs-body-color: #212529; --bs-body-color-rgb: 33, 37, 41; --bs-body-bg: #fff; --bs-body-bg-rgb: 255, 255, 255; --bs-emphasis-color: #000; --bs-emphasis-color-rgb: 0, 0, 0; --bs-secondary-color: rgba(33, 37, 41, 0.75); --bs-secondary-color-rgb: 33, 37, 41; --bs-secondary-bg: #e9ecef; --bs-secondary-bg-rgb: 233, 236, 239; --bs-tertiary-color: rgba(33, 37, 41, 0.5); --bs-tertiary-color-rgb: 33, 37, 41; --bs-tertiary-bg: #f8f9fa; --bs-tertiary-bg-rgb: 248, 249, 250; --bs-heading-color: inherit; --bs-link-color: #0d6efd; --bs-link-color-rgb: 13, 110, 253; --bs-link-decoration: underline; --bs-link-hover-color: #0a58ca; --bs-link-hover-color-rgb: 10, 88, 202; --bs-code-color: #d63384; --bs-highlight-color: #212529; --bs-highlight-bg: #fff3cd; --bs-border-width: 1px; --bs-border-style: solid; --bs-border-color: #dee2e6; --bs-border-color-translucent: rgba(0, 0, 0, 0.175); --bs-border-radius: 0.375rem; --bs-border-radius-sm: 0.25rem; --bs-border-radius-lg: 0.5rem; --bs-border-radius-xl: 1rem; --bs-border-radius-xxl: 2rem; --bs-border-radius-2xl: var(--bs-border-radius-xxl); --bs-border-radius-pill: 50rem; --bs-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); --bs-box-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); --bs-box-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175); --bs-box-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.075); --bs-focus-ring-width: 0.25rem; --bs-focus-ring-opacity: 0.25; --bs-focus-ring-color: rgba(13, 110, 253, 0.25); --bs-form-valid-color: #198754; --bs-form-valid-border-color: #198754; --bs-form-invalid-color: #dc3545; --bs-form-invalid-border-color: #dc3545; } */ /*! jQuery UI - v1.14.1 - 2024-10-30 * https://jqueryui.com * Includes: core.css, accordion.css, autocomplete.css, menu.css, button.css, controlgroup.css, checkboxradio.css, datepicker.css, dialog.css, draggable.css, resizable.css, progressbar.css, selectable.css, selectmenu.css, slider.css, sortable.css, spinner.css, tabs.css, tooltip.css, theme.css * To view and modify this theme, visit https://jqueryui.com/themeroller/?bgColorDefault=%23f6f6f6&borderColorDefault=%23c5c5c5&fcDefault=%23454545&bgColorHover=%23ededed&borderColorHover=%23cccccc&fcHover=%232b2b2b&bgColorActive=%23007fff&borderColorActive=%23003eff&fcActive=%23ffffff&bgColorHeader=%23e9e9e9&borderColorHeader=%23dddddd&fcHeader=%23333333&bgColorContent=%23ffffff&borderColorContent=%23dddddd&fcContent=%23333333&bgColorHighlight=%23fffa90&borderColorHighlight=%23dad55e&fcHighlight=%23777620&bgColorError=%23fddfdf&borderColorError=%23f1a899&fcError=%235f3f3f&bgColorOverlay=%23aaaaaa&opacityOverlay=.3&bgColorShadow=%23666666&opacityShadow=.3&offsetTopShadow=0px&offsetLeftShadow=0px&thicknessShadow=5px&cornerRadiusShadow=8px&fsDefault=1em&ffDefault=Arial%2CHelvetica%2Csans-serif&fwDefault=normal&cornerRadius=3px&bgTextureDefault=flat&bgTextureHover=flat&bgTextureActive=flat&bgTextureHeader=flat&bgTextureContent=flat&bgTextureHighlight=flat&bgTextureError=flat&bgTextureOverlay=flat&bgTextureShadow=flat&bgImgOpacityDefault=75&bgImgOpacityHover=75&bgImgOpacityActive=65&bgImgOpacityHeader=75&bgImgOpacityContent=75&bgImgOpacityHighlight=55&bgImgOpacityError=95&bgImgOpacityOverlay=0&bgImgOpacityShadow=0&iconColorActive=%23ffffff&iconColorContent=%23444444&iconColorDefault=%23777777&iconColorError=%23cc0000&iconColorHeader=%23444444&iconColorHighlight=%23777620&iconColorHover=%23555555&opacityOverlayPerc=30&opacityShadowPerc=30&bgImgUrlActive=&bgImgUrlContent=&bgImgUrlDefault=&bgImgUrlError=&bgImgUrlHeader=&bgImgUrlHighlight=&bgImgUrlHover=&bgImgUrlOverlay=&bgImgUrlShadow=&iconsActive=url(../../lib/jquery-ui/"images/ui-icons_ffffff_256x240.png")&iconsContent=url(../../lib/jquery-ui/"images/ui-icons_444444_256x240.png")&iconsDefault=url(../../lib/jquery-ui/"images/ui-icons_777777_256x240.png")&iconsError=url(../../lib/jquery-ui/"images/ui-icons_cc0000_256x240.png")&iconsHeader=url(../../lib/jquery-ui/"images/ui-icons_444444_256x240.png")&iconsHighlight=url(../../lib/jquery-ui/"images/ui-icons_777620_256x240.png")&iconsHover=url(../../lib/jquery-ui/"images/ui-icons_555555_256x240.png")&bgDefaultRepeat=&bgHoverRepeat=&bgActiveRepeat=&bgHeaderRepeat=&bgContentRepeat=&bgHighlightRepeat=&bgErrorRepeat=&bgOverlayRepeat=&bgShadowRepeat=&bgDefaultYPos=&bgHoverYPos=&bgActiveYPos=&bgHeaderYPos=&bgContentYPos=&bgHighlightYPos=&bgErrorYPos=&bgOverlayYPos=&bgShadowYPos=&bgDefaultXPos=&bgHoverXPos=&bgActiveXPos=&bgHeaderXPos=&bgContentXPos=&bgHighlightXPos=&bgErrorXPos=&bgOverlayXPos=&bgShadowXPos= * Copyright OpenJS Foundation and other contributors; Licensed MIT */ .ui-helper-hidden{display:none}.ui-helper-hidden-accessible{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.ui-helper-reset{margin:0;padding:0;border:0;outline:0;line-height:1.3;text-decoration:none;font-size:100%;list-style:none}.ui-helper-clearfix:before,.ui-helper-clearfix:after{content:"";display:table;border-collapse:collapse}.ui-helper-clearfix:after{clear:both}.ui-helper-zfix{width:100%;height:100%;top:0;left:0;position:absolute;opacity:0}.ui-front{z-index:100}.ui-state-disabled{cursor:default!important;pointer-events:none}.ui-icon{display:inline-block;vertical-align:middle;margin-top:-.25em;position:relative;text-indent:-99999px;overflow:hidden;background-repeat:no-repeat}.ui-widget-icon-block{left:50%;margin-left:-8px;display:block}.ui-widget-overlay{position:fixed;top:0;left:0;width:100%;height:100%}.ui-accordion .ui-accordion-header{display:block;cursor:pointer;position:relative;margin:2px 0 0 0;padding:.5em .5em .5em .7em;font-size:100%}.ui-accordion .ui-accordion-content{padding:1em 2.2em;border-top:0;overflow:auto}.ui-autocomplete{position:absolute;top:0;left:0;cursor:default}.ui-menu{list-style:none;padding:0;margin:0;display:block;outline:0}.ui-menu .ui-menu{position:absolute}.ui-menu .ui-menu-item{margin:0;cursor:pointer}.ui-menu .ui-menu-item-wrapper{position:relative;padding:3px 1em 3px .4em}.ui-menu .ui-menu-divider{margin:5px 0;height:0;font-size:0;line-height:0;border-width:1px 0 0 0}.ui-menu .ui-state-focus,.ui-menu .ui-state-active{margin:-1px}.ui-menu-icons{position:relative}.ui-menu-icons .ui-menu-item-wrapper{padding-left:2em}.ui-menu .ui-icon{position:absolute;top:0;bottom:0;left:.2em;margin:auto 0}.ui-menu .ui-menu-icon{left:auto;right:0}.ui-button{padding:.4em 1em;display:inline-block;position:relative;line-height:normal;margin-right:.1em;cursor:pointer;vertical-align:middle;text-align:center;-webkit-user-select:none;user-select:none}.ui-button,.ui-button:link,.ui-button:visited,.ui-button:hover,.ui-button:active{text-decoration:none}.ui-button-icon-only{width:2em;box-sizing:border-box;text-indent:-9999px;white-space:nowrap}input.ui-button.ui-button-icon-only{text-indent:0}.ui-button-icon-only .ui-icon{position:absolute;top:50%;left:50%;margin-top:-8px;margin-left:-8px}.ui-button.ui-icon-notext .ui-icon{padding:0;width:2.1em;height:2.1em;text-indent:-9999px;white-space:nowrap}input.ui-button.ui-icon-notext .ui-icon{width:auto;height:auto;text-indent:0;white-space:normal;padding:.4em 1em}input.ui-button::-moz-focus-inner,button.ui-button::-moz-focus-inner{border:0;padding:0}.ui-controlgroup{vertical-align:middle;display:inline-block}.ui-controlgroup > .ui-controlgroup-item{float:left;margin-left:0;margin-right:0}.ui-controlgroup > .ui-controlgroup-item:focus,.ui-controlgroup > .ui-controlgroup-item.ui-visual-focus{z-index:9999}.ui-controlgroup-vertical > .ui-controlgroup-item{display:block;float:none;width:100%;margin-top:0;margin-bottom:0;text-align:left}.ui-controlgroup-vertical .ui-controlgroup-item{box-sizing:border-box}.ui-controlgroup .ui-controlgroup-label{padding:.4em 1em}.ui-controlgroup .ui-controlgroup-label span{font-size:80%}.ui-controlgroup-horizontal .ui-controlgroup-label + .ui-controlgroup-item{border-left:none}.ui-controlgroup-vertical .ui-controlgroup-label + .ui-controlgroup-item{border-top:none}.ui-controlgroup-horizontal .ui-controlgroup-label.ui-widget-content{border-right:none}.ui-controlgroup-vertical .ui-controlgroup-label.ui-widget-content{border-bottom:none}.ui-controlgroup-vertical .ui-spinner-input{width:calc( 100% - 2.4em )}.ui-controlgroup-vertical .ui-spinner .ui-spinner-up{border-top-style:solid}.ui-checkboxradio-label .ui-icon-background{box-shadow:inset 1px 1px 1px #ccc;border-radius:.12em;border:none}.ui-checkboxradio-radio-label .ui-icon-background{width:16px;height:16px;border-radius:1em;overflow:visible;border:none}.ui-checkboxradio-radio-label.ui-checkboxradio-checked .ui-icon,.ui-checkboxradio-radio-label.ui-checkboxradio-checked:hover .ui-icon{background-image:none;width:8px;height:8px;border-width:4px;border-style:solid}.ui-checkboxradio-disabled{pointer-events:none}.ui-datepicker{width:17em;padding:.2em .2em 0;display:none}.ui-datepicker .ui-datepicker-header{position:relative;padding:.2em 0}.ui-datepicker .ui-datepicker-prev,.ui-datepicker .ui-datepicker-next{position:absolute;top:2px;width:1.8em;height:1.8em}.ui-datepicker .ui-datepicker-prev-hover,.ui-datepicker .ui-datepicker-next-hover{top:1px}.ui-datepicker .ui-datepicker-prev{left:2px}.ui-datepicker .ui-datepicker-next{right:2px}.ui-datepicker .ui-datepicker-prev-hover{left:1px}.ui-datepicker .ui-datepicker-next-hover{right:1px}.ui-datepicker .ui-datepicker-prev span,.ui-datepicker .ui-datepicker-next span{display:block;position:absolute;left:50%;margin-left:-8px;top:50%;margin-top:-8px}.ui-datepicker .ui-datepicker-title{margin:0 2.3em;line-height:1.8em;text-align:center}.ui-datepicker .ui-datepicker-title select{font-size:1em;margin:1px 0}.ui-datepicker select.ui-datepicker-month,.ui-datepicker select.ui-datepicker-year{width:45%}.ui-datepicker table{width:100%;font-size:.9em;border-collapse:collapse;margin:0 0 .4em}.ui-datepicker th{padding:.7em .3em;text-align:center;font-weight:bold;border:0}.ui-datepicker td{border:0;padding:1px}.ui-datepicker td span,.ui-datepicker td a{display:block;padding:.2em;text-align:right;text-decoration:none}.ui-datepicker .ui-datepicker-buttonpane{background-image:none;margin:.7em 0 0 0;padding:0 .2em;border-left:0;border-right:0;border-bottom:0}.ui-datepicker .ui-datepicker-buttonpane button{float:right;margin:.5em .2em .4em;cursor:pointer;padding:.2em .6em .3em .6em;width:auto;overflow:visible}.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current{float:left}.ui-datepicker.ui-datepicker-multi{width:auto}.ui-datepicker-multi .ui-datepicker-group{float:left}.ui-datepicker-multi .ui-datepicker-group table{width:95%;margin:0 auto .4em}.ui-datepicker-multi-2 .ui-datepicker-group{width:50%}.ui-datepicker-multi-3 .ui-datepicker-group{width:33.3%}.ui-datepicker-multi-4 .ui-datepicker-group{width:25%}.ui-datepicker-multi .ui-datepicker-group-last .ui-datepicker-header,.ui-datepicker-multi .ui-datepicker-group-middle .ui-datepicker-header{border-left-width:0}.ui-datepicker-multi .ui-datepicker-buttonpane{clear:left}.ui-datepicker-row-break{clear:both;width:100%;font-size:0}.ui-datepicker-rtl{direction:rtl}.ui-datepicker-rtl .ui-datepicker-prev{right:2px;left:auto}.ui-datepicker-rtl .ui-datepicker-next{left:2px;right:auto}.ui-datepicker-rtl .ui-datepicker-prev:hover{right:1px;left:auto}.ui-datepicker-rtl .ui-datepicker-next:hover{left:1px;right:auto}.ui-datepicker-rtl .ui-datepicker-buttonpane{clear:right}.ui-datepicker-rtl .ui-datepicker-buttonpane button{float:left}.ui-datepicker-rtl .ui-datepicker-buttonpane button.ui-datepicker-current,.ui-datepicker-rtl .ui-datepicker-group{float:right}.ui-datepicker-rtl .ui-datepicker-group-last .ui-datepicker-header,.ui-datepicker-rtl .ui-datepicker-group-middle .ui-datepicker-header{border-right-width:0;border-left-width:1px}.ui-datepicker .ui-icon{display:block;text-indent:-99999px;overflow:hidden;background-repeat:no-repeat;left:.5em;top:.3em}.ui-dialog{position:absolute;top:0;left:0;padding:.2em;outline:0}.ui-dialog .ui-dialog-titlebar{padding:.4em 1em;position:relative}.ui-dialog .ui-dialog-title{float:left;margin:.1em 0;white-space:nowrap;width:90%;overflow:hidden;text-overflow:ellipsis}.ui-dialog .ui-dialog-titlebar-close{position:absolute;right:.3em;top:50%;width:20px;margin:-10px 0 0 0;padding:1px;height:20px}.ui-dialog .ui-dialog-content{position:relative;border:0;padding:.5em 1em;background:none;overflow:auto}.ui-dialog .ui-dialog-buttonpane{text-align:left;border-width:1px 0 0 0;background-image:none;margin-top:.5em;padding:.3em 1em .5em .4em}.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset{float:right}.ui-dialog .ui-dialog-buttonpane button{margin:.5em .4em .5em 0;cursor:pointer}.ui-dialog .ui-resizable-n{height:2px;top:0}.ui-dialog .ui-resizable-e{width:2px;right:0}.ui-dialog .ui-resizable-s{height:2px;bottom:0}.ui-dialog .ui-resizable-w{width:2px;left:0}.ui-dialog .ui-resizable-se,.ui-dialog .ui-resizable-sw,.ui-dialog .ui-resizable-ne,.ui-dialog .ui-resizable-nw{width:7px;height:7px}.ui-dialog .ui-resizable-se{right:0;bottom:0}.ui-dialog .ui-resizable-sw{left:0;bottom:0}.ui-dialog .ui-resizable-ne{right:0;top:0}.ui-dialog .ui-resizable-nw{left:0;top:0}.ui-draggable .ui-dialog-titlebar{cursor:move}.ui-draggable-handle{touch-action:none}.ui-resizable{position:relative}.ui-resizable-handle{position:absolute;font-size:0.1px;display:block;touch-action:none}.ui-resizable-disabled .ui-resizable-handle,.ui-resizable-autohide .ui-resizable-handle{display:none}.ui-resizable-n{cursor:n-resize;height:7px;width:100%;top:-5px;left:0}.ui-resizable-s{cursor:s-resize;height:7px;width:100%;bottom:-5px;left:0}.ui-resizable-e{cursor:e-resize;width:7px;right:-5px;top:0;height:100%}.ui-resizable-w{cursor:w-resize;width:7px;left:-5px;top:0;height:100%}.ui-resizable-se{cursor:se-resize;width:12px;height:12px;right:1px;bottom:1px}.ui-resizable-sw{cursor:sw-resize;width:9px;height:9px;left:-5px;bottom:-5px}.ui-resizable-nw{cursor:nw-resize;width:9px;height:9px;left:-5px;top:-5px}.ui-resizable-ne{cursor:ne-resize;width:9px;height:9px;right:-5px;top:-5px}.ui-progressbar{height:2em;text-align:left;overflow:hidden}.ui-progressbar .ui-progressbar-value{margin:-1px;height:100%}.ui-progressbar .ui-progressbar-overlay{background:url("data:image/gif;base64,R0lGODlhKAAoAIABAAAAAP///yH/C05FVFNDQVBFMi4wAwEAAAAh+QQJAQABACwAAAAAKAAoAAACkYwNqXrdC52DS06a7MFZI+4FHBCKoDeWKXqymPqGqxvJrXZbMx7Ttc+w9XgU2FB3lOyQRWET2IFGiU9m1frDVpxZZc6bfHwv4c1YXP6k1Vdy292Fb6UkuvFtXpvWSzA+HycXJHUXiGYIiMg2R6W459gnWGfHNdjIqDWVqemH2ekpObkpOlppWUqZiqr6edqqWQAAIfkECQEAAQAsAAAAACgAKAAAApSMgZnGfaqcg1E2uuzDmmHUBR8Qil95hiPKqWn3aqtLsS18y7G1SzNeowWBENtQd+T1JktP05nzPTdJZlR6vUxNWWjV+vUWhWNkWFwxl9VpZRedYcflIOLafaa28XdsH/ynlcc1uPVDZxQIR0K25+cICCmoqCe5mGhZOfeYSUh5yJcJyrkZWWpaR8doJ2o4NYq62lAAACH5BAkBAAEALAAAAAAoACgAAAKVDI4Yy22ZnINRNqosw0Bv7i1gyHUkFj7oSaWlu3ovC8GxNso5fluz3qLVhBVeT/Lz7ZTHyxL5dDalQWPVOsQWtRnuwXaFTj9jVVh8pma9JjZ4zYSj5ZOyma7uuolffh+IR5aW97cHuBUXKGKXlKjn+DiHWMcYJah4N0lYCMlJOXipGRr5qdgoSTrqWSq6WFl2ypoaUAAAIfkECQEAAQAsAAAAACgAKAAAApaEb6HLgd/iO7FNWtcFWe+ufODGjRfoiJ2akShbueb0wtI50zm02pbvwfWEMWBQ1zKGlLIhskiEPm9R6vRXxV4ZzWT2yHOGpWMyorblKlNp8HmHEb/lCXjcW7bmtXP8Xt229OVWR1fod2eWqNfHuMjXCPkIGNileOiImVmCOEmoSfn3yXlJWmoHGhqp6ilYuWYpmTqKUgAAIfkECQEAAQAsAAAAACgAKAAAApiEH6kb58biQ3FNWtMFWW3eNVcojuFGfqnZqSebuS06w5V80/X02pKe8zFwP6EFWOT1lDFk8rGERh1TTNOocQ61Hm4Xm2VexUHpzjymViHrFbiELsefVrn6XKfnt2Q9G/+Xdie499XHd2g4h7ioOGhXGJboGAnXSBnoBwKYyfioubZJ2Hn0RuRZaflZOil56Zp6iioKSXpUAAAh+QQJAQABACwAAAAAKAAoAAACkoQRqRvnxuI7kU1a1UU5bd5tnSeOZXhmn5lWK3qNTWvRdQxP8qvaC+/yaYQzXO7BMvaUEmJRd3TsiMAgswmNYrSgZdYrTX6tSHGZO73ezuAw2uxuQ+BbeZfMxsexY35+/Qe4J1inV0g4x3WHuMhIl2jXOKT2Q+VU5fgoSUI52VfZyfkJGkha6jmY+aaYdirq+lQAACH5BAkBAAEALAAAAAAoACgAAAKWBIKpYe0L3YNKToqswUlvznigd4wiR4KhZrKt9Upqip61i9E3vMvxRdHlbEFiEXfk9YARYxOZZD6VQ2pUunBmtRXo1Lf8hMVVcNl8JafV38aM2/Fu5V16Bn63r6xt97j09+MXSFi4BniGFae3hzbH9+hYBzkpuUh5aZmHuanZOZgIuvbGiNeomCnaxxap2upaCZsq+1kAACH5BAkBAAEALAAAAAAoACgAAAKXjI8By5zf4kOxTVrXNVlv1X0d8IGZGKLnNpYtm8Lr9cqVeuOSvfOW79D9aDHizNhDJidFZhNydEahOaDH6nomtJjp1tutKoNWkvA6JqfRVLHU/QUfau9l2x7G54d1fl995xcIGAdXqMfBNadoYrhH+Mg2KBlpVpbluCiXmMnZ2Sh4GBqJ+ckIOqqJ6LmKSllZmsoq6wpQAAAh+QQJAQABACwAAAAAKAAoAAAClYx/oLvoxuJDkU1a1YUZbJ59nSd2ZXhWqbRa2/gF8Gu2DY3iqs7yrq+xBYEkYvFSM8aSSObE+ZgRl1BHFZNr7pRCavZ5BW2142hY3AN/zWtsmf12p9XxxFl2lpLn1rseztfXZjdIWIf2s5dItwjYKBgo9yg5pHgzJXTEeGlZuenpyPmpGQoKOWkYmSpaSnqKileI2FAAACH5BAkBAAEALAAAAAAoACgAAAKVjB+gu+jG4kORTVrVhRlsnn2dJ3ZleFaptFrb+CXmO9OozeL5VfP99HvAWhpiUdcwkpBH3825AwYdU8xTqlLGhtCosArKMpvfa1mMRae9VvWZfeB2XfPkeLmm18lUcBj+p5dnN8jXZ3YIGEhYuOUn45aoCDkp16hl5IjYJvjWKcnoGQpqyPlpOhr3aElaqrq56Bq7VAAAOw==");height:100%;opacity:0.25}.ui-progressbar-indeterminate .ui-progressbar-value{background-image:none}.ui-selectable{touch-action:none}.ui-selectable-helper{position:absolute;z-index:100;border:1px dotted black}.ui-selectmenu-menu{padding:0;margin:0;position:absolute;top:0;left:0;display:none}.ui-selectmenu-menu .ui-menu{overflow:auto;overflow-x:hidden;padding-bottom:1px}.ui-selectmenu-menu .ui-menu .ui-selectmenu-optgroup{font-size:1em;font-weight:bold;line-height:1.5;padding:2px 0.4em;margin:0.5em 0 0 0;height:auto;border:0}.ui-selectmenu-open{display:block}.ui-selectmenu-text{display:block;margin-right:20px;overflow:hidden;text-overflow:ellipsis}.ui-selectmenu-button.ui-button{text-align:left;white-space:nowrap;width:14em}.ui-selectmenu-icon.ui-icon{float:right;margin-top:0}.ui-slider{position:relative;text-align:left}.ui-slider .ui-slider-handle{position:absolute;z-index:2;width:1.2em;height:1.2em;cursor:pointer;touch-action:none}.ui-slider .ui-slider-range{position:absolute;z-index:1;font-size:.7em;display:block;border:0;background-position:0 0}.ui-slider-horizontal{height:.8em}.ui-slider-horizontal .ui-slider-handle{top:-.3em;margin-left:-.6em}.ui-slider-horizontal .ui-slider-range{top:0;height:100%}.ui-slider-horizontal .ui-slider-range-min{left:0}.ui-slider-horizontal .ui-slider-range-max{right:0}.ui-slider-vertical{width:.8em;height:100px}.ui-slider-vertical .ui-slider-handle{left:-.3em;margin-left:0;margin-bottom:-.6em}.ui-slider-vertical .ui-slider-range{left:0;width:100%}.ui-slider-vertical .ui-slider-range-min{bottom:0}.ui-slider-vertical .ui-slider-range-max{top:0}.ui-sortable-handle{touch-action:none}.ui-spinner{position:relative;display:inline-block;overflow:hidden;padding:0;vertical-align:middle}.ui-spinner-input{border:none;background:none;color:inherit;padding:.222em 0;margin:.2em 0;vertical-align:middle;margin-left:.4em;margin-right:2em}.ui-spinner-button{width:1.6em;height:50%;font-size:.5em;padding:0;margin:0;text-align:center;position:absolute;cursor:default;display:block;overflow:hidden;right:0}.ui-spinner a.ui-spinner-button{border-top-style:none;border-bottom-style:none;border-right-style:none}.ui-spinner-up{top:0}.ui-spinner-down{bottom:0}.ui-tabs{position:relative;padding:.2em}.ui-tabs .ui-tabs-nav{margin:0;padding:.2em .2em 0}.ui-tabs .ui-tabs-nav li{list-style:none;float:left;position:relative;top:0;margin:1px .2em 0 0;border-bottom-width:0;padding:0;white-space:nowrap}.ui-tabs .ui-tabs-nav .ui-tabs-anchor{float:left;padding:.5em 1em;text-decoration:none}.ui-tabs .ui-tabs-nav li.ui-tabs-active{margin-bottom:-1px;padding-bottom:1px}.ui-tabs .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor,.ui-tabs .ui-tabs-nav li.ui-state-disabled .ui-tabs-anchor,.ui-tabs .ui-tabs-nav li.ui-tabs-loading .ui-tabs-anchor{cursor:text}.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor{cursor:pointer}.ui-tabs .ui-tabs-panel{display:block;border-width:0;padding:1em 1.4em;background:none}.ui-tooltip{padding:8px;position:absolute;z-index:9999;max-width:300px}body .ui-tooltip{border-width:2px}.ui-widget{font-family:Arial,Helvetica,sans-serif;font-size:1em}.ui-widget .ui-widget{font-size:1em}.ui-widget input,.ui-widget select,.ui-widget textarea,.ui-widget button{font-family:Arial,Helvetica,sans-serif;font-size:1em}.ui-widget.ui-widget-content{border:1px solid #c5c5c5}.ui-widget-content{border:1px solid #ddd;background:#fff;color:#333}.ui-widget-content a{color:#333}.ui-widget-header{border:1px solid #ddd;background:#e9e9e9;color:#333;font-weight:bold}.ui-widget-header a{color:#333}.ui-state-default,.ui-widget-content .ui-state-default,.ui-widget-header .ui-state-default,.ui-button,html .ui-button.ui-state-disabled:hover,html .ui-button.ui-state-disabled:active{border:1px solid #c5c5c5;background:#f6f6f6;font-weight:normal;color:#454545}.ui-state-default a,.ui-state-default a:link,.ui-state-default a:visited,a.ui-button,a:link.ui-button,a:visited.ui-button,.ui-button{color:#454545;text-decoration:none}.ui-state-hover,.ui-widget-content .ui-state-hover,.ui-widget-header .ui-state-hover,.ui-state-focus,.ui-widget-content .ui-state-focus,.ui-widget-header .ui-state-focus,.ui-button:hover,.ui-button:focus{border:1px solid #ccc;background:#ededed;font-weight:normal;color:#2b2b2b}.ui-state-hover a,.ui-state-hover a:hover,.ui-state-hover a:link,.ui-state-hover a:visited,.ui-state-focus a,.ui-state-focus a:hover,.ui-state-focus a:link,.ui-state-focus a:visited,a.ui-button:hover,a.ui-button:focus{color:#2b2b2b;text-decoration:none}.ui-visual-focus{box-shadow:0 0 3px 1px rgb(94,158,214)}.ui-state-active,.ui-widget-content .ui-state-active,.ui-widget-header .ui-state-active,a.ui-button:active,.ui-button:active,.ui-button.ui-state-active:hover{border:1px solid #003eff;background:#007fff;font-weight:normal;color:#fff}.ui-icon-background,.ui-state-active .ui-icon-background{border:#003eff;background-color:#fff}.ui-state-active a,.ui-state-active a:link,.ui-state-active a:visited{color:#fff;text-decoration:none}.ui-state-highlight,.ui-widget-content .ui-state-highlight,.ui-widget-header .ui-state-highlight{border:1px solid #dad55e;background:#fffa90;color:#777620}.ui-state-checked{border:1px solid #dad55e;background:#fffa90}.ui-state-highlight a,.ui-widget-content .ui-state-highlight a,.ui-widget-header .ui-state-highlight a{color:#777620}.ui-state-error,.ui-widget-content .ui-state-error,.ui-widget-header .ui-state-error{border:1px solid #f1a899;background:#fddfdf;color:#5f3f3f}.ui-state-error a,.ui-widget-content .ui-state-error a,.ui-widget-header .ui-state-error a{color:#5f3f3f}.ui-state-error-text,.ui-widget-content .ui-state-error-text,.ui-widget-header .ui-state-error-text{color:#5f3f3f}.ui-priority-primary,.ui-widget-content .ui-priority-primary,.ui-widget-header .ui-priority-primary{font-weight:bold}.ui-priority-secondary,.ui-widget-content .ui-priority-secondary,.ui-widget-header .ui-priority-secondary{opacity:.7;font-weight:normal}.ui-state-disabled,.ui-widget-content .ui-state-disabled,.ui-widget-header .ui-state-disabled{opacity:.35;background-image:none}.ui-icon{width:16px;height:16px}.ui-icon,.ui-widget-content .ui-icon{background-image:url("../../lib/jquery-ui/images/ui-icons_444444_256x240.png")}.ui-widget-header .ui-icon{background-image:url("../../lib/jquery-ui/images/ui-icons_444444_256x240.png")}.ui-state-hover .ui-icon,.ui-state-focus .ui-icon,.ui-button:hover .ui-icon,.ui-button:focus .ui-icon{background-image:url("../../lib/jquery-ui/images/ui-icons_555555_256x240.png")}.ui-state-active .ui-icon,.ui-button:active .ui-icon{background-image:url("../../lib/jquery-ui/images/ui-icons_ffffff_256x240.png")}.ui-state-highlight .ui-icon,.ui-button .ui-state-highlight.ui-icon{background-image:url("../../lib/jquery-ui/images/ui-icons_777620_256x240.png")}.ui-state-error .ui-icon,.ui-state-error-text .ui-icon{background-image:url("../../lib/jquery-ui/images/ui-icons_cc0000_256x240.png")}.ui-button .ui-icon{background-image:url("../../lib/jquery-ui/images/ui-icons_777777_256x240.png")}.ui-icon-blank.ui-icon-blank.ui-icon-blank{background-image:none}.ui-icon-caret-1-n{background-position:0 0}.ui-icon-caret-1-ne{background-position:-16px 0}.ui-icon-caret-1-e{background-position:-32px 0}.ui-icon-caret-1-se{background-position:-48px 0}.ui-icon-caret-1-s{background-position:-65px 0}.ui-icon-caret-1-sw{background-position:-80px 0}.ui-icon-caret-1-w{background-position:-96px 0}.ui-icon-caret-1-nw{background-position:-112px 0}.ui-icon-caret-2-n-s{background-position:-128px 0}.ui-icon-caret-2-e-w{background-position:-144px 0}.ui-icon-triangle-1-n{background-position:0 -16px}.ui-icon-triangle-1-ne{background-position:-16px -16px}.ui-icon-triangle-1-e{background-position:-32px -16px}.ui-icon-triangle-1-se{background-position:-48px -16px}.ui-icon-triangle-1-s{background-position:-65px -16px}.ui-icon-triangle-1-sw{background-position:-80px -16px}.ui-icon-triangle-1-w{background-position:-96px -16px}.ui-icon-triangle-1-nw{background-position:-112px -16px}.ui-icon-triangle-2-n-s{background-position:-128px -16px}.ui-icon-triangle-2-e-w{background-position:-144px -16px}.ui-icon-arrow-1-n{background-position:0 -32px}.ui-icon-arrow-1-ne{background-position:-16px -32px}.ui-icon-arrow-1-e{background-position:-32px -32px}.ui-icon-arrow-1-se{background-position:-48px -32px}.ui-icon-arrow-1-s{background-position:-65px -32px}.ui-icon-arrow-1-sw{background-position:-80px -32px}.ui-icon-arrow-1-w{background-position:-96px -32px}.ui-icon-arrow-1-nw{background-position:-112px -32px}.ui-icon-arrow-2-n-s{background-position:-128px -32px}.ui-icon-arrow-2-ne-sw{background-position:-144px -32px}.ui-icon-arrow-2-e-w{background-position:-160px -32px}.ui-icon-arrow-2-se-nw{background-position:-176px -32px}.ui-icon-arrowstop-1-n{background-position:-192px -32px}.ui-icon-arrowstop-1-e{background-position:-208px -32px}.ui-icon-arrowstop-1-s{background-position:-224px -32px}.ui-icon-arrowstop-1-w{background-position:-240px -32px}.ui-icon-arrowthick-1-n{background-position:1px -48px}.ui-icon-arrowthick-1-ne{background-position:-16px -48px}.ui-icon-arrowthick-1-e{background-position:-32px -48px}.ui-icon-arrowthick-1-se{background-position:-48px -48px}.ui-icon-arrowthick-1-s{background-position:-64px -48px}.ui-icon-arrowthick-1-sw{background-position:-80px -48px}.ui-icon-arrowthick-1-w{background-position:-96px -48px}.ui-icon-arrowthick-1-nw{background-position:-112px -48px}.ui-icon-arrowthick-2-n-s{background-position:-128px -48px}.ui-icon-arrowthick-2-ne-sw{background-position:-144px -48px}.ui-icon-arrowthick-2-e-w{background-position:-160px -48px}.ui-icon-arrowthick-2-se-nw{background-position:-176px -48px}.ui-icon-arrowthickstop-1-n{background-position:-192px -48px}.ui-icon-arrowthickstop-1-e{background-position:-208px -48px}.ui-icon-arrowthickstop-1-s{background-position:-224px -48px}.ui-icon-arrowthickstop-1-w{background-position:-240px -48px}.ui-icon-arrowreturnthick-1-w{background-position:0 -64px}.ui-icon-arrowreturnthick-1-n{background-position:-16px -64px}.ui-icon-arrowreturnthick-1-e{background-position:-32px -64px}.ui-icon-arrowreturnthick-1-s{background-position:-48px -64px}.ui-icon-arrowreturn-1-w{background-position:-64px -64px}.ui-icon-arrowreturn-1-n{background-position:-80px -64px}.ui-icon-arrowreturn-1-e{background-position:-96px -64px}.ui-icon-arrowreturn-1-s{background-position:-112px -64px}.ui-icon-arrowrefresh-1-w{background-position:-128px -64px}.ui-icon-arrowrefresh-1-n{background-position:-144px -64px}.ui-icon-arrowrefresh-1-e{background-position:-160px -64px}.ui-icon-arrowrefresh-1-s{background-position:-176px -64px}.ui-icon-arrow-4{background-position:0 -80px}.ui-icon-arrow-4-diag{background-position:-16px -80px}.ui-icon-extlink{background-position:-32px -80px}.ui-icon-newwin{background-position:-48px -80px}.ui-icon-refresh{background-position:-64px -80px}.ui-icon-shuffle{background-position:-80px -80px}.ui-icon-transfer-e-w{background-position:-96px -80px}.ui-icon-transferthick-e-w{background-position:-112px -80px}.ui-icon-folder-collapsed{background-position:0 -96px}.ui-icon-folder-open{background-position:-16px -96px}.ui-icon-document{background-position:-32px -96px}.ui-icon-document-b{background-position:-48px -96px}.ui-icon-note{background-position:-64px -96px}.ui-icon-mail-closed{background-position:-80px -96px}.ui-icon-mail-open{background-position:-96px -96px}.ui-icon-suitcase{background-position:-112px -96px}.ui-icon-comment{background-position:-128px -96px}.ui-icon-person{background-position:-144px -96px}.ui-icon-print{background-position:-160px -96px}.ui-icon-trash{background-position:-176px -96px}.ui-icon-locked{background-position:-192px -96px}.ui-icon-unlocked{background-position:-208px -96px}.ui-icon-bookmark{background-position:-224px -96px}.ui-icon-tag{background-position:-240px -96px}.ui-icon-home{background-position:0 -112px}.ui-icon-flag{background-position:-16px -112px}.ui-icon-calendar{background-position:-32px -112px}.ui-icon-cart{background-position:-48px -112px}.ui-icon-pencil{background-position:-64px -112px}.ui-icon-clock{background-position:-80px -112px}.ui-icon-disk{background-position:-96px -112px}.ui-icon-calculator{background-position:-112px -112px}.ui-icon-zoomin{background-position:-128px -112px}.ui-icon-zoomout{background-position:-144px -112px}.ui-icon-search{background-position:-160px -112px}.ui-icon-wrench{background-position:-176px -112px}.ui-icon-gear{background-position:-192px -112px}.ui-icon-heart{background-position:-208px -112px}.ui-icon-star{background-position:-224px -112px}.ui-icon-link{background-position:-240px -112px}.ui-icon-cancel{background-position:0 -128px}.ui-icon-plus{background-position:-16px -128px}.ui-icon-plusthick{background-position:-32px -128px}.ui-icon-minus{background-position:-48px -128px}.ui-icon-minusthick{background-position:-64px -128px}.ui-icon-close{background-position:-80px -128px}.ui-icon-closethick{background-position:-96px -128px}.ui-icon-key{background-position:-112px -128px}.ui-icon-lightbulb{background-position:-128px -128px}.ui-icon-scissors{background-position:-144px -128px}.ui-icon-clipboard{background-position:-160px -128px}.ui-icon-copy{background-position:-176px -128px}.ui-icon-contact{background-position:-192px -128px}.ui-icon-image{background-position:-208px -128px}.ui-icon-video{background-position:-224px -128px}.ui-icon-script{background-position:-240px -128px}.ui-icon-alert{background-position:0 -144px}.ui-icon-info{background-position:-16px -144px}.ui-icon-notice{background-position:-32px -144px}.ui-icon-help{background-position:-48px -144px}.ui-icon-check{background-position:-64px -144px}.ui-icon-bullet{background-position:-80px -144px}.ui-icon-radio-on{background-position:-96px -144px}.ui-icon-radio-off{background-position:-112px -144px}.ui-icon-pin-w{background-position:-128px -144px}.ui-icon-pin-s{background-position:-144px -144px}.ui-icon-play{background-position:0 -160px}.ui-icon-pause{background-position:-16px -160px}.ui-icon-seek-next{background-position:-32px -160px}.ui-icon-seek-prev{background-position:-48px -160px}.ui-icon-seek-end{background-position:-64px -160px}.ui-icon-seek-start{background-position:-80px -160px}.ui-icon-seek-first{background-position:-80px -160px}.ui-icon-stop{background-position:-96px -160px}.ui-icon-eject{background-position:-112px -160px}.ui-icon-volume-off{background-position:-128px -160px}.ui-icon-volume-on{background-position:-144px -160px}.ui-icon-power{background-position:0 -176px}.ui-icon-signal-diag{background-position:-16px -176px}.ui-icon-signal{background-position:-32px -176px}.ui-icon-battery-0{background-position:-48px -176px}.ui-icon-battery-1{background-position:-64px -176px}.ui-icon-battery-2{background-position:-80px -176px}.ui-icon-battery-3{background-position:-96px -176px}.ui-icon-circle-plus{background-position:0 -192px}.ui-icon-circle-minus{background-position:-16px -192px}.ui-icon-circle-close{background-position:-32px -192px}.ui-icon-circle-triangle-e{background-position:-48px -192px}.ui-icon-circle-triangle-s{background-position:-64px -192px}.ui-icon-circle-triangle-w{background-position:-80px -192px}.ui-icon-circle-triangle-n{background-position:-96px -192px}.ui-icon-circle-arrow-e{background-position:-112px -192px}.ui-icon-circle-arrow-s{background-position:-128px -192px}.ui-icon-circle-arrow-w{background-position:-144px -192px}.ui-icon-circle-arrow-n{background-position:-160px -192px}.ui-icon-circle-zoomin{background-position:-176px -192px}.ui-icon-circle-zoomout{background-position:-192px -192px}.ui-icon-circle-check{background-position:-208px -192px}.ui-icon-circlesmall-plus{background-position:0 -208px}.ui-icon-circlesmall-minus{background-position:-16px -208px}.ui-icon-circlesmall-close{background-position:-32px -208px}.ui-icon-squaresmall-plus{background-position:-48px -208px}.ui-icon-squaresmall-minus{background-position:-64px -208px}.ui-icon-squaresmall-close{background-position:-80px -208px}.ui-icon-grip-dotted-vertical{background-position:0 -224px}.ui-icon-grip-dotted-horizontal{background-position:-16px -224px}.ui-icon-grip-solid-vertical{background-position:-32px -224px}.ui-icon-grip-solid-horizontal{background-position:-48px -224px}.ui-icon-gripsmall-diagonal-se{background-position:-64px -224px}.ui-icon-grip-diagonal-se{background-position:-80px -224px}.ui-corner-all,.ui-corner-top,.ui-corner-left,.ui-corner-tl{border-top-left-radius:3px}.ui-corner-all,.ui-corner-top,.ui-corner-right,.ui-corner-tr{border-top-right-radius:3px}.ui-corner-all,.ui-corner-bottom,.ui-corner-left,.ui-corner-bl{border-bottom-left-radius:3px}.ui-corner-all,.ui-corner-bottom,.ui-corner-right,.ui-corner-br{border-bottom-right-radius:3px}.ui-widget-overlay{background:#aaa;opacity:.3}.ui-widget-shadow{box-shadow:0 0 5px #666} /*@font-face { font-family: 'Cedarville'; font-style: normal; font-weight: 500; src: url("../Fonts/CedarvilleCursive-Regular.ttf") format('woff2'); } @font-face { font-family: 'Dawning'; font-style: normal; font-weight: 500; src: url("../Fonts/DawningofaNewDay-Regular.ttf") format('woff2'); } @font-face { font-family: 'Delafield'; font-style: normal; font-weight: 500; src: url("../Fonts/MrsSaintDelafield-Regular.ttf") format('woff2'); } @font-face { font-family: 'Zeyada'; font-style: normal; font-weight: 500; src: url("../Fonts/Zeyada-Regular.ttf") format('woff2'); } */ @font-face { font-family: 'Material Symbols Outlined'; font-style: normal; font-weight: 400; src: url("../Fonts/MaterialIconsOutlined-Regular.otf") format('woff2'); } /* Haffer Thin (font-weight: 100 or 200) */ @font-face { font-family: 'Haffer'; src: url('../Fonts/Haffer-Thin.otf') format('opentype'); font-weight: 200; font-style: normal; } /* Haffer Light (font-weight: 300) */ @font-face { font-family: 'Haffer'; src: url('../Fonts/Haffer-Light.otf') format('opentype'); font-weight: 400; font-style: normal; } /* Terrible font, bold looks like cartoon characters */ /* Haffer Regular (font-weight: 400 - default "normal") @font-face { font-family: 'Haffer'; src: url('../Fonts/Haffer-Regular.otf') format('opentype'); font-weight: 600; font-style: normal; } */ /* Haffer Heavy (font-weight: 700 or 800 - treated as "bold") @font-face { font-family: 'Haffer'; src: url('../Fonts/Haffer-Heavy.otf') format('opentype'); font-weight: 800; font-style: normal; } */ * { padding: 0; margin: 0; box-sizing: border-box; font-family: "Haffer", 'Segoe UI', Verdana, sans-serif; letter-spacing: 0.6px; font-size: 14px; } html { width: 100%; } body { padding-top: 0; -webkit-font-smoothing: antialiased; } #RenderBody { background-color: #FFF; padding-top: 60px; padding-bottom: 40px; min-height: 100vh; box-shadow: 1px 1px 30px rgba(0,0,0,0.05), -1px -1px 30px rgba(0,0,0,0.05); } #CeremonyContainer { height: auto; background-color: #FCFCFC; } /* Helpers */ .full-width{ width: 100%; } .text-align-center { text-align: center; } /* FLEX HELPERS https://css-tricks.com/snippets/css/a-guide-to-flexbox/ */ .flex__center-content { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; } .flex__space-between { display: flex; justify-content: space-between !important; } .flex__space-around { display: flex; justify-content: space-around !important; } .flex__start { display: flex; justify-content: flex-start !important; } .flex__end { display: flex; justify-content: flex-end !important; } .flex__align-center { display: flex; align-items: center !important; } .flex__justify-center { display: flex; justify-content: center !important; flex-wrap: wrap; } .flex__align-right { display: flex; justify-content: right !important; } .flex__nowrap { display: flex; flex-wrap: nowrap !important; } .flex__fill-container { width: 100%; } /* Will have to add elements here*/ .flex__fill-container button { flex-grow: 1; } .flex__column { display: flex; flex-direction: column; /* Align items in a column */ align-items: center; /* Center items horizontally */ justify-content: center; /* Center items vertically */ } .flex-center { display: flex; justify-content: center; align-items: center; } .flex-right { display: flex; justify-content: flex-end; } .flex-between { display: flex; justify-content: space-between; } .flex-start { display: flex; justify-content: flex-start; } .flex-end { display: flex; justify-content: flex-start; } .no-wrap { flex-wrap: nowrap; } /* GRID HELPERS */ .er__grid-half { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 2fr)); grid-gap: 20px 20px; align-items: start; justify-content: space-between; align-content: space-between; } @media (min-width: 1024px) { .er__grid-half { grid-template-columns: repeat(2, minmax(200px, 2fr)); /* On larger screens, allow up to 2 columns */ } } @media (max-width: 600px) { .wrapper { grid-template-columns: 1fr; } } .er__grid-third { display: grid; grid-template-columns: repeat(auto-fit, minmax(30%, 3fr)); grid-gap: 20px 40px; align-items: start; justify-content: space-between; } .er__grid-left-third { display: grid; grid-template-columns: 1fr 2fr; grid-gap: 20px 40px; align-items: start; justify-content: space-between; } .er__grid-right-third { display: grid; grid-template-columns: 2fr 1fr; grid-gap: 20px 40px; align-items: start; justify-content: space-between; } .er__grid-fill { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); grid-gap: 10px; align-items: start; justify-content: space-between; width: 100%; /* Ensure the grid fills its container */ } /* Padding and Margin Helpers */ .padding-top-0, .no-padding-top { padding-top: 0px !important; } .padding-top-10 { padding-top: 10px !important; } .padding-top-20 { padding-top: 20px !important; } .padding-top-30 { padding-top: 30px !important; } .padding-top-40 { padding-top: 40px !important; } .padding-right-0, .no-padding-right { padding-right: 0px !important; } .padding-right-10 { padding-right: 10px !important; } .padding-right-20 { padding-right: 20px !important; } .padding-right-30 { padding-right: 30px !important; } .padding-right-40 { padding-right: 40px !important; } .padding-bottom-0, .no-padding-bottom { padding-bottom: 0px !important; } .padding-bottom-10 { padding-bottom: 10px !important; } .padding-bottom-20 { padding-bottom: 20px !important; } .padding-bottom-30 { padding-bottom: 30px !important; } .padding-bottom-40 { padding-bottom: 40px !important; } .padding-left-0, .no-padding-left { padding-left: 0px !important; } .padding-left-10 { padding-left: 10px !important; } .padding-left-15 { padding-left: 15px !important; } .padding-left-20 { padding-left: 20px !important; } .padding-left-30 { padding-left: 30px !important; } .padding-left-40 { padding-left: 40px !important; } .margin-top-0, .no-margin-top { margin-top: 0 !important; } .margin-top-20 { margin-top: 20px !important; } .margin-top-30 { margin-top: 30px !important; } .margin-top-40 { margin-top: 40px !important; } .margin-right-0, .no-margin-right { margin-right: 0 !important; } .margin-right-10 { margin-right: 10px !important; } .margin-right-20 { margin-right: 20px !important; } .margin-right-30 { margin-right: 30px !important; } .margin-right-40 { margin-right: 40px !important; } .margin-bottom-0, .no-margin-bottom { margin-bottom: 0 !important; } .margin-bottom-20 { margin-bottom: 20px !important; } .margin-bottom-30 { margin-bottom: 30px !important; } .margin-bottom-40 { margin-bottom: 40px !important; } .margin-left-0, .no-margin-left { margin-left: 0 !important; } .margin-left-10 { margin-left: 10px !important; } .margin-left-20 { margin-left: 20px !important; } .margin-left-30 { margin-left: 30px !important; } .margin-left-40 { margin-left: 40px !important; } .no-padding { padding: 0 !important; } .padding-10 { padding: 10px !important; } .padding-20{ padding: 20px !important; } .padding-30 { padding: 30px !important; } .padding-40 { padding: 40px !important; } .no-margin { margin: 0 !important; } .margin-10 { margin: 10px !important; } .margin-20{ margin: 20px !important; } .margin-30 { margin: 30px !important; } .margin-40 { margin: 40px !important; } hr { border-top: 1px solid #C4C4C4; } @media(max-width: 800px) { .break-and-center { display: block !important; } .break-and-center > * { display: block !important; width: 100% !important; text-align: center !important; } } section.signing-area { padding-top: 20px; } @media (max-width: 500px) { #CeremonyContainer { padding: 12px !important; } li.document-item .management-buttons { width: 100%; justify-content: center; text-align: center; } .no-wrap.mobile-xs-wrap { flex-wrap: wrap; } } @media (max-width: 400px) { .hidden-xs { display: none; } } #indicator-arrow { display: none; position: fixed; left: 0; top: 50%; color: var(--color-action-primary); width: 40px; height: 40px; font-size: 40px; z-index: 900; transition: top left .4s; -webkit-transition: top left .4s; -moz-transition: top left .4s; -ms-transition: top left .4s; /*ie 10*/ } #indicator-arrow i.fa { font-size: 40px !important; } #identity-questions { padding: 40px 10px 40px 10px; } #instructions { width: 100%; } #instructions div { width: 100%; height: auto; max-width: 400px; padding: 10px; margin: 0 auto 0 auto; text-align: center; } #instructions h5 { text-align: center; font-size: 17px; font-weight: 500; word-break: normal; white-space: pre-wrap; } /*---------------------*/ /* Indicator Arrow */ /*---------------------*/ #next-indicator { position: absolute; height: auto; min-height: 55px; width: 40px; bottom: -60px; right: 0; text-align: center; } #next-indicator h6 { width: 100%; color: var(--color-font-primary); font-size: 14px; text-align: center; } #next-indicator i.fa { color: var(--color-action-primary); font-size: 30px; text-align: center; } /*--------------------------------------------------------------- LOADER */ @-webkit-keyframes pageloader { 0% { -ms-transform: rotate(0deg); -moz-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } 100% { -ms-transform: rotate(360deg); -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } } @-moz-keyframes pageloader { 0% { -ms-transform: rotate(0deg); -moz-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } 100% { -ms-transform: rotate(360deg); -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } } @-ms-keyframes pageloader { 0% { -ms-transform: rotate(0deg); -moz-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } 100% { -ms-transform: rotate(360deg); -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes pageloader { 0% { -ms-transform: rotate(0deg); -moz-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } 100% { -ms-transform: rotate(360deg); -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } } .uil-ring-css { background: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 1100; } .uil-ring-css > div { position: fixed; display: block; width: 50px; height: 50px; top: 35%; left: 50%; transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); border-radius: 80px; box-shadow: 0 3px 0 0 #85d6de; -ms-animation: pageloader 1s linear infinite; -moz-animation: pageloader 1s linear infinite; -webkit-animation: pageloader 1s linear infinite; animation: pageloader 1s linear infinite; } /* FONT HELPERS */ .truncate { width: 100%; overflow: hidden; text-overflow: ellipsis; } .block-text { overflow: hidden; position: relative; padding: 0; line-height: 18px; height: auto; max-height: 54px; /* max-height = line-height (1.2) * lines max number (3) */ text-align: left; /* place for '...' */ /*margin-right: -1em;*/ padding-right: 1em; } .block-text:before { content: '...'; position: absolute; right: 0; bottom: 0; } /* hide ... if we have text, which is less than or equal to max lines */ .block-text:after { /* points in the end */ content: ''; /* absolute position */ position: absolute; /* set position to right bottom corner of text */ right: 0; /* set width and height */ width: 1em; height: 1em; margin-top: 0.2em; /* bg color = bg color under block */ background: white; } .svg { color: #fff; margin-top: -4px; margin-left: 0; margin-right: 5px; } #signing-list { /*For indicator arrow*/ position: relative; } /* ------------------------------------------------------------------- DOCUMENT-ITEM LISTS FOR REVIEW, PRINTANDSIGN AND CUSTOMER REQUESTS ------------------------------------------------------------------------*/ ul.fi-list li.document-item { display: block; width: 100%; min-height: 50px; height: auto; padding: 10px; list-style: none; } li.document-item span.title { height: auto; width: 70%; max-width: 100%; cursor: pointer; color: var(--color-action-primary); font-size: 16px; line-height: 20px; font-weight: 500; } li.document-item span.note { line-height: 15px; font-size: 12px; font-weight: normal; word-break: break-word; color: #3c4043; padding-top: 12px; } li.document-item .management-buttons button { width: 35px; height: 35px; line-height: 35px; font-size: 25px; background-color: #FFFFFF; color: var(--color-action-primary); padding: 0; text-align: center; margin: 0 8px 0 8px; border-radius: 50%; border-color: #ccc; box-shadow: 1px 1px 5px rgba(0,0,0,0.2); font-size: 18px; } li.document-item span.description { min-height: 10px; height: auto; margin-top: 15px; } @media (max-width: 768px) { ul.fi-list li div { font-size: 90%; } ul.fi-list li div h5 { font-size: 90%; } } @media(max-width: 700px) { ul.fi-list li div.management-buttons div.delete-upload-replace { justify-content: flex-start; } ul.fi-list li div.management-buttons div.delete-upload-replace button { display: inline-block; vertical-align: top; } ul.fi-list li div.management-buttons div.delete-upload-replace button:not(.icon) { width: 110px; max-height: 130px; min-width: 130px; } ul.fi-list li div.management-buttons div.upload-info { width: 100%; } ul.fi-list li div.management-buttons div.upload-info span { width: 100%; } } /* PS-2160 MOBILE UI IMPROVEMENTS */ #download-consent { min-width: 320px; width: 100%; max-width: 380px; border-radius: 14px; } @media (max-width: 960px) { #download-consent { width: 100%; font-size: 14px; min-width: 240px; max-width: 320px; } main.page header.ceremony-header { top: 50px; width: 100%; background-color: var(--color-bg-teal); } h4#page-title { font-size: 14px; color: #FFF; } .continue-button, #continue, #prev { font-size: 18px; } #continue span, #prev span { display: none; } #download-consent { width: 250px; font-size: 11px; padding-left: 2px; padding-right: 2px; } #RenderBody { padding-top: 54px; } } #mobile-steps-container { width: 100%; min-height: 20px; height: 20px; max-height: 20px; padding-left: 25%; padding-right: 25%; } #mobile-steps-container div.strip { display: flex; justify-content: space-between; flex-wrap: nowrap; width: 100%; height: 10px; border-radius: 4px; } #mobile-steps-container div.dot { height: 18px; width: 18px; margin-top: -5px; background-color: #ccc; border-radius: 50%; opacity: 0.5; } #mobile-steps-container div.dot.active { background-color: var(--color-action-primary); opacity: 1; box-shadow: 1px 1px 5px rgba(0,0,0,0.2); } #mobile-steps-popup-container { padding-top: 54px; } #mobile-steps-popup-container #ceremony-steps { display: block; width: 100%; } #mobile-steps-popup-container #ceremony-steps h4.step-description { color: #3c4043; display: inline-block; } /* ------------------------------------------------------------------- LOGOS - RIGHT NOW, JUST FOR PATIENT LENDING ------------------------------------------------------------------------*/ #mobile-step-display.patient-lending { height: 60px; } .text-reflection { min-height: 15px; } /*????*/ div.questions { width: 75%; margin: 0 auto 0 auto; padding-top: 10%; } @media (max-width: 450px) { div.questions { width: 100%; } } #message { width: 100%; text-align: center; padding: 20px; font-size: 18px; border: 1px solid #7B7B7B; margin-bottom: 40px; } /* - Flex Helpers - */ .flex__center-content { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; } /* * * FORMS * 0. Fonts * 1. Labels and Titles * 2. Buttons and links * 3. Fields (input) * 4. Dropdowns * 5. Range Sliders */ /* 0. Fonts */ h1, h2, h3, h4, h5, h6, input, select { font-family: "Haffer", Arial, sans-serif !important; display: inline-block; height: auto; margin: 0; color: var(--color-font-primary); font-weight: normal; } h1 { font-weight: bold; letter-spacing: 2px; } p, label, span, option { color: var(--color-font-primary); } label.full-width-border { width: 100%; border-bottom: 1px solid var(--color-border-primary); } /* Font helpers */ .er__font-lime-tent4 { color: var(--color-bg-lime-tent04); } .er__font-size-sm{ font-size: 12px; } .er__font-size-md { font-size: 14px; } .er__font-size-lg { font-size: 16px; } .er__font-size-xl { font-size: 18px; } .er__font-size-2xl { font-size: 20px; } .er__font-size-3xl { font-size: 24px; } .er__font-weight-bold { font-weight: bold; } .material-symbols-outlined { font-family: 'Material Symbols Outlined'; font-weight: normal; font-style: normal; font-size: 24px; line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; word-wrap: normal; direction: ltr; -webkit-font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased; } .material-symbols-outlined.badge { display: flex; justify-content: center; align-items: center; width: 35px; height: 35px; border-radius: 5px; color: var(--color-font-icon-primary); background-color: var(--color-action-offset); } .material-symbols-outlined.badge.sm { width: 30px; height: 30px; font-size: 18px; } .material-symbols-outlined.badge.lg { width: 47px; height: 47px; } /* 1. Labels and Titles */ label { display: inline-block; height: auto; margin: 10px 0 0 0; font-size: 14px; font-weight: bold; color: #656565; padding: 5px 0 5px 0; word-break: keep-all; } label.error, span.error { display: none; color: red !important; font-size: 14px; font-weight: bold; margin-left: 20px; text-transform: initial; } label.warning { display: none; color: orange; font-size: 11px; font-weight: bold; margin-left: 20px; } .sub-text{ font-size: 12px; font-style: italic; } /* 2. BUTTONS AND LINKS */ [onclick]{ cursor: pointer; } button, a.button, input[type="button"], input[type="submit"] { display: inline-flex; justify-content: center; align-items: center; height: 35px; padding-left: 12px; padding-right: 12px; border: none; background-color: var(--color-action-primary); color: var(--color-font-white); border-radius: 14px; outline: none; cursor: pointer; font-size: 15.5px; font-weight: 400; letter-spacing: 1.15px; box-shadow: 0 3px 7px -3px #333; } button span { color: var(--color-font-white); } button.sm, a.button.sm, input[type="button"].sm, input[type="submit"].sm { height: 30px !important; font-size: 14px; font-weight: 500; } button.big, a.button.big, input[type="button"].big, input[type="submit"].big { height: 47px; width: auto; padding-left: 20px; padding-right: 20px; border-radius: 15px; font-size: 17px; box-shadow: rgba(0, 0, 0, 0.45) 0px 30px 25px -25px; } button .material-symbols-outlined, a.button .material-symbols-outlined, input[type="button"] .material-symbols-outlined, input[type="submit"] .material-symbols-outlined { font-size: 20px; color: var(--color-font-white); margin-right: 10px; margin-left: 0; } button.big .material-symbols-outlined, a.button.big .material-symbols-outlined, input[type="button"].big .material-symbols-outlined, input[type="submit"].big .material-symbols-outlined { font-size: 20px; } button.action, a.button.action, select.action { height: 32px; font-size: 14px; color: var(--color-font-teal); background-color: var(--color-bg-lime); font-weight: 500; border: none; box-shadow: 0 1px 4px -2px #333; } button.action span { color: var(--color-font-teal); } button.action span.material-symbols-outlined { color: var(--color-font-teal); font-size: 20px; } button.no-border { border: none !important; box-shadow: none; } button.action.small { display: inline-flex; justify-content: center; align-items: center; height: 32px; font-size: 14px; } button.remove, a.button.remove { background-color: #d9534f; border-color: #d9534f; color: #FFFFFF; } button.er__close-button { padding-left: 30px; position: relative; } button.er__close-button:after { font-family: 'Material Symbols Outlined'; content: 'close'; position: absolute; top: 3px; left: 7.5px; color: var(--color-action-primary); font-size: 19px; } button.icon { width: 35px; height: 35px; border-color: #989B9B; border: 1px solid #9B9B9B; background-color: #E7E7E7; padding: 0; text-align: center; color: #9B9B9B; } button.icon .icon, button.icon glyphicon, button.icon fa { display: inline-block; vertical-align: middle; color: #9B9B9B; width: 30px; height: 30px; font-size: 28px; margin: 2.5px; padding: 0; text-align: center; } button.danger { background-color: #d9534f; border-color: #d9534f; border: 1px solid #d9534f; color: #FFFFFF; } button.clear { background-color: transparent !important; border: none !important; } button:disabled, a.button:disabled, input[type="button"]:disabled, input[type="submit"]:disabled, span.disabled { background-color: var(--color-bg-disabled) !important; color: var(--color-font-disabled) !important; opacity: 0.5; cursor: not-allowed !important; border: none !important; box-shadow: none !important; } button:disabled span, a.button:disabled span, input[type="button"]:disabled span, input[type="submit"]:disabled span { color: var(--color-font-disabled) } /* BUTTON GROUP and HEADER ACTIONS*/ .button-group button:first-child, .header-actions button:first-child { margin-left: 0px; margin-right: 6px; } .button-group button:last-child, .header-actions button:last-child { margin-left: 6px; margin-right: 0; } .button-group button:nth-child(n+2):nth-last-child(n+2), .header-actions button:nth-child(n+2):nth-last-child(n+2) { margin-left: 6px; margin-right: 6px; } .header-actions { margin-top: 10px; } /* BUTTON GROUP */ form .button-group { display: inline-flex; justify-content: flex-start; align-items: center; flex: none; height: 35px !important; margin-right: 15px; cursor: pointer; box-shadow: none; border-radius: 10px; overflow: hidden; background-color: var(--color-bg-input); } form .button-group button { height: 30px !important; margin: 0 !important; box-shadow: none; background-color: transparent; color: var(--color-font-action); border-radius: 0; border: none; } form .button-group button.active { border-radius: 10px; border: none; background-color: var(--color-action-primary); color: var(--color-font-white); box-shadow: 0px 1px 4px #DDD; opacity: 1; cursor: default; } form .button-group.large, form .button-group.big { height: 47px !important; } form .button-group.large button, form .button-group.big button { height: 47px !important; font-size: 14px; } form .button-group button:disabled span.material-symbols-outlined { display:none; } form .button-group button span.material-symbols-outlined { display:none; } form .button-group button.active span.material-symbols-outlined { display: inline-block; } .msg { font-size: 12px !important; margin-bottom: 7px; color: var(--color-font-gray); } .underline { text-decoration: underline !important; } .link { text-decoration: underline !important; color: var(--color-font-link) !important; } /* Badge */ .badge { display: inline-flex; justify-content: center; align-items: center; height: 18px; line-height: 18px; margin: 0 10px 0 10px; border-radius: 10px; width: auto; font-size: 10.5px; font-weight: bold; letter-spacing: 0.04rem; background-color: var(--color-bg-lime-tent03); color: var(--color-font-teal); } .badge.xl { height: 32px; font-size: 16px; } .badge .material-symbols-outlined { color: var(--color-font-teal); } .badge.enabled, .badge.success { background-color: lightgreen; color: #3c4043 !important; } .badge.disabled, .badge.error { background-color: indianred; color: #FFF !important; } header .badge { margin: 0; } /* Button Bar */ .button-bar { position: relative; width: 100%; height: 50px; line-height: 50px; margin-bottom: 20px; background-color: #F9F9F9; border-top: 1px solid #E9E9E9; border-bottom: 1px solid #E9E9E9; } .button-bar div { position: absolute; min-width: 340px; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -o-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } /* Button Switch Group */ .switch-group { display: table; justify-content: center; width: 100%; border: none; } .switch-group span { display: table-cell; vertical-align: middle; width: auto; height: 46px; max-height: 46px; /*line-height: 38px;*/ border-color: var(--color-action-primary); border-top: 1px solid var(--color-action-primary); border-bottom: 1px solid var(--color-action-primary); border-right: 1px solid var(--color-action-primary); color: var(--color-action-primary); text-align: center; /*padding: 7px 12px 7px 12px;*/ background-color: #FFFFFF; border-radius: 0; cursor: pointer; } .switch-group span:hover { opacity: 0.7; } .switch-group span:first-child { border-color: var(--color-action-primary); border-left: 1px solid var(--color-action-primary); border-bottom-left-radius: 4px; border-top-left-radius: 4px; } .switch-group span:last-child { border-bottom-right-radius: 4px; border-top-right-radius: 4px; } .switch-group span.active { background-color: var(--color-action-primary); color: #FFFFFF; } .switch-group:disabled span, .switch-group.disabled span { cursor: not-allowed; border: 1px solid #EEE !important; color: #CCC !important; } .switch-group:disabled span.active, .switch-group.disabled span.active { background-color: #EEE !important; } /*------------------------------------------------------------------- 3. FIELDS AND INPUTS */ input, input[type="text"], input[type="password"], select, input[type="date"], input[type="number"] { display: inline-block; width: 100%; min-width: 65px; height: 45px; padding: 10px; color: var(--color-font-primary); background-color: var(--color-bg-input); border-radius: 10px; border: none; outline: none; font-size: 16px; font-weight: normal; } input:disabled, select:disabled { background-color: var(--color-bg-disabled) !important; color: var(--color-font-disabled) !important; opacity: 0.5; cursor: not-allowed !important; border: none !important; box-shadow: none !important; } input.height-35, select.height-35 { height: 35px; padding: 5px 10px; } /* CHECK BOXES */ input[type="checkbox"] { width: 18px; min-width: 22px; height: 18px; padding: 0; margin: 0 5px 0 0; border: none; background-color: #FFF; } input[type="checkbox"]:checked { background-color: var(--color-action-primary); color: #FFF; } /* Remove the Yellow background after an autofill value is used */ input:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px #EFF0F6 inset; } textarea { width: 100%; min-height: 75px; resize: none; padding: 10px; border: 1px solid #D8D8D8 !important; border-radius: 4px; background-color: #FFF; font-size: 12px; font-weight: normal; } textarea:focus, textarea:active { border: 1px solid #D8D8D8 !important; } /* Effects */ .blur { filter: blur(4px); -webkit-filter: blur(4px); } /* DROPDOWNS */ select { width: 100%; } input.password { text-security: disc; -webkit-text-security: disc; -mox-text-security: disc; } /*Disabled for Edit Page - TODO: change to site wide style and not upload-type-details*/ /*TODO: form structure in /Document/Edit needs changed to match proper syntax - other versions have a button element, not a div and disabled is an attribute property; not a class*/ #upload-type-details button.btn.dropdown-toggle.btn-default:disabled, #upload-type-details .btn.dropdown-toggle.disabled { background-color: rgb(235, 235, 228); color: #212121 !important; border: 1px solid rgb(204,204,204); opacity: 1 !important; } .bootstrap-select { width: 100% !important; /* override bootstrap-select.min.css: line #6*/ } button[data-toggle="dropdown"] { width: 100%; height: 46px; padding: 10px; border: 1px solid #D8D8D8; border-radius: 4px; background-color: #FFF; font-size: 12px; font-weight: normal; } button[data-toggle="dropdown"]:hover, button[data-toggle="dropdown"]:active, button[data-toggle="dropdown"]:focus { background-color: #FFF; } /* Cross browser slider toggle */ /* TOGGLE SWITCHES */ div.toggleswitch-group { width: 100%; margin: 5px; } div.switch-group label.label { display: inline-block; width: 300px; vertical-align: middle; line-height: 30px; margin: 0; padding: 0 0 0 10px; font-weight: 400; font-size: 14px; } .switch { position: relative; display: inline-block; width: 90px; height: 25px; vertical-align: middle; border: 1px solid #ccc; border-radius: 6px; } .switch input { display: none; } .switch span { position: relative; width: 100%; padding: 0; text-align: center; margin: 0; } .switch span.background-name i.false { position: absolute; top: 2px; left: 10px; font-style: normal !important; font-size: 14px !important; color: #aaa !important; } .switch span.background-name i.true { position: absolute; top: 2px; left: 40px; font-style: normal !important; font-size: 14px !important; color: #aaa !important; } .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: transparent; transition: all .4s; -webkit-transition: all .4s; -moz-transition: all .4s; -ms-transition: all .4s; /*ie 10*/ line-height: 26px; text-align: center; } .slider:before { position: absolute; content: "NO"; height: 24px; width: 45px; left: 0; bottom: 0px; background-color: var(--color-action-primary); color: #fff; transition: .4s; } input[type="checkbox"]:checked + input[type="hidden"] + .slider, input[type="checkbox"]:checked + .slider { background-color: transparent; } input[type="checkbox"]:focus + input[type="hidden"] + .slider, input[type="checkbox"]:focus + .slider { box-shadow: 0 0 1px #2196F3; } input[type="checkbox"]:checked + input[type="hidden"] + .slider:before, input[type="checkbox"]:checked + .slider:before { content: "YES"; transform: translateX(100%); -moz-transform: translate(100%); -ms-transform: translate(100%); -webkit-transform: translate(100%); background-color: #228848; color: #fff; } input[type="checkbox"][disabled] + input[type="hidden"] + .slider:before, input[type="checked"][disabled] + .slider:before { background-color: grey; } /* Rounded sliders */ .slider.round { border-radius: 6px; } .slider.round:before { border-radius: 6px; } /* Chrome now overrites these values so we need to force the css */ input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active, select:-webkit-autofill, select:-webkit-autofill:hover, select:-webkit-autofill:focus, select:-webkit-autofill:active, { background-color: #EFF0F6 !important; } input:-internal-autofill-selected { background-color: #EFF0F6 !important; } /* 5. Range Sliders */ input[type='range'] { box-sizing: border-box; border: 0px solid transparent; padding: 0px; margin: 0px; width: 100%; height: 50px; cursor: pointer; font-size: 16px; } input[type='range'], input[type='range']::-webkit-slider-runnable-track, input[type='range']::-webkit-slider-thumb { -webkit-appearance: none; } input[type='range']::-webkit-slider-runnable-track { box-sizing: border-box; width: 100%; height: 5px; border-radius: 2px; background: var(--color-action-primary); } input[type='range']::-moz-range-track { box-sizing: border-box; width: 100%; height: 5px; border-radius: 2px; padding: 0px; background: var(--color-action-primary); } input[type='range']::-moz-range-thumb { padding: 0px; height: 20px; width: 20px; border-radius: 50%; border: 1px solid; background: var(--color-action-primary); } input[type='range']::-ms-track { box-sizing: border-box; width: 100%; height: 5px; border-radius: 2px; padding: 0px; background: var(--color-action-primary); color: var(--color-action-primary); border: 1px solid var(--color-action-primary); } input[type='range']::-webkit-slider-thumb { padding: 0px; height: 20px; width: 20px; border-radius: 50%; border: 1px solid var(--color-action-primary); background: var(--color-action-primary); margin-top: -8px; } input[type='range']::-ms-thumb { padding: 0px; height: 20px; width: 20px; border-radius: 50%; border: 1px solid var(--color-action-primary); background: var(--color-action-primary); } input[type="range"]::-ms-fill-lower { background: transparent; } input[type='range']:focus { outline: none; } .rangecontainer { padding: 0px; position: relative; } .rangecontainer div.ticks { margin-top: -20px; padding-left: 5px; color: #9B9B9B; } .rangecontainer div.ticks span:nth-child(2) { margin-left: -20px; text-align: right; } /* JQUERY UI - date picker *Per the defect, this forces the arrows to show up */ .ui-datepicker { min-width: 250px; width: auto; max-width: 300px; border-color: #3c4043; background-color: #F9F9F9; } .ui-widget { z-index: 999999 !important; } .ui-widget table thead span { font-weight: normal; font-size: 14px; } /*ui-icon ui-icon-circle-triangle-w*/ a.ui-datepicker-prev, a.ui-datepicker-next { position: relative; } a.ui-datepicker-prev, a.ui-datepicker-next{ cursor: pointer; } a.ui-datepicker-prev:after { content: "<"; /*\fod9*/ font-family: FontAwesome; font-weight: normal; font-style: normal; color: #3c4043 !important; margin-top: -7px; } a.ui-datepicker-next:after { content: ">"; /*\foda*/ font-family: FontAwesome; font-weight: normal; font-style: normal; color: #3c4043 !important; margin-top: -7px; } .ui-datepicker-prev span, .ui-datepicker-next span { background-image: none !important; } .ui-datepicker-header { background-color: transparent; /*var(--color-action-primary);*/ color: #3c4043; border-color: transparent; } .ui-icon.ui-icon-circle-triangle-e, .ui-icon.ui-icon-circle-triangle-w { /*color: #3c4043;*/ } .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button { background-color: transparent; border-color: transparent; } select.ui-datepicker-year { height: 28px; padding: 4px; text-align: right; } select.ui-datepicker-month { height: 28px; padding: 4px; text-align: right; } select.ui-datepicker-year option { text-align: right; } a.ui-state-default { font-size: 14px; color: #7B7B7B; text-align: center !important; } a.ui-state-default.ui-state-hover { background-color: #eee; } a.ui-state-default.ui-state-active { background-color: var(--color-action-primary); color: #FFF; border-radius: 11px; box-shadow: 1px 1px 3px rgba(0,0,0,0.3); } a.ui-state-default.ui-state-active.ui-state-hover { background-color: var(--color-action-primary); color: #FFF; border-radius: 11px; box-shadow: 1px 1px 3px rgba(0,0,0,0.7); } a.ui-state-default.ui-state-highlight.ui-state-active { background-color: var(--color-action-primary); font-weight: bold; color: #FFF; border-radius: 7px; box-shadow: 1px 1px 3px rgba(0,0,0,0.4); } a.ui-state-default.ui-state-highlight.ui-state-active.ui-state-hover { color: #FFF; font-weight: bold; background-color: var(--color-action-primary); border-radius: 7px; box-shadow: 1px 1px 3px rgba(0,0,0,0.7); } td.ui-state-disabled { font-size: 14px; } @media (max-width: 400px) { label { font-size: 12px !important; } } /* Button ripple effect */ /* Ripple magic */ button.ripple { position: relative; overflow: hidden; } button.ripple:after { content: ''; position: absolute; top: 50%; left: 50%; width: 5px; height: 5px; background: rgba(255, 255, 255, .5); opacity: 0; border-radius: 100%; transform: scale(1, 1) translate(-50%); transform-origin: 50% 50%; } @keyframes ripple { 0% { transform: scale(0, 0); opacity: 1; } 20% { transform: scale(25, 25); opacity: 1; } 100% { opacity: 0; transform: scale(40, 40); } } button.ripple:focus:not(:active)::after { animation: ripple 1s ease-out; } .highlight-button { animation: highlightButton 1s ease-in; } @keyframes highlightButton{ 0% { background-color: initial; } 50%{ background-color: rgba(255,255,255,0.8); } 100% { background-color: initial; } } ::-webkit-input-placeholder { /* WebKit, Blink, Edge */ opacity: 0.3; } :-moz-placeholder { /* Mozilla Firefox 4 to 18 */ opacity: 0.3; } ::-moz-placeholder { /* Mozilla Firefox 19+ */ opacity: 0.3; } :-ms-input-placeholder { /* Internet Explorer 10-11 */ opacity: 0.3; } ::-ms-input-placeholder { /* Microsoft Edge */ opacity: 0.3; } ::placeholder { /* Most modern browsers support this now. */ opacity: 0.3; } /* ER DROPDOWN MENU - see global-handler.js for jQuery setup */ .er-dropdown { position: relative; width: 200px; padding: 0; margin: 0; } .er-dropdown-link { display: block; cursor: hand; /*IE11*/ cursor: pointer; text-align: center; } .er-dropdown-link fa { color: #FFFFFF; font-size: 15px; padding: 4px; } .er-dropdown-menu { position: absolute; top: 100%; left: 0; display: none; background-color: #FFF !important; opacity: 1 !important; min-width: 100px; width: auto; max-width: 320px; box-shadow: 1px 1px 20px rgba(0,0,0,0.2), -1px -1px 20px rgba(0,0,0,0.2); z-index: 1500; } .er-dropdown-item { list-style: none; min-width: 100px; width: auto; max-width: 320px; text-align: left; height: 50px; line-height: 50px; background-color: #FFF; word-break: keep-all; } .er-dropdown-item a { display: block; width: 100%; height: inherit; margin: 0; padding-left: 20px; padding-right: 20px; } .er-dropdown-item a, .er-dropdown-item a:hover { text-decoration: none; } .er-dropdown-item, .er-dropdown-item * { word-break: keep-all; font-size: 15px; color: #3c4043; text-decoration: none; } .er-dropdown-item.close-menu { text-align: center; height: 30px; line-height: 30px; border-top: 1px solid #E7E7E7; padding-left: 0; padding-right: 0; background-color: #fafafa; } .er-dropdown-item.close-menu:hover { background-color: #E7E7E7 !important; } .er-dropdown-item:hover { background-color: #E7E7E7; color: #3c4043 !important; opacity: 1; cursor: hand; /*IE*/ cursor: pointer; } .er-dropdown-item.icon a { position: relative; padding-left: 40px; } .er-dropdown-item.icon .fa { position: absolute; left: 15px; top: 15px; font-size: 18px; color: #3c4043; } /*-------------------------------*/ #dob-datepicker { width: 100%; padding: 5px 20px 20px 20px; } #dob-container { border: 1px solid #D8D8D8; border-radius: 4px; padding: 10px; margin: 0 auto 0 auto; } #dob-container span.slash { display: inline-block; vertical-align: middle; font-size: 13px; padding-right: 4px; padding-top: 2px; } #month, #day, #year { display: inline-block; vertical-align: middle; border: none; padding: 0; padding: 0; height: 20px; } #month:active, #day:active, #year:active, #month:focus, #day:focus, #year:focus { border: none !important; outline: none !important; -webkit-outline: none !important; } #month { width: 30px; margin-top: 0; } #day { width: 24px; margin-top: 0; } #year { width: 40px; margin-top: 0; } .ui-datepicker { width: 320px; background-color: #FFF; } .ui-widget-header .ui-icon { display: none !important; } .ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next { height: 45px; line-height: 45px; font-size: 22px; text-align: center; } .ui-datepicker .ui-datepicker-prev:hover, .ui-datepicker .ui-datepicker-next:hover { border-radius: 0; background-color: #fff; opacity: 0.7; border: none; } a.ui-datepicker-prev:after, a.ui-datepicker-next:after { position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); color: var(--color-action-primary); } .ui-datepicker .ui-datepicker-prev { width: 40px; } .ui-widget-header { border: none; background-color: #FFF; } .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button, html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active { border: none; } .ui-state-active, .ui-widget-content .ui-state-active { background-color: var(--color-action-primary); } .rotate { float: right; line-height: 27px; vertical-align: middle; -moz-transition: all 0.25s linear; -webkit-transition: all 0.25s linear; transition: all 0.25s linear; } .rotate.down { -ms-transform: rotate(180deg); -moz-transform: rotate(180deg); -webkit-transform: rotate(180deg); transform: rotate(180deg); } .form-item { padding-top: 7px; padding-bottom: 5px; } .info-box { display: flex; justify-content: flex-start; width: 70%; margin: 0 auto 0 auto; padding: 20px; border: 1px solid #DDD; background-color: #E7E7E7; } .info-box .fa-info-o { width: 50px; font-size: 40px; text-align: center; } .info-box p{ font-size: 14px; font-style: italic; } timepicker div.togglebuttons { position: relative; display: inline-flex; vertical-align: middle; } timepicker div.togglebuttons label { width: 50px; padding-left: 0; padding-right: 0; text-align: center; color: #3c4043; background-color: #E7E7E7; } timepicker div.togglebuttons input { display: none; } timepicker div.togglebuttons input:checked + label { color: #fff; background-color: var(--color-action-primary); } /* MISC */ .SSNArea { text-align: center; width: 29%; display: inline; background: transparent !important; } .SSNGroup { text-align: center; width: 25%; display: inline; background: transparent !important; } .SSNSerial { text-align: center; width: 29%; display: inline; background: transparent !important; } .SSNArea.focus, .SSNGroup.focus, .SSNSerial.focus, #SSNSubmit:focus { border-color: #66afe9; outline: 0; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6); } .SSNMask { position: absolute; display: none; top: 0px; left: 0px; width: 29%; height: auto; padding: 9px 12px 10px 11px; border: none; outline: none; font-size: 12px; color: #ECECEC; text-align: center; -webkit-appearance: textfield; -moz-appearance: textfield; background: rgba(182, 255, 0, .5); } .SSNMask::-webkit-outer-spin-button, .SSNMask::-webkit-inner-spin-button { -webkit-appearance: none; } #FILogo_DivBackground { min-width: 250px; width: 100%; max-width: 300px; min-height: 150px; background-repeat: no-repeat; background-size: contain; background-position: center; margin-bottom: 10px; } .security-shield-icon { width: 40px; height: 40px; display: inline-block; -webkit-mask: url(/images/material-symbols/security-shield.svg) no-repeat 50% 50%; mask: url(/images/material-symbols/security-shield.svg) no-repeat 50% 50%; -webkit-mask-size: cover; mask-size: cover; background-color: #3c4043; } .mark-email-read-icon { width: 40px; height: 40px; display: inline-block; -webkit-mask: url(/images/material-symbols/mark-email-read.svg) no-repeat 50% 50%; mask: url(/images/material-symbols/mark-email-read.svg) no-repeat 50% 50%; -webkit-mask-size: cover; mask-size: cover; background-color: #3c4043; } .verified-user-icon { width: 40px; height: 40px; display: inline-block; -webkit-mask: url(/images/material-symbols/verified-user.svg) no-repeat 50% 50%; mask: url(/images/material-symbols/verified-user.svg) no-repeat 50% 50%; -webkit-mask-size: cover; mask-size: cover; background-color: #3c4043; } .shield-person-icon { width: 40px; height: 40px; display: inline-block; -webkit-mask: url(/images/material-symbols/shield-person.svg) no-repeat 50% 50%; mask: url(/images/material-symbols/shield-person.svg) no-repeat 50% 50%; -webkit-mask-size: cover; mask-size: cover; background-color: #3c4043; } .error-message { display: none; width: 100%; color: indianred; font-size: 16px; font-weight: bold; text-align: center; padding: 10px; } /* #VALIDATION */ info, div.info { position: relative; display: none; padding-left: 16px; padding-top: 2px; font-size: 12px; color: var(--color-action-primary); } info:before, div.info:before { font-family: 'Material Symbols Outlined'; content: 'info'; position: absolute; top: 0; left: 0; color: var(--color-action-primary); font-size: 14px; } info.active, div.info.active { display: inline-block; } info.big, info.hero, div.info.big, div.info.hero { font-size: 14px; font-weight: bold; padding: 10px; background-color: #EEE; padding-left: 30px; border-radius: 12px; } info.big:before, info.hero:before, div.info.big:before, div.info.hero:before{ font-size: 16px; top: 7.5px; left: 10px; } info.no-icon, div.info.no-icon { padding-left: 0; } info.no-icon:before, info.big.no-icon:before, info.hero.no-icon:before, div.info.no-icon:before, div.info.big.no-icon:before, div.info.hero.no-icon:before { font-family: ''; content: ''; } warn, warning, div.warn, div.warning { position: relative; display: none; padding-left: 16px; padding-top: 2px; font-size: 12px; color: #F38301; } warn:before, warning:before, div.warn:before, div.warning:before { font-family: 'Material Symbols Outlined'; content: 'warning'; position: absolute; top: 0; left: 0; color: #F38301; font-size: 14px; } warn.active, warning.active, div.warn.active, div.warning.active { display: inline-block; } error, div.error { position: relative; display: none; padding-left: 16px; padding-top: 2px; font-size: 12px; color: red; } error:before, div.error.before { font-family: 'Material Symbols Outlined'; content: 'dangerous'; position: absolute; top: 0; left: 0; color: red; font-size: 14px; } error.active, div.error.active { display: inline-block; } p.info { position: relative; width: auto; padding: 10px 10px 10px 37px; margin-top: 5px; margin-bottom: 5px; border: 1px solid var(--color-border-primary); border-radius: 10px; background-color: var(--color-bg-gray); } p.info:before { font-family: 'Material Symbols Outlined'; content: 'info'; position: absolute; top: 3px; left: 6px; color: var(--color-info-primary); background-color: #8CEBD7; font-size: 25px; } p.info.big { width: 100%; padding: 20px 20px 20px 55px; margin-top: 20px; margin-bottom: 20px; } p.info.big:before { top: 20px; left: 10px; font-size: 34px; } p.warning { position: relative; line-height: 20px; font-size: 16px; color: #00373F; padding-left: 24px; } p.warning:before { font-family: 'Material Symbols Outlined'; content: 'warning'; position: absolute; top: 0; left: 0; color: #00373F; font-size: 14px; } input:invalid, select:invalid, textarea:invalid { outline: 1px solid red; } input:valid select:valid, textarea:valid { outline: thin solid rgba(19,152,217, 0.1); } input:invalid + error, input:invalid ~ error, input:invalid + info, input:invalid ~ info, select:invalid + error, select:invalid ~ error, select:invalid + info, select:invalid ~ info, textarea:invalid + info, textarea:invalid ~ info, textarea:invalid + error, textarea:invalid ~ error { display: block; } input:not([type="checkbox"]):not([type="radio"]):read-only, input[readonly]:not([type="checkbox"]):not([type="radio"]), input[readonly]:not([type="slider"]):not([type="radio"]), select[readonly], textarea[readonly], .input-style[readonly] { color: indianred; font-style: italic; cursor: not-allowed; } /* Popup */ section.body, div.body { width: 100%; padding-left: 20px; padding-right: 20px; } .close-dialog { cursor: pointer; } /* Color Helpers */ .color-white { color: var(--color-font-white) !important; } .color-gray { color: var(--color-font-gray) !important; } .color-lime { color: var(--color-font-lime) !important; } .no-background { background-color: transparent !important; } /* Font Helpers */ .font-10 { font-size: 10px !important; } .font-12 { font-size: 12px !important; } .font-14 { font-size: 14px !important; } .font-15 { font-size: 15px !important; } .font-16 { font-size: 15px !important; } .font-18 { font-size: 18px !important; } .font-20 { font-size: 20px !important; } .font-24 { font-size: 24px !important; } .font-30 { font-size: 30px !important; } /* FINANCIAL INSTITUTION USER - TABLE */ table.fi-list { padding: 0; margin: 0; width: 100%; background-color: transparent; border-collapse: separate !important; border-spacing: 0 0.75em !important; table-layout: fixed !important; height: auto; } table.fi-list thead tr th { background: #F7F7F7; color: #656565; font-weight: bold; text-transform: uppercase; } table.fi-list tbody tr { /* Per the spec, borders and border radius are ignored with table border-collapse: separate; Must use outline. Only Firefox has an outline-radius The remaining browsers will only have the outline-radius if they have updated webkit compatibility https://www.w3.org/TR/CSS2/tables.html#borders */ width: 100%; /* border-radius: 4px !important; -webkit-outline: 1px solid #E7E7E7; outline: 1px solid #E7E7E7; border: 1px solid #E7E7E7; */ background-color: #FFFFFF; height: 70px; min-height: 70px; /* IE requires this*/ line-height: 0; /* IE requires this*/ } table.fi-list tbody tr td { padding-top: 10px; padding-bottom: 10px; border-top: 1px solid #E7E7E7; border-bottom: 1px solid #E7E7E7; } table.fi-list tbody tr td:first-child { border-top-left-radius: 4px; border-bottom-left-radius: 4px; border-left: 1px solid #E7E7E7; border-top: 1px solid #E7E7E7; border-bottom: 1px solid #E7E7E7; } table.fi-list tbody tr td:last-child { border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-right: 1px solid #E7E7E7; border-top: 1px solid #E7E7E7; border-bottom: 1px solid #E7E7E7; } /* FONTS */ table.fi-list tr th { font-size: 110%; font-weight: bold; height: 28px; } table.fi-list tr td h5 { font-size: 98%; white-space: normal; word-break: break-word; } span.discriptor { line-height: 12px; font-size: 12px; font-weight: normal; word-break: break-word; } @media (max-width: 768px) { table.fi-list tr th { font-size: 90%; } table.fi-list tr td h5 { font-size: 90%; } span.discriptor { font-size: 11px; } } @media (max-width: 600px) { table.fi-list tr th { font-size: 85%; } table.fi-list tr td h5 { font-size: 85%; } span.discriptor { font-size: 11px; } } table.fi-list tbody tr div.management-buttons { display: flex; justify-content: space-around; padding-left: 10%; padding-right: 10%; } @media (max-width: 500px) { table.fi-list tbody tr div.management-buttons { display: inline-block; } } /* ------------------------------------ LIST - UL/LI ---------------------------------------*/ ul.fi-list { padding: 0; margin: 0; width: 100%; background-color: transparent; height: auto; } ul.fi-list li { display: flex; justify-content: space-around; flex-direction: row; list-style: none; width: 100%; background-color: #FFFFFF; height: auto; min-height: 70px; /* IE requires this*/ line-height: 0; /* IE requires this*/ border-radius: 4px; border: 1px solid #E0E0E0; margin-bottom: 10px; } /* FONTS */ ul.fi-list li div { font-size: 110%; height: auto; line-height: 20px; text-align: left; } ul.fi-list li div h5 { font-size: 98%; white-space: normal; word-break: break-word; } @media (max-width: 768px) { ul.fi-list li div { font-size: 90%; } ul.fi-list li div h5 { font-size: 90%; } } @media (max-width: 600px) { ul.fi-list li div { font-size: 85%; } ul.fi-list li div h5 { font-size: 85%; } } table p { margin: 0; padding: 0; } #document-viewer-dialog { padding: 2%; z-index: 5001; /* position: fixed; top: 0; left: 0; width: 100vw; height: auto; min-height: 100vh; padding: 0 !important; background-color: rgba(255,255,255,0.5); z-index: 2000;*/ } .widget.document-viewer { position: relative; } div#pages { width: 100%; background-color: transparent; } div#pages .page { position: relative; width: 100%; } #document-viewer-pages { position: relative; background-color: #fff; overflow-y: scroll; height: calc(100vh - 120px); padding: 20px 7% 100px 7%; } #document-viewer-pages div.page img { display: block; width: 100%; max-width: 970px; box-shadow: 1px 1px 30px rgba(0,0,0,0.15); margin: 0 auto 40px auto; background-color: #FFF; border-bottom: #7B7B7B; } /* Doc Navigation */ .doc-viewer-page-count { position: absolute; top: 0; left: 50%; text-align: center; font-size: 14px; font-weight: bold; color: #7B7B7B; background: transparent; z-index: 10; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -o-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } #doc-viewer-page-navigation { position: absolute; top: 150px; left: 20px; width: 150px; height: auto; } #document-viewer-prev-page, #document-viewer-next-page { position: absolute; left: 11px; width: 25px; height: 25px; padding: 0; margin: 0; text-align: center; transition: all 0.2s; -moz-transition: all 0.2s; -webkit-transition: all 0.2s; } #document-viewer-next-page { top: 40px; } #document-viewer-prev-page { top: -37px; } #document-viewer-prev-page i, #document-viewer-next-page i { color: #7B7B7B; font-size: 44px; line-height: 40px; } div#document-viewer-prev-page:hover, div#document-viewer-next-page:hover { opacity: 0.7; cursor: pointer; } #document-viewer-current-count-div { position: absolute; left: 0; top: 0; width: 50px; height: 50px; border: 1px solid #7B7B7B; border-radius: 50%; text-align: center; overflow: visible; background-color: #FFFFFF; z-index: 5; } #document-viewer-total-count-div { position: absolute; left: 45px; top: 14px; width: 40px; height: 40px; border: 1px solid #7B7B7B; border-radius: 50%; text-align: center; padding: 0; margin: 0; z-index: 2; } /* COUNT */ #document-viewer-current-count { height: 50px; width: 50px; min-width: 50px; max-width: 50px; text-align: center; color: #656565; font-size: 24px; font-weight: bold; line-height: 50px; background-color: transparent; border: none !important; } #document-viewer-current-count:active, #document-viewer-current-count:focus { border: none; } #document-viewer-total-count { font-size: 14px; line-height: 40px; } /*---------------------------*/ /* LOADER */ /*---------------------------*/ .er-mask { position: fixed; z-index: 1999; width: 300vw; height: 300vh; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); background-color: rgba(255,255,255,0.9); } .er-mask.inline { position: initial; display: block; width: 100%; height: inherit !important; -webkit-transform: initial; -moz-transform: initial; -o-transform: initial; -ms-transform: initial; transform: initial; } .er-loading { position: absolute !important; top: 50% !important; left: 50% !important; width: 220px !important; height: 50px !important; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: 2001; animation: loading 3s linear infinite; } .er-element-loading { position: relative; left: 50%; width: 220px !important; margin-top: -30px; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -o-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); z-index: 2001; animation: loading 3s linear infinite; } .er-mask p { position: absolute; padding-top: 120px; font-size: 18px; top: 50%; left: 50%; width: 220px; height: auto; margin-top: 40px; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: 2001; text-align: center; } .er-loading span, .er-element-loading span { opacity: 0; width: 30px; height: 30px; background: #000000; box-shadow: 1px 1px 10px rgba(0,0,0,0.2); border-radius: 50%; margin: 10px; display: inline-block; } .er-loading span:first-child, .er-element-loading span:first-child { animation: dot 1.5s infinite; } .er-loading span:nth-child(2), .er-element-loading span:nth-child(2) { animation: dot 1.5s infinite; animation-delay: 0.4s; } .er-loading span:nth-child(3), .er-element-loading span:nth-child(3) { animation: dot 1.5s infinite; animation-delay: 0.6s; } .er-loading span:nth-child(4), .er-element-loading span:nth-child(4) { animation: dot 1.5s infinite; animation-delay: 0.8s; } @keyframes dot { 0% { opacity: 0; border-radius: 50%; transform: scale(0.2, 0.2); } 50% { opacity: 1; border-radius: 1%; transform: scale(1, 1); } 100% { opacity: 0; border-radius: 50%; transform: scale(0.2, 0.2); } } @-webkit-keyframes dot { 0% { opacity: 0; border-radius: 50%; -webkit-transform: scale(0.2, 0.2); } 50% { opacity: 1; border-radius: 1%; -webkit-transform: scale(1, 1); } 100% { opacity: 0; border-radius: 50%; -webkit-transform: scale(0.2, 0.2); } } @-ms-keyframes dot { 0% { opacity: 0; border-radius: 50%; -ms-transform: scale(0.2, 0.2); } 50% { opacity: 1; border-radius: 1%; -ms-transform: scale(1, 1); } 100% { opacity: 0; border-radius: 50%; -ms-transform: scale(0.2, 0.2); } } @-o-keyframes dot { 0% { opacity: 0; border-radius: 50%; -o-transform: scale(0.2, 0.2); } 50% { opacity: 1; border-radius: 1%; -o-transform: scale(1, 1); } 100% { opacity: 0; border-radius: 50%; -o-transform: scale(0.2, 0.2); } } @-moz-keyframes dot { 0% { opacity: 0; border-radius: 50%; -moz-transform: scale(0.2, 0.2); } 50% { opacity: 1; border-radius: 1%; -moz-transform: scale(1, 1); } 100% { opacity: 0; border-radius: 50%; -moz-transform: scale(0.2, 0.2); } } /*---------------------------*/ /* MESSAGES */ /*---------------------------*/ #message-container { display: block; height: auto; width: auto; position: fixed; left: 20px; bottom: 0; z-index: 2147483647; } .erfeedback.message { display: none; min-height: 40px; width: 100%; z-index: 2001; } .erfeedback.message .inner { position: relative; display: table; width: auto; background-color: #2F4056; height: 37px; vertical-align: middle; flex-wrap: nowrap; margin: 10px; border-radius: 6px; padding: 5px 10px 5px 10px; } .erfeedback.message .inner.error { position: relative; padding-left: 37px; background-color: #d9534f; } .erfeedback.message .inner.error:before { content: "\f071"; font-family: FontAwesome; color: #fff; font-size: 18px; position: absolute; top: 12px; left: 10px; } .erfeedback.message .inner.success { position: relative; padding-left: 37px; background-color: green; } .erfeedback.message .inner.success:before { content: "\f046"; font-family: FontAwesome; color: #fff; font-size: 18px; position: absolute; top: 12px; left: 10px; } .erfeedback.message p { display: table-cell; vertical-align: middle; padding: 0; max-width: 900px; color: #FFFFFF; font-size: 14px; font-weight: 100; letter-spacing: 0.45px; word-wrap: break-word; word-break: break-word; } .erfeedback.message button.x { display: table-cell; width: 30px; height: 30px; line-height: 30px; background-color: transparent; border: none; font-size: 17px; color: #777; text-shadow: initial; } .erfeedback.message button.modal-yes { background-color: transparent; border: none; font-size: 17px; color: #777; } .erfeedback.message button.modal-undo { background-color: transparent; border: none; width: 80px; font-size: 16px; color: var(--color-action-primary); text-transform: uppercase; } /*-------------------------*/ /* Popups */ /*-------------------------*/ /* Type Upload Dialog */ .popup-dialog { position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; background: rgba(170,170,170,0.5); z-index: 1999; border: none !important; overflow-y: auto; overflow-x: hidden; backdrop-filter: blur(2px); } .popup-dialog .inner { width: 100%; max-width: 700px; height: auto; background-color: #FFFFFF; border-radius: 10px; overflow: hidden; box-shadow: rgba(0, 0, 0, 0.4) 0px 0px 15px, rgba(0, 0, 0, 0.3) 0px -1px 13px -3px, rgba(0, 0, 0, 0.2) 0px -1px 0px inset } .popup-dialog header, section.popup-dialog header { /*Overwrite default header settings*/ height: auto; width: 100%; overflow: hidden; text-overflow: ellipsis; padding: 20px; } .popup-dialog header * { display: inline-block; vertical-align: middle; } .popup-dialog header img { margin-top: -10px; } .popup-dialog header h1 { height: 28px; font-size: 18px; color: var(--color-font-primary); font-weight: bold; letter-spacing: 2px; text-align: left; max-width: 100%; overflow: hidden; text-overflow: ellipsis; } .popup-dialog main { padding: 20px; } .popup-dialog footer { display: flex; justify-content: flex-end; width: 100%; height: auto; padding: 20px; } .popup-dialog button { margin-left: 20px; } .popup-dialog button.modal-yes { height: auto !important; max-width: 340px; width: auto; min-width: 100px; color: var(--color-font-white); text-transform: none !important; font-size: 14px; font-weight: normal; border: none; background-color: var(--color-action-primary); padding: 7px 15px; } .popup-dialog button.modal-no { height: auto !important; max-width: 340px; width: auto; min-width: 100px; color: var(--color-font-gray); font-size: 14px; font-weight: normal; text-transform: none !important; border: none; background-color: transparent; padding: 7px 15px; border: thin solid var(--color-font-gray); box-shadow: none; } .popup-dialog .inner-box header i.close-dialog { padding-top: 12px; color: #fff; font-size: 20px; opacity: 1; cursor: pointer; } /* ---------------- */ /* BANNER */ /* ---------------- */ #timeout-warning-banner.erfeedback.banner div.inner header { background-color: var(--color-action-primary); padding: 0; } .erfeedback.banner { position: fixed; top: 0; left: 0; width: 100vw; height: auto; min-height: 40px; left: 0; z-index: 10000; } .erfeedback.banner div.inner { display: flex; justify-content: space-between; padding-right: 50px; background-color: var(--color-action-primary); color: #FFF; } .erfeedback.banner div.inner header { height: auto; margin-bottom: 0; } .erfeedback.banner div.inner div.main { height: auto; } .erfeedback.banner div.inner footer { display: flex; justify-content: flex-end; max-width: 250px; height: auto; padding-top: 10px; padding-bottom: 10px; margin-bottom: 0; } .erfeedback.banner div.inner footer button { background-color: #FFF; color: var(--color-action-primary); max-width: 250px; } /*Default or Info*/ .erfeedback.banner div.inner h1 { color: #fff; padding: 0 10px 0 20px; font-size: 18px; line-height: 40px; } /*Success*/ .erfeedback.banner div.inner.success { background-color: green; } .erfeedback.banner div.inner.success h1 { color: #FFF; } /*Warning*/ .erfeedback.banner div.inner.success { background-color: #ffc425; } /*Danger*/ .erfeedback.banner div.inner.success { background-color: red; } /*--------------------*/ /* INFO POPUP */ /*--------------------*/ .info-popup { width: 25px; height: 25px; font-size: 18px; color: var(--color-action-primary); /*#3c4043;*/ cursor: hand; /*IE11*/ cursor: pointer; padding-top: 5px; -webkit-transition: all left .2s; -moz-transition: all left .2s; -ms-transition: all left .2s; /*ie 10*/ transition: all left .2s; } .info-popup:hover { box-shadow: 1px 1px 20px rgba(0,0,0,0.2); } .info-popup.instructions { display: flex; justify-content: center !important; align-items: center !important; width: 35px !important; height: 35px !important; font-size: 18px; border: 1px solid var(--color-action-primary); border-radius: 50%; padding: 0; box-shadow: 1px 1px 5px rgba(0,0,0,0.2); color: #FFFFFF; background-color: var(--color-action-primary); } .info-popup.instructions:hover { box-shadow: 1px 1px 20px rgba(0,0,0,0.2), -1px -1px 20px rgba(0,0,0,0.2); background-color: var(--color-action-primary); } @keyframes pulse { 0% { opacity: 0.8; } 50% { opacity: 0.4; } 100% { opacity: 0.8; } } /* Tabs */ [ertab] { display: none; } [ertab].active { display: block; } .tab-container { display: flex; justify-content: space-around; } .tab { width: 100%; } .tab .inner { background-color: #FFF; padding: 20px; box-shadow: 1px 1px 20px rgba(0,0,0,0.15), -1px -1px 20px rgba(0,0,0,0.15); } @media (max-width: 768px) { .tab-container, .flex { display: inline-block; justify-content: initial; } } main .tab header { height: auto; margin-bottom: 0; } /* LIST FILTER */ header#filter-options { display: flex; justify-content: space-between; align-items: center; flex-wrap: nowrap; height: auto; min-height: 50px; width: 100%; } header#filter-options div { display: flex; justify-content: space-between; align-items: center; flex-wrap: nowrap; height: auto; } header#filter-options h4 { line-height: 45px; color: var(--color-font-gray); cursor: pointer; font-size: 110%; font-weight: bold; white-space: nowrap; margin: 0 20px 0 0; opacity: 0.7; } header#filter-options h4.active { border-color: var(--color-action-primary); border-bottom: 2px solid var(--color-action-primary); color: var(--color-action-primary); opacity: 1; } header#filter-options h4.active span { color: var(--color-action-primary); } header#filter-options h4 span { color: var(--color-font-gray); } header#filter-options.mobile h4 { display: flex; flex-wrap: wrap; justify-content: center; align-content: center; line-height: unset; width: 100px; height: 47px; border: 1px solid var(--color-border-primary); border-radius: 7px; background-color: white; color: var(--color-font-gray); } header#filter-options.mobile h4.active { border-color: var(--color-action-primary); background-color: var(--color-action-primary); color: white; } header#filter-options h4:hover:not(.active), header#filter-options.mobile h4:hover:not(.active) { opacity: 0.5; background-color: var(--color-action-primary); color: white; } @media (max-width: 768px) { header#filter-options { padding-left: 0; padding-right: 0; padding-top: 10px; justify-content: center; } header#filter-options div { width: 100%; justify-content: center; } header#filter-options h4 { font-size: 90%; margin: 0 15px 0 0; } } @media (max-width: 520px) { header#filter-options h4 { font-size: 85%; } } @media (max-width: 480px) { header#filter-options h4 { font-size: 80%; margin: 0 12px 0 0; } header#filter-options h4 span { display: none; } } .er__header-container { display: flex; justify-content: space-between; width: 100%; padding-left: 5%; padding-right: 5%; background-color: #f2f3f3; } .er__header-container.white { background-color: white; } .er__section-container { padding: 20px; border: 1px solid #E7E7E7; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); margin-bottom: 20px; } .er__tab-options { position: relative; display: flex; min-height: 40px; justify-content: flex-start; flex-wrap: wrap; width: auto; margin-bottom: -1px; z-index: 2; } .er__tab-options .filter { display: inline-flex; align-items: center; height: 40px; padding-left: 20px; padding-right: 20px; line-height: 40px; font-size: 14px; font-weight: 400; white-space: nowrap; border-top: 1px solid #E2E2E2; border-right: 1px solid #E2E2E2; border-left: 1px solid #E2E2E2; border-bottom: 1px solid #f2f3f3; color: rgba(60, 64, 67, 0.5); background-color: #f2f3f3; cursor: pointer; } .er__tab-options .filter:first-child { border-top-left-radius: 6px; border-top-right-radius: 0px; margin-left: 0; } .er__tab-options .filter:last-child { border-top-right-radius: 6px; border-top-left-radius: 0; margin-right: 0; } .er__tab-options .filter.active { color: var(--color-action-primary); background-color: #fff; border-bottom: 1px solid white; margin-right: 4px; cursor: default; } /*------------ WIDGETS --------------*/ .widget { width: 100%; height: auto; min-height: 200px; border: 1px solid #E7E7E7; border-radius: 6px; background-color: #FFFFFF; /*box-shadow: 1px 1px 15px rgba(0,0,0,0.15), -1px -1px 15px rgba(0,0,0,0.15);*/ } .widget header { display: flex; justify-content: space-between; align-items: center; flex-wrap: nowrap; min-height: 60px; height: auto; max-height: 120px; padding: 20px; margin: 0; background-color: #fafafa; border-bottom: 1px solid #E1E1E1; text-align: left; } .widget header.no-bottom-border{ border-bottom: none; } .widget header h1 { font-size: 120%; font-weight: normal; } .widget .body { padding: 20px; } .checkmark-anim { stroke: green; stroke-dashoffset: 745.74853515625; stroke-dasharray: 745.74853515625; animation: dash 1s ease-in forwards; } @keyframes dash { 0% { stroke-dashoffset: 745.74853515625; } 100% { stroke-dashoffset: 0; } } /* FLICKER ANIMATION FOR LOADING */ @keyframes flickerAnimation { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } } @-o-keyframes flickerAnimation { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } } @-moz-keyframes flickerAnimation { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes flickerAnimation { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } } .animate-flicker { -webkit-animation: flickerAnimation 2s infinite; -moz-animation: flickerAnimation 2s infinite; -o-animation: flickerAnimation 2s infinite; animation: flickerAnimation 2s infinite; } div.signed-checkmark { position: absolute; left: 50%; top: 50%; width: 60px; height: 60px; z-index: 500; display: none; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } @-webkit-keyframes CHECKGROW { 0% { -webkit-transform: scale(1.0); } 50% { -webkit-transform: scale(1.7); } 100% { -webkit-transform: scale(1.0); } } @-moz-keyframes CHECKGROW { 0% { -moz-transform: scale(1.0); } 50% { -moz-transform: scale(1.7); } 100% { -moz-transform: scale(1.0); } } @-o-keyframes CHECKGROW { 0% { -o-transform: scale(1.0); } 50% { -o-transform: scale(1.7); } 100% { -o-transform: scale(1.0); } } @-ms-keyframes CHECKGROW { 0% { -ms-transform: scale(1.0); } 50% { -ms-transform: scale(1.7); } 100% { -ms-transform: scale(1.0); } } @keyframes CHECKGROW { 0% { transform: scale(1.0); } 50% { transform: scale(1.7); } 100% { transform: scale(1.0); } } .grow-anim { -webkit-animation: CHECKGROW 1s ease; /* Safari 4+ */ -moz-animation: CHECKGROW 1s ease; /* Fx 5+ */ -o-animation: CHECKGROW 1s ease; /* Opera 12+ */ -ms-animation: CHECKGROW 1s ease; /* Opera 12+ */ animation: CHECKGROW 1s ease; /* IE 10+, Fx 29+ */ } /* Consent Signing and Signature Pads */ .signature-pad { /* */ } .signature-pad-status { width: 100%; height: auto; padding: 4px 16px; font-weight: bold; text-align: center; } .signature-pad-status.darkblue { color: #364760; } .signature-pad-status.info { color: #85D6DE; } .signature-pad-status.success { color: #82B440; } .signature-pad-status.warning { color: #F3BC65; } .signature-pad-canvas { /* */ } /* dialog box */ .dialog-box.ui-dialog { border-radius: 0; padding: 0; z-index: 1051; border: 0; width: 100%; } .dialog-box.ui-dialog .ui-dialog-content { border: 1px solid #e7e7e7; border-top: 0; border-bottom: 0; border-radius: 0; } .dialog-box .ui-dialog-titlebar { background: #05456A none repeat scroll 0 0; border: 0 none; border-radius: 0; color: #fff; padding: 8px 15px; border-radius: 0; border: 0; height: 44px; font-size: 18px; font-weight: normal; } .dialog-box.ui-dialog .ui-dialog-titlebar-close { background: transparent none repeat scroll 0 0; border: 0 none; font-size: 20px; font-weight: bold; margin: -10px 0 0; padding: 0; position: absolute; right: 0.8em; top: 42%; } .dialog-box.ui-dialog .ui-dialog-content { border: 1px solid #e7e7e7; border-top: 0; border-bottom: 0; border-radius: 0; } .dialog-box.ui-dialog .ui-dialog-content p { margin: 15px 0 32px; font-size: 14px; color: #555555; min-height: 102px; } .dialog-box.ui-dialog .ui-dialog-buttonpane { background: #EBEBEB none repeat scroll 0 0; border: 1px solid #d6d6d6; padding: 5px 20px; font-size: 12px; margin-top: 0; } .dialog-box.ui-dialog .ui-dialog-buttonpane button { margin: 0px 8px; } .dialog-box.ui-dialog .btn-darkblue { background: #05456A; } @media only screen and (max-width : 768px) { .form-control.code-input { margin-bottom: 10px; width: 100%; } /* */ .documentpages { /*padding-top:65px;*/ } .documentpages .title { margin-left: 0px; margin-right: 0px; font-size: 26px; } .documentpages .metapage, .documentpages .page { padding-left: 0px; } .documentpages .signpost .marker { display: none; } .documentpages .signpost .pagemask { bottom: 0px; left: 0px; } .documentpages .signpost.presign .pagemask { background: rgba(154,154,154,.25); } .documentpages .signpost.presign:hover .pagemask { background: rgba(154,154,154,.35); } .documentpages .signpost.sign .pagemask { background: rgba(133,214,222,.25); } .documentpages .signpost.sign:hover .pagemask { background: rgba(133,214,222,.35); } .documentpages .signpost.postsign .pagemask { background: rgba(130,180,64,.25); } .documentpages .signpost.postsign:hover .pagemask { background: rgba(130,180,64,.35); } .documentpages .signpost.presign .signature, .documentpages .signpost.sign .signature, .documentpages .signpost.postsign .signature, .documentpages .signpost.presign:hover .signature, .documentpages .signpost.sign:hover .signature, .documentpages .signpost.postsign:hover .signature { background: none; font-size: 1em; line-height: 1em; } .documentpages .signage { display: none; } .documentpages .signage.header { display: block; } } /* */ #transaction-sign.content-box { margin-bottom: 76px; /*Make up for footer*/ } /* Signing Dialog */ .delete-cancel-btn { background-color: #929292; } .delete-confirm-btn { background-color: #228848; } .ui-dialog-buttonset button.btn:visited, .ui-dialog-buttonset button.btn:focus { background-color: #228848; } .ui-dialog-buttonset button.btn:hover { background-color: #238949; } /* header */ #transaction-sign .page-title-info { padding-top: 20px; padding-bottom: 20px; } #transaction-sign .page-title-info .page-title-heading, #transaction-sign .page-title-info .page-title-type, #transaction-sign .page-title-info .page-title-date, #transaction-sign .page-title-info .page-title-account-number { display: block; height: auto; text-align: left; font-weight: bold; color: #555555; font-size: 24px; width: 100%; margin: 0; } #transaction-sign .page-title-info .page-title-type, #transaction-sign .page-title-info .page-title-account-number { font-size: 18px; } #transaction-sign .page-title-info .page-title-date, #transaction-sign .page-title-info .page-title-account-number { text-align: right; } /* mobile header */ #transaction-sign .mobile-page-title-info { display: none; width: 100%; padding-top: 12px; padding-bottom: 12px; background-color: #fff; box-shadow: 1px 1px 20px rgba(0,0,0,0.2); padding: 10px; } #transaction-sign .mobile-page-title-info .page-title-heading, #transaction-sign .mobile-page-title-info .page-title-type, #transaction-sign .mobile-page-title-info .page-title-date, #transaction-sign .mobile-page-title-info .page-title-account-number { display: block; height: auto; text-align: left; font-weight: bold; color: #555555; font-size: 150%; width: 100%; margin: 0; } #transaction-sign .mobile-page-title-info .page-title-type, #transaction-sign .mobile-page-title-info .page-title-date, #transaction-sign .mobile-page-title-info .page-title-account-number { display: inline-block; font-size: 120%; width: auto; font-weight: 400; } #transaction-sign .mobile-page-title-info .page-title-type { max-width: 175px; padding-right: 5px; } #transaction-sign .mobile-page-title-info .page-title-account-number { max-width: 250px; } #transaction-sign .mobile-page-title-info .page-title-date { float: right; } /* header media queries */ @media (max-width: 768px) { #transaction-sign .page-title-info { display: none; } #transaction-sign .mobile-page-title-info { display: block; } #transaction-sign .mobile-page-title-info .page-title-type, #transaction-sign .mobile-page-title-info .page-title-account-number, #transaction-sign .mobile-page-title-info .page-title-date { vertical-align: top; } } @media (max-width: 400px) { #transaction-sign .mobile-page-title-info .page-title-heading { font-size: 110%; } #transaction-sign .mobile-page-title-info .page-title-type, #transaction-sign .mobile-page-title-info .page-title-account-number, #transaction-sign .mobile-page-title-info .page-title-date { font-size: 80%; } } #transaction-sign { padding-top: 0px; } #transaction-sign #header-table { float: right; margin-top: 15px; } #transaction-sign #header-table thead { padding-top: 10px !important; } #transaction-sign #header-table th, #transaction-sign #header-table td { width: 200px !important; font-size: 13px; line-height: 20px; background-color: transparent; padding-left: 10px; } #transaction-sign #header-table th { font-weight: 700; } #transaction-sign #header-table th:nth-child(1), #transaction-sign #header-table td:nth-child(1) { border-left: 3px solid #82B440; } #transaction-sign #header-table th:nth-child(2), #transaction-sign #header-table td:nth-child(2) { border-left: 3px solid #F3BC65; } #transaction-sign #header-table th:nth-child(3), #transaction-sign #header-table td:nth-child(3) { border-left: 3px solid #364760; } /* dialog box */ .transaction-sign-dialog { position: fixed; z-index: 1051; padding: 0px; border: none; max-width: 660px; } .transaction-sign-dialog .controls { text-align: right; } .transaction-sign-dialog:before { content: ''; z-index: -1; position: absolute; top: -50vh; left: -50vw; width: 350vw; height: 350vh; background: rgba(0,0,0,.54); } .transaction-sign-dialog.topaz, .transaction-sign-dialog.signotec { position: fixed; top: auto !important; bottom: 0px !important; left: 0px !important; width: 320px !important; -webkit-box-shadow: 0px 0px 25px rgba(0,0,0,.40); -moz-box-shadow: 0px 0px 25px rgba(0,0,0,.40); box-shadow: 0px 0px 25px rgba(0,0,0,.40); } .transaction-sign-dialog.minimized { /* */ } .transaction-sign-dialog.topaz:before, .transaction-sign-dialog.signotec:before { display: none; } .transaction-sign-dialog .controls .close-dialog { -ms-touch-action: none; touch-action: none; max-width: 40px !important; } .transaction-sign-dialog .ui-dialog-content { border: 1px solid #e7e7e7; border-top: 0; border-bottom: 0; border-radius: 0; background: #FFF; } .transaction-sign-dialog .ui-dialog-titlebar { background: #05456A none repeat scroll 0 0; border: 0 none; border-radius: 0; color: #fff; padding: 8px 15px 8px 10px; border-radius: 0; border: 0; height: 44px; font-size: 18px; font-weight: normal; } .transaction-sign-dialog .ui-dialog-title { width: 100%; overflow: visible; } .transaction-sign-dialog .ui-dialog-title .pad-connection { position: relative; display: inline-block; float: left; margin: -4px 0px 0px 8px; } .transaction-sign-dialog .ui-dialog-title .pad-connection .status { font-size: 12px; color: rgba(255,255,255,.87); } .transaction-sign-dialog .ui-dialog-title .pad-connection .type { font-size: 12px; color: rgba(255,255,255,.54); } .transaction-sign-dialog .ui-dialog-title label { position: relative; display: inline-block; float: left; } .transaction-sign-dialog .ui-dialog-title label input { width: 0px; height: 0px; } .transaction-sign-dialog .ui-dialog-title label input + span { position: relative; display: inline-block; float: left; width: 40px; height: 25px; border-radius: 25px; background: #E74E40; border: 1px solid transparent; cursor: pointer; } .transaction-sign-dialog.topaz .ui-dialog-title label input + span, .transaction-sign-dialog.signotec .ui-dialog-title label input + span { background: #82B440; } .transaction-sign-dialog .ui-dialog-title label input + span:after { content: ''; position: absolute; top: 1px; bottom: 1px; left: 1px; width: 21px; background: #FFFFFF; border-radius: 25px; box-shadow: 1px 1px 10px rgba(0,0,0,.25); transition: left .1s ease-out, right .1s ease-out; } .transaction-sign-dialog .ui-dialog-title label:hover input + span:after { left: 3px; transition: left .1s ease-in; } .transaction-sign-dialog.topaz .ui-dialog-title label input + span:after, .transaction-sign-dialog.signotec .ui-dialog-title label input + span:after { left: auto; right: 1px; } .transaction-sign-dialog.topaz .ui-dialog-title label:hover input + span:after, .transaction-sign-dialog.signotec .ui-dialog-title label:hover input + span:after { right: 3px; transition: right .1s ease-in; } .transaction-sign-dialog .ui-dialog-title .controls { position: relative; display: inline-block; float: right; height: 100%; line-height: 100%; margin-right: -6px; } .transaction-sign-dialog .ui-dialog-title .controls span { position: relative; display: inline-block; top: -4px; padding: 0px 4px; font-size: 15px; line-height: 30px; letter-spacing: 1px; color: rgba(255,255,255,.54); } .transaction-sign-dialog .ui-dialog-title .controls a { position: relative; display: inline-block; margin: 0px; padding: 0px 6px; font-size: 24px; line-height: 25px; color: rgba(255,255,255,.87); cursor: pointer; } .transaction-sign-dialog .ui-dialog-title .controls a.minimize, .transaction-sign-dialog .ui-dialog-title .controls a.maximize { display: none; } .transaction-sign-dialog.topaz .ui-dialog-title .controls a.minimize, .transaction-sign-dialog.signotec .ui-dialog-title .controls a.minimize { top: -2px; display: inline-block; } .transaction-sign-dialog.topaz.minimized .ui-dialog-title .controls a.minimize, .transaction-sign-dialog.signotec.minimized .ui-dialog-title .controls a.minimize { display: none; } .transaction-sign-dialog.topaz.minimized .ui-dialog-title .controls a.maximize, .transaction-sign-dialog.signotec.minimized .ui-dialog-title .controls a.maximize { font-size: 22px; display: inline-block; } .transaction-sign-dialog .ui-dialog-title .controls a:hover { text-decoration: none; color: rgba(255,255,255,1.0); } .transaction-sign-dialog .ui-dialog-titlebar-close { display: none; background: transparent none repeat scroll 0 0; border: 0 none; font-size: 20px; font-weight: bold; margin: -10px 0 0; padding: 0; position: absolute; right: 0.8em; top: 42%; text-align: right; width: 30%; } .transaction-sign-dialog .ui-dialog-titlebar-close span { position: relative; display: inline-block; top: -.175em; font-size: 15px; line-height: inherit; margin-right: 8px; letter-spacing: 1px; } .transaction-sign-dialog .ui-dialog-content { border: 1px solid #e7e7e7; border-top: 0; border-bottom: 0; border-radius: 0; } .transaction-sign-dialog.topaz .ui-dialog-content, .transaction-sign-dialog.signotec .ui-dialog-content { width: 100% !important; max-width: 100% !important; } .transaction-sign-dialog.topaz.minimized .ui-dialog-content, .transaction-sign-dialog.signotec.minimized .ui-dialog-content { display: none !important; } .transaction-sign-dialog .ui-dialog-content p { margin: 15px 0 32px; font-size: 14px; color: #555555; min-height: 102px; } .transaction-sign-dialog .ui-dialog-buttonpane { background: #EBEBEB none repeat scroll 0 0; border: 1px solid #d6d6d6; padding: 5px 20px; font-size: 12px; margin-top: 0; height: 46px; } .transaction-sign-dialog.topaz .ui-dialog-buttonpane, .transaction-sign-dialog.signotec .ui-dialog-buttonpane { /* display:none; */ /* TODO: hide on pad signing */ } .transaction-sign-dialog.topaz.minimized .ui-dialog-buttonpane, .transaction-sign-dialog.signotec.minimized .ui-dialog-buttonpane { display: none; } .transaction-sign-dialog .ui-dialog-buttonset { width: 100%; } .transaction-sign-dialog .ui-dialog-buttonpane button { margin: 0px 8px; border: none; } .transaction-sign-dialog .ui-dialog-buttonpane button:active:focus { padding: 8px 12px; margin: 0px 8px; outline: none; box-shadow: inset 0 10px 15px rgba(0,0,0,.15); } .transaction-sign-dialog .btn-darkblue { background: #05456A; } .transaction-sign-dialog .signature-pad { /* */ } .transaction-sign-dialog.topaz .signature-pad, .transaction-sign-dialog.signotec .signature-pad { position: relative; width: 100%; overflow: hidden; } canvas#transactionSignCanvas { -ms-touch-action: none; touch-action: none; } .transaction-sign-dialog .signature-pad .underline { z-index: 100; /*content: 'DRAW SIGNATURE';*/ position: absolute; bottom: 17%; left: 54px; right: 50px; width: auto; height: auto; padding: 4px 0px 0px 0px; font-weight: bold; font-size: 12px; line-height: 14px; color: rgba(0,0,0,.25); border-top: 2px solid rgba(0,0,0,.15); -webkit-user-select: none; -moz-user-select: none; user-select: none; pointer-events: none; text-transform: uppercase; } /* .transaction-sign-dialog.initials .signature-pad:before { content: 'DRAW INITIALS'; } */ .transaction-sign-dialog.topaz .signature-pad:before, .transaction-sign-dialog.signotec .signature-pad:before { bottom: 24px; left: 20px; right: 20px; margin: 0px; width: auto; font-size: 11px; border-top: 1px solid rgba(0,0,0,.15); } .transaction-sign-dialog .signature-pad-status { width: 100%; height: 48px; max-width: 620px; padding: 4px 0px; font-weight: bold; text-align: center; background: none !important; } .transaction-sign-dialog .signature-pad-status button { float: right; color: var(--color-bg-teal); border: 2px solid var(--color-bg-teal); border-radius: 4px; padding: 6px 12px 6px 12px; background-color: #FFFFFF; font-size: 14px; font-weight: bold; } .transaction-sign-dialog.topaz .signature-pad-status, .transaction-sign-dialog.signotec .signature-pad-status { height: auto; padding: 4px 0px; font-weight: normal; font-size: 13px; } .transaction-sign-dialog .signature-pad-status.darkblue { color: #364760; } .transaction-sign-dialog .signature-pad-status.info { color: #85D6DE; } .transaction-sign-dialog .signature-pad-status.success { color: #82B440; } .transaction-sign-dialog .signature-pad-status.warning { color: #F3BC65; } .transaction-sign-dialog .signature-pad-canvas { /* */ } .transaction-sign-dialog.topaz .signature-pad-canvas, .transaction-sign-dialog.signotec .signature-pad-canvas { margin: -100px 0px 10px 0px; transform-origin: bottom left; transform: scale(.45, .45); } @media only screen and (max-width : 1000px) { #transaction-sign #header-table { float: left; margin-top: 0px; margin-bottom: 16px; } } @media only screen and (max-width : 768px) { #transaction-sign .form-control.code-input { margin-bottom: 10px; width: 100%; } /* */ #transaction-sign .documentpages { padding-top: 65px; } #transaction-sign .documentpages .controls.top { padding: 0px; text-align: center; } #transaction-sign .documentpages .metapage, #transaction-sign .documentpages .page { padding-left: 0px; } #transaction-sign .documentpages .signpost .marker { display: none; } #transaction-sign .documentpages .signpost .pagemask { bottom: 0px; left: 0px; } #transaction-sign .documentpages .signpost.presign .pagemask { background: rgba(154,154,154,.25); } #transaction-sign .documentpages .signpost.presign:hover .pagemask { background: rgba(154,154,154,.35); } #transaction-sign .documentpages .signpost.sign .pagemask { background: rgba(133,214,222,.25); } #transaction-sign .documentpages .signpost.sign:hover .pagemask { background: rgba(133,214,222,.35); } #transaction-sign .documentpages .signpost.sign.consent .pagemask { background: rgba(54,71,96,.25); } #transaction-sign .documentpages .signpost.sign.consent:hover .pagemask { background: rgba(54,71,96,.35); } #transaction-sign .documentpages .signpost.postsign .pagemask { background: rgba(130,180,64,.25); } #transaction-sign .documentpages .signpost.postsign:hover .pagemask { background: rgba(130,180,64,.35); } #transaction-sign .documentpages .signpost.presign .signature, #transaction-sign .documentpages .signpost.sign .signature, #transaction-sign .documentpages .signpost.sign.consent .signature, #transaction-sign .documentpages .signpost.postsign .signature, #transaction-sign .documentpages .signpost.presign:hover .signature, #transaction-sign .documentpages .signpost.sign:hover .signature, #transaction-sign .documentpages .signpost.sign.consent:hover .signature, #transaction-sign .documentpages .signpost.postsign:hover .signature { background: none; font-size: 1em; line-height: 1em; } #transaction-sign .documentpages .signage { display: none; } #transaction-sign .documentpages .signage.header { display: block; } } /* ----------------------------------------------- SIGNING AND DOCUMENT VIEWING --------------------------------------------------*/ section.download-consent { text-align: center; padding-top: 10px; padding-bottom: 25px; } ul.document-pages { width: 100%; } ul li.page { position: relative; list-style: none; width: 100%; box-shadow: 1px 1px 20px rgba(0,0,0,0.1); margin-bottom: 20px; } ul li.page img { width: 100%; } .field-post { padding: 0 !important; margin: 0 !important; z-index: initial !important; background-color: RGBA(245, 246, 250, 0.7); border: 2px dashed var(--color-action-primary); background-size: contain; background-repeat: no-repeat; background-position: 0,0; transition: all .4s; -webkit-transition: all .4s; -moz-transition: all .4s; -ms-transition: all .4s; /*ie 10*/ box-shadow: 1px 1px 15px rgba(152,217,19, 0.3), -1px -1px 15px rgba(152,217,19, 0.3); } .field-post.disabled { display: none; } .field-post div.action { position: absolute; left: 50%; top: 50%; width: 50px; height: 50px; text-align: center; border: 2px solid var(--color-action-primary); background-color: RGBA(245, 246, 250, 1); border-radius: 50%; cursor: pointer; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .field-post .spinner { display: none; position: absolute; left: 50%; top: 50%; width: 50px; height: 50px; text-align: center; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: 200; } .field-post .spinner i.fa { line-height: 50px; font-size: 40px; color: var(--color-action-primary); text-align: center; } .field-post div.action i.fa { line-height: 50px; color: var(--color-action-primary); font-size: 30px; line-height: 50px; cursor: pointer; } .field-post div.popup.center { display: none; position: absolute; left: 50%; top: 40px; min-width: 220px; height: auto; min-height: 50px; border: 1px solid #eee; background-color: RGBA(245, 246, 250, 1); box-shadow: 1px 1px 20px rgba(0,0,0,0.2); padding: 30px 10px 5px 10px; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -o-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); font-size: 12px; font-weight: 500; z-index: 2; border-radius: 6px; } .field-post div.popup.left { left: 0; -webkit-transform: translateX(0); -moz-transform: translateX(0); -o-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } .field-post div.popup.right { left: initial; right: 0; -webkit-transform: translateX(0); -moz-transform: translateX(0); -o-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } .field-post div.popup.center:before { content: ""; position: absolute; top: -4px; left: 50%; width: 25px; height: 25px; background-color: RGBA(245, 246, 250, 1); -webkit-transform: rotate(45deg) translateX(-50%); -moz-transform: rotate(45deg) translateX(-50%); -o-transform: rotate(45deg) translateX(-50%); transform: rotate(45deg) translateX(-50%); z-index: -1000; } .field-post div.popup.left:before { content: ""; position: absolute; top: -4px; left: 4px; width: 25px; height: 25px; background-color: RGBA(245, 246, 250, 1); -webkit-transform: rotate(45deg) translateX(0); -moz-transform: rotate(45deg) translateX(0); -o-transform: rotate(45deg) translateX(0); transform: rotate(45deg) translateX(0); z-index: -1000; } .field-post div.popup.right:before { content: ""; position: absolute; top: -4px; left: initial; right: 4px; width: 25px; height: 25px; background-color: RGBA(245, 246, 250, 1); -webkit-transform: rotate(45deg) translateX(0); -moz-transform: rotate(45deg) translateX(0); -o-transform: rotate(45deg) translateX(0); transform: rotate(45deg) translateX(0); z-index: -1000; } .field-post div.popup div.button { width: 100%; height: auto; text-align: center; cursor: pointer; background-color: var(--color-action-primary); color: #FFF; border-radius: 12px; padding: 4px; } .field-post div.popup div.button.sign-consent-button { background-color: transparent; } .field-post div.popup div.button span { vertical-align: middle; text-align: center; color: #FFF; } .field-post .close-popup { position: absolute; right: 7px; top: 7px; z-index: 10; width: 25px; height: 25px; line-height: 25px; text-align: center; font-size: 15px; color: #3c4043; cursor: pointer; } .field-post .open-popup { position: absolute; top: 50%; color: var(--color-action-primary); width: 25px; height: 25px; text-align: center; line-height: 25px; font-size: 15px; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -o-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); z-index: 501; cursor: pointer; } .field-post-marker { position: absolute; left: 0; width: 4px; /*height and bottom are set in js*/ background-color: var(--color-action-primary); } span.field-info { width: 100%; min-height: 16px; height: auto; font-size: 12px; line-height: initial; } ul.fi-list li div.field-bottom { position: absolute; left: 50%; top: 120%; width: auto; height: 15px !important; margin: 0 !important; background-color: #2F4056; text-align: center !important; line-height: 5px !important; padding: 0 2px 0 2px !important; border: 2px solid #2F4056; opacity: 1; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -o-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } ul.fi-list li div.field-bottom.optional { background-color: green; border: none; padding-top: 1.5px !important; } ul.fi-list li div.field-bottom:hover { opacity: 0.2; } ul.fi-list li div.field-bottom span { width: 100%; color: #FFF; font-size: 9px; text-align: center; line-height: 11px; } ul.fi-list li div .click-to-apply, .click-to-apply { line-height: initial; } .field-post button{ border-radius: 7px; } button.apply-fieldpost{ width: 100%; height: auto; min-height: 35px; } .field-post .popup .fa.fa-info-circle { color: indianred; font-size: 14px; margin-right: 8px; } .click-area { position: absolute; left: 0; top: 0; bottom: 0; right: 0; padding: 0 !important; margin: 0 !important; width: 100%; height: 100%; cursor: pointer; } .field-post .checkmark { width: 100%; } /* ------------------------------------------------------------------- PAD SIGNING MODAL FOR CREATE, CONSENT, AND SIGN ------------------------------------------------------------------------*/ #pad-signing-modal { padding-right: 10px; } .pad-signing-modal-title { font-weight: bold; font-size: 16px; } #pad-signing-modal-switch-label { padding: 7px 10px 0px 0px; }