* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: "Poppins", sans-serif;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
a {
  text-decoration: none !important;
}
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
  display: none;
}
::-webkit-scrollbar {
  width: 0.2vw;
  height: 0vw;
}
::-webkit-scrollbar-track {
  background: rgba(24, 24, 24, 0.6117647059);
  border-radius: 1vw;
}
::-webkit-scrollbar-thumb {
  background: #eb175c;
  border-radius: 1vw;
}
body {
  width: 100%;
  background-image: url("../images/background.png");
  background-repeat: no-repeat;
  background-size: cover;
  padding: 1vw 2vw;
  overflow: hidden;
}
header {
  height: 3vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
header .left-side {
  display: flex;
  align-items: center;
  gap: 1vw;
}
header .left-side .back-to-index {
  font-size: 2vw;
  color: rgba(0, 0, 0, 0.1607843137);
  transition: 0.2s;
  cursor: pointer;
}
header .left-side .back-to-index:hover {
  color: rgba(255, 255, 255, 0.6784313725);
}
header .left-side img {
  width: 8vw;
}
header .left-side p {
  font-size: 1.2vw;
  color: #f5f5f5;
}
header .right-side {
  display: flex;
  gap: 1vw;
}
header .right-side .info-box {
  display: flex;
  align-items: center;
  gap: 10px;
}
header .right-side .info-box .icon-base {
  height: 100%;
  display: flex;
}
header .right-side .info-box .icon-base i {
  font-size: 1vw;
  color: #3ed85f;
}
header .right-side .info-box .text-base {
  height: 100%;
  display: flex;
  flex-direction: column;
  color: #f5f5f5;
}
header .right-side .info-box .text-base p {
  font-size: 1vw;
}
header .right-side .info-box .text-base p:last-child {
  font-size: 0.9vw;
  opacity: 0.7;
}
header .right-side .info-box:last-child .icon-base i {
  color: #f5f5f5;
}
main {
  width: 100%;
  height: 85vh;
  display: flex;
  padding: 5vw 3vw;
}
main .left-side {
  padding: 1vw;
  flex: 1;
  gap: 1vw;
  display: flex;
  flex-direction: column;
}
main .left-side .content {
  display: flex;
}
main .left-side .content .date-time {
  flex: 1;
  height: 15vh;
}
main .left-side .content .date-time p {
  color: #f5f5f5;
  font-size: 1.2vw;
}
main .left-side .content .date-time p:last-child {
  font-size: 4vw;
}
main .left-side .content .weather {
  flex: 1;
  height: 15vh;
}
main .left-side .content .weather .icon-base {
  display: flex;
  align-items: center;
  gap: 0.5vw;
}
main .left-side .content .weather .icon-base i {
  font-size: 4vw;
  color: #dfe6f4;
}
main .left-side .content .weather .icon-base p {
  font-size: 3vw;
  color: #f5f5f5;
}
main .left-side .content .weather p {
  color: #f5f5f5;
  font-size: 1vw;
}
main .left-side .notify-title {
  display: flex;
  gap: 0.5vw;
  align-items: center;
}
main .left-side .notify-title i {
  color: #ffd900;
  font-size: 1vw;
}
main .left-side .notify-title p {
  color: #f5f5f5;
  font-size: 1vw;
  display: flex;
  align-items: center;
  gap: 0.5vw;
}
main .left-side .notify-title p span {
  background-color: #398dc5;
  font-size: 0.8vw;
  padding: 0vw 0.5vw;
  align-items: center;
  border-radius: 0.3vw;
}
main .left-side .notify-box {
  background-color: rgba(0, 0, 0, 0.1607843137);
  border-radius: 2vw 2vw 2vw 2vw;
  width: 100%;
  padding: 0.5vw;
  cursor: pointer;
  position: relative;
  display: flex;
  gap: 0.5vw;
  animation: fade-in-box 0.5s ease-in-out;
}
main .left-side .notify-box .user-image {
  display: flex;
  align-items: center;
}
main .left-side .notify-box .user-image img {
  width: 3.3vw;
}
main .left-side .notify-box i {
  display: flex;
  align-items: center;
  font-size: 1vw;
  color: #e03535;
  position: absolute;
  right: 1vw;
  top: 1.6vw;
}
main .left-side .notify-box-all {
  display: flex;
  padding: 0.5vw 1vw;
  justify-content: space-between;
  background-color: rgba(255, 255, 255, 0.1607843137);
}
main .left-side .notify-box-all i {
  display: flex;
  align-items: center;
  position: relative;
  top: 0;
  color: rgba(245, 245, 245, 0.7254901961);
  right: 0;
}
main .left-side .notify-box-all p {
  color: rgba(245, 245, 245, 0.7254901961);
  font-size: 1vw;
}
main .left-side .text-base {
  justify-content: center;
  display: flex;
  flex-direction: column;
}
main .left-side .text-base p {
  color: #f5f5f5;
  font-size: 1vw;
  display: flex;
  align-items: center;
  gap: 0.5vw;
}
main .left-side .text-base p span {
  background-color: #e03535;
  font-size: 0.7vw;
  padding: 0vw 0.5vw;
  align-items: center;
  border-radius: 0.3vw;
}
main .left-side .text-base p:last-child {
  opacity: 0.7;
  font-size: 0.9vw;
}
main .right-side {
  flex: 2;
  display: flex;
  flex-direction: column;
  align-items: end;
  justify-content: center;
  padding: 1vw;
  gap: 2vw;
}
main .right-side .services-line {
  max-width: 43vw;
  max-height: 15vw;
  display: flex;
  overflow: auto;
  overflow-y: hidden;
  gap: 1vw;
  flex-direction: row;
}
main .right-side .service-box {
  min-width: 10vw;
  height: 11vw;
  float: left;
}
main .right-side .service-box .img-box {
  width: 100%;
  height: 80%;
  background: rgba(0, 0, 0, 0.1607843137);
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 1vw;
  transition: 0.2s all;
}
main .right-side .service-box .img-box img {
  height: 60%;
}
main .right-side .service-box .img-box:hover {
  background: linear-gradient(0deg, rgb(250, 5, 83) 0%, rgb(247, 83, 161) 100%);
}
main .right-side .service-box .service-text {
  width: 100%;
  height: 20%;
  font-size: 1vw;
  text-align: center;
  margin-top: 0.5vw;
  color: #f5f5f5;
}
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: "Poppins", sans-serif;
}
body {
  width: 100%;
  background-image: url("../images/background.png");
  background-repeat: no-repeat;
  background-size: cover;
  padding: 1vw 2vw;
}
header {
  height: 3vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
header .left-side {
  display: flex;
  align-items: center;
  gap: 1vw;
}
header .left-side img {
  width: 8vw;
}
header .left-side p {
  font-size: 1.2vw;
  color: #f5f5f5;
}
header .right-side {
  display: flex;
  gap: 1vw;
}
header .right-side .info-box {
  display: flex;
  align-items: center;
  gap: 10px;
}
header .right-side .info-box .icon-base {
  height: 100%;
  display: flex;
}
header .right-side .info-box .icon-base i {
  font-size: 1vw;
  color: #3ed85f;
}
header .right-side .info-box .text-base {
  height: 100%;
  display: flex;
  flex-direction: column;
  color: #f5f5f5;
}
header .right-side .info-box .text-base p {
  font-size: 1vw;
}
header .right-side .info-box .text-base p:last-child {
  font-size: 0.9vw;
  opacity: 0.7;
}
header .right-side .info-box:last-child .icon-base i {
  color: #f5f5f5;
}
.admin-main {
  width: 100%;
  height: 85vh;
  display: flex;
  padding: 8vw 3vw;
  justify-content: space-between;
}
.admin-main .left-side {
  flex: 1;
  display: flex;
  justify-content: center;
}
.admin-main .left-side .input-main {
  width: 80%;
  height: 20vw;
  justify-content: start;
  border-radius: 2.3vw;
  display: flex;
  flex-direction: column;
  position: relative;
  align-items: center;
  background-color: #fff;
  gap: 1vw;
}
.admin-main .left-side .input-main .input-base {
  margin-top: 3vw;
  width: 80%;
  border-radius: 5vw;
  border: 0.15vw solid #d9d9d9;
  height: 3vw;
  display: flex;
  justify-content: center;
  padding: 0 0.2vw;
  align-items: center;
}
.admin-main .left-side .input-main .input-base i {
  color: #f93067;
  font-size: 1.3vw;
}
.admin-main .left-side .input-main input {
  border-radius: 5vw;
  width: 80%;
  height: 2.7vw;
  text-indent: 0.5vw;
  font-size: 1vw;
  border: none;
  outline: none;
}
.admin-main .left-side .input-main button {
  border-radius: 5vw;
  width: 18.5vw;
  height: 2.8vw;
  text-indent: 0.5vw;
  font-size: 1vw;
  border: none;
  background-color: #f93067;
  color: #f5f5f5;
  outline: none;
  transition: 0.2s;
  cursor: pointer;
}
.admin-main .left-side .input-main button:hover {
  background-color: #ff4e7d;
}
.admin-main .left-side .input-main footer {
  width: 100%;
  background-color: #c35cab;
  position: absolute;
  height: 3vw;
  bottom: 0;
  border-radius: 0 0 2vw 2vw;
  color: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 0.9vw;
  text-decoration: underline;
}
.admin-main .left-side .input-main footer p {
  cursor: pointer;
}
.admin-main .left-side .input-main .forgot-password {
  color: #a3a3a3;
  cursor: pointer;
  font-size: 0.9vw;
  text-decoration: underline;
}
.admin-main .right-side {
  flex: 2;
  display: flex;
  align-items: end;
  justify-content: start;
  flex-direction: column;
}
.admin-main .right-side .text {
  color: #f69baa;
  font-size: 1.8vw;
}
.admin-main .right-side .title {
  color: #f5f5f5;
  font-size: 4vw;
  font-weight: bold;
}
.meeting-main {
  width: 100%;
  height: 89.5vh;
  display: flex;
  padding: 1vw 0;
}
.meeting-main .meeting-nav {
  flex: 1;
  background-color: rgba(0, 0, 0, 0.1607843137);
  display: flex;
  flex-direction: column;
  align-items: end;
  border-radius: 2vw 0 0 2vw;
}
.meeting-main .meeting-nav .nav-title {
  width: 100%;
  height: 3vw;
  text-align: center;
  font-size: 1vw;
  color: rgba(245, 245, 245, 0.3882352941);
  line-height: 3vw;
  margin-bottom: 1vw;
  text-transform: uppercase;
}
.meeting-main .meeting-nav .nav-tab {
  width: 90%;
  height: 2.8vw;
  border: none;
  outline: none;
  display: flex;
  justify-content: baseline;
  align-items: center;
  padding: 0.5vw;
  padding-left: 1vw;
  font-size: 1vw;
  color: #f5f5f5;
  background-color: rgba(0, 0, 0, 0);
  border-radius: 2vw 0 0 2vw;
  font-weight: bold;
  transition: 0.3s;
  margin-bottom: 1vw;
}
.meeting-main .meeting-nav .nav-tab .ikon-area {
  width: 2vw;
  height: 2.8vw;
  display: flex;
  align-items: center;
  justify-content: baseline;
}
.meeting-main .meeting-nav .active {
  background-color: #ebe8f1;
  color: #eb175c;
}
.meeting-main .meeting-content {
  flex: 4;
  background-color: #ebe8f1;
  border-radius: 0 2vw 2vw 0;
  overflow-y: auto;
}
.meeting-main .meeting-content .personal-box {
  width: 95%;
  height: 9.5vw;
  background: linear-gradient(90deg, rgb(53, 39, 90) 0%, rgb(129, 27, 67) 100%);
  display: flex;
  border-radius: 1.2vw 1vw 1vw 1vw;
}
.meeting-main .meeting-content .personal-box .personal-left {
  width: 36%;
  height: 100%;
  position: relative;
}
.meeting-main .meeting-content .personal-box .personal-left .img-area {
  width: 100%;
  height: 100%;
}
.meeting-main .meeting-content .personal-box .personal-left .img-area img {
  width: 100%;
  border-top-left-radius: 1vw;
}
.meeting-main .meeting-content .personal-box .personal-left .personal-text {
  width: 100%;
  height: 2vw;
  text-align: center;
  line-height: 2vw;
  font-size: 0.8vw;
  color: #f5f5f5;
  background-color: rgba(0, 0, 0, 0.3568627451);
  position: absolute;
  z-index: 2;
  bottom: 0;
  left: 0;
  border-bottom-left-radius: 1vw;
}
.meeting-main .meeting-content .personal-box .personal-right {
  width: 74.5%;
  height: 100%;
  padding: 0.5vw 0;
}
.meeting-main .meeting-content .personal-box .personal-right .personal-branch {
  width: 100%;
  height: 1.5vw;
  background-color: #fff;
  line-height: 1.5vw;
  font-size: 1vw;
  font-weight: bold;
  text-indent: 0.75vw;
  text-transform: uppercase;
  border-top-right-radius: 0.3vw;
}
.meeting-main
  .meeting-content
  .personal-box
  .personal-right
  .personal-info-line {
  width: 100%;
  height: 1.4vw;
  display: flex;
  justify-content: baseline;
  align-items: center;
  padding-left: 0.75vw;
  gap: 0.3vw;
  font-size: 0.8vw;
  color: #f5f5f5;
  font-weight: 400;
}
.meeting-main
  .meeting-content
  .personal-box
  .personal-right
  .personal-show-all {
  height: 1.5vw;
  display: flex;
  justify-content: end;
  font-size: 0.8vw;
  align-items: center;
  padding-right: 0.7vw;
  gap: 0.5vw;
  color: #f5f5f5;
  opacity: 0.7;
  transition: 0.2s;
  float: right;
  border: none;
  outline: none;
  background-color: rgba(0, 0, 0, 0);
  cursor: pointer;
}
.meeting-main
  .meeting-content
  .personal-box
  .personal-right
  .personal-show-all:hover {
  opacity: 1;
}
.personal-main {
  width: 100%;
  height: 99%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  justify-items: center;
  align-content: baseline;
  padding: 1vw;
  gap: 1vw;
  scrollbar-gutter: stable;
  scroll-behavior: smooth;
  overflow-x: hidden;
  float: right;
}
.rooms-main {
  width: 100%;
  height: 89.5vh;
  display: flex;
  padding: 1vw 0;
}

/* Son Yapılan İşlem */
.rooms-main .rooms-actions {
  background-color: rgba(0, 0, 0, 0.1607843137);
  /* flex: 0.8; */
  display: flex;
  flex-direction: column;
  border-radius: 2vw 0 0 2vw;
  padding: 1vw 0;
}
.rooms-main .rooms-actions button {
  width: 100%;
  padding: 0.6rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #f5f5f5;
  border: none;
  border-bottom: 0.1vw solid rgba(245, 245, 245, 0.4666666667);
  background-color: rgba(0, 0, 0, 0);
  outline: none;
  font-size: 0.7vw;
  gap: 0.2vw;
  cursor: pointer;
  opacity: 0.7;
  transition: 0.2s;
}
.rooms-main .rooms-actions button:hover {
  opacity: 1;
}
.rooms-main .rooms-actions button i {
  font-size: 1.5vw;
}
.rooms-main .rooms-upcomings {
  flex: 4;
  display: flex;
  flex-direction: column;
}
.rooms-main .rooms-upcomings .title {
  width: 100%;
  height: 5.7vw;
  background-color: #f5f5f5;
  padding: 1vw;
  display: flex;
  align-items: center;
  font-size: 1vw;
  font-weight: 600;
  color: #eb175c;
  gap: 0.3vw;
  border-bottom: 0.2vw solid rgba(161, 161, 161, 0.6156862745);
}
.rooms-main .rooms-upcomings .title i {
  font-size: 2vw;
  margin-left: 8vw;
  color: gray;
}
.rooms-main .rooms-upcomings .content {
  width: 100%;
  height: 100%;
  background-color: #fffeff;
  padding: 1vw;
  display: flex;
  flex-direction: column;
  gap: 1vw;
}
.rooms-main .rooms-upcomings .content .notify-line {
  width: 100%;
  height: 4vw;
  background-color: #f5f5f5;
  border-radius: 4vw;
  display: flex;
  gap: 0.3vw;
  position: relative;
}
.rooms-main .rooms-upcomings .content .notify-line .ikon-area {
  position: absolute;
  right: 1vw;
  top: 0.3vw;
  font-size: 1.5vw;
}
.rooms-main .rooms-upcomings .content .notify-line .img-area {
  width: 4vw;
  height: 4vw;
}
.rooms-main .rooms-upcomings .content .notify-line .img-area img {
  height: 100%;
  border-radius: 50%;
}
.rooms-main .rooms-upcomings .content .notify-line .text {
  width: 17vw;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.rooms-main .rooms-upcomings .content .notify-line .text .top {
  width: 100%;
  height: 1.5vw;
  font-size: 1vw;
  color: #000;
  display: flex;
  align-items: center;
}
.rooms-main .rooms-upcomings .content .notify-line .text .top .onay {
  background-color: rgba(56, 162, 42, 0.3843137255);
  color: #38a22a;
}
.rooms-main .rooms-upcomings .content .notify-line .text .top .ertelendi {
  background-color: rgba(50, 107, 205, 0.3843137255);
  color: #326bcd;
}
.rooms-main .rooms-upcomings .content .notify-line .text .top .iptal {
  background-color: rgba(210, 25, 25, 0.3843137255);
  color: #d21919;
}
.rooms-main .rooms-upcomings .content .notify-line .text .top .gelecek {
  background-color: rgba(223, 158, 17, 0.3843137255);
  color: #df9e11;
}
.rooms-main .rooms-upcomings .content .notify-line .text .top span {
  margin-left: 0.5vw;
  padding: 0vw 0.7vw;
  font-size: 0.7vw;
  color: #e2e2e2;
  border-radius: 1vw;
  font-weight: bold;
}
.rooms-main .rooms-upcomings .content .notify-line .text .bot {
  width: 100%;
  height: 1.2vw;
  font-size: 0.8vw;
  color: #b6b6b6;
}
.rooms-main .rooms-upcomings .bottom {
  width: 100%;
  height: 5.8vw;
  background-color: #f5f5f5;
  padding: 1vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 1vw;
  font-weight: 600;
  color: #eb175c;
  border-top: 0.2vw solid rgba(161, 161, 161, 0.6156862745);
}
.rooms-main .rooms-upcomings .bottom .all-meeting {
  background: linear-gradient(
    90deg,
    rgb(46, 171, 204) 0%,
    rgb(53, 139, 199) 100%
  );
}
.rooms-main .rooms-upcomings .bottom .create-meeting {
  background: linear-gradient(
    90deg,
    rgb(46, 204, 112) 0%,
    rgb(53, 199, 80) 100%
  );
}
.rooms-main .rooms-upcomings .bottom button {
  width: 10vw;
  height: 2vw;
  background-color: red;
  border: none;
  border-radius: 1vw;
  font-size: 0.8vw;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 0vw 0.8vw;
  color: #f5f5f5;
  font-weight: bold;
  outline: none;
}
.rooms-main .rooms-nav {
  flex: 2;
  background-color: rgba(0, 0, 0, 0.1607843137);
  display: flex;
  flex-direction: column;
  border-radius: 0 2vw 2vw 0;
}
.rooms-main .rooms-nav .nav-title {
  width: 100%;
  height: 3vw;
  text-align: center;
  font-size: 1vw;
  color: rgba(245, 245, 245, 0.3882352941);
  line-height: 3vw;
  margin-bottom: 1vw;
  text-transform: uppercase;
}
.rooms-main .rooms-nav .nav-tab {
  width: 90%;
  height: 2.8vw;
  border: none;
  outline: none;
  display: flex;
  justify-content: baseline;
  align-items: center;
  padding: 0.5vw;
  padding-left: 1vw;
  font-size: 1vw;
  color: #f5f5f5;
  background-color: rgba(0, 0, 0, 0);
  border-radius: 0 2vw 2vw 0;
  font-weight: bold;
  transition: 0.3s;
  margin-bottom: 1vw;
}
.rooms-main .rooms-nav .nav-tab .ikon-area {
  width: 2vw;
  height: 2.8vw;
  display: flex;
  align-items: center;
  justify-content: baseline;
}
.rooms-main .rooms-nav .active {
  background-color: #ebe8f1;
  color: #eb175c;
}
.rooms-main .rooms-content {
  flex: 8;
  height: 100%;
  background-color: #eae7ef;
  padding: 1vw;
}
.rooms-main .rooms-content .page-info {
  width: 100%;
  height: 1.8vw;
  /* display: flex; */
  align-items: first baseline;
  gap: 0.5vw;
  font-size: 0.8vw;
  font-weight: bold;
  padding: 0 1vw;
}
.rooms-main .rooms-content .page-info i {
  color: #eb175c;
}
.rooms-main .rooms-content .page-info span {
  color: gray;
  font-weight: normal;
}
.rooms-main .rooms-content .rooms {
  width: 96%;
  height: 97%;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-content: baseline;
  padding: 0 1vw;
  gap: 1vw;
  /* overflow-y: auto; */
}
.rooms-main .rooms-content .rooms .room {
  border: 2px solid #ccc; /* Kenarlık */
  width: 130%;
  height: 9vw;
  background-color: orange;
  border-radius: 1.2vw;
  position: relative;
  transition: box-shadow 0.1s ease; /* Geçiş efekti ekleyelim */
}

.rooms-main .rooms-content .rooms .room:hover {
  box-shadow: 0px 0px 10px 0px rgba(63, 58, 58, 0.75); /* Kenarlık ile öne çıkarma efekti */
  z-index: 1000;
}

.rooms-main .rooms-content .rooms .room .room-number {
  width: 100%;
  height: 2vw;
  position: absolute;
  top: 1.7vw;
  text-align: center;
  color: #e7e7e7;
  font-size: 1vw;
  font-weight: 600;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5vw;
}
.rooms-main .rooms-content .rooms .room .room-status {
  width: 100%;
  height: 2vw;
  position: absolute;
  top: 4.3vw;
  text-align: center;
  color: #e9e9e9;
  font-size: 0.9vw;
  font-weight: 600;
}
.rooms-main .rooms-content .rooms .room .meeting-date {
  width: 100%;
  height: 2vw;
  position: absolute;
  top: 5.5vw;
  text-align: center;
  color: #e9e9e9;
  font-size: 0.9vw;
}
.rooms-main .rooms-content .rooms .room .meeting-icon {
  width: 100%;
  height: 2vw;
  position: absolute;
  top: 6.8vw;
  text-align: center;
  color: #e9e9e9;
  font-size: 1.5vw;
  display: flex;
  justify-content: center;
  align-items: center;
}
.rooms-main .rooms-content .rooms .active {
  background: linear-gradient(
    0deg,
    rgb(240, 40, 92) 0%,
    rgb(245, 71, 126) 100%
  );
}
.rooms-main .rooms-content .rooms .active .top {
  width: 100%;
  min-height: 1vw;
  position: absolute;
  top: 0.3vw;
  margin: auto;
  display: flex;
  justify-content: space-around;
  align-items: baseline;
  font-size: 0.7vw;
  color: #f5f5f5;
}
.rooms-main .rooms-content .rooms .active .top .left {
  display: flex;
  gap: 0.1vw;
  align-items: center;
  justify-content: baseline;
}
.rooms-main .rooms-content .rooms .active .top .right {
  display: flex;
  gap: 0.1vw;
  align-items: center;
  justify-content: end;
}
.rooms-main .rooms-content .rooms .active .room-number {
  width: 100%;
  height: 0vw;
  position: absolute;
  top: 2.7vw;
  text-align: center;
  color: #e7e7e7;
  font-size: 1;
  font-weight: 600;
}
.rooms-main .rooms-content .rooms .active .room-status {
  width: 100%;
  height: 2vw;
  position: absolute;
  top: 4.3vw;
  text-align: center;
  color: #e9e9e9;
  font-size: 0.9vw;
  font-weight: 600;
}
.rooms-main .rooms-content .rooms .waiting {
  background: linear-gradient(
    0deg,
    rgb(75, 102, 202) 0%,
    rgb(71, 150, 245) 100%
  );
}
.rooms-main .rooms-content .rooms .waiting .top {
  width: 100%;
  min-height: 1vw;
  position: absolute;
  top: 0.3vw;
  margin: auto;
  display: flex;
  justify-content: space-around;
  align-items: baseline;
  font-size: 0.7vw;
  color: #f5f5f5;
}
.rooms-main .rooms-content .rooms .waiting .top .left {
  display: flex;
  gap: 0.1vw;
  align-items: center;
  justify-content: baseline;
}
.rooms-main .rooms-content .rooms .waiting .top .right {
  display: flex;
  gap: 0.1vw;
  align-items: center;
  justify-content: end;
}
.rooms-main .rooms-content .rooms .empty {
  background-color: #f5f5f5;
}
.rooms-main .rooms-content .rooms .empty .top {
  width: 100%;
  min-height: 1vw;
  position: absolute;
  top: 0.3vw;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: baseline;
}
.rooms-main .rooms-content .rooms .empty .room-number {
  width: 100%;
  height: 2vw;
  position: absolute;
  top: 2.7vw;
  text-align: center;
  color: #1b1b1b;
  font-size: 1vw;
  font-weight: 600;
}
.rooms-main .rooms-content .rooms .empty .room-status {
  width: 100%;
  height: 2vw;
  position: absolute;
  top: 4.3vw;
  text-align: center;
  color: #646464;
  font-size: 0.9vw;
  font-weight: 600;
}
.rooms-main .rooms-content .rezerv {
  background: linear-gradient(
    0deg,
    rgb(216, 152, 125) 0%,
    rgb(217, 160, 107) 100%
  );
}
.rooms-main .rooms-content .rezerv .top {
  width: 100%;
  min-height: 1vw;
  position: absolute;
  top: 0.3vw;
  margin: auto;
  display: flex;
  justify-content: space-around;
  align-items: baseline;
  font-size: 0.7vw;
  color: #f5f5f5;
}
.rooms-main .rooms-content .rezerv .top .left {
  display: flex;
  gap: 0.1vw;
  align-items: center;
  justify-content: baseline;
}
.rooms-main .rooms-content .rezerv .top .right {
  display: flex;
  gap: 0.1vw;
  align-items: center;
  justify-content: end;
}
.rooms-main .rooms-content .locked {
  background: linear-gradient(0deg, rgb(101, 83, 85) 0%, rgb(54, 37, 40) 100%);
}
.rooms-main .rooms-content .locked .top {
  width: 100%;
  min-height: 1vw;
  position: absolute;
  top: 0.3vw;
  margin: auto;
  display: flex;
  justify-content: space-around;
  align-items: baseline;
  font-size: 0.7vw;
  color: #f5f5f5;
}
.rooms-main .rooms-content .locked .top .left {
  display: flex;
  gap: 0.1vw;
  align-items: center;
  justify-content: baseline;
}
.rooms-main .rooms-content .locked .top .right {
  display: flex;
  gap: 0.1vw;
  align-items: center;
  justify-content: end;
}
.room .bot {
  width: 100%;
  position: absolute;
  bottom: 0;
  height: 1.6vw;
  display: flex;
  justify-content: center;
  gap: 2.2vw;
  color: #f5f5f5;
  font-size: 0.8vw;
}
.room .ikon-area {
  width: 100%;
  height: 2vw;
  position: absolute;
  top: 6vw;
  text-align: center;
  color: #e9e9e9;
  font-size: 1vw;
  font-weight: 600;
}
.room .empty-top {
  background-color: rgba(218, 218, 218, 0.6352941176);
  width: 3.5vw;
  min-height: 0.55vw;
  border-radius: 0.5vw;
}
.room .active-top {
  background-color: #fff;
  min-width: 3.5vw;
  min-height: 0.6vw;
  border-radius: 0.5vw;
  padding: 0.1vw 0.3vw;
  font-size: 0.7vw;
  color: #eb175c;
  font-weight: bold;
}
.personals-content {
  flex: 9;
  height: 100%;
  
  background-color: #ebe8f1 !important;
}
.personals-content .top {
  width: 100%;
  height: 3vw;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.personals-content .top select {
  border-radius: 1vw;
  font-size: 0.8vw;
  border: none;
  height: 1.8vw;
  width: 9vw;
  text-align: center;
}
.personals-content .top button {
  height: 1.7vw;
  cursor: pointer;
  width: 2.5vw;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 2vw;
  font-size: 0.8vw;
  border: none;
  border-radius: 1vw;
  color: #f5f5f5;
  outline: none;
  background-color: #eb175c;
}
.personals-content .top .title {
  text-transform: uppercase;
  color: #eb175c;
  font-size: 1vw;
}
.personals-content .top .personal-search {
  width: 15vw;
  height: 1.8vw;
  background-color: #fff;
  border-radius: 1vw;
  padding: 0.5vw;
  display: flex;
  justify-content: baseline;
  align-items: center;
  gap: 0.5vw;
  font-size: 0.8vw;
}
.personals-content .top .personal-search i {
  color: #eb175c;
}
.personals-content .top .personal-search input {
  width: 13vw;
  height: 1.7vw;
  border: none;
  outline: none;
  background-color: rgba(0, 0, 0, 0);
  font-size: 0.8vw;
}
.personals-content .personal-izinli .left {
  color: #f5f5f5;
}
.personals-content .personal-izinli .left i {
  color: #f5f5f5 !important;
}
.personals-content .personal-izinli .left .personal-details {
  margin-top: 4.2vw !important;
}
.personals-content .personal-izinli .right {
  background-color: #ebe8f1;
  border-radius: 0.5vw;
}
.personals-content .personal-izinli .right .authorized-box {
  margin-bottom: 0.5vw;
}
.personals-content .personal-izinli .right .authorized-box span {
  background-color: #eb175c;
  padding: 0.2vw 1.7vw;
  display: flex;
  align-items: center;
  color: #f5f5f5;
  font-size: 1vw;
  border-radius: 0.6vw;
}
.personals-content .personal-area {
  width: 99%;
  height: 80%;
  margin-top: 1vw;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  justify-items: center;
  align-content: baseline;
  overflow: auto;
}
.personals-content .personal-area .personal {
  width: 90%;
  height: 10vw;
  position: relative;
  margin-bottom: 1vw;
}
.personals-content .personal-area .personal .info-area {
  width: 100%;
  height: 100%;
  position: absolute;
  bottom: 0;
  display: flex;
}
.personals-content .personal-area .personal .info-area .left {
  width: 60%;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 1vw;
  padding-top: 2.5vw;
}
.personals-content .personal-area .personal .info-area .left .personal-name {
  width: 100%;
  height: 1.5vw;
  font-size: 0.8vw;
  display: flex;
  align-items: center;
  gap: 0.3vw;
  margin-bottom: 0.5vw;
}
.personals-content .personal-area .personal .info-area .left .personal-name i {
  color: #d76dd5;
}
.personals-content .personal-area .personal .info-area .left .personal-details {
  width: 100%;
  height: 1.2vw;
  font-size: 1vw;
  display: flex;
  align-items: center;
  gap: 0.3vw;
  margin-top: 2vw;
}
.personals-content
  .personal-area
  .personal
  .info-area
  .left
  .personal-details
  i {
  color: #d76dd5;
}
.personals-content .personal-area .personal .info-area .left .personal-skills {
  width: 100%;
  height: 1.2vw;
  display: flex;
  align-items: center;
  gap: 0.3vw;
  font-size: 0.7vw;
}
.personals-content
  .personal-area
  .personal
  .info-area
  .left
  .personal-skills
  i {
  color: #eca623;
}
.personals-content .personal-area .personal .info-area .right {
  width: 40%;
  height: 92%;
  display: flex;
  justify-content: center;
  align-items: end;
}
.personals-content .personal-area .personal .info-area .right img {
  height: 80%;
  border-radius: 0.5vw;
}
footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 4vw;
}
footer .left {
  display: flex;
  align-items: center;
  gap: 0.5vw;
  color: #f5f5f5;
  font-size: 1vw;
}
footer .top {
  display: flex;
  align-items: center;
  font-size: 1vw;
  color: rgba(245, 245, 245, 0.267);
}
footer .right {
  display: flex;
  align-items: center;
}
footer .right button {
  border: none;
  outline: none;
  display: flex;
  justify-content: space-between !important;
  align-items: center;
  width: -moz-max-content;
  width: max-content;
  gap: 1vw;
  padding: 0.5vw 1vw;
  font-size: 1vw;
  color: #f5f5f5;
  background: linear-gradient(132deg, #a697c7 0%, #7e69ac 100%);
  border-radius: 2vw;
}
.topperson {
  width: 97%;
  height: 4vw;
  background-color: #5f215f;
  border-radius: 0.5vw;
  border-right: 0.5vw solid #eb175c;
}
.topperson .left {
  width: 4vw;
  height: 4vw;
  float: left;
}
.topperson .left img {
  height: 100%;
  border-radius: 50%;
}
.topperson .right {
  /* width: 13vw; */
  height: 100%;
  float: left;
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-size: 0.9vw;
  color: #f5f5f5;
  padding-left: 0.5vw;
}
.topperson .right span {
  font-size: 0.9vw;
  font-weight: bolder;
  text-transform: uppercase;
}
.topperson .right span:last-child {
  font-size: 0.8vw;
  font-weight: normal;
}
.person-pay-info {
  width: 97%;
  height: 6vw;
  background-color: #5f215f;
  margin-top: 1vw;
  border-radius: 0.5vw;
}
.person-pay-info .top {
  width: 100%;
  height: 90%;
  display: flex;
}
.person-pay-info .top .left {
  width: 25%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 3vw;
  color: rgba(255, 255, 255, 0.267);
}
.person-pay-info .top .right {
  width: 75%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-size: 0.9vw;
  color: #f5f5f5;
  padding-left: 0.5vw;
}
.person-pay-info .top .right span {
  font-size: 1.8vw;
  text-transform: uppercase;
}
.person-pay-info .bottom {
  width: 100%;
  height: 10%;
  display: flex;
  align-items: end;
  justify-content: space-between;
}
.person-pay-info .bottom .progress {
  width: 80%;
  height: 0.5vw;
  background-color: gray;
  border-radius: 2vw;
}
.person-pay-info .bottom .progress .in {
  height: 100%;
  border-radius: 2vw;
  background-color: #46eb90 !important;
  position: relative;
}
.person-pay-info .bottom .progress .in::after {
  content: "";
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 2vw;
  right: 0;
  bottom: 0;
  background: #fff;
  animation: progress-active 2s ease infinite;
}
.person-pay-info .bottom .percent {
  width: 20%;
  height: 1.1vw;
  color: #f5f5f5;
  font-size: 0.8vw;
  text-align: center;
}
.incoming-meetings-main {
  width: 100%;
  height: 89.5vh;
  display: flex;
  padding: 1vw 0;
}
.incoming-meetings-main .incoming-meetings-left {
  flex: 1;
  background-color: #ebe8f1;
  height: 100%;
  border-radius: 2vw 0vw 0vw 2vw;
}
.incoming-meetings-main .incoming-meetings-left .top {
  width: 100%;
  height: 8%;
  background-color: #493877;
  display: flex;
  border-radius: 1vw 3vw 0vw 0vw;
}
.incoming-meetings-main .incoming-meetings-left .top button {
  width: 50%;
  height: 100%;
  outline: none;
  border: none;
  background-color: rgba(0, 0, 0, 0);
  font-size: 1vw;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5vw;
  color: #dbdbdb;
  /* border-radius: 1vw 1vw 0vw 0vw; */
}
.incoming-meetings-main .incoming-meetings-left .top button span {
  padding: 0.1vw 0.5vw;
  /* border-radius: 0.5vw; */
  display: flex;
  background-color: #dbdbdb;
  color: #493877;
}
.incoming-meetings-main .incoming-meetings-left .top .incoming.active {
  border-top-left-radius: 1vw;
  border-top-right-radius: 1.5vw;
}
.incoming-meetings-main .incoming-meetings-left .top .create.active {
  border-top-left-radius: 1.5vw;
}
.incoming-meetings-main .incoming-meetings-left .top .active {
  background-color: #fff;
  color: red !important;
}
.incoming-meetings-main .incoming-meetings-left .top .active span {
  color: #fff;
  background-color: #eb175c;
}
.incoming-meetings-main .incoming-meetings-left .content {
  width: 100%;
  height: 84%;
  background-color: #fff;
  overflow-y: auto;
}
.incoming-meetings-main .incoming-meetings-left .content .line {
  width: 100%;
  height: 6vw;
  display: flex;
  background-color: #fff;
  border-bottom: 0.1vw solid gray;
  padding: 0.5vw;
}
.incoming-meetings-main .incoming-meetings-left .content .line:hover {
  background-color: #fffbe4;
}
.incoming-meetings-main .incoming-meetings-left .content .line .img-area {
  width: 5vw;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.incoming-meetings-main .incoming-meetings-left .content .line .img-area img {
  width: 80%;
  border-radius: 50%;
}
.incoming-meetings-main .incoming-meetings-left .content .line .name-info {
  width: 12vw;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-weight: 600;
  font-size: 0.8vw;
}
.incoming-meetings-main .incoming-meetings-left .content .line .name-info span {
  color: gray;
  font-weight: normal;
  font-size: 0.8vw;
}
.incoming-meetings-main .incoming-meetings-left .content .line .progressarea {
  width: 14vw;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.incoming-meetings-main
  .incoming-meetings-left
  .content
  .line
  .progressarea
  .pline {
  width: 100%;
  height: 45%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.incoming-meetings-main
  .incoming-meetings-left
  .content
  .line
  .progressarea
  .pline
  .ptop {
  width: 100%;
  height: 30%;
  display: flex;
  align-items: center;
}
.incoming-meetings-main
  .incoming-meetings-left
  .content
  .line
  .progressarea
  .pline
  .ptop
  .pbox {
  width: 100%;
  height: 0.3vw;
  background-color: gray;
  border-radius: 0.5vw;
}
.incoming-meetings-main
  .incoming-meetings-left
  .content
  .line
  .progressarea
  .pline
  .ptop
  .pbox
  .inp {
  height: 100%;
  border-radius: 0.5vw;
  position: relative;
}
.incoming-meetings-main
  .incoming-meetings-left
  .content
  .line
  .progressarea
  .pline
  .ptop
  .pbox
  .inp::after {
  content: "";
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  animation: progress-active 2s ease infinite;
}
.incoming-meetings-main
  .incoming-meetings-left
  .content
  .line
  .progressarea
  .pline
  .ptop
  .pbox
  .inp.succces {
  background-color: #2ac264 !important;
}
.incoming-meetings-main
  .incoming-meetings-left
  .content
  .line
  .progressarea
  .pline
  .ptop
  .pbox
  .inp.danger {
  background-color: #c22a2a !important;
}
.incoming-meetings-main
  .incoming-meetings-left
  .content
  .line
  .progressarea
  .pline
  .pbot {
  width: 100%;
  height: 50%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: gray;
  font-size: 0.7vw;
}
.incoming-meetings-main .incoming-meetings-left .content .active {
  background-color: #fffbe4;
}
.incoming-meetings-main .incoming-meetings-left .bottom {
  width: 100%;
  height: 8%;
  background-color: #eb175c;
  border-radius: 0 0 3vw 1vw;
  padding: 1vw;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #f5f5f5;
  font-size: 1.2vw;
}
.incoming-meetings-main .incoming-meetings-left .bottom button {
  width: 15vw;
  height: 2.2vw;
  border: none;
  outline: none;
  background-color: #eb175c;
  color: #eb175c;
  border-radius: 0.5vw;
  font-weight: bold;
  text-transform: uppercase;
  font-size: 1vw;
}
.incoming-meetings-main .incoming-meetings-right {
  flex: 2;
  height: 100%;
  padding: 1vw;
  background-color: #ebe8f1;
  position: relative;
  border-radius: 0 2vw 2vw 0;
}
.incoming-meetings-main .incoming-meetings-right .page-top {
  width: 100%;
  height: 3.5vw;
  display: flex;
}
.incoming-meetings-main .incoming-meetings-right .page-top .img-area {
  width: 5vw;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.incoming-meetings-main .incoming-meetings-right .page-top .img-area img {
  height: 100%;
}
.incoming-meetings-main .incoming-meetings-right .page-top .person-info {
  width: 8vw;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-size: 0.8vw;
  font-weight: bold;
}
.incoming-meetings-main .incoming-meetings-right .page-top .person-info span {
  font-size: 0.7vw;
  color: gray;
}
.incoming-meetings-main
  .incoming-meetings-right
  .page-top
  .person-info
  .person-name {
  padding: 0.1vw 0.5vw;
  background-color: rgba(189, 189, 189, 0.575);
  color: #6b6b6b;
  width: -moz-fit-content;
  width: fit-content;
  font-size: 0.8vw;
  font-weight: 600;
  border-radius: 0.2vw;
  margin-top: 0.2vw;
}
.incoming-meetings-main .incoming-meetings-right .page-top .person-contact {
  width: 45vw;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 2vw;
  justify-content: center;
}
.incoming-meetings-main
  .incoming-meetings-right
  .page-top
  .person-contact
  span {
  font-size: 0.8vw;
  color: gray;
  align-items: center;
  display: flex;
  gap: 0.5vw;
}
.incoming-meetings-main
  .incoming-meetings-right
  .page-top
  .person-contact
  span
  i {
  font-size: 1vw;
}
.incoming-meetings-main .incoming-meetings-right .page-top .exitBut {
  width: 4vw;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2vw;
  color: gray;
}
.incoming-meetings-main .incoming-meetings-right .shortcut {
  width: 90%;
  margin: auto;
  height: 2vw;
  margin-top: 1.5vw;
  display: flex;
  background-color: #f5f5f5;
  border-radius: 1vw;
}
.incoming-meetings-main .incoming-meetings-right .shortcut .but {
  padding: 0.5vw 1vw;
  width: 12vw;
  color: #39869d;
  cursor: pointer;
  font-weight: bold;
}
.incoming-meetings-main .incoming-meetings-right .shortcut .sms {
  height: 100%;
  border-radius: 1vw;
  border-right: 0.2vw solid #ebe8f1;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5vw;
  font-size: 0.8vw;
  background-color: #cbf0f6;
}
.incoming-meetings-main .incoming-meetings-right .shortcut .speeddial {
  height: 100%;
  border-radius: 1vw;
  border-right: 0.2vw solid #ebe8f1;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5vw;
  font-size: 0.8vw;
  background-color: #f5f5f5;
}
.incoming-meetings-main .incoming-meetings-right .shortcut .meetinglist {
  height: 100%;
  border-radius: 1vw;
  border-right: 0.2vw solid #ebe8f1;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5vw;
  font-size: 0.8vw;
  background-color: #f5f5f5;
}
.incoming-meetings-main .incoming-meetings-right .shortcut .edit {
  height: 100%;
  border-radius: 1vw;
  border-right: 0.2vw solid #ebe8f1;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5vw;
  font-size: 0.8vw;
  background-color: #f5f5f5;
  position: relative;
  z-index: 2;
}
.incoming-meetings-main .incoming-meetings-right .shortcut .remindpay {
  height: 100%;
  border-radius: 1vw;
  border-right: 0.2vw solid #ebe8f1;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5vw;
  font-size: 0.8vw;
  background-color: #76d56f;
  margin-left: -1.5vw;
  padding-left: 1.5vw;
  position: relative;
  z-index: 1;
}
.incoming-meetings-main .incoming-meetings-right .total-box-area {
  width: 100%;
  height: 5vw;
  display: flex;
  justify-content: space-around;
  /* margin-top: 2vw; */
  /* border-top: 0.1vw solid gray; */
  padding-top: 1vw;
}
.incoming-meetings-main .incoming-meetings-right .total-box-area .box {
  width: 20%;
  height: 100%;
}
.incoming-meetings-main .incoming-meetings-right .total-box-area .box .box-top {
  width: 101%;
  height: 70%;
  display: flex;
}
.incoming-meetings-main
  .incoming-meetings-right
  .total-box-area
  .box
  .box-top
  .left {
  width: 75%;
  height: 100%;
}
.incoming-meetings-main
  .incoming-meetings-right
  .total-box-area
  .box
  .box-top
  .left
  .title {
  width: 100%;
  height: 1vw;
  line-height: 1vw;
  font-size: 0.7vw;
  font-weight: bold;
}
.incoming-meetings-main
  .incoming-meetings-right
  .total-box-area
  .box
  .box-top
  .left
  .text {
  width: 100%;
  height: 1vw;
  line-height: 1vw;
  font-size: 0.7vw;
  color: gray;
}
.incoming-meetings-main
  .incoming-meetings-right
  .total-box-area
  .box
  .box-top
  .right {
  width: 25%;
  height: 100%;
  display: flex;
  justify-content: end;
  align-items: center;
  font-size: 1.5vw;
  font-weight: bold;
}
.incoming-meetings-main
  .incoming-meetings-right
  .total-box-area
  .box
  .box-top
  .right.total {
  color: green;
}
.incoming-meetings-main
  .incoming-meetings-right
  .total-box-area
  .box
  .box-top
  .right.completed {
  color: #fb0;
}
.incoming-meetings-main
  .incoming-meetings-right
  .total-box-area
  .box
  .box-top
  .right.remaining {
  color: red;
}
.incoming-meetings-main .incoming-meetings-right .total-box-area .box .box-bot {
  width: 100%;
  height: 30%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.2vw;
}
.incoming-meetings-main
  .incoming-meetings-right
  .total-box-area
  .box
  .box-bot
  .progress {
  width: 100%;
  height: 20%;
  background-color: #a7a7a7;
}
.incoming-meetings-main
  .incoming-meetings-right
  .total-box-area
  .box
  .box-bot
  .progress
  .inp {
  height: 100%;
  position: relative;
}
.incoming-meetings-main
  .incoming-meetings-right
  .total-box-area
  .box
  .box-bot
  .progress
  .inp::after {
  content: "";
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  animation: progress-active 2s ease infinite;
}
.incoming-meetings-main
  .incoming-meetings-right
  .total-box-area
  .box
  .box-bot
  .progress
  .inp.all {
  background-color: #2ac264;
}
.incoming-meetings-main
  .incoming-meetings-right
  .total-box-area
  .box
  .box-bot
  .progress
  .inp.total {
  background-color: #296689;
}
.incoming-meetings-main
  .incoming-meetings-right
  .total-box-area
  .box
  .box-bot
  .progress
  .inp.completed {
  background-color: #e99619;
}
.incoming-meetings-main
  .incoming-meetings-right
  .total-box-area
  .box
  .box-bot
  .progress
  .inp.remaining {
  background-color: #c22a2a;
}
.incoming-meetings-main
  .incoming-meetings-right
  .total-box-area
  .box
  .box-bot
  .percent {
  height: 60%;
  width: 100%;
  display: flex;
  justify-content: end;
  align-items: start;
  font-size: 0.7vw;
  color: gray;
}
.incoming-meetings-main .incoming-meetings-right .price-box-area {
  width: 80%;
  margin: auto;
  height: 13vw;
  margin-top: 3vw;
  margin-bottom: 3vw;
  gap: 1vw;
  display: grid;
  justify-items: center;
  align-content: center;
  grid-template-columns: repeat(3, 1fr);
}
.incoming-meetings-main .incoming-meetings-right .price-box-area .box {
  width: 15vw;
  height: 4vw;
  background-color: #fff;
  display: flex;
  border-radius: 0.5vw;
  box-shadow: rgba(0, 0, 0, 0.25) 0px 25px 50px -12px;
}
.incoming-meetings-main .incoming-meetings-right .price-box-area .box .left {
  width: 30%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2vw;
  color: gray;
}
.incoming-meetings-main .incoming-meetings-right .price-box-area .box .right {
  width: 70%;
  height: 100%;
  color: #eb175c;
  font-weight: bold;
  display: flex;
  flex-direction: column;
  font-size: 0.8vw;
  justify-content: center;
}
.incoming-meetings-main
  .incoming-meetings-right
  .price-box-area
  .box
  .right
  span {
  font-size: 1.2vw;
  color: #000;
  font-weight: bold;
}
.incoming-meetings-main .incoming-meetings-right .meeting-note-area {
  width: 100%;
  height: 4vw;
  margin-top: 2.5vw;
  border-top: 0.1vw solid gray;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 0.5vw;
}
.incoming-meetings-main .incoming-meetings-right .meeting-note-area span {
  width: 40vw;
  height: 3vw;
  font-size: 0.8vw;
  color: gray;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.incoming-meetings-main .incoming-meetings-right .meeting-note-area span .top {
  width: 100%;
  height: 50%;
  color: #eb175c;
  font-weight: 700;
}
.incoming-meetings-main .incoming-meetings-right .meeting-note-area span .bot {
  width: 100%;
  height: 50%;
  line-height: 1vw;
}
.incoming-meetings-main .incoming-meetings-right .meeting-note-area .print {
  width: 12vw;
  height: 2.5vw;
  background-color: #eb175c;
  color: #f5f5f5;
  border: none;
  outline: none;
  border-radius: 0.5vw;
  font-size: 0.8vw;
  text-transform: uppercase;
  font-weight: bold;
}
.incoming-meetings-main .incoming-meetings-right .meeting-note-area .pay {
  width: 7vw;
  height: 2.5vw;
  background-color: green;
  color: #f5f5f5;
  border: none;
  outline: none;
  border-radius: 0.5vw;
  font-size: 0.8vw;
  text-transform: uppercase;
  font-weight: bold;
}
.notify-main {
  position: relative;
  overflow: hidden;
  height: 15vw;
}
.notify-main .notify-base {
  display: flex;
  position: absolute;
  width: 100%;
  flex-direction: column;
  gap: 1vw;
}
.login-page {
  padding: 1vw;
  height: 90vh;
}
.login-page .lastlogins {
  flex: 1;
  display: flex;
  flex-direction: column-reverse;
}
.login-page .lastlogins .user {
  width: 65%;
  height: 5vw;
  display: flex;
  align-items: center;
  gap: 1vw;
  font-size: 1.5vw;
  color: #f5f5f5;
  padding-left: 1vw;
}
.login-page .lastlogins .user.active {
  border: 0.15vw solid #f5f5f5;
  border-radius: 1vw;
}
.login-page .lastlogins .user img {
  height: 80%;
  border-radius: 50%;
}
.login-page .pass-area {
  flex: 1;
  display: grid;
  align-content: center;
  gap: 0.5vw;
}
.login-page .pass-area .img-area {
  height: 13vw;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.login-page .pass-area .img-area img {
  height: 100%;
}
.login-page .pass-area .title {
  width: 100%;
  height: 3vw;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.5vw;
  color: #f5f5f5;
  font-weight: bold;
}
.login-page .pass-area .pass-dots {
  width: 100%;
  height: 2vw;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.7vw;
}
.login-page .pass-area .pass-dots .dot {
  width: 1vw;
  height: 1vw;
  background-color: #50f750;
  border-radius: 50%;
  opacity: 0.48;
}
.login-page .pass-area .pass-buttons {
  height: 22vw;
  margin: auto;
  width: 55%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
  justify-items: center;
}
.login-page .pass-area .pass-buttons button {
  width: 5vw;
  height: 5vw;
  background-color: rgba(0, 0, 0, 0);
  border: none;
  outline: none;
  border-radius: 50%;
  border: 0.15vw solid #f5f5f5;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2vw;
  font-weight: bold;
  color: #f5f5f5;
}
.login-page .update-area {
  flex: 1;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}
.login-page .update-area button {
  font-size: 1.3vw;
  display: flex;
  justify-content: end;
  align-items: center;
  gap: 0.7vw;
  height: 3vw;
  width: 10vw;
  background-color: rgba(0, 0, 0, 0);
  border: none;
  outline: none;
  color: #f5f5f5;
}
.login-page .update-area button img {
  height: 80%;
}
.ready-sms-template {
  width: 25vw;
  height: 23vw;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  z-index: 3;
  padding: 1vw;
  border-radius: 0.5vw;
  box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 2px, rgba(0, 0, 0, 0.07) 0px 2px 4px,
    rgba(0, 0, 0, 0.07) 0px 4px 8px, rgba(0, 0, 0, 0.07) 0px 8px 16px,
    rgba(0, 0, 0, 0.07) 0px 16px 32px, rgba(0, 0, 0, 0.07) 0px 32px 64px;
}
.ready-sms-template textarea {
  width: 100%;
  border-radius: 0.5vw;
  outline: none;
  height: 13vw;
  resize: none;
  margin-top: 0.5vw;
}
.ready-sms-template .title {
  width: 100%;
  height: 2vw;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 1vw;
}
.ready-sms-template .title i {
  color: red;
  font-size: 1.5vw;
}
.ready-sms-template .title span {
  display: flex;
  align-items: center;
  gap: 0.5vw;
}
.ready-sms-template .title span i {
  color: #eb175c;
}
.ready-sms-template .search-area {
  width: 100%;
  height: 2vw;
  border-radius: 1vw;
  border: 0.1vw solid gray;
  display: flex;
  justify-content: baseline;
  align-items: center;
  text-indent: 0.5vw;
  gap: 0.5vw;
  color: #eb175c;
  font-size: 1vw;
  margin-top: 1vw;
}
.ready-sms-template .search-area input {
  width: 70%;
  height: 100%;
  border: none;
  outline: none;
  background-color: rgba(0, 0, 0, 0);
  font-size: 0.8vw;
}
.ready-sms-template .text-template-area {
  width: 100%;
  height: 12vw;
  margin-top: 1vw;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-content: center;
  justify-items: center;
  gap: 1vw 2.5vw;
}
.ready-sms-template .text-template-area .box {
  width: 10vw;
  height: 5vw;
  background-color: orange;
  padding: 0.5vw;
  font-size: 0.8vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 0.5vw;
  color: #f5f5f5;
}
.ready-sms-template .text-template-area .box.birthday {
  background-color: #5a4d73;
}
.ready-sms-template .text-template-area .box.meeting-date {
  background-color: #4341d8;
}
.ready-sms-template .text-template-area .box.pay-remember {
  background-color: #4bc988;
}
.ready-sms-template .text-template-area .box.pay-link {
  background-color: #e02326;
}
.ready-sms-template .bottomButs {
  width: 100%;
  height: 2vw;
  margin-top: 1vw;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.ready-sms-template .bottomButs button {
  width: 7vw;
  height: 100%;
  border: none;
  outline: none;
  background-color: rgba(0, 0, 0, 0);
  color: #f5f5f5;
  font-size: 0.7vw;
  border-radius: 0.3vw;
}
.ready-sms-template .bottomButs button.template-send {
  background-color: #2d9c50;
}
.ready-sms-template .bottomButs button.sms-send {
  background-color: #e3185f;
}
.calling-menu {
  width: 20vw;
  height: 22vw;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #a1d7f3;
  z-index: 3;
  border-radius: 0.5vw;
  box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 2px, rgba(0, 0, 0, 0.07) 0px 2px 4px,
    rgba(0, 0, 0, 0.07) 0px 4px 8px, rgba(0, 0, 0, 0.07) 0px 8px 16px,
    rgba(0, 0, 0, 0.07) 0px 16px 32px, rgba(0, 0, 0, 0.07) 0px 32px 64px;
}
.calling-menu .title {
  width: 100%;
  height: 2vw;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 1vw;
  padding: 1vw;
  margin-top: 1vw;
  color: #f5f5f5;
}
.calling-menu .title i {
  color: #eb175c;
}
.calling-menu .img-area {
  width: 100%;
  height: 5vw;
  display: flex;
  justify-content: center;
  align-items: center;
}
.calling-menu .img-area img {
  height: 80%;
}
.calling-menu .person-name {
  width: 100%;
  height: 1vw;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0.8vw;
  color: #f5f5f5;
  font-size: 1vw;
}
.calling-menu .person-status {
  width: 100%;
  height: 1vw;
  display: flex;
  margin-top: 0.5vw;
  justify-content: center;
  align-items: center;
  font-size: 0.8vw;
  font-weight: 600;
  color: #399144;
}
.calling-menu .calling-time {
  width: 100%;
  height: 7vw;
  background-image: url(/assets/images/call-bg.jpg);
  background-size: cover;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: top;
  display: flex;
  justify-content: center;
  color: #f5f5f5;
  font-size: 1vw;
  padding-top: 1vw;
  margin-bottom: 2vw;
}
.calling-menu-bottom {
  width: 100%;
  height: 3vw;
  background: #da2061;
  background: linear-gradient(90deg, rgb(218, 32, 97) 0%, rgb(94, 71, 125) 39%);
  padding: 0.5vw;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8vw;
  color: #f5f5f5;
  border-radius: 0vw 0vw 0.5vw 0.5vw;
}
.calling-menu-bottom span {
  display: flex;
  align-items: center;
  gap: 0.2vw;
}
.calling-menu-bottom i {
  background-color: #eb175c;
  padding: 0.3vw;
  border-radius: 50%;
}
.calling-menu-bottom i.fab.fa-whatsapp {
  background-color: #f5f5f5 !important;
  color: #eb175c;
  font-weight: bold;
}
.newPerson {
  width: 35vw;
  background-color: #fff;
  box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px,
    rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 1.2vw;
  border-radius: 5px;
  display: none;
}
.newPerson .title {
  width: 100%;
  height: 2.5vw;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 0.8vw;
  font-weight: bold;
}
.newPerson .title span:first-child i {
  color: #eb175c;
  margin-right: 0.5vw;
}
.newPerson .title span:last-child i {
  color: gray;
  font-size: 1.1vw;
}
.newPerson .title span {
  display: flex;
  justify-content: center;
  align-items: center;
}
.newPerson .profilePhoto {
  width: 100%;
  height: 6vw;
  margin-top: 0.5vw;
}
.newPerson .profilePhoto .topTitle {
  width: 100%;
  height: 1vw;
  font-size: 0.7vw;
  color: gray;
}
.newPerson .profilePhoto .in {
  width: 100%;
  height: 5vw;
  border: 0.1vw solid gray;
  border-radius: 0.2vw;
  padding: 0.5vw;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.newPerson .profilePhoto .in .left {
  width: 15%;
  height: 100%;
}
.newPerson .profilePhoto .in .left img {
  height: 100%;
  border-radius: 50%;
  border: 0.1vw solid gray;
}
.newPerson .profilePhoto .in .right {
  width: 83%;
  height: 100%;
  border: 0.1vw solid gray;
  border-radius: 0.2vw;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1vw;
}
.newPerson .profilePhoto .in .right span {
  width: -moz-max-content;
  width: max-content;
  padding: 0.2vw;
  font-size: 0.8vw;
  display: flex;
  justify-content: center;
  align-items: center;
}
.newPerson .profilePhoto .in .right span button {
  width: 6vw;
  height: 1.2vw;
  line-height: 1.3vw;
  font-size: 0.7vw;
  background-color: #f23f31;
  border: none;
  border-radius: 0.5vw;
  outline: none;
  color: #f5f5f5;
}
.newPerson .profilePhoto .in .right span label {
  display: block;
  position: relative;
}
.newPerson .profilePhoto .in .right span label span {
  display: block;
  text-align: center;
  padding: 0.2vw;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.3vw;
  font-weight: bold;
  font-size: 0.75vw;
}
.newPerson .profilePhoto .in .right span label input {
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
}
.newPerson .infoBoxArea {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  padding: 0.5vw;
  gap: 1vw;
  align-content: start;
  padding: 1rem;
}
.newPerson .infoBoxArea .infoBox {
  width: 100%;
  display: flex;
  flex-direction: column;
}
.newPerson .infoBoxArea .infoBox .title {
  width: 100%;
  height: 1vw;
  font-size: 0.8vw;
  line-height: 1vw;
  font-weight: bold;
  margin: 0;
  margin-bottom: 4px;
  text-indent: 0.5vw;
}
.newPerson .infoBoxArea .infoBox input,
.newPerson .infoBoxArea .infoBox select {
  width: 100%;
  height: 1.7vw;
  border: none;
  outline: none;
  border: 0.1vw solid gray;
  border-radius: 0.7vw;
  padding: 0vw 0.5vw;
  font-size: 0.7vw;
}
.newPerson .buttonArea {
  width: 100%;
  height: 4vw;
  display: flex;
  justify-content: end;
  align-items: center;
  gap: 1vw;
}
.newPerson .buttonArea button {
  width: 8vw;
  height: 2vw;
  border: none;
  outline: none;
  border-radius: 0.5vw;
  font-size: 0.7vw;
  font-weight: bold;
  cursor: pointer;
}
.newPerson .buttonArea button.cancelBut {
  background-color: rgba(0, 0, 0, 0);
  border: 0.2vw solid #f22151;
  color: #f22151;
}
.newPerson .buttonArea button.saveBut {
  background-color: #f22151;
  color: #f5f5f5;
}
@keyframes fade-in-box {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fade-in {
  from {
    margin-top: 100%;
    opacity: 0;
  }
  to {
    margin-top: 0;
    opacity: 1;
  }
}
@keyframes fade-out {
  from {
    margin-top: 0;
    opacity: 1;
  }
  to {
    margin-top: 100%;
    opacity: 0;
  }
}
@keyframes progress-active {
  0% {
    opacity: 0.6;
    width: 0;
  }
  100% {
    opacity: 0;
    width: 100%;
  }
} /*# sourceMappingURL=style.min.css.map */