/* // Platforme des Associations SOCIAL */
/* css roles */
/* last updated : 23-01-2023 19h05 */
*:hover,
*:focus {
  -webkit-box-shadow: none;
  box-shadow: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  outline: 0;
  outline: none
}
::selection {
  background: #004680;
  color: #FFF
}
::placeholder {
  color: rgba(0, 0, 0, 0.8) !important;
}
::-webkit-scrollbar {
  width: 0px;
  display: none
}
::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0);
}
::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 1);
}
::-webkit-scrollbar-thumb:window-inactive {
  background: rgba(255, 255, 255, 0);
}
::-webkit-scrollbar-corner {
  background: rgba(255, 255, 255, 0);
}
html {
  overflow: scroll;
  overflow-x: hidden;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
body {
  font-family: 'Cairo', sans-serif;
  font-weight: 300;
  text-align: right;
}
body:before {
  display: block;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  content: "";
  background: url(./img/bg.png) no-repeat center top fixed;
  background-size: cover;
  position: fixed;
  left: 0;
  top: 0;
  z-index: -1;
}
.HTMLloader:before {
  display: block;
  position: fixed;
  width: 100vw;
  height: 100vh;
  content: "";
  overflow: hidden;
  left: 0;
  top: 0;
  background-color: rgba(255, 255, 255, 1);
  z-index: 999999999
}
.HTMLloader:after {
  display: inline-block;
  content: "";
  position: fixed;
  right: auto;
  left: calc(50vw - 72px); /* width / 2 + border / 2  */
  top: calc(50vh - 64px);
  z-index: 9999999999;
  margin: 0 auto;
  border: 8px solid #004680;
  border-top: 8px solid #000;
  width: 128px;
  height: 128px;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}
.container {
  min-width: calc(100vw / 1.5)
}
.logo {
  display: block;
  content: "";
  width: 100%;
  height: 8rem;
  margin: 2rem 0 1rem 0;
  background: url(./img/logo-light.svg) no-repeat center top;
  background-size: contain
}
.logo-hna-maak {
    display: block;
    width: calc(192px / 1.8);
    height: auto;
    margin: 0 auto
}
.logo-arrondissement {
    display: block;
    width: calc(192px / 1.6);
    height: auto;
    margin: 0 auto
}
.text-left .logo-hna-maak {
    display: block;
    width: calc(192px / 1.8);
    height: auto;
    margin: 0;
    float: left
}
.text-right .logo-arrondissement {
    display: block;
    width: calc(192px / 1.6);
    height: auto;
    margin: 0 ;
    float: right
}
p.text-left {
    text-align: left
}
h1 {
  display: block;
  font-size: 2rem;
  line-height: 3rem;
  font-weight: 600;
  text-align: center;
  padding: 1rem 0 2rem 0;
  color: #004680;
}

h2 {
  font-size: 1.5rem;
  line-height: 1.75rem;
  font-weight: 600;
  text-align: center;
  margin: 0 auto;
  margin-bottom: 3rem;
  padding: .75rem 3rem;
  max-width: 90%;
  background-color: #004680;
  color: #FFF;
  border-radius: 3rem;
}
h3 {
  font-size: 1.25rem;
  line-height: 1.5rem;
  font-weight: 600;
  text-align: center;
  padding: .75rem 3rem;
  margin-bottom: 2rem;
  background-color: #004680;
  color: #FFF;
  border-radius: 3rem;
}
h4 {
  font-size: 1.25rem;
  line-height: 1.5rem;
  font-weight: 600;
  text-align: center;
  padding: .5rem 2rem;
  color: #004680;
}
h1 a, h1 a:hover, h1 a:focus {
  display: block;
  color: #004680;
  text-decoration: none;
	transition: all .2s;
}
a,
a:hover,
a:focus {
    font-weight: 600;
    color: #004680;
    transition: all .6s ease;
}

strong, .strong {
  font-weight: 600;
}
.content {
  min-height: 100vh;
  padding: 1rem 0 2rem 0;
}
.content hr {
    background: none;
  margin-top: 1rem;
  margin-bottom: 1rem;
    border: none;
  border-bottom: 1px dashed #004680;
    opacity: 1
}
.content hr.light {
  border-bottom: 1px solid rgba(0, 0, 0, 0.125);
}
ul.list-group,
ul.list-group li {
  font-size: 1.75rem;
  line-height: 3.5rem;
  background-color: transparent
}

ul.list-group li.list-group-item strong,
ul.list-group li.list-group-item .strong {
  font-weight: 600;
  margin-right: 1rem;
}
ul.list-group li.list-group-item a,
ul.list-group li.list-group-item .strong {
    font-size: 1.25rem;
    text-decoration: none
}
form .form-control,
form .form-select {
	border-radius: 32px;
  background-color: #F1F1F1;
  background: linear-gradient(0deg, #F1F1F1 0%, #FFFFFF 50%);
}
form.vote-form {
    text-align: center;
	border-radius: 32px;
  background-color: #004680;
}
form.vote-form label {
    text-align: center;
    padding: 0 0 1rem 0
}
form.vote-form select{
  text-align: center;
    text-align-last: center;
}
form.default-form input, form.default-form select, form.default-form textarea {
    font-size: 1.25rem;
    color: #004680
}

form.default-form .required {
    border-color: #ED140F
}

form.vote-form .btn,
form.default-form .btn,
form.login-form .btn {
    background-color: #000;
    color: #FFF;
    font-weight: 600
}
form.vote-form .btn:hover,
form.vote-form .btn:focus, 
form.default-form .btn:hover,
form.default-form .btn:focus, 
form.login-form .btn:hover,
form.login-form .btn:focus {
    background-color: #004680;
    color: #FFF;
    font-weight: 600
}
input.form-upload {
  position: relative;
  width: 100%;
  height: 64px;
  padding: 0.5rem 1rem;
  -webkit-border-radius: 48px;
  border-radius: 48px;
  z-index: 9;
  background: none;
  border: none;
  box-shadow: none;
}
input.form-upload:before {
  display: block;
  width: 100%;
  min-height: 64px;
  padding: 0.5rem 1rem;
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  background-color: #004680;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0iI0ZGRiIgY2xhc3M9ImJpIGJpLWZpbGUtYXJyb3ctdXAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+CiAgPHBhdGggZD0iTTggMTFhLjUuNSAwIDAgMCAuNS0uNVY2LjcwN2wxLjE0NiAxLjE0N2EuNS41IDAgMCAwIC43MDgtLjcwOGwtMi0yYS41LjUgMCAwIDAtLjcwOCAwbC0yIDJhLjUuNSAwIDEgMCAuNzA4LjcwOEw3LjUgNi43MDdWMTAuNWEuNS41IDAgMCAwIC41LjV6Ii8+CiAgPHBhdGggZD0iTTQgMGEyIDIgMCAwIDAtMiAydjEyYTIgMiAwIDAgMCAyIDJoOGEyIDIgMCAwIDAgMi0yVjJhMiAyIDAgMCAwLTItMkg0em0wIDFoOGExIDEgMCAwIDEgMSAxdjEyYTEgMSAwIDAgMS0xIDFINGExIDEgMCAwIDEtMS0xVjJhMSAxIDAgMCAxIDEtMXoiLz4KPC9zdmc+);  
    background-size: 24px auto;
  background-repeat: no-repeat;
  background-position: center center;
  text-indent: -9999px;
  text-align: center;
  border: none;
  -webkit-border-radius: 48px;
  border-radius: 48px;
  -webkit-box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075);
  box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075);
  z-index: 99;
  transition: all .3s ease
}
input.form-upload:hover:before,
input.upload-selected:before {
  background-color: #000;
  transition: all .6s ease
}
.default-form {
    margin: 0;
    padding: 0
}
.default-form ul,
.default-form ul li {
	list-style: none;
    margin: 0;
    padding: 0
}
.default-form ul li{
	padding: 0 .5rem 0 .5rem
}
.default-form ul li.page-item{
	padding: 0;
    margin: 0
}
.default-form ul li .mb-4 {
	margin-bottom: 2.75rem
}
.default-form ul li .form-label {
	direction: rtl;
	margin-right: 1rem;
  font-weight: 600;
}
.default-form .attachements-input span {
  display: inline-block;
  width: 100%;
  margin: 0 auto;
    padding-top: 1rem;
  font-size: 1rem;
  text-align: center;
}
.arrow-down {
    position: relative
}
.arrow-down:before {
  display: block;
    content: "";
    width: 24px;
    height: 24px;
    position: absolute;
    left: 12px;
    top: 6px;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0iY3VycmVudENvbG9yIiBjbGFzcz0iYmkgYmktYXJyb3ctYmFyLWRvd24iIHZpZXdCb3g9IjAgMCAxNiAxNiI+CiAgPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMSAzLjVhLjUuNSAwIDAgMSAuNS0uNWgxM2EuNS41IDAgMCAxIDAgMWgtMTNhLjUuNSAwIDAgMS0uNS0uNXpNOCA2YS41LjUgMCAwIDEgLjUuNXY1Ljc5M2wyLjE0Ni0yLjE0N2EuNS41IDAgMCAxIC43MDguNzA4bC0zIDNhLjUuNSAwIDAgMS0uNzA4IDBsLTMtM2EuNS41IDAgMCAxIC43MDgtLjcwOEw3LjUgMTIuMjkzVjYuNUEuNS41IDAgMCAxIDggNnoiLz4KPC9zdmc+);
    background-repeat: no-repeat;
    background-position:  center center;
    background-size: cover;
    z-index: 999

}
ul.pagination,
ul.pagination li,
ul.pagination li a,
ul.pagination li a:hover,
ul.pagination li a:focus {
  direction: rtl;
  box-shadow: none;
}
ul.pagination .page-link {
  color: #004680;
  font-weight: 600;
  padding-left: 3.5rem;
  padding-right: 3.5rem;
	transition: all .3s;
}
ul.pagination .page-link.page-prev {
  border-top-right-radius: 3rem!important;
  border-bottom-right-radius: 3rem!important;
}
ul.pagination .page-link.page-next {
  border-top-left-radius: 3rem!important;
  border-bottom-left-radius: 3rem!important;
}
ul.pagination .page-link.first-page {
  border-radius: 3rem!important;
}
ul.pagination .page-link.page-first {
  border-radius: 3rem!important;
}
ul.pagination .page-link.page-prev:before,
ul.pagination .page-link.page-next:after {
	position: relative;
	top:3px;
	margin-left: .75rem;
	display: inline-block;
	content: "";
	width: 20px;
	height: 20px;
	background-repeat: no-repeat;
	background-position: center center;
	background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0iIzAwNDY4MCIgY2xhc3M9ImJpIGJpLWFycm93LXJpZ2h0LWNpcmNsZS1maWxsIiB2aWV3Qm94PSIwIDAgMTYgMTYiPgogIDxwYXRoIGQ9Ik04IDBhOCA4IDAgMSAxIDAgMTZBOCA4IDAgMCAxIDggMHpNNC41IDcuNWEuNS41IDAgMCAwIDAgMWg1Ljc5M2wtMi4xNDcgMi4xNDZhLjUuNSAwIDAgMCAuNzA4LjcwOGwzLTNhLjUuNSAwIDAgMCAwLS43MDhsLTMtM2EuNS41IDAgMSAwLS43MDguNzA4TDEwLjI5MyA3LjVINC41eiIvPgo8L3N2Zz4=);
	background-size: cover;
	transition: all .6s;
}
ul.pagination .page-link.page-next:after{
	margin-left:0;
	margin-right: .75rem;
	background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0iIzAwNDY4MCIgY2xhc3M9ImJpIGJpLWFycm93LWxlZnQtY2lyY2xlLWZpbGwiIHZpZXdCb3g9IjAgMCAxNiAxNiI+CiAgPHBhdGggZD0iTTggMGE4IDggMCAxIDAgMCAxNkE4IDggMCAwIDAgOCAwem0zLjUgNy41YS41LjUgMCAwIDEgMCAxSDUuNzA3bDIuMTQ3IDIuMTQ2YS41LjUgMCAwIDEtLjcwOC43MDhsLTMtM2EuNS41IDAgMCAxIDAtLjcwOGwzLTNhLjUuNSAwIDEgMSAuNzA4LjcwOEw1LjcwNyA3LjVIMTEuNXoiLz4KPC9zdmc+);
}
ul.pagination .page-link:hover,
ul.pagination .page-link:focus {
  color: #FFF;
  border-color: #004680;
  background-color: #004680;
	transition: all .6s;
}
ul.pagination .page-link.page-prev:hover:before{
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0iI0ZGRkZGRiIgY2xhc3M9ImJpIGJpLWFycm93LXJpZ2h0LWNpcmNsZS1maWxsIiB2aWV3Qm94PSIwIDAgMTYgMTYiPgogIDxwYXRoIGQ9Ik04IDBhOCA4IDAgMSAxIDAgMTZBOCA4IDAgMCAxIDggMHpNNC41IDcuNWEuNS41IDAgMCAwIDAgMWg1Ljc5M2wtMi4xNDcgMi4xNDZhLjUuNSAwIDAgMCAuNzA4LjcwOGwzLTNhLjUuNSAwIDAgMCAwLS43MDhsLTMtM2EuNS41IDAgMSAwLS43MDguNzA4TDEwLjI5MyA3LjVINC41eiIvPgo8L3N2Zz4=)
}
ul.pagination .page-link.page-next:hover:after {
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0iI0ZGRkZGRiIgY2xhc3M9ImJpIGJpLWFycm93LWxlZnQtY2lyY2xlLWZpbGwiIHZpZXdCb3g9IjAgMCAxNiAxNiI+CiAgPHBhdGggZD0iTTggMGE4IDggMCAxIDAgMCAxNkE4IDggMCAwIDAgOCAwem0zLjUgNy41YS41LjUgMCAwIDEgMCAxSDUuNzA3bDIuMTQ3IDIuMTQ2YS41LjUgMCAwIDEtLjcwOC43MDhsLTMtM2EuNS41IDAgMCAxIDAtLjcwOGwzLTNhLjUuNSAwIDEgMSAuNzA4LjcwOEw1LjcwNyA3LjVIMTEuNXoiLz4KPC9zdmc+)
}
.navbar {
  direction: rtl;
  border-radius: 3rem;
}
.navbar-dark,
.dropdown-menu {
  background-color: #004680;
  border: 0px;
}
.navbar .nav-link {
  color: #FFF;
  font-weight: 600;
}
.dropdown-menu {
  padding-top: 1rem;

}
.dropdown-menu.split-menu {
-webkit-column-count: 3; 
-moz-column-count: 3; 
column-count: 3;
}
.dropdown-menu .dropdown {
  margin-bottom: 1rem;
}
.dropdown-menu .dropdown-item {
  font-size: .95rem;
  color: #FFF;
}
.dropdown-menu .dropdown-item:before {
	display: inline-block;
	content: "";
	width: 16px;
	height: 12px;
	margin-left:8px;
	background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyNi4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iQ2FscXVlXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMTYgMTYiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDE2IDE2OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPg0KCS5zdDB7ZmlsbC1ydWxlOmV2ZW5vZGQ7Y2xpcC1ydWxlOmV2ZW5vZGQ7ZmlsbDojRkZGRkZGO30NCjwvc3R5bGU+DQo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNMTEuNCwxLjZjMC4yLDAuMiwwLjIsMC41LDAsMC43YzAsMCwwLDAsMCwwTDUuNyw4bDUuNiw1LjZjMC4yLDAuMiwwLjIsMC41LDAsMC43cy0wLjUsMC4yLTAuNywwbC02LTYNCgljLTAuMi0wLjItMC4yLTAuNSwwLTAuN2MwLDAsMCwwLDAsMGw2LTZDMTAuOCwxLjUsMTEuMiwxLjQsMTEuNCwxLjZDMTEuNCwxLjYsMTEuNCwxLjYsMTEuNCwxLjZ6Ii8+DQo8L3N2Zz4NCg==);
	background-repeat: no-repeat;
	background-position: center center
}
.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus {
  background-color: #FFF;
  color: #004680;
	transition: all .6s;
}
.dropdown-menu .dropdown-item:hover:before,
.dropdown-menu .dropdown-item:focus:before {
	background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyNi4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iQ2FscXVlXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMTYgMTYiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDE2IDE2OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPg0KCS5zdDB7ZmlsbC1ydWxlOmV2ZW5vZGQ7Y2xpcC1ydWxlOmV2ZW5vZGQ7ZmlsbDojMDA0NjgwO30NCjwvc3R5bGU+DQo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNMTEuNCwxLjZjMC4yLDAuMiwwLjIsMC41LDAsMC43YzAsMCwwLDAsMCwwTDUuNyw4bDUuNiw1LjZjMC4yLDAuMiwwLjIsMC41LDAsMC43cy0wLjUsMC4yLTAuNywwbC02LTYNCgljLTAuMi0wLjItMC4yLTAuNSwwLTAuN2MwLDAsMCwwLDAsMGw2LTZDMTAuOCwxLjUsMTEuMiwxLjQsMTEuNCwxLjZDMTEuNCwxLjYsMTEuNCwxLjYsMTEuNCwxLjZ6Ii8+DQo8L3N2Zz4NCg==);
	transition: all .3s;
}
.navbar-toggler,
.navbar-toggler:hover,
.navbar-toggler:focus {
  border: none;
  outline: none;
  box-shadow: none;
}
.navbar-brand {
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}
.navbar form .form-control {
  border-radius: 3rem;
  border-color: #FFF;
  width: calc(100vw / 6);
  position: relative;
  left: -3rem;
}
.navbar form .btn {
  padding-left: 1rem;
  padding-right: 1rem;
  border-radius: 3rem;
  background-color: #004680;
  color: #FFF;
  border-color: #FFF;
    transition: all .1s;
  position: relative;
  z-index: 999;
}
.navbar form .btn svg {
	position: relative;
	top: -3px
}
.navbar form .btn:hover,
.navbar form .btn:focus {
  background-color: #FFF;
  color: #004680;
  border-color: #FFF;
	transition: all .3s;
}
.alert {
    padding: .25rem;
    color: #FFF;
    border-radius: 3rem;
  text-align: center
}
.progress {
	height: 1.5rem;
  border-radius: 1rem;
  direction: ltr;
}
.progress-bar {
  background-color: #004680;
  color: #FFF;
  font-weight: 600;
	font-size: 1rem;
	height: 1.5rem;
}
.alert-success,
.progress-bar.success-bg {
  background-color: #67B927;
}
.alert-danger,
.progress-bar.danger-bg {
  background-color: #ED140F;
}
.success-txt {
  color: #67B927;
}
.danger-txt {
  color: #ED140F;
}
.success-input {
  border-color: #67B927;
}
.danger-input {
  border-color: #ED140F;
}
form.login-form {
  direction: rtl;
}
form.login-form a,
form.login-form a:focus,
form.login-form a:hover{
    text-decoration: none;
}
form.login-form a:focus,
form.login-form a:hover{
    color: #000
}
.tools li {
    border: none;
    line-height: 1rem!important;
    padding-top: 0
}
.logout, 
.logout:focus, 
.logout:hover {
    color: #FFF;
    text-decoration: none;
    font-size: 1rem
}
.logout:focus, 
.logout:hover {
    opacity: .5
}
.notice {
    text-align: center;
    font-weight: 600;
    padding: 1rem;
    margin: 1rem;
    clear: both
}
.progress-tabs-wrapper {
    display: block;
    min-width: 100%;
    min-height: 5rem
}

.progress-tabs li {
      list-style-type: none;
      width: calc(100% / 4);
    float: right;
    font-size: 1.25rem;
    font-weight: 600;
      position: relative;
      text-align: center;
      text-transform: uppercase;
      color: #7d7d7d;
    cursor: pointer
}
.progress-tabs li {
    font-size: 1rem;
    text-decoration: none
}
.progress-tabs li:before {
    width: 64px;
    height: 64px;
    content: "";
    line-height: 60px;
    border: 2px solid #7d7d7d;
    display: block;
    text-align: center;
    margin: 0 auto 3px auto;
    border-radius: 50%;
    position: relative;
    z-index: 2;
    background-color: #FFF;
}
.progress-tabs li:after {
     width: 100%;
     height: 3px;
     content: '';
     position: absolute;
     background-color: #7d7d7d;
     top: 30px;
     right: -50%;
     z-index: 0;
}
.progress-tabs li:first-child:after {
     content: none;
}
.progress-tabs li.active {
    color: #004680;
    font-weight: bold;  
}
.progress-tabs li.active:before {
    color: #FFF;
    border-color: #004680;
    background: #004680;
 }
.progress-tabs li.active + li:after {
    background-color: #004680;
}
.progress-tabs {
    counter-reset: step;
}
.progress-tabs li:before {
    color: #004680;
    content: counter(step);
    counter-increment: step; 
}
.tab-toggle, .tab-toggle.disabled {
    cursor: inherit;
    font-size: 1rem;
    color: #666;
}
.tab-toggle.active {
    color: #004680;
}
.tooltip-inner {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}
/* file extensions iocns */
.word-doc:before, .excel-doc:before, .pdf-doc:before, .img-doc:before {
    display: inline-block;
    content: "";
    width: 16px;
    height: 16px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover
    
}
.word-doc:before {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0iY3VycmVudENvbG9yIiBjbGFzcz0iYmkgYmktZmlsZS1lYXJtYXJrLXdvcmQiIHZpZXdCb3g9IjAgMCAxNiAxNiI+CiAgPHBhdGggZD0iTTUuNDg1IDYuODc5YS41LjUgMCAxIDAtLjk3LjI0MmwxLjUgNmEuNS41IDAgMCAwIC45NjcuMDFMOCA5LjQwMmwxLjAxOCAzLjczYS41LjUgMCAwIDAgLjk2Ny0uMDFsMS41LTZhLjUuNSAwIDAgMC0uOTctLjI0MmwtMS4wMzYgNC4xNDQtLjk5Ny0zLjY1NWEuNS41IDAgMCAwLS45NjQgMGwtLjk5NyAzLjY1NUw1LjQ4NSA2Ljg4eiIvPgogIDxwYXRoIGQ9Ik0xNCAxNFY0LjVMOS41IDBINGEyIDIgMCAwIDAtMiAydjEyYTIgMiAwIDAgMCAyIDJoOGEyIDIgMCAwIDAgMi0yek05LjUgM0ExLjUgMS41IDAgMCAwIDExIDQuNWgyVjE0YTEgMSAwIDAgMS0xIDFINGExIDEgMCAwIDEtMS0xVjJhMSAxIDAgMCAxIDEtMWg1LjV2MnoiLz4KPC9zdmc+)
}
.excel-doc:before {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0iY3VycmVudENvbG9yIiBjbGFzcz0iYmkgYmktZmlsZS1lYXJtYXJrLWV4Y2VsIiB2aWV3Qm94PSIwIDAgMTYgMTYiPgogIDxwYXRoIGQ9Ik01Ljg4NCA2LjY4YS41LjUgMCAxIDAtLjc2OC42NEw3LjM0OSAxMGwtMi4yMzMgMi42OGEuNS41IDAgMCAwIC43NjguNjRMOCAxMC43ODFsMi4xMTYgMi41NGEuNS41IDAgMCAwIC43NjgtLjY0MUw4LjY1MSAxMGwyLjIzMy0yLjY4YS41LjUgMCAwIDAtLjc2OC0uNjRMOCA5LjIxOWwtMi4xMTYtMi41NHoiLz4KICA8cGF0aCBkPSJNMTQgMTRWNC41TDkuNSAwSDRhMiAyIDAgMCAwLTIgMnYxMmEyIDIgMCAwIDAgMiAyaDhhMiAyIDAgMCAwIDItMnpNOS41IDNBMS41IDEuNSAwIDAgMCAxMSA0LjVoMlYxNGExIDEgMCAwIDEtMSAxSDRhMSAxIDAgMCAxLTEtMVYyYTEgMSAwIDAgMSAxLTFoNS41djJ6Ii8+Cjwvc3ZnPg==)   
}
.pdf-doc:before {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0iY3VycmVudENvbG9yIiBjbGFzcz0iYmkgYmktZmlsZS1lYXJtYXJrLXBkZiIgdmlld0JveD0iMCAwIDE2IDE2Ij4KICA8cGF0aCBkPSJNMTQgMTRWNC41TDkuNSAwSDRhMiAyIDAgMCAwLTIgMnYxMmEyIDIgMCAwIDAgMiAyaDhhMiAyIDAgMCAwIDItMnpNOS41IDNBMS41IDEuNSAwIDAgMCAxMSA0LjVoMlYxNGExIDEgMCAwIDEtMSAxSDRhMSAxIDAgMCAxLTEtMVYyYTEgMSAwIDAgMSAxLTFoNS41djJ6Ii8+CiAgPHBhdGggZD0iTTQuNjAzIDE0LjA4N2EuODEuODEgMCAwIDEtLjQzOC0uNDJjLS4xOTUtLjM4OC0uMTMtLjc3Ni4wOC0xLjEwMi4xOTgtLjMwNy41MjYtLjU2OC44OTctLjc4N2E3LjY4IDcuNjggMCAwIDEgMS40ODItLjY0NSAxOS42OTcgMTkuNjk3IDAgMCAwIDEuMDYyLTIuMjI3IDcuMjY5IDcuMjY5IDAgMCAxLS40My0xLjI5NWMtLjA4Ni0uNC0uMTE5LS43OTYtLjA0Ni0xLjEzNi4wNzUtLjM1NC4yNzQtLjY3Mi42NS0uODIzLjE5Mi0uMDc3LjQtLjEyLjYwMi0uMDc3YS43LjcgMCAwIDEgLjQ3Ny4zNjVjLjA4OC4xNjQuMTIuMzU2LjEyNy41MzguMDA3LjE4OC0uMDEyLjM5Ni0uMDQ3LjYxNC0uMDg0LjUxLS4yNyAxLjEzNC0uNTIgMS43OTRhMTAuOTU0IDEwLjk1NCAwIDAgMCAuOTggMS42ODYgNS43NTMgNS43NTMgMCAwIDEgMS4zMzQuMDVjLjM2NC4wNjYuNzM0LjE5NS45Ni40NjUuMTIuMTQ0LjE5My4zMi4yLjUxOC4wMDcuMTkyLS4wNDcuMzgyLS4xMzguNTYzYTEuMDQgMS4wNCAwIDAgMS0uMzU0LjQxNi44NTYuODU2IDAgMCAxLS41MS4xMzhjLS4zMzEtLjAxNC0uNjU0LS4xOTYtLjkzMy0uNDE3YTUuNzEyIDUuNzEyIDAgMCAxLS45MTEtLjk1IDExLjY1MSAxMS42NTEgMCAwIDAtMS45OTcuNDA2IDExLjMwNyAxMS4zMDcgMCAwIDEtMS4wMiAxLjUxYy0uMjkyLjM1LS42MDkuNjU2LS45MjcuNzg3YS43OTMuNzkzIDAgMCAxLS41OC4wMjl6bTEuMzc5LTEuOTAxYy0uMTY2LjA3Ni0uMzIuMTU2LS40NTkuMjM4LS4zMjguMTk0LS41NDEuMzgzLS42NDcuNTQ3LS4wOTQuMTQ1LS4wOTYuMjUtLjA0LjM2MS4wMS4wMjIuMDIuMDM2LjAyNi4wNDRhLjI2Ni4yNjYgMCAwIDAgLjAzNS0uMDEyYy4xMzctLjA1Ni4zNTUtLjIzNS42MzUtLjU3MmE4LjE4IDguMTggMCAwIDAgLjQ1LS42MDZ6bTEuNjQtMS4zM2ExMi43MSAxMi43MSAwIDAgMSAxLjAxLS4xOTMgMTEuNzQ0IDExLjc0NCAwIDAgMS0uNTEtLjg1OCAyMC44MDEgMjAuODAxIDAgMCAxLS41IDEuMDV6bTIuNDQ2LjQ1Yy4xNS4xNjMuMjk2LjMuNDM1LjQxLjI0LjE5LjQwNy4yNTMuNDk4LjI1NmEuMTA3LjEwNyAwIDAgMCAuMDctLjAxNS4zMDcuMzA3IDAgMCAwIC4wOTQtLjEyNS40MzYuNDM2IDAgMCAwIC4wNTktLjIuMDk1LjA5NSAwIDAgMC0uMDI2LS4wNjNjLS4wNTItLjA2Mi0uMi0uMTUyLS41MTgtLjIwOWEzLjg3NiAzLjg3NiAwIDAgMC0uNjEyLS4wNTN6TTguMDc4IDcuOGE2LjcgNi43IDAgMCAwIC4yLS44MjhjLjAzMS0uMTg4LjA0My0uMzQzLjAzOC0uNDY1YS42MTMuNjEzIDAgMCAwLS4wMzItLjE5OC41MTcuNTE3IDAgMCAwLS4xNDUuMDRjLS4wODcuMDM1LS4xNTguMTA2LS4xOTYuMjgzLS4wNC4xOTItLjAzLjQ2OS4wNDYuODIyLjAyNC4xMTEuMDU0LjIyNy4wOS4zNDZ6Ii8+Cjwvc3ZnPg==)
}
.img-doc:before {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0iY3VycmVudENvbG9yIiBjbGFzcz0iYmkgYmktZmlsZS1lYXJtYXJrLWltYWdlIiB2aWV3Qm94PSIwIDAgMTYgMTYiPgogIDxwYXRoIGQ9Ik02LjUwMiA3YTEuNSAxLjUgMCAxIDAgMC0zIDEuNSAxLjUgMCAwIDAgMCAzeiIvPgogIDxwYXRoIGQ9Ik0xNCAxNGEyIDIgMCAwIDEtMiAySDRhMiAyIDAgMCAxLTItMlYyYTIgMiAwIDAgMSAyLTJoNS41TDE0IDQuNVYxNHpNNCAxYTEgMSAwIDAgMC0xIDF2MTBsMi4yMjQtMi4yMjRhLjUuNSAwIDAgMSAuNjEtLjA3NUw4IDExbDIuMTU3LTMuMDJhLjUuNSAwIDAgMSAuNzYtLjA2M0wxMyAxMFY0LjVoLTJBMS41IDEuNSAwIDAgMSA5LjUgM1YxSDR6Ii8+Cjwvc3ZnPg==)
}
/* Responsive ROLES */
@media only screen and (max-width:785px) {
    header {
        padding-top: 2rem
    }
  .container {
    width: 100%;
    padding: 0
  }
  .navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    border-radius: 0;
    z-index: 999;
  }
