/* Custom SELFIE styles: ECL4-specific styles  */

.monospace {font-family: monospace;}

.vertical-align-middle { vertical-align:middle }

.ecl-timeline.custom-timeline {
    margin-inline-start: calc(var(--s-l) + .625rem);
    counter-reset: item;
}

.ecl-timeline.custom-timeline .ecl-timeline__item.disabled .ecl-timeline__tooltip {
    padding-top: var(--s-xs) !important;
    padding-left: var(--s-s) !important;
    cursor: not-allowed;
}

.ecl-timeline.custom-timeline .ecl-timeline__item { counter-increment: item; }
    
.ecl-timeline.custom-timeline .ecl-timeline__item::after {
    top:.25rem;
    text-align: center;
    font: var(--ecl-font-l);
    font-weight: bold;
    content: counter(item);
    height: 2.3rem;
    left: -1.15rem;
    width: 2.3rem;
}    

/* Select 2 dropdown */

.select2-container .select2-selection--single {
    font-size: .875rem;
    background: url(https://selfie-in-education.ec.europa.eu/resources/ecl4/images/icons/sprites/icons.svg#corner-arrow), 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;
}

/* CUSTOM DATEPICKER */
.ecl-datepicker .custom-date-input {
    cursor: pointer;
    background-color: white;
}

.ecl-datepicker .custom-date-input[readonly] {
    opacity:unset
}

.ecl-datepicker .custom-date-input[disabled] {
    cursor:not-allowed
}

.ecl-datepicker .custom-date-input[readonly][disabled] {
    opacity:.5
}

.ecl-datepicker .daterangepicker-clearbutton {
    pointer-events: auto;
    cursor: pointer; 
}

.daterangepicker select.monthselect, .daterangepicker select.yearselect {
    background-color: white;
    border: 1px solid var(--wt-c-n-100)
}

/*ECL CUSTOM ERROR PAGE*/
.error {
  background: url("https://selfie-in-education.ec.europa.eu/resources/images/error.jpg") no-repeat;
  background-size: cover;
  padding: 2rem;
  min-height: 300px
}

.error .ecl-content-block { 
    background-color: white; 
    padding: 5pt;
}

.error .ecl-content-block *{ 
    margin: 15pt
}



/*------------------------------------------------------------------------------------
  DATA RESULTS PAGE
------------------------------------------------------------------------------------*/

.ecl-accordion .graph__area {
    overflow: hidden;
    position: relative;
}

.ecl-accordion .graph__area .participationGraph {
    background: #FFFFFF;
    padding: 1rem 0;
}

.scaling-svg-container {
  position: relative;
  height: 0;
  width: 100%;
  padding: 0;
  padding-bottom: 100%;
  /* override this inline for aspect ratio other than square */
}

.scaling-svg {
  position: absolute;
  height: calc(100% - 2px);
  width: calc(100% - 2px);
  left: 0;
  top: 0;
  overflow-x: hidden;
  /* border: 1px solid $ecl-grey-10;*/
}

.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;
  font-family: var(--ecl-font-family-default)
}

.card {
    display: inline-block;
    position: relative;
    width: 100%;
    border-radius: 1px;
    border: 1px solid #707070;
    background: #FFFFFF;
    margin: 1rem 0 1.8rem 0;
    box-shadow: none;
    box-sizing: border-box;
}

.results-section .active.text {
    display: inline;
}

.results-section .active {
    display: block;
}

.results-section .inactive {
    display: none;
}

.results-section .card {
    border-color: #cfcfcf;
}

/*------------------------------------------------------------------------------------
    SELFIE SURVEY TABS
------------------------------------------------------------------------------------*/
.self-access-tabs .tab-pane {
    display: none;
    background: none;
    padding:0;
}

.self-access-tabs .tab-pane:focus {
    outline: none;
}

.self-access-tabs .tab-pane.active {
    display:block;
}


.self-access-tabs #tab-1 {background-color: #fffae9;}
.self-access-tabs #tab-2 {background-color: #fff5cf;}
.self-access-tabs #tab-3 {background-color: #fff0b6;}
.self-access-tabs #tab-4 {background-color: #ffeb9c;}
.self-access-tabs #tab-5 {background-color: #ffe683;}
.self-access-tabs #tab-6 {background-color: #ffe169;}
.self-access-tabs #tab-7 {background-color: #ffdc50;}
.self-access-tabs #tab-8 {background-color: #ffd737;}
.self-access-tabs #tab-9 {background-color: #efc000;}
.self-access-tabs #tab-10 {background-color: #dcb000;}
.self-access-tabs #tab-11 {background-color: #b59100;}
.self-access-tabs #tab-12 {background-color: #8e7100;}

