@font-face {
	font-family: 'Tahoma';
	src: url('../res/Tahoma.ttf') format('truetype');
}
@font-face {
	font-family: 'LaPontaise-SemiBold';
	src: url('../res/LaPontaise-SemiBold/LaPontaise-SemiBold.ttf') format('truetype');
}
@font-face {
	font-family: 'ABCSocial-Bold';
	src: url('../res/ABCSocial-Bold/ABCSocial-Bold.ttf') format('truetype');
}

@font-face {
	font-family: 'ABCSocial-Regular';
	src: url('../res/ABCSocial-Regular/ABCSocial-Regular.ttf') format('truetype');
}

input, input[type], input[type="text"], input[type="number"] {
	box-sizing: content-box;
}

#app-root{
	padding: 0 1.953125%;
	margin:  0 3.125%;
	margin-top: 90px;
}

#app-root .hidden {
	width: 0; height: 0;
	padding: 0; border: 0; margin: 0;
}

#app-root .hint {
	color: gray;
}

/*#app-root > *      { margin: 30px 0;   }*/
#app-root > header { margin-top: 0;    }
#app-root > footer { margin-top: 50px; }

#app-root span.datepicker-month-arrow {
	color: white;
	font-weight: bold;
}

/* Points / e-voucher currency and value */

/* Points / e- voucher currency and value text style (e.g. 500 points, 1,000 points, £2, €20) */
#app-root .points {
	font-family: "Pembroke-Bold";
	font-weight: bold;
	font-size: 28px;
	line-height: 34px;
	/*align: varies - can left or centred see visuals to align ????*/
	color: #06183d;
}

/* HEADINGS */

/* Page title (e.g. Title of page i.e. Make a claim) */
#app-root h1 {
	font-family: "ABCSocial-Bold";
	font-weight: normal;
	font-size: 36px;
	line-height: 38px;
	text-align: left;
	color: #00286A 
}

/* Heading (e.g. Sections i.e. Traveller’s details) */
#app-root h2 {
	font-family: "ABCSocial-Bold";
	font-weight: normal;
	font-size: 28px;
	line-height: 28px;
	text-align: left;
	color: #00286A;

	margin: 0;
}

/* Sub heading (e.g. Amount/Number of points for this delay) */
#app-root h3 {
	font-family: Tahoma;
	font-weight: normal;
	font-size: 14px;
	line-height: 20px;
	text-align: center;
	color: #06183d;
}

/* Sub heading - membership (e.g. Membership ending in ***1234) */
#app-root h4 {
	font-family: "Pembroke-Regular";
	font-weight: normal;
	font-size: 14px;
	line-height: 20px;
	text-align: center;
	color: #1a1a1a;
}

/* Image heading (e.g. Visit our Help center) */
#app-root h5 {
	font-family: "Pembroke-Regular";
	font-weight: normal;
	font-size: 22px;
	line-height: 28px;
	text-align: center;
	color: #ffffff;
	text-shadow: 2px 2px #000000;
}

/* Language selector heading */
#app-root h6 {
	font-family: "Pembroke-Regular";
	font-weight: normal;
	font-size: 22px;
	line-height: 28px;
	text-align: center;
	color: #ffffff;
	text-shadow: 0px 0px 4px #000000;
}

/* Body paragraph */

/* p1 Body paragraph */
#app-root .p1 {
	font-family: ABCSocial-Regular;
	font-weight: normal;
	font-size: 18px;
	line-height: 20px;
	text-align: left;
	color: #1C1C1A;
}

/* p2 Body paragraph */
#app-root .p2 {
	font-family: ABCSocial-Regular;
    font-weight: bold;
    font-size: 16px;
	line-height: 20px;
	text-align: left;
	color: #1a1a1a;
}

/* p3 Footer body paragraph */
/* (e.g. Footer text i.e. © 2015 Eurostar International Ltd. All Rights Reserved.) */
#app-root .footer p {
	font-family: Tahoma;
	font-weight: bold;
	font-size: 14px;
	line-height: 20px;
	text-align: left;
	color: #fffff;
}

