.--t {
  width: 296px;
  height: 296px;
  min-width: 296px;
  max-width: 296px;
  max-height: 296px;
  border-radius: 20px !important;
  overflow: hidden;
  margin: 20px !important;
  /* box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2) !important; */
  box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.3);
  /* background-color: whitesmoke; */
  /* border: 1px solid white; */
}

.--t .card-body {
  justify-content: center;
  display: flex;
  flex-direction: column;
  /* text-align: center; */
}

* {
  font-weight: 400;
}

.--t h4 {
  /* color: #fff; */
  font-size: 20px;
  line-height: 28px;
  font-weight: 500;
  font-family: "Alatsi", sans-serif;
  margin-bottom: 8px;
}

.--t p {
  /* color: #fff; */
  /* font-size: 16px; */
  /* line-height: 28px; */
  font-weight: 400;
  /* font-family: "Alatsi", sans-serif; */
  /* margin-bottom: 8px; */
}

.card .--front {
  height: 100%;
  width: 100%;
  /* display: none; */
  transition: all 0.3s;
}

.card.--t:hover .--back {
  opacity: 100;
  top: 0;
}

.card.--t:hover .--front {
  opacity: 0;
  /* transform: scale(.8); */
}

label {
  line-height: 1.1;
}

.card .--back {
  opacity: 0;
  position: absolute !important;
  left: 0;
  top: -300px;
  width: 100%;
  height: 100%;
  transition: all 0.5s ease;
}

.--ci {
  content: "";
  margin-top: 20px !important;
  height: calc(50% - 20px);
  width: calc(100% - 50px);
  /* width: 75%; */
  background-size: cover;
  /* background-color: rgba(253, 253, 253, 0.192); */
  /* background-position: bottom; */
  border-bottom: 1px solid lightgrey;
}

.card-img-top {
  width: 100%;
  height: 50%;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
}

.rotating-card-container .card .back,
.rotating-card-container .card .front {
  border-radius: 20px;
  /* width: 400px;
	height: 400px; */
}

.feature-card {
  /* background-color: #ab60b8 !important; */
  width: 296px !important;
  height: 296px !important;
  min-width: 296px !important;
  min-height: 296px !important;
  max-width: 296px !important;
  max-height: 296px !important;
  border-radius: 20px !important;
}

.feature-card .card-body {
  border-top: 1px solid rgb(221, 221, 221);
  border-bottom-left-radius: 20px !important;
  border-bottom-right-radius: 20px !important;
}

.card-img-top {
  background-color: whitesmoke;
  background-image: url("../img/image_placeholder.jpg");
  background-size: cover;
  /* background-repeat: none; */
}

.back {
  text-align: left !important;
}

.c1 {
  background-color: #ef6c00;
}

.c2 {
  background-color: #2196f3 !important;
}

.c3 {
  background-color: #303e45;
}

.c4 {
  background-color: #eb673e;
}

.card.login {
  width: 280px;
}

/* .login input {
	width: 100% !important;
} */

.login :text {
  width: auto !important;
  max-width: auto !important;
}

.feature-card h4 {
  /* font-weight: 400; */
  color: #fff;
  font-size: 20px;
  line-height: 28px;
  font-weight: 500;
  font-family: "Alatsi", sans-serif;
  margin-bottom: 8px;
}

.card.login h4 {
  color: #fff;
  font-size: 20px;
  line-height: 28px;
  font-weight: 500;
  font-family: "Alatsi", sans-serif;
  margin-bottom: 8px;
}

.feature-card .front,
.feature-card .back {
  height: 100% !important;
  color: white;
  /* background-color: blueviolet; */
}

.logout {
  position: fixed;
  bottom: 0;
  border-top: 1px solid lightgray;
  padding: 10px 0;
}

.disable-select {
  -moz-user-select: none !important;
  -khtml-user-select: none !important;
  -webkit-user-select: none !important;
  user-select: none !important;
}

.warning-copyright {
  -moz-user-select: none !important;
  -khtml-user-select: none !important;
  -webkit-user-select: none !important;
  user-select: none !important;
}

