/*textarea, input { outline: none; } /*chrome bort m blaram*/
input, teaxtarea, button, select, input[type=radio], input[type=checkbox] :focus { outline: none; } /*chrome bort m blaram*/

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;}

.adminLiink{
	font-size:0.75em;
	height:25px;
	border-top:solid; border-top-width:1px; border-top-color:#D3D3D3;
	color:#555;
}
a.adminLnk:link{padding: 3px; color:#555;text-decoration:none;font-weight:bold; border: 1px solid #e0dcdb; border-radius : 0.3em 0.3em 0.3em 0.3em;}
a.adminLnk:visited{padding: 3px; color:#555; text-decoration:none; font-weight:bold;  border: 1px solid #e0dcdb; border-radius: 0.3em 0.3em 0.3em 0.3em; }
a.adminLnk:hover{padding: 3px; color:#FFF; font-weight:bold; border: 1px solid #696969; border-radius: 0.3em 0.3em 0.3em 0.3em; background-color: #4286f4;}

body{
	margin-top:0.15em;
	background-color:#FFFFFF;
	font-family: arial,verdana, sans-serif;
	font-size:100%;
	text-align: center;/*annars funkar inte centrering av elementen i IE med margin-left:auto; margin-right:auto;*/
}


img, iframe { border: 0; }
#menuheaderContainer{
	width: 100%;
	position: fixed;
	top: 0px; margin: 0 auto;z-index:2; /*obs!! keboard har z-index:3 detta får inte vara högre*/
	}
#menuheader {
	  top: 0.1em;
	  width:1000px; margin: 0 auto; 
	}

/************ navigation menue adminmenyn under sökfältet *******************/
	#navigation {
		color:#4286f4; /*background: url("") repeat-x;*/
		font-size: .9em;
		margin-top: 0em;
		padding-top: 0em;
		width:1000px;
		margin:0 auto;

		position: relative; top: -5px;
	}
	#navigation ul, #navigation ul li {
		list-style: none;
		margin: 0px;
		padding: 0px;
	}
	#navigation ul {
		padding: 5px 0px;
		text-align: center;
	}
	#navigation ul li {
		display:inline;
		margin-left: -3px;
	}
	#navigation ul li.last {
		margin-right: 0px;
	}
	#navigation ul li a {
		/*background: url("../images/adminimages/tab-right.png") no-repeat 100% 0;*/
		color: #4286f4;
		background-color: white;
		padding: 5px 0px;
		text-decoration: none;
		/*Border för meny flikarna länkarna under blåa rutan*/
		border-style: solid; border-color: #e0dcdb;
		border-width: 1px; border-top-width: 0px;
		border-radius : 0em 0em 0.5em 0.5em;
		}
	#navigation ul li a span {
		/*background: url("../images/adminimages/tab-left.png") no-repeat;*/
		padding: 5px 7px;/*padding: 5px 1em;*/
	}
	#navigation ul li a:visited span {
		color: #4286f4;
		text-decoration:none;
		font-size: 0.9em;
		border-style: solid; border-color: #dbd7d6;
		border-width: 1px; border-top-width: 0px;
		border-radius : 0em 0em 0.5em 0.5em;
	}
	#navigation ul li a:hover span {
		color: white;
		text-decoration:none;
		background-color: #4286f4;
		border-style: solid; border-color: #4286f4;
		border-width: 1px; border-top-width: 0px;
		border-radius : 0em 0em 0.5em 0.5em;
	}
	#navigation ul li a:active span {
		color: blue;
		text-decoration: overline, overline;
		border-style: solid; border-color: #eeeeee;
		border-width: 1px; border-top-width: 0px;
		border-radius : 0em 0em 0.5em 0.5em;
	}
	* html #navigation ul li a {
		padding: 0px;
	}
	/************************************************************/

/********** för toggle blocken/ordblocken  *****************/
.accordion #trigger{
	width:1000px; 
	position:relative; top:190px; margin:0 auto; right:-7px;
	cursor: pointer;
	text-align:left;
	background-color:#e8e4e3; 
}

