/*Update these mixins to fit the overall theme*/
/*Update these variables to fit the overall theme*/
/*Default font variables*/
/*Text font sizes*/
/*Line Heights*/
/*Text font weights*/
/*Define Theme Colours*/
/*Assign Theme Colours*/
/*Set these for dark or light theme*/
/*Set these to reflect other theme settings*/
/*Primary is used on Login Form*/
/*User throughout the theme to set accent colour*/
/*Special text settings other than theme*/
/*Form labels text colour*/
/*Horizontal line settings*/
/*Primary Button colours*/
/*Link colours*/
/*Theme dimension variables for containers*/
/*Theme height variables for containers*/
/* Define the circle size */
/*Main styles*/
body {
  overflow-x: hidden;
  font-family: raleway, sans-serif;
  margin: auto;
  background-color: #131E1F;
}

h1 {
  font-size: 22px;
}

h2 {
  font-size: 16.5px;
}

h3 {
  font-size: 13.2px;
  font-weight: 400;
}

h4 {
  font-size: 11px;
}

h5 {
  font-size: 8.8px;
}

h6 {
  font-size: 6.6px;
}

p, li, label, input {
  font-size: 11px;
}

h1, h2, h3, h4, h5, h6, p {
  margin: 0;
  padding: 0;
}

label {
  margin: 0.6rem 0 0.2rem 0;
  color: #D9D9D9;
}

/*Global div and section settings*/
.greeting {
  margin: 1rem 0.5rem;
  text-align: left;
}
@media only screen and (max-width: 430px) {
  .greeting h1 {
    font-size: 16.5px;
  }
}

.flex-row {
  display: flex;
  flex-direction: row;
}

.container, body.login {
  background-color: #131E1F;
  color: #fff;
  min-height: 70vh;
  padding: 1rem 0;
}

.inner-container, body.login #login {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 386px;
  margin: 0 auto;
}
@media only screen and (max-width: 430px) {
  .inner-container, body.login #login {
    width: 100%;
    max-width: 330px;
  }
}

.inner-section {
  margin: 1rem 0;
}

.center-column {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.left-column {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}

/*Input fields*/
input[type=text],
input[type=url],
input[type=email],
input[type=password] {
  width: 100%;
  height: 40px;
  border-radius: 5px;
  border: none;
  background: #fff;
  padding: 0rem 0.5rem;
  box-sizing: border-box;
  font-size: 13.2px;
  box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.04);
}

label {
  font-size: 13.2px;
}

/*Link Settings*/
a {
  color: #fad15a;
}
a:hover {
  color: #fff;
}

/*Buttons*/
input.button {
  background-color: #fad15a;
  color: #000;
  border: 1px solid #fad15a;
  border-radius: 5px;
  width: auto;
  font-size: 16px;
  font-weight: 600;
  line-height: 16px;
  padding: 5px 30px;
}
input.button:hover {
  background-color: #D9D9D9;
  border: 1px solid #D9D9D9;
  color: #000;
  cursor: pointer;
}

.form-button {
  background-color: #fad15a;
  color: #000;
  border: 1px solid #fad15a;
  border-radius: 5px;
  width: auto;
  font-size: 16px;
  font-weight: 600;
  line-height: 16px;
  padding: 0.5rem 1rem;
}
.form-button:hover {
  background-color: #D9D9D9;
  border: 1px solid #D9D9D9;
  color: #000;
  cursor: pointer;
}

.nav-button, .edit-form .add-file-container .file-input-container .custom-file-input-label {
  background-color: transparent;
  color: #fff;
  border: 1px solid #fff;
  border-radius: 5px;
  width: auto;
  font-size: 16px;
  font-weight: 600;
  line-height: 16px;
  padding: 0.5rem 1rem;
}
.nav-button:hover, .edit-form .add-file-container .file-input-container .custom-file-input-label:hover {
  background-color: #D9D9D9;
  border: 1px solid #D9D9D9;
  color: #000;
  cursor: pointer;
}

.link-button {
  background-color: transparent;
  color: #fff;
  border: 1px solid transparent;
  border-radius: 5px;
  width: auto;
  font-size: 16px;
  font-weight: 600;
  line-height: 16px;
  padding: 0.5rem 1rem;
}
.link-button:hover {
  background-color: transparent;
  border: 1px solid transparent;
  color: #fad15a;
  cursor: pointer;
}

