﻿html, body, form{ font-size: 0.93em;    font-family:psysopensans;	color: #000;	margin: 0;	padding: 0;	height: 100%; font-weight:lighter; }
th, td{	padding: 3px; border-collapse:collapse;}
table{ border-collapse:collapse;}
td.absolutemiddle {
    text-align: center; /* Horizontal centering */
    vertical-align: middle; /* Vertical centering */
}

table#idstaffdir tr td div.rowOption{filter:alpha(opacity=100);opacity:0;-webkit-transition:all .1s ease-out;-moz-transition:all .1s ease-out;-o-transition:all .1s ease-out;transition:all .1s ease-out;}
table#idstaffdir tr:hover td div.rowOption{filter:alpha(opacity=100);opacity:1;-webkit-transition:all .1s ease-out;-moz-transition:all .1s ease-out;-o-transition:all .1s ease-out;transition:all .1s ease-out;}

table#idcodetails tr td div.rowOption{filter:alpha(opacity=100);opacity:0;-webkit-transition:all .1s ease-out;-moz-transition:all .1s ease-out;-o-transition:all .1s ease-out;transition:all .1s ease-out;}
table#idcodetails tr:hover td div.rowOption{filter:alpha(opacity=100);opacity:1;-webkit-transition:all .1s ease-out;-moz-transition:all .1s ease-out;-o-transition:all .1s ease-out;transition:all .1s ease-out;}

table tr td div.rowOption{filter:alpha(opacity=100);opacity:0;-webkit-transition:all .1s ease-out;-moz-transition:all .1s ease-out;-o-transition:all .1s ease-out;transition:all .1s ease-out;}
table tr:hover td div.rowOption{filter:alpha(opacity=100);opacity:1;-webkit-transition:all .1s ease-out;-moz-transition:all .1s ease-out;-o-transition:all .1s ease-out;transition:all .1s ease-out;background-image: linear-gradient(to left, #dcdcdc, #dcdcdc,  #ebebeb, transparent) }

a.main_w{text-decoration:none;color:#fff;}
    a.main_w:hover, a.main:visited:hover {text-decoration:none;color:#ccc;}
    a.main_w{text-decoration:none;color:#fff;}
a.main_b{text-decoration:none;color:#000;}
    a.main_b:hover {text-decoration:none;font-weight:bold;}
    a.main_b{text-decoration:none;color:#000;}

hr.seperator { border: 2px dashed #ccc;   margin: 5px 0 5px 0;}
hr.dotted5 { border: 1px dotted #ccc;   margin: 5px 0 5px 0;}
hr.dotted15 { border: 1px dotted #ccc;   margin: 15px 0 15px 0;}


div.lbl {padding:3px 0 2px 0;}
div.field{ outline: none;	padding:8px;	-moz-border-radius: 2px;	-webkit-border-radius: 2px;	border-radius: 2px;	color: #000;	background: #fff;	border: 1px solid #ccc;	 box-shadow: 0 5px 7px rgba(0, 0, 0, 0.2);    -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}

.info_ul li {float:left; padding: 5px; font-weight: lighter; text-align: justify; word-wrap:break-word;}
.info_ol li {float:left; margin:-13px 0 0 0; padding:0 25px 0 0; font-weight: lighter; text-align: justify;}
.notice_ul { padding-left: 32px;}
.notice_ul li {padding: 5px 5px 10px 5px;  line-height: 1.5; font-weight: bold; text-align: justify; word-wrap:break-word; border-bottom:1px dotted #000;}
.notice_ul li:hover {font-weight: lighter; }

.filterbox {	outline: none;	-moz-border-radius: 2px;	-webkit-border-radius: 2px;	border-radius: 2px;	color: #000;	background: #fff;	border: 1px solid #ccc;	 box-shadow: 0 5px 7px rgba(0, 0, 0, 0.2);  }

input, textarea{ outline: none;	padding:8px;	-moz-border-radius: 2px;	-webkit-border-radius: 2px;	border-radius: 2px;	color: #000;	background: #fff;	border: 1px solid #ccc;	 box-shadow: 0 5px 7px rgba(0, 0, 0, 0.2);    -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}
input.txtfilter { outline: none;	padding:8px; vertical-align:middle;	-moz-border-radius-bottomleft: 2px;	-webkit-border-bottom-left-radius: 2px;	border-bottom-left-radius: 2px; -moz-border-radius-topleft: 2px;	-webkit-border-top-left-radius: 2px;	border-top-left-radius: 2px;	color: #000;	background: #fff;	border: 1px solid #ccc; border-right:0;	 box-shadow: 0 5px 7px rgba(0, 0, 0, 0.2);    -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}
input.txtsearch { outline: none;	padding:8px; vertical-align:middle;	-moz-border-radius-bottomleft: 2px;	-webkit-border-bottom-left-radius: 2px;	border-bottom-left-radius: 2px; -moz-border-radius-topleft: 2px;	-webkit-border-top-left-radius: 2px;	border-top-left-radius: 2px;	color: #000;	background: #fff;	border: 1px solid #ccc; border-right:0;	 box-shadow: 0 5px 7px rgba(0, 0, 0, 0.2);    -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}
input.txtsfilter { outline: none;	padding:8px; vertical-align:middle;	color: #000;	background: #fff;	border: 0; border-right:0;	 box-shadow: 0 0 0 rgba(0, 0, 0, 0.2);   -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; background: url(../img/filter.png) no-repeat left+3px center; text-indent:20px; display:inline-table; }

input.invalid, textarea.invalid{	outline: none;	color: #000;	background: #efe0e0;	border: 1px solid #ff0000;	}
img.invalid{	outline: none;	color: #000;	background: #efe0e0;	border: 1px solid #ff0000;	-webkit-box-shadow: 0 5px 7px rgba(0, 0, 0, 0.2);	box-shadow: 0 5px 7px rgba(0, 0, 0, 0.2);    -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}
select.invalid{	color: #000;	background: #efe0e0;	border: 1px solid #ff0000;		}



select{	font-size: 1em;	position: relative;	outline: none;	padding: 8px;	-moz-border-radius: 0;	-webkit-border-radius: 0;	border-radius: 0;	color: #000;	background: #fff;	border: 1px solid #ccc;	 box-shadow: 0 5px 7px rgba(0, 0, 0, 0.2);    -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;	}
input[type="image"], input[type="checkbox"], input[type="radio"]{	width: auto;	border: 0;	padding: 0;	-moz-box-shadow: none !important;	-webkit-box-shadow: none !important;	box-shadow: none !important;}
pre { white-space: pre-wrap;}
.widthwithbtn{width:calc(100% - 35px);}
.multilinewidth{width:calc(100vw - 20vw);}

.bordererror{border: 1px solid #ff0000; background: rgba(241, 159, 159, 0.60);}

#editorarea_lbl{height: calc(100vh - 175px); overflow-y:auto;}
#editorarea_txt{height: 100vh; overflow-y:auto;}
#aspirationeditor{height: calc(100vh - 300px);}
#mobilityeditor{height: calc(100vh - 380px);}
#deliverableeditor{height: calc(100vh - 410px);}
#resultseditor{height: calc(100vh - 410px);}

/* Style the suggestions dropdown */
#suggestions { border: 1px solid #ccc; border-top: none; /* Remove top border to connect with the input box */  max-height: 150px;  overflow-y: auto;  position: absolute;    min-width: 100%; /* Match the input box width */  background-color: white; z-index: 1000; /* Ensure it appears above other elements */}
    /* Style each suggestion */
    #suggestions div { padding: 8px; cursor: pointer;  }
        /* Highlight suggestion on hover */
        #suggestions div:hover { background-color: #f0f0f0; }

/* Style the suggestions dropdown */
.dropsuggestions { border: 1px solid #ccc; border-top: none; /* Remove top border to connect with the input box */  max-height: 150px;  overflow-y: auto;  position: absolute;    min-width: 100%; /* Match the input box width */  background-color: white; z-index: 1000; /* Ensure it appears above other elements */}
    /* Style each suggestion */
    .dropsuggestions div { padding: 8px; cursor: pointer;  }
        /* Highlight suggestion on hover */
        .dropsuggestions div:hover { background-color: #f0f0f0; }