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

/* Globala färgvarialer*/
:root {
  --textfarg: #2b2b2b;
  --bla: #3d7cbb;
  --lila: #643dbb;
  --rosa: #d1449d;
  --gron: #3b9115;
  --guld: #a1701f; /*#a29117;*/
  --morkbla: #09547d;
  --orange: #dc8462;
  --rod: #ac1919;
}

/* Custom fonts */
@font-face {
  font-family: FontAwesome;
  src: url(/webfonts/fa-regular-400.ttf);
}

header, nav, article, aside, section, footer {
	display: block;
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html {
	font-size: 16px;
	font-family: 'Open Sans', arial, sans-serif;
	background: #e6e6e6;
	color: #2b2b2b;
}

body {
	background: #e6e6e6;
	color: #2b2b2b;
	overflow-wrap: break-word;
}

/* Rubriker, text och länkar */
h1, h2, h3, h4, h4, h5, h6 {
	margin: 10px 0 5px 0;
}

h1 { 
	margin: 0;
}

h1 {
	font-size: 1.8rem;
}

p {
	margin: 5px 0;
}

blockquote {
	font-size: 1.6rem;
	font-weight: bold;
	font-style: italic;
	color: #2c123c;
	margin: 10px 0;
}

a, a:link, a:active, a:hover, a:visited {
	color: #3d7cbb; 
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

.center {
	text-align: center;
}

.normal {
	font-weight: normal;
}

.kursiv {
	font-style: italic;
	font-weight: normal;
}



/* Sidhuvudets block */
#header {
	position: fixed;
	z-index: 10000;
	width: calc(100% - 240px);
	padding: 20px 40px;
	height: 60px;
	margin-left: 240px;
	background: #fefefe;
	box-shadow: 0 0 10px 0 rgba(230,230,230,0.8);
	-webkit-box-shadow: 0 0 10px 0 rgba(230,230,230,0.8);
	-moz-box-shadow: 0 0 10px 0 rgba(230,230,230,0.8);
	
}

#header_wrap {
	width: 100%;
	max-width: 1630px;
}

#foreningsnamn_header {
	display: inline;
}

a.foreningsnamnet {
	font-weight: bold;
	color: var(--textfarg);
}

#profil_lank {
	
}
#profil_lank p {
	margin: 0;
}

#notis_huvud {
	position: relative;
	float: right;
	margin-left: 20px;;
}

#notis_ruta {
	position: relative;
	cursor: pointer;
	font-size: 1.1rem;
}

#notis_ikon {
	
}

#notis_cirkel {
	position: absolute;
	top: 10px;
	right: 6px;
	border-radius: 50%;
	text-align: center;
	height: 100%;
	aspect-ratio: 1/1;
	background: var(--rosa);
	color: #fff;
	font-size: 70%;
	font-weight: bold;
	padding: 3px 2px 2px 2px;
	cursor: pointer;
}

#notis_popup {
	position: fixed;
	top: 60px;
	right: 30px;
	z-index: 10000;
	width: calc(100vw - 50px);
	max-width: 240px;
	max-height: calc(100vh - 120px);
	background: #fff8dc;
	border: 1px solid #ffdc52;
	font-size: 90%;
	display: none;
}

#notiser_lista {
	max-height: 220px;
	max-height: calc(100vh - 200px);
	overflow: scroll;
}

#notis_popup_stang {
	position: absolute;
	top: 5px;
	right: 5px;
	width: 24px;
	height: 24px;
	cursor: pointer;
}
#notis_popup_stang:hover {
	opacity: 0.6;
}

#notis_popup h4 {
	margin: 10px 6px 0 6px;
	font-size: 1.1rem;
	color: initial;
}

#notis_popup .notis {
	margin: 6px 6px 12px 6px;
	padding: 5px;
	background: #fffcf1;
	border-radius: 3px;
	/*border-bottom: 1px solid #ccc;*/
}

.notis a {
	color: initial;
	cursor: pointer;
}

.notis h5 {
	margin: 0;
	font-size: 0.9rem;
}

.notis p {
	margin: 3px 0;
}

.notis .publicerad {
	margin-top: 0;
	font-style: italic;
	font-size: 0.8rem;
}

.stang_notis {
	float: right;
	cursor: pointer;
}
.stang_notis:hover {
	opacity: 0.6;
}


#foreningsnamn_mobil {
	display: none;
}

#logo_mobil {
	display: none;
	max-width: 200px;
}
#logo_mobil:hover {
	opacity: 0.6;
}

#profil_lank {
	float: right;
}


/* Sidebar med huvudmeny */
#sidebar {
	position: fixed;
	float: left;
	width: 240px;
	height: 100vh;
	overflow-y: auto;
	padding: 20px;
	background: #fefefe;
	box-shadow: 0 0 10px 0 rgba(230,230,230,0.8) inset;
	-webkit-box-shadow: 0 0 10px 0 rgba(230,230,230,0.8) inset;
	-moz-box-shadow: 0 0 10px 0 rgba(230,230,230,0.8) inset;
}

#logo {
	max-width: 200px;
}
#logo:hover {
	opacity: 0.6;
}

#huvudmeny {
	margin: 30px 0 5px 0;
	padding: 0;
	font-weight: bold;
}

#huvudmeny li {
	position: relative;
	margin: 2px 0;
	padding: 5px 0;
	list-style: none;
	border-radius: 5px;
}

#huvudmeny li:hover, #huvudmeny li:hover a, #huvudmeny li.aktiv {
	/*background: #6084d3;*/
	color: #fff;
}

#huvudmeny a {
	position: relative;
	display: block;
	margin: 0;
	padding: 8px 15px 8px 35px;
	color: #2b2b2b;
}
#huvudmeny a:hover, #huvudmeny li.aktiv a {
	color: #fff;
}

#huvudmeny .symbol {
	position: absolute;
	left: 10px;
	top: 8px;
}

