/*************************************************************************
 *
 *  File: PDF_UI_basic.css -> old file:gw_layout.css
 *
 *      This file contains CSS definitions for the general layout
 *      (positions, sizes, etc. for all page areas, navigation elements,
 *      buttons, ...) and for browser settings.
 *		Be careful with changes!!
 *
 ************************************************************************/


/*for placeholder, that moves up, if user entered s.th.*/
/*this is for pwd-change site*/
.filter_placeholder_label {
    padding: 0.2rem 0.5rem 0 0.5rem;
    position:relative;
}
  
.filter_placeholder_label > span {
  margin-top:0.2rem;
  font-size:10pt;
  padding-left: 1rem;
  pointer-events: none;
  position:absolute;
  left:0;
  top:0;
  transition: 0.2s;
  transition-timing-function: ease;
  transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
  opacity:0.5;
}

@media print, screen and (min-width: 30em) {
    .filter_placeholder_label {
        padding-left:5.5rem;
        padding-bottom:0.5rem;
        position:relative;
        display:inline-block;
        width:30rem;
        } 
    .filter_placeholder_label > span {
     /* padding:0.313rem;*/
      margin-top:0.2rem;
      font-size:10pt;
      padding-left:6rem;
      padding-top:0.2rem;
      pointer-events: none;
      position:absolute;
      left:0;
      top:0;
      transition: 0.2s;
      transition-timing-function: ease;
      transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
      opacity:0.5;
}

}

.filter_placeholder_label > input {
 /* padding:0.313rem;
  height:1.5rem; 
 /* margin-top:0.2rem;*/
}

.filter_placeholder_label > input:focus + span, .filter_placeholder_label > input:not(:placeholder-shown) + span {
  opacity:1;
  transform:  translateY(-100%) translateX(-10px);/*scale(0.75) -10ps is value for jumping placeholder to the left*/
}

/* For IE Browsers*/
/*.filter_placeholder_label > input:focus + span, .filter_placeholder_label > input:not(:-ms-input-placeholder) + span {
  opacity:1;
  transform: scale(0.75) translateY(-100%) translateX(-10px);
}*/

/*************************************************************************
 *  Basic page defaults
 ************************************************************************/
/*::-webkit-input-placeholder
{
	opacity: 1;
}*/
:-moz-placeholder {  /*firefox 18 */
	opacity: 1;
}

::-moz-placeholder {  /*firefox 19 */
	opacity: 1;
}


/**********************************************************************/  
/*begin			Waiting Icon animation       
***********************************************************************/  
#overlay_div
{
			display: none; 
			position:absolute; 
			z-index: 7; /*has to be over all others*/
			width: 100%; 
			height: 100%; 
			
			top: 0px; 
			left: 0px; 
			text-align: center; 
			vertical-align: middle;
	
			/*-ms-backface-visibility: hidden;*/
			-webkit-backface-visibility: hidden;
			/*-moz-backface-visibility: hidden;
			-o-backface-visibility: hidden;*/
		  	backface-visibility: hidden;
		  
}
        
#wait_icon_div
{
	position:relative;
	top:49%;
	/*left:45%;*/
	/*-ms-backface-visibility: hidden;*/
	-webkit-backface-visibility: hidden;
	/*-moz-backface-visibility: hidden;
	-o-backface-visibility: hidden;*/
  	backface-visibility: hidden;
	z-index: 7; /*has to be over all others*/
}

.wait_icon
{
	position: relative;
	animation: smoke 1s infinite linear; 
	/*opacity:1;*/
	z-index: 7; /*has to be over all others*/
	height:80px;
	width:80px;
	height:5rem;
	width:5rem;
}

@media print, screen and (min-width: 30em) {
    .wait_icon {
       height:120px;
	   width:120px;
	   height:7.5rem;
	   width:7.5rem;
        } }

@keyframes smoke{
    from{  
    		/*-ms-transform: rotateY(0deg);*/ /*without blank before '(' !!*/
    		-webkit-transform: rotateY(0deg);
  		/*-moz-transform: rotateY(0deg);*/
  		/*-o-transform: rotateY(0deg);*/
    		transform: rotateY(0deg);   
    		
		}
    to  {  
		  /*  -ms-transform: rotateY(360deg);*/
		    -webkit-transform: rotateY(360deg);
		  /*  -moz-transform: rotateY(360deg);*/
		  /*  -o-transform: rotateY(360deg);*/
		    transform: rotateY(360deg) 
		}
}

/*end			Waiting Icon animation       */ 
/**********************************************************************/


hr, .grid-container
{
	/*width of visible content of main window*/
	max-width: 1520px;
	max-width: 95rem;	
	margin-top:2rem;	
}


html, body {
    margin:  			0px;
    padding: 			5px 0px; 
    padding: 			0.313rem 0rem; 
    height:             100%;
    border:             none;
    line-height:		16px;
    line-height:		1rem;
    
  /*font-size: 62.5%; */
    /* Do not enable! Is only for remember: new for calculate the px and rem fallback -> 1rem are 10px  
    px has to be positioned before rem for fallback*/
}

/*************************************************************************
 *  Session timer
 ************************************************************************/

#gw_session_timeout_div {
    position:               absolute;
    left:                   10px;
    bottom:                 30px;
    display:                block;
    z-index:                2;
}

/*************************************************************************
 *  Input elements
 ************************************************************************/

