@import url("https://fonts.googleapis.com/css2?family=AR+One+Sans&display=swap");

:root {
  --app-bg: 0;
  --primary-color: #0c386b;
  --secondary-color: red;
}

* {
  text-shadow: 0px 0px 0px 0px !important;
}

.app-bg {
  background-image: repeating-linear-gradient(45deg, #1667b1, #fefefe 1px);
}


html,
body {
  font-family: "AR One Sans", sans-serif !important;
  font-size: 0.9rem !important;
  line-height: normal !important;
}

hr {
  margin-top: 0.5rem !important;
  margin-bottom: 0.5rem !important;
}

img {
  border-radius: 0.5rem !important;
  -webkit-border-radius: 0.5rem !important;
  -moz-border-radius: 0.5rem !important;
  -ms-border-radius: 0.5rem !important;
  -o-border-radius: 0.5rem !important;
  box-shadow: 0px 0px 1px grey !important;
}

.login-box img {
  width: 42% !important;
}

a:hover {
  cursor: pointer !important;
}

.app-setting-menus {
  display: flex;
  flex-direction: column;
}

.app-setting-menus a {
  background-color: rgb(231, 231, 231);
  padding: 0.5rem 0.5rem;
  font-size: 0.9rem;
  margin-bottom: 0.2rem;
  border-radius: 0.45rem;
  color: var(--primary-color);
}

.app-setting-menus a:hover,
.app-setting-menus a.active {
  background-color: black;
  color: white !important;
  font-weight: 800;
}

.app-setting-menus a i {
  width: 1rem !important;
  text-align: center;
}

.app-setting-menus a i.fa-angle-right {
  float: right;
  font-size: 1.2rem !important;
}

.config-menu {
  padding: 0px !important;
  padding-left: 0px !important;
}

.config-menu li {
  list-style-type: none !important;
}

.config-menu li a {
  color: black !important;
  background-color: rgb(235, 249, 253) !important;
  display: inline-block;
  width: 100% !important;
  padding: 0.4rem 0.6rem !important;
  font-size: 0.9rem !important;
  margin-bottom: 0.2rem !important;
  border-radius: 0.2rem !important;
  -webkit-border-radius: 0.2rem !important;
  -moz-border-radius: 0.2rem !important;
  -ms-border-radius: 0.2rem !important;
  -o-border-radius: 0.2rem !important;
  font-weight: 600 !important;
}

.config-menu li a:hover,
.config-menu li a.active {
  background-color: black !important;
  color: white !important;
}

.config-menu li a i {
  font-size: 1rem !important;
  float: right !important;
}

.data-list {
  padding: 0.25rem 0.3rem !important;
  box-shadow: 0px 0px 1px rgb(192, 192, 192) !important;
  border-radius: 0.2rem !important;
  -webkit-border-radius: 0.2rem !important;
  -moz-border-radius: 0.2rem !important;
  -ms-border-radius: 0.2rem !important;
  -o-border-radius: 0.2rem !important;
  margin-bottom: 0.2rem !important;
  margin-top: 0px !important;
  width: 100%;
  min-width: 100%;
  line-height: normal !important;
  font-size: 0.75rem !important;
  background-color: white;
}

.data-list:hover {
  background-color: rgb(255, 219, 219);
  box-shadow: 0px 0px 2px rgb(158, 158, 158) !important;
}

.data-list span.text-grey {
  color: rgb(94, 94, 94) !important;
  font-weight: 500 !important;
  font-style: italic;
}

.data-list .data-count {
  padding: 0.2rem;
  font-weight: 800 !important;
}

.data-list .count {
  box-shadow: 0px 0px 1px grey;
  padding: 0rem 0.3rem !important;
  border-radius: 2rem;
  -webkit-border-radius: 2rem;
  -moz-border-radius: 2rem;
  -ms-border-radius: 2rem;
  -o-border-radius: 2rem;
  margin-right: 0.1rem;
  background-color: black;
  color: white;
}

.data-list .data-name {
  padding: 0.5rem !important;
}

.pop-section {
  position: fixed;
  top: 0px !important;
  left: 0px !important;
  width: 100% !important;
  background-color: rgba(29, 29, 29, 0.753) !important;
  z-index: 999999999;
  height: 100%;
  overflow-y: scroll;
}

.action-window {
  width: 75% !important;
  margin: 1% auto;
  background-color: white !important;
  height: auto;
  padding: 1rem;
  border-radius: 1rem;
}

.action-window .container {
  width: 100% !important;
  max-width: 100% !important;
}

.pop-section .action-window div.form-group {
  margin-bottom: 0.2em !important;
}

.popup-background {
  position: fixed;
  width: 100% !important;
  height: 100% !important;
  background-color: #00000099;
  z-index: 1111111111111;
  top: 0px;
  left: 0px;
  display: none;
}

.action-area {
  width: 50% !important;
  background-color: white !important;
  height: max-content;
  max-width: 390px;
  min-width: 245px;
  margin: 2% auto;
  border-radius: 0.5rem !important;
  -webkit-border-radius: 0.5rem !important;
  -moz-border-radius: 0.5rem !important;
  -ms-border-radius: 0.5rem !important;
  -o-border-radius: 0.5rem !important;
  padding: 1rem;
}

.ref-image {
  width: 100% !important;
  text-align: center !important;
  padding: 1rem;
}

.ref-image .pop-img {
  width: 50% !important;
}

.activity-action {
  width: 100% !important;
  text-align: center;
  padding: 1rem;
  display: flex;
  justify-content: space-around;
}

.action-title {
  padding: 0.5rem !important;
  margin-top: 0px !important;
  margin-bottom: 0px !important;
  text-align: center;
  font-weight: 600;
  font-size: 2rem;
  animation: action-text 1.5s linear infinite;
  -webkit-animation: action-text 1.5s linear infinite;
}

@keyframes action-text {
  0% {
    opacity: 0;
    color: red;
  }

  50% {
    opacity: 0.7;
    color: black;
  }

  100% {
    opacity: 0;
    color: blue;
  }
}

.action-desc {
  width: 100% !important;
  text-align: center;
  font-size: 1rem;
  padding: 0.5rem !important;
}

.blink-data {
  animation: blinker 0.5s linear infinite;
  -webkit-animation: blinker 0.5s linear infinite;
}

@keyframes blinker {
  50% {
    opacity: 0;
  }
}

.hidden {
  display: none;
}

.flex-s-b {
  display: flex;
  justify-content: space-between;
}

.app-heading {
  background-color: #0c386b !important;
  color: white !important;
  padding: 0.6rem !important;
  margin-bottom: 0.7rem !important;
  border-radius: 0.3rem !important;
  -webkit-border-radius: 0.3rem !important;
  -moz-border-radius: 0.3rem !important;
  -ms-border-radius: 0.3rem !important;
  -o-border-radius: 0.3rem !important;
  font-size: 1rem !important;
}

.app-sub-heading {
  background-color: rgb(5 79 159 / 67%) !important;
  padding: 0.5rem !important;
  margin-bottom: 0.5rem !important;
  -webkit-border-radius: 0.3rem !important;
  -moz-border-radius: 0.3rem !important;
  -ms-border-radius: 0.3rem !important;
  -o-border-radius: 0.3rem !important;
  border-radius: 0.3rem !important;
  margin-top: 0.4rem !important;
  font-size: 0.95rem !important;
  color: white !important;
}

.app-sub-heading i {
  color: yellow !important;
}

.set-up-links {
  padding-left: 1rem;
  list-style-type: square;
}

.set-up-links li a {
  padding: 0.2rem;
  display: block;
}

.main-header {
  position: fixed;
  width: 100%;
  background-color: white;
  top: 0px;
}

.header-logo,
.header-profile {
  padding: 0.5rem;
  padding-left: 0px;
}

.header-logo a {
  display: flex;
  justify-content: flex-start;
}

.header-profile a {
  display: flex;
  justify-content: flex-end;
}

.header-logo img,
.header-profile img {
  width: 2.3rem;
  margin-right: 0.5rem;
  padding: 0.2rem;
  background-color: white;
  box-shadow: 0px 0px 1px black;
}

.header-logo .title,
.header-profile .title {
  font-size: 1.2rem;
  color: black;
  font-weight: 600;
  padding-top: 0.3rem;
}


.upload-icon {
  width: 100% !important;
  margin-top: -5rem;
  background-color: #0c386b;
  padding: 0.15rem;
  border-radius: 2rem;
  cursor: pointer;
}

.upload-icon:hover {
  width: 95% !important;
  background-color: red;
}

.main-navigation-bar {
  list-style-type: none;
  display: inline-flex;
  padding-top: 0.5rem;
  margin-bottom: 0px;
  padding-bottom: 0.35rem;
  margin-top: 3rem;
  width: 100%;
  overflow-x: scroll;
  padding-left: 0.2rem;
}

.main-navigation-bar::-webkit-scrollbar {
  display: none;
}

.main-navigation-bar li {
  display: block;
  cursor: pointer;
}

.main-navigation-bar li a {
  display: inline-grid;
  justify-content: center;
  align-items: center;
  align-content: center;
  color: #0c386b;
  min-width: 94px;
  text-align: center;
  max-width: max-content;
  background-color: #ffffff;
  padding: 0.25rem;
  border-radius: 0.25rem;
  margin-right: 0.25rem;
  box-shadow: 0px 0px 2px #0c386b;
  width: max-content;
  z-index: 1;
}

.main-navigation-bar li a i.fa {
  font-size: 1.4rem;
  padding-top: 0.37rem;
  color: #db0101;
}

.main-navigation-bar li span.title {
  font-size: 0.9rem !important;
  font-weight: 500;
  text-shadow: none !important;
}

.main-navigation-bar li:hover a,
.main-navigation-bar li.active a {
  background-color: #0c386b;
}


.main-navigation-bar li:hover a,
.main-navigation-bar li.active a {
  color: white
}

.main-navigation-bar li:hover a i.fa,
.main-navigation-bar li.active a i.fa {
  color: white;
}

.main-navigation-bar li span.counts {
  background-color: red;
  color: white;
  padding: 0.1rem 0.25rem;
  border-radius: 1rem;
  font-size: 0.55rem;
}

.content-wrapper {
  padding-bottom: 1.5rem !important;
}

.projects {
  box-shadow: 0px 0px 0px 1px #0c386b !important;
  display: block;
  border-radius: 0.25rem;
  padding: 0.25rem;
  margin-bottom: 0.85rem;
}

.projects:hover {
  background-color: #0c386b;
  color: white !important;
}

.projects:hover .heading {
  color: white;
}

.projects .heading {
  font-size: 0.9rem;
  font-weight: 600;
  color: black;
}

.projects p {
  display: flex;
  flex-direction: column;
  font-size: 0.7rem !important;
  margin-bottom: 0px;
}

@keyframes blink {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.blink {
  animation: blink 1s infinite;
  /* Adjust the duration as needed */
}

table thead {
  background-color: black !important;
}

table thead th {
  color: white !important;
}

#calendar-container {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  padding: 10px;
}

marquee {
  min-height: 20rem !important;
  max-height: 30rem !important;
  height: max-content;
}

marquee ul {
  margin-bottom: 0rem;
  padding-left: 0rem;
  list-style-type: none;
}

marquee ul a {
  font-weight: 700;
  background-color: #e0eff5;
  padding: 0.2rem 0.3rem;
  display: block;
  border-radius: 0.25rem;
  margin-bottom: 0.3rem;
  color: black;
  font-size: 0.8rem;
  padding-bottom: 2rem;
  text-align: justify;
}

marquee ul li a span {
  position: absolute;
  width: max-content;
  right: 0.5rem;
  color: grey;
  font-weight: 100;
  font-style: italic;
  font-size: 0.7rem;
  margin-top: 1.5rem;
}

marquee:hover {
  animation-play-state: paused;
}

.mb-0 {
  margin-bottom: 0px !important;
}

.widget-box {
  margin-bottom: 1rem;
}

.widget-box:hover div.shadow-sm {
  box-shadow: 0px 0px 5px black !important;
}

.widget-box div.shadow-sm {
  box-shadow: 0px 0px 1px black !important;
  border-radius: 0.45rem;
}

.widget-box:hover .shadow-sm {
  background-color: var(--primary-color) !important;
}

.widget-box a {
  color: black;
  font-weight: 700;
}

.widget-box a:hover,
.widget-box a:hover p {
  color: white;
}

.widget-box a p {
  margin-bottom: 0px;
  color: grey;
  font-weight: 300;
}

.widget-box h2 {
  font-size: 1.5rem;
}

.cals {
  box-shadow: 0px 0px 2px black !important;
  border-radius: 0.5rem;
  height: 100%;
}

.cals img {
  margin-top: 1rem;
  width: 4rem;
  height: 4rem;
  margin-bottom: 1rem;
}

.cal-icon {
  width: 1rem;
  height: 1rem;
}

.cals h6 {
  color: #0c386b;
  font-weight: 600;
  font-size: 0.9rem;
}

.cals:hover {
  background-color: #0c386b;
}

.cals:hover h1,
.cals:hover h6,
.cals:hover p {
  color: white !important;
}

.bold {
  font-weight: bold !important;
}

.cals p {
  font-size: 0.75rem;
}

.calculator-form {
  margin-top: 30px;
}

#result-table {
  display: none;
  margin-top: 20px;
}

