* {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
   font-family: 'Poppins', sans-serif;
   outline: none;
}

a {
   text-decoration: none;
   transition: color 0.1s ease-in-out;
}

a.a {
   color: #0e76b0;
   text-decoration: none;
   border-bottom: 1px solid #0E76B0;
}

body {
   font-size: 0.93333rem;
   background-color: #EAF3F8;
   /*background: rgba(234, 243, 248, 0) url("../images/bg_tsaverkiezingen.png") no-repeat fixed center center / cover;*/
}

hr {
   height: 1px;
   background-color: #eae9ee;
   margin: 25px 0;
   border: none;
   display: block;
}

p.p {
   margin-bottom: 25px;
}

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

.right-text {
   text-align: right;
}

h1 span, h2 span, h3 span {
   font-size: .6em;
}

h1.row, h2.row, h3.row {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
}

h2 {
   margin-bottom: 15px;

   display: flex;
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
   flex-wrap: wrap;
}

h2 small {
   font-size: .8rem;
}

#forgot-text {
   display: flex;
   margin-bottom: 25px;
   justify-content: space-around;
   position: relative;
   bottom: 10px;
   text-decoration: underline;
}

#forgot-text a{
   cursor: pointer;
   color: #0078b2;
}

#eye-reveal, #eye-reveal-repeat {
   position: absolute;
   right: 10px;
   bottom: 8px;
}

#upper-text {
   margin-top: 3vh;
   margin-bottom: 3vh;
}

#upper-text h2 {
   margin-bottom: -2vh;
}

#upper-text p {
   margin-top: 0;
   margin-bottom: 0;
}

#privacy-verklaring a{
   color: blue;
   text-decoration: underline;
}

@media (max-width: 460px) {
   body .page.login-select {
      margin: 0;
   }

   body .card {
      border-top-left-radius: 0;
      border-top-right-radius: 0;
   }

   body .page-footer {
      border-bottom-right-radius: 0;
      border-bottom-left-radius: 0;
   }

   .hide-xs {
      display: none;
   }

   #forgot-text {
      display: flex;
      flex-direction: column;
      text-align: center;
      line-height: 3;
   }

   #eye-reveal, #eye-reveal-repeat  {
      position: absolute;
      bottom: 6px;
   }

   .button {
      background-color: red;
   }
}

.page-options {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
}

.breadcrumb ul {
   list-style-type: none;
   display: flex;
   flex-direction: row;
}

.page-options a, .breadcrumb ul li a {
   color: #6f6f6f;
   font-weight: 600;
   font-size: 0.86667rem;
   line-height: 32px;
}

.breadcrumb ul li a {
   font-size: 0.7rem;
}

.page-options a:hover .toggle-text, .breadcrumb ul li a:hover {
   color: #0078b2;
}

.dropdown-menu-container, .dropdown {
   position: relative;
}

.dropdown-menu {
   width: 220px;
   box-shadow: 0 0 4px 0 rgba(38,38,38,0.08),0 2px 4px 0 rgba(38,38,38,0.07);
   background-color: #FFFFFF;

   position: absolute;
   right: 0;
   left: auto;
   top: 100%;
   z-index: 1000;
   visibility: hidden;
}

.dropdown-menu.show {
   visibility: visible !important;
}

.dropdown-menu ul, ul.dropdown-menu {
   list-style-type: none;
   display: flex;
   flex-direction: column;
   padding: 0;
}

.dropdown-menu li a {
   display: block;
   padding: 4px 10px;
}

.dropdown-menu li a:hover {
   color: #0078b2;
}

.dropdown-menu li:last-child a {
   text-align: center;
   border-top: 1px solid #e5e5e5;
   background-color: #fafafa;
}

.breadcrumb li:not(:last-child)::after {
   font-family: FontAwesome,"Font Awesome 6 Pro";
   text-rendering: auto;

   content: "\f054";
   vertical-align: baseline;
   text-decoration: none;
   margin-left: 8px;
   font-size: 10px;
   color: #757575;
   margin-right: 8px;
   width: 5px;
}

@media (max-width: 640px) {
   .page-options {
      flex-wrap: wrap;
      /*
      justify-content: center;
      text-align: center;
      */
   }

   .breadcrumb ul {
      /*justify-content: center;*/
      display: none;
   }

   .page-options div {
      /*
      flex-basis: 100%;
      */
   }

   .dropdown-menu {
      left: 23% !important;
      margin-left: -100px !important;
      right: auto;
   }

   .a-button {
      line-height: 25px !important;
   }

   .table-flat tr {
      display: flex;
      flex-direction: column;
   }

   .table-flat tbody td:first-of-type {
      padding-left: 0;
   }
}

.pull-right {
   float: right;
}

.page {
   margin: 20px auto 35px auto;
   max-width: 1170px;
}

@media (max-width: 1180px) {
   .page {
      max-width: 100%;
      margin-left: 15px;
      margin-right: 15px;
   }
}

.page.login-select {
   margin-top: 80px;
   max-width: 640px;
}

.page.login-select .buttons:last-of-type {
   padding-bottom: 25px;
}

@media (max-width: 640px) {
   .page.login-select {
      margin-top: 28px;
   }
}

.login-select .page-footer {
   margin-top: 0 !important;
}

.footer-img {
   text-align: center;
   padding: 0 0 15px 0;
}

.footer-img img {
   height: 35px;
}

.footer-municipality-img {
   display: flex;
   justify-content: center;
}

