/* ----------------------------------------------------------------
Global CSS
-----------------------------------------------------------------*/
.avatar {
  font-size: 1.4rem;
  margin: auto;
  text-align: center;
  font-weight: normal;
  background: #1abc9c;
  color: #fff;
  line-height: 50px;
  height: 50px;
  width: 50px;
}

.avatar.avatar-sm {
  font-weight: 100;
  font-size: 1.1rem;
  line-height: 28px;
  height: 28px;
  width: 28px;
}

.btn-login-register {
  background-color: #F5F5F5;
  color: #444444 !important;
  border-radius: 2px;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
  padding: 0 15px;
  height: 40px;
  line-height: 40px;
  font-weight: 700;
  margin-right: 7px;
}

.btn-login-register.active {
  background-color: #1abc9c;
  color: #fff !important;
}

.login-input.error {
  border-color: #E42C3E;
}

.canvas-flash .alert {
  text-align: center;
}

.has-danger .fv-plugins-message-container {
  color: #dc3545;
}

td.min {
  width: 1%;
  white-space: nowrap;
}

td.center,
th.center {
  text-align: center;
}

#logo img {
  padding: 20px 0 20px 0;
}

h1,
h2,
h3,
h4,
h5,
h6,
.card-header {
  font-family: "Roboto", sans-serif !important;
  font-weight: 400;
}

p,
span,
table td,
div,
label,
input,
a,
a.dropdown-item {
  font-family: "Poppins", sans-serif;
  font-weight: 300;
}

a.menu-link div {
  font-weight: 700;
}

.min-vh-90 {
  min-height: 90vh;
}

/* --- content background --- */
#page-title,
#content {
  background: #f6f7f9;
}

.required-indicator {
  color: #dc3545;
}

#header .menu-item .profile-img {
  border: 1px solid #444444;
}
#header .menu-item:hover .profile-img {
  border: 1px solid #1abc9c;
}
#header .menu-item.current .profile-img {
  border: 1px solid #1abc9c;
}
#header .logout-icon {
  height: 28px;
  width: 28px;
  text-align: center;
  border: 1px solid #444444 !important;
  border-radius: 50%;
}
#header .logout-icon a {
  color: #444444;
  margin-top: 2px;
}
#header .logout-icon:hover {
  border: 1px solid #1abc9c !important;
}
#header .logout-icon:hover a {
  color: #1abc9c;
}

#header.transparent-header.dark .logout-icon {
  border: 1px solid #fff !important;
}
#header.transparent-header.dark .logout-icon a i {
  color: #fff !important;
}