.text-right {
  text-align: right !important;
}

.rsor-heading {
  font-size: 0.9rem !important;
}

.filter-block {
  margin-right: 0rem;
  margin-left: 0px;
  margin-bottom: 0.5rem;
  border-radius: 0.5rem;
  padding: 0.5rem;
}

.text-primary {
  color: var(--primary-color) !important;
}

.flex-s-b .btn-block {
  font-size: 1rem !important;
  padding-top: 0.35rem;
}

.flex-end {
  justify-content: flex-end !important;
  display: flex !important;
}

label {
  color: grey;
  font-weight: 500 !important;
  font-size: 0.8rem;
}

.detail-dashboard {
  background-color: var(--primary-color) !important;
  padding: 1rem;
  text-align: left;
  box-shadow: 0px 0px 1px var(--primary-color);
  border-radius: 1rem;
}

.detail-dashboard img {
  width: 22%;
}

.dashboard {
  font-size: 0.85rem !important;
  line-height: 1rem !important;
}

.reminders {
  list-style-type: none;
  padding-left: 0px;
  height: 20rem;
  overflow-y: scroll;
  padding-right: 0.5rem;
}

.reminders li {
  display: block;
  margin-bottom: 0.5rem;
  padding: 0.5rem;
  border-radius: 1rem;
}