.warning-intellectual-property {
  -moz-user-select: none !important;
  -khtml-user-select: none !important;
  -webkit-user-select: none !important;
  user-select: none !important;
}

.iframe-container {
  height: calc(100%);
  overflow-y: hidden !important;
  padding: 0;
  padding-left: 20px;
  padding-right: 2px;
  padding-top: 0px !important;
}

.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus {
  background-color: #ff9800 !important;
  color: #ffffff;
}

.sidebar .user:after {
  bottom: 6px;
}

select[name="InsertRecordSTP"] {
  height: 120px;
  width: 320px !important;
  max-width: none !important;
  overflow: hidden;
  padding: 10px;
}

.modal-dialog {
  max-width: 600px;
}

form p {
  padding: 0 !important;
  margin: 0 !important;
  /* margin */
}

#myInput {
  width: 320px !important;
  max-width: none !important;
  padding: 10px !important;
}

textarea[name="InsertRecordNote"] {
  min-height: 50px !important;
}

select[name="InsertRecordSTP"] .dropdown-item {
  margin: 0 !important;
  padding: 10px !important;
  box-shadow: none !important;
}

.nav-pills-sm {
  border: 1px solid grey;
  padding: 0 !important;
  border-radius: 25px !important;
  overflow: hidden;
}

.nav-pills-sm .nav-item {
  margin: 0 !important;
  border-radius: 0 !important;
}

.tick-it::after {
  content: " ✅";
}

.cross-it::after {
  content: " ❌";
}

.nav-pills-sm .nav-link {
  padding: 5px !important;
  margin: 0 !important;
  /* min-width: auto !important; */
  /* border: 1px solid grey; */
  /* width: auto !important; */
  min-width: 80px !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  /* color: black !important; */
}

.nav-pills-sm .nav-link.active {
  background-color: rgb(90, 90, 90) !important;
}

.table {
  width: auto;
  background-color: white !important;
}

.table .table {
  background-color: unset !important;
}

.card.--w {
  padding: 0 !important;
  margin: 0 !important;
  height: calc(100vh - 100px) !important;
  max-height: calc(100vh - 100px) !important;
  background-color: white !important;
}

.card-body.--w {
  width: 100%;
  padding: 30px 40px !important;
  margin: 0 !important;
  /* padding: 20px 0 0 40px !important; */
  /* margin: 0 10px !important; */
  /* max-height: calc(100vh - 100px) !important; */
  /* background-color: white !important; */
}

.--label {
  font-size: 18px;

  padding-left: 7px;
  vertical-align: middle;
  /* color: rgb(61, 61, 61); */
}

td {
  vertical-align: middle !important;
}

[v-cloak] {
  display: none !important;
}

.navbar-minimize {
  position: absolute;
  right: 15px;
  top: 10px;
  z-index: 99;
  transition: all 0.25s;
  /* transform: rotate(270deg); */
}

.admin-btn {
  position: absolute;
  left: 10px;
  bottom: 4px;
  padding: 0 !important;
  margin: 0 !important;
}

.main-panel > .navbar {
  height: 70px !important;
  max-height: 70px !important;
}

.sidebar-mini .navbar-minimize {
  opacity: 0;
}

.sidebar-mini .sidebar:hover .navbar-minimize {
  opacity: 100;
  /* transform: rotate(90deg); */
}

.sidebar {
  z-index: 99999;
}

:root {
  --logo-width: 125px;
}

:-webkit-full-screen .hide-on-fullscreen {
  display: none;
}

.visible-on-fullscreen {
  display: none;
}

:-webkit-full-screen .visible-on-fullscreen {
  display: block;
}

@media (max-width: 991.98px) {
  .logo {
    left: 0 !important;
    margin: 0 20px;
  }
}

.logo {
  position: absolute !important;
  left: calc(50% - (var(--logo-width) / 2));
  width: var(--logo-width);
  padding-bottom: 2px;
}

.logo-right {
  /* padding-top: 2px; */
}

.logo > img {
  width: 100%;
  height: 100%;
}