.footer-municipality-img img {
   height: 35px;
   position: absolute;
   margin-top: 15px;
}

.page-footer a.faq-button span {
   margin-right: 5px;
}

.page-footer a:hover {
   text-decoration: underline;
}

.login-select .page-footer {
   text-align: center;
}

nav {
   background-color: #0e76b0;
   padding: 0 25px;
   color: white;

   display: flex;
   flex-direction: row;
   position: relative;
}

nav .navigation {
   flex: 1;
   display: flex;
   flex-direction: row;
   justify-content: space-between;
}

nav .brand {
   padding: 5px 10px;
}

nav .brand {
   background-color: #ffffff;
}

nav .toggle-menu {
   display: none;
}

nav ul {
   display: flex;
   flex-direction: row;
   list-style-type: none;
}

nav ul li, nav > div {
   display: flex;
   align-items: center;
   transition: background-color .3s;
}

nav ul li.active, nav ul li:hover, .menu-right a.active {
   background-color: #61bc46;
}

nav .navigation .menu-right {
   display: flex;
}

nav .navigation .menu-right a {
   transition: background-color .3s;
}

nav .navigation .menu-right a:hover {
   background-color: #61bc46;
   transition: background-color .3s;
}

nav ul a, nav > div:not(.brand) a {
   padding: 14px 10px;
   display: flex;
   flex-direction: column;
   align-items: center;
   text-align: center;
   color: #ffffff;
   text-decoration: none;
   gap: 5px;
}

nav a span {
   font-size: 12px;
}

nav a span.fa {
   font-size: 24px;
}

.hamburger {
   border: 0;
   background-color: transparent;
   cursor: pointer;
}

.hamburger .line {
   background-color: #0e76b0;
   display: block;
   margin: 5px 0;
   height: 3px;
   width: 30px;
   transition: all 0.1s ease-in;
}

.hamburger.open .line:nth-child(1) {
   transform: translateY(8px) rotate(45deg);
}

.hamburger.open .line:nth-child(2) {
   opacity: 0;
}

.hamburger.open .line:nth-child(3) {
   transform: translateY(-8px) rotate(-45deg);
}

@media (max-width: 640px) {
   nav .brand {
      padding: 0;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      border-bottom: 1px solid #0e76b0;
   }

   nav .brand a {
      padding: 5px 15px;
      display: flex;
   }

   nav .brand img {
      width: 35px;
   }

   nav .toggle-menu {
      display: block;
   }

   nav .navigation {
      z-index: 100;
      align-items: normal;
      display: none;
      position: absolute;
      top: 46px;
      width: 100%;
      background-color: #0e76b0;
   }

   nav .navigation.open {
      display: block;
      padding-bottom: 5px;
   }

   nav, nav .navigation, nav ul {
      flex-direction: column;
      padding: 0;
   }

   nav ul a, nav .account-menu a {
      flex-direction: row !important;
      flex: 1;
      padding: 10px !important;
   }

   nav a span:first-of-type {
      width: 35px;
      text-align: center;
   }
}

.card {
   padding-top: 15px;
   box-shadow: 0 0 4px 0 rgba(38,38,38,0.08),0 2px 4px 0 rgba(38,38,38,0.07);
   background-color: #FFFFFF;
   border-top-left-radius: 10px;
   border-top-right-radius: 10px;
}

.page-content > .card {
   border-top-left-radius: 0;
   border-top-right-radius: 0;
   border-bottom-left-radius: 10px;
   border-bottom-right-radius: 10px;
}

.page .page-text p {
   margin-bottom: 10px;
}

.page .page-text ul, .page .page-text ol {
   padding-left: 15px;
   margin-bottom: 15px;
}

.page .page-text ul > li, .page .page-text ol > li {
   padding-left: 10px;
}

.page-footer {
   margin: 30px 0 0 0 !important;
   padding: 12px 25px 12px 25px;
   background-color: #0e76b0;
   border-bottom-left-radius: 10px;
   border-bottom-right-radius: 10px;
}

.page-footer img {
   max-width: 180px;
}

.page-footer div, .page-footer div a {
   font-size: 11px;
   color: #ffffff;
}

.page-footer div a {
   font-weight: bold;
}

.card > div {
   margin: 0 25px;
}

.form-errors {
   color: #ee2424;
   padding-left: 15px;
   margin-bottom: 24px;
}

.form ul, .form ol {
   margin-left: 15px;
}

.form-row {
   width: 100%;
   display: block;
   margin-bottom: 25px;
   position: relative;
}

.form-row.small {
   margin-bottom: 10px;
}

.form-group {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   gap: 25px;
}

.form-group > * {
   flex: 1;
   max-width: 100%;
}

.form-group > .form-group-xs {
   flex: 0;
   min-width: 125px;
}

.form-group > .form-group-sm {
   flex: 0;
   min-width: 250px;
}

.form-group > .form-group-md {
   flex: 0;
   min-width: 520px;
}

@media (max-width: 640px) {
   .form-group {
      gap: 5px 15px;
   }

   .form-group > * {
      flex-basis: 100%;
      margin-bottom: 0;
   }

   .form-group > .form-group-sm, .form-group > .form-group-md {
      min-width: unset;
      flex: 1;
   }

   .form-group > *:last-child {
      margin-bottom: 0;
   }
}

