a:link{ color:#4286f4; text-decoration: none; font-synthesis-weight:none; /* font-weight funkar inte */}
a:visited { color:#4286f4; text-decoration: none; font-synthesis-weight:none;}
a:hover{ color: red; text-decoration: none; font-synthesis-weight:none;}

a.subscribe:link { color: #fd8521;  text-decoration: none; border: 2px solid #fd8521;	border-radius: 1.5em; padding: 4px;}
a.subscribe:visited { color: #fd8521; text-decoration: none; border: 2px solid #fd8521;	border-radius: 1.5em; padding: 4px;}
a.subscribe:hover { color: red;  text-decoration: none; border: 2px solid #fd8521;	border-radius: 1.5em; padding: 4px;}

a.help:link,
a.help:visited,
a.help:hover {color: #ffffff; text-decoration: none; float:right; position:relative; top:10px; right: -10px;}

@font-face {
	/*For arabic OBS!!! finns enbart här*/
	font-family: 'KacstOne';
	src: url('../fonts/embedfonts/arabic/KacstOne.eot');
	src: url('../fonts/embedfonts/arabic/KacstOne.eot?#iefix') format('embedded-opentype'),
	url('../fonts/embedfonts/arabic/KacstOne.woff') format('woff'),
	url('../fonts/embedfonts/arabic/KacstOne.ttf') format('truetype'),
	url('../fonts/embedfonts/arabic/KacstOne.svg#KacstOne') format('svg');
	font-weight: normal;
	font-style: normal;
}

@viewport {
	width: device-width;
	width: 300 auto;
	/*min-zoom: 1.10;
	max-zoom: 2;*/
	transform: scale(1.30);
}

input {
	vertical-align: middle;
}

h1 {
	font-size: 1em;
	height: 25px;
}

body {
	margin: 0px;
	background-color: #FFFFFF;
	font-family: arial, verdana, sans-serif;
	font-size: 1.10em;
	text-align: center;
	/*annars funkar inte centrering av elementen i IE med margin-left:auto; margin-right:auto;*/
	overflow-x: hidden; /* Hide horizontal scrollbar */
}

*:focus {
	outline: none;
}

img,
iframe {
	border: 0;
}

/****************    2 centerade kolumner  ***********************/

#container {
	/*Stora diven runt all content*/
	width: 100%;
	/*970px;*/
	margin: 0 auto;
}

#content {
	/* v�nster diven f�r innh�llet*/
	width: 80%;
	margin-left: auto;
	margin-right: auto;
}


#middle {
	min-height: 200px;
	border: 1px solid #D8D8D8; position:relative; top:10px;
	border-radius: 0.99em 0.99em 0.99em 0.99em;
}

/* för senare användning
#sidebar {
	/* reklam sidebar till h�ger*/
	/* reklam sidebar till h�ger*/
/*}*/

#footer {
	clear: both;
	/* floating not allowed */
	position: relative;
	top: 20px;
	margin: 0 auto;
	width: 100%;
	background-color: #e5e5e5;
}

/****************    2centerade kolumner  ***********************/

/* Hela stora blåa området*/

.seekContainer {
	width: 100%;
	margin: 0 auto;
	background-color: #4286f4;
}

/* för test så att man kan se divramarna */

/*div{border: solid 1px silver;}*/

/* bla sökrutan under svarta rubriken */

.seekBodyContainer {
	width: 100%;
	height: 140px;
	background-color: #4286f4;
	vertical-align: middle;
}

.headtext {
	/* översta silver rubriken */
	position: relative;
	font-size: 1.4em;
	color: white;
}

.headtextAra {
	/*arabic headtext*/
	font-family: KacstOne;
	font-size: 1.25em;
	position: relative;
	top: -0.10em;
	color: white;
	direction: rtl;
	margin-right: 14px;
}

#headtextsy {
	position: relative;
	top: 0em;
	color: white;
}

.leftSeekContainerHead {
	position: relative;
	left: 5px;
	top: 5px;
	width: 50%;
	height: 30px;
	display: inline-block;
	text-align: left;
}

.rightSeekContainerHead {
	position: relative;
	right: 5px;
	top: 5px;
	width: 49%;
	height: 30px;
	display: inline;
	text-align: right;
	float: right;
}

.progressBar {
	position: absolute;
	left: 50%;
	width: 1%;
	height: 30px;
	display: inline;
	margin: 0 auto;
}

/* Radioknapparna och sökfältet */
.leftInputGroup {
	width: 55%;
	height: 30px;
}

/*knapp-kontainern*/
.rightInputGroup {
	width: 44%;
	height: 30px;
	float: right;
}

/* radioknappgrupp parent .leftInputGroup diven ar 50% */
.radioGroup {
	height: 30px;
	position: relative;	left: 15%;
	top: 20px;
	float: left;
	overflow: hidden;
}

/* Sökfältet, t-bord+ o sökknappar*/
.searchGroup {
	width: 100%; 
	position: relative;
	left: 1px; /* ger on�dig skroll i botten p� sidan overflow-x: hidden; i body Hide horizontal scrollbar */ 
	top: 45px;
}


/* OBS! dennsa finns i de olika syriska css:erna f att styra h�jden p� tbord ikonen r�tt */
.keyboardInputInitiator {
	width: 40px;
	height: 32px;
	position: relative;
	left: 8%;
	top: -21px;
	float: left;
	/*margin:0px 3px;
		vertical-align:middle;*/
	cursor: pointer;
	z-index: 2000;
}

.keyboardInput, #sy { /*#sy for admin ta inte bort*/
	width: 43%;
	height: 33px;
	line-height: 42px; /* i kombination med padding top o bottom visar h�ga tecken med vokaler helt v�rdet ska vara st�rre �n height*/
	padding-top: 6px; 
	position: absolute;
	left: 7%;
	top: -27px;
	direction: rtl;
	/*text-align: center;*/
	background-color: #4286f4;
	font-size: 1.3em;
	font-weight: bold;
	color: #fff;
	border: 0;
	border: 2px solid #ffffff;
	border-radius: 0.99em 0.99em 0.99em 0.99em;
	
}

