*{ box-sizing: border-box; }
html{ font-size: 62.5%; }
body{ 
    font-family: 'Raleway', serif; 
    font-size: 1.2rem; 
    font-weight: 400; 
    margin: 0; 
    padding: 0; 
}

input:focus, select:focus {
     box-shadow: inset 0px 0px 0px 2px rgba(11,75,119,1);
     outline: 2px solid #fff;
}
    
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.sr-only-focusable:active, .sr-only-focusable:focus {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
}       

.clearfix::before, .clearfix::after{ content: ' '; display: table; }
.clearfix::after{ clear: both; }

.exportable-quoter{ background: #ffffff; border: 0; }

.exportable-quoter select{ 
    border: 1px solid #706F6F;
    background-image: linear-gradient(45deg, transparent 50%, #ffffff 50%), linear-gradient(135deg, #ffffff 50%, transparent 50%), linear-gradient(to right, #706F6F, #706F6F);
    background-position: calc(100% - 18px) calc(1em - 2px), calc(100% - 13px) calc(1em - 2px), 100% 0;
    background-size: 5px 5px, 5px 5px, 2.5em 2.5em;
    background-repeat: no-repeat;
    width: 100%; 
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
    -webkit-appearance: none;
       -moz-appearance: none;
}

.exportable-quoter select:focus{
    background-image: linear-gradient(45deg, #ffffff 50%, transparent 50%), linear-gradient(135deg, transparent 50%, #ffffff 50%), linear-gradient(to right, #706F6F, #706F6F);
    background-position: calc(100% - 13px) calc(1em - 2px), calc(100% - 17px) calc(1em - 2px), 100% 0;
    background-size: 5px 5px, 5px 5px, 2.5em 2.5em;
    background-repeat: no-repeat;
    border-color: #706F6F;
}

.exportable-quoter select option{ color: #1D1D1B; font-family: Arial, sans-serif; font-size: 11px; }
.exportable-quoter label{ 
    color: #ffffff; 
    font-family: 'Raleway', Arial, sans-serif;
    font-size: 1.3rem;
    font-weight: bold;
    line-height: 1.5;
}
.exportable-quoter .quoter-form-row{ margin-bottom: 0; }
.exportable-quoter .quoter-form-row.row-middle {
    background-color: #00ACD7;
    padding: 15px;
}
.exportable-quoter .quoter-form-row.row-bottom{ padding: 15px; }
.exportable-quoter .quoter-form-row:last-child{ margin-bottom: 0;  }
.exportable-quoter .quoter-group-field-inline{ 
    align-content: stretch;
    display: table;
    display: flex;
    width: 100%; 
}
.exportable-quoter .quoter-field-inline{ display: table-cell; vertical-align: top; }
.exportable-quoter .quoter-field-inline.field-postal-code{ width: 95px; }
.exportable-quoter .quoter-field-inline.field-postal-code input{ border: 1px solid #706F6F; padding: 4px; width: 100%; }
.exportable-quoter .quoter-field-inline.field-cta{
    align-content: stretch;
    display: flex;
    flex: 1;
    padding-left: 10px;
}
.exportable-quoter .quoter-cta{ 
    flex: 1;
    align-content: stretch;
    display: flex;
    padding-left: 10px;
}
.exportable-quoter .quoter-cta input{   
    background: #00ACD7;
    border: 1px solid transparent;
    border-radius: 10px;            
    color: #ffffff;
    font-family: 'Raleway', serif;
    font-size: 1.6rem;
    font-weight: bold;
    transition: all .25s ease-out;
    width: 100%;            
}

.exportable-quoter .quoter-cta input:hover {
    background: #004e72;
    border: 1px solid transparent;
    box-shadow: none;
    color: #ffffff;
    outline: none;
    cursor: pointer;
}

.exportable-quoter .quoter-cta input:focus{
    background: #707322;
    border: 1px solid transparent;
    box-shadow: none;
    text-decoration: underline;
    color: #ffffff;
    outline: none;
}

.exportable-quoter .quoter-header, .exportable-quoter .quoter-body, .exportable-quoter .quoter-footer{ clear: both; display: block; }
.exportable-quoter .quoter-header .quoter-slogan{  
    font-family: 'Raleway', sans-serif;
    font-weight: bold;
    margin: 0;
    text-transform: uppercase;
}

.exportable-quoter a.quoter-telephone{
    color: #0094D2;
    clear: both; 
    display: block;
    font-family: 'Roboto', Arial, sans-serif;
    font-size: 1.3rem;
    font-weight: bold;
    line-height: 1; 
    text-decoration: none;
}

.exportable-quoter .quoter-body{ background: #415464; padding: 0; }
.exportable-quoter .quoter-body form{ padding: 0;  }
.exportable-quoter .quoter-footer{ background: #415464; padding: 2px 15px 12px 15px; }

.exportable-quoter .quoter-footer a.quoter-telephone {
    color: #ffffff;
    font-family: 'Raleway', sans-serif;
    font-size: 1.4rem;
    font-weight: bold;    
    display: inline-block;
    margin: 0 auto;
    text-align: center;
    width: 100%;
    text-decoration: underline;
}

.exportable-quoter .quoter-footer a.quoter-telephone:focus { background-color: #fff; color: #0094D2; }

/** SOGEMEC 250X250 MEDECIN ET NOTAIRE **/
.exportable-quoter.quoter-250x250{ height: 250px; width: 250px; }

.exportable-quoter.quoter-250x250 .quoter-header.medecin {
    background: url('https://www.lapersonnelle.com/documents/11361124/18244859/bg-header-sogemec-medecin.jpg/72d92abb-bb0a-9855-58a6-74d10fddf13e?t=1543436520069') no-repeat top;
    padding: 15px 15px;
}

.exportable-quoter.quoter-250x250 .quoter-header.notaire {
    background: url('https://www.lapersonnelle.com/documents/11361124/18244859/bg-header-sogemec-notaire.jpg/44d4cd4a-edb6-f64f-fd1d-e070026ab258?t=1543436520511') no-repeat top;
    padding: 15px 15px;
}

.exportable-quoter.quoter-250x250 .quoter-header .quoter-slogan{
    color: #415464;  
    font-size: 1.8rem;
    line-height: 1.2;
}


.exportable-quoter.quoter-250x250 select{ font-size: 1.2rem; padding: 4px; }

/* Ajustements Next 2024 */
.next .field-postal-code {
    display: none;
}

.next .quoter-cta {
    height: 43px;
    padding-left: 0;
}

.next .exportable-quoter .quoter-field-inline.field-cta{
    padding-left: 0;
}