/*
	Theme Name: MM-SoftwareSolution Portal Block Design
	Date: Mai 2019
	Description: Portal Block Design 2019
	Version: 1.0
	Author: Marc Mittler
	Author URL: http://www.mm-softwaresolution.com
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

div {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

img {
  width: 100%;
  height: auto;
}

ul,
li {
  list-style: none;
}

/* ---------------------------
   ------- Bodystyle ---------
   --------------------------- */
body {
  background-image: url("portal/images/bg.png");
  color: #444;
  font-size: 14px;
  /* Font size: 14px */
  /*font-family: 'Trebuchet MS', Trebuchet, 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;*/
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
  line-height: 1.429;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---------------------------
   --------- Headings --------
   --------------------------- */
h2 {
  font-size: 1.571em;
}

/* Size = 22px */
h3 {
  font-size: 1.429em;
}

/* Size = 20px */
h4 {
  font-size: 1.286em;
}

/* Size = 18px */
h5 {
  font-size: 1.143em;
}

/* Size = 16px */
h6 {
  font-size: 1em;
}

/* Size = 14px */
h2, h3, h4, h5, h6 {
  font-weight: 400;
  line-height: 1.1;
  margin-bottom: .8em;
}

/* ---------------------------
   ------- Anchorstyle -------
   --------------------------- */
a {
  outline: 0;
}

a img {
  border: 0px;
  text-decoration: none;
}

a:link, a:visited {
  color: #33b5e5;
  /*padding: 0 1px;*/
  text-decoration: none;
}

a:hover, a:active, a:current {
  background-color: #ff0000;
  color: #fff;
  text-decoration: none;
}

/* ---------------------------
   ---- Center Container -----
   --------------------------- */
.center_container{
    width: 700px;
    height: 500px;
    
    position: absolute;

    top: 50%;
    left: 50%;
    
    margin-left: -350px;
    margin-top: -250px;
    
     background: url(images/bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.login_container{
    width: 100%;
    height: auto;
}

.login_form{
    float: right;
    width: 50%;
}

.login{
    margin-top: 80%;
    width: 100%;
    
    display: block;
    text-align: center;
}


/* Form Module */
.form-module {
  position: relative;
  background: #7e36c6;
  max-width: 320px;
  width: 100%;
  border-top: 5px solid #33b5e5;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
  margin: 0 auto;
}

.form-module .toggle {
  position: absolute;
} 

.form-module .form {
  display: none;
  padding: 40px;
}

.pw-module {
    margin-bottom: 20px;
}

/* Animation Test */ 
.form-module .animationBox{
  display: none;
  padding: 40px;   
}

.form-module .animationBox:nth-child(2) {
  display: block;
}
/* Ende Animation Test */

.form-module .form:nth-child(2) {
  display: block;
}

.form-module h2 {
  margin: 0 0 20px;
  color: #b3b3b3;
  
  font-weight: bold;
  font-size: 18px;
  line-height: 1;
}

.form-module h5 {
  padding-bottom: 5px;
  color: black;
  
  font-size: 12px;
  line-height: 1;
  display: inline-block;
}

.form-module .h5-spacer {
  padding-bottom: 15px;
  color: black;
  
  font-size: 12px;
  line-height: 1;
  display: inline-block;
}

.form-module input {
  outline: none;
  display: block;
    
  width: 100%;
  border: 1px solid #d9d9d9;
    
  margin: 0 0 20px;
  padding: 10px 15px;
    
  box-sizing: border-box;
    
  -webkit-transition: 0.3s ease;
  transition: 0.3s ease;
}

.form-module input:focus{
  border: 1px solid #33b5e5;
  color: #333333;
}

input[type="checkbox"] {
    transform:scale(1.5, 1.5);
    cursor: pointer; 
    width: 10%;
}

.spacer{
    padding-bottom: 10px;
}

.spacer_middle{
   padding-bottom: 30px;
}

.form-module a {
    width: 100%!important;
    display: table;
    padding: 10px;
    text-align: center;
}

.link-button {
  cursor: pointer;
  background: #33b5e5;
    
  width: 100%!important;
  border: 0;
    
  padding: 10px 15px;
  color: #ffffff;
    
  -webkit-transition: 0.3s ease;
  transition: 0.3s ease;
    
  color: #ffffff!important;
}

.link-button:hover {
  background: #178ab4;
}

.form-module .button-bottom {
  background: #f2f2f2;
  width: 100%;
  padding: 15px 40px;
  box-sizing: border-box;
  color: #666666;
  font-size: 12px;
  text-align: center;
  display: block;
}

.form-module .button-bottom a {
  color: #333333;
  text-decoration: none;
}

.wrap-input { 
    float: left;
    width: 100%; 
    margin: 0 0 20px;
}

.wrap-input-left { 
    float: left;
}
.wrap-input.error {
    color: red;
}

.wrap-input.error.form-input, .wrap-input.error .form-input {
    border: 1px solid red;
}

.wrap-input.error .show-error { 
    display: block;
}

.wrap-input.wrap-input-clear { 
    clear: both;
}

.wrap-input-last {
    margin-bottom: 12px;
}

.form-input-select{
    float: left;
  /*  margin: 0 0 20px;*/
    
    width: 100%; 
    height: 37px;
}