/*-------------------PC 1600 + --------------------------------*/     
      @media  (min-width: 1601px) {
      .loginOpen{
	 top:7px;
	 right:90px;
	 width:35px;
	 height:35px;
	 font-size:30px;
	 line-height:50px;
     }

      }

/*-------------------PC 1250 + --------------------------------*/      
      @media (max-width: 1600px) and (min-width: 1250px) {

     .loginOpen{
	 top:7px;
	 right:80px;
	 width:35px;
	 height:35px;
	 font-size:30px;
	 line-height:50px;
     }

      }

/*-------------------PC 700 + vga--------------------------------*/      
      @media (max-width: 1250px) and (min-width: 701px) {
      /*.bucket{grid-template-columns: 1fr 1fr;}*/

     .loginOpen{
	 top:7px;
	 right:70px;
	 width:50px;
	 height:50px;
	 font-size:30px;
	 line-height:50px;
     }

      }

      
/*-------------------PC liten --------------------------------*/      
      @media (max-width: 700px) {
      /*.bucket{grid-template-columns: 1fr;}*/

     .loginOpen{
	 top:7px;
	 right:70px;
	 width:50px;
	 height:50px;
	 font-size:30px;
	 line-height:50px;
     }
	  
      }
 

 /*-------------------Felles PC --------------------------------*/      
      @media only screen
      and ( min-device-width: 950px ) , (-webkit-device-pixel-ratio: 1) {
	  
	.loginUserDataCont{
	      top: 50px;
       }
       .loginLogoutButton{
	   left:20px;
	   top:20px;
	   width:100px;
	   height:30px;
	   line-height:30px;
       }
       .loginUserCont{
	  position:relative;
	  padding:40px 40px 40px 40px;
       }

      .loginButtonCont{	      
	  padding:5px 5px 20px 0px;
      }

      .loginUserBoxSubject{
	  height:50px;	  
	  line-height:50px;
	  color: #132844;
      }
      .loginCodeNew{
	  width: 150px;
	  font-size:16px;
	  padding: 5px 10px 5px 10px;
      }
      .loginGroupCode{
	  top:30px;	    
      }


      .loginDropdownCont{
	  position: absolute;
	  width:200px;
	  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.4);
	  border-radius:20px;
      }
      .loginDropdownCont span{  
	  font-size: 16px;
	  padding: 12px 16px;
      }
      .loginDropdownCont .loginStroke{
	  width:30px;
	  height:4px;
      }

   }


 /* ----------- Mobile  ----------- */     
     @media only screen 
            and (min-device-width: 100px) 
            and (max-device-width: 500px)
            and (-webkit-min-device-pixel-ratio: 2) {
     /*.bucket{grid-template-columns: 1fr;}*/



	 
     }

 /* ----------- Mobile, liten pad ----------- */     
     @media only screen 
            and (min-device-width: 500px) 
            and (max-device-width: 950px)
            and (-webkit-min-device-pixel-ratio: 2) {
     /*.bucket{grid-template-columns: 1fr 1fr;}*/

      
     }


/* ----------- Pad  ----------- 
     @media only screen 
            and (min-device-width: 750px)
            and (max-device-width: 950px) 
            and (-webkit-min-device-pixel-ratio: 2) { 
     .bucket{grid-template-columns: 1fr 1fr 1fr;}


     }
*/
     
/* ----------- Felles Mobil og Pad med  ratio 2 og mer  ----------- */
     @media only screen
            and (max-device-width: 950px) 
            and (-webkit-min-device-pixel-ratio: 2) { 

	 .loginUserDataCont{
	     top: 20px;
	 }

	 .loginLogoutButton{
	     left:5px;
	     top:15px;
	     width:70px;
	     height:25px;
	     line-height:25px;
	 }
	 .loginUserCont{
	     padding:10px 10px 10px 10px;
	 }
	 .loginButtonCont{
	     padding:0px 0px 0px 0px;
	 }
	 .loginUserBoxSubject{
	     height:30px;
	     line-height:30px;
	 }
	 .loginCodeNew{
	     width: 100px;
	     font-size:16px;
	     padding: 2px 5px 2px 5px;
	 }
	 .loginGroupCode{
	     top:10px;	    
	 }

	 
	 .loginDropdownCont{
	     position: absolute;
	     width:160px;
	     box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.4);
	     border-radius:10px;
	 }
	 .loginDropdownCont span{  
	     font-size: 14px;
	     padding: 10px 10px;
	 }
	 .loginDropdownCont .loginStroke{
	     width:15px;
	     height:8px;
	 }


     }
     