.reminders li:hover {
  background-color: rgb(255, 243, 243);
}

.reminders li a {
  color: var(--primary-color);
}

.reminders li a h2 {
  font-size: 1.2rem;
  font-weight: 500;
  margin-bottom: 0px;
}

.reminders li a h2 .d-block {
  margin-top: 0.4rem !important;
}

.reminders li a h2 .time {
  font-size: 1.3rem;
  font-weight: 500;
  text-shadow: 0px 0px 0px !important;
}

.reminders li a span.type {
  font-size: 0.7rem;
  background-color: antiquewhite;
  padding: 0.15rem 0.5rem;
  border-radius: 1rem;
  text-transform: uppercase;
}

.reminders li a span.level {
  font-size: 0.7rem;
  text-transform: uppercase;
  padding: 0.15rem 0.5rem;
  border-radius: 1rem;
}

.reminders li a span.level.high {
  background-color: rgb(255, 122, 122);
}

.reminders li a span.level.low {
  background-color: rgb(72, 223, 2);
}

.reminders li a span.level.medium {
  background-color: rgb(240, 224, 1);
}

.reminders li a p {
  font-size: 0.85rem;
  margin-bottom: 0px;
  text-align: justify;
  margin-top: 0.25rem;
  line-height: 0.95rem;
}

