/*! iBlocker.eu PROJEECT */

body {
    margin:0;
    padding: 25px;
    background: url(../piwall/PICTURE/scan.jpg) no-repeat center center fixed; 
/*!    background-size: cover;   */
/*!    background-size: 100% auto;   */
/*!    font-family: 'Asap', sans-serif;   */
/*!    color: #000000;  /*!  font colour for buttons and text in pagini */  
    min-height: 100%;       /*!  ca sa se vada full background picture si pe mobil  */  
/*!	-webkit-background-size: cover;    */
/*!	-moz-background-size: cover;     */
/*!	-o-backgroubd-size: cover;     */
/*!	background-repeat: no-repeat;   */
	background-size: cover;    

}


h1 {
  font-weight: normal;
}

h2 {
   font-size: 25px;
/*!  margin: 40px 40px 0 20px;
  text-shadow: #222 3px 3px 0;  */
  line-height: 25px;  

}

h3 {
  font-size: 30px;
  margin: 30px 80px 0 80px;
  text-align: right;
  text-shadow: #222 3px 3px 0;
}

a {
  text-decoration: none;
}

.main-header {
  background: #222; /*! culoare background header */
  padding: 0px 1px 2px 20px; /*! 20px - daca se mareste se deplaseaza PI3WALL din header spre dreapta */
  color: white;
  position: fixed;
  width: 100%;
  left: 0;
 

}

.main-header a {
  position: absolute;
  left: 20px;
  top: 20px;
  color: white;
  font-size: 10px;
}

.main-nav {
  position: fixed;
  top: 60px;
  width: 120px; /*! latime meniurile laterale */
  height: 100%;
  background: #222; /*! culoare background menu */
/*! NVIOT   overflow-y: auto;
  transition: width 0.3s ease; */
  text-transform: uppercase;
}

.main-nav-right {
  position: fixed;
    right:0;
  top: 60px;
  width: 120px;
  height: 100%;
  background: #222;
/*! NVIOT   overflow-y: auto;
  transition: width 0.3s ease; */
  text-transform: uppercase;
}


.main-nav a {
  display: block;   /*! aranjeaza menuiurile din stg unul sub altul */
  border-bottom: 1px solid #666;  /*! linia dintre butoanele meniului */
  color: white;
  padding: 17px;
}


.main-nav-right a {
  display: block;   /*! aranjeaza menuiurile din stg unul sub altul */
  border-bottom: 1px solid #666;
  color: white;
  padding: 17px;
}

/*! 
.main-nav a:hover, .main-nav a:focus {
  background: #333;
}
*/


.content {
  padding: 20px 20px 20px 0px;   /*!  50px= disyanta de la banda neagra la scrisul Basic OPS, 0px deplaseaza managerul la dr*/
  max-width: 1020px;   /*!  pe ce latime se extind butoanele si iframe ul */
  margin:0 auto;   /*! centreaza managerul din fiecare pagina  */
}

