html {
  font-family: "Roboto", sans-serif;
  font-size: 100%;
  box-sizing: border-box;
  top: 0;
  left: 0;
  right: 0;
}

@media (max-width: 1440px) {
  html {
    font-size: 75%;
  }
}

.u--alignment {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

.utility__svgMargin {
  margin-right: 1rem;
}

.utility-margin-settings {
  margin-left: 1.5rem;
  margin-right: 40rem;
}

@media (max-width: 1200px) {
  .utility-margin-settings {
    margin-right: 30rem;
  }
}

@media (max-width: 768px) {
  .utility-margin-settings {
    margin-right: 20rem;
  }
}

.utility-padding-settings {
  padding: 0.4rem 0.5rem;
  border: 1px solid #272727;
}

@media (min-width: 1200px) {
  .u-resLegend {
    margin-left: 10rem;
  }
}

@media (max-width: 992px) {
  .u-resLegend {
    margin-left: 3rem;
  }
}

@media (max-width: 1200px) {
  .u__icon-res {
    height: 2.2rem;
  }
}

.dashboard-containner {
  /* height: 79vh; */
  overflow-y: scroll;
}

.dashboard-containner::-webkit-scrollbar {
  width: 0;
}

.welcome-top {
  border-radius: 0.2rem;
}

.shadow {
  box-shadow: 0px 3px 6px #272d3b33;
}

.linechart2 {
  margin-left: 2.3rem;
}

.welcome-down {
  margin-left: -2rem;
  margin-right: 0.6rem;
  border-radius: 0.2rem;
  box-shadow: 0px 3px 6px #272d3b33;
}



.welcome-top-data {
  display: flex;
  justify-content: space-between;
}

.dots {
  background-color: #ff007c;
  height: 0.8rem;
  width: 0.8rem;
  border-radius: 200%;
  display: inline-block;
  margin-right: 0.5rem;
}

.linePatient {
  background-color: #bb9b42;
  color: #bb9b42;
  margin: 1rem 0;
}

.records {
  display: flex;
  justify-content: space-around;
}

.dashboard-records {
  display: flex;
}

.dashboard-records__patients {
  background-color: #feeab6;
  margin: 1rem;
  margin-left: 0;
  line-height: 0.4rem;
  padding: 0.5rem 1rem;
  padding-right: 1.6rem;
  border-radius: 0 1rem 1rem 0;
}

.TextDec {
  text-transform: capitalize;
  font-weight: 600;
}

.Tpatient {
  color: #4b4279;
}

.graphs-shadow {
  box-shadow: 0px 3px 6px #272d3b33;
  border-radius: 0.4rem;
}

.graphical-record {
  display: flex;
  flex-direction: column;
  position: relative;
}

.charts-height{
  max-height: 200px;
}

.graphical-record__details {
  z-index: 1;
}

.graphical-record__details__records {
  display: flex;
}

.graphical-record__graph {
  display: flex;
  justify-content: center;
  align-items: center;
}

.box {
  max-height: 1rem;
  width: 1rem;
}

.color-text {
  color: #a2a2a2;
  text-transform: capitalize;
}

.lineChartSec {
  margin-left: -2rem;
  margin-right: 0.6rem;
}

svg circle {
  height: 100%;
  width: 100%;
  fill: none;
  stroke: #dfdfdf;
  stroke-width: 10;
  stroke-linecap: round;
  transform: translate(5px, 5px);
}

svg circle:nth-child(2) {
  stroke-dasharray: 440;
  stroke-dashoffset: 440;
}

.card00:nth-child(1) svg circle:nth-child(2) {
  stroke-dashoffset: calc(440 - (440 * 80) / 100);
  stroke: #00ccf2;
}

.activeAllTrips {
  background-color: #272727;
  color: red;
  text-decoration: bold;
  font-weight: 700;
}

.percent {
  position: relative;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  box-shadow: #00ccf2;
  background-color: white;
  z-index: 1000;
}

.number00 {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
}

.per00 {
  color: #272d3b;
  font-weight: 700;
  font-family: bree sarif;
}

.Bradius {
  border-radius: 0.5rem;
}

.boxShadow {
  box-shadow: 0px 3px 6px #272d3b33;
}

.reminder-sec {
  padding: 0.6rem;
  display: flex;
  justify-content: space-between;
}

.reminderss {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.reminderss__rem {
  margin-top: 0.7rem;
}

.reminder-line {
  height: 1px;
  width: 17rem;
  background-color: #272727;
}

.reminder-img,
.reminder-img1,
.reminder-img2 {
  background-color: #0aade833;
  border: 1px solid #00ccf2;
  margin: 0 3rem;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  border-radius: 0.5rem;
}

.reminder-img__name {
  line-height: 1px;
}

.reminder-img1 {
  background-color: #ff007c33;
  border: 1px solid #ff007c;
  margin-left: 1rem;
  margin-right: 5rem;
}

.reminder-img2 {
  margin-left: 5rem;
  margin-right: 1rem;
  background-color: #7d00b533;
  border: 1px solid #7d00b5;
}

/****************************************************************
 *
 * CSS Percentage Circle
 * Author: Andre Firchow/ Vikas
 *
*****************************************************************/

.weatherDashboard {
  background-image: url(../images/weather/weatherBgSmall.png);
  background-position: cover;
  background-repeat: no-repeat;
  margin-left: 2rem;
}

.weather-center {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-left: 1.5rem;
}

.color-primary1 {
  color: white !important;
}

.hoverA:hover {
  text-decoration: none;
}

.dounetxhart {
  margin-left: -2rem;
}

.quiz-chartTip {
  padding: 5px 10px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  background-color: rgba(255, 255, 255, 0.9);
  box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.1);
  position: absolute;
  z-index: 50;
  max-width: 250px;
}

.quiz-graph {
  padding: 1px;
  height: 22rem;
  width: 100%;
}

.quiz-graph .x-labels {
  text-anchor: middle;
}

.quiz-graph .y-labels {
  text-anchor: end;
}

.quiz-graph .quiz-graph-grid {
  stroke: #ccc;
  stroke-dasharray: 0;
  stroke-width: 1;
}

.label-title {
  text-anchor: middle;
  text-transform: uppercase;
  font-size: 12px;
  fill: gray;
}

.quiz-graph-dot,
.quiz-graph-start-dot {
  fill: #0070d2;
  stroke-width: 2;
  stroke: white;
}

.container-fluid {
  height: 100vh;
}

.trips {
  height: 100%;
}

.sideBar {
  /* height: 100%;
  border-radius: 1.6rem 0 0 1.6rem; */
  background-color: #272727;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.sideBar__image-container {
  display: flex;
  justify-content: flex-start;
  margin-left: 1rem;
}

.brokerPanel {
  font-style: bold;
  font-weight: 1100;
  color: #272727;
}

.header__lower {
  display: flex;
  align-items: center;
  background-color: #f2f2f2;
  box-shadow: 0px 3px 6px #272d3b33;
}

.header__lower__context {
  display: flex;
  align-items: center;
  color: #272727;
  font-weight: 800;
}

.header__lower__context > span {
  font-weight: 600;
  text-transform: capitalize;
  padding: 0 3px;
}

.header__lower__context > span > img {
  padding: 0 7px;
}

.header {
  /* height: 11%; */
  padding: .5rem;
}

/* .header__lower {
  height: 9%;
} */

.list__style {
  padding-left: 1rem;
  color: #ffffff;
}

.hoverlink > p:hover,
.hoverlink > i:hover {
  color: #272727;
  background-color: #ffffff;
}

.heading__icon {
  margin-left: 2rem;
  cursor: pointer;
}

.seperator {
  margin-left: -2.1rem;
}

.header__lower__context {
  margin-left: -1rem;
}

.header__lower__context > a {
  color: #272727;
  text-decoration: none;
}

.navigation__section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* height: 10%; */
}

.searchBar {
  margin-left: 1rem;
  display: flex;
}

.search {
  padding: 0.3rem 2rem;
  border-radius: 2.5rem;
  margin-left: -2rem;
  border: 1px solid #272d3b;
  color: #272d3b;
}

.search:focus,
.search:active {
  outline: none;
}

.searchIcon {
  position: relative;
  padding: 0.5rem 0.3rem 0 1rem;
}

@media (max-width: 1440px) {
  .searchIcon {
    padding: 0.4rem 0.1rem 0 0;
  }
}

.row1 {
  /* height: 5%; */
  padding-top: 0.6rem;
}
@media (max-width: 1400px) {
  .row1 {
    /* height: 5%; */
    padding-top: 1rem;
  }
}
.row2 {
  background-color: #272727;
  height: 55px;
  border-radius: 0 1rem 0 0;
  position: relative;
}

.Icon-right {
  position: absolute;
  right: 0;
  margin-top: 1rem;
  margin-right: 2rem;
}

.row3 {
  height: 3px;
  background-color: #272727;
  margin: 0 1rem;
  margin-top: 5px;
}

.row4 {
  /* box-shadow: 0px 3px 6px #272d3b33; */
  /* height: 57%;
  overflow-y: scroll; */
}

.sideBarData {
  position: relative;
}

.sideBarData__container {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  width: 100%;
}

.sideBarData {
  padding: 0 !important;
  display: flex;
  width: 100%;
}

.sideBarData:not(:last-child) {
  margin: 4% 0;
}

.sideBarData__a {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  margin-left: 13%;
}

@media screen and (max-width: 800px) {
  .sideBarData__a {
    margin-left: 7%;
  }
}

.sideBarData__i {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  color: aliceblue;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
}

.sideBarData__i__img {
  height: 15px;
  width: 15px;
  margin-right: 10px;
}

.row1 > a {
  color: #a2a2a2;
  text-decoration: none;
  text-transform: capitalize;
}

.row1 > a:hover {
  color: #272727;
  text-decoration: bold;
}

.row1 > a:focus,
.row1 > a:active {
  background-color: #272727;
  color: #ffffff;
}

.user-profile {
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  flex-direction: row;
  padding: 0 5%;
  color: white;
}

.User__photo__img {
  margin-right: 5%;
  width: 20%;
}

.user__des {
  flex: 1;
}

.user__des__p {
  margin: 0;
}

.user__des__p:first-child {
  font-weight: 700;
}

.sideBarTextColor {
  color: #ffffff;
  margin-left: 10px;
}

.sidebarIconsHover {
  display: flex;
  align-items: center;
  padding: 10px 1.6rem;
}

.sidebarIconsHover:hover {
  padding: 10px 1.6rem;
}

.sidebarIconsHover:hover #bxs-dashboard {
  fill: #272727;
}

.sidebarIconsHover:hover .sideBarTextColor {
  color: #272727;
}

.tableTrip {
  box-shadow: 0px 3px 6px #272d3b33;
  height: 55%;
}

@media (max-width: 768px) {
  .Trips1stTable {
    height: 54%;
    font-size: 0.7rem !important;
  }
}

.buton {
  border-radius: 0.5rem;
  background-color: transparent;
  padding: 6px 10px;
}