.reminders li a .difference {
  font-size: 0.65rem;
  float: right;
  color: red;
}

.session-variables {
  font-size: 0.6rem !important;
  line-height: 0.7rem !important;
  color: black !important;
}

.footer {
  line-height: 0.8rem !important;
  font-size: 0.7rem !important;
}

.bootstrap-tagsinput {
  width: 100%;
  padding: 5px;
  background-color: #f8f9fa;
  border: 1px solid #ced4da;
  border-radius: .25rem;
  text-transform: uppercase !important;
}

.bootstrap-tagsinput .tag {
  margin-right: 2px;
  color: white;
  background-color: #007bff;
  padding: .2em .6em;
  border-radius: .2rem;
  text-transform: uppercase !important;
}

.tox .tox-notification--warn,
.tox .tox-notification--warning {
  display: none !important;
}

.tox .tox-statusbar a,
.tox .tox-statusbar__path-item,
.tox .tox-statusbar__wordcount {
  display: none !important;
}

.shadow-sm {
  box-shadow: 0px 0px 1px grey !important;
  background-color: rgb(247, 254, 255);
}

.line-height-normal {
  line-height: normal !important;
}

.btn-xs {
  padding: 0.3rem 0.4rem !important;
  width: max-content !important;
  font-size: 0.65rem !important;
}

