/* Roberto font */
@import url('https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i&display=swap&subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext,vietnamese');

:root {
	font-family: 'Roboto', sans-serif;

	/* ripple */
	--ripple-color: rgba(0, 0, 0, 0.3);

	/* buttons */
	--buttons: #303ba6;
	--primary-buttons-text-color: white;
	--buttons-hover-color: #303ca649;
	--primary-buttons-hover-color: var(--buttons);
	--buttons-ripple-color: #303ca69d;
	--primary-buttons-ripple-color: rgba(255, 255, 255, 0.5);

	/* inputs */
	--inputs: var(--buttons);
	--inputs-background: #ecebeb;
	--inputs-background-hover: #ebebeb;
	--inputs-background-focus: #e7e4e4;
	--inputs-placeholder: #696969;
	--inputs-outline: grey;
	--inputs-outline-hover: var(--inputs-outline);

	/* switch */
	--switch-on-color: green;
	--switch-off-color: #ddd;
	--switch-on-color-track: rgba(16, 122, 4, 0.5);
	--switch-off-color-track: #aaa;
	--switch-active-color: rgba(187, 187, 187, 0.253);
	--switch-on-active-color: rgba(16, 122, 4, 0.2);
	--switch-hover-color: rgba(0, 0, 0, 0.07);
	--switch-hover-on-color: rgba(16, 112, 4, 0.07);

	/* IconButtons */
	--icon-buttons: var(--buttons);
	--icon-buttons-hover: rgba(0, 0, 0, 0.07);
	--icon-buttons-active: rgba(0, 0, 0, 0.1);
	--icon-buttons-ripple: rgba(0, 0, 0, 0.2);

	/* Card */
	--card-background-color: rgba(0, 0, 0, 0.05);
	--card-background-color-hover: rgba(0, 0, 0, 0);
	--card-outline-color: #777;
	--card-outline-color-hover: #999;

	/* Checkbox */
	--checkbox-color: rgb(48, 59, 166);
	--checkbox-color-off: #555;
	--checkbox-hover-color: rgba(48, 59, 166, 0.1);
	--checkbox-hover-color-off: rgba(85, 85, 85, 0.1);
	--checkbox-focus-color: rgba(48, 59, 166, 0.2);
	--checkbox-focus-color-off: rgba(85, 85, 85, 0.2);
	--checkbox-ripple-color: rgba(48, 59, 166, 0.3);
	--checkbox-ripple-color-off: rgba(85, 85, 85, 0.3);

	/* error */
	--all-errors: #b00020;
}

/* icons */
@font-face {
	font-family: 'Material Icons';
	font-style: normal;
	font-weight: 400;
	src: url(https://fonts.gstatic.com/s/materialicons/v47/flUhRq6tzZclQEJ-Vdg-IuiaDsNcIhQ8tQ.woff2)
		format('woff2');
}

.material-icons {
	font-family: 'Material Icons';
	font-weight: normal;
	font-style: normal;
	font-size: 24px;
	line-height: 1;
	letter-spacing: normal;
	text-transform: none;
	display: inline-block;
	white-space: nowrap;
	word-wrap: normal;
	direction: ltr;
	-webkit-font-feature-settings: 'liga';
	font-feature-settings: 'liga';
	-webkit-font-smoothing: antialiased;
}