/* Temporary GLOBAL STYLES - The Goal is to dont touch de Theme Out of the Box Styles */
:root {
  --positive-flow-button-background: #5acaed;
  --negative-flow-button-background: #767676;
  --trash-icon-background: #bfbfbf;
  --cancel-button-background: #eb5757;
  --mark-as-active-button-background: #3cbc7e;
  --resend-confirmation-button-background: #e3ad21;
  --label-text-color: #222223;
  --input-background-color: #f6f6f6;
  --input-text-color: #616066;
  --border-radius-12-px: 12px;
  --border-radius-18-px: 18px;
  --color-h4: #1f1f39;
}

/* p-dialog START */
.p-dialog {
  .p-dialog-header {
    border-top-right-radius: var(--border-radius-18-px);
    border-top-left-radius: var(--border-radius-18-px);
  }

  .p-dialog-content:last-of-type {
    border-bottom-left-radius: var(--border-radius-18-px);
    border-bottom-right-radius: var(--border-radius-18-px);
  }

  .p-dialog-footer {
    border-bottom-left-radius: var(--border-radius-18-px);
    border-bottom-right-radius: var(--border-radius-18-px);
  }
}

/* p-dialog END */

/* p-paginator START */
.p-paginator .p-paginator-pages .p-paginator-page.p-highlight {
  background-color: #ffffff;
  color: #5acaed;
}

/* p-paginator START */

/* p-confirm-dialog-reject / p-confirm-dialog-accept START */
.p-confirm-dialog-reject,
.p-confirm-dialog-accept {
  font-size: 1.25rem;
  padding: 0.625rem 1.25rem;
  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14),
    0 1px 5px 0 rgba(0, 0, 0, 0.12);
  border-radius: var(--border-radius-12-px);

  .p-icon-wrapper {
    display: none;
  }
}

.p-confirm-dialog-reject {
  background-color: var(--negative-flow-button-background);
  border-color: var(--negative-flow-button-background);

  &:enabled {
    &:hover {
      background-color: var(--negative-flow-button-background);
      border-color: var(--negative-flow-button-background);
    }

    &:active {
      background: var(--negative-flow-button-background);
      border-color: var(--negative-flow-button-background);
    }
  }
}

.p-confirm-dialog-accept {
  background-color: var(--positive-flow-button-background);
  border-color: var(--positive-flow-button-background);

  &:enabled {
    &:hover {
      background-color: var(--positive-flow-button-background);
      border-color: var(--positive-flow-button-background);
    }

    &:active {
      background: var(--positive-flow-button-background);
      border-color: var(--positive-flow-button-background);
    }
  }
}

/* p-confirm-dialog-reject / p-confirm-dialog-accept END */

/* buttons START */
#btn_new,
#btn_export,
#btn_cancel,
#btn_save,
#btn_find,
#btn_reset,
#btn_approve,
#btn_reject,
#btn_mark_as_active,
#btn_mark_as_inactive,
#btn_resend_confirmation_email,
#btn_back_to_dashboard,
#btn_login,
#btn_register,
#btn_go_to_login,
#btn_resend_code,
#btn_change_password,
#btn_block,
#btn_unblock,
#btn_contract,
#btn_invoice,
#btn_close,
#btn_cancel_invoice,
#btn_resend_invoice {
  border-radius: var(--border-radius-12-px);
}

#btn_new,
#btn_save,
#btn_reset,
#btn_approve,
#btn_back_to_dashboard,
#btn_login,
#btn_register,
#btn_go_to_login,
#btn_change_password {
  background-color: var(--positive-flow-button-background);
  border-color: var(--positive-flow-button-background);

  &:enabled {
    &:hover {
      background-color: var(--positive-flow-button-background);
      border-color: var(--positive-flow-button-background);
    }

    &:active {
      background: var(--positive-flow-button-background);
      border-color: var(--positive-flow-button-background);
    }
  }
}

#btn_export,
#btn_cancel,
#btn_find,
#btn_mark_as_inactive,
#btn_block,
#btn_resend_code,
#btn_close {
  background-color: var(--negative-flow-button-background);
  border-color: var(--negative-flow-button-background);

  &:enabled {
    &:hover {
      background-color: var(--negative-flow-button-background);
      border-color: var(--negative-flow-button-background);
    }

    &:active {
      background: var(--negative-flow-button-background);
      border-color: var(--negative-flow-button-background);
    }
  }
}

#btn_reject,
#btn_cancel_invoice {
  background-color: var(--cancel-button-background);
  border-color: var(--cancel-button-background);

  &:enabled {
    &:hover {
      background-color: var(--cancel-button-background);
      border-color: var(--cancel-button-background);
    }

    &:active {
      background: var(--cancel-button-background);
      border-color: var(--cancel-button-background);
    }
  }
}