.btn-yellow {
  background-color: #e8ba00;
  border: none;
  margin: 0;
  color: #ffffff;
}

.buton-primary {
  background-color: #272727;
  border: none;
  color: #ffffff;
}

.buton-primary:hover {
  background-color: #a2a2a2;
  cursor: pointer;
  outline: none;
}

.buton-primary:focus {
  outline: none;
}

.btn-chat {
  color: #a2a2a2;
}

.btn-chat:hover {
  color: #272727;
  text-decoration: none;
}

.btn-chat:active,
.btn-chat:focus {
  background-color: color-primary;
  color: #272727;
  font-weight: 700;
  text-decoration: none;
}

.btn-hover > button:hover {
  background-color: #272727;
  color: #ffffff;
}

.btn-hover:hover svg {
    fill: white;
    color: white;
}

.btn__transparent {
  background-color: transparent;
  border: 1px solid #272727;
  color: #272727;
  padding: 0.3rem 1rem;
  font-weight: 700;
  border-radius: 0.3rem;
  cursor: pointer;
}

.btn-transparent {
  background-color: transparent;
  border: 1px solid #a2a2a2;
  color: #a2a2a2;
  padding: 0.3rem 1rem;
  font-weight: 400;
  border-radius: 0.3rem;
  cursor: pointer;
}

.btn-provider-accept {
  background-color: #535353;
  border-radius: 1.7rem;
  color: #ffffff;
}

.btn-provider-accept:hover {
  font-weight: 600;
  background-color: #272727;
}

.pagination {
  display: inline-block;
  height: 5%;
}

.pagination-center {
  display: flex;
  justify-content: center;
}

.pagination a {
  color: #272727;
  padding: 8px 16px;
  text-decoration: none;
}

.pagination a.active {
  background-color: #272727;
  color: white;
  border-radius: 5px;
}

.pagination a:hover:not(.active) {
  background-color: #ddd;
  border-radius: 5px;
}

.setting {
  height: 62%;
}

.settings__data {
  box-shadow: 0 3px 6px #00000029;
  padding-left: 3rem;
  height: 100%;
}

.settings-span {
  display: block;
  color: #272727;
  text-transform: capitalize;
  font-weight: 600;
  font-size: 1.2rem;
  margin-top: 1rem;
}

.setting-form > input {
  padding: 10px 1.5rem;
  border-radius: 0.5rem;
  width: 32%;
  border: 1px solid #272727;
}

.setting-form > input::placeholder {
  color: #a2a2a2;
}

.setting-form > input:focus {
  outline: none;
}

select {
  width: 32%;
  height: 3rem;
  border-radius: 0.5rem;
  border: 1px solid #272727;
  padding: 0 1.5rem;
}

select::placeholder {
  color: #a2a2a2;
}

select:focus {
  outline: none;
}

.setting-btn {
  background-color: #272727;
  color: white;
  border-radius: 0.5rem;
  border: none;
  font-size: 1rem;
  padding: 0.3rem 2rem;
  text-transform: capitalize;
  margin-top: 2px;
  cursor: pointer;
}

.setting-btn:focus {
  outline: none;
}

.setting-btn:hover {
  background-color: #272727;
}

.span-grey {
  color: #a2a2a2;
}

label > input[type="radio"] {
  display: none;
}

label > input[type="radio"] + *::before {
  content: "";
  display: inline-block;
  vertical-align: bottom;
  width: 1rem;
  height: 1rem;
  margin-right: 0.3rem;
  border-radius: 50%;
  margin-bottom: 0.2rem;
  border-style: solid;
  border-color: gray;
}

label > input[type="radio"]:checked + * {
  color: #272727;
}

label > input[type="radio"]:checked + *::before {
  background: radial-gradient(
    #272727 0%,
    #272727 40%,
    transparent 50%,
    transparent
  );
  border-color: #272727;
}

label > input[type="radio"] + * {
  display: inline-block;
  padding: 0px 10px;
}

.side-nav {
  font-size: 1rem;
  margin-top: 0.5rem;
  list-style: none;
  position: relative;
}

.side-nav__item {
  position: relative;
  margin-left: -3rem;
  padding-left: 3rem;
}

.side-nav__item:not(:last-child) {
  margin-bottom: 0.5rem;
}

.side-nav__item::before {
  content: "";
  position: absolute;
  height: 100%;
  width: 3px;
  left: 0;
  background-color: green;
  transform: scaleY(0);
  transition: transform 0.2s, width 0.4s cubic-bezier(1, 0, 0, 1) 0.2s,
    background-color 0.1s;
}

.side-nav__item:hover::before,
.side-nav__item--active::before {
  transform: scaleY(1);
  width: 100%;
}

.side-nav__item:active::before {
  background-color: #272d3b;
}

.side-nav__link:link,
.side-nav__link:visited {
  color: #ffffff;
  text-transform: capitalize;
  text-decoration: none;
  display: block;
  padding: 0.4rem 0rem;
  padding-left: 0.5rem;
  display: flex;
  align-items: center;
  position: relative;
  z-index: 1;
}

.side-nav__link:hover {
  color: #ffffff;
}

.side-nav__icon {
  height: 1.75rem;
  width: 1.75rem;
  margin-right: 2rem;
  fill: #272727;
}

.icon-colors {
  fill: #272727;
  color: red;
}

.chatNav {
  box-shadow: 0px 3px 6px #272d3b33;
  border-radius: 10px;
  padding: 1rem 0;
  display: flex;
  justify-content: space-around;
}

.chatNav > a {
  padding: 0 20px;
}

.chat-users {
  box-shadow: 0px 3px 6px #272d3b33;
}

.conversations {
  color: #a2a2a2;
  text-transform: capitalize;
  font-weight: 600;
}

.anchor-conversation:hover {
  text-decoration: none;
}

.description-msg {
  display: block;
  width: 16rem;
  white-space: nowrap;
  overflow: hidden !important;
  text-overflow: ellipsis;
  font-weight: normal;
}

@media (max-width: 1024px) {
  .description-msg {
    width: 11rem;
  }
}

@media (max-width: 992px) {
  .description-msg {
    width: 10rem;
  }
}

@media (max-width: 768px) {
  .description-msg {
    width: 8rem;
  }
}

.user-name {
  line-height: normal;
  font-weight: 700;
  text-transform: capitalize;
}

.line-underUser {
  background-color: #a2a2a2;
  height: 1px;
  margin-left: 4rem;
  margin-bottom: 1.5rem;
}

.chat-users {
  height: 56vh;
  margin: 0 1rem;
  overflow-y: scroll;
}

.chat-users::-webkit-scrollbar {
  width: 0;
}

.chats {
  box-shadow: 0px 3px 6px #272d3b33;
  margin: 0 1rem;
}

.height-manager {
  height: 43vh;
  overflow-y: scroll;
}

.height-manager::-webkit-scrollbar {
  width: 0;
}

.chat__msg__users {
  display: flex;
  padding: 1rem 1rem;
  justify-content: space-between;
}

.chat__msg__users__user1 {
  max-width: 45%;
}

.chat__msg__name {
  font-size: 1rem;
  font-weight: 700;
  color: #272727;
  text-transform: capitalize;
}

