/*----------------------
	FONTS
----------------------*/
@font-face {
    font-family: 'eric_lgt';
    src: url('fonts/Lato-Light.woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'eric_med';
    src: url('fonts/BerninaSans-Web-Regular.woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'eric_bld';
    src: url('fonts/BerninaSans-Web-Bold.woff');
    font-weight: normal;
    font-style: normal;
}
/*

/* -------------------------------------------------- *\
	Design and Layout Helpers
\* -------------------------------------------------- */

body  
{
    background-color:#F7F7F7;
    color: #000;
    margin: 0; 
}
.clear                      
{ 
    clear:both; 
}
.blockClear 
{
    display:block; 
    clear:both; 
    font-size:1px; 
    height:1px;
    line-height:1px; 
    margin:0; 
    padding:0; 
    border:0; 
}
.hidden
{ 
    position:absolute; 
    left:-9999px;
}
.hide 
{ 
    display:none; 
}

/* -------------------------------------------------- *\
	Header
\* -------------------------------------------------- */

#banner  
{
    width: 100%; 
    display: flex;
    background: url(/images/charles-hurst-ireland/hero.png) no-repeat scroll 50% 50% / cover;
}
.logo    
{
    max-width:15%;           
    margin: 35px 35px 150px;
    display: block;
}
.logo img  
{
    width: 100%;
    max-width: 200px;
}

.left                       
{ 
    float:left; 
}
.right                      
{ 
    float:right; 
}
.wrapper                     
{
    margin: 0 auto 15px auto;     
    display: flex;
    flex-flow: wrap;
    overflow:hidden; 
    width:1440px; 
    position:relative; 
    padding: 0 15px 0px; 
}
#footer                     { margin:0 auto; padding:20px 0 1px; width:100%; color:#FFF; clear:both; }
#footer .wrapper            { display: block;}

#content                    { float:left; max-width: 700px; }
#contentInner               { padding:10px; }
#renewWarranty              { position:absolute; left:15px; top:147px; }
#dealerDetails              { margin-bottom:50px; }
#dealerLogin                { max-width:100%; }

#validVin                   { color: #62D13A; font-weight: bold; font-style: italic; margin-top: 10px; }
#invalidVin                 { color: #BC1334; font-weight: bold; font-style: italic; margin-top: 10px; }

#selectClaim                { background-color:#FFF; color:#343434; border:1px solid #707070; }
#selectClaim:hover          { border:2px solid #003554; }

/* -------------------------------------------------- *\
	Main Body
\* -------------------------------------------------- */

.main 
{
    font-family:eric_med;
    padding-top: 40px;
    overflow: visible;
}

/* -------------------------------------------------- *\
	Content
\* -------------------------------------------------- */

.main-left {
    display: flex;
    flex-direction: column;
    flex-basis: 100%;
    flex: 7;
    padding: 0 20px;
}
.main-center {
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: center;
}
.main-center #content { width:420px; }
.main-center #content.workflow { width:600px; }
.main-center .buttons { display: flex; justify-content: space-between; }

.main-center .buttons::after { content: ""; position: absolute; height: 200px; width: 1px; background: #003554; left: 50%; }
.main-center .buttons .formRow { width: 200px; display: flex; flex-direction:column; align-items: center; padding: 20px 0 0; }
.main-center .buttons .formRow p { text-align:center; margin:0; }

h2  
{

    color:  #343434;
    font: normal normal normal 28px/40px eric_bld;
    margin: 0;
}
h2.center { position:relative; text-align:center; }

h2.center::before { content: ""; border-top: 4px solid #003554; position: absolute; left: calc(50% - 25px); top: -2px; width: 50px; }

h3 
{
    color:  #343434;
    font: normal normal normal 18px/40px eric_bld;
    margin: 0;
}

a { color: #343434; }

.summary { width:100%; }
.summary h2 { margin-bottom:10px; }
.summary .summary-block { margin-bottom:25px; }
.summary .summary-block p { margin:0 0 5px; }
.summary .summary-block p strong { font-weight: 600; margin-right: 5px; }
.summary .summary-block table td { font: normal normal 300 15px/21px eric_lgt; color: #707070; }
.summary .summary-block.with-border table { border-collapse: collapse; border: 1px solid black;}
.summary .summary-block.with-border th { border: 1px solid black;}
.summary .summary-block.with-border td { border: 1px solid black;}
.summary .summary-block.with-border td.numeric { text-align: right; }

.red-top 
{
    width: 50px;

    border-top:4px solid #003554;
    margin-bottom: 5px;
}

p 
{
    text-align: left;
    font: normal normal 300 15px/21px eric_lgt;
    letter-spacing: 0px;
    color: #707070;
    opacity: 1;
}
ul 
{
    margin: 0;
    padding: 0;
    list-style-position: inside; 
}
li  
{
    text-align: left;
    font: normal normal 300 15px/21px eric_lgt;
    letter-spacing: 0px;
    color: #707070;
    opacity: 1;
    list-style-type:disc;
}
.no-margin { margin:0; }

.formRow, .formRowInline
{
    padding-bottom: 10px;
}
.formRow:last-child { padding-bottom:0; }

#vehicleSelection .formRow:last-child { padding-bottom:10px; }

.rowMargin { margin-bottom:50px; }
.formInputsInline 
{ 
    float: left;
    display: inline;
    padding-right: 10px;
    width:calc(50% - 10px);
}
.formInputsInline input
{ 
    min-width: 60px;
    width:100%;
}
.three-even .formInputsInline { width:calc(33% - 10px); }
.requiredField 
{
    margin-left: -20px;
    padding-left: 20px;
    padding-right: 10px;
    max-width: 380px;
}
.groupedRequiredField { max-width:390px; }

.marketing li { display:flex; align-items:center; }


.keyline { border-left:4px solid #003554; margin-left: -20px; padding-left: 16px; max-width: 700px; margin-bottom:50px; }
.longField { max-width:700px; }

.box { border: 1px solid #E3E2E2; padding: 20px; }
.box p a, #view-as { color:#707070; }
.box h2 { font-weight: 400; font-size:18px; }

#customerAcceptance { width:auto; }
.customerAcceptanceCheckbox label { display:flex; align-items:center; }

#purchaseByCard, #purchaseByDirectDebit { max-width: 270px; }
#purchaseByDealer { padding: 0 20px; }

#pay-dd-slider { width:auto; }

#view-ddo, #view-dd { color:#343434; }

#btnPrint { margin-right: 10px; max-width:100px; margin-bottom: 50px }

.form-radio-wrapper { display:flex; align-items:center; }
.form-radio-wrapper input { width:auto; }

.requiredField.sort-code input { width: 60px; }

#vehicleRegistration,
#vehicleEngineSize,
#vehicleCurrentMileage,
#vehicleValuePrice { width:80px; }

#firstname, #surname {  text-align: left; }

table { width:100%; }
th 
{
    text-align: left;
    font: normal normal bold 14px/21px eric_med;
    color: #343434;
    font-weight: 100; 
}
td {
    padding: 0 10px 0 0;
}
td span { display:none; text-align: left; font: normal normal bold 14px/21px eric_med; color: #343434; font-weight: 100; }

label
{
    text-align: left;
    font: normal normal bold 14px/21px eric_med;
    color: #343434;
    opacity: 1;
    display:block;
    font-weight: 100;
}

.error-message { color: #f00; }
.error { border: 1px solid #f00; }

input, select
{
    margin-top: 4px;
    padding: 0;
    opacity: 1;
    height: 30px;
    max-width: 420px;
    width:100%;
    border: 1px solid #DADBDD;
    border-radius: 0;
    text-indent:5px;
    cursor:pointer;
}
input.small { width:80px; }
input.half { width:calc(50% - 10px); }
textarea  
{
    width: 380px;
    min-height: 100px;
    border: 1px solid #DADBDD;
    resize: none; 
}

select.fancy-arrows 
{
  appearance: none;
  background-image:
    linear-gradient(60deg, transparent 50%, #343434  50%),
    linear-gradient(120deg, #343434  50%, transparent 50%),
    linear-gradient(60deg, #343434  50%, transparent 50%),
    linear-gradient(120deg, transparent 50%, #343434  50%);
  background-position:
    calc(100% - 14px) calc(1em + 3px),
    calc(100% - 10px) calc(1em + 3px),
    calc(100% - 10px) calc(1em - 4px),
    calc(100% - 14px) calc(1em - 4px);
  background-size:
    5px 5px,
    5px 5px,
    5px 5px,
    5px 5px;
  background-repeat: no-repeat;
  text-indent:0;
  padding-right: 20px;
  text-overflow: ellipsis;
}
#back { margin-right:100px;background-color: #979797; background-image: url(/images/charles-hurst-ireland/arrow-white-back.svg); background-repeat: no-repeat; background-position:center left 15px; padding-left:30px; padding-right:30px; }
input.button
{
    margin-top: 10px;
    display:block;
    border: 0;

    background-color:#003554;
    opacity: 1;
    height: 43px;
    max-width: 161px;
    font: normal normal normal 14px/19px eric_med;
    letter-spacing: 0.56px;
    border-radius:2px; 
    color: #FFFFFF;
    opacity: 1;
}
input.button::after 
{
    padding-left: 16px;
    content: '>';
    font-family: monospace;
    font-weight: 800;
}
input.button:hover {

    background-color: #002439;
}

#postcode { width:100px; }
#postcodeLookup { margin:10px 0 0; max-width: 190px; }

.summary-details p { margin:0; }
.summary-details p strong { font-weight: 600; width: 200px; display: inline-block; text-transform: uppercase; }
.summary-details li { font-family: eric_lgt; }
.summary-back { margin-right:0 !important; }

.paymentPackage { font-weight: 800; margin-top: 20px !important; text-transform: uppercase; }

#guaranteeDetails li { font-family: eric_lgt; }

.totalCost { text-align: left; font: normal normal normal 28px/21px eric_med; letter-spacing: 1.12px; color: #343434; margin-top:20px !important; text-transform:uppercase; }

.checkLabel { margin-left: 10px; }

ul.unstyledList 
{
    list-style-type: none;
    padding-left: 0;
    margin: 0;
}
ul.unstyledList .checkbox
{
    width: 30px;
}
ul.unstyledList .checkbox input
{
    min-width: 30px;
}
#dnr-text 
{
    width: 100%;    
    float: left;
}
/* -------------------------------------------------- *\
	Sidebar
\* -------------------------------------------------- */
.main-right {
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
  flex: 3;
}


#links 
{
    list-style-type: none;
    padding-left: 0;
    margin-top: 10px;
}
#links li
{
    padding-bottom: 10px;
}
#links li a
{
    text-align: left;
    font: normal normal normal 15px/21px eric_med;
    letter-spacing: 0.6px;
    color: #343434;
    opacity: 1;
    text-decoration: none;
}
#links li a::after 
{
    padding-left: 20px;
    color: #C3082F;
    font-family: monospace;
    font-weight: 800;
    font-size: 19px;
    background-image: url(/images/charles-hurst-ireland/arrow.svg);
    background-size: 7px 10px;
    content: "";
    background-repeat: no-repeat;
    background-position: center;
}


#contact p 
{
    color: #343434;
}
#contact p strong
{
    font-family:eric_bld;
}


/* -------------------------------------------------- *\
	Progress Bar
\* -------------------------------------------------- */
#progress-bar 
{
    background: #F9F9F9 0% 0% no-repeat padding-box;
    opacity: 1;    
}
.progress-bar
{
    width: 100%;
    text-decoration: none;
    display: flex;
    margin: 0;
    padding: 0;
}
.progress-bar li 
{
    display: flex;
    flex-direction: column;
    margin-right: 20px;
}
.progress-bar li:last-child { margin-right:0; }
.progress-bar li a
{
    text-align: center;
    font: normal normal normal 15px/21px eric_bld;
    letter-spacing: 0.6px;

    color: #343434;
    opacity: 1;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: 100;
    display:flex;
    flex-direction:column;
}
.progress-bar li a strong { margin-top:10px; }
.progress-bar li.visited a { color: #343434; opacity: 0.8; }
.progress-bar li.unvisited a
{
    color: #343434;
    opacity: 0.35;
}
.progress-bar li.unvisited a img { filter:grayscale(1); opacity:0.5;height: 27px; }
.progress-bar li.current a img { filter:grayscale(0); opacity:1;height: 27px; }
.progress-bar li.visited a img { filter:grayscale(0); opacity:1;height: 27px; }

.progress-step
{
    padding:16px 15px;
}
.current .progress-step 
{

    border-bottom: 4px solid #003554;
}
.progress-step-title
{
    text-align: center;
    margin:0;
}

input[type='checkbox']:checked {-webkit-filter: grayscale(100%);}
input[type='radio']:checked {-webkit-filter: grayscale(100%);}

.sub-links a { display: block;}

.summaryTitleEdit h2 { display: inline-block; }
.summaryTitleEdit .button { margin-top: 0px; max-width: 80px; }

#dealerAdminCancel, #dealerAdminSave {
    max-width: 100px;
}

.vcLink { padding:5px; border:5px solid red;display:inline-block }