.dic-shell {
--dic-primary: #135e96;
--dic-primary-dark: #0a4b78;
--dic-border: #d7dee6;
--dic-muted: #44556a;
--dic-error: #b42318;
--dic-success: #137333;
width: 100%;
max-width: 980px;
margin: 18px auto;
color: #172033;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}
.dic-form {
background: #fff;
border: 1px solid var(--dic-border);
border-radius: 14px;
padding: clamp(18px, 3vw, 32px);
box-shadow: 0 8px 28px rgba(17, 32, 51, .07);
}
.dic-shell .dic-form .dic-grid {
display: flex !important;
flex-direction: column !important;
gap: 8px !important;
width: 100% !important;
}
.dic-shell .dic-form .dic-row {
display: grid !important;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
column-gap: 24px !important;
row-gap: 8px !important;
align-items: start !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
float: none !important;
clear: both !important;
}
.dic-shell .dic-form .dic-row--two > .dic-field:first-child {
grid-column: 1 !important;
grid-row: 1 !important;
}
.dic-shell .dic-form .dic-row--two > .dic-field:nth-child(2) {
grid-column: 2 !important;
grid-row: 1 !important;
}
.dic-shell .dic-form .dic-row--single {
grid-template-columns: minmax(0, 1fr) !important;
}
.dic-shell .dic-form .dic-field {
display: block !important;
position: static !important;
inset: auto !important;
align-self: stretch !important;
min-width: 0;
width: auto !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
float: none !important;
clear: none !important;
transform: none !important;
}
.dic-field--full {
width: 100% !important;
}
.dic-label {
display: block !important;
margin: 0 0 5px !important;
color: #172033 !important;
font-size: 17px !important;
font-style: normal !important;
font-weight: 400 !important;
line-height: 1.4 !important;
letter-spacing: normal !important;
text-transform: none !important;
}
.dic-required {
color: var(--dic-error) !important;
font-weight: 400 !important;
}
.dic-input,
.dic-textarea {
width: 100%;
box-sizing: border-box;
border: 1px solid var(--dic-border);
border-radius: 8px;
background: #fbfcfd;
color: #172033;
font: inherit;
font-size: 16px;
padding: 5px 7px !important;
transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.dic-input:focus,
.dic-textarea:focus {
outline: none;
border-color: var(--dic-primary);
background: #fff;
box-shadow: 0 0 0 3px rgba(19, 94, 150, .14);
}
.dic-textarea {
min-height: 150px;
resize: vertical;
}
.dic-phone-control {
display: flex !important;
align-items: stretch !important;
width: 100% !important;
overflow: hidden !important;
border: 1px solid var(--dic-border) !important;
border-radius: 8px !important;
background: #fbfcfd !important;
box-sizing: border-box !important;
transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.dic-phone-control:focus-within {
border-color: var(--dic-primary) !important;
background: #fff !important;
box-shadow: 0 0 0 3px rgba(19, 94, 150, .14) !important;
}
.dic-phone-control.is-invalid {
border-color: var(--dic-error) !important;
}
.dic-phone-prefix {
display: flex !important;
align-items: center !important;
flex: 0 0 auto !important;
padding: 5px 0 5px 7px !important;
color: #465363 !important;
font-size: 16px !important;
line-height: 1.5 !important;
user-select: none !important;
}
.dic-phone-control .dic-phone-input {
flex: 1 1 auto !important;
min-width: 0 !important;
border: 0 !important;
border-radius: 0 !important;
padding: 5px 7px 5px 4px !important;
background: transparent !important;
box-shadow: none !important;
}
.dic-phone-control .dic-phone-input:focus {
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
.dic-help,
.dic-counter {
margin: 5px 0 0;
color: var(--dic-muted);
font-size: 12.5px;
font-weight: 500;
line-height: 1.5;
}
.dic-phone-validation-message {
margin: 4px 0 0 !important;
color: var(--dic-error) !important;
font-size: 12.5px !important;
font-style: normal !important;
font-weight: 400 !important;
line-height: 1.4 !important;
}
.dic-phone-validation-message[hidden] {
display: none !important;
}
.dic-counter {
text-align: right;
}
.dic-file-list {
display: grid !important;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important;
grid-auto-flow: row !important;
grid-auto-rows: 1fr !important;
gap: 12px !important;
align-items: stretch !important;
width: 100% !important;
margin: 12px 0 0 !important;
padding: 0 !important;
}
.dic-file-list::before,
.dic-file-list::after {
display: none !important;
content: none !important;
}
.dic-file-list > .dic-file-item {
display: flex !important;
position: static !important;
inset: auto !important;
grid-column: auto !important;
grid-row: auto !important;
flex-direction: column !important;
gap: 9px !important;
align-items: stretch !important;
justify-content: flex-start !important;
min-width: 0 !important;
min-height: 188px !important;
width: auto !important;
max-width: none !important;
margin: 0 !important;
padding: 10px !important;
float: none !important;
clear: none !important;
border: 1px solid var(--dic-border);
border-radius: 10px;
background: #f8fafc;
box-sizing: border-box !important;
transform: none !important;
}
.dic-file-list > .dic-file-item:first-child {
grid-column: 1 !important;
grid-row: 1 !important;
}
.dic-file-preview {
display: block !important;
width: 100% !important;
height: 126px !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
border: 0 !important;
border-radius: 8px !important;
background: #e7edf3 !important;
color: inherit !important;
cursor: zoom-in !important;
appearance: none !important;
box-shadow: none !important;
}
.dic-file-preview:focus-visible {
outline: 3px solid rgba(19, 94, 150, .32) !important;
outline-offset: 3px !important;
}
.dic-file-thumb {
display: block !important;
width: 100% !important;
height: 100% !important;
margin: 0 !important;
padding: 0 !important;
object-fit: cover !important;
object-position: center !important;
border: 0 !important;
border-radius: 0 !important;
background: #e7edf3 !important;
transition: transform .2s ease !important;
}
.dic-file-preview:hover .dic-file-thumb,
.dic-file-preview:focus-visible .dic-file-thumb {
transform: scale(1.035) !important;
}
.dic-file-icon {
display: grid !important;
place-items: center !important;
width: 100% !important;
height: 126px !important;
margin: 0 !important;
border-radius: 8px !important;
background: #e7edf3 !important;
color: #31445a !important;
font-size: 18px !important;
font-weight: 750 !important;
}
.dic-file-detail {
display: block !important;
min-width: 0 !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
.dic-file-name {
overflow: hidden;
color: #24364b;
font-size: 12px;
font-weight: 600;
text-overflow: ellipsis;
white-space: nowrap;
}
.dic-file-size {
color: var(--dic-muted);
font-size: 11px;
}
body.dic-modal-open {
overflow: hidden !important;
}
.dic-modal[hidden] {
display: none !important;
}
.dic-modal {
display: flex !important;
position: fixed !important;
inset: 0 !important;
z-index: 2147483000 !important;
align-items: center !important;
justify-content: center !important;
width: 100vw !important;
height: 100vh !important;
margin: 0 !important;
padding: 20px !important;
overflow: auto !important;
background: rgba(7, 14, 25, .9) !important;
box-sizing: border-box !important;
}
.dic-modal-dialog {
display: grid !important;
position: relative !important;
grid-template-columns: 52px minmax(0, 1fr) 52px !important;
grid-template-rows: minmax(0, 1fr) auto !important;
gap: 12px !important;
align-items: center !important;
width: min(1120px, calc(100vw - 40px)) !important;
max-width: 1120px !important;
max-height: calc(100vh - 40px) !important;
margin: auto !important;
padding: 22px !important;
border: 1px solid rgba(255, 255, 255, .22) !important;
border-radius: 14px !important;
background: #101a28 !important;
box-shadow: 0 24px 80px rgba(0, 0, 0, .55) !important;
box-sizing: border-box !important;
}
.dic-modal-figure {
display: flex !important;
grid-column: 2 !important;
grid-row: 1 / span 2 !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
min-width: 0 !important;
min-height: 0 !important;
width: 100% !important;
height: 100% !important;
margin: 0 !important;
}
.dic-modal-image {
display: block !important;
width: auto !important;
max-width: 100% !important;
height: auto !important;
max-height: calc(100vh - 150px) !important;
margin: 0 auto !important;
object-fit: contain !important;
border-radius: 8px !important;
background: #07101b !important;
box-shadow: 0 12px 38px rgba(0, 0, 0, .35) !important;
}
.dic-modal-caption {
width: 100% !important;
margin: 12px 0 0 !important;
overflow: hidden !important;
color: #fff !important;
font-size: 13px !important;
line-height: 1.4 !important;
text-align: center !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
}
.dic-modal-close,
.dic-modal-nav {
display: grid !important;
place-items: center !important;
width: 44px !important;
height: 44px !important;
margin: 0 !important;
padding: 0 !important;
border: 1px solid rgba(255, 255, 255, .3) !important;
border-radius: 999px !important;
background: rgba(255, 255, 255, .12) !important;
color: #fff !important;
font-family: Arial, sans-serif !important;
font-size: 30px !important;
font-weight: 400 !important;
line-height: 1 !important;
cursor: pointer !important;
box-shadow: none !important;
}
.dic-modal-close:hover,
.dic-modal-nav:hover,
.dic-modal-close:focus-visible,
.dic-modal-nav:focus-visible {
border-color: #fff !important;
background: rgba(255, 255, 255, .22) !important;
outline: none !important;
}
.dic-modal-close {
position: absolute !important;
top: 10px !important;
right: 10px !important;
z-index: 2 !important;
}
.dic-modal-prev {
grid-column: 1 !important;
grid-row: 1 !important;
justify-self: center !important;
}
.dic-modal-next {
grid-column: 3 !important;
grid-row: 1 !important;
justify-self: center !important;
}
.dic-modal-nav:disabled {
visibility: hidden !important;
cursor: default !important;
}
.dic-button {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 42px;
border: 0;
border-radius: 8px;
padding: 10px 18px;
background: var(--dic-primary);
color: var(--dic-button-text);
font: inherit;
font-size: 15px;
font-weight: 650;
cursor: pointer;
transition: background .18s ease, opacity .18s ease;
}
.dic-button:hover {
background: var(--dic-primary-dark);
}
.dic-button:disabled {
opacity: .55;
cursor: wait;
}
.dic-progress {
display: none;
width: 100%;
height: 8px;
margin-top: 12px;
overflow: hidden;
border: 1px solid var(--dic-border);
border-radius: 999px;
background: #eef2f6;
}
.dic-progress.is-active {
display: block;
}
.dic-progress-bar {
width: 0;
height: 100%;
background: var(--dic-primary);
transition: width .18s ease;
}
.dic-message {
display: none;
margin-top: 14px;
border-radius: 8px;
padding: 12px 14px;
font-size: 14px;
line-height: 1.45;
}
.dic-message.is-visible {
display: block;
}
.dic-message.is-success {
border: 1px solid #a6d5b2;
background: #edf8f0;
color: var(--dic-success);
}
.dic-message.is-error {
border: 1px solid #f0b2ac;
background: #fff1f0;
color: var(--dic-error);
} .dic-shell {
--dic-primary: #0f5f91;
--dic-primary-dark: #084467;
--dic-accent: #28a7c7;
--dic-button-text: #fff;
--dic-button-shadow: rgba(15, 95, 145, .22);
--dic-button-shadow-strong: rgba(15, 95, 145, .30);
--dic-primary-soft: rgba(15, 95, 145, .12);
--dic-panel: #0f5f91;
--dic-panel-dark: #073c5e;
--dic-panel-text: #fff;
--dic-panel-text-soft: rgba(255, 255, 255, .86);
--dic-panel-border: rgba(255, 255, 255, .24);
--dic-panel-chip: rgba(255, 255, 255, .11);
--dic-panel-ring-one: rgba(255, 255, 255, .045);
--dic-panel-ring-two: rgba(255, 255, 255, .025);
--dic-panel-shadow: rgba(15, 95, 145, .24);
--dic-ink: #152538;
--dic-muted: #43566b;
--dic-muted-strong: #33485e;
--dic-border: #d9e3ec;
--dic-left-column-width: 360px;
--dic-right-column-max-width: 1000px;
--dic-column-gap: clamp(10px, 1.7vw, 20px);
position: relative;
max-width: none;
margin: clamp(18px, 4vw, 44px) auto;
padding: clamp(8px, 1.6vw, 16px);
overflow: hidden;
border: 1px solid rgba(15, 95, 145, .12);
border-radius: 26px;
background:
radial-gradient(circle at 0 0, rgba(40, 167, 199, .13), transparent 34%),
linear-gradient(145deg, #f3f8fc 0%, #eef5fa 100%);
box-shadow: 0 24px 70px rgba(21, 37, 56, .12);
color: var(--dic-ink);
}
.dic-shell,
.dic-shell *,
.dic-shell *::before,
.dic-shell *::after {
box-sizing: border-box !important;
} .dic-shell.dic-shell--full {
width: 100% !important;
max-width: none !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
.dic-shell.dic-shell--contained {
width: 100% !important;
max-width: 1440px !important;
margin-left: auto !important;
margin-right: auto !important;
}
.dic-experience {
display: grid !important;
grid-template-columns:
var(--dic-left-column-width)
minmax(0, var(--dic-right-column-max-width)) !important;
grid-template-rows: auto !important;
gap: var(--dic-column-gap) !important;
align-items: start !important;
justify-content: center !important;
width: 100% !important;
max-width: calc(
var(--dic-left-column-width)
+ var(--dic-right-column-max-width)
+ var(--dic-column-gap)
) !important;
margin: 0 auto !important;
padding: 0 !important;
}
.dic-experience > .dic-intro-panel {
grid-column: 1 !important;
grid-row: 1 !important;
align-self: start !important;
width: var(--dic-left-column-width) !important;
min-width: var(--dic-left-column-width) !important;
max-width: var(--dic-left-column-width) !important;
min-height: 570px !important;
height: auto !important;
margin: 0 !important;
float: none !important;
clear: none !important;
inset: auto !important;
transform: none !important;
}
.dic-experience > .dic-form {
grid-column: 2 !important;
grid-row: 1 !important;
align-self: start !important;
width: 100% !important;
min-width: 0 !important;
max-width: var(--dic-right-column-max-width) !important;
justify-self: center !important;
height: auto !important;
margin: 0 !important;
float: none !important;
clear: none !important;
inset: auto !important;
transform: none !important;
}
.dic-intro-panel {
display: flex !important;
position: relative !important;
flex-direction: column;
justify-content: space-between;
min-width: 0;
overflow: hidden;
border-radius: 20px;
padding: clamp(24px, 3.2vw, 42px);
background:
radial-gradient(circle at 90% 10%, var(--dic-panel-chip), transparent 32%),
linear-gradient(155deg, var(--dic-panel) 0%, var(--dic-panel-dark) 100%);
color: var(--dic-panel-text);
box-shadow: 0 16px 42px var(--dic-panel-shadow);
} .dic-intro-panel,
.dic-intro-panel .dic-eyebrow,
.dic-intro-panel .dic-intro-title,
.dic-intro-panel .dic-trust-item,
.dic-intro-panel .dic-trust-icon,
.dic-intro-panel strong,
.dic-intro-panel b,
.dic-intro-panel a {
color: var(--dic-panel-text) !important;
}
.dic-intro-panel .dic-intro-text,
.dic-intro-panel .dic-intro-text p,
.dic-intro-panel .dic-intro-text span {
color: var(--dic-panel-text-soft) !important;
}
.dic-intro-panel::after {
position: absolute;
right: -72px;
bottom: -72px;
width: 190px;
height: 190px;
border: 1px solid var(--dic-panel-border);
border-radius: 50%;
content: "";
box-shadow:
0 0 0 28px var(--dic-panel-ring-one),
0 0 0 60px var(--dic-panel-ring-two);
pointer-events: none;
}
.dic-intro-content,
.dic-trust-list,
.dic-intro-logo {
position: relative;
z-index: 1;
} .dic-intro-logo {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
min-width: 0 !important;
margin-top: clamp(22px, 3vw, 34px) !important;
padding: clamp(12px, 2vw, 18px) !important;
overflow: hidden !important;
border: 1px solid rgba(255, 255, 255, .32) !important;
background: rgba(255, 255, 255, .96) !important;
box-shadow:
0 12px 26px rgba(0, 0, 0, .14),
inset 0 1px 0 rgba(255, 255, 255, .82) !important;
}
.dic-left-image,
.dic-intro-logo-image {
display: block !important;
width: 100% !important;
max-width: 100% !important;
height: auto !important;
margin: 0 !important;
}
.dic-eyebrow {
display: inline-flex;
align-items: center;
width: fit-content;
margin: 0 0 18px;
border: 1px solid var(--dic-panel-border);
border-radius: 999px;
padding: 6px 11px;
background: var(--dic-panel-chip);
color: var(--dic-panel-text);
font-size: 11px;
font-weight: 750;
letter-spacing: .07em;
line-height: 1.2;
text-transform: uppercase;
}
.dic-intro-title {
max-width: 460px;
margin: 0;
color: var(--dic-panel-text);
font-size: clamp(29px, 4vw, 47px);
font-weight: 780;
letter-spacing: -.035em;
line-height: 1.04;
}
.dic-intro-text {
max-width: 500px;
margin: 18px 0 0;
color: var(--dic-panel-text-soft);
font-size: 16px;
line-height: 1.65;
}
.dic-trust-list {
display: grid;
gap: 11px;
margin: clamp(34px, 6vw, 82px) 0 0;
padding: 0;
list-style: none;
}
.dic-trust-item {
display: grid;
grid-template-columns: 31px minmax(0, 1fr);
gap: 10px;
align-items: center;
color: var(--dic-panel-text);
font-size: 13px;
line-height: 1.4;
}
.dic-trust-icon {
display: grid;
place-items: center;
width: 31px;
height: 31px;
border: 1px solid var(--dic-panel-border);
border-radius: 50%;
background: var(--dic-panel-chip);
color: var(--dic-panel-text);
font-size: 14px;
font-weight: 800;
}
.dic-form {
display: block !important;
position: relative !important;
border: 1px solid rgba(255, 255, 255, .85);
border-radius: 20px;
padding: clamp(22px, 3vw, 38px);
background: rgba(255, 255, 255, .97);
box-shadow: 0 14px 40px rgba(21, 37, 56, .09);
}
.dic-form-header {
margin: 0 0 26px;
padding: 0 0 22px;
border-bottom: 1px solid #e8eef4;
}
.dic-form-title {
margin: 0;
color: var(--dic-ink);
font-size: clamp(24px, 3vw, 33px);
font-weight: 760;
letter-spacing: -.025em;
line-height: 1.12;
}
.dic-form-text {
max-width: 680px;
margin: 9px 0 0;
color: var(--dic-muted-strong);
font-size: 14.5px;
font-weight: 500;
line-height: 1.6;
}
.dic-shell .dic-form .dic-grid {
gap: 16px !important;
}
.dic-shell .dic-form .dic-row {
column-gap: 18px !important;
row-gap: 14px !important;
}
.dic-section-heading {
display: flex;
gap: 9px;
align-items: center;
margin: 2px 0 -2px;
color: var(--dic-primary-dark);
font-size: 12px;
font-weight: 800;
letter-spacing: .065em;
line-height: 1.3;
text-transform: uppercase;
}
.dic-section-heading::before {
width: 26px;
height: 3px;
border-radius: 999px;
background: linear-gradient(90deg, var(--dic-primary), var(--dic-accent));
content: "";
}
.dic-label {
margin-bottom: 6px !important;
color: var(--dic-ink) !important;
font-size: 13px !important;
font-weight: 700 !important;
}
.dic-optional {
margin-left: 5px;
color: var(--dic-muted-strong);
font-size: 12px;
font-weight: 650;
}
.dic-input,
.dic-select,
.dic-textarea {
display: block !important;
width: 100% !important;
max-width: none !important;
margin: 0 !important;
min-height: 45px;
border: 1px solid var(--dic-border);
border-radius: 10px;
padding: 9px 11px !important;
background: #fbfdff;
color: var(--dic-ink);
font: inherit;
font-size: 15px;
line-height: 1.45;
box-sizing: border-box;
transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.dic-select {
width: 100%;
cursor: pointer;
}
.dic-input:hover,
.dic-select:hover,
.dic-textarea:hover {
border-color: #b7c8d7;
}
.dic-input:focus,
.dic-select:focus,
.dic-textarea:focus {
outline: none;
border-color: var(--dic-primary);
background: #fff;
box-shadow: 0 0 0 3px var(--dic-primary-soft);
}
.dic-textarea {
min-height: 146px;
}
.dic-help,
.dic-counter {
color: var(--dic-muted-strong);
font-size: 12.5px;
font-weight: 500;
line-height: 1.5;
}
.dic-field-meta {
display: flex;
gap: 10px;
justify-content: space-between;
align-items: flex-start;
}
.dic-field-meta .dic-help {
flex: 1 1 auto;
}
.dic-email-validation-message {
margin: 5px 0 0;
color: #7a5510;
font-size: 12px;
line-height: 1.4;
}
.dic-email-validation-message[hidden] {
display: none !important;
}
.dic-phone-control {
flex-direction: row !important;
flex-wrap: nowrap !important;
align-items: stretch !important;
min-height: 45px;
height: 45px !important;
max-height: 45px !important;
border-radius: 10px !important;
}
.dic-phone-country {
display: block !important;
flex: 0 0 46% !important;
width: 46% !important;
min-width: 124px;
max-width: 230px;
min-height: 43px !important;
height: 43px !important;
max-height: 43px !important;
margin: 0 !important;
border: 0 !important;
border-right: 1px solid var(--dic-border) !important;
border-radius: 0 !important;
padding: 8px 30px 8px 10px !important;
background-color: transparent !important;
color: #31445a !important;
font-size: 13px !important;
cursor: pointer;
box-shadow: none !important;
}
.dic-phone-control .dic-phone-input {
display: block !important;
flex: 1 1 100% !important;
width: 100% !important;
min-width: 70px !important;
max-width: none !important;
min-height: 43px !important;
height: 43px !important;
max-height: 43px !important;
margin: 0 !important;
padding: 9px 11px !important;
}
.dic-file-input {
position: absolute !important;
width: 1px !important;
height: 1px !important;
overflow: hidden !important;
clip: rect(0 0 0 0) !important;
clip-path: inset(50%) !important;
white-space: nowrap !important;
}
.dic-dropzone {
display: grid;
place-items: center;
min-height: 174px;
border: 1.5px dashed #9eb8ca;
border-radius: 14px;
padding: 24px 18px;
background:
radial-gradient(circle at 50% 0, rgba(40, 167, 199, .08), transparent 54%),
#f8fbfd;
text-align: center;
cursor: pointer;
transition: border-color .18s ease, background .18s ease, transform .18s ease, box-shadow .18s ease;
}
.dic-dropzone:hover,
.dic-dropzone.is-dragover,
.dic-file-input:focus + .dic-dropzone {
border-color: var(--dic-primary);
background-color: #f1f8fc;
box-shadow: 0 0 0 3px var(--dic-primary-soft);
transform: translateY(-1px);
}
.dic-drop-icon {
display: grid;
place-items: center;
width: 48px;
height: 48px;
margin: 0 auto 10px;
border-radius: 14px;
background: linear-gradient(145deg, var(--dic-primary), var(--dic-accent));
color: var(--dic-button-text);
font-size: 25px;
line-height: 1;
box-shadow: 0 8px 20px var(--dic-button-shadow);
}
.dic-drop-title {
display: block;
color: var(--dic-ink);
font-size: 15px;
font-weight: 750;
line-height: 1.35;
}
.dic-drop-text {
display: block;
margin-top: 4px;
color: var(--dic-muted-strong);
font-size: 13px;
font-weight: 500;
line-height: 1.45;
}
.dic-drop-config {
display: grid !important;
gap: 3px !important;
margin-top: 10px !important;
color: #33485e !important;
font-size: 12px !important;
font-weight: 600 !important;
line-height: 1.45 !important;
}
.dic-drop-formats,
.dic-drop-configured,
.dic-drop-effective {
display: block !important;
}
.dic-drop-formats {
color: #33485e !important;
}
.dic-drop-configured {
color: #243b50 !important;
font-weight: 700 !important;
}
.dic-drop-effective {
margin-top: 2px !important;
padding: 5px 7px !important;
border: 1px solid rgba(145, 100, 20, .25) !important;
background: rgba(255, 244, 214, .72) !important;
color: #68480f !important;
font-weight: 700 !important;
}
.dic-file-picker {
display: inline-flex;
margin-top: 13px;
border: 1px solid var(--dic-primary-dark);
border-radius: 9px;
padding: 8px 13px;
background: var(--dic-primary);
color: var(--dic-button-text);
font-size: 12.5px;
font-weight: 750;
box-shadow: 0 4px 14px rgba(21, 37, 56, .06);
}
.dic-file-summary {
min-height: 18px;
margin: 8px 0 0;
color: var(--dic-muted-strong);
font-size: 12.5px;
font-weight: 650;
line-height: 1.45;
}
.dic-file-list > .dic-file-item {
position: relative !important;
min-height: 204px !important;
border-color: #d8e3eb;
border-radius: 12px;
background: #fff;
box-shadow: 0 6px 18px rgba(21, 37, 56, .06);
}
.dic-file-remove {
display: grid;
position: absolute;
top: 5px;
right: 5px;
z-index: 2;
place-items: center;
width: 30px;
height: 30px;
margin: 0;
border: 1px solid rgba(255, 255, 255, .75);
border-radius: 50%;
padding: 0;
background: rgba(21, 37, 56, .86);
color: #fff;
font-size: 19px;
line-height: 1;
cursor: pointer;
box-shadow: 0 3px 10px rgba(0, 0, 0, .2);
}
.dic-file-remove:hover,
.dic-file-remove:focus-visible {
background: var(--dic-error);
outline: none;
}
.dic-privacy-notice {
margin: 2px 0 0;
border-left: 3px solid var(--dic-accent);
border-radius: 0 8px 8px 0;
padding: 12px 14px;
background: #edf6fb;
color: #334b62;
font-size: 12.5px;
font-weight: 500;
line-height: 1.6;
}
.dic-privacy-notice a {
color: #064b74;
font-weight: 800;
text-decoration: underline;
text-underline-offset: 2px;
}
.dic-actions {
display: grid;
gap: 10px;
}
.dic-button {
min-height: 51px;
border-radius: 11px;
padding: 12px 22px;
background: linear-gradient(135deg, var(--dic-primary) 0%, var(--dic-accent) 100%);
color: var(--dic-button-text);
font-size: 15px;
font-weight: 760;
box-shadow: 0 10px 24px var(--dic-button-shadow);
transition: transform .18s ease, box-shadow .18s ease, background .18s ease, opacity .18s ease;
}
.dic-button::after {
margin-left: 9px;
content: "→";
font-size: 19px;
line-height: 1;
transition: transform .18s ease;
}
.dic-button:hover {
background: linear-gradient(135deg, var(--dic-primary-dark) 0%, var(--dic-primary) 100%);
box-shadow: 0 12px 29px var(--dic-button-shadow-strong);
transform: translateY(-1px);
}
.dic-button:hover::after {
transform: translateX(3px);
}
.dic-button:disabled {
transform: none;
}
.dic-progress {
height: 6px;
margin-top: 2px;
border: 0;
background: #e7eef4;
}
.dic-progress-bar {
background: linear-gradient(90deg, var(--dic-primary), var(--dic-accent));
}
.dic-message {
position: relative;
margin-top: 2px;
border-radius: 11px;
padding: 14px 15px 14px 45px;
font-weight: 650;
}
.dic-message::before {
position: absolute;
top: 50%;
left: 15px;
font-size: 20px;
font-weight: 900;
line-height: 1;
transform: translateY(-50%);
}
.dic-message.is-success::before {
content: "✓";
}
.dic-message.is-error::before {
content: "!";
}
@media (max-width: 920px) {
.dic-experience {
grid-template-columns: minmax(0, 1fr) !important;
grid-template-rows: auto auto !important;
max-width: min(100%, var(--dic-right-column-max-width)) !important;
margin-left: auto !important;
margin-right: auto !important;
}
.dic-experience > .dic-intro-panel {
grid-column: 1 !important;
grid-row: 1 !important;
width: 100% !important;
min-width: 0 !important;
max-width: var(--dic-right-column-max-width) !important;
min-height: 0 !important;
justify-self: center !important;
}
.dic-experience > .dic-form {
grid-column: 1 !important;
grid-row: 2 !important;
width: 100% !important;
max-width: var(--dic-right-column-max-width) !important;
justify-self: center !important;
}
.dic-intro-panel {
min-height: auto;
}
.dic-trust-list {
grid-template-columns: repeat(3, minmax(0, 1fr));
margin-top: 28px;
}
}
@media (max-width: 640px) {
.dic-shell {
padding: 7px;
border-radius: 18px;
}
.dic-intro-panel,
.dic-form {
border-radius: 14px;
}
.dic-intro-panel {
padding: 24px 20px;
}
.dic-intro-title {
font-size: 31px;
}
.dic-trust-list {
grid-template-columns: minmax(0, 1fr);
gap: 8px;
margin-top: 24px;
}
.dic-form {
padding: 22px 16px;
}
.dic-shell .dic-form .dic-row {
grid-template-columns: minmax(0, 1fr) !important;
}
.dic-shell .dic-form .dic-row--two > .dic-field:first-child,
.dic-shell .dic-form .dic-row--two > .dic-field:nth-child(2) {
grid-column: 1 !important;
}
.dic-shell .dic-form .dic-row--two > .dic-field:first-child {
grid-row: 1 !important;
}
.dic-shell .dic-form .dic-row--two > .dic-field:nth-child(2) {
grid-row: 2 !important;
}
.dic-phone-country {
flex-basis: 46% !important;
width: 46% !important;
min-width: 112px;
}
.dic-dropzone {
min-height: 155px;
padding: 20px 12px;
}
.dic-button {
width: 100%;
}
}
@media (max-width: 480px) {
.dic-label {
font-size: 16px !important;
}
.dic-shell .dic-form .dic-row {
grid-template-columns: minmax(0, 1fr) !important;
}
.dic-shell .dic-form .dic-row--two > .dic-field:first-child {
grid-column: 1 !important;
grid-row: 1 !important;
}
.dic-shell .dic-form .dic-row--two > .dic-field:nth-child(2) {
grid-column: 1 !important;
grid-row: 2 !important;
}
.dic-form {
border-radius: 10px;
}
.dic-file-list {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 10px !important;
}
.dic-file-list > .dic-file-item {
min-height: 166px !important;
padding: 8px !important;
}
.dic-file-preview,
.dic-file-icon {
height: 108px !important;
}
.dic-modal {
padding: 10px !important;
}
.dic-modal-dialog {
grid-template-columns: 44px minmax(0, 1fr) 44px !important;
gap: 6px !important;
width: calc(100vw - 20px) !important;
max-height: calc(100vh - 20px) !important;
padding: 54px 8px 14px !important;
}
.dic-modal-image {
max-height: calc(100vh - 155px) !important;
}
.dic-modal-close,
.dic-modal-nav {
width: 40px !important;
height: 40px !important;
}
}
@media (max-width: 340px) {
.dic-file-list {
grid-template-columns: minmax(0, 1fr) !important;
}
} .dic-label-row {
display: flex !important;
align-items: flex-start !important;
justify-content: space-between !important;
gap: 10px !important;
margin-bottom: 8px !important;
}
.dic-label-row .dic-label {
flex: 1 1 auto !important;
margin: 0 !important;
}
.dic-help-toggle {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 28px !important;
min-width: 28px !important;
height: 28px !important;
padding: 0 !important;
border: 1px solid #cfd7e2 !important;
background: linear-gradient(180deg, #ffffff 0%, #eef4f8 100%) !important;
color: var(--dic-primary-dark) !important;
font-size: 15px !important;
font-weight: 800 !important;
line-height: 1 !important;
cursor: pointer !important;
box-shadow: 0 6px 14px rgba(15, 23, 42, .08) !important;
transition:
transform .18s ease,
box-shadow .18s ease,
background-color .18s ease,
color .18s ease,
border-color .18s ease !important;
}
.dic-help-toggle:hover,
.dic-help-toggle:focus,
.dic-help-toggle:focus-visible {
outline: none !important;
border-color: var(--dic-primary-dark) !important;
color: var(--dic-primary-dark) !important;
box-shadow:
0 0 0 3px rgba(15, 95, 145, .11),
0 10px 18px rgba(15, 23, 42, .12) !important;
transform: translateY(-1px) !important;
}
.dic-help-toggle.is-open {
background: linear-gradient(180deg, var(--dic-primary) 0%, var(--dic-primary-dark) 100%) !important;
color: var(--dic-button-text) !important;
border-color: var(--dic-primary-dark) !important;
box-shadow:
0 0 0 3px rgba(15, 95, 145, .12),
0 12px 24px rgba(15, 23, 42, .16) !important;
transform: translateY(-1px) !important;
}
.dic-help-card[hidden] {
display: none !important;
}
.dic-help-card {
margin-top: 10px !important;
padding: 14px 16px !important;
border: 1px solid #d6dee8 !important;
background: linear-gradient(180deg, #ffffff 0%, #f7fafc 100%) !important;
box-shadow: 0 16px 28px rgba(15, 23, 42, .08) !important;
}
.dic-help-card-header {
display: flex !important;
align-items: flex-start !important;
justify-content: space-between !important;
gap: 12px !important;
margin-bottom: 12px !important;
}
.dic-help-card-title-wrap {
flex: 1 1 auto !important;
min-width: 0 !important;
}
.dic-help-card-title {
font-size: 15px !important;
font-weight: 700 !important;
line-height: 1.35 !important;
color: #16283a !important;
}
.dic-help-close {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 28px !important;
min-width: 28px !important;
height: 28px !important;
padding: 0 !important;
border: 1px solid #d5dde6 !important;
background: #ffffff !important;
color: #23374b !important;
font-size: 18px !important;
font-weight: 700 !important;
line-height: 1 !important;
cursor: pointer !important;
box-shadow: 0 4px 10px rgba(15, 23, 42, .07) !important;
transition:
border-color .18s ease,
color .18s ease,
box-shadow .18s ease,
background-color .18s ease !important;
}
.dic-help-close:hover,
.dic-help-close:focus,
.dic-help-close:focus-visible {
outline: none !important;
border-color: #000000 !important;
color: #000000 !important;
box-shadow:
0 0 0 3px rgba(0, 0, 0, .08),
0 10px 16px rgba(15, 23, 42, .10) !important;
}
.dic-help-card-body {
display: grid !important;
gap: 10px !important;
}
.dic-help-card-block {
padding: 11px 12px !important;
background: rgba(15, 95, 145, .045) !important;
border-left: 3px solid var(--dic-primary) !important;
}
.dic-help-card-caption {
margin: 0 0 4px !important;
color: #4c6175 !important;
font-size: 11px !important;
font-weight: 800 !important;
letter-spacing: .06em !important;
line-height: 1.3 !important;
text-transform: uppercase !important;
}
.dic-help-card p {
margin: 0 !important;
color: #22384d !important;
font-size: 14px !important;
font-weight: 500 !important;
line-height: 1.58 !important;
}
@media (max-width: 640px) {
.dic-help-card {
padding: 12px 13px !important;
}
.dic-help-card-body {
gap: 8px !important;
}
} .dic-shell .dic-input,
.dic-shell .dic-select,
.dic-shell .dic-textarea,
.dic-shell .dic-phone-control {
border-color: #999999 !important;
box-shadow:
0 1px 3px rgba(0, 0, 0, .09),
inset 0 1px 0 rgba(255, 255, 255, .72) !important;
transition:
border-color .18s ease,
box-shadow .18s ease,
background-color .18s ease !important;
}
.dic-shell .dic-input:hover,
.dic-shell .dic-select:hover,
.dic-shell .dic-textarea:hover,
.dic-shell .dic-phone-control:hover {
border-color: #000000 !important;
background-color: #ffffff !important;
box-shadow:
0 4px 12px rgba(0, 0, 0, .18),
0 0 0 1px rgba(0, 0, 0, .035) !important;
}
.dic-shell .dic-input:focus,
.dic-shell .dic-input:focus-visible,
.dic-shell .dic-select:focus,
.dic-shell .dic-select:focus-visible,
.dic-shell .dic-textarea:focus,
.dic-shell .dic-textarea:focus-visible,
.dic-shell .dic-phone-control:focus-within {
outline: none !important;
border-color: #000000 !important;
background-color: #ffffff !important;
box-shadow:
0 0 0 3px rgba(0, 0, 0, .13),
0 5px 16px rgba(0, 0, 0, .20) !important;
} .dic-shell .dic-phone-control .dic-phone-input,
.dic-shell .dic-phone-control .dic-phone-input:hover,
.dic-shell .dic-phone-control .dic-phone-input:focus,
.dic-shell .dic-phone-control .dic-phone-input:focus-visible {
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
} .dic-shell .dic-phone-control.is-invalid,
.dic-shell .dic-phone-control.is-invalid:hover,
.dic-shell .dic-phone-control.is-invalid:focus-within {
border-color: var(--dic-error) !important;
box-shadow:
0 0 0 3px rgba(181, 51, 44, .13),
0 4px 12px rgba(181, 51, 44, .12) !important;
}
@media (prefers-reduced-motion: reduce) {
.dic-shell * {
scroll-behavior: auto !important;
transition: none !important;
}
} .dic-shell,
.dic-shell [class^="dic-"],
.dic-shell [class*=" dic-"] {
-webkit-border-radius: 3px !important;
-moz-border-radius: 3px !important;
border-radius: 3px !important;
} .dic-experience.dic-experience--single {
grid-template-columns: minmax(0, var(--dic-right-column-max-width)) !important;
grid-template-rows: auto !important;
max-width: min(100%, var(--dic-right-column-max-width)) !important;
gap: 0 !important;
}
.dic-experience.dic-experience--single > .dic-form {
grid-column: 1 !important;
grid-row: 1 !important;
width: 100% !important;
max-width: var(--dic-right-column-max-width) !important;
justify-self: center !important;
} .dic-form-credits {
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
justify-content: center !important;
gap: 6px !important;
width: 100% !important;
margin: 12px auto 0 !important;
padding: 8px 10px !important;
color: #5c6773 !important;
font-size: 12px !important;
line-height: 1.45 !important;
text-align: center !important;
background: transparent !important;
}
.dic-form-credits strong {
color: #3c4651 !important;
font-weight: 600 !important;
}
.dic-form-credits a {
color: var(--dic-primary) !important;
font-weight: 600 !important;
text-decoration: none !important;
}
.dic-form-credits a:hover,
.dic-form-credits a:focus-visible {
color: var(--dic-primary-dark) !important;
text-decoration: underline !important;
}
.dic-form-credit-separator {
opacity: .55 !important;
}
@media (max-width: 560px) {
.dic-form-credits {
gap: 4px 6px !important;
font-size: 11.5px !important;
}
} .dic-form-credits .dic-form-brand-mark {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
margin-right: 2px !important;
}
.dic-form-credits .dic-brand-logo.dic-form-brand-logo {
display: block !important;
width: 24px !important;
height: 24px !important;
object-fit: contain !important;
}