.progressBar img {
	position: relative;
	top: -80px;
}

#searchbtn {
	width: 5%;
	font-size: 80%;
	position: relative;
	left: -4.5%;
	top: -21px;
	background-color: #4286f4;
	height: 32px;
	border: 0px;
	border-radius: 1.0em;
}

#searchbtn:hover {
	width: 5%;
	font-size: 80%;
	position: relative;
	left: -4.5%;
	top: -21px;
	height: 32px;
	background-color: #91b6f2;
	border-radius: 1.0em;
}

/* margin-top:25px; f�r att s�nka den 30px d� motsvarar den h�jden p� radioGroup */

.buttonpanel {
	width: 44%;
	position: absolute;
	right: 0px;
	top: 62px;
	margin-top: 25px;
	float: right;
}

div.buttonpanel {
	width: 44%;
	float: left;
}

img.buttonpanel {
	height: 50px;
	/*pga ikonernas height */
	display: inline;
	position: absolute;
	left: 0px;
	/*ikonernas position */
	border: 0px;
}

/*ikonernas height o width mkt viktigt f;r svg*/

.menimg {
	width: 50px;
	height: 50px;
	position: relative;
	left: 1%;
	float: left;
	z-index: 1;
}


.ui-selectmenu-text {
	font-size: 1.0em;
	text-align: center;
	position: relative;
	top: 1px;
	color:#ffffff;
	/*textposition*/
}

.ui-selectmenu-icon .ui-icon .ui-icon-triangle-1-s{
	color: white;
}

#selectdiv{ /* styr breddeb av selectknappen */
	width:21%; height: 25px;
	position: relative; top: 3px; left: -3%;
	display: inline-flex;
}
select,
#fontselect, #fontselect-button {
	width: 100%; height: 25px; /* 100% av #selectdiv */
	color: #cccccc;
	/* position: relative; top: 3px; left: 2%; */
	
	/* float: left; */
	background-color: #4286f4;
	border: 2px solid #ffffff;
	border-radius: 1.5em;
	z-index: 0;
	overflow: hidden;	
}
.themeDiv{
	/* width: 15px; */
	position: relative; top:10px; left: -13%;
	display: inline-flex; /* annars hamnar de på två rader */
	float: right; 
}
#themeMode{
/* tvärtom den vanliga */
	/* visibility: hidden; */
	color:#fff;
}
/* #darkMode{
	visibility: visible;
	color:#fff;
} */


