Here is an example of CSS for the scheduling widget:
/* widget background */ #body-site{background-color:#f9f9f9;} .header {height: 60px; border-top: solid 0px #929292;} #company-title h1 { font-size: 40px; } /* widget formatting */ body {margin-top: 0px;} #iframe {border:none; border-radius:0px;} .iframe-container {padding-top: 16px;} .page-content {height: 95%; margin-top:2%;} /* services list */ .items li * {color: #4609A8;} .items div.item * {color: #6b6b6b;} .group {margin: 3px 0 4px 0; background-color:#6b6b6b;} .group:hover {background-color: #313131;} .items .item.center {color: #4609A8;} @media screen and (max-width: 640px) {.items .item.center {color: #6b6b6b; position: absolute; width: 80%;} } /* date picker */ .dday span {background-color: none; border-radius: 0px; color: #C8C9CD!important;} .dday span {background-color: white; color: #dddddd!important; opacity: 1 !important;} .sday span {background-color: #4609A8; border-radius: 0px; opacity: 1 !important;} .day span:hover {opacity:1; color: #4609A8;} .dday span:hover {opacity:1;} .month td.day {color: #4609A8;} .day span {opacity:0.7;} /* time slots */ .button {border: solid 1px #DDDDDD; -moz-border-radius: 0px; border-radius: 0px;} .list-dates .button:hover {background-color: #4609A8; color: white; border:1px solid #4609A8;} /* personal data */ #new-client h4 {margin-bottom: 18px;} @media screen and (max-width: 640px) {#new-client h4 {padding-top: 0px; margin-bottom: 12px; font-size: 14px;} } #privacy-consent + label, #marketing-consent + label, #privacy-consent-mandatory, #marketing-consent {width: 80%; padding-left: 30px;} /* previous and next buttons */ #bbuttons {background-color: #DCDEE0; padding-bottom: 0px; padding-top: 20px;} .az-btn, .az-btn-neg, .az-btn-pos, .az-btn-blue {border-radius: 0px; padding: 8px 15px; margin: -10px 7px 0 0;} .az-btn-blue {background-color: #00AA5B; font-weight: bold;} .az-btn-blue:hover {background-color: #0e7843;} .az-btn-previous:hover {background-color: #313131;} .az-btn-previous {font-weight:bold;} #submit-widget {background-color: #00AA5B; font-weight: bold;} #submit-widget:hover {background-color: #0e7843;} .staff-random .az-btn-blue {margin: 0px;} @media screen and (max-width: 640px) {.az-btn, .az-btn-neg, .az-btn-pos, .az-btn-blue {padding: 5px 10px;} .az-btn-neg { margin-top: 5px; } } /* thank you message */ .buttons input {border: solid 0px #C3C3C3; border-radius: 0px; margin-top: 4px;} /* footer */ .footer a { color: white;} .footer {background-color: #4609A8;} /* leftbar */ .left {margin-top: 36px !important;} #logo {margin-bottom: 10px;} .label.label {color: #4609A8;} .day li {margin-bottom: 8px; text-align: right; margin-left: 8px; float: left;} .info.address img{display:none;} .info .content {margin-top: 14px;} .address a {padding-top: 4px; color: #4609A8; text-decoration: underline;} .address a:hover {color: #313131; text-decoration: underline;} div.info.contact a {color: #4609A8; text-decoration: underline; line-height: 2;} div.info.contact a:hover {color: #313131; text-decoration: underline; line-height: 2;}
Julien Pauthier
Here is an example of CSS for the scheduling widget: