@import url('https://fonts.googleapis.com/css2?family=Amiri:ital,wght@0,400;0,700;1,400;1,700&family=Lateef:wght@200;300;400;500;600;700;800&family=Noto+Naskh+Arabic:wght@400..700&family=Scheherazade+New:wght@400;500;600;700&display=swap');
@import url("https://fonts.googleapis.com/css2?family=Economica:wght@400;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Play:wght@400;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap');

body {
   font-size: 16px;
   font-family: "Open Sans", sans-serif !important;
   --iadn_dark: #213d5d;
   --iadn_light: linear-gradient(#aaa, #555);
   --iadn_hover: linear-gradient(#f1fbff, #d7e9ff);
   --iadn_beige: #fff5e3;
   font-weight: 500;
}

.scheherazade {
   font-family: "Scheherazade New", serif;
   font-size: 17pt;
   line-height: 20px;
}

.noto {
   font-family: "Noto Naskh Arabic", serif;
   font-optical-sizing: auto;
   font-style: normal;
   font-size: 17pt;
   line-height: 20px;
}

.lateef {
   font-family: "Lateef", serif;
   font-size: 17pt;
   line-height: 20px;
}

.amiri {
   font-family: "Amiri", serif;
   font-size: 17pt;
   line-height: 20px;
}

/*
*	CHARTE IADN
*/
.col-iadn-dark {
   color: var(--iadn_dark);
}

.bg-iadn-dark {
   background: var(--iadn_dark);
   color: #fff;
}

.col-iadn-light {
   color: #777;
}

.bg-iadn-light {
   background: var(--iadn_light) !important;
   color: #fff !important;
}

.bg-iadn-beige {
   background: var(--iadn_beige) !important;
   color: var(--iadn_dark) !important;
}

.bg-iadn-hover {
   background: var(--iadn_hover);
   color: var(--iadn_dark);
}

.btn-iadn {
   display: inline-block;
   padding: 6px 12px;
   margin-bottom: 3px;
   font-size: 13px;
   font-weight: normal;
   line-height: 1.42857143;
   text-align: center;
   white-space: nowrap;
   vertical-align: middle;
   cursor: pointer;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
   background-image: none;
   border: 1px solid transparent;
   border-radius: 4px;
   outline: none !important;
   text-decoration: none !important;
}

.btn-iadn-light {
   background: var(--iadn_light);
   color: #fff;
}

.btn-iadn-light:hover,
.btn-iadn-dark:hover,
.btn-iadn-hover,
.bg-iadn-grady {
   color: var(--iadn_dark);
   background: var(--iadn_hover);
   text-decoration: none;
   border: 1px solid #ddd;
}

.btn-iadn-dark {
   background: var(--iadn_dark) !important;
   color: #fff !important;
}

.btn-iadn[disabled] {
   background: #ddd;
   color: #fff;
}

.btn-iadn[disabled]:hover {
   cursor: not-allowed;
   background: #ddd;
   color: #fff;
}

.btn-iadn-hover:hover {
   background: linear-gradient(#fff, #eee);
   border: 1px solid #bbb;
}

.btn-small {
   padding: 0;
}

.btn-medium {
   padding: 4px 3px;
}

.btn-action {
   color: var(--iadn_dark) !important;
   cursor: pointer !important;
   font-size: 14pt;

   &:hover {
      color: #d00 !important;
   }
}

.grady-light {
   background: linear-gradient(#fff, #ccc) !important;
}

.grady-red {
   background: linear-gradient(#f00, #a00);
   color: #fff;
}

.grady-green {
   background: linear-gradient(#00ef28, #01530f);
   color: #fff;
}

.grady-lightblue {
   background: linear-gradient(#96c4ff, #3786eb) !important;
   color: #fff;
}

.labelBlue {
   font-size: 8pt;
   font-weight: 600;
   color: royalblue;
}

.img-iadn {
   width: 220px;
   height: 220px;
   background: #f9f9f9;
   padding: 10px;
   border: 1px solid #ddd;
   text-align: center;
   border: 1px solid #ddd;
   margin: auto;
   border-radius: 5px;
}

.img-iadn img {
   max-width: 200px;
   max-height: 200px;
}

.img-iadn:hover {
   background: #d2e5fa;
   border: 1px solid #74a3da;
   cursor: pointer;
}

.nombre {
   font-family: "Open Sans", sans-serif !important;
}

.no-padding {
   padding: 0 !important;
}

.border {
   border: 1px solid #ddd;
}

.rounded {
   border-radius: 5px;
}

select {
   cursor: pointer;
}

input[type="color"] {
   -webkit-appearance: none;
   padding: 3px;
}

input[type="color"]::-webkit-color-swatch-wrapper {
   padding: 0;
}

input[type="color"]::-webkit-color-swatch {
   border: none;
}

.cardProfil {
   padding: 10px;
   border-radius: 5px;
   box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
   margin: 0 10px 20px 0;
   border: 1px solid #ddd;
}

.cardProfil table h3,
.cardProfil table h5,
.cardProfil table h6 {
   margin: 3px;
}

.cardProfil table h3 {
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;
   font-size: calc(10px + 1vw);
   max-width: 210px;
}

.cardProfil table h5 {
   color: #777;
}

.cardProfilHover {
   transition: all .2s;

   &:hover {
      cursor: pointer;
      transform: scale(0.98);
      border: 1px solid #aaa;
   }
}

.messAlert {
   color: #f00;
   font-weight: 600;
   font-size: 10pt;
}

.clignoter {
   animation-name: flash;
   animation-duration: 2s;
   -webkit-animation-iteration-count: infinite;
   animation-iteration-count: infinite;
}

.div_hover {
   white-space: nowrap;
   overflow: hidden;
   border: 1px solid transparent;
   width: 100%;
   border-radius: 3px;
   padding-top: 2px;

   &:hover {
      border: 1px solid var(--iadn_dark);
      background: var(--iadn_hover);
      cursor: pointer;
   }
}

.div_hover label {
   text-overflow: ellipsis;
}

.creneau {
   border: 1px solid #ccc;
   background: #f8f8f8;
   padding: 5px;
   margin-bottom: 3px;
   border-radius: 5px;
   transition: all .2s;
   z-index: 10;

   &:hover {
      transform: scale(0.98);
      border: 1px solid #ddd;
   }
}

/* réunion parent/profs */
.rppCrenaux, .rppCrenauxDisabled {
   display: inline-block;
   vertical-align: top;
   width: 24.5%;
   min-width: 250px;
   border: 1px solid #ccc;
   background: #f8f8f8;
   margin-bottom: 3px;
   border-radius: 5px;
}

.rppCrenaux {
   transition: all .2s;
   cursor: pointer;
}

.rppCrenauxDisabled {
   cursor: not-allowed;
   pointer-events: none;
   opacity: .6;
}

.rppCrenaux:hover {
   transform: scale(0.98);
   border: 1px solid #ddd;
}

.rppCrenaux h5 {
   text-align: center;
   color: var(--iadn_dark);
   font-size: 13pt;
   margin: 0;
   padding: 7px;
   font-weight: 600;
   border-top-left-radius: 5px;
   border-top-right-radius: 5px;
}

.rppCrenaux div {
   text-align: center;
   padding: 10px;
}

.pointer {
   cursor: pointer;
}

.cours-study {
   display: inline-block;
   vertical-align: top;
   background: linear-gradient(#fff, #eee);
   border: 1px solid #ddd;
   border-radius: 5px;
   margin: 0 10px 10px 0;
   width: 250px;
   box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

.cours-study-header {
   padding: 10px;
   background: var(--iadn_hover);
}

.cours-study-body, .cours-study-footer {
   padding: 10px;
}

.no-depass-text {
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
}

.card-event {
   width: 330px;
   display: inline-block;
   vertical-align: top;
   margin: 0 10px 30px 0;
   border: 1px solid #ddd;
   border-radius: 5px;
   font-size: 11pt;
}

.card-event h4 {
   background: var(--iadn_dark);
   text-align: center;
   margin: 0;
   padding: 5px 5px 15px;
   color: #fff;
   border-radius: 5px 5px 0 0;
}

.card-event img {
   max-width: 100%;
   max-height: 150px;
   padding: 5px 2px;
}

.card-event section {
   text-align: left;
   padding: 5px;
}

.card-event-horo {
   text-align: center;
   background: var(--iadn_hover);
   padding: 10px 0;
   border-top: 1px solid #ddd;
}

.btn-member {
   display: inline-block;
   padding: 6px 12px;
   margin-bottom: 3px;
   font-weight: normal;
   line-height: 1.42857143;
   text-align: center;
   white-space: nowrap;
   vertical-align: middle;
   cursor: pointer;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
   background-image: none;
   border: 1px solid transparent;
   border-radius: 4px;
   outline: none !important;
   text-decoration: none !important;
   background: var(--iadn_dark);
   color: #fff;
   width: 150px !important;

   &:hover {
      background: var(--iadn_hover);
      border: 1px solid var(--iadn_dark);

   }
}

.btn-member i {
   font-size: 30pt !important;
}

.btn-member div {
   text-transform: capitalize;
}

.btn-member-count {
   position: absolute;
   margin-left: 60px;
   background: #e76464;
   padding: 0 10px;
   border-radius: 20px;
   color: #fff;
   font-size: 10pt;
   font-weight: 600;
}

#contentAya {
   direction: rtl;
   text-align: justify;
}

.arabe-div {
   display: inline;
}

.raqmAya {
   border: 2px solid #8e9fb9;
   border-radius: 200px;
   padding: 5px 7px;
   background: radial-gradient(#fff 40%, #ababff);
   font-weight: 600;
   color: #4e80cf;
}

.textAya {
   font-family: "Scheherazade New", serif;
   font-size: 17pt;
   line-height: 50px;
}

.sidebarEvals {
   position: sticky !important;
   top: 0;
   z-index: 100;
   padding: 10px;
   box-shadow: rgba(0, 0, 0, 0.55) 0px 3px 8px;
   display: flex;
   justify-content: space-between;
   align-items: center;
   width: 100%;
   border: 1px solid #ccc;
}

.sidebarEvals-chrono {
   font-size: 17pt;
   color: #1b6fcfff;
}

.totauxInput {
   width: 100%;
   color: #ffffb5;
   text-align: center;
   font-size: 17pt;
   padding: 5px 0;
   border-radius: 5px;
   border: 2px inset #777;
   background: var(--iadn_light);
}

.divHoraires {
   width: 160px;
}

.setFlash {
   margin-bottom: 10px;
   cursor: pointer;
   -webkit-animation: slide-down 0.5s ease-out;
   -moz-animation: slide-down 0.5s ease-out;
}

.cellHoverSalaire {
   transition: all .4s;
}

.cellHoverSalaire:hover {
   background: linear-gradient(#fff5ec, #f8ddc5) !important;
   cursor: pointer;
   transform: scale(1.2);
   border-radius: 5px;
   box-shadow: inset 0 0 3px #ff9941;
}

.cellHoverSalaire a {
   text-decoration: none;
}

@supports ((position: -webkit-sticky) or (position: sticky)) {
   .sticky-top {
      position: -webkit-sticky;
      position: sticky;
      top: -2px;
      z-index: 1020;
   }

   .sticky-bottom {
      position: -webkit-sticky;
      position: sticky;
      bottom: -1px;
      z-index: 1020;
   }
}

.row-squiz {
   margin-left: -5px;
   margin-right: -5px;
}

.row-squiz>[class*="col-"] {
   padding-left: 5px;
   padding-right: 5px;
}

.modal-mini {
   width: 380px;
}

@media (max-width: 420px) {
   .modal-mini {
      width: 95%;
      margin: 10px auto;
   }
}

/*============================================
	SCROLLBAR		 
=============================================*/
::-webkit-scrollbar {
   width: 6px !important;
   height: 6px !important;
}

::-webkit-scrollbar-track {
   box-shadow: inset 0 0 3px var(--iadn_light);
   background: #f8f8f8;
}

::-webkit-scrollbar-thumb {
   border: 1px solid #bbb;
   background: #ccc;
}

::-webkit-scrollbar-thumb:hover {
   border: 1px solid #fff;
   background: var(--iadn_dark);
}

.Link {
   color: royalblue;
}

.Link:hover,
.Link:active {
   text-decoration: none;
   color: #e00;
   font-weight: 500;
}

.loginForm {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   width: 300px;
   text-align: center;
   animation-name: fadeIn;
   animation-duration: 2.5s;
}

.loginForm img {
   display: block;
   margin: 20px auto;
   width: 90px;
}

.loginForm h3 {
   color: var(--iadn_dark);
   font-size: 35px;
   font-weight: bold;
   margin: 20px 0 10px;
}

.login-subtitle-top,
.login-subtitle-bottom {
   color: var(--iadn_dark);
   font-size: 17px;
   font-weight: 500;
}

.login-subtitle-bottom {
   margin: 20px 0 10px;
}

.login-content {
   color: var(--iadn_dark);
   font-size: 17px;
   padding: 20px 0;
}

.login-forget {
   text-decoration: none !important;
   font-weight: 500;
}

.register-content {
   width: 350px;
   margin: auto;
   font-size: 11pt;
   font-weight: 500;
   text-align: left;
}

.register-genre {
   text-align: center;
   padding: 4px 0;
   border-radius: 4px;
   background: #f8f8f8;
}

#page-wrapper {
   padding: 15px;
   background: #fff;
   margin-bottom: 100px !important;
}

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

.no-boder {
   border: 1px solid #f3f3f3;
}

.titre-page {
   color: var(--iadn_dark);
   font-size: 35px;
   margin-top: 0;
   text-transform: capitalize;
}

.titre-col {
   text-align: center;
   background: var(--iadn_hover);
   padding: 10px;
   border: 1px solid #ddd;
   margin-bottom: 10px;
   text-transform: uppercase;
}

.titre-sections {
   text-align: center;
   background: var(--iadn_dark);
   padding: 10px;
   border: 1px solid #ddd;
   margin-bottom: 10px;
   text-transform: uppercase;
   color: #fff;
   border-radius: 5px;
}

h4 {
   padding-top: 10px;
}

.square-btn-adjust {
   border: 0px solid transparent;
   -webkit-border-radius: 0px;
   -moz-border-radius: 0px;
   border-radius: 0px;
}

p {
   font-size: 16px;
   line-height: 25px;
   padding-top: 20px;
}

button {
   outline: none;
   cursor: pointer;
}

.bg-table-form,
.bg-table-form td {
   background: #fffbe9 !important;
   border-color: transparent !important;
}

#session_selected {
   font-size: 19pt;
   height: 50px;
   text-align: center;
   background: var(--iadn_dark);
   color: #fff;
}

#renduCouleurs {
   max-width: 250px;
   padding: 7px 0;
   background: #fff;
   text-align: center;
   border: 1px solid #ddd;
   border-radius: 5px;
}

#cpv {
   max-height: 150px;
   background: #fcfcfc;
   overflow-y: scroll;
}

#cpv div {
   padding: 3px 15px;
   border-bottom: 1px dotted #ddd;
}

#cpv div:hover {
   cursor: pointer;
   background: #ddd;
}

.emptyLogo {
   display: block;
   width: 75px;
   margin: 30px auto;
}

.manuel {
   border-radius: 7px;
   border: 1px solid #ddd;
   background: #fcfcfc;
   width: 180px;
   display: inline-block;
   vertical-align: top;
   margin: 0 5px 5px 0;
   padding: 10px;
}

.manuel img {
   width: 155px;
   height: 200px;
   display: block;
   margin: auto;
   border-radius: 7px;
   border: 1px solid #ddd;
   background: #fff;
}

.manuel section {
   display: flex;
   align-items: center;
   justify-content: space-around;
   margin: 5px 0;
   background: #e5eef3;
   border-radius: 7px;
   padding: 3px 15px;
   width: 100%;
}

.grady-box {
   font-weight: 600;
   padding: 15px 0;
   background: linear-gradient(#fdfdfd, #eee);
   border: 1px solid #ddd;
   border-radius: 3px;
}

.hr {
   height: 1px;
   background: #e32a2a;
   border: none;
}

.card-qcm {
   border: 1px solid #ddd;
   border-radius: 5px;
   margin-bottom: 10px;
}

.card-qcm:hover {
   background: #f3f9ff;
   cursor: pointer;
   border: 1px solid #ccc;
   box-shadow: 0 0 5px #ccc;
}

.card-qcm-titre {
   font-size: 13pt;
   padding: 10px;
   background: var(--iadn_beige);
   border-radius: 5px 5px 0 0;
   border-bottom: 1px solid #ddd;
   min-height: 80px;
}

.card-qcm-chrono {
   color: #d00;
   font-size: 15pt;
   margin-top: 10px;
}

.cardEvals {
   border: 1px solid #ddd;
   border-radius: 5px;
   margin-bottom: 70px;
   font-size: 12pt;
}

.row-no-gutters {
   margin-right: 0;
   margin-left: 0;
   display: flex;
   flex-wrap: nowrap;
}

.cardEvals-index, .cardEvals-pts {
   width: 70px;
   box-sizing: border-box;
   padding: 8px;
   min-height: 70px;
   font-size: 21pt;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-direction: column;
}

.cardEvals-ask {
   box-sizing: border-box;
   padding: 8px;
   flex-grow: 1;
   min-height: 70px;
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
}

.cardEvals-ask>div {
   text-align: left;
}

.text-red {
   color: red;
}

.cardEvals-body {
   padding: 20px 20px 0;
}

.cardEvals-footer {
   padding: 10px;
}

.cardEvals-support {
   max-width: 100%;
   max-height: 150px;
   border-radius: 5px;
   box-shadow: rgba(0, 0, 0, 0.3) 2px 2px 8px;
}

.inputTextEval {
   width: 50px;
   border: none;
   border-bottom: 1px solid #aaa;
   margin: 0 10px 10px 0;
   outline: none;
   border-radius: 5px;
}

.inputTextEval:focus {
   background: #fff6d8;
   border: 1px solid #aaa;
}

.cardEvals-left, .cardEvals-right {
   display: inline-block;
   vertical-align: middle;
   margin-bottom: 20px;
}

.cardEvals-left {
   padding: 0 10px;
}

/*============================================
	DASHBOARD STYLES		
=============================================*/
.panel-back {
   background-color: #f8f8f8;
}

.noti-box {
   min-height: 100px;
   padding: 20px;
}

.noti-box .icon-box {
   display: block;
   float: left;
   margin: 0 15px 10px 0;
   width: 70px;
   height: 70px;
   line-height: 75px;
   text-align: center;
   font-size: 40px;
}

.text-box p {
   margin: 0 0 3px;
}

.main-text {
   font-size: 25px;
   font-weight: 600;
}

.set-icon {
   -webkit-border-radius: 50px;
   -moz-border-radius: 50px;
   border-radius: 50px;
}

.bg-color-green {
   background-color: #00ce6f;
   color: #fff;
}

.bg-color-blue {
   background-color: #a95df0;
   color: #fff;
}

.bg-color-red {
   background-color: #db0630;
   color: #fff;
}

.bg-color-brown {
   background-color: #b94a00;
   color: #fff;
}

.icon-box-right {
   display: block;
   float: right;
   margin: 0 15px 10px 0;
   width: 70px;
   height: 70px;
   line-height: 75px;
   text-align: center;
   font-size: 40px;
}

.main-temp-back {
   background: #8702a8;
   color: #ffffff;
   font-size: 16px;
   font-weight: 300;
   text-align: center;
}

.main-temp-back .text-temp {
   font-size: 40px;
}

.back-dash {
   padding: 20px;
   font-size: 20px;
   font-weight: 500;
   -webkit-border-radius: 0px;
   -moz-border-radius: 0px;
   border-radius: 0px;
   background-color: #2ea7eb;
   color: #fff;
}

.back-dash p {
   padding-top: 16px;
   font-size: 13px;
   color: #fff;
   line-height: 25px;
   text-align: justify;
}

.back-footer-green {
   background-color: #009b50;
   border-top: 0px solid #fff;
}

.back-footer-red {
   background-color: #af0000;
   border-top: 0px solid #fff;
}

.color-bottom-txt {
   color: #000;
   font-size: 16px;
   line-height: 30px;
}

/*CHAT PANEL*/
.chat-panel .panel-body {
   height: 450px;
   overflow-y: scroll;
}

.chat-box {
   margin: 0;
   padding: 0;
   list-style: none;
}

.chat-box li {
   margin-bottom: 15px;
   padding-bottom: 5px;
   border-bottom: 1px dotted #808080;
}

.chat-box li.left .chat-body {
   margin-left: 90px;
}

.chat-box li .chat-body p {
   margin: 0;
   color: #8d8888;
}

.chat-img>img {
   margin-left: 20px;
}

.notification {
   position: fixed;
   right: 20px;
   top: 20px;
   padding: 15px;
   color: #fff;
   border-radius: 5px;
   z-index: 9999;
   animation: fadeInNotif 0.3s;
   border: 1px solid #777;
}

.notification.warning {
   background: linear-gradient(#ff4800, #a00) !important;
}

.notification.info {
   background: linear-gradient(#3333ff, #0000aa) !important;
}

.notification.success {
   background: linear-gradient(#11cc00, #0a6102) !important;
}

@keyframes fadeInNotif {
   from {
      opacity: 0;
   }

   to {
      opacity: 1;
   }
}

@keyframes fadeOutNotif {
   from {
      opacity: 1;
   }

   to {
      opacity: 0;
   }
}

.rotated-header {
   transform: rotate(-80deg);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   width: 190px;
   padding-left: 5px;
   position: absolute;
   left: -50px;
   bottom: 93px;
   transform-origin: bottom center;
   text-align: left !important;
}

#CarnetDeNotes th, #CarnetDeNotes td {
   vertical-align: bottom;
   text-align: center;
   position: relative;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}

#CarnetDeNotes th:first-child, #CarnetDeNotes td:first-child {
   text-align: left;
   min-width: 300px;
}

#CarnetDeNotes thead tr:first-child th {
   height: 190px;
}

.inputNote {
   width: 60px;
   border: none;
   border-bottom: 1px solid #aaa;
   outline: none;
   text-align: center;
   border-radius: 5px;
   background: #fff;
}

.inputNote:focus {
   border: none;
   border-bottom: 2px solid #d00;
   background: rgb(255, 240, 209);
}

.divInputNote {
   display: inline-block;
   vertical-align: top;
   padding: 3px;
   border-radius: 5px;
   border: 1px solid #ccc;
   margin-bottom: 3px;

   &:hover {
      background: #eee;
   }
}

.inert {
   pointer-events: none;
}

.linkNote {
   color: #fff;
   text-decoration: none;
}

.linkNote:hover {
   color: #ff0;
   text-decoration: none;
}

.showDetailsNote {
   display: inline-block;
   vertical-align: top;
   font-size: 7pt;
   border: 1px solid #fff;
   border-radius: 5px;
   transition: all .4s;
   z-index: 50;

   &:hover {
      transform: scale(1.2);
      border: 1px solid #00d;
      cursor: pointer;
   }
}

.showDetailsNote div:first-child {
   border-radius: 5px 5px 0 0;
}

.showDetailsNote div:last-child {
   border-radius: 0 0 5px 5px;
}

.crnxHoraire {
   padding: 5px;
   background: #fffbf4;
   border-radius: 5px;
   width: 100%;
   margin-bottom: 3px;
}

.crnxDropdown {
   cursor: pointer;
   background: var(--iadn_hover);
   border-radius: 5px;
   padding: 2px 0 !important;
}

.crnxDropdown:hover {
   background: var(--iadn_light);
   color: #fff;
}

.joursInclus {
   display: inline-block;
   width: 90px;
   border: 1px solid #ddd;
   border-radius: 5px;
   padding: 3px;
   text-align: center;
   font-size: 10pt;
   text-transform: capitalize;
   margin-bottom: 2px;
}

.input-sections {
   height: 25px;
   padding: 0;
   border: none;
   background: transparent;
   box-shadow: none;
}

/*============================================
	MENU STYLES		
=============================================*/
.navbar-cls-top .navbar-brand {
   color: #fff;
   background: var(--iadn_dark);
   width: 260px;
   text-align: center;
   height: 60px;
   font-size: 30px;
   font-weight: 700;
}

.active-menu {
   background-color: #007cad !important;
}

.arrow {
   float: right;
   font-weight: bold;
}

.bi.arrow:before {
   content: "\f284";
}

.active>a>.bi.arrow:before {
   content: "\f282";
}

.nav-second-level li,
.nav-third-level li {
   border-bottom: none !important;
}

.nav-second-level li a {
   padding-left: 37px;
   font-size: 14px !important;
   font-weight: 500 !important;
   background: #fff !important;
   border-right: 7px solid transparent;
}

.nav-second-level li a:hover,
.nav-third-level li a:hover {
   color: var(--iadn_light) !important;
   border-right: 7px solid var(--iadn_dark) !important;
   background: #f2f2f2 !important;
}

.nav-third-level li a {
   padding-left: 65px;
}

.sidebar-collapse,
.sidebar-collapse .nav {
   background: none;
}

.sidebar-collapse .nav {
   padding: 0;
}

.sidebar-collapse .nav>li>a {
   color: var(--iadn_dark);
   background: #f9fafb;
   text-shadow: none;
   font-size: 16px;
   font-weight: 500;
}

.sidebar-collapse>.nav>li>a {
   padding: 15px 10px;
}

.sidebar-collapse>.nav>li>a>i {
   color: var(--iadn_dark);
   font-size: 15pt;
}

.sidebar-collapse .nav>li>a:hover,
.sidebar-collapse .nav>li>a:focus {
   background: var(--iadn_hover);
   outline: 0;
}

.sidebar-logo {
   max-width: 100px;
   max-height: 100px;
   display: block;
   margin: auto;
}

.sidebar-user {
   color: var(--iadn_dark);
   font-size: 16px;
   font-weight: 500;
   width: 100%;
   padding: 10px;
}

.sidebar-user select,
.sidebar-user div {
   color: #555;
   font-size: 12px;
   width: 100%;
   border: none;
   outline: none;
   background: transparent;
   font-weight: 600;
}

.sidebar-user select option,
.sidebar-user div {
   font-weight: 600;
}

.nav-second-level>li>a:before,
.nav-third-level>li>a:before {
   content: "";
   display: block;
   position: absolute;
   top: 20px;
   left: 20px;
   width: 12px;
   height: 1px;
   background: #bebebe;
}

.nav-second-level>li>a:after,
.nav-third-level>li>a:after {
   content: "";
   display: block;
   position: absolute;
   top: 0;
   left: 20px;
   width: 1px;
   height: 100%;
   background: #bebebe;
   z-index: 10;
}

.nav-third-level>li>a:before,
.nav-third-level>li>a:after {
   left: 45px;
}

.nav-second-level>li:last-child>a:after,
.nav-third-level>li:last-child>a:after {
   height: 50%;
}

.navbar-side {
   border: none;
   background-color: #202020;
}

.my-sidebar {
   position: fixed;
   top: 50px;
   width: 260px;
   height: 100vh !important;
   overflow-y: auto;
   background-color: #f9fafb;
   color: var(--iadn_dark);
   padding-bottom: 100px;
}

#sidebar-search,
#sidebar-select {
   margin: 10px;
}

.navbar-cls-top {
   border-bottom: none;
   position: sticky;
   top: 0;
   z-index: 2;
   background: #f9fafb;
}

.titre-bartop {
   font-size: 16px;
   font-weight: 600;
   display: inline-block;
   color: var(--iadn_dark);
   margin-left: 10px;
}

.btn-profil {
   margin: 7px;
   float: right;
}

.btn-bartop-i {
   font-size: 25px;
   margin: 5px 0 0 5px;
   color: var(--iadn_dark);
}

.btn-bartop-i:hover {
   color: var(--iadn_light);
   cursor: pointer;
}

.navbar-left {
   margin-left: 10px;
}

.navbar-right {
   margin-right: 10px;
}

#navbar-toggle {
   display: none;
}

@media (max-width: 350px) {
   .titre-bartop {
      display: none;
   }
}

@media (max-width: 768px) {
   .my-sidebar {
      position: fixed;
      top: 50px;
      width: 100%;
      min-width: 350px;
      background-color: #f9fafb;
      z-index: 5;
   }

   #navbar-toggle {
      display: inline-block;
   }
}

.nav>li>a>i {
   margin-right: 10px;
}

.form-label {
   font-size: 13px;
   color: var(--iadn_dark);
   font-weight: 600;
   margin-bottom: 3px;
}

.form-textarea {
   resize: vertical;
}

.form-btn-footer {
   text-align: right;
   margin-top: 20px;
}

.form-checkbox,
.form-radio {
   height: 25px;
   width: 25px;
   vertical-align: middle !important;
   cursor: pointer;
   margin: 0 2px 0 5px !important;
}

.form-span {
   display: inline-block;
   vertical-align: bottom !important;
   cursor: pointer;
   margin-right: 20px !important;
   color: var(--iadn_light);
}

.form-error {
   color: #d00;
   font-size: 13px;
   font-weight: 500;
}

.swal2-popup {
   padding: 0 20px 30px;
   min-width: 350px;
   width: 50%;
   max-width: 500px;
}

.swal2-title {
   color: #e14545;
}

.swal2-confirm {
   margin-left: 5px;
}

.swal2-confirm:active,
.swal2-cancel:active,
.swal2-confirm:focus,
.swal2-cancel:focus {
   outline: none !important;
}

.swal2-confirm:hover {
   margin-left: 5px;
}

.swal2-html-container {
   font-size: 12pt !important;
   margin-bottom: 20px !important;
   color: #4a879f !important;
}

.etape {
   background: var(--iadn_dark);
   color: #fff;
   font-size: 15pt !important;
   line-height: 35px !important;
   margin: 20px auto;
   font-family: "Open Sans", sans-serif !important;
}

.search-control {
   display: inline-block;
   vertical-align: top;
   width: 135px;
   margin-right: 5px;
}

.search-label {
   font-size: 10pt;
   color: var(--iadn_dark);
   padding: 0 0 0 5px;
   margin-bottom: -1px;
   font-weight: 500;
}

#Raccourcis {
   display: none;
   position: fixed;
   top: 50px;
   left: 10px;
   width: 99%;
   z-index: 5;
   padding: 5px 10px 3px;
   border: 1px solid #bbb;
   border-radius: 5px;
   background: linear-gradient(#f8f8f8, #ddd);
   -webkit-animation: slide-down 0.5s ease-out;
   -moz-animation: slide-down 0.5s ease-out;
   font-weight: 600;
   box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px,
      rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
}

#Raccourcis fieldset {
   display: inline-block;
   vertical-align: top;
}

#Raccourcis legend {
   font-weight: 600;
}

.btn-rac {
   background: var(--iadn_hover);
   display: inline-block;
   padding: 9px 0 3px;
   width: 75px;
   border: 1px solid #aaa;
   border-radius: 5px;
   margin-right: 2px;
   font-size: 8pt;
   text-align: center;
   line-height: 10pt;
   vertical-align: top;
   font-weight: 600;

   &:hover {
      background: linear-gradient(#7bd3f7, #1b3453);
      color: #fff;
      cursor: pointer;
   }
}

.btn-rac i {
   font-size: 25pt;
}

.btn-rac div {
   margin-top: 5px;
}

@-webkit-keyframes slide-down {
   0% {
      opacity: 0;
      -webkit-transform: translateY(-100%);
   }

   100% {
      opacity: 1;
      -webkit-transform: translateY(0);
   }
}

@-moz-keyframes slide-down {
   0% {
      opacity: 0;
      -moz-transform: translateY(-100%);
   }

   100% {
      opacity: 1;
      -moz-transform: translateY(0);
   }
}

.calendarClasse {
   display: inline-block;
   vertical-align: top;
   width: 32%;
   margin: 1px;
   border: 1px solid #ddd;
   padding: 5px;
   border-radius: 5px;
   text-align: center;
}

.divDiscussion {
   margin-bottom: 10px;
}

.divLeftDiscussion {
   padding: 10px;
   border-bottom: 1px solid #ddd;
   border-radius: 5px;
   transition: ease-in .3s;
}

.divLeftDiscussion:hover {
   background: #eee;
   cursor: pointer;
   box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
}

.divLeftDiscussion img {
   height: 50px;
   border: 1px solid #777;
   border-radius: 50px;
   padding: 3px;
   float: left;
   margin-right: 10px;
}

.divLeftDiscussionMessage {
   font-size: 10pt;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}

.divRightDiscussion {
   margin: 2px 2px 0 10px;
   background: #fff;
   padding: 5px;
   border-radius: 5px;
   border: 1px solid #ddd;
   transition: all .3s;
}

.divRightDiscussion:hover {
   transform: scale(1.15);
   background: #dff0d8;
}

.divMessagerie {
   border-radius: 5px;
   padding: 7px 10px;
   text-align: left;
   font-size: 11pt;
   margin-bottom: 5px;
}

.slides {
   position: relative;
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
   min-height: 300px;
   display: flex;
   align-items: center;
}

.slide-content {
   text-align: left;
   padding: 30px;
   width: 100%;
   max-width: 500px;
   margin: auto;
}

.slide-content h6 {
   text-transform: uppercase;
   letter-spacing: 2px;
   opacity: .9;
   font-weight: 600;
   margin-bottom: .5rem !important;
}

.slide-content h1 {
   font-size: clamp(1.8rem, 4vw, 3rem);
   font-weight: 800;
   margin: .5rem 0 !important;
   line-height: 1.05;
   color: var(--iadn_lighter);
   text-shadow: 3px 3px 2px #333;
}

.slide-content p {
   color: rgba(255, 255, 255, .92);
   font-size: 1.3rem;
   margin-bottom: 1.25rem;
}

.slide-footer {
   margin-bottom: 10px;
}

.newsletter {
   display: inline-block;
   border: 1px solid #ddd;
   border-radius: 5px;
   padding: 4px 7px;
   width: 200px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}

/*============================================
	CARD-AGENDA
=============================================*/
.card-Agenda {
   display: flex;
   align-items: stretch;
   border: 1px solid #d4d4d4;
   border-radius: 10px;
   overflow: hidden;
   background: #ffffff;
   box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
   margin-bottom: 3px;
}

.card-Agenda-l {
   flex: 1;
   background: #f2f2f2;
   padding: 14px;
   display: flex;
   flex-direction: column;
   justify-content: center;
}

.card-Agenda-l-title {
   font-size: 1.5rem;
   font-weight: 600;
   margin-bottom: 6px;
   color: var(--iadn_dark);
}

.card-Agenda-l-info {
   font-size: 1.2rem;
   color: #777;
}

.card-Agenda-r {
   font-family: "Oswald", sans-serif;
   background: #e8f2ff;
   padding: 10px;
   min-width: 70px;
   border-left: 4px solid #5fa8ff;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
}

.card-Agenda-j,
.card-Agenda-m {
   font-size: 1rem;
   text-transform: uppercase;
   letter-spacing: .5px;
   font-weight: 500;
}


.card-Agenda-d {
   font-size: 3.5rem;
   font-weight: 700;
   line-height: 1.3;
   color: var(--iadn_dark);
}

/*============================================
	UI ELEMENTS STYLES
=============================================*/
.btn-circle {
   width: 50px;
   height: 50px;
   padding: 6px 0;
   -webkit-border-radius: 25px;
   -moz-border-radius: 25px;
   border-radius: 25px;
   text-align: center;
   font-size: 12px;
   line-height: 1.428571429;
}

/*============================================
	MEDIA QUERIES		 
=============================================*/
@media (min-width: 768px) {
   #page-wrapper {
      margin: 0 0 0 260px;
      padding: 15px 30px;
      min-height: 100vh;
   }

   .navbar-side {
      z-index: 1;
      position: absolute;
      width: 260px;
   }

   .navbar {
      border-radius: 0px;
   }
}

/*============================================
	AFFICHER LA DATE		 
=============================================*/
#horodatage {
   text-align: right;
   line-height: 17pt;
   color: var(--iadn_dark);
}