/* description paragraph */
#app-root p.decription {
	font-family: Tahoma;
	font-weight: normal;
	font-size: 12px;
	line-height: 18px;
	text-align: left;
	color: #1a1a1a;
}

/* Field label and input text Links: Hyperlinks */

#app-root .input-wrapper {

	position: relative;
}

#app-root .disable-link-activity {
	color: #AAAAAA;
	cursor: default;
	pointer-events: none;
	text-decoration: none;
}

/* Field label (e.g. First name *, Surname *) */
#app-root .empty label {
	font-family: Tahoma;
	font-weight: normal;
	font-size: 14px;
	line-height: 20px;
	text-align: left;
	color: #1A1A1A;
}

/* Normal state containing watermark (e.g. 6 letter booking reference) */
/* Field input text */
#app-root input, #app-root textarea {
	font-family: ABCSocial-Regular;
	font-weight: normal;
	font-size: 18px;
	line-height: 20px;
	text-align: left;
	color: #1a1a1a;
	padding: 17px 10px;
	border-style: solid;
	border-width: 1px;
	border-color: #646463;
	border-radius: 4px;
	width: calc(100% - 22px);
	padding-top: 13px;
	padding-bottom: 13px;
	height: 18px;
}

#app-root textarea {
	height: 160px;
}

#app-root  input::placeholder {
	color:#646463;
  }

#app-root select {
	font-family: ABCSocial-Regular;
	font-weight: normal;
	font-size: 18px;
	line-height: 20px;
	text-align: left;
	color: #1a1a1a;
	padding: 17px 10px;
	border-style: solid;
	border-width: 1px;
	border-color: #646463;
	border-radius: 4px;
	width: calc(106% - 22px);
	padding-top: 13px;
	padding-bottom: 13px;

	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-image: url(../res/select2.png);
	background-repeat: no-repeat;
	background-position: calc(100% + 39px) 13px;
}

/* VERY UGLY Safari HACKS from http://browserhacks.com/#hack-8bacb43ba70fb5c9ccd3029729a78760 */
/*
_::-moz-svg-foreign-content, :root #app-root select {
	-webkit-appearance: none;
	background-image: url(../res/select2.png);
	background-repeat: no-repeat;
	background-position: calc(100% + 39px) 13px;
}
*/
/* VERY UGLY IE HACKS from http://browserhacks.com/ */
_:-ms-input-placeholder, :root #app-root input {
	line-height: 10px;
}
html[lang='\
en'] #app-root input { line-height: 10px; }
_:-ms-fullscreen, :root #app-root input { line-height: 10px; }

#app-root input[type="checkbox"] {
	margin-right: 10px;

	padding: 10px;
	width: 16px;
	height: 16px;
	color: #06183d;
	background-color: #ededed;
	border-style: solid;
	border-width: 1px;
	border-color: #0096b2;

	float: left; /* not good */
}

#app-root input[type="checkbox"].confirmation-checkbox {
    width: 28px;
    height: 28px;
    margin-top: 5px;
}

#app-root input[type="checkbox"]:checked {
	border-color: #06183d;
}
/*
#app-root input[type="radio"] {
	border-style: solid;
	border-width: 1px;
	border-color: #0096b2;
	background-color: #ededed;
	width: 15px;
	height: 15px;

	float: left;

	padding: 0;
	border-radius: 50%;
	color: black;
}
#app-root input[type="radio"]:checked {
	border-color: #06183d;
}
*/
#app-root input[type="radio"] {
	-webkit-appearance: textfield;
	-moz-appearance: none;
	appearance: none;

	width: 15px;
	height: 15px;

	float: left;

	padding: 0;
	border: 0;

	background-image: url(../res/SVGS/radio_uncheck.svg);
}
#app-root input[type="radio"]:checked {
	background-image: url(../res/SVGS/radio_check.svg);
}