/*************** radio knapparna *******************/

/* The container */
.radioContainer {
	max-width: 100%;
	display: inline;
	position: relative; left:0px;
	padding-left: 23px;
	margin-bottom: -2px;
	cursor: pointer;
	font-size: 0.8em;
	color: white;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

/* Hide the browser's default radio button */

.radioContainer input {
	position: absolute; 
	opacity: 0;
	cursor: pointer;
}

/* Create a custom radio button */

.checkmark {
	position: absolute;
	top: -1px;
	left: 0;
	height: 16px;
	width: 16px;
	background-color: #dddddd;
	border: 2px solid white;
	border-radius: 50%;
}

/* On mouse-over, add a grey background color */

.radioContainer:hover input~.checkmark {
	background-color: white;
}

/* When the radio button is checked, add a blue background */

.radioContainer input:checked~.checkmark {
	background-color: #2196F3;
}

/* Create the indicator (the dot/circle - hidden when not checked) */

.checkmark:after {
	content: "";
	position: absolute;
	display: none;
}

/* Show the indicator (dot/circle) when checked */

.radioContainer input:checked~.checkmark:after {
	display: inline-block;
}

/* Style the indicator (dot/circle) */

.radioContainer .checkmark:after {
	top: 4px;
	left: 4px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: white;
}

/* Blinnkar radiogruppen vid nollträff */ 
@keyframes blinking {
	0% {
	  padding:2px;
	  width:98%; height:25px;
	  background-color:#a3c4f7;
	  /*border: 3px solid white;*/
	  border-radius:0.7em;
	  
	 }
	 /* YOU CAN ADD MORE COLORS IN THE KEYFRAMES IF YOU WANT */
	 50% {
	   width:98%; height:25px;
	   padding:2px;
	   background-color: #4286F4; /* ändra inte #4286F4 behövs för blinket*/
	   /*border: 3px solid white;*/
	   border-radius:0.7em;
	   
	 }
	
	 100% {
	   width:98%; height:25px;
	   padding:2px;
	   background-color:#a3c4f7;
	   /*border: 2px solid white;*/
	   border-radius:0.7em;
	 }
   }
   .blink {
	 width:100%;
	/*  NAME | TIME | ITERATION */
	 animation: blinking 0.5s 2;
   }
/*********************Radioknapparna**********************/

/*taggen finns i filen getword.cgi*/

.wordsfound {
	position: absolute;
	left: 21%;
	top: -6.0em;
	color: #e5e5e5;
	font-size: 0.7em;
	z-index: 20000;
	overflow: hidden;
}
/* för att visa meddelande vid click på
** copyknappen eller virt.t-bord on/off */
#cpyMsg {
	position: fixed; 
	top: 50%;
	left: 40%;
	width: 20%;
	height: 30px; /* 23-11-02 */
	font-size:1.3em;
	text-align: center;
	align-items : center;
	display:none;
	background-color: #000000;
	color:#ffffff;
	filter: alpha(opacity=70);
	-moz-opacity: 0.7;
	opacity: 0.7;
	padding: 5px;
	border-radius: 12px;
	z-index: 20000;
}

.feedback {
	color: white;
	vertical-align: middle;
}

/*själva Rubriksraden English, Swedish mm.*/
.header2 {
	width: 100%;
	position: relative;
	left: 0px;
	border-collapse: collapse;
	color: #5e5d5c;
	
}

.scrollup {
	width: 68px;
	height: 68px;
	position: fixed;
	bottom: 22px;
	right: 5%;
	color: black;
	/*border: 2px solid gray/*#4286f4*/;
	/*border-radius: 1.5em;

	padding: 5px 5px;*/
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 48px !important;
	z-index:200;
}


/* Rubriken över ordblocken Syriac, Arabic mfl.*/
#langRubrikContainer { width: 100%; margin-left: auto; margin-right: auto; background-color: #e5e5e5;}

#langRubrik{ width: 89%; margin-left: auto; margin-right: auto; position: relative; top: 0px; }