#btn_mark_as_active,
#btn_contract {
  background-color: var(--mark-as-active-button-background);
  border-color: var(--mark-as-active-button-background);

  &:enabled {
    &:hover {
      background-color: var(--mark-as-active-button-background);
      border-color: var(--mark-as-active-button-background);
    }

    &:active {
      background: var(--mark-as-active-button-background);
      border-color: var(--mark-as-active-button-background);
    }
  }
}

#btn_unblock {
  background-color: var(--mark-as-active-button-background);
  border-color: var(--mark-as-active-button-background);

  &:enabled {
    &:hover {
      background-color: var(--mark-as-active-button-background);
      border-color: var(--mark-as-active-button-background);
    }

    &:active {
      background: var(--mark-as-active-button-background);
      border-color: var(--mark-as-active-button-background);
    }
  }
}

#btn_resend_confirmation_email,
#btn_invoice,
#btn_resend_invoice {
  background-color: var(--resend-confirmation-button-background);
  border-color: var(--resend-confirmation-button-background);

  &:enabled {
    &:hover {
      background-color: var(--resend-confirmation-button-background);
      border-color: var(--resend-confirmation-button-background);
    }

    &:active {
      background: var(--resend-confirmation-button-background);
      border-color: var(--resend-confirmation-button-background);
    }
  }
}

/* buttons END */

/* Forms labels/inputs/dropdown START */
#label_password,
#label_email,
#label_first_name,
#label_last_name,
#label_authorization_code,
#label_phone_number {
  color: var(--label-text-color);
}

#label_dont_have_account,
#label_terms_and_conditions {
  color: var(--input-text-color);

  #label_go_to_register_link,
  #label_go_to_terms_and_condition_link,
  #label_go_to_privacy_policy_link {
    color: var(--positive-flow-button-background);

    &:active {
      color: var(--positive-flow-button-background);
    }
  }
}

#password,
#email,
#first-name-input,
#last-name-input,
#authorization-code-input,
#phone-number-input,
#old_password-input,
#new_password-input,
#confirm_new_password-input,
#company-name-input,
#register-number-input,
#address-input,
#administrator-name-input,
#administrator-phone-input,
#contractNumber,
#paymentReference,
#remark,
#description,
#invoiceNumber,
#cif-input {
  border-radius: var(--border-radius-12-px);
  color: var(--input-text-color);
  background-color: var(--input-background-color);
  border-color: var(--input-background-color);

  &:enabled {
    &:hover {
      border-color: var(--input-background-color);
    }

    &:focus {
      box-shadow: 0 0 0 0.2rem var(--input-background-color);
      border-color: var(--input-background-color);
    }
  }
}

#amount,
#price,
#cif-input-number {
  .p-inputnumber-input {
    padding: 1rem 1rem 1rem 2rem;
    border-radius: var(--border-radius-12-px);
    color: var(--input-text-color);
    background-color: var(--input-background-color);
    border-color: var(--input-background-color);

    &:enabled {
      &:hover {
        border-color: var(--input-background-color);
      }

      &:focus {
        box-shadow: 0 0 0 0.2rem var(--input-background-color);
        border-color: var(--input-background-color);
      }
    }
  }
}

#startDate,
#endDate,
#dueDate {
  .p-inputtext {
    padding: 1rem 1rem 1rem 2rem;
    border-radius: var(--border-radius-12-px);
    color: var(--input-text-color);
    background-color: var(--input-background-color);
    border-color: var(--input-background-color);

    &:enabled {
      &:hover {
        border-color: var(--input-background-color);
      }

      &:focus {
        box-shadow: 0 0 0 0.2rem var(--input-background-color);
        border-color: var(--input-background-color);
      }
    }
  }
}

/* Forms labels/inputs/dropdown END */

/* Edit button icon / Trash button icon START */
.p-button.edit-button-icon,
.p-button.trash-button-icon {
  border-radius: 50%;
  padding: 0.7rem;
}

.p-button.edit-button-icon {
  background-color: var(--positive-flow-button-background);
  border: 1px solid var(--positive-flow-button-background);

  &:focus {
    box-shadow: 0 0 0 0.2rem var(--positive-flow-button-background);
  }

  &:enabled {
    &:hover {
      background-color: var(--positive-flow-button-background);
      border-color: var(--positive-flow-button-background);
    }

    &:active {
      background-color: var(--positive-flow-button-background);
      border-color: var(--positive-flow-button-background);
    }
  }
}

.p-button.trash-button-icon {
  background-color: var(--trash-icon-background);
  border: 1px solid var(--trash-icon-background);

  &:focus {
    box-shadow: 0 0 0 0.2rem var(--trash-icon-background);
  }

  &:enabled {
    &:hover {
      background-color: var(--trash-icon-background);
      border-color: var(--trash-icon-background);
    }

    &:active {
      background-color: var(--trash-icon-background);
      border-color: var(--trash-icon-background);
    }
  }
}

/* Edit button icon / Trash button icon END */

/* Layout wrapper START */
@media only screen and (min-width: 992px) {
  .layout-wrapper .layout-menu-container {
    margin-left: 1.875rem;
  }
}

