:root {
  --app-theme-color-rgb: 0,122,255;
  --app-header-min-height: 34px;
  --app-footer-height: 40px;
  --app-main-padding: 32px;
  --app-main-width: 850px;
  --app-font-size: 15px;
  --app-font-family: "Noto Sans", "Times New Roman", "Arial", sans-serif;
  --app-input-font-size: 15px;
  --app-button-bg-color-rgb: 239,239,239;
  --app-link-color: #0000EE;
  --app-link-visited-color: rgb(85, 26, 139);
  --app-link-active-color: rgb(255, 0, 0);
  --app-copyright-color: #8e8e8e;
  --app-input-text-width: 230px;
  --app-notice-bg-color: none;
  --app-svg-info-color: #d6c01b;
  --app-notice-legend-display: block;
  --app-notice-padding: 2px 20px 10px;
  --app-notice-color: grey;
  --app-notice-font-style: italic;
  --app-notice-font-weight: normal;
  --app-button-color: #474646;
  --app-button-color-remove: #c51616;
}

.suggestions-promo > a {
  display: none !important;
}

* {
  box-sizing: border-box;  
}

.loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgb(239, 239, 239);
  transition: opacity 0.75s, visibility 0.75s;
  z-index: 1000;
}

.loader-hidden {
  opacity: 0;
  visibility: hidden;
}

.loader::after {
  content: "";
  width: 50px;
  height: 50px;
  border: 10px solid #ffffff; /* Light grey */
  border-top-color: rgba(var(--app-button-bg-color-rgb)); /* Blue */
  border-radius: 50%;
  animation: loading 0.75s ease infinite;
}

@keyframes loading {
  from {
    transform: rotate(0turn);
  }
  to {
    transform: rotate(1turn);
  }
}

#education-t, #education-type {
  display: none !important;
}

input[type="file"] {
  display: none;
}

.square {
  width: 10px;
	height: 10px;
	background: rgb(0, 0, 0);
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 5px;
  margin-right: 10px;
  margin-bottom: 10px;
}

.square-no-margin {
  width: 10px;
	height: 10px;
	background: rgb(0, 0, 0);
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 5px;
  margin-bottom: 10px;
}


input.width-2,
textarea.width-2,
div.textarea.width-2 {
  --app-input-text-width: 360px;
}

textarea.suggestions-input {
  width: var(--app-input-text-width);
}

.base-flex {
  display: flex;
}

.flex-column {
  flex-direction: column;  
}

.no-data {
  margin: 0 !important;
}
.base-buttons {
  display: flex;
  justify-content: left;
  align-items: center;
}
.base-buttons-2 {
  display: flex;
  justify-content: center;
  align-items: center;
}

li > label:not(.sign):first-child,
li > p,
li > div.center > label:not(.sign) {
  text-align: right;
  padding-right: 25px;
}

li {
  display: flex;
  margin: 10px 0;
  color: #5e5e5e;
}

#username, #password {
  --app-input-text-width: 100% !important;
}

input[type="tel"].code {
  --app-input-text-width: 56px;
  margin-right: 5px;
}

input[type="tel"].number {
  --app-input-text-width: 75px;
}
#address-par {
  display:flex;
  flex-direction: row;
  width:100%;
}
#button-row {
  width: 100%;
}

label:not(.sign) {
  width: 240px;
}

body, html {
  height: 100vh;
  width: 100vw;
  padding: 0;
  margin: 0;  
  overflow-x: hidden;  
}

.center-2 {
  display: flex;
  flex-direction: column;
  align-items: center !important;
  margin-bottom: 10px;
}
a.button {
  text-decoration: none;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  outline: 0;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  flex-direction: row;
}
@media print {
  body {
    height: auto;
  }

  header, footer, button, nav, .control-panel {
    display: none !important;
  }
}

#password-container {
  display: flex;
  margin-left: 32px;
}

.print-mode .page {
  margin: 30px 20px; 
  padding: 0; 
  font-family: 'Arial'; 
  font-size: 13px;
}

.print-mode .page:not(.no-break) {
  break-before: page;
}