#recordContainer {
	position: relative;
	top: 10px;
	/* border-top: 1px solid #D8D8D8; */
	border-bottom: 1px solid #D8D8D8;
	/* background-color: #FFFFFF; */
	border-radius: 0.90em 0.90em 0.90em 0.90em;
}

/* utrymmet f�r rubriken �ver ordblocken Syriac, Arabic mfl.*/
.vanster {
	width: 50%;
	color: #2f2e2d;
	vertical-align: middle;
	text-align: left;
	padding-left: 6%;
}

.hoger {
	width: 50%;
	color: #2f2e2d;
	vertical-align: middle;
	text-align: right;
	padding-right: 6%;
}

/* De olika blocken posterna*/

.bbttaabbllee {
	width: 100%;
	display: table;
	position: relative;
	left: 0px;
	top: 0px;
	border: 0px;
	border-collapse: collapse;
}

#recordnr {
	font-size: .7em;
	color: #726f6f;
	text-align: left;
	padding-left: 7px;
}

.menuraw {
	font-size: 1em;
	line-height: 9px;
	border-bottom: 1px solid #ecad5c;
}

.tr {
	width: 50%;
	font-size: 1.10em;
	text-align: left;
	padding-left: 7px;
	word-wrap: break-word;
}


#randomIcon {
	/*border-radius: 50%; omman vill avgr'na ikonen med circle*/
	-webkit-transition: -webkit-transform .8s ease-in-out;
	transition: transform .8s ease-in-out;
}

#randomIcon:hover {
	-webkit-transform: rotate(360deg);
	-moz-transform: rotate(360deg);
	transform: rotate(360deg);
}
.themeMode{
	/* width: 15px; */
	position: relative; top:10px; right: 15%;
	display: inline-flex; /* annars hamnar de på två rader */
	float: right;
}
#lightMode{
	position: relative; right:20%; /* flytta tillbaka på samma ställe som dark ikonen */
	display : block!important; /* Annar funkar inte .hide() */
}
#darkMode{/* ligt/darMode ikonerna */
	display : block!important; /* Annar funkar inte .hide() */
}

#sy2 {
	/*#sy2 på suggest.html*/
	direction: rtl;
	text-align: center;
	font-size: 1.3em;
	font-weight: bold;
	float: left;
}
/*figure och figcaption används inte än 2025-04-25*/
figure { 
	margin: 0;
	padding: 2px;
	float: right;	
}
figcaption {
	margin: 0;
	padding: 2px;
	font-size: 0.75em;
	text-align: right;
	/*color: #5e5d5c;*/
	/*font-weight: bold;*/
	font-family: Arial, Helvetica, sans-serif;
}
.sy, .syt {
	/*resten av formateringen finns i all.css o chrome.css*/
	width: 50%;
	text-align: right;
	vertical-align: top;
	direction: rtl;

}


.syt, .art, .ent, .svt, .en, .sv, .ar, #sy {
	-ms-word-break: break-word;
	word-break: break-word;
	/* Non standard for webkit */
	word-break: break-word;

	-webkit-hyphens: auto;
	hyphens: auto;
	-ms-hyphens: auto;
	hyphens: auto;
}

.arabicTranslation{/*används i cgi script tex suggest*/
	font-family: 'KacstOne';
	font-size: 1.15em;
	direction: rtl;
	text-align: right;
	vertical-align: top;
}

.arabicTranslationText{
	font-family: 'KacstOne';
	font-size: .90em;
	direction: rtl;
	text-align: right;
	vertical-align: top;
}

.English1,.English2,.English3, .Swedish1, .Swedish2, .Swedish3 {font-size:1.1em;text-align: left; display:table-cell; padding-left: 8px;}

.Englishtext, .Swedishtext {font-size:.90em;text-align: left; vertical-align: top; display:table-cell; padding-left: 8px; }

/* För bildtexter i tex wikilänk */
figcaption.syt, figcaption.art, figcaption.ent, figcaption.svt {
	font-size: 0.9em;
	vertical-align: top;
}

/* highligt sökbegrepp i resultat */
#highlight {
	text-decoration: underline #fd8521;
	text-decoration-thickness: 1.5px;
	/* orange wavy underlining */
}