#app-root .radio-panel {
	border-radius: 4px;
	border: solid 1px #0096b2;
	padding: 15px 15px 15px 30px;
	margin: -15px -15px -15px -10px;
	display: block;
}
#app-root input[type="radio"]:checked + .radio-panel {
	/*border-color: #06183d;*/
}
#app-root .radio-panel h2 {
	line-height: 15px;
	vertical-align: text-bottom;
}
#app-root .radio-panel p {
	margin: 15px 0 15px;
}
#app-root .radio-panel .points {
	text-align: left;
}
/*#app-root .radiogroup > .span_4_of_12 + .span_1_of_12 { text-align: center; }*/
#app-root .radiogroup-delimeter {
	font-family: "Pembroke-Regular";
	text-align: center;
	margin-top: 30px;
	margin-bottom: 30px;
}

#app-root .display-panel {
	border: solid 1px #0096b2;
	padding: 15px;
	background-color: #fff;
}
#app-root .display-panel h2 {
	border-bottom: solid 1px #1a1a1a;
	padding: 0 0 10px;
	margin: 0 0 20px;
}
#app-root .display-panel h4 {
	margin: 0 0 10px;
}
#app-root .display-panel h3 {
	margin: 0 0 25px;
}
#app-root .display-panel .points {
	text-align: center;
	margin: 0 0 25px;
}
#app-root .capitalize {
	text-transform: uppercase;
}

#app-root .input-wrapper.validity-sign::before,
#app-root .input-wrapper::after {
	/*TODO describe the font with OK & KO glyphs */
	position: absolute;
	content: "";
	background-color: white;
}

#app-root .input-wrapper::before { right: 10px; }
#app-root .input-wrapper::after  { right: 0; }

#app-root input:focus { border-color: #24b5c9; }

#app-root .valid input { border-color: #009900; }

#app-root no-captcha > div > div { border: 1px solid transparent; }

#app-root .invalid input,
#app-root .invalid select,
#app-root .invalid textarea,
#app-root .invalid > div > div.ui-select-container > a.select2-choice,
#app-root .invalid no-captcha > div > div { border-color: #B60000; }

#app-root .invalid .input-wrapper::before,
#app-root .valid   .input-wrapper::before {
	top:    11.5px;
	width:  24px;
	height: 24px;
}
#app-root .tooltip-sign  {
	/*background-image: url("https://dev1-eurostarhelp.cs17.force.com/compensation/resource/1440407132000/CompApp_Res/res/SVGS/tool_tip.svg");*/
	transform: translateY(5px);
	width:  35px;
	height: 35px;
	float: right;
	background-repeat: no-repeat;
    background-size: 100%;
}
#app-root .tooltip .input-wrapper::before { right: 60px; }
#app-root .tooltip input { width: calc(100% - 16px - 10px - 46px); }
#app-root .tooltip .rich-area {
	 height: 100%;
}
#app-root .tooltip select { width: calc(100% - 2px - 10px - 46px); }
/* Focus state (e.g. PNRLTR, 123456789) */
#app-root label {
	font-family: ABCSocial-Regular;
	font-weight: normal;
	font-size: 18px;
	line-height: 20px;
	text-align: left;
	color: #1C1C1A;
	/*padding-top: 17px;*/
	padding-top: 4px;
}

/* Field label error message (e.g. Invalid ticket number. Please try re-enter ticket numer .) */
#app-root .error-message {
	visibility: hidden;
	padding: 0;
	/*margin: 10px 0 0 0;*/
	margin: 0;
	font-family: ABCSocial-Regular;
	font-weight: normal;
	font-size: 16px;
	line-height: 20px;
	text-align: left;
	color: #B60000;
}

#app-root .error-message-main {
	font-family: ABCSocial-Regular;
	font-weight: normal;
	font-size: 16px;
	line-height: 20px;
	text-align: left;
	color: #B60000;
}