#meny_sidor .symbol {
	color: var(--bla);
}
#meny_nyheter .symbol {
	color: var(--lila);
}
#meny_filer .symbol {
	color: var(--rosa);
}
#meny_medlemsregister .symbol {
	color: var(--gron);
}
#meny_installningar .symbol {
	color: var(--guld);
}
#meny_administration .symbol {
	color: var(--morkbla);
}
#meny_profil .symbol {
	color: var(--orange);
}
#meny_hjalp .symbol {
	color: var(--rod);
}
#meny_loggaut .symbol {
	color: var(--textfarg);
}

#huvudmeny li.aktiv .symbol, #huvudmeny li:hover .symbol {
	color: #fff;
}

#huvudmeny #meny_sidor:hover, #huvudmeny #meny_sidor.aktiv, .sidor .knapp, .sidor input[type=submit] {
	background: var(--bla);
}
#huvudmeny #meny_nyheter:hover, #huvudmeny #meny_nyheter.aktiv, .nyheter .knapp, .nyheter input[type=submit] {
	background: var(--lila);
}
#huvudmeny #meny_filer:hover, #huvudmeny #meny_filer.aktiv, .filer .knapp, .filer input[type=submit] {
	background: var(--rosa);
}
#huvudmeny #meny_medlemsregister:hover, #huvudmeny #meny_medlemsregister.aktiv, .medlemsregister .knapp, .medlemsregister input[type=submit] {
	background: var(--gron);
}
#huvudmeny #meny_installningar:hover, #huvudmeny #meny_installningar.aktiv, .installningar .knapp, .installningar input[type=submit] {
	background: var(--guld);
}
#huvudmeny #meny_administration:hover, #huvudmeny #meny_administration.aktiv, .administration .knapp, .administration input[type=submit] {
	background: var(--morkbla);
}
#huvudmeny #meny_profil:hover, #huvudmeny #meny_profil.aktiv, .profl .knapp, .profil input[type=submit] {
	background: var(--orange);
}
#huvudmeny #meny_hjalp:hover, #huvudmeny #meny_hjalp.aktiv, .hjalp .knapp, .hjalp input[type=submit] {
	background: var(--rod);
}
#huvudmeny #meny_loggaut:hover, #huvudmeny #meny_loggaut.aktiv {
	background: var(--textfarg);
}

#huvudmeny li ul {
	margin: 0 5px;
	padding: 0;
	background: #fff;
	display: none;
}
#huvudmeny ul li {
	margin: 0;
	padding: 0;
	background: #fff;
	border-radius: 0;
}

#huvudmeny a.undermeny_lank {
	margin: 0;
	padding: 8px 12px;
	background: #fff;
	color: var(--textfarg)!important;
	font-weight: normal;
	font-size: 0.95rem;
}
#huvudmeny a.undermeny_lank.aktiv {
	font-weight: bold;
}

#huvudmeny ul:hover, #huvudmeny ul li:hover {
	background: #fff;
}


/* Mobilmenym */
#mobilmeny_knapp {
	display: none;
	position: absolute;
	top: 10px;
	right: 10px;
	/*float: right;*/
	width: 40px;
	height: 40px;
	padding: 5px;
	border-radius: 5px;
	background: #fff;
	border: 1px solid #a8a8a8;
	cursor: pointer;
}
#mobilmeny_knapp:hover {
	border: 1px solid #ccc;
}

#knapplinjer {
	position: relative;
	width: 30px;
	height: 30px;
	padding: 3px 2px 4px 0;
	box-sizing: border-box;
}
#knapplinje_1, #knapplinje_2, #knapplinje_3 {
	height: 2px;
	margin-bottom: 8px;
	background: #a8a8a8;
	opacity: 1;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
}

.clicked #knapplinje_1 {
	margin-top: 10px;
	-webkit-transform: rotate(45deg);
	 transform: rotate(45deg);
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
}
.clicked #knapplinje_2 {
	opacity: 0;
	-webkit-transition: opacity 0.3s;
	-moz-transition: opacity 0.3s;
	transition: opacity 0.3s;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
}
.clicked #knapplinje_3 {
	margin-top: -20px;
	-ms-transform: rotate(-45deg); /* IE 9 */
	-webkit-transform: rotate(-45deg); /* Chrome, Safari, Opera */
	transform: rotate(-45deg);
	-webkit-transition: rotate 0.3s;
	-moz-transition: rotate 0.3s;
	transition: rotate 0.3s;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
}

/* Webbsidornas utrymme och grunddesign*/
#main_content  {
	position: relative;
	position: relative;
	float: right;
	width: calc(100% - 240px);
	min-height: calc(100vh - 120px);
	margin-top: 60px;
	padding: 15px 30px;
	background: #f0f6f9;
}

#main_content_wrap {
	width: 100%;
	max-width: 1640px;
}

.wrapper, .main_left, .side_right, .statistikruta, .flex_halva, .information_wrapper {
	margin: 15px 0;
	padding: 20px;
	background: #fff;
	border-radius: 4px;
	-webkit-box-shadow: 0 0 10px 0 rgba(230,230,230,0.8);
}

#main_content .flex {
	display: flex;
	gap: 30px;
}

.main_left {
	flex: 1;
}

.side_right {
	width: 280px;
	width: clamp(20%, 25%, 30%);
}


/*  Sidfotens block */
#footer {
	float: right;
	width: calc(100% - 240px);
	padding: 16px 40px;
	/*height: 60px;*/
	min-height: 60px;
	background-color: #3e63b5;
	color: #fff;
}

.footer_sektion {
	float: left;
	width: 33.33334%;
	margin: 0 0 10px 0;
}

#footer p {
	margin: 0;
}

#footer a {
	color: #fff;
	text-decoration: underline;
}

/* Tabeller */
table {
	width: 100%;
	margin: 0 0 20px 0;
	border-collapse: collapse;
}

