

html, body {
	margin:0;
	padding:0;
	width: 100%;
	height: 100%;
}

body,th,td,select,checkbox,input,button,font, textarea {
   font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12pt;
}

a:hover {
   text-decoration: none;	
}

input, select, textarea {
   border: 1px solid #aaa;
	padding: 0.5em;
}

#bdShowID input {
	padding: 0.1em;
}

#frMain {
   width:100%; 
	height: calc( 100% - 4px );
	xheight: 100%;
xmin-height: 800px;
	margin: 0; 
	padding: 0;
xborder: 1px solid lime;
}

.dvOuter {
	width: 96%;
	max-width: 1200px;
	margin: 0px auto;
	padding-top: 8px;
	text-align: center;
}

.dvOuterInner {
	xdisplay: inline-block;
	border: 1px solid #ccc;
	xbackground-color: #f4f4f4;
	background-color: #f8f8f8;
	xbackground-color: #fff;
	xbox-shadow: 0px 0px 16px rgba( 0,0,0, 0.5 );
	overflow: hidden;
	text-align: left;
}

.linHorz {
   height: 1px;
	max-height: 1px;
	border-top: 1px solid #ccc;
	xbackground-color: #f4f4f4;
}

.linHorzOut {
   height: 1px;
	border-top: 1px solid #ccc;
	margin-left: -1em;
	margin-right: -1em;
}

.brd {
   xdisplay: inline-block;
	xborder: 1px solid #eee;
	xborder-radius: 8px;
	xwidth: 96%;
	xmax-width: 800px;
	padding: 1em;
	
}

.brdShadow {
	box-shadow: 0px 0px 16px rgba( 0,0,0, 0.5 );
}

.brdInline {
   display: inline-block;
	padding: 1em;	
}

.brdMain {
	xbackground-color: #f4f4f4;
	xbackground-color: rgba( 244, 244, 244, 0.8 );
	xbox-shadow: 0px 0px 16px rgba( 0,0,0, 0.5 );
}

.brdHelp {
   xdisplay: inline-block;
	border: 1px solid #00f;
	
}

.brdHeader {
	xdisplay: inline-block;
	xborder: 1px solid #f0f;
	zbackground-color: #0095DC;
	background-color: #009DE0;
	background-image: url('/image?filename=top.jpg');
	background-repeat: no-repeat; 
	background-position: 100% 0; 
	background-size: auto 100% ;
	xpadding: 8px;
	padding: 1em;
	xbox-shadow: 0px 0px 16px rgba( 0,0,0, 0.5 );
}

.brdHeader #admin {
	text-shadow: 1px 1px 0px #009DE0;
}

#tombudfor {
	xtext-shadow: 0px 0px 1px #000;
}

.brdOmbud {
	xbackground-color: #ffc080;
	background-color: #D1EBFF;
	padding: 1em;
}

.brdOmbudSelection {
   background-color: #fff;
	padding: 1em;
	xborder: 1px solid #f0f;
	padding: 0.2em !important;
	xborder-radius: 1em;
	box-shadow: 0px 0px 16px rgba( 0,0,0, 0.5 );
}

.brdArea {
   background-color: #fff;
	padding: 0.5em;
	border: 1px solid #ccc;
	xpadding: 0.2em !important;
	xborder-radius: 1em;
	box-shadow: 0px 0px 16px rgba( 0,0,0, 0.5 );
}

.brdAreaApprove {
	border-color: #0f0;
	background-color: #cfc;
}

.brdAreaReject {
	border-color: #f00;
	background-color: #fcc;
}

.lineArea {
   height:1px;
	border-top: 1px solid #333;
	margin-left: -8px;
	margin-right: -8px;
}

.brdAreaApprove .lineArea {
	border-color: #0f0;
}

.brdAreaReject .lineArea {
	border-color: #f00;
}

.brdSearch {
	xbackground-color: #ffc080;
	background-color: #D1EBFF;
	padding: 1em;
}

.brdSearchResult {
	background-color: #f0f0f0;
	padding: 1em;
	border: 1px solid #ccc;
	box-shadow: 0px 0px 16px rgba( 0,0,0, 0.5 );
}

.intxSSG {
   float:left; 
	width: calc( 100% - 6em );
}

