UNPKG

@egovernments/digit-ui-css

Version:

## Install

1,683 lines (1,522 loc) 456 kB
/*! * @egovernments/digit-ui-css - 1.8.24 * * Copyright (c) 2025 Jagankumar <jagan.kumar@egov.org.in> * */ /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ *, :after, :before { -webkit-box-sizing: border-box; box-sizing: border-box; border: 0 solid; } @-webkit-keyframes ping { 75%, to { -webkit-transform: scale(2); transform: scale(2); opacity: 0; } } @keyframes ping { 75%, to { -webkit-transform: scale(2); transform: scale(2); opacity: 0; } } @-webkit-keyframes pulse { 50% { opacity: .5; } } @keyframes pulse { 50% { opacity: .5; } } @-webkit-keyframes bounce { 0%, to { -webkit-transform: translateY(-25%); transform: translateY(-25%); -webkit-animation-timing-function: cubic-bezier(0.8, 0, 1, 1); animation-timing-function: cubic-bezier(0.8, 0, 1, 1); } 50% { -webkit-transform: none; transform: none; -webkit-animation-timing-function: cubic-bezier(0, 0, 0.2, 1); animation-timing-function: cubic-bezier(0, 0, 0.2, 1); } } @keyframes bounce { 0%, to { -webkit-transform: translateY(-25%); transform: translateY(-25%); -webkit-animation-timing-function: cubic-bezier(0.8, 0, 1, 1); animation-timing-function: cubic-bezier(0.8, 0, 1, 1); } 50% { -webkit-transform: none; transform: none; -webkit-animation-timing-function: cubic-bezier(0, 0, 0.2, 1); animation-timing-function: cubic-bezier(0, 0, 0.2, 1); } } .rdrCalendarWrapper { -webkit-box-sizing: border-box; box-sizing: border-box; background: #fff; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .rdrDateDisplay { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .rdrDateDisplayItem { -webkit-box-flex: 1; -ms-flex: 1 1; flex: 1 1; width: 0; text-align: center; color: inherit; } .rdrDateDisplayItem + .rdrDateDisplayItem { margin-left: .833em; } .rdrDateDisplayItem input, .rdrDateDisplayItem .checkbox-wrap .input-emp, .checkbox-wrap .rdrDateDisplayItem .input-emp, .rdrDateDisplayItem .digit-checkbox-wrap .input-emp, .digit-checkbox-wrap .rdrDateDisplayItem .input-emp { text-align: inherit; } .rdrDateDisplayItem input:disabled, .rdrDateDisplayItem .checkbox-wrap .input-emp:disabled, .checkbox-wrap .rdrDateDisplayItem .input-emp:disabled, .rdrDateDisplayItem .digit-checkbox-wrap .input-emp:disabled, .digit-checkbox-wrap .rdrDateDisplayItem .input-emp:disabled { cursor: default; } .rdrMonthAndYearWrapper { -webkit-box-sizing: inherit; box-sizing: inherit; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .rdrMonthAndYearPickers, .rdrMonthAndYearWrapper { display: -webkit-box; display: -ms-flexbox; display: flex; } .rdrMonthAndYearPickers { -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .rdrNextPrevButton { -webkit-box-sizing: inherit; box-sizing: inherit; cursor: pointer; outline: none; } .rdrMonths { display: -webkit-box; display: -ms-flexbox; display: flex; } .rdrMonthsVertical { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .rdrMonthsHorizontal > div > div > div { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } .rdrMonth { width: 27.667em; } .rdrWeekDays { display: -webkit-box; display: -ms-flexbox; display: flex; } .rdrWeekDay { -ms-flex-preferred-size: 14.28571%; flex-basis: 14.28571%; -webkit-box-sizing: inherit; box-sizing: inherit; text-align: center; } .rdrDays { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } .rdrInfiniteMonths { overflow: auto; } .rdrDateRangeWrapper { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .rdrDateInput { position: relative; } .rdrDateInput input, .rdrDateInput .checkbox-wrap .input-emp, .checkbox-wrap .rdrDateInput .input-emp, .rdrDateInput .digit-checkbox-wrap .input-emp, .digit-checkbox-wrap .rdrDateInput .input-emp { outline: none; } .rdrDateInput .rdrWarning { position: absolute; font-size: 1.6em; line-height: 1.6em; top: 0; right: .25em; color: red; } .rdrDay { -webkit-box-sizing: inherit; box-sizing: inherit; width: 14.28571%; position: relative; font: inherit; cursor: pointer; } .rdrDayNumber { display: block; position: relative; } .rdrDayNumber span { color: #1d2429; } .rdrDayDisabled { cursor: not-allowed; } @supports (-ms-ime-align: auto) { .rdrDay { -ms-flex-preferred-size: 14.285% !important; flex-basis: 14.285% !important; } } .rdrEndEdge, .rdrInRange, .rdrSelected, .rdrStartEdge { pointer-events: none; } .rdrDateRangePickerWrapper { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .rdrStaticRanges { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .rdrStaticRange { font-size: inherit; } .rdrInputRange { display: -webkit-box; display: -ms-flexbox; display: flex; } .rdrCalendarWrapper { color: #000; font-size: 12px; } .rdrDateDisplayWrapper { background-color: #eff2f7; } .rdrDateDisplay { margin: .833em; } .rdrDateDisplayItem { border-radius: 4px; background-color: #fff; -webkit-box-shadow: 0 1px 2px 0 rgba(35, 57, 66, 0.21); box-shadow: 0 1px 2px 0 rgba(35, 57, 66, 0.21); border: 1px solid transparent; } .rdrDateDisplayItem input, .rdrDateDisplayItem .checkbox-wrap .input-emp, .checkbox-wrap .rdrDateDisplayItem .input-emp, .rdrDateDisplayItem .digit-checkbox-wrap .input-emp, .digit-checkbox-wrap .rdrDateDisplayItem .input-emp { cursor: pointer; height: 2.5em; line-height: 2.5em; border: 0; background: transparent; width: 100%; color: #849095; } .rdrDateDisplayItemActive { border-color: currentColor; } .rdrDateDisplayItemActive input, .rdrDateDisplayItemActive .checkbox-wrap .input-emp, .checkbox-wrap .rdrDateDisplayItemActive .input-emp, .rdrDateDisplayItemActive .digit-checkbox-wrap .input-emp, .digit-checkbox-wrap .rdrDateDisplayItemActive .input-emp { color: #7d888d; } .rdrMonthAndYearWrapper { -webkit-box-align: center; -ms-flex-align: center; align-items: center; height: 60px; padding-top: 10px; } .rdrMonthAndYearPickers { font-weight: 600; } .rdrMonthAndYearPickers select { -moz-appearance: none; appearance: none; -webkit-appearance: none; border: 0; background: transparent; padding: 10px 30px 10px 10px; border-radius: 4px; outline: 0; color: #3e484f; background: url("data:image/svg+xml;utf8,<svg width='9px' height='6px' viewBox='0 0 9 6' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'><g id='Artboard' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' transform='translate(-636.000000, -171.000000)' fill-opacity='0.368716033'><g id='input' transform='translate(172.000000, 37.000000)' fill='%230E242F' fill-rule='nonzero'><g id='Group-9' transform='translate(323.000000, 127.000000)'><path d='M142.280245,7.23952813 C141.987305,6.92353472 141.512432,6.92361662 141.219585,7.23971106 C140.926739,7.5558055 140.926815,8.06821394 141.219755,8.38420735 L145.498801,13 L149.780245,8.38162071 C150.073185,8.0656273 150.073261,7.55321886 149.780415,7.23712442 C149.487568,6.92102998 149.012695,6.92094808 148.719755,7.23694149 L145.498801,10.7113732 L142.280245,7.23952813 Z' id='arrow'></path></g></g></g></svg>") no-repeat; background-position: right 8px center; cursor: pointer; text-align: center; } .rdrMonthAndYearPickers select:hover { background-color: rgba(0, 0, 0, 0.07); } .rdrMonthPicker, .rdrYearPicker { margin: 0 5px; } .rdrNextPrevButton { display: block; width: 24px; height: 24px; margin: 0 .833em; padding: 0; border: 0; border-radius: 5px; background: #eff2f7; } .rdrNextPrevButton:hover { background: #e1e7f0; } .rdrNextPrevButton i { display: block; width: 0; height: 0; padding: 0; text-align: center; border-style: solid; margin: auto; } .rdrNextPrevButton i, .rdrPprevButton i { -webkit-transform: translate(-3px); transform: translate(-3px); } .rdrPprevButton i { border-width: 4px 6px 4px 4px; border-color: transparent #34495e transparent transparent; } .rdrNextButton i { margin: 0 0 0 7px; border-width: 4px 4px 4px 6px; border-color: transparent transparent transparent #34495e; -webkit-transform: translate(3px); transform: translate(3px); } .rdrWeekDays { padding: 0 .833em; } .rdrMonth { padding: 0 .833em 1.666em; } .rdrMonth .rdrWeekDays { padding: 0; } .rdrMonths.rdrMonthsVertical .rdrMonth:first-child .rdrMonthName { display: none; } .rdrWeekDay { font-weight: 400; line-height: 2.667em; color: #849095; } .rdrDay { background: transparent; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; border: 0; padding: 0; line-height: 3em; height: 3em; text-align: center; color: #1d2429; } .rdrDay:focus { outline: 0; } .rdrDayNumber { outline: 0; font-weight: 300; position: absolute; left: 0; right: 0; top: 0; bottom: 0; top: 5px; bottom: 5px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .rdrDayToday .rdrDayNumber span { font-weight: 500; } .rdrDayToday .rdrDayNumber span:after { content: ""; position: absolute; bottom: 4px; left: 50%; -webkit-transform: translate(-50%); transform: translate(-50%); width: 18px; height: 2px; border-radius: 2px; background: #3d91ff; } .rdrDayToday:not(.rdrDayPassive) .rdrEndEdge ~ .rdrDayNumber span:after, .rdrDayToday:not(.rdrDayPassive) .rdrInRange ~ .rdrDayNumber span:after, .rdrDayToday:not(.rdrDayPassive) .rdrSelected ~ .rdrDayNumber span:after, .rdrDayToday:not(.rdrDayPassive) .rdrStartEdge ~ .rdrDayNumber span:after { background: #fff; } .rdrDay:not(.rdrDayPassive) .rdrEndEdge ~ .rdrDayNumber span, .rdrDay:not(.rdrDayPassive) .rdrInRange ~ .rdrDayNumber span, .rdrDay:not(.rdrDayPassive) .rdrSelected ~ .rdrDayNumber span, .rdrDay:not(.rdrDayPassive) .rdrStartEdge ~ .rdrDayNumber span { color: rgba(255, 255, 255, 0.85); } .rdrEndEdge, .rdrInRange, .rdrSelected, .rdrStartEdge { background: currentColor; position: absolute; top: 5px; left: 0; right: 0; bottom: 5px; } .rdrSelected { left: 2px; right: 2px; } .rdrStartEdge { border-top-left-radius: 1.042em; border-bottom-left-radius: 1.042em; left: 2px; } .rdrEndEdge { border-top-right-radius: 1.042em; border-bottom-right-radius: 1.042em; right: 2px; } .rdrSelected { border-radius: 1.042em; } .rdrDayStartOfMonth .rdrEndEdge, .rdrDayStartOfMonth .rdrInRange, .rdrDayStartOfWeek .rdrEndEdge, .rdrDayStartOfWeek .rdrInRange { border-top-left-radius: 1.042em; border-bottom-left-radius: 1.042em; left: 2px; } .rdrDayEndOfMonth .rdrInRange, .rdrDayEndOfMonth .rdrStartEdge, .rdrDayEndOfWeek .rdrInRange, .rdrDayEndOfWeek .rdrStartEdge { border-top-right-radius: 1.042em; border-bottom-right-radius: 1.042em; right: 2px; } .rdrDayStartOfMonth .rdrDayEndPreview, .rdrDayStartOfMonth .rdrDayInPreview, .rdrDayStartOfWeek .rdrDayEndPreview, .rdrDayStartOfWeek .rdrDayInPreview { border-top-left-radius: 1.333em; border-bottom-left-radius: 1.333em; border-left-width: 1px; left: 0; } .rdrDayEndOfMonth .rdrDayInPreview, .rdrDayEndOfMonth .rdrDayStartPreview, .rdrDayEndOfWeek .rdrDayInPreview, .rdrDayEndOfWeek .rdrDayStartPreview { border-top-right-radius: 1.333em; border-bottom-right-radius: 1.333em; border-right-width: 1px; right: 0; } .rdrDayEndPreview, .rdrDayInPreview, .rdrDayStartPreview { background: rgba(255, 255, 255, 0.09); position: absolute; top: 3px; left: 0; right: 0; bottom: 3px; pointer-events: none; border: 0 solid; z-index: 1; } .rdrDayStartPreview { border-top-width: 1px; border-left-width: 1px; border-bottom-width: 1px; border-top-left-radius: 1.333em; border-bottom-left-radius: 1.333em; left: 0; } .rdrDayEndPreview, .rdrDayInPreview { border-top-width: 1px; border-bottom-width: 1px; } .rdrDayEndPreview { border-right-width: 1px; border-top-right-radius: 1.333em; border-bottom-right-radius: 1.333em; right: 2px; right: 0; } .rdrDefinedRangesWrapper { font-size: 12px; width: 226px; border-right: 1px solid #eff2f7; background: #fff; } .rdrDefinedRangesWrapper .rdrStaticRangeSelected { color: currentColor; font-weight: 600; } .rdrStaticRange { border: 0; cursor: pointer; display: block; outline: 0; border-bottom: 1px solid #eff2f7; padding: 0; background: #fff; } .rdrStaticRange:focus .rdrStaticRangeLabel, .rdrStaticRange:hover .rdrStaticRangeLabel { background: #eff2f7; } .rdrStaticRangeLabel { display: block; outline: 0; line-height: 18px; padding: 10px 20px; text-align: left; } .rdrInputRanges { padding: 10px 0; } .rdrInputRange { -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 5px 20px; } .rdrInputRangeInput { width: 30px; height: 30px; line-height: 30px; border-radius: 4px; text-align: center; border: 1px solid #dee7eb; margin-right: 10px; color: #6c767a; } .rdrInputRangeInput:focus, .rdrInputRangeInput:hover { border-color: #b4bfc4; outline: 0; color: #333; } .rdrCalendarWrapper:not(.rdrDateRangeWrapper) .rdrDayHovered .rdrDayNumber:after { content: ""; border: 1px solid; border-radius: 1.333em; position: absolute; top: -2px; bottom: -2px; left: 0; right: 0; background: transparent; } .rdrDayPassive { pointer-events: none; } .rdrDayPassive .rdrDayNumber span { color: #d5dce0; } .rdrDayPassive .rdrDayEndPreview, .rdrDayPassive .rdrDayInPreview, .rdrDayPassive .rdrDayStartPreview, .rdrDayPassive .rdrEndEdge, .rdrDayPassive .rdrInRange, .rdrDayPassive .rdrSelected, .rdrDayPassive .rdrStartEdge { display: none; } .rdrDayDisabled { background-color: #f8f8f8; } .rdrDayDisabled .rdrDayNumber span { color: #aeb9bf; } .rdrDayDisabled .rdrDayEndPreview, .rdrDayDisabled .rdrDayInPreview, .rdrDayDisabled .rdrDayStartPreview, .rdrDayDisabled .rdrEndEdge, .rdrDayDisabled .rdrInRange, .rdrDayDisabled .rdrSelected, .rdrDayDisabled .rdrStartEdge { -webkit-filter: grayscale(100%) opacity(60%); filter: grayscale(100%) opacity(60%); } .rdrMonthName { text-align: left; font-weight: 600; color: #849095; padding: .833em; } .module-loader, .page-loader { text-align: center; } .page-loader { padding-top: 88px; } .module-loader { padding: 16px; } @-webkit-keyframes ldio-pjg92h09b2o { 0% { -webkit-transform: translate(-50%, -50%) rotate(0deg); transform: translate(-50%, -50%) rotate(0deg); } to { -webkit-transform: translate(-50%, -50%) rotate(1turn); transform: translate(-50%, -50%) rotate(1turn); } } @keyframes ldio-pjg92h09b2o { 0% { -webkit-transform: translate(-50%, -50%) rotate(0deg); transform: translate(-50%, -50%) rotate(0deg); } to { -webkit-transform: translate(-50%, -50%) rotate(1turn); transform: translate(-50%, -50%) rotate(1turn); } } .ldio-pjg92h09b2o div { position: absolute; width: 52px; height: 52px; border: 12px solid #22394d; border-top-color: transparent; border-radius: 50%; -webkit-animation: ldio-pjg92h09b2o 1s linear infinite; animation: ldio-pjg92h09b2o 1s linear infinite; top: 50px; left: 50px; } .loadingio-spinner-rolling-faewnb8ux8 { width: 48px; height: 48px; display: inline-block; overflow: hidden; background: none; } .ldio-pjg92h09b2o { width: 100%; height: 100%; position: relative; -webkit-transform: translateZ(0) scale(0.48); transform: translateZ(0) scale(0.48); -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform-origin: 0 0; transform-origin: 0 0; } .ldio-pjg92h09b2o div { -webkit-box-sizing: content-box; box-sizing: initial; } .body-container, body { --bg-opacity:1; background-color: #e3e3e3; background-color: rgba(227, 227, 227, var(--bg-opacity)); } .navbar { margin-bottom: 16px; } .navbar img { height: 24px; } .h1 { --text-opacity:1; color: #0b0c0c; color: rgba(11, 12, 12, var(--text-opacity)); } .link-label { color: #c84c0e; color: rgba(200, 76, 14, var(--text-opacity)); } .link-label:hover { color: #c84c0e; color: rgba(200, 76, 14, var(--text-opacity)); } .back-btn, .link-label { font-size: 16px; line-height: 24px; --text-opacity:1; --text-opacity:1; } .back-btn { width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; display: block; --border-opacity:1; border-color: #0b0c0c; border-bottom: 1px; border-color: rgba(11, 12, 12, var(--border-opacity)); border-style: solid; font-family: Roboto Condensed,sans-serif; color: #0b0c0c; color: rgba(11, 12, 12, var(--text-opacity)); margin-left: 8px; margin-top: 16px; } .back-btn label { margin-right: 8px; vertical-align: middle; } .back-btn label, .back-btn p { display: inline; } .back-btn p { float: right; } .bread-crumb { font-size: 14px; color: #505a5f; display: -webkit-box; display: -ms-flexbox; display: flex; margin-bottom: 10px; list-style: none; padding: 0; } .bread-crumb--item { margin-left: 5px; } .bread-crumb--item:not(:last-child):after { content: " /"; } .bread-crumb--item button { outline: none; } .bread-crumb--item .last { color: #0b0c0c; } .back-btn2 { cursor: pointer; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; display: -webkit-box; display: -ms-flexbox; display: flex; --border-opacity:1; border-color: #0b0c0c; border-bottom: 1px; border-color: rgba(11, 12, 12, var(--border-opacity)); border-style: solid; font-family: Roboto Condensed,sans-serif; --text-opacity:1; color: #0b0c0c; color: rgba(11, 12, 12, var(--text-opacity)); font-size: 16px; line-height: 24px; margin-left: 8px; margin-bottom: 16px; } .back-btn2 img, .back-btn2 p, .back-btn2 svg { display: -webkit-box; display: -ms-flexbox; display: flex; } @media (min-width: 780px) { .employee-app-container { width: 100%; } .app-container { width: 100%; } .app-container form .card, .app-container form .card-emp { max-width: 960px; } .app-container form .card h2, .app-container form .card-emp h2 { text-align: left; } .app-container form .card .field-container, .app-container form .card-emp .field-container { max-width: 540px; } .app-container form .card button, .app-container form .card-emp button { max-width: 240px; } .app-container form .card .card-text-button, .app-container form .card-emp .card-text-button, .app-container form .card .input-otp-wrap, .app-container form .card-emp .input-otp-wrap { text-align: left; } .h1 { font-size: 36px; line-height: 40px; } .back-btn, .back-btn2, .h1, .link-label { margin-left: 0; } } .audit-card { margin-left: -21%; } .navbar { --text-opacity:1; color: #fff; color: rgba(255, 255, 255, var(--text-opacity)); --bg-opacity:1; background-color: #22394d; background-color: rgba(34, 57, 77, var(--bg-opacity)); padding: 16px; width: 100%; position: fixed; z-index: 9999; } .navbar img { display: inline-block; min-width: 78px; height: 24px; } .navbar .nav { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .navbar .nav, .navbar .nav-wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; } @media (min-width: 780px) { .navbar .nav-wrapper .hamburger-span { display: none; } } .navbar h3 { display: inline-block; --border-opacity:1; border-color: #fff; border-left: 1px; border-color: rgba(255, 255, 255, var(--border-opacity)); border-style: solid; padding-left: 8px; margin-left: 8px; } .img-circle { border-radius: 50%; } .profile-section { height: auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding-top: 30px; background-color: #fff; } .profile-section img { width: 89px; height: 88px; margin: 0 auto 16px; } .profile-section .label-container .label-text { color: #767676; } .profile-section .label-container.name-Profile .label-text { padding: 0 1rem; word-break: break-word; margin-bottom: .5rem; letter-spacing: .6px; font-weight: 700; font-size: 18px; color: #0b0c0c; } .profile-section .profile-divider { border-top: 1px solid #d6d5d4; margin-left: 20px; margin-right: 20px; width: 90%; margin-top: 1rem; } .drawer-list { padding-top: 16px; margin-bottom: 2rem; position: relative; min-height: 1px; overflow: auto; } .drawer-list .menu-item { border: 10px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); cursor: pointer; text-decoration: none; margin: 0; padding: 0; outline: none; font-size: 16px; position: relative; color: #5f5c62; line-height: 48px; -webkit-transition: all 0.45s cubic-bezier(0.23, 1, 0.32, 1) 0ms; transition: all 0.45s cubic-bezier(0.23, 1, 0.32, 1) 0ms; min-height: 48px; white-space: normal; background: none; } .drawer-list .menu-item .icon { display: block; color: #757575; fill: #757575; height: 21px; width: 21px; float: left; margin-top: 12px; } .drawer-list .menu-item .edit-btn-ico { height: 17px; width: 17px; margin-top: 16px; } .drawer-list .menu-item .icon + .menu-label { margin-left: 36px; text-overflow: ellipsis; white-space: nowrap; } .drawer-list .sidebar-list { padding-right: 16px; padding-left: 16px; } .drawer-list .sidebar-list.active { border-left: 5px solid #c84c0e; } .drawer-list .sidebar-list.active .menu-label { color: #c84c0e; } .drawer-list .sidebar-list.active .icon { fill: #c84c0e; } .drawer-list .sidebar-list .submenu-container { cursor: pointer; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .drawer-list .sidebar-list .submenu-container .sidebar-link { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .drawer-list .sidebar-list .submenu-container .sidebar-link svg { width: 21px; height: 21px; color: #757575; fill: #757575; } .drawer-list .sidebar-list .submenu-container .actions, .drawer-list .sidebar-list .submenu-container .sidebar-link { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .drawer-list .sidebar-list .submenu-container .actions { overflow: hidden !important; } .drawer-list .sidebar-list .submenu-container .actions span { margin-left: 13px; line-height: 48px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .drawer-list .sidebar-list .submenu-container .actions input, .drawer-list .sidebar-list .submenu-container .actions .checkbox-wrap .input-emp, .checkbox-wrap .drawer-list .sidebar-list .submenu-container .actions .input-emp, .drawer-list .sidebar-list .submenu-container .actions .digit-checkbox-wrap .input-emp, .digit-checkbox-wrap .drawer-list .sidebar-list .submenu-container .actions .input-emp, .drawer-list .sidebar-list .submenu-container .actions span { color: #5f5c62; } .drawer-list .sidebar-list .submenu-container .actions input, .drawer-list .sidebar-list .submenu-container .actions .checkbox-wrap .input-emp, .checkbox-wrap .drawer-list .sidebar-list .submenu-container .actions .input-emp, .drawer-list .sidebar-list .submenu-container .actions .digit-checkbox-wrap .input-emp, .digit-checkbox-wrap .drawer-list .sidebar-list .submenu-container .actions .input-emp { border: none; outline: none; margin-left: 16px; padding: .5em; } .drawer-list .dropdown-link .actions { display: -webkit-box; display: -ms-flexbox; display: flex; padding: 1em; } .drawer-list .dropdown-link .actions svg { width: 21px; height: 21px; color: #757575; fill: #757575; } .drawer-list .dropdown-link .actions span { color: #5f5c62; } .drawer-desktop { overflow: auto; } .drawer-desktop .menu-item { border: 10px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); cursor: pointer; text-decoration: none; margin: 0; padding: 0; outline: none; font-size: 16px; position: relative; color: #5f5c62; line-height: 48px; -webkit-transition: all 0.45s cubic-bezier(0.23, 1, 0.32, 1) 0ms; transition: all 0.45s cubic-bezier(0.23, 1, 0.32, 1) 0ms; min-height: 48px; white-space: normal; background: none; } .drawer-desktop .menu-item .icon { display: block; color: #757575; fill: #757575; height: 21px !important; width: 21px !important; float: left; margin-top: 12px; } .drawer-desktop .menu-item .edit-btn-ico { height: 17px; width: 17px; margin-top: 16px; } .drawer-desktop .menu-item .icon + .menu-label { margin-left: 36px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media (min-width: 780px) { .drawer-desktop .sidebar-list { padding-right: 16px; padding-left: 16px; } .drawer-desktop .sidebar-list.active { border-left: 5px solid #c84c0e; padding-left: 11px; } .drawer-desktop .sidebar-list.active .menu-label { color: #c84c0e; } .drawer-desktop .sidebar-list.active .icon { fill: #c84c0e; } .drawer-desktop .sidebar-list .submenu-container { margin-left: 1.5rem; cursor: pointer; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .drawer-desktop .sidebar-list .submenu-container .sidebar-link { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .drawer-desktop .sidebar-list .submenu-container .sidebar-link svg { width: 21px; height: 21px; color: #757575; fill: #757575; } .drawer-desktop .sidebar-list .submenu-container .sidebar-link .actions .tooltip { margin-left: 16px; } .drawer-desktop .sidebar-list .submenu-container .actions, .drawer-desktop .sidebar-list .submenu-container .sidebar-link { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .drawer-desktop .sidebar-list .submenu-container .actions { overflow: hidden !important; } .drawer-desktop .sidebar-list .submenu-container .actions span { margin-left: 13px; line-height: 48px; white-space: nowrap; color: #5f5c62; overflow: hidden; text-overflow: ellipsis; } .drawer-desktop .dropdown-link .actions { display: -webkit-box; display: -ms-flexbox; display: flex; padding: 1em; } .drawer-desktop .dropdown-link .actions svg { width: 21px; height: 21px; color: #757575; fill: #757575; } .drawer-desktop .dropdown-link .actions span { color: #5f5c62; } } .side-bar-footer { width: 200px; margin-left: 50px; margin-top: 24px; margin-bottom: 16px; position: relative; } .digit-footer { display: -webkit-box; display: -ms-flexbox; display: flex; height: 1rem; margin-bottom: 8px; } .digit-footer img { margin-right: 8px; } .sidebar-list-footer { position: fixed; bottom: 0; } .card, .card-emp { --bg-opacity:1; background-color: #fff; background-color: rgba(255, 255, 255, var(--bg-opacity)); margin: 8px; padding: 16px 16px 24px; -webkit-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.16); box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.16); border-radius: 4px; max-width: 960px; } .card .card-header, .card-emp .card-header { font-size: 32px; line-height: 40px; font-family: Roboto Condensed,sans-serif; margin-bottom: 16px; } .card .card-header, .card-emp .card-header, .card .card-sub-header, .card-emp .card-sub-header { --text-opacity:1; color: #0b0c0c; color: rgba(11, 12, 12, var(--text-opacity)); font-weight: 700; vertical-align: middle; text-align: left; } .card .card-caption, .card-emp .card-caption, .card .card-sub-header, .card-emp .card-sub-header { font-size: 18px; line-height: 26px; margin-bottom: 8px; } .card .card-caption, .card-emp .card-caption, .card .card-text, .card-emp .card-text { --text-opacity:1; color: #505a5f; color: rgba(80, 90, 95, var(--text-opacity)); } .card .card-text, .card-emp .card-text { font-size: 16px; line-height: 24px; vertical-align: middle; text-align: left; margin-bottom: 24px; } .card .card-text span, .card-emp .card-text span { color: #0b0c0c; color: rgba(11, 12, 12, var(--text-opacity)); } .card .card-text-primary, .card-emp .card-text-primary, .card span, .card-emp span { --text-opacity:1; color: #0b0c0c; color: rgba(11, 12, 12, var(--text-opacity)); } .card .card-text-button, .card-emp .card-text-button, .card .card-text-primary, .card-emp .card-text-primary { font-size: 16px; line-height: 24px; } .card .card-text-button, .card-emp .card-text-button { --text-opacity:1; color: #c84c0e; color: rgba(200, 76, 14, var(--text-opacity)); } .card .card-label, .card-emp .card-label, .card .workbench .workbench-create-form form #digit_root .field-wrapper .form-group.field .control-label, .workbench .workbench-create-form form #digit_root .field-wrapper .form-group.field .card .control-label, .card-emp .workbench .workbench-create-form form #digit_root .field-wrapper .form-group.field .control-label, .workbench .workbench-create-form form #digit_root .field-wrapper .form-group.field .card-emp .control-label, .card .workbench .workbench-create-form form #digit_root .field-wrapper .form-group.field.field-boolean .checkbox label span, .workbench .workbench-create-form form #digit_root .field-wrapper .form-group.field.field-boolean .checkbox label .card span, .card-emp .workbench .workbench-create-form form #digit_root .field-wrapper .form-group.field.field-boolean .checkbox label span, .workbench .workbench-create-form form #digit_root .field-wrapper .form-group.field.field-boolean .checkbox label .card-emp span { font-size: 19px; line-height: 23px; --text-opacity:1; color: #0b0c0c; color: rgba(11, 12, 12, var(--text-opacity)); margin-bottom: 8px; } .card .card-label-error, .card-emp .card-label-error { display: block; font-size: 14px; line-height: 16px; color: #d4351c; color: rgba(212, 53, 28, var(--text-opacity)); } .card .card-label-desc, .card-emp .card-label-desc, .card .card-label-error, .card-emp .card-label-error { --text-opacity:1; margin-bottom: 16px; } .card .card-label-desc, .card-emp .card-label-desc { font-weight: 700; color: #505a5f; color: rgba(80, 90, 95, var(--text-opacity)); } .card .card-label-desc, .card-emp .card-label-desc, .card .card-link, .card-emp .card-link { font-size: 16px; line-height: 24px; } .card .card-link, .card-emp .card-link { display: block; text-align: center; --text-opacity:1; color: #c84c0e; color: rgba(200, 76, 14, var(--text-opacity)); margin-top: 16px; cursor: pointer; } .validation-error { display: block; font-size: 14px; line-height: 16px; --text-opacity:1; color: #d4351c; color: rgba(212, 53, 28, var(--text-opacity)); } .docsDescription { color: #0b0c0c !important; } .field-container { display: -webkit-box; display: -ms-flexbox; -webkit-box-align: center; -ms-flex-align: center; } .employeeCard { --bg-opacity:1; background-color: #fff; background-color: rgba(255, 255, 255, var(--bg-opacity)); -webkit-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.16); box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.16); padding: 16px; margin-bottom: 64px; border-radius: 4px; } .employeeCard .card-header { font-size: 32px; line-height: 40px; font-family: Roboto Condensed,sans-serif; margin-bottom: 16px; } .employeeCard .card-header, .employeeCard .card-sub-header, .employeeCard .employee-card-sub-header { --text-opacity:1; color: #0b0c0c; color: rgba(11, 12, 12, var(--text-opacity)); font-weight: 700; vertical-align: middle; text-align: left; } .employeeCard .card-sub-header, .employeeCard .employee-card-sub-header { font-size: 18px; line-height: 26px; } .employeeCard .card-section-header { font-size: 18px; line-height: 28px; font-weight: 700; } .employeeCard .card-section-header, .employeeCard .card-section-sub-text { --text-opacity:1; color: #0b0c0c; color: rgba(11, 12, 12, var(--text-opacity)); } .employeeCard .card-section-sub-text { font-size: 14px; line-height: 16px; } .employeeCard .card-caption { font-size: 18px; line-height: 26px; margin-bottom: 8px; } .employeeCard .card-caption, .employeeCard .card-text { --text-opacity:1; color: #505a5f; color: rgba(80, 90, 95, var(--text-opacity)); } .employeeCard .card-text { font-size: 16px; line-height: 24px; vertical-align: middle; text-align: left; margin-bottom: 24px; } .employeeCard .card-text span { color: #0b0c0c; color: rgba(11, 12, 12, var(--text-opacity)); } .employeeCard .card-text-primary, .employeeCard span { --text-opacity:1; color: #0b0c0c; color: rgba(11, 12, 12, var(--text-opacity)); } .employeeCard .card-text-button, .employeeCard .card-text-primary { font-size: 16px; line-height: 24px; } .employeeCard .card-text-button { --text-opacity:1; color: #c84c0e; color: rgba(200, 76, 14, var(--text-opacity)); } .employeeCard .card-label, .employeeCard .workbench .workbench-create-form form #digit_root .field-wrapper .form-group.field .control-label, .workbench .workbench-create-form form #digit_root .field-wrapper .form-group.field .employeeCard .control-label, .employeeCard .workbench .workbench-create-form form #digit_root .field-wrapper .form-group.field.field-boolean .checkbox label span, .workbench .workbench-create-form form #digit_root .field-wrapper .form-group.field.field-boolean .checkbox label .employeeCard span { font-size: 19px; line-height: 23px; color: #0b0c0c; color: rgba(11, 12, 12, var(--text-opacity)); } .employeeCard .card-label, .employeeCard .workbench .workbench-create-form form #digit_root .field-wrapper .form-group.field .control-label, .workbench .workbench-create-form form #digit_root .field-wrapper .form-group.field .employeeCard .control-label, .employeeCard .workbench .workbench-create-form form #digit_root .field-wrapper .form-group.field.field-boolean .checkbox label span, .workbench .workbench-create-form form #digit_root .field-wrapper .form-group.field.field-boolean .checkbox label .employeeCard span, .employeeCard .card-label-error { --text-opacity:1; margin-bottom: 16px; } .employeeCard .card-label-error { display: block; font-size: 14px; line-height: 16px; color: #d4351c; color: rgba(212, 53, 28, var(--text-opacity)); } .employeeCard .card-label-desc { font-weight: 700; color: #505a5f; color: rgba(80, 90, 95, var(--text-opacity)); margin-bottom: 16px; } .employeeCard .card-label-desc, .employeeCard .card-link { --text-opacity:1; font-size: 16px; line-height: 24px; } .employeeCard .card-link { display: block; text-align: center; color: #1d70b8; color: rgba(29, 112, 184, var(--text-opacity)); margin-top: 16px; } .employeeCard .card-search-heading { margin-right: 0 !important; margin-left: 0 !important; margin-bottom: 0 !important; padding-bottom: 0; padding-left: 25px; } .header-wrap { display: -webkit-box; display: -ms-flexbox; display: flex; margin-bottom: 16px; } .header-wrap .header-start { margin-right: auto; } .header-wrap .header-content { margin-top: .2rem; } .header-wrap .header-end { margin-left: auto; } .card-emp { padding-right: 0; padding-top: 0; padding-left: 0; --bg-opacity:1; background-color: #fff; background-color: rgba(255, 255, 255, var(--bg-opacity)); margin: 8px; } .submit-bar, .workbench .workbench-create-form div.action-bar-wrap .submit-bar { -webkit-box-shadow: inset 0 -2px 0 #0b0c0c; box-shadow: inset 0 -2px 0 #0b0c0c; cursor: pointer; } .submit-bar header, .workbench .workbench-create-form div.action-bar-wrap .submit-bar header { font-family: Roboto Condensed,sans-serif; font-weight: 500; font-size: 19px; line-height: 23px; --text-opacity:1; color: #fff; color: rgba(255, 255, 255, var(--text-opacity)); line-height: 2.5rem; } .submit-bar, .workbench .workbench-create-form div.action-bar-wrap .submit-bar, .submit-bar-disabled { height: 2.5rem; --bg-opacity:1; background-color: #c84c0e; background-color: rgba(200, 76, 14, var(--bg-opacity)); text-align: center; width: 100%; outline: 2px solid transparent; outline-offset: 2px; outline: 2px solid transparent; outline-offset: 2px; } .submit-bar-disabled { opacity: .5; } .submit-bar-disabled header { font-family: Roboto Condensed,sans-serif; font-weight: 500; font-size: 19px; line-height: 23px; --text-opacity:1; color: #fff; color: rgba(255, 255, 255, var(--text-opacity)); line-height: 2.5rem; } @media (min-width: 780px) { .submit-bar, .workbench .workbench-create-form div.action-bar-wrap .submit-bar, .submit-bar-disabled { width: 240px; } .card, .card-emp { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .card .card-header, .card-emp .card-header { font-size: 48px; line-height: 56px; } .card .card-sub-header, .card-emp .card-sub-header { font-size: 36px; line-height: 40px; } .card .card-caption, .card-emp .card-caption { font-size: 27px; line-height: 32px; } .card .card-text, .card-emp .card-text, .card .card-text-primary, .card-emp .card-text-primary { font-size: 19px; line-height: 28px; } .card .card-link, .card-emp .card-link { text-align: left; } .employeeCard { margin-bottom: 16px !important; } .employeeCard.filter { margin-left: auto; margin-right: auto; } .employeeCard .card-header { font-size: 48px; line-height: 56px; } .employeeCard .card-sub-header, .employeeCard .employee-card-sub-header { font-size: 36px; line-height: 40px; } .employeeCard .employee-card-sub-header { margin-bottom: 40px; } .employeeCard .card-section-header { margin-bottom: 40px; font-size: 24px; line-height: 32px; } .employeeCard .card-section-sub-text { --text-opacity:1; color: #0b0c0c; color: rgba(11, 12, 12, var(--text-opacity)); font-size: 16px; line-height: 24px; } .employeeCard .card-search-heading { margin-right: 0 !important; margin-left: 0 !important; margin-bottom: 0 !important; padding-bottom: 0; padding-left: 25px; } .employeeCard .card-caption { font-size: 27px; line-height: 32px; } .employeeCard .card-text, .employeeCard .card-text-primary { font-size: 19px; line-height: 28px; } .employeeCard .card-link { text-align: left; } .employeeCard .label-field-pair { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .employeeCard .label-field-pair h2 { width: 30%; } .employeeCard .label-field-pair .field { width: 50%; margin-right: 20%; margin-right: unset; } .employeeCard .field-container span { background: #f7f7f7; width: 40px; height: 40px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-top: -16px; border: 2px solid #000; border-right: none; } .header-wrap { display: -webkit-box; display: -ms-flexbox; display: flex; margin-bottom: 16px; } .header-wrap .header-start { margin-right: auto; } .header-wrap .header-end { margin-left: auto; } } .card-section-header { --text-opacity:1; color: #0b0c0c; color: rgba(11, 12, 12, var(--text-opacity)); font-size: 18px; line-height: 28px; font-weight: 700; } .card-search-heading { margin-right: 0 !important; margin-left: 0 !important; margin-bottom: 0 !important; padding-bottom: 0; padding-left: 25px; } .button-sub-text { width: 100%; } .home-page-info-banner-wrap { margin: "0px 16px 24px 16px"; } @media (min-width: 780px) { .button-sub-text { width: 240px; } .home-page-info-banner-wrap { max-width: 45%; min-width: 40%; margin-left: 0; margin-right: 24px; margin-bottom: 24px; } .oc-aknowledgement-screen { width: auto; min-width: 240px; max-width: 100%; padding: 0 10px; } } .card-label-error { display: block; font-size: 14px; line-height: 16px; --text-opacity:1; color: #d4351c; color: rgba(212, 53, 28, var(--text-opacity)); margin-bottom: 16px; } .BPAemployeeCard, .employeeCard-override { margin-left: 0 !important; } .BPAemployeeCard { margin-right: 0 !important; margin-bottom: 64px !important; } .employee-application-details { display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; -webkit-box-pack: justify !important; -ms-flex-pack: justify !important; justify-content: space-between !important; max-height: 60px !important; height: 60px !important; } .employee-main-application-details { padding: 10px !important; } .employee-mulitlink-main-div { z-index: 10 !important; max-width: 41% !important; } .employee-download-btn-className { position: unset !important; display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; -webkit-box-pack: end !important; -ms-flex-pack: end !important; justify-content: flex-end !important; } .employee-options-btn-className { position: unset !important; margin: 0 !important; width: 100% !important; } .selector-button-primary { height: 2rem; --bg-opacity:1; background-color: #c84c0e; background-color: rgba(200, 76, 14, var(--bg-opacity)); text-align: center; --border-opacity:1; border-color: #464646; border-bottom: 1px; border-style: solid; border-color: rgba(70, 70, 70, var(--border-opacity)); outline: 2px solid transparent; outline-offset: 2px; padding-left: 24px; padding-right: 24px; } .selector-button-primary:focus { outline: 2px solid transparent; outline-offset: 2px; } .selector-button-primary h2 { font-family: Roboto Condensed,sans-serif; font-weight: 500; font-size: 19px; line-height: 23px; --text-opacity:1; color: #fff; color: rgba(255, 255, 255, var(--text-opacity)); } .selector-button-border { height: 2rem; --bg-opacity:1; background-color: #d6d5d4; background-color: rgba(214, 213, 212, var(--bg-opacity)); text-align: center; --border-opacity:1; border-color: #464646; border-bottom: 1px; border-style: solid; border-color: rgba(70, 70, 70, var(--border-opacity)); outline: 2px solid transparent; outline-offset: 2px; padding-left: 24px; padding-right: 24px; } .selector-button-border:focus { outline: 2px solid transparent; outline-offset: 2px; } .selector-button-border h2 { font-family: Roboto Condensed,sans-serif; font-weight: 500; font-size: 19px; line-height: 23px; --text-opacity:1; color: #0b0c0c; color: rgba(11, 12, 12, var(--text-opacity)); } .input-mirror-selector-button { height: 4rem !important; --bg-opacity:1!important; background-color: #d6d5d4 !important; background-color: rgba(214, 213, 212, var(--bg-opacity)) !important; text-align: center !important; --border-opacity:1!important; border-color: #464646 !important; border-bottom: 1px !important; border-style: solid !important; border-color: rgba(70, 70, 70, var(--border-opacity)) !important; outline: 2px solid transparent !important; outline-offset: 2px !important; padding-left: 24px !important; padding-right: 24px !important; } .input-mirror-selector-button:focus { outline: 2px solid transparent; outline-offset: 2px; } .input-mirror-selector-button h2 { font-family: Roboto Condensed,sans-serif; font-weight: 500; font-size: 19px; line-height: 23px; --text-opacity:1; color: #0b0c0c; color: rgba(11, 12, 12, var(--text-opacity)); } .selector-button-primary-disabled { height: 2rem; --bg-opacity:1; background-color: #c84c0e; background-color: rgba(200, 76, 14, var(--bg-opacity)); text-align: center; --border-opacity:1; border-color: #464646; border-bottom: 1px; border-style: solid; border-color: rgba(70, 70, 70, var(--border-opacity)); outline: 2px solid transparent; outline-offset: 2px; padding-left: 24px; padding-right: 24px; opacity: .5; } .selector-button-primary-disabled:focus { outline: 2px solid transparent; outline-offset: 2px; } .selector-button-primary-disabled h2 { font-family: Roboto Condensed,sans-serif; font-weight: 500; font-size: 19px; line-height: 23px; --text-opacity:1; color: #fff; color: rgba(255, 255, 255, var(--text-opacity)); } .submit-bar:focus, .workbench .workbench-create-form div.action-bar-wrap .submit-bar:focus { outline: 2px solid transparent !important; outline-offset: 2px !important; } .jk-digit-secondary-btn { width: auto; height: 40px; background: #fff; border: 1px solid #c84c0e; padding: 12px; color: #c84c0e; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-size: 19px; cursor: pointer; } .jk-digit-secondary-btn svg { margin: 0 10px; } .jk-digit-primary-btn { width: auto; height: 40px; background: #c84c0e; border: 1px solid #c84c0e; padding: 6px; color: #fff; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; cursor: pointer; font-size: 19px; -webkit-box-shadow: inset 0 -2px 0 #0b0c0c; box-shadow: inset 0 -2px 0 #0b0c0c; } .jk-digit-primary-btn svg { margin: 0 15px; } .jk-digit-disabled-btn { opacity: .5; font-size: 19px; cursor: not-allowed; } .jk-header-btn-wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } @media (max-width: 780px) { .jk-header-btn-wrapper { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-flow: column; flex-flow: column; margin-bottom: 15px; } } .radio-wrap { margin-top: 8px; display: block; line-height: 2.5rem; margin-bottom: 24px; max-width: 540px; } .radio-wrap div { display: block; margin-bottom: 16px; } .radio-wrap .radio-btn-wrap { display: block; float: left; position: relative; } .radio-wrap .radio-btn-wrap:hover .radio-btn-checkmark { --border-opacity:1; border