.page-login,
.sidebar,
.page-footer,
.restyled-modal,
.filters-container,
.popover,
#kbPage,
#allVntsSearchPage,
[name="boot_loader"],
[name="vb-tabs"]{
font-family:'Roboto';
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
font-weight:var(--font-weight-regular);
color:var(--primary-blue);
}
html,
body *{
scrollbar-width:thin;
}
:root{
--primary-blue:#344D66;
--primary-green:#5ABEBA;
--primary-white:#ffffff;
--secondary-red:#EE8373;
--secondary-yellow:#FFC20E;
--blue-90:#485F75;
--blue-80:#5d7185;
--blue-70:#718294;
--blue-60:#8594A3;
--blue-50:#99a6b2;
--blue-40:#aeb8c2;
--blue-30:#c2cad1;
--blue-20:#d6dbe0;
--blue-10:#ebedf0;
--blue-5:#f5f6f7;
--green-140:#367270;
--green-130:#3F8582;
--green-120:#489895;
--green-110:#51ABA7;
--green-90:#6BC5C1;
--green-80:#7BCBC8;
--green-70:#8BD2CF;
--green-60:#9CD8D6;
--green-50:#ACDFDD;
--green-40:#BDE5E3;
--green-30:#CDEBEA;
--green-20:#DEF2F1;
--green-10:#EEF8F8;
--green-5:#F7FCFC;
--red-120:#BE695C;
--red-110:#D67668;
--red-90:#F08F81;
--red-80:#F19C8F;
--red-70:#F3A89D;
--red-60:#F5B5AB;
--red-50:#F7C1B9;
--red-40:#F8CDC7;
--red-30:#FADAD5;
--red-20:#FCE6E3;
--red-10:#FDF3F1;
--red-5:#FEF9F8;
--font-weight-regular:400;
--font-weight-medium:500;
--font-weight-bold:700;
--app-header-height:64px;
--app-footer-height:32px;
--app-vb-navigation-height:0px;
}
main.vb-shown{
--app-vb-navigation-height:56px;
}
.primary-blue-text{
color:var(--primary-blue);
}
.primary-green-text,
.primary-green-hover-text:hover{
color:var(--primary-green);
}
.secondary-red-text{
color:var(--secondary-red);
}
.secondary-yellow-text{
color:var(--secondary-yellow);
}
.blue-60-text{
color:var(--blue-60);
}
.two-line-ellipsed-text{
white-space:nowrap;
text-overflow:ellipsis;
overflow:hidden;
@supports (-webkit-line-clamp:2){
overflow:hidden;
text-overflow:ellipsis;
white-space:initial;
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
padding:0 !important;
}
}
.three-line-ellipsed-text{
white-space:nowrap;
text-overflow:ellipsis;
overflow:hidden;
@supports (-webkit-line-clamp:3){
overflow:hidden;
text-overflow:ellipsis;
white-space:initial;
display:-webkit-box;
-webkit-line-clamp:3;
-webkit-box-orient:vertical;
padding:0 !important;
}
}
.three-line-ellipsed-text.paragraph-m,
.two-line-ellipsed-text.paragraph-m{
line-height:18px;
}
.compact-multiline-text{
line-height:18px !important;
}
.button-primary{
background-color:var(--primary-green);
color:white;
border:1px solid transparent;
text-align:center;
font-weight:var(--font-weight-bold);
line-height:110%;
letter-spacing:0.05em;
text-transform:uppercase;
}
.button-primary:hover{
background-color:#3DADA8;
box-shadow:0px 0px 8px 0px #344D6614;
}
.button-primary:focus{
background-color:#3DADA8;
border:1px solid var(--primary-blue);
box-shadow:0px 0px 16px 0px #344D6629;
}
.button-primary:active{
background-color:#3B9B97;
border:1px solid transparent;
box-shadow:0px 0px 8px 0px #344D6614;
}
.button-primary:disabled{
background-color:var(--blue-10);
color:var(--blue-60);
border:1px solid transparent;
box-shadow:none;
}
.button-primary-red{
background-color:var(--secondary-red);
color:white;
border:1px solid transparent;
text-align:center;
font-weight:var(--font-weight-bold);
line-height:110%;
letter-spacing:0.05em;
text-transform:uppercase;
}
.button-primary-red:hover{
background-color:var(--red-110);
box-shadow:0px 0px 8px 0px #344D6614;
}
.button-primary-red:focus{
background-color:var(--red-110);
border:1px solid var(--primary-blue);
box-shadow:0px 0px 16px 0px #344D6629;
}
.button-primary-red:active{
background-color:var(--red-120);
border:1px solid transparent;
box-shadow:0px 0px 8px 0px #344D6614;
}
.button-primary-red:disabled{
background-color:var(--blue-10);
color:var(--blue-60);
border:1px solid transparent;
box-shadow:none;
}
.button-secondary{
background-color:transparent;
color:var(--primary-blue);
border:1px solid var(--primary-green);
text-align:center;
font-weight:var(--font-weight-bold);
line-height:110%;
letter-spacing:0.05em;
text-transform:uppercase;
}
.button-secondary:hover{
background-color:#F2FAF9;
box-shadow:0px 0px 8px 0px #344D6614;
}
.button-secondary:focus{
background-color:#E5F5F4;
border:1px solid var(--primary-blue);
box-shadow:0px 0px 16px 0px #344D6629;
}
.button-secondary:active{
background-color:#E5F5F4;
border:1px solid var(--primary-green);
box-shadow:0px 0px 8px 0px #344D6614;
}
.button-secondary:disabled{
background-color:white;
border:1px solid var(--blue-20);
color:var(--blue-40);
box-shadow:none;
}
.button-secondary-red{
background-color:white;
color:var(--primary-blue);
border:1px solid var(--secondary-red);
text-align:center;
font-weight:var(--font-weight-bold);
line-height:110%;
letter-spacing:0.05em;
text-transform:uppercase;
}
.button-secondary-red:hover{
background-color:var(--red-10);
box-shadow:0px 0px 8px 0px #66343414;
}
.button-secondary-red:focus{
background-color:var(--red-10);
border:1px solid var(--secondary-red);
box-shadow:0px 0px 16px 0px #66343414;
}
.button-secondary-red:active{
background-color:var(--red-20);
border:1px solid var(--secondary-red);
box-shadow:0px 0px 8px 0px #66343414;
}
.button-secondary-red:disabled{
background-color:white;
border:1px solid var(--blue-20);
color:var(--blue-40);
box-shadow:none;
}
.button-secondary-blue{
background-color:transparent;
color:var(--primary-blue);
border:1px solid var(--blue-40);
text-align:center;
font-weight:var(--font-weight-bold);
line-height:110%;
letter-spacing:0.05em;
text-transform:uppercase;
}
.button-secondary-blue:hover{
background-color:var(--blue-5);
box-shadow:0px 0px 8px 0px #66343414;
}
.button-secondary-blue:focus{
background-color:var(--blue-10);
border:1px solid var(--blue-80);
box-shadow:0px 0px 16px 0px #66343414;
}
.button-secondary-blue:active{
background-color:var(--blue-10);
border:1px solid var(--primary-blue);
box-shadow:0px 0px 8px 0px #66343414;
}
.button-secondary-blue:disabled{
background-color:transparent;
border:1px solid var(--blue-20);
color:var(--blue-40);
box-shadow:none;
}
.button-large{
height:48px;
min-width:200px;
font-size:14px;
padding:0 12px;
border-radius:8px;
}
.button-small{
height:32px;
min-width:90px;
font-size:12px;
padding:10px 16px;
border-radius:4px;
}
.close-button{
height:48px;
width:48px;
padding:0px;
color:#344D66;
font-family:Arial;
font-weight:100;
font-size:24px;
border:2px solid var(--blue-10);
border-radius:26px;
text-decoration:none;
text-align:center;
cursor:pointer;
background-color:white;
}
.close-button:hover{
background-color:var(--blue-10);
}
.close-button:active{
background-color:var(--blue-20);
}
.close-button:focus{
background-color:var(--blue-10);
border:2px solid var(--blue-40);
box-shadow:0px 0px 16px 0px #344D6629;
}
.close-button:disabled{
background-color:white;
opacity:0.6;
}
.popover-small-close-button{
color:#344D66;
font-family:Arial;
font-weight:100;
font-size:24px;
border:none;
width:24px;
padding:0;
height:24px;
display:flex;
align-items:center;
border-radius:50%;
justify-content:center;
background:none;
}
.no-style-button{
background:none;
border:none;
padding:0;
}
.input-control{
margin:0 0 32px 0;
position:relative;
}
.input-control label{
color:var(--primary-blue);
font-size:10px;
font-weight:var(--font-weight-bold);
line-height:11px;
text-align:left;
text-transform:uppercase;
margin-bottom:8px;
}
.input-control label>img{
height:16px;
position:absolute;
top:2px;
margin-left:4px;
}
.input-control input,
.input-control textarea{
padding:17px 16px 17px 16px;
border-radius:4px;
border:1px solid var(--blue-10);
font-size:14px;
font-weight:var(--font-weight-medium);
background-color:white;
display:block;
width:100%;
}
.input-control input{
height:48px;
}
.input-control input::placeholder,
.input-control textarea::placeholder{
opacity:1;
color:var(--blue-60);
font-weight:var(--font-weight-regular);
}
.input-control input:hover,
.input-control textarea:hover{
border:1px solid var(--blue-20);
box-shadow:0px 4px 16px 0px #344D6614;
}
.input-control input:focus,
.input-control textarea:focus{
border:1px solid var(--primary-green);
box-shadow:0px 4px 16px 0px #344D6614;
}
.input-control input.filled,
.input-control textarea.filled{
border:1px solid var(--primary-green);
}
.input-control input.has-error,
.input-control textarea.has-error{
border:1px solid var(--secondary-red);
}
.input-control input:disabled,
.input-control textarea:disabled{
border:1px solid var(--blue-10);
color:var(--blue-40);
box-shadow:none;
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active{
-webkit-background-clip:text;
-webkit-text-fill-color:var(--primary-blue);
}
.input-control .error-msg{
color:var(--secondary-red);
font-size:12px;
height:16px;
line-height:16px;
font-weight:var(--font-weight-regular);
margin-top:4px;
position:absolute;
}
.input-control .info-msg{
color:var(--primary-blue);
font-size:12px;
height:16px;
line-height:16px;
font-weight:var(--font-weight-regular);
margin-top:4px;
position:absolute;
}
.input-control .icon-suffix{
position:absolute;
right:16px;
bottom:12px;
}
.select-control{
position:relative;
}
.select-control label{
display:block;
color:var(--primary-blue);
font-size:10px;
font-weight:var(--font-weight-bold);
line-height:11px;
text-align:left;
text-transform:uppercase;
margin-bottom:8px;
}
.select-control select{
height:48px;
padding:14px 24px 14px 16px;
font-size:14px;
font-weight:var(--font-weight-medium);
border-radius:4px;
border:1px solid var(--blue-10);
background:white;
-webkit-appearance:none;
-moz-appearance:none;
background-image:url("../../images/icons/blue-primary/arrow-down.svg");
background-repeat:no-repeat;
background-position-x:calc(100% - 8px);
background-position-y:50%;
min-width:200px;
}
.select-control.small-select select{
height:32px;
padding:7px 32px 7px 8px;
font-size:12px;
background-position-x:calc(100% - 8px);
background-position-y:50%;
min-width:150px;
background-size:18px 18px;
}
.select-control select > option{
color:var(--primary-blue);
}
.select-control .icon-suffix{
position:absolute;
right:37px;
bottom:16px;
}
.search-control{
position:relative;
}
.search-control .icon-suffix{
position:absolute;
right:16px;
bottom:12px;
}
.search-control input{
padding:17px 16px 17px 16px;
border-radius:4px;
border:1px solid var(--blue-10);
font-size:14px;
font-weight:var(--font-weight-medium);
background-color:white;
display:block;
width:100%;
}
.search-control input{
height:48px;
}
.search-control input::placeholder{
opacity:1;
color:var(--blue-60);
font-weight:var(--font-weight-regular);
}
.search-control input:hover{
border:1px solid var(--blue-20);
box-shadow:0px 4px 16px 0px #344D6614;
}
.search-control input:focus{
border:1px solid var(--blue-10);
box-shadow:0px 4px 16px 0px #344D6614;
}
.search-result-dropdown{
border-top:none !important;
z-index:20;
position:absolute;
width:calc(100% - 48px);
background-color:#FFF;
border:1px solid var(--blue-10);
border-radius:0 0 4px 4px;
box-shadow:0px 4px 16px 0px rgba(52,77,102,0.08);
padding:8px;
}
.search-result-row{
display:flex;
justify-content:space-between;
align-items:center;
height:30px;
padding:6px 8px;
border-radius:4px;
}
.search-result-row:hover{
background-color:var(--blue-5);
}
.checkbox-control,
.radio-control{
display:block;
margin-bottom:0;
height:24px;
text-align:start;
}
.checkbox-control > input,
.radio-control > input{
position:absolute;
z-index:-1;
opacity:0;
}
.checkbox-control > span,
.radio-control > span{
font-size:14px;
display:inline-flex;
align-items:center;
user-select:none;
cursor:pointer;
}
.checkbox-control > span::before,
.radio-control > span::before{
content:'';
display:inline-block;
width:24px;
height:24px;
flex-shrink:0;
flex-grow:0;
border:none;
margin-right:8px;
background-repeat:no-repeat;
background-position:center center;
background-size:100% 100%;
}
.checkbox-control > span::before{
background-image:url("../../images/icons/blue-primary/checkbox.svg");
}
.checkbox-control .selectall + span::before{
background-color:var(--blue-10);
border-radius:4px;
}
.radio-control > span::before{
background-image:url("../../images/icons/blue-primary/radio.svg");
}
.checkbox-control > span:hover,
.radio-control > span:hover{
color:var(--primary-green);
}
.checkbox-control > input:checked + span::before{
background-image:url("../../images/icons/blue-primary/checkbox-checked.svg");
}
.radio-control > input:checked + span::before{
background-image:url("../../images/icons/blue-primary/radio-filled.svg");
}
.checkbox-control > input:disabled + span::before,
.radio-control > input:disabled + span::before{
opacity:0.6;
}
.checkbox-control > input:disabled + span,
.radio-control > input:disabled + span{
cursor:default;
}
.checkbox-control > input:disabled + span:hover,
.radio-control > input:disabled + span:hover{
color:unset;
}
.checkbox-control.disabled,
.radio-control.disabled{
opacity:0.6;
}
.checkbox-control .suffix-icon,
.radio-control .suffix-icon{
height:18px;
width:18px;
margin-left:8px;
}
.checkbox-control + .checkbox-control,
.radio-control + .radio-control{
margin-top:16px;
}
.page-login a,
.page-footer a,
.restyled-modal a,
.filtersPanel a{
font-weight:var(--font-weight-medium);
text-decoration-line:underline;
text-decoration-style:solid;
color:var(--primary-blue);
}
a.green-link,
.green-link{
color:var(--primary-green);
font-family:Roboto;
font-weight:var(--font-weight-medium);
text-decoration-line:underline;
text-decoration-style:solid;
cursor:pointer;
}
a.green-link:hover,
.green-link:hover{
color:var(--green-110);
}
a.blue-link{
font-weight:var(--font-weight-medium);
text-decoration-line:underline;
text-decoration-style:solid;
color:var(--primary-blue);
}
a.external-link-icon{
background-image:url("../../images/icons/blue-primary/open-in-new-tab.svg");
background-color:transparent;
width:18px;
height:18px;
border-radius:50%;
background-size:18px 18px;
background-repeat:no-repeat;
display:block;
}
a.external-link-icon.inline{
display:inline-block;
margin-bottom:-4px;
}
a.external-link-icon:hover{
background-image:url("../../images/icons/green/open-in-new-tab.svg");
}
a.animated-underline-link,
.animated-underline-text{
color:var(--primary-blue);
font-size:12px;
font-weight:var(--font-weight-bold);
line-height:12px;
letter-spacing:0.8px;
text-transform:uppercase;
display:inline-block;
position:relative;
text-decoration:none;
padding-bottom:4px;
}
a.animated-underline-link::after,
a.animated-underline-link::before,
.animated-underline-text::after,
.animated-underline-text::before{
content:'';
position:absolute;
width:100%;
height:2px;
bottom:0;
left:0;
background-color:var(--primary-green);
}
a.animated-underline-link:hover::before,
.animated-underline-text:hover::before{
transform:scaleX(0);
}
a.animated-underline-link::after,
.animated-underline-text::after{
transform:scaleX(0);
transform-origin:bottom right;
transition:transform 0.45s ease-in;
}
a.animated-underline-link:hover::after,
.animated-underline-text:hover::after{
transform:scaleX(1);
transform-origin:bottom left;
}
a.animated-underline-link:disabled,
.animated-underline-text:disabled{
opacity:0.6;
}
a.animated-underline-link:disabled::after,
a.animated-underline-link:disabled::before,
.animated-underline-text:disabled::after,
.animated-underline-text:disabled::before{
transform:scaleX(1);
}
h1,
.title-l{
font-size:40px;
font-weight:var(--font-weight-medium);
color:var(--primary-blue);
}
h2,
.title-m{
font-size:30px;
font-weight:var(--font-weight-medium);
color:var(--primary-blue);
}
h3,
.title-s{
font-size:20px;
font-weight:var(--font-weight-medium);
color:var(--primary-blue);
}
.paragraph-xl{
font-size:18px;
line-height:140%;
}
.paragraph-l{
font-size:16px;
line-height:140%;
}
.paragraph-m{
font-size:14px;
line-height:20px;
}
.paragraph-s{
font-size:12px;
line-height:100%;
}
.label-m{
font-size:14px;
font-weight:var(--font-weight-bold);
line-height:110%;
letter-spacing:0.05em;
text-transform:uppercase;
}
.label-s{
font-size:12px;
font-weight:var(--font-weight-bold);
line-height:110%;
letter-spacing:0.05em;
text-transform:uppercase;
}
.overline{
font-size:10px;
font-weight:var(--font-weight-bold);
line-height:110%;
text-transform:uppercase;
}
.font-wgt-regular{
font-weight:var(--font-weight-regular);
}
.font-wgt-medium{
font-weight:var(--font-weight-medium);
}
.font-wgt-bold{
font-weight:var(--font-weight-bold);
}
.restyled-modal.modal{
background-color:hsl(210deg 32% 30% / 60%);
}
.restyled-modal .modal-content{
border-radius:8px;
overflow:hidden;
}
.restyled-modal .modal-header{
border-bottom:solid 1px #EBEDF0 !important;
padding-top:24px;
padding-bottom:24px;
}
.restyled-modal .modal-title{
font-size:20px;
font-weight:var(--font-weight-medium);
line-height:24px;
margin-right:52px;
}
.restyled-modal .modal-title img{
margin-right:8px;
}
.restyled-modal .modal-content .panel-body{
padding:0 !important;
padding-top:20px !important;
}
.restyled-modal .modal-content .panel-body a{
font-size:14px;
}
.restyled-modal.modal .close-button{
position:absolute;
right:20px;
top:16px;
}
.toggle{
position:relative;
display:inline-block;
margin-bottom:0;
width:40px;
height:20px;
transform:unset;
}
.toggle input{
opacity:0;
width:0;
height:0;
}
.toggle-handle.round{
height:20px;
border-radius:34px;
}
.toggle-handle{
position:absolute;
cursor:pointer;
top:0;
left:0;
right:0;
bottom:0;
background-color:var(--blue-50);
opacity:1;
transition:.2s;
}
.toggle-handle:before{
position:absolute;
content:"";
height:16px;
width:16px;
left:2px;
bottom:2px;
background-color:white;
-webkit-transition:.4s;
transition:.4s;
}
.toggle-handle.round:before{
border-radius:50%;
}
.toggle input:checked + .toggle-handle{
background-color:var(--primary-green);
opacity:1;
}
.toggle input:checked + .toggle-handle:before{
-webkit-transform:translateX(19px);
-moz-transform:translateX(19px);
-ms-transform:translateX(19px);
transform:translateX(19px);
}
.toggle.toggle-small{
width:32px;
height:18px;
}
.toggle-small .toggle-handle:before{
height:14px;
width:14px;
left:3px;
bottom:3px;
}
.toggle.toggle-small input:checked + .toggle-handle:before{
-webkit-transform:translateX(11px);
-moz-transform:translateX(11px);
-ms-transform:translateX(11px);
transform:translateX(11px);
}
.rotating-hover-icon:hover{
transform:rotate(100deg) scale(120%);
}
.rotating-hover-icon{
transition-property:transform;
transition-duration:0.8s;
}
.expanded > [name="dropdown-arrow"],
.expanded [name="expand-collapse"]{
transform:rotate(180deg);
}
.progress-bar-rounded{
border-radius:10px;
}
.progress-bar-primary-green{
background-color:var(--primary-green);
}
.progress-bar-primary-blue{
background-color:var(--primary-blue);
}
.progress-bar-secondary-red{
background-color:var(--secondary-red);
}
.progress-bar-secondary-yellow{
background-color:var(--secondary-yellow);
}
.card-simple{
padding:16px;
border-radius:8px;
border:1px solid var(--blue-10);
background:white;
box-shadow:0px 4px 16px 0px rgba(52,77,102,0.08);
}
.no-elements-shown{
display:flex;
height:24px;
padding:4px 8px;
justify-content:center;
align-items:center;
gap:8px;
flex-shrink:0;
border-radius:4px;
background:var(--blue-10);
color:var(--primary-blue);
font-size:12px;
font-weight:700;
line-height:100%;
letter-spacing:0.6px;
text-transform:uppercase;
width:max-content;
}