table tr:nth-child(odd) {
	background: #f2f2f2;
	background: #fcfcfc;
	border-top: 1px solid #b8b8b8;
	border-bottom: 1px solid #b8b8b8;
}

table td {
	padding: 3px;
	vertical-align: top;
	
}

table a, table a:link, table a:visited {
	/*color: #2b2b2b;*/
}

table .tabellhuvud, table .tabellhuvud td, table th {
	font-weight: bold!important;
	text-align: left;
}

table .tabell_sidnamn a {
	margin-right: 10px;
	font-weight: bold;
}
table .tabell_sidnamn .skapa_undersida a {
	margin-right: 0;
}

table .undersida, table .tabell_status, table .tabell_uppdaterad, table .tabell_hantera {
	font-weight: normal;
}

.tabell_hantera {
	text-align: right;
}

.tabell_hantera .knapp {
	width: 35px;
	height: 35px;
	padding: 0;
	text-align: center;
}
.tabell_hantera .knapp a {
	display: block;
	padding: 7px 0;
}

.tabell_tumnagelbild {
	max-width: 40px;
}

.tabell_tumnagelbild .tumnagelbild {
	max-height: 80px;
}

table .knapp {
	margin: 0;
}

table .tabell_plats {
	width: 70px;
}

table .tabell_status {
	width: 120px;
}

table .tabell_uppdaterad {
	width: 135px;
}

table .tabell_filtyp, table .tabell_filstorlek {
	width: 90px;
}

table .tabell_filnamn {
		word-break: break-all;
	}

table .tabell_hantera {
	width: 60px;
}

table .fil_forhandsvisa {
	width: 80px;
	text-align: center;
}
table .fil_forhandsvisa img {
	max-width: 80px;
	height: auto;
}
table .fil_forhandsvisa img.staende {
	max-height: 80px;
	width: auto;
}

/* Medlemsregistrets tabell */
table#medlemsregister {
	/*display: block;*/
	width: 100%;
	overflow-x: auto;
}

#medlemsregister .med_namn {
	/*min-width: 180px;*/
}

/* Sidnavigation */
#lista_navigation {
	display: flex;
}

#nav_framat, #nav_bakat {
	margin: 0 10px;
	cursor: pointer;
	font-weight: bold;
}


/* Formulär */
.form_vanster {
	clear: left;
	float: left;
	width: 25%;
	margin: 10px 0 20px 0;
	padding: 20px;
	background: #fcfcfc;
}

.form_hoger {
	clear: right;
	float: right;
	width: 73%;
	margin: 10px 0 20px 0;
}

.form_vanster.form_installningar, .form_hoger.form_installningar {
	width: 48%;
	margin: 10px 0 30px 0;
	padding: 20px;
	background: #fff;
	border-radius: 4px;
	-webkit-box-shadow: 0 0 10px 0 rgba(230,230,230,0.8);
	/*padding: 20px;
	background: #fcfcfc;
	border: 1px solid #b8b8b8;*/
}

.form_vanster h2, .form_hoger h2 {
	margin-top: 0;
}

#headerbild_forhandsgranskning.liggande_bild img {
	max-width: 100%;
	aspect-ratio: 4/1;
	object-fit: cover;
	background: #ccc;
}

.form_vanster_stor {
	float: left;
	width: 64%;
	margin: 10px 0 20px 0;
}

.form_hoger_liten {
	float: right;
	width: 35%;
	margin: 10px 0 20px 0;
	padding: 20px;
	background: #fcfcfc;
	border: 1px solid #b8b8b8;
}

.form_utseende {
	padding: 20px;
	background: #fcfcfc;
	border-radius: 4px;
	-webkit-box-shadow: 0 0 10px 0 rgba(230,230,230,0.8);
}

.form_vanster.form_utseende {
	width: 340px;
}

.form_hoger.form_utseende {
	width: calc(98% - 340px);
}


form label {
	display: block;
	clear: both;
	font-weight: bold;
}

form ul {
	margin: 0;
	padding: 0;
}

form li {
	list-style: none;
	margin: 0 0 20px 0;
}

form .lista_inline li {
	display: inline-block;
	margin: 10px 5px 10px 0;
}
form .lista_inline label, form .lista_inline input {
	display: inline;
	width: auto;
	max-width: none;
}

form li ul.tvadelad {
	display: flex;
	gap: 10px;
}
form li ul.tvadelad li {
	flex: 1;
}


/*form li ul.tvadelad li {
	display: inline-block;
	width: 49%;
	vertical-align: top;
}*/

form li ul.delad {
	display: flex;
	gap: 10px;
}
form li ul.delad li {
	/*flex: 1 1 0px;*/
}

/*form li ul.delad li {
	display: inline-block;
}*/

form .delad li.stor {
	width: 65%;
	vertical-align: top;
}

form .delad li.liten {
	width: 34%;
	padding-left: 10px;
	vertical-align: top;
}

form input[type=text], form input[type=email], form input[type=date], form input[type=datetime], form input[type=datetime-local], form input[type=password], form input[type=file], form select, form textarea {
	display: block;
	width: 100%;
	border: 1px solid #ccc;
	border-radius: 5px;
	padding: 5px 10px;
	font-family: inherit;
}

form textarea {
	resize: vertical;
}

input::file-selector-button {
  padding: 6px 14px;
	background: #3e63b5;
	color: #fff;
	border-radius: 5px;
	border: none;
	font-family: 'Open Sans', arial, sans-serif;
	font-size: 16px;
	font-weight: bold;
	cursor: pointer;
}
input::file-selector-button:hover {
	background: #6084d3;
}

form #fargkod, form #bakgrundsfarg {
	float: left;
	width: 50px;
	height: 50px;
	margin: 0 10px 5px 0;
	cursor: pointer;
}

form #vald_fargkod, form #vald_bakgrundsfarg {
	width: calc(100% - 70px)
}

