.labelOverskrift {
  font-family: 'Yantramanav', sans-serif;
  position: relative;
  font-size: 1.2em;
  color: #1b1b1b;
  display: block;
  width: 92%;
  left: 0px;
  margin: 5px auto;
}
.labelInput, .notatPinne {
  font-family: 'Yantramanav', sans-serif;
  font-size: 1em;
  margin: 20px 0 5px 0;
  position: relative;
  display: inline-block;
  color: #1b1b1b;
}
.labelInputBlock {
  font-family: 'Yantramanav', sans-serif;
  font-size: 1em;
  margin: 20px 0 5px 0;
  position: relative;
  display: block;
  color: #1b1b1b;
}

.selectDiv {
  border: 2px solid #336ba4;
  width: 100%;
  padding: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  position: relative;
}
.selectDiv select {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.2em;
  outline: none;
  border: none;
  padding: 5px; /* If you add too much padding here, the options won't show in IE */
  width: 100%;
  cursor: pointer;
  background-color: #fff;
  -webkit-appearance: none; /*fjerner default piler, vil jeg ha dem?*/
}



.selectPil {
  height: 7px;
  float: right;
  top: -19px;
  right: 13px;
  position: relative;

}



.notatPinne {
  margin-top: 0px;
}

.leggTilPinneKnapp, .leggTilGarnKnapp {
  font-family: 'Varela Round', sans-serif;
  font-size: 0.9em;
	background: #458cd6;
	background: #458cd6;
  padding: 10px 20px;
  border-radius: 5px;
  display: inline-block;
  color: #1b1b1b;
}
.leggTilPinneKnapp:hover, .leggTilGarnKnapp:hover {
  background: #336ba4;
  cursor: pointer;
}

.ikkeGarnlagerListe {
  padding-left: 50px;
}


.inputKort::placeholder, .inputLang::placeholder, .inputTextarea::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: #808080;
    opacity: 1; /* Firefox */
}

.inputKort:-ms-input-placeholder, .inputLang:-ms-input-placeholder, .inputTextarea::placeholder { /* Internet Explorer 10-11 */
    color: #808080;
}

.inputKort::-ms-input-placeholder, .inputLang::-ms-input-placeholder, .inputTextarea::placeholder { /* Microsoft Edge */
    color: #808080;
}

.inputKort, .inputLang {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.2em;
  color: #000;
  padding: 10px;
  border: 2px solid #336ba4;
  outline: none;
  display: block;
  width: 50%;
  border-radius: 5px;
  position: relative;
  -webkit-appearance: none; /*fjerner shadow som er inni iphone safari input*/
  color: #1b1b1b;
}
.inputLang {
  width: 100%;
}
.inputAlene {
  margin: 0 0 5px 0;
}


.labelGarnsok {
  position: relative;
}
.labelGarnsok::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 12px;
  bottom: 0;
  width: 20px;
  height: 20px;
  z-index: 2;
  background: url('../bruker/bilder/svg/forstorrlesesglass.svg');
}


.garnsok {
  font-family: 'Montserrat', sans-serif;
  font-size: 1em;
  color: #1b1b1b;
  padding: 10px 35px;
  border: none;
  border-top: 2px solid #336ba4;
  border-right: 2px solid #336ba4;
  border-left: 2px solid #336ba4;
  outline: none;
  display: block;
  width: 100%;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
  margin: 5px auto 0 auto;
  position: relative;
  z-index: 1;
  -webkit-appearance: none; /*fjerner shadow som er inni iphone safari input*/
}

.pilOgInputDiv{
  position: relative;
  display: flex;
}
.pilNyttPlagg {
  width: 18px;
  position: relative;
  left: 15px;
  top: 11px;
  display: block;
}
.inputNyttPlagg {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.2em;
  color: #000;
  padding: 10px;
  border: 2px solid #336ba4;
  outline: none;
  display: block;
  width: 90%;
  left: 16px;
  border-radius: 5px;
  margin: 5px auto;
  position: relative;
  -webkit-appearance: none; /*fjerner shadow som er inni iphone safari input*/
}

.pilOgGarnDiv {
  position: relative;
  display: flex;
  margin-top: 20px;
}

.pilNyttGarn {
  width: 18px;
  position: relative;
  left: 0px;
  top: 15px;
  display: block;
}

.inputTextarea {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.2em;
  position: relative;
  display: block;
  width: 100%;
  resize: none;
  margin: 0 auto;
  padding: 10px;
  border: 2px solid #336ba4;
  outline: none;
  border-radius: 5px;
  -webkit-appearance: none; /*fjerner shadow som er inni iphone safari input*/
  color: #1b1b1b;
}