.input, .tdatepicker input[type="text"], .tcombobox .tcb-input {
   display: block;
   font-size: inherit;
   border-radius: 3px;
   border: 2px solid rgba(145, 153, 154, 0.71);
   background-color: #ffffff;
   color: #262626;
   width: 100%;
   transition: border 0.3s;
   box-shadow: none;
   -webkit-appearance: none;
   resize: none;

   margin-top: 10px;
   padding: 7px;
}

.input:read-only {
   display: block;
   font-size: inherit;
   background-color: #fafafa;
   color: #262626;
   width: 100%;
   border-radius: 3px;
   border: 1px solid #D1E1E9;
   cursor: default;
   margin-top: 10px;
   padding: 7px;
}

.input::placeholder, .static-input::placeholder {
   font-style: italic;
   color: #262626;
   font-size: .9em;
   opacity: .5;
}

.tcb-input:focus  {
   border-color: #F7911F;
}

.input:focus, .input:hover, .input.modify, .tdatepicker input[type="text"]:focus, .tdatepicker input[type="text"]:hover {
   border-color: #F7911F;
}

.input:read-only:focus, .input:read-only:hover, .tdatepicker input[type="text"]:read-only:hover {
   border-color: #D1E1E9;
}

.input:disabled {
   background-color: #EAF3F8;
}

.input:disabled:focus, .input:disabled:hover {
   cursor: not-allowed;
   border-color: #D1E1E9;
}

.input-description {
   color: #6f6f6f;
   font-size: .8em;
   margin-top: 5px;
   display: block;
}

.input-description span.fa {
   color: #0e76b0;
}

table .input {
   margin-top: 0;
}

table input[type='text'].input, table select.input {
   display: inline;
   width: auto;
   padding: 5px 6px;
   min-width: 45px;
}

table tfoot tr.total-row > * {
   background-color: #EAF3F8;
}

.button, .a-button {
   font-size: inherit;
   line-height: 48px;
   padding: 0 26px;
   cursor: pointer;
   border: none;
   position: relative;
   white-space: nowrap;
}

.button {
   background-color: #F7911F;
   color: #FFFFFF;
   border-radius: 3px;
   display: inline-block;
   font-weight: bold;
   line-height: 48px;
   text-decoration: none;
   text-align: center;
   transition: background 0.3s;
}

.button.button-sm {
   padding: 0 8px;
   line-height: 32px;
}

.button:hover {
   background-color: #f0832f;
}

.button:disabled, .a-button:disabled {
   cursor: not-allowed;
}

.button-full {
   width: 100%;
   display: block;
}

.a-button {
   background: none;
   color: #0E76B0;
   text-decoration: none;
}

.a-button span {
   border-bottom: 1px solid #0E76B0;
   padding-bottom: 3px;
}

.button .loading-icon, .a-button .loading-icon {
   position: absolute;
   left: 10px;
   top: 35%;
   display: none;
}

.button.download {
   background-color: #0078b2;
   padding: 0 18px;
   line-height: 38px;
}

.button.download span {
   margin-right: 10px;
}

.title-buttons {
   display: flex;
   flex-direction: row;
}

.title-buttons > * {
   margin-left: 5px;
}

.title-buttons > *:first-child {
   margin-left: 0;
   margin-right: 10px;
}

.title-button {
   font-size: 15px;
   height: 30px;
   line-height: 30px;
   padding: 0 15px;
}

.button-add {
   background-color: #61bc46;
}

.row-buttons {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   flex-wrap: wrap;
}

.row-buttons.bottom {
   margin-bottom: 15px;
}

.columns {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   gap: 15px;
}

.buttons {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   gap: 0 15px;
}

.buttons.space-around {
   justify-content: space-around;
}

.buttons.right {
   justify-content: end;
}

.align-center {
   justify-content: space-around;
}

.table {
   width: 100%;
}

.table thead th {
   background-color: #0078b2;
   color: #ffffff;
}

.responsive-table {
   width: 100%;
   overflow-x: auto;
}

@media (max-width: 640px) {
   .responsive-table table td {
      white-space: nowrap;
   }
}

th {
   text-align: left;
}

.table tbody th, .table tbody td {
   border-top: 1px solid #eeeeee;
}

.table thead th span.icon {
   margin-left: 3px;
}

.dashboard {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   margin: 0 -16px;
}

.dashboard > div {
   padding: 0 16px;
   margin: 0 0 25px 0;
}

.dashboard-tile {
   display: flex;
   flex-direction: row;
   position: relative;

   box-shadow: 0 0 4px 0 rgba(38,38,38,0.08),0 2px 4px 0 rgba(38,38,38,0.07);
   background-color: #ffffff;
   color: white;
   border-radius: 3px;
   cursor: pointer;
}

.dashboard-tile.disabled {
   cursor: not-allowed;
}

.dashboard-tile .icon {
   background-color: #F7911F;
   /*padding: 28px;*/
   padding: 28px;
   width: 100px;
   text-align: center;
   color: #ffffff;

   border-top-left-radius: 3px;
   border-bottom-left-radius: 3px;
}

.dashboard-tile .icon span {
   font-size: 32px;
}

.dashboard-tile .data {
   background-color: #ffffff;
   color: #000000;

   transition: color .1s, background-color .3s;

   display: flex;
   flex-direction: column;
   padding: 12px;
   width: 235px;
}

.dashboard-tile:hover .data {
   color: #ffffff;
}

.dashboard-tile .data span:last-child {
   font-weight: bold;
   font-size: .8em;

   overflow-x: hidden;
   text-overflow: ellipsis;
}

