/*****************************************************************************************************************/
/*                                                MAIN                                                    */
/*****************************************************************************************************************/

.container {
  width: 85%;
  max-width: 1260px;
  margin: 0 auto;
}

*, *:after, *:before {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

h1, h2, h3, h4, h5, h6, ul {
  margin: 0px;
}

body {
  font-family: 'Open Sans',sans-serif;
  margin: 0px;
  font-size: 15px;
  line-height: 1.6;
}

h3 {
  font-weight: 700;
  font-size: 22px;
  line-height: 1.4;
  letter-spacing: 0em;
  margin-bottom: 1.5rem;
}

p {
  font-weight: 400;
  font-size: 16px;
  line-height: 28px;
  color: #333;
}

.header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  background-color: #1276BB;
  height: 70px;
  width: 100%;
  padding-top: 13px;
  -webkit-box-shadow: 0 12px 28px rgba(0, 0, 0, 0.25), 0 8px 10px rgba(0, 0, 0, 0.22);
          box-shadow: 0 12px 28px rgba(0, 0, 0, 0.25), 0 8px 10px rgba(0, 0, 0, 0.22);
}

.header__inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.header__logo img {
  width: 200px;
  margin-left: 20px;
}

.nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.nav__login {
  text-transform: uppercase;
  text-decoration: none;
  color: #ffffff;
  margin-right: 40px;
  font-size: 18px;
  font-family: 'Open Sans',sans-serif;
  font-weight: 400;
  -webkit-transition: .2s linear;
  transition: .2s linear;
  position: relative;
}

.nav__login:hover {
  color: #9cdbf1;
}

.nav__login-setting {
  display: inline;
}

.nav__login-icon {
  font-size: 17px;
  margin-right: 5px;
  color: #fff;
  cursor: default;
}

.nav__sign {
  padding: 10px 30px;
  border-radius: 4px;
  background-color: #DA380C;
  text-transform: uppercase;
  text-decoration: none;
  color: #ffffff;
  margin-right: 40px;
  font-size: 18px;
  font-family: 'Open Sans',sans-serif;
  font-weight: 400;
  -webkit-transition: 0.2s linear;
  transition: 0.2s linear;
}

.nav__sign:hover {
  background-color: #C0330C;
}

.nav__link {
  text-transform: uppercase;
  text-decoration: none;
  color: #ffffff;
  margin-right: 40px;
  font-size: 18px;
  font-family: 'Open Sans',sans-serif;
  font-weight: 400;
  position: relative;
}

.nav__link:after {
  content: "";
  display: block;
  width: 100%;
  height: 2px;
  opacity: 0;
  background-color: #fff;
  -webkit-transition: .2s linear;
  transition: .2s linear;
  position: absolute;
  top: 130%;
  left: 0;
  z-index: 1;
}

.nav__link:hover:after {
  opacity: 1;
  top: 100%;
}

.item-active {
  display: block !important;
}

.toggleMenu {
  display: none;
  color: #fff;
  font-size: 30px;
  cursor: pointer;
}

section {
  padding-top: 64px;
  padding-bottom: 65px;
}

.section__header {
  font-family: 'Open Sans',sans-serif;
  font-weight: 400;
  font-size: 46px;
  line-height: 1.4;
  letter-spacing: -.02em;
  width: 100%;
  text-align: center;
  color: #1a1a1a;
}

.first {
  margin-top: 10px;
}

.first__header {
  padding-top: 40px;
}

.first__or {
  font-size: 36px;
  font-weight: 700;
  padding: 20px;
  margin-bottom: 0px;
  text-transform: uppercase;
  color: #333;
}

.first__subheading {
  text-align: center;
  font-size: 35px;
  font-weight: 300;
  margin-top: 10px;
  margin-bottom: 55px;
}

.first__items {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-bottom: 20px;
}

