Here is an example of CSS for the scheduling widget, introducing a new look&feel:
:root{ /********** COLOR **********/ /* Button */ --bg-button:black; --bg-button-hover: black; --bg-button-active:white; --color-button: white; --color-button-hover: white; --color-button-active:black; /* Informations */ --info-title:black; --info-subtitle:black; --info-link:black; /* Title */ --title: black; --subtitle:black; /* Stepper */ --stepper-active: black; --stepper-inactive: #D0D7E2; /* Summary */ --bg-summary: black; --color-summary: white; /* List */ --bg-list-section : black; --color-list-section : white; --bg-list-tag : black; --color-list-tag : white; /* DatePicker */ --bg-timezone : black; --color-timezone : white; --bg-datepicker-hover: #D0D7E2; --color-datepicker-hover: black; --bg-datepicker-active: black; --color-datepicker-active: white; --bg-datepicker-active-hover: black; --color-datepicker-active-hover: white; --bg-slot-hover: black; --color-slot-hover: white; /* Grey */ --white:white; --grey-25:#F9F9FA; --grey-50:#F3F3F4; --grey-100:#E7E8EA; --grey-200:#CFD1D4; --grey-300:#B6B9BF; --grey-400:#9EA2AA; --grey-500: #868B95; --grey-600: #6E747F; --grey-700: #565D6A; --grey-800: #3D4555; --grey-900: #252E3F; --black:#0D172A; } html, body, div, span, applet, object, iframe, h1, h2, p, a, abbr, acronym, address, big, cite, del, dfn, font, img, ins, kbd, q, s, samp, small, strike, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {font-family:Arial; color:var(--grey-900);} #body-site {margin:0px; padding:24px;} #site {display:flex; flex-direction:row; background-color:var(--white); justify-content:center; align-items:stretch; width:auto; border-radius:8px; box-shadow: 0px 0px 20px rgba(204, 204, 204, 0.6); max-width:1000px; min-height:550px; position: relative;} #site .header {display:none;} #site .left { padding:24px; background:none; width:200px; border-right:1px solid var(--grey-100); margin-top:0px!important;} #site .left #logo {width:100%; margin-top: 24px;} #site .left .info .content * { margin:0;} #site .left .info .label { color: var(--info-title); font-weight: bold; font-size: 12px;} #site .left .info .content label {font-weight:normal;} #site .left .info.hours .day {display:flex; justify-content:space-between; flex-wrap:nowrap;} #site .left .info.hours .day.clearfix:before{content:unset;} #site .left .info.hours label {font-size:10px; width:auto;} #site .left .info.hours .day-list {float:none; display:inline-block;} #site .left .info.hours .day-list {float:none; display:inline-block; font-size:10px;} #site .left .info.hours .tz {color:var(--info-subtitle);} #site .left .info.hours .closed * {color:var(--grey-500);} #site .left .info.hours ul li{ margin:0} #site .left .info.address img{ width: 100%; height: 100px; object-fit: cover; object-position: 100% 50%;} #site .left a{color:var(--info-link);} #site .left a:hover {text-decoration:underline;} #site .center { margin:0px; flex:1; background:none; padding:0; display:flex; flex-direction:column;} #site .center #company-title { margin-left: 8px; margin-top: 8px;} #site .center #company-title h1{font-size:18px; font-weight:bold;} #site .center #company-title p{display:none;} #site .center .iframe-container {padding:0px; flex:1;} #site .center .iframe-container #iframe {border:0; height:100%; padding:0; margin:0; border-radius:0;} /************ WIDGET ************/ #widget {display:flex !important; flex-direction:column; height:100vh; background-color:var(--white);} /************ COMMON ************/ #widget .col-md-1, #widget .col-md-3, #widget .col-md-6 {width:auto;} /***************** HEADER *****************/ /* Title */ #widget .header { padding:16px 16px 8px 16px; min-height:0px; box-sizing: border-box; background-color:var(--white);} #widget .header h1{ color:var(--title);} #widget .header #title {margin:0px; padding:0px; color:var(--title);} #widget .header #subtitle {margin:0px; padding:0px; padding-top:8px; color:var(--subtitle);} /* Stepper */ #widget .header .nav-circles {color:var(--stepper-inactive); display:flex; flex-direction:row; align-items:center; justify-content:center; padding:0px; padding-top:16px; padding-bottom:8px} #widget .header .nav-circles .fa {font-family:Arial; counter-increment: step; width:24px; height:24px; margin:0px 4px; border-radius:50%; display:inline-block;} #widget .header .nav-circles .fa-circle {background-color:var(--stepper-active); border:1px solid var(--stepper-active); font-weight:bold;} #widget .header .nav-circles .fa-circle:before, #widget .header .nav-circles .fa-circle-thin:before {content: counter(step); line-height:24px; width:24px; height:24px; font-size:12px; font-style: normal;} #widget .header .nav-circles .fa-circle-thin {color:var(--stepper-active); background-color:var(--stepper-inactive); border:1px solid var(--stepper-inactive); } #widget .event-info {margin:0px 16px; padding:4px 16px; line-height: normal; min-height:0px; box-sizing: border-box; height:auto; background-color:var(--bg-summary); color:var(--color-summary); font-size:14px;} /************ PAGE ************/ #widget .page {flex:1; padding:16px; height:auto !important;} /************ SERVICES ************/ #services .group {cursor:pointer; background-color:var(--bg-list-section); color:var(--color-list-section); font-size:16px; padding:8px 24px 8px 8px; margin:4px 0px; position:relative; border-radius:4px;} #services .group i {font-size:14px; line-height:16px; position:absolute; right:8px; top:25%;} #services .group i.fa:before {content:"\f067"} #services .group i.fa-angle-down:before {content:"\f068"} /************ SERVICES OPTION ************/ #widget #services-options .fields-page {padding-top:0px !important; max-width:400px; margin:auto;} #widget #services-options .fields-page p{display:flex; flex-direction:column; width:100%;} #widget #services-options .fields-page p label{display:block; width:100%; float:none; margin-right:0px; margin-bottom:8px; font-weight:bold;} #widget #services-options .fields-page p select{width:100%;} /************ DATE ************/ #widget #date {height:auto !important; padding:16px 0px;} #widget #date .timezone {background-color:var(--bg-timezone); margin:0px; padding:8px 16px; margin:0px 16px; color:var(--color-timezone);} #widget #date .timezone #timezone {margin:0px; background-color:var(--bg-timezone); border:1px solid var(--color-timezone); border-radius:0px; color:var(--color-timezone);} #widget #date #date-page {margin-top:8px; display:flex; flex-direction:row; justify-content: center; flex-wrap:wrap;} #widget #date #months {box-sizing: border-box; width:auto; flex:1; min-width:250px; float:none; padding:0px 16px; margin-bottom:24px; overflow:visible !important;} #widget #date #months .date-header {height:auto;} #widget #date #months .month {max-width:300px; margin:auto; margin-bottom:40px;} #widget #date #months .month {margin:auto; margin-top:8px; margin-bottom:8px; } #widget #date #months .month .day span {width:24px; line-height:24px; padding:0px!important; display:block; margin: auto;} #widget #date #months .month .dday span {background-color:white; color:var(--grey-200)!important;} #widget #date #months .month .sday span {background-color:var(--bg-datepicker-active); color:var(--color-datepicker-active)!important;} #widget #date #months .month .day span:hover {background-color:var(--bg-datepicker-hover); color:var(--color-datepicker-hover); border-radius:4px;} #widget #date #months .month .dday span:hover {background-color:white;} #widget #date #months .month .sday span:hover {background-color:var(--bg-datepicker-active-hover); color:var(--color-datepicker-active-hover);} #widget #date #months p {font-size:12px !important;} #widget #date #dates {width:auto; margin:0px; flex:1; padding:0px 16px; min-width:250px;} #widget #date #dates #dates-block {height:auto !important;} #widget #date #dates #dates-block .table-dates {width:100%;} #widget #date #dates #dates-block .table-dates td {min-width:150px;} #widget #date #dates #dates-block .table-dates .list-dates {margin:0px; padding:0px;} #widget #date #dates #dates-block .table-dates .list-dates .button {width:100%; margin:4px 0px; height:30px; background-color:white; border:1px solid var(--grey-100); border-radius:4px;} #widget #date #dates #dates-block .table-dates .list-dates .button:hover {border:1px solid var(--bg-slot-hover); background-color:var(--bg-slot-hover); color:var(--color-slot-hover); box-shadow: none;} /************ FIELDS ************/ #widget #fields {padding-top:0px !important;} #widget #fields p {padding:0px; margin:0px; overflow:hidden;} #widget #fields .page-content {max-width:400px; margin:auto; height:auto;} #widget #fields #relationships-takefor-header {padding:0px; width:100%; margin:16px 0px 0px 0px;} #widget #fields #relationships-takefor-header p {font-size: 14px; margin-bottom:8px;} #widget #fields #relationships-takefor-header div {float:none !important;} #widget #fields #new-client {padding-top:16px; padding-bottom:8px;} #widget #fields #new-client p{display:flex; flex-direction:column; width:100%; position:relative;} #widget #fields #new-client p label{display:block; width:100%; float:none; margin-right:0px; margin-bottom:8px; font-weight:bold; line-height: normal;} #widget #fields #new-client p input[type=text]:not(.invalid_input), #widget #fields #new-client p input[type=password], #widget #fields #new-client p input[type=tel], #widget #fields #new-client p input[type=email], #widget #fields #new-client p input[type=password], #widget #fields #new-client p textarea, #widget #fields #new-client p select, #widget #fields #new-client input[type=text]:not(.invalid_input), #widget #fields #new-client input[type=password], #widget #fields #new-client input[type=tel], #widget #fields #new-client input[type=email], #widget #fields #new-client input[type=password], #widget #fields #new-client textarea, #widget #fields #new-client select {width:100%; margin-bottom:8px; box-sizing:border-box;} #widget #fields #new-client p .mand{position:absolute; top:0px; right:0px;} #widget #fields #new-client .intl-tel-input {display:block;} #widget #fields #new-client .intl-tel-input .selected-flag {display:flex; flex-direction:row; width:40px; justify-content:space-between; align-items: center; height:23px; padding:0px; padding-left:8px;} #widget #fields #new-client .intl-tel-input .selected-flag .iti-flag {display:block; position:relative; top:auto; bottom:auto; margin: inherit;} #widget #fields #new-client .intl-tel-input .selected-flag .iti-arrow {position: relative; top:auto; margin:0; right:auto;} #widget #fields #new-client .intl-tel-input .mand {position: absolute; top: -24px; right: 0px;} #widget #fields #new-client .other-optin {margin-top:8px !important;} #widget #fields #new-client .other-optin .responsive-label {float:none !important; font-weight:normal; box-sizing: border-box;} #widget #fields .label-marketing-consent label{float:none !important; font-weight:normal; box-sizing: border-box; width:100%;} #widget #fields #clt_new_error {background-color:rgb(255, 0, 0); padding:16px 8px; color:white !important; border-radius:4px; margin:8px 0px;} /************ RELATIONSHIP ************/ #widget #relationships {padding-top:0px !important; width:auto; margin:initial;} #widget #relationships p {padding:0px; margin:0px; overflow:hidden;} #widget #relationships .page-content {max-width:400px; margin:auto; height:auto;} #widget #relationships #radio-relationships {padding:0px; width:100%; margin:16px 0px;} #widget #relationships #new-client-relationships p{display:flex; flex-direction:column; width:100%; position:relative;} #widget #relationships #new-client-relationships p label{display:block; width:100%; float:none; margin-right:0px; margin-bottom:8px; padding-top : 0px; font-weight:bold; line-height: normal; text-align:left;} #widget #relationships #new-client-relationships p input[type=text]:not(.invalid_input), #widget #relationships #new-client-relationships p input[type=password], #widget #relationships #new-client-relationships p input[type=tel], #widget #relationships #new-client-relationships p input[type=email], #widget #relationships #new-client-relationships p input[type=password], #widget #relationships #new-client-relationships p textarea, #widget #relationships #new-client-relationships p select, #widget #relationships #new-client-relationships input[type=text]:not(.invalid_input), #widget #relationships #new-client-relationships input[type=password], #widget #relationships #new-client-relationships input[type=tel], #widget #relationships #new-client-relationships input[type=email], #widget #relationships #new-client-relationships input[type=password], #widget #relationships #new-client-relationships textarea, #widget #relationships #new-client-relationships select {width:100%; margin-bottom:8px; box-sizing:border-box;} #widget #relationships #new-client-relationships p .mand{position:absolute; top:0px; right:0px;} #widget #relationships #relationships_error{background-color:rgb(255, 0, 0); padding:16px 8px; color:white !important; border-radius:4px; margin:8px 0px;} /************ EXISTING CLIENT ************/ #widget #fields #existing-client {width:100%; padding-top:16px; padding-bottom:8px;} #widget #fields #existing-client p{display:flex; flex-direction:column; width:100%; position:relative; overflow:hidden;} #widget #fields #existing-client p label{display:block; width:100%; float:none; margin-right:0px; margin-bottom:8px; line-height: normal;} #widget #fields #existing-client p input[type=text]:not(.invalid_input), #widget #fields #existing-client p input[type=password], #widget #fields #existing-client p input[type=tel], #widget #fields #existing-client p input[type=email], #widget #fields #existing-client p input[type=password], #widget #fields #existing-client p textarea, #widget #fields #existing-client p select, #widget #fields #existing-client input[type=text]:not(.invalid_input), #widget #fields #existing-client input[type=password], #widget #fields #existing-client input[type=tel], #widget #fields #existing-client input[type=email], #widget #fields #existing-client input[type=password], #widget #fields #existing-client textarea, #widget #fields #existing-client select {width:100%; margin-bottom:8px; box-sizing:border-box;} #widget #fields #existing-client p .mand{position:absolute; top:0px; right:0px;} #widget #fields #existing-client .intl-tel-input {display:block;} #widget #fields #existing-client .intl-tel-input .selected-flag {display:flex; flex-direction:row; width:40px; justify-content:space-between; align-items: center; height:23px; padding:0px; padding-left:8px;} #widget #fields #existing-client .intl-tel-input .selected-flag .iti-flag {display:block; position:relative; top:auto; bottom:auto; margin: inherit;} #widget #fields #existing-client .intl-tel-input .selected-flag .iti-arrow {position: relative; top:auto; margin:0; right:auto;} #widget #fields #existing-client .intl-tel-input .mand {position: absolute; top: -24px; right: 0px;} #widget #fields #existing-client .other-optin {margin-top:8px;} #widget #fields #existing-client .checkbox label {padding-left:30px !important;} #widget #fields #existing-client .other-optin .responsive-label {float:none !important; font-weight:normal; box-sizing: border-box;} #widget #fields #existing-client .new {position:relative;} /************ CUSTOM FIELD ************/ #widget #fields-1 {padding-top:0px !important; width:auto;} #widget #fields-1 p {padding:0px; margin:0px; overflow:hidden;} #widget #fields-1 .page-content {max-width:400px; margin:auto; height:auto;} #widget #fields-1 #radio-relationships {padding:0px; width:100%; margin:16px 0px;} #widget #fields-1 p, #widget #fields-1 div {display:flex; flex-direction:column; width:100%; position:relative;} #widget #fields-1 p label, #widget #fields-1 div label{display:block; width:100%; float:none; margin-right:0px; margin-bottom:8px; padding-top : 0px; font-weight:bold; line-height: normal; text-align:left;} #widget #fields-1 p input[type=text]:not(.invalid_input), #widget #fields-1 p input[type=password], #widget #fields-1 p input[type=tel], #widget #fields-1 p input[type=email], #widget #fields-1 p input[type=password], #widget #fields-1 p textarea, #widget #fields-1 p select, #widget #fields-1 input[type=text]:not(.invalid_input), #widget #fields-1 input[type=password], #widget #fields-1 input[type=tel], #widget #fields-1 input[type=email], #widget #fields-1 input[type=password], #widget #fields-1 textarea, #widget #fields-1 select {width:100%; margin-bottom:8px; box-sizing:border-box;} #widget #fields-1 p .mand, #widget #fields-1 .mand{position:absolute; top:0px; right:0px;} #widget #fields-1 .az_list {margin:0px;} #widget #fields-1 .az_list li{margin-left:0px;} #widget #fields-1 .az_list .checkbox {margin:0px;} #widget #fields-1 .az_list li{margin-left:0px;} #widget #fields-1 .az_list .radio {margin:0px;} #widget #fields-1 .title {font-size:16px;} /************ CONFIRMATION ************/ #widget #confirmation .page-content {max-width:400px; margin:auto; height:auto;} /************ PAIEMENT ************/ #widget .payment-box:hover { border: solid 1px var(--bg-button);} /******************************* LISTS *******************************/ ul.items {margin:0; padding:0; list-style:none;} ul.items li {padding:16px; cursor:pointer; border:1px solid #E7E7E7; margin:8px 0px; border-bottom-color:#F3F3F3!important; border-radius:4px; min-height:auto;} ul.items li:hover {background-color:#F3F3F3;} ul.items li .row {display:grid; justify-self: center; grid-template-areas: "a b b" "a c d"; grid-template-columns: auto auto 1fr; column-gap: 16px; row-gap:16px;} ul.items li .row.clearfix:before, .clearfix:after {content:normal;} ul.items div:first-of-type {align-self:center; grid-area:a;} ul.items img {width:auto; width:100px; height:auto; align-self:center; padding-right:0px;} ul.items li .item {align-self:center; grid-area:b;} ul.items li .item * {line-height:normal; margin-left:0px; margin-top:0px;} ul.items li *[id^='service-'][id$='-name'],ul.items li *[id^='staff-'][id$='-name'] {font-size:16px; font-weight:bold; line-height:normal;} ul.items li p {font-size:14px; font-style: italic; color:#5A5A5A;} ul.items li .desktop, ul.items li .price {align-self:center; font-weight:bold; padding:4px 8px; background-color:var(--bg-duration); color:var(--color-duration); justify-self:left; width:auto;} ul.items li .desktop {grid-area:c;} ul.items li .price {grid-area:d; } /* Tag */ #widget .items li .row .desktop, #widget .items li .row .price{padding:4px 8px; background-color:var(--bg-list-tag); border-radius:4px; margin:0; line-height:16px; box-sizing: border-box; color: var(--color-list-tag);} #widget .items li .row .desktop span, #widget .items li .row .price {color:var(--color-list-tag); line-height:16px;} #widget .items li .row .desktop:empty, #widget .items li .row .price:empty{background:none;} #widget .items .row p {margin:0px;} /* STAFF LIST */ ul.items#stafflist li .row { grid-template-areas: "a b" "a c"; grid-template-columns: 80px 1fr; grid-template-rows: auto auto; column-gap: 16px; row-gap: 8px;} ul.items#stafflist .staff-img-container img{height:auto; width:80px;} ul.items#stafflist li .price {grid-area:c;} /************ BUTTON ************/ #widget #bbuttons {background-color:var(--white); height:auto; padding:8px 16px; display:flex !important; flex-direction:row; justify-content:space-between;} /* Primary Button */ #widget .az-btn-blue, #widget #bbuttons .az-btn-blue, #widget #bbuttons #submit-widget{padding:0px 16px; height:36px; border-radius:4px; background-color:var(--bg-button); color:var(--color-button); border:1px solid var(--bg-button); margin:0px; text-transform: none; font-size:12px;} #widget .az-btn-blue:hover, #widget #bbuttons .az-btn-blue:hover, #widget #bbuttons #submit-widget:hover{ background-color:var(--bg-button-hover); border:1px solid var(--bg-button-hover); transition-duration: 0.7s; color:var(--color-button-hover);} #widget .az-btn-blue:active, #widget #bbuttons .az-btn-blue:active, #widget #bbuttons #submit-widget:active{background-color:var(--bg-button-active); border:1px solid var(--bg-button-active); transition-duration: 0.7s; color:var(--color-button-active);} /* Secondary Button */ #widget #bbuttons .az-btn-previous {background-color: var(--white); color: var(--bg-button); border:1px solid var(--bg-button); padding:0px 16px; height:34px; border-radius:4px; text-transform: none; font-size:12px;} #widget #bbuttons .az-btn-previous:hover {border:1px solid var(--bg-button-hover); transition-duration: 0.7s; color: var(--bg-button-hover);} #widget #bbuttons .az-btn-previous:active {border:1px solid var(--bg-button-active); transition-duration: 0.7s; color: var(--bg-button-active);} /* Button OK */ #widget .az-btn-pos {border:1px solid #4caf50; padding:5px 16px; border-radius:0px; background-color:#4caf50; color:var(--white); margin:0px;} #widget .az-btn-pos:hover {border:1px solid #388e3c; padding:5px 16px; border-radius:4px; background-color:#388e3c; color:var(--white); margin:0px;transition-duration: 0.7s;} /* Button KO */ #widget .az-btn-neg{border:1px solid #f44336; padding:5px 16px; border-radius:4px; background-color:#f44336; color:var(--white); margin:0px;} #widget .az-btn-neg:hover{border:1px solid #d32f2f; padding:5px 16px; border-radius:4px; background-color:#d32f2f; color:var(--white); margin:0px; transition-duration: 0.7s;} /************ FOOTER ************/ #widget .footer {background-color:var(--white); height:auto; padding:4px 8px; display:flex; flex-direction:row; justify-content:center; border-top:1px solid var(--grey-100);} #widget .footer a {text-transform:none; text-decoration:none;} #widget .footer a:hover {text-transform:none; text-decoration:underline;} #widget .footer #powered_by_agendize {text-transform:none;} /************ PRIVACY ************/ #widget .privacy {position:aboslute; bottom: 8px; left: 8px; height:auto;} /************ CLOSE ************/ #close {color:var(--grey-900);} /************ MOBILE ************/ @media screen and (max-width: 400px) { #widget .event-info {margin:0px 8px;} #widget .page {padding:16px 8px;} #widget .items li *{ line-height: normal;} #widget .items li .row img {padding:0px; height:auto;} #widget #date .timezone #timezone {margin-top:8px;} #widget #date .timezone {margin:0px 8px;} #widget #date #months {padding:0px 8px} #widget #date #dates {padding:0px 8px} #widget #bbuttons {padding:8px 8px;} } @media screen and (max-width: 415px) { ul.items li * { display:block; } #widget .col-md-6 p, #widget .col-md-6 span, #staffs .col-md-6 p, #staffs .col-md-6 span { display:block; } } @media only screen and (min-width: 600px) { #widget #date {overflow-y: auto!important;} } @media only screen and (max-width: 700px) { #widget #fields #new-client .intl-tel-input .selected-flag {bottom:auto;} } @media only screen and (max-width: 600px) { ul.items li .row { grid-template-areas: "a a a" "b b b" "c d e"; grid-template-columns: auto auto 1fr; grid-template-rows: auto 1fr auto; row-gap: 16px;} ul.items div:first-of-type {grid-area:a;} ul.items img {width:auto; max-height:100px; justify-self:center;} ul.items li .item {grid-area:b;} ul.items .desktop {justify-self:left; grid-area:c;} ul.items li .price {justify-self:left; grid-area:d;} } #widget .items li .row .price { line-height: 1.4 !important;}
Clément Lejeune
Here is an example of CSS for the scheduling widget, introducing a new look&feel:
:root{ /********** COLOR **********/ /* Button */ --bg-button:black; --bg-button-hover: black; --bg-button-active:white; --color-button: white; --color-button-hover: white; --color-button-active:black; /* Informations */ --info-title:black; --info-subtitle:black; --info-link:black; /* Title */ --title: black; --subtitle:black; /* Stepper */ --stepper-active: black; --stepper-inactive: #D0D7E2; /* Summary */ --bg-summary: black; --color-summary: white; /* List */ --bg-list-section : black; --color-list-section : white; --bg-list-tag : black; --color-list-tag : white; /* DatePicker */ --bg-timezone : black; --color-timezone : white; --bg-datepicker-hover: #D0D7E2; --color-datepicker-hover: black; --bg-datepicker-active: black; --color-datepicker-active: white; --bg-datepicker-active-hover: black; --color-datepicker-active-hover: white; --bg-slot-hover: black; --color-slot-hover: white; /* Grey */ --white:white; --grey-25:#F9F9FA; --grey-50:#F3F3F4; --grey-100:#E7E8EA; --grey-200:#CFD1D4; --grey-300:#B6B9BF; --grey-400:#9EA2AA; --grey-500: #868B95; --grey-600: #6E747F; --grey-700: #565D6A; --grey-800: #3D4555; --grey-900: #252E3F; --black:#0D172A; } html, body, div, span, applet, object, iframe, h1, h2, p, a, abbr, acronym, address, big, cite, del, dfn, font, img, ins, kbd, q, s, samp, small, strike, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {font-family:Arial; color:var(--grey-900);} #body-site {margin:0px; padding:24px;} #site {display:flex; flex-direction:row; background-color:var(--white); justify-content:center; align-items:stretch; width:auto; border-radius:8px; box-shadow: 0px 0px 20px rgba(204, 204, 204, 0.6); max-width:1000px; min-height:550px; position: relative;} #site .header {display:none;} #site .left { padding:24px; background:none; width:200px; border-right:1px solid var(--grey-100); margin-top:0px!important;} #site .left #logo {width:100%; margin-top: 24px;} #site .left .info .content * { margin:0;} #site .left .info .label { color: var(--info-title); font-weight: bold; font-size: 12px;} #site .left .info .content label {font-weight:normal;} #site .left .info.hours .day {display:flex; justify-content:space-between; flex-wrap:nowrap;} #site .left .info.hours .day.clearfix:before{content:unset;} #site .left .info.hours label {font-size:10px; width:auto;} #site .left .info.hours .day-list {float:none; display:inline-block;} #site .left .info.hours .day-list {float:none; display:inline-block; font-size:10px;} #site .left .info.hours .tz {color:var(--info-subtitle);} #site .left .info.hours .closed * {color:var(--grey-500);} #site .left .info.hours ul li{ margin:0} #site .left .info.address img{ width: 100%; height: 100px; object-fit: cover; object-position: 100% 50%;} #site .left a{color:var(--info-link);} #site .left a:hover {text-decoration:underline;} #site .center { margin:0px; flex:1; background:none; padding:0; display:flex; flex-direction:column;} #site .center #company-title { margin-left: 8px; margin-top: 8px;} #site .center #company-title h1{font-size:18px; font-weight:bold;} #site .center #company-title p{display:none;} #site .center .iframe-container {padding:0px; flex:1;} #site .center .iframe-container #iframe {border:0; height:100%; padding:0; margin:0; border-radius:0;} /************ WIDGET ************/ #widget {display:flex !important; flex-direction:column; height:100vh; background-color:var(--white);} /************ COMMON ************/ #widget .col-md-1, #widget .col-md-3, #widget .col-md-6 {width:auto;} /***************** HEADER *****************/ /* Title */ #widget .header { padding:16px 16px 8px 16px; min-height:0px; box-sizing: border-box; background-color:var(--white);} #widget .header h1{ color:var(--title);} #widget .header #title {margin:0px; padding:0px; color:var(--title);} #widget .header #subtitle {margin:0px; padding:0px; padding-top:8px; color:var(--subtitle);} /* Stepper */ #widget .header .nav-circles {color:var(--stepper-inactive); display:flex; flex-direction:row; align-items:center; justify-content:center; padding:0px; padding-top:16px; padding-bottom:8px} #widget .header .nav-circles .fa {font-family:Arial; counter-increment: step; width:24px; height:24px; margin:0px 4px; border-radius:50%; display:inline-block;} #widget .header .nav-circles .fa-circle {background-color:var(--stepper-active); border:1px solid var(--stepper-active); font-weight:bold;} #widget .header .nav-circles .fa-circle:before, #widget .header .nav-circles .fa-circle-thin:before {content: counter(step); line-height:24px; width:24px; height:24px; font-size:12px; font-style: normal;} #widget .header .nav-circles .fa-circle-thin {color:var(--stepper-active); background-color:var(--stepper-inactive); border:1px solid var(--stepper-inactive); } #widget .event-info {margin:0px 16px; padding:4px 16px; line-height: normal; min-height:0px; box-sizing: border-box; height:auto; background-color:var(--bg-summary); color:var(--color-summary); font-size:14px;} /************ PAGE ************/ #widget .page {flex:1; padding:16px; height:auto !important;} /************ SERVICES ************/ #services .group {cursor:pointer; background-color:var(--bg-list-section); color:var(--color-list-section); font-size:16px; padding:8px 24px 8px 8px; margin:4px 0px; position:relative; border-radius:4px;} #services .group i {font-size:14px; line-height:16px; position:absolute; right:8px; top:25%;} #services .group i.fa:before {content:"\f067"} #services .group i.fa-angle-down:before {content:"\f068"} /************ SERVICES OPTION ************/ #widget #services-options .fields-page {padding-top:0px !important; max-width:400px; margin:auto;} #widget #services-options .fields-page p{display:flex; flex-direction:column; width:100%;} #widget #services-options .fields-page p label{display:block; width:100%; float:none; margin-right:0px; margin-bottom:8px; font-weight:bold;} #widget #services-options .fields-page p select{width:100%;} /************ DATE ************/ #widget #date {height:auto !important; padding:16px 0px;} #widget #date .timezone {background-color:var(--bg-timezone); margin:0px; padding:8px 16px; margin:0px 16px; color:var(--color-timezone);} #widget #date .timezone #timezone {margin:0px; background-color:var(--bg-timezone); border:1px solid var(--color-timezone); border-radius:0px; color:var(--color-timezone);} #widget #date #date-page {margin-top:8px; display:flex; flex-direction:row; justify-content: center; flex-wrap:wrap;} #widget #date #months {box-sizing: border-box; width:auto; flex:1; min-width:250px; float:none; padding:0px 16px; margin-bottom:24px; overflow:visible !important;} #widget #date #months .date-header {height:auto;} #widget #date #months .month {max-width:300px; margin:auto; margin-bottom:40px;} #widget #date #months .month {margin:auto; margin-top:8px; margin-bottom:8px; } #widget #date #months .month .day span {width:24px; line-height:24px; padding:0px!important; display:block; margin: auto;} #widget #date #months .month .dday span {background-color:white; color:var(--grey-200)!important;} #widget #date #months .month .sday span {background-color:var(--bg-datepicker-active); color:var(--color-datepicker-active)!important;} #widget #date #months .month .day span:hover {background-color:var(--bg-datepicker-hover); color:var(--color-datepicker-hover); border-radius:4px;} #widget #date #months .month .dday span:hover {background-color:white;} #widget #date #months .month .sday span:hover {background-color:var(--bg-datepicker-active-hover); color:var(--color-datepicker-active-hover);} #widget #date #months p {font-size:12px !important;} #widget #date #dates {width:auto; margin:0px; flex:1; padding:0px 16px; min-width:250px;} #widget #date #dates #dates-block {height:auto !important;} #widget #date #dates #dates-block .table-dates {width:100%;} #widget #date #dates #dates-block .table-dates td {min-width:150px;} #widget #date #dates #dates-block .table-dates .list-dates {margin:0px; padding:0px;} #widget #date #dates #dates-block .table-dates .list-dates .button {width:100%; margin:4px 0px; height:30px; background-color:white; border:1px solid var(--grey-100); border-radius:4px;} #widget #date #dates #dates-block .table-dates .list-dates .button:hover {border:1px solid var(--bg-slot-hover); background-color:var(--bg-slot-hover); color:var(--color-slot-hover); box-shadow: none;} /************ FIELDS ************/ #widget #fields {padding-top:0px !important;} #widget #fields p {padding:0px; margin:0px; overflow:hidden;} #widget #fields .page-content {max-width:400px; margin:auto; height:auto;} #widget #fields #relationships-takefor-header {padding:0px; width:100%; margin:16px 0px 0px 0px;} #widget #fields #relationships-takefor-header p {font-size: 14px; margin-bottom:8px;} #widget #fields #relationships-takefor-header div {float:none !important;} #widget #fields #new-client {padding-top:16px; padding-bottom:8px;} #widget #fields #new-client p{display:flex; flex-direction:column; width:100%; position:relative;} #widget #fields #new-client p label{display:block; width:100%; float:none; margin-right:0px; margin-bottom:8px; font-weight:bold; line-height: normal;} #widget #fields #new-client p input[type=text]:not(.invalid_input), #widget #fields #new-client p input[type=password], #widget #fields #new-client p input[type=tel], #widget #fields #new-client p input[type=email], #widget #fields #new-client p input[type=password], #widget #fields #new-client p textarea, #widget #fields #new-client p select, #widget #fields #new-client input[type=text]:not(.invalid_input), #widget #fields #new-client input[type=password], #widget #fields #new-client input[type=tel], #widget #fields #new-client input[type=email], #widget #fields #new-client input[type=password], #widget #fields #new-client textarea, #widget #fields #new-client select {width:100%; margin-bottom:8px; box-sizing:border-box;} #widget #fields #new-client p .mand{position:absolute; top:0px; right:0px;} #widget #fields #new-client .intl-tel-input {display:block;} #widget #fields #new-client .intl-tel-input .selected-flag {display:flex; flex-direction:row; width:40px; justify-content:space-between; align-items: center; height:23px; padding:0px; padding-left:8px;} #widget #fields #new-client .intl-tel-input .selected-flag .iti-flag {display:block; position:relative; top:auto; bottom:auto; margin: inherit;} #widget #fields #new-client .intl-tel-input .selected-flag .iti-arrow {position: relative; top:auto; margin:0; right:auto;} #widget #fields #new-client .intl-tel-input .mand {position: absolute; top: -24px; right: 0px;} #widget #fields #new-client .other-optin {margin-top:8px !important;} #widget #fields #new-client .other-optin .responsive-label {float:none !important; font-weight:normal; box-sizing: border-box;} #widget #fields .label-marketing-consent label{float:none !important; font-weight:normal; box-sizing: border-box; width:100%;} #widget #fields #clt_new_error {background-color:rgb(255, 0, 0); padding:16px 8px; color:white !important; border-radius:4px; margin:8px 0px;} /************ RELATIONSHIP ************/ #widget #relationships {padding-top:0px !important; width:auto; margin:initial;} #widget #relationships p {padding:0px; margin:0px; overflow:hidden;} #widget #relationships .page-content {max-width:400px; margin:auto; height:auto;} #widget #relationships #radio-relationships {padding:0px; width:100%; margin:16px 0px;} #widget #relationships #new-client-relationships p{display:flex; flex-direction:column; width:100%; position:relative;} #widget #relationships #new-client-relationships p label{display:block; width:100%; float:none; margin-right:0px; margin-bottom:8px; padding-top : 0px; font-weight:bold; line-height: normal; text-align:left;} #widget #relationships #new-client-relationships p input[type=text]:not(.invalid_input), #widget #relationships #new-client-relationships p input[type=password], #widget #relationships #new-client-relationships p input[type=tel], #widget #relationships #new-client-relationships p input[type=email], #widget #relationships #new-client-relationships p input[type=password], #widget #relationships #new-client-relationships p textarea, #widget #relationships #new-client-relationships p select, #widget #relationships #new-client-relationships input[type=text]:not(.invalid_input), #widget #relationships #new-client-relationships input[type=password], #widget #relationships #new-client-relationships input[type=tel], #widget #relationships #new-client-relationships input[type=email], #widget #relationships #new-client-relationships input[type=password], #widget #relationships #new-client-relationships textarea, #widget #relationships #new-client-relationships select {width:100%; margin-bottom:8px; box-sizing:border-box;} #widget #relationships #new-client-relationships p .mand{position:absolute; top:0px; right:0px;} #widget #relationships #relationships_error{background-color:rgb(255, 0, 0); padding:16px 8px; color:white !important; border-radius:4px; margin:8px 0px;} /************ EXISTING CLIENT ************/ #widget #fields #existing-client {width:100%; padding-top:16px; padding-bottom:8px;} #widget #fields #existing-client p{display:flex; flex-direction:column; width:100%; position:relative; overflow:hidden;} #widget #fields #existing-client p label{display:block; width:100%; float:none; margin-right:0px; margin-bottom:8px; line-height: normal;} #widget #fields #existing-client p input[type=text]:not(.invalid_input), #widget #fields #existing-client p input[type=password], #widget #fields #existing-client p input[type=tel], #widget #fields #existing-client p input[type=email], #widget #fields #existing-client p input[type=password], #widget #fields #existing-client p textarea, #widget #fields #existing-client p select, #widget #fields #existing-client input[type=text]:not(.invalid_input), #widget #fields #existing-client input[type=password], #widget #fields #existing-client input[type=tel], #widget #fields #existing-client input[type=email], #widget #fields #existing-client input[type=password], #widget #fields #existing-client textarea, #widget #fields #existing-client select {width:100%; margin-bottom:8px; box-sizing:border-box;} #widget #fields #existing-client p .mand{position:absolute; top:0px; right:0px;} #widget #fields #existing-client .intl-tel-input {display:block;} #widget #fields #existing-client .intl-tel-input .selected-flag {display:flex; flex-direction:row; width:40px; justify-content:space-between; align-items: center; height:23px; padding:0px; padding-left:8px;} #widget #fields #existing-client .intl-tel-input .selected-flag .iti-flag {display:block; position:relative; top:auto; bottom:auto; margin: inherit;} #widget #fields #existing-client .intl-tel-input .selected-flag .iti-arrow {position: relative; top:auto; margin:0; right:auto;} #widget #fields #existing-client .intl-tel-input .mand {position: absolute; top: -24px; right: 0px;} #widget #fields #existing-client .other-optin {margin-top:8px;} #widget #fields #existing-client .checkbox label {padding-left:30px !important;} #widget #fields #existing-client .other-optin .responsive-label {float:none !important; font-weight:normal; box-sizing: border-box;} #widget #fields #existing-client .new {position:relative;} /************ CUSTOM FIELD ************/ #widget #fields-1 {padding-top:0px !important; width:auto;} #widget #fields-1 p {padding:0px; margin:0px; overflow:hidden;} #widget #fields-1 .page-content {max-width:400px; margin:auto; height:auto;} #widget #fields-1 #radio-relationships {padding:0px; width:100%; margin:16px 0px;} #widget #fields-1 p, #widget #fields-1 div {display:flex; flex-direction:column; width:100%; position:relative;} #widget #fields-1 p label, #widget #fields-1 div label{display:block; width:100%; float:none; margin-right:0px; margin-bottom:8px; padding-top : 0px; font-weight:bold; line-height: normal; text-align:left;} #widget #fields-1 p input[type=text]:not(.invalid_input), #widget #fields-1 p input[type=password], #widget #fields-1 p input[type=tel], #widget #fields-1 p input[type=email], #widget #fields-1 p input[type=password], #widget #fields-1 p textarea, #widget #fields-1 p select, #widget #fields-1 input[type=text]:not(.invalid_input), #widget #fields-1 input[type=password], #widget #fields-1 input[type=tel], #widget #fields-1 input[type=email], #widget #fields-1 input[type=password], #widget #fields-1 textarea, #widget #fields-1 select {width:100%; margin-bottom:8px; box-sizing:border-box;} #widget #fields-1 p .mand, #widget #fields-1 .mand{position:absolute; top:0px; right:0px;} #widget #fields-1 .az_list {margin:0px;} #widget #fields-1 .az_list li{margin-left:0px;} #widget #fields-1 .az_list .checkbox {margin:0px;} #widget #fields-1 .az_list li{margin-left:0px;} #widget #fields-1 .az_list .radio {margin:0px;} #widget #fields-1 .title {font-size:16px;} /************ CONFIRMATION ************/ #widget #confirmation .page-content {max-width:400px; margin:auto; height:auto;} /************ PAIEMENT ************/ #widget .payment-box:hover { border: solid 1px var(--bg-button);} /******************************* LISTS *******************************/ ul.items {margin:0; padding:0; list-style:none;} ul.items li {padding:16px; cursor:pointer; border:1px solid #E7E7E7; margin:8px 0px; border-bottom-color:#F3F3F3!important; border-radius:4px; min-height:auto;} ul.items li:hover {background-color:#F3F3F3;} ul.items li .row {display:grid; justify-self: center; grid-template-areas: "a b b" "a c d"; grid-template-columns: auto auto 1fr; column-gap: 16px; row-gap:16px;} ul.items li .row.clearfix:before, .clearfix:after {content:normal;} ul.items div:first-of-type {align-self:center; grid-area:a;} ul.items img {width:auto; width:100px; height:auto; align-self:center; padding-right:0px;} ul.items li .item {align-self:center; grid-area:b;} ul.items li .item * {line-height:normal; margin-left:0px; margin-top:0px;} ul.items li *[id^='service-'][id$='-name'],ul.items li *[id^='staff-'][id$='-name'] {font-size:16px; font-weight:bold; line-height:normal;} ul.items li p {font-size:14px; font-style: italic; color:#5A5A5A;} ul.items li .desktop, ul.items li .price {align-self:center; font-weight:bold; padding:4px 8px; background-color:var(--bg-duration); color:var(--color-duration); justify-self:left; width:auto;} ul.items li .desktop {grid-area:c;} ul.items li .price {grid-area:d; } /* Tag */ #widget .items li .row .desktop, #widget .items li .row .price{padding:4px 8px; background-color:var(--bg-list-tag); border-radius:4px; margin:0; line-height:16px; box-sizing: border-box; color: var(--color-list-tag);} #widget .items li .row .desktop span, #widget .items li .row .price {color:var(--color-list-tag); line-height:16px;} #widget .items li .row .desktop:empty, #widget .items li .row .price:empty{background:none;} #widget .items .row p {margin:0px;} /* STAFF LIST */ ul.items#stafflist li .row { grid-template-areas: "a b" "a c"; grid-template-columns: 80px 1fr; grid-template-rows: auto auto; column-gap: 16px; row-gap: 8px;} ul.items#stafflist .staff-img-container img{height:auto; width:80px;} ul.items#stafflist li .price {grid-area:c;} /************ BUTTON ************/ #widget #bbuttons {background-color:var(--white); height:auto; padding:8px 16px; display:flex !important; flex-direction:row; justify-content:space-between;} /* Primary Button */ #widget .az-btn-blue, #widget #bbuttons .az-btn-blue, #widget #bbuttons #submit-widget{padding:0px 16px; height:36px; border-radius:4px; background-color:var(--bg-button); color:var(--color-button); border:1px solid var(--bg-button); margin:0px; text-transform: none; font-size:12px;} #widget .az-btn-blue:hover, #widget #bbuttons .az-btn-blue:hover, #widget #bbuttons #submit-widget:hover{ background-color:var(--bg-button-hover); border:1px solid var(--bg-button-hover); transition-duration: 0.7s; color:var(--color-button-hover);} #widget .az-btn-blue:active, #widget #bbuttons .az-btn-blue:active, #widget #bbuttons #submit-widget:active{background-color:var(--bg-button-active); border:1px solid var(--bg-button-active); transition-duration: 0.7s; color:var(--color-button-active);} /* Secondary Button */ #widget #bbuttons .az-btn-previous {background-color: var(--white); color: var(--bg-button); border:1px solid var(--bg-button); padding:0px 16px; height:34px; border-radius:4px; text-transform: none; font-size:12px;} #widget #bbuttons .az-btn-previous:hover {border:1px solid var(--bg-button-hover); transition-duration: 0.7s; color: var(--bg-button-hover);} #widget #bbuttons .az-btn-previous:active {border:1px solid var(--bg-button-active); transition-duration: 0.7s; color: var(--bg-button-active);} /* Button OK */ #widget .az-btn-pos {border:1px solid #4caf50; padding:5px 16px; border-radius:0px; background-color:#4caf50; color:var(--white); margin:0px;} #widget .az-btn-pos:hover {border:1px solid #388e3c; padding:5px 16px; border-radius:4px; background-color:#388e3c; color:var(--white); margin:0px;transition-duration: 0.7s;} /* Button KO */ #widget .az-btn-neg{border:1px solid #f44336; padding:5px 16px; border-radius:4px; background-color:#f44336; color:var(--white); margin:0px;} #widget .az-btn-neg:hover{border:1px solid #d32f2f; padding:5px 16px; border-radius:4px; background-color:#d32f2f; color:var(--white); margin:0px; transition-duration: 0.7s;} /************ FOOTER ************/ #widget .footer {background-color:var(--white); height:auto; padding:4px 8px; display:flex; flex-direction:row; justify-content:center; border-top:1px solid var(--grey-100);} #widget .footer a {text-transform:none; text-decoration:none;} #widget .footer a:hover {text-transform:none; text-decoration:underline;} #widget .footer #powered_by_agendize {text-transform:none;} /************ PRIVACY ************/ #widget .privacy {position:aboslute; bottom: 8px; left: 8px; height:auto;} /************ CLOSE ************/ #close {color:var(--grey-900);} /************ MOBILE ************/ @media screen and (max-width: 400px) { #widget .event-info {margin:0px 8px;} #widget .page {padding:16px 8px;} #widget .items li *{ line-height: normal;} #widget .items li .row img {padding:0px; height:auto;} #widget #date .timezone #timezone {margin-top:8px;} #widget #date .timezone {margin:0px 8px;} #widget #date #months {padding:0px 8px} #widget #date #dates {padding:0px 8px} #widget #bbuttons {padding:8px 8px;} } @media screen and (max-width: 415px) { ul.items li * { display:block; } #widget .col-md-6 p, #widget .col-md-6 span, #staffs .col-md-6 p, #staffs .col-md-6 span { display:block; } } @media only screen and (min-width: 600px) { #widget #date {overflow-y: auto!important;} } @media only screen and (max-width: 700px) { #widget #fields #new-client .intl-tel-input .selected-flag {bottom:auto;} } @media only screen and (max-width: 600px) { ul.items li .row { grid-template-areas: "a a a" "b b b" "c d e"; grid-template-columns: auto auto 1fr; grid-template-rows: auto 1fr auto; row-gap: 16px;} ul.items div:first-of-type {grid-area:a;} ul.items img {width:auto; max-height:100px; justify-self:center;} ul.items li .item {grid-area:b;} ul.items .desktop {justify-self:left; grid-area:c;} ul.items li .price {justify-self:left; grid-area:d;} } #widget .items li .row .price { line-height: 1.4 !important;}