.self-access-tabs .nav {
    display: block;
}

.self-access-tabs .nav li a { position: relative; display: block; padding: 1rem 0.2rem; }


.self-access-tabs .nav-justified {width: 100%;}
.self-access-tabs .nav-tabs {
    padding:0;
    background: none;
}

.self-access-tabs .nav-tabs li {
      position: relative;
      float: none;
      margin-bottom: -1px;
      display: table-cell;
      width: 1%;
}

.self-access-tabs .nav-tabs li.ribbon {
        transition: all 0.2s linear;
        border: none !important;
}

.self-access-tabs .nav-tabs li.ribbon:last-child i {display: none;}
.self-access-tabs .nav-tabs li.ribbon a {
          color: inherit !important;
          margin: 0;
          border-radius: 2px;
          border: 1px solid #cfcfcf !important;
          text-decoration: none;
          text-align: center;
          transition: all 0.2s ease;
}

.self-access-tabs .nav-tabs li.ribbon.active {
          z-index: 1;
          transform: scale(1.2, 1.2);
}

.self-access-tabs .nav-tabs li.ribbon.active:focus {outline:none;}

.self-access-tabs .nav-tabs li.ribbon.bd-danger a:focus {outline-color: var(--ecl-color-error);}

#return-to-top { align-content: center; color: #ffffff; }
#return-to-top .ecl-icon { margin-left: auto; margin-right: auto }

.tippy-content { font: var(--ecl-font-m) }

/*------------------------------------------------------------------------------------
    SURVEY SECTION
------------------------------------------------------------------------------------*/
.self-title-section {
  padding: 1rem 0 0 0;
  margin: 1rem 0 0 0;
}

.self-title-section .card {margin: 1rem 0;}
.self-title-section .card-legend {
    padding: 0.4rem 1rem;
    box-shadow: none;
    border: 1px solid var(--ecl-color-neutral);
    background: var(--ecl-color-neutral-20);
}
.self-survey-section .card {
      padding: 0rem 1rem 2rem;
      margin: 1rem 0 0.2rem 0;
      border: 1px solid var(--ecl-color-neutral);
}
.self-survey-section .card.card-legend {
          padding: 1rem 1rem;
          box-shadow: none;
          background: var(--ecl-color-neutral-20);
}
.self-survey-section .card .required::before {
          content: " *" !important;
          vertical-align: top;
          color: var(--ecl-color-error);
}
.self-survey-section .card .required::after {
    display:none;
}

.self-survey-section .card .ecl-radio-group.pure-radiobutton {
        text-align: left;
        margin: 1em 0 0 0;
        display:block;
}

.self-survey-section .card .ecl-radio-group.pure-radiobutton span {top: 0;}

/* SELFIE RATING RADIO BUTTONS*/

.selfie-rating {
  display: flex;
  justify-content: space-evenly;
  flex-direction: row;
  /* Align circles to the vertical middle */
  align-items: center;
}



/* Range radio buttons */
.self-survey-section .card .selfie-rating .round-button {
    align-content:center;
    text-align: center;
}

.self-survey-section .card .selfie-rating .round-button input {
    display: none;
}

.self-survey-section .card.bd-danger {
    border: 3px solid var(--ecl-color-error);
}

/* This will swallow some space around the N/A rating, to separate it from the other ratings */
.self-survey-section .selfie-rating .selfie-rating-spacer {
    flex: 2 1 1px;
}

.self-survey-section .selfie-rating .selfie-rating-spacer.removable-spacer {
    display: none
}

/* This will swallow more space around the N/A rating, to separate it from the other ratings */
.self-survey-section .selfie-rating .selfie-rating-spacer.medium-spacer {
    flex: 4 1 1px;
}

/* This will swallow even more space around the N/A rating, to separate it from the other ratings */
.self-survey-section .selfie-rating .selfie-rating-spacer.large-spacer {
    flex: 10 1 1px;
}

.self-survey-section .selfie-rating label.selfie-rating--na  {    
    flex: 0;
}

.self-survey-section .selfie-rating label {    
    flex: 1 1 content;
    display: flex;
    flex-direction: column;
    align-content: center    
}

