/* Fontar notaðir á vefsíðunni */
@font-face {font-family: adam;src: url("../fonts/ADAM.CG PRO.otf");}
@font-face {font-family: summitBold;src: url("../fonts/SummitBold-Display.otf");}
@font-face {font-family: summit;src: url("../fonts/SummitRegular-Display.otf");}
@font-face {font-family: latoBold;src: url("../fonts/Lato-Bold.ttf");}
@font-face {font-family: lato;src: url("../fonts/Lato-Regular.ttf");}
@font-face {font-family: bitterBold;src: url("../fonts/Bitter-Bold.otf");}
@font-face {font-family: bitter;src: url("../fonts/Bitter-Regular.otf");}

/* Breytur sem halda utan um grunnlit Monetu */
:root {
	/* Classic rauður: #BF0E33*/
  --mainColor: #34495e;
  /*Notað fyrir opacity changes í datepicker.css, og placeholders. Format er RR GG BB AA*/
  --50MainColor: #34495e90;
  --10MainColor: #34495e25;

  --backgColor:#F8F8F8;
}

/* Body for all pages */
body{
	display: flex;
	justify-content: center;
	align-content: center;
	min-height: 100vh;
	background-color: var(--backgColor);
}
.unselectable{
	user-select: none;
}
input:focus{
	outline: none;
}

/* --------- Login screen ---------- */
.loginContainer{
	position: absolute;
	display: flex;
	align-self: center;
	flex-direction: column;
	padding: 0 10px 0 0;
	border-radius: 10px;
	z-index: 9999999999999999;
}
/* Breytir stærð á 'welcome to' á login screen */
.test{
	font-size: 0.6em;
}
/* Headerinn á login page */
.formHead{
	background-color: var(--backgColor);
	text-align:center;
	font-family: adam;
	color: var(--mainColor);
	font-size: 7em;
	margin: 0px 0 10px 0;
	padding: 0px 50px 50px 50px;
	border:10px solid var(--mainColor);
	user-select: none;
}

/* Login boxes */
.loginForm{
	display: flex;
	flex-direction: column;
	align-self: center;
	width:100%;
}

/* Notað fyrir input boxes á login page */
.loginFormInput{
	margin:10px 0;
	font-size: 2.5em;
	border:5px solid var(--mainColor);
	padding:1px;
	color: var(--mainColor);
	font-family: latoBold;
	background-color: var(--backgColor);
	text-align: center;
}

/* login box placeholder */
::placeholder{
	color:var(--50MainColor);
}

/* Bara submit takkinn */
.loginFormInput:last-child{
	background-color: var(--backgColor);
}

.loginFormInput:hover{
	background-color: var(--backgColor);
}

.loginFormInput:last-child:hover{
	cursor: pointer;
}






/* ------ MENU CSS --------- */
/* Nav barinn á toppnum */
.mainNavigation{
	position: absolute;
	display: flex;
	flex-direction: row;
	width:100%;
	justify-content: space-between;
	flex-grow: none;
	z-index: 105;
}
/* Link í navbar */
.mainNavigation a{
	margin:10px;
	display: flex;
	align-items: center;
	text-decoration: none;
	color: var(--mainColor);
	font-size: 3em;
	font-family: adam;
}
/* Fyrir öll span tög í linkum í navbar */
.mainNavigation a span{
	margin-bottom: 10px;
}

/* Breytir litnum á hamburger menu í hvítann */
.hamburger.is-active .Whamburger-inner,
.hamburger.is-active .Whamburger-inner:after,
.hamburger.is-active .Whamburger-inner:before {
	background-color: var(--backgColor)
}

/* Settar basic styles fyrir hamburger menu */
.Whamburger-inner,
.Whamburger-inner:after,
.Whamburger-inner:before {
	position: absolute;
	width: 40px;
	height: 4px;
	transition-timing-function: ease;
	transition-duration: .15s;
	transition-property: transform;
	border-radius: 4px;
	background-color: var(--mainColor)
}

/* menu-ið sjálft, main container */
.menu{
	padding-top: 88px;
	/* Byrjar í skjástærð fyrir ofan, er svo fært með js*/
	top:-100vh;
	/* settum height á menu, mínus 88 px svo það sé centerað miðað við navbar*/
	height: calc(100vh - 88px);
	position: absolute;
	width:100vw;
	display: flex;
	flex-direction: row-reverse;
	background-color: var(--mainColor);
	transition: all 0.5s ease-in-out;
	z-index: 100;
	align-items: center;
}
/* Hvor helmingur af menu-inu */
.half{
	display: flex;
	flex-grow: 1;
	max-width: 42%;
	flex-direction: column;
	z-index: 105;
	border-left:5px solid var(--backgColor);
}

/* Vinstri helmingur, modify-aður til að hægri helmingur sé stærri */
.smallerHalf{
	max-width: 37%;
}

/* Notað fyrir línuna á preserver (remember) */
.preserve div{
	display: inline-flex;
	flex-grow: 0;
	margin:0;
	padding:0;
	z-index: 105;
	border-bottom: 5px solid var(--backgColor)
}