#aujourdhui {
   text-transform: capitalize;
   font-size: 13pt;
   font-family: "Economica", sans-serif;
   font-weight: 600;
}

#heure {
   font-size: 18pt;
   letter-spacing: 1px;
   font-family: "Play", sans-serif;
}

/*-----------------------------------------------
	LOADER
-----------------------------------------------*/
#Wait {
   display: none;
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   min-height: 100vh;
   text-align: center;
   width: 100%;
   color: var(--iadn_dark);
}

#Wait section {
   margin: 40vh auto 0;
}

#Wait section div {
   font-weight: 600;
}

#Wait section span {
   color: var(--iadn_light);
}

.Div_loader {
   width: 120px;
   height: 120px;
   margin: 20px auto;
}

.Div_loader img {
   position: absolute;
   width: 80px;
   margin: 17px 0 0 -40px;
   z-index: 5;
}

.loader {
   border: 1px solid var(--iadn_light);
   border-radius: 50%;
   border-top: 1px solid var(--iadn_dark);
   width: 120px;
   height: 120px;
   -webkit-animation: loader_spin 1s linear infinite;
   animation: loader_spin 1s linear infinite;
   background: #fafafa;
}

@-webkit-keyframes loader_spin {
   0% {
      -webkit-transform: rotate(360deg);
   }

   100% {
      -webkit-transform: rotate(0deg);
   }
}