.icon.orange, .dashboard-tile:hover .data.orange {
   background-color: #F7911F;
}
.icon.blue, .dashboard-tile:hover .data.blue {
   background-color: #0078b2;
}
.icon.green, .dashboard-tile:hover .data.green, .button.green {
   background-color: #61bc46;
}
.icon.red, .dashboard-tile:hover .data.red {
   background-color: #ee2424;
}

.dashboard-tile .marker {
   position: absolute;
   top: -10px;
   right: -10px;
}

.dashboard-tile .marker span {
   color: #ee2424;
   font-size: 25px;
   width: 22px;
   height: 22px;
   border-radius: 50%;
   background-color: white;
}

.documents {
   display: flex;
   flex-direction: column;
   width: 100%;
}

.documents > div {
   display: flex;
   flex-direction: row;
   max-width: 100%;
   margin-bottom: 15px;

   cursor: pointer;

   background-color: #ffffff;
   box-shadow: 0 0 4px 0 rgba(38,38,38,0.08),0 2px 4px 0 rgba(38,38,38,0.07);
}

.documents > div:last-child {
   margin-bottom: 0;
}

.documents > div > div {
   transition: color .1s, background-color .3s;
}

.documents > div > div:first-child {
   background-color: #0078b2;
   color: #ffffff;

   padding: 10px 15px;

   border-top-left-radius: 3px;
   border-bottom-left-radius: 3px;
}

.documents > div.green > div:first-child, .documents > div.green:hover > div:last-child {
   background-color: #61bc46;
}

.documents > div.blue > div:first-child, .documents > div.blue:hover > div:last-child {
   background-color: #48aee2;
}

.documents > div.orange > div:first-child, .documents > div.orange:hover > div:last-child {
   background-color: #F7911F;
}

.documents > div.red > div:first-child, .documents > div.red:hover > div:last-child {
   background-color: #ee2424;
}

.documents > div > div:first-child span {
   width: 30px;
   margin: auto 0;
   text-align: center;
   font-size: 22px;
}

.documents > div > div:last-child {
   flex: 2;
   padding: 10px 15px;
   border-top-right-radius: 3px;
   border-bottom-right-radius: 3px;
}

.documents > div:hover > div:last-child {
   color: #ffffff;
   background-color: #0078b2;
}

.documents > div > div {
   display: flex;
   flex-direction: column;
}

.documents > div > div > div {
   display: flex;
   flex-direction: row;
   /*justify-content: space-between;*/
   gap: 15px;
   font-size: .7em;
}

.documents > div > div > div strong {
   margin-right: 5px;
}

.map {
   border: 1px solid #eae9ee;
   border-radius: 10px;
   padding: 10px;
   margin: 0 auto 20px auto;
}

.map a {
   display: block;
   margin: 10px 0;
}

.preferences {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   margin: 0 -15px;
}

.preferences > * {
   padding: 0 15px;
   flex: 1;
}

.preferences .form-row {
   margin-bottom: 5px;
}

.progress-bar {
   background-color: #EAF3F8;
   width: 100%;
   height: 30px;
   padding: 5px 5px;
   border-radius: 5px;
   margin: 15px auto 15px auto;
}

.progress-bar > div {
   background-color: #61bc46;
   color: #ffffff;
   text-align: center;
   font-size: 12px;
   width: 100%;
   height: 20px;
   display: block;
   border-radius: 5px;
}

.message-container {
   padding: 15px 10px;
   background-color: #fafafa;
   border: 1px solid #eae9ee;
   margin-bottom: 25px;
}

.message-box {
   background-color: #fafafa;
   border: 1px solid #eae9ee;
}

.message-box > * {
   padding: 15px;
}

.message-box .header {
   background-color: #0e76b0;
   color: #ffffff;
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   flex-wrap: wrap;
}

.message-box .header span {
   font-size: 12px;
}

.message-box .messages {
   overflow-y: scroll;
   background-color: #fff;
   height: 450px;
}

.message-box .messages .message {
   margin: 10px 0;
   display: flex;
}

.message-box .messages .separator {
   text-align: center;
   background-color: #eae9ee;
   padding: 5px 0;
   font-size: 12px;
   border-radius: 5px;
}

.message-box .messages .message:first-of-type {
   margin-top: 0;
}

.message-box .messages .message:last-of-type {
   margin-bottom: 0;
}

.message-box .messages blockquote {
   width: 100%;
   max-width: 60%;
}

.message-box .messages blockquote > * {
   display: block;
   width: 100%;
}

.message-box .messages blockquote p {
   padding: 15px;
   border-radius: 5px;
}

.message-box .messages blockquote span {
   font-size: 12px;
   margin-top: 3px;
}

.message-box .messages .sent {
   justify-content: flex-end;
}

.message-box .messages .received blockquote p {
   /*background-color: #4cb3e3;*/
   background-color: #A4D8F0;
   color: #000000;
}

.message-box .messages .sent blockquote p {
   /*background-color: #61bc46;*/
   background-color: #AFDDA1;
   color: #000000;
}

.message-box .messages .sent blockquote span {
   text-align: right;
}

.message-box .footer {
   border-top: 1px solid #eae9ee;
}

@media (max-width: 640px) {
   .message-box .messages blockquote {
      max-width: 95%;
   }
}

.table-flat {
   margin-bottom: 15px;
}

.table-flat th, .table-flat td {
   padding: 6px 10px;
}

