/***********************************************/
/* #COLORS */
/***********************************************/
.ecl-custom-color-area1 {color: #EF7E2B;}
.ecl-custom-color-area2 {color: #299947;}
.ecl-custom-color-area3 {color: #3F85C6;}
.ecl-custom-color-area4 {color: #1DA2A3;}
.ecl-custom-color-area5 {color: #623785;}
.ecl-custom-color-area6 {color: #D3375A;}
.ecl-custom-color-area-custom1{color: #777777;}

.ecl-custom-color-dark-area1 {color: #B65000;}
.ecl-custom-color-dark-area2 {color: #006A1C;}
.ecl-custom-color-dark-area3 {color: #005995;}
.ecl-custom-color-dark-area4 {color: #007374;}
.ecl-custom-color-dark-area5 {color: #340C58;}
.ecl-custom-color-dark-area6 {color: #9C0031;}
.ecl-custom-color-dark-area-custom1 {color: #777777;}

.ecl-custom-color-dark-area1::after {border-color:#EF7E2B !important ;}
.ecl-custom-color-dark-area2::after {border-color:#299947 !important ;}
.ecl-custom-color-dark-area3::after {border-color:#3F85C6 !important ;}
.ecl-custom-color-dark-area4::after {border-color:#1DA2A3 !important ;}
.ecl-custom-color-dark-area5::after {border-color:#623785 !important ;}
.ecl-custom-color-dark-area6::after {border-color:#D3375A !important ;}
.ecl-custom-color-dark-area-custom1::after {border-color:#777777 !important ;}


/***********************************************/
/* #UTILITIES */
/***********************************************/

/* Responsive buttons/flex */
@media (min-width:1140px){
  .ecl-u-flex-grow-m-0 {flex-grow: 0;}
}

@media (min-width:768px){
  .ecl-custom-u-flex-m-nowrap {
    flex-wrap: nowrap !important
  }
}

.ecl-custom-opacity-50 {
  opacity: 0.5;
}

/* SPACING */
.ecl-custom-u-mt-auto {
  margin-top: auto !important;
}
.ecl-custom-u-mv-auto {
  margin-top: auto;
  margin-bottom: auto;
}

/* MEDIA */
.ecl-custom-image--fluid {
  height: auto;
  max-width: 100%;
} 

.ecl-custom-label--group {
	background-color: #802843;
	padding: 0.5rem 0.75rem;
	border: 0 solid transparent;
    color: #fff;}
.ecl-custom-label--indiv {
	background-color: #5b6758;
	padding: 0.5rem 0.75rem;
	border: 0 solid transparent;
    color: #fff;}

/*------------------------------------*\
  #STEPS 
\*------------------------------------*/
/*
STEPS STRUCTURE
*/

.ecl-custom-u-media-h-xl {
  max-width: 16rem !important;
  width: 16rem !important;
  height: auto;
}

/* HELP */
abbr{
	cursor: help;
	border-bottom: 2px dotted currentColor;
  font-style: normal;
}
/* BORDER */
.ecl-custom-u-border-none {border: none !important;}

/*TEXT*/
.ecl-custom-type-breakword {
  word-break: break-word
}

.ecl-custom-type-wrap {
  text-overflow: clip;
  overflow: hidden;
  white-space: nowrap;
}

/***********************************************/
/* #CUSTOM COMPONENTS */
/***********************************************/

/* STEPS STRUCTURE */
.ecl-custom-steps {
  counter-reset: timeline;
  padding-left: 0;
  margin: 0;
}
.ecl-custom-steps__item {
  counter-increment: timeline;
  list-style: none;
  position: relative;
  overflow: hidden;
}
.ecl-custom-steps__item::before {
  -webkit-border-start: 0.15rem solid #404040;
  border-inline-start: 0.15rem solid #404040;
  content: "";
  height: 100%;
  left: 1.13rem;
  position: absolute;
  top: 0;
  width: 0;
}
.ecl-custom-steps__item.ecl-custom-step--INACTIVE::before {
	-webkit-border-start: 0.15rem solid #CFCFCF;
  border-inline-start: 0.15rem solid #CFCFCF;
}
.ecl-custom-steps__item:first-child::before {
  height: calc(100% - 0.5rem);
  top: 0.5rem;
}
.ecl-custom-steps__item:last-child::before {
  height: 0;
}

/* STEPS ICONS */
.ecl-custom-pin--CURRENT::before, 
.ecl-custom-pin--COMPLETED::before,
.ecl-custom-pin--INACTIVE::before
  {content: counter(timeline);
    display: inline-block;
    width:2.4rem;
    height:2.4rem;
    text-align: center;
    line-height: 2.4rem;
    top: 0;
    left: 0;
    position: absolute;
  }
.ecl-custom-pin { 
  border-radius: 50%;
  border-width: 4px;
  border-style: solid;
  width:2.4rem;
  height:2.4rem;
  z-index: 0;
  margin-inline-end: 0.5rem;
  box-sizing: border-box;
  color: #404040;
}
.ecl-custom-pin--CURRENT {
   border: none;
   position: relative;
  }
.ecl-custom-pin--CURRENT::after {
  content:" ";
  top: 0;
  left: 0;
  background-color: #ffd617;
  transform: rotate(45deg);
  position: absolute;
  width:2.4rem;
  height:2.4rem;
  z-index: -1;
  border-radius: 50% 50% 0 50%;
}
.ecl-custom-pin--INACTIVE {
  border-color: #CFCFCF;
  background-color: #FFFFFF;
}
.ecl-custom-pin--COMPLETED {
  border-color: #404040;
  background-color: #FFFFFF;

}
.ecl-custom-pin--completedIcon,
.ecl-custom-pin--COMPLETED::after {
  top: 0;
  left: 1.5rem;
  position: absolute;
}
.ecl-custom-pin--COMPLETED::after{
  content:" ";
  border-radius: 50%;
  background-color: #FFFFFF;
  height: 1.25rem;
  width: 1.25rem;
  z-index: -1;
}

/* STEPS INFO */
.ecl-custom-pin--info {
  display: inline-flex;
  align-items: center;
  text-align: center;
  justify-content: center;
  border: none;
  position: relative;
  width: 1.4rem;
  height: 1.4rem;
  flex-shrink: 0; 
}
.ecl-custom-pin--info::after {
  content: "";
  top: 0;
  left: 0;
  background-color: #FFF;
  transform: rotate(45deg);
  position: absolute;
  width: 1.4rem;
  height: 1.4rem;
  z-index: -1;
  border-radius: 50% 50% 0 50%;
}

/* ICON AREAS NUMBERS */
.ecl-custom-diamond { 
  display: inline-flex;
  align-items: center;
  text-align: center;
  justify-content: center;
  position: relative;
  width: 1.25rem;
  height: 1.25rem;
  z-index: 0;
  flex-shrink: 0; 
}
.ecl-custom-diamond::after {
  content: "";
  top: 0;
  left: 0;
  transform: rotate(45deg);
  position: absolute;
  width: 1.25rem;
  height: 1.25rem;
  background-color: transparent;
  border-width: 2px;
  border-style: solid;
  border-color: currentColor;
  z-index: -1;
  box-sizing: border-box;
}

/* VERTICAL MENU */
.ecl-custom-menu-fixed {
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 2;
} 
.ecl-custom-menu-sticky {
  display: block;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1;
}

/* VERTICAL MENU Button trigger */
/*Focus style*/
.ecl-custom-secondary-menu__trigger:focus-visible, .ecl-custom-secondary-menu__link:focus-visible {
	outline: 3px solid #ffd617;
    outline-offset: -3px;
    text-decoration: none!important;
}

.ecl-custom-secondary-menu__trigger { 
  background: linear-gradient(270deg,#003776 2.75rem,#FFFFFF 2.75rem);
  background-origin: border-box;
  display: block;
  padding: 0 2.75rem 0 0;
  /* padding: .75rem 3.5rem .75rem .75rem; */
  position: relative;
  text-align: start;
  box-sizing: border-box;
  overflow-x: hidden;
  text-overflow: ellipsis;
  /* white-space: nowrap; */
  width: 100%;
  color: #fff;
}
.ecl-custom-secondary-menu__trigger-icon {
  position: absolute;
  right: 0.75rem;
  top:50%;
  transform: translateY(-50%) rotate(180deg);
}

.ecl-custom-secondary-menu__trigger:focus-visible { 
  outline: 3px solid #ffd617; 
  outline-offset: -3px; 
} 

/* 
 Button style
*/
.ecl-custom-secondary-menu__trigger[aria-expanded=true] .ecl-custom-secondary-menu__trigger-icon  {
  transform: translateY(-50%) rotate(0deg);
}
.ecl-custom-secondary-menu__trigger[aria-expanded=true] + .ecl-custom-secondary-menu__list {
  box-shadow: 0 2px 10px 0 rgb(0 0 0 / 20%);
  position:relative;
  z-index: 1;
}
.ecl-custom-secondary-menu__trigger[aria-expanded=true] + .ecl-custom-secondary-menu__list [data-ecl-custom-secondaryMenuLabel] {
  padding: 0.50rem 0 0 0.75rem;
}

/* VERTICAL MENU Link styles HOVER */  
.ecl-custom-secondary-menu .ecl-custom-secondary-menu__link:hover{
  text-decoration: none;
}
.ecl-custom-secondary-menu .ecl-custom-secondary-menu__link:not([aria-current="page"]):hover {    
  background-color: #F2F5F9;
  border-color: #F2F5F9 !important;
}
.ecl-custom-secondary-menu .ecl-custom-secondary-menu__link[aria-current="page"] {cursor: default;}
@media (min-width:996px){
/* hide button trigger on desktop version */
  .ecl-custom-secondary-menu__trigger {
      display: none;
  }
}

/* DROPDOWN BUTTON (EXPANDABLE) Button with dropdown menu */
.ecl-custom-dropdown-dialog {
	z-index: 20;
	background-color: #f5f5f5;
	border: 1px solid #cfcfcf;
	box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
	position: absolute;
	padding: .75rem 1rem;
	width: max-content;
}

/* FORM - MATRIX CUSTOM */
.ecl-custom-table-matrix .ecl-table__cell:first-of-type {
  margin-bottom: 0; 
}
.ecl-custom-table-matrix th.ecl-table__cell:first-of-type:before {
  display: none; 
}
.ecl-custom-table-matrix .ecl-table__cell:before {
  background-color: #ebebeb;
  border-inline-end: none;
  border-bottom: 2px solid #FFFFFF;
}

/***********************************************/
/* #COMPONENTS' EXTENSIONS FOR ECLV3.7.1  */
/***********************************************/

/* LABELS */
.ecl-custom-label--group {
  background-color: #802843;
  padding: 0.5rem 0.75rem;
  border: 0 solid transparent;
  color: #fff;
}
.ecl-custom-label--indiv {
  background-color: #5b6758;
  padding: 0.5rem 0.75rem;
  border: 0 solid transparent;
  color: #fff;
}

/* TEXTAREA */
.ecl-custom-textarea-resize {
  overflow: hidden; 
  resize: none;
}

/***********************************************/
/* #ANIMATIONS */
/***********************************************/
.ecl-custom-anime-dropdown-menu {
  animation: anime-dropdown .6s cubic-bezier(.3,0,.7,1);
  animation-fill-mode: forwards;
}
@keyframes anime-dropdown {
  0%,20% {
      transform: translateY(-10px);
      opacity: 0;
      border-color: transparent
  }

  20%,to {
      opacity: 1;
      transform: translateY(0);
      border-color: #f2f2f2
  }
}
@-webkit-keyframes anime-dropdown {
  0%,20% {
      transform: translateY(-10px);
      opacity: 0;
      border-color: transparent
  }
  20%,to {
      opacity: 1;
      transform: translateY(0);
      border-color: #f2f2f2
  }
}




/***********************************************/
 /* SURVERY ******* */
/***********************************************/
abbr{
	cursor: help;
	border-bottom: 2px dotted currentColor;
  font-style: normal;
}

/*------------------------------------*\
  #STYLES FOR HIGH CONTRAST MODE
\*------------------------------------*/

@media (forced-colors: active) {
  .ecl-custom-progress-bar-full {
    background-color: CanvasText !important;
    forced-color-adjust: none;
  }  
  .ecl-custom-progress-bar-full-link {
    background-color: LinkText !important;
    forced-color-adjust: none;
  }    
  .ecl-icon  {
    fill: CanvasText;
  }
  a .ecl-icon {
    fill: LinkText !important;
  }
  button .ecl-icon  {
    fill: ButtonText;
  }
  button:disabled .ecl-icon  {
    fill: GrayText;
  }
  .ecl-custom-pin--CURRENT {
    color: HighlightText !important;
    forced-color-adjust: none;
  }   
  .ecl-custom-pin--CURRENT::after {
     background-color: Highlight !important;
     forced-color-adjust: none;
   } 
  .ecl-custom-pin--info {
    color: Canvas !important;
    forced-color-adjust: none;
  }   
  .ecl-custom-pin--info::after {
     background-color: CanvasText !important;
     forced-color-adjust: none;
   }  
  .ecl-custom-secondary-menu button {
    background-color: Canvas !important;
  }
  .ecl-custom-secondary-menu__list a:not([aria-current])  {
    border-color: Canvas !important;
  } 
  .question-legend.legend-checked {
    background-color: Highlight !important;
    forced-color-adjust: none;
  }
  .question-legend.legend-checked .legend-title {
    color: HighlightText !important;
    forced-color-adjust: none;
  }
  .question-legend.legend-checked .legend-title span {
    color: HighlightText !important;
    forced-color-adjust: none;
  }
  .question-legend.legend-checked .legend-subtitle {
    color: HighlightText !important;
    forced-color-adjust: none;
  }
}

/***********************************************/
/* TOOLTIPS */
/***********************************************/
.tooltip{
	position:absolute;
  color: #404040;
  background-color: #FFFFFF;
  box-shadow: 0 7px 8px rgba(0,47,103,.08), 0 0 22px rgba(0,47,103,.04), 0 12px 17px rgba(0,47,103,.04), 0 -4px 4px rgba(0,47,103,.04);
	font: normal normal 400 0.875rem/1.25rem arial,sans-serif!important;
	padding: 0.75rem;
	z-index: 15;
}

.copyLinkButtonTooltipPosition {
  left: 0%;
  bottom: 120%;
}

/* SHAPE TOOLTIP COPY LINK */

.copyLinkButtonTooltipPosition.tooltip:before {
  background-color: #fff;
  box-shadow: 0 7px 8px rgba(0,47,103,.08), 0 0 22px rgba(0,47,103,.04), 0 12px 17px rgba(0,47,103,.04), 0 -4px 4px rgba(0,47,103,.04);
  -webkit-clip-path: polygon(-8px -8px,calc(100% + 8px) -8px,calc(100% + 8px) calc(100% + 8px));
  clip-path: polygon(-8px -8px,calc(100% + 8px) -8px,calc(100% + 8px) calc(100% + 8px));
  content: "";
  height: 1rem;
  left: 50%;
  margin-left: -0.5rem;
  position: absolute;
  bottom: 0;
  top: auto;
  transform: translateY(50%) rotate(135deg);
  width: 1rem;
}



.graph-tooltip__container {
  display: none;
  background-color: #fff;
  box-shadow: 0 7px 8px rgba(0,47,103,.08), 0 0 22px rgba(0,47,103,.04), 0 12px 17px rgba(0,47,103,.04), 0 -4px 4px rgba(0,47,103,.04);
  margin-top: 1.25rem;
  position: absolute;
  z-index: 15;
}

.graph-tooltip__content {
  font: normal normal 400 1rem/1.25rem arial, sans-serif;
  min-width: 11.75rem;
  max-width: 31rem;
  padding: 0.75rem;
  width: auto;
  pointer-events: none;
}

/* TODO DELETE When the page progress evolution is updated to ECL3 */
.svg-tooltip {
  display: none;
  position: absolute;
  min-width: 100px;
  max-width: 500px;
  min-height: 50px;
  fill: #404040;
  padding: 15px;
  background: #f5f5f5;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  pointer-events: none;
}

/*****************************************************/
/* #STYLES TO SOLVE COLLISIONS BETWEEN ECL1 AND ECL3.7.1 */
/*****************************************************/
/* TODO DELETE all this classes when the whole app is migrated to ECLV3 */
/* TODO DELETE collision classes also in the jsp files */

.ecl-button:active,.ecl-button:hover {
  box-shadow: none !important;
  text-decoration: none !important
}

.ecl-button:focus {
  text-decoration: none;
}


.ecl-button--call:hover{
  text-decoration: none !important; 
}
.ecl-button--primary:hover{
  text-decoration: none !important; 
}
.ecl-button--secondary {
  background-color: #fff !important; 
  border: 2px solid #004494 !important;
}
.ecl-button--secondary:hover {
  text-decoration: none !important; 
  border-color: #002f67 !important;
  color: #002f67 !important;
}
.ecl-button--secondary[disabled] {
  background-color: hsla(0,0%,100%,.5) !important;
  border-color: rgba(0,68,148,.5) !important;
  color: rgba(0,68,148,.5) !important
}

.ecl-button--secondary[disabled]:hover {
  border-color: rgba(0,47,103,.5) !important;
  color: rgba(0,47,103,.5) !important
}
.ecl-button--ghost:hover{
  text-decoration: none !important; 
}

/* Check if this is still necessary after migrating everything to ECLV3 */
/* Now is necessary because otherwise, the cards take too much space but I'm not sure it's because the older version of the ECL is interfering */
.ecl-card {
  height: auto;
}

/* INPAGE NAVIGATION */
.ecl-collision-link {
  color: #004494;
  margin: 0;
  text-decoration: underline;
}
.ecl-collision-link:hover {
  color: #002f67;
}
.ecl-collision-link:focus-visible {
  border-radius: 0;
  outline: 2px solid #004494;
  outline-offset: 2px;
}
.ecl-collision-link:visited {
  color: #4b0076;
}

.ecl-inpage-navigation__link {
  background-color: transparent;
  color: #fff;
  display: block;
  font: normal normal 400 1rem/1.25rem arial, sans-serif;
  font-weight: 400;
  padding: 0.75rem;
  text-decoration: none;
}
@media (min-width: 996px) {
  .ecl-inpage-navigation__link {
    background-color: transparent;
    color: #004494;
    font-weight: 700;
  }
}
.ecl-inpage-navigation__link:hover {
  color: #fff;
  text-decoration: underline;
}
@media (min-width: 996px) {
  .ecl-inpage-navigation__link:hover {
    color: #004494;
  }
}
.ecl-inpage-navigation__link:focus-visible {
  border-radius: 0;
  color: #fff;
  outline-color: #fff;
  outline-offset: -4px;
  text-decoration: underline;
}
@media (min-width: 996px) {
  .ecl-inpage-navigation__link:focus-visible {
    color: #004494;
    outline-color: #004494;
    outline-offset: -2px;
  }
}
.ecl-inpage-navigation__link:visited {
  color: #fff;
}
@media (min-width: 996px) {
  .ecl-inpage-navigation__link:visited {
    color: #004494;
  }
}
.ecl-inpage-navigation__item--active .ecl-inpage-navigation__link,
.ecl-inpage-navigation__item--active .ecl-inpage-navigation__link:hover {
  -webkit-border-start: 4px solid #004494;
  -webkit-padding-start: calc(0.75rem - 4px);
  background-color: #ebebeb;
  border-inline-start: 4px solid #004494;
  color: #404040;
  padding-inline-start: calc(0.75rem - 4px);
}
.ecl-inpage-navigation__item--active .ecl-inpage-navigation__link:focus-visible,
.ecl-inpage-navigation__item--active
  .ecl-inpage-navigation__link:hover:focus-visible {
  outline-color: #004494;
}
@media (min-width: 996px) {
  .ecl-inpage-navigation__item--active .ecl-inpage-navigation__link,
  .ecl-inpage-navigation__item--active .ecl-inpage-navigation__link:hover {
    border-inline-start-color: #004494;
  }
  .ecl-inpage-navigation__item--active
    .ecl-inpage-navigation__link:focus-visible,
  .ecl-inpage-navigation__item--active
    .ecl-inpage-navigation__link:hover:focus-visible {
    color: #404040;
  }
}
.ecl-inpage-navigation__item:last-of-type .ecl-inpage-navigation__link {
  border-radius: 0 0 0 0;
}

/* SEARCH FORM */
.ecl-collision-search-form {
  border: none !important;
}
.ecl-collision-search-form__button{
  border-bottom: 1px solid #707070 !important;
  border-end-start-radius: 0 !important;
  border-inline-end:1px solid #707070 !important;
  border-inline-start-width:0;border-start-start-radius: 0 !important;
  border-top: 1px solid #707070 !important;
}

.ecl-message-admin {
  background: transparent url(https://selfie-in-education.ec.europa.eu/educators/resources/images/messages-info.svg) no-repeat 1.2rem 1.2rem;
  border: 2px solid #4073af;
  color: #404040;
  font-size: 1rem;
  margin: 0;
  min-height: 2.22rem;
  padding: .89rem 5.1rem .89rem 4.44rem;
  position: relative;
}

@supports (display:grid) {
  .ecl-message-admin {
    display: grid;
    grid-template-columns: auto -webkit-max-content;
    grid-template-columns: auto max-content;
    padding: .89rem .89rem .89rem 4.44rem;
  }
}

.ecl-message-admin--warning {
  background-image: url(https://selfie-in-education.ec.europa.eu/educators/resources/images/messages-warning.svg);
  border-color: #fbc11d;
}

.ecl-message-admin__dismiss {
  -webkit-box-align: center;
  align-items: center;
  background-color: transparent;
  border-width: 0;
  color: #000;
  display: -webkit-box;
  display: flex;
  font-size: .875rem;
  height: 1.5rem;
  line-height: 1.15;
  padding: 0;
  position: absolute;
  right: .66rem;
  text-decoration: none;
  text-shadow: none;
  top: .66rem;
}

.ecl-message-admin__dismiss:focus {
  outline: 3px solid #ffd617;
  outline-offset: 3px;
  text-decoration: underline;
}

@supports (display:grid) {
  .ecl-message-admin__dismiss {
    align-self: self-start;
    grid-column-start: 2;
    grid-row-end: span 2;
    grid-row-start: 1;
    position: relative;
    right: auto;
    top: auto;
  }
}

.ecl-message-admin__dismiss:hover {
  text-decoration: underline;
}

.ecl-message-admin__dismiss:after {
  background-color: transparent;
  content: url(https://selfie-in-education.ec.europa.eu/educators/resources/images/close.svg);
  display: block;
  line-height: 0;
  margin: 0 0 0 .66rem;
  overflow: hidden;
  width: 1.5rem;
}

.ecl-message-admin__title {
  font-weight: 700;
  margin-bottom: .89rem;
}

@supports (display:grid) {
  .ecl-message-admin__title {
    grid-column-start: 1;
  }
}

/* ECL MESSAGE */
.ecl-message {
  -webkit-padding-end: 0.5rem;
  -webkit-padding-start: 1.5rem;
  border-bottom-width: 2px;
  border-end-start-radius: 0;
  border-inline-end-width: 2px;
  border-inline-start-width: 2px;
  border-start-start-radius: 0;
  border-style: solid;
  border-top-width: 2px;
  box-sizing: border-box;
  display: flex;
  margin: 0;
  padding-bottom: 1.5rem;
  padding-inline-end: 0.5rem;
  padding-inline-start: 1.5rem;
  padding-top: 1.5rem;
  position: relative;
}
.ecl-message__icon {
  -webkit-margin-end: 1rem;
  flex-shrink: 0;
  margin-inline-end: 1rem;
}
.ecl-message__content {
  width: 100%;
}
.ecl-message__title {
  color: #000;
  font: normal normal 400 1rem/1.25rem arial, sans-serif;
  font-weight: 700;
  margin-bottom: 0.75rem;
  max-width: 80ch;
}
.ecl-message__description {
  color: #404040;
  font: normal normal 400 1rem/1.5rem arial, sans-serif;
  margin: 0 0 0.5rem;
  max-width: 80ch;
  padding-bottom: 2rem;
}
.ecl-message__close {
  bottom: 0.25rem;
  color: #004494;
  font: normal normal 400 1rem/1.25rem arial, sans-serif;
  font-weight: 700;
  position: absolute;
  right: 0;
}
.no-js .ecl-message__close {
  display: none;
}
@supports (display: grid) {
  .ecl-message__content {
    display: grid;
  }
  .ecl-message__title {
    grid-column-start: 1;
  }
  .ecl-message__description {
    grid-column-start: 1;
    padding-bottom: 0;
  }
  .ecl-message__close {
    align-self: self-end;
    bottom: auto;
    grid-column-start: 1;
    grid-row-end: 4;
    grid-row-start: 3;
    justify-self: end;
    margin-bottom: -0.75rem;
    position: relative;
    right: auto;
  }
}
@media (min-width: 768px) {
  .ecl-message__title {
    margin-bottom: 0.5rem;
  }
  .ecl-message__description {
    margin-bottom: 0;
    padding-bottom: 0;
  }
  .ecl-message__close {
    bottom: auto;
    top: 0.75rem;
  }
  @supports (display: grid) {
    .ecl-message__content {
      grid-template-columns: auto -webkit-max-content;
      grid-template-columns: auto max-content;
    }
    .ecl-message__close {
      align-self: self-start;
      grid-column-start: 2;
      grid-row-end: span 2;
      grid-row-start: 1;
      margin-bottom: 0;
      margin-top: -0.75rem;
      position: relative;
      right: auto;
      top: auto;
    }
  }
}
.ecl-message--info {
  background: #fff;
  border-color: #006fb4;
}
.ecl-message--info .ecl-message__icon {
  fill: #006fb4;
}
.ecl-message--success {
  background: #fff;
  border-color: #467a39;
}
.ecl-message--success .ecl-message__icon {
  fill: #467a39;
}
.ecl-message--warning {
  background: #fff;
  border-color: #f29527;
}
.ecl-message--warning .ecl-message__icon {
  fill: #f29527;
}
.ecl-message--error {
  background: #fff;
  border-color: #da2131;
}
.ecl-message--error .ecl-message__icon {
  fill: #da2131;
}




/***********************************************/
/* #STYLES FROM SELECT2 LIBRARY */
/***********************************************/
.select2-container {
    margin-top: .89rem;
    line-height: 1.15;
    width: 100% !important;
}
.select2-container .select2-selection--single {
    font-size: .875rem;
    background: url(https://selfie-in-education.ec.europa.eu/educators/resources/images/arrow-down--white.svg), linear-gradient(180deg, #404040, #404040);
    background-position: right .66rem center, 100%;
    background-repeat: no-repeat;
    background-size: 1rem auto, 2.32rem 100%;
    -moz-appearance: none;
    background-color: #fff;
    border: 1px solid #404040;
    border-radius: 0;
    color: #404040;
    display: block;
    font-family: Arial, sans-serif;
    margin: 0;
    padding: .66rem 2.65rem .66rem .66rem;
    width: 100% !important;
    height: 2.5rem;
    cursor: default;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #444;
    line-height: 1.15;
}
.select2-container--classic .select2-selection--single .select2-selection__placeholder {
    color: #404040;
}
.select2-dropdown {
    background-color: #fff;
    -moz-appearance: none;
    border: 1px solid #404040;
    border-radius: 0;
    box-sizing: border-box;
    display: block;
    position: absolute;
    z-index: 1051;
    font-family: Arial, sans-serif;
    font-size: .875rem;
    color: #404040;
}
.select2-dropdown--below{
    margin-top: -.938rem;
}
.select2-search__field {
    background-color: #fff;
    background-image: none;
    border: 1px solid #404040;
    box-sizing: border-box;
    color: #404040;
    display: block;
    font-family: Arial, sans-serif;
    font-size: .875rem;
    margin: 0;
    padding: .15rem .66rem;
    width: 100% !important;
}
.select2-selection__arrow{
    display: none !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    cursor: default;
    float: left;
    margin-top: 5px;
    background-color: #e3e3e3;
    border-radius: 5px;
    border-width: 0;
    color: #404040;
    font-family: Arial, sans-serif;
    font-weight: 400;
    line-height: 1;
    padding: .33rem;
    white-space: nowrap;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: #004494;
    color: white
}
.select2-results__message {
    color: #404040;
    font-size: .875rem;
    font-family: Arial, sans-serif;
}
.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: #404040;
    font-size: .875rem;
    font-family: Arial, sans-serif;
    width: 100% !important;
}
.select2 .select2-container .select2-container--default .select2-container--below {
    width: 100% !important;
}


/***********************************************/
 /* BREAKPOINTS */
/***********************************************/

@media (min-width:480px){}
@media (min-width:768px){}
@media (min-width:996px){}
@media (min-width:1140px){}


/*****************************************************/
/* #STYLES TO SOLVE COLLISIONS BETWEEN ECL1 AND ECL3.7.1 */
/*****************************************************/
/* TODO DELETE all this classes when the whole app is migrated to ECLV3 */
/* TODO DELETE collision classes also in the jsp files */

.ecl-button--default[disabled] {
  border-color: rgba(0,47,103,.7) !important;
  color: rgba(0,47,103,.7) !important;
}

/* .ecl-button[disabled], .ecl-button[disabled]:hover {
  cursor: not-allowed !important;
  text-decoration: none !important;
  pointer-events: none !important;
} */