/*! popup window for FIX IP */
 .modalDialog {
        position: fixed;    /*! se refera la pozitia X ului folosit pt close popup */
        font-family: Arial, Helvetica, sans-serif;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: rgba(0,0,0,0.8);
        z-index: 99999;
        opacity:0;
        -webkit-transition: opacity 400ms ease-in;
        -moz-transition: opacity 400ms ease-in;
        transition: opacity 400ms ease-in;
        pointer-events: none;
    }

    .modalDialog:target {
        opacity:1;
        pointer-events: auto;
    }

    .modalDialog > div {
        width: auto;
	max-width: 800px;
	 position: relative; 
        margin: 20vh auto 0px auto;
        padding: 5px 20px 13px 20px;
        border-radius: 10px;
        background: #fff;
        background: -moz-linear-gradient(#fff, #999);
        background: -webkit-linear-gradient(#fff, #999);
        background: -o-linear-gradient(#fff, #999);
    }

    .close {
        background: #606061;
        color: #FFFFFF;
        line-height: 25px;
        position: absolute;
        right: -12px;
        text-align: center;
        top: -10px;
        width: 24px;
        text-decoration: none;
        font-weight: bold;
        -webkit-border-radius: 12px;
        -moz-border-radius: 12px;
        border-radius: 12px;
        -moz-box-shadow: 1px 1px 3px #000;
        -webkit-box-shadow: 1px 1px 3px #000;
        box-shadow: 1px 1px 3px #000;
    }

    .close:hover { background: #00d9ff; }   
/*! popup window for VPN */
 .modalDialog2 {
        position: fixed;    /*! se refera la pozitia X ului folosit pt close popup */
        font-family: Arial, Helvetica, sans-serif;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: rgba(0,0,0,0.8);
        z-index: 99999;
        opacity:0;
        -webkit-transition: opacity 400ms ease-in;
        -moz-transition: opacity 400ms ease-in;
        transition: opacity 400ms ease-in;
        pointer-events: none;
    }

    .modalDialog2:target {
        opacity:1;
        pointer-events: auto;
    }

    .modalDialog2 > div {
        width: auto;
	max-width: 800px;
	 position: relative; 
        margin: 20vh auto 0px auto;
        padding: 5px 20px 13px 20px;
        border-radius: 10px;
        background: #fff;
        background: -moz-linear-gradient(#fff, #999);
        background: -webkit-linear-gradient(#fff, #999);
        background: -o-linear-gradient(#fff, #999);
    }

    .close2 {
        background: #606061;
        color: #FFFFFF;
        line-height: 25px;
        position: absolute;
        right: -12px;
        text-align: center;
        top: -10px;
        width: 24px;
        text-decoration: none;
        font-weight: bold;
        -webkit-border-radius: 12px;
        -moz-border-radius: 12px;
        border-radius: 12px;
        -moz-box-shadow: 1px 1px 3px #000;
        -webkit-box-shadow: 1px 1px 3px #000;
        box-shadow: 1px 1px 3px #000;
    }

    .close2:hover { background: #00d9ff; }   
/*!  input[type=text] {
    width: 8%;
    padding: 2px 10px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 10px;
    box-sizing: border-box;
}   */

/*! popup window for VPN USERS */
 .modalDialog3 {
        position: fixed;    /*! se refera la pozitia X ului folosit pt close popup */
        font-family: Arial, Helvetica, sans-serif;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: rgba(0,0,0,0.8);
        z-index: 99999;
        opacity:0;
        -webkit-transition: opacity 400ms ease-in;
        -moz-transition: opacity 400ms ease-in;
        transition: opacity 400ms ease-in;
        pointer-events: none;
    }

    .modalDialog3:target {
        opacity:1;
        pointer-events: auto;
    }

    .modalDialog3 > div {
        width: auto;
	max-width: 800px;
	 position: relative; 
        margin: 20vh auto 0px auto;
        padding: 5px 20px 13px 20px;
        border-radius: 10px;
        background: #fff;
        background: -moz-linear-gradient(#fff, #999);
        background: -webkit-linear-gradient(#fff, #999);
        background: -o-linear-gradient(#fff, #999);
    }

    .close3 {
        background: #606061;
        color: #FFFFFF;
        line-height: 25px;
        position: absolute;
        right: -12px;
        text-align: center;
        top: -10px;
        width: 24px;
        text-decoration: none;
        font-weight: bold;
        -webkit-border-radius: 12px;
        -moz-border-radius: 12px;
        border-radius: 12px;
        -moz-box-shadow: 1px 1px 3px #000;
        -webkit-box-shadow: 1px 1px 3px #000;
        box-shadow: 1px 1px 3px #000;
    }

    .close3:hover { background: #00d9ff; }   
/*!  input[type=text] {
    width: 8%;
    padding: 2px 10px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 10px;
    box-sizing: border-box;
}   */





/*! start resizing iframe for mobile */   
.wrapper {
width: 67%;  
max-width: 770px;
/*! max-height: 280px; */
}
.container {
height: 0;
width: 100%;
max-width: 770px;
padding-bottom: 50%;
overflow: hidden;
position: relative;
}
.container iframe {
top: 0;
left: 0;
width: 100%;
max-width: 770px;
height: 90%;
position: absolute;
}
/*! END start resizing iframe for mobile */   
/*! start resizing buttons for mobile */   


.input[type=text] {
margin-bottom: 20px;
margin-top: 10px;
width:100%;
padding: 15px;
border-radius:5px;
border:1px solid #7ac9b7;        
        }
/*!
.input[type=submit] {
        width: 7%;
        background-color: #4CAF50;
        color: white;
        padding: 3px 5px;
        margin: 8px 0;
        border: none;
        border-radius: 10px;
        cursor: pointer;
        }
*/

/*! END start resizing buttons for mobile */   
/*! start RESPONSIVE BUTTON BLUE, but id=button-green  */
#button-green{
	font-family: 'Montserrat', Arial, Helvetica, sans-serif;
	float:center;  /*! pozitia pe ecranul mobilului */
	width: 50%;  /*! cand e 100% butonul e cat ecranul mobilului de lat, 50 % e jumatate */
	border: #fbfbfb solid 1px;  /*! grosimea si culoarea marginii butonului */
	cursor:pointer;
	background-color: #3498db;
	color:white;
	font-size:12px;
	padding-top:2px; /*! distanta de la scris pana la marginea de sus a butonului */
	padding-bottom:2px;  /*! distanta de la scris pana la marginea de jos a butonului */
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
  margin-top:-4px;
  font-weight:300; /*! grosimea scrisului din interiorul butonului */
}

#button-green:hover{
	background-color: rgba(0,0,0,0);
	color: #0493bd;
}
	
.submit:hover {
	color: #3498db;
}
	
.ease {
	width: 0px;
	height: 74px;
	background-color: #fbfbfb;
	-webkit-transition: .3s ease;
	-moz-transition: .3s ease;
	-o-transition: .3s ease;
	-ms-transition: .3s ease;
	transition: .3s ease;
}

.submit:hover .ease{
  width:100%;
  background-color:white;
}

/*! start campuri text din display_ap.html: old password, old SSID etc */   
#old {
font-size: 100%;
width: 15%;
height: auto;
}

#new1 {
font-size: 100%;
width: 15%;
height: auto;
}

#new2 {
font-size: 100%;
width: 15%;
height: auto;
}

#oldid {
font-size: 100%;
width: 15%;
height: auto;
}

#new1id {
font-size: 100%;
width: 15%;
height: auto;
}

#new2id {
font-size: 100%;
width: 15%;
height: auto;
}
/*! stop campuri text din display_ap.html: old password, old SSID etc */   


/*! stop RESPONSIVE BUTTON BLUE, but id=button-green */



/*! pana aci */