/*Global element settings*/
ul {
  margin: 0; /* Remove any margin */
  padding: 0; /* Remove any padding */
}

li {
  list-style: none;
}

.main-header {
  background-color: #131E1F;
  color: #fff;
}
.main-header .header-logo {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #131E1F;
  color: #fff;
  padding: 19px;
}
.main-header .header {
  border-bottom: 1px solid #D9D9D9;
}
@media only screen and (max-width: 430px) {
  .main-header {
    height: auto;
  }
}

.navigation {
  justify-content: space-between;
  width: 386px;
  padding: 0.5rem 0;
}
.navigation a {
  margin: 0.5rem;
}
@media only screen and (max-width: 430px) {
  .navigation {
    width: 330px;
    flex-wrap: wrap;
    height: 100%;
  }
}

.site-logo {
  max-width: 154px;
  width: 100%;
  height: auto;
}

.required-icon {
  color: red;
  font-size: large;
}

/* Image settings */
img.profile-image {
  width: 154px;
  height: 154px;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover; /* Ensures the image covers the circle */
}

img.form-image {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover; /* Ensures the image covers the circle */
}

img.public-profile-image {
  width: 192px;
  height: 192px;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover; /* Ensures the image covers the circle */
}

img.tiny-profile-image {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover; /* Ensures the image covers the circle */
}

/*Font Awesome settings*/
.fa {
  font-size: 16.5px;
}

/*Form title*/
.form-title {
  margin-bottom: 1rem;
}

/*Footer styles*/
.main-footer {
  background-color: #131E1F;
  color: #fff;
  padding-top: 3rem;
}
.main-footer .footer {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 2rem 0;
  width: 386px;
  border-top: 1px solid #D9D9D9;
}
.main-footer .footer > * {
  padding: 0 1rem;
}
@media only screen and (max-width: 430px) {
  .main-footer .footer {
    width: 100%;
    max-width: 330px;
  }
}

/*Homepage card form*/
.card-destination {
  margin-bottom: 2rem;
}
.card-destination h2 {
  margin-bottom: 1rem;
}

.card-form {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.card-form input#card_destination_2 {
  margin-bottom: 1rem;
}

/*Card Profile information*/
.flex-home-simple {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
  max-width: 386px;
  position: relative;
}
@media only screen and (max-width: 430px) {
  .flex-home-simple {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 330px;
  }
}

.profile-link-button button {
  margin: 1.5rem 0;
}

.contact-information {
  padding: 0.5rem 0;
}
.contact-information a {
  text-decoration: none;
}
.contact-information a .fa {
  margin-right: 1rem;
}

.border-section {
  box-sizing: border-box;
  width: 100%;
  margin-bottom: 2rem;
}
.border-section .card-header {
  align-items: start;
  padding-left: 0.5rem;
}
.border-section .card-header h2 {
  margin-bottom: 0.5rem;
}
@media only screen and (max-width: 430px) {
  .border-section .card-header h2 {
    margin-right: 2rem;
  }
}
.border-section .card-body {
  margin-top: 1rem;
}
@media only screen and (max-width: 430px) {
  .border-section .card-body img {
    margin: 0 1rem 1rem 1rem;
  }
}
.border-section .card-body .card-information {
  padding-left: 1.5rem;
  width: 60%;
}
@media only screen and (max-width: 430px) {
  .border-section .card-body .card-information {
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 1rem;
  }
}
.border-section .card-body .card-information h3, .border-section .card-body .card-information h4 {
  margin: 0 0 0.5rem 0;
}
.border-section .card-body .card-information h3 {
  font-size: 22px;
  font-style: italic;
  font-weight: 600;
  letter-spacing: 0.22px;
}
.border-section .card-body .card-information h4 {
  font-size: 16.5px;
  font-weight: 400;
}
.border-section .card-body .card-information ul {
  padding: 0;
}
@media only screen and (max-width: 430px) {
  .border-section .card-body .card-information ul {
    text-align: center;
  }
}

.edit-icon {
  position: absolute;
  right: 5px;
  top: 0;
}

/*User list functionality and style*/
.flex-home-list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid #D9D9D9;
  padding-top: 1rem;
  width: 386px;
  position: relative;
}
@media only screen and (max-width: 430px) {
  .flex-home-list {
    flex-wrap: wrap;
    max-width: 100%;
  }
}