@keyframes loader_spin {
   0% {
      transform: rotate(360deg);
   }

   100% {
      transform: rotate(0deg);
   }
}

/*-----------------------------------------------
	BOUTON MANUEL
-----------------------------------------------*/
.checkbox-wrapper .tgl {
   display: none;
}

.checkbox-wrapper .tgl,
.checkbox-wrapper .tgl:after,
.checkbox-wrapper .tgl:before,
.checkbox-wrapper .tgl *,
.checkbox-wrapper .tgl *:after,
.checkbox-wrapper .tgl *:before,
.checkbox-wrapper .tgl+.tgl-btn {
   box-sizing: border-box;
}

.checkbox-wrapper .tgl::-moz-selection,
.checkbox-wrapper .tgl:after::-moz-selection,
.checkbox-wrapper .tgl:before::-moz-selection,
.checkbox-wrapper .tgl *::-moz-selection,
.checkbox-wrapper .tgl *:after::-moz-selection,
.checkbox-wrapper .tgl *:before::-moz-selection,
.checkbox-wrapper .tgl+.tgl-btn::-moz-selection,
.checkbox-wrapper .tgl::selection,
.checkbox-wrapper .tgl:after::selection,
.checkbox-wrapper .tgl:before::selection,
.checkbox-wrapper .tgl *::selection,
.checkbox-wrapper .tgl *:after::selection,
.checkbox-wrapper .tgl *:before::selection,
.checkbox-wrapper .tgl+.tgl-btn::selection {
   background: none;
}

