[v-cloak] {
  display: none;
}

#modal-file-show .modal-dialog{height: 90%;}
#modal-file-show .modal-content{height: 100%;}
.iframe-pdf{ width: 100%; height: 100%;}
.cursor{ cursor:pointer; }
.notificationCenter { width: 500px!important; z-index: 9999!important;}
.custom-input{
    height: calc(1.6em + 0.75rem + 2px);
    padding: 0.375rem 0.75rem;
    font-size: 0.9rem;
    width: 26%;
    font-weight: 400;
    line-height: 1.6;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    -webkit-transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

/* UTILES */
body{
    font-family:'Arial', sans-serif;
    font-size: 16px;
    background-color: white;
}
.container{
    max-width:1230px;
}
.selector-for-some-widget {
    box-sizing: content-box;
}
.col-md-3{
    max-width:270px;
}
.mx-n8{
    margin-top:-80px !important;
}
h1{
    color:#393939;
    font-size:40px;
}

/* CONTENT */

.container-video{
    width:100%;
    overflow:hidden;
    position:relative;
    padding-bottom: 110px;
}
.container-video:before{
    content:'';
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background-color:rgba(0,0,0,0.5);
    z-index:9;
}
.header-video{
    position: absolute;
    top:50%;
    left: 50%;
    transform: translate(-50%,-50%);
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
}
.header{
    position:relative;
    z-index: 99;
}
.header-hashtag{
    font-weight:700;
    font-size:45px;
    color:rgba(255, 255, 255, 0.60)!important;
    line-height:1.3em;
}

.login .navbar-brand, .login .navbar-brand:hover, header .navbar-brand, header .navbar-brand:hover{
  color:white;
  font-size: 16px;
}
.login .nav-link,.login .nav-link:hover{
  color: white;
}
.hello{
    font-weight:700;
    font-size:32px;
    line-height:1.3em;
}
.begin{
    font-weight: 700;
    font-size:27px;
    line-height:1.3em;
}
.login{
    z-index:99;
    top:35px;
    right:35px;
}
.user-avatar{
    width:22px;
    height:22px;
    background-image:url('../img/user.png');
    background-position:center;
    background-repeat:no-repeat;
    background-size:cover;
    border-radius: 100%;
    margin-right:10px;
}

.my-account{
    text-transform: uppercase;
    font-size:14px;
    font-weight:700;
    color: #FFF;
}
.my-account:hover{
    color: #FFF;
}

.blue{
    background-color:#a0c6e6;
}
.red{
    background-color:#e499a2;
}
.orange{
    background-color:#f5b780;
}
.green{
    background-color:#9ed09e;
}
.infos button{
    position:relative;
    z-index:999;
    font-size:20px;
    font-weight:700;
    line-height:1.2em;
    box-shadow: 0 7px 12px rgba(109,109,109,0.2);
    transform:translateY(0);
    transition: all 0.3s ease-out;
}
.infos button:hover{
    text-decoration: none;
    transform:translateY(-15px);
    box-shadow: 0 15px 25px rgba(109,109,109,0.2);
}

.infos button.active{
    text-decoration: none;
    transform:translateY(-15px);
    box-shadow: 0 15px 25px rgba(109,109,109,0.2);
}

.infos button.blue.active{
    background-color: #99bddb;
}

.infos button.red.active{
    background-color:  #e48993;
}

.infos button.orange.active{
    background-color: #f7b578;
}

.infos button.green.active{
    background-color: #91d491;
}

.icon{
    min-height:60px;
    margin-bottom:15px;
    background-size:auto;
    background-position: bottom center;
    background-repeat:no-repeat;
}
.blue .icon{
    background-image:url('../img/entreprise.png');
}
.red .icon{
    background-image:url('../img/docs.png');
}
.orange .icon{
    background-image:url('../img/infos.png');
}
.green .icon{
    background-image:url('../img/integration.png');
}
.home-content{
    color:#636363;
    line-height:1.8em;
}
.button{
    position:relative;
    width:auto
}
.button:before,
.button:after{
    content:"";
    width: 0;
    height: 2px;
    position: absolute;
    transition: all 0.2s linear;
    background: #4f9fe4;
    transition-delay: 0s;
}
.button:before{
    right: 0;
    top: 0;
}
.button:after{
    left: 0;
    bottom: 0;
}
.button a:before,
.button a:after{
    content:"";
    width:2px;
    height:0;
    position: absolute;
    transition: all 0.2s linear;
    background: #4f9fe4;
    transition-delay: 0.2s;
}
.button a:before{
    left:0;
    top:0;
}
.button a:after{
    right:0;
    bottom:0;
}
.button a{
    display:block;
    position:relative;
    color:#4f9fe4;
    font-size:18px;
    padding:10px 15px;
    background:transparent;
    transition:all 0.3s ease-out;
}
.button a:hover{
    text-decoration: none;
    transition-delay:0.3s;
    background:rgba(79,159,228,0.15);
}
.button:hover::before, .button:hover::after{
  transition-delay: 0.2s;
  width:100%;
}
.button:hover a::before, .button:hover a::after{
  transition-delay: 0s;
  height:100%;
}
.video-content{
    min-height: 340px;
    background-image:url('../img/video.jpg');
    background-position: center;
    background-size:cover;
    background-repeat: no-repeat;
}
.icon-file{
    width:50px;
    height:50px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position:center;
    margin-right: 15px;
}
.icon-file-png{background-image: url('../img/png.svg');}
.icon-file-jpg{background-image: url('../img/jpg.svg');}
.icon-file-pdf{background-image: url('../img/pdf.svg');}
.icon-file-jpeg{background-image: url('../img/jpg.svg');}
.icon-file-form{background-image: url('../img/doc.svg');}
.icon-file-special-file{background-image: url('../img/doc.svg');}
.icon-file-mp4{background-image: url('../img/mp4.png');}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: #FFF;
}
.table-striped tbody tr{
    background-color: #FFF;
}
.table-hover tbody tr:hover {
    color: #212529;
    background-color: rgba(0, 0, 0, 0.075);
}

