/* CSS Document */
/*@charset "utf-8";*/

/* -------------- RESPONSIVE WEB ----------- */
* {
	box-sizing: border-box;
}

[class*="col-"] {
	float: left;
	/*padding: 15px;*/
	/* border: 1px solid red; */
}

.row::after {
	content: "";
	clear: both;
	display: table;
}
/* -------------------------------- */

html {
	font-size: 62.5%;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	height: 100%;
}

body {
	margin: 0;
	font-size: 140%;
	background-color: #F8FAFA;
	height: 100%;
}

button {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
}

.googleTxt {
	font-family: 'Tangerine', serif;
	font-size: 36px;	
}

/* ------------DEFAULT FOR INPUT FELT ---------------

/* DEFAULT TEXT OG SELECT */
input[type=text], select {
	-webkit-appearance: none;
	width: 100%;
	padding: 10px 15px;
	margin: 4px 0 10px 0;
	display: inline-block;
	border: 1px solid #ccc;
	border-radius: 4px;
	outline: none;
	font-size: 1.6rem;
}

/* CUSTOM SELECT */
.selectcustom {
	position: relative;
	width: 100%;
	z-index: 1;
}

.selectcustom::before {
	content: '';
  	position: absolute;
  	top: 50%;
  	right: 10px;
  	margin-top: -5px;
  	border-top: 10px solid #999;
  	border-left: 10px solid transparent;
  	border-right: 10px solid transparent;
	pointer-events: none;
}

.selectcustom::after {
	position: absolute;
	content: '';
	font-size: 1.6rem;
	top: 50%;
	right: 14px;
	margin-top: -5px;
	border-top: 6px solid #fff;
  	border-left: 6px solid transparent;
 	border-right: 6px solid transparent;
	pointer-events: none;
}

input:focus {
	border: 1px solid #09F;
}

/* DEFAULT PASSORD FELT */
input[type=password] {
	width: 100%;
	padding: 10px 15px;
	margin: 4px 0 10px 0;
	display: inline-block;
	border: 1px solid #ccc;
	border-radius: 4px;
	font-size: 1.6rem;
	/*-webkit-appearance: none;*/
}

/* DEAULT CHECKBOX */
input[type=checkbox] {
	padding: 0 0;
	margin: 16px 0;
	display: inline-block;
	border: 1px solid #ccc;
	border-radius: 4px;
	font-size: 1.6rem;
}

/* DEFAULT TEXTAREA */
textarea {
	width: 100%;
	padding: 10px 15px; /* var 12, 20 */
	margin: 4px 0 10px 0;
	display: inline-block;
	border: 1px solid #ccc;
	border-radius: 4px;
}


::placeholder {
	color: #999;
}

/* Default for BUTTON og LINK */
.textasbutton {
	-webkit-appearance: none;
	text-decoration: none;
	background-color: transparent;
	border: none; 
	outline: none;
	font-size: 1.6rem;
	cursor: pointer;
}

/* ------- SLIDER ------- */
.switch {
	position: relative;
	display: inline-block;
	width: 50px;
	height: 22px;
	vertical-align: text-top;
}

.switch input {
	opacity: 0;
	width: 0;
	height: 0;
}

.slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  -webkit-transition: .3s;
  transition: .3s;
}

.slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #ccc;
	-webkit-transition: .3s;
	transition: .3s;
}


input:checked + .slider {
	background-color: #2196F3;
}

input:focus + .slider {
	box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
	-webkit-transform: translateX(28px);
	-ms-transform: translateX(28px);
	transform: translateX(28px);
}

.slider.round {
	border-radius: 36px;
}

.slider.round:before {
	border-radius: 50%;
}

/* --------------------- BUTTONS --------------------- */
.bigbutton {
	width: 100%;
	padding: 10px 12px;
	margin: 6px 0;
	border: none;
	border-radius: 4px;
	outline: none;
	-webkit-appearance: none;
	font-size: 1.6rem;
	cursor: pointer;
	/*transition: all 0.5s;*/
}

.bbgreen {
	background-color: #008B00;
	color: #fff;
}

.bbgreen:hover {
	/*background-color: #060;*/
	background-color: #090;
}


/* -------------------- MAIN GRID --------------------- */

.item1 {
	grid-area: headerItem;
}

.item2 {
	grid-area: topItem;
}