#user-list-container {
  display: none;
  padding-top: 2rem;
}
#user-list-container table tbody tr th {
  padding: 0.8rem;
  font-size: 13.2px;
}
#user-list-container table tbody tr td {
  padding: 0.8rem;
}
#user-list-container table tbody tr td a {
  font-size: 13.2px;
}
#user-list-container table tbody tr td:nth-last-child(-n+2) {
  text-align: center;
}
#user-list-container table tbody tr td:nth-last-child(-n+2) a {
  background-color: #fad15a;
  color: #000;
  border: 1px solid #fad15a;
  border-radius: 5px;
  width: auto;
  font-size: 16px;
  font-weight: 600;
  line-height: 16px;
  padding: 15px;
}
#user-list-container table tbody tr td:nth-last-child(-n+2) a:hover {
  background-color: #D9D9D9;
  border: 1px solid #D9D9D9;
  color: #000;
  cursor: pointer;
}

#user-list-toggle {
  cursor: pointer;
  width: 150px;
  position: relative;
}
#user-list-toggle #toggle-icon {
  display: none;
  position: absolute;
  margin-left: 1rem;
  right: 10px;
  top: 6px;
}
#user-list-toggle #toggle-icon .fa {
  font-size: 16px;
}

.create-user-button {
  position: absolute;
  right: 0;
}

/*
Public Profile
*/
/*Profile information*/
.public-profile-info {
  margin: 1rem 0;
}
.public-profile-info h1, .public-profile-info h2, .public-profile-info h3 {
  margin: 0.3rem;
}
.public-profile-info h1 {
  font-style: italic;
  letter-spacing: 0.22px;
}

/*List buttons*/
#userProfileLink {
  display: none;
}

.flex-list {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 197px;
  border-top: 1px solid #D9D9D9;
}
@media only screen and (max-width: 430px) {
  .flex-list {
    max-width: 330px;
  }
}
@media only screen and (max-width: 320px) {
  .flex-list {
    display: flex;
    flex-direction: column;
  }
}
.flex-list .public-contact-information {
  flex: 1;
  margin: 0 0.5rem;
}
.flex-list .public-contact-information a {
  color: #fff;
  display: block;
  padding: 1rem;
  text-align: center;
}
.flex-list .public-contact-information a:hover {
  color: #fad15a;
}
.flex-list .public-contact-information a .fa {
  font-size: 22px;
}

/*Download vCard button*/
/*Scan QR Code section*/
.qr-code-section {
  margin-top: 2rem;
  margin-bottom: 3rem;
}
.qr-code-section h4 {
  margin-bottom: 1rem;
}
.qr-code-section img {
  background: #fff;
  padding: 1rem;
  border-radius: 5px;
}

/*
Edit Profile and Edit User pages
*/
.edit-form {
  width: 350px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}
.edit-form .add-file-container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
.edit-form .add-file-container .file-input-container {
  width: 60%;
}
.edit-form .add-file-container .file-input-container .custom-file-input {
  position: absolute;
  opacity: 0;
  right: 0;
  bottom: 0;
}
.edit-form .add-file-container .file-input-container .custom-file-input-label {
  display: block;
  width: auto;
  text-align: center;
}
.edit-form .add-file-container .image-container {
  width: 40%;
  margin: 1rem auto;
}
.edit-form .file-path {
  width: 100%;
}
.edit-form .form-hide-fields {
  width: 100%;
  margin: 0.6rem 0 0 0;
}
.edit-form .form-hide-fields .inner-form-hide-fields {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
.edit-form .form-hide-fields .inner-form-hide-fields input {
  width: 80%;
}
.edit-form .form-hide-fields .inner-form-hide-fields .form-true-false .switch {
  display: inline-block;
  height: 30px;
  position: relative;
  width: 52px;
}
.edit-form .form-hide-fields .inner-form-hide-fields .form-true-false .switch #acf-field-show-email {
  display: none;
}
.edit-form .form-hide-fields .inner-form-hide-fields .form-true-false .slider {
  background-color: #ccc;
  bottom: 0;
  cursor: pointer;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  transition: 0.4s;
}
.edit-form .form-hide-fields .inner-form-hide-fields .form-true-false .slider:before {
  background-color: #fff;
  bottom: 3px;
  content: "";
  height: 24px;
  left: 4px;
  position: absolute;
  transition: 0.4s;
  width: 24px;
}
.edit-form .form-hide-fields .inner-form-hide-fields .form-true-false input[type=checkbox]:checked + .slider {
  background-color: #fad15a;
}
.edit-form .form-hide-fields .inner-form-hide-fields .form-true-false input[type=checkbox]:checked + .slider:before {
  transform: translateX(21px);
}
.edit-form .form-hide-fields .inner-form-hide-fields .form-true-false .slider.round {
  border-radius: 34px;
}
.edit-form .form-hide-fields .inner-form-hide-fields .form-true-false .slider.round:before {
  border-radius: 50%;
}
.edit-form .buttons-section {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-top: 1rem;
}

