/* HTML5 ready */
article, aside, audio, canvas, datalist, details, dialog, figure, footer, header, menu, nav, section, video,
om-list, om-list-item, om-list-vins,  om-list-millesime {display: block;}
abbr, eventsource, mark, meter, time, progress, output {display: inline;}

*, *:after, *:before {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;margin: 0;padding: 0;}
img {border: 0;image-rendering: optimizeQuality;vertical-align: middle;-ms-interpolation-mode: bicubic;}
ul, ol, li {list-style : none;}
p {margin-bottom:0.8em}
table, table td {border-spacing: 0;	border-collapse: collapse;}
input:focus {outline : none;}
input[type="search"] {-webkit-appearance: none;-webkit-border-radius: 0;} 
input[type="button"]::-moz-focus-inner, button::-moz-focus-inner{border:0;padding:0;}
img, table, td, blockquote, code, pre, textarea, input {height: auto;max-width: 100%;}
a {cursor:pointer} 
*:focus {outline : none;}

@font-face {
  font-family: 'AvenirLTStd-Book';
  src: url(/includes/styles/fonts/AvenirLTStd-Book.eot);
  src: url(/includes/styles/fonts/AvenirLTStd-Book.eot?#iefix) format('embedded-opentype'),
       url(/includes/styles/fonts/AvenirLTStd-Book.otf) format('otf'),
       url(/includes/styles/fonts/AvenirLTStd-Book.svg#AvenirLTStd-Book) format('svg'),
       url(/includes/styles/fonts/AvenirLTStd-Book.ttf) format('truetype'),
       url(/includes/styles/fonts/AvenirLTStd-Book.woff) format('woff'),
       url(/includes/styles/fonts/AvenirLTStd-Book.woff2) format('woff2');
}

@font-face {
  font-family: 'AvenirLTStd-Light';
  src: url(/includes/styles/fonts/AvenirLTStd-Light.eot);
  src: url(/includes/styles/fonts/AvenirLTStd-Light.eot?#iefix) format('embedded-opentype'),
       url(/includes/styles/fonts/AvenirLTStd-Light.otf) format('otf'),
       url(/includes/styles/fonts/AvenirLTStd-Light.svg#AvenirLTStd-Light) format('svg'),
       url(/includes/styles/fonts/AvenirLTStd-Light.woff2) format('woff2'),
       url(/includes/styles/fonts/AvenirLTStd-Light.woff) format('woff'),
       url(/includes/styles/fonts/AvenirLTStd-Light.ttf) format('truetype');
}

@font-face {
  font-family: 'Franchise Goodkids';
  src: url(/includes/styles/fonts/Franchise-Goodkids.eot);
  src: url(/includes/styles/fonts/Franchise-Goodkids.eot?#iefix) format('embedded-opentype'),
       url(/includes/styles/fonts/Franchise-Goodkids.otf) format('otf'),
       url(/includes/styles/fonts/Franchise-Goodkids.svg#Franchise-Goodkids) format('svg'),
       url(/includes/styles/fonts/Franchise-Goodkids.ttf) format('truetype'),
       url(/includes/styles/fonts/Franchise-Goodkids.woff) format('woff'),
       url(/includes/styles/fonts/Franchise-Goodkids.woff2) format('woff2');
}



html {height:100vh;height: -webkit-fill-available;}
body {min-height:100vh;margin:0;padding:0;background:url('/includes/images/background.png') no-repeat;background-size:cover;padding-bottom:20px}
body > header {width:100vw;position:relative}
body > header img {margin:32px;width:280px}
body > nav.flags {position:absolute;top:16px;right:16px}
body > nav.flags img {cursor:pointer;margin-right:16px;opacity:.5}
body > nav.flags img.selected {opacity:1}
body > section {width:1000px;height:760px;margin:auto;border-radius:3px}
body > section ng-view {height:100%}
body > div.loader.hidden {opacity:0; pointer-events:none}
body > footer {width:100vw}
body > footer > a {text-decoration:none;text-transform:uppercase;font-size:100%;color:#fff;margin: 48px 20px 10px 20px;}
body > footer > nav.flags {display:none}


h1 {text-transform:uppercase}
input {padding:4px;border:solid 1px #000;border-radius:4px}

/* Mixim */
.anim {
    -webkit-transition: all 0.5s cubic-bezier(0.25, 0.1, 0.25, 1); 
       -moz-transition: all 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);  
         -o-transition: all 0.5s cubic-bezier(0.25, 0.1, 0.25, 1); 
            transition: all 0.5s cubic-bezier(0.25, 0.1, 0.25, 1)}

.p8 {padding:8px}
.p16 {padding:16px}
.p32 {padding:32px}

.box-border {border-radius:4px;border:solid 1px #313d40}
.box-border input {padding:15px}
.disable {opacity:.4;}
.disable:not(.box-border) {pointer-events:none;cursor:default}
.box-border.disable > *:not(svg) {pointer-events:none;cursor:default}

input {border:none}

/** Material overwrite **/
.md-button {padding: 8px 16px;border-radius: 6px;}
md-content.md-default-theme, md-content {background-color:#fff}
md-ink-bar {height:5px}
.md-tab {font-weight:200}
.md-datepicker-input-container {width:100%;border:none !important;padding: 14px 12px;}
.md-datepicker-input-container button {margin-right:22px !important;top:6px;}
.md-datepicker-input-container input.md-datepicker-input {padding:0;}
.md-datepicker-input-mask {background-color:transparent}
md-select {padding: 8px 12px;margin:0}
md-select md-select-value {border:none !important;}
.md-button.md-default-theme.md-primary *, .md-button.md-primary * {color: inherit}
md-tab-content {transform:none !important} /* suppression des effets de transition */
.md-calendar-date-selection-indicator {border: 1px solid rgb(55, 71, 79)}
md-checkbox.md-checked .md-icon::after {content:' '}

/*** FONTS ****/
* { font-family: 'AvenirLTStd-Light';}
.md-button {font-weight:400}
body {font-size:15px;line-height:24px}


/**** COLORS ****/
md-dialog a.button {color: #fff;background-color: #313d40 !important;color: #fff !important}
.md-button.md-primary {background-color: #313d40 !important;color: #fff !important}
.md-button[disabled] {background-color: #dddddd !important;pointer-events:none;cursor:default;opacity: 0.4}
.md-button.md-primary[disabled] {background-color: #dddddd !important;pointer-events:none;cursor:default}
.md-button:not([disabled]):hover {background-color: #313d40 !important;color: #fff !important}
.md-button.md-primary:not([disabled]):hover {background-color: #313d40 !important;color: #fff !important}
.md-button.md-focused {background-color: #313d40 !important;color: #fff !important}
.md-button.md-primary.md-focused {background-color: #313d40 !important;color: #fff !important}

md-tabs.md-default-theme md-ink-bar, md-tabs md-ink-bar {background:#809296}
md-tabs.md-default-theme.md-primary>md-tabs-wrapper, md-tabs.md-primary>md-tabs-wrapper {background-color:#313d40}
md-tab-item {color: #fff !important}

.md-default-theme .md-calendar-date.md-calendar-selected-date .md-calendar-date-selection-indicator, 
.md-calendar-date.md-calendar-selected-date .md-calendar-date-selection-indicator, 
.md-default-theme .md-calendar-date.md-focus.md-calendar-selected-date .md-calendar-date-selection-indicator, 
.md-calendar-date.md-focus.md-calendar-selected-date .md-calendar-date-selection-indicator { background: #313d40 }

body.md-default-theme, body, html.md-default-theme, html, *,
md-content.md-default-theme, md-content {color:#191f21}

.error {color:#c40}

body > section.login {background-color: #fff}
body > section.home {background-color: #313d40}
body > section.home .md-button.md-primary, body > section.home .md-button.md-primary:hover{background-color: #fff !important; color: #313d40 !important}
body > section.login div.box-border svg path {fill:#809296}
body > section.reservation {background-color: #fff}
body > section.reservation md-content.tab-2 .sep {background-color: #313d40}
body > section.reservation md-content.tab-2 .right .participant > div.img svg.selected path {fill:#ff6a00}
body > section.reservation .command-container {padding:8px}
body > section.reservations {background-color: #fff}
body > section.reservations .top {color: #fff;background-color: #313d40}
body > section.reservations .top button svg path {fill:#fff}
body > section.reservations .top button:hover svg path {fill:#809296}
body > section.reservations .top-buttons .md-button {border: #313d40 solid 1px}
body > section.reservations .top-buttons svg path {fill:#313d40}
body > section.reservations .content table thead th {background-color:#ddd;}
body > section.reservations .content table tbody td {border-bottom:solid 1px #ccc}
body > section.contact {background-color: #fff}
body > section.legal {background-color: #fff}
body > section.closed {background-color: #fff}


/**** PAGES ****/

/* PUBLIC */
body > section.public {}
body > footer.public {display:none}

/* LOGIN */
body > section.login {width:480px;height:auto;padding:32px}
body > section.login div.cookie-message {min-height:168px;}
body > section.login div.cookie-message > div:first-of-type {margin:8px;}
body > section.login h1 {text-align:center;}
body > section.login label {display:block;margin:8px 0}
body > section.login input {width:100%}
body > section.login div.error-message {margin:16px 0;}
body > section.login div.error-message * {color:#c40}
body > section.login div.lost-pass {margin-top:8px}
body > section.login div.lost-pass > a, body > section.login div.lost-pass > a:hover {text-decoration: underline;padding:0}
body > section.login div.box-border {position:relative;}
body > section.login div.box-border svg {position:absolute;right:10px;left:auto;top:10px;cursor:pointer;height:24px}


/* HOME */
body > section.home {height:482px;}
body > section.home div.left {}
body > section.home div.left img {width: 100%}
body > section.home div.right {}
body > section.home div.right > div {color:#fff}
body > section.home div.title {font-family: 'Franchise Goodkids';font-size: 22px;text-transform: uppercase;text-align: center;letter-spacing: 0.1em;line-height: 28px;}
body > section.home div.estates {font-family: 'Franchise Goodkids';font-size: 46px;text-transform: uppercase;text-align: center;margin-bottom: 19px;line-height: 48px;letter-spacing: 0.05em;}
body > section.home div.main {}
body > section.home .md-button.md-default-theme.md-primary, .md-button.md-primary {background-color: #313d40;color: #fff} 


/* RESERVATION */
body > section.reservation {line-height: 1.3em}
body > section.reservation div.title {font-size:110%;text-transform:uppercase;font-weight:600}
body > section.reservation md-content {padding:32px;min-height: 100%;}
body > section.reservation .command-container .legal {padding:0 16px;font-size:80%}
/* reservation */
body > section.reservation md-content.tab-0 .row {margin-top:16px}
body > section.reservation md-content.tab-0 .left {padding-right:16px}
body > section.reservation md-content.tab-0 .right {padding-left:16px}
body > section.reservation md-content.tab-0 .with-icon > img {height:32px}
body > section.reservation md-content.tab-0 .row3 {margin-bottom:32px;padding:8px}
body > section.reservation md-content.tab-0 .row3 > .subtitle {font-weight:600}
body > section.reservation md-content.tab-0 .row3 > div:not(.subtitle) {margin:8px 0}
body > section.reservation md-content.tab-0 .lunchDescription {margin:32px;text-align:center}
/* contact */
body > section.reservation md-content.tab-1 .findMessage {margin:16px 0;text-align:center}
body > section.reservation md-content.tab-1 .emailMessage {margin:16px 0;text-align:center;font-style:italic}
body > section.reservation md-content.tab-1 .row {margin-top:16px;}
body > section.reservation md-content.tab-1 .row label {text-transform:capitalize;}
body > section.reservation md-content.tab-1 .row > div {padding:8px 16px;}
body > section.reservation md-content.tab-1 .row > div .box-border {margin-top:8px;position:relative}
body > section.reservation md-content.tab-1 .row div.disable svg.clear-contact {width:18px;cursor:pointer;position:absolute;right:8px;top:12px}

/* participants */
body > section.reservation md-content.tab-2 .left .fields {margin-bottom:16px}
body > section.reservation md-content.tab-2 .left .fields > div {margin-top:8px}
body > section.reservation md-content.tab-2 .left .fields > div  .box-border {margin-top:8px}
body > section.reservation md-content.tab-2 .left .isResponsible {margin-bottom:16px;padding-top:8px}
body > section.reservation md-content.tab-2 .left .AddParticipant div {font-size:90%}
body > section.reservation md-content.tab-2 .sep {width:3px;margin:64px 16px}
body > section.reservation md-content.tab-2 .right .title {margin-bottom:8px}
body > section.reservation md-content.tab-2 .right .participant {margin:8px}
body > section.reservation md-content.tab-2 .right .participant > div.name {margin-left:16px}
body > section.reservation md-content.tab-2 .right .participant > div.name.underline {text-decoration:underline}
body > section.reservation md-content.tab-2 .right .participant > div.img {width:16px;margin-left:16px}
body > section.reservation md-content.tab-2 .right .participant > div.img svg {width:16px;cursor:pointer}
body > section.reservation md-content.tab-2 .right .participant > div.img svg.selected path {fill:#ff6a00}
/* summary */
body > section.reservation md-content.tab-3 .title {margin:16px 0}
body > section.reservation md-content.tab-3 .title2 {margin-top:32px}
body > section.reservation md-content.tab-3 .sub-title {margin:16px 0;font-weight:600}
body > section.reservation md-content.tab-3 .value {margin: 16px 16px}
body > section.reservation md-content.tab-3 .value .label {display:inline-block;font-weight:600}
body > section.reservation md-content.tab-3 .value .label:first-letter {text-transform:uppercase}
body > section.reservation md-content.tab-3 .value .field {margin-bottom:8px}
/* validation */
body > section.reservation md-content.tab-3.validate .title {margin:0;text-align:center}
body > section.reservation md-content.tab-3.validate .message {margin:32px 0;text-align:center;width:460px;line-height: 1.3em;}
body > section.reservation md-content.tab-3.validate .md-button {margin:16px}
body > section.reservation md-content.tab-3.validate .md-button.bt50 {width:290px}
body > section.reservation md-content.tab-3.validate .md-button.bt100 {width:612px}
div[ng-repeat="participant"]{line-height: 1.6em;}


/* RESERVATIONS */
body > section.reservations {}
body > section.reservations .top {padding:16px;text-transform:uppercase}
body > section.reservations .top div {color: inherit}
body > section.reservations .top button {margin:0;margin-left:16px;padding:0;line-height: unset;min-width:auto;min-height:auto}
body > section.reservations .top button:hover {background-color:transparent !important}
body > section.reservations .top button svg {height:24px}
body > section.reservations .content {padding:32px;overflow-y:auto}
body > section.reservations .content .title {font-size:20px;text-transform:uppercase;text-align:center;font-weight:600;margin:32px}
body > section.reservations .content .top-buttons {margin: 32px 0;}
body > section.reservations .content .top-buttons .md-button {text-transform:none;padding:0 8px}
body > section.reservations .content .top-buttons .md-button svg {height:16px;margin-right:8px}
body > section.reservations .content .top-buttons .md-button:hover,body > section.reservations .content .top-buttons .md-button:hover *,body > section.reservations .top-buttons .md-button:hover svg path {fill: #fff;color:#fff !important;}
body > section.reservations .content table {width:100%}
body > section.reservations .content table thead th {padding:12px;font-weight:400;width:15%;text-align:left}
body > section.reservations .content table thead th.select {width:28px;}
body > section.reservations .content table thead th.date,
body > section.reservations .content table thead th.creation {width:100px;}
body > section.reservations .content table tbody td {padding:12px;}
body > section.reservations .content table tbody td.estate {width:80px;} {padding:8px;}
body > section.reservations .command-container {padding:32px;}

.dialog-summary {width:400px}
.dialog-summary md-dialog-content {min-height:400px;padding:32px}
.dialog-summary md-dialog-content label {font-weight:600;display:block;margin-top:16px}
.dialog-summary md-dialog-content div.value {/*margin-left:16px;*/line-height: 1.3em;}
.dialog-summary md-dialog-content div.value > div {margin-top:8px}

/* CONTACT */
body > section.contact {padding: 16px;text-align: center;height: 600px !important}
body > section.contact > ng-view > div > div {margin:80px 0px}
body > section.contact h1 {margin-top:32px;font-weight:600}
body > section.contact h1.center {text-align:center;display:none}
body > section.contact .sub-title {margin-top:24px 0;font-weight:600}

/* CGV */
body > section.legal {padding:32px 16px 32px 32px;height: 600px !important}
body > section.legal h1 {margin: 32px 0px 18px 0;font-weight:600}
body > section.legal h1.center {text-align:center}
body > section.legal .content {overflow-y:auto;padding-right:16px;padding-bottom:32px}

/* CLOSED */
body > section.closed {width:574px;height:auto;

@media  (max-width:900px) {
    html, body {height:100dvh; margin: 0}
    /*html {height: -webkit-fill-available}*/
    body {padding:0 20px}
    body > header {padding-top:20px }
    body > header img {width: 140px}
    body > nav.flags {top: 10px;right: 0px}
    body > nav.flags > div {}
    body > nav.flags img {width: 30px}
    body > section {width:100%}
    body > section.login{width:100%;padding: 64px 32px;}
    body > section.login > ng-view > ng-form > div:first-of-type {margin: 8px;}
    body > section.login div.lost-pass > button {margin-left:0px}
    body > section.login h1 {margin-bottom: 30px}
    body > footer > a {text-decoration:none;text-transform:uppercase;font-size:90%;color:#fff;margin: 16px 10px;text-align:center;flex:none !important}
    
    body > nav.flags {display:none}
    body > footer > nav.flags {display:block}
    body > footer > nav.flags img {cursor:pointer;margin-right:16px;opacity:.5}

   
    md-select {align-content:unset}
    md-radio-group.layout-row md-radio-button {margin: 10px 32px 0 20px}
    .box-border{margin-bottom:10px}
    .box-border input {padding: 8px}
    

    /* LOGIN */
    body > section.login {padding:12px}
    body > section.login div.box-border svg {top:4px}

    /* HOME */
    body.home > header > img {display:none}
    body > section.home {height:auto}
    body > section.home div.left {display:none}
    body > section.home div.estates {font-size: 32px;margin-bottom:6px;line-height: 41px}
    body > section.home div.main {}
    body > section.home .md-button.md-default-theme.md-primary, .md-button.md-primary {background-color: #313d40;color: #fff} 
    body > section.home div.command-container {flex-direction: column;}
    body > footer.home {position:initial}

    /* FULLSCREEN */
    body > section.reservation,
    body > section.reservations,
    body > section.contact,
    body > section.legal {position:absolute;top:0;left:0;width:100vw;min-height:100dvh;height:auto;z-index:1}

    /* RESERVATION */
    body > section.reservation .md-tab {padding: 12px 4px;font-size: 12px}
    body > section.reservation md-content {padding:16px;overflow-x:hidden}
    body > section.reservation div.title {margin-bottom:10px}
    body > section.reservation md-content.tab-0 .row3 > div:not(.subtitle) {padding-left: 4px}
    body > section.reservation md-content.tab-0 .row {margin-top:0}
    body > section.reservation md-content.tab-0 md-radio-group {width:auto;padding-left:10px}
    body > section.reservation .legal {padding-top:16px;font-size:80%}

    body > section.reservation md-content.tab-0 .left {max-width: 100%;padding-right:0px}
    body > section.reservation md-content.tab-0 .right {max-width: 100%;padding-left:0px}
    body > section.reservation md-content.tab-1 .row > div {padding: 0px 16px;}
    body > section.reservation md-content.tab-1 .row > div .box-border {margin-top:2px}
    body > section.reservation md-content.tab-2 .left .fields > div {margin-top: 2px}
    body > section.reservation md-content.tab-2 .sep {margin: 16px 16px}
    body > section.reservation md-content.tab-3.validate .md-button.bt50 {width: 100%;max-width: 100%}
    body > section.reservation md-content.tab-3.validate .md-button.bt100 {width: 100%;white-space: normal;max-width: 80%}

    /* RESERVATIONS */
    body > section.reservations .md-tab {padding: 12px 4px;font-size: 12px}
    body > section.reservations .top div {font-size: 90%}
    body > section.reservations .top div:last-of-type {display:none}
    body > section.reservations .content {padding: 0 16px}
    body > section.reservations .content .title {display:none;margin:0}
    body > section.reservations .content .top-buttons {margin: 16px 0;align-items:flex-start}
    body > section.reservations .content table thead th {padding: 4px;font-size: 80%;text-align:center;width:25%}
    body > section.reservations .content table thead th.estate {width:30%}
    body > section.reservations .content table th.count,body > section.reservations .content table th.creation,body > section.reservations .content table td.count,body > section.reservations .content table td.creation {display:none}
    body > section.reservations .content table tbody td {padding: 4px;text-align:center;font-size: 80%}
    body > section.reservations .content table tbody td.select md-checkbox .md-label {margin-left:0px}
        
    /* CONTACT */
    body > section.contact {padding:12px}
    body > section.contact div.flex {flex: unset;}
    body > section.contact h1:not(.center) {font-size:130%}
}