form #fargkod_forhandsvisning, form #bakgrundsfarg_forhandsvisning, form #fargkod_forhandsvisning_popup {
	width: 100%;
	margin: 10px 0 0 5px;
	margin: 0;
	/*padding: 10px;*/
	text-align: center; 
}

form .inline {
	display: inline;
	width: auto;
}

form #tema_forhandsgranskning {
	width: 100%;
	text-align: center;
	background: #e6e6e6;
}

form #webbsida_bakgrund_forhandsgranskning {
	display: inline-block;
}
form #webbsida_bakgrund_forhandsgranskning.lila {
	background: #3f2d73;
}
form #webbsida_bakgrund_forhandsgranskning.gront {
	background: #2b6a17;
}
form #webbsida_bakgrund_forhandsgranskning.rosenrod {
	background: #af5555;
}
form #webbsida_bakgrund_forhandsgranskning.blatt {
	background: #115195;
}

#webbsida_rubrik {
	line-height: 125%;
	font-family: 'Open Sans', arial, sans-serif;
	font-size: 2rem;
	font-weight: bold;
	resize: none;
	border: none;
	border-bottom: 1px solid #ccc;
	border-radius: 0;
}

#webbsida_ingress {
	margin-bottom: 10px;
	font-family: 'Open Sans', arial, sans-serif;
	font-size: 1.22rem;
	font-weight: 500;
	resize: none;
	border: none;
	border-bottom: 1px solid #ccc;
	border-radius: 0;
}

#schremalagg_publicering {
	padding: 10px;
	background: #fff;
	border-radius: 5px;
}

form input[type=submit] {
	margin: 0 15px 0 0;
	padding: 6px 14px;
	background: #3e63b5;
	color: #fff;
	border-radius: 5px;
	border: none;
	font-family: 'Open Sans', arial, sans-serif;
	font-size: 16px;
	font-weight: bold;
	cursor: pointer;
	
}
form input[type=submit]:hover {
	background: #6084d3;
}

form input[type=submit].inaktiv {
	background: #770606;
	cursor: not-allowed;
}

form #avbryt {
	background: #686868;
}
form #avbryt:hover {
	background: #8b8a8a;
}

.formular_fel {
	padding-left: 25px;
}
.formular_fel li {
	margin: 5px 0;
	list-style: square;
}

.form_infotext {
	font-size: 0.8rem;
	font-style: italic;
}
.form_infotext.feltext {
	color: #f00;
}

form .tinymce_container {
	position: relative;
	border: 1px solid #ccc;
	border-radius: 5px;
	min-height: 70vh;
}

form .tinymce_container ul, form .tinymce_container ol {
	margin: 6px 0 20px 0;
	padding: 0 0 0 16px;
}

form .tinymce_container li {
	margin: 8px 0;
	list-style: auto;
}
form .tinymce_container ul li {
	list-style: disc;
}

form #tinycme_toolbar {
	position: sticky;
	top: 60px;
	z-index: 9000;
}

form .tinymce_inline {
	padding: 10px;
}

form #webbsida_innehall_textruta, form #nyhet_innehall_textruta {
	background: #fff;
}

form .flex_toggle {
	display: flex;
	gap: 10px;
	cursor: pointer;
}

fprm .flex_toggle div {
	flex: 0;
}

form .flex_toggle .toggle_label {
	flex: 1;
}

#nyhetsbild_forhandsgranskning_tinymce {
	width: 100%;
	max-height: 400px;
}

#nyhetsbild_forhandsgranskning_tinymce img {
	width: 100%;
	height: 100%;
	max-height: 400px;
	object-fit: contain;
}


#webbsida_innehall_textruta::after, #nyhet_innehall_textruta::after {
  content: "";
  display: table;
  clear: both;
}


/* Startsidan för inloggade */
.statistikruta {
	flex: 1;
	text-align: center;
}

.statistikruta .besokare_siffra {
	display: block;
	text-align: center;
	font-size: 3rem;
	font-weight: bold;
}

 /* CSS för utloggade */
#utloggad_wrapper {
	display: flex;
    align-items: center;
	position: fixed;
	width: 100%;
	height: 100vh;
	height: 100svh;
	max-width: 1920px;
	margin: 0 auto;
	background: #ffaafa;
	background-image: url(img/loggain_bakgrund.jpg);
	background-size: cover;
	background-position: center top;
	background-repeat: no-repeat;
}

#utloggad_bakgrundsbild {
	position: fixed;
	width: 100%;
	height: 100%;
	background: #ffaafa;
	background: #d77cd1;
	clip-path: polygon(100% 0, 0% 100%, 100% 100%);
	opacity: 0.9;
}

#utloggad_innehall {
	position: relative;
	/*margin: 0 auto;
	width: 100%;
	max-width: 1080px;
	padding: 30px;*/
	width: 80vw;
	max-width: 550px;
	min-height: 60vh;
	min-height: 60svh;
	margin: 10px auto;
	padding: 30px;
	background: #fff;
	box-shadow: 0 0 10px 0 rgba(230,230,230,0.8);
	-webkit-box-shadow: 0 0 10px 0 rgba(230,230,230,0.8);
	-moz-box-shadow: 0 0 10px 0 rgba(230,230,230,0.8);
}

#logo_utloggad {
	display: block;
	margin: 0 auto;
	text-align: center;
}
#logo_utloggad:hover {
	opacity: 0.6;
}

.information_wrapper {
	max-width: 1080px;
	margin: 15px auto;
}

#information_bild {
	display: block;
	margin: 0 auto 20px auto;
	max-height: 50vh;
}


/*  Inloggningsformulär */
#loggain_formular {
	/*max-width: 550px;
	margin: 10px auto;
	padding: 30px;
	background: #fff;
	box-shadow: 0 0 10px 0 rgba(230,230,230,0.8);
	-webkit-box-shadow: 0 0 10px 0 rgba(230,230,230,0.8);
	-moz-box-shadow: 0 0 10px 0 rgba(230,230,230,0.8);*/
}