/*------------------------------- FELLLES ---------------------------*/



 .loginPic{
     height:40px;
     widht:40px;
}

.loginOpen{
         display:block;
         position:absolute;
         background-color: #001e3a;
         text-align:center;
         color:white;
         z-index:10200;
         cursor:pointer;
        /* box-shadow: -5px 5px 20px 5px #888888;                                                                                                     
         transition: all 1000ms;                                                                                                                      
         border-radius: 20px 0px 0px 0px;*/
}

.loginUserCont{
    position:relative;
}
.loginUserBoxSubject{
    font-size: 24px;
    font-family:Abel;
    color: #132844;
}
.loginSec{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    grid-gap: 5px;
    width:100%;
    white-space: nowrap;
}
.loginUserTxt{
    position:relative;
    top:8px;
    left:10px;
    height:14px;
    width:80px;
    font-family:Abel;
    font-size: 14px;
    line-height:16px;
    color: #132844;
}
.loginUserInput{
    height:40px;
    width: 300px;
    font-family:Abel;
    font-size: 16px;
    color: #132844;
    border-radius:10px;
    padding:2px 5px 2px 10px;
}
.loginUserWarning{
    visibility: hidden; /*visible;*/
    font-family:Abel;
    font-size: 12px;
    color: red;
}
.loginSendLinkWarning{
    display:none;
    position:absolute;
    top: 45px;
    font-family:Abel;
    font-size: 12px;
    color: red;
}

.loginButtonCont{
    position:relative;
}
.loginButton{
    grid-column:span 2;
    width:100%;
    height:40px;
    font-size:20px;
    line-height:40px;
    border-radius:30px;
    font-family: Abel;
    text-align:center;
    color:white;    
    cursor:pointer;
    background-color:#225397;
}
.loginButtonSave{
    position:absolute;
    right:50px;
}
.loginButton:hover{
    background-color:  #132844;
}

.loginBoxNew{ /*ytre rammen rundt section, setter position slik at absolut virker, brukes bare i login.js ny bruker*/
    position:relative;
    font-size:24px;
    background-color:#225397;  /*  #e6f7ff border-color:#0088cc;*/
    padding: 30px;
    color:white;
}



.loginOnTimeCode{
    display:inline-block;
    font-size:16px;
    width:50%;
    height:80px;
    color:#132844;
    cursor:pointer;    
}
.loginOnTimeCode:hover{
    text-decoration:underline;
}
.loginSpaceStart{
    display:inline-block;
    width:50px;
}
.loginUserDataCont{
    display: none;
    width: 90%;
    background-color: white; /*cornflowerblue; yellow;*/
    position: relative;
    margin: 0 auto;
    border: none;
}


.loginTermCont{
    width:100%;
    box-shadow: 10px 10px 20px grey;
    background-color:white;
}
.loginTermBack{
    width:100%;
    height:60px;
    color:white;
    background-color:#132844;
    font-family: Abel;
    font-size:30px;
    line-height: 60px;
    text-align:center;    
}
.loginTermBody{
    width:100%;
    height:100%;
    color:#132844;
    background-color:white;
    font-family: Abel;
    font-size:16px;
    overflow: scroll;
}


.loginDropdown{
  position:relative;
  cursor:pointer;    
}
.loginDropdownCont{
    position: absolute;
    display:block;
    height:0px;
    top:0px;
    left: 0px;
    border-right: 1px solid #132844;
    /*min-width: 160px;*/
    z-index: 2;
    overflow:hidden;
    background-color: #132844;
    color: white;
    transition: height 300ms ease-out;
}
.loginDropdownCont span{  
    display: inline-block;
    font-family:Arial;
    font-weight:700;
}
.loginDropdownCont span:hover .loginStroke{
   background-color:white;
}
.loginDropdown:hover{
    background-color:#132844; /*#001e3a;*/
}
.loginDropdownCont .loginStroke{
    background-color:#132844;/*#001e3a;*/
    margin:auto;
}


