/* MISC */
abbr[title] {border:none;}

.js-modal {
  padding: 0;
  border-width: 0;
}

#bt-calculer-vvd {margin-right:5px;}

label {margin-bottom: 1rem;
display:block}

.row.simul {
  border-radius: 8px 8px 10px 10px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0,0,0,.1);
  padding: 20px 20px;
  background: white;
  margin-top:-30px;
  margin-bottom:30px;
}

.page-header .page-intro {
  line-height: 1.2em;	
  font-size: 1.1em;
}

.page-intro {
  color: #2f2f2f;
  font-family: "GillSansW01Book", Arial, sans-serif;
  font-size: 1.176em;
  line-height: 1em;
  max-width: 850px;
  margin: 0 auto;
  text-align: center;
}

.vvd .slide {top:15px !important;}
.simul-result {
  margin-top:30px;
}

.tableau-vvd h3 {color:#fff;
  padding-top:10px;
  padding-bottom:0px;
  box-sizing: border-box;
  font-weight:normal;
  font-size:1.0em;
  display:inline-block;
  text-align:left;
  padding-left:30px;
  width:100%;}

  .simul-form {
    position:relative;
    margin-bottom:0;
    padding:1em 0 0;
    background-color: white;
    border-bottom:none;
    position:relative;
    /*padding:30px;*/
    /*font-family: "AktivGroteskW01-Medium",Arial,sans-serif;*/
  }



  .row.notes {margin-top:60px;}

  .simul-form h3 {
    color: #466581;
    font-family: "AktivGroteskW01-Regular",Arial,sans-serif;
    font-size: 1.412em;
    font-weight: 400;
    line-height: 1.1;
    margin: 0 0 1.25em 0;
  }

  #cols {margin-top:30px}

  .col p {margin-top:0}
  .simul-form div:not("*[range]") {
    overflow: hidden;
    padding: 1.5em 0;
    position: relative;
  }

  .versements p {margin:30px 0 10px 0}

  .col.conjoint {background:#f7f7f7;border-radius:4px; transition:all 0.5s linear;  padding:10px}
  .btn {cursor:pointer}

  .versement input{
   border: 1px solid #24378D;
    border-radius: 3px;
    box-shadow: 0 1px 2px rgba(0,0,0,.13) inset;
    color: #007c82;
    font-size: 1em;
    letter-spacing: 1px;
    padding: .75em;
    width: 100%;
    box-sizing: border-box;
  }

  .versement .input-wrapper {width:100%;
    position:relative;}

    .versement span {font-size:0.80em; width:100%;display:block;text-align:center; padding-bottom:5px;}

    .versement {position:relative;}
    .versement .input-wrapper:after {content:"\20AC";
    font-size: 1.5em;
    line-height:1.3;
    color:#007c82;
    text-align:center;
    display:block;
    height:30px;
    width:30px;
    top:50%;
    transform:translateY(-50%);
    position:absolute;
    right:5px;}

    input[type=number]::-webkit-inner-spin-button, 
    input[type=number]::-webkit-outer-spin-button { 
      -webkit-appearance: none; 
      margin: 0; 
    }

    .simul-form input:focus {
      border-color: #58b08e;
    }

    .simul-form input:active, .simul-form input:focus {
      color: #2b3446;
    }


    #mentionRMN {
      color: #a3a3a3;
      display: block;
      font-size: .75em;
      margin-bottom: -1.2em;
      right: 0;
      width: 100%;
    }
    #mentionRMN.highlight {
      background-color: #f6ef6d;
    }  

    .simul-action {
      overflow: hidden;
      margin-bottom: 0;
      padding-top: 2em;
    }

    .simul #mentions-legales {
      margin-top: 15px;
      padding:20px;
    }

    #SIMsimuler {
      border: 1px solid #4A5A8E;
      border-radius: 3px;
      background: #6579bf; /* Old browsers */
      background: -webkit-linear-gradient(#6579bf 0%, #596ba8 100%);
      background: -o-linear-gradient(#6579bf 0%, #596ba8 100%);
      background: linear-gradient(#6579bf 0%, #596ba8 100%);
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6579bf', endColorstr='#596ba8',GradientType=0 );
      box-shadow: 0 1px 0 #445483;
      color:white;
      font-family: "AktivGroteskW01-Medium",Arial,sans-serif;
      font-size: .706em;
      letter-spacing: 1px;
      padding: .5em 1.5em;
      text-transform: uppercase;
      float: right;
    }

    #SIMsimuler:hover, #SIMsimuler:focus {
      background: #596ba8; /* Old browsers */
      background: -webkit-linear-gradient(#596ba8 0%, #6579bf 100%);
      background: -o-linear-gradient(#596ba8 0%, #6579bf 100%);
      background: linear-gradient(#596ba8 0%, #6579bf 100%);
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#596ba8', endColorstr='#6579bf',GradientType=0 );
    }

    #SIMsimuler:active {
      background: #445483;
      box-shadow: none;
    }

    #SIMclear {
      border:1px solid #E3E2DE;
      border-radius: 3px;
      background: #F1F1EC; /* Old browsers */
      background: -webkit-linear-gradient(#F1F1EC 0%, #EBEAE6 100%);
      background: -o-linear-gradient(#F1F1EC 0%, #EBEAE6 100%);
      background: linear-gradient(#F1F1EC 0%, #EBEAE6 100%);
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#F1F1EC', endColorstr='#EBEAE6',GradientType=0 );
      box-shadow: 0 1px 0 #EBEBE9;
      color:#2B3447;
      font-family: "AktivGroteskW01-Medium",Arial,sans-serif;
      font-size: .706em;
      letter-spacing: 1px;
      padding: .5em 1.5em;
      text-transform: uppercase;
      float: left;
    }

    #SIMclear:hover, #SIMclear:focus {
      background: #EBEAE6; /* Old browsers */
      background: -webkit-linear-gradient(#EBEAE6 0%, #F1F1EC 100%);
      background: -o-linear-gradient(#EBEAE6 0%, #F1F1EC 100%);
      background: linear-gradient(#EBEAE6 0%, #F1F1EC 100%);
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#EBEAE6', endColorstr='#F1F1EC',GradientType=0 );
    }

    #SIMclear:active {
      background: #D8D7D4;
      box-shadow: none;
    }

    button i {
      display: none;
    }

    .tableau-vvd h3 {
      color: #fff;
      padding-top: 10px;
      padding-bottom: 0px;
      box-sizing: border-box;
      font-weight: normal;
      font-size: 1.0em;
      display: inline-block;
      text-align: left;
      padding: 15px 0 15px 15px;
      width: 100%;
      margin:0;
      opacity:0.8;
    }


    #boutons {
      width: 50%;
      justify-content: center;
      margin: 2rem auto;
    }

    .vvd #boutons > div {margin:0.5rem} 

    .no-js .simul-result, .simul-result.show {
      display: block;
    }

    .reduction {font-size:1.5em}

    .result-montant {
      font-size: 1em;
      letter-spacing: 1px;
      padding: 1.5em 0 1.5em 0;
      text-align: center;
      width: 80%;
      margin:0 auto;
    }
    .result-montant i, .result-montant span:first-of-type {
      text-decoration:none;
      font-weight:bold;}
      .result-montant .total-vvd {
        display: block;
        font-family: "AktivGroteskW01Medium",Arial,sans-serif;
        font-size: 3em;
        line-height: 1.5em;
      }

      .c {text-align:center;}
      .result-item {
        overflow: hidden;
        padding: 0 0 .75em 0;
        text-align: center;
        width: 100%;
      }

      .simul-notes {
        font-size:.824em;
        padding-left: 2.143em;
      }

      .content-meta.mentions {font-size:.824em; margin:40px 0;
      }
      .content-meta.mentions p {line-height: 1.2}

      #sliderPEE, #sliderPERCO {
        width:69%;
        display: inline-block;
        vertical-align:middle;
        box-sizing: border-box;
        background: #e6e6e6;
        box-shadow: inset 0 1px 3px rgba(0,0,0,.3);
        -webkit-box-shadow: inset 0 1px 3px rgba(0,0,0,.3);
        border-radius: 10px;
      }
      .output {
        box-sizing: border-box;
        display:inline-block;
        /*padding:15px 5px;*/
        background-color:#60B391;
        color:white;
        font-size:1.5em;
        border-radius:8px;
        vertical-align:middle;
        text-align:center;
        margin:0 auto;
        border:none;
        width:55px;
      }
      .ouput:focus,.ouput:active {outline: 4px dashed blue; color:white}
      #tauxPEE, #tauxPERCO {
        box-sizing: border-box;
        display:inline-block;
        background-color:#60B391;
        padding:15px 5px;
        border-radius:8px;
        margin-left:45px;
        width:calc(25% - 20px);
        vertical-align:middle;
        text-align:center;
        position:relative;
        z-index:2;
      }
      #details {display:inline-block;}
      .col {
        box-sizing:border-box;
        width: 49%;
        display: inline-block;
        vertical-align: top;
        padding:10px;
        position:relative;
      }

      .modaal-container h4 {margin-top:0}
      .col h3 {margin:0}

      .col.perco {padding-left:30px; width:49%; opacity:1}



      #tauxPEE span,#tauxPERCO span {display:inline-block;
        color:white;
        font-size:1.5em;
        font-family: "AktivGroteskW01-Regular",Arial,sans-serif;
        vertical-align:middle;}

        #tauxPEE:after, #tauxPERCO:after {content:"";
        display:block;
        height:30px;
        width:30px;
        border-radius:3px;
        background:#60B391;
        top:50%;
        transform:translateY(-50%) rotate(45deg);
        position:absolute;
        left:-5px;
        z-index:-1;}




        .col.perco.only {padding-left:0;}


        .result-col-vvd.tableau-vvd {
          border: 1px solid transparent;
          width: 100%;
          display: block;
          background-color: #24378d;
          color: white;
          /*height:190px;*/
          font-family: "AktivGroteskW01-Regular",Arial,sans-serif;
          -webkit-box-shadow: inset 0px 10px 19px -6px rgba(45,76,104,1);
          -moz-box-shadow: inset 0px 10px 19px -6px rgba(45,76,104,1);
          box-shadow: inset 0px 10px 19px -6px rgba(45,76,104,1);
        }

        #montant_couple {background: #2e3b4e;
          padding:20px;}

          .result-col-vvd{
            box-sizing:border-box;
            background:#fff;
            display: block;
            width:100%;
            color:#466581;
            position:relative;
            text-align:center;
          }
          .result-col-vvd .col {transition:all 2s linear}

          .tableau-vvd .col {padding:0px 0 40px 0}
          .chiffre-cle { width:100%; display:block;}
          .chiffre-cle .vvd-possible {width:100%; color:yellow;}
          .chiffre-cle  .vvd-possible {font-size:2.45em;}
          .chiffre-cle + .chiffre-cle {/*border-top: 1px solid #7486bf;*/
            padding: 10px 0;}

            .total-vvd {font-size:2em; color:yellow; display:inline-block;vertical-align:middle; margin-left:5px;}

            .details {margin:5px; 0px 5px 0px;font-size:0.6em; line-height:1; display:block;}

            .chiffre-cle-label-vvd {
              font-size: 1.25em !important;
              font-weight: normal;
              font-family: 'AsktivGroteskMedium', sans-serif;
              margin: 10px 0;
            }
            .chiffre-cle-value {
              font-size: 1.5em !important;
              margin-top:10px;
            }

            .double .chiffre-cle-label-vvd {
              font-size: 1.0em !important;
              line-height:1;
            }

            .tooltip {font-size:14px;
			border:none;
			background:none;
			}
            .tooltip:hover {cursor:pointer;}
            .tool-wrapper {position:relative;}
            #switch-vvd .tool-wrapper {width:30px; display:inline-block;}
            #switch-vvd .tool-wrapper .tip {background:#f3f3f3}
            #switch-vvd .tool-wrapper .tooltip_templates {width:270px;}
            .tooltip_templates {display:none;
              position:absolute;
              left:50%;
              transform:translateX(-50%);
              background:white;
              z-index:30000;
              box-shadow: 0 0 10px 6px rgba(0, 0, 0, .1);
              color:#414141;
              line-height: 18px;
              padding: 15px;
              width:170px;
              text-align:left;
              font-size:0.85em;
              top:30px;
            }
			
			.tooltip_templates p:first-of-type {
				margin-bottom:1.25rem
			}
			
			.tooltip_templates p {
				font-size:0.85em;
				line-height: 18px;
				margin-bottom:0
			}
			
			
            .tooltip_templates:before {
              content: "";
              display: block;
              width: 0;
              height: 0;
              border-style: solid;
              border-width: 0 10px 10px 10px;
              border-color: transparent transparent #fff transparent;
              position: absolute;
              transform: translateX(-50%);
              left: 50%;
              top: -6px;
            }
            .tip {
              padding: 3px 9px;
              /* width: 8px; */
              /* height: 8px; */
              font-size: 12px;
              background: white;
              border-radius: 20px;
              color: #000;
              /* font-weight: bold; */
              margin-right: 5px;
              position: relative;
              top: -1.3px;
            }


            .ui-slider-range {background: #60b391}

            .ui-slider-handle {
              background: #ffffff;
              height: 6.125px;
              width: 6.125px;
              border: 9.625px solid #60b391;
              border-radius: 12.25px;
              -webkit-box-sizing: content-box;
              -moz-box-sizing: content-box;
              box-sizing: content-box;
              text-decoration: none;
            }

            .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
              border: 16px solid #60b391;
              font-weight: normal;
              color: #555555;
              height: 10px;
              border-radius: 50%;
              width: 10px;
              top: -15px;
              background:white;
              -webkit-box-shadow: 0 0 8px rgba(0,0,0,.3);
              box-shadow: 0 0 8px rgba(0,0,0,.3);
            }

            .ui-state-default:focus {outline:0}
            .ui-state-default:hover{cursor:pointer}

            .total-vvd span {position:relative;}

            .plus {position:absolute;
              display:block;
              width:60px;
              height:60px;
              border-radius:60px;
              transform:translate(-50%, -50%);
              top:36%;
              left:50%;
              background:white;
            }
            .plus span {position:absolute;
              display:block;
              transform:translate(-50%, -50%);
              top:50%;
              left:50%;
              line-height:1.875em;
              font-size:3em;
              color:black;
              width:1.875em;
              height:1.875em;}


              .simul .switch {
                position: relative;
                display: inline-block;
                width: 260px;
                height: 34px;
                text-align:right;
              }

              .simul .switch input { 
                opacity: 0;
                width:80px;
                height:30px;
              }

              .slider {
                position: absolute;
                cursor: pointer;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background-color: #ccc;
                -webkit-transition: .4s;
                transition: .4s;
                width:60px;
              }

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

              input:checked + .slider {
                background-color: #2196F3;
              }

              input:focus + .slider {
                box-shadow: 0 0 1px #2196F3;
              }

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

              /* Rounded sliders */
              .slider.round {
                border-radius: 34px;
              }

              .slider.round:before {
                border-radius: 50%;
              }

              #switch-vvd {display:block;
                font-family: 'AsktivGroteskMedium', sans-serif;
                color: #414141;
              }
              .d {text-align:right;}
              .button-cover, .knobs, .layer
              {
                position: absolute;
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
              }

              .button
              {
                position: relative;
                width: 4.6em;
                height: 36px;
                overflow: hidden;
                cursor: pointer;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background-color: #ccc;
                -webkit-transition: .4s;
                transition: .4s;
                display:inline-block;
                vertical-align:middle;
                margin-left:10px;

              }

              .modaal-content-container .ajout.vv {
                background: #466581;
                color: #fff;
                text-transform: uppercase;
                font-size: 1em;
                border-radius:5px;
                width:200px;
                margin:0 auto;
                display: block;
                text-align:center;
                padding:10px;
                margin-top:20px;
              }


              .modaal-content-container .ajout.vv:hover {cursor:pointer;
                background: #526a86;}

                .ajout.del {margin:0 auto; display:block;
                  margin-top: 15px;
                  border-radius: 5px;
                  text-align: center;
				  cursor:pointer;
                  width: 200px;
                  text-decoration:underline;
                }

                #label {position:relative;
                  display:inline-block;
                  vertical-align:middle;
				  }
				  
                  .button.r, .button.r .layer
                  {
                    border-radius: 100px;
                  }

                  .checkbox
                  {
                    position: relative;
                    width: 100%;
                    height: 100%;
                    padding: 0;
                    margin: 0;
                    opacity: 0;
                    cursor: pointer;
                    z-index: 3;
                  }

                  .knobs
                  {
                    z-index: 2;
                  }

                  .layer
                  {
                    width: 100%;
                    background-color: #ebf7fc;
                    transition: 0.3s ease all;
                    z-index: 1;
                  }

                  /* Button 1 */
                  #button-1 .knobs:before
                  {
                    content: 'Non';
                    position: absolute;
                    top: 4px;
                    left: 4px;
                    width: 2em;
                    /*height: 10px;*/
                    color: #fff;
                    font-size: 10px;
                    font-weight: bold;
                    text-align: center;
                    line-height: 1;
                    padding: 9px 4px;
                    background-color: #C00000;
                    border-radius: 50%;
                    transition: 0.3s cubic-bezier(0.18, 0.89, 0.35, 1.15) all;
					    transform: translateY(-50%);
						top: 50%;
                  }

                  #button-1 .checkbox:checked + .knobs:before
                  {
                    content: 'Oui';
                    left: 4.3em;
                    background-color: #172258;
                  }

                  #button-1 .checkbox:checked ~ .layer
                  {
                    background-color: #fcebeb;
                  }

                  #button-1 .knobs, #button-1 .knobs:before, #button-1 .layer
                  {
                    transition: 0.3s ease all;
                  }

                  .primary {cursor:pointer}

                  .mensuellement {display:none;}

                  .simul .inactive {opacity:0.3;}
                  .tooltip.active {opacity:1}

                  .message-erreur, .message-erreur1 {color:red; font-weight:bold; padding:5px 0; text-align:center; margin-bottom:.5em
                    /*position:absolute;*/}

                    /*** VVD ***/
                    .versements div {display:inline-block;width:32%;vertical-align:top}

                    .versement.fw {width:100%}
                    .versement.fw div {width:50%; margin:0 auto; display:block}

                    /*** fin VVD ***/

                    .inactive #control-panel-1, .inactive a {
                      pointer-events: none;
                    }

                    .pee .vvd > div {display:inline-block; line-height:1}
                    .chiffre-cle-label-vvd {text-align:right}

                    #note {
                      position:relative;
                      padding-left:100px;
                      color:#466581;
                      z-index:2;
                      overflow:hidden;
                    }

                    #note  > div {background:#f3f3f3;
                      overflow:hidden;
                      padding:20px;
                    }

                    #note:before {
                      content: "";
                      display: block;
                      width: 100px;
                      height: 100px;
                      position: absolute;
                      transform: translateY(-50%);
                      top: 50%;
                      left:0;
                      background: url(/fr/epargnants/outils/simulateur-vvd/images/loupe.svg) center bottom no-repeat #24378d;
                    }

                    #note h3 {margin-top:0; font-size:1em; padding:0; text-align:left}

                   
                    /*** accordion ***/

                    .js .simul-form  .accordion {margin-top:1em;border-bottom:none;}
                    .js .simul-form .conjoint  .accordion {border-bottom:none;}
                    .js .simul-form .panel-title a {
                      padding:10px 10px 10px 0;
                      border-top:0px;
                      font-weight:normal;
                    }

                    .js .simul-form  .panel-content {
                      padding-bottom: 1em;
                    }


                    .js .simul-form .panel-title {font-size:1em}


                    /*** fin accordion ***/


                    .blocmodal {padding:30px;}

                    .blocmodal .croce {
                      display: block;
                      position: absolute;
                      right: 5px;
                      top: 5px;
                      height: 30px;
                      text-align: center;
                      width: 30px;
                      cursor: pointer;
                      line-height: 2;
                      cursor: pointer;
                    }
                    .blocmodal {
                      box-shadow: 0 5px 10px #000;
                      border:none;
                    }

                    .blocfondmodal {opacity:0.25}

                    .limit-perco {padding:10px; background:#C00000;color:white; position:relative;margin-top:10px;}

                    .limit-perco:before {
                      content: "";
                      display: block;
                      width: 0;
                      height: 0;
                      border-style: solid;
                      border-width: 0 10px 10px 10px;
                      border-color: transparent transparent #C00000 transparent;
                      position: absolute;
                      transform: translateX(-50%);
                      left: 50%;
                      top: -6px;
                    }

                    /* < 1034px */
                    @media only screen and (max-width: 60.824em) {

                      #egal {
                        position: absolute;
                        transform: translateX(-50%);
                        background: #466581;
                        height: 100px;
                        width: 100px;
                        color: white;
                        top:-50px;
                        text-align: center;
                        border-radius: 50%;
                        left: 50%;
                      }


                      .col.perco {width:49%}

                      .chiffre-cle-value {
                        font-size: 22px !important;
                      }

                      .simul {margin:10px auto;}
					  
					  .simul div.d {
						  text-align:center !important;
					  }
					  
                      .simul-form {padding:1em;}

                      .ui-slider-horizontal .ui-slider-handle {
                        border:10px solid #60b391;
                        top:-10px;
                      }

                      #dos_go img {display: none;}
                      #tauxPEE, #tauxPERCO { display:block;}
                      #slider, #slider2  {width:100%;}
                      #tauxPEE, #tauxPERCO {width:auto;margin:2em auto}

                      #tauxPEE:after, #tauxPERCO:after {content:"";
                      left:50%;
                      top:-5px;
                      transform:translateX(-50%) rotate(45deg);
                    }

                    .result-col-vvd, .result-col-vvd.tableau-vvd {display:block;width:100%; min-height:auto;}

                    .result-montant {
                      padding: 5em 0 1.5em 0;position:relative; transform:none;top:auto;
                      left:auto; margin:auto;
                    }

                    .versement:after {
                      font-size: 1.5em;
                      line-height: 1.5;
                    }
                  } 


                  @media only screen and (max-width: 49.375em) {


                    #note > div {
                      background: #fff;
                      overflow: hidden;
                      padding: 20px;
                    }

                    #note {
                      margin:1rem
                    }

                    .mentions p {
                      padding:1rem
                    }	

                    #ei_tpl_contenu .row {
                      width: 100%;
                    }
                    #ei_tpl_contenu .col_10 {width:100%;}
                    .row.simul {padding:5px;}
                    #bt-calculer {margin:0 auto;}
                  }

                  @media only screen and (max-width: 31.250em) {
                    #label {width:40%}
                    .button.r {margin:0 auto;}


                    .result-montant {padding-top:2em;}
                    .versements div {width:100%; margin-top:5px;}
                    .chiffre-cle-label-vvd {text-align:center !important;}
                    #ei_tpl_contenu .plus {display:none !important;}
                    .chiffre-cle .vvd-possible {font-size:2em;}
                    .modaal-content-container {
                      padding: 20px !important;
                    }
                  }   
                  @media only screen and (max-width: 25.438em) {
					  
					 #sliderPEE, #sliderPERCO {
						 width:100%
					 }
					  
                    #reinit {margin-top:20px;}	
					.plus {
						position:relative;
						transform:translateX(-50%);
						left:50%
					}
					.message-erreur, .message-erreur1 {
						position: relative;
					}
					
					
                  }