.accordion #trigger.active {
	width:1000px; 
	position:relative; top:190px; margin:0 auto; right:-7px;
	background-color:#e8e4e3; 
	text-align:left;
}
.accordion #trigger:hover {
	width:1000px; 
	position:relative; top:190px; margin:0 auto; right:-7px;
	background-color:#e0dcdb; 
	text-align:left;
}
#trigger label{font-size:0.7em; color:#6d9ff2; padding-left: 4px;} 

/*****************End för toggle blocken/ordblocken*******************/	
.scrollup {
	max-width: 100%;
	height: auto;
	position: fixed;
	bottom: 22px;
	right: 5%;
	text-decoration: none;
	display: inline-block;
	z-index:200;
}
#scrollupImg{
	max-width: 85%;
  	height: auto;
	border: none;
}
	
#langRubrik, #langRubrikContainer{width:1000px;}
#postContainer{ 
	width:1000px; position:relative; top:191px; right:-7px; /*placering f�rsta posten*/
  	margin:0 auto;
	border: 1px solid #D8D8D8;
	border-radius: 3px;
	background-color:#FFFFFF;
}
#radioWidget{position: relative; top: 0px;}

/***************radio knapparna*******************/		
/* The container */
.radioContainer{
    display: inline-block;
    position: relative; left: 4px; top: 0px;
    padding-left: 23px;
    margin-bottom: -2px;
    cursor: pointer;
    font-size: .8em;
    -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;
}
/*********************Radioknapparna**********************/

/*taggen finns i filen getword.cgi*/
.wordsfound{
	position: fixed; left: 46%; top:7px; color: white;
	font-size:0.8em;
	z-index:2;
	}
	
/*ovanf�r svarta rubriken, d�r progressbar �r placerad*/
.progbar{
	width:48px; height:48px; /*som bildstorleken ifall bilden saknas*/
	border:0; border-collapse: collapse;
	z-index:2;
	margin-left:auto; margin-right:auto;
}
.progbar img{
	width: 42px; height: 42px; position: relative; left:-100px; top: 0px; overflow: hidden;
}

/* Hela stora svarta omr�det*/
.seekarea{
	border:none;
	position:relative; top:0px;
	width:100%; height: 150px;
	z-index:1;
	margin:0px auto;/*centrera elementet*/
	background-color: #4286f4;
	border-radius: 3px;
}

/* stora svarta rubriken hogst upp, sj�lva raden <tr> i blackTitle */
.tablehead{
	vertical-align:middle;
	text-align:left;
	background-color: #4286f4;
	color:#FFFFFF;
	font-size:0.85em;
	padding-left:0.04em;/*4px*/
	padding-right:0.04em;
}
.tableheadRight{text-align: right; padding: 5px; overflow: hidden;}

.testMessage{
	width:370px;
	font-size: 0.9em; font-weight: bold; color:yellow; 
	position: relative; top: -16px; display:table-cell; text-align: right;
	direction:ltr; z-index: 200;
}
.dbNam{
	width:370px;
	font-size: 0.8em; font-weight: bold; color:yellow; text-align: left;
	position: relative; top: -16px; display:inline;
	z-index: 200;
}
/* Svarta s�krutan under svarta rubriken */
.seektable{
	position:relative; top:-8px; left:0px;
	background-color: #4286f4;
	padding-left:5px;
	padding-right:5px;
	z-index: 0;
}

.headtext{/*"�versta silver rubriken*/
	position:relative; top:-0.4em;
	color: #ababab;
	text-shadow: 0px 1px 0px #fff;
}
.feedback{
	font-weight: bold;color:white; vertical-align:middle;
}

.radiobutton{
	text-align:right;
	color:#FFFFFF;
	font-size:0.08em;
}
div.buttonimg img{
	display: inline;
	vertical-align:middle; position:relative; left:-4px; top:0px;
	border: 0px;
}

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

/* De olika blocken posterna*/
.btable { 
	width:100%;
 	border:0px; border-collapse: collapse;
}

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

.tr{
	font-size:0.9em;
	word-wrap: break-word;/*ta inte bort detta*/
	text-align:left;
	padding-left:7px; 
	}


label{
	color:#FFFFFF;
	font-size:0.8em;
}

