/*
    /css/modal.css
    v2.0 [22 Mai 25]
*/

/* modal wide */
.overlaywhite{position:fixed; background-color:#FFFFFF; opacity:1; width:100%; height:100vh; z-index:19; display:none; top:0; left:0;}

.modalwide{position:absolute; width:100%; top:0; left:0; background-color:#FFF; display:none; z-index:20;}
  #modalwide-content{width:28em; margin:3em auto 0 auto; padding:0 0 0 2em;}
  .modalwide-title{width:100%; font-size:1.5em; font-weight:500; text-align: center; line-height:1em; margin-bottom:1em;}
  .modalwide-text{font-size:0.8em; line-height:1.5em;}
  .modalwide-notes{font-size:0.6em; color:#777777; font-style:italic; margin:1em 0 1em 0; line-height:1.2em;}
  #modalwide-buttons-wrapper{margin-top:1.5em;}

  #modal-check-conditions{margin: 1em 0 1em 0; position: relative; padding: 0 0 0 0;}

  a#check-link{float:left; margin-left:0.5em; color:#555; padding:0.2em; font-size:0.7em;}
  a#btn-create-account-cgu{float:left;}


  /* refonte [22 mai 25] */
  .square-wrapper{float:left;}
    .square-wrapper img{width:20px;}

  /* form checkbox like */
  .check_box_off{float:left; width:16px; height:16px; border:2px solid #CCC;}
  .check_box_on{float:left; width:16px; height:16px; border:2px solid #5333ED; background-color:#5333ED; background-image:url(/img/checkmark.png); background-repeat:no-repeat; background-position-y: 0.1em;}
  .check_box_red{float:left; width:16px; height:16px; border:2px solid #F33709;}


  /* BUTTONS */
  .btn-modal-white{background-color:#FFF; font-size:0.750em; color:#3B3F3D; padding:1em 2em 1em 2em; font-weight:500;
  border-radius:5px; border:1px solid #CCC; display:inline-block; outline:none;}
  .btn-modal-purple{background-color:#5333ED; font-size:0.750em; color:#FFF; padding:1em 2em 1em 2em; font-weight:500; border-radius:5px; border:1px solid #4000FF; display:inline-block; outline:none;}


/* overlay */
#overlay{display:none; background-color:#111; z-index:20; position: fixed; width:100%; height:100vh; opacity:0.5;}

/* modal */
#modal{
  position:fixed;
  display:none;
  top:3.5em;
  width: 22em;
  left: 50%;
  transform: translateX(-50%);
  background-color: #FFF;
  z-index: 21;
  border-radius: 20px;
  transition-delay: .3s;
  -webkit-transition: all .3s ease;
  -moz-transition: all .3s ease;
  -ms-transition: all .3s ease;
  -o-transition: all .3s ease;
  transition: all .3s ease;
}

#modal-title{background-color:#5333ED; font-size:1em; text-align:center; padding:1.5em 1em 1.5em 1em; color:#FFF;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
}

/* btn close */
#modal-btn-close-wrapper{position:absolute; top:1.5em; right:1.4em;}

  a#modal-btn-close svg{color:#FFF;}

  #modal-content{padding:2em;}
  #modal-content::after{clear:both;}



  /* modal form */
  ul#modalformlist{padding-left:0; margin:0 0 0 0;}
    ul#modalformlist li{list-style: none;}
    ul#modalformlist li:not(:last-child){margin-bottom:0.8em;}

    ul#modalformlist li#codeantispam-wrapper{position:relative;}

    form.modalform{}
      form.modalform input[type="text"]{width:100%; border:none; border-bottom:2px solid #EEE; font-size:0.750em; color:#111; padding:0.8em 0 0.8em 0; outline: none;}

      form.modalform textarea{width:100%; border:none; border-bottom:2px solid #EEE; font-size:0.750em; color:#111; padding:0.8em 0 0.8em 0; outline: none;}

      form.modalform input#codeantispam{padding-left:5em; position:relative;}

      form.modalform input[type="submit"]{cursor: pointer;}

      form.modalform input.red,form.modalform textarea.red{border-color:#ED4E34;}


      #thecode{background-color: #EEEEEE; position:absolute; z-index:22; width:auto; height:42px; top:0; left:0; padding:0.8em; font-size:0.750em; color:#111;}
      #thecodeinfo{position:absolute; font-size:0.6em; color:#777; top:1.2em; right:0;}

      #modal-btn-submit-wrapper{margin:1.5em 0 0 0;}

        #modal-btn-submit{float:left;}

        #modal-loader-wrapper{float:left; margin:0.5em 0 0 1em; width:32px; height:32px;}

        /* modal loader */
        #modal-loader-wrapper img{animation: spinner 2s linear infinite; display:none;}