.table-flat tbody th {
   padding: 6px 10px 6px 0;
   vertical-align: top;
}

td.col-fit, th.col-fit {
   width: 1px;
   white-space: nowrap;
}

.table.selectable tbody tr:hover th, .table.selectable tbody tr:hover td {
   background-color: #EAF3F8;
}

.badge  {
   display: inline-block;
   padding: 12px;
   text-align: center;
   width: 50px;
   cursor: pointer;
   color: white;
   font-weight: bold;
   position: relative;
}

.tooltip {
   display: inline-block;
   position: relative;
   text-align: left;
}

.tooltip h3 {
   margin: 0 0 5px 0;
}

.tooltip h3, .tooltip p {
   font-size: 12px;
}

.tooltip div {
   min-width: 400px;
   width: auto;
   top:-20px;
   left: 50%;
   transform: translate(-30%,-100%);
   padding: 10px 20px;
   background-color: #ffffff;
   font-weight: normal;
   font-size: 14px;
   border-radius: 5px;
   position: absolute;
   z-index: 99999999;
   box-sizing: border-box;
   box-shadow: 0 0 4px 0 rgba(38,38,38,0.08),0 2px 4px 0 rgba(38,38,38,0.07);
   display: none;
}

.tooltip:hover div {
   display: block;
}

.tooltip > i {
   color: #0e76b0;
   font-size: 12px;
}

.tooltip div i {
   position:absolute;
   top: 100%;
   left: 30%;
   margin-left: -15px;
   width: 30px;
   height: 15px;
   overflow: hidden;
}

.tooltip div i::after {
   content: '';
   position: absolute;
   width: 15px;
   height: 15px;
   left: 50%;
   transform: translate(-50%,-50%) rotate(45deg);
   background-color: #FFFFFF;
   box-shadow: 0 0 4px 0 rgba(38,38,38,0.08),0 2px 4px 0 rgba(38,38,38,0.07);
}

.info_content span {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   gap: 5px;
}

.info_content hr {
   margin: 15px 0;
}

.info_content span.preff_btns button {
   background-color: #F7911F;
   color: #FFFFFF;
   border-radius: 3px;
   font-size: inherit;
   padding: 5px 6px;
   cursor: pointer;
   border: none;
   position: relative;
   white-space: nowrap;
   text-align: center;
   transition: background 0.3s;
}

.info_content span.preff_btns button:hover {
   background-color: #f0832f;
}

@media (max-width: 640px) {
   .badge {
      padding: 6px;
      width: auto;
   }

   .documents > div > div > div {
      flex-wrap: wrap;
      gap: 0;
   }

   .documents > div > div > p {
      margin-bottom: 5px;
   }
}

.badge-done {
   background-color: #61bc46;
}

.badge-info {
   background-color: #0078b2;
}

.badge-todo {
   background-color: #F7911F;
}

.badge-error {
   background-color: #ee2424;
}

.badge-icon {
   padding: 1px 5px;
   font-size: 13px;
   border: 1px solid transparent;
   border-radius: 50%;
   background-color: #0078b2;

   position: absolute;
   top: -5px;
   right: -5px;
}

.table-resonsive {
   width: 100%;
   overflow-x: auto;
}

.form label {
   user-select: none;
}

.form label.required > span::after, .form div.required > span::after, .form label.required > div > span::after {
   content: ' *';
}

.checkbox, .radio {
   position: relative;
   cursor: pointer;
   margin: 5px 5px 0 0;
   display: block;

   padding-left: 30px;
}

.checkbox input[type="checkbox"], .radio input[type="radio"] {
   position: absolute;
   z-index: -1;
   opacity: 0;
}

.radio span {
   background-color: #fff;
   border-radius: 50%;
}

.checkbox span, .radio span {
   display: inline-block;
   height: 20px;
   width: 20px;
   border: 1px solid #dddddd;
   background-color: #ffffff;
   transition: background-color .15s;
   vertical-align: middle;

   position: absolute;
   top: 2px;
   left: 0;
}

.checkbox input[type='checkbox'] ~ span::after {
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   font-family: FontAwesome,"Font Awesome 6 Pro";
   font-weight: 900;
   font-size: 10px;
   color: #fff;
   line-height: 18px;
   content: '\f00c';
   text-align: center;
}

.radio input[type="radio"]:checked ~ span::after {
   opacity: 1;
   background-color: #0078b2;
}

.radio input[type="radio"] ~ span::after {
   top: 3px;
   right: 3px;
   bottom: 3px;
   left: 3px;
   background-color: #fff;
   border-radius: 50%;
   opacity: 0;
   transition: opacity .15s ease-out;
}

.checkbox span::after, .radio span::after {
   position: absolute;
   content: '';
}

.checkbox input[type='checkbox']:checked ~ span {
   background-color: #1697d4;
   border-color: #1776c3;
}

.switch {
   display: flex;
   align-items: center;
}

.switch .text {
   display: inline-block;
   margin-right: 10px;
}

.switch label {
   position: relative;
   display: inline-block;
   width: 60px;
   height: 34px;
}

.switch label input {
   opacity: 0;
   width: 0;
   height: 0;
}

.switch label .slider {
   position: absolute;
   cursor: pointer;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background-color: #D0E4EF;
   border-radius: 3px;
   -webkit-transition: .4s;
   transition: .4s;
}

