@charset "utf-8";

/* BEGIN General Section */
* {
	font-family: 'メイリオ', Meiryo, "ヒラギノ角ゴ Pro W3", "ＭＳ Ｐゴシック", sans-serif;
	font-size: medium;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	background-color: #f9f8f8;
}

input, textarea, select {
	border: 2px solid #ccc;
	border-radius: 4px;
	background-color: #f8f8f8;
}

input {
	padding: 3px 5px;
}

select {
	padding: 2px 0px;
}

input[type="text"] {
	width: 100%;
	text-overflow: ellipsis;
}

input[type="submit"], input[type="button"] {
	cursor: pointer;
}

input[type="submit"] {
	color: white;
	background-color: #B22A00;
}

input[type="submit"]:focus {
	background-color: #B95D43;
}

input[type="submit"]:hover {
	background-color: #B95D43;
}

textarea {
	width: 100%;
	padding: 3px 5px;
	box-sizing: border-box;
	resize: none;
}

select {
	/* Nothing */
}

blockquote {
    margin-top: 1rem;
	margin-left: 2rem;
    margin-bottom: 1rem;
}

/* END General Section */

/* START Icon Font Section */
@font-face {
  font-family: 'icomoon';
  src:  url('fonts/icomoon.eot?qjkbgs');
  src:  url('fonts/icomoon.eot?qjkbgs#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf?qjkbgs') format('truetype'),
    url('fonts/icomoon.woff?qjkbgs') format('woff'),
    url('fonts/icomoon.svg?qjkbgs#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-round-pause-button:before {
  content: "\e900";
}
.icon-solid-circle:before {
  content: "\e901";
}
.icon-inactive:before {
	content: "\e900";
	color: dimgrey;
}
.icon-active:before {
	content: "\e901";
	color: green;
}
/* END Icon Font Section */

/* START Utility Section */
p.error-text {
	color: red;
}

input.stealthy {
	left: 0;
	margin: 0;
	max-height: 1px;
	max-width: 1px;
	opacity: 0;
	outline: none;
	overflow: hidden;
	pointer-events: none;
	position: absolute;
	top: 0;
	z-index: -1;
}
/* END Utility Section */

/* Components Section */

#container {
	width: 96%;
	padding-top: 0;
	padding-right: 2%;
	padding-bottom: 2%;
	padding-left: 2%;
	margin: 0 auto;
}

#container > header {
	height: 50px;
}

#header-fix {
	position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 50px;
	/* background-color: #B22A00; */
    background-color: #FF9300;
	opacity: 0.8;
    z-index: 100;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}

#header-fix.qa {
    background-color: #aaa;
}

#inner-header {
	color: white;
}

footer {
	text-align: center;
	background-color: #FFCC66;
	clear: both;
	padding-left: 0;
	padding-right: 0;
}

#main > h1 {
	text-align: center;
	font-size: x-large;
}

div.vertical-space-20 {
	height: 20px;
}

div.vertical-align {
	display: flex;
	align-items: center;
}

.wrap {
	width: 760px;
	padding: 0 0.25em;
	margin: 0 auto;
}