/* highligt   i resultat, taggen kommer fr getword*/

#highlightSpace {
	text-decoration: underline red;
}

.center{ text-align: center; position: relative; margin-left: auto; margin-right: auto;}

.footer {
	text-align: center;
	color: #5e5d5c;
	font-size: 0.7em;
	font-weight: bold;
	vertical-align: middle;
}

#footer {
	/*border-top: 20px solid #CCD1D1;*/
	border-bottom: 20px solid #CCD1D1;
	height: 110px;
	padding-top: 5px;
}

/*slogan i sidfoten */

.slogan {
	text-align: center;
	font-size: 1.1em;
	font-weight: bold;
	color: #5e5d5c;

}

a.mail, a.facebook, a.twitter, a.linkedin, a.share:link{color: gray; text-decoration: none;}
a.mail, a.facebook, a.twitter, a.linkedin, a.share:link:visited{color: gray; text-decoration: none;}
a.mail, a.facebook, a.twitter, a.linkedin, a.share:link:hover{color: gray; text-decoration: none;}

.material-icons {
	font-family: 'Material Icons';
	font-weight: normal;
	font-style:normal;
	color:#656463;
	font-size: 24px !important;  /* Preferred icon size 24px*/
	display: inline-block;
	line-height: 1;
	text-transform: none;
	letter-spacing: normal;
	word-wrap: normal;
	white-space: nowrap;
	direction: ltr;
  
	/* Support for all WebKit browsers. */
	-webkit-font-smoothing: antialiased;
	/* Support for Safari and Chrome. */
	text-rendering: optimizeLegibility;
  
	/* Support for Firefox. */
	-moz-osx-font-smoothing: grayscale;
  
	/* Support for IE. */
	font-feature-settings: 'liga';
  }
  
.material-icons.md-48{ font-size: 48px; }

/*taggen finns i filen getword.cgi*/
/* message i söksidor */
.message {
	max-width: 640px;
	/* min-height: 100px; */

	border: 1px solid #aaaaaa;
	color: #FF6600;
	background-color: #FFFFCC;
	text-align: center;
	font-size: 1.0em;
	font-weight: bold;
	padding-top:20px; padding-bottom:20px;
	margin: auto;
	/* margin-right: auto; */
	position: relative;
	top: 26px;
	border-radius: .95em;
}


/*taggen finns i filen getword.cgi*/
/* submessage vid sub- o unsubscribe */
.submessage, .adminMessage {
	width: 630px;
	color: #6b6b6a;
	background-color: #FFFFEE;
	text-align: center;
	
	font-weight: bold;
	margin: auto;
	position: relative;
	top: 26px;
	padding-top:20px; padding-bottom:20px;
	border: 2px solid #fd8521;
	/*Ronded corner */
	border-radius: .6em;
	
}

/* en tom img tag läggs från printError i cgi:n och befolkas här för olika teman*/
.message img, .adminMessage img{ /* info ikonen i message */
	content: url("../images/info32.png"); /* content tar över hela taggens innehåll */
	position:absolute; top:33%; left:3%; border: 0;
	background-repeat: no-repeat;
}

.adminMessage {
	position: relative;
	top: 170px;
}

.testMessage{ /* Formatering av testmeddelandet*/
	width:370px;
	font-size: 0.9em; font-weight: bold; color:yellow; text-align: right;
	position: relative; top: -16px; display:table-cell;
	z-index: 200;
}
/* formaterar medd. till gamla browsrar */

/*************** i all.js **************/

.browserTestMessage {
	width: 700px;
	background: url(../images/warning.png);
	background-repeat: no-repeat;
	margin-left: auto;
	margin-right: auto;
	color: red;
	font-size: 10pt;
	font-weight: bold;

}

/**** class .li för att li formateras på ett annat ställe i /admin/getword.html ****/

.li {
	font-family: verdana, arial, sans serif;
	font-size: 0.8em;
	/*list-style: none;
	/* background: url(../images/orangBullet.png); */
	background-repeat: no-repeat;
	padding-left: 14px;
	background-position: 0 2px;
}