.checkbox-wrapper .tgl+.tgl-btn {
   outline: 0;
   display: block;
   width: 100%;
   height: 2.5em;
   position: relative;
   cursor: pointer;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
}

.checkbox-wrapper .tgl+.tgl-btn:after,
.checkbox-wrapper .tgl+.tgl-btn:before {
   position: relative;
   display: block;
   content: "";
   width: 50%;
   height: 100%;
}

.checkbox-wrapper .tgl+.tgl-btn:after {
   left: 0;
}

.checkbox-wrapper .tgl+.tgl-btn:before {
   display: none;
}

.checkbox-wrapper .tgl:checked+.tgl-btn:after {
   left: 50%;
}

.checkbox-wrapper .tgl-flip+.tgl-btn {
   padding: 2px;
   transition: all 0.2s ease;
   font-family: sans-serif;
   perspective: 100px;
}

.checkbox-wrapper .tgl-flip+.tgl-btn:after,
.checkbox-wrapper .tgl-flip+.tgl-btn:before {
   display: inline-block;
   transition: all 0.5s ease;
   width: 100%;
   position: absolute;
   padding: 7px 10px;
   font-weight: normal;
   color: #fff;
   position: absolute;
   top: 0;
   left: 0;
   -webkit-backface-visibility: hidden;
   backface-visibility: hidden;
   border-radius: 4px;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
}