.btSSG {
	float:right;
	xposition: absolute;
	xmargin-left: 0.2em;
   width: 4.6em;
	height: 2.3em;
}

.brdSSG {
	xbackground-color: #D76229;
	background-color: #fff;
	border: 1px solid #D76229;
	padding: 1em;
}

.brdSSGTitle {
	background-color: #D76229;
	color: #fff;
	margin-top: -1em;
	margin-left: -1em;
	margin-right: -1em;
	padding: 1em;
}

.brdSSG input {
	width: 400px;
}

.lineSSG  {
	border-bottom: 1px solid #D76229;
	margin-left: calc( -1em - 4px );
	margin-right: calc( -1em - 4px );
	margin-top: 0.5em;
	margin-bottom: 0.5em;
}

.dvSSGQualifications {
   border: 1px solid #AAA;
   padding: 0.5 em;	
}

.tbSSGQualifications {
	xbackground-color: #fff;
}

.tbSSGQualifications .trHD {
	background-color: #AAA;
}

.tbSSGQualifications .trDT {
	xbackground-color: #fff;
}

.brdCalendarOuter {
	background-color: #afcdff;
	box-shadow: 0px 0px 16px rgba( 0,0,0, 0.5 );
	xdisplay: inline-block;
	margin-left: 10px;
}

.brdCalendarOuterInner {
	background-color: #afcdff;
	padding: 0.5em;
}

.brdCalendar {
	border: 1px solid #e8e8e8;
	background-color: #fff;
}

.brdCalendarMonth {
	border: 1px solid #e8e8e8;
	background-color: #fff;
}

.brdCalendarDate {
	border: 1px solid #e8e8e8;
	background-color: #fff;
	cursor: pointer;
	padding: 0.2em;
}

.brdCalendarDate:hover {
	background-color: #cdf;
}

.brdCalendarDateSelected {
	background-color: #7f9dff;
   xcol: #808080;
}

.brdCalendarDateToday {
	background-color: #e8e8e8;
}

.brdMessage {
   background-color: #ffffdd;	
}

.brdHelpOuter {
   background-color: #ffffdd;	
	box-shadow: 0px 0px 32px rgba( 0,0,0, 0.5 );
}

.brdHelp {
   background-color: #ffffee;	
	padding: 0;
}

.brdInfo {
   background-color: #fff;	
}

.brdBorder_Black {
   border: 1px solid;	
   border-color: #000;
}

.brdAdminSub {
	xbackground-color: #fff;
}

.brdAdminSubSub {
	background-color: #fff;	
	padding: 0.5em;
	margin: 0.5em;
   border: 1px solid #ccc;	
}

.brdAdminSubSubTitle {
	background-color: #eee;	
	border-bottom: 1px solid #ccc;
	xdisplay: block;
	margin: -0.5em;
	margin-bottom: 0.5em;
	padding: 0.5em;
	padding-top: 0.25em;
	padding-bottom: 0.25em;
}

.brdAdminSubSetting {
	background-color: #afcdff;
	box-shadow: 0px 0px 16px rgba( 0,0,0, 0.5 );
}

.brdAdminSubSettingInner {
	xpadding: 0.5em;
	padding: 0;
}

.brdAdminSubSub input[type=text] {
	width: calc( 100% - 1em );
}

.brdAdminSetting {
	background-color: #e8e8e8;
	padding: 0;
	height: 100%;
	box-shadow: 0px 0px 32px rgba( 0,0,0, 0.5 );
}

.brdAdmin {
	background-color: #aaaaff;
	xbox-shadow: 0px 0px 32px rgba( 0,0,0, 0.5 );
}

.brdAdminPopup {
	background-color: #aaaaff;
	margin: -0.5em;
	box-shadow: 0px 0px 32px rgba( 0,0,0, 0.5 );
}

.brdAdminPopup input[type=text] {
	width: calc( 100% - 1em );
}

.DivNoClick {
  xposition: absolute;
  xleft: 0px;
  xtop: 0px;
  xz-index: 1001;
  xwidth: 100% !important;
  background-color: rgba( 255,255,255, 0.5 );
}

.Header1 {
   font-size: 200%;
   font-weight: bold;	
}

.startbtnset {
   float: left;
   padding-bottom: 0.5em;	
}