/* Visa avänt/tillgängligt filutrymme */
#filutrymme {
	position: relative;
	float: right;
	width: 65%;
	margin: 10px 0;
	color: #fff;
	text-align: center;
	border: 2px solid #fff;
	border-radius: 5px;
	box-shadow: 0 0 10px 0 rgba(230,230,230,0.8);
	-webkit-box-shadow: 0 0 10px 0 rgba(230,230,230,0.8);
	-moz-box-shadow: 0 0 10px 0 rgba(230,230,230,0.8);
}

#filutrymme  span {
	display: none;
}

#filutrymme #anvant_utrymme, #filutrymme #tillgangligt_utrymme {
	position: relative;
	height: 26px;
	padding: 4px 0;
	/*overflow: hidden;*/
	cursor: pointer;
}

#filutrymme #anvant_utrymme:hover, #filutrymme #anvant_utrymme:active {
	background: rgba(110, 80, 155, 0.6);
}
#filutrymme #tillgangligt_utrymme:hover, #filutrymme #tillgangligt_utrymme:active {
	background: rgba(160, 190, 210, 0.6);
}


#filutrymme #anvant_utrymme {
	float: left;
	background: rgba(110, 80, 155, 1);
	border-radius: 5px 0 0 5px;
}

#filutrymme #anvant_utrymme.varning {
	background: rgba(195, 92, 30, 1);
	border-radius: 5px;
}
#filutrymme #anvant_utrymme.varning:hover {
	background: rgba(195, 92, 30, 0.6);
}

#filutrymme #anvant_utrymme.fullt {
	background: rgba(195, 30, 30, 1);
	border-radius: 5px;
}
#filutrymme #anvant_utrymme.fullt:hover {
	background: rgba(195, 30, 30, 0.6);
}

#filutrymme #tillgangligt_utrymme {
	float: right;
	background: rgba(160, 190, 210, 1);
	border-radius: 0 5px 5px 0;
}

#anvant_utrymme_popup, #tillgangligt_utrymme_popup {
	position: absolute;
	display: none;
	bottom: 35px;
	left: 0;
	padding: 3px 5px;
	text-align: center;
	border: 1px solid #094fac;
	background: #e0f5ff;
	color: initial;
	opacity: 0;
}
#tillgangligt_utrymme_popup {
	left: auto;
	right: 0;
	border: 1px solid #6dac09;
	background: #ecffe0;
}

#anvant_utrymme_popup.warning, #tillgangligt_utrymme_popup.warning {
	border: 1px solid #dd7200;
	background: #ffc799;
}

#anvant_utrymme_popup.error, #tillgangligt_utrymme_popup.error {
	border: 1px solid #d00;
	background: #ffe0e0;
}

#filutrymme #anvant_utrymme:hover + #anvant_utrymme_popup, #filutrymme #tillgangligt_utrymme:hover + #tillgangligt_utrymme_popup{
	display: inline-block;
	opacity: 1!important;
}


/* Förhandsgranskning av webbplatsutseende */
#webbplats_forhandsgranskning {
	width: 100%;
	background: #e6e6e6;
	overflow: hidden;
}

#webbplats_forhandsgranskning h5 {
	margin: 0;
	font-size: 1.2vw;
}

#webbplats_forhandsgranskning h6 {
	margin: 5px 0 0 0;
	font-size: 1vw;
}

#webbplats_forhandsgranskning p {
	font-size: 0.55vw;
	margin: 3px 0 6px 0;
}

#for_webbplats_wrapper {
	width: 80%;
	margin: 0 auto;
}

#for_header, #for_footer {
	background: #3f2d73;
	color: #fff;
	overflow: hidden;
}

#for_header {
	position: relative;
	aspect-ratio: 8 / 1;
	overflow: hidden;
}

#for_titel {
	float: left;
	max-width: 50%;
	padding: 10px;
}

#for_titel_h2 {
	margin: 0;
	font-size: 1.4vw;
	font-weight: bold;
}

#for_titel_h4 {
	margin: 0;
	font-size: 0.76vw;
}

#for_headerbild {
	float: right;
	width: 50%;
	aspect-ratio: 4/1;
	text-align: right;
}

#for_headerbild img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
#for_headerbild img.liten {
	/*object-fit: none;
	object-position: right top;*/
	padding: 10px;
	width: auto;
	max-width: 100%;
	height: auto;
}

#for_huvudmeny_overst {
	display: none;
	margin: 6px 0;
	padding: 4px 6px;
}

.rundade_horn #for_huvudmeny_overst {
	margin: 0;
}
.huvudmeny_overst #for_huvudmeny_overst {
	display: block;
}

#for_huvudmeny_overst p {
	margin: 0;
}

#for_wrapper {
	background: #fff;
	padding: 10px;
}

.huvudmeny_overst #for_huvudmeny {
	display: none;
}


#for_huvudmeny p {
	margin: 0 0 5px 0;
	padding-bottom: 6px;
	font-weight: bold;
	border-bottom: 0.5px solid #ccc;
}

#for_sidomeny {
	float: left;
	width: 20%;
}

#for_sidomeny li {
	font-size: 0.55vw;
	list-style: none;
	margin: 0;
	padding: 1% 2%;
	border: 1px solid #ccc;
	border-top: none;
	background: #f2f2f2;
}
#for_sidomeny li:hover {
	background: #fff;
}

#for_sidomeny #for_menyrubrik {
	padding: 1.3% 2%;
	background: #3f2d73;
	color: #fff;
	font-size: 0.7vw;
	font-weight: bold;
	border: 1px solid #ccc;
}

#for_innehall {
	float: right;
	width: calc(80% - 10px);
}

#for_footer {
	padding: 10px;
}

#webbplats_forhandsgranskning.header_hog #for_header {
	aspect-ratio: 32 / 7;
}
#webbplats_forhandsgranskning.header_hog #for_headerbild {
	aspect-ratio: 16 / 7;
}