#app-root .non-valid-dates-error-message {
	display: none;
	padding: 0;
	/*margin: 10px 0 0 0;*/
	margin: 0;
	font-family: ABCSocial-Regular;
	font-weight: normal;
	font-size: 16px;
	line-height: 20px;
	text-align: left;
	color: #B60000;
}

#app-root .error-message-email {
	visibility: hidden;
	display: none;
	padding: 0;
	/*margin: 10px 0 0 0;*/
	margin: 0;
	font-family: Tahoma;
	font-weight: normal;
	font-size: 14px;
	line-height: 20px;
	text-align: left;
	color: #B60000;
}

#app-root .error-message-email-person-acc {
	visibility: hidden;
	display: none;
	padding: 0;
	/*margin: 10px 0 0 0;*/
	margin: 0;
	font-family: Tahoma;
	font-weight: normal;
	font-size: 14px;
	line-height: 20px;
	text-align: left;
	color: #B60000;
}

#app-root .error-message-card-id {
	visibility: hidden;
	display: none;
	padding: 0;
	/*margin: 10px 0 0 0;*/
	margin: 0;
	font-family: Tahoma;
	font-weight: normal;
	font-size: 14px;
	line-height: 20px;
	text-align: left;
	color: #B60000;
}

#app-root .error-message-empty-attach {
	visibility: hidden;
	display: none;
	padding: 0;
	/*margin: 10px 0 0 0;*/
	margin: 0;
	font-family: Tahoma;
	font-weight: normal;
	font-size: 14px;
	line-height: 20px;
	text-align: left;
	color: #B60000;
}

#app-root .error-message-non-valid-code {
	visibility: hidden;
	display: none;
	padding: 0;
	/*margin: 10px 0 0 0;*/
	margin: 0;
	font-family: Tahoma;
	font-weight: normal;
	font-size: 14px;
	line-height: 20px;
	text-align: left;
	color: #B60000;
}

#app-root .error-message-has-active-code {
	visibility: hidden;
	display: none;
	padding: 0;
	/*margin: 10px 0 0 0;*/
	margin: 0;
	font-family: Tahoma;
	font-weight: normal;
	font-size: 14px;
	line-height: 20px;
	text-align: left;
	color: #B60000;
}

#app-root .error-message-delegate-limits {
	visibility: hidden;
	display: none;
	padding: 0;
	/*margin: 10px 0 0 0;*/
	margin: 0;
	font-family: Tahoma;
	font-weight: normal;
	font-size: 14px;
	line-height: 20px;
	text-align: left;
	color: #B60000;
}

#app-root .invalid .error-message { visibility: visible; }

#app-root .invalidEmail .error-message-email { visibility: visible; display: block;}

#app-root .invalidEmailForPersonalAcc .error-message-email-person-acc { visibility: visible; display: block;}

#app-root .invalidId .error-message-card-id { visibility: visible; display: block;}

#app-root .emptyAttachment .error-message-empty-attach { visibility: visible; display: block;}

#app-root .emptyAttachment .input-file-wrapper { border: solid 1px red; border-radius: 5px;}

#app-root .invalidSpecCode .error-message-non-valid-code { visibility: visible; display: block;}

#app-root .hasActiveCode .error-message-has-active-code { visibility: visible; display: block;}

#app-root .limitReached .error-message-delegate-limits { visibility: visible; display: block;}

#app-root .accountExists .error-message-email { visibility: visible; display: block;}

#app-root .invalidSpecCode input { border: solid 1px red; border-radius: 5px;}

#app-root .hasActiveCode input { border: solid 1px red; border-radius: 5px;}

#app-root .limitReached input { border: solid 1px red; border-radius: 5px;}

#app-root .accountExists input { border: solid 1px red; border-radius: 5px;}


/* Links: Hyperlinks */

/* Text Links (e.g. Terms and Conditions, Conditions of Carriage, Log in to veiw your account) */
#app-root a {
	font-family: ABCSocial-regular;
	font-weight: normal;
	font-size: 18px;
	line-height: 20px;
	text-align: left;
	color: #0D57CC;
	text-decoration: none;

	display: inline-block;

	cursor: pointer;
}