/*Creating users styles*/
/*Spec buttons*/
.spec-user-button {
  margin-top: 1rem;
}

.password-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}
.password-container .toggle-visibility-btn {
  position: absolute;
  right: 0;
  top: 10px;
  background-color: transparent;
  border: none;
  margin-left: 5px;
}
.password-container .toggle-visibility-btn #openEye, .password-container .toggle-visibility-btn #closedEye {
  display: none;
}

#generatePassword {
  justify-content: end;
}

input#send_user_notification:checked {
  accent-color: #fad15a;
}

/*Message for Ordering Cards*/
.order-message {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0.5rem;
  background: #fad15a;
  color: #000;
  font-weight: 600;
}

.wp-core-ui .button-secondary:hover, .wp-core-ui .button.hover, .wp-core-ui .button:hover {
  color: #000;
}

.wp-core-ui .button-secondary:focus, .wp-core-ui .button.focus, .wp-core-ui .button:focus {
  color: #000;
}

.wp-core-ui .button, .wp-core-ui .button-secondary {
  color: #000;
}

.login #login_error, .login .message, .login .success {
  border-left: 4px solid #D9D9D9;
  background-color: #131E1F;
}

input[type=checkbox]:focus, input[type=color]:focus, input[type=date]:focus, input[type=datetime-local]:focus, input[type=datetime]:focus, input[type=email]:focus, input[type=month]:focus, input[type=number]:focus, input[type=password]:focus, input[type=radio]:focus, input[type=search]:focus, input[type=tel]:focus, input[type=text]:focus, input[type=time]:focus, input[type=url]:focus, input[type=week]:focus, select:focus, textarea:focus {
  border-color: #D9D9D9;
  box-shadow: 0 0 0 1px #D9D9D9;
}

.wp-core-ui .button-primary.focus, .wp-core-ui .button-primary:focus {
  box-shadow: 0 0 0 1px #fff, 0 0 0 3px #D9D9D9;
}

#login form p.submit {
  margin: 0 0 5px 0;
}

body.login div#login p#backtoblog, body.login .language-switcher {
  display: none;
}

body.login {
  justify-content: center;
  align-items: center;
  background: #131E1F !important;
}
body.login #login {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0px;
  height: 100vh;
}
body.login #login h1 a {
  background-size: 230px;
  width: 230px;
  background-position: center top;
  background-repeat: no-repeat;
  color: #fff;
  height: 60px;
  font-size: 20px;
  font-weight: 400;
  max-width: 230px;
  margin-bottom: 0rem;
}
body.login #login form {
  margin-top: 36px;
  padding: 0px;
  overflow: hidden;
  background: #131E1F;
  border: none;
  box-shadow: none;
  width: 230px;
}
body.login #login form .forgetmenot {
  display: none;
}
body.login #login form .submit {
  display: flex;
  justify-content: center;
  text-align: center;
}
body.login #login form .submit input.button {
  background-color: #fad15a;
  color: #000;
  border: 1px solid #fad15a;
  border-radius: 5px;
  width: auto;
  font-size: 16px;
  font-weight: 600;
  line-height: 16px;
  width: auto;
  margin-top: 1rem;
}
body.login #login form .submit input.button:hover {
  cursor: pointer;
  background-color: #D9D9D9;
  color: #000;
  border: 1px solid #D9D9D9;
  border-radius: 5px;
  width: auto;
  font-size: 16px;
  font-weight: 600;
  line-height: 16px;
}
@media only screen and (max-width: 430px) {
  body.login #login form {
    width: 100%;
    max-width: 230px;
  }
}
body.login #login #nav a {
  color: #fad15a;
}
body.login #login #nav a:hover {
  color: #fff;
}