.layout-wrapper .layout-content {
  border-bottom-left-radius: 18px;
  border-bottom-right-radius: 18px;
}

.layout-wrapper.layout-menu-horizontal .layout-menu>li {
  text-transform: capitalize;
  border-radius: 18px 18px 0 0;
}

.layout-wrapper.layout-menu-horizontal .layout-menu>li>a {
  border-radius: 18px 18px 0 0;
  background-color: #bfbfbf;
  color: #000000;
  font-weight: 400;
  box-shadow: 0 3px 20px 0 #080f340f;
  padding-bottom: 1.1em;
}

.layout-wrapper.layout-menu-horizontal .layout-menu>li:hover>a {
  background-color: #bfbfbf;
  color: #ffffff;
}

.layout-wrapper.layout-menu-horizontal .layout-menu>li.active-menuitem>a {
  box-shadow: 0 3px 20px 0 #080f340f;
}

/* Layout wrapper END */

/* Layout Action Bar START */
.layout-actionbar {
  border-top-left-radius: var(--border-radius-18-px);
  border-top-right-radius: var(--border-radius-18-px);
}

/* Layout Action Bar END */

/* Login Page START */
.login-page {

  .p-card {
    border-radius: var(--border-radius-18-px);
    background-color: #fff;
    box-shadow: 0 3px 20px 0 #080f340f;
    padding: 40px 100px 20px 100px;

    .p-card-header img {
      width: auto;
    }
  }

  .login-footer {
    background-color: #ceeab8;

    .footer_terms_and_conditions,
    .footer_link_privacy_policy,
    .footer_link_cookie_policy,
    .footer_copyright {
      color: #000000;
    }
  }
}

/* Login Page END */

/* Register Page START */
.register-page {

  .p-card {
    border-radius: var(--border-radius-18-px);
    background-color: #fff;
    box-shadow: 0 3px 20px 0 #080f340f;
    padding: 40px 40px 20px 40px;

    .p-card-header img {
      width: auto;
    }
  }

  .register-footer {
    background-color: #ceeab8;

    .footer_terms_and_conditions,
    .footer_link_privacy_policy,
    .footer_link_cookie_policy,
    .footer_copyright {
      color: #000000;
    }
  }
}

/* Register Page END */

/* Validate Page START */
.validate-page {
  .p-card {
    border-radius: var(--border-radius-18-px);
    background-color: #fff;
    box-shadow: 0 3px 20px 0 #080f340f;
    padding: 40px 100px 20px 100px;

    .p-card-header img {
      width: auto;
    }
  }

  .validate-footer {
    background-color: #ceeab8;

    .footer_terms_and_conditions,
    .footer_link_privacy_policy,
    .footer_link_cookie_policy,
    .footer_copyright {
      color: #000000;
    }
  }
}

/* Validate Page END */

/*Header Page START*/
.custom-header {
  border-top-left-radius: 0;
  border-top-right-radius: 0;

  .p-menubar {
    background: transparent;
    border: none;
    font-family: Open Sans, sans-serif;
    font-weight: 400;
    font-size: 15px;
    color: #000;

    .layout-topbar .layout-topbar-menu>li.user-profile>ul {
      top: 115px;
      right: 30px;
    }
  }
}

/*Header Page END*/

/*Home Page/Insurance Page START*/
.home-page,
.insurance-page,
.list-of-icons-page,
.list-with-dots-page,
.eccentric-rectangles-page,
.list-of-numbers-page,
.text-with-content-page {
  .p-card {
    border-radius: 20px;
    box-shadow: 0 3px 20px 0 #080f340f;

    .home-box-shadow {
      box-shadow: 0 3px 20px 0 #080F340F;
      cursor: pointer;
    }

    .home-unclickable-box-shadow {
      box-shadow: 0 3px 20px 0 #080F340F;
      opacity: 0.75;
    }
  }
}

.insurance-page,
.list-of-icons-page,
.list-with-dots-page,
.eccentric-rectangles-page,
.list-of-numbers-page,
.text-with-content-page {
  padding-top: 20px;
}

.eccentric-rectangles-page {
  .eccentric-rectangles-container {
    :is(div) {
      border-radius: 12px;
      box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.5);

      .p-button {
        font-size: 18px;
        font-style: normal;
        font-weight: 400;
        color: #000;
      }
    }

    .div-1 {
      background-color: #fcc;
      width: 70%;
    }

    .div-2 {
      background-color: #f99;
      width: 90%;
    }

    .div-3 {
      background-color: #ff7c80;
      width: 90%;
    }

    .div-4 {
      background-color: #ff5050;
      width: 90%;
    }

    .div-5 {
      background-color: #f00;
      width: 90%;
    }
  }
}

/*Home Page/Insurance Page End*/
/*Home Page End*/

*, .p-dropdown-label, input::placeholder {
  font-family: "Open Sans", sans-serif;
}