#app-root a:visited {
	color: #06183d;
	text-decoration: none;
}

#app-root a:hover {
	color: #06183d;
	text-decoration: none;
}

#app-root a:active {
	color: #0096b2;
	text-decoration: none;
}

#app-root .close /* (e.g. X Close) */ {
	color: #000000;
	text-decoration: none;
}

/* Button labels */

#app-root .btn {
	/*height: calc(44px - 2 * 16px);*/
	height: 18px;
	padding: 16px 30px;
	border-radius: 4px;
	display: inline-block;
	text-decoration: none;
	font-family: "ABCSocial-Regular";
	font-weight: bold;
	font-size: 18px;
	/*line-height: 20px;*/
	line-height: 16px;
	text-align: center;
}

/* Primary button label (e.g. Check eligibility, Make another claim, Process my claim, Help Centre) */
#app-root .btn.primary {
	color: #000000;
	/*text-shadow: 0px 2px 2px #000000;*/
	background-color: #ffc305;
	text-decoration: none;
}

/*Hover/Pressed state*/
a.btn.primary:hover, button.btn.primary:hover,
#app-root .btn.primary:hover {
	background-color: #cc9c04;
	text-decoration: none;
}

a.btn.primary:active, button.btn.primary:active,
#app-root .btn.primary:active {
	background-color: #997503;
	text-decoration: none;
}

/* Secondary button label (e.g. Cancel, Change option) */
#app-root .btn.secondary {
	color: #ffffff;
	border-style: solid;
	border-width: 2px;
	background-color: #116dff;
	border-radius: 4px;
    text-decoration: none;
	/* becouse of border-width */
	padding-top: 14px;
	padding-bottom: 14px;
}
/*Hover/Pressed state*/
a.btn.secondary:hover,
#app-root .btn.secondary:hover {
	color: #ffffff;
	background-color: #094199;
}

button.btn.secondary:active,
#app-root .btn.secondary:active {
	color: #ffffff;
	background-color: #052c66;
}

#app-root .commands-section > * {
	margin-right: 20px;
}
#app-root .commands-section > *:last-child {
	margin-right: 0;
}

/* Dialog */

#app-root #dialog { /* dialog root */
	display: none;
	position: fixed;
	text-align: center;
	width: 100%;
	top: 30px;
	left: 0;
	z-index: 3;
	padding-bottom: 40px;
	height: calc(100vh - 70px);

}
#app-root #dialog::before { /* dialog overlay */
	display: block;
	content: "";
	opacity: .6;
	background-color: #000;
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 10;
}
#app-root #dialog > section > #dialog-heading {
	margin-top: -30px;
	margin-bottom: 0em;
}
#app-root #dialog > section { /* dialog body */
	display: inline-block;
	z-index: 11;
	background-color: #fff;
	padding: 20px;
	position: relative;
	/*width: 62.5%;*/
	min-width: 50%;
}
#app-root #dialog > section > * {
	margin: 20px 0 30px;
}
#app-root #dialog > section > header {
	/*height: 20px;*/
	margin-top: 0px;
}
#app-root #dialog > section > header > * {
	float: right;
}
#app-root #dialog > section > footer {
	text-align: center;
	margin: 0;
}
#app-root #dialog .btn{
	margin-right: 20px;
}

#app-root #dialog > section > article > hr {
	display: block;
	position: relative;
	padding: 0;
	margin: 8px auto;
	height: 0;
	width: 100%;
	max-height: 0;
	font-size: 1px;
	line-height: 0;
	clear: both;
	border: none;
	border-top: 2px solid #aaaaaa;
	border-bottom: 1px solid #ffffff;
}

#app-root summary::-webkit-details-marker {
	font-size: 80%;
	margin-right: 5px;
}
#app-root summary:focus {
	outline-style: none;
}
#app-root article > details > summary {
	font-size: 17px;
	margin-top: 16px;
	text-align: left;
}
#app-root details > p {
	margin-left: 24px;
}
#app-root details details {
	margin-left: 36px;
}
#app-root details details summary {
	font-size: 16px;
}