.badge-form{
    border-radius: 50px; padding: 5px 10px; font-weight: normal;
}

.check-green{color:#38c172;}

.list-files{
  list-style : decimal;
}
.header .menu-btn{
    display:none;
}
.header .navbar li{
    list-style:none;
}
.header .navbar .dropdown-menu{
    display:none;
}

@media screen and (max-width: 1024px) {
    .col-md-3{
        width:45% !important;
        max-width:unset !important;
        flex: 0 0 45%;
    }
    .text-content{
        margin:0 !important;
    }
}

.custom-input:disabled, .custom-input[readonly] {
    background-color: #e9ecef;
    opacity: 1;
}


@media screen and (max-width: 767px) {
    .col-md-3{
        width:100% !important;
        max-width:unset !important;
        flex: 0 0 100%;
    }
    .header-hashtag{
        font-size:7vw;
    }
    .hello{
        font-size:4.2vw;
    }
    .begin{
        font-size:3.7vw;
    }
    .infos button{
        padding: 1.5rem 0 !important;
    }
    .login{
        top:85px;
        z-index: 9;
    }
    .login #navbarSupportedContent{
        display:none;
    }
    /* menu */
    .header .navbar {
      clear: both;
      height: 0;
      overflow:hidden;
      transition: all .2s ease-out;
      flex-direction:column;
      padding:0;
      position:absolute;
      top:50px;
      right:0;
      width:100%;
      max-width:250px;
      z-index:999;
      box-shadow:0 6px 15px #000;
    }
    .header .navbar li{
        background:#fff;
        list-style:none;
        padding:5px 10px;
        width:100%;
        text-align:right;
        transition:all 0.3s ease-out;
    }
    .header .navbar-brand{
        color:#1e1e1e !important;
    }
    .header .navbar li:hover{
        background:#eeeeee;
    }
    .header .navbar .home{
        display:flex;
        align-items:center;
        flex-direction: row-reverse;
    }
    .header .navbar .home i{
        margin-left:2px;
    }
    .header .menu-icon {
      cursor: pointer;
      display: inline-block;
      float: right;
      padding: 20px;
      position: relative;
      user-select: none;
    }

    .header .menu-icon .navicon {
      background: #fff;
      display: block;
      height: 3px;
      position: relative;
      transition: background .2s ease-out;
      width: 18px;
    }

    .header .menu-icon .navicon:before,
    .header .menu-icon .navicon:after {
      background: #fff;
      content: '';
      display: block;
      height: 100%;
      position: absolute;
      transition: all .2s ease-out;
      width: 100%;
    }

    .header .menu-icon .navicon:before {
      top: 5px;
    }

    .header .menu-icon .navicon:after {
      top: -5px;
    }

    /* menu btn */

    .header .menu-btn {
      display: none;
    }

    .header .menu-btn:checked ~ .navbar {
      height: auto;
    }

    .header .menu-btn:checked ~ .menu-icon .navicon {
      background: transparent;
    }

    .header .menu-btn:checked ~ .menu-icon .navicon:before {
      transform: rotate(-45deg);
    }

    .header .menu-btn:checked ~ .menu-icon .navicon:after {
      transform: rotate(45deg);
    }

    .header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
    .header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
      top: 0;
    }
    .header .navbar .dropdown-menu{
        display:block;
        position: relative;
        width: 100%;
        padding: 0;
        margin:0;
        border: 0;
        border-radius: 0;
        text-align: right;
        background: transparent;
        color:#fff;
    }
    .header .navbar .dropdown-menu a{
        padding-top: 0.32rem;
        padding-bottom: 0.32rem;
        margin-right: 1rem;
    }
    .navbar .dropdown-menu{
        display:none;
    }
    .header .navbar li.disconnect,
    .header .navbar li.disconnect:hover,
    .header .navbar li.disconnect a,
    .header .navbar li.disconnect a:hover{
        background:crimson;
        color:#fff;
    }
}


.link-rgpd{
  color: blue;
  text-decoration: underline;
  cursor: pointer;
}

.btn-show-password{
    position: absolute;

    right: -19px;

    top: 7%;

    cursor: pointer;
}

.img-director{
  width: 33%;
  float: right;
  margin-right: 0;
  margin-left: 22px;
  margin-top: 10px;
  padding: 10px;
  border-radius: 100%
}



/* CSS AUTH PASSWORD STRENGTH */
#meter_wrapper
{
 border:1px solid grey;
 margin-top:2px;
 width:100%;
 height:7px;
 border-radius:3px;
}
#meter
{
 width:0px;
 height:5px;
 border-radius:
}
#pass_type
{
 font-size:20px;
 margin-top:20px;
 margin-left:45%;
 text-align:center;
 color:grey;
}