.switch .slider:before {
   position: absolute;
   content: "";
   height: 26px;
   width: 26px;
   left: 4px;
   bottom: 4px;
   background-color: white;
   border-radius: 3px;
   -webkit-transition: .4s;
   transition: .4s;
}

.switch label input:checked + .slider {
   background-color: #0078b2;
}

.switch label input:checked + .slider:before {
   -webkit-transform: translateX(26px);
   -ms-transform: translateX(26px);
   transform: translateX(26px);
}

.fixed-table {
   overflow-y: auto;
   max-height: 250px;
   margin-bottom: 25px;
}

.fixed-table table thead th {
   background-color: #0078b2;
   color: white;
   position: sticky;
   top: 0;
   z-index: 4000;
}

.show-xs {
   display: none;
}

.tabs > ul {
   list-style-type: none;
   display: flex;
   flex-direction: row;
   justify-content: space-between;
}

.tabs ul li a {
   display: block;
   border-radius: 3px;
   padding: 10px 15px;
   color: #000000;
   text-decoration: none;
   background-color: #ffffff;
   transition: background-color .3s, color .3s;
   box-shadow: 0 0 4px 0 rgba(38,38,38,0.08),0 2px 4px 0 rgba(38,38,38,0.07);
}

.tabs ul li a:hover, .tabs ul li a.active {
   color: #ffffff;
   background-color: #F7911F;
}

.tabs .tab-content {
   margin-top: 25px;
}

.flash-message {
   position: fixed;
   z-index: 10000;
   top: 70px;
   left: 50%;
   transform: translateX(-50%);

   cursor: pointer;
   user-select: none;

   padding: 10px 15px;
   color: #ffffff;
   box-shadow: 0 0.46875rem 2.1875rem rgba(4,9,20,0.03),0 0.9375rem 1.40625rem rgba(4,9,20,0.03),0 0.25rem 0.53125rem rgba(4,9,20,0.05),0 0.125rem 0.1875rem rgba(4,9,20,0.03);
}

.flash-message > div {
   display: flex;
   align-items: center;
}

.flash-message div span {
   font-size: 24px;
}

.flash-message div div {
   padding: 15px 15px;
}