/* Notað fyrir línuna á Recall */
.recall div{
	display: inline-flex;
	flex-grow: 0;
	margin:0;
	padding:0;
	z-index: 105;
	border-bottom: 5px solid var(--backgColor)
}

/* Sjálfir preserve og remember titlarnir */
.columnTitle{
	font-family: bitterBold;
	color:var(--backgColor);
	padding-left: 15px;
	font-size: 3.1em;
}

/* Box utan um allan listann */
.columnList{
	font-size: 2em;
	color:var(--backgColor);
	padding-left: 20px;
	font-family: bitter;
}

/* Box utan um hvern item í listanum */
.columnListItem{
	margin:15px 0;
}
/* Box utan um hvern texta í listanum, þarf að vera sér, fyrir línuna, svo width sé rétt */
.columnListItem span{
	display: inline-block;
}

/* On hover er breytt cursor í hendi */
.columnListItem a:hover{
	cursor:pointer;
}

/* Animate-um línuna sem kemur fyrir neðan list item í menu, þetta er before hover */
.columnListItem a:after {
  content: '';
  display: block;
  border-bottom: 3px solid var(--backgColor);
  width: 0;
  right:0;
  transition: 0.5s ease;
}

/* Animate-um línuna sem kemur fyrir neðan list item í menu, þetta er on hover */
.columnListItem a:hover:after { 
  width: 100%;
  left:0;
}

/* Látum particle system vera með sér element, eins og menu element, af því við gátum ekki sett þetta á bakgrunn*/
#particles-js-menu{
	top:-100vh;
	height: calc(100vh);
	position: absolute;
	width:100vw;
	display: flex;
	flex-direction: row-reverse;
	background-color: transparent;
	transition: all 0.5s ease-in-out;
	z-index: 100;
	align-items: center;
}

/*Stýlar fyrir öll addX form*/
main{
	display: flex;
	align-items: center;
	z-index: 1;
}
/*Title á öllum spurningum*/
.formTitle{
	font-size: 4em;
	font-family: bitterBold;
	color:var(--mainColor);
	margin: 10px 0;
}
/*Spanið í titlinum á formum, er underline*/
.formTitle span{
	display: inline-block;
	border-bottom: 5px solid var(--mainColor)
}
/*form heldur utan um hverja spurningu fyrir sig*/
.form{
	display: flex;
	justify-content: center;
	align-items: left;
	flex-direction: column;
}
/*tagControl heldur utan um öll tags*/
.tagControl{
	display:flex;
	flex-direction: row;
}
/* Fyrir all text inputs*/
.form input[type=text]{
	display: flex;
	resize: none;
	font-size: 1.5em;
	width:100%;
	padding:3px;
	font-family: lato;
	color:var(--mainColor);
	border:1px solid var(--mainColor);
	border-radius: 3px;
}
/*Fyrir text inputs on focus*/
.form input[type=text]:focus){
	box-shadow: 0 0 0 1px var(--mainColor);
}
/*tagSubmit er takkinn sem submittar tags*/
#tagSubmit {
	margin-left: 10px;
}
/*tagSubmit er takkinn sem submittar tags*/
#tagInput:focus{
	box-shadow: 0 0 0 1px var(--mainColor);
}
/*Description fyrir eventa*/
.form textarea{
	resize: none;
	font-size: 1em;
	max-width:100%;
	min-height: 200px;
	padding:5px;
	background-color: white;
	font-family: lato;
	color:var(--mainColor);
	border:1px solid var(--mainColor);
	border-radius: 3px;
}
/*Description fyrir eventa*/
.form textarea:focus{
	box-shadow: 0 0 0 1px var(--mainColor);
}
/*Heldur utan um next, back og skip*/
.formNavigation{
	display: flex;
	justify-content: space-between;
	margin-top: 10px;
}
/*Heldur utan um hvern next,back og skip takka*/
.formNavElement{
	padding: 10px;
	border:1px solid var(--mainColor);
	background-color: white;
	border-radius: 3px;
	font-family: latoBold;
	color:var(--mainColor);
	flex-grow: 0;
	font-size: 1.2em;
}
/*Heldur utan um hvern next, back og skip takka*/
.formNavElement:hover{
	cursor: pointer;
	border-radius: 3px;
	box-shadow: 0 0 0 1px var(--mainColor);
}
/*Heldur utan um hvern next, back og skip takka þegar ýtt er á þá*/
.formNavElement:active{
	background-color: var(--mainColor);
	color: var(--backgColor);
}
/*Skip takkinn sérstaklega*/
.skip{
	font-size: 1em;
	font-family: lato;
	padding: 10px;
}
/*Skip takkinn sérstaklega*/
.skip:hover{
	text-decoration:underline;
	cursor: pointer;
}
/*Heldur utan um particle systemið á inputs*/
.testing{
	position: absolute;
	width: 100%;
	height: 99%;
	z-index: 0;
	top:0;
	left:0;
}
/*Boxið fyrir tagInput*/
.tagBox{
	margin-top: 10px;
	max-width: 800px;
}
/*Tögin sjálf*/
.tag{
	display: inline-block;
	flex-grow: 0;
	background-color: var(--mainColor);
	font-family: lato;
	color: var(--backgColor);
	padding: 10px;
	border-radius: 5px;
	margin: 5px;
}
/*Bara fyrsta tagið*/
.tag:first-child{
	margin-left: 0px;
}
/*x-ið á tögum*/
.deleteThing{
	margin-left: 5px;
	cursor:pointer;
}
/*Rating sliderinn*/
.slider {
  -webkit-appearance: none;  /* Override default CSS styles */
  appearance: none;
  width: 100%; /* Full-width */
  height: 5px; /* Specified height */
  border-radius: 3px;
  background: #d3d3d3; /* Grey background */
  outline: none; /* Remove outline */
  margin:30px 0;
}
.slider::-webkit-slider-thumb {
  -webkit-appearance: none; /* Override default look */
  appearance: none;
  width: 25px; /* Set a specific slider handle width */
  height: 25px; /* Slider handle height */
  background: var(--mainColor); /* Green background */
  cursor: pointer; /* Cursor on hover */
  border-radius: 30px;
}
/*Emoji undir happyScore slider*/
.happyRange{
	display: flex;
	justify-content: space-between;
}
/*Hvert emoji fyrir sig undur happyscore slider*/
.happyRange i{
	color: var(--mainColor);
	font-size: 2em;
	display: flex;
	background-color: white;
	border-radius: 50%;
}
/*Heldur utan um alla emotion takka*/
.emotionContainer{
	max-width: 567px;
	display: block;
}
/*Hvert og eitt emotion element*/
.emotionButton{
	display: inline-flex;
	border:1px solid var(--mainColor);
	font-family: lato;
	background-color: white;
	color: var(--mainColor);
	padding: 10px;
	border-radius: 5px;
	margin: 5px;
}
/*Bara fyrsta emotionelement*/
.emotionButton:first-child{
	margin-left: 0px;
}
/*Þegar búið er að hovera yfir emotion Button*/
.emotionButton:hover{
	cursor: pointer;
	box-shadow: 0 0 0 1px var(--mainColor);
}
/*Þegar búið er að velja einhvern sérstakann emotion Button*/
.selectedEmotionButton{
	background-color: var(--mainColor);
	color:white;
	font-family: latoBold;
}
/*Fyrir all checkboxes*/
input[type=checkbox]{
	display: none;
	height: 0;
	width: 0;
	visibility: hidden;
}

