* {
  font-family: "Roboto Condensed", "Roboto", sans-serif;
}

body {
  background: #fff;
  color: #222;
  margin: 0;
}

a {
  color: #dd292d;
}

#header {
  color: #fff;
  margin-bottom: 40px;
  background: #c90307;
  background: linear-gradient(to bottom, #c90307 0%, #de282c 99%);
}

#header .flag-icon {
  border: solid 1px #fff;
  width: 40px;
  height: 30px;
  margin-left: 10px;
  position: relative;
  top: -6px;
}

#header h4 {
  color: #fff;
  margin-top: 38px;
}

#header .logo-symbol {
  margin-top: 20px;
  height: 60px;
  margin-right: 20px;
}

#header .logo-wordmark {
  margin-top: 20px;
  height: 40px;
}

.container .icon {
  color: #dd292d;
}

.container .btn .icon,
.container .panelnavigation .icon {
  color: #fff;
}

#shortcuts .icon {
  font-size: 60px;
}

#shortcuts .box {
  text-decoration: none;
  transition: all 0.2s ease-in-out;
  border: solid 4px #eee;
  min-height: 220px;
}

#shortcuts .box.boxdiv:hover {
  border: solid 4px #eee;
  background: #eee;
  cursor: default;
}

#shortcuts .box.autoheightleft {
  height: auto;
  margin-bottom: 30px;
  padding: 10px 20px;
  text-align: left;
  min-height: auto;
}

.box.autoheight {
  margin-bottom: 30px;
}

.box.boxtitle {
  font-weight: 700;
  font-size: 17px;
}

.box.boxtitle i {
  font-size: 18px;
}

#shortcuts .box.medium {
  min-height: 120px;
}

#shortcuts .box.medium .icon {
  font-size: 20px;
  margin-right: 10px;
}

#shortcuts .box p {
  color: #000;
}

#shortcuts .box:hover {
  text-decoration: none;
  background: #fff;
  border: solid 4px #dd292d;
}

.box {
  padding: 20px;
  background: #eee;
  display: block;
}

.row.bloc {
  margin-bottom: 20px;
}

.boxlight {
  background: #fff;
}

#panelFooter {
  display: block;
  padding-bottom: 40px;
}

.panelback {
  color: #fff;
  font-size: 19px;
}

.panelnavigation {
  background: #dd292d;
  text-align: center;
  color: #fff;
  padding: 15px;
  transition: all 0.2s ease-in-out;
  border: solid 3px #dd292d;
  display: inline-block;
}

.panelnavigation:hover,
.panelnavigation:focus {
  border: solid 3px #dd292d;
  background: #fff;
  color: #dd292d;
  text-decoration: none;
}

.container .panelnavigation:hover .icon {
  color: #dd292d;
}

.panelnavigationmain {
  padding: 10px;
}

.boxhelp {
  background: #fffad8;
  border: solid 4px #fffad8 !important;
}

.panelreturn {
  margin-bottom: 100px;
}

#panelHelp {
  transition: all 0.2s ease-in-out;
  width: 0;
  height: 100%;
  background: #fffad8;
  top: 0;
  bottom: 0;
  position: fixed;
  right: 0;
  overflow: hidden;
  z-index: 3000;
}

#panelHelp.active {
  width: 280px;
  border-left: solid 1px #aaa;
}

.help_content_static {
  padding: 20px;
  min-width: 240px;
}

#panelWrap.help {
  width: calc(100% - 280px);
}

#panelLoader {
  display: none;
  height: 100%;
  position: fixed;
  width: 100%;
  z-index: 200000;
  top: 0;
  left: 0;
  text-align: center;
  padding-top: 200px;
  background: linear-gradient(to bottom, #c90307 0%, #de282c 99%);
}

#panelLoader img {
  width: 80px;
  height: 80px;
}

#shortcuts .icon.ion-auto {
  font-size: 30px;
}

#shortcuts .icon.ion-small,
.ion-small {
  font-size: 14px;
}

.form-control {
  padding: 22px 16px !important;
  font-size: 20px !important;
  height: auto !important;
}

.panelnextbutton {
  margin: 30px 0;
}

select.form-control {
  height: 61px !important;
}

.panel {
  display: none;
}

.panel.active {
  display: block;
}

.steps {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin: 0 0 24px;
  flex-wrap: wrap;
}

.step {
  min-width: 44px;
  height: 36px;
  border: 3px solid #eee;
  background: #eee;
  color: #ccc;
  line-height: 30px;
  text-align: center;
  font-weight: 700;
}

.step.done {
  color: #3e9a00;
  border-color: #3e9a00;
  background: #fff;
}

.step.current {
  color: #dd292d;
  border-color: #dd292d;
  background: #fff;
}

.notice {
  background: #fff;
  border: 4px solid #eee;
  padding: 20px;
  text-align: left;
}

.notice strong {
  color: #dd292d;
}

@media (max-width: 767px) {
  #header h4 {
    margin-top: 10px;
    margin-bottom: 20px;
    text-align: left;
  }

  #header .logo-symbol {
    height: 48px;
  }

  #header .logo-wordmark {
    height: 28px;
  }

  #shortcuts .box {
    min-height: 0;
    margin-bottom: 16px;
  }

  #panelHelp.active,
  #panelWrap.help {
    width: 100%;
  }

  #panelHelp.active {
    width: 100%;
  }
}