/*-------------------------   PLACEHOLDER COLOR  ---------------------*/
::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: gray;
  opacity: 1; /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: gray;
}

::-ms-input-placeholder { /* Microsoft Edge */
  color: gray;
}

.flexcenter {
	display: flex;
	justify-content: center;
}

/*---------------IMAGE avec overlay noir ------------------*/
@import url("https://fonts.googleapis.com/css?family=Roboto&display=swap");

body {
  margin: 0;
  font-family: "Roboto", sans-serif;
  overflow-x: hidden;
}

.big-image {
  height: 100vh;
  width: 100vw;
  position: relative;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../img/nsocman.jpg");
}

.overlay {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.65);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.overlay h1 {
  font-size: 65px;
  letter-spacing: 0px;
  margin: 0 0 5px;
}

.overlay p {
  margin: 0;
  font-size: 28px;
}


/*----------------------Input PASSBOX CSS-----------------------*/
/*.passbox {
	width: 600px !important;
	height: 70px !important;
}*/

#passwd {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border: 2px solid #006a52;
    /*border: none;*/
    padding: 8px 58px 4px 9px;
    height: 55px;
    /*width: 100%;*/
    line-height: 1;
    margin: 0 auto;
    font: 100 2em/1 "Lab Gothic",sans-serif;
    outline: none;

    /*background-color: #fff;*/

}

#container_wrap_rank {
    width: 99.2%;
    position: relative;
}

.password_wrap {
    width: 100%;
    /*border: 2px solid #006a52;*/
    position: relative;
    /*text-align: left;*/
    padding: 1px 0;
    /*background-color: #fff;*/
}

.passwd_rank {
    margin: 4px -1px 0 0;
    padding: 0;
    width: 100%;
    height: 8px;
    table-layout: auto;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

.passwd_rank td {
  height: 8px;
  width: 9%;
  /*width: 9%;*/
  /*background: #EC2939;*/
	/*background-color: rgb(236, 41, 57);*/
}

.cracktime {
	font-size: xx-large;
	background-color: #019e97;
	color: white;
	font-weight: bold;
}

.gras {
	font-weight: 400;
}

/*background-color: #019e97;
box-shadow: #0000 0 -1px 6px 1px, inset #019e97 0 -1px 8px, #019e97 0 3px 11px;*/

/*-----------------------CSS FOR RANK COLORS------------------------ */

.transparent {
	background-color: transparent !important;
	border-right: transparent !important;
}

.rankred {
	background-color: rgb(236, 41, 57);
	border-right: 2px solid white;
}
.rankyellow {
	background-color: rgb(238, 158, 38);
	border-right: 2px solid white;
}
.rankgreen {
	background-color: rgb(0, 106, 82);
	border-right: 2px solid white;
}


/*-----------------------  CSS FOR THE LEDS  ---------------------------*/
.led {
    margin: 20px auto;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.25);
    box-shadow: #000 0 -1px 6px 1px;
}

.led-green {
    background-color: #80FF00;
    box-shadow: #000 0 -1px 6px 1px, inset #460 0 -1px 8px, #80FF00 0 3px 11px;
}

/*BADGE CSS*/
.badge-nsoc {
	background-color: #019e95 !important;
}


/*-------------------------- RESPONSIVE -------------------------------*/
@media screen and (min-width: 899px) {
  h1.title-text {
    /*font-size: 4rem;*/
  }
    p.subtitle-text {
    /*font-size: 2rem;*/
  }
}


@media screen and (max-width: 900px) {
  h1.title-text {
    font-size: 3rem;
  }
  p.subtitle-text {
    font-size: 135%;
  }
}


@media screen and (max-width: 650px) {
  h1.title-text {
    font-size: 2.5rem;
  }
  p.subtitle-text {
    font-size: 120%;
  }
  ::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    font-size: 0.79em;
  }
  .password_wrap {
    width: 28rem;
  }
  #passwd {
    width: 100%;
  }
  span {
    font-size: 0.7rem !important; 
  }
  #divleds {
    width: 400px;
  }
  #labelcracktime{
    font-size: 1.5rem;
  }
  #output{
    font-size: 1.5rem;
  }
 /* .field-icon{
    font-size:1.3333em !important;
  }*/
  
}

/*@media screen and (max-width: 550px) {
  h1.title-text {
    font-size: 1.7rem;
  }
  p.subtitle-text {
    font-size: 85%;
  }
  ::placeholder { 
    font-size: 0.55em;
  }
  .password_wrap {
    width: 21rem;
  }
  #passwd {
    width: 100%;
  }
  .led{
    width: 15px;
    height: 15px;
  }
  span {
    font-size: 0.7rem !important; 
  }
  #divleds {
    width: 300px;
  }
  #labelcracktime{
    font-size: 1.1rem;
  }
  #output{
    font-size: 1.1rem;
  }
}*/


@media screen and (max-width: 550px) {
  h1.title-text {
    font-size: 2rem;
  }
  p.subtitle-text {
    font-size: 100%;
  }
  ::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    font-size: 0.65em;
  }
  .password_wrap {
    width: 24rem;
  }
  #passwd {
    width: 100%;
  }
  .led{
    width: 17px;
    height: 17px;
  }
  span {
    font-size: 0.7rem !important; 
  }
  #divleds {
    width: 350px;
  }
  #labelcracktime{
    font-size: 1.2rem;
  }
  #output{
    font-size: 1.2rem;
  }
}

@media screen and (max-width: 450px) {
  h1.title-text {
    font-size: 1.8rem;
  }
  p.subtitle-text {
    font-size: 85%;
  }
  ::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    font-size: 0.58em;
  }
  .password_wrap {
    width: 21rem;
  }
  #passwd {
    width: 100%;
  }
  .led{
    width: 15px;
    height: 15px;
  }
  span {
    font-size: 0.7rem !important; 
  }
  #divleds {
    width: 300px;
  }
  #labelcracktime{
    font-size: 1.1rem;
  }
  #output{
    font-size: 1.1rem;
  }
}

/*------------------------   icon champ input   --------------------------*/
.field-icon {
  float: right;
  margin-left: -40px;
  margin-right: 10px;
  margin-top: 19px;
  position: relative;
  z-index: 2;
  font-size:1.3333em !important;
}