.print-mode fieldset:not(.inset):not(.no-style):not(.border-none) {
  margin: 30px 0;
}

.print-mode .print-ignore {
  display: none !important;
}

.print-mode legend {
  padding-top: 10px;
}

body {
  display: flex;
  flex-direction: column;  
  font-family: var(--app-font-family);
  font-size: var(--app-font-size);
  -webkit-text-size-adjust: 100%;
}

header {
	min-height: var(--app-header-min-height);
  background-color: #eff3f6;
  border-bottom: 1px solid #ddd;
}

main {
  width: var(--app-main-width);
}

main {
  flex: auto;
  margin: auto;
  padding: var(--app-main-padding) 0;
}

footer {  
  min-height: var(--app-footer-height);
  background-color: #282A35;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 10px 0;
}

footer .row {
  padding: 4px 0;
}

footer .copyright,
footer .data-policy a,
footer .data-policy a:visited {
  color: var(--app-copyright-color);
}

footer .data-policy,
footer .copyright {
  display: flex;
  justify-content: center;  
  font-size: 0.9em;
}

footer .splitter {
  width: 1px;
  background: var(--app-copyright-color);
  margin: 0 2px;
}

header, footer {
	flex-shrink: 0;	
}

h2 {
  margin-top: 0;
  font-size: 1.5em;
  font-weight: bold;
}

h2 .icon {
  font-size: 120%;
}

.msg,
.text-center {
	text-align: center;
}

.msg.error {
	color: red;
}

.msg.success {
	color: green;
}

.signin {
	text-align: right;
	padding: 8px;
}

.signin a {
	text-decoration: none;
  color: var(--app-link-visited-color);
}

.signin a:visited {
  color: var(--app-link-visited-color);
}

.signin a:active {
  color: var(--app-link-active-color);
}

.signin span {
  color: #000;
}

#login > div {
	display: flex;
  flex-direction: column;
  align-items: center;
}

#login input {
  margin: 6px auto;
}

#login input,
#login .registration-text {
  margin: 5px 0;  
}

#login input[type="password"] {
  display: flex;
  align-items: center;
  justify-content: center;
}

#login button:not(#toggle-password) {
  width: 160px;
  margin-top: 10px;
}
    
/*MENU*/
nav {
  background-color: #282A35;
  padding: 14px 0;
}

nav > .inner {
  margin: 0 auto;
  width: var(--app-main-width);
}

nav > .inner a:not(:first-child) {
  margin: 0 12px;
}

nav > .inner a:first-child {
  margin-right: 12px;
}

nav a {
  display: inline-block;
  color: #9feaf9;
  text-align: center;
  text-decoration: none;
  border-bottom: 2px solid #0000;
  line-height: 26px;
  transition: color 200ms cubic-bezier(0.08,0.52,0.52,1);  
}

nav a:hover {
  color: #028399;
}

nav .active {
  border-bottom-color: #028399;
  pointer-events: none;
}

/*MENU END*/

.disabled {
  opacity: .5;
  pointer-events: none;
}

/*COLORS*/
.color-red {
  --app-theme-color-rgb: 255,59,48;
}

.color-button-face {
  --app-theme-color-rgb: 239,239,239;
}
/*COLORS END*/

/*BUTTONS*/
button:not([id="toggle-password"]),
a.button {
  background-color: rgba(var(--app-button-bg-color-rgb), .75);
  color: var(--app-button-color);
  padding: 10px;  
  font-family: var(--app-font-family);
  border-radius: 5px;
  border: 1px solid #ced4da;
}

a.button {
  text-decoration: none;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  outline: 0;
  box-sizing: border-box;
  display: flex;
  align-items: center;  
}

a.button.fill,
button.fill {
  --app-button-bg-color-rgb: var(--app-theme-color-rgb);
}

a.button:not(:active):hover,
button:not(:active):hover {
  background-color: rgba(var(--app-button-bg-color-rgb), 1);
}

a[disabled],
button[disabled] {
  opacity: 0.55 !important;
  pointer-events: none !important;
}
/*BUTTONS END*/
nav,
button,
a.button,
.signin,
#login .registration > a,
.notice > p,
p.info {
  font-size: .9em;
}