.user__msg,
.user__msg2 {
  background-image: linear-gradient(to bottom, #272727, #272d3b);
  padding: 10px 1rem;
  color: #ffffff;
  height: auto;
  align-items: center;
  border-radius: 1rem 1rem 1rem 0;
  flex-basis: auto;
}

.user__msg2 {
  border-radius: 1rem 1rem 0 1rem;
  background-image: linear-gradient(to bottom, #a2a2a2, #f2f2f2);
  color: #272727;
}

.chat__msg__users__user2 {
  flex-basis: auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  max-width: 45%;
}

.chat__msg__box__bg {
  background-color: #f1f6fb;
  border: none;
  width: 88%;
  border-radius: 0.5rem;
  padding: 10px 2rem;
  margin-top: 1rem;
  margin-left: 1rem;
  flex: 0 0 70%;
}

.chat__msg__box__bg:focus,
.chat__msg__box__bg:active {
  outline: none;
}

.Attachment {
  background-color: #f1f6fb;
  margin-left: -1rem;
  border: none;
  padding: 10px 5px;
  cursor: pointer;
}

.Attachment:focus {
  outline: none;
  border: none;
}

input.exceptionDate {
  border-radius: 5px;
  border: 1px solid #272727;
  padding: 5px 1rem;
}

.report-box {
  box-shadow: 0px 3px 6px #272d3b33;
}

.trip-reports {
  text-transform: capitalize;
  font-weight: 700;
}

ul {
  list-style: none;
}

.report-days {
  display: flex;
  justify-content: space-between;
}

.report-dates {
  display: flex;
  justify-content: space-between;
}

.report__main {
  box-shadow: 0px 3px 6px #272d3b33;
  margin-top: 1rem;
  padding-bottom: 2rem;
}

.display_assets {
  margin-top: 2rem;
  display: flex;
  justify-content: space-between;
}

.a {
  margin-top: 2rem;
}

.reports__headings {
  display: flex;
}

.report__assets {
  flex: 0 0 35%;
  font-size: 1rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}

.report__assets > a {
  color: #272727;
}

.report__data {
  flex: 0 0 30%;
}

@media (max-width: 1440px) {
  .report__data {
    margin-left: 3rem;
    flex: 0 0 32%;
  }
}

@media (max-width: 1200px) {
  .report__data {
    margin-left: 8rem !important;
    flex: 1 1 25%;
  }
}

@media (max-width: 1024px) {
  .report__data {
    margin-left: 8rem !important;
    flex: 1 1 37%;
  }
}

@media (max-width: 992px) {
  .report__data {
    flex: 1 1 40%;
  }
}

@media (max-width: 768px) {
  .report__data {
    margin-left: 6rem !important;
    flex: 1 1 53%;
  }
}

.report__data__today {
  margin-left: 4rem;
  color: #52575d;
}

.optional {
  flex: 1;
}

.list {
  display: flex;
  flex-direction: column;
}

.list__uo {
  display: flex;
  list-style: none;
  justify-content: space-evenly;
  color: #52575d;
}

.list__order__day {
  font-size: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  color: #272727;
}

.report__info {
  background-color: #f3f3f3;
  margin-left: 3rem;
  margin-right: 2rem;
  border-radius: 5px;
  display: flex;
  padding-bottom: 0.7rem;
}

@media (max-width: 768px) {
  .report__info {
    font-size: 0.8rem;
  }
}

.report__info__text {
  flex: 0 0 15%;
  padding-left: 4.4rem;
  padding-top: 1.5rem;
  color: #52575d;
}

.report__info__text__1 {
  padding-top: 2rem;
  color: #52575d;
}

@media (max-width: 768px) {
  .report__info__text__1 {
    margin-left: -3rem;
  }
}

.report__info__text__2 {
  padding-left: 3rem;
  display: flex;
  flex-direction: column;
  color: #52575d;
  line-height: 1.8;
}

@media (max-width: 768px) {
  .report__info__text__2 {
    margin-left: 1rem;
  }
}

.report__info__white {
  background-color: #ffffff;
}

.reports__box {
  margin-left: 6.7rem;
}

@media (max-width: 1440px) {
  .reports__box {
    margin-left: 14rem;
  }
}

@media (max-width: 1200px) {
  .reports__box {
    margin-left: 16.3rem;
  }
}

@media (max-width: 1024px) {
  .reports__box {
    margin-left: 13rem;
  }
}

@media (max-width: 992px) {
  .reports__box {
    margin-left: 13.2rem;
  }
}

.reports__box__1 {
  display: flex;
  padding-top: 1.5rem;
}

@media (max-width: 768px) {
  .reports__box__1 {
    padding-top: 2.4rem;
  }
}

.dropbtn {
  color: #94d2f8;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
  background-color: #fff;
  margin-right: 3rem;
  margin-top: 0.5rem;
}

.dropbtn:hover,
.dropbtn:focus {
  color: #0277bd;
  outline: none;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  padding: 1rem 0.2rem;
  display: none;
  position: absolute;
  background-color: #ffffff;
  min-width: 13rem;
  overflow: auto;
  box-shadow: 0px 3px 6px #272d3b33;
  z-index: 1;
  width: 24rem;
}

@media (max-width: 1440px) {
  .dropdown-content {
    min-width: 18rem;
  }
}

.dropdown-content a {
  color: #a2a2a2;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown a:hover {
  background-color: #f8f8f8;
}

.show {
  display: block;
}

.dropbox {
  display: flex;
  width: auto;
  height: 2rem;
  justify-content: flex-start;
  align-items: center;
  overflow: hidden;
}

.dropbox__img {
  padding-left: 5px;
}

.myCheckbox input {
  display: none;
}

.myCheckbox span {
  height: 2rem;
  width: 2rem;
  background-color: #a2a2a2;
  margin: 0 6px;
  display: block;
  border-radius: 5px;
}

@media (max-width: 1440px) {
  .myCheckbox span {
    margin: 0 0.8rem;
  }
}

@media (max-width: 1200px) {
  .myCheckbox span {
    margin: 0 0.8rem;
  }
}

@media (max-width: 992px) {
  .myCheckbox span {
    margin: 0 0.7rem;
  }
}

.myCheckbox input:checked + span {
  background-color: #272727;
}

.forms__reports11 {
  padding-left: 10px;
  text-transform: capitalize;
}

.exportBtnHover {
  border-radius: 5px;
  border: 1px solid #272727;
}

.exportBtnHover:hover {
  background-color: #272727;
}

.exportBtnHover:hover #export-2 {
  fill: #ffffff;
}

.exportBtnHover:hover .exportText {
  color: #ffffff;
}

.report__info__text__1 {
  cursor: pointer;
}

input:checked ~ .checkmark {
  background-color: black;
}

.paddingLeft {
  padding-left: 1.8rem;
}

@media (max-width: 992px) {
  .paddingLeft {
    padding-left: 5rem;
  }
}

/* .tableReportsHeight {
  height: 56vh;
  overflow: scroll;
} */

.tableReportsHeight::-webkit-scrollbar {
  width: 1px;
}

/* The container */

.container {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 15px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */

.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */

.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 15px;
  width: 15px;
  background-color: #ffffff;
  border: 1px solid #272727;
  border-radius: 2px;
}

/* On mouse-over, add a grey background color */

.container:hover input ~ .checkmark {
  background-color: #a2a2a2;
}

/* When the checkbox is checked, add a blue background */

.container input:checked ~ .checkmark {
  background-color: #272727;
}

/* Create the checkmark/indicator (hidden when not checked) */

.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */

.container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */

.container .checkmark:after {
  left: 4px;
  top: 1.5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.profile__main {
  height: 65vh;
  box-shadow: 0px 3px 6px #272d3b33;
  overflow-y: scroll;
}

.profile__main::-webkit-scrollbar {
  width: 1px;
}

.use-flex {
  display: flex;
  justify-content: space-between;
  padding: 1rem 5rem;
  padding-right: 8rem;
}

.blue__box-profile {
  margin: 0 7rem;
}

.profile-details {
  margin-left: 7rem;
}

.input__profile,
.input__profile1 {
  padding: 0.5rem 1rem;
  border-radius: 0.3rem;
  border: 1px solid #272727;
}

.input__profile::placeholder,
.input__profile1::placeholder {
  color: #a2a2a2;
}

.input__profile:focus,
.input__profile1:focus {
  outline: none;
}

.input__profile-sub > input {
  padding: 0.4rem 1rem;
}

.subs-inputs > input {
  width: 60%;
  padding: 0.4rem 1rem;
  border-radius: 0.3rem;
  border: 1px solid #272727;
}

.user-profile-img {
  position: relative;
  height: 10rem;
  width: 16rem;
  margin: 0.5rem 7rem;
  margin-top: -1rem;
  background-color: #f2f2f2;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;
}

.user-profile-photo {
  margin-top: 1.5rem;
  display: flex;
  flex-direction: column;
}

.profile-button {
  margin-top: 15rem;
  margin-left: 27rem;
}

.bottom--button {
  display: flex;
  justify-content: flex-end;
  margin-top: 5rem;
}

.profile-notification-heading {
  color: #272727;
  font-size: 1.4rem;
  font-weight: 600;
  text-transform: capitalize;
}

.profile-span {
  color: #a2a2a2;
  text-transform: capitalize;
  font-size: 1.2rem;
  line-height: 2;
}

.profile-last-sec {
  display: flex;
  justify-content: flex-end;
  margin-top: -0.2rem;
}

.focus-active-color > a:hover {
  text-decoration: none;
}

.focus-active-color > a:active,
.focus-active-color > a:focus {
  background-color: #272727;
  color: white !important;
  padding: 1rem 1rem;
  text-decoration: none;
}

.profile-user {
  height: 10rem;
  width: 16rem;
}

.contarct_Det {
  margin-top: 2rem;
}

.contarct_Det > span {
  font-weight: 600;
  text-transform: capitalize;
}

.contarct_Det > a {
  font-size: 1.1rem;
  font-weight: 700;
  cursor: pointer;
}

.change-password > input {
  width: 40%;
}

a.profile-anchor {
  text-decoration: none;
}

.displayChange {
  display: flex;
  flex-direction: column;
}

.justify {
  margin-left: 11rem;
}

.table-height {
  height: 61vh;
}

/* .table-height-patient {
  height: 62%;
  overflow: scroll;
} */

.table-height-patient::-webkit-scrollbar {
  width: 1px;
}

.patient__update {
  box-shadow: 0px 3px 6px #272d3b33 !important;
}

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

.patient__des {
  line-height: 0.1;
}

.patient-info {
  display: flex;
  justify-content: space-between;
}

.patient-info__pic {
  width: 8rem;
  box-shadow: 0px 3px 6px #272d3b33;
}

.patient-info__des {
  line-height: 0.7;
  padding: 0 0.7rem;
  font-size: 0.9rem;
}

.verticle__line,
.verticle__line1 {
  width: 1px;
  background-color: #a2a2a2;
  margin-bottom: 1rem;
}

.u__text-decurations {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.horizontal-row {
  border: 1px solid #a2a2a2;
  margin: 0 1rem;
  margin-bottom: 1rem;
}

/* .wraper-patient,
.wraper-patient1 {
  height: 69vh;
  overflow: scroll;
} */

.wraper-patient::-webkit-scrollbar,
.wraper-patient1::-webkit-scrollbar {
  width: 10px;
}

/* .shadow-whole {
  box-shadow: 0px 3px 6px #272d3b33;
} */

.Icon-rightt {
  position: absolute;
  right: 0;
  margin-right: 2rem;
}

.row2Half {
  display: flex;
  align-items: center;
  justify-content: center;
}

.Icon-right {
  position: absolute;
  right: 0;
  margin-top: 6px;
  margin-right: 2rem;
}

.table-wraper {
  box-shadow: 0px 3px 6px #272d3b33;
}

.patients__deatil {
  display: flex;
  justify-content: space-around;
}

.input__profile1 {
  width: 110% !important;
}

/* .wraper-patient1 {
  box-shadow: 0px 3px 6px #272d3b33;
  height: 74vh;
} */

.patients__deatil {
  padding: 0 !important;
  margin: 0 !important;
}

.verticle__line1 {
  padding: 0 !important;
  margin: 0 !important;
}

.mobility {
  width: 90%;
  padding: 0;
}

.patient-genral-info {
  box-shadow: 0px 3px 6px #272d3b33;
}

.patient-img {
  width: 11rem;
  height: 10rem;
  border: 1px solid #a2a2a2;
  background-image: url("../images/images (2).png");
  background-position: center;
  background-repeat: no-repeat;
}

.upoadBtn {
  object-fit: contain;
}

.btn-padding {
  padding: 0.5rem 4rem;
  margin: 1rem 0;
}

.btn-s-padding {
  padding: 0.5rem 1.3rem;
}

.Patient-inputData {
  display: flex;
  flex-direction: column;
}

.Patient-inputData > input {
  border: 1px solid #a2a2a2;
  border-radius: 5px;
  padding: 0.3rem 1rem;
}

.Patient-inputData1 {
  display: flex;
  flex-direction: row;
}

.Patient-inputData1 > input {
  border: 1px solid #a2a2a2;
  border-radius: 5px;
  padding: 0.3rem 1rem;
}

.patient__wraper {
  display: flex;
}

.patient__wraper__1 {
  display: flex;
}

.G-info-patient {
  padding-left: 3px;
  text-transform: capitalize;
  font-weight: 600;
}

.relative {
  position: relative;
}

.patient-record-wraper {
  /* height: 69vh;
  box-shadow: 0px 3px 6px #272d3b33;
  overflow-y: scroll; */
}

.patient-record-wraper::-webkit-scrollbar {
  width: 1px;
}

.trip-record-wraper-IN-Patients {
  /* height: 58vh;
  box-shadow: 0px 3px 6px #272d3b33; */
  overflow-y: scroll;
}

.trip-record-wraper-IN-Patients::-webkit-scrollbar {
  width: 1px;
}

.address-sec {
  padding-bottom: 1rem;
}

.eligibility-search__icon {
  position: relative;
}

.magnifier {
  position: absolute;
  right: 2rem;
  top: 2.2rem;
}

.heading-appointment {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: 7rem;
}

.justify-btns {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

@media (max-width: 768px) {
  .DisplayBlockInSmallScreen {
    display: none;
    background-color: red;
  }
}

@media (max-width: 768px) {
  .smallScreeenDisplay {
    display: flex !important;
    flex-direction: column !important;
  }
}

@media (max-width: 768px) {
  .smallXmagrin {
    margin: 0;
    padding: 0 0.1rem !important;
  }
}

.justifyContrnt {
  display: flex;
  justify-content: center;
  align-items: center;
}

.justifyContrnt > img {
  margin-right: 0.5rem;
}

.comentAdd > img {
  margin-right: 0.4rem;
}

@media (max-width: 768px) {
  .AdditiopnUsers > span,
  .tableTeamsRes {
    font-size: 0.8rem;
  }
}

.teamclass {
  height: 58%;
  overflow: scroll;
}

.teamclass::-webkit-scrollbar {
  width: 1px;
}

.teamclassAdditionalUser {
  height: 55%;
  overflow: scroll;
}

.teamclassAdditionalUser::-webkit-scrollbar {
  width: 1px;
}

.seperator {
  display: none;
}

@media (max-width: 768px) {
  .seperator {
    display: inline-block;
    height: 1.7rem;
  }
}

.provider-wraper {
  height: 69%;
  overflow: scroll;
}

.provider-wraper::-webkit-scrollbar {
  width: 1px;
}

.provider-wraper1 {
  height: 64%;
  overflow: scroll;
}

.provider-wraper1::-webkit-scrollbar {
  width: 1px;
}

.provider-record {
  display: flex;
  justify-content: space-between;
  box-shadow: 0px 3px 6px #272d3b33;
  border-radius: 1rem;
  margin-bottom: 1rem;
}

.provider-record:hover .black-box,
.provider-record:visited .black-box {
  background-color: #272727;
}

.provider-record__pic {
  width: 6rem;
  height: 6rem;
  padding: 5px 0;
  display: flex;
  align-items: center;
}

.provider-record__pic > img {
  width: 4rem;
  height: 4rem;
  border-radius: 100px;
  box-shadow: 0px 3px 6px #272d3b33;
}

.provider-record__company {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.provider-record__company__id {
  color: #989898;
  text-transform: capitalize;
}

.provider-record__company__actions {
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.black-box {
  width: 1rem;
  border-radius: 1rem 0 0 1rem;
}

.horizontal-line {
  width: 1px;
  background-color: #a2a2a2;
  margin: 1rem 0;
}

.provider-btn-sec {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.provider-heading {
  cursor: pointer;
}

.provider-details {
  box-shadow: 0px 3px 6px #272d3b33;
  border-radius: 0.3rem;
  display: flex;
  width: 100%;
  background-color: #ffffff;
  justify-content: space-evenly;
}

.provider-details__progress {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  color: #272727;
  cursor: pointer;
  background-color: #ffffff;
  background-position: stretch;
  padding: 0.4rem 7.8rem !important;
}

@media (max-width: 992px) {
  .provider-details__progress {
    padding: 0.4rem 6rem !important;
  }
}

@media (max-width: 768px) {
  .provider-details__progress {
    padding: 0.4rem 4rem !important;
  }
}

.provider-details__progress > span {
  font-weight: 600;
}

.provider-details__progress > b {
  color: #272727;
}

span.tick {
  display: flex;
  justify-content: center;
  align-items: center;
}

.verticle-line {
  width: 1px;
  background-color: #272727;
}

.tick {
  background-color: #e8e8e8;
  border-radius: 800px;
  color: #272727;
  width: 1rem;
  height: 1rem;
}

.provider-informations-wraper {
  height: 64vh;
  margin-top: 1.5rem;
  overflow-y: scroll;
  box-shadow: 0px 3px 6px #272d3b33;
}

.provider-informations-wraper::-webkit-scrollbar {
  width: 1px;
}

.provider-genral-info {
  margin-bottom: 1rem;
}

.add-services {
  box-shadow: 0px 3px 6px #272d3b33;
}

.sizeImg {
  color: #a2a2a2;
}

.services-added {
  line-height: 1rem;
}

.remover-service {
  background-color: #272727;
  position: relative;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 1000px;
  color: #ffffff;
  margin-right: 0.5rem;
  padding-right: 0.7rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cross {
  position: absolute;
  margin-left: 10px;
}

.justify-items {
  display: flex;
  cursor: pointer;
}

.submit-button-provider {
  display: flex;
  justify-content: center;
  align-items: center;
}

.provider-assets-btn {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.img-sec {
  box-shadow: 0px 3px 6px #272d3b33;
  width: 20rem;
  height: 15rem;
}

.upload-imge-sec,
.upload-imge-sec1 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.horizontal__line {
  height: 3px;
  background: #272727;
  background: linear-gradient(
    90deg,
    rgba(39, 39, 39, 0) 0%,
    #272727 50%,
    rgba(39, 39, 39, 0.185312) 100%,
    rgba(39, 39, 39, 0) 100%
  );
  margin: 3rem 10rem;
}

.submitbtn {
  margin-top: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.color-primary {
  background-color: #272727;
}

.color-primary > b {
  color: #ffffff;
}

@media (max-width: 768px) {
  .providerClassRes {
    font-size: 0.8rem;
  }
}

@media (max-width: 768px) {
  .svgStarsResponsive > svg {
    height: 17px;
    width: 16px;
  }
}

.guteerFroms {
  margin: auto 3rem;
}

@media (max-width: 992px) {
  .guteerFroms {
    margin: auto 2.5rem;
  }
}

.others-container {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: space-around;
}

.coments {
  margin: 1rem auto;
}

.licenceInfo {
  display: flex;
  justify-content: center;
}

.rightSidepadding {
  padding-right: 7rem;
}

.btn11 {
  margin-top: 1.6rem;
}

.descriptions {
  display: flex;
  justify-content: space-between;
  margin: auto 0.5rem;
}

.table-height-Account {
  height: 53%;
}

.Account-time {
  font-weight: 100;
  font-size: 0.8rem;
}

@media (max-width: 1200px) {
  .Account-time {
    font-size: 12px;
  }
}

@media (max-width: 992px) {
  .Account-time {
    font-size: 8px;
  }
}

.accout-Date {
  line-height: 0;
}

.btn-warning {
  color: white;
}

.btn-warning:hover {
  color: white;
}

@media (max-width: 992px) {
  .fonts-control1 {
    font-size: 0.8rem;
  }
}

.row11 {
  height: 5%;
  padding-top: 8px;
}

.row11 > a {
  color: #a2a2a2;
  text-decoration: none;
  text-transform: capitalize;
}

.row11 > a:hover {
  color: #272727;
  text-decoration: bold;
  font-weight: 700;
}

.row11 > a:focus,
.row11 > a:active {
  color: #272727;
  text-decoration: bold;
  font-weight: 700;
}

.btn-gray {
  background-color: #e8e8e8;
}

.btnBack {
  display: flex;
  justify-content: flex-end;
}

.wraper-account {
  margin: 1rem 0;
  /* height: 76vh;
  overflow: scroll; */
}

.wraper-account::-webkit-scrollbar {
  width: 1px;
}

.accountPic {
  width: 3.5rem;
  height: 3.5rem;
  box-shadow: 0px 3px 6px #272d3b33;
  border-radius: 50%;
  background-position: contain;
  background-repeat: no-repeat;
}

.Account-Des {
  display: flex;
}

.accountBox-Wraper {
  display: flex;
}

@media (max-width: 768px) {
  .accountBox-Wraper {
    display: flex;
    flex-direction: column;
  }
}

@media (max-width: 992px) {
  .accountBox-Wraper {
    display: flex;
    flex-direction: column;
  }
}

.accountBox-Wraper:not(:last-child) {
  margin-right: 1rem;
}

@media (max-width: 768px) {
  .accountBox-Wraper > a {
    margin-bottom: 0.5rem;
    padding: 1px 3px;
  }
}

@media (max-width: 992px) {
  .accountBox-Wraper > a {
    margin-bottom: 0.5rem;
    padding: 1px 3px;
  }
}

.accountBox {
  border-radius: 10px;
  padding: 7px 15px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #ffffff;
}

.ColorBlue {
  background-color: #0098e6;
  margin-right: 1rem;
}

.ColorMeg {
  background-color: #7300e6;
  margin-right: 1rem;
}

.ColorGreen {
  background-color: #00885f;
}

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

.A-Details {
  background-color: #272727;
  color: #ffffff;
  border-radius: 10px 10px 0 0;
}

.A-Details__full {
  display: flex;
  justify-content: space-between;
}

.A-Details__full__heading {
  font-weight: 700;
}

.A-Details__full__detl > span {
  display: block;
  font-size: 0.8rem;
}

.shadow-wraper {
  box-shadow: 0px 3px 6px #272d3b33;
}

.line {
  height: 2px;
  background-color: #272727;
  margin: 0 1.5rem;
}

.BtnBack-Sec {
  display: flex;
  justify-content: flex-end;
  margin: 3rem 0;
}

.TripDetails-acc {
  display: flex;
  justify-content: space-around;
}

.TripDetails-acc__pickUp {
  line-height: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 1rem auto;
}

.TripDetails-acc__pickUp > strong {
  flex-wrap: wrap;
}

.TripDetails-acc__line {
  width: 2px;
  background-color: #272727;
  margin: 1rem 0;
}

.TripDetails-astimation {
  display: flex;
  justify-content: space-between;
  box-shadow: 0px 3px 6px #272d3b33;
  margin: 1rem 2rem;
  border-radius: 10px;
  line-height: 1;
}

.TripDetails-astimation__distance {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
}

.TripDetails-astimation__time {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
}

.TripDetails-astimation__Wtime {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
}

.Additional {
  padding: 1rem 3rem;
}

.Additional__notes {
  text-transform: capitalize;
  font-weight: 600;
}

.Additional__notes > span {
  display: block;
  font-size: 0.8rem;
  font-weight: 400;
}

.switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 20px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 28px;
  width: 28px;
  left: 0;
  bottom: -3px;
  background-color: #06d295;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

input:checked + .slider {
  background-color: #00885f;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196f3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */

.slider.round {
  border-radius: 50px;
}

.slider.round:before {
  border-radius: 50%;
}

.sideBarData__a {
  display: flex;
  align-items: center;
  text-decoration: none;
  padding: -10px 10px;
  padding-left: 0;
  color: #ffffff;
}

.sideBarData__a:hover {
  color: #ffffff;
  text-decoration: none;
}

.child-icon {
  display: flex;
  padding: 0.8rem 0;
  align-self: stretch;
  color: #ffffff;
  background-color: #272727;
}

.child-icon:active,
.child-icon:hover {
  cursor: pointer;
  background-color: #ffffff;
}

.child-icon:active > a > span,
.child-icon:hover > a > span {
  color: #272727;
}

.child-icon:active #bxs-dashboard,
.child-icon:active #road,
.child-icon:active #users,
.child-icon:active #account-box,
.child-icon:active #report,
.child-icon:active #Path_3749,
.child-icon:active #admin,
.child-icon:active #Path_3716,
.child-icon:active #settings-2,
.child-icon:hover #bxs-dashboard,
.child-icon:hover #road,
.child-icon:hover #users,
.child-icon:hover #account-box,
.child-icon:hover #report,
.child-icon:hover #Path_3749,
.child-icon:hover #admin,
.child-icon:hover #Path_3716,
.child-icon:hover #settings-2 {
  fill: #272727;
}

.activeTabAfterClick {
  background-color: #ffffff;
  transition: all 3s top bottom;
}

.activeTabAfterClick > a > span {
  color: #272727;
}

.activeTabAfterClick #bxs-dashboard,
.activeTabAfterClick #road,
.activeTabAfterClick #users,
.activeTabAfterClick #account-box,
.activeTabAfterClick #report,
.activeTabAfterClick #Path_3749,
.activeTabAfterClick #admin,
.activeTabAfterClick #Path_3716,
.activeTabAfterClick #settings-2 {
  fill: #272727;
}

.parent-icon {
  padding: 0;
  position: relative;
}

.heightManager {
  height: 0.5rem;
  width: 100%;
  position: absolute;
  z-index: 1;
  color: #fff;
  background-color: #272727;
  border-radius: 0 0 10rem 0;
}

.Actionsrelative {
  position: relative;
}

.actionDrops {
  position: absolute;
  right: 4rem;
}

.dropdown-contentAction {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 15rem;
  z-index: 1;
  right: 0;
}

.dropdown-contentAction a {
  color: black;
  padding: 0.8rem 1rem;
  text-decoration: none;
  display: block;
}

.dropdown-contentAction a:hover {
  background-color: #ddd;
}

.actionDrops:hover .dropdown-contentAction {
  display: block;
}

.actionDrops:hover {
  background-color: #0b7dda;
}

.ActionsDropDownsOuter {
  display: flex;
  justify-content: space-around;
}

.editDropDown {
  margin-left: 4rem;
}

/* The Modal (background) */

.modal {
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Stay in place */
  z-index: 1000000000;
  /* Sit on top */
  padding-top: 100px;
  /* Location of the box */
  left: 0;
  top: 0;
  width: 100%;
  /* Full width */
  height: 100%;
  /* Full height */
  overflow: auto;
  /* Enable scroll if needed */
  background-color: black;
  /* Fallback color */
  background-color: rgba(0, 0, 0, 0.4);
  /* Black w/ opacity */
}

/* Modal Content */

.modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}

/* The Close Button */

.close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

.column {
  display: flex;
  justify-content: flex-end;
  position: absolute;
  right: 0;
  width: 1px;
  height: 90%;
  margin-top: 1rem;
  background-color: #000;
}

.btnsection {
  display: flex;
  justify-content: flex-end;
  margin-top: 1rem;
}

.justify-items {
  color: #272727;
  text-decoration: none;
}

.justify-items:hover {
  color: #272727;
  text-decoration: none;
}

@media (max-width: 768px) {
  .row1 {
    font-size: 0.8rem;
    padding-top: 1rem;
  }
}

@media (max-width: 965px) {
  .row4 {
    font-size: 0.8rem;
  }
}

@media (max-width: 768px) {
  .row4 {
    font-size: 0.8rem;
  }
}

@media (max-width: 768px) {
  .actions > a > img {
    height: 1.5rem;
  }
}

@media (max-width: 768px) {
  .dropdown > a > img {
    height: 1.5rem;
  }
}

.table-height-Account {
  overflow: scroll;
}

.table-height-Account::-webkit-scrollbar {
  width: 1px;
}

@media (max-width: 992px) {
  .provider-record__company__actions > img {
    height: 2rem;
    margin-right: 0.7rem !important;
  }
}

@media (max-width: 768px) {
  .provider-record__company__actions > img {
    height: 1.7rem;
  }
}

@media (max-width: 960px) {
  .sideBarModules,
  .user__des {
    display: none;
  }
}

@media (max-width: 768px) {
  .sideBarModules,
  .user__des {
    display: none;
  }
}

@media (max-width: 960px) {
  .sideBarData,
  .sideBarData__a {
    margin-left: 1.7rem !important;
  }
}

@media (max-width: 768px) {
  .sideBarData,
  .sideBarData__a {
    margin-left: 1.7rem !important;
  }
  .sideBarData:not(:last-child),
  .sideBarData__a:not(:last-child) {
    margin-bottom: 0.3rem;
  }
}

@media (max-width: 960px) {
  .User__photo__img {
    height: 3rem;
    width: 3rem;
    margin-left: 1rem;
  }
}

@media (max-width: 768px) {
  .User__photo__img {
    height: 3rem;
    width: 3rem;
    margin-left: 1rem;
  }
}

.logoImg {
  height: 8rem;
}

@media (max-width: 960px) {
  .logoImg {
    height: 4rem;
    margin-left: -2.1rem;
  }
}

@media (max-width: 768px) {
  .logoImg {
    height: 4rem;
    margin-left: -2.1rem;
  }
}

@media (min-width: 992px) {
  .sideBar__image-container {
    margin-left: 0.3rem;
  }
}

.sidenav {
  display: none;
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  overflow-x: hidden;
  transition: 0.5s;
}

.sidenav::-webkit-scrollbar {
  width: 0;
}

.sidenav a {
  text-decoration: none;
  font-size: 1.4rem;
  display: block;
  transition: 0.3s;
}

.sidenav a:hover {
  color: #f1f1f1;
}

.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 1rem;
  font-size: 2.4rem;
  margin-left: 50px;
}

@media (min-width: 770px) {
  .sidenav,
  .seperatorBox {
    visibility: hidden;
  }
}

@media (max-width: 768px) {
  .sidenav {
    width: 0;
  }
}

.drawer-img {
  height: 8rem;
}

.res-fonts {
  font-size: 1.3rem;
}

@media (max-width: 992px) {
  .header__lower__context {
    margin-left: -3.5rem;
  }
}

@media (max-width: 992px) {
  .marginX-res {
    margin: 0 2.5rem !important;
  }
}

@media (max-width: 768px) {
  .marginX-res {
    margin: 0 1rem !important;
  }
}

@media (max-width: 768px) {
  .hideOnSmall {
    display: none;
  }
}

.hideOnLarge {
  display: none;
}

@media (max-width: 768px) {
  .hideOnLarge {
    display: flex;
  }
}

@media (max-width: 768px) {
  .smPading {
    padding-left: 4rem !important;
  }
}

.bg-img {
  height: 100vh;
  background-image: url("../images/login/Artboard.png");
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fff;
}

.login-bg {
  background-color: #ffffff;
  box-shadow: 0px 3px 6px #272d3b33;
  height: 30rem;
  border-radius: 1rem;
  display: flex;
  justify-content: center;
}

.login-nav {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.login-nav__login {
  display: flex;
  align-items: center;
}

.login-nav__login > h2 {
  margin: 0 3rem;
  text-transform: uppercase;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}

.login-nav__login__bar {
  background-color: #a2a2a2;
  width: 0.2rem;
  height: 5rem;
  border-radius: 0.5rem;
}

.login-img > img {
  /* margin-top: -5rem; */
  height: 45rem;
}

.login__credentials {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 5rem 6rem;
  text-transform: uppercase;
}

.form > a {
  text-transform: capitalize;
  text-decoration: none;
  color: #a2a2a2;
  justify-content: flex-end;
}

.form > span {
  text-transform: capitalize;
  color: #a2a2a2;
  padding-top: 1rem;
  font-weight: 700;
}

.paddingCl {
  padding: 0.5rem 10rem;
}

.paddingCls {
  padding: 0.5rem 5rem;
  margin-top: 1rem;
}

.barActive {
  background-color: #272727;
}

.InActive {
  color: #a2a2a2;
}

.Active {
  color: #272727;
}

.login-nav {
  text-decoration: none;
}

.signUp-bg {
  background-color: #ffffff;
  box-shadow: 0px 3px 6px #272d3b33;
  height: 45rem;
  border-radius: 1rem;
  display: flex;
  justify-content: space-between;
}

.signUp-Bg-Width {
  width: 80%;
}

.signUp__credentials {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

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

.user-pic {
  height: 3.5rem;
  width: 3.5rem;
  border-radius: 50%;
  border: 1px solid #272727;
}

.font-color {
  color: #a2a2a2;
  font-weight: 600;
}

.bg-upload > img {
  position: absolute;
  z-index: 111;
  margin-top: -1rem;
}

.uploadImg {
  margin-top: -2rem;
  margin-left: 2rem;
}

@media (max-width: 768px) {
  .imgWidth {
    width: 95%;
  }
}

.marginS {
  margin: 5rem 8rem;
}

@media (max-width: 992px) {
  .marginS {
    margin: 5rem 1rem;
  }
}

.picSec {
  position: relative;
}

.card {
  width: 27rem;
  border: none;
  height: 17rem;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

@media (max-width: 992px) {
  .card {
    width: 23rem;
  }
}

.card h6 {
  color: #272727;
  font-size: 1.2rem;
}

.inputs input {
  width: 2.5rem;
  height: 2.5rem;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  margin: 0;
}

.card-2 {
  padding: 1rem;
  width: 20rem;
  height: 6rem;
  bottom: -3rem;
  left: 2.5rem;
  position: absolute;
  border-radius: 5px;
}

.card-2 .content {
  margin-top: 3rem;
}

.card-2 .content a {
  color: #272727;
}

.form-control:focus {
  box-shadow: none;
  border: 2px solid #272727;
}

.validate {
  border-radius: 20px;
  height: 40px;
  background-color: #272727;
  border: 1px solid #272727;
  width: 140px;
}

.borderRadius {
  border-radius: 30rem;
}

.positions {
  position: relative;
}

.fit-img-in-container {
  position: absolute;
  max-width: 100%;
  height: auto;
  transform: translate(7%, 7%);
}

.container {
  max-width: 9rem;
  padding: 1.1rem;
}

.avatar-upload {
  position: relative;
  margin-top: -1.6rem;
  margin-left: 12rem;
}

.avatar-upload .avatar-edit {
  position: absolute;
  right: -4.3rem;
  z-index: 1;
  top: 2.3rem;
}

.avatar-upload .avatar-edit input {
  display: none;
}

.avatar-upload .avatar-edit input + label {
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  margin-bottom: 0;
  border-radius: 100%;
  background: #8f7c7c;
  border: 1px solid transparent;
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.12);
  cursor: pointer;
  font-weight: normal;
  transition: all 0.2s ease-in-out;
  background-image: url(../images/login/addImg.png);
}

.avatar-upload .avatar-edit input + label:hover {
  background: #f1f1f1;
  border-color: #555454;
}

.avatar-upload .avatar-edit input + label:after {
  content: "";
  position: absolute;
  top: 0.2rem;
  left: 0;
  right: 0;
  text-align: center;
  margin: auto;
}

.avatar-upload .avatar-preview {
  width: 3.5rem;
  height: 3.5rem;
  position: relative;
  border-radius: 100%;
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
}

.avatar-upload .avatar-preview > div {
  width: auto;
  height: 100%;
  border-radius: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.payments {
  height: 100vh;
  overflow: scroll;
  background-color: #e8e8e8;
}

.payments::-webkit-scrollbar {
  width: 0;
}

.payments__top,
.payments__top-weather {
  height: 38%;
  background-color: #535353;
}

.payments__top > h4,
.payments__top-weather > h4 {
  color: #ffffff;
  text-transform: uppercase;
}

.payments__methods {
  background-color: #fff;
  margin: 0 5rem;
  margin-top: -4.5rem;
  height: 25%;
  width: 87%;
  overflow-x: scroll !important;
  border-radius: 0.5rem;
  box-shadow: 0px 3px 6px #272d3b33;
  display: flex;
  flex-direction: column !important;
  /* justify-content: space-between; */
  align-items: center;
}
.payments__methods::-webkit-scrollbar{
    height: 10px;

}
/* Track */
.payments__methods::-webkit-scrollbar-track {
    background: #f1f1f1;
  }

  /* Handle */
  .payments__methods::-webkit-scrollbar-thumb {
    background: #5c9ce5;
  }

.paymentsclass {
  margin-top: -2rem;
  height: 76vh;
}

.payemt-details {
  margin: 0 5rem;
  margin-top: 2rem;
}

.payemt-details__card {
  background-color: #fff;
  border-radius: 0.5rem;
}

.payemt-details__order {
  height: auto;
  background-color: #fff;
  border-radius: 0.5rem;
}

.card-derails {
  box-shadow: 0px 3px 6px #272d3b33;
  height: 60%;
  border-radius: 1rem;
  margin-left: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.card-derails > span {
  font-weight: 600;
  margin-left: 1rem;
}

.input-control {
  padding-top: 0.1rem;
  padding-bottom: 3rem;
}

.packege {
  display: flex;
}

.packege > span {
  line-height: 1.3rem;
  margin-left: 0.5rem;
}

.addServices {
  background-color: #f3f2f2;
  margin: 1rem 1rem;
  padding: 0.4rem 1rem;
  border-radius: 0.4rem;
}

.paddingBtn {
  padding: 0.3rem 5rem;
  border-radius: 5rem;
}

.Top-Heading-payments {
  text-transform: uppercase;
  color: #ffffff;
}

@media (max-width: 1200px) {
  .PayPall-img {
    height: 4rem;
  }
}

.trails-payment {
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.basic-method {
  color: white;
  border-radius: 0.5rem;
  background-color: #419bfc;
}

.basic-method__payment {
  display: flex;
  flex-direction: column;
}

.standard-method {
  color: white;
  border-radius: 0.5rem;
  background-color: #fc964b;
}

.premium-method {
  color: white;
  border-radius: 0.5rem;
  background-color: #9469de;
}

.lineWhite {
  width: 100%;
  border: 1px solid white;
}

.method-Heading {
  display: flex;
  justify-content: center;
  align-items: center;
}

.card-deatils-payment {
  background-color: #fff;
  border-radius: 1.5rem 1.5rem 0.5rem 0.5rem;
  margin-top: -1.5rem;
}

.margin-TopCl {
  margin-top: -4rem;
}

.margintop-minus {
  margin-top: -1.3rem;
  background-color: white;
}

.hoverBlue:hover {
  background-color: #419bfc;
  color: white;
}

.hoverWar {
  border: 1px solid #fc964b;
}

.hoverWar:hover {
  color: white;
  background-color: #fc964b;
}

.hoverMeg {
  border: 1px solid #9469de;
}

.hoverMeg:hover {
  background-color: #9469de;
  color: white;
}

.lineWhiteSm {
  width: 25%;
  margin-top: -3px;
  border-radius: 50rem;
  border: 3px solid white;
}

.mangelineSm {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.weather {
  background-color: #e4f1ff;
}

.moveback {
  margin-left: 0.5rem;
  text-transform: capitalize;
  color: #272727;
}

.payments__top-weather {
  height: 45%;
  background-color: #fff;
  background-image: url(../images/weather/backgroundCloud.png);
  background-repeat: no-repeat;
}

.weather-headings {
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

.top-icons {
  display: flex;
  justify-content: space-between;
}

.fw-1200 {
  font-weight: 600;
  font-size: 3.3rem;
  line-height: 1;
}

@media (max-width: 992px) {
  .smallScreen992 {
    width: auto;
    overflow-x: scroll;
  }
}

.wether {
  color: #272727;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.wether:hover {
  text-decoration: none;
  color: #272d3b;
}

.dFlex {
  display: flex;
  flex-direction: column;
  line-height: 0.3rem;
  margin-top: -1.3rem;
}

.Top-Heading {
  color: white;
  text-transform: capitalize;
}

.weather-update {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0 2.2rem;
  margin-top: 1rem;
  line-height: 0.5rem;
}

.vLine {
  border-left: 1px dashed #272727;
  height: 50%;
  margin-top: 1.5rem !important;
  padding-right: .5rem;
}

.weather-icon {
  width: 3rem;
}

.temp-card {
  background-color: #fff;
  border-radius: 3rem;
  margin-top: 2rem;
}

.temp-card__title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem 2rem;
}

.temp-card__title > p {
  text-transform: capitalize;
  font-weight: 700;
}

.temp-card__details {
  display: flex;
  justify-content: center;
  align-items: center;
}

.temp-card__details > p {
  margin-top: 0.5rem;
  margin-left: 0.6rem;
  font-weight: 600;
  text-transform: capitalize;
}

.marginLeft-6 {
  margin-left: 13rem;
}

@media (max-width: 768px) {
  .smallScreenmargins {
    margin: 0 4.3rem;
  }
}

@media (max-width: 992px) {
  .smallScreenNotShow {
    display: none;
  }
}

@media (max-width: 768px) {
  .onTabSmall {
    display: none;
  }
}

.progress-bar {
  border-radius: 3rem;
  background-color: #5c9ce5;
}

.progress {
  border-radius: 3rem;
}

.gauge-wrapper {
  display: inline-block;
  width: auto;
  margin: 0 auto;
  padding: 20px 15px 15px;
}

.gauge {
  background: #e7e7e7;
  box-shadow: 0 -3px 6px 2px rgba(0, 0, 0, 0.5);
  width: 200px;
  height: 100px;
  border-radius: 100px 100px 0 0 !important;
  position: relative;
  overflow: hidden;
}

.gauge.min-scaled {
  transform: scale(0.5);
}

.gauge-center {
  content: "";
  color: #fff;
  width: 60%;
  height: 60%;
  background: blue;
  border-radius: 100px 100px 0 0 !important;
  position: absolute;
  box-shadow: 0 -13px 15px -10px rgba(0, 0, 0, 0.28);
  right: 21%;
  bottom: 0;
  color: #fff;
  z-index: 10;
}

.gauge-center .label,
.gauge-center .number {
  display: block;
  width: 100%;
  text-align: center;
  border: 0 !important;
}

.gauge-center .label {
  font-size: 0.75em;
  opacity: 0.6;
  margin: 1.1em 0 0.3em 0;
}

.gauge-center .number {
  font-size: 1.2em;
}

.needle {
  width: 80px;
  height: 7px;
  background: green;
  border-bottom-left-radius: 100% !important;
  border-bottom-right-radius: 5px !important;
  border-top-left-radius: 100% !important;
  border-top-right-radius: 5px !important;
  position: absolute;
  bottom: -2px;
  left: 20px;
  transform-origin: 100% 4px;
  transform: rotate(0deg);
  box-shadow: 0 2px 2px 1px rgba(0, 0, 0, 0.38);
  display: none;
  z-index: 9;
}

.four.rischio1 .needle {
  animation: fourspeed1 2s 1 both;
  animation-delay: 1s;
  display: block;
}

.four.rischio2 .needle {
  animation: fourspeed2 2s 1 both;
  animation-delay: 1s;
  display: block;
}

.four.rischio3 .needle {
  animation: fourspeed3 2s 1 both;
  animation-delay: 1s;
  display: block;
}

.four.rischio4 .needle {
  animation: fourspeed4 2s 1 both;
  animation-delay: 1s;
  display: block;
}

.slice-colors {
  height: 100%;
}

.slice-colors .st {
  position: absolute;
  bottom: 0;
  width: 0;
  height: 0;
  border: 50px solid transparent;
}

.four .slice-colors .st.slice-item:nth-child(2) {
  border-top: 50px #7cb1eb solid;
  border-right: 50px #7cb1eb solid;
  background-color: #007bff;
}

.four .slice-colors .st.slice-item:nth-child(4) {
  left: 50%;
  border-bottom: 50px #bedcfb solid;
  border-right: 50px #bedcfb solid;
  background-color: #a4ccf8;
}

@-webkit-keyframes fourspeed1 {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(16deg);
  }
}

@-webkit-keyframes fourspeed2 {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(65deg);
  }
}

@-webkit-keyframes fourspeed3 {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(115deg);
  }
}

@-webkit-keyframes fourspeed4 {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(164deg);
  }
}

/* The Modal (background) */

.notifi-modal {
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Stay in place */
  z-index: 1;
  /* Sit on top */
  padding-top: 5rem;
  /* Location of the box */
  left: 0;
  top: 0;
  width: 100%;
  /* Full width */
  height: 100%;
  /* Full height */
  overflow: auto;
  /* Enable scroll if needed */
  background-color: black;
  /* Fallback color */
  background-color: rgba(0, 0, 0, 0.4);
  /* Black w/ opacity */
}

/* Modal Content */

.notifi-modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 1rem 2rem;
  border: 1px solid #888;
  width: 35%;
  margin-right: 12rem;
  overflow-y: auto;
}

/* The Close Button */

.close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

.notification-heding {
  margin-top: 2rem;
  display: flex;
  justify-content: space-between;
}

.notification-strong {
  font-size: 1.4rem;
}

.notification-record {
  display: flex;
  justify-content: space-between;
}

.notification-record__name {
  line-height: 1;
  margin-left: 1rem;
}

.notification-record__name > p {
  margin-top: -0.5rem;
  width: 15rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (min-width: 992px) {
  .notification-record__name > p {
    width: 11rem;
  }
}

.notification-record__time {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-end;
}

.wrapNoti {
  display: flex;
}

.circle {
  background-color: #272727;
  height: 0.7rem;
  width: 0.7rem;
  border-radius: 50%;
  margin-top: -0.7rem;
}

.notification-attachments {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #e8e8e8;
  border-radius: 1rem;
  margin: 0.5rem 3rem;
  padding: 1rem;
}

@media (max-width: 1024px) {
  .notification-attachments {
    margin: 0.5rem 1rem;
  }
}

.notification-attachments__data {
  display: flex;
}

.lineHeight-noti {
  line-height: 1px;
  margin-left: 0.5rem;
}

.audio {
  display: flex;
  justify-content: center;
}

.viewAll {
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: underline;
}

.view {
  text-decoration: none;
  color: #272727;
}

.view:hover {
  color: #272727;
}

.heightContainer {
  height: 60vh;
  overflow-y: scroll;
}

.heightContainer::-webkit-scrollbar {
  width: 2rem;
}

#role {
  width: 80%;
  border-radius: 0.3rem;
  padding: 0.1rem 0.7rem;
}

#role > option {
  background-color: #f2f2f2;
}

#role > option:hover {
  background-color: #f2f2f2;
}

/* ============================================ Working On live Server ========================= */

.inputBoxContainer {
  margin: 0.1rem 0;
  /* background-color: red; */
}

.inputBox {
  margin: 1rem 0 !important;
}

/* ================================ Upload Image =================================== */

.wrapper {
  display: flex;
  flex-direction: row;
  /* flex-wrap: wrap; */
  align-items: center;
  justify-content: center;
}

h1 {
  font-family: inherit;
  /* margin: 0 0 0.75em 0; */
  color: #397597;
  text-align: center;
}

.box {
  display: block;
  max-width: 300px;
  height: 300px;
  margin: 10px;
  background-color: white;
  border-radius: 5px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  overflow: hidden;
}

.upload-options {
  position: relative;
  height: 75px;
  background-color: #2979a7;
  cursor: pointer;
  overflow: hidden;
  text-align: center;
  /* transition: background-color ease-in-out 150ms; */
}

.upload-options:hover {
  background-color: #3596ce;
}

.upload-options input {
  width: 0.1px;
  height: 0.1px;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  z-index: -1;
}

.upload-options label {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  font-weight: 400;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
  overflow: hidden;
}

.upload-options label::after {
  content: "add";
  font-family: "Material Icons";
  position: absolute;
  font-size: 2.5rem;
  color: #e6e6e6;
  top: calc(50% - 2.5rem);
  left: calc(50% - 1.25rem);
  z-index: 0;
}

.upload-options label span {
  display: inline-block;
  width: 50%;
  height: 100%;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  vertical-align: middle;
  text-align: center;
}

.upload-options label span:hover i.material-icons {
  color: lightgray;
}

.js--image-preview {
  height: 225px;
  width: 100%;
  position: relative;
  overflow: hidden;
  background-image: url("");
  background-color: white;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

.js--image-preview::after {
  content: "photo_size_select_actual";
  font-family: "Material Icons";
  position: relative;
  font-size: 4.5em;
  color: #e6e6e6;
  top: calc(50% - 3rem);
  left: calc(50% - 2.25rem);
  z-index: 0;
}

.js--image-preview.js--no-default::after {
  display: none;
}

.js--image-preview:nth-child(2) {
  background-image: url("http://bastianandre.at/giphy.gif");
}

i.material-icons {
  transition: color 100ms ease-in-out;
  font-size: 2.25em;
  line-height: 55px;
  color: white;
  display: block;
}

.drop {
  display: block;
  position: absolute;
  background: rgba(41, 121, 167, 0.2);
  border-radius: 100%;
  transform: scale(0);
}

.animate {
  animation: ripple 0.4s linear;
}

@keyframes ripple {
  100% {
    opacity: 0;
    transform: scale(2.5);
  }
}

/* // ============================== Add provider ===========================// */

.navigationBar {
  background-color: #0277bd;
  padding: 1rem 2rem;
  text-align: center;
  color: white;
}

.licenceInfoBox {
  /* border: 1px solid grey; */
  margin: 1rem 2rem;
  border-radius: 1rem;
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16) !important;
  padding: 2rem 3rem;
  max-height: 30rem;
  overflow-y: scroll;
}

.licenceInfoBox::-webkit-scrollbar {
  width: 0;
}

.Addbtn {
  background-color: #272727;
  color: white;
  padding: 0.2rem 1rem;
  font-size: 1.5em;
  border-radius: 0.4rem;
}

.Addbtn:hover {
  background-color: #272727;
  color: white;
}

.alignment-Div {
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
}

.DataLIstClass {
  display: flex;
  justify-content: space-between;
  padding: 1rem 1rem;
}

.DataLIstClass1 {
  display: flex;
  /*  justify-content: space-between; */
  padding: 1rem 1rem;
  align-items: center;
}

.DataLIstClass1 > a {
  margin-right: 2rem;
}

.rowHorizontalMargin {
  margin: 0 4rem !important;
}

.d-flex2 {
  display: flex;
  align-items: center;
}

.BtnCenterSec {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 3rem auto;
}

.DarkBtn {
  background-color: #272722;
  color: #fff;
}

.paddingX {
  padding: 1rem 4rem !important;
  font-weight: 700;
  font-size: 2rem !important;
}

/* Provider View */

.genralInfoProvider {
  box-shadow: 0 3px 6px #2727278e;
  border-radius: 1rem;
}

.genralInfoProvider__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 1.4rem;
  background-color: #272727;
  border-radius: 1rem 1rem 0 0;
  color: #fff;
  font-size: 1.3rem;
}

.genralInfoProvider__bottom {
  padding: 1rem;
  display: flex;
  justify-content: space-between;
}

.genralInfoProvider__bottom__1 {
  height: 4.5rem;
  width: 4.5rem;
  box-shadow: 0 3px 6px #2727278e;
  border-radius: 50%;
}

.genralInfoProvider__bottom__2 {
  font-weight: 700;
}

.genralInfoProvider__bottom__4 {
  width: 2px;
  background: #272727;
  background: linear-gradient(
    94deg,
    rgba(39, 39, 39, 0) 0%,
    #272727 50%,
    rgba(39, 39, 39, 0) 100%
  );
}

.genralInfoProvider__bottom__5 {
  font-weight: 700;
  padding-left: 1rem;
}

.RateListBtn {
  background-color: #fff;
  color: #272727;
  border-radius: 2rem;
  padding: 0.2rem 2rem;
  font-size: 1.1rem;
}

.RateListBtn:hover {
  text-decoration: none;
  color: #272727;
  font-weight: 500;
}

.containerViewProvider {
  /* height: 79vh; */
  overflow-y: auto;
}
.containerViewProvider::-webkit-scrollbar {
  width: 1px;
}
.businessLicence {
  border-radius: 1rem;
  box-shadow: 0 3px 6px #2727278e;
  padding: 0.5rem 1rem;
}

.licences {
  display: flex;
  justify-content: space-between;
  margin-right: 3rem;
}

.contractContainerBox {
  box-shadow: 0 3px 6px #2727278e;
  border-radius: 0 0 1rem 1rem;
}

.contaractCopy {
  border-radius: 0 0 1rem 1rem;
  box-shadow: 0 3px 6px #2727278e;
}

.contaract-copy {
  border-radius: 1rem;
  height: 90%;
  margin: 1rem;
  box-shadow: 0 3px 6px #2727278e;
}

.contractInfo {
  display: flex;
  padding: 0.5rem 1rem 0.1rem 1rem;
}

.contractInfo__details {
  flex: 0 0 40%;
}

.contractInfo__details > span {
  font-weight: 700;
}

.contractInfo__details > p {
  padding-left: 1rem;
}

.contaractInfoBorder {
  box-shadow: 0 3px 6px #2727278e;
  border-radius: 0 0 1rem 1rem;
}

/* ========================= Rates ======================== */
.companyDeatls-rates {
  background-color: #f8f5f5;
  border-radius: 0.5rem;
  padding: 0.5rem 1rem;
  padding-top: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center !important;
}
.companyDeatls-rates__1 {
  display: flex;
  flex-direction: column;
}
.companyDeatls-rates__1 > p {
  padding-bottom: 0 !important;
  font-weight: 700;
}
.companyDeatls-rates__1 > span {
  color: #828081;
}

.ButtonsRates {
  display: flex;
  align-items: baseline;
  margin-top: 5%;
}

.RegularHours {
  background-color: #272727;
  border: 1px solid #272727;
  padding: 0.6rem 1.5rem;
  color: #fff;
  font-weight: 600;
  border-radius: 1rem 0 0 1rem;
}
.RegularHours:hover {
  text-decoration: none;
  color: #fff;
}

.NonRegularHours {
  color: #272727;
  font-weight: 600;
  padding: 0.6rem 1.5rem;
  background-color: #fff;
  border: 1px solid #272727;
  border-radius: 0 1rem 1rem 0;
}
.NonRegularHours:hover {
  text-decoration: none;
  color: #272727;
}

.regularRates {
  background-color: #fcfcfc;
  border-radius: 1rem;
  box-shadow: 0 3px 6px #2727278e;
  padding: 1rem;
}
.regularRates__inner {
  padding: 1rem 2rem;
  border: 1px solid #d6d4d4;
  border-radius: 1rem;
  background-color: #f8f5f5;
}
.regularRates__inner__top {
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  font-weight: 600;
  color: #272727;
}
.regularRates__inner__heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #9a999a;
  padding: 0.5rem 0;
}
.regularRates__inner__data {
  color: #505050;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.activeRates {
  background-color: #272727;
  color: #fff;
}
.activeRates:hover {
  background-color: #272727;
  color: #fff;
}

.InactiveRates {
  color: #272727;
  background-color: #fff;
}
.InactiveRates:hover {
  color: #272727;
  background-color: #fff;
}
.custom-btn{
    position: absolute;
    top: 21%;
    /* transform: translate(-50%); */
}

/* ==================================Vertcle Line========================== */
.LineVertical{
    width: 2px;
    height: 100%;
    background: rgb(39,39,39);
background: linear-gradient(180deg, rgba(39,39,39,0) 0%, rgba(39,39,39,1) 50%, rgba(39,39,39,0) 100%);
}


table.dataTable{
    border-collapse: collapse !important;
}



/* ============================================ */
/* Selct2 plugin css overwriting */
/* ============================================ */

.select2-container--default .select2-selection--multiple .select2-selection__choice{
    background: #272727 !important;
    color: white !important;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: #272727 !important;
    color: white !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove{
    color: white !important;
}


/* =========================== Trips ======================= */
.active-all-trips{
    background-color: #272727;
    color: #ffffff !important;
}

/* .neg-margin{
    margin-top: -.6rem !important;
} */


/* .height-patients-profile{
    height: 63vh;
    overflow-y: auto !important;
 } */

/* .table-height-admin{
    height: 60%;
    overflow-y: auto !important;
} */
/* =============================================== Live Streaming Module ============================ */
.liveStream {
    height: 64% !important;
    box-shadow: 0px 3px 6px #272d3b33;
    overflow-y: auto !important;
  }

  .Company-Record-card {
    padding: 1rem 0.7rem;
    margin: 1rem 0;
    border-radius: 1rem;
    background-color: #f2f2f2;
    color: #272727;
    padding-bottom: 0;
  }

  .logoBoxCompany {
    height: 50px;
    width: 50px;
    /* border: 1px solid #272727;
    border-radius: 50%; */
  }

  .CRC-middle > div {
    font-weight: 700;
    font-size: 1.2rem;
  }
  .CRC-middle > p,
  .CRC-right,
  .CRC-activeVehicles {
    color: #989898;
  }
  .CRC__footer-left {
    line-height: 20px;
  }
  .CRC__footer-left > p {
    font-weight: 700;
  }
  .CRC__footer-left > div {
    color: #989898;
  }

  .CRC__footer-right {
    box-shadow: 0px 3px 6px #272d3b33;
    background-color: #fff;
    padding: 0 2rem;
    max-height: 5rem;
  }

  .CRC__footer-right {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .CRC__footer-right:hover {
    text-decoration: none;
  }
  .CRC__footer-right > p {
    font-size: 1.2rem;
    font-weight: 700;
    color: #272727;
  }

  .Company-Record-card__line {
    border-top: 1px solid #272727;
  }

  .liveStreamLeftScrol {
    height: 64vh;
    overflow-y: auto;
  }
  .liveStreamMap {
    height: 64vh;
    overflow-y: auto;
    padding: 1rem 0;
  }

  /* ===================== live Streaming Tables ============ */
  .livestreamTable-Thead {
    background-color: #e3e9ef;
    display: flex;
    padding: 0.3rem 0.1rem;
    border-radius: 0.5rem;
    margin: 0.3rem 0;
  }
  .livestreamTable-Thead > div {
    flex: 0 0 25%;
    text-align: center;
    font-weight: 600;
  }
  .livestreamTable-data:nth-child(odd) {
    background-color: #e3e9ef;
  }
  .livestreamTable-data:last-child {
    margin-bottom: 1rem;
  }
  .livestreamTable-data {
    display: flex;
    padding: 0.3rem 0.1rem;
    border-radius: 0.5rem;
    margin: 0.1rem 0;
  }

  .livestreamTable-data > div {
    flex: 0 0 25%;
    text-align: center;
  }

  .activeCRC-right {
    background-color: #272727 !important;
    color: #fff !important;
  }
  .activeCRC-right > p,
  .activeCRC-right > div {
    color: #fff !important;
  }

  /* ================================reports ======================= */
.U-floatRight {
    display: flex !important;
    justify-content: flex-end !important;
    /* position: absolute; */
    margin-right: 1%;
  }
/* =========================================Post Trip inspections =========================== */
.post-trip-inspection {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.1rem 0;
  }

  .PTIL-heading {
    font-size: 2rem;
    font-weight: 600;
    color: #272727;
  }
  .PTIL-date {
    color: #272727;
  }

  .Post-trip-inspection-img-wraper {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    padding: 0.5rem 0;
  }
  .post-inspection-images {
    text-align: center;
  }
  .PI-image {
    height: 3.3rem;
    width: 3.3rem;
    border-radius: 50%;
    /* border: 1px solid #272727; */
    background-color: #f2f2f2;
  }

  /* ======================== Post Inspection Card ====================== */
  .PI-card-wraper {
    margin: 1rem 0;
    padding: 1rem;
    border-radius: 0.5rem;
  }
  .PI-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .PI-card-image {
    margin: 0.3rem 0;
    height: 50vh;
    background-color: #272727;
  }

  .bgc-white {
    background-color: #fff;
    border: 1px solid #a7a7a7;
  }
  .PI-card-caption {
    color: #a2a2a2;
  }
  .list-style-border {
    border: 1px solid #a2a2a2;
    padding: 1rem;
  }
  .list-inline-items {
    list-style: circle;
    color: #a2a2a2;
    padding: 1.1rem;
  }
  .list-inline-items > li {
    padding: 0.4rem 0;
  }
/* ================================================== Complains ================================= */
.Complaint-item:not(:last-child) {
    margin-right: 1.4rem;
}
.Complaint-item {
    color: #9E9E9E;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 1rem;
    padding-bottom: 0.5rem;
}
.Complaint-item:hover,
.Complaint-item:focus {
    text-decoration: none;
    color: #272727;
    border-bottom: 3px solid #272727;
}
.activeCompain {
    text-decoration: none;
    color: #272727;
    border-bottom: 3px solid #272727;
}
.table-height-complains {
    height: 68vh;
    overflow-y: auto;
}
/* ============================ complains Card Design ========================== */
.complains-card {
    border-radius: 1rem;
    display: flex;
}
.complains-card-bar {
    flex: 0 0 1.7%;
    border-radius: 1rem 0 0 1rem;
}
.complains-card-bar-orange {
    background-color: #FFD971;
}
.complains-card-bar-red {
    background-color: #FE595E;
}
.complains-card-patient {
    flex: 0 0 40%;
    padding: 0 1rem;
}
.complains-card-line {
    flex: 0 0 0.2%;
    margin: 1.5rem 0;
    background: rgb(39, 39, 39);
    background: linear-gradient(180deg,
            rgba(39, 39, 39, 0) 0%,
            rgba(39, 39, 39, 1) 50%,
            rgba(39, 39, 39, 0) 100%);
}
.complains-card-driver {
    flex: 0 0 45%;
    padding: 0 1rem;
}
.complains-card-status {
    flex: 1;
    text-align: center;
}
/* ========================= card patient complains==================== */
.CCP-patient-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.4rem 0;
}
.CCP-patient-middle {
    display: flex;
    /* align-items: flex-start; */
    justify-content: space-between;
    /* background-color: red; */
    padding: 0.2rem 0.5rem;
}
.CCP-userDetails-Driver {
    display: flex;
    justify-content: flex-start;
}
.containReminingWidth {
    flex: 1;
}
/* .CCP-patient-middle > div:not(:first-child) {
padding-left: 2rem;
} */
.CCP-image {
    height: 3.5rem;
    width: 3.5rem;
    border-radius: 50%;
    border: 1px solid #272727;
}
.CCP-userDetails {
    flex: 0 1 50%;
    background-color: #fff;
}
.CCP-btns {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.CCP-details {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
/* ====================== botttom==================== */
.CCP-patient-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    line-height: 1.5em;
    padding-top: 0.7rem;
}
.CCP-patient-bottom>div {
    line-height: 1.3rem;
}
/* .CCP-patient-bottom-left > p {
line-height: 1px;
} */
.Fontscolor {
    color: #A2A2A2;
}
.FontsColorBold {
    color: #272727;
    font-weight: 600;
}
.fontsizeColor {
    font-weight: 700;
    font-size: 1.3rem;
    color: #272727;
}
.ColorGreen {
    color: #0FDB88;
    font-weight: 600;
    background-color: #fff;
}
.alertBtnColor {
    background-color: #989898;
    border: 1px solid #989898;
}
/* ======================== complains End ============================== */



/* DataTable CSS */
.dataTables_wrapper
{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.dataTables_filter,
.dt-buttons{
    margin-bottom: 1rem!important;
}
.dataTables_paginate{
    position: absolute;bottom: 0;
    margin-top: 15rem !important;
    right: 0;
    bottom: -15px !important;
}
.dataTables_paginate>ul{
    margin-bottom:-1rem !important;
}
/* .dt-buttons{
    color: white;
    background: #0cc1bc;
    padding: 2px;
} */
.dt-buttons > .btn {
    position: relative !important;
    background-color: #343a40 !important;
    border: none !important;
    padding: 5px !important;
    width: 50px !important;
    text-align: center !important;
    -webkit-transition-duration: 0.4s !important;
    transition-duration: 0.4s !important;
    text-decoration: none !important;
    overflow: hidden !important;
}
.dt-buttons > .btn:hover{
    background: #fff !important;
    box-shadow: 0px 2px 6px 1px #343a40 !important;
    color: #000 !important;
}
.dataTables_filter input {
    border: 1px solid #343a40 !important;
    padding: 2px !important;
}
.dataTables_filter input:focus {
    background: #fff !important;
    box-shadow: 0px 2px 6px 1px #343a40 !important;
    color: #000 !important;
    outline: none !important;
}
.buttons-html5, .buttons-print{
    color: white;
}

.form-submit-spinner{
    display: none;
}

.time-input{
    border: 1px solid #a2a2a2;
    border-radius: 5px;
    padding: 0.3rem 1rem;
    width: 100%;
}
.select2-selection--single{
    height: 2.4rem !important;
    padding: 0.3rem !important;
}
.select2-selection__arrow{
    padding: 1.2rem !important;
}

#data-table_wrapper{
    display: block;
}

.dataTables_wrapper {
    display: block;
}

.dataTables_length select{
    width: 3.1rem !important;
    height: 2rem !important;
}


.page-nav{
    margin-right: 1rem;
    border-top: 1px solid #272727;
    padding: 1.1rem;
    border-radius: 10px 10px 0px 0px;
    color: #272727 !important;
    font-size: 16px !important;
}
.page-nav:focus{
    color: white !important;
    font-size: 16px !important;
    padding: 14px !important;
    font-weight: 600 !important;
}

.active-all-trips{
    background-color: #272727 !important;
    color: white !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover{
    color: #fff !important;
    border: 1px solid #272727 !important;
    background: #272727 !important;
    border-radius: 2rem !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover{
    border-radius: 2rem !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:active{
    color: #fff !important;
    border: 1px solid #272727 !important;
    background: #272727 !important;
    border-radius: 2rem !important;
}


.sideBarData__a:hover > i{
    color: #272727;
}
.activeTabAfterClick   i{
    color: #272727;
}


.profile-preview {
    text-align: center;
    margin-top: 5px;
    /* height: 10rem; */
    max-width: 200px;
    width: 200px;
    height: 200px;
}
.profile-preview img{
    width: 100%;
    height: 100%;
    object-fit: contain;
}


/* Multiple Images Upload With Preview */

    .remove-image {
        width: 100px;
        height: 20px;
        margin-left: -0.5rem;
        color: #fff;
        background: #94d2f8;
        border: none;
        margin-top: 1px;
        border-radius: 4px;
        transition: all 0.2s ease;
        outline: none;
        text-transform: uppercase;
  }

  .imageThumb {
      max-height: 75px;
      border: 1px solid #272727;
      padding: 1px;
      cursor: pointer;
  }

    .remove {
          padding: 0px 4px;
      display: block;
      background: #d9534f;
      border: 1px solid #d9534f;
      color: white;
      text-align: center;
      cursor: pointer;
      margin-top: 3px;
          border-radius: 5px;
      }
      .remove:hover {
      background: white;
      color: #d9534f;
    }

  .remove-image:hover {
    background: #d9534f;
    color: #ffffff;
    transition: all 0.2s ease;
    cursor: pointer;
  }

  .remove-image:active {
    border: 0;
    transition: all 0.2s ease;
  }
  .pip {
    display: inline-block;
    margin: 10px 10px 0 0;
    text-align: center;
}
/* End Multiple Images Upload With Preview */

/* Notifications */
#badge_icon_this_bell {
    padding: 0px 20px;
    text-align: center;
    vertical-align: middle;
    position: relative;
    color: #000000;
}
.badge_icon_bell:after {
    content: attr(data-content);
    position: absolute;
    background: #FFFFFF;
    height: 1.5rem;
    width: 1.5rem;
    top: 0rem;
    right: 0.5rem;
    text-align: center;
    line-height: 1.4rem;
    font-weight: bold;
    font-size: 12px;
    border-radius: 50%;
    color: #000000;
    border: 1px solid #000000;
    padding: 1px;
}
/* End Notification */