input[type="radio"], input[type="checkbox"] {
    margin:                 2px 3px 3px 3px;
    vertical-align:         middle;
    cursor:		pointer;
    width:20px;/*1.25rem = 20px*/
	height:20px;	
	width:1.25rem;/*1.25rem = 20px*/
	height:1.25rem;	
    
}
/*1.25rem = 20px*/
@media print, screen and (max-width: 40em) {
    input[type="radio"], input[type="checkbox"]  {
    	width:20px;/*1.25rem = 20px*/
		height:20px;	
		width:1.25rem;/*1.25rem = 20px*/
		height:1.25rem;	
		padding:1rem;
	/*transform: scale(2); */
	}
}


input[type=text] {
  /*  width:                  25em;*/
	position:relative; 	/* for safari and chrome */
	z-index:0;			/* for safari and chrome */
}

input[type=password] {
   /* width:                  25em;*/       
    position:relative; 	/* for safari and chrome */
	z-index:0;			/* for safari and chrome */
}

table {
    /* default: try to center the table inside the surrounding container */
    margin-left:            auto;
    margin-right:           auto;
    float: left;
}

th {
    /* define padding for table head; should look similar to a
     * gwBox header (.gwBox > h5) */
    white-space:            nowrap;
    padding:                2px 0.5em;
}

td {
    /* use "vertical-align: top" as default, because anything else would
     * cause ugly help pages (see .gwBoxTable td) */
    vertical-align:         top;
    text-align:             left;
}


.check_box_switch {
  position: relative;
  left: 15px;
  top: 0px;
  z-index: 0;
  -webkit-appearance: none;
  opacity:	0;
}
.check_box_switch + label {
  position: relative;
  display: block;
  cursor: pointer;
  font-family: sans-serif;
  font-size: 24pt;
  line-height: 1.3;
  padding-left:60px;
  position: relative;
  margin: 0.4rem 0 0 -1rem;
/*  margin-top: -19px;*/
}

@media print, screen and (min-width: 30em) {
    check_box_switch + label {
    	margin: 0.8rem 0 0 -1rem;
        } }

.check_box_switch + label:before {
  width: 35px;
  height: 18.5px;
  border-radius: 30px;
  border: 2px solid #ddd;
  background-color: #EEE;
  content: "";
  margin-right: 15px;
  transition: background-color 0.5s linear;
  z-index: 5;
  position: absolute;
  left: 0px;
}
.check_box_switch + label:after {
  width: 15px;
  height: 15px;
  border-radius: 30px;
  background-color: #fff;
  content: "";
  transition: margin 0.1s linear;
  box-shadow: 0px 0px 5px #aaa;
  position: absolute;
  left: 2px;
  top: 2px;
  z-index: 10;
}
.check_box_switch:checked + label:before {
 /* background-color: #2b8718;*/
 background-color:#286499;
}
.check_box_switch:checked + label:after {
  margin: 0 0 0 15px;
}

/*************************************************************************
 *  Debugging messages
 ************************************************************************/
#gw_no_nav_content_div {
    position:               fixed;
    top:                    110px;
    left:                   1px;
    right:                  10px;
    bottom:                 0px;
    margin:                 10px;
    padding:                10px;
    overflow:               auto;
    display:                block;
    z-index:                1;
}

#GW_DEBUG_MSG {
    text-align:             center;
    position:               fixed;
    top:                    110px;
    left:                   151px;
    right:                  10px;
    height:                 250px;
    border:                 1px solid #ff0000;
    border-spacing:         0px;
    margin:                 10px;
    padding:                10px;
    overflow:               auto;
    display:                block;
    z-index:                1;
}

#GW_DEBUG_MSG pre {
    font-size:              12pt;
    font-family:            Courier, monospace;
    color:                  #007f00;
}

/*New Elements from here*/
/* this is the table and read_email_box together */
.grid-x > .medium-9 /*  Handy and Tablet*/
{
	width: 100%;
}

@media print, screen and (min-width: 59em) { /*desktop*/
    .grid-x > .medium-9  {
       width:80%;
       padding-left: 0.5rem;
        }  }

.grid-x_ui
{
   max-height:2rem;
   
}

.pwd_policy_image_div
{
	/*display:flex;*/
}

img#passwordCheckResultImg
{
	display:none;
	position: relative;
    top: 1.4rem;
    height: 15px;
    width: auto;
    left: 0rem;
}

@media print, screen and (min-width: 30em) {
    img#passwordCheckResultImg {
    display:    block;
    position:   relative;
    top:        1.4rem;
    height:     15px;
    width:      auto;
    left:       -28rem;
        } }

.error_text_div_registration
{
    padding-top:4rem;
    font-size:12pt;
}

.info_text_div_registration
{
    padding-top:4rem;       
    text-align:center;
    font-weight:bold;
    font-size:12pt;
}

.error_text_div_write
{
    text-align:center;
}

.hr_line
{
    margin:1rem auto 0.8rem auto !important;
}

/*eye toggle button*/
#eyeTogglePassword,#eyeTogglePasswordOld,#eyeTogglePasswordConfirm {
    position:       absolute;
    height:         44px;
    height:         2.75rem;
    width:          44px;
    width:          2.75rem;
    margin-left:    -8rem;
    margin-top:     0rem;
    cursor:         pointer;
    z-index:        2;
}       

@media print, screen and (max-width: 30em) {/*Attention! small display*/
    #eyeTogglePasswordOld,#eyeTogglePassword,#eyeTogglePasswordConfirm
    {
    	right:0; top:0;
    } 
    .eyeInputClass
    {
      /*  display: flex;*/
       display:inline-block;
       position:relative;
    }
}