.btn {
   padding: 0.5em;
   background-image: url('/image?filename=bt3d60.png');
	background-repeat: no-repeat;
	background-size: 100% 100%;	
	background-color: #fff;
	border: 1px solid #ccc;
	xbackground-color: #20bDff;	
	cursor: pointer;
	min-width: 60px;
}

.btn:hover {
	background-color: #009De0;	
}

.btn:disabled:hover {
	background-color: #fff;
	cursor: default;
}

.clBlue {
   background-color: #009;	
}

.clGreen {
   background-color: #090;	
}

.clRed {
   background-color: #900;	
}

.fcWhite {
	color: #fff;
}


/* --------------- */

.tblHeader {
	border-radius: 0;
}

.tblFooter {
	border-radius: 0;
}

.tblInfoOuter {
	border-radius: 0;
	font-size: 8pt !important;
}

.infoLabel {
	font-size: 8pt !important;
}

.infoValue {
	font-size: 8pt !important;
}

.tblInfoHeader {
	border-radius: 0;
}

#dvInfo {
	border-radius: 0;
	width: 100%;
	height: 100%;
	xbackground-color: rgba( 255,0,0,0.5 );
}

#dvInfoInnerData {
	xbackground-color: rgba( 255,0,0,0.5 );
	max-height: 290px;
	overflow-y: auto;
}

#dvBokade {
	xbackground-color: #f00;
}

#dvBokadeList {
	float: left;
	xborder: 1px solid #0f0;
	padding: 0;
	margin-right: 8px;
	margin-bottom: 8px;
	xdisplay: none;
	width: calc( 65% - 8px );
	min-width: 420px;
	
}

#dvBokadeListInner {
   width: 100%;
	xborder: 1px solid #aaa;
	border-left: 1px solid #aaa;
	border-right: 1px solid #aaa;
}

#dvBokadeInfo {
	float: left;
	xborder: 1px solid #00f;
	xbackground-color: rgba(0,0,255,0.5);
	padding: 0;
	width: 35%;
	xmin-width: 300px;
	xheight: 360px;
	height: 446px;
	xheight: 26em;
}

#dvEditOuter {
	width: calc( 100% - 4px );
	text-align: center;
	xbackground-color: rgba( 0,0,255, 0.2 );
}

#dvEdit {
	xwidth: 100%;
	width: calc( 100% - 4px );
	max-width: 1000px;
	display: inline-block;
	xbackground-color: rgba( 255,0,0, 0.2 );
}

#dvEditFields {
	float: left;
	width: 60%;
	min-height: 100px;
	xbackground-color: rgba( 0,255,0, 0.2 );
}

.frinEdit {
   width: calc( 100% - 1em ) !important;	
}

.frseEdit {
   width: calc( 100% + 0.1em ) !important;	
}

.dvSearchItemContainerOuter {
	text-align: center;	
}

.dvSearchItemContainer {
	display: inline-block;
	margin: auto 0;
   xdisplay: inline-block;	
	xdisplay: table-cell;
	horizontal-align: middle;;
	xbackground-color: rgba( 0,255,0, 0.1 );
}

.dvSearchItem {
   float: left;
	xtext-align: center;
	xdisplay: table-cell;
	xvertical-align: center;
	xbackground-color: rgba( 255,0,0, 0.1 );
	height: 2.4em;
	margin-left: 0.25em;
	margin-right: 0.25em;
}

.dvSearchItemLH {
	line-height: 2.4em;
}

.dvSearchItem #search {
   width: calc( 100% - 1.2em );
}

#dvEditFieldsInner {
	xbackground-color: rgba( 255,0,0, 0.9 );
	width: 100%;
   xpadding: 1em;	
	
}

#dvEditFieldsx {
	float: left;
	xborder: 1px solid #0f0;
	padding: 0;
	margin-right: 8px;
	margin-bottom: 8px;
	xdisplay: none;
	width: calc( 65% - 8px );
	min-width: 420px;
	xbackground-color: red;
	
}

#dvEditNotes {
	float: left;
	width: 40%;
	min-height: 100px;
	xbackground-color: rgba( 0,255,0, 0.2 );
	text-align: left;
}

#dvEditNotesInner {
	xbackground-color: rgba( 0,255,0, 0.9 );
	height: 300px;
	width: calc( 100% - 2em );
   padding-left: 2em;		
}