.keyboardInputInitiator {
	/* display: table; */
	float: left;
	vertical-align: middle;
	cursor: pointer;
	position: relative;
	left: -474px;
	top: 10px;
	width: 36px;
	height: 30px;
	z-index: 2000;
}

.keyboardInputInitiator:hover{
	float:left;
	vertical-align:middle;  
	cursor:pointer;
	position:relative; left:-473px; top:12px;
	width: 36px;height:30px;
}

.keyboardInput,#sy{/*#sy for admin ta inte bort*/
	width:480px; height:30px;
	position:relative; left:0px; top:10px;
	display: table;
	direction:rtl;
	color:#fff;
	text-align:center;
	background-color:#4286f4; /*#717171;*/
	font-size:1.3em;
	font-weight:bold;
	float:left;		
	border: 0;
	border-bottom: 2px solid #fd8521;
	outline: none;
	overflow: hidden;
	border-radius: 25px;
}


#searchbtn{
	font-size:75%; color:white;
	display: table;
	position:relative; left:-90px; top:7px;
	background-color:#4286f4;/*#717171;*/
	height:32px;
	border: 0px;
	border-radius: 25px; 
	z-index: 2000;
}
#searchbtn:hover{
	font-size:75%;
	display: table;
	position:relative; left:-89px; top:9px;
	height:32px;
	background-color:#71a4f7;/*#cccccc;*/
	border-radius: 25px;
}

#selectdiv{position:relative; top:40px;right:0px;}

select,#fontselect, #fontselect-button{
	width:7em; 
	font-size:90%;
	color:white;
	height:20px;
	font-size:1.0em;
	background-color:#4286f4;
	border: 0;
	border-bottom: 2px solid #fd8521;
	border-radius: 25px;
}

/*** formatering av inputfältet baserat på imatning finns i autocomplete.js */
/* .syriac-input finns i de olika syriska css:erna för att styra fonten */
.arabic-input{
	/* max-height: 26px; */
	font-size:105%;
	font-family: "KacstOne;";
	/*text-align: right;*/
	direction: rtl;
}
/* Styles for Latin Input (English/Swedish) */
.latin-input {
    /* Left-to-Right alignment is default but good to specify */
    direction: ltr; 
    /* text-align: left; */
    /* Use a standard Latin font */
    font-family: 'Helvetica Neue', Arial, sans-serif;
   /* color: #333333; /* Example: Dark gray/black */
}

/******************* autocomplete 2025-10-01 *********************/
/* autocomplete listan */
#autocomplete-list {
	/*border: 1px solid #ccc;
	border-top: none;*/
	/* max-width: 100%; Make it match the width of the input field */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* Optional: Adds a nice shadow */
	
	line-height: 1.7em;
	max-height: 500px;
	width: 350px;
	overflow-y: auto;
	position: absolute; /* relative will push down the element beneath it */
	top:80px;
	left: 60px;
	z-index: 999; /* virt.t-bordet är 3*/
	background-color: white;
	padding-right: 4px; 
	padding-left: 4px;
	cursor: pointer;
}
/* This class only applies the border when the list has content */
#autocomplete-list.has-suggestions {
   	border-bottom: 1px solid #ccc !important; 
	border-left: 1px solid #ccc  !important;
	border-right: 1px solid #ccc  !important;	
	border-radius: 0 0 0 1.5em; /* Rounded corners at the bottom */
}
 
/* Syriska autocomplete listan */
.syr_autocomplete-item{
	text-align: right;
	direction: rtl;
	padding-top: 5px;
	/* lägg iingen padding-right här, det görs i chrome.css */ 
}
.ara_autocomplete-item{
	text-align: right;
	direction: rtl;
	padding-top: 5px;
	/* lägg iingen padding-right här, det görs i chrome.css */ 
}
/* för engelska och svenska fortmatering av autocomplete listan*/
.lat_autocomplete-item{
	direction: ltr;
	text-align: left;
	padding-top: 5px;
	/* lägg iingen padding-right här, det görs i chrome.css */ 
}
/* Style for every individual suggestion item */
.autocomplete-item {
    padding: 8px 10px;
    cursor: pointer; /* Show it's clickable */
    font-family: sans-serif; /* Use a readable font */
    color: #333;
    transition: background-color 0.2s; /* Smooth hover transition */
}