/*Notað fyrir switch á dagatalinu, þetta er sérstaklega á label-inu*/
#actualSwitch {
	cursor: pointer;
	min-width: 130px;
	height: 60px;
	background: grey;
	display: block;
	border-radius: 100px;
	position: relative;
}
#actualSwitch:after {
	content: '';
	position: absolute;
	top: 5px;
	left: 5px;
	width: 50px;
	height: 50px;
	background: #fff;
	border-radius: 90px;
	transition: 0.2s;
}
#actualSwitch:active:after {
	width: 130px;
}
/*Þetta er checkboxið sjálft og labelið*/
#switch:checked + label {
	background: var(--mainColor);
}

#switch:checked + label:after {
	left: calc(100% - 5px);
	transform: translateX(-100%);
}
/*Heldur utan um switchinn í date*/
.today{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	margin: 20px 0;
}
/*Yes og no á dagsetningarvalinu*/
.toggleLabel{
	font-size: 2em;
	font-family: latoBold;
	color:var(--mainColor);
}
/*Heldur utan um calendarið*/
.calendar{
	display: flex;
	align-items: center;
	justify-content: center;
}

/*Heldur utan um upload takkann, bæði inputtið sjálft og visual takkann*/
.upload-btn-wrapper {
	margin-top: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}
/*Visual takkinn*/
.btn {
    border: 1px solid var(--mainColor);
    font-family: latoBold;
    color: var(--mainColor);
    background-color: white;
    padding: 10px;
    border-radius: 5px;
    font-size: 1.5em;
    font-weight: bold;
    margin: 5px;
}
/*Visual upload takkinn*/
.btn:hover {
	box-shadow: 0 0 0 1px var(--mainColor);
}

.btn:active {
	color: white;
	background-color: var(--mainColor);
}
/*Actual upload takkinn*/
.upload-btn-wrapper input[type=file] {
    display:none;
}
/*Heldur utan um hluti sem þarf að lista fyrir uploads*/
.fileList{
	margin-top: 10px;
	align-items: center;
	font-family: latoBold;
	color: var(--mainColor);
}

.viewContainer{
	width:100%;
	color: --var(--mainColor);
	font-family:lato;
	justify-content: center;
	align-items:center;
}
.tableContainer{
	display:block;
	padding: 30px;
	max-width:75%;
}

th {
	font-family: latoBold;
}
td, th{
	vertical-align: middle;
	text-align:center;
	padding:4px;
}