.liR {
	font-family: verdana, arial, sans serif;
	font-size: 1.1em;
	/* list-style-image: url(../images/orangBullet.png); */
	padding-right: 14px;
	background-position: 0 2px;
	direction: rtl;
}

/******** Hangman outerborder. For innerborder hangmn.htm *********/
/* Inputfältet för hangman-bokstaven */
#HangInput{font-size:24px; height:36px; text-align:center; border: 1px solid #cccccc; border-right: none; border-radius: 0.9em 0em 0em 0.9em;}
#okButton{ height:46px; width: 50px; position:relative; left:-5px; top:0px; border: 1px solid #cccccc; border-radius: 0em 1.66em 1.66em 0em; border-left: none; background-color: #ffffff;}

#hang {
	display: none;
	width: 335px;
	height: 400px;
	margin-left: auto;
	margin-right: auto;
	/*to center*/
	padding-top: 5px;
	font-size: 120%;
	border-radius: 5px;
}

#HangInner {
	width: 360px;
	height: 460px;
	background-color: #f7f7f7;
	border: 2px solid silver;
	border-radius: 5px;
	margin-left: auto;
	margin-right: auto;
	font-family: Arial, sans-serif;
	font-weight: normal;
	text-decoration: none;
}
/*#HangConsole{ font-size:14px; position:relative; top:15px; text-align:center; width:300px; margin: 0 auto; }*/

/*** Hangman sound ***/
#soundOn{
	position: relative; left: 160px; top: -460px;
	display: inline-block;
  	cursor: pointer;
}

#HangGuessWordLabel{ position: relative; top:3px;} 
#HangGuessWord{ direction:rtl; font-size:36px; position: relative; top:5px;}

#keypad {
	width: 350px;
	position:relative; top: 0px;
	margin: auto 0;
	border:0px solid gray;
}
#HangMessage {font-size:14px; position:relative; top:17px; width:225px; text-align:center; margin: 0 auto;}

#HangImage {
	position: relative;
	top: 15px;
	margin: auto 0;
}

.playTryAgain{ height: 28px; border: 1px solid #cccccc; border-radius: 1.65em 1.65em 1.65em 1.65em; cursor: pointer; background-color: #ffffff;}

/********************* Subscribe/unsubscribe.html/unsb ****************************/
.suggButtonContainer{
	height: 15%;
}
#subMailInput, #subMailInput2{width:61.5%;}
.inputfield{
	vertical-align:middle; font-size: 1.3em; height:1.99em; border-radius:  1.2em  1.2em  1.2em  1.2em;
	border: 1px solid #cccccc; /*padding-left:3px; margin-bottom: 3px;*/
}
#subCodeField, #unsubCodeField{
		font-size: 1.3em; text-align: center; vertical-align: middle;
		height:1.65em; border: 1px solid #cccccc; border-radius: 0.99em 0.0em 0.0em 0.99em;
}
.subscribeBTN{
	height:2.37em; width: 6.3em; position:relative; left:-5px; top:0px; border: 1px solid #cccccc; border-radius: 0.0em 1.2em 1.2em 0.0em;
	/*border-left: none;*/ background-color: #ffffff; cursor: pointer;
}

#tabs,#tabs2{
	font: size 1.0em; font-family: verdana,sans-serif;
}
#tabs-4,#tabs-52{
	font: size 2.0em; font-family: verdana,sans-serif;
}



/******************************* suggesthtml **************************************/
.suggestContainer {
	margin: 0 auto;
	/* or margin: 0 auto 0 auto */
	max-width: 640px;
	/*max-height:645;*/
	border: 1px solid #aaaaaa;
	border-radius: .95em;
	padding-left: 0px;
	/*background-color: #edeeef;*/
}
.containerhead {
    max-height: 85px;
    border-top-left-radius: 0.95em;
    border-top-right-radius: 0.95em;
    background-color: #edeeef;
}

input {
	vertical-align: middle;
	text-align: center;
	
	border-radius: 0.99em 0.99em 0.99em 0.99em;
}



h1 {
	font-size: 1em;
	height: 25px;
}

a:link, a:active, a:visited{
	font-weight: bold;
}

a:hover {
	color: red;
}

.suggestTable {
	margin: 0 auto;
	font-weight: bold;
}