.loginUserBoxContCont{
    height: 0px;
    overflow:hidden;
    transition: height 500ms ease-out;
}
.loginUserBoxCont{
    position:relative;
    padding:20px 10px 10px 10px;
    background-color:#225397;
}
.loginUserBox{
    position:relative;
    width:98%;
    padding:10px 1% 10px 1%;
    border-radius: 20px;
    background-color:white;
}
.loginUserBoxContDel{    
    position: absolute;
    color:white;
    padding: 0px 10px 0px 10px;
    font-size:30px;
    line-height:30px;
    text-align:center;
    font-family:Oswald;
    font-weight:700;
    right:0px;
    top: 7px;
    background-color:#001e3a;
    cursor:pointer;
}
/*
.loginInstruction{
    width:98%;
    max-height:0px;
    font-family:Abel;
    font-size:16px;
    color:white;
    padding:0px 1% 0px 1%;
    overflow: hidden;
    transition: max-height 1000ms ease-out;
      }
       */
.loginInstruction{
    /*display:none;*/
    width:98%;
    height:0px;
    font-family:Abel;
    font-size:16px;
    color:white;
    overflow: hidden;
    transition: height 500ms ease-out;
}


.loginButtonCircle{
    position: absolute;
    height:30px;
    width:30px;
    top: 10px;
    right: 5px;
    font-size:18px;
    border-radius: 20px;
    border: 1px solid black;
    line-height:30px;
    font-family:PT Sans Narrow;
    color: black;
    text-align:center;    
    background-color:white;
    cursor:pointer;
}
.loginButtonCircleDelRed{
    color: red;
    right:245px;
    border: 1px solid red;
}
.loginButtonCircleDelRed:hover{
    color: white;
    background-color:red;
    border: 1px solid red;
}
.loginButtonCircleStatusGreen{
    right:350px;
    background-color:green;
    border: 1px solid green;
}
/*.loginButtonCircleStatusGreen:hover{
    background-color:red;
    border: 1px solid red;
}*/
.loginButtonCircleStatusRed{
    right:350px;
    background-color:red;
    border: 1px solid red;
}
/*.loginButtonCircleStatusRed:hover{
    background-color:green;
    border: 1px solid green;
}*/
.loginButtonCircleTxt{
    position: absolute;
    width:40px;
    top: 43px;
    font-size:11px;
    text-align:center;
    font-family:Abel;
    color:#001e3a;
    z-index:5;
}
.loginButtonCircleTxtDel{
    right:240px;
}
.loginButtonCircleTxtStatus{
    right:345px;
}
.loginButtonCircleTxtCustomer{
    color:white;
}

.loginElementSaveCont{
    position:absolute;
    right: 80px;
    width:100px;
}
.loginElementSave{
    height:40px;
    font-size:20px;
    line-height:40px;
    border-radius:30px;
    font-family: Abel;
    text-align:center;
    color:white;    
    cursor:pointer;
    background-color: #225397;
}
.loginElementSave:hover{
   background-color: #001e3a;    
}
.loginElementSaveWarningCont{
    width:300px;
    position:relative;
    float:right;
}
.loginElementSaveWarning{
    position:absolute;
    right:50px;
    top: 50px;
}


.loginUserNewCont{
    background-color: white;
    padding:30px;
    border-radius:20px;
}

.loginLogoutButton{
    position:absolute;
    font-size:16px;
    border-radius:10px;
    font-family:Abel;
    text-align:center;
    color:white;
    background-color: #225397;
    cursor:pointer;
}
.loginLogoutButton:hover{
    background-color: #001e3a;
}
.loginCloseButton{
    right: 20px;
    background-color: green;
}
.loginHeading{
    font-size:24px;
    font-familie:Abel;
    color: #132844;
}
.loginHeadingNew{
    font-size:24px;
}
.loginTxt{
    font-size:16px;
    font-familie:Abel;
    color: #132844;
}
.loginTxtNew{
    font-size:16px;
}
.loginGroupTxt{
    font-size: 16px;
    margin-top:0px;
    margin-buttom:0px;
    font-family: Abel;
    color:white;
}
.loginGroupCode{
    position:absolute;
    right: 10px;    
    font-family: Abel;
    font-size: 16px;
}

.loginCodeNew{
    position:relative;
    font-size:16px;
    border-radius:10px;
    font-family: Abel;
}
.loginCodeNewButton{
    width: 100px;
    height: 30px;
    font-size:16px;
    line-height:30px;
    border-radius:15px;
    border: 2px solid white;
    font-family: Abel;
    color:white;
    text-align:center;
    cursor:pointer;
}
.loginCodeNewButton:hover{
    border: 2px solid #132844;
    background-color: #132844;
}
.loginCodeNewW{
    font-size:16px;
    font-family: Abel;
    color:yellow;
}