:root {
    --background: #F1F3F9;
    --neutral-0: #FFFFFF;
    --neutral-300: #E1E6EF;
    --neutral-400: #A8A8A8;
    --neutral-800: #23272F;
    --neutral-black: #0A0D14;
    --gray-200: #DFE5EC;
    --text-secondary: #3F444D;
    --primary-700: #FF6700;
    --text-icon-primary-black: #1D2433;
    --text-icon-secondary-black: #1D2433CC;
    
    --system-bkg: rgba(0, 0, 0, 0.60);
    --reconnect-text: #6D8295;
    --error: #EA3323;
    --error-bkg: #FFA78F;
    --error-text: #A82800;
    --news-date-text: #ADB5C5;
    --help-bkg: rgba(51, 51, 51, 0.90);
	
    --popup-header-padding-x: 32px;
    --popup-header-padding-y: 24px;
    --popup-body-padding-x: 36px;
    --popup-body-padding-y: 24px;
    --popup-body-padding-y-no-footer: 48px;    
    --popup-footer-padding-x: 32px;
    --popup-footer-padding-y: 24px;

    --dropdown-body-padding-x: 18px;
    --dropdown-body-padding-y: 12px;
    --dropdown-footer-padding-x: 16px;
    --dropdown-footer-padding-y: 12px;    
}

@font-face {
    font-family: Roboto Flex;
    src: url("../font/RobotoFlex.ttf") format('truetype');
}

@font-face {
    font-family: Inter;
    src: url("../font/Inter.ttf") format('truetype');
}

@font-face {
    font-family: Lato;
    src: url("../font/Lato-Regular.ttf") format('truetype');
}

html, body {
    font-family: Roboto Flex;
}

html, body {
    height: 100%;
    overflow: hidden;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}