/* REMOVE UP AND DOWN ARROW ON INPUT TYPE NUMBER START */
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}

/* Firefox */
input[type=number] {
-moz-appearance: textfield;
}
/* REMOVE UP AND DOWN ARROW ON INPUT TYPE NUMBER STOP */


/************************/
/** INPUT STYLES START **/
/************************/

.conatiner{
    max-width: 800px;
    padding: 0 15px;
    margin: auto;
}
.field-holder{
    position: relative;
}
#phone_number, #kredo_email{
    border-radius: 4px;
    border: 1px solid #B20000;
    background: #FFF;
    outline: none;
    height: 200px;
    text-indent: 18px;
}


#simanumer-label, #netfang-label{
    position: absolute;
    left: 0;
    top: 0;
    height: 10%;
    display: flex;
    align-items: center;
    cursor: text;
    transition: .3s ease-in-out
}
#phone_number, #simanumer-label, #kredo_email, #netfang-label{
    font-size: 16px;
    width: 432px;
    height: 59px;
    color: #000;
    left: 20px;
    padding-top: 2px;
}
#phone_number:focus + #simanumer-label,
#phone_number:valid + #simanumer-label,
#kredo_email:focus + #netfang-label,
#kredo_email:valid + #netfang-label
{
    top: -17.5px;
    
    font-size: 9px;
    pointer-events: none;
}
.login-input-underline{
    position: absolute;
    content: "";
    width: 396px;
    height: 2px;
    background-color: #D2B48C;
    opacity: 0;
    bottom: 20px;
    position: relative;
    display: block;
    top: -15px;
    left: 21px;
    transition: 0.3s ease-in-out;
}
#phone_number:focus ~ .login-input-underline,
#kredo_email:focus ~ .login-input-underline
{
    opacity:1;
    transition: 0.3s ease-in-out;
}

/***********************/
/** INPUT STYLES STOP **/
/***********************/

.login-main-container{
    box-sizing: border-box;
    width: 100vw;
    /* height: 100vh; */
    height: calc(100vh - 127px); /* Án footer */
    /*height: calc(100vh - 436px); /* Með footer */
    background-color: white;
    display: flex;
    align-items: center;
}
.login-row-1{
    width: 50%;
    /* background-color: blue; */
    background-repeat: no-repeat;
    background-size: cover;
    height: 100%;
}
.login-row-2{
    width: fit-content;
    block-size: fit-content;    
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 141px;

    
}
.login-flex-container{
    margin-top: 25px;
    display: flex;
    justify-content: space-between;
}
.login-row .login-title{
    color: #B20000;
    font-family: Satoshi;
    font-size: 30px;
    font-style: normal;
    line-height: 20px; /* 66.667% */
    font-weight: 700;
    font-family: satoshi-regular;
    margin: 0;
}
.login-row .login-subtitle{
    margin: 2px 0 23px 0;
    padding-left: 2px;
}
.login-subtitle{
    color: #000;
    font-family: Satoshi;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 32.5px;
}

.login-remember-user, .login-need-help{
    font-family: satoshi-regular;
    font-size: 15px;
}

#login-button, .login-remember-user label{
    cursor: pointer;
}

.login-main-container a p:hover,.login-main-container a p{
    color: black;
}

#login-button{
    color: #FFF;
    font-family: satoshi-regular;
    font-size: 17px;
    font-style: normal;
    font-weight: 700;
    line-height: 32.5px;
    text-align: start;

    width: 225px;
    height: 59px;
    flex-shrink: 0;

    border-radius: 6px;

    /* margin-top: 41px; */
    border:0px solid transparent;
    padding: 8px 65px 8px 20px; 
    /* background-position: 0px -8px; */
    background-position: right 45px center;
    background-repeat: no-repeat;
    transition: 0.3s ease-in-out;
}
#login-button:hover{
    transition: 0.3s ease-in-out;
    background-position: right 15px center;
}

/* CHECKBOX SVG */
.login-remember-user-container{
    display: flex;
    align-items: center;
}
.login-remember-user-container span{
    padding-left: 11px;
}
.svg-checkbox{
    cursor: pointer;
    display: flex;
    width: 100%;
    /* overflow: hidden; */
    
}
.unselectable-text{
    -webkit-user-select: none; /* Safari */        
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+/Edge */
    user-select: none; /* Standard */
}

/***************************/
/* LOADING AND ERROR START */
/***************************/