.clickable-element {
	cursor: pointer;
	filter: drop-shadow( 2px 2px 2px #585858);
}

.clickable-element:hover {
	opacity: 0.5;
}

.clickable-element-disabled {
	cursor: not-allowed;
	filter: drop-shadow( 2px 2px 2px #585858);
}

.clickable-element-disabled:hover {
	opacity: 0.2;
}

.clickable-element-disabled > a {
	cursor: not-allowed;
}

.clickable-element-disabled > a > img {
	opacity: 0.2;
}

/* START DataTable SECTION */

.datatable-header-right {
	float: right;
}

.datatable-header-right .dt-buttons {
	float: right;
	margin-left: 20px;
}

.datatable-header-right .dt-buttons button {
	background-color: cornflowerblue;
    font-weight: bold;
	border-radius: 4px;
	color: white;
}

/* END DataTable SECTION */

.edit-in-place-buttonset {
	text-align: right;
	margin-bottom: 5px;
}

.edit-in-place-box > span {
	color: grey;
}

.edit-in-place-box:hover {
	background-color: #FFCC66;
	border-radius: 4px;
	border: 2px solid #FFCC66;
}

/*********************
DESKTOP
This is the average viewing window. So Desktops, Laptops, and
in general anyone not viewing on a mobile device. Here's where
you can add resource intensive styles.
*********************/
@media only screen and (min-width: 920px) {
	.wrap {
		width: 890px;
	}

	/*
	#container > header {
		height: 110px;
	}

	#header-fix {
		height: 110px;
	}*/
}
/*********************
add screen size
*********************/
@media only screen and (min-width: 1030px) {
  /******************************************************************  
  Stylesheet: Desktop Stylsheet
  
  This is the desktop size. It's larger than an iPad so it will only
  be seen on the Desktop.
  
  ******************************************************************/
	.wrap {
		width: 1000px;
	}	
}
/*********************
LARGE VIEWING SIZE
This is for the larger monitors and possibly full screen viewers.
*********************/
@media only screen and (min-width: 1240px) {
  /******************************************************************
  
  Stylesheet: Super Large Monitor Stylesheet
  
  You can add some advanced styles here if you like. This kicks in
  on larger screens.
  
  ******************************************************************/
	.wrap {
		width: 1000px;
	}

	/*
	#container > header {
		height: 128px;
	}

	#header-fix {
		height: 128px;
	}
	*/
}
/*********************
RETINA (2x RESOLUTION DEVICES)
This applies to the retina iPhone (4s) and iPad (2,3) along with
other displays with a 2x resolution. You can also create a media
query for retina AND a certain size if you want. Go Nuts.
*********************/
/*@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { */
  /******************************************************************
  
  Stylesheet: Retina Screens & Devices Stylesheet
  
  When handling retina screens you need to make adjustments, especially
  if you're not using font icons. Here you can add them in one neat
  place.
  
  ******************************************************************/
  /* 
  
  EXAMPLE 
  Let's say you have an image and you need to make sure it looks ok
  on retina screens. Let's say we have an icon which dimension are
  24px x 24px. In your regular stylesheets, it would look something
  like this:
  
  .icon {
  	width: 24px;
  	height: 24px;
  	background: url(img/test.png) no-repeat;
  }
  
  For retina screens, we have to make some adjustments, so that image
  doesn't look blurry. So, taking into account the image above and the
  dimensions, this is what we would put in our retina stylesheet:
  
  .icon {
  	background: url(img/test@2x.png) no-repeat;
  	background-size: 24px 24px;
  }
  
  So, you would create the same icon, but at double the resolution, meaning 
  it would be 48px x 48px. You'd name it the same, but with a @2x at the end
  (this is pretty standard practice). Set the background image so it matches
  the original dimensions and you are good to go. 
  
} */
 
/* 画面の小さなデバイスではワンカラムに */
@media only screen and (max-width: 920px) {
	
	#main {
		display: block;
		-webkit-box-sizing : border-box;
		-moz-box-sizing : border-box;
		box-sizing : border-box;
		-o-box-sizing: border-box;
		-ms-box-sizing: border-box; 
	}

	.wrap {
		width: 100%;
		float: none;
	}

/*
 * If you would like to change the height of header bar for small devices, you can set it here.	
 *
	#container > header {
		height: 50px;
	}

	#header-fix {
		height: 50px;
	}
*/

	#inner-header {
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		-o-box-sizing: border-box;
		-ms-box-sizing: border-box;
		box-sizing: border-box;
	}

	h1 {
	    margin: 5px;
	}
	
	footer {
		font-size: small;
	}
	
	footer > div {
		-webkit-box-sizing : border-box;
		-moz-box-sizing : border-box;
		box-sizing : border-box;
	}
}

/**** Page specific styles below ****/

/* BEGIN header section */
#inner-header {
	display: table;
}