/* Highlight the even-numbered items (2nd, 4th, 6th, etc.) with light gray */
.autocomplete-item:nth-child(even) {
    background-color: #f0f0f0; /* Very light gray */
}

/* Ensure odd-numbered items (1st, 3rd, 5th, etc.) are explicitly white */
.autocomplete-item:nth-child(odd) {
    background-color: #ffffff; /* White */
}

/* Style when the user hovers over an item */
.autocomplete-item:hover {
    background-color: #e2e2e2 !important; /* Slightly darker hover color */
    color: #000;
}

/* Style for the selected item (navigated via keyboard) */
 .autocomplete-item.selected {
    background-color: #eee; /* Highlight color */
    outline: 2px solid #007bff; /* Visual focus indicator */
}

/* Style for the hint icon */
 .nav-hint-icon {
    /*margin-left: 60%;*/
	font-size: 0.8em;
    color: #007bff; /* Use a noticeable color */
    opacity: 0; /* Start hidden */
}

/* 1. Define the blinking keyframes (fading in and out) */
 @keyframes blink-animation {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
} 

/* 2. Apply the animation to the hint element */
.blink-three-times {
    /* 0.5s duration * 8 steps (4 blinks) = 4 seconds total */
    animation: blink-animation 0.5s ease-in-out 8;
    /* The 8 here means it repeats 8 times (4 full blinks) */
 	animation-fill-mode: forwards; /* Keep the last state (opacity 1) */
}

.autocomplete-error {
	color: rgb(255, 91, 25);
	text-align: center;
	margin: 0%;
	/* border: 3px solid rgb(245, 90, 90);
	border-radius: 0 1.5em 1.5em 0; */
}
/************************************ autocomplete *********************/

.sy,.syt,.ar,.art{
	width:2%;
	text-align:right;
	vertical-align: top;
	direction:rtl;
	
}

.en,.sv,.ent,.svt{padding: 5px; vertical-align: top;}

.ar,.sy,.syt{
	width:25%; 
	word-break: normal;
	-ms-hyphens: auto;
      hyphens: auto;
}
.svt,.en,.sv,.ent{text-align: left;}
.svt,.ent,.art {font-size: .85em;}

/*jämnare radavstånd i textfälten*/
.ent,.svt{line-height: 1.4em;} 
.art{line-height: 1.6em;}

/* highligt sökbegrepp i resultat*/
#highlight {
	border-bottom:solid;
	border-bottom-width:1.5px;
	border-bottom-color:#fd8521;
	}

/* highligt &nbsp; i resultat, taggen kommer fr getword*/
#highlightSpace {
	border-bottom:solid;
	border-bottom-width:2px;
	border-bottom-color:red;
}

.footer{
	margin: 0 auto;
	max-width:1000px;
	text-align:center;
	height:20px;
	color:#5e5d5c;
	font-size:0.7em;
	font-weight:bold;
	vertical-align:middle;
}

/*slogan i sidfoten */
.slogan{
	margin: 0 auto;
	max-width: 1000px;
	text-align:center;
	position:relative;top:200px; left: 7px;
	padding-top: 10px; padding-bottom: 10px;
	font-size:1.1em;
	font-weight:bold;
	color:#5e5d5c; background-color: #e0dcdb;
	border-radius: 7px;
}


.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 syrdiclib o används i getword.cgi*/
.message, .adminMessage{
	width:470px;
	color:#476B6B;
	background-color:#FFFFCC;
	text-align:center;
	font-size:1.2em;
	font-weight:bold;
	margin-left:auto; margin-right:auto;
	position: relative; top:3px;
	border: 2px solid #fd8521;
	/*Ronded corner */
	border-radius: 5px;
	padding-top: 10px; padding-bottom: 10px;
	}
	
.adminMessage{
	position: relative; top:190px;
	padding: 5px;
	min-height: 130px;
}
/* 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:4%; border: 0;
	background-repeat: no-repeat;
}
	
/* formaterar medd. till gamla browsrar */
/*************** i all.js **************/
.browserTestMessage{
	width:700px;
	background:url(../images/warning.png);
	background-repeat: no-repeat;
	/*background-position: 25% 0;*/
	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;
	}