.item3 {
	grid-area: menuItem;
}

.item4 {
	grid-area: mainItem;
}

.item5 {
	grid-area: footerItem;
}

/*--- END main grid --- */


/* -------------------- FLEX -------------------- */

.flexcontainer {
	display: flex;
	display: -webkit-flex; /* Safari */
    align-items: flex-start;
	-webkit-align-items: flex-start; /* Safari */
	flex-direction: row;
	width: 100%;
	justify-content: space-between;
}

/* ------------------- ELLIPSIS ------------------ */
.ellipsis {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

/* ------------------ HOVER LIST ---------------- */

.hoverlist:hover {
	background-color: #DCDCDC;
}


/* ----------------- MEDIA QUERIES ---------------*/


/* -------------------- PHONE -------------------- */
/* ----------------------------------------------- */
.grid-container {
	display: grid;
	min-height: 100%;
	grid-template-rows: 50px 0 50px auto 60px;
	grid-template-columns: 100%;
	grid-template-areas: 
	'headerItem'
	'menuItem'
	'topItem'
	'mainItem' 
	'footerItem';
	background-color: #fff;
	}

/* ------------------- HEADER --------------------*/
.header {
	position: fixed;
	height: 50px;
	background-color: #310E6D;
}

.headerleft {
	flex: 1;
	margin: auto;
	padding-left: 18px;
	padding-bottom: 1px;
}

.headercenter {
	flex: 1;
	margin: auto;
	text-align: center;
	font-size: 20px;
	color: #fff;
	display: none;
	padding-left: 40px;
}

.headerright {
	flex: 1;
	text-align: right;
	color: #fff;
	margin: auto;
	font-size: 20px; 
	padding-right: 15px;
	padding-left: 3px;
}

/* -------------------- TOP ----------------------*/
.top {
	position: fixed;
	height: 50px;
	background-color: #F5F5F5;
	border-bottom: 1px solid #ccc;
	color: #333;
}

.topleft {
	flex: 1;
	margin: auto;
	padding-left: 12px;
	text-align: left;
}

.topright {
	flex: 2;
	margin: auto;
	padding-right: 20px;
	text-align: right;
}

.topmenubutton {
	font-size: 3.0rem;
	color: #263247;
	font-weight: 300;
	-webkit-text-stroke: 1.2px white;
}

.searchfield {
	border: 1px solid #999; 
	margin-top: 8px; 
	border-radius: 32px; 
	height: 32px; 
	width: 250px
}

/* ------------------ MAIN MENU -------------------*/
.mainmenu {
	display: none;
	padding-left: 0;
	position: fixed;
	top: 50px;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #F1E9FB;
	border-right: 1px solid #D2B8F1;
}

.mainmenu ul {
	list-style-type: none;
	padding-left: 0;
}

.mainmenu ul li a {
	-webkit-appearance: none;
	text-decoration: none;
	background-color: transparent;
	border: none; 
	outline: none;
	cursor: pointer;
	display: block;
	font-size: 20px;
	color: #585858;
	padding-left: 18px;
	padding-top: 10px;
	padding-bottom: 10px;
}

.mainmenu ul li:hover {
	background-color: #E6D8F8;
	color: #333;
}


.mainmenu ul li a.active {
	background-color: #D8C2F3;
	color: #333;
}

.mainmenu ul li a:hover:not(aktive) {
	color: #333;
}

.c {
	background-color: #E6D8F8;
	color: #333;
}

.item3 {
	display: none;
}

#topmenubutton {
	display: inline-block;	
}

#imglogo {
	display: none;		
}

/* ------------------ MAIN HEADER------------------- */
.mainheadersearch{
	flex: 1;
	margin: auto; 
	text-align: right; 
	padding-right: 10px;
	height: 100%;
	display: block;
}

.searchbutton {
	margin-left: -40px;
	color: #7D9CCB;
}

.searchbutton:hover {
	color: #38598C;
}

/* -------------------- MAIN ---------------------- */
.main {
	height: 100%;
	padding: 5px;
}

.mainheader {
	height: 40px;
	/*border-bottom: 1px solid #F5F5F5;*/
}

.mainheaderleft {
	flex: 1;
	font-size: 20px;
	color: #5B54A0;
	padding-left: 15px;
	margin: auto;
}

#selections {
	display: none;
}

.mainlist {
	padding: 0 20px 5px 15px;
}