.first__item {
  color: #fff;
  text-align: center;
  width: 42%;
  background-color: #1276BB;
  border-radius: 4px;
  -webkit-transition: 0.2s linear;
  transition: 0.2s linear;
  -webkit-box-shadow: 0 10px 12px rgba(0, 0, 0, 0.15), 0 5px 5px rgba(0, 0, 0, 0.1);
          box-shadow: 0 10px 12px rgba(0, 0, 0, 0.15), 0 5px 5px rgba(0, 0, 0, 0.1);
}

.first__item:hover {
  -webkit-box-shadow: 0 14px 28px rgba(0, 0, 0, 0.15), 0 10px 10px rgba(0, 0, 0, 0.1);
          box-shadow: 0 14px 28px rgba(0, 0, 0, 0.15), 0 10px 10px rgba(0, 0, 0, 0.1);
}

.first__item-inner {
  margin: 0 auto;
  width: 80%;
  background-color: #1276BB;
  min-height: 300px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  border: 3px dashed #fff;
  border-radius: 2px;
  cursor: pointer;
}

.first__item-header {
  font-size: 26px;
  font-weight: 700;
  padding: 20px;
  margin-bottom: 0px;
  text-transform: uppercase;
}

.first__item-txt {
  font-size: 17px;
  color: #fff;
  line-height: 20px;
  padding: 20px;
  margin: 0px;
}

.second__subheading {
  text-align: center;
  font-size: 20px;
  font-weight: 400;
  margin-top: 25px;
  margin-bottom: 64px;
}

.second__item {
  text-align: center;
  width: 42%;
  background-color: #f3f3f3;
  border-radius: 4px;
  -webkit-transition: 0.2s linear;
  transition: 0.2s linear;
  -webkit-box-shadow: 0 10px 12px rgba(0, 0, 0, 0.15), 0 5px 5px rgba(0, 0, 0, 0.1);
          box-shadow: 0 10px 12px rgba(0, 0, 0, 0.15), 0 5px 5px rgba(0, 0, 0, 0.1);
}

.second__item:hover {
  -webkit-box-shadow: 0 14px 28px rgba(0, 0, 0, 0.15), 0 10px 10px rgba(0, 0, 0, 0.1);
          box-shadow: 0 14px 28px rgba(0, 0, 0, 0.15), 0 10px 10px rgba(0, 0, 0, 0.1);
}

.second__item-li {
  position: relative;
}

.second__item-li:before {
  content: "";
  position: absolute;
  top: 12px;
  left: -20px;
  width: 8px;
  height: 8px;
  border-radius: 20px;
  background-color: #333;
}

.second__item-form {
  text-align: left;
  padding: 10px 20px 0px 20px;
  width: 100%;
}

.second__item-form label {
  font-weight: 700;
  font-size: 20px;
  color: #696868;
}

.second__item-email {
  padding: 10px 10px 8px;
  font-size: 18px;
  font-weight: 400;
  background-color: #fff;
  border: 0.5px;
  width: 285px;
  margin-bottom: 20px;
  margin-top: 15px;
  width: 100%;
  border: 1px solid #C1C1C1;
}

