/* Style for the unchangeable input field */
input[readonly] {
   background-color: #f0f0f0; /* Light gray background */
   color: black;              /* Dark gray text */
   border: 1px solid #ccc;   /* Border styling */
   cursor: not-allowed;      /* Show 'not-allowed' cursor on hover */
	width:95%;
	max-width:270px;

}


input:disabled, button:disabled, select:disabled, textarea:disabled {
      color: #666666; /* Slightly darker text color */

      border-color: #cccccc; /* Slightly darker border color */
      cursor: not-allowed; /* Change the cursor to indicate disabled state */
   }

h2 {
	font-family: inherit;
	font-size: 100%;
	font-weight: inherit;
	font-style: inherit;
	vertical-align: baseline;
	white-space: normal;
	text-align: left;
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	/*background: transparent; */
}



ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}

ul, li {
	text-align: left;
	margin: 0;
	padding: 0;

}



div	{
	margin:0;
	padding:0;
}


table {
	/*border-collapse: collapse;
	border-spacing: 0; */
	font-family: inherit;
	font-size: 100%;
	font-weight: inherit;
	font-style: inherit;
	vertical-align: baseline;
	white-space: normal;
	text-align: right;
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	background: transparent;

}




/*	MAIN CONTAINER Set the width to whatever you want the width of your site to be. */

.container {
	max-width: 960px;
	margin: 0px auto;
	background-color:#fff;
	border-radius: 0 0 10px 10px;
}

.kccontainer {
	max-width: 960px;
	margin: 20px auto;
	background-color:#fff;
	border-radius: 15px 15px 15px 15px;
-moz-border-radius: 15px 15px 15px 15px;
-webkit-border-radius: 15px 15px 15px 15px;

-webkit-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.48);
-moz-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.48);
box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.48);
}



/*	SELF CLEARING FLOATS - CLEARFIX METHOD */
.flexbox:after,
.container:after,
.kccontainer:after,
.row:after,
.col:after,
.clr:after,
.group:after {
	content: "";
	display: table;
	clear: both;
}



/* 	DEFAULT ROW STYLES
	Set bottom padding according to preference */
.row { 	padding-bottom: 0em; }

.fastrow	{background-color: white;}


/* DEFAULT COLUMN STYLES */
.col {
	display: block;
	float: left;
	width: 100%;
}

.clr:after {
	 content: "";
	 display: table;
	 clear: both;
}




/*	COLUMN WIDTH ON DISPLAYS +768px
	You might need to play with media queries here to suite your design. */
@media ( min-width : 768px ) {
	.span_4 { width: 33.3333333333%; }
	.span_6 { width: 50%; }
	.span_8 { width: 66.6666666667%; }
	.gutters .span_4 { width: 32.0%; }
	.gutters .span_6 { width: 49.0%; }
	.gutters .span_8 { width: 66.0%; }
	.gutters .col { margin-left: 2%;	}
	.gutters .col:first-child { margin-left: 0; }

}

/* end of responsive.gs.12col-work.css */


.c1 {font-family:arial;color:blue;}
.c2 {font-family:arial;;font-weight:italic;font-weight:bold;color:blue;}
.c3 {font-family:arial;color:black;}
.c4 {font-family:arial;;font-weight:italic;color:silver;}
.c5 {font-family:arial;font-weight:italic;color:red;}
.c6 {font-family:arial;font-weight:bold;color:black;}
.c9 {font-family:arial;font-weight:italic;color:blue;}
.c0 {font-family:arial;font-weight:italic;color:Light-Gray;}


   .col-50 {
       float: left;
       width: 50%;
       margin-top: 6px;
       background:inherit;
   }

   .col-111 {

       width: 100%;
       margin-top: 6px;

       background:inherit;
   }


   .col-100 {
       float: left;
       width: 100%;
       margin-top: 6px;
       text-align:center;
       background:inherit;
   }

   .col-15 {
       float: left;
       width: 15%;
       margin-top: 6px;
       text-align:right;
       background:inherit;
   }

   .col-35 {
       float: left;
       width: 35%;
       margin-top: 6px;
       text-align:right;
       background:inherit;
   }

   .col-20 {
       float: left;
       width: 20%;
       margin-top: 6px;
       text-align:right;
       background:inherit;
   }

   .col-60 {
       float: left;
       width: 60%;
       margin-top: 6px;
       background:inherit;
   }