#webbplats_forhandsgranskning.header_lag #for_header {
	aspect-ratio: 64 / 5;
}
#webbplats_forhandsgranskning.header_lag #for_titel {
	width: auto;
	max-width: 100%;
}
#webbplats_forhandsgranskning.header_lag #for_headerbild, #webbplats_forhandsgranskning.header_lag #for_titel_h4 {
	display: none;
}
#webbplats_forhandsgranskning.header_lag.headertext_svart, #webbplats_forhandsgranskning.header_lag.headertext_vit, #webbplats_forhandsgranskning.header_helbild.headertext_svart.header_lag #for_titel, #webbplats_forhandsgranskning.header_helbild.headertext_vit.header_lag#for_titel {
	color: inherit
}

#webbplats_forhandsgranskning.header_helbild #for_headerbild {
	float: none;
	width: 100%;
	height: 100%;
}
#webbplats_forhandsgranskning.header_helbild #for_headerbild img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

#webbplats_forhandsgranskning.header_helbild.headertext_vit #for_titel {
	color: #ffffff;
}
#webbplats_forhandsgranskning.header_helbild.headertext_svart #for_titel {
	color: #2b2b2b;
}

#webbplats_forhandsgranskning.header_helbild #for_titel {
	position: absolute;
	left: 1%;
	top: 0;
	width: auto;
	max-width: 99%;
	text-shadow: 0px 0px 3px #272727;
}
#webbplats_forhandsgranskning.header_helbild.headertext_svart #for_titel {
	text-shadow: 0px 0px 3px #fff;
}
#webbplats_forhandsgranskning.header_hog.mork_text #for_titel {
	text-shadow: 0px 0px 3px #fff;
}
#webbplats_forhandsgranskning.header_helbild.header_lag #for_titel {
	text-shadow: none;
}

#webbplats_forhandsgranskning.skugga #for_webbplats_wrapper {
	box-shadow: 0 0 8px #636363;
}

#webbplats_forhandsgranskning.rundade_horn {
	padding: 10px;
	overflow: hidden;
}

#webbplats_forhandsgranskning.rundade_horn #for_webbplats_wrapper, #webbplats_forhandsgranskning.rundade_horn .youtube, #webbplats_forhandsgranskning.rundade_horn #for_sidomeny ul {
	border-radius: 5px;
	overflow: hidden;
}

#webbplats_forhandsgranskning.rundade_horn #for_header, #webbplats_forhandsgranskning.rundade_horn #for_huvudmeny_overst {
	border-radius: 5px 5px 0 0;
}
#webbplats_forhandsgranskning.rundade_horn.huvudmeny_overst #for_header {
	border-radius: 0;
}

#webbplats_forhandsgranskning.rundade_horn #for_footer {
	border-radius: 0 0 5px 5px;
}

#webbplats_forhandsgranskning.meny_hoger #for_innehall {
	float: left;
}

#webbplats_forhandsgranskning.meny_hoger #for_sidomeny {
	float: right;
}

#webbplats_forhandsgranskning.header_helbild.dolj_headertext #for_titel {
	display: none;
}
#webbplats_forhandsgranskning.header_lag.dolj_headertext #for_titel {
	display: block;
}

/* Popup-rutor */
#suddig_bakgrund {
	position: fixed;
	left: 0;
	top: 0;
	z-index: 10050;
	width: 100vw;
	height: 100vh;
	background: rgba(255,255,255,0.8);
	cursor: pointer;
	display: none;
}

#popupruta {
	position: fixed;
	left: 10vw;
	top: 10svh;
	z-index: 10100;
	width: 80vw;
	height: 80svh;
	padding: 20px;
	background: #fff;
	box-shadow: 0 0 20px #979696;
	display: none;
	overflow-y: auto;
}

.stang_popupruta {
	position: absolute;
	right: 15px;
	bottom: 5px;
}


/* Toogleswitches istället för checkboxes */
.toggle_switch {
  position: relative;
  display: block;
  /*width: 60px;
  height: 34px;*/
  width: 40px;
  height: 20px;
}

/* Hide default HTML checkbox */
.toggle_switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.toggle_slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /*background-color: #ccc;*/
  background-color: #828282;
  -webkit-transition: .4s;
  transition: .4s;
  /*border-radius: 34px;*/
  border-radius: 18px;
}

.toggle_slider:before {
  position: absolute;
  content: "";
  /*height: 26px;
  width: 26px;*/
  height: 16px;
  width: 16px;
  /*left: 4px;
  bottom: 4px;*/
  left: 2px;
  bottom: 2px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
  border-radius: 50%;
}

input:checked + .toggle_slider {
  /*background-color: #2196F3;*/
  background-color: #40893b;;
}

input:focus + .toggle_slider {
  /*box-shadow: 0 0 1px #2196F3;*/
  box-shadow: 0 0 1px #40893b;
}

input:checked + .toggle_slider:before {
/*  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);*/
  -webkit-transform: translateX(20px);
  -ms-transform: translateX(20px);
  transform: translateX(20px);
}


/* SMS-funktionen */
#kop_smskrediter_summa {
	font-size: 1.3rem;
	font-weight: bold;
}



/* Temaväljare */
#temavaljare {
	display: flex;
}

.temafarg {
	width: 60px;
	aspect-ratio: 1/1;
	border: 2px solid #ccc;
	cursor: pointer;
	color: #fff;
	text-align: center;
	font-size: 2rem;
	padding-top: 5px;
	
}
.temafarg:hover, .temafarg.valt_tema {
	border-color: #333;
}

.temafarg#lila {
	background: #3f2d73;
}
.temafarg#gront {
	background: #2b6a17;
}
.temafarg#rosenrod {
	background: #af5555;
}
.temafarg#blatt {
	background: #115195;
}

#temafarg i {
	
}

