.cobalt-popover-backdrop{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:var(--z-index-popover);pointer-events:all}.cobalt-popover{position:absolute;z-index:calc(var(--z-index-popover) + 1)}
.cobalt-dynamic-truncate-string-container{display:block;width:100%;min-width:119px;white-space:nowrap;overflow:hidden;font-family:inherit;font-style:inherit;font-size:inherit;font-weight:inherit;line-height:inherit}.cobalt-tooltip{position:absolute;z-index:var(--z-index-popover);visibility:hidden;opacity:0;display:flex;justify-content:center;align-items:center;gap:.5rem;background-color:var(--color-neutral-100);color:var(--text-on-color);padding:.25rem .5rem;border-radius:.25rem;font-size:var(--font-typesize-02);text-align:center;font-weight:var(--font-weight-semibold);line-height:1rem;letter-spacing:.01rem;white-space:nowrap;transition:opacity .2s ease-in-out,transform .2s ease-in-out;pointer-events:none}.cobalt-tooltip:before{content:"";position:absolute;pointer-events:auto;background:transparent}.cobalt-tooltip.tooltip-top:before{top:100%;left:50%;transform:translate(-50%);width:100%;height:.5rem}.cobalt-tooltip.tooltip-left:before{left:100%;top:50%;transform:translateY(-50%);width:.5rem;height:100%}.cobalt-tooltip.tooltip-right:before{right:100%;top:50%;transform:translateY(-50%);width:.5rem;height:100%}.cobalt-tooltip.tooltip-bottom:before{bottom:100%;left:50%;transform:translate(-50%);width:100%;height:.5rem}.cobalt-tooltip[aria-hidden=false]{opacity:1;visibility:visible;transform:translate(0);pointer-events:auto}
.cobalt-action-bar{display:flex;justify-content:space-between;padding:1.5rem;position:relative;border-bottom-left-radius:inherit;border-bottom-right-radius:inherit}.cobalt-action-bar.cobalt-action-bar-floating{position:sticky;width:100%;background-color:var(--surface-primary);z-index:var(--z-index-action-bar);border-top:1px solid var(--stroke-subtle)}.cobalt-action-bar.cobalt-action-bar-flat{position:relative;background-color:var(--surface-primary)}.cobalt-action-bar.cobalt-action-bar-left{justify-content:flex-start}.cobalt-action-bar.cobalt-action-bar-right{justify-content:flex-end}.cobalt-action-bar.desktop .action-buttons{display:flex;flex:1;gap:1.5rem}.cobalt-action-bar.desktop .action-buttons .button-row{display:flex;flex:1;flex-flow:row wrap;gap:1rem}.cobalt-action-bar.desktop .action-buttons .button-row.left{justify-content:flex-start}.cobalt-action-bar.desktop .action-buttons .button-row.left .button-item-tertiary{display:flex;flex:1;justify-content:flex-end}.cobalt-action-bar.desktop .action-buttons .button-row.right{justify-content:flex-end}.cobalt-action-bar.desktop .action-buttons .button-row.right .button-item-tertiary{display:flex;flex:1;justify-content:flex-start}.cobalt-action-bar.mobile{display:flex;flex-direction:column}.cobalt-action-bar.mobile .action-buttons{display:flex;flex:1;flex-direction:column;gap:1rem}.cobalt-action-bar.mobile .action-buttons .button-item{flex:1;display:flex}.cobalt-action-bar.mobile .action-buttons .button-item button{flex:1}
.cobalt-banner{display:flex;padding:1.2rem 1.6rem;font-weight:var(--font-weight-semibold);border-radius:.8rem}.cobalt-banner.cobalt-banner span{display:flex;align-items:center}.cobalt-banner.cobalt-banner-info{color:var(--text-on-color);background-color:var(--support-info-background)}.cobalt-banner.cobalt-banner-success{color:var(--text-on-color);background-color:var(--support-success-background)}.cobalt-banner.cobalt-banner-danger{color:var(--text-on-color);background-color:var(--support-danger-background)}.cobalt-banner.cobalt-banner-warning{color:var(--text-primary);background-color:var(--support-warning-background)}.cobalt-banner.cobalt-banner-sticky{position:-webkit-sticky;position:sticky;top:0;z-index:var(--z-index-flag-message)}.cobalt-banner .cobalt-banner-close{cursor:pointer}.cobalt-banner .cobalt-banner-message{flex:1;display:flex;flex-wrap:wrap;align-content:center;margin:0 2.4rem 0 1.6rem;gap:1rem}.cobalt-banner .cobalt-banner-message a{color:var(--text-on-color)}.cobalt-banner .cobalt-banner-message a:hover{color:inherit}.cobalt-banner .cobalt-banner-message a:focus-visible,.cobalt-banner .cobalt-banner-message a.cobalt-link-inline:focus-visible{outline:.2rem solid var(--color-white);outline-offset:.1rem;text-decoration:underline}.cobalt-banner .cobalt-banner-message.cobalt-banner-warning a:focus-visible,.cobalt-banner .cobalt-banner-message.cobalt-banner-warning a.cobalt-link-inline:focus-visible{outline:.2rem solid var(--stroke-focus);outline-offset:.1rem;text-decoration:underline}
@keyframes cobalt-loader-circular-svg{0%{transform:rotate(-50deg)}to{transform:rotate(310deg)}}@keyframes cobalt-loader-circular-circle{0%{stroke-dashoffset:280;transform:rotate(0)}50%{stroke-dashoffset:140;transform:rotate(180deg)}to{stroke-dashoffset:280;transform:rotate(360deg)}}.cobalt-loader-circular{display:inline-flex;position:relative;-webkit-user-select:none;user-select:none}.cobalt-loader-circular.cobalt-loader-circular-size-small{height:20px;width:20px}.cobalt-loader-circular.cobalt-loader-circular-size-medium{height:40px;width:40px}.cobalt-loader-circular.cobalt-loader-circular-size-large{width:4.6505rem;height:4.589rem}.cobalt-loader-circular.cobalt-loader-circular-indeterminate svg{animation:1.5s linear infinite cobalt-loader-circular-svg;transform:rotate(-50deg)}.cobalt-loader-circular.cobalt-loader-circular-indeterminate circle{display:block;animation:1.5s infinite both cobalt-loader-circular-circle;fill:transparent;stroke:var(--stroke-focus);stroke-dasharray:283;stroke-dashoffset:280;stroke-width:12px;transform-origin:50% 50%}.cobalt-loader-circular.cobalt-loader-circular-determinate svg{display:flex;justify-content:center;align-items:center;position:absolute;top:0;left:0;right:0;bottom:0;height:100%;width:100%;transform:rotate(-90deg)}.cobalt-loader-circular.cobalt-loader-circular-determinate svg circle{stroke:var(--stroke-focus)}
.cobalt-button{color:var(--text-on-color);display:inline-flex;gap:.5rem;justify-content:center;align-items:center;border-radius:.5rem;font-weight:600}.cobalt-button.cobalt-button-x-small{padding:.25rem 1rem;height:1.5rem;border-radius:.25rem}.cobalt-button.cobalt-button-x-small.cobalt-button-icon-only{width:1.5rem}.cobalt-button.cobalt-button-small{padding:.375rem 1rem;height:2rem;border-radius:.5rem}.cobalt-button.cobalt-button-small.cobalt-button-icon-only{width:2rem}.cobalt-button.cobalt-button-medium{padding:.5rem 1rem;height:2.5rem;border-radius:.5rem}.cobalt-button.cobalt-button-medium.cobalt-button-icon-only{width:2.5rem}.cobalt-button.cobalt-button-icon-only{padding:0}.cobalt-button.cobalt-button-primary{background-color:var(--button-primary-default)}.cobalt-button.cobalt-button-primary:hover{background-color:var(--button-primary-hover)}.cobalt-button.cobalt-button-primary:active:not(:disabled),.cobalt-button.cobalt-button-primary:hover:active:not(:disabled){background-color:var(--button-primary-pressed)}.cobalt-button.cobalt-button-primary:focus-visible:not(:disabled){outline-offset:1px}.cobalt-button.cobalt-button-secondary{background-color:var(--button-secondary-default);color:var(--button-text-secondary)}.cobalt-button.cobalt-button-secondary:hover{background-color:var(--button-secondary-hover)}.cobalt-button.cobalt-button-secondary:active:not(:disabled),.cobalt-button.cobalt-button-secondary:hover:active:not(:disabled){background-color:var(--button-secondary-pressed)}.cobalt-button.cobalt-button-secondary:focus-visible:not(:disabled){outline-offset:1px}.cobalt-button.cobalt-button-tertiary{background-color:transparent;border:2px solid var(--button-tertiary-default);color:var(--button-tertiary-default)}.cobalt-button.cobalt-button-tertiary:hover{border-color:var(--button-tertiary-hover);color:var(--button-tertiary-hover)}.cobalt-button.cobalt-button-tertiary:active:not(:disabled),.cobalt-button.cobalt-button-tertiary:hover:active:not(:disabled){border-color:var(--button-tertiary-pressed);color:var(--button-tertiary-pressed)}.cobalt-button.cobalt-button-tertiary:focus-visible:not(:disabled){outline-offset:1px}.cobalt-button.cobalt-button-primary-danger{background-color:var(--button-danger-default)}.cobalt-button.cobalt-button-primary-danger:hover{background-color:var(--button-danger-hover)}.cobalt-button.cobalt-button-primary-danger:active:not(:disabled),.cobalt-button.cobalt-button-primary-danger:hover:active:not(:disabled){background-color:var(--button-danger-pressed)}.cobalt-button.cobalt-button-primary-danger:focus-visible:not(:disabled){outline-offset:1px}.cobalt-button.cobalt-button-tertiary-danger{background-color:transparent;border:2px solid var(--button-danger-default);color:var(--button-danger-default)}.cobalt-button.cobalt-button-tertiary-danger:hover{border-color:var(--button-danger-hover);color:var(--button-danger-hover)}.cobalt-button.cobalt-button-tertiary-danger:active:not(:disabled),.cobalt-button.cobalt-button-tertiary-danger:hover:active:not(:disabled){border-color:var(--button-danger-pressed);color:var(--button-danger-pressed)}.cobalt-button.cobalt-button-tertiary-danger:focus-visible:not(:disabled){outline-offset:1px}.cobalt-button.cobalt-button-ghost{background-color:transparent}.cobalt-button.cobalt-button-ghost:not(:disabled){color:var(--text-interactive)}.cobalt-button.cobalt-button-ghost:not(:disabled).cobalt-button-icon-only{color:var(--icon-primary)}.cobalt-button.cobalt-button-ghost:not(:disabled):hover{background-color:var(--button-ghost-hover)}.cobalt-button.cobalt-button-ghost:not(:disabled):active,.cobalt-button.cobalt-button-ghost:not(:disabled):hover:active{background-color:var(--button-ghost-pressed)}.cobalt-button.cobalt-button-ghost:not(:disabled):focus-visible{outline-offset:1px}.cobalt-button.cobalt-button-ghost:disabled{color:var(--text-disabled)}.cobalt-button.cobalt-button-ghost-danger{background-color:var(--button-ghost-default);color:var(--red-400)}.cobalt-button.cobalt-button-ghost-danger:not(:disabled):hover{background-color:var(--button-ghost-hover)}.cobalt-button.cobalt-button-ghost-danger:not(:disabled):active,.cobalt-button.cobalt-button-ghost-danger:not(:disabled):hover:active{background-color:var(--button-ghost-pressed)}.cobalt-button.cobalt-button-ghost-danger:not(:disabled):focus-visible{outline-offset:1px}.cobalt-button.cobalt-button-ghost-danger:not(:disabled).cobalt-button-icon-only{color:var(--icon-primary)}.cobalt-button.cobalt-button-ghost-danger:not(:disabled).cobalt-button-icon-only:hover{background-color:var(--button-danger-default);color:var(--text-on-color)}.cobalt-button.cobalt-button-ghost-danger:not(:disabled).cobalt-button-icon-only:active,.cobalt-button.cobalt-button-ghost-danger:not(:disabled).cobalt-button-icon-only:hover:active{background-color:var(--button-danger-hover);color:var(--text-on-color)}.cobalt-button.cobalt-button-ghost-danger:disabled{color:var(--text-disabled)}.cobalt-button.cobalt-button-tertiary-danger:disabled,.cobalt-button.cobalt-button-tertiary:disabled{border-color:var(--button-disabled-tertiary);color:var(--text-disabled)}.cobalt-button.cobalt-button-primary-danger:disabled,.cobalt-button.cobalt-button-primary:disabled,.cobalt-button.cobalt-button-secondary:disabled{background-color:var(--button-disabled-default);color:var(--text-disabled)}
@layer component{.cobalt-link{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--font-family-text);text-decoration:none;font-weight:600;border-radius:.25rem;cursor:pointer}.cobalt-link:focus-visible:not(.cobalt-link-disabled){outline:2px solid var(--stroke-focus)}.cobalt-link.cobalt-link-x-small{font-size:.75rem;border-radius:.125rem}.cobalt-link.cobalt-link-small{font-size:1rem}.cobalt-link.cobalt-link-medium{font-size:1.25rem;font-weight:700;font-family:var(--font-family-display)}.cobalt-link.cobalt-link-primary{color:var(--link-interactive)}.cobalt-link.cobalt-link-primary:hover{color:var(--link-hover);text-decoration-line:underline}.cobalt-link.cobalt-link-primary:active:not(:disabled),.cobalt-link.cobalt-link-primary:hover:active:not(:disabled){color:var(--link-pressed)}.cobalt-link.cobalt-link-secondary{color:var(--link-secondary)}.cobalt-link.cobalt-link-secondary:hover{color:var(--link-secondary-hover);text-decoration-line:underline}.cobalt-link.cobalt-link-secondary:active:not(:disabled),.cobalt-link.cobalt-link-secondary:hover:active:not(:disabled){color:var(--link-secondary-pressed)}.cobalt-link.cobalt-link-inverse{color:var(--link-on-color);text-decoration-line:underline}.cobalt-link.cobalt-link-inverse:hover{text-decoration-line:underline}.cobalt-link.cobalt-link-inverse:active:not(:disabled),.cobalt-link.cobalt-link-inverse:hover:active:not(:disabled){text-decoration-line:underline}.cobalt-link.cobalt-link-inverse:focus-visible:not(:disabled){outline:2px solid var(--stroke-focus-on-color)}.cobalt-link.cobalt-link-disabled{color:var(--link-disabled);cursor:not-allowed;pointer-events:none;text-decoration:none}}
.cobalt-flag-message{display:flex;flex-wrap:wrap;padding:1rem;font-weight:var(--font-weight-semibold);border-radius:.8rem;gap:.6rem;line-height:1.25rem;animation:fadeIn .5s forwards;@keyframes fadeIn{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeOut{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translate(100%)}}}.cobalt-flag-message.cobalt-flag-message-container{position:fixed;top:4.5rem;right:1.5rem;z-index:calc(var(--z-index-flag-message) + 1);display:flex;flex-direction:column;align-items:flex-start}.cobalt-flag-message span{display:flex;align-items:center}.cobalt-flag-message.cobalt-flag-message-info{color:var(--text-on-color);background-color:var(--support-info-background)}.cobalt-flag-message.cobalt-flag-message-success{color:var(--text-on-color);background-color:var(--support-success-background)}.cobalt-flag-message.cobalt-flag-message-danger{color:var(--text-on-color);background-color:var(--support-danger-background)}.cobalt-flag-message.cobalt-flag-message-warning{color:var(--text-primary);background-color:var(--support-warning-background)}.cobalt-flag-message.cobalt-flag-message-warning .cobalt-link{color:var(--text-primary)}.cobalt-flag-message.cobalt-flag-message-info .cobalt-flag-message-text-action-label,.cobalt-flag-message.cobalt-flag-message-warning .cobalt-flag-message-text-action-label{color:var(--text-on-color)}.cobalt-flag-message .cobalt-flag-message-icon{vertical-align:top}.cobalt-flag-message .cobalt-flag-message-close{cursor:pointer}.cobalt-flag-message .cobalt-flag-message-content{display:flex;flex-direction:column;flex-grow:1;align-content:center;margin:0 2.4rem 0 0;gap:1rem;align-self:center}.cobalt-flag-message.fadeIn{animation:fadeIn .5s forwards}.cobalt-flag-message.fadeOut{animation:fadeOut .5s ease-in 3.5s forwards}
.section-wrapper {
display: flex;
flex: 1;
flex-direction: column;
margin: 2rem;
border-radius: 0.5rem;
background-color: #fff;
box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.1);
.form-header-section {
padding: 1.25rem 1rem 1.5rem 1rem;
}
.children-section {
padding: 0 1rem 2.44rem 1rem;
}
.footer-section {
padding: 1.38rem 1rem 1rem 1rem;
box-shadow: 0px 1px 24px 0px rgba(0, 0, 0, 0.08);
}
.section-divider {
width: 100%;
display: block;
height: 0.5px;
background-color: var(--neutral-600);
}
}
.cobalt-breadcrumb{display:flex;align-items:center}.cobalt-breadcrumb .breadcrumb-list{display:flex;list-style:none;padding:0;margin:0}.cobalt-breadcrumb .breadcrumb-list .breadcrumb-item{display:flex;align-items:center}.cobalt-breadcrumb .breadcrumb-list .breadcrumb-separator{margin:0 .5rem;color:var(--text-secondary)}.cobalt-breadcrumb .breadcrumb-list .breadcrumb-current{color:var(--text-primary);font-weight:var(--font-weight-semibold);line-height:1rem}.cobalt-breadcrumb .breadcrumb-back-button{display:inline-flex;align-items:center;gap:.25rem;border-radius:.125rem;color:var(--link-interactive);font-weight:var(--font-weight-semibold)}.cobalt-breadcrumb .breadcrumb-back-button:hover{color:var(--link-hover)}.cobalt-breadcrumb .breadcrumb-back-button:active,.cobalt-breadcrumb .breadcrumb-back-button:hover:active{color:var(--link-pressed)}.cobalt-breadcrumb .breadcrumb-back-button:focus-visible{outline:2px solid var(--stroke-focus);outline-offset:2px}
.header-section {
box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.08);
display: flex;
flex-direction: column;
flex: 1;
padding: 2rem;
gap: 1rem;
.back-button {
align-self: flex-start;
}
.breadcrumb-list {
.cobalt-link {
color: var(--text-interactive);
}
}
}
.header-section-wrapper {
display: flex;
flex: 1;
flex-direction: row;
justify-content: space-between;
align-items: flex-start;
.name {
color: var(--neutral-075);
font-family: var(--font-family-display);
font-size: 2.0625rem;
font-weight: 700;
line-height: 2.25rem;
}
.info,
.holder,
.code {
display: flex;
flex-direction: column;
color: var(--neutral-075);
font-family: var(--font-family-text);
font-size: 1.0625rem;
font-weight: 600;
line-height: 1.25rem;
}
}
.cobalt-modal {
.button-item-tertiary {
display: block !important;
}
}.cobalt-form-field-label{display:flex;justify-content:space-between}.cobalt-form-field-label .cobalt-form-field-label-main{flex:1;margin-right:auto;color:var(--text-secondary);font-family:var(--font-family-text);font-size:.75rem;font-style:normal;font-weight:600;line-height:normal;margin-bottom:.25rem}.cobalt-form-field-label .cobalt-form-field-label-additional{color:var(--text-secondary);font-family:var(--font-family-text);font-size:.75rem;font-style:normal;font-weight:400;line-height:normal}.cobalt-form-field-helper{color:var(--text-secondary);font-family:var(--font-family-text);font-size:.75rem;font-style:normal;font-weight:400;line-height:normal;margin-top:.25rem}.cobalt-form-field-helper.error{color:var(--text-danger);font-family:var(--font-family-text);font-size:.75rem;font-style:normal;font-weight:600;line-height:normal}.cobalt-form-field{display:flex;flex-direction:column}.cobalt-form-field .date-picker-button{margin-right:.25rem}.cobalt-form-field .input-wrapper{display:inline-flex;flex-direction:row;border-radius:.5rem;outline:1px solid var(--stroke-default);outline-offset:-1px;border:none;background:var(--input-default);align-items:center;min-height:2rem;width:100%}.cobalt-form-field .input-wrapper.disabled{background:var(--input-disabled)}.cobalt-form-field .input-wrapper.disabled svg{color:var(--icon-disabled)}.cobalt-form-field .input-wrapper .cobalt-text-input,.cobalt-form-field .input-wrapper .cobalt-date-picker-input{display:flex;flex:1;border:none;outline:none;outline-offset:0;border-radius:none;background:transparent}.cobalt-form-field .input-wrapper .cobalt-text-input.danger:not(:focus-visible),.cobalt-form-field .input-wrapper .cobalt-date-picker-input.danger:not(:focus-visible){outline:none;outline-offset:0}.cobalt-form-field .input-wrapper .cobalt-text-input:focus,.cobalt-form-field .input-wrapper .cobalt-date-picker-input:focus{outline:none}.cobalt-form-field .input-wrapper .cobalt-text-input input,.cobalt-form-field .input-wrapper .cobalt-date-picker-input input{border:none;border-radius:none;outline:none}.cobalt-form-field .input-wrapper.with-prefix{padding-left:.75rem}.cobalt-form-field .input-wrapper.with-suffix{padding-right:.75rem}.cobalt-form-field .input-wrapper .error-icon{color:var(--icon-danger)}.cobalt-form-field .input-wrapper.medium{min-height:2.5rem}.cobalt-form-field .input-wrapper:hover:not(.disabled):not(.focused){outline-color:var(--stroke-hover)}.cobalt-form-field .input-wrapper.error{outline:2px solid var(--stroke-danger);outline-offset:-2px;padding-right:.75rem}.cobalt-form-field .input-wrapper.error:hover{outline-color:var(--stroke-danger-hover)}.cobalt-form-field .input-wrapper.focused{outline:2px solid var(--stroke-focus);outline-offset:-2px}.cobalt-form-field .input-wrapper.disabled{background:var(--input-disabled);outline-color:var(--stroke-disabled)}
.cobalt-checkbox{display:flex;flex-direction:column;gap:.125rem}.cobalt-checkbox .cobalt-checkbox-input{display:flex;flex-direction:row;align-items:center}.cobalt-checkbox .cobalt-checkbox-input input[type=checkbox]{height:1.125rem;width:1.125rem;flex-shrink:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--input-default);border:.1rem solid var(--stroke-default);cursor:pointer;transition:all .2s ease-in-out;border-radius:.25rem;margin:0}.cobalt-checkbox .cobalt-checkbox-input input[type=checkbox]:hover{border-color:var(--stroke-hover)}.cobalt-checkbox .cobalt-checkbox-input input[type=checkbox]:active:not(:disabled):not(:checked):not(:indeterminate),.cobalt-checkbox .cobalt-checkbox-input input[type=checkbox]:active:hover:not(:disabled):not(:checked):not(:indeterminate){border:2px solid var(--stroke-focus)}.cobalt-checkbox .cobalt-checkbox-input input[type=checkbox]:focus-visible{outline:2px solid var(--stroke-focus);outline-offset:1px}.cobalt-checkbox .cobalt-checkbox-input input[type=checkbox]:checked,.cobalt-checkbox .cobalt-checkbox-input input[type=checkbox]:indeterminate{background-color:var(--button-primary-default);border-color:var(--button-primary-default)}.cobalt-checkbox .cobalt-checkbox-input input[type=checkbox]:checked:hover,.cobalt-checkbox .cobalt-checkbox-input input[type=checkbox]:indeterminate:hover{background-color:var(--button-primary-hover);border:.1rem solid var(--button-primary-hover)}.cobalt-checkbox .cobalt-checkbox-input input[type=checkbox]:checked:disabled,.cobalt-checkbox .cobalt-checkbox-input input[type=checkbox]:indeterminate:disabled{background-color:var(--icon-disabled);border-color:var(--icon-disabled)}.cobalt-checkbox .cobalt-checkbox-input input[type=checkbox]:checked.danger,.cobalt-checkbox .cobalt-checkbox-input input[type=checkbox]:indeterminate.danger{background-color:var(--button-danger-default);border-color:var(--button-danger-default)}.cobalt-checkbox .cobalt-checkbox-input input[type=checkbox]:checked.danger:hover,.cobalt-checkbox .cobalt-checkbox-input input[type=checkbox]:indeterminate.danger:hover{background-color:var(--button-danger-hover);border:.1rem solid var(--button-danger-hover)}.cobalt-checkbox .cobalt-checkbox-input input[type=checkbox].danger{border:2px solid var(--button-danger-default)}.cobalt-checkbox .cobalt-checkbox-input input[type=checkbox].danger:hover{border-color:var(--button-danger-hover)}.cobalt-checkbox .cobalt-checkbox-input input[type=checkbox].danger:active:not(:disabled):not(:checked):not(:indeterminate),.cobalt-checkbox .cobalt-checkbox-input input[type=checkbox].danger:active:hover:not(:disabled):not(:checked):not(:indeterminate){border-color:var(--button-danger-pressed)}.cobalt-checkbox .cobalt-checkbox-input input[type=checkbox]:checked:before{display:flex;background-color:var(--icon-inverse);content:"";height:100%;width:100%;-webkit-mask-image:url('data:image/svg+xml,');mask-image:url('data:image/svg+xml,');-webkit-mask-position:center;mask-position:center;-webkit-mask-size:.75rem .6rem;mask-size:.75rem .6rem;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.cobalt-checkbox .cobalt-checkbox-input input[type=checkbox]:indeterminate:before{display:flex;background-color:var(--icon-inverse);content:"";height:100%;width:100%;-webkit-mask-image:url('data:image/svg+xml,');mask-image:url('data:image/svg+xml,');-webkit-mask-position:center;mask-position:center;-webkit-mask-size:.75rem .6rem;mask-size:.75rem .6rem;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.cobalt-checkbox .cobalt-checkbox-input input[type=checkbox]:disabled{background-color:var(--input-disabled);border:.1rem solid var(--stroke-disabled);cursor:not-allowed}.cobalt-checkbox .cobalt-checkbox-input input[type=checkbox]:disabled+label{color:var(--text-disabled);cursor:not-allowed}.cobalt-checkbox .cobalt-checkbox-input input[type=checkbox]+label{color:var(--text-primary);cursor:pointer;justify-content:center;align-self:stretch;font-size:var(--text-size-1);padding-left:.5rem}.cobalt-checkbox .cobalt-checkbox-input input[type=checkbox]+label.visually-hidden{display:none}.cobalt-checkbox .cobalt-checkbox-description{display:flex;flex-flow:row wrap;margin-left:1.7rem;color:var(--text-tertiary);align-self:stretch}.cobalt-checkbox .cobalt-checkbox-description.disabled{color:var(--text-disabled)}.cobalt-checkbox .cobalt-checkbox-description.danger{color:var(--text-danger);font-weight:var(--font-weight-semibold)}
.cobalt-date-picker-input{background-color:var(--input-default);border-radius:.5rem;justify-content:space-between;flex:1 1 auto;min-width:0;display:inline-flex;flex-direction:row;align-items:center;max-width:100%}.cobalt-date-picker-input input{flex:1}.cobalt-date-picker-input .range-picker-inputs{align-items:center;display:inline-flex;gap:.75rem;padding-inline:.75rem;max-width:100%}.cobalt-date-picker-input .range-picker-inputs .to-text{color:var(--text-primary)}.cobalt-date-picker-input .date-picker-input{display:flex;color:var(--text-primary);padding:0 .75rem;border-radius:.5rem;background-color:var(--input-default);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:0 1 auto;width:fit-content;max-width:100%;field-sizing:content}.cobalt-date-picker-input .date-picker-input.medium{min-height:2.5rem}.cobalt-date-picker-input .date-picker-input::placeholder{color:var(--text-tertiary)}.cobalt-date-picker-input .date-picker-input:disabled{background:var(--input-disabled);outline-color:var(--stroke-disabled);color:var(--text-disabled);-webkit-text-fill-color:var(--text-disabled)}@supports not (field-sizing: content){.cobalt-date-picker-input .date-picker-input{width:auto}}.cobalt-date-picker-input .range-picker{padding:0;max-width:fit-content;flex:1 1 auto;min-width:0}.cobalt-date-picker-input .clear-icon{width:1rem;height:1rem;color:var(--icon-tertiary);cursor:pointer}.cobalt-date-picker-input .clear-icon:hover{color:var(--icon-primary)}
.cobalt-chip-dismiss{display:flex;align-items:center;justify-content:center;border-radius:.75rem;height:1.25rem;width:1.25rem}.cobalt-chip-dismiss:focus-visible{outline-color:var(--stroke-focus)}.cobalt-chip-dismiss.disabled{cursor:default;background:none;outline-color:transparent}
.cobalt-chip{display:inline-flex;align-items:center;padding-inline:.75rem;flex-shrink:0;gap:.25rem;background-color:var(--chips-background-off-default);border-radius:.75rem;color:var(--text-primary);font-weight:var(--font-weight-semibold);cursor:auto;height:1.5rem;border:1px solid var(--stroke-default)}.cobalt-chip:focus-visible{outline-offset:1px;outline-color:var(--stroke-focus)}.cobalt-chip.cobalt-chip-selectable:not(.cobalt-chip-disabled){cursor:pointer}.cobalt-chip.cobalt-chip-selectable:not(.cobalt-chip-disabled):hover{background-color:var(--chips-background-off-hover)}.cobalt-chip.cobalt-chip-selectable:not(.cobalt-chip-disabled):active,.cobalt-chip.cobalt-chip-selectable:not(.cobalt-chip-disabled):hover:active{background-color:var(--chips-background-off-pressed)}.cobalt-chip.cobalt-chip-selected:not(.cobalt-chip-disabled){background-color:var(--button-secondary-default);color:var(--button-text-secondary);border-color:transparent}.cobalt-chip.cobalt-chip-selected:not(.cobalt-chip-disabled).cobalt-chip-selectable:hover{background-color:var(--button-secondary-hover)}.cobalt-chip.cobalt-chip-selected:not(.cobalt-chip-disabled).cobalt-chip-selectable:active,.cobalt-chip.cobalt-chip-selected:not(.cobalt-chip-disabled).cobalt-chip-selectable:hover:active{background-color:var(--button-secondary-pressed)}.cobalt-chip.cobalt-chip-disabled{background-color:var(--chips-background-off-disabled);color:var(--text-disabled);border-color:var(--stroke-disabled)}.cobalt-chip.cobalt-chip-disabled.cobalt-chip-selected{background-color:var(--chips-background-disabled);color:var(--chips-text-disabled);border-color:transparent}.cobalt-chip .cobalt-chip-button:focus{outline:none}.cobalt-chip .cobalt-chip-button:focus-visible{outline:none}.cobalt-chip.cobalt-chip-dismissible{padding-right:.125rem}.cobalt-chip.cobalt-chip-dismissible:not(.cobalt-chip-selected) .cobalt-chip-dismiss:not(.disabled):hover{background-color:var(--chips-background-off-pressed)}.cobalt-chip.cobalt-chip-dismissible.cobalt-chip-selected,.cobalt-chip.cobalt-chip-dismissible.cobalt-chip-selected .cobalt-chip-dismissible{color:var(--button-text-secondary)}.cobalt-chip.cobalt-chip-dismissible.cobalt-chip-selected .cobalt-chip-dismiss:not(.disabled):hover{background-color:var(--chips-background-on-pressed);cursor:pointer}
.cobalt-dropdown-item{display:flex;gap:.5rem;padding:.625rem .75rem;min-height:2.5rem;cursor:pointer;transition:background-color .2s ease}.cobalt-dropdown-item.focused{background:var(--button-ghost-hover)}.cobalt-dropdown-item:hover:not(.disabled){background:var(--button-ghost-hover)}.cobalt-dropdown-item:active:not(.disabled){background:var(--button-ghost-pressed)}.cobalt-dropdown-item.selected:not(.multiselect){background:var(--button-primary-default);color:var(--text-on-color)}.cobalt-dropdown-item.selected:not(.multiselect):hover{background:var(--button-primary-default)}.cobalt-dropdown-item .dropdown-placeholder{overflow:hidden;color:var(--text-tertiary);text-overflow:ellipsis}.cobalt-dropdown-item .dropdown-selected-value{overflow:hidden;color:var(--text-primary);text-overflow:ellipsis}.cobalt-dropdown-item.disabled{cursor:not-allowed}.cobalt-dropdown-item .content{display:flex;flex-direction:column;align-items:flex-start;flex:1;gap:.25rem;word-break:break-word}.cobalt-dropdown-item .content .label{color:var(--text-primary)}.cobalt-dropdown-item .content .label.disabled{color:var(--text-disabled)}.cobalt-dropdown-item .content .label.selected:not(.multiselect){color:var(--text-on-color);font-weight:var(--font-weight-semibold)}.cobalt-dropdown-item .content .secondary-info{color:var(--text-secondary)}.cobalt-dropdown-item .content .secondary-info.selected:not(.multiselect){color:var(--text-on-color)}.cobalt-dropdown-item .icons .clear-icon{cursor:pointer;color:var(--text-secondary)}
.cobalt-dropdown{display:flex;flex-direction:column;position:relative;cursor:pointer}.cobalt-dropdown.filterable{cursor:text}.cobalt-dropdown .dropdown-wrapper{position:relative;display:flex;flex-direction:column}.cobalt-dropdown .dropdown{display:flex;flex-direction:row;align-items:center;border-radius:.5rem;outline:1px solid var(--stroke-default);background:var(--input-default);color:var(--text-primary);min-height:2rem}.cobalt-dropdown .dropdown .content-wrapper{display:flex;flex:1;flex-direction:row;justify-content:space-between;gap:.125rem;width:100%}.cobalt-dropdown .dropdown .content-wrapper .display-value{display:flex;flex-flow:row wrap;width:100%;gap:.25rem}.cobalt-dropdown .dropdown .content-wrapper input{border:none;flex:1;min-width:5rem;padding:0;width:100%}.cobalt-dropdown .dropdown .content-wrapper input:focus{outline:none}.cobalt-dropdown .dropdown:has(.selected-chips){align-items:flex-start}.cobalt-dropdown .dropdown:focus-within:not(.dropdown-disabled){outline:2px solid var(--stroke-focus)}.cobalt-dropdown .dropdown:hover:not(.dropdown-disabled):not(.dropdown-danger){outline-color:var(--stroke-hover)}.cobalt-dropdown .dropdown.dropdown-danger{outline:2px solid var(--stroke-danger)}.cobalt-dropdown .dropdown.dropdown-danger:hover{outline-color:var(--stroke-danger-hover)}.cobalt-dropdown .dropdown.dropdown-disabled{background:var(--input-disabled);outline-color:var(--stroke-disabled);cursor:not-allowed;color:var(--text-disabled)}.cobalt-dropdown .dropdown.dropdown-disabled .dropdown-selected-value{color:var(--text-disabled)}.cobalt-dropdown .dropdown[aria-expanded=true]:hover:not(.dropdown-disabled):not(.dropdown-danger){outline-color:var(--stroke-focus)}.cobalt-dropdown .selected-chips{display:flex;flex-wrap:wrap;gap:.5rem}.cobalt-dropdown .selected-chips .chip-count{display:none}.cobalt-dropdown .dropdown-selected-value{flex:1 1 auto}.cobalt-dropdown .dropdown-small{padding:0 .75rem}.cobalt-dropdown .dropdown-medium{min-height:2.5rem;padding:.625rem .75rem}.cobalt-dropdown .is-multiselect{padding:.5rem .75rem}.cobalt-dropdown .is-multiselect .dropdown-placeholder{line-height:1.5rem}.cobalt-dropdown .is-multiselect .icons{margin-top:.125rem}.cobalt-dropdown .has-overflow .content-wrapper .display-value{flex-flow:row nowrap}.cobalt-dropdown .has-overflow .selected-chips{align-items:center;flex-wrap:nowrap;overflow:hidden}.cobalt-dropdown .has-overflow .selected-chips .chip-count{display:flex;position:absolute;visibility:hidden}.cobalt-dropdown .has-overflow .selected-chips .chip-count.visible{position:relative;visibility:visible}.cobalt-dropdown .dropdown.dropdown-disabled .icons svg{color:var(--icon-disabled)}.cobalt-dropdown .icons{align-items:center;display:flex;flex-direction:row;flex-shrink:0;gap:.25rem;height:1.25rem;margin-left:.5rem}.cobalt-dropdown .icons.leading{padding-left:.75rem;padding-right:0}.cobalt-dropdown .icons .clear-icon{width:1rem;height:1rem;color:var(--icon-tertiary);cursor:pointer}.cobalt-dropdown .icons .clear-icon:focus-visible{border-radius:.25rem;outline:2px solid var(--stroke-focus)}.cobalt-dropdown .icons .chevron-icon{width:1rem;height:1rem;transition:transform .3s ease-in-out;transform:rotate(180deg)}.cobalt-dropdown .icons .danger-icon{color:var(--icon-danger)}.cobalt-dropdown .dropdown[aria-expanded=true] .chevron-icon{transform:rotate(0)}.cobalt-dropdown-menu{list-style-type:none;padding:0;margin-inline:0;background-color:var(--surface-primary);inset:unset;max-height:12rem;overflow-y:auto;border:none;margin-block:0;padding-inline:0;border-radius:.5rem}
.cobalt-divider{margin:0}.cobalt-divider.cobalt-divider-solid{background-color:var(--stroke-default)}.cobalt-divider.cobalt-divider-subtle{background-color:var(--stroke-subtle)}.cobalt-divider.cobalt-divider-1.cobalt-divider-horizontal{height:1px}.cobalt-divider.cobalt-divider-1.cobalt-divider-vertical{width:1px}.cobalt-divider.cobalt-divider-2.cobalt-divider-horizontal{height:2px}.cobalt-divider.cobalt-divider-2.cobalt-divider-vertical{width:2px}.cobalt-divider.cobalt-divider-horizontal{display:block;height:1px;width:100%}.cobalt-divider.cobalt-divider-horizontal.cobalt-divider-dotted{background-color:var(--stroke-default);-webkit-mask-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOTgiIGhlaWdodD0iMSIgdmlld0JveD0iMCAwIDk4IDEiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxnIGlkPSJWYXJpYW50PURvdHRlZCwgT3JpZW50YXRpb249SG9yaXpvbnRhbCI+CjxwYXRoIGlkPSJIb3Jpem9udGFsLyBEb3R0ZWQiIGQ9Ik0xIDAuNUg5NyIgc3Ryb2tlPSIjQTRBQ0IwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1kYXNoYXJyYXk9IjAuMSA2Ii8+CjwvZz4KPC9zdmc+Cg==);mask-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOTgiIGhlaWdodD0iMSIgdmlld0JveD0iMCAwIDk4IDEiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxnIGlkPSJWYXJpYW50PURvdHRlZCwgT3JpZW50YXRpb249SG9yaXpvbnRhbCI+CjxwYXRoIGlkPSJIb3Jpem9udGFsLyBEb3R0ZWQiIGQ9Ik0xIDAuNUg5NyIgc3Ryb2tlPSIjQTRBQ0IwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1kYXNoYXJyYXk9IjAuMSA2Ii8+CjwvZz4KPC9zdmc+Cg==);-webkit-mask-size:98px 1px;mask-size:98px 1px}.cobalt-divider.cobalt-divider-vertical{display:inline-flex;height:100%;width:1px}.cobalt-divider.cobalt-divider-vertical.cobalt-divider-dotted{background-color:var(--stroke-default);-webkit-mask-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSI5OCIgdmlld0JveD0iMCAwIDEgOTgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxnIGlkPSJWYXJpYW50PURvdHRlZCwgT3JpZW50YXRpb249VmVydGljYWwiPgo8cGF0aCBpZD0iVmVydGljYWwvIERvdHRlZCIgZD0iTTAuNSA5N0wwLjUgMSIgc3Ryb2tlPSIjQTRBQ0IwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1kYXNoYXJyYXk9IjAuMSA2Ii8+CjwvZz4KPC9zdmc+Cg==);mask-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSI5OCIgdmlld0JveD0iMCAwIDEgOTgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxnIGlkPSJWYXJpYW50PURvdHRlZCwgT3JpZW50YXRpb249VmVydGljYWwiPgo8cGF0aCBpZD0iVmVydGljYWwvIERvdHRlZCIgZD0iTTAuNSA5N0wwLjUgMSIgc3Ryb2tlPSIjQTRBQ0IwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1kYXNoYXJyYXk9IjAuMSA2Ii8+CjwvZz4KPC9zdmc+Cg==);-webkit-mask-size:1px 98px;mask-size:1px 98px}
.cobalt-number-input{display:flex;flex-flow:row nowrap;align-items:center;gap:.75rem}.cobalt-number-input .cobalt-number-input-error-icon{color:var(--icon-danger)}.cobalt-number-input .cobalt-number-input-group{flex:1;display:flex;flex-direction:row;border:1px solid var(--stroke-default);padding:.25rem;align-items:center;gap:.25rem;flex-shrink:0;background-color:var(--input-default);border-radius:.5rem}.cobalt-number-input .cobalt-number-input-group.small{height:2rem}.cobalt-number-input .cobalt-number-input-group.medium{height:2.5rem}.cobalt-number-input .cobalt-number-input-group:hover{border-color:var(--stroke-hover)}.cobalt-number-input .cobalt-number-input-group:focus-within{border:2px solid var(--stroke-focus);outline:none}.cobalt-number-input .cobalt-number-input-group .cobalt-number-input-value{border:none;height:100%;min-width:4rem;justify-items:center;flex:1;background-color:var(--input-default)}.cobalt-number-input .cobalt-number-input-group .cobalt-number-input-value::-webkit-outer-spin-button,.cobalt-number-input .cobalt-number-input-group .cobalt-number-input-value::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.cobalt-number-input .cobalt-number-input-group .cobalt-number-input-value:-moz-appearance{-moz-appearance:textfield}.cobalt-number-input .cobalt-number-input-group .cobalt-number-input-value:focus{outline:none}.cobalt-number-input .cobalt-number-input-group.invalid{border:2px solid var(--stroke-danger)}.cobalt-number-input .cobalt-number-input-group.disabled{cursor:not-allowed;background-color:var(--input-disabled);border-color:var(--stroke-disabled)}.cobalt-number-input .cobalt-number-input-group.disabled .cobalt-divider{background-color:var(--stroke-disabled)}.cobalt-number-input .cobalt-number-input-group.disabled .cobalt-number-input-value{color:var(--text-disabled);background-color:var(--input-disabled)}
.cobalt-radio-button{display:flex;flex-direction:column;gap:.125rem}.cobalt-radio-button .cobalt-radio-button-input{display:flex;flex-direction:row;align-items:baseline}.cobalt-radio-button .cobalt-radio-button-input input[type=radio]{height:1.125rem;width:1.125rem;border-radius:50%;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;margin:0;position:relative;border:1px solid var(--stroke-default);background-color:var(--input-default);align-self:center}.cobalt-radio-button .cobalt-radio-button-input input[type=radio]:hover{border-width:1px;border-color:var(--stroke-hover)}.cobalt-radio-button .cobalt-radio-button-input input[type=radio]:active:not(:disabled){border-width:2px;border-color:var(--stroke-focus)}.cobalt-radio-button .cobalt-radio-button-input input[type=radio]:checked{background-color:var(--input-default);border:1px solid var(--stroke-default)}.cobalt-radio-button .cobalt-radio-button-input input[type=radio]:checked:active:not(:disabled){border-width:2px;border-color:var(--button-primary-default)}.cobalt-radio-button .cobalt-radio-button-input input[type=radio]:checked:active:not(:disabled):after{background-color:var(--button-primary-default)}.cobalt-radio-button .cobalt-radio-button-input input[type=radio]:checked:after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:.7rem;height:.7rem;border-radius:50%;background-color:var(--button-primary-default)}.cobalt-radio-button .cobalt-radio-button-input input[type=radio]:checked:hover{border-color:var(--button-primary-hover)}.cobalt-radio-button .cobalt-radio-button-input input[type=radio]:checked:hover:after{background-color:var(--button-primary-hover)}.cobalt-radio-button .cobalt-radio-button-input input[type=radio].danger{border:2px solid var(--button-danger-default)}.cobalt-radio-button .cobalt-radio-button-input input[type=radio].danger:hover{border-color:var(--button-danger-hover)}.cobalt-radio-button .cobalt-radio-button-input input[type=radio].danger:active:not(:disabled){border-color:var(--button-danger-default)}.cobalt-radio-button .cobalt-radio-button-input input[type=radio].danger:active:not(:disabled):after{background-color:var(--button-danger-default)}.cobalt-radio-button .cobalt-radio-button-input input[type=radio].danger:checked{background-color:var(--input-default);border-color:var(--button-danger-default)}.cobalt-radio-button .cobalt-radio-button-input input[type=radio].danger:checked:after{background-color:var(--button-danger-default)}.cobalt-radio-button .cobalt-radio-button-input input[type=radio].danger:checked:hover{border-color:var(--button-danger-hover)}.cobalt-radio-button .cobalt-radio-button-input input[type=radio].danger:checked:hover:after{background-color:var(--button-danger-hover)}.cobalt-radio-button .cobalt-radio-button-input input[type=radio]:disabled{background-color:var(--input-disabled);border:.1rem solid var(--stroke-disabled);cursor:not-allowed}.cobalt-radio-button .cobalt-radio-button-input input[type=radio]:disabled:checked:after{background-color:var(--icon-disabled)}.cobalt-radio-button .cobalt-radio-button-input input[type=radio]:disabled:hover,.cobalt-radio-button .cobalt-radio-button-input input[type=radio]:disabled:active{border-color:var(--stroke-disabled)}.cobalt-radio-button .cobalt-radio-button-input input[type=radio]:disabled+label{color:var(--text-disabled);cursor:not-allowed}.cobalt-radio-button .cobalt-radio-button-input input[type=radio]+label{color:var(--text-primary);cursor:pointer;justify-content:center;align-self:stretch;padding-left:.5rem}.cobalt-radio-button .cobalt-radio-button-input input[type=radio]+label.visually-hidden{display:none}.cobalt-radio-button .cobalt-radio-button-input input[type=radio]+label.disabled{color:var(--text-disabled);cursor:not-allowed}.cobalt-radio-button .cobalt-radio-button-description{display:flex;flex-flow:row wrap;margin-left:1.7rem;color:var(--text-tertiary);align-self:stretch}.cobalt-radio-button .cobalt-radio-button-description.disabled{color:var(--text-disabled)}.cobalt-radio-button .cobalt-radio-button-description.danger{color:var(--text-danger);font-weight:var(--font-weight-semibold)}
.cobalt-radio-button-group{display:flex;gap:.75rem}.cobalt-radio-button-group.vertical{flex-direction:column}.cobalt-radio-button-group.horizontal{flex-direction:row;flex-wrap:wrap}
.cobalt-text-input{display:inline-flex;width:100%;align-items:center;border-radius:.5rem;border:none;background:var(--input-default);color:var(--text-primary);min-height:2rem;flex-shrink:0;padding:0 .75rem;outline:1px solid var(--stroke-default);outline-offset:-1px;overflow:hidden;text-overflow:ellipsis}.cobalt-text-input.medium{min-height:2.5rem}.cobalt-text-input:hover{outline-color:var(--stroke-hover)}.cobalt-text-input.danger:not(:focus-visible){outline:2px solid var(--stroke-danger);outline-offset:-2px}.cobalt-text-input.danger:not(:focus-visible):hover{outline-color:var(--stroke-danger-hover)}.cobalt-text-input:focus-visible{outline:2px solid var(--stroke-focus);outline-offset:-2px}.cobalt-text-input::placeholder{overflow:hidden;color:var(--text-secondary);text-overflow:ellipsis}.cobalt-text-input.cobalt-text-area{padding:.62rem .75rem;resize:none}.cobalt-text-input.cobalt-text-area.resizable{resize:vertical}.cobalt-text-input:disabled{background:var(--input-disabled);outline-color:var(--stroke-disabled);color:var(--text-disabled);-webkit-text-fill-color:var(--text-disabled)}
.cobalt-toggle{display:flex;align-items:center;flex-flow:row wrap}.cobalt-toggle .toggle{position:relative;display:inline-block}.cobalt-toggle .toggle input{opacity:0;width:100%;height:100%;z-index:1;position:relative}.cobalt-toggle .toggle.medium{height:1.5rem;width:3rem}.cobalt-toggle .toggle.small{height:1rem;width:2rem}.cobalt-toggle .toggle.medium>.slider:before{height:1.125rem;width:1.125rem}.cobalt-toggle .toggle.small>.slider:before{height:.625rem;width:.625rem}.cobalt-toggle .toggle .slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:var(--toggle-off-default);-webkit-transition:.4s;transition:.4s;border-radius:.75rem;display:inline-flex}.cobalt-toggle .toggle .slider:before{position:absolute;content:"";left:.19rem;bottom:.19rem;top:.19rem;background-color:var(--icon-on-color);-webkit-transition:.4s;transition:.4s;border-radius:50%}.cobalt-toggle .toggle input:disabled+.slider{cursor:not-allowed;background-color:var(--button-disabled-default)}.cobalt-toggle .toggle input:disabled+.slider:before{background-color:var(--icon-disabled)}.cobalt-toggle .toggle input:not(:disabled):checked+.slider{background-color:var(--button-primary-default)}.cobalt-toggle .toggle input:not(:disabled):checked+.slider:hover{background-color:var(--button-primary-hover)}.cobalt-toggle .toggle input:not(:disabled):focus-visible+.slider{outline:.2rem solid var(--stroke-focus);outline-offset:1px}.cobalt-toggle .toggle.medium>input:checked+.slider:before{-webkit-transform:translateX(1.5rem);-ms-transform:translateX(1.5rem);transform:translate(1.5rem)}.cobalt-toggle .toggle.small>input:checked+.slider:before{-webkit-transform:translateX(1rem);-ms-transform:translateX(1rem);transform:translate(1rem)}.cobalt-toggle label{margin-left:.5rem}
.submission-section-wrapper {
display: flex;
flex: 1;
flex-direction: column;
.subtitle {
color: var(--neutral-400);
font-family: var(--font-family-text);
font-size: 1.0625rem;
font-weight: 400;
line-height: 1.25rem;
}
.submission-options {
display: flex;
flex: 1;
gap: 1rem;
padding-top: 1.5rem;
.option {
display: flex;
flex: 1;
padding: 1rem 1.5rem 1rem 1.5rem;
border-radius: 0.5rem;
background: #fff;
box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.08);
}
}
}
.cobalt-modal-backdrop{position:fixed;top:0;left:0;width:100%;height:100%;background-color:var(--surface-scrim)}.cobalt-modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background-color:var(--surface-secondary);max-width:90%;max-height:90%;border-radius:.5rem;display:flex;flex-direction:column}.cobalt-modal:focus-visible{outline:none}.cobalt-modal.cobalt-modal-small{max-width:25rem;min-width:25rem;min-height:12.5rem;max-height:80vh}.cobalt-modal.cobalt-modal-medium{max-width:40rem;min-width:40rem;min-height:22.5rem;max-height:80vh}.cobalt-modal.cobalt-modal-large{height:80vh;width:80vw}.cobalt-modal .cobalt-modal-header{display:flex;flex-direction:column;justify-content:space-between;gap:.25rem;padding:0 .5rem 2rem 1.5rem;position:sticky;top:0}.cobalt-modal .cobalt-modal-header .cobalt-modal-header-description{color:var(--text-primary)}.cobalt-modal .cobalt-modal-header .cobalt-modal-header-titles{display:flex;flex-direction:row;justify-content:space-between;gap:1.5rem}.cobalt-modal .cobalt-modal-header .cobalt-modal-header-titles .cobalt-modal-header-content{display:flex;flex-direction:column;gap:.12rem;margin-top:1.25rem}.cobalt-modal .cobalt-modal-header .cobalt-modal-header-titles .cobalt-modal-header-content h2{font-size:1.5rem;font-weight:700;line-height:2rem;color:var(--text-primary);margin:0}.cobalt-modal .cobalt-modal-header .cobalt-modal-header-titles .cobalt-modal-header-content h3{font-size:1rem;font-weight:600;line-height:1.25rem;color:var(--text-secondary);margin:0}.cobalt-modal .cobalt-modal-header .cobalt-modal-header-titles .cobalt-modal-close-button{margin-top:.5rem}.cobalt-modal .cobalt-modal-content{display:flex;flex:1;flex-direction:column;overflow-y:auto}
.error-page-wrapper {
display: flex;
flex: 1;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
.image {
display: flex;
background-image: url("/assets/error-page-Bid1YpEW.png");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
width: 22rem;
height: 12rem;
margin-bottom: 2rem;
}
.title {
color: var(--text-primary);
text-align: center;
font-family: var(--font-family-display);
font-size: 1.5rem;
font-weight: 700;
line-height: 2rem;
margin-bottom: 0.5rem;
}
.subtitle {
color: var(--text-tertiary);
text-align: center;
font-family: var(--font-family-text);
font-size: 1rem;
font-weight: 400;
line-height: 1.25rem;
}
}
.etca-form-wrapper {
background-color: var(--neutral-900);
.etca-form-sections {
gap: 2rem;
.banner-section-wrapper {
margin: 2rem 2rem 0rem 2rem;
.cobalt-banner {
height: 48px;
padding-top: unset !important;
padding-bottom: unset !important;
display: flex !important;
align-items: center;
}
}
.license-footer-divider {
margin-top: 2rem;
}
.add-license-button {
margin-top: 2rem;
}
.header-wrapper {
display: flex;
flex-direction: row;
justify-content: space-between;
.section-header {
color: var(--neutral-075);
font-family: var(font-family-display);
font-size: 1.25rem;
font-style: normal;
font-weight: 700;
line-height: 1.5rem;
margin-bottom: 1rem;
}
.section-subheader {
color: var(--neutral-400);
font-family: var(--font-family-text);
font-size: 1.0625rem;
font-weight: 400;
line-height: 1.25rem;
}
}
.header-column {
display: flex;
flex-direction: column;
}
.license-divider {
margin-top: 2rem;
}
}
}
/* Temporary fix for double checkmark while we wait for Cobalt V3 in Operator Portal */
:not(.co-form__toggle)>input[type="checkbox"]::after {
display: none;
} .faa-training-document-source-wrapper {
display: flex;
flex-direction: row;
gap: 2.5rem;
flex-wrap: wrap;
.display-only-form-item {
display: flex;
flex-direction: column;
width: 18rem;
.form-item-label {
color: var(--text-tertiary);
font-family: var(--font-family-text);
font-size: 0.8125rem;
font-weight: 600;
}
.form-item-value {
color: var(--text-primary);
font-family: var(--font-family-text);
font-size: 1.0625rem;
font-weight: 400;
line-height: 1.25rem;
}
}
}
.basic-info-wrapper {
display: flex;
flex: 1;
flex-direction: column;
.header {
color: var(--text-primary);
font-family: var(--font-family-display);
font-weight: 700;
line-height: 1.5rem;
font-size: 1.3125rem;
}
.info {
display: flex;
flex-direction: row;
margin-top: 1.5rem;
gap: 2.5rem;
.column {
display: flex;
flex: 1;
flex-direction: column;
max-width: 18rem;
.column-header {
color: var(--text-secondary);
font-family: var(--font-family-text);
font-size: 0.8125rem;
font-weight: 600;
line-height: 1rem;
}
.column-info {
color: var(--text-primary);
font-family: var(--font-family-display);
font-size: 1.0625rem;
font-weight: 700;
line-height: 1.25rem;
margin-top: 0.25rem;
}
}
}
}
.form-item {
width: 18rem;
}
.cobalt-calendar{display:flex;flex:1;flex-direction:column;border-radius:.75rem;border:1px solid var(--stroke-subtle);background:var(--surface-secondary);width:18.5rem;min-height:16.6rem;max-width:18.5rem}.cobalt-calendar .calendar-header{display:flex;flex-direction:row;align-items:center;justify-content:space-between;margin:1rem .5rem 0 1rem}.cobalt-calendar .calendar-header .header-text{display:flex;flex-direction:row;color:var(--text-primary);font-family:var(--font-family-display);font-size:1.25rem;font-weight:600;line-height:1.375rem}.cobalt-calendar .months{margin-bottom:.75rem}.cobalt-calendar .divider-line{height:.0625rem;background-color:var(--stroke-subtle);width:100%;display:block;margin:0;box-sizing:border-box}.cobalt-calendar .cobalt-calendar-day{border-spacing:0 .25rem;table-layout:fixed;margin:0 0 var(--space-04) 0}.cobalt-calendar .cobalt-calendar-day .days-header{color:var(--text-secondary);text-align:center;font-family:var(--font-family-text);font-size:.75rem;font-weight:600;line-height:1.375rem}.cobalt-calendar .cobalt-calendar-day .days-header th{text-align:center;width:2.5rem}.cobalt-calendar .cobalt-calendar-day td.divider{padding-bottom:var(--space-12)}.cobalt-calendar .cobalt-calendar-day th:first-child{padding-left:var(--space-08)}.cobalt-calendar .cobalt-calendar-day th:last-child{padding-right:var(--space-08)}.cobalt-calendar .cobalt-calendar-day td:not(.divider){text-align:center;justify-items:center;padding:0;margin:0}.cobalt-calendar .cobalt-calendar-day td:not(.divider):first-child{padding-left:var(--space-08)}.cobalt-calendar .cobalt-calendar-day td:not(.divider):last-child{padding-right:var(--space-08)}.cobalt-calendar .cobalt-calendar-month-year{display:grid;grid-template-columns:repeat(4,1fr);margin:.75rem 1rem}
.cobalt-calendar-button{display:inline-flex;align-items:center;justify-content:center;border-radius:.5rem;background:var(--button-ghost-default);color:var(--text-interactive);margin-bottom:.25rem;padding:.56rem .25rem}.cobalt-calendar-button:not(:disabled):hover{background:var(--button-ghost-hover)}.cobalt-calendar-button:not(:disabled):active{background:var(--button-ghost-pressed)}.cobalt-calendar-button:disabled{color:var(--text-disabled)}.cobalt-calendar-button.heading-01{padding:.25rem}.cobalt-calendar-button.body-02{font-weight:600}.cobalt-calendar-button.current{position:relative}.cobalt-calendar-button.current:after{content:"";position:absolute;bottom:6px;left:50%;transform:translate(-50%);width:.25rem;height:.25rem;border-radius:50%;background-color:var(--text-interactive)}.cobalt-calendar-button.selected{background:var(--button-primary-default);color:var(--text-on-color)}.cobalt-calendar-button.selected:hover{background:var(--button-primary-hover)}.cobalt-calendar-button.current.selected:after{background-color:var(--icon-on-color)}
.cobalt-calendar-day-button{display:flex;flex:1;height:var(--space-40);width:var(--space-40);color:var(--text-primary);text-align:center;font-family:var(--font-family-text);font-size:.75rem;font-weight:600;line-height:1.375rem;justify-content:center;align-items:center;position:relative}.cobalt-calendar-day-button:focus-within{border-radius:50%}.cobalt-calendar-day-button:not(.disabled):hover{background-color:var(--button-ghost-hover);border-radius:50%}.cobalt-calendar-day-button:not(.disabled):active{background-color:var(--button-ghost-pressed);border-radius:50%}.cobalt-calendar-day-button.disabled{color:var(--text-disabled);text-decoration:line-through}.cobalt-calendar-day-button.today{color:var(--text-interactive);font-weight:600}.cobalt-calendar-day-button.selected{color:var(--text-on-color);background-color:var(--button-primary-default);border-radius:50%;z-index:3}.cobalt-calendar-day-button.selected:hover{background-color:var(--button-primary-hover)}.cobalt-calendar-day-button.selected:active{background-color:var(--button-primary-pressed)}.cobalt-calendar-day-button.other-month{color:var(--text-disabled)}.cobalt-calendar-day-button.in-range.range-complete:not(.selected){background-color:var(--button-secondary-default);border-radius:0}.cobalt-calendar-day-button.selected.in-range.range-complete{background:none;position:relative;color:var(--button-ghost-default);z-index:10}.cobalt-calendar-day-button.selected.in-range.range-complete:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background-color:var(--button-secondary-default);z-index:1}.cobalt-calendar-day-button.selected.in-range.range-complete:after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background-color:var(--button-primary-default);border-radius:50%;z-index:5}.cobalt-calendar-day-button.selected.in-range.range-complete .today-indicator{position:absolute}.cobalt-calendar-day-button.selected.in-range.range-complete span,.cobalt-calendar-day-button.selected.in-range.range-complete div{color:var(--text-on-color);position:relative;z-index:10}.cobalt-calendar-day-button.selected.in-range.range-complete>*{color:var(--button-ghost-default);position:relative;z-index:10}.cobalt-calendar-day-button.selected.in-range.range-complete:hover:after{background-color:var(--button-primary-hover)}.cobalt-calendar-day-button.selected.in-range.range-complete:active:after{background-color:var(--button-primary-pressed)}.cobalt-calendar-day-button.selected.in-range.range-complete.range-start:before{clip-path:polygon(50% 0,100% 0,100% 100%,50% 100%)}.cobalt-calendar-day-button.selected.in-range.range-complete.range-end:before{clip-path:polygon(0 0,50% 0,50% 100%,0 100%)}.cobalt-calendar-day-button.in-range.range-complete:not(.selected):hover{background:radial-gradient(circle,var(--button-secondary-hover) 70%,var(--button-secondary-default) 70%);color:var(--text-primary);z-index:2}.cobalt-calendar-day-button.in-range.range-complete:not(.selected):hover.today{color:var(--text-interactive)}.cobalt-calendar-day-button.in-range.range-complete:not(.selected):active{background:radial-gradient(circle,var(--button-secondary-pressed) 70%,var(--button-secondary-default) 70%);color:var(--text-primary);z-index:2}.cobalt-calendar-day-button.in-range.range-complete:not(.selected):active.today{color:var(--text-interactive)}.cobalt-calendar-day-button.in-range:not(.range-complete){position:relative}.cobalt-calendar-day-button.in-range:not(.range-complete):before,.cobalt-calendar-day-button.in-range:not(.range-complete):after{content:"";position:absolute;height:0;left:0;right:0;border-top:1px dashed var(--stroke-subtle);z-index:2}.cobalt-calendar-day-button.in-range:not(.range-complete):before{top:0}.cobalt-calendar-day-button.in-range:not(.range-complete):after{bottom:0}.cobalt-calendar-day-button.in-range[data-hovered=true]:not(.range-complete):before,.cobalt-calendar-day-button.in-range[data-hovered=true]:not(.range-complete):after{left:0;right:50%}.cobalt-calendar-day-button.selected.in-range:not(.range-complete):before,.cobalt-calendar-day-button.selected.in-range:not(.range-complete):after{left:50%;right:0}.cobalt-calendar-day-button .today-indicator{display:block;width:.25rem;height:.25rem;background-color:var(--text-interactive);border-radius:50%;position:absolute;left:50%;bottom:6px;transform:translate(-50%);z-index:4}.cobalt-calendar-day-button.today.selected{color:var(--text-on-color)}.cobalt-calendar-day-button.today.selected .today-indicator{background-color:var(--icon-on-color)}.cobalt-calendar-day-button.in-range.range-complete.bottom-left-corner:not(.selected){border-bottom-left-radius:.5rem}.cobalt-calendar-day-button.in-range.range-complete.bottom-right-corner:not(.selected){border-bottom-right-radius:.5rem}.cobalt-calendar-day-button.selected.in-range.range-complete.range-start.bottom-left-corner:before{border-bottom-left-radius:.5rem}.cobalt-calendar-day-button.selected.in-range.range-complete.range-end.bottom-right-corner:before{border-bottom-right-radius:.5rem}
.easa-license-wrapper {
display: flex;
flex: 1;
flex-direction: column;
.header {
display: flex;
justify-content: space-between;
flex-direction: row;
align-items: center;
margin-top: 0.75rem;
margin-bottom: 0.75rem;
.license-header {
color: var(--text-primary);
font-family: var(--font-family-text);
font-size: 1.0625rem;
font-weight: 600;
line-height: 2.55rem;
}
}
.license-subheader {
margin-top: 1.38rem;
margin-bottom: 0.75rem;
color: var(--text-tertiary);
font-family: var(--font-family-text);
font-size: 1.0625rem;
font-weight: 600;
line-height: 1.25rem;
}
.license-section {
display: flex;
flex-direction: row;
gap: 2.5rem;
flex-wrap: wrap;
.form-item {
width: 18rem;
}
}
}
.easa-license-modal-content {
margin: 0 1.5rem;
}.faa-license-wrapper {
display: flex;
flex: 1;
flex-direction: column;
.header {
display: flex;
justify-content: space-between;
flex-direction: row;
align-items: center;
margin-top: 0.75rem;
margin-bottom: 0.75rem;
.license-header {
color: var(--text-primary);
font-family: var(--font-family-text);
font-size: 1.0625rem;
font-weight: 600;
line-height: 2.55rem;
}
}
.license-subheader {
margin-top: 1.38rem;
margin-bottom: 0.75rem;
color: var(--text-tertiary);
font-family: var(--font-family-text);
font-size: 1.0625rem;
font-weight: 600;
line-height: 1.25rem;
}
.license-section {
display: flex;
flex-direction: row;
gap: 2.5rem;
flex-wrap: wrap;
.form-item {
width: 18rem;
}
.display-only-form-item {
display: flex;
flex-direction: column;
width: 18rem;
.form-item-label {
color: var(--text-tertiary);
font-family: var(--font-family-text);
font-size: 0.8125rem;
font-weight: 600;
}
.form-item-value {
color: var(--text-primary);
font-family: var(--font-family-text);
font-size: 1.0625rem;
font-weight: 400;
line-height: 1.25rem;
}
}
}
}
.faa-license-modal-content {
margin: 0 1.5rem;
}
.military-license-wrapper {
display: flex;
flex: 1;
flex-direction: column;
.header {
display: flex;
justify-content: space-between;
flex-direction: row;
align-items: center;
margin-top: 0.75rem;
margin-bottom: 0.75rem;
.license-header {
color: var(--text-primary);
font-family: var(--font-family-text);
font-size: 1.0625rem;
font-weight: 600;
line-height: 2.55rem;
}
}
.license-subheader {
margin-bottom: 0.75rem;
color: var(--text-tertiary);
font-family: var(--font-family-text);
font-size: 1.0625rem;
font-weight: 600;
line-height: 1.25rem;
}
.license-section {
display: flex;
flex-direction: row;
gap: 2.5rem;
flex-wrap: wrap;
.form-item {
width: 18rem;
}
}
}
.military-license-modal-content {
margin: 0 1.5rem;
}
.naa-license-wrapper {
display: flex;
flex: 1;
flex-direction: column;
.header {
display: flex;
justify-content: space-between;
flex-direction: row;
align-items: center;
margin-top: 0.75rem;
margin-bottom: 0.75rem;
.license-header {
color: var(--text-primary);
font-family: var(--font-family-text);
font-size: 1.0625rem;
font-weight: 600;
line-height: 2.55rem;
}
}
.license-subheader {
margin-top: 1.38rem;
margin-bottom: 0.75rem;
color: var(--text-tertiary);
font-family: var(--font-family-text);
font-size: 1.0625rem;
font-weight: 600;
line-height: 1.25rem;
}
.license-section {
display: flex;
flex-direction: row;
gap: 2.5rem;
flex-wrap: wrap;
.form-item {
width: 18rem;
}
}
}
.naa-license-modal-content {
margin: 0 1.5rem;
}
.tc-license-wrapper {
display: flex;
flex: 1;
flex-direction: column;
.header {
display: flex;
justify-content: space-between;
flex-direction: row;
align-items: center;
margin-top: 0.75rem;
margin-bottom: 0.75rem;
.license-header {
color: var(--text-primary);
font-family: var(--font-family-text);
font-size: 1.0625rem;
font-weight: 600;
line-height: 2.55rem;
}
}
.license-subheader {
margin-top: 1.38rem;
margin-bottom: 0.75rem;
color: var(--text-tertiary);
font-family: var(--font-family-text);
font-size: 1.0625rem;
font-weight: 600;
line-height: 1.25rem;
}
.license-section {
display: flex;
flex-direction: row;
gap: 2.5rem;
flex-wrap: wrap;
.form-item {
width: 18rem;
}
.display-only-form-item {
display: flex;
flex-direction: column;
width: 18rem;
.form-item-label {
color: var(--text-tertiary);
font-family: var(--font-family-text);
font-size: 0.8125rem;
font-weight: 600;
}
.form-item-value {
color: var(--text-primary);
font-family: var(--font-family-text);
font-size: 1.0625rem;
font-weight: 400;
line-height: 1.25rem;
}
}
}
}
.tc-license-modal-content {
margin: 0 1.5rem;
}
.ukcaa-license-wrapper {
display: flex;
flex: 1;
flex-direction: column;
.header {
display: flex;
justify-content: space-between;
flex-direction: row;
align-items: center;
margin-top: 0.75rem;
margin-bottom: 0.75rem;
.license-header {
color: var(--text-primary);
font-family: var(--font-family-text);
font-size: 1.0625rem;
font-weight: 600;
line-height: 2.55rem;
}
}
.license-subheader {
margin-top: 1.38rem;
margin-bottom: 0.75rem;
color: var(--text-tertiary);
font-family: var(--font-family-text);
font-size: 1.0625rem;
font-weight: 600;
line-height: 1.25rem;
}
.license-section {
display: flex;
flex-direction: row;
gap: 2.5rem;
flex-wrap: wrap;
.form-item {
width: 18rem;
}
}
}
.ukcaa-license-modal-content {
margin: 0 1.5rem;
}
.om-wrapper {
display: flex;
flex-direction: row;
gap: 2.5rem;
align-items: flex-start;
.form-item {
display: flex;
flex: 1;
}
}
.om-ref-section-header {
display: flex;
flex-direction: row;
gap: 1rem;
align-items: end;
.chips {
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin-top: 0.5rem;
gap: 0.5rem;
}
}
.tcTrainingProfile-wrapper {
display: flex;
flex-direction: row;
gap: 2.5rem;
flex-wrap: wrap;
.form-item {
width: 18rem;
}
}
.training-options-footer-section {
display: flex;
flex: 1;
flex-direction: row;
align-items: center;
justify-content: space-between;
.preset-text {
max-width: 34.375rem;
}
.right-side {
display: flex;
flex-direction: row;
align-items: center;
.preset-name {
margin: 0 1rem 0 1rem;
width: 20rem;
}
.preset-category {
margin-right: 1rem;
width: 11rem;
}
}
}
@layer component{.cobalt-accordion{display:flex;flex:1;width:100%;flex-direction:column;color:var(--text-primary);border-bottom:1px solid var(--stroke-subtle)}.cobalt-accordion .cobalt-accordion-item{display:flex;flex-direction:column;width:100%;flex:1;border-top:1px solid var(--stroke-subtle);background-color:transparent}.cobalt-accordion .cobalt-accordion-item h3{font-family:var(--font-family-text);font-size:1rem;font-weight:400;margin:0}.cobalt-accordion .cobalt-accordion-item .cobalt-accordion-item-header{display:flex;flex-direction:row;padding-left:.75rem;padding-right:1rem;width:100%}.cobalt-accordion .cobalt-accordion-item .cobalt-accordion-item-header.size-x-small{padding:.125rem inherit;height:1.5rem}.cobalt-accordion .cobalt-accordion-item .cobalt-accordion-item-header.size-small{padding:.38rem inherit;height:2rem}.cobalt-accordion .cobalt-accordion-item .cobalt-accordion-item-header.size-medium{padding:.62rem inherit;height:2.5rem}.cobalt-accordion .cobalt-accordion-item .cobalt-accordion-item-header.size-large{padding:.88rem inherit;height:3rem}.cobalt-accordion .cobalt-accordion-item .cobalt-accordion-item-header:focus-visible:not(:disabled){outline-offset:-2px}.cobalt-accordion .cobalt-accordion-item .cobalt-accordion-item-header:active:not(:disabled),.cobalt-accordion .cobalt-accordion-item .cobalt-accordion-item-header:hover:active:not(:disabled){background-color:var(--button-ghost-pressed)}.cobalt-accordion .cobalt-accordion-item .cobalt-accordion-item-header:hover:not(:disabled){background-color:var(--button-ghost-hover)}.cobalt-accordion .cobalt-accordion-item .cobalt-accordion-item-header:disabled{color:var(--text-disabled)}.cobalt-accordion .cobalt-accordion-item .cobalt-accordion-item-header svg{transition:all .3s linear}.cobalt-accordion .cobalt-accordion-item .cobalt-accordion-item-header[aria-expanded=true] svg{rotate:-180deg}.cobalt-accordion .cobalt-accordion-item .cobalt-accordion-item-header .cobalt-accordion-item-title{display:flex;flex-direction:row;gap:.75rem;flex:1}.cobalt-accordion .cobalt-accordion-item .cobalt-accordion-item-header .cobalt-accordion-item-title .cobalt-accordion-item-title-status{display:flex;justify-content:flex-end;gap:.75rem;flex:1}.cobalt-accordion .cobalt-accordion-item .cobalt-accordion-item-panel{flex:1;transition:all .3s ease-in-out}.cobalt-accordion .cobalt-accordion-item .cobalt-accordion-item-panel[aria-hidden=true]{max-height:0;padding:0rem 1rem 0rem .75rem}.cobalt-accordion .cobalt-accordion-item .cobalt-accordion-item-panel[aria-hidden=true] *{display:none}.cobalt-accordion .cobalt-accordion-item .cobalt-accordion-item-panel[aria-hidden=false]{max-height:auto;padding:1rem 1rem 1rem .75rem}}
.cobalt-search-field{align-items:center;border:none;border-radius:.5rem;display:flex;flex-direction:row;gap:var(--space-08);outline:1px solid var(--stroke-default);outline-offset:-1px;padding-inline:var(--space-12);background-color:var(--input-default)}.cobalt-search-field svg{color:var(--icon-tertiary)}.cobalt-search-field svg:focus-visible{border-radius:.25rem;outline:2px solid var(--stroke-focus)}.cobalt-search-field:hover:not(.disabled):not(.focused){outline-color:var(--stroke-hover)}.cobalt-search-field.disabled{background:var(--input-disabled);outline-color:var(--stroke-disabled)}.cobalt-search-field.disabled svg{color:var(--icon-disabled)}.cobalt-search-field.focused{outline:2px solid var(--stroke-focus);outline-offset:-2px}.cobalt-search-field .clear-icon:hover{cursor:pointer}.cobalt-search-field .cobalt-text-input{background:transparent;border:none;border-radius:none;display:flex;flex:1;padding:0;outline:none;outline-offset:0}.cobalt-search-field .cobalt-text-input:focus{outline:none}.cobalt-search-field .cobalt-text-input input{border:none;border-radius:none;outline:none}
.cobalt-side-panel-space-small{--slide-panel-width: 22.5rem}.cobalt-side-panel-space-small.show{width:var(--slide-panel-width);animation:slide-in-space .3s ease-in-out}.cobalt-side-panel-space-small.hidden{width:0;animation:slide-out-space .3s ease-in-out}.cobalt-side-panel-space-medium{--slide-panel-width: 45rem}.cobalt-side-panel-space-medium.show{width:var(--slide-panel-width);animation:slide-in-space .3s ease-in-out}.cobalt-side-panel-space-medium.hidden{width:0;animation:slide-out-space .3s ease-in-out}.cobalt-side-panel{position:fixed;top:0;right:0;bottom:0;display:flex;z-index:var(--z-index-side-panel);box-shadow:-1px 0 8px #0000001a}.cobalt-side-panel:not(:has(.backdrop)){width:auto}.cobalt-side-panel.cobalt-side-panel-push{position:relative;border-left:1px solid var(--stroke-subtle);display:flex;flex-direction:column;background-color:var(--surface-secondary);height:100%;z-index:calc(var(--z-index-side-panel) + 1);padding:0;margin:0;inset:0 0 0 auto}.cobalt-side-panel.cobalt-side-panel-push.side-panel-small{--width: 22.5rem}.cobalt-side-panel.cobalt-side-panel-push.side-panel-small.side-panel-open{animation:slide-in .3s ease-in-out;width:var(--width)}.cobalt-side-panel.cobalt-side-panel-push.side-panel-small.side-panel-closed{animation:slide-out .3s ease-in-out;width:0}.cobalt-side-panel.cobalt-side-panel-push.side-panel-medium,.cobalt-side-panel.cobalt-side-panel-push.side-panel-large{--width: 45rem}.cobalt-side-panel.cobalt-side-panel-push.side-panel-medium.side-panel-open,.cobalt-side-panel.cobalt-side-panel-push.side-panel-large.side-panel-open{animation:slide-in .3s ease-in-out;width:var(--width)}.cobalt-side-panel.cobalt-side-panel-push.side-panel-medium.side-panel-closed,.cobalt-side-panel.cobalt-side-panel-push.side-panel-large.side-panel-closed{animation:slide-out .3s ease-in-out;width:0}.cobalt-side-panel.cobalt-side-panel-push .cobalt-side-panel-content{display:flex;flex:1;flex-direction:column;overflow-y:auto}.cobalt-side-panel .backdrop{position:fixed;top:0;left:0;right:0;bottom:0;background-color:var(--surface-scrim);opacity:1;transition:opacity .3s ease-in-out;z-index:var(--z-index-side-panel)}.cobalt-side-panel .side-panel{position:fixed;display:flex;flex-direction:column;background-color:var(--surface-secondary);height:100%;z-index:calc(var(--z-index-side-panel) + 1);border:none;padding:0;margin:0;inset:0 0 0 auto}.cobalt-side-panel .side-panel.side-panel-small{width:22.5rem}.cobalt-side-panel .side-panel.side-panel-medium{width:45rem}.cobalt-side-panel .side-panel.side-panel-large{width:calc(100% - 112px)}.cobalt-side-panel .side-panel .cobalt-side-panel-content{display:flex;flex:1;flex-direction:column;overflow-y:auto}.cobalt-side-panel .cobalt-side-panel-header{display:flex;flex-direction:column;justify-content:space-between;gap:.25rem;padding:0 .5rem 2rem 1.5rem;position:sticky;top:0}.cobalt-side-panel .cobalt-side-panel-header:not(:has(.cobalt-side-panel-back-navigation)) .cobalt-modal-header-content{margin-top:1.25rem}.cobalt-side-panel .cobalt-side-panel-header .cobalt-side-panel-header-titles{display:flex;flex-direction:row;justify-content:space-between;gap:1.5rem}.cobalt-side-panel .cobalt-side-panel-header .cobalt-side-panel-header-titles .cobalt-modal-header-content{display:flex;flex-direction:column;gap:.12rem}.cobalt-side-panel .cobalt-side-panel-header .cobalt-side-panel-header-titles .cobalt-modal-header-content .cobalt-side-panel-back-navigation{margin:1.25rem 0 1rem}.cobalt-side-panel .cobalt-side-panel-header .cobalt-side-panel-header-titles .cobalt-modal-header-content h2{color:var(--text-primary);margin:0}.cobalt-side-panel .cobalt-side-panel-header .cobalt-side-panel-header-titles .cobalt-modal-header-content h3{font-weight:600;color:var(--text-secondary);margin:0}.cobalt-side-panel .cobalt-side-panel-header .cobalt-side-panel-header-titles .cobalt-side-panel-close-button{margin-top:.5rem;flex-shrink:0;flex-grow:0;width:2.5rem;height:2.5rem;display:flex;align-items:center;justify-content:center}.cobalt-side-panel .cobalt-side-panel-header .cobalt-side-panel-description{margin-top:.25rem;color:var(--text-primary);padding-right:1rem}@keyframes slide-in{0%{transform:translate(100%);width:0}to{transform:translate(0);width:var(--width)}}@keyframes slide-out{0%{transform:translate(0);width:var(--width)}to{transform:translate(100%);width:0}}
.preset-preview-wrapper {
display: flex;
flex: 1;
flex-direction: column;
gap: 1rem;
.preset-preview-footer {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 1rem;
padding-top: 1rem;
border-top: 1px solid var(--neutral-700);
}
.preset-section-wrapper {
display: flex;
flex: 1;
flex-direction: column;
border-radius: 0.25rem 0.5rem 0.5rem 0.25rem;
border: 1px solid var(--neutral-750);
background: #fff;
padding: 1rem;
.section-title {
color: var(--text-primary);
font-family: var(--font-family-text);
font-size: 1rem;
font-weight: 600;
line-height: 1.25rem;
margin-bottom: 0.5rem;
}
.section-subtitle {
margin-bottom: 1rem;
color: var(--text-secondary);
font-family: var(--font-family-text);
font-size: 0.75rem;
font-weight: 400;
line-height: 1rem;
}
.additional-section-wrapper {
display: flex;
flex: 1;
flex-direction: column;
.special-airport-card {
display: flex;
flex: 1;
flex-direction: row;
max-width: 54rem;
border-radius: 0.25rem 0.5rem 0.5rem 0.25rem;
border: 1px solid var(--neutral-700);
background: #fff;
margin-bottom: 1rem;
.left-bar {
display: flex;
width: 0.25rem;
flex-shrink: 0;
border-radius: 2.5rem 0rem 0rem 2.5rem;
background: var(--neutral-700);
}
.airport-content {
display: flex;
flex: 1;
flex-direction: column;
margin: 0.75rem 1rem;
.content-title-header {
color: var(--text-primary);
font-family: var(--font-family-text);
font-size: 1rem;
font-weight: 600;
line-height: 1.25rem;
margin-bottom: 0.75rem;
}
.content-title {
color: var(--text-primary);
text-overflow: ellipsis;
font-family: var(--font-family-text);
font-size: 0.75rem;
font-weight: 600;
line-height: 1rem;
}
.spacing {
margin-bottom: 0.25rem;
}
.content-value {
color: var(--text-primary);
text-overflow: ellipsis;
font-family: var(--font-family-text);
font-size: 0.75rem;
font-weight: 400;
line-height: 1rem;
}
}
}
}
}
}
.preset-delete-modal-content {
padding: 1rem 0;
}
.authorities {
display: flex;
flex-direction: column;
.authorities-title {
color: var(--neutral-400);
font-family: var(--font-family-text);
font-size: 0.75rem;
font-weight: 600;
}
.chips {
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin-top: 0.5rem;
gap: 0.5rem;
}
}
.selected-training-option {
display: flex;
flex: 1;
flex-direction: row;
max-width: 54rem;
border-radius: 0.25rem 0.5rem 0.5rem 0.25rem;
border: 1px solid var(--neutral-700);
background: #fff;
margin-bottom: 1rem;
.left-bar {
display: flex;
width: 0.25rem;
flex-shrink: 0;
border-radius: 2.5rem 0rem 0rem 2.5rem;
background: var(--neutral-700);
}
.option-content {
display: flex;
flex: 1;
flex-direction: column;
.option-header {
display: flex;
flex: 1;
flex-direction: row;
justify-content: space-between;
.add-on-name {
margin-top: 0.62rem;
margin-left: 0.75rem;
overflow: hidden;
color: var(--neutral-075);
font-family: var(--font-family-text);
font-size: 1rem;
font-weight: 600;
line-height: 1.25rem;
}
.delete-action {
color: var(--red-400);
}
}
.options {
display: flex;
flex: 1;
flex-direction: column;
margin-left: 0.75rem;
margin-bottom: 0.75rem;
.option-item {
margin-bottom: 0.25rem;
.option-name {
font-family: var(--font-family-text);
font-size: 0.75rem;
font-weight: 600;
}
.option-value {
font-family: var(--font-family-text);
font-size: 0.75rem;
font-weight: 400;
}
}
}
}
}
.selected-option-modal-content {
margin: 0 1.5rem;
}
.training-options-header-section {
display: flex;
flex: 1;
flex-direction: column;
.header-wrapper {
display: flex;
flex-direction: row;
justify-content: space-between;
.section-header {
color: var(--neutral-075);
font-family: var(font-family-display);
font-size: 1.25rem;
font-style: normal;
font-weight: 700;
line-height: 1.5rem;
}
}
.sub-header {
color: var(--neutral-400);
font-family: var(--font-family-text);
font-size: 1rem;
font-style: normal;
font-weight: 400;
line-height: 1.25rem;
margin-top: 1rem;
}
.use-presets-button {
margin-top: 1.5rem;
max-width: 10.5rem;
}
}
.presets-panel-content {
display: flex;
flex-direction: column;
.search-field {
margin: 0.25rem 1.5rem 0 1.5rem;
padding-top: 0.125rem;
}
.section {
display: flex;
flex-direction: row;
gap: 1.5rem;
margin: 2rem 1.5rem 0 1.5rem;
.category-field {
min-width: 15rem;
max-width: 15rem;
width: 15rem;
}
.title-field {
width: 100%;
}
}
.header-divider {
margin-top: 2rem;
}
.presets-list {
display: flex;
flex-direction: column;
margin: 1.5rem;
.presets-header {
display: flex;
flex-direction: row;
.preview-text {
color: var(--text-secondary);
font-family: var(--font-family-text);
font-size: 1rem;
font-weight: 600;
line-height: 1.25rem;
margin-bottom: 1rem;
margin-right: 1rem;
}
}
.cobalt-accordion-item-title {
justify-content: space-between;
}
}
}
.training-options-section {
display: flex;
flex-direction: column;
.section-header {
color: var(--neutral-400);
font-family: var(--font-family-text);
font-size: 1.0625rem;
font-style: normal;
font-weight: 400;
line-height: 1.25rem;
margin-top: 1.44rem;
}
.section {
display: flex;
flex-direction: column;
margin-top: 1.5rem;
.header {
color: var(--neutral-075);
font-family: var(--font-family-text);
font-size: 1.0625rem;
font-style: normal;
font-weight: 600;
line-height: 1.25rem;
}
.subtitle {
color: var(--neutral-400);
font-family: var(--font-family-text);
font-size: 0.75rem;
font-style: normal;
font-weight: 400;
line-height: 1rem;
}
.section-button {
margin: 1rem 0 1rem 0;
justify-content: left;
max-width: fit-content;
}
.notes-field {
margin-top: 1rem;
max-width: 40.5rem;
.notes-field-text-input {
height: 160px;
}
}
}
.file-uploader {
margin-bottom: 1.12rem;
}
.section-divider {
display: block;
height: 0.5px;
max-width: 56rem;
background-color: var(--neutral-750);
}
}
.cobalt-popover {
.cobalt-menu {
border: 1px solid var(--neutral-subtle);
max-height: 22rem;
}
}.cobalt-menu{list-style:none;margin:0;padding:0;background-color:var(--surface-secondary);border-radius:.5rem;width:15rem;max-height:15rem;overflow-y:auto;overflow-x:hidden}.cobalt-menu:focus-visible{outline:none}.cobalt-menu-item{padding:.625rem .75rem;cursor:pointer;font-size:1rem;font-style:normal;font-weight:400;line-height:1.25rem;width:100%;display:flex;align-items:center;gap:.5rem;color:var(--text-primary)}.cobalt-menu-item span{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.cobalt-menu-item.default:not(.disabled):hover{background-color:var(--button-ghost-hover)}.cobalt-menu-item.default:not(.disabled):hover:active,.cobalt-menu-item.default:not(.disabled):active{background-color:var(--button-ghost-pressed)}.cobalt-menu-item.default:not(.disabled):focus-visible{outline:none;background-color:var(--button-ghost-hover)}.cobalt-menu-item.danger:not(.disabled):hover{background-color:var(--button-danger-hover);color:var(--text-on-color)}.cobalt-menu-item.danger:not(.disabled):hover:active,.cobalt-menu-item.danger:not(.disabled):active{background-color:var(--button-danger-pressed);color:var(--text-on-color)}.cobalt-menu-item.danger:not(.disabled):focus-visible{outline:none;background-color:var(--button-danger-hover);color:var(--text-on-color)}.cobalt-menu-item.disabled{cursor:not-allowed;color:var(--text-disabled);pointer-events:none}
.additional-documents-section-wrapper {
display: flex;
flex: 1;
flex-direction: column;
margin: 1.5rem 0;
.subtitle {
color: var(--neutral-400);
font-family: var(--font-family-text);
font-size: 1.0625rem;
font-weight: 400;
line-height: 1.25rem;
}
.add-button {
margin-top: 1.5rem;
justify-content: left;
max-width: fit-content;
}
.queued-badge {
margin-left: 8px;
background: var(--warning-100, #FFF4E5);
color: var(--warning-700, #7A4E00);
font-size: 0.625rem;
font-weight: 600;
letter-spacing: 0.5px;
padding: 2px 6px;
border-radius: 10px;
border: 1px solid var(--warning-300, #FFC766);
align-self: center;
user-select: none;
}
}
.cobalt-file-uploader-item{display:flex;padding:1rem .75rem 1rem 1rem;align-self:stretch;border-radius:.5rem;background:var(--surface-secondary);box-shadow:0 1px 32px #00000014;min-width:336px;flex-direction:column}.cobalt-file-uploader-item.cobalt-file-uploader-item-clickable:hover{background-color:var(--button-ghost-hover)}.cobalt-file-uploader-item.cobalt-file-uploader-item-clickable .cobalt-file-uploader-item-header-name span,.cobalt-file-uploader-item.cobalt-file-uploader-item-clickable .cobalt-file-uploader-item-preview{cursor:pointer}.cobalt-file-uploader-item.cobalt-file-uploader-item-preview-item .cobalt-file-uploader-item-preview{display:flex;justify-content:center;align-items:center;height:8.75rem;width:100%;background:var(--surface-tertiary);border-radius:.25rem}.cobalt-file-uploader-item.cobalt-file-uploader-item-preview-item .cobalt-file-uploader-item-preview img{height:100%;max-width:100%;object-fit:contain}.cobalt-file-uploader-item.cobalt-file-uploader-item-preview-item .cobalt-file-uploader-item-preview .cobalt-file-uploader-item-preview-other-file{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:.5rem}.cobalt-file-uploader-item.cobalt-file-uploader-item-preview-item .cobalt-file-uploader-item-preview .cobalt-file-uploader-item-preview-other-file .cobalt-file-uploader-item-preview-filename{font-size:.875rem;text-align:center;width:90%;word-break:break-word;overflow-wrap:break-word}.cobalt-file-uploader-item.cobalt-file-uploader-item-preview-item .cobalt-file-uploader-item-header{align-items:flex-start;justify-content:flex-end;min-width:308px;height:auto;padding-top:0}.cobalt-file-uploader-item.cobalt-file-uploader-item-preview-item .cobalt-file-uploader-item-header .cobalt-file-uploader-item-header-name{display:none}.cobalt-file-uploader-item.cobalt-file-uploader-item-preview-item .cobalt-file-uploader-item-header .cobalt-file-uploader-item-header-status{display:flex;align-items:center;flex-direction:row;justify-content:flex-end}.cobalt-file-uploader-item .cobalt-file-uploader-item-header{display:flex;flex:1;flex-direction:row;align-items:center;min-width:308px;justify-content:space-between;gap:.5rem}.cobalt-file-uploader-item .cobalt-file-uploader-item-header .cobalt-file-uploader-item-header-name{width:100%;color:var(--text-primary)}.cobalt-file-uploader-item .cobalt-file-uploader-item-header .cobalt-file-uploader-item-header-status{display:flex;flex-direction:row;align-items:center;gap:.5rem}.cobalt-file-uploader-item .cobalt-file-uploader-item-header .cobalt-file-uploader-item-header-status .cobalt-file-uploader-item-header-status-complete{color:var(--support-success-background)}.cobalt-file-uploader-item .cobalt-file-uploader-item-header .cobalt-file-uploader-item-header-status .cobalt-file-uploader-item-header-status-invalid{color:var(--support-danger-background)}.cobalt-file-uploader-item .cobalt-file-uploader-item-header-status{display:flex;flex-direction:row}.cobalt-file-uploader-item .cobalt-file-uploader-item-header-status.cobalt-file-uploader-item-header-status-column{flex-direction:column-reverse}.cobalt-file-uploader-item .cobalt-file-uploader-item-remove{height:1.5rem;width:1.5rem;padding:.25rem}.cobalt-file-uploader-item .cobalt-file-uploader-item-status-spinner{display:flex;align-items:center;justify-content:center}.cobalt-file-uploader-item .cobalt-file-uploader-item-status-success,.cobalt-file-uploader-item .cobalt-file-uploader-item-status-error{display:flex;align-items:center}.cobalt-file-uploader-item .error-divider{background-color:var(--stroke-subtle);margin:1rem 0}.cobalt-file-uploader-item .error-text{color:var(--text-danger);font-weight:600}
.cobalt-file-uploader{display:flex;flex-direction:column;align-items:flex-start}.cobalt-file-uploader .upload-header{color:var(--text-primary);font-weight:600}.cobalt-file-uploader .upload-description{color:var(--text-secondary);margin-bottom:1rem}.cobalt-file-uploader .cobalt-file-uploader-drop{width:21rem;display:flex;height:9rem;padding:.75rem .75rem 0rem;align-items:flex-start;gap:.5rem;align-self:stretch;border-radius:.25rem;border:1px dashed var(--stroke-default);background:var(--surface-secondary);box-sizing:border-box;position:relative;transition:background-color .2s,border-color .2s}.cobalt-file-uploader .cobalt-file-uploader-drop.disabled{border:1px dashed var(--stroke-default);background:var(--input-disabled);pointer-events:none}.cobalt-file-uploader .cobalt-file-uploader-drop.disabled .drop-text{color:var(--text-disabled)}.cobalt-file-uploader .cobalt-file-uploader-drop .drop-text{color:var(--text-interactive);width:10.6875rem;word-wrap:normal}.cobalt-file-uploader .cobalt-file-uploader-drop input{display:none}.cobalt-file-uploader .cobalt-file-uploader-drop.dragging{outline:2px solid var(--stroke-focus);outline-offset:0px;background:var(--surface-secondary);border:1px dashed transparent}.cobalt-file-uploader .cobalt-file-uploader-drop.dragging .drop-text{text-decoration:underline}.cobalt-file-uploader .cobalt-file-uploader-drop:hover{outline:2px solid var(--stroke-focus);outline-offset:0px;background:var(--surface-secondary);cursor:pointer;border:1px dashed transparent}.cobalt-file-uploader .cobalt-file-uploader-drop:hover .drop-text{text-decoration:underline}.cobalt-file-uploader .cobalt-file-uploader-drop:focus{outline:2px solid var(--stroke-focus);outline-offset:0px;background:var(--surface-secondary);cursor:pointer;border:1px dashed transparent}.cobalt-file-uploader .cobalt-file-uploader-drop:focus .drop-text{text-decoration:none}.cobalt-file-uploader .cobalt-file-uploader-list{margin-top:1.5rem;display:flex;flex-direction:column;gap:1rem}.cobalt-file-uploader .success-icon{color:var(--support-success-background)}.cobalt-file-uploader .error-icon{color:var(--support-danger-background)}
.all-weather-conditions-side-panel {
display: flex;
flex-direction: column;
margin: 0 1.5rem 0 1rem;
align-items: flex-start;
.form-item {
min-width: 19rem;
margin-bottom: 0.5rem;
}
.item-spacing {
margin-top: 1rem;
}
.divider {
margin: 1rem 0 1rem 0;
flex-shrink: 0;
}
.pilot-position {
width: 100%;
display: flex;
flex-direction: column;
gap: 1rem;
.item-spacing {
margin-top: 0;
}
.form-item {
margin-bottom: 0;
}
.evs-section-header,
.faa-efvsa-section-header,
.lvto-section-header,
.catii-section-header {
color: var(--neutral-400);
font-family: var(--font-family-text);
font-size: 0.75rem;
font-weight: 600;
}
.divider {
margin-top: 0rem;
}
}
.tc-section {
display: flex;
flex-direction: column;
margin-top: 1rem;
margin-bottom: 1rem;
gap: 0.5rem;
.tc-section-header {
font-family: var(--font-family-text);
font-size: 1rem;
font-weight: 600;
line-height: 1.25rem;
margin-bottom: 1rem;
}
.tc-section-banner {
display: flex;
flex-direction: row;
align-items: flex-start;
padding: 1rem 0.75rem 1rem 1rem;
border-radius: 0.5rem;
margin-bottom: 1rem;
background-color: var(--yellow-8);
gap: 0.25rem;
.banner-text {
font-family: var(--font-family-text);
font-size: 1rem;
line-height: 1.25rem;
}
.banner-icon {
display: flex;
flex-shrink: 0;
color: var(--yellow-4);
}
}
.tc-section-divider {
margin: 1rem 0;
}
}
}
.core-exercises-panel {
display: flex;
flex-direction: column;
margin: 0 1.5rem 0 1rem;
align-items: flex-start;
.core-exercise-item {
width: 100%;
margin-bottom: 0.75rem;
display: flex;
align-items: center;
}
.core-exercise-agencies {
margin-top: 12px;
}
}.currency-requirements-side-panel {
display: flex;
flex-direction: column;
margin: 0.25rem 1rem 0 1.5rem;
align-items: flex-start;
gap: 1rem;
.form-item {
min-width: 19rem;
}
}
.other-checking-requirements-side-panel {
display: flex;
flex-direction: column;
margin: 0.25rem 1rem 0 1.5rem;
align-items: flex-start;
gap: 1rem;
.tc-options {
display: flex;
flex-direction: column;
gap: 0.5rem;
margin-bottom: 1rem;
.form-item {
min-width: 19rem;
}
}
}
.other-training-requirements-side-panel {
display: flex;
flex-direction: column;
margin: 0.25rem 1rem 0 1.5rem;
align-items: flex-start;
gap: 1rem;
.form-item {
min-width: 19rem;
}
.om-spacing {
margin-bottom: 1rem;
}
.cobalt-divider:last-of-type {
display: none;
}
.rvr-input-wrapper {
padding-left: 25px;
input {
width: 170px;
}
.inputHelpText {
color: var(--text-disabled);
}
}
}
.pbn-side-panel {
display: flex;
flex-direction: column;
margin: 0.25rem 1rem 0 1.5rem;
align-items: flex-start;
gap: 0.5rem;
.form-item {
min-width: 19rem;
}
}
.initial-pbn-section {
display: flex;
flex-direction: column;
gap: 0.5rem;
margin-bottom: 1rem;
.banner {
display: flex;
flex: 1;
min-width: 19rem;
flex-direction: row;
border-radius: 0.5rem;
background: var(--yellow-800);
max-height: 7.75rem;
padding: 1rem 1.5rem 1rem 1rem;
margin-top: 1.12rem;
.icon-section {
.warning-icon {
color: var(--yellow-400);
}
}
.text-section {
display: flex;
flex-direction: column;
padding-left: 0.63rem;
.text-section-title {
color: var(--neutral-075);
font-family: var(--font-family-text);
font-size: 1rem;
font-weight: 600;
line-height: 1.25rem;
}
.text-section-content {
color: var(--neutral-075);
font-family: var(--font-family-text);
font-size: 0.875rem;
font-weight: 400;
line-height: 1.25rem;
}
}
}
}
.seat-qualifications-side-panel {
display: flex;
flex-direction: column;
margin: 0.25rem 1rem 0 1.5rem;
align-items: flex-start;
gap: 1rem;
.field-title {
color: var(--neutral-400);
font-family: var(--font-family-text);
font-size: 0.75rem;
font-weight: 600;
}
}
.selected-special-airport {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 0.75rem 1rem 1rem;
border-radius: 0.5rem;
box-shadow: 0px 1px 32px 0px rgba(0, 0, 0, 0.08);
max-width: 26rem;
margin-bottom: 1rem;
}
.special-airport-side-panel {
display: flex;
flex-direction: column;
margin: 0 1rem 0 1.5rem;
align-items: flex-start;
.form-item {
min-width: 19rem;
}
.item-spacing {
margin-top: 1rem;
}
.familiarization-warning {
margin-top: 1rem;
font-family: var(--font-family-text);
font-size: 1rem;
font-style: italic;
}
}
.uprt-side-panel {
display: flex;
flex: 1;
flex-direction: column;
margin: 0.25rem 1rem 0 1.5rem;
align-items: flex-start;
gap: 1rem;
padding-bottom: 1rem;
.form-item {
min-width: 19rem;
}
.divider-line {
min-height: 1px;
}
.banner {
display: flex;
flex-direction: row;
align-items: flex-start;
padding: 1rem 0.75rem 1rem 1rem;
border-radius: 0.5rem;
margin-bottom: 1rem;
background-color: var(--yellow-8);
gap: 0.25rem;
.banner-text {
font-family: var(--font-family-text);
font-size: 1rem;
line-height: 1.25rem;
}
.banner-icon {
display: flex;
flex-shrink: 0;
color: var(--yellow-4);
}
}
}
.weight-and-balance-side-panel {
display: flex;
flex-direction: column;
margin: 0.25rem 1rem 0 1.5rem;
align-items: flex-start;
gap: 1rem;
}
.tca-manual-upload-section-wrapper {
display: flex;
flex: 1;
flex-direction: column;
.error-banner,
.warning-banner {
display: flex;
background-color: var(--yellow-800);
border-radius: 0.375rem;
flex-shrink: 0;
flex-direction: row;
padding: 1rem;
align-items: center;
margin-bottom: 1rem;
.warning-icon {
color: var(--yellow-400);
}
.error-icon {
color: var(--red-400);
}
}
.error-banner {
background-color: var(--red-800);
}
.warning-banner {
background-color: var(--yellow-800);
}
.required-text {
margin-left: 1rem;
color: var(--neutral-075);
font-family: var(--font-family-text);
font-size: 1.0625rem;
font-style: normal;
font-weight: 600;
line-height: 1.25rem;
}
.view-and-delete-wrapper {
display: flex;
flex: 1;
flex-direction: row;
align-items: center;
}
.current-file-actions {
display: flex;
align-items: center;
gap: 0.5rem;
.download-link {
cursor: pointer;
text-decoration: underline;
}
}
.file-name-selected {
color: var(--text-primary);
font-family: var(--font-family-display);
font-size: 1rem;
font-weight: 700;
line-height: 1.5rem;
margin-left: 1rem;
align-content: center;
}
}
.tca-warning-delete-message {
margin-left: 1.5rem;
color: var(--text-primary);
font-family: var(--font-family-text);
font-size: 1rem;
font-style: normal;
font-weight: 400;
line-height: 1.5rem;
}
.queued-badge {
margin-left: 8px;
background: var(--warning-100, #FFF4E5);
color: var(--warning-700, #7A4E00);
font-size: 0.625rem;
font-weight: 600;
letter-spacing: 0.5px;
padding: 2px 6px;
border-radius: 10px;
border: 1px solid var(--warning-300, #FFC766);
align-self: center;
user-select: none;
}.cobalt-section-message{display:flex;flex-flow:column;padding:.88rem 1.5rem 1rem 1rem;border-radius:.5rem}.cobalt-section-message .title{display:flex;gap:.75rem;align-items:flex-start}.cobalt-section-message .title h2,.cobalt-section-message .title h3{font-size:inherit}.cobalt-section-message .title .icon{flex-shrink:0;flex-grow:0;align-self:flex-start;width:1.5em;height:1.5em}.cobalt-section-message .title :last-child{font-weight:var(--font-weight-semibold);font-size:var(--text-size-1);padding:0;margin:0}.cobalt-section-message .link{display:flex;margin-top:.5rem;margin-left:2.25rem}.cobalt-section-message p{margin-top:.75rem;margin-left:2.25rem}.cobalt-section-message.cobalt-section-message-info{color:var(--text-primary);background-color:var(--support-info-subtle-background)}.cobalt-section-message.cobalt-section-message-info .icon{color:var(--support-info-background)}.cobalt-section-message.cobalt-section-message-success{color:var(--text-primary);background-color:var(--support-success-subtle-background)}.cobalt-section-message.cobalt-section-message-success .icon{color:var(--support-success-background)}.cobalt-section-message.cobalt-section-message-danger{color:var(--text-primary);background-color:var(--support-danger-subtle-background)}.cobalt-section-message.cobalt-section-message-danger .icon{color:var(--support-danger-background)}.cobalt-section-message.cobalt-section-message-warning{color:var(--text-primary);background-color:var(--support-warning-subtle-background)}.cobalt-section-message.cobalt-section-message-warning .icon{color:var(--support-warning-background)}
.submitted-page-container {
height: 100vh;
.deprecatedTcaMessage {
margin-left: 0;
margin-right: 0;
margin-bottom: 1.5rem;
padding-left: 0;
padding-right: 0;
border-radius: 0.5rem;
& > div {
padding-left: 1rem;
padding-right: 1rem;
}
}
.title {
display: flex;
align-items: center;
color: var(--text-primary);
font-family: var(--font-family-display);
font-size: 1.25rem;
font-weight: 700;
line-height: 1.5rem;
.sent-icon {
color: var(--support-success-background);
margin-right: 0.2rem;
}
}
.actions {
display: flex;
flex-direction: column;
align-items: baseline;
.view-button {
margin-bottom: 0.5rem;
}
.attachments-title {
color: var(--text-primary);
font-family: var(--font-family-display);
font-size: 1rem;
font-weight: 700;
line-height: 1.5rem;
margin-left: 1rem;
}
.attachments-file {
color: var(--link-interactive);
font-family: var(--font-family-text);
font-size: 0.75rem;
font-weight: 400;
line-height: 1.25rem;
margin-left: 0.8rem;
}
.edit-button {
margin-top: 0.81rem;
}
}
.subtitle {
display: flex;
flex-direction: column;
color: var(--text-secondary);
font-family: var(--font-family-text);
font-size: 1rem;
font-weight: 700;
line-height: 1.25rem;
.note {
font-style: italic;
font-weight: 400;
margin-bottom: 0.69rem;
}
}
}
.edit-tca-modal .cobalt-modal-header {
padding-bottom: 1rem;
}
.edit-tca-content {
padding: 1rem;
display: flex;
flex-direction: row;
}
.edit-tca-action-bar {
padding: 1rem;
}
@layer reset;
@layer element;
@layer third-party;
@layer component;
@layer utility;
@layer override;
@layer app;
/* --------------------------------- TYPOGRAPHY --------------------------------- */
/*
Typography Classes
==========
The typography classes are used to define the font-family, font-size, line-height, and font-weight of the text elements.
Headings - have the font-weight defined.
Body - Do not have a font-weight defined, since it can be regular or semi-bold.
Captions - Do not have a font-weight defined, since it can be regular or semi-bold.
*/
:root {
--font-family-red-hat-text:
"Red Hat Text", "Red Hat Mono", "Arial", "Arial Black";
--font-family-red-hat-display:
"Red Hat Display", "Red Hat Mono", "Arial", "Arial Black";
--font-family-display-italic: "Red Hat Display Italic", sans-serif;
--font-family-text-italic: "Red Hat Text Italic", sans-serif;
--font-family-default: var(--font-family-red-hat-text);
--font-typesize-01: 0.5rem; /* 8px */
--font-typesize-02: 0.75rem; /* 12px */
--font-typesize-03: 1rem; /* 16px; base text size */
--font-typesize-04: 1.25rem; /* 20px */
--font-typesize-05: 1.5rem; /* 24px */
--font-typesize-06: 2rem; /* 32px */
--font-typesize-07: 2.25rem; /* 36px */
--font-typesize-08: 3rem; /* 48px */
--font-typesize-09: 4rem; /* 64px */
--font-typesize-10: 5.25rem; /* 84px */
--font-weight-light: 300;
--font-weight-normal: 400;
--font-weight-semibold: 600;
--font-weight-bold: 700;
}
.heading-01 {
font-family: var(--font-family-red-hat-display);
font-size: var(--font-typesize-04); /* 20px */
line-height: 1.5rem;
font-weight: 700;
color: var(--text-primary);
@media only screen and (max-width: 1023px) {
font-size: var(--font-typesize-03); /* 16px */
line-height: 1.25rem;
}
}
.heading-02 {
font-family: var(--font-family-red-hat-display);
font-size: var(--font-typesize-05); /* 24px */
line-height: 2rem;
font-weight: 700;
color: var(--text-primary);
@media (max-width: 1023px) {
font-size: var(--font-typesize-04); /* 20px */
line-height: 1.5rem;
}
}
.heading-03 {
font-family: var(--font-family-red-hat-display);
font-size: var(--font-typesize-06); /* 32px */
line-height: 2.25rem;
font-weight: 700;
color: var(--text-primary);
@media only screen and (max-width: 600px) {
font-size: var(--font-typesize-05); /* 24px */
line-height: 2rem;
}
}
.heading-04 {
font-family: var(--font-family-red-hat-display);
font-size: var(--font-typesize-07); /* 36px */
line-height: 2.75rem;
font-weight: 700;
color: var(--text-primary);
@media only screen and (max-width: 1023px) {
font-size: var(--font-typesize-06); /* 32px */
line-height: 2.25rem;
}
}
.heading-05 {
font-family: var(--font-family-red-hat-display);
font-size: var(--font-typesize-08); /* 48px */
line-height: 3.75rem;
font-weight: 700;
@media only screen and (max-width: 1023px) {
font-size: var(--font-typesize-07); /* 36px */
line-height: 2.75rem;
}
}
.heading-06 {
font-family: var(--font-family-red-hat-display);
font-size: var(--font-typesize-09); /* 64px */
line-height: 5rem;
font-weight: 700;
color: var(--text-primary);
@media only screen and (max-width: 1023px) {
font-size: var(--font-typesize-08); /* 48px */
line-height: 3.75rem;
}
}
.heading-07 {
font-family: var(--font-family-red-hat-display);
font-size: var(--font-typesize-10); /* 84px */
line-height: 6.25rem;
font-weight: 700;
color: var(--text-primary);
@media only screen and (max-width: 1023px) {
font-size: var(--font-typesize-09); /* 64px */
line-height: 5rem;
}
}
.heading-longform-01 {
font-family: var(--font-family-red-hat-text);
font-size: var(--font-typesize-04); /* 20px */
line-height: 1.5rem;
font-weight: 700;
@media only screen and (max-width: 1023px) {
font-size: var(--font-typesize-03); /* 16px */
line-height: 1.25rem;
}
}
.heading-longform-02 {
font-family: var(--font-family-red-hat-text);
font-size: var(--font-typesize-05); /* 24px */
line-height: 2rem;
font-weight: 700;
color: var(--text-primary);
@media only screen and (max-width: 1023px) {
font-size: var(--font-typesize-04); /* 20px */
line-height: 1.5rem;
}
}
.heading-longform-03 {
font-family: var(--font-family-red-hat-text);
font-size: var(--font-typesize-06); /* 32px */
line-height: 2.25rem;
font-weight: 700;
color: var(--text-primary);
@media only screen and (max-width: 600px) {
font-size: var(--font-typesize-05); /* 24px */
line-height: 2rem;
}
}
.heading-longform-04 {
font-family: var(--font-family-red-hat-text);
font-size: var(--font-typesize-07); /* 36px */
line-height: 2.75rem;
font-weight: 700;
color: var(--text-primary);
@media only screen and (max-width: 1023px) {
font-size: var(--font-typesize-06); /* 32px */
line-height: 2.25rem;
}
}
.body-01 {
font-family: var(--font-family-red-hat-text);
font-size: var(--font-typesize-02); /* 12px */
line-height: 1rem;
color: var(--text-primary);
}
.body-02 {
font-family: var(--font-family-red-hat-text);
font-size: var(--font-typesize-03); /* 16px */
line-height: 1.25rem;
color: var(--text-primary);
}
.body-longform-01 {
font-family: var(--font-family-red-hat-text);
font-size: var(--font-typesize-02); /* 12px */
line-height: 1.25rem;
color: var(--text-primary);
}
.body-longform-02 {
font-family: var(--font-family-red-hat-text);
font-size: var(--font-typesize-03); /* 16px */
line-height: 1.5rem;
color: var(--text-primary);
}
.caption-01 {
font-family: var(--font-family-red-hat-text);
font-size: var(--font-typesize-01); /* 8px */
line-height: 0.75rem;
color: var(--text-primary);
}
.caption-longform-01 {
font-family: var(--font-family-red-hat-text);
font-size: var(--font-typesize-01); /* 8px */
line-height: 0.75rem;
color: var(--text-primary);
}
/* RED HAT MONO */
@font-face {
font-family: "Red Hat Mono";
src: url("/assets/RedHatMono-Italic-CVBrBoes.ttf");
font-weight: 400;
font-style: italic;
}
@font-face {
font-family: "Red Hat Mono";
src: url("/assets/RedHatMono-SemiBoldItalic-CuEpNr4T.ttf");
font-weight: 600;
font-style: italic;
}
@font-face {
font-family: "Red Hat Mono";
src: url("/assets/RedHatMono-BoldItalic-SD7p06zj.ttf");
font-weight: 700;
font-style: italic;
}
@font-face {
font-family: "Red Hat Mono";
src: url("/assets/RedHatMono-Bold-1B5FFUJZ.ttf");
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: "Red Hat Mono";
src: url("/assets/RedHatMono-SemiBold-BBRrObtj.ttf");
font-weight: 600;
font-style: normal;
}
/* RED HAT TEXT */
@font-face {
font-family: "Red Hat Text";
src: url("/assets/RedHatText-Italic-C8TkRutM.ttf");
font-weight: 400;
font-style: italic;
}
@font-face {
font-family: "Red Hat Text";
src: url("/assets/RedHatText-SemiBoldItalic-B3pvw90l.ttf");
font-weight: 600;
font-style: italic;
}
@font-face {
font-family: "Red Hat Text";
src: url("/assets/RedHatText-BoldItalic-2vHYtujY.ttf");
font-weight: 700;
font-style: italic;
}
@font-face {
font-family: "Red Hat Text";
src: url("/assets/RedHatText-Bold-D83OuVb8.ttf");
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: "Red Hat Text";
src: url("/assets/RedHatText-SemiBold-BTVbbNOX.ttf");
font-weight: 600;
font-style: normal;
}
/* RED HAT DISPLAY */
@font-face {
font-family: "Red Hat Display";
src: url("/assets/RedHatDisplay-Italic-CuvapF43.ttf");
font-weight: 400;
font-style: italic;
}
@font-face {
font-family: "Red Hat Display";
src: url("/assets/RedHatDisplay-SemiBoldItalic-BUZjkbpd.ttf");
font-weight: 600;
font-style: italic;
}
@font-face {
font-family: "Red Hat Display";
src: url("/assets/RedHatDisplay-BoldItalic-QF5ITyaf.ttf");
font-weight: 700;
font-style: italic;
}
@font-face {
font-family: "Red Hat Display";
src: url("/assets/RedHatDisplay-Bold-M99Tq1al.ttf");
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: "Red Hat Display";
src: url("/assets/RedHatDisplay-SemiBold-B-2xYJhO.ttf");
font-weight: 600;
font-style: normal;
}
/* Default fonts */
@font-face {
font-family: "Red Hat Text";
src: url("/assets/RedHatText-Regular-B197i5lD.ttf");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: "Red Hat Display";
src: url("/assets/RedHatDisplay-Regular-BcOIBnLz.ttf");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: "Red Hat Mono";
src: url("/assets/RedHatMono-Regular-DSwihvyi.ttf");
font-weight: 400;
font-style: normal;
}
/* --------------------------------- THEMES --------------------------------- */
:root {
/* ----------------------------- Cobalt regular palette ---------------------------- */
--color-white: #ffffff;
--color-black: #000000;
--color-blue-025: #03071c;
--color-blue-050: #040b2b;
--color-blue-075: #06103d;
--color-blue-100: #0f2658;
--color-blue-200: #163984;
--color-blue-300: #2256c6;
--color-blue-400: #2969f2;
--color-blue-500: #608ff4;
--color-blue-600: #a7c1f9;
--color-blue-700: #d3dffb;
--color-blue-750: #e6edfc;
--color-blue-800: #f0f4fd;
--color-blue-900: #f7f9fe;
--color-primary-blue: var(--color-blue-400);
--color-red-025: #1f0c07;
--color-red-050: #2f120b;
--color-red-075: #43190f;
--color-red-100: #592114;
--color-red-200: #86321f;
--color-red-300: #c84b2e;
--color-red-400: #f55c38;
--color-red-500: #f77a5c;
--color-red-600: #faa692;
--color-red-700: #fcd3c9;
--color-red-750: #fde6e1;
--color-red-800: #fef0ed;
--color-red-900: #fef7f6;
--color-semantic-red: var(--color-red-400);
--color-neutral-025: #0b0d0e;
--color-neutral-050: #131516;
--color-neutral-075: #181c1e;
--color-neutral-100: #202528;
--color-neutral-200: #31383c;
--color-neutral-300: #49535a;
--color-neutral-400: #59666e;
--color-neutral-500: #778288;
--color-neutral-600: #a4acb0;
--color-neutral-700: #d2d5d7;
--color-neutral-750: #e6e8e9;
--color-neutral-800: #ebeced;
--color-neutral-900: #f7f7f7;
--color-turquoise-025: #06181c;
--color-turquoise-050: #09262b;
--color-turquoise-075: #0d363d;
--color-turquoise-100: #124851;
--color-turquoise-200: #1b6c79;
--color-turquoise-300: #28a2b6;
--color-turquoise-400: #31c6de;
--color-turquoise-500: #56d0e4;
--color-turquoise-600: #8fe0ed;
--color-turquoise-700: #c7eff6;
--color-turquoise-750: #e0f6fa;
--color-turquoise-800: #ecfafc;
--color-turquoise-900: #f5fcfd;
--color-supporting-turquoise: var(--color-turquoise-400);
--color-teal-025: #041a17;
--color-teal-050: #062923;
--color-teal-075: #083a31;
--color-teal-100: #0b4d41;
--color-teal-200: #107461;
--color-teal-300: #19ad92;
--color-teal-400: #1ed4b2;
--color-teal-500: #47dcc0;
--color-teal-600: #84e8d5;
--color-teal-700: #c2f3ea;
--color-teal-750: #ddf8f3;
--color-teal-800: #ebfbf8;
--color-teal-900: #f5fdfb;
--color-supporting-teal: var(--color-teal-400);
--color-green-025: #05170f;
--color-green-050: #082518;
--color-green-075: #0c3422;
--color-green-100: #10452d;
--color-green-200: #186844;
--color-green-300: #249b65;
--color-green-400: #2cbe7c;
--color-green-500: #52ca94;
--color-green-600: #8cdcb8;
--color-green-700: #c5eddb;
--color-green-750: #dff5eb;
--color-green-800: #ecf9f3;
--color-green-900: #f5fcf9;
--color-semantic-green: var(--color-green-400);
--color-lime-025: #131704;
--color-lime-050: #1e2505;
--color-lime-075: #2a3407;
--color-lime-100: #38450a;
--color-lime-200: #55670f;
--color-lime-300: #7f9b16;
--color-lime-400: #9bbd1b;
--color-lime-500: #adc944;
--color-lime-600: #c8db83;
--color-lime-700: #e4edc1;
--color-lime-750: #f0f5dc;
--color-lime-800: #f6f9ea;
--color-lime-900: #fafcf4;
--color-supporting-lime: var(--color-lime-400);
--color-yellow-025: #201600;
--color-yellow-050: #312100;
--color-yellow-075: #462f00;
--color-yellow-100: #5d3e00;
--color-yellow-200: #8b5d00;
--color-yellow-300: #d18c00;
--color-yellow-400: #ffab00;
--color-yellow-500: #ffba2e;
--color-yellow-600: #ffd174;
--color-yellow-700: #ffe8b9;
--color-yellow-750: #fff2d8;
--color-yellow-800: #fff7e8;
--color-yellow-900: #fffbf3;
--color-semantic-yellow: var(--color-yellow-400);
--color-orange-025: #201004;
--color-orange-050: #311905;
--color-orange-075: #462307;
--color-orange-100: #5d2f09;
--color-orange-200: #8b460d;
--color-orange-300: #d16a14;
--color-orange-400: #ff8118;
--color-orange-500: #f59b40;
--color-orange-600: #ffba81;
--color-orange-700: #ffddc0;
--color-orange-750: #ffecdc;
--color-orange-800: #fff4ea;
--color-orange-900: #fff9f4;
--color-semantic-orange: var(--color-orange-400);
--color-pink-025: #1c0812;
--color-pink-050: #2c0c1c;
--color-pink-075: #3e1127;
--color-pink-100: #521734;
--color-pink-200: #7b224f;
--color-pink-300: #b93376;
--color-pink-400: #e23e90;
--color-pink-500: #e761a4;
--color-pink-600: #ef96c2;
--color-pink-700: #f7cae1;
--color-pink-750: #fae1ee;
--color-pink-800: #fcedf5;
--color-pink-900: #fdf6fa;
--color-supporting-pink: var(--color-pink-400);
--color-purple-025: #0a0817;
--color-purple-050: #0f0d24;
--color-purple-075: #151233;
--color-purple-100: #1c1844;
--color-purple-200: #292366;
--color-purple-300: #3e3599;
--color-purple-400: #4c41bb;
--color-purple-500: #7169c9;
--color-purple-600: #9d97da;
--color-purple-700: #cecbec;
--color-purple-750: #e4e2f4;
--color-purple-800: #efeef9;
--color-purple-900: #f7f6fc;
--color-supporting-purple: var(--color-purple-400);
}
/* ============================================
Color Tokens
============================================ */
:root {
/* Button */
--button-primary-default: var(--button-primary-default);
--button-primary-hover: var(--button-primary-hover);
--button-primary-pressed: var(--button-primary-pressed);
--button-secondary-default: var(--button-secondary-default);
--button-secondary-hover: var(--button-secondary-hover);
--button-secondary-pressed: var(--button-secondary-pressed);
--button-tertiary-default: var(--button-tertiary-default);
--button-tertiary-hover: var(--button-tertiary-hover);
--button-tertiary-pressed: var(--button-tertiary-pressed);
--button-ghost-default: var(--button-ghost-default);
--button-ghost-hover: var(--button-ghost-hover);
--button-ghost-pressed: var(--button-ghost-pressed);
--button-danger-default: var(--button-danger-default);
--button-danger-hover: var(--button-danger-hover);
--button-danger-pressed: var(--button-danger-pressed);
--button-disabled-default: var(--button-disabled-default);
--button-disabled-tertiary: var(--button-disabled-tertiary);
--button-text-secondary: var(--button-text-secondary);
/* Text */
--text-primary: var(--text-primary);
--text-secondary: var(--text-secondary);
--text-tertiary: var(--text-tertiary);
--text-on-color: var(--text-on-color);
--text-on-color-inverse: var(--text-on-color-inverse);
--text-disabled: var(--text-disabled);
--text-danger: var(--text-danger);
--text-interactive: var(--text-interactive);
/* Support */
--support-info-background: var(--support-info-background);
--support-danger-background: var(--support-danger-background);
--support-success-background: var(--support-success-background);
--support-warning-background: var(--support-warning-background);
--support-info-subtle-background: var(--support-info-subtle-background);
--support-danger-subtle-background: var(--support-danger-subtle-background);
--support-warning-subtle-background: var(--support-warning-subtle-background);
--support-success-subtle-background: var(--support-success-subtle-background);
--support-text-alert-success: var(--support-text-alert-success);
--support-text-alert-warning: var(--support-text-alert-warning);
--support-text-alert-danger: var(--support-text-alert-danger);
--support-text-alert-info: var(--support-text-alert-info);
/* Icons */
--icon-primary: var(--icon-primary);
--icon-primary-hover: var(--icon-primary-hover);
--icon-primary-pressed: var(--icon-primary-pressed);
--icon-secondary: var(--icon-secondary);
--icon-secondary-hover: var(--icon-secondary-hover);
--icon-secondary-pressed: var(--icon-secondary-pressed);
--icon-tertiary: var(--icon-tertiary);
--icon-on-color: var(--icon-on-color);
--icon-on-color-inverse: var(--icon-on-color-inverse);
--icon-disabled: var(--icon-disabled);
--icon-danger: var(--icon-danger);
--icon-link: var(--icon-link);
--icon-hover: var(--icon-hover);
--icon-pressed: var(--icon-pressed);
--icon-inverse: var(--icon-inverse);
/* Surface */
--surface-background: var(--surface-background);
--surface-primary: var(--surface-primary);
--surface-secondary: var(--surface-secondary);
--surface-tertiary: var(--surface-tertiary);
--surface-scrim: var(--surface-scrim);
--surface-overlay: var(--surface-overlay);
/* Link */
--link-on-color: var(--link-on-color);
--link-interactive: var(--link-interactive);
--link-hover: var(--link-hover);
--link-pressed: var(--link-pressed);
--link-secondary: var(--link-secondary);
--link-secondary-hover: var(--link-secondary-hover);
--link-secondary-pressed: var(--link-secondary-pressed);
--link-disabled: var(--link-disabled);
/* Stroke */
--stroke-default: var(--stroke-default);
--stroke-hover: var(--stroke-hover);
--stroke-danger: var(--stroke-danger);
--stroke-danger-hover: var(--stroke-danger-hover);
--stroke-focus: var(--stroke-focus);
--stroke-focus-on-color: var(--stroke-focus-on-color);
--stroke-disabled: var(--stroke-disabled);
--stroke-subtle: var(--stroke-subtle);
/* Input */
--input-default: var(--input-default);
--input-disabled: var(--input-disabled);
/* Chips */
--chips-background-disabled: var(--chips-background-disabled);
--chips-text-disabled: var(--chips-text-disabled);
--chips-icon-disabled: var(--chips-icon-disabled);
--chips-background-off-default: var(--chips-background-off-default);
--chips-background-off-hover: var(--chips-background-off-hover);
--chips-background-off-pressed: var(--chips-background-off-pressed);
--chips-background-off-disabled: var(--chips-background-off-disabled);
--chips-background-on-default: var(--chips-background-on-default);
--chips-background-on-hover: var(--chips-background-on-hover);
--chips-background-on-pressed: var(--chips-background-on-pressed);
/* Miscellaneous tokens */
--toggle-off-default: var(--toggle-off-default);
--toggle-off-hover: var(--toggle-off-hover);
--content-switcher-default: var(--content-switcher-default);
--tab-default: var(--tab-default);
--tab-off-disabled: var(--tab-off-disabled);
--tab-hover: var(--tab-hover);
--tab-pressed: var(--tab-pressed);
--nav-selected-default: var(--nav-selected-default);
--nav-selected-hover: var(--nav-selected-hover);
--nav-selected-pressed: var(--nav-selected-pressed);
--nav-selected-icons: var(--nav-selected-icons);
--nav-selected-text: var(--nav-selected-text);
--nav-group-active-default: var(--nav-group-active-default);
--nav-group-active-hover: var(--nav-group-active-hover);
--nav-group-active-pressed: var(--nav-group-active-pressed);
--table-active-default: var(--table-active-default);
--table-active-hover: var(--table-active-hover);
--table-active-pressed: var(--table-active-pressed);
--table-button-inactive-hover: var(--table-button-inactive-hover);
--table-button-inactive-pressed: var(--table-button-inactive-pressed);
--table-button-active-hover: var(--table-button-active-hover);
--table-button-active-pressed: var(--table-button-active-pressed);
--skeleton-background: var(--skeleton-background);
--skeleton-subtle: var(--skeleton-subtle);
/* Tags */
--tag-background-bold-blue: var(--tag-background-bold-blue);
--tag-background-bold-turquoise: var(--tag-background-bold-turquoise);
--tag-background-bold-teal: var(--tag-background-bold-teal);
--tag-background-bold-lime: var(--tag-background-bold-lime);
--tag-background-bold-green: var(--tag-background-bold-green);
--tag-background-bold-yellow: var(--tag-background-bold-yellow);
--tag-background-bold-orange: var(--tag-background-bold-orange);
--tag-background-bold-red: var(--tag-background-bold-red);
--tag-background-bold-pink: var(--tag-background-bold-pink);
--tag-background-bold-purple: var(--tag-background-bold-purple);
--tag-background-bold-neutral: var(--tag-background-bold-neutral);
--tag-background-subtle-blue: var(--tag-background-subtle-blue);
--tag-background-subtle-turquoise: var(--tag-background-subtle-turquoise);
--tag-background-subtle-teal: var(--tag-background-subtle-teal);
--tag-background-subtle-lime: var(--tag-background-subtle-lime);
--tag-background-subtle-green: var(--tag-background-subtle-green);
--tag-background-subtle-yellow: var(--tag-background-subtle-yellow);
--tag-background-subtle-orange: var(--tag-background-subtle-orange);
--tag-background-subtle-red: var(--tag-background-subtle-red);
--tag-background-subtle-pink: var(--tag-background-subtle-pink);
--tag-background-subtle-purple: var(--tag-background-subtle-purple);
--tag-background-subtle-neutral: var(--tag-background-subtle-neutral);
--tag-text-neutral: var(--tag-text-neutral);
--tag-text-blue: var(--tag-text-blue);
--tag-text-turquoise: var(--tag-text-turquoise);
--tag-text-teal: var(--tag-text-teal);
--tag-text-lime: var(--tag-text-lime);
--tag-text-green: var(--tag-text-green);
--tag-text-yellow: var(--tag-text-yellow);
--tag-text-orange: var(--tag-text-orange);
--tag-text-red: var(--tag-text-red);
--tag-text-pink: var(--tag-text-pink);
--tag-text-purple: var(--tag-text-purple);
--tag-text-on-color: var(--tag-text-on-color);
}
/* ============================================
Theme Light
============================================ */
:root,
:root[data-theme="light"] {
/* Button */
--button-primary-default: var(--color-blue-400);
--button-primary-hover: var(--color-blue-300);
--button-primary-pressed: var(--color-blue-200);
--button-secondary-default: var(--color-blue-700);
--button-secondary-hover: var(--color-blue-600);
--button-secondary-pressed: var(--color-blue-500);
--button-tertiary-default: var(--color-blue-400);
--button-tertiary-hover: var(--color-blue-300);
--button-tertiary-pressed: var(--color-blue-200);
--button-ghost-default: rgba(255, 255, 255, 0);
--button-ghost-hover: var(--color-neutral-800);
--button-ghost-pressed: var(--color-neutral-700);
--button-danger-default: var(--color-red-400);
--button-danger-hover: var(--color-red-300);
--button-danger-pressed: var(--color-red-200);
--button-disabled-default: var(--color-neutral-700);
--button-disabled-tertiary: var(--color-neutral-600);
--button-text-secondary: var(--color-blue-100);
/* Text */
--text-primary: var(--color-neutral-075);
--text-secondary: var(--color-neutral-400);
--text-tertiary: var(--color-neutral-600);
--text-on-color: var(--color-white);
--text-on-color-inverse: var(--color-neutral-075);
--text-disabled: var(--color-neutral-600);
--text-danger: var(--color-red-400);
--text-interactive: var(--color-blue-400);
/* Support */
--support-info-background: var(--color-primary-blue);
--support-danger-background: var(--color-semantic-red);
--support-success-background: var(--color-semantic-green);
--support-warning-background: var(--color-semantic-yellow);
--support-info-subtle-background: var(--color-blue-800);
--support-danger-subtle-background: var(--color-red-800);
--support-warning-subtle-background: var(--color-yellow-800);
--support-success-subtle-background: var(--color-green-800);
--support-text-alert-success: var(--color-neutral-075);
--support-text-alert-warning: var(--color-neutral-075);
--support-text-alert-danger: var(--color-neutral-075);
--support-text-alert-info: var(--color-neutral-075);
/* Icons */
--icon-primary: var(--color-neutral-075);
--icon-primary-hover: var(--color-neutral-025);
--icon-primary-pressed: var(--color-neutral-075);
--icon-secondary: var(--color-neutral-400);
--icon-secondary-hover: var(--color-neutral-300);
--icon-secondary-pressed: var(--color-neutral-400);
--icon-tertiary: var(--color-neutral-600);
--icon-on-color: var(--color-white);
--icon-on-color-inverse: var(--color-neutral-075);
--icon-disabled: var(--color-neutral-600);
--icon-danger: var(--color-red-400);
--icon-link: var(--color-blue-400);
--icon-hover: var(--color-blue-300);
--icon-pressed: var(--color-blue-400);
--icon-inverse: var(--color-white);
/* Surface */
--surface-background: var(--color-neutral-900);
--surface-primary: var(--color-white);
--surface-secondary: var(--color-white);
--surface-tertiary: var(--color-neutral-900);
--surface-scrim: rgba(0, 0, 0, 0.7);
--surface-overlay: rgba(255, 255, 255, 0.8);
/* Link */
--link-on-color: var(--color-white);
--link-interactive: var(--color-blue-400);
--link-hover: var(--color-blue-300);
--link-pressed: var(--color-blue-400);
--link-secondary: var(--color-neutral-400);
--link-secondary-hover: var(--color-neutral-300);
--link-secondary-pressed: var(--color-neutral-400);
--link-disabled: var(--color-neutral-600);
/* Stroke */
--stroke-default: var(--color-neutral-600);
--stroke-hover: var(--color-neutral-400);
--stroke-danger: var(--color-semantic-red);
--stroke-danger-hover: var(--color-red-300);
--stroke-focus: var(--color-primary-blue);
--stroke-focus-on-color: var(--color-white);
--stroke-disabled: var(--color-neutral-700);
--stroke-subtle: var(--color-neutral-750);
/* Input */
--input-default: var(--color-white);
--input-disabled: var(--color-neutral-800);
/* Chips */
--chips-background-disabled: var(--color-neutral-700);
--chips-text-disabled: var(--color-neutral-600);
--chips-icon-disabled: var(--color-neutral-600);
--chips-background-off-default: var(--color-neutral-800);
--chips-background-off-hover: var(--color-neutral-700);
--chips-background-off-pressed: var(--color-neutral-600);
--chips-background-off-disabled: var(--color-neutral-800);
--chips-background-on-default: var(--color-blue-700);
--chips-background-on-hover: var(--color-blue-600);
--chips-background-on-pressed: var(--color-blue-500);
/* Miscellaneous tokens */
--toggle-off-default: var(--color-neutral-500);
--toggle-off-hover: var(--color-neutral-400);
--content-switcher-default: var(--color-white);
--tab-default: var(--color-white);
--tab-off-disabled: var(--color-neutral-800);
--tab-hover: var(--color-neutral-700);
--tab-pressed: var(--color-neutral-600);
--nav-selected-default: var(--color-blue-700);
--nav-selected-hover: var(--color-blue-600);
--nav-selected-pressed: var(--color-blue-700);
--nav-selected-icons: var(--color-blue-400);
--nav-selected-text: var(--color-blue-400);
--nav-group-active-default: var(--color-blue-800);
--nav-group-active-hover: var(--color-blue-700);
--nav-group-active-pressed: var(--color-blue-600);
--table-active-default: var(--color-blue-900);
--table-active-hover: var(--color-blue-800);
--table-active-pressed: var(--color-blue-700);
--table-button-inactive-hover: var(--color-neutral-700);
--table-button-inactive-pressed: var(--color-neutral-600);
--table-button-active-hover: var(--color-blue-750);
--table-button-active-pressed: var(--color-blue-700);
--skeleton-background: var(--color-neutral-700);
--skeleton-subtle: var(--color-neutral-800);
/* Tags */
--tag-background-bold-blue: var(--color-primary-blue);
--tag-background-bold-turquoise: var(--color-turquoise-400);
--tag-background-bold-teal: var(--color-teal-400);
--tag-background-bold-lime: var(--color-lime-400);
--tag-background-bold-green: var(--color-semantic-green);
--tag-background-bold-yellow: var(--color-semantic-yellow);
--tag-background-bold-orange: var(--color-semantic-orange);
--tag-background-bold-red: var(--color-red-300);
--tag-background-bold-pink: var(--color-pink-400);
--tag-background-bold-purple: var(--color-purple-400);
--tag-background-bold-neutral: var(--color-neutral-200);
--tag-background-subtle-blue: var(--color-blue-700);
--tag-background-subtle-turquoise: var(--color-turquoise-700);
--tag-background-subtle-teal: var(--color-teal-700);
--tag-background-subtle-lime: var(--color-lime-700);
--tag-background-subtle-green: var(--color-green-700);
--tag-background-subtle-yellow: var(--color-yellow-700);
--tag-background-subtle-orange: var(--color-orange-700);
--tag-background-subtle-red: var(--color-red-700);
--tag-background-subtle-pink: var(--color-pink-700);
--tag-background-subtle-purple: var(--color-purple-700);
--tag-background-subtle-neutral: var(--color-neutral-700);
--tag-text-neutral: var(--color-neutral-200);
--tag-text-blue: var(--color-blue-200);
--tag-text-turquoise: var(--color-turquoise-100);
--tag-text-teal: var(--color-teal-100);
--tag-text-lime: var(--color-lime-100);
--tag-text-green: var(--color-green-100);
--tag-text-yellow: var(--color-yellow-100);
--tag-text-orange: var(--color-orange-100);
--tag-text-red: var(--color-red-100);
--tag-text-pink: var(--color-pink-100);
--tag-text-purple: var(--color-purple-200);
--tag-text-on-color: var(--color-white);
}
/* ============================================
Theme Dark
============================================ */
:root[data-theme="dark"] {
/* Button */
--button-primary-default: var(--color-blue-400);
--button-primary-hover: var(--color-blue-300);
--button-primary-pressed: var(--color-blue-200);
--button-secondary-default: var(--color-neutral-300);
--button-secondary-hover: var(--color-neutral-400);
--button-secondary-pressed: var(--color-neutral-500);
--button-tertiary-default: var(--color-blue-500);
--button-tertiary-hover: var(--color-blue-400);
--button-tertiary-pressed: var(--color-blue-300);
--button-ghost-default: rgba(255, 255, 255, 0);
--button-ghost-hover: var(--color-neutral-100);
--button-ghost-pressed: var(--color-neutral-200);
--button-danger-default: var(--color-red-400);
--button-danger-hover: var(--color-red-300);
--button-danger-pressed: var(--color-red-200);
--button-disabled-default: var(--color-neutral-300);
--button-disabled-tertiary: var(--color-neutral-300);
--button-text-secondary: var(--color-white);
/* Text */
--text-primary: var(--color-white);
--text-secondary: var(--color-neutral-500);
--text-tertiary: var(--color-neutral-400);
--text-on-color: var(--color-white);
--text-on-color-inverse: var(--color-neutral-075);
--text-disabled: var(--color-neutral-500);
--text-danger: var(--color-red-400);
--text-interactive: var(--color-blue-500);
/* Support */
--support-info-background: var(--color-primary-blue);
--support-danger-background: var(--color-semantic-red);
--support-success-background: var(--color-green-500);
--support-warning-background: var(--color-yellow-500);
--support-info-subtle-background: var(--color-blue-200);
--support-danger-subtle-background: var(--color-red-100);
--support-warning-subtle-background: var(--color-yellow-100);
--support-success-subtle-background: var(--color-green-100);
--support-text-alert-success: var(--color-green-700);
--support-text-alert-warning: var(--color-yellow-700);
--support-text-alert-danger: var(--color-red-700);
--support-text-alert-info: var(--color-blue-700);
/* Icons */
--icon-primary: var(--color-white);
--icon-primary-hover: var(--color-neutral-700);
--icon-primary-pressed: var(--color-white);
--icon-secondary: var(--color-neutral-500);
--icon-secondary-hover: var(--color-neutral-600);
--icon-secondary-pressed: var(--color-neutral-500);
--icon-tertiary: var(--color-neutral-400);
--icon-on-color: var(--color-white);
--icon-on-color-inverse: var(--color-neutral-075);
--icon-disabled: var(--color-neutral-500);
--icon-danger: var(--color-red-400);
--icon-link: var(--color-blue-500);
--icon-hover: var(--color-blue-400);
--icon-pressed: var(--color-blue-500);
--icon-inverse: var(--color-neutral-100);
/* Surface */
--surface-background: var(--color-black);
--surface-primary: var(--color-neutral-050);
--surface-secondary: var(--color-neutral-075);
--surface-tertiary: var(--color-neutral-100);
--surface-scrim: rgba(0, 0, 0, 0.7);
--surface-overlay: rgba(0, 0, 0, 0.7);
/* Link */
--link-on-color: var(--color-white);
--link-interactive: var(--color-blue-500);
--link-hover: var(--color-blue-400);
--link-pressed: var(--color-blue-500);
--link-secondary: var(--color-neutral-500);
--link-secondary-hover: var(--color-neutral-600);
--link-secondary-pressed: var(--color-neutral-500);
--link-disabled: var(--color-neutral-500);
/* Stroke */
--stroke-default: var(--color-neutral-300);
--stroke-hover: var(--color-neutral-700);
--stroke-danger: var(--color-red-400);
--stroke-danger-hover: var(--color-red-300);
--stroke-focus: var(--color-white);
--stroke-focus-on-color: var(--color-white);
--stroke-disabled: var(--color-neutral-400);
--stroke-subtle: var(--color-neutral-200);
/* Input */
--input-default: var(--color-neutral-100);
--input-disabled: var(--color-neutral-300);
/* Chips */
--chips-background-disabled: var(--color-neutral-500);
--chips-text-disabled: var(--color-neutral-600);
--chips-icon-disabled: var(--color-neutral-600);
--chips-background-off-default: var(--color-neutral-100);
--chips-background-off-hover: var(--color-neutral-200);
--chips-background-off-pressed: var(--color-neutral-300);
--chips-background-off-disabled: var(--color-neutral-600);
--chips-background-on-default: var(--color-blue-100);
--chips-background-on-hover: var(--color-blue-200);
--chips-background-on-pressed: var(--color-blue-300);
/* Miscellaneous tokens */
--toggle-off-default: var(--color-neutral-400);
--toggle-off-hover: var(--color-neutral-500);
--content-switcher-default: var(--color-neutral-300);
--tab-default: var(--color-neutral-050);
--tab-off-disabled: var(--color-neutral-100);
--tab-hover: var(--color-neutral-200);
--tab-pressed: var(--color-neutral-300);
--nav-selected-default: var(--color-neutral-075);
--nav-selected-hover: var(--color-neutral-100);
--nav-selected-pressed: var(--color-neutral-200);
--nav-selected-icons: var(--color-white);
--nav-selected-text: var(--color-white);
--nav-group-active-default: var(--color-neutral-025);
--nav-group-active-hover: var(--color-neutral-100);
--nav-group-active-pressed: var(--color-neutral-200);
--table-active-default: var(--color-neutral-075);
--table-active-hover: var(--color-neutral-100);
--table-active-pressed: var(--color-neutral-075);
--table-button-inactive-hover: var(--color-neutral-200);
--table-button-inactive-pressed: var(--color-neutral-300);
--table-button-active-hover: var(--color-blue-100);
--table-button-active-pressed: var(--color-blue-200);
--skeleton-background: var(--color-neutral-300);
--skeleton-subtle: var(--color-neutral-200);
/* Tags */
--tag-background-bold-blue: var(--color-primary-blue);
--tag-background-bold-turquoise: var(--color-turquoise-400);
--tag-background-bold-teal: var(--color-teal-400);
--tag-background-bold-lime: var(--color-lime-400);
--tag-background-bold-green: var(--color-green-400);
--tag-background-bold-yellow: var(--color-yellow-500);
--tag-background-bold-orange: var(--color-orange-500);
--tag-background-bold-red: var(--color-red-400);
--tag-background-bold-pink: var(--color-pink-400);
--tag-background-bold-purple: var(--color-purple-400);
--tag-background-bold-neutral: var(--color-neutral-700);
--tag-background-subtle-neutral: var(--color-neutral-200);
--tag-background-subtle-blue: var(--color-blue-200);
--tag-background-subtle-turquoise: var(--color-turquoise-100);
--tag-background-subtle-teal: var(--color-teal-100);
--tag-background-subtle-lime: var(--color-lime-100);
--tag-background-subtle-green: var(--color-green-100);
--tag-background-subtle-yellow: var(--color-yellow-100);
--tag-background-subtle-orange: var(--color-orange-100);
--tag-background-subtle-red: var(--color-red-100);
--tag-background-subtle-pink: var(--color-pink-100);
--tag-background-subtle-purple: var(--color-purple-100);
--tag-text-neutral: var(--color-neutral-700);
--tag-text-blue: var(--color-blue-700);
--tag-text-turquoise: var(--color-turquoise-700);
--tag-text-teal: var(--color-teal-700);
--tag-text-lime: var(--color-lime-700);
--tag-text-green: var(--color-green-700);
--tag-text-yellow: var(--color-yellow-700);
--tag-text-orange: var(--color-orange-700);
--tag-text-red: var(--color-red-700);
--tag-text-pink: var(--color-pink-700);
--tag-text-purple: var(--color-purple-700);
--tag-text-on-color: var(--color-neutral-075);
}
/* -------------------------------- PROPERTIES ------------------------------- */
/* ============================================
Radius variables
============================================ */
:root {
--radius-04: 0.25rem;
--radius-08: 0.5rem;
--radius-12: 0.75rem;
}
/* ============================================
Space variables
============================================ */
:root {
--space: 1rem;
--space-01: calc(var(--space) * 0.0625); /* 1px */
--space-04: calc(var(--space) / 4); /* 4px */
--space-08: calc(var(--space) / 2 ); /* 8px */
--space-12: calc(var(--space) * 0.75); /* 12px; */
--space-16: var(--space); /* 16px */
--space-20: calc(var(--space) * 1.25); /* 20px */
--space-24: calc(var(--space) * 1.5); /* 24px */
--space-32: calc(var(--space) * 2); /* 32px */
--space-40: calc(var(--space) * 2.5); /* 40px */
--space-48: calc(var(--space) * 3); /* 48px */
--space-56: calc(var(--space) * 3.5); /* 56px */
--space-64: calc(var(--space) * 4); /* 64px */
--space-80: calc(var(--space) * 5); /* 80px */
--space-96: calc(var(--space) * 6); /* 96px */
--space-112: calc(var(--space) * 7); /* 112 */
--space-128: calc(var(--space) * 8); /* 128px */
--space-160: calc(var(--space) * 10); /* 160px */
--space-240: calc(var(--space) * 15); /* 240px */
}
:root {
--z-index-page-content: 0;
--z-index-action-bar: 1000;
--z-index-flag-message: 2000;
--z-index-side-navigation: 3000;
--z-index-global-header: 4000;
--z-index-side-panel: 5000;
--z-index-modal: 6000;
--z-index-popover: 7000;
}
/* --------------------------------- ELEVATIONS --------------------------------- */
/*
Elevation Classes
==========
The elevation classes are used to define the box-shadow properties for different elevation levels.
Each class corresponds to a specific elevation level, providing a consistent shadow effect across the application.
Skim - A subtle shadow effect for elements that are slightly elevated.
Lifted - A more pronounced shadow effect for elements that are moderately elevated.
Raised - A stronger shadow effect for elements that are significantly elevated.
Floating - The most pronounced shadow effect for elements that appear to float above the surface.
*/
.elevation-01-skim {
box-shadow: 0px 1px 8px 0px rgba(0, 0, 0, 0.08);
}
.elevation-02-lifted {
box-shadow: 0px 1px 16px 0px rgba(0, 0, 0, 0.08);
}
.elevation-03-raised {
box-shadow: 0px 1px 24px 0px rgba(0, 0, 0, 0.08);
}
.elevation-04-floating {
box-shadow: 0px 1px 32px 0px rgba(0, 0, 0, 0.08);
}
/* --------------------------------- LAYERS ---------------------------------
THE LAYERS APPROACH IS NOW DEPRECATED.
ALL THE COMPONENTS SHOULD HAVE THEIR OWN CSS FILE.
THIS FILE IS JUST FOR THE GLOBAL STYLES.
THE LAYERS WILL BE REMOVED IN THE NEXT RELEASE.
PLEASE, DO NOT USE THE LAYERS IN YOUR CSS FILES.
THANK YOU!
*/
/* ------------------------------ End of layers ----------------------------- */
@layer reset {
* {
box-sizing: border-box;
}
button {
-webkit-appearance: none;
border-radius: 0;
text-align: inherit;
background: none;
box-shadow: none;
padding: 0;
cursor: pointer;
border: none;
color: inherit;
font: inherit;
display: flex;
align-items: center;
&:disabled {
cursor: not-allowed;
}
}
:focus {
outline: 0;
}
:focus-visible {
outline: 2px solid var(--stroke-focus);
}
.placeholder {
color: var(--field-placeholder-color);
font-weight: var(--font-weight-light);
opacity: 0.54;
}
}
@layer element {
* {
font-family: var(--font-family-default);
}
body {
background-color: var(--surface--primary);
color: var(--text-color);
text-size-adjust: 100%;
}
input,
select,
button {
font-size: var(--font-typesize-03);
line-height: 1.25;
}
i,
em {
font-family: var(--font-family-text-italic);
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: var(--font-family-default);
}
h1 i,
h1 em,
h2 i,
h2 em,
h3 i,
h3 em,
h4 i,
h4 em,
h5 i,
h5 em,
h6 i,
h6 em {
font-family: var(--font-family-display-italic);
}
p {
margin: 0 0 1rem 0;
}
p:last-of-type {
margin: 0;
}
dialog::backdrop {
background-color: light-dark(hsla(0, 0%, 0%, 0.7), hsla(0, 0%, 100%, 0.3));
}
}
[hidden],
.visually-hidden {
height: 0;
margin: 0;
opacity: 0;
padding: 0;
width: 0;
border: 0;
}
body {
margin: 0;
overscroll-behavior: none;
display: flex;
}
#root {
display: flex;
inset: 0;
position: absolute;
flex: 1;
overflow: hidden;
}