.self-survey-section .selfie-rating label div {
    /* Do not introduce line breaks inside the buttons */
    white-space: nowrap;
        
    /* Make the button width/height the same */
    aspect-ratio:1;
    
    /* Add a proportional padding, so that buttons with a bigger font size are also bigger */
    padding: .8em;
    
    /* Align the inline text to the vertical middle of the button */    
    display: flex;
    flex-direction: column;
    align-content: center;
    
    /* Make buttons round */
    border-radius: 50%;
        
    box-sizing: content-box;    
    background: var(--ecl-color-neutral-20);
    box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.24), 0 1px 5px 0 rgba(0, 0, 0, 0.24);
    transition: all 0.2s ease;
    border: 3px solid var(--ecl-color-background) !important;
    
    width: min-content
}

.self-survey-section .selfie-rating label div:hover {
    border: 3px solid var(--ecl-color-background);
    background:var(--ecl-color-neutral-60);
}

.self-survey-section .selfie-rating label.active div, .self-survey-section .selfie-rating label:active div {
    background: var(--ecl-color-primary-40);
    border: 3px solid var(--ecl-color-background);
    box-shadow: 0 1px 5px 0 rgba(0,0,0,0.24),0 1px 5px 0 rgba(0,0,0,0.24);
}

.self-survey-section .selfie-rating label { 
   font: var(--ecl-font-l)
}

/*rating:not available*/
.self-survey-section label.selfie-rating--na div {
    font-size: 50%;
    padding: .7em;
    
    /* This should really be in .self-survey-section .selfie-rating label div, but if it is applied to this particular div
       then Edge is unable to vertically center the text inside the button. So we put it in each rating div */
    /*line-height: 90%;*/    
}

.self-survey-section label.rating-1 div {
    font-size: 50%;
    padding: .7em;
    line-height: 90%;    
}
.self-survey-section label.rating-2 div {
    font-size: 60%;
    padding: .7em;
    line-height: 90%;
}
.self-survey-section label.rating-3 div {
    font-size: 70%;
    padding: .8em;
    line-height: 90%;
}
.self-survey-section label.rating-4 div {
    font-size: 80%;
    padding: .8em;
    line-height: 90%;
}
.self-survey-section label.rating-5 div {
    font-size: 90%;
    padding: .9em;
    line-height: 90%;
}

/*------------------------------------------------------------------------------------
   MEDIA QUERIES:
    > 479px
------------------------------------------------------------------------------------*/
@media screen and (min-width: 480px) {
    #return-to-top .ecl-icon {
        display:none;
    }
  
    .self-survey-section .selfie-rating label {
        font: var(--ecl-font-2xl);
        padding: 5px;
    }
}

/*------------------------------------------------------------------------------------
    > 767px
------------------------------------------------------------------------------------*/
@media screen and (min-width: 768px) {
    .selfie-rating {
        width: 100%;
    }
  
    .self-survey-section .selfie-rating label {
        font: var(--ecl-font-3xl)
    }
  
  
    .self-survey-section .selfie-rating .selfie-rating-spacer.removable-spacer {
        display: block;
    }

    .self-survey-section .selfie-rating .selfie-rating-spacer.medium-spacer {
        flex: 8 1 1px;
    }    
}

/*------------------------------------------------------------------------------------
    > 991px
------------------------------------------------------------------------------------*/
@media screen and (min-width: 992px) {
    .self-survey-section .selfie-rating .selfie-rating-spacer.medium-spacer {
        flex: 10 1 1px;
    }        
}
/*------------------------------------------------------------------------------------
    > 1199px
------------------------------------------------------------------------------------*/
@media screen and (min-width: 1200px) {
  /*------------------------------------------------------------------------------------
      SELF ASSESMENT SURVEY SECTION + COORDINATOR ADMIN PREVIEW SURVEY > RETURN TO TOP
  ------------------------------------------------------------------------------------*/
  #return-to-top {
    position: fixed;
    bottom: 422px;
    right: 40px;
    background: rgba(0, 0, 0, 0.7);
    width: 60px;
    height: 60px;
    text-decoration: none;
    border-radius: 50%;
    display: block;
    transition: all 0.3s ease;
  }

   #return-to-top span {
      color: var(--ecl-color-background);
      margin: 0 auto;
      position: relative;
      left: 13px;
      top: 8px;
      font-size: 2.22rem;
    }
    #return-to-top .ecl-icon {display: block !important;}
}
/*------------------------------------------------------------------------------------
    @media  screen and (min-width: 1366px) {}
------------------------------------------------------------------------------------*/