@charset "utf-8";
    body {
        color : #000;
        background-color : #fff;
        text-align: left;
        background-color: #E6E6E6;
        font-family: Arial, Helvetica, sans-serif;
    }

    .browserInfoButton{
        color: rgb(128, 128, 128); 
    }	
    
    #page {
        display: block;
        margin:auto;
        margin-top: 5%;
        margin-bottom: 5%;
        position: relative;
        background: rgb(255,255,255);
        height: 400px;
    }
			  
    #page1 {
        text-align: center;           
    }
			  
    #main {
        padding-top: 2%;
        width: 100%;
        text-align: center;
    }
       
    h2#tabheader{
        font-size: 1.0em; 
        padding-left: 2%;
        padding-right: 2%;
        position: relative;
    }

    #bkulogin {	
        min-width: 200px;
        min-height: 155px;
        margin-bottom: 5%;
    }
    
    #mandateLogin {        
        padding-bottom: 1%;
        padding-top: 2%;
        margin-left: 1%;
        position: relative;
        font-size: 0.75em;
    }

   .unvisible {
       display:none;
    }
    
    .visible {
      flex-direction: row;
    }

    .OA_header {
        font-size: 2.1em;
        padding-top:1%;
        margin-bottom: 1%;
        margin-top: 1%;
    }

    .bkuimage {
        width:70px;
        height:70px; 
        padding-right: 4%;
        padding-top: 4%;
        padding-bottom: 4%; 
    }

    #metroDetected {
        font-size: 0.8em;
        margin-left: 2%;
        margin-top: 1%;
        margin-right:2%;
    }

    #ssoSessionTransferBlock {
        font-size: 0.8em;
        margin-left: 1%;
        margin-bottom: 1%;
    }

    #processInfoArea {
        margin-bottom: 4%;
        margin-top: 4%;
    }

    #processSelectionArea {
        display:flex;
        flex-direction: column;
    }
    

    .processSelectionButtonArea {
        width:100%;
    }

    .processSelectionButton {
        background: #ababab;
        cursor: pointer;
        height: 40%;
        width: 25%;
        float: right;
        padding-top: 1%;
        padding-bottom: 1%
    }

    #bkuselectionarea {
        display:flex; 
        flex-direction: row;
        justify-content:center;
        text-align: center;
    }

    #bkukarte {
        flex-direction: column;
        align-items: center;
    }
    
    #bkuhandy {
        flex-direction: column;
        align-items: center;
    }
    
    #bkueulogin {
        flex-direction: column;
        align-items: center;
    }
    
    #metroDetected {
        flex-direction: column;    
    }
	

    .buttonDescription {
        text-align: center;
        width: 200px;
    }
    
    
    #processContent {
        margin-top: 10%;
    }

    #eIDASSelection {
        width: 120px; 
        margin-right: 5px;        
    }

    input {
        cursor: pointer;  
    }

    input[type=button],input[type=submit] {
        width: 140px;
        padding-bottom:6%;
        align-content: center;
    }
      

    #bkuselectionarea input[type=button],#bkuselectionarea input[type=submit]{
        font-size: 0.85em;
        border:none;
        background-color: transparent;
    }

			
    #localBKU input:hover, #localBKU input:focus, #localBKU input:active {
        /*text-decoration: underline;*/
    }

    #installJava, #BrowserNOK {
        clear:both;
        font-size:0.8em;
        padding:4px;
    }

			
    #ssoSessionTransferBlock {
        clear: both;
    }

    #stork {
        clear: both;
    }    			
      
    .mandate{
        font-size: 1.3em;
    }
      
    
    #selectArea {
        float:left;
        width:90%;
        padding-left: 4%
    }

    .setAssertionButton {
        background: #efefef;
        cursor: pointer;
        margin-top: 15px;
        width: 70px;
        height: 25px;
    }

    #leftcontent {
        margin-bottom: 4%;
        text-align: left;
    }

    .hell {
        background-color : #F7F8F7;
        color: #000000;	
    }
			
    .dunkel {
        background-color: #F7F8F7;
        color: #000000;
    }

@media screen and (min-width: 650px) {
   
    #page {
        width: 500px;
        height: 400px;
    }
   .unvisible {
       display:none;
      }
        
    #localBKU p {
        font-size: 0.7em;
    } 
        
    #localBKU input{
        font-size: 0.85em;
    }  

    #selectArea {
         font-size: 15px;
         padding-bottom: 65px;
    }
			      	
    #stork h2 {
        font-size: 1.0em;
        margin-bottom: 2%;
    }
        		  
    .setAssertionButton_full {
        background: #efefef;
        cursor: pointer;
        margin-top: 15px;
        width: 100px;
        height: 30px
    }
                    
    #validation {
        position: absolute;
        bottom: 0px;
        margin-left: 270px;
        padding-bottom: 10px;
    }	
        input[type=button],input[type=submit] {
        width: 150px;
        align-content: center;
    }
        .buttonDescription {
        width: 70%;
    }
      
}


@media all and (max-width: 480px) {
				
    body {
        background-color:#fff;
    }
                	  
    #page {
        visibility: hidden;
    }
			  
    #page1 {
        visibility: hidden;
    }
			  
    #main {
        visibility: hidden;
    }
        
    #validation {
        visibility: hidden;
        display: none;
    } 
    
    .bkuimage {
        width:50px;
        height:50px;
        padding-right: 2%;
        padding-bottom: 2%;
    }
    
    #bkukarte {
        flex-direction: column;
        justify-content: center;
        text-align: center;
    }
    
    #bkuhandy {
    flex-direction: column;
    justify-content: center;
    text-align: center;
    }
    
    #bkueulogin {
        flex-direction: column;
        justify-content: center;
        text-align: center;
    }
			  
    .OA_header {
        margin-bottom: 0%;
        margin-top: 0%;
        font-size: 0pt;
        visibility: hidden;
    }
			  
    #alert_area {
        visibility: visible;
        width: 250px;
    }
    
    #alert_area > p:first-child {
        display: none;
        visibility: hidden;
    }
      
    h2#tabheader{
        font-size: 1.5em;
        position: relative;
    }
    
    .mandate{
        font-size: 1.2em;
    }
        
    #leftcontent {
        width:auto;
        border:none;
        visibility:visible;
        margin-bottom: 2%;
    }
    
    		        
    .setAssertionButton_full {
        background: #efefef;
        cursor: pointer;
        margin-top: 15px;
        width: 70px;
        height: 25px;
    }
       
    input[type=button],input[type=submit] {
        width: 80px;
    }

    
    #processContent {
        margin-top: 10%;
      }
    
}