p {margin: 0 0 15px 0;}
img {max-width: 100%;}
/*a {color:#4472B9; text-decoration:none; font-weight:700;}*/
a {color:blue; text-decoration:none; }
a.link {color:white; font-size:11px; text-decoration:underline; cursor:default;}
a.link:hover {color:white; font-size:11px; text-decoration:underline; cursor:pointer;}
a:hover {text-decoration: underline;}
.clear { clear:both;}
.alignright {text-align: right;}
.img-alignright {float:right; margin:15px 0 15px 15px;}
.img-100 {width:100%;}
.call-action {padding: 15px; text-align:center; font-weight:700; color:black; background-color:#698FC0; margin:45px auto; }
.required {color:#900;}
ul.content-list li { list-style:circle; list-style-position:inside; margin-left:25px; margin-bottom:10px;}


/*Table*/
.responstable {
  margin: 0 0 1em 0;
  width: 100%;
  overflow: hidden;
  background: #FFF;
  color: #024457;
  box-sizing:border-box;
}


.responstable tr:nth-child(odd) { background-color: #EAF3F3;}
.responstable th { border: 1px solid #626060; background-color: #333333; color: #FFF; padding: 1em; vertical-align: middle; text-align: center !important;  font-weight:700;}
.responstable th:first-child { display: table-cell; }
.responstable th:nth-child(2) {display: table-cell;}
.responstable th:nth-child(2) span {  display: none;}
.responstable th:nth-child(2):after { content: attr(data-th);}

.table-subheader { padding: 10px; text-align: center;
  background: rgba(111,111,111,1);
  background: -moz-linear-gradient(top, rgba(111,111,111,1) 0%, rgba(51,51,51,1) 100%);
  background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(111,111,111,1)), color-stop(100%, rgba(51,51,51,1)));
  background: -webkit-linear-gradient(top, rgba(111,111,111,1) 0%, rgba(51,51,51,1) 100%);
  background: -o-linear-gradient(top, rgba(111,111,111,1) 0%, rgba(51,51,51,1) 100%);
  background: -ms-linear-gradient(top, rgba(111,111,111,1) 0%, rgba(51,51,51,1) 100%);
  background: linear-gradient(to bottom, rgba(111,111,111,1) 0%, rgba(51,51,51,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6f6f6f', endColorstr='#333333', GradientType=0 );
  color: #FFF;  font-size: 16px;   font-weight: 700;
  }
.table-subheader h2 {text-align: center;}

/*Typography*/
h1.fastheader	{border: 0px #00103C solid;color: #00103C;}
/* h1, h2, h3, h4, h5 {font-family: 'Montserrat', sans-serif; font-weight:700;} */
h1 {font-size: 21px;  color: #00103C; font-weight:700; font-family: 'Montserrat', sans-serif; margin-bottom:25px; }
h1.homepage-title {color: #698FC0; margin: 20px 0 35px; text-align: center;}
h3.center {font-family: 'Montserrat', sans-serif; font-weight:700; text-align:center;}
h6  {font-family: 'Montserrat', sans-serif;  color:gray; font-size: 9px; }
h7  {font-family: 'Montserrat', sans-serif;  color:black; font-size: 21px; font-weight:700;}
h8  {font-family: 'Montserrat', sans-serif;  color:black; font-size: 16px; font-weight:700; }
h9  {font-family: 'Montserrat', sans-serif;  color:#fff; font-size: 12px; font-weight:700;}
/* h3	{ */
	/* text-align:center; */
	/* background-color:#CCC; */
	/* color:black; */
	/* padding:4px; */
/* } */


.boxed {  padding: 10px;  text-align: center;
  background: rgba(111,111,111,1);
  background: -moz-linear-gradient(top, rgba(111,111,111,1) 0%, rgba(51,51,51,1) 100%);
  background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(111,111,111,1)), color-stop(100%, rgba(51,51,51,1)));
  background: -webkit-linear-gradient(top, rgba(111,111,111,1) 0%, rgba(51,51,51,1) 100%);
  background: -o-linear-gradient(top, rgba(111,111,111,1) 0%, rgba(51,51,51,1) 100%);
  background: -ms-linear-gradient(top, rgba(111,111,111,1) 0%, rgba(51,51,51,1) 100%);
  background: linear-gradient(to bottom, rgba(111,111,111,1) 0%, rgba(51,51,51,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6f6f6f', endColorstr='#333333', GradientType=0 );
  color: #FFF; font-size: 14px;  font-weight: 700;  border-radius: 10px 10px 0px 0px;  -moz-border-radius: 10px 10px 0px 0px;  -webkit-border-radius: 10px 10px 0px 0px;  min-height: 58px; 	}
.grey-text-bg {  padding: 10px  13px; background-color:#f7f7f7;}
.grey-text-bg p {text-align: justify;  }
.flexbox .col {margin-bottom: 20px;}


body {
	font-family: sans-serif;
	color: #666;
	background-color:#ccc;
	padding:15px 0px 15px 0px;
	font-size:15px;
	font-family: "Helvetica Neue",Helvetica,Arial,sans-serif
}

/*	LAYOUT */
/* body 	{
	margin: 0;
	padding: 0;
	font-family: Trebuchet MS;
	font-size: 0.8em;
	color:#00103C;
	background-color: white;

}*/


main {padding: 20px 50px 50px !important;}
header { text-align: center;    background-repeat: no-repeat; background-repeat: no-repeat; background-position: right 6px; padding: 20px 25px; min-height:150px; position:relative;}
.logo {margin-top: 15px;}
.logo-text { font-family: Georgia, "Times New Roman", Times, serif; font-style: italic; color: black; font-size: 14px;}


.live-chat {max-width: 160px; max-height:60px; position:absolute;    top: 60px;  right: 25px;}

.menu-container {background-color:#00103C; margin-top:25px; }
ul.feature-list li { list-style:inside; color:#fff; font-size: 14px; line-height:25px;  font-family: 'Montserrat', sans-serif;}

.full-width {margin: 15px -50px; padding:15px 50px; background-color:white}
.full-width ul li { list-style:circle; list-style-position:inside; margin-left:25px; margin-bottom:10px;}


/*Menu*/
#navigation { height: 45px; font-family: 'Montserrat', sans-serif; font-weight: 700;  background:#263357; position:relative; max-width: 910px; }
#navigation ul { list-style: none; list-style-position: outside; }
#navigation ul li { float: left; padding-right: 2px; line-height: 45px;  font-size: 13px; }
#navigation ul li a { display: block; padding: 0 14px; color: #fff; text-decoration:none;  }
#navigation ul li a:hover,
#navigation ul li.active a  { text-decoration: none; color: #fff; background:#698FC0;}
#navigation ul li.first a { padding-left: 15px; }
#navigation a.nav-btn { display: none; }
#navigation span.slider-shadow { background: url(images/slider-shadow.png) no-repeat 0 0;  width: 100%; height: 13px; position: absolute; bottom: -13px; left: 0px; z-index: 999; display: block; }





aside {	text-align: center; }

footer {
	text-align: center;
	background-color: #c4c4c4;
	background-image: url("../images/footer.webp");
	background-repeat: no-repeat;
	background-position: left bottom;
	min-height:110px;
   border-radius: 0 0 10px 10px;
   padding:15px 50px;
}

.kcfooter
{
	background-color: #D9D9D9;
	border-radius: 0 0 10px 10px;
}


/*Elements*/

.menu_option:hover { cursor:pointer;}
.book_button {	border-style: groove; writing-mode: vertical-rl;text-orientation: mixed; vertical-align;middle; width:35px; height:120px;border-radius:5px; color:black; text-shadow:-1px -1px 0 #A84155; background: #D25068; border:1px groove #D25068;  text-align:center;  text-decoration:none; line-height:32px; font-family:'Montserrat', Helvetica; display: block;  font-size:18px; }
.book_button:hover {cursor:pointer; text-decoration:none; background: blue; color:white;}
.book_button:active { -webkit-box-shadow:0 1px 0 rgba(255, 255, 255, .5) inset, 0 -1px 0 rgba(255, 255, 255, .1) inset; top:5px; }
.book_button:active:before{ top: -11px; bottom: -5px; content: ""; }

.book_button2 {	border-style: groove;  vertical-align;middle; width:150px; height:50px; text-align:center; border-radius:5px; color:black; text-shadow:-1px -1px 0 #A84155; background: #D25068; border:1px groove #D25068;  text-align:center; font-weight: bold;  font-family:'Montserrat', Helvetica; display: block;  font-size:20px; }
.book_button2:hover {cursor:pointer; text-decoration:none; background: blue; color:white;}
.book_button2:active { -webkit-box-shadow:0 1px 0 rgba(255, 255, 255, .5) inset, 0 -1px 0 rgba(255, 255, 255, .1) inset; top:5px; }
.book_button2:active:before{ top: -11px; bottom: -5px; content: ""; }
#pushbutton {text-align:center;}



.push_button {	 width:220px; height:40px; text-align:center;  color:black;  border-radius:5px; text-decoration:none; line-height:43px; font-family:'Montserrat', Helvetica; display: block; margin: 30px auto; font-size:18px; }
.push_button:before { 	-webkit-border-radius:5px;	-moz-border-radius:5px;	border-radius:5px;}
.push_button:hover {text-decoration:none; background-color: blue; color:white;}
.push_button:active { -webkit-box-shadow:0 1px 0 rgba(255, 255, 255, .5) inset, 0 -1px 0 rgba(255, 255, 255, .1) inset; top:5px;  }
.push_button:active:before{ top: -11px; bottom: -5px; content: ""; }



.red { text-shadow:-1px -1px 0 #A84155; background: #D25068; border:1px solid #D25068;
	background-image:-webkit-linear-gradient(top, #F66C7B, #D25068);
	background-image:-moz-linear-gradient(top, #F66C7B, #D25068);
	background-image:-ms-linear-gradient(top, #F66C7B, #D25068);
	background-image:-o-linear-gradient(top, #F66C7B, #D25068);
	background-image:linear-gradient(to bottom, #F66C7B, #D25068);
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	border-radius:5px;

	-webkit-box-shadow:0 1px 0 rgba(255, 255, 255, .5) inset, 0 -1px 0 rgba(255, 255, 255, .1) inset, 0 4px 0 #AD4257, 0 4px 2px rgba(0, 0, 0, .5);
	-moz-box-shadow:0 1px 0 rgba(255, 255, 255, .5) inset, 0 -1px 0 rgba(255, 255, 255, .1) inset, 0 4px 0 #AD4257, 0 4px 2px rgba(0, 0, 0, .5);
	box-shadow:0 1px 0 rgba(255, 255, 255, .5) inset, 0 -1px 0 rgba(255, 255, 255, .1) inset, 0 4px 0 #AD4257, 0 4px 2px rgba(0, 0, 0, .5);
}

.red:hover {
	/* background: #F66C7B; */
	text-decoration:none; background-color: blue; color:white;
	background-image:-webkit-linear-gradient(top, #D25068, #F66C7B);
	background-image:-moz-linear-gradient(top, #D25068, #F66C7B);
	background-image:-ms-linear-gradient(top, #D25068, #F66C7B);
	background-image:-o-linear-gradient(top, #D25068, #F66C7B);
	background-image:linear-gradient(top, #D25068, #F66C7B);
}


.turquoise { text-shadow:-1px -1px 0 #33caff; background: #33ffdd; border:1px solid #33ffdd;
	background-image:-webkit-linear-gradient(top, #33caff, #33ffdd);
	background-image:-moz-linear-gradient(top, #33caff, #33ffdd);
	background-image:-ms-linear-gradient(top, #33caff, #33ffdd);
	background-image:-o-linear-gradient(top, #33caff, #33ffdd);
	background-image:linear-gradient(to bottom, #33caff, #33ffdd);
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	border-radius:5px;

	-webkit-box-shadow:0 1px 0 rgba(255, 255, 255, .5) inset, 0 -1px 0 rgba(255, 255, 255, .1) inset, 0 4px 0 #339cff, 0 4px 2px rgba(0, 0, 0, .5);
	-moz-box-shadow:0 1px 0 rgba(255, 255, 255, .5) inset, 0 -1px 0 rgba(255, 255, 255, .1) inset, 0 4px 0 #339cff, 0 4px 2px rgba(0, 0, 0, .5);
	box-shadow:0 1px 0 rgba(255, 255, 255, .5) inset, 0 -1px 0 rgba(255, 255, 255, .1) inset, 0 4px 0 #339cff, 0 4px 2px rgba(0, 0, 0, .5);
}

.turquoise:hover {
	/* background: #33caff; */
	text-decoration:none; background-color: blue; color:white;
	background-image:-webkit-linear-gradient(top, #33ffdd, #33caff);
	background-image:-moz-linear-gradient(top, #33ffdd, #33caff);
	background-image:-ms-linear-gradient(top, #33ffdd, #33caff);
	background-image:-o-linear-gradient(top, #33ffdd, #33caff);
	background-image:linear-gradient(top, #33ffdd, #33caff);
}

.blue {
   text-shadow: -1px -1px 0 white;
   background: blue;
   border: 1px solid blue;

   background-image: -webkit-linear-gradient(top, #339cff, blue);
   background-image: -moz-linear-gradient(top, #339cff, blue);
   background-image: -ms-linear-gradient(top, #339cff, blue);
   background-image: -o-linear-gradient(top, #339cff, blue);
   background-image: linear-gradient(to bottom, #339cff, blue);

   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   border-radius: 5px;

   -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset,
                        0 -1px 0 rgba(255, 255, 255, .1) inset,
                        0 4px 0 #0059ff,
                        0 4px 2px rgba(0, 0, 0, .5);
   -moz-box-shadow:    0 1px 0 rgba(255, 255, 255, .5) inset,
                        0 -1px 0 rgba(255, 255, 255, .1) inset,
                        0 4px 0 #0059ff,
                        0 4px 2px rgba(0, 0, 0, .5);
   box-shadow:          0 1px 0 rgba(255, 255, 255, .5) inset,
                        0 -1px 0 rgba(255, 255, 255, .1) inset,
                        0 4px 0 #0059ff,
                        0 4px 2px rgba(0, 0, 0, .5);

   color: white;
}

.blue:hover {
   text-decoration: none;
   background-color: #0059ff;
   color: white;

   background-image: -webkit-linear-gradient(top, blue, #339cff);
   background-image: -moz-linear-gradient(top, blue, #339cff);
   background-image: -ms-linear-gradient(top, blue, #339cff);
   background-image: -o-linear-gradient(top, blue, #339cff);
   background-image: linear-gradient(to bottom, blue, #339cff);
}




 /*Mobile*/

 @media only screen and ( max-width: 960px) {
 	header {background-image: none;}
	#navigation { padding: 0 0 0 0; height: 45px; margin:0 0 0 0;}
	#navigation a.nav-btn { 	/* position text on menu bar */
		display: block;
		line-height: 45px;
		padding-top: 0px;
		height: 28px;
		padding-left: 22px;
		text-transform: uppercase;
		color: #fff;
		font-size: 14px;
		font-weight: 700;
		text-decoration:none;
	}
	.row { padding:0 0 0 0;}
	body { padding:0px 0px 0px 0px; font-size:15px; font-family: "Helvetica Neue",Helvetica,Arial,sans-serif }
	#navigation a.nav-btn:hover { text-decoration: none; background-color:black; color:white; height:45px;}
	#navigation a.nav-btn span.arr { background: url(/images/nav-arr.png) no-repeat 0 0; width: 13px; height: 9px; position: absolute; right: 14px; top: 19px; }
	#navigation a.nav-btn span.arr.active { background: url(/images/nav-arr.png) no-repeat 0 bottom; }

	#navigation { position: relative; z-index: 1000; }
	#navigation ul { display: none; position: absolute; top: 45px; left: 0;  width: 100%;}
	#navigation ul li { display: block; line-height: 36px !important; float: none; background:#a6a6a6;  }
	#navigation ul li a { padding: 0 22px; color:#333;}    /* position of text in dropdown area */
	#navigation ul li.first a { padding-left: 26px; display: none; }
	main {padding: 20px !important;}
	.full-width
	{
		margin: 15px -20px;
		padding: 15px 20px;
	}
 }






 @media (min-width: 480px) {

	.responstable {width:100%; box-sizing:border-box;}
	.responstable td { border: 1px solid #D9E4E6;  }
	.responstable th, .responstable td { text-align: left;  margin: .5em 1em; }
 	.responstable th, .responstable td {display: table-cell;padding: 0.5em;box-sizing:border-box;}
	.responstable th:nth-child(2) span {display: block;}
	.responstable th:nth-child(2):after { display: none; }
}



tr.rowcolor:nth-child(even) {background: #EAF3F3}
tr.rowcolor:nth-child(odd) {background: #FFF}

.smallscreen {display:none;}
.widescreen {display:inline;}


.extraline {
	line-height: 1.2;
	//line-height:1.8;
}

.extraradio {
	margin: 3px 0px 3px 0px;
}

.bar {
	text-align:center;
	background:#CCC;
   color:black;
	padding:4px;
}

ul.content-menu {  margin: 25px 0; padding-top: 20px; border-top: solid #ccc 1px;}
ul.content-menu:after{
	content: "";
	display: table;
	clear: both;
}
ul.content-menu li a{  float: left; padding: 5px 10px; background-color:#C4C4C4; color:black; margin: 0 5px 5px 0;   text-decoration: none;  }
ul.content-menu li a:hover {background-color:#263357;color:white;}



@media only screen and ( max-width: 513px) {
   .smallscreen {display:inline;}
   .widescreen {display:none;}
			.bigtext {
				/*line-height: 200%;
				vertical-align: middle; */
				padding-top: 4px;
				padding-bottom: 4px;
			}

			.extraline {
				line-height: 1.8;

			}
			.extraradio {
				margin: 6px 0px 6px 0px;
			}

         .textarea  {     -moz-box-sizing:border-box;
                      -webkit-box-sizing:border-box;
                      box-sizing:border-box;
                      display:block;/*reset from inline*/
                      width:95%;
                      margin:0;/*remove defaults*/
                      padding:4px;
                      border:1px solid #333;
                      overflow-y:auto;/*resets IE*/
                      overflow-x:hidden;/*resets IE*/
                      border-color:gray;
                      max-width:210px;
                     }

         .input {width:95%;max-width:200px;}
         .input-2 {width:95%;max-width:200px;}


}

@media and (max-width: 920px ) {   /* Also in landscape (width<920px) mode using the shorttext class */
      .fulltext { display:none}
      .shorttext { display:block}

}



#lineloginbutton { text-align:center;}
#loginbutton { text-align:center;}

.black {color:black;}

.blackmenu option {color:black;}


h2.normal {color:black}
table.normal {border:1}
/* tr.normal {} */
div.tableheader {width:100%; text-align:center}
th.center {text-align:center; color:black}
th.left {text-align:left; color:black}
th.right {text-align:right; color:black}
.bookbutton {text-align:right; width:60px;}



.klik {cursor:default; text-decoration:none; color:blue;}
.klik:hover {cursor:pointer; text-decoration:underline; color:blue;}


.hide { display:none;}
.noshow { display:none;}

.smallgrayletter {
	font-size:12px;
	color:black;
}

.xsmallgrayletter {
	font-size:8px;
	color:black;
}

.xsmallletter {
	font-size:11px;
}



.page-reservation .dropdown {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}


.markred {
	color: #CC0000;
	}

.markblack {
	color: black;
	}


.foot {
	text-align: center;
	background-color: #c4c4c4;
	background-repeat: no-repeat;
	background-position: left bottom;
	min-height:110px;
	border-radius: 0 0 10px 10px;
	padding:15px 50px;
}

.kcfoot {
	text-align: center;
	background-color: #D9D9D9;
	background-repeat: no-repeat;
	background-position: left bottom;
	min-height:110px;
	border-radius: 0 0 10px 10px;
	padding:15px 50px;
}


.textarea {border:1px solid;border-color:gray;width:270px;}
.input   {width:270px;}
.input-2 {width:210px}
.mid     {background: #EDEDED}
.shorttext { display:none}
.basis   {background: #EDEDED}
.even    {background: #EDEDED}
.odd  {background: #EDEDED}

.underline	{
	color:blue;
	text-decoration:underline;
}

.letter {
	font-size:15px;
}

.textleft {
	text-align: left;
}


.inside-title {color:#fff; text-align:center; padding:25px 0;background-color:rgb(0,16,60)}
.subhead  {
   margin:4px 0;
	padding:0 0px;
	border:0px solid #333;
	border-left:0;
	border-right:0;
	color:#000;
	font-size:22px;
}




.mobile {
   height:100px;
}

@media screen and (max-width: 359px) {
	.mid    {background-color: #dee2e2;}
	.basis {background: white}
	.even {background-color: #FFF;}
	.odd {background-color: #EAF3F3;}
}

/*============================================================*/

/*
.loader {
  border: 16px solid rgb(237,237,237);
  border-radius: 50%;
  border-top: 16px solid blue;
  width: 30px;
  height: 30px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}


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

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
*/


/*============================================================*/

/* The sticky class is added to the navbar with JS when it reaches its scroll position */
.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}

/* Add some top padding to the page content to prevent sudden quick movement (as the navigation bar gets a new position at the top of the page (position:fixed and top:0) */
.sticky + .content {
  padding-top: 60px;
}


/*============================================================*/

.more_info {
  position: relative;
    cursor: pointer;
}

.more_info .popup {
    position: absolute;
    top: 25px; /*must overlap parent element otherwise pop-up doesn't stay open when rolloing over '*/
    background: #fff;
    border: 1px solid #ccc;
    left: 0;
    max-width: 380px;
    min-width: 300px;
    z-index: 100;
    display: none;
}


.drop-area {
	width: 43%;
	position: relative;
	/* font-size: 18px; */

}

/*  a.menu_option { font-style: italic;font-weight: bold;}  */

@media screen and (max-width: 360px) {
	.droparea    { width: 80%; position: relative;}
}


.drop-area input[type=file] {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0;
	right: 0;
	bottom: 0;
	opacity: 0;
	cursor: pointer;
}

.drop-area .drop-dummy {
	width: 100%;
	padding: 5px 5px 5px 5px;
	border: 2px dashed #ccc;
	background-color: #fff;
	text-align: center;
	transition: background 0.3s ease-in-out;
}

.drop-area .drop-dummy .success {
	display: none;
}

.drop-area:hover .drop-dummy {
	border: 2px dashed #acbc1a;
}

.drop-area input[type=file]:valid + .drop-dummy {
	border-color: #1abc9c;
}

.drop-area input[type=file]:valid + .drop-dummy .success {
	display: inline-block;
}

/* .drop-area input[type=file]:valid + .drop-dummy .default { display: none; } */

.upload-btn {  padding: 7px 20px;  }

.image-container {
	 position: relative;
}


.disabled-text {
   opacity: 0.5; /* Makes the text appear lighter */
   pointer-events: none; /* Prevents interaction */
}



.info-icon-old {
   display: inline-block !important;
   width: 20px !important;
   height: 20px !important;
   background-color: #007BFF !important;
   color: white !important;
   text-align: center !important;
   border-radius: 50% !important;
   font-weight: bold !important;
   font-family: sans-serif !important;
   font-size: 13px !important;
   line-height: 20px !important;
   cursor: pointer !important;
   vertical-align: middle !important;
   border: none !important;
   margin-left: 10px !important;
}



.info-icon {
   display: inline-block !important;
   padding: 2px 10px !important;
   background-color: transparent !important;
   color: blue !important;      //#007BFF !important;
   text-align: center !important;
   border-radius: 999px !important; /* makes a pill shape */
   font-weight: bold !important;
   font-family: sans-serif !important;
   font-size: 12px !important;
   line-height: 1.2 !important;
   cursor: pointer !important;
   vertical-align: middle !important;
   border: 2px solid blue	!important;			//#007BFF !important;
   margin-left: 10px !important;
   vertical-align: baseline !important;
}




.clockpicker {
    z-index: 1050 !important;  /* bring to front */
}


.vc { vertical-align: middle;}


.time-input[readonly] {
	background-color: white !important;
	color: black;
	cursor: pointer;
}

[id^="ask"] {
	color: black;
}

.input-error {
	color: #CC0000; !important /* keep if you still want red text in <input> */
}

input.input-error {
	color: #CC0000; !important
}

select.input-error {
	color: inherit;     /* or keep default text color */
	background-color: inherit;
}


.input-valid {
	color: black;
}




input.input-error,
select.input-error,
textarea.input-error,
input.input-valid,
select.input-valid,
textarea.input-valid {
	border           : 1px solid #999 !important;
	background-color : white 	!important;
	color            : black 	!important;
	outline          : none 	!important;
	box-shadow       : none 	!important;
}

input.input-error:focus,
input.input-valid:focus,
select.input-error:focus,
select.input-valid:focus,
textarea.input-error:focus,
textarea.input-valid:focus {
	border           : 1px solid #999 !important;
	outline          : none !important;
	box-shadow       : none !important;
}


.clockpicker-popup
{
	z-index: 9999; /* Ensure it appears above other elements */
	font-family: inherit; /* Match your site's font */
}
.clockpicker-plate
{
	background-color: #fff; /* Neutral background */
}


label, input, select {
	vertical-align: middle !important;
}
.widescreen {
	vertical-align: bottom !important;
}
.smallscreen {
	vertical-align: bottom !important;
}


.numberinput {
	width: 3em;
}


@media (max-width: 600px) {
	.xdsoft_datetimepicker {
		width: 100% !important;
		max-width: 350px; /* Adjust as needed */
	}
}

.xdsoft_datetimepicker {
	overflow: hidden;
	left: 50% !important;
	transform: translateX(-50%);
}

.datepicker-wrapper {
  max-width: 100%;  /* Make sure the calendar container doesn’t exceed screen width */
  box-sizing: border-box;  /* Account for padding/margins */
}

.datepicker-dropdown {
  width: 100% !important;  /* Ensure calendar fits within the screen */
}

/* ==================================================================================================================================================   */


.number-input {
   display: inline-flex;
   align-items: center;
   height: 18px; !important;
   font-size: 13px; !important;
   //border: 1px solid #ccc;
   border: none;
   border-radius: 2px;
   background: white;
   padding: 0;
}

.number-input button {
   width: 21px;
   height: 100%;
   border: none;
   font-size: 13px;   !important;
   padding: 0;
   cursor: pointer;
   background: white;
   border: 1px solid #ccc;
}


.number-input input[type="number"] {
   width: 35px;
   height: 100%;
   border: none;
   text-align: center;
   font-size: 13px;		!important;
   -moz-appearance: textfield;
}

.number-input input::-webkit-outer-spin-button,
.number-input input::-webkit-inner-spin-button {
   -webkit-appearance: none;
   margin: 0;
}


.input-note {
	color: black;
	background: #EDEDED;
	border: none;
	padding: 0;
	margin: 0;
	font-size: 13px;
	line-height: 21px;
	display: inline-block;
	vertical-align: middle;
}






/* === Default (Desktop & Normal Mobile) Layout === */
/* === Base Layout === */
.lineform {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	margin-bottom: 12px;
}

/* Left column (label) */
.col-25 {
	flex: 0 0 30%;
	text-align: right;
	padding-right: 10px;
	box-sizing: border-box;
}



/* Make inputs take full width in right column */


@media screen and (max-width: 400px) {
	.form-row,
	.line,
	.title-name-combo {
		flex-direction: column;
		align-items: stretch;
		width: 100%;
	}

	.col-25,
	.col-75 {
		flex: 0 0 100%;
		max-width: 100%;
		text-align: left;
		padding-right: 0;
	}

	.title-name-combo select,
	.title-name-combo input {
		width: 100%;
	}
}


/* Match input width for feedback/spinner */
.form-feedback {
	max-width: 300px;
	width: 100%;
	margin: 12px 0 0 0;
	text-align: center;
}

.loader {
	display: block;
	margin: 0 auto;
	border: 6px solid #ededed;
	border-top: 6px solid blue;
	border-radius: 50%;
	width: 24px;
	height: 24px;
	animation: spin 1s linear infinite;
}

@keyframes spin {
	0%   { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}


/* Optional: align spinner message below it */
#sendmsg {
	display: block;
	text-align: center;
	color: blue;
	font-size: 1rem;
	margin-top: 8px;
}