/* Stripe */
.pay {
	  text-transform: uppercase;
    background: #F68B1E;
    border: 1px solid #F68B1E;
    cursor: pointer;
    color: #fff;
    padding: 8px 40px;
    margin-top: 10px;
}
.pay:hover {
	  background: #f17e0a;
    border-color: #f17e0a;
}
.form-control {
    display: block;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    border: 1px solid #ced4da;
    border-radius: 0.375rem;
    margin-bottom: 10px;

}
#stripe-payment-message{
  padding: 20px;
  border-radius: 5px;
  padding-left: 30px;
  margin-bottom: 10px;
  color: #842029;
  background-color: #f8d7da;
  border: 1px solid #f5c2c7;
}
.btn-primary {
  font-weight: 600;
  color: rgb(255, 255, 255);
  text-align: center;
  background-color: rgb(0, 103, 171);
  border: 0 !important;
  border-radius: 6px !important;
  padding: 10px;
  cursor: pointer;
}
.hidden{
    display:none;
}
/* spinner/processing state, errors */
.spinner,
.spinner:before,
.spinner:after {
  border-radius: 50%;
}
.spinner {
    color: #ffffff;
    font-size: 22px;
    text-indent: -99999px;
    margin: 0px auto;
    position: relative;
    width: 20px;
    height: 20px;
    box-shadow: inset 0 0 0 2px;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
}
.spinner:before,
.spinner:after {
    position: absolute;
    content: "";
}
.spinner:before {
    width: 10.4px;
    height: 20.4px;
    background: #F68B1E;
    border-radius: 20.4px 0 0 20.4px;
    top: -0.2px;
    left: -0.2px;
    -webkit-transform-origin: 10.4px 10.2px;
    transform-origin: 10.4px 10.2px;
    -webkit-animation: loading 2s infinite ease 1.5s;
    animation: loading 2s infinite ease 1.5s;
}
.spinner:after {
    width: 10.4px;
    height: 10.2px;
    background: #F68B1E;
    border-radius: 0 10.2px 10.2px 0;
    top: -0.1px;
    left: 10.2px;
    -webkit-transform-origin: 0px 10.2px;
    transform-origin: 0px 10.2px;
    -webkit-animation: loading 2s infinite ease;
    animation: loading 2s infinite ease;
}

@-webkit-keyframes loading {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes loading {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}




/* Flex och grid */
.flex {
	display: flex;
	gap: 10px 20px;
	justify-content: space-evenly;
	align-items: flex-start;
	align-content: flex-start;
}

.flex_halva {
	flex: 1;
	width: 50%;
}

/* Clear och float */
.clear {
	clear: both;
}

.left {
	float: left;
}

.right {
	float: right;
}

.block_fullbredd {
	float: none!important;
	width: 100%!important;
}



/* Bilder, film och annan media */
img {
	max-width: 100%;
	height: auto;
	vertical-align: middle;
	font-style: italic;
}

a img {
	border: none;
}

.youtube {
	position: relative;
	margin: 0;
	padding-bottom: 56.25%;
	padding-top: 0;
	height: 0;
	overflow: hidden;
}
 
.youtube iframe,
.youtube object,
.youtube rembed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

iframe {
	width: 100%;
}



/* Dragspelens CSS */
.mce-accordion {
	max-width: 930px;
	margin: 10px 0;
	border: 1px solid #f2f2f2;
}

.mce-accordion-summary {
	padding: 5px 10px;
	background: #f2f2f2;
	font-size: 1.3rem;
	font-weight: bold;
	cursor: pointer;
} 

.mce-accordion-body {
	padding: 5px;
}



/* Övrig CSS */
.dold, .osynlig {
	display: none;
}

.synlig, .visas {
	display: block!important;
}

.success, .error, .info {
	margin: 5px 0;
	padding: 5px;
}

.success svg, .error svg, .info svg {
	margin-right: 2px;
}

.success {
	border: 1px solid #6dac09;
	background: #ecffe0;
}

.error {
	border: 1px solid #d00;
	background: #ffe0e0;
}

.info {
	border: 1px solid #094fac;
	background: #e0f5ff;
}

.success_text {
	color: #6dac09;
	font-style: italic;
}
.error_text {
	color: #d00;
	font-style: italic;
}
.info_text {
	color: #094fac;
	font-style: italic;
}

.uppdaterad_info {
	margin-right: 5px;
	padding: 5px;
	border: 1px solid #6dac09;
	background: #ecffe0;
	font-size: 90%;
	/*font-style: italic;*/
}

.ej_publicerad {
	font-style: italic;
	color: #b22e2e;
}

.schema {
	font-style: italic;
}

.gra, .morgra, .gron {
	margin: 5px 0;
	padding: 8px;
	color: #000;
}

.gra {
	background: #ccc;
	color: #000;
}

.morkgra {
	background: #6e6e6e;
	color: #fff;
}

.gron {
	background: #c6eac8;
	color: #000;
}

.knapp {
	display: inline-block;
	margin: 10px 0;
	padding: 6px 14px;
	background: #3e63b5;
	color: #fff;
	border-radius: 5px;
	border: none;
	font-family: 'Open Sans', arial, sans-serif;
	font-size: 16px;
	font-weight: bold;
	cursor: pointer;
	text-align: center;
}
.knapp:hover {
	background: #6084d3;
}
.knapp a {
	color: #fff!important;
}

.knapp.radera {
	background: #b22e2e!important;
}
.knapp.radera:hover {
	background: #d86c6c!important;
}

.knapp.block {
	display: block;
	width: fit-content;
	margin-top: 5px;
}

.knapp.dold {
	display: none;
}

.rund {
	border-radius: 50px;
}


.visa_mer_hover, .plats_mobilmarkering {
	display: none;
}

.knapp:hover .visa_mer_hover {
	display: contents;
}

.knapp.gra {
	background: #8b8a8a;
}
.knapp.gra:hover {
	background: #ccc;
}

.skapa_undersida {
	margin-left: 10px;
}

ul, ol {
	margin: 6px 0 20px 0;
	padding: 0 0 0 16px;
}

#lista_webbplatsteman_bilder {
	display: flex;
	gap: 30px 15px;
}
#lista_webbplatsteman_bilder div {
	width: 25%;
	border: 3px solid #fff;
	cursor: pointer;
}
#lista_webbplatsteman_bilder div#vald {
	border: 3px solid #333;
}
#lista_webbplatsteman_bilder div:hover {
	border: 3px solid #ccc;
}