fieldset {
  position: relative;
  border: 1px solid #ced4da;
  border-radius: 4px;
  padding: 10px 20px;
  margin: 10px 0;
}

legend {
  font-size: 1.1em;
}

h2 > svg {
  width: 24px;
  height: 24px;
  margin-right: 5px;
}

ul {
  margin: 0;
  list-style-type: none;
  padding: 0;
}

button,
a.button,
label,
input[type="radio"],
input[type="checkbox"] {
  cursor: pointer;
}

button,
a.button,
label {
  user-select: none;
}

input:not([type="radio"]):not([type="checkbox"]):not(.dx-texteditor-input),
select,
textarea,
div.textarea {
  border: 1px solid grey;
  border-radius: 4px;
  font-family: var(--app-font-family);
  font-size: var(--app-input-font-size);
  font-weight: normal;
  padding: 4px;
  width: var(--app-input-text-width);
}

input[type="email"] {
  --app-input-text-width: 280px;
}

div.textarea {
  min-height: 30px;
  white-space: pre-wrap;
  line-height: 20px;
  color: #000;
  margin-right: 10px;
}

textarea {
  resize: none;
  white-space: pre-wrap;
  overflow: hidden;
  line-height: 20px;
}

input:not(.dx-texteditor-input),
textarea {
  height: 30px;
  color: #000;
  margin-right: 10px;
}

/* custom radio style */
:root {
  --app-radio-color: #999;
  --app-radio-checked-color: #307afc;
  --app-radio-bg-color: #e8e8e8;
}

main.readonly input[type="radio"],
main.readonly input[type="checkbox"] {
  accent-color: #767676;
  --app-radio-checked-color: #767676;
}


input[type="radio"],
input[type="checkbox"] {
  height: 1rem;
  width: 1rem;
  margin: 0 15px 0 0;
}

input[type="radio"]
/*,input[type="checkbox"]*/
{
  /* hiding browser el */
  appearance: none;
  /* Safari support */
  -webkit-appearance: none;
  border: 0.2rem solid #fff;
}

input[type="radio"] {
  border-radius: 50%;
}

/* keyboard navigation focus appearance */
input[type="radio"]:focus-visible
/*,input[type="checkbox"]:focus-visible*/
{
  outline-offset: 0;
}

input[type="radio"]
/*,input[type="checkbox"]*/
{
  box-shadow: 0 0 0 1px var(--app-radio-color);
}

input[type="radio"]:hover
/*,input[type="checkbox"]:hover*/
{
  border-width: 0;
}

input[type="radio"]:checked
/*,input[type="checkbox"]:checked*/
{
  box-shadow: 0 0 0 1px var(--app-radio-checked-color);
  background-color: var(--app-radio-checked-color);
  border-width: 0.2rem;
}

input[type="radio"]:invalid {
  --app-radio-color: red;
}


input[type="date"] {
  --app-input-text-width: 150px;
  content: attr(data-date);
  background-color: #fff;
}

input:not([type="radio"]):invalid {
  border-color: red;
}

input.width-1 {
  --app-input-text-width: 100px;
}

.notice p,
p.info {
  font-style: var(--app-notice-font-style);
  font-weight: var(--app-notice-font-weight);
  margin: 0;
}

fieldset.notice {
  padding: var(--app-notice-padding);
  background-color: var(--app-notice-bg-color);  
}

fieldset.notice > legend {
  display: var(--app-notice-legend-display);
}

legend.with-checkbox {
  display: flex;
  align-items: center;
}

legend.with-checkbox > input {
  margin: 0 1px;
}

legend.with-checkbox > label {
 font-size: var(--app-font-size);
}


.inset legend {
  color: #303030;  
}

p.question {
  font-style: italic;
}

label.question {
  font-style: italic;
  color: #000;
  margin-right: 5px;
}

p.info {
  background-color: var(--app-notice-bg-color);
  padding: 10px;
}

.notice > p,
p.info {
  color: var(--app-notice-color);  
}

@media (max-width: 500px) and (orientation: portrait), (max-height: 500px) and (orientation: landscape){

}