.neg-mt-0-7 {
  margin-top: -0.98rem !important;
}

.multiple-users {
  display: flow-root;
  margin-top: -0.3rem;
}

.multiple-users img {
  width: 20px;
  border-radius: 10rem !important;
  margin-left: -1rem;
}

.multiple-users img:hover {
  transform: scale(1.5);
  box-shadow: 0px 0px 2px grey !important;
}

.rsor-chat-window {
  box-shadow: 0px 0px 1px black;
  border-radius: 0.5rem;
  display: block;
  height: 100%;
  padding-bottom: 0px !important;
}

.rsor-chat-window .chat-header {
  display: flex;
  justify-content: space-between;
  border-bottom-style: groove;
  border-width: thin;
}

.rsor-chat-window .chat-header .profile {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  padding: 0.4rem;
}

.rsor-chat-window .chat-header .profile img {
  width: 7%;
  border-radius: 5rem !important;
  margin-right: 0.25rem;
  margin-top: -0.5rem !important;
}

.rsor-chat-window .chat-header .profile h5 {
  width: 100%;
  display: block;
  padding-top: 0.2rem;
  padding-left: 0.3rem;
  font-weight: 700;
}

.rsor-chat-window .chat-header .profile .enqactions {
  position: absolute;
  right: 1rem;
  padding: 1rem;
}

.rsor-chat-window .chat-header .profile .enqactions a {
  font-size: 1.2rem;
  padding: 0.35rem 0.75rem;
  border-radius: 2rem;
  background-color: white;
  color: #0a346a;
  box-shadow: 0px 0px 1px black;
}

.rsor-chat-window .chat-header .profile .enqactions a:hover {
  color: white;
  background-color: #0c386b;
}

.rsor-chat-window .chat-header .profile .enqactions a i {
  font-size: 1.5rem;
}


.rsor-chat-window .chat-body {
  padding: 0.5rem;
  overflow-y: scroll;
  height: 32rem;
  display: block;
  background-image: repeating-linear-gradient(45deg, #e4f0ff66, #bcf6ff80 1px);
}

/* Style the scrollbar track (background of the scrollbar) */
.rsor-chat-window .chat-body::-webkit-scrollbar {
  width: 6px;
  /* Make the scrollbar width thin */
}

/* Style the scrollbar thumb (the draggable part) */
.rsor-chat-window .chat-body::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.2);
  /* Light grey color */
  border-radius: 10px;
  /* Rounded corners for the thumb */
}

/* Optional: Style the scrollbar when hovered */
.rsor-chat-window .chat-body::-webkit-scrollbar-thumb:hover {
  background-color: rgba(0, 0, 0, 0.5);
  /* Darker color on hover */
}

/* Style the scrollbar corner (if applicable) */
.rsor-chat-window .chat-body::-webkit-scrollbar-corner {
  background-color: transparent;
}