#dvEditNotesInner textarea {
	padding: 0.5em;
	width: calc( 100% - 1em - 4px ) !important;
}

#dvEditNotesx {
	text-align: left;
	float: left;
	xborder: 1px solid #00f;
	padding: 0;
	width: 35%;
	xmin-width: 300px;
	height: 300px;
	xheight: 26em;
	xbackground-color: lime;
}

.infoNotes {
	width: calc( 100% - 13px );
	height: calc( 100% - 3px );
}

.edRnd {
	width: calc( 100% - 3.4em - 1px ) !important;	
}

.egRnd {
	position: absolute;
	margin-left: 0.2em;
   width: 2.3em;
	height: 2.3em;
}

.ClinentInfoTableBackground {
	xwidth: calc( 100% - 2px );
	width: 100%;
	height:100%;
	height: 240px;
	max-height: 240px;
	overflow:auto;
	overflowY:100%;
	xborder: 1px solid #ccc; 
	xborder-top: 0px;
}

/*#dvBokadeListInner #BokadeTableH td:nth-child(1) { background-color: red !important; width: 42px; max-width: 42px; text-align: center; }*/

.tblBooking td {
   font-size: 12pt !important;	
}

.tblBooking td:nth-child(1) { width: 16px; max-width: 16px; text-align: center; }
.tblBooking td:nth-child(2) { width: 170px; max-width: 170px; }
.tblBooking td:nth-child(3) { width: 130px; max-width: 130px; }
.tblBooking td:nth-child(4) { width: 120px; max-width: 120px; }

#bdBooking .tblBooking td:nth-child(1) { width: 16px; max-width: 16px; text-align: center; }
#bdBooking .tblBooking td:nth-child(2) { width: 150px; max-width: 150px; }
#bdBooking .tblBooking td:nth-child(3) { width: 110px; max-width: 110px; }
#bdBooking .tblBooking td:nth-child(4) { width: 100px; max-width: 100px; }
#bdBooking .tblBooking td:nth-child(5) { width: 100px; max-width: 100px; }

.tblBooking.tblInclArea td:nth-child(1) { width: 16px; max-width: 16px; text-align: center; }
.tblBooking.tblInclArea td:nth-child(2) { width: 170px; max-width: 170px; }
.tblBooking.tblInclArea td:nth-child(3) { width: 130px; max-width: 130px; }
.tblBooking.tblInclArea td:nth-child(4) { width: 120px; max-width: 120px; }
.tblBooking.tblInclArea td:nth-child(5) { width: 120px; max-width: 120px; }
.tblHeader.tblInclArea  td:nth-child(1) { background-color: #aaa !important; color: #fff; }
.tblHeader.tblInclArea  td:nth-child(2) { background-color: #aaa !important; color: #fff; }
.tblHeader.tblInclArea  td:nth-child(3) { background-color: #aaa !important; color: #fff; }
.tblHeader.tblInclArea  td:nth-child(4) { background-color: #aaa !important; color: #fff; }
.tblHeader.tblInclArea  td:nth-child(5) { background-color: #aaa !important; color: #fff; }
.tblHeader.tblInclArea  td:nth-child(6) { background-color: #aaa !important; color: #fff; }

#dvRecipients .tblHeader td {
   background-color: #aaa !important; 
	color: #fff !important;;
}

#dvRecipients .tblHeader td.tdSelected {
   background-color: #ccc !important; 
	color: #fff !important;;
}

/*
.tblBooking td:nth-child(1) { width: 10px; max-width: 10px; }
.tblBooking td:nth-child(2) { width: 116px; max-width: 116px; }
.tblBooking td:nth-child(3) { width: 79px; max-width: 79px; }
.tblBooking td:nth-child(4) { width: 79px; max-width: 79px; }
*/

#dvGroupName {
   position: absolute;
	padding: 16px;
	border: 1px solid #ccc;
	width: 300px;
	margin-left: -332px;
	margin-top: -130px;
	background-color: #fff;
	xbox-shadow: 0px 0px 16px #aaa;
}

#dvGroupName input {
	width: calc( 100% - 16px );
}

#dvGroupChangeAll {
   position: absolute;
	padding: 16px;
	border: 1px solid #ccc;
	width: 390px;
	margin-left: -422px;
	margin-top: -115px;
	background-color: #fff;
	xbox-shadow: 0px 0px 16px #aaa;
}

#dvDeleteTypeMain {
	display: inline-block; 
	padding: 0.25em; 
	background-color: #fff; 
	border: 1px solid #009De0;
	box-shadow: 0px 0px 16px #aaa;
}