ul.list-group,
ul.list-group li {
  font-size: 1.25rem;
  line-height: 2.5rem;
}
    .default-form {
        max-width: 90%;
        margin: 0 auto
    }
form .form-control {
  background-color: #F1F1F1;
  background: linear-gradient(0deg, #F1F1F1 0%, #FFFFFF 100%);
  border: 1px solid #ced4da;
  -webkit-transition: all .3s ease;
  transition: all .3s ease;
}
.navbar form .form-control {
  width: calc(100vw / 1.25);
  left: auto;
}
.dropdown-menu .dropdown-item {
  white-space:initial
}
.navbar-collapse.show .navbar-nav {
    min-height: 12rem;
}
ul.pagination .page-link.page-prev:before,
ul.pagination .page-link.page-next:after {
		display: block;
		margin: 0 auto;
		top: 0
	}
    .progress {
        max-width: 90%;
        margin: 0 auto
    }
    .tab-toggle, .tab-toggle.disabled {
        font-size: .8em
    }
    
.text-left .logo-hna-maak,
.text-right .logo-arrondissement {
    margin: 0 auto;
    float: none
}
    p.label {
        padding: 0 1rem
    }
    
    h3.bg-danger.w-100 {
        max-width: calc(100vw - 32px)
    }
}
/* Dark MODE */
@media (prefers-color-scheme: dark) {
  body {
    color: #000;
    background-color: #FFF;
  }
}
/* Print  */
@media print {
    body {
  font-size: 1rem;
  margin: 2mm;
}
  header, .navbar, .progress, .pagination, .vote-form, .tools, h1, h2, .label, .attachements, hr, .tooltip {
    display: none;
      visibility: hidden
  }
    
.content {
    min-height: inherit;
  border-bottom: none;
    padding-top: 0
}
    p.text-left {
        font-size: .5rem;
        text-align: right
    }   
ul.list-group,
ul.list-group li {
  font-size: .95rem;
  line-height: 1.6rem;
}
}
/* CSS3 animations */
.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  0% {
    -webkit-transform: rotate(-360deg);
    transform: rotate(-360deg);
  }
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  0% {
    transform: rotate(-360deg);
  }
}
@-webkit-keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@-webkit-keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}