#page_home {
  height: 100%;
  width: 100%;
}
.page-navigation {
  width: 8%;
  background-color: #1a6fff;
}
.navigation-item {
  min-height: 7.5vw;
  height: auto;
  width: 7.5vw;
  color: white;
  border-radius: 2px;
  font-weight: bolder;
  cursor: pointer;
  transition: all ease-in 0.25s;
  transform: scale(0.9);
  cursor: pointer;
}
.navigation-item-logout {
  min-height: 7.5vw;
  height: auto;
  width: 7.5vw;
  color: white;
  border-radius: 2px;
  font-weight: bolder;
}
.nav-logout-icon:hover {
  transform: scale(1.25);
}
.nav-item-icon {
  font-size: 48px;
}
.nav-logout-icon {
  font-size: 36px;
  transition: all ease-in 0.25s;
  transform: scale(1);
  cursor: pointer;
}
.navigation-item:hover,
.navigation-item.active {
  background-color: white;
  color: #1a6fff;
  transform: scale(1);
}

.content-holder {
  height: 100%;
}

/* SUB-NAVIGATION */
.sub-navigation {
  height: 100%;
  width: 12.5vw;
  /* border-left: solid 2px gainsboro; */
  padding-top: 1%;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12), 0 1px 4px rgba(0, 0, 0, 0.24);
  cursor: pointer;
}

.sub-navigation-item.active,
.sub-navigation-item:hover {
  color: #ff8f00;
  font-weight: bold;
}

.card-label {
  color: black;
  background-color: #f7f7f7;
  height: 5vh;
  border: solid 1px gainsboro;
  border-radius: 5px 5px 0 0;
  font-size: 0.7rem;
}
.card-content {
  background-color: white;
  font-weight: bolder;
  min-height: 7.5vh;
  height: auto;
  border-left: solid 1px gainsboro;
  border-right: solid 1px gainsboro;
  font-size: 2vw;
}
.card-date {
  color: gray;
  background-color: #f7f7f7;
  height: 5vh;
  border: solid 1px gainsboro;
  border-radius: 0 0 5px 5px;
}
.sort-date {
  color: #1a6fff;
  border: solid 2px #1a6fff;
  width: 5vw;
  padding: 5px;
}
.sort-date:hover {
  cursor: pointer;
}
.sort-date.active {
  background-color: #1a6fff;
  color: white;
}

.filter-date {
  border-radius: 0;
}
.filter-date:focus {
  box-shadow: none;
}

.tab-header span {
  font-size: 5vh;
}
#merchant_list {
  position: absolute;
  width: 12.5%;
  border-radius: 0;
  border-left: solid 1px black;
  border-right: solid 1px black;
  padding: 0;
}
.ml-item {
  cursor: pointer;
  padding-left: 2%;
  padding-right: 2%;
}
.ml-item:hover {
  background-color: #767676;
  color: white;
}

.merchant-actions:hover {
  cursor: pointer;
}

#system_modal {
  z-index: 2000;
  position: absolute;
  width: 100vw;
  height: 100vh;
  background-color: rgba(33, 37, 41, 0.75);
}
.modal-card {
  background-color: white;
  width: 35vw;
  height: auto;
  transform: translateY(-125%);
  -webkit-transform: translateY(-125%);
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12), 0 1px 4px rgba(0, 0, 0, 0.24);
}

.btn-close-modal {
  cursor: pointer;
}
.btn-close-modal:hover {
  color: red;
}

.slide-in {
  animation: slide-in 0.5s forwards;
  -webkit-animation: slide-in 0.5s forwards;
}

.slide-out {
  animation: slide-out 0.5s forwards;
  -webkit-animation: slide-out 0.5s forwards;
}
#txt_merchant_mobile_number {
  -moz-appearance: textfield;
}
#txt_merchant_mobile_number::-webkit-inner-spin-button {
  display: none;
}
#txt_merchant_mobile_number:-webkit-outer-spin-button,
#txt_merchant_mobile_number:-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.settings-header{
    font-size: 1.25rem;
}

.settings-content{
    border-top: solid 1px gainsboro;
}
.settings-button{
    cursor: pointer;
    color: #1a6fff;
}
.settings-button:hover{
    text-decoration: underline;
}
#settings_list{
    overflow-y: auto;
    max-height: 75vh;
}
/* #content_setting{
    overflow-y: scroll;
} */

@keyframes slide-in {
  100% {
    transform: translateY(0%);
  }
}

@-webkit-keyframes slide-in {
  100% {
    -webkit-transform: translateY(0%);
  }
}

@keyframes slide-out {
  0% {
    transform: translateY(0%);
  }
  100% {
    transform: translateY(-125%);
  }
}

@-webkit-keyframes slide-out {
  0% {
    -webkit-transform: translateY(0%);
  }
  100% {
    -webkit-transform: translateY(-125%);
  }
}

.show-code{
  cursor: pointer;
}

textarea {
  resize: none;
  overflow:auto;
  white-space :nowrap
}