.checkbox-wrapper .tgl-flip+.tgl-btn:after {
   content: attr(data-tg-on);
   background: #5de0a5;
   transform: rotateX(-180deg);
}

.checkbox-wrapper .tgl-flip+.tgl-btn:before {
   background: linear-gradient(#fafafa, #e3e3e3);
   color: #b8b8b8;
   border: 1px solid #d4d4d4;
   content: attr(data-tg-off);
}

.checkbox-wrapper .tgl-flip+.tgl-btn:active:before {
   transform: rotateX(-20deg);
}

.checkbox-wrapper .tgl-flip:checked+.tgl-btn:before {
   transform: rotateX(180deg);
}

.checkbox-wrapper .tgl-flip:checked+.tgl-btn:after {
   transform: rotateX(0);
   left: 0;
   background: linear-gradient(#3575be, #213d5d);
   border: 1px solid #192e46;
}

.checkbox-wrapper .tgl-flip:checked+.tgl-btn:active:after {
   transform: rotateX(20deg);
}

.clignoter {
   animation: clignote 1.3s infinite;
}

@keyframes clignote {
   0%, 100% {
      opacity: 1;
   }

   50% {
      opacity: 0;
   }
}

/*-----------------------------------------------
	PROGRESS BAR
-----------------------------------------------*/
.progress-bar {
   position: relative;
   height: 30px;
   width: 100%;
   background: #fff;
   border: 1px solid #bbb;
   border-radius: 3px;
   padding-bottom: 3.5%;
   overflow: hidden;
}

@media screen and (orientation: landscape) {
   .progress-bar {
      padding-bottom: 1.5%;
   }
}

.progress-bar--background {
   position: absolute;
   top: 0;
   left: 0;
   height: 100%;
   width: 100%;
   background: linear-gradient(45deg, #c80000 0%, #fcc308 40%, #30fc1d 100%);
}

.progress-bar--background:after {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   height: 100%;
   width: 100%;
   background-size: 30px 30px;
   background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
   -webkit-animation: move 2s linear infinite;
   animation: move 2s linear infinite;
}

.progress-bar--value {
   position: absolute;
   top: 0;
   left: 0;
   height: 100%;
   width: 0%;
   z-index: 1;
   border-radius: 3px;
   transition: width 0.3s ease-in-out;
   box-shadow: 0 0 0 100vw #e5e5e5;
}

@-webkit-keyframes move {
   0% {
      background-position: 0 0;
   }

   100% {
      background-position: 30px 30px;
   }
}

@keyframes move {
   0% {
      background-position: 0 0;
   }

   100% {
      background-position: 30px 30px;
   }
}

/*-----------------------------------------------
	CIRCLES
-----------------------------------------------*/
.wrap-circles {
   display: flex;
   min-height: 100px;
   flex-wrap: wrap;
   justify-content: center;
   align-items: center;
   padding: 1rem;
}

.circle {
   position: relative;
   width: 100px;
   height: 100px;
   margin: 0.5rem;
   border-radius: 50%;
   background: #ffcdb2;
   overflow: hidden;
}

.circle .inner {
   display: flex;
   justify-content: center;
   align-items: center;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   width: 90px;
   height: 90px;
   background: radial-gradient(#555 40%, #111);
   border: 2px solid #fff;
   border-radius: 50%;
   font-size: 1.5em;
   font-weight: 300;
   color: #fff;
}

#btnScrollTop {
   display: none;
   position: fixed;
   bottom: 15px;
   right: 15px;
   z-index: 99;
   font-size: 18px;
   border: 1px solid #000;
   outline: none;
   background: red;
   color: white;
   cursor: pointer;
   padding: 0 6px 2px;
   border-radius: 200px;
   filter: opacity(.5);
   transition: all .4s;
}

#btnScrollTop:hover {
   filter: opacity(1);
   background: radial-gradient(#555 50%, #fff);
   transform: scale(1.3);
}

/*-----------------------------------------------
	RIBBON
-----------------------------------------------*/
.ribbon {
   font-size: 13pt;
   font-weight: bold;
   color: #fff;
   filter: opacity(.9);
}

.ribbon {
   --f: .5em;
   position: absolute;
   line-height: 1.8;
   padding-inline: 1lh;
   padding-bottom: var(--f);
   border-image: conic-gradient(#0008 0 0) 51%/var(--f);
   clip-path: polygon(100% calc(100% - var(--f)), 100% 100%, calc(100% - var(--f)) calc(100% - var(--f)), var(--f) calc(100% - var(--f)), 0 100%, 0 calc(100% - var(--f)), 999px calc(100% - var(--f) - 999px), calc(100% - 999px) calc(100% - var(--f) - 999px));
   transform: translate(calc((cos(45deg) - 1)*100%), -100%) rotate(-45deg);
   transform-origin: 100% 100%;
   background-color: #c92727;
}

/*-----------------------------------------------
	IMPRESSIONS
-----------------------------------------------*/
.page-a4 {
   width: 210mm;
   height: 297mm;
   margin: 1cm auto;
   padding: 1cm;
   box-sizing: border-box;
   background-color: #fff;
   border: 1px solid #ccc;
   position: relative;
   overflow: hidden;
}

@media print {
   .page-a4 {
      margin: 0;
      border: none;
   }

   .no-print,
   button,
   .btn-iadn,
   .totauxInput {
      display: none !important;
   }

   .totauxInputPrint {
      display: block !important;
      visibility: visible !important;
      width: 100%;
      color: #fff !important;
      text-align: center;
      font-size: 17pt;
      padding: 5px 0;
      border: 1px solid #ddd;
      border-radius: 5px;
      background: var(--iadn_light);
   }

   .cardEvals {
      margin-bottom: 10px;
      page-break-inside: avoid;
      font-size: 9pt;
   }

   .cardEvals-body {
      padding: 5px 10px;
   }

   .cardEvals-left, .cardEvals-right {
      margin-bottom: 0;
   }

   .cardEvals-ask {
      min-height: 30px !important;
      padding: 7px;
   }

   .cardEvals-index, .cardEvals-pts {
      font-size: 12pt;
      min-height: 30px !important;
      padding: 3px 0;
   }

   .cardEvals img {
      height: 150px;
   }

   .cardEvals .form-radio {
      width: 15px !important;
      height: 15px !important;
   }

   .header-row {
      display: table-row;
      page-break-before: always;
   }

   .header-row~tr {
      page-break-inside: avoid;
   }

   .header-row~tr~tr {
      page-break-inside: auto;
   }

   .header-row~tr~tr~tr {
      page-break-inside: auto;
   }

   .header-row:not(:first-of-type) {
      display: none;
   }
}