.inputTextarea2 {
  font-family: 'Roboto', sans-serif;
  font-size: 1em;
  position: relative;
  display: block;
  width: 100%;
  resize: none;
  margin: 0 auto;
  padding: 10px;
  border: 5px solid #1b1b1b;
  outline: none;
  border-radius: 0px;
  -webkit-appearance: none; /*fjerner shadow som er inni iphone safari input*/
	color: #1b1b1b;
	line-height: 1.5em;
	height: 200px;
	font-weight: 300;
}

/*input[type=text]:focus, textarea:focus {
    box-shadow: 0 0 3px 2px #336ba4;
}*/
#addGarnAntall:focus {
  box-shadow: none;
}


/*radioboks*/
.radioBoksFlex {
  display: flex;
  width: 100%;
  border: 2px solid #336ba4;
  border-radius: 5px;
  padding: 2px 10px;
  margin: 0 auto;
}
.radioBoks {
  font-family: 'Montserrat', sans-serif;
  color: #808080;
  width: 100%;
  display: block;
  position: relative;
  margin-left: 0px;
  padding: 10px 35px 10px 25px;
  cursor: pointer;
  font-size: 1.1em;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
/* Hide the browser's default radio button */
.radioBoks input{
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

/* Create a custom radio button */
.nyRadio {
  position: absolute;
  top: 10px;
  left: 0;
  height: 20px;
  width: 20px;
  background-color: #dedede;
  border-radius: 50%;
}

/* On mouse-over, add a grey background color ~ tilde har noe med at det er de under som skal bli berørt og ikke noe som ikke hører til*/
.radioBoks:hover input ~ .nyRadio {
    background-color: #ccc;
}

/* When the radio button is checked, add a blue background */
.radioBoks input:checked ~ .nyRadio {
    background-color: #336ba4;
    z-index: 2;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.nyRadio:after {
    content: "";
    position: absolute;
    display: none;
    z-index: 1;
}

/* Show the indicator (dot/circle) when checked */
.radioBoks input:checked ~ .nyRadio:after {
    display: block;
}

/* Style the indicator (dot/circle) */
.radioBoks .nyRadio:after {
 	top: 7px;
	left: 7px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: white;
}
/*finito radioboks*/


/*checkboks*/
/* The checkBoks */
.checkBoks {
  font-family: 'Montserrat', sans-serif;
  color: #808080;
  display: block;
  position: relative;
  padding-left: 35px;
  cursor: pointer;
  font-size: 1em;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;

  /*font-family: 'Montserrat', sans-serif;
  color: #808080;
  width: 100%;
  display: block;
  position: relative;
  margin-left: 0px;
  padding: 10px 35px 10px 25px;
  cursor: pointer;
  font-size: 1.1em;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;*/
}

/* Hide the browser's default checkbox */
.checkBoks input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: -1px;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #dedede;
}
.checkmarkDos {
  position: absolute;
  top: -4px;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #dedede;
}

/* On mouse-over, add a grey background color */
.checkBoks:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.checkBoks input:checked ~ .checkmark {
  background-color: #336ba4;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.checkBoks input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.checkBoks .checkmark:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
/*finito checkboks*/

.bildeLabel {
  font-family: 'Varela Round', sans-serif;
  font-size: 1em;
  color: #808080;
  color: #1b1b1b;
  padding: 10px;
  text-align: center;
  background: #458cd6;
  display: block;
  width: 180px;
  border-radius: 5px;
  /*margin: 5px 0;*/
  margin-bottom: 5px;
  position: relative;
}
.bildeLabel:hover {
  background: #336ba4;
  cursor: pointer;
}


/*PROSJEKTBILDER*/
.prosjektbilderBoks {
  background-color: #c4d8cb; /*fallback color*/
  background-color: rgba(40, 121, 75, 0.25);
  background-color: #fff;
  position: relative;
  margin-top: 50px;
}
.bilderAvProsjektet {
  font-family: 'Yantramanav', sans-serif;
  font-size: 1.4em;
  margin-bottom: 5px;
}
.prosjektbilder {
  border-radius: 5px;
  padding: 10px;
  width: 100%;
  margin: 0 auto;
  height: 200px;
  position: relative;
  display: block;
  margin-bottom: 10px;
  border: 2px solid #336ba4;
}
.bildeBoks {
  position: relative;
  float: right;

  position: relative;
  height: 100%;
  width: 40%;
}
.bildeBoks img{
  height: 100%;
  width: 100%;
  object-fit: cover;
  border-radius: 5px;
  display: block;
  margin: 0 auto;
}
.endreSlettDiv {
  font-family: 'Varela Round', sans-serif;
  font-size: 1em;
  width: 55%;
  height: 100%;

  position: relative;
  float: left;
}
.endreBilde, .slettBilde {
  font-size: 1em;
  width: 75%;
  text-align: center;
  padding: 10px 11px 10px 10px;
  cursor: pointer;
  color: #000; /*ja disse skal faktisk være svarte*/
  margin: 0 auto;
  margin-top: 20px;
  display: block;
  border-radius: 5px;
}
.endreBilde { background-color: #D9A95F;  }
.slettBilde { background-color: #D9625F; margin-top: 40px; }

.endreBilde:hover { background-color: #d79e45; }
.slettBilde:hover { background-color: #d94d4a; }

.ikon4tekst {
  height: 18px;
  width: 18px;
  top: 2px;
  left: 3px;
  position: relative;
}

/*finito PROSJEKTBILDER*/


.oppdaterSlettBoks {
  margin: 80px 0 50px 0;
  position: relative;
  border-radius: 5px;
  overflow: hidden;
  height: 53px;
}

.gjenstandSubmitEdit, .gjenstandSubmitNew {
  font-family: 'Varela Round', sans-serif;
  font-size: 1.2em;
  width: 80%;
  background-color: #28794B;
  background: #458cd6;
  color: #1b1b1b;
  display: block;
  padding: 15px;
  border: none;
  border-radius: 0;
  /*border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;*/
  cursor: pointer;
  text-align: center;
  float: left;
  text-decoration: none;
}
.gjenstandSubmitNew {
  margin: 50px 0;
  width: 100%;
  border-radius: 8px;
  float: none;
}
.gjenstandSubmitNew:hover, .gjenstandSubmitEdit:hover {
  background: #336ba4;
}

.slettGjenstandKnapp {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.2em;
  letter-spacing: 1px;
  width: 20%;
  float: left;
  background: #D9625F;
  display: block;
  padding: 18px;
  border: none;
  /*border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;*/
  cursor: pointer;
  text-align: center;
}
.slettGjenstandKnapp:hover {
  background: #d94d4a;
}
.gjenstandSlettIkon {
  left: 0;
  top: 0;
}

.marginTop {
  margin-top: 20px;
}

/*vennligst vent*/
#spinnerDiv {
  margin: 50px 0 50px 0;
  position: relative;
}
.vennligstVent {
  font-family: 'Yantramanav', sans-serif;
  font-size: 1.2em;
  display: inline-block;
}
.spinnerDiv {
  display: inline-block;
}
.spinner {
  height: 0px;
  width: 0px;
  position: relative;
  top: -18px;
  left: 10px;
}


.spinner span {
    display: block;
    height: 20px;
    width: 20px;
    background: #ddd;
    border-radius: 50%;
    position: absolute;
    top: 0px;
}


.spinner span:nth-child(1) {
    left: 0px;
    animation: bounce 1.5s ease-in-out infinite;
}
.spinner span:nth-child(2) {
    left: 40px;
    animation: bounce 1.5s ease-in-out 0.2s infinite;
}
.spinner span:nth-child(3) {
   left: 80px;
      animation: bounce 1.5s ease-in-out 0.4s infinite;
}


@keyframes bounce {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-20px);
    }
}
/*finito vennligst vent*/


/*MODAL INNHOLD*/
/*The Modal (background)*/
.modal{
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1000; /* Sit on top */
    padding-top: 200px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: #19222B; /* Fallback color */
    background-color: rgba(25,34,43, 0.8); /* Black w/ opacity */
}
/*finito The Modal (background)*/

/* Modal Content */
.modal-content {
  border-radius: 10px;
  box-sizing: border-box;
  background-color: #fefefe;
  margin: 0 auto 200px auto;
  padding: 100px 50px;
  width: 520px;
  position: relative;
}
/* The Close Button */
.close {
  fill: #aaaaaa;
  padding: 0px 30px 0px 0;
  position: absolute;
  right: 0px;
  top: 0;
	margin-top: 30px;
	z-index: 2;
}
.closeSVG {
  display: block;
  height: 30px;
  position: relative;
  text-decoration: none;
  float: right;
}
.closeSVG:hover {
  fill: #1b1b1b;
  cursor: pointer;
}
/*finito MODAL INNHOLD*/

.slettBildeTekst {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.2em;
}
.slettBildeKnapp {
  font-family: 'Yantramanav', sans-serif;
  font-size: 1.2em;
  background: #458cd6;
  margin-top: 20px;
  padding: 10px 30px;
  border-radius: 10px;
  display: inline-block;
  border: none;
}
.slettBildeKnapp:hover {
  background: #336ba4;
  cursor: pointer;
}


@media screen and (max-width: 520px)
{
  .inputKort {
    width: 100%;
  }

  .oppdaterSlettBoks {
    margin: 80px 0 0px 0;
  }

}