.flash-message.info { background-color: #48aee2; }
.flash-message.success { background-color: #61bc46; }
.flash-message.warning { background-color: #F7911F; }
.flash-message.alert { background-color: #ee2424; }

.notification {
   background-color: #DAF1FD;
   border-left: 5px solid black;
   border-left-color: black;
   padding: 20px 20px 20px 50px;
   position: relative;
   margin-top: 20px;
}

.notification.info, .notification.info span {
   border-color: #0078b2;
   color: #0078b2;
}

.notification.alert, .notification.alert span {
   border-color: #ee2424;
}

.notification.alert span {
   color: #ee2424 !important;
}

.notification span.fa {
   position: absolute;
   top: 25px;
   left: 20px;
   color: inherit;
}

.steps-progress {
   width: 100%;
   margin: 0 auto 15px auto;

   display: flex;
   list-style-type: none;
   flex-direction: row;
   padding: 0 0 15px 0;
   border-bottom: 1px solid #eae9ee;
}

.steps-progress .step {
   flex: 1;
   position: relative;
   text-align: center;
}

.steps-progress .step .marker {
   display: inline-block;
   width: 35px;
   height: 35px;
   border-radius: 50%;
   position: relative;
   font-size: 18px;
   z-index: 100;
   line-height: 22px;

   border: 6px solid #dbdbdb;
   background-color: #ffffff;
   color: #dbdbdb;
}

.steps-progress .step .content {
   font-size: 14px;
}

.steps-progress .step.completed .marker, .steps-progress .step.active .marker {
   background-color: #61bc46;
   border-color: #61bc46;
   color: #ffffff;
}

.steps-progress .step.bar .step-wrapper::after {
   content: " ";
   position: absolute;
   height: 5px;
   top: 15px;
   z-index: 99;

   background-color: #dbdbdb;
   left: calc(50% + 1.55rem);
   right: calc(-50% + 1.55rem);
}

.steps-progress .step.bar.completed .step-wrapper::after {
   background: #61bc46;
   left: 50%;
   right: -50%;
}

dl dt {
   font-weight: bold;
}

@media (max-width: 640px) {
   .hidden-xs {
      display: none;
   }

   .show-xs {
      display: inline-block;
   }

   .table-flat th, .table-flat td {
      padding: 3px 5px;
   }

   .table-flat tbody th {
      padding: 3px 5px 3px 0;
   }

   hr {
      margin: 12px 0;
   }

   /*
   .button {
      padding: 0 8px;
      line-height: 32px;
      height: 50px;
   }
   */

   .form-row {
      margin-bottom: 12px;
   }

   .steps-progress {
      display: none;
   }
}

.jqdatepicker-wrapper {
   position: relative;
}
.jqdatepicker {
   position: relative;
   display: block;
   max-width: 200px;
}

.jqdatepicker input {
   max-width: 200px;
   padding-right: 45px;
}

.jqdatepicker img {
   position: absolute;
   right: 8px;
   top: 8px;
}


.jqdatepicker .jqdatepicker-wrapper img {
   position: absolute;
   right: 8px;
   top: 8px;
}

.overview-filter .jqdatepicker {
   max-width: 100%;
}

.overview-filter .jqdatepicker img {
   top: 8px;
}

fieldset > div {
   padding: 20px 15px;
}

.notification-circle {
   color: red;
   margin-left: 18px;
   margin-top: -32px;
   margin-bottom: 14px;
   font-size: 13px !important;
}

.hidden {
   display: none;
}

.overview-buttons {
   display: block;
   margin-bottom: 15px;
}

.tdatepicker {
   display: flex;
   flex-direction: row;
   align-items: center;
   width: auto;
   margin: 0 -5px;
}

.tdatepicker > * {
   position: relative;
   padding: 0 5px;
}

.tdp-calendar {
   position: absolute;
   left: 5px;
   top: 45px;
   background-color: #ffffff;
   box-shadow: 0 4px 10px 0 rgba(20,18,81,.2);
   border: 1px solid #E9E8ED;
   border-radius: 0;
   box-sizing: border-box;
   font-size: 14px;
   line-height: 24px;
   width: 320px;
   z-index: 99;
}

.tdp-calendar .tdp-nav {
   font-weight: bold;
   color: #0E76B0;
}

.tdp-calendar .tdp-nav button {
   border: none;
   background: none;
   text-decoration: none;
   color: #0E76B0;
   cursor: pointer;
   padding: 10px 15px;
}

.tdp-calendar .tdp-nav, .tdp-calendar .tdp-row {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
}

.tdp-calendar .tdp-row div {
   width: calc(100% / 7);
   border-radius: 50%;
   margin: 0 0 5px 0;
}

.tdp-calendar .tdp-header .tdp-row div,
.tdp-calendar .tdp-body .tdp-row .prev-month,
.tdp-calendar .tdp-body .tdp-row .next-month,
.tdp-calendar .tdp-body .tdp-row .disabled,
.tdp-calendar .tdp-body .tdp-row div a {
   min-height: 36px;
   padding: 10px 0;
   text-align: center;
}

.tdp-calendar .tdp-header .tdp-row div {
   font-weight: bold;
}

.tdp-calendar .tdp-header .tdp-row div span {
   display: none;
}

.tdp-calendar .tdp-body .tdp-row div:hover, .tdp-calendar .tdp-body .tdp-row div.hovered-range {
   background-color: #E3E7FD;
   cursor: pointer;
   font-weight: bold;
}

.tdp-calendar .tdp-body .tdp-row div.hovered-range {
   border-radius: 0;
}

.tdp-calendar .tdp-body .tdp-row div.selected-date, .tdp-calendar .tdp-body .tdp-row div.selected-date-from, .tdp-calendar .tdp-body .tdp-row div.selected-date-till {
   background-color: #0E76B0;
   color: #ffffff;
}

.tdp-calendar .tdp-body .tdp-row div a {
   display: block;
   text-decoration: none;
   color: inherit;
}

.tdp-calendar .tdp-body .tdp-row .prev-month,
.tdp-calendar .tdp-body .tdp-row .next-month,
.tdp-calendar .tdp-body .tdp-row .disabled,
.tdp-calendar .tdp-body .tdp-row .prev-month:hover,
.tdp-calendar .tdp-body .tdp-row .next-month:hover
{
   background-color: #ffffff !important;
   color: #C0BECC;
   cursor: not-allowed !important;
}

.tdp-calendar .tdp-body .tdp-row .current-date a, .tdp-calendar .tdp-body .tdp-row .selected-date a {
   font-weight: bold;
}

.tdatepicker, .tdp-wrapper .tdatepicker input[type="text"] {
   width: 100%;
   max-width: 225px;
}

.tdatepicker > div > button {
   position: absolute;
   cursor: pointer;
   right: 12px;
   top: 12px;
   border: none;
   background: none;
   color: #0E76B0;
   font-size: 22px;
}

.tcombobox .tcb-input div {
   font-size: inherit;
   line-height: 22px;
   user-select: none;
}

.tcombobox .tcb-input, .tcombobox button {
   cursor: pointer;
}

.tcombobox button {
   position: absolute;
   right: 0;
   top: 50%;
   -ms-transform: translateY(-50%);
   transform: translateY(-50%);
   height: 40px;
   width: 40px;
   border: transparent;
   background-color: transparent;
}

.tcombobox .tcb-drop-list {
   border: 1px solid #eae9ee;
   background-color: #ffffff;
   position: absolute;
   z-index: 1;
   display: none;
   width: 100%;

   box-shadow: 0 .25rem .625rem rgba(0, 0, 0, .2);
}

.tcombobox .tcb-drop-list div {
   display: flex;
   flex-direction: column;
}

.tcombobox .tcb-drop-list div div {
   padding: 0;
}

.tcombobox .tcb-drop-list div div input {
   border: transparent;
   font-size: inherit;
   padding: 8px 12px;
   background-color: #ffffff;
   line-height: 22px;
}

.tcombobox .tcb-placeholder, .tcombobox .tcb-drop-list div div input {
   font-style: italic;
   color: #262626;
   font-size: .9em;
   opacity: .5;
}

.tcombobox .tcb-wrapper {
   position: relative;
}

.tcombobox .tcb-drop-list div div input::placeholder {
   opacity: initial;
}

.tcombobox .tcb-drop-list span, .tcombobox .tcb-drop-list label {
   padding: 7px;
   cursor: pointer;
}

.tcombobox .tcb-drop-list span:hover,
.tcombobox .tcb-drop-list span:focus,
.tcombobox .tcb-drop-list li:focus > span,
.tcombobox .tcb-drop-list .tcb-selected > span,
.tcombobox .tcb-drop-list .tcb-selected > label {
   background-color: #e3e7fd;
}

.tcombobox .tcb-drop-list div ul {
   list-style-type: none;
   display: flex;
   flex-direction: column;
   padding: 0;
   margin: 0;
}

.tcombobox .tcb-drop-list label, .tcombobox .tcb-drop-list span {
   display: block;
}

.tcombobox .tcb-drop-list label {
   cursor: default;
}

.tcombobox .tcb-drop-list label, .tcombobox .tcb-drop-list .tcb-parent > span {
   font-weight: bold;
}

.tcombobox .tcb-drop-list div ul li {
   display: block;
}

.tcombobox .tcb-drop-list div ul li.tcb-hide {
   display: none;
}

.tcombobox .tcb-drop-list .tcb-field {
   border-bottom: 1px solid #1b60db;
}

.tcombobox .tcb-drop-list .tcb-list {
   max-height: 220px;
   overflow-y: auto;
}

.tab {
   border: 1px solid #eae9ee;
}

.tab-nav ul {
   list-style-type: none;
   display: flex;
   flex-direction: row;
}

.tab-nav ul li {
   position: relative;
}

.tab-nav ul li a {
   display: block;
   padding: 15px;
   cursor: pointer;
   color: black;
}

.tab-nav ul li a::after, .tab-nav ul li a::before {
   content: '';
   width: 100%;
   position: absolute;
   left: 0;
}

.tab-nav ul li.active {
   border-left: 1px solid #eae9ee;
   border-right: 1px solid #eae9ee;
   font-weight: bold;
}

.tab-nav ul li:first-child.active {
   border-left: none;
}

.tab-nav ul li:hover a {
   color: #0e76b0;
}

.tab-nav ul li.active:hover a {
   color: black;
}

.tab-nav ul li.active a::after {
   height: 1px;
   bottom: -1px;
   background-color: #FAFAFA;
}

.tab-nav ul li.active a::before {
   height: 4px;
   top: 0;
   background: #0e76b0;
}

.tab-body {
   border-top: 1px solid #eae9ee;
   padding: 15px;
}

.tab-body .map {
   margin-bottom: 0;
}

/* Works on Firefox */
.enquete-description {
   scrollbar-width: thin;
   scrollbar-color: lightgrey whitesmoke;
}

/* Works on Chrome, Edge, and Safari */
.enquete-description::-webkit-scrollbar {
   width: 10px;
   border-radius: 20px;
}

.enquete-description::-webkit-scrollbar-track {
   background: whitesmoke;
}

.enquete-description::-webkit-scrollbar-thumb {
   background-color: lightgrey;
}

.surveys {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   gap: 20px;
}

.surveys .survey {
   box-shadow: 0 0 4px 0 rgba(38,38,38,0.08),0 2px 4px 0 rgba(38,38,38,0.07);
   background-color: #FFFFFF;
   min-width: 320px;
   max-width: 320px;
   padding: 20px;
}

.survey h2 {
   margin-bottom: 0;
   justify-content: space-around;
}

.enquete-description {
   height: 230px;
   overflow-wrap: anywhere;
   overflow-y: auto;
   border: 1px solid #eae9ee;
   margin: 20px 0;
   padding: 10px;
   font-size: .8em;
}

.survey .buttons {
   justify-content: space-around;
}

.survey .progress-bar {
   margin-bottom: 0;
}

.survey .progress-bar small {
   font-weight: bold;
   display: block;
   text-align: center;
}

.card .form .code-inputs {
   display: flex;
   justify-content: center;
   margin: 20px 0;
}

.card .form .code-inputs input {
   width: 40px;
   height: 50px;
   margin: 0 5px !important;
   font-size: 24px;
   text-align: center;
   border: 1px solid #ddd;
   border-radius: 4px;
   box-sizing: border-box;
}

.form-row .radio-choice {
   display: flex;
   padding: 20px;
   border: 1px solid #ddd;
   border-radius: 6px;
   cursor: pointer;
   align-items: stretch;
   justify-content: flex-start;
}

.form-row .radio-choice p {
   margin-left: 2vw;
}

.form-row .radio-choice.disabled input {
   cursor: not-allowed;
}

.form-row .radio-choice.disabled {
   background-color: #f1f1f1;
}

.faq-container {
   margin: 15px auto;
}

.faq-flex {
   display: grid;
   grid-template-columns: 50px 1fr;
}

.faq-item {
   box-shadow: 0 0 4px 0 rgba(38,38,38,0.08), 0 2px 4px 0 rgba(38,38,38,0.07);
   margin-bottom: 15px;
   border-radius: 3px;
}

.faq-question {
   background-color: white;
   width: 100%;
   padding: 15px;
   border-top-right-radius: 3px;
   border-bottom-right-radius: 3px;
   cursor: pointer;
   transition: background-color .3s ease;
}

.faq-question:hover {
   transition: background-color .3s ease;
   color: white;
   background-color: #48aee2;
}

.faq-flex span {
   font-size: 22px;
   display: flex;
   align-items: center;
   justify-content: center;
   background-color: #48aee2;
   color: #ffffff;
   padding: 15px;
   border-top-left-radius: 3px;
   border-bottom-left-radius: 3px;
}

.faq-answer {
   display: none;
   padding: 15px;
   background-color: #fafafa;
   border-top: 1px solid #eee;
   border-bottom-left-radius: 3px;
   border-bottom-right-radius: 3px;
}

.faq-answer ul,
.faq-answer ol {
   padding: 10px 16px;
}