.suggestTd {
	text-align: left;
}


#sy2, #aarraa {
	width: 300px;
	direction: rtl;
	font-size: 1.3em;
	max-width: 16.0em;
	max-height: 26px;
}

#aarraa {
	position: relative;
	top: 0px;
	max-height: 26px;
	font-size:105%; font-family: "KacstOne;"
}

#eenngg, #sswwee {
	width: 300px;
	font-size: 1.2em;
	max-width: 17.5em;
	max-height: 26px;
}
#codeField{
	font-size: 1.3em;
	text-align: center;
}

.container {
	margin: 0 auto;
	/* or margin: 0 auto 0 auto */
	max-width: 640px;
	/*max-height:645;*/
	border: 1px solid #aaaaaa;
	border-radius: .95em;
	padding-left: 0px;
	/*background-color: #edeeef;*/
}

.red {
	color: red;
}

.info {
	
	max-width: 100%;
	max-height: 75px;
	max-height: 645px;
	border: 0px solid #aaaaaa;
	border-radius: 0.0em 0.0em 0.95em 0.95em;
    background: #edeeef;
	margin-left: auto;
	margin-right: auto;
	/*to center*/
	padding-top: 5px;
}

.inputlabel{
	font-size: .8em;
}
.suggestinput {
 	
	border: none;
	height: 26px;
	border: 1px solid #aaaaaa;
	border-radius: .98em;
	padding: 4px;
}
#suggCodeField{
	font-size: 1.3em; text-align: center; vertical-align: middle;
	height:1.64em; border: 1px solid #cccccc; border-radius: 0.99em 0.0em 0.0em 0.99em;
}
#suggSendbutton{
	height: 3.10em; width: 8.3em; position:relative; left:-5px; top:0px; border: 1px solid #cccccc;
	border-radius: 0.0em 1.5em 1.5em 0.0em; border-left: none; background-color: #ffffff; cursor: pointer;
	/* background-color: #2f2e2d; color: #ccc; */

}
/******************************* End suggesthtml **************************************/

/******************************* vocals.html ********************************/
.hardAndSoftLetters{
	text-align: center;
	vertical-align: top; 
	color:#ffffff; 
	background: #4286f4; 
	border: none; 
	padding: 0px;
}

#postContainer{ 
	position:relative; top:10px;
	padding: 10px;
	border: 1px solid #D8D8D8;    
	-webkit-border-radius: 3px;
	border-radius: 3px;
	margin-left:auto; margin-right:auto;
}
vocalstable.td{padding-left:2px;padding-right:2px;}
vocalstable.tr{direction: rtl; text-align: center; font-size: 1.0em; }
.sy{font-size:1.6em; }
.en{direction:ltr;}
.ar{
	font-family: 'KacstOne';
	font-size:0.95em;
	direction: rtl;
	text-align: right;
}
.vocalsRubrik{font-size:1.0em; height:35px; background-color: #4286f4; color: white; padding:3px;}
.vocalsRubrik1, .vocalsRubrik5{font-size:1.0em; height:35px; background-color: #4286f4; color: white; border-radius: 0.99em 0.00em 0.00em 0.99em; padding:3px;}
.vocalsRubrik4, .vocalsRubrik7{font-size:1.0em; height:35px; background-color: #4286f4; color: white; border-radius: 0.00em 0.99em 0.99em 0.00em; padding:3px;}
.vocalsNote{font-size:.9em} 
td.hardAndSoftLetters{ /* hardAndSoftLetters */
	border-radius: 0.99em 0.99em 0.99em 0.99em;
}

/*********************** Faq ***********************/
.expand{ /* expande more/less pilarna i faq.html*/
	position: relative;top: 5px;
}

summary{
	font-size: 1.25em;
	font-weight: bold;
	cursor: pointer;
}

details > summary {
    list-style-type: '';/*'+';*/
}

details[open] > summary {
    list-style-type: '';/* '▼'; */
}

details {
    border-bottom: 1px solid #D8D8D8;/* det blir f mkt ramar när det är nästlat */
    border-radius: 0.2rem;
    padding: 0.5rem;
}

details[open] > summary {
    margin-bottom: 0.5rem;
}
code{
	font-size: 1.10em;
}