#inner-header .icon {
	width: 38px;
	/* font-size: 38px; */
	color: white;
	vertical-align: bottom;
}

#inner-header #header-left {
	display: table-cell;
	text-align: left;
	width: 180px;
}

#inner-header #site-name {
	font-size: xx-large;
	font-weight: bold;
	padding-left: 5px;
}

#inner-header #header-center {
	display: table-cell;
	text-align: center;
}

#inner-header #header-right {
	display: table-cell;
	text-align: right;
	width: 180px;
}

#inner-header span.menu-item {
	padding-left: 8px;
	padding-right: 8px;
	font-family: 'Open Sans', sans-serif;
}

#inner-header span.menu-item > a {
	/* color: white; */
	/* text-decoration: none; */
	font-size: medium;
}

#inner-header span.menu-item > a {
	/* color: white; */
	/* text-decoration: none; */
	font-size: medium;
}


#inner-header span.menu-item-selected > a {
	pointer-events: none;
	text-decoration: none;
	color: white;
	font-weight: bold;
	font-size: larger;
}

/* END header section */

/* BEGIN form section */
fieldset {
	margin: auto;
	padding: 5px 5px;
	text-align: center;
	background-color: white;
}

table.form-fields {
	width: 100%;
    max-width: 800px;
    margin: auto;
	text-align: left;
	margin-bottom: 10px;
}

td {
	padding-top: 0px;
	padding-bottom: 0px;
	border-style: solid;
	border-width: 1px;
	border-color: white;
	line-height: 2em;
}

div#error-message-area, div#message-area {
    width: 100%;
    max-width: 800px;
    margin: auto;
    text-align: left;
	color: red;
	font-size: small;
}

div#mandatory-text {
    width: 100%;
    max-width: 800px;
    margin: auto;
    text-align: right;
	color: red;
	font-size: small;
}

span.nowrap {
	white-space: nowrap;
}

span.multi-items-bar {
	display: table;
	white-space: nowrap;
	width: 100%
}

span.multi-items-bar > .fixed-width-item-on-bar {
	display: table-cell;
	width: 1%;
	padding-right: 10px;
}

span.multi-items-bar > .auto-width-item-on-bar {
	display: table-cell;
	width: 100%;
}

td.input input.name {
	max-width: 250px;
}

td.input input.email {
	max-width: 300px;
}

td.input input.phone-number {
	max-width: 200px;
}

td.input input.flight-number {
	max-width: 90px;
}

td.label {
	width: 125px;
}

td.label label {
	white-space: nowrap;
	vertical-align: super;
}

label.only-for-desktop, label.only-for-mobile {
	font-weight: bold;
}

input#booking {
	max-width: 800px;
	width: 100%;
}

input#sending, input#amending {
	max-width: 320px;
	width: 40%;
}

input#amending, input#amending:hover {
	background-color: #AFBCD8;
}	

.multiple-items-box {
	display: inline-block;
	border-style: solid;
	border-color: white;
	border-width: 2px;
	border-radius: 4px;
	padding: 3px 5px;
}

.multiple-items-box span + span {
	padding-left: 10px;
}

.only-for-mobile {
	display: none;
}

span.mandatory {
	color: red;
	vertical-align: super;
}

.missed-mandatory {
	border-color: red;
}

label.missed-mandatory {
	font-weight: bold;
}

label.label-for-text-input {
	margin-right: 5px;
}

.annotation-text {
	font-size: small;
}

.annotation-symbol {
	font-size: small;
	vertical-align: super;
}

input.date-picker {
	font-family: monospace;
    text-align: center;
    width: 8em;
}

input.time-picker {
	font-family: monospace;
    text-align: center;
    width: 5em;
}

select.next-to, input.next-to {
	margin-right: 10px;
}

td.input  input.hotel {
	font-size: small;
	text-overflow: ellipsis;
}

input.flight {
	max-width: 110px;	
}

span.sub-item-box {
	vertical-align: super;
}

.disabled-item {
	opacity: 0.25;
}