#app-root #dialog > section > article > section > article > details > div > div {
	text-align: center;
	margin-bottom: 1.5rem;
}

#app-root .images-wrapper > * {
	width: 140px;
	height: 100px;
	margin-right: 1rem;
}

#app-root .images-wrapper > figure > img {
	width: 140px;
	height: 100px;
}

#app-root .images-wrapper {
	overflow-y: auto!important;
	/*clean up incorrect styles in the css file fron the archive*/
}

#app-root #dialog > section > article {
	line-height: 5px;
}

#app-root .images-wrapper > figure > img {
	height: 120px;
	border: 1px solid gray;
	border-radius: 5px;
	background-size: contain;
	background-repeat: no-repeat;
}

#app-root figcaption {
	margin: 10px 0 0 0;
	font-family: Arial;
	line-height: 1;
}
#app-root figure {
	padding: 5px;
	vertical-align: top;
	display: inline-block;
}

#app-root img {
	transition: transform 0.2s;
	-webkit-transition: -webkit-transform 0.2s;
	-moz-transition: -moz-transform 0.2s;
	-o-transition: -o-transform 0.2s;
}

#app-root #dialog .p1.tcn {
    margin: 0 0 0 0;
}

#app-root #dialog .p1.footer {
    margin: 5px 0 0 0;
}

#app-root img.tcn:hover {
    cursor: pointer;
    transform: scale(1.03);
}

#app-root #preview-modal { /* dialog root */
	display: none;
	position: fixed;
	text-align: center;
	width: 100%;
	top: 30px;
	left: 0;
	z-index: 3;
	overflow-y: scroll;
	height: 100vh;
}
#app-root #preview-modal::before { /* dialog overlay */
	display: block;
	content: "";
	opacity: .6;
	background-color: #000;
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: -10;
}

#app-root #preview-modal > section { /* dialog body */
	display: inline-block;
	z-index: 11;
	background-color: #fff;
	padding: 10px;
	position: relative;
}

#app-root #preview-modal > section > header > * {
	float: right;
}

#app-root img.preview {
	max-height: 100%;
	max-width: 100%;
}

#app-root #modal-window-section {
	height: 95%;
	overflow-y: auto;
}

#app-root #dialog-description {
	margin: 0!important;
	text-align: left!important;
}

#app-root .text-line__extended {
	height: 165px!important;
}

#app-root .flex-align-items-center {
    display: flex;
    align-items: center;
}

#app-root .confirmation-checkbox-table {
    width:  100%;
}

#app-root .confirmation-checkbox-label-container {
    margin-right: 54px;
}

#app-root .confirmation-checkbox-label {
    font-family: ABCSocial-Regular;
    font-size: 18px;
    line-height: 20px;
    text-align: left;
    margin-bottom: 10px;
}

#app-root .link-text {
    font-size: 16px;
}

/* CSS for "Please wait..." message BEGIN*/

#blanket {
    display: none;
    position: fixed;
    text-align: center;
    width: 100%;
    top: 1px;
    left: 0;
    z-index: 3;
    padding-bottom: 40px;
    height: calc(100vh - 70px);
}

#blanket::before {
    display: block;
    content: "";
    opacity: .6;
    background-color: #000;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 10;
}

#messagebox {
    width: 100;
    height: 3rem;
    position: absolute;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 11;
    border-radius: .5rem;
    margin-top: auto;
    margin-bottom: auto;
    padding:0;
}

.cntnr {
    position: absolute;
    width:100%;
    font-size: 15px;
    text-align: center;
    z-index: 12;
}
.msgs {
    display: inline-block;
    text-align: left;
    z-index: 13;
}
.msgs p {
    display: inline-block;
    z-index: 14;
}

.cntnr + .cntnr {
    top: 50%;
}

/* CSS for "Please wait..." message END*/