.hidden {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
  }
  

/**************************/
/* LOADING AND ERROR STOP */
/**************************/




/************************/
/* LOADING STYLES START */
/************************/
.loader-wrapper{
    position: relative;
    height: 6em;
    /* width: 100%; */
    /* border: 3px solid green; */
    box-sizing: border-box;
}
.loader,
.loader:before,
.loader:after {
  background: #b20000;
  -webkit-animation: load1 1s infinite ease-in-out;
  animation: load1 1s infinite ease-in-out;
  width: 1em;
  height: 4em;
}
.loader {
  color: #b20000;
  text-indent: -9999em;
  margin: 88px auto;
  position: relative;
  font-size: 11px;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}
.loader:before,
.loader:after {
  position: absolute;
  top: 0;
  content: '';
}
.loader:before {
  left: -1.5em;
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}
.loader:after {
  left: 1.5em;
}
@-webkit-keyframes load1 {
  0%,
  80%,
  100% {
    box-shadow: 0 0;
    height: 4em;
  }
  40% {
    box-shadow: 0 -2em;
    height: 5em;
  }
}
@keyframes load1 {
  0%,
  80%,
  100% {
    box-shadow: 0 0;
    height: 4em;
  }
  40% {
    box-shadow: 0 -2em;
    height: 5em;
  }
}


@media screen and (max-width: 699px) {
     .login-row-1 {
          display: none;
      }
    
    .login-row-2 {
        padding:8px;
        display: flex;
  
        
  
        /* border: 1px red solid; */
        width: fit-content;
      }
    .login-need-help{
      padding-top:8px;
      bottom: 0px;
      color: black;
    }
    #login-button{
      width: 183px;
      height: 52px;
    }
    
    .login-flex-container{
      flex-direction: column;
      /* margin-left: 20px; */
      /* font-size: 10px; */
      
    }
    .login-main-container{
      display: flex;
      flex-direction: column;
      justify-content: center;
      /* align-items: center; */
      margin: 0px 0px 0px 2px;
    }
    #et-main-area {
      margin-top: 0px !important;
    }
  
    #phone_number, #simanumer-label,#kredo_email, #netfang-label .login-input-underline{
      width: 70vw;
      
    }
      .login-input-underline{
      width: 60vw
        
    }
    
    .login-subtitle, .login-title, .unselectable-text{
      color: black;
      font-weight: 500
      
    }
    .login-subtitle{
      margin: 0;
      padding: 0;
      line-height: 12px;
      
    }
  }
  


/***********************/
/* LOADING STYLES STOP */
/***********************/



/***********************/
/* EMAIL SPECIFIC STOP */
/***********************/
#netfang-label{
    pointer-events: none;
  }
  
  .kredo-email-checkbox{
    width: 22px;
  }

.redder-privacy-policy{
    /* white-space: nowrap; */
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    padding-left: 5px;
}
.redder-privacy-policy a{
    color: #B20000;
    text-decoration: none;
    font-weight: 700;
    font-size: 15px;
    font-family: satoshi-regular;
    padding-left: 5px;
}

.disabled{
  background-color: #B20000;
  opacity: 0.5;
  cursor: not-allowed;
}

@keyframes shake {
    0% { transform: translate(0.5px, 0.5px) rotate(0deg); }
    10% { transform: translate(-0.5px, -1px) rotate(-0.5deg); }
    20% { transform: translate(-1.5px, 0px) rotate(0.5deg); }
    30% { transform: translate(1.5px, 1px) rotate(0deg); }
    40% { transform: translate(0.5px, -0.5px) rotate(0.5deg); }
    50% { transform: translate(-0.5px, 1px) rotate(-0.5deg); }
    60% { transform: translate(-1.5px, 0.5px) rotate(0deg); }
    70% { transform: translate(1.5px, 0.5px) rotate(-0.5deg); }
    80% { transform: translate(-0.5px, -0.5px) rotate(0.5deg); }
    90% { transform: translate(0.5px, 1px) rotate(0deg); }
    100% { transform: translate(0.5px, -1px) rotate(-0.5deg); }
}

#error-for-privacy-policy, #error-for-email, #error-for-email-regex {
    display: none;
    color: #a94442; /* red text */
    font-size: 16px;
    padding: 15px; /* space inside the box */
    animation: shake 0.3s; /* Add this line */
    animation-iteration-count: 2; /* And this line */
}