.btselect {
   width: 65px;
}

.dvVarningIcon {
	width: 12px;
	height: 12px;
	border-radius: 8px;
	border: 2px solid #900;
	background-color: #fff;
	color: #900;
	font-size: 8pt;
	font-weight: bold;
	text-align: center;
	margin-left: 8px;
	margin-top: -2px;
}

.dvVarning {
	xdisplay: none;
	position: absolute;
	width: 200px;
	margin-left: -192px;
	height: 40px;
	border-radius: 8px;
	border: 2px solid #900;
	background-color: #900;
	color: #fff;
}

.dvVarning button {
	float:right;
}

@media screen and (max-width: 987px) {
   body,th,td,select,checkbox,input,button,font {
		font-size: 11pt; !important;
		xcolor: red;
		
	}
	
	.tblBooking td {
		font-size: 10pt !important;	
	}
	.tblBooking td:nth-child(1) { width: 12px; max-width: 12px; text-align: center; }
	.tblBooking td:nth-child(2) { width: 150px; max-width: 150px; }
	.tblBooking td:nth-child(3) { width: 110px; max-width: 110px; }
	.tblBooking td:nth-child(4) { width: 100px; max-width: 100px; }
	
	#tdLoginMain {
	   background-image: none;	
	}
}

@media screen and (max-width: 767px) {
   body,th,td,select,checkbox,input,button,font {
   font-size: 10pt;
		xcolor: red;
	}
	
	.tblBooking td {
		font-size: 12pt !important;	
	}

	.tblBooking td:nth-child(1) { width: 16px; max-width: 16px; text-align: center; }
	.tblBooking td:nth-child(2) { width: 170px; max-width: 170px; }
	.tblBooking td:nth-child(3) { width: 130px; max-width: 130px; }
	.tblBooking td:nth-child(4) { width: 120px; max-width: 120px; }
	
	#dvBokadeList, #dvBokadeInfo {
	   float: none;
		width: 100%;
	   min-width: 10px;
		margin-right: 0px;
	}
	
	#dvEditFields, #dvEditNotes {
		float: none;
		width: 100%;
	}
	
	#dvEditFields {
		padding-bottom: 10px;
	}
	
	#dvEditNotesInner {
	   width: 100%;
      padding-left: 0;	
	}
	
	#dvEditFieldsInner table {
	   width: 100%;	
	}
	
	.brdCalendarOuter {
		margin-left: -300px;
	}
	
	.dvSearchItemContainer {
	   display: block;
		text-align: left;		
	}
	.dvSearchItem {
		float: none;
		width: 100%;
		xcolor: red;
		height: auto;
		xpadding-top: 1em;
	}
	.dvSearchItem:first-child {
		padding-bottom: 0.15em;
	}
	.dvSearchItem:last-child {
		padding-top: 0.5em;
	}
	.dvSearchItemLH {
		line-height: normal;
	}
	.dvSearchItem table {
		width: 100%;
	}
	
	
}

@media screen and (max-width: 600px) {
	.tblBooking td {
		font-size: 10pt !important;	
	}

	.tblBooking td:nth-child(1) { width: 12px; max-width: 12px; text-align: center; }
	.tblBooking td:nth-child(2) { width: 150px; max-width: 150px; }
	.tblBooking td:nth-child(3) { width: 110px; max-width: 110px; }
	.tblBooking td:nth-child(4) { width: 100px; max-width: 100px; }
}

@media screen and (max-width: 500px) {
	.tblBooking td {
		font-size: 8pt !important;	
	}

	.tblBooking td:nth-child(1) { width: 12px; max-width: 12px; text-align: center; }
	.tblBooking td:nth-child(2) { width: 116px; max-width: 116px; }
	.tblBooking td:nth-child(3) { width: 80px; max-width: 80px; }
	.tblBooking td:nth-child(4) { width: 80px; max-width: 80px; }
}