.second__item-submit {
  width: 100%;
  padding: 15px 20px 13px;
  border: 0px;
  background-color: #CD350E;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}

.second__item-inner {
  margin: 0 auto;
  width: 80%;
  background-color: #f3f3f3;
  min-height: 300px;
  border: 3px dashed #C1C1C1;
  border-radius: 2px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.second__item-inner ul {
  padding-left: 50px;
}

.second__item-inner li {
  list-style: none;
  font-size: 20px;
  text-align: left;
  margin-top: 5px;
  margin-bottom: 5px;
}

.second__item-inner_new {
  margin: 0 auto;
  width: 80%;
  background-color: #f3f3f3;
  min-height: 300px;
  border: 3px dashed #CD350E;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  border-radius: 2px;
  cursor: pointer;
}
.second__item-header {
  font-size: 26px;
  font-weight: 700;
  padding: 20px;
  margin-bottom: 0px;
  text-transform: uppercase;
}

.second__item-txt {
  font-size: 17px;
  color: #000;
  line-height: 20px;
  padding: 20px;
  margin: 0px;
}

.doc-icons i {
  font-size: 60px;
  color: #fff;
  margin-right: 20px;
  margin-bottom: 20px;
}

.doc-icons__last {
  margin-right: 0px !important;
}

.drop-file {
  margin-top: 20px;
  font-size: 20px;
}

.drop-file span {
  color: #fff;
  cursor: pointer;
  text-decoration: underline;
}

.drop-file_second {
  margin-top: 20px;
  font-size: 20px;
  color: #CD350E;
}

.drop-file_second span {
  cursor: pointer;
  text-decoration: underline;
}

.star-rating {
  width: 100%;
  text-align: center;
  margin-top: 70px;
}

.contact-sales {
  background-color: #272e30; width: 100%; justify-content: center; align-items: center; display: flex;
}

.contact-sales p {
  font-size: 20px; color: #ffffff; padding: 10px 15px; text-align: center;
}

.contact-sales a {
  padding: 10px 15px; text-align: center; background: #DA380C; border: 1px solid #DA380C; font-size: 20px; margin: 10px 20px; line-height: 30px; color: #fff; text-decoration: none; border-radius: 4px;
}

.contact-sales a:hover {
  background-color: #C0330C;
  border-color: #C0330C;
}

.quiz {
  background-color: #ffffff;
}

section.quiz {
  padding-top: 0px;
}

.quiz__button {
  margin-top: 40px;
  margin-bottom: 10px;
  text-align: center;
}

.quiz__button a {
  padding: 10px 15px; text-align: center; background: #DA380C; border: 1px solid #DA380C; font-size: 20px; margin: 10px 20px; line-height: 30px; color: #fff; text-decoration: none; border-radius: 4px;
}

.secure {
  background-color: #f3f6f8;
}

.secure__items {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  padding-top: 80px;
}

.secure__item {
  width: 28%;
  text-align: center;
}

.secure__item img {
  width: 75px;
  margin-bottom: 24px;
}

.legally {
  background-color: #f3f6f8;
}

.legally__items {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding-top: 80px;
}

.legally__item {
  width: 45%;
  text-align: center;
}

.legally__item img {
  width: 75px;
  margin-bottom: 24px;
}

.tutorial {
  background-color: #fff;
}

.tutorial__video__wrapper {
  padding-top: 80px;
  max-width: 100%;
  width: 640px;
  left: 0;
  right: 0;
  margin: auto;
}

.background {
	background-color: #f3f6f8;
}

.instruction__header {
  margin-bottom: 25px;
}

.instruction__subheader {
  padding-top: 30px;
  margin-bottom: 0px;
}

.instruction__text {
  padding-top: 20px;
  padding-bottom: 20px;
  margin: 0px;
}

.instruction__img {
  text-align: center;
  max-width: 100%;
}

.instruction__img img {
  max-width: 100%;
}

.instruction__container {
  max-width: 990px;
}

.bullet {
    margin-left: 10px;
    margin-right: 10px;
}

.done {
  padding: 5px;
  background-color: #CD350E;
  font-weight: 700;
  color: #fff;
}

.download {
  padding: 5px;
  background-color: #1276BB;
  font-weight: 700;
  color: #fff;
}

.footer {
  background-color: #272e30;
  padding-top: 70px;
}

.footer a {
  color: #cbcbcb;
  text-decoration: none;
  -webkit-transition: 0.2s linear;
  transition: 0.2s linear;
}

.footer a:hover {
  color: #fff;
}

.footer__content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.footer__header {
  color: #989898;
  font-weight: 400;
}

.footer__link {
  display: block;
  margin-bottom: 12px;
}

.footer__address {
  color: #989898;
  text-align: center;
  padding-top: 35px;
  padding-bottom: 60px;
  margin: 0px;
}

.footer__social {
  background-color: #212628;
  padding-top: 32px;
  padding-bottom: 32px;
}

.footer__social-content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.footer__social-right {
  color: #989898;
}

.footer__social-left {
  color: #cbcbcb;
}

.footer__social-left a {
  display: inline-block;
  width: 40px;
  height: 40px;
  margin-right: 1px;
  border-radius: 4px;
  text-align: center;
}

.footer__social-left a i {
  margin-top: 12px;
}

.footer__social-left .facebook:hover {
  background-color: #42599e;
}

.footer__social-left .youtube:hover {
  background-color: #ff0000;
}

.footer__social-left .twitter:hover {
  background-color: #55acee;
}

.footer__social-left .linkedin:hover {
  background-color: #117eb9;
}


/*****************************************************************************************************************/
/*                                                MEDIA                                                    */
/*****************************************************************************************************************/

@media screen and (max-width: 1200px) {
  .first__items {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .first__item {
    width: 80%;
  }
  .second__item {
    width: 80%;
  }
  .first__or {
    margin: 10px 0 10px;
  }
  .secure__items {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .secure__item {
    width: 100%;
    margin-top: 30px;
  }
}

@media screen and (max-width: 1040px) {
  .legally__items {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .legally__items.second {
    padding-top: 0px;
  }
  .legally__item {
    width: 100%;
    margin-top: 20px;
    padding-bottom: 0px;
  }
  .youtube-tutorial {
    max-width: 100%;
  }
  .footer__content {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .footer__column {
    margin-top: 25px;
  }
  .header__inner {
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
  }
  .nav__links {
    display: none;
    position: absolute;
    top: 70px;
    width: 100%;
    left: 0;
    background-color: #1276bb;
  }
  .nav__link {
    display: block;
    width: 88%;
    margin: 0 auto;
    padding: 10px;
  }
  .nav__link:after {
    display: none;
  }
  .toggleMenu {
    display: block;
  }
  .toggleMenu:checked + label {
    color: #000;
  }
  .toggleMenu:checked ~ .nav__links {
    display: block;
  }
}

@media screen and (max-width: 700px) {
  .footer__social-content {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .footer__social {
    padding-top: 20px;
  }
  .nav__login-setting {
    display: none;
  }
}


/*****************************************************************************************************************/
/*                                                PRIME FACES                                                    */
/*****************************************************************************************************************/

/* ============================ COMMON ===================== */

/* font */
.ui-widget, .ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button {font-family: 'Open Sans',sans-serif}
.ui-widget {font-size: 90%}

/* input fields */
.ui-inputfield, .ui-widget-content .ui-inputfield, .ui-widget-header .ui-inputfield {
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
}

/* file upload */
.ui-fileupload-content {display: none}
.ui-fileupload-buttonbar {display: none} 

/* headers and content of dialogs and other widgets */
.ui-widget-header {text-transform: uppercase; font-weight: 500}
.ui-column-title {text-transform: uppercase; font-weight: 500}

/* padding in dialog */
.ui-dialog .ui-dialog-content {padding: 1em 1.5em}
.ui-dialog-title {line-height: normal}

/* corners */
.ui-corner-all {-webkit-border-radius: 2px; border-radius: 2px}
.ui-corner-top {-webkit-border-top-left-radius: 2px; border-top-left-radius: 2px; -webkit-border-top-right-radius: 2px; border-top-right-radius: 2px}
.ui-corner-left {-webkit-border-top-left-radius: 2px; border-top-left-radius: 2px; -webkit-border-bottom-left-radius: 2px; border-bottom-left-radius: 2px}
.ui-corner-right {-webkit-border-top-right-radius: 2px; border-top-right-radius: 2px; -webkit-border-bottom-right-radius: 2px; border-bottom-right-radius: 2px}

/* growl */
.ui-growl {width: 400px; left: 20px; top: 50px}
.ui-growl .ui-growl-message {float: none; max-width: 310px; width: 100%; margin-left: 50px}

/* background behind modal dialog */
.ui-widget-overlay {
  opacity: .4;
  filter: Alpha(Opacity=40);
}

/* message icons */
.ui-messages-info-icon, .ui-messages-warn-icon, .ui-messages-error-icon, .ui-messages-fatal-icon, .ui-message-info-icon, .ui-message-warn-icon, .ui-message-error-icon, .ui-message-fatal-icon {
    margin-top: 1px;
}

.ui-button .ui-button-text {line-height: 2; text-transform: uppercase; white-space: nowrap; padding: 0.5em 0.1em}

/* divs for vertical align (see https://stackoverflow.com/questions/396145/how-to-vertically-center-a-div-for-all-browsers) */
.verticalAlignOuter {display: table; position: absolute; height: 100%; width: 100%}
.verticalAlignInner {display: table-cell; vertical-align: middle; padding: 20px 10px}


/* ================== SIGNING SUCCESS/FAILURE ======================= */

/* signing result */
.signingResultPanel {padding: 150px 10px 80px 10px}

.signingResultMessagePanel {max-width: 500px; margin: 0 auto; text-align: center; line-height: 2.2em}
.signingResultMessagePanel .resultMessage {font-size: 2.5em}
.signingResultMessagePanel .explanationMessage {display: block; font-size: 1.7em; margin-top: 15px; margin-left: 10px}
.signingResultMessagePanel img {vertical-align: bottom; margin-right: 15px}
.signingResultMessagePanel a {font-size: 1.7em; margin-left: 10px}

.signingResultPanel .downloadDocumentPanel {width: 100%; max-width: 470px; margin: 20px auto 0 auto; text-align: center}
.signingResultPanel .downloadDocumentPanel .downloadDocumentButton {width: 80%}

.signingResultPanel .inputPanel {max-width: 480px; margin-top: 50px}
.signingResultPanel .signUpReasonsGrid {width: 320px; margin: 10px auto}
.signingResultPanel .email {width: 98%}
.signingResultPanel .activateAccountButton {margin-top: 10px; width: 100%}
.signingResultPanel .subMessage {display: block; font-size: 1.4em; text-align: left}
.signingResultPanel .logoPanel {margin-top: 40px; text-align: center}

/* get free account panel */
.inputPanel {max-width: 420px; margin-left: auto; margin-right: auto; text-align: center}
.inputPanel .ui-panel-content {padding: 20px !important}
.inputPanel .grid {text-align: left; margin: 0 auto; width: 100%}
.inputPanel .message {display: block; font-size: 1.8em; text-align: center}
.inputPanel .formGrid {text-align: left; margin: 0px auto 0px auto; width: 100%; border-collapse: initial}
.inputPanel .inputText {width: calc(100% - 5px)}

/* expanded button */
.inputPanel .expandedButton {width: 100%; margin-top: 10px}

/* download document */
.downloadDocumentPanel .downloadDocumentButton {width: 100%; margin-top: 20px; margin-bottom: 6px}


/* ======================== DIALOGS ============================ */

/* main */
.dialog {margin-top: 5px; margin-bottom: 5px}
.dialog .dialogPanel {width: 100%; padding-top: 5px}

/* input */
.dialog .dialogInputPanel {display: block; margin-bottom: 15px}
.dialog .dialogInput {width: 98%; margin-bottom: 5px}
.dialog .dialogInputText {margin-bottom: 10px}
.dialog .dialogLabel {display: block; margin-bottom: 10px}

/* buttons */
.dialog .dialogButtonPanel {display: block; text-align: right; margin-bottom: 5px}
.dialog .dialogSecondaryButton {margin-right: 8px}

/* buttons */
.dialog .ui-button .ui-button-text {line-height: 1.4; text-transform: uppercase; white-space: nowrap; font-weight: 500}
.dialog .ui-button-text-only .ui-button-text {padding: 0.3em 1em}

/* =============== ERROR DIALOGS ==================== */
.errorDialogPanel .messagePanel {display: block; margin: 10px 0px 15px 0px; text-align: center}
.errorDialogPanel .buttonPanel {display: block; text-align: right; margin-bottom: 5px}
.errorDialogPanel .dialogSecondaryButton {margin-right: 8px}

/* ======================================== SHARE BUTTONS ======================================== */

#share-buttons {text-align: center; margin: 20px}
#share-buttons img {width: 60px; padding: 0px 15px; border: 0; box-shadow: 0; display: inline}
#share-buttons a {text-decoration: none}


/*****************************************************************************************************************/
/*                                                  MAIN ELEMENTS                                                */
/*****************************************************************************************************************/

/* ========================== COMMON ============================== */

/* body */
body {margin: 0px}

/* prevent Chrome outline */
*:focus {outline: 0}


/*****************************************************************************************************************/
/*                                                COLOR SCHEME                                                   */
/*****************************************************************************************************************/

/* ================== FONT ======================= */

/* font color */
.ui-widget-header, .ui-widget-content a {color: #4E4E4E}


/* ================== COMMON ======================= */

/* body */
.withBackground {background: #EAEAEA}

/* main */
.main {background: #FFF; border-color: #D5D5D5}
.mainHeader .subheader {color: #909090}

/* overlay color (blackout behind opened dialog) */
.ui-widget-overlay {background: #444444}

/* please wait message */
.pleaseWaitMessage {background-color: #fff1a8; color: #4E4E4E}
.pleaseWaitMessage {left: 50%;  top: 0; z-index: 10000; position: fixed; border-radius: 0 0 2px 2px; font-weight: 500; padding: 3px 16px; box-shadow: 0 -3px 5px rgba(0, 0, 0, 0.247), 0 3px 5px rgba(0, 0, 0, 0.247); white-space: nowrap; visibility: hidden}

/* no borders in datatable (used in invite signers dialog) */
.ui-datatable tbody td {border-color: transparent}


/* ================== WIDGETS ======================= */

.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
  background: #EDF5F9; color: #2779AA;
}
.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover {
  background: #FFF; color: #2779AA
}
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active {
  background: #3BAAE3; color: #FFF
}


/* ================== BUTTONS ======================= */

/* blue button */
.ui-button.blue, .ui-widget-content .ui-button.blue, .ui-widget-header .ui-button.blue {
  background: #3BAAE3; color: #FFF
}
.ui-button.blue.ui-state-hover, .ui-widget-content .ui-button.blue.ui-state-hover, .ui-widget-header .ui-button.blue.ui-state-hover {
  background: #FFF; color: #2779AA
}
.ui-button.blue.ui-state-active, .ui-widget-content .ui-button.blue.ui-state-active, .ui-widget-header .ui-button.blue.ui-state-active {
  background: #3BAAE3; color: #FFF
}

/* orange button */
.ui-button.orange, .ui-widget-content .ui-button.orange, .ui-widget-header .ui-button.orange {
  background: #FF6923; color: #FFF; border-color: #DCDCDC;
}
.ui-button.orange.ui-state-hover, .ui-widget-content .ui-button.orange.ui-state-hover, .ui-widget-header .ui-button.orange.ui-state-hover {
  background: #FFF; color: #FF6923; border-color: #FF6923;
}  
.ui-button.orange.ui-state-active, .ui-widget-content .ui-button.orange.ui-state-active, .ui-widget-header .ui-button.orange.ui-state-active {
  background: #FF6923; color: #FFF; border-color: #DCDCDC;
}


/* ================== INPUT FIELDS ======================= */

.ui-inputfield, .ui-widget-content .ui-inputfield, .ui-widget-header .ui-inputfield {
  background: #FFF;
  color: #362B36;
}

/* ================== DIALOGS ======================= */

/* headers and content of dialogs and other widgets */
.dialog .ui-widget-content {background: #FFF}
.dialog .ui-widget-header {background: #EDF5F9}