/* colors */
:root{
  --bgcolor: rgba(42,132,255,0.93);
  /* rgb(56,140,254) */
  --textcolor: white;
}

/* layout styles */
nav{
  position: fixed;
  top: 0;
  background: var(--bgcolor);
  backdrop-filter: blur(4px);
  z-index: 800;
}
nav a{
  text-transform: uppercase;
  color: var(--textcolor);
}
nav .sidenav-trigger{
  margin: 0;
}

/* appointment styles */
.appointments {
  margin-top: 70px;
}
.card-panel.appointment {
  border-radius: 8px;
  padding: 10px;
  box-shadow: 0px 1px 3px rgba(90,90,90,0.1);
  display: grid;
  grid-template-columns: 60px 6fr;
  grid-template-areas: "image details";
  position: relative;
}
.appointment-details {
  grid-area: details;
  margin-top: 6px;
}
.appointment-title {
  font-weight: bold;
}
.appointment-info {
  font-size: 0.8em;
}

.icon {
  width: 48px;
  height: 44px;
  background-image: url("/images/Massages_transparent.png");
  background-repeat: no-repeat;
  background-size: 241px 178px;
}
.icon-1, .icon-6, .icon-11, .icon-16 {
  background-position-x: 0;
}
.icon-2, .icon-7, .icon-12, .icon-17 {
  background-position-x: -48px;
}
.icon-3, .icon-8, .icon-13, .icon-18 {
  background-position-x: -96px;
}
.icon-4, .icon-9, .icon-14, .icon-19 {
  background-position-x: -144px;
}
.icon-5, .icon-10, .icon-15, .icon-20 {
  background-position-x: -192px;
}

.icon-1, .icon-2, .icon-3, .icon-4, .icon-5 {
  background-position-y: 0;
}
.icon-6, .icon-7, .icon-8, .icon-9, .icon-10 {
  background-position-y: -44px;
}
.icon-11, .icon-12, .icon-13, .icon-14, .icon-15 {
  background-position-y: -88px;
}
.icon-16, .icon-17, .icon-18, .icon-19, .icon-20 {
  background-position-y: -132px;
}

.sticky-bottom {
  position: sticky;
  bottom: 0;
  padding-bottom: 20px;
  z-index: 800;
}

.appointments.container {
  position: relative;
  overflow: hidden;
}
.appointment {
  margin-top: 0;
  z-index: 1;
}
.appointment.transition {
  transition: transform 0.3s ease;
}
.delete-btn {
  position: absolute;
  right: 0;
  width: 100%;
  background-color: gray;
  border-radius: 8px;
  color: white;
  display: flex;
  align-items: center;
  justify-content: right;
  padding-right: 20px;
  opacity: 0;
  transition: background-color 0.3s;
  z-index: 0;
}
.delete-btn.active {
  background-color: red;
  color: white;
}
.delete-btn>span {
  visibility: hidden;
  text-align: center;
  padding-right: 10px
}
.delete-btn.active>span {
  visibility: visible;
}

.custom-waves {
/*    display: inline-block;  */
  overflow: hidden;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  vertical-align: middle;
  z-index: 1;
  -webkit-transition: .3s ease-out;
  transition: .3s ease-out;
}
.custom-waves .waves-ripple {
  position: absolute;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  margin-top: -10px;
  margin-left: -10px;
  opacity: 0;
  background: rgba(0,0,0,0.2);
  -webkit-transition: all 0.7s ease-out;
  transition: all 0.7s ease-out;
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: transform, opacity;
  transition-property: transform, opacity, -webkit-transform;
  -webkit-transform: scale(0);
  transform: scale(0);
  pointer-events: none
}
.version {
  padding-right: 7px;
}

/* Toast classes */

#toast-container {
  padding: 8px;
}
.toast {
  border-radius: 8px;
}
.system-msg {
  background-color: #03a9f4;
  color: white;
}
.system-msg .btn {
  background-color: #0277bd;
}