.chat-body p.feedbacks {
  background-color: rgb(190 253 190);
  padding: 0.5rem;
  width: 60%;
  font-weight: bold;
  text-align: right;
  border-radius: 0.45rem;
  border-bottom-right-radius: 0px;
  margin-right: 0.35rem;
  border-style: groove;
  border-width: thin;
  box-shadow: 0px 0px 13px #ededed;
}

.chat-body p.Havereminders {
  background-color: rgb(247, 201, 197);
  padding: 0.5rem;
  width: 70%;
  text-align: center;
  border-radius: 0.45rem;
  margin-right: 0.35rem;
}

.chat-body p.feedbacks span {
  color: grey;
  font-size: 0.7rem;
  font-weight: 300;
  float: right;
  margin-top: 0.25rem;
}

.chat-body p.Havereminders span {
  color: rgb(42, 42, 42);
  font-size: 0.7rem;
  font-weight: 300;
  float: right;
  margin-top: -0.5rem;
}

.rsor-chat-window .chat-actions {
  position: sticky;
  display: flex;
  flex-direction: column;
  border-top-style: groove;
  border-width: thin;
  width: 100%;
  padding: 0.5rem;
  bottom: 1.2rem;
  padding-right: 1.5rem;
  background-color: #ffffff;
  border-bottom-left-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
}

.rsor-chat-window .chat-actions .InputArea input {
  border-radius: 0.5rem;
  font-size: 1rem;
  font-weight: 600;
  color: black;
  box-shadow: 0px 0px 2px #007bffa1;
}

.rsor-chat-window .chat-actions .InputArea button {
  border-radius: 0.5rem;
}


.login-box .card-header {
  border-bottom: none !important;
}

.height-control {
  height: 30rem;
  overflow-y: scroll;
}

.data-list .icons {
  width: 1.2rem !important;
  height: 1.2rem !important;
  box-shadow: 0px 0px 1px grey;
  border-radius: 0.5rem;
}
@media screen and (max-width: 992px) {
  .header-logo .title, .header-profile .title {
    font-size: 0.625rem;
    color: black;
    font-weight: 600;
    padding-top: 0.3rem;
}
.header-logo, .header-profile {
    padding: 0.5rem;
    padding-left: auto;
}
.vendor-back-btn .vendor-a{
    font-size: 0.725rem !important;
}

.vendor-add-more-details{
font-size: 0.685rem;
}
.vendor-saved-btn{
  font-size: 0.725rem;
}

}
@media (max-width: 992px) {
  .data-list {
    display: flex;
    flex-wrap: wrap;
    background: #f4f4f4;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
   margin-bottom: 10px !important;
    padding: 10px;
  }

  .data-list > div {
    width: 100%;
    padding: 5px;
    text-align: left;
  }

  .data-list > div:not(:last-child):not(:nth-last-child(2)) {
    border-bottom: 1px solid #ddd;
}


  /* Hide headers in mobile view */
  .data-list.bg-dark {
    display: none;
  }

  /* Improve the layout for images inside cards */
  .data-list img {
   max-width: 35px;
    border-radius: 50%;
  }

  .RecordsList {
    display: block;
  }
  .show-on-mobile {
    display: inline; /* Show only on mobile */
  }
  .show-on-mobile-view-width{
    text-align: center;
    width:50% !important
  }
  .custom-switch {
    margin-top:auto !important;
  }
  .textalign-on-mobile{
    text-align: right !important;
  }
  .action-window {
    width: 95% !important;
  }
  .vendor-back-btn-1{
    font-size: 0.725rem !important;
  }
  .product-mobile-view{
    display: flex;
    flex-direction: column;
  }
  .product-mobile-view1{
    width: 100% !important;
  }
  .product-mobile-view11{
    display: none !important;
  }
   .product-mobile-view12{
    display: block !important;
  }
  .main-navigation-bar {
    padding-top: 1rem !important;
}
}
@media (min-width: 993px) {
  .show-on-mobile {
    display: none; /* Hide on larger screens */
  }
   .product-mobile-view11{
    display: block !important;
  }
  .product-mobile-view12{
    display: none !important;
  }
}