/* Valda teckensnitt, som ersätter Open Sans */
.arial {
	font-family: arial, sans-serif;
}
.verdana {
	font-family: Verdana, arial, sans-serif;
}
.comicsans {
	font-family: "Comic Sans", "Comis Sana MS", 'Comic Neue', cursive, sans-serif;
}


/* Responsiv design */

/* --- För skärmar med bredden MAX 1320px --- */
@media screen and (max-width: 1320px) {
	/*#header, #huvudmeny, #wrapper, #footer {
		width: calc(100% - 40px);
		margin-left: 20px;
		margin-right: 20px;
	}*/
	#header {
		margin-top: 0;
	}
	
	#footer {
		margin-bottom: 0;
	}
}

/* --- För skärmar med bredden MAX 10800px --- */
@media screen and (max-width: 1080px) {
	.flex {
		flex-wrap: wrap;
	}
	
	.main_left, .side_right {
		width: 100%;
		flex-basis: 100%
	}
	
	.form_vanster.form_installningar, .form_hoger.form_installningar, .form_utseende, .form_vanster.form_utseende, .form_hoger.form_utseende {
		float: none;
		width: auto;
	}
	
}


/* --- För skärmar med bredden MAX 800px --- */
@media screen and (max-width: 800px) {
	#header, #main_content, #footer {
		width: 100%;
		margin-left: 0;
	}
	
	#wrapper {
		min-height: 65vh;
	}
	
	#webbplats_titel {
		/*float: none;*/
		width: auto;
		z-index: 1000;
	}

	#headerbild {
		float: none;
		width: 100%;
		max-width: 100%;
		display: block;
		display: none;
	}
	
	#logo_mobil, #mobilmeny_knapp, #foreningsnamn_mobil {
		display: block;
	}
	
	#sidebar, #inloggad_person_meny, #profil_lank, #sidebar_logo, #foreningsnamn_header {
		display: none;
	}
	
	#notis_huvud {
		position: absolute;
		top: 14px;
		right: 60px;
		margin: 0;
	}
	
	#notis_ruta {
		font-size: 1.3rem;
	}
	
	#notis_popup {
		right: 10px;
		height: auto;
		min-height: 300px;
		overflow: scroll;
	}
	
	#notiser_lista {
		height: auto;
		max-height: 100%;
	}
	
	#sidebar {
		float: right;
		right: 0;
		top: 60px;
		z-index: 9999;
		width: 260px;
		max-width: 85vw;
		height: calc(100vh - 60px);
		overflow-y: auto;
		box-shadow: 0 0 10px 0 rgba(230,230,230,0.8);
		-webkit-box-shadow: 0 0 10px 0 rgba(230,230,230,0.8);
		-moz-box-shadow: 0 0 10px 0 rgba(230,230,230,0.8);
	}
	
	#huvudmeny {
		margin: 10px 0;
		padding: 0;
		border-bottom: none;
	}
	
	#huvudmeny li, #huvudmeny li a, #huvudmeny li.mobilmeny_alternativ {
		display: block;
		margin: 2px 0;
	}
	
	#huvudmeny a {
		padding: 5px 15px 5px 35px;
	}
	
	#huvudmeny .symbol {
		top: 5px;
	}
	
	#sidomeny, #webbsida_innehall, .form_vanster, .form_hoger, .form_vanster_stor, .form_hoger_liten, .form_vanster.form_installningar, .form_hoger.form_installningar {
		float: none;
		width: 100%;
	}
	
	.footer_sektion {
		float: none;
		width: 100%;
	}
	
	table .fil_forhandsvisa {
		width: 60px;
	}
	table .fil_forhandsvisa img {
		max-width: 60px;
	}
	table .fil_forhandsvisa img.staende {
		max-height: 70px;
	}
	
	.plats_mobilmarkering {
		display: inline;
	}

	.skapa_undersida {
		display: block;
		width: -moz-fit-content;
		width: fit-content;
	}
	
	#medlemsregister .med_roller, #medlemsregister .med_grupper {
		display: none;
	}
}

/* --- För skärmar med bredden MAX 600px --- */
@media screen and (max-width: 600px) {
	#header {
		padding: 15px 20px;
	}
	
	#main_content {
		padding: 10px 20px;
	}
	
	#main_content .flex {
		gap: 10px 30px;
	}
	
	.tabell_plats, .tabell_uppdaterad, .tabell_meny, .tabell_filstorlek, .tabell_kopiera_lank, #medlemsregister .med_sedan {
		display: none;
	} {
		display: none;
	}
	
	#header_logo, #header_webbplatslank {
		display: block;
	}
	#header_logo {
		margin: 0 0 3px 0;
	}
	
	.ej_mobil {
		display: none;
	}
	
	.mobil_block {
		display: block;
	}
	
	#filutrymme {
		width: 100%;
	}
	
	#utloggad_wrapper {
		display: block;
	}
	
	#utloggad_innehall {
		min-height: 0;
		margin-top: 30px;
	}
	
	form li ul.delad {
		display: block;
	}
	
	form .delad li.stor, form .delad li.liten {
		width: 100%;
		padding: 0;
	}
	form .delad .stor {
		margin-bottom: 5px;
	}
}

/* --- För skärmar med bredden MAX 520px --- */
@media screen and (max-width: 520px) {
	form .delad .stor, form .delad .liten {
		float: none;
		width: 100%;
		display: block;
		padding: 0;
	}
	form .delad .stor {
		margin-bottom: 5px;
	}
	
}