span#arrival-date-box, span#departure-date-box, span#adults-box, span#children-box {
	display: inline-block;
}

span#arrival-date-box, span#departure-date-box {
	margin-right: 15px;
}

span#adults-box, span#children-box {
	margin-right: 0px;
}

span#arrival-flight-box, span#departure-flight-box{
	margin-left: 10px;
}

span#policy-text {
	font-weight: bold;
}

.select2-container .select2-selection--single {
	border: 2px solid #ccc;
	border-radius: 4px;
	background-color: #f8f8f8;
	padding: 3px 5px;
	height: auto
}
/* END form section */

/* */
div.section-box {
	margin-top: 20px;
	text-align: center;
	position: relative;
}

div.with-border {
	border: 2px solid #ccc;
	border-radius: 4px;
	padding-top: 10px;
	padding-left: 10px;
	padding-right: 10px;
	padding-bottom: 10px;
	margin-bottom: 20px;
}

/* */

/* BEGIN notice section */
#notice {
	width: 100%;
	max-width: 800px;
	margin: auto;
}

#notice > ul {
	list-style-position: inside;
	-moz-padding-start : 5px;
	-webkit-padding-start : 5px;		
}

#notice > ul > li > div {
	text-align: center;
}
/* END notice section */

/* START Trip and Activity Details section */
h2 {
	font-size: 20px;
	margin-bottom: 5px;
}

div.left-align {
	text-align: left;
}

label {
	color:  #1c2833;
	font-weight: bold;
}

div.property-line, div.property-area {
	margin-bottom: 10px;
}

span.property {
	border-bottom-style: solid;
	border-bottom-width: 1px;
}

span.value {
	color: #1c2833;
	min-width: 100px;
	padding-right: 10px;
}

span.value.caution {
	color: #ea1041;
}

span.property span.value {
	display: table-cell;
}

div.property {
	display: inline-block;
	border-bottom-style: solid;
	border-bottom-width: 1px;
	white-space: nowrap;
}

/* div.property span.value { */
	/* color:  #1c2833; */
	/* min-width: 100px; */
	/* padding-right: 10px; */
/* } */

div.value {
	border-bottom-style: solid;
	border-bottom-width: 1px;
}

img.show-hide-arrow {
	vertical-align: middle;
	margin-left: 5px;
	/* cursor: pointer; */
	/* filter: drop-shadow( 1px 1px 1px #585858); */
}

img.show-hide-arrow:hover {
	/* opacity: 0.5; */
}

label.group {
	display: table-cell;
	min-width: 100px;
}

span.time {
	min-width: 50px;
}

span.date {
	min-width: 120px;
}

span.action-icon {
	font-size: 60px;
	color: cornflowerblue;
	/* cursor: pointer; */
	/* filter: drop-shadow( 2px 2px 3px #585858); */
}

span.action-icon:hover {
	/* opacity: 0.5; */
}

/* END Trip and Activity Details section */

@media only screen and (max-width: 920px) {

	/* BEGIN form section */
	.eol-for-mobile::after {
		content: "\a";
		white-space: pre;
	}

	td.label {
		width: 0px;
		padding: 0px;
	}

	td.label label.only-for-desktop {
		display: none;
	}

	.only-for-mobile {
		display: inline;
	}

	span.showing-value-below-label {
		margin-left: 10px;
		display: inline-block;
	}

	/*td.input.line-break-after {
		white-space: pre-wrap;
	}*/
	
	td.input input.tour {
		margin-bottom: 5px;
	}
	
	span#arrival-date-box, span#departure-date-box, span#adults-box, span#children-box {
		margin-bottom: 5px;
	}

	label#line-label {
		font-size: 15px;
	}
	
	span#lineid {
		font-size: 12px;
	}
	
	textarea#comment {
		font-size: small;
	    height: 100px;
	}

	/* END form section */
	
	/* BEGIN notice section */
	#notice {
		box-sizing: border-box;
		font-size: small;
	}
	/* END notice section */
}