* {
  font-family: Proxima Nova !important;
  --amplify-components-button-primary-background-color: #102f49;
  --amplify-components-button-primary-hover-background-color: #3075a8;
  --amplify-components-button-link-hover-background-color: none;
  --amplify-components-button-link-color: #102f49;
}

body {
  margin: 0;
}

#app {
  display: flex;
  justify-content: center;
  height: 100vh;
  background-color: #2f75a81a;
}

div.login-logo-wrapper {
  text-align: center;
  margin-top: 20px;
}

div.login-logo-wrapper > img {
  width: 200px;
}

label.select-label[data-shrink="true"] {
  margin-top: 15px;
  margin-left: -5px;
}

.header-menu {
  display: flex;
  justify-content: space-between;
  background-color: #ffffff;
  height: 80px;
}

.header-admin-links {
  display: flex;
  flex-direction: row;
  padding: 0;
}

.voucher-link {
  color: #646d82 !important;
  margin-left: 7%;
}

.company-link {
  color: #646d82 !important;
  margin-left: 2%;
}

.greeting-wrapper {
  display: flex;
  justify-content: space-between;
  background-color: #cad8e4;
  height: 80px;
}

.greeting {
  color: #2f75a8;
  font-weight: 700 !important;
  font-size: 22px !important;
}

.search-icon {
  margin-left: 30px;
  margin-bottom: -12px;
  color: #102f49;
}

.search-input {
  margin-right: 70px;
  padding-left: 8px;
  height: 40px;
  width: 250px;
  background-color: white;
  border-radius: 6px;
}

.table-topper-wrapper {
  margin-top: 25px;
  margin-bottom: 15px;
  background: transparent !important;
  box-shadow: none !important;
}

.table-wrapper {
  margin-right: 10%;
  margin-left: 10%;
  border-radius: 12px !important;
}

.MuiDataGrid-row {
  cursor: pointer !important;
}

.MuiDataGrid-cell:focus {
  outline: none !important;
}

.data-table {
  height: 710px !important;
  width: 100%;
  color: #646d82 !important;
  border: none !important;
}

.vecto-column-header {
  margin-top: 20px;
  outline: none !important;
}

.MuiDataGrid-columnSeparator {
  display: none !important;
}

.main-page {
  background-color: #f2f6fa;
  height: 100vh;
  width: 100vw;
}

span.pending-status {
  font-weight: 800;
  color: #f58836;
}

span.active-status {
  font-weight: 800;
  color: #2fa83d;
}

span.expired-status {
  font-weight: 800;
  color: #ff0000;
}

span.client-name {
  color: #102f49;
}

.voucher-view-card-sub-header {
  font-weight: 700;
  font-size: 13px;
  color: #646d82;
  margin-bottom: 11px;
  letter-spacing: 1.5px;
}
.voucher-view-card-header {
  font-weight: 700 !important;
  font-size: 30px !important;
  color: #102f49;
  margin-bottom: 11px !important;
  letter-spacing: 1.5px;
}

button.create-button {
  margin-right: 9%;
  margin-left: -50px;
  width: 250px;
  height: 40px;
  background-color: #2f75a8;
  color: #ffffff;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1.5px;
  border-radius: 6px;
}

.voucher-view-card {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 30px;
  width: 800px;
  border: none;
  border-radius: 12px !important;
  color: #102f49;
}

.message-card {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 125px 180px;
  border: none;
  border-radius: 12px !important;
  color: #102f49;
  text-align: center;
}

div.message-card-header {
  font-weight: 700;
  font-size: 30px;
}

div.message-card-text {
  margin-top: 40px;
  width: 500px;
  font-size: 15px;
}

button.message-card-action-button {
  margin-top: 40px;
  width: 122px;
  height: 44px;
  font-size: 13px;
  font-weight: 300;
  letter-spacing: 1.5px;
  background-color: #2f75a8;
}

button.message-card-action-button:hover {
  background-color: #2f75a8;
}

button.voucher-view-action-button {
  width: 115px;
  height: 44px;
  border-radius: 6px;
  margin-left: 15px;
}

button.voucher-view-action-button-contained {
  width: 115px;
  height: 44px;
  border-radius: 6px;
  margin-left: 15px;
  background-color: #2f75a8;
}

button.voucher-view-action-button-contained:hover {
  background-color: #2c6b97;
}

button.voucher-create-action {
  margin: 5px;
  width: 135px;
  height: 44px;
  letter-spacing: 0.13px;
  font-weight: 300;
}

.voucher-create-action-button-row {
  text-align: right;
}

.voucher-create-card-header {
  margin: 0;
}

.voucher-create-card-sub-header {
  font-weight: 500;
  padding-top: 20px;
  margin-left: -10px;
  color: #646d82;
}

.voucher-create-card {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 12px !important;
  padding: 30px;
}

button.create-button:hover {
  background-color: #2c6b97;
}

h4.page-header {
  font-weight: 700;
  margin-left: 9%;
  color: #102f49;
  flex: 1;
}

#logo {
  height: 50px;
}

#logout {
  font-weight: 600;
  font-size: 15px;
  color: #2f75ab;
  letter-spacing: 1.5px;
}

#footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100vw;
  background: #f8fafc;
  color: #102f49;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 30px;
  font-size: 14px;
}

#footer > .brand-name {
  font-weight: 700;
}