* { box-sizing:border-box; }

html{ 
  height:100%; 
  margin:0;
}

/* basic stylings ------------------------------------------ */
body 				 { 
  font-family: Segoe UI, sans-serif;
  background-color: white;
  min-height:100%; 
  padding:0; 
  margin:0; 
  position:relative; 
}

body::after{ 
  content:''; 
  display:block; 
  height:50px; }

.container 		{ 
  font-family: Segoe UI, sans-serif;
  width:600px; 
  height:100%; 
  min-height:100%;
  display:block; 
  background:#FFF;
  margin:0px auto 0; 
  padding:0px 70px 0px 80px;
  }

#footer{ 
  position:absolute; 
  bottom:0; 
  text-align: right;
  padding-right:10px;
  width:100%; 
  height:50px; 
}

h2 		 { 
  text-align:center; 
  margin-top:0px;
  margin-bottom:30px; 
  font-weight: 400;
  font-size: 2em;
}



/* form starting stylings ------------------------------- */
.group 			  { 
  position:relative; 
  margin-bottom:5px; 
}

.textdiv 		{ 
  font-family: Segoe UI, sans-serif;
  width:600px; 
  display:block; 
  margin:30px auto 0; 
  padding:0px 0px 50px 80px;
  }


#eller {
  font-size:18px;
  padding:10px 10px 10px 5px;
  display:block;
  width:300px;
  margin-left:175px;
  border:none;
}

@media (max-width: 600px) {
  .container 		{ 
    margin:0px 0px 0px 0px; 
    padding:0px 0px 0px 0px;
    width: 100%;
    }
    h2 		 { 
      text-align:center; 
    }
  .textdiv 		{ 
    margin:0px 0px 0px 0px; 
    padding:0px 0px 0px 0px;
    width: 100%;
    }
  #eller 		{ 
    margin:0px 0px 0px 175px; 
    padding:0px 0px 0px 0px;
    }

  }

input.text 				{
  font-size:18px;
  padding:10px 10px 10px 5px;
  display:block;
  width:300px;
  margin-left:75px;
  border:none;
  border-bottom:1px solid #757575;
}

input.text#pmo 				{
  font-size:10px;
  padding:10px 10px 10px 5px;
  display:block;
  width:300px;
  margin-left:75px;
  border:none;
  border-bottom:1px solid #757575;
}

input:focus 		{ outline:none; }

/* LABEL ======================================= */
label 				 {
  color:#999; 
  font-size:18px;
  font-weight:normal;
  position:absolute;
  bottom:10px;
}

label#pmoLabel 				 {
 font-size:18px;
  font-weight:normal;
  position:absolute;
  bottom:5px;
}

/* active state */

input[value=""] ~ label	{
  left:0px;
  font-size:18px;
  color:rgb(0, 0, 0);
}

input:invalid ~ label 		{
  left:0px;
  font-size:18px;
  color:rgb(174, 82, 82);
}

#copyImage {
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
  float: right;
  position: relative;
}

#copyToClipboard {
  float: right;
}

a {
  font-size: 0,5em;
  color:darkgrey;
}


a:link {
  text-decoration: none;
}

a:visited {
  text-decoration: none;
}

a:hover {
  text-decoration: none;
  color:black; 
}

a:active {
  text-decoration: none;
} 

a:focus { 
  outline:none;

}



.button {
  font-size:18px;
  padding:10px 10px 10px 5px;
  display:block;
  width:300px;
  margin-left:75px;
  border:none;
  border-bottom:0px solid #757575;
  color:rgb(174, 82, 82);
  background-color:lightgrey;
  border-radius: 0px;
}

#form:valid .button	{
  color: #5264AE;
  
}

.button:hover {
  background-color: darkgrey;
}


p {
  font-size:18px;
}


textarea {
  position: fixed;
  top: 0;
  left:  0;
  width: 2em;
  height: 2em;
  padding: 0;
  border: none;
  outline: none;
  background: transparent;
  }
  

.bar 	{ position:relative; display:block; width:300px;   margin-left:75px; }
.bar:before, .bar:after 	{
  content:'';
  height:2px; 
  width:0;
  bottom:1px; 
  position:absolute;
  background:#5264AE; 
  transition:0.2s ease all; 
  -moz-transition:0.2s ease all; 
  -webkit-transition:0.2s ease all;
}
.bar:before {
  left:50%;
}
.bar:after {
  right:50%; 
}

input:focus ~ .bar:before, input:focus ~ .bar:after {
  width:50%;
}

input:invalid ~ .bar 		{
  height:2px; 
  bottom:0px; 
  position:absolute;
  background:rgb(174, 82, 82); 
  width:300px;
}

.tooltip-inner {
  color:grey;
}

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: lightgrey;
  opacity: 1; /* Firefox */
}

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

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


ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

li {
  float: left;
}

li a {
  display: block;
  color: black;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.contact {
  color:grey;
}

.contact:hover {
  color:black;
}



.switch {
  position: relative;
  display: inline-block;
  float: right;
  width: 40px;
  height: 20px;

}

.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}

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

.slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 1px;
  bottom: 1px;
  background-color: white;
  background-image: url("pmo-logo.png"); 
  background-repeat: no-repeat;
  background-size: 18px 18px;
  -webkit-transition: .4s;
  transform: rotate(180deg);
  transition: .4s;
  filter: grayscale(100%);
}

input:checked + .slider {
  background-color: #2196F3;
  filter: grayscale(0%);
}

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

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

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

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