/*-------------------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) {


      .loginPic{
	  height:40px;
      }
      .loginUserDataCont{
	  top: 50px;
	  width: 90%;
      }

      .loginUserBoxSubject{
	  height:50px;
	  font-size: 24px;
	  line-height:50px;
      }
      
      .loginButtonCont{
	  padding:5px 5px 20px 0px;
      }
      .loginButton{
	  height:40px;
	  font-size:20px;
	  line-height:40px;
	  border-radius:30px;
      }
      .loginLogoutButton{
	  width:100px;
	  height:30px;
	  line-height:30px;
	  font-size:16px;
	  border-radius:10px;
      }

      .loginBoxNew{ 
	  font-size:24px;
      }
      
      .loginElementSaveCont{
	  width:100px;
      }
      .loginElementSave{
	  height:40px;
	  font-size:20px;
	  line-height:40px;
	  border-radius:30px;
      }

      .loginButtonCircle{
	  height:30px;
	  width:30px;
	  top: 10px;
	  right: 5px;
	  font-size:18px;
	  border-radius: 20px;
	  border: 1px solid black;
	  line-height:30px;
      }
      .loginButtonCircleTxt{
	  width:40px;
	  top: 43px;
	  font-size:11px;
      }


      .loginDropdownCont{
	  width:200px;
      }
      .loginDropdownCont span{  
	  font-size: 16px;
	  padding: 12px 16px;
      }
      .loginDropdownCont .loginStroke{
	  width:30px;
	  height:4px;
      }

      .loginInstruction{
	  font-size:16px;
      }
      .loginHeading{
	  font-size:24px;
      }
      .loginTxt{
	  font-size:16px;
      }
      .loginGroupTxt{
	  font-size: 18px;
      }


      .loginCodeNew{
	  width: 150px;
	  font-size:16px;
	  padding: 5px 10px 5px 10px;
	  border-radius:10px;
      }
      
      .loginCodeNewButton{
	  width: 100px;
	  height: 30px;
	  font-size:16px;
	  line-height:30px;
	  border-radius:15px;
	  border: 2px solid white;
      }
      .loginCodeNewButton:hover{
	  border: 2px solid #132844;
      }
      .loginCodeNewW{
	  font-size:16px;
      }
      
   }


 /* ----------- 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) { 

     .loginOpen{
	 top:14px;
	 right:150px;
	 width:80px;
	 height:80px;
	 font-size:60px;
	 line-height:100px;
     }
      .loginPic{
	  height:78px;
       }

      .loginUserDataCont{
	  top: 50px;
	  width: 90%;
      }

      .loginUserBoxSubject{
	  height:100px;
	  font-size: 48px;
	  line-height:100px;
      }

      .loginButtonCont{
	  padding:10px 10px 40px 0px;
      }
      .loginButton{
	  height:80px;
	  font-size:40px;
	  line-height:80px;
	  border-radius:60px;
      }
      .loginLogoutButton{
	  width:200px;
	  height:60px;
	  line-height:60px;
	  font-size:32px;
	  border-radius:20px;
      }

      .loginBoxNew{ 
	  font-size:48px;
      }

      
      .loginElementSaveCont{
	  width:200px;
      }
      .loginElementSave{
	  height:80px;
	  font-size:40px;
	  line-height:80px;
	  border-radius:60px;
      }

      .loginButtonCircle{
	  height:60px;
	  width:60px;
	  top: 20px;
	  right: 10px;
	  font-size:36px;
	  border-radius: 40px;
	  border: 2px solid black;
	  line-height:60px;
      }
      .loginButtonCircleTxt{
	  width:80px;
	  top: 83px;
	  font-size:30px;
      }



      .loginDropdownCont{
	  width:400px;
      }
      .loginDropdownCont span{  
	  font-size: 32px;
	  padding: 24px 32px;
      }
      .loginDropdownCont .loginStroke{
	  width:60px;
	  height:8px;
      }

      .loginInstruction{
	  font-size:32px;
      }

      .loginHeading{
	  font-size:48px;
      }
      .loginHeadingNew{
	  font-size:36px;
      }
      .loginTxt{
	  font-size:32px;
      }
      .loginTxtNew{
	  font-size:24px;
      }
      .loginGroupTxt{
	  font-size: 36px;
      }

      .loginCodeNew{
	  width: 300px;
	  font-size:32px;
	  padding: 10px 20px 10px 20px;
	  border-radius:20px;
      }
      
      .loginCodeNewButton{
	  width: 200px;
	  height: 60px;
	  font-size:32px;
	  line-height:60px;
	  border-radius:30px;
	  border: 4px solid white;
      }
      .loginCodeNewButton:hover{
	  border: 4px solid #132844;
      }
      .loginCodeNewW{
	  font-size:32px;
      }


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



.loginPic{
}

.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;
    padding:40px;
}
.loginUserBoxSubject{
    font-family:Abel;
    color: #132844;
}
.loginSec{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    grid-gap: 5px;
    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%;
    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;
    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;	
    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;*/
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.4);
  z-index: 2;
  overflow:hidden;
  background-color: #132844;
  color: white;
  border-radius:20px;
  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;
    color:white;
    overflow: hidden;
    transition: height 500ms ease-out;
}


.loginButtonCircle{
    position: absolute;
    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;    
    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;
}
.loginElementSave{
    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;
    left:20px;
    top:20px;
    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-familie:Abel;
    color: #132844;
}
.loginHeadingNew{
}
.loginTxt{
    font-familie:Abel;
    color: #132844;
}
.loginTxtNew{
}
.loginGroupTxt{
    margin-top:0px;
    margin-buttom:0px;
    font-family: Abel;
    color:white;
}


.loginCodeNew{
    font-family: Abel;
}
.loginCodeNewButton{
    font-family: Abel;
    color:white;
    text-align:center;
    cursor:pointer;
}
.loginCodeNewButton:hover{
    background-color: #132844;
}
.loginCodeNewW{
    font-family: Abel;
    color:yellow;
}