/* -------- Home Page Design --------- */
.home-banner-parallax {
  background: url("/frontend/canvas/images/landing/landing2.jpg") center;
  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.signup-form-widget .form-group .form-control::-moz-placeholder {
  color: #999;
}

.signup-form-widget .form-group .form-control::placeholder {
  color: #999;
}

.profiles-page .search-box {
  position: relative;
}
.profiles-page .input-group.search-box input.form-control {
  border-radius: 20px;
  padding-left: 40px;
  border: 1px solid transparent;
}
.profiles-page .input-group.search-box input.form-control:active,
.profiles-page .input-group.search-box input.form-control:focus {
  border: 1px solid #1abc9c;
}
.profiles-page .input-group.search-box i.icon-search {
  position: absolute;
  z-index: 5;
  top: 7px;
  left: 10px;
}

.profiles-page .show-table table tbody tr td:first-child {
  min-width: 140px;
}
.profiles-page .remove-attachment:hover {
  cursor: pointer;
}

.getLogin-page a.btn.btn-login-register {
  background: #f5f5f5;
}
.getLogin-page a.btn-login-register.active {
  background: #1abc9c;
}
.getLogin-page .errors div.alert {
  max-width: 500px;
  margin: 1rem auto 1rem;
}

.getRegister-page a.btn.btn-login-register {
  background: #f5f5f5;
}
.getRegister-page a.btn-login-register.active {
  background: #1abc9c;
}
.getRegister-page .errors div.alert {
  max-width: 500px;
  margin: 1rem auto 1rem;
}

.my-profile-page {
  /* ========== Profile Page ============= */
  /* ====== Flip Card CSS ====== */
}
.my-profile-page .profile-card img {
  border: 2px solid #1abc9c;
  border-bottom: 0;
  padding: 6px;
}
.my-profile-page .profile-card input {
  border: 1px solid transparent;
  background: none;
  padding: 0;
  border-bottom: 1px dashed #ddd;
}
.my-profile-page .account-id-card .qr-card {
  background-color: transparent;
  width: 500px;
  height: 280px;
  perspective: 1000px;
  border-radius: 6px;
  margin-bottom: 40px;
}
.my-profile-page .account-id-card .qr-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  box-shadow: 0 1px 10px rgba(51, 158, 137, 0.1921568627);
}
.my-profile-page .account-id-card .qr-card:focus {
  outline: 0;
}
.my-profile-page .account-id-card .qr-card:hover {
  cursor: pointer;
}
.my-profile-page .account-id-card .qr-card.flipping .qr-card-inner,
.my-profile-page .account-id-card .qr-card.flipping .qr-card-inner {
  transform: rotateY(180deg);
}
.my-profile-page .account-id-card .qr-card-front,
.my-profile-page .account-id-card .qr-card-back {
  border-radius: 6px;
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
.my-profile-page .account-id-card .qr-card-back .input-group {
  width: 90%;
}
.my-profile-page .account-id-card .qr-card-front {
  transition: all ease 0.2s;
  transition-delay: 0.2s;
  background: linear-gradient(to left, #49a5ac, #1abc9c);
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
}
.my-profile-page .account-id-card .qr-card-back {
  background: #fff;
  transform: rotateY(180deg);
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}
.my-profile-page .qr-card.flipping .qr-card-front {
  visibility: hidden;
  opacity: 0;
}

/** Overwrite Bootstrap **/
/* --- Button ---- */
.btn {
  font-size: 0.9rem;
  border-radius: 3px;
  background: #1abc9c;
  border: 0;
  transition: all ease 0.4s;
  transform: translateY(0);
  box-shadow: 0 1px 6px rgba(51, 158, 137, 0.1921568627);
  color: #fff;
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 1px 15px rgba(51, 158, 137, 0.1921568627);
}

.btn:active,
.btn:hover {
  background: #49a5ac;
}

/* --- Tooltip ---- */
.tooltip.show {
  opacity: 1;
}

.tooltip .tooltip-inner {
  text-align: left;
  background-color: #fff;
  color: #444444;
  border: 1px solid #ddd;
  box-shadow: 0 1px 10px rgba(51, 158, 137, 0.1921568627);
}

.bs-tooltip-bottom .arrow::before {
  border-bottom-color: #b5b5b5;
}

.bs-tooltip-left .arrow::before {
  border-left-color: #b5b5b5;
}

/** Overwrite Canvas Template **/
.header-misc {
  margin-left: -6px;
}

.header-misc-icon > a {
  width: auto;
  height: auto;
}

/** Bootstrap Card **/
.card-body.show {
  padding: 0;
}

.card {
  transition: all ease 0.4s;
  border: 0;
  border-radius: 6px;
  box-shadow: 0 1px 4px rgba(51, 158, 137, 0.1921568627);
}

.card:hover {
  border: 0;
  border-radius: 6px;
  box-shadow: 0 4px 40px rgba(51, 158, 137, 0.1921568627);
}

.card-header,
.card-footer {
  background-color: #fff;
}

.card p.card-text {
  margin-bottom: 10px;
  color: #4d584d;
}

.card .line-divider {
  border-top: 1px solid #eee;
  margin: 10px 0 10px;
}

.card .action-buttons {
  text-align: right;
}

.card .action-buttons a.btn {
  width: 30px;
  height: 30px;
  padding: 0;
  color: #fff;
  border-radius: 50%;
  background: #1abc9c;
  text-align: center;
  line-height: 30px;
}