.mainrecord {
	padding-top: 9px;
	padding-bottom: 9px;
	border-bottom: 1px solid #ccc;
	font-size: 16px;
	color: #333;
}

.mainleft {
	display: none;
	width: 60px;
}

.mainright {
	flex: 1;
	
}


/* ------------------- FOOTER ---------------------*/
.footer {
	text-align: center;
	height: 60px;
	border-top: 1px solid #ccc;
	background-color: #F5F5F5;
	padding-top: 15px;
}


/* ------------------- LOGIN ----------------------*/
.logincontainer {
	display: flex;
	display: -webkit-flex; /* Safari */
    align-items: flex-start;
	-webkit-align-items: flex-start; /* Safari */
	flex-direction: column;
	width: 100%;
	justify-content: space-between;
	position: relative;
	/* border: 1px solid #333; */
	border-bottom: 1px solid #333;
	background-color: #F1E9FB;
}

.loginimgframe {
	display: block;
	width: 100%;
}

.loginimg {
	float: center;
	width:100%;
	height:100%;
	object-fit: cover;
}

.loginframe {
	flex: 1;
	padding-top: 30px;
	padding-bottom: 50px;
	text-align: center;
	color: #3F3589;
	font-size: 22px;
	width: 100%;
}


/* -------------- For Tablets 864 ---------------- */
/* ----------------------------------------------- */
@media only screen and (min-width: 980px) {
.grid-container {
	min-height: 100%;
	grid-template-rows: 50px 50px auto 60px;
	grid-template-columns: 220px auto;
	grid-template-areas: 
	'headerItem headerItem'
	'menuItem topItem'
	'menuItem mainItem'
	'menuItem footerItem';
	}
	
.headercenter {
	display: inline-block;
}
	
.mainmenu {
	display: block !important;
	top: 50px;
	width: 220px;
}
	
.item3 {
	display: block !important;
}
	
#selections {
	display: none;
}
	
.mainleft {
	display: block;
	width: 150px;
}

.mainright {
	flex: 1;
	
}
	
#topmenubutton {
	display: none;	
}
	
#imglogo {
	display: inline-block;		
}
	
/* ------------------- LOGIN ----------------------*/
.logincontainer {
	display: flex;
	display: -webkit-flex; /* Safari */
    align-items: flex-start;
	-webkit-align-items: flex-start; /* Safari */
	flex-direction: row;
	width: 100%;
	justify-content: space-between;
	position: relative;
	/* border: 1px solid #333; */
	background-color: #F1E9FB;
}
	
.loginimgframe {
	flex: 1;
}

.loginimg {
	float: center;
	width:100%;
	height:100%;
	object-fit: cover;
}

.loginframe {
	flex: 1;
	text-align: center;
	padding-top: 20px;
	padding-bottom: 20px;
}
		
}
	

/* -------------- For Desctop 1294 -----------------*/
/* ----------------------------------------------- */
@media only screen and (min-width: 1294px) {
.grid-container {
	min-height: 100%;
	grid-template-rows: 50px 50px auto 60px;
	grid-template-columns: 220px auto;
	grid-template-areas: 
	'headerItem headerItem'
	'menuItem topItem'
	'menuItem mainItem'
	'menuItem footerItem';
	}
	
.headercenter {
	display: inline-block;
}
	
.mainmenu {
	display: block !important;
	top: 50px;
	width: 220px;
}
	
.item3 {
	display: block !important;
}
	
#selections {
	display: block;
}
	
.mainleft {
	display: block;
	width: 150px;
}

.mainright {
	flex: 1;
	
}
	
#topmenubutton {
	display: none;	
}
	
#imglogo {
	display: inline-block;		
}
	
/* ------------------- LOGIN ----------------------*/
.logincontainer {
	display: flex;
	display: -webkit-flex; /* Safari */
    align-items: flex-start;
	-webkit-align-items: flex-start; /* Safari */
	flex-direction: row;
	width: 100%;
	justify-content: space-between;
	position: relative;
	/* border: 1px solid #333; */
	background-color: #F1E9FB;
}
	
.loginimgframe {
	flex: 1;
}

.loginimg {
	float: center;
	width:100%;
	height:100%;
	object-fit: cover;
}

.loginframe {
	flex: 1;
	text-align: center;
	padding-top: 50px;
	padding-bottom: 20px;
}
		
}