::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-button {
  width: 0px;
  height: 0px;
}
::-webkit-scrollbar-thumb {
  background: #000000;
  border: 2px solid #ffffff;
  border-radius: 0px;
}
::-webkit-scrollbar-thumb:hover {
  background: #000000;
}
::-webkit-scrollbar-thumb:active {
  background: #000000;
}
::-webkit-scrollbar-track {
  background: #ffffff;
  border: 0px none #ffffff;
  border-radius: 0px;
}
::-webkit-scrollbar-track:hover {
  background: #eaeaea;
}
::-webkit-scrollbar-track:active {
  background: #eaeaea;
}
::-webkit-scrollbar-corner {
  background: transparent;
}

body {
  background: #EAEAEA;
  background: linear-gradient(180deg, rgba(234, 234, 234, 1) 0%, rgba(211, 211, 211, 1) 100%);
  height: 100vh;
  width: 100%;
  padding: 0;
  margin: 0;
  font-family: "Outfit", sans-serif;
}
button {
  font-family: "Outfit", sans-serif;
}
a {
  text-decoration: none;
  color: inherit;
}
input {
  font-family: "Outfit", sans-serif;
}
.left {
  float: left !important;
}
.right {
  float: right !important;
}
input:focus {
  outline: none;
}
select:focus {
  outline: none;
}
label {
  cursor: pointer;
}
#header {
  position: fixed;
  left: 70px;
  width: calc(100% - 90px);
  height: 50px;
  background: transparent;
  top: 10px;
}
#header .headerLeft {
  float: left;
}
#header #headerLeftTitle {
  font-weight: bold;
  font-size: 35px;
  line-height: 50px;
  float: left;
  margin-right: 20px;
}
#header .headerLeft .headerLeftTimeDate {
  float: left;
  opacity: 0.5;
  margin-top: 2px;
}
#header .headerLeft .headerLeftTimeDate #headerLeftDay {
  font-size: 14px;
  margin-bottom: 5px;
}
#header .headerLeft .headerLeftTimeDate #headerLeftDate {
  font-size: 25px;
  margin-top: -12px;
}
#header .headerRight {
  float: right;
}
#header .headerRight .searchContainer {
  height: 40px;
  background: white;
  width: 500px;
  border-radius: 30px;
  margin-top: 5px;
}
#header .headerRight .searchContainer #search {
  height: 40px;
  background: transparent;
  border: none;
  width: calc(100% - 120px);
  margin-left: 20px;
  margin-right: 20px;
  font-family: "Outfit", sans-serif;
  font-size: 16px;
}
#header .headerRight .searchContainer img {
  float: right;
  height: 20px;
  margin: 10px;
  margin-left: 0px;
  cursor: pointer;
}
#navigation {
  position: fixed;
  left: 0;
  top: 0;
  height: 100vh;
  width: 120px;
  background: transparent;
}
#navigation .navigationLogo {
  background: #343434;
  width: 40px;
  height: 40px;
  margin: 10px;
  overflow: auto;
  border-radius: 10px;
  cursor: pointer;
}
#navigation .navigationLogo img {
  width: 25px;
  margin-left: 7.5px;
  margin-top: 13px;
}
#navigation .navigationContainer {
  background: transparent;
  width: 40px;
  height: 40px;
  margin: 10px;
  overflow: auto;
  border-radius: 10px;
  cursor: pointer;
  overflow: hidden;
}
.navigationContainerSelected {
  background: #343434;
  width: 40px;
  height: 40px;
  margin: 10px;
  overflow: auto;
  border-radius: 10px;
  cursor: pointer;
  overflow: hidden;
}
#navigation .navigationContainerSelected img {
  width: 100%;
}
#navigation .navigationContainer:hover {
  background: #d8d8d8;
  transition: 0.5s;
}
#navigation .navigationContainer img {
  width: 70%;
  margin: 15%;
}
#content {
  position: fixed;
  height: 100vh;
  left: 250px;
  top: 0;
  width: calc(100% - 250px);
  overflow-y: scroll;
  background: white;
  border-left: solid 1px #eaeaea;
}
#content .contentHeader {
  height: 75px;
}
.adminCategoryGrid {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  padding: 20px;
  gap: 20px;
}
.adminCategoryContainer {
  padding: 20px;
  font-size: 14px;
  border-radius: 10px;
  cursor: pointer;
  border: solid 1px grey;
}
.adminCategoryContainer:hover {
  background: #eaeaea;
}
.adminCategoryContainer .adminCategoryContainerTitle {
  font-weight: bold;
  font-size: 20px;
  border-bottom: solid 1px grey;
  padding-bottom: 10px;
  margin-bottom: 10px;
}

.modalHeader {
  height: 50px;
  background: #023047;
  color: white;
  font-weight: bold;
  line-height: 50px;
  padding-left: 20px;
  padding-right: 20px;
  font-size: 18px;
}
.dataLocationBar {
  height: 50px;
  background: #eaeaea;
}
.dataLocationBarLocation {
  height: 50px;
  float: left;
  padding-left: 10px;
  padding-right: 10px;
  line-height: 50px;
  cursor: pointer;
}
.dataLocationBarLocation:hover {
  background: grey;
  color: white;
}
#dataContent {
  height: calc(100vh - 165px);
}
#dataList {
  height: calc(100vh - 190px);
  background: red;
  width: calc(100% / 2);
  float: left;
  overflow-y: scroll;
}
#dataInd {
  height: calc(100vh - 190px);
  background: red;
  width: calc(100% / 2);
  float: right;
}
.dataLocationList {
  height: calc(100vh - 210px);
  width: calc(50% - 30px);
  margin-left: 20px;
  margin-top: 20px;
  float: left;
  border: solid 1px grey;
  border-radius: 10px;
  overflow: hidden;
}
.noData {
  background: white;
  padding: 20px;
  border-radius: 10px;
  margin: 20px;
  text-align: center;
  color: #f2a5a0;
  border: dashed 2px #f2a5a0;
}
.dataLocationListHeader {
  height: 50px;
  background: #eaeaea;
  line-height: 50px;
  overflow: auto;
  overflow-y: hidden;
  padding-left: 10px;
  padding-right: 10px;
}
.dataLocationListContent {
  height: calc(100vh - 260px);
  overflow-y: scroll;
}
.dataLocationListHeader img {
  height: 30px;
  margin-top: 10px;
  cursor: pointer;
}
.dataLocationData {
  cursor: pointer;
  margin: 20px;
  padding: 20px;
  border-radius: 10px;
  background: #eaeaea;
  overflow: auto;
}
.dataLocationData:hover {
  background: #eaeaea;
  transition: 0.5s;
}
#dataListInd {
  height: calc(100vh - 210px);
  width: calc(50% - 30px);
  margin-right: 20px;
  margin-top: 20px;
  float: right;
  border: solid 1px grey;
  border-radius: 10px;
  overflow: hidden;
}
.dataHeader {
  height: 50px;
  background: #eaeaea;
  padding-left: 10px;
  padding-right: 10px;
  line-height: 50px;

}
.dataHeaderDelete {
  float: right;
  height: 30px;
  margin: 10px;
  margin-left: 0px;
  margin-right: 0px;
  cursor: pointer;
}
.dataInner {
  height: calc(100vh - 280px);
  overflow-y: scroll;
}
.inputContainer {
  padding: 20px;
  padding-bottom: 0px;
  overflow: auto;
  width: calc(100% - 40px);
  overflow-x: hidden;
}
.inputContainer .title {
  font-weight: bold;
  font-size: 14px;
}
.inputContainer .input {
  border: none;
  border-bottom: solid 1px #eaeeea;
  height: 30px;
  width: 100%;
  font-family: "Outfit", sans-serif;
  font-size: 16px;
}
.halfLeft {
  float: left;
  width: calc(50% - 10px);
}
.halfRight {
  float: right;
  width: calc(50% - 10px);
}
#notification {
  position: fixed;
  top: 20px;
  height: 30px;
  background: green;
  line-height: 30px;
  color: white;
  font-weight: bold;
  font-size: 14px;
  padding-left: 10px;
  padding-right: 10px;
  border-radius: 15px;
  text-shadow: 1px 1px 1px #000000;
  z-index: 10000;
  display: none;
}
.adminLayoutGrid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  height: calc(100vh - 165px);
  gap: 20px;
  padding: 20px;
}
.adminLayoutGridInner {
  border: solid 1px grey;
  border-radius: 10px;
  height: calc(100vh - 210px);
  overflow-y: scroll;
}
.newLayout {
  height: 30px;
  line-height: 30px;
  text-align: center;
  color: #023047;
  margin-left: 20px;
  margin-right: 20px;
  font-weight: 500;
  border-radius: 10px;
  margin-top: 10px;
  cursor: pointer;
  border: dashed 1px #023047;
  display: none;
  clear: both;
}
.newLayoutIcon {
  text-align: center;
  height: 30px;
  font-weight: bold;
  font-size: 14px;
  line-height: 30px;
  color: grey;
}
.newLayoutOptions {
  height: 30px;
  line-height: 30px;
  padding-left: 10px;
  padding-right: 10px;
}
.newLayoutDataType {
  width: calc(100% - 50px);
  float: left;
  height: 30px;
  border: none;
  font-family: "Outfit", sans-serif;
}
.newLayoutDataCheck {
  height: 20px;
  margin: 5px;
  float: right;
}
.layoutInputContainer {

}
.modalInner {
  height: calc(100vh - 50px);
  overflow-y: scroll;
}
.layoutInput {
float: left;
width: calc(100% - 30px);
}
.layoutInputOptions {
  float: right;
  width: 15px;
}
.layoutInputIcon {
  width: 15px;
  cursor: pointer;
}
#userModalLeft {
  float: left;
  width: calc(50% - 30px);
  height: calc(100vh - 155px);
  border: solid 1px grey;
  margin: 20px;
  margin-right: 0px;
  border-radius: 10px;
  overflow: hidden;
}
#userModalRight {
  float: right;
  width: calc(50% - 30px);
  height: calc(100vh - 155px);
  border: solid 1px grey;
  margin: 20px;
  margin-left: 0px;
  border-radius: 10px;
  overflow-y: hidden;
}
.userModalLeftHeader {
  height: 50px;
  background: #eaeaea;
  line-height: 50px;
  padding-left: 20px;
  padding-right: 0px;
  font-weight: bold;
}
.userRow {
  overflow: auto;
  cursor: pointer;
}
.userRow:hover {
  background: #eaeaea;
  transition: 0.2s;
}
.userModalInner {
  height: calc(100vh - 50px);
  overflow-y: scroll;
}
.halfWidthLeft {
  width: calc(50% - 30px);
  padding-right: 0px;
  float: left;
}
.halfWidthRight {
  width: calc(50% - 30px);
  padding-left: 0px;
  float: right;
}
.userLeft {
  float: left;
  width: calc(50% - 10px);
}
.userRight {
  float: right;
  width: calc(50% - 10px);
}
.navigationAvatar {
  width: 40px;
  height: 40px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.inputContainer .subtitle {
  font-size: 13px;
  opacity: 0.5;
  margin-left: 10px;
}
.listHeader {
  height: 50px;
  background: grey;
  line-height: 50px;
  color: white;
  font-weight: bold;
  font-size: 16px;
  padding-left: 10px;
  padding-right: 10px;
}
.listHeaderInd {
  float: left;
  width: auto;
}
.listInner {
  height: calc(100vh - 120px);
  overflow-y: scroll;
}
.listTable {
  width: calc(100%);
  float: left;
  border-collapse: collapse;
}
.listRow {
  height: 50px;
  cursor: pointer;
}
.listRow:hover {
  background: #eaeaea;
  transition: 0.2s;
}
.listHeaderSettings {
  height: 30px;
  margin: 10px;
  float: right;
  cursor: pointer;
}
#listView {
  background: grey;
  position: fixed;
  width: 300px;
  top: 120px;
  right: 20px;
  z-index: 1000;
  color: white;
  display: none;
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: 10px;
  border-bottom-left-radius: 10px;
}
.listViewRow {
  height: 30px;
  line-height: 30px;
}
.listViewRow img {
  float: right;
  height: 20px;
  margin-top: 5px;
  margin-left: 5px;
  cursor: pointer;
}
#addToView {
  width: calc(100% - 30px);
  height: 30px;
  color: white;
  background: transparent;
  border: none;
  border-bottom: solid 1px white;
  font-family: "Outfit", sans-serif;
}
#addToView option {
  background: grey;
  color: white;
}
.addToViewCheck {
  height: 20px;
  float: right;
  margin-top: 5px;
  cursor: pointer;
}

.nav {
  height: 100vh;
  width: 250px;
  background: #ffffff;
  font-family: "Outfit", sans-serif;
}
.navHeader {
  height: 70px;
  border-bottom: solid 1px #eaeaea;
}
.navHeaderLogoImage {
  height: 40px;
  margin: 15px;
}
.serviceGroup {
  margin-bottom: 10px;
}
.serviceGroup:last-child {
  margin-bottom: 0px;
}
.serviceGroupHeader {
  height: 40px;
  padding-left: 15px;
  padding-right: 15px;
  line-height: 40px;
  font-weight: bold;
  width: calc(100% - 30px);
  overflow: hidden;
  cursor: pointer;
}
.serviceGroupHeaderChevron {
  height: 20px;
  margin-top: 10px;
  opacity: 0.5;
  display: none;
}
.serviceGroupHeaderIcon {
  height: 30px;
  margin-top: 5px;
  float: left;
  margin-right: 5px;
}
.serviceGroupChild {
  margin-left: 20px;
  padding-left: 10px;
  padding-right: 15px;
  height: 30px;
  line-height: 30px;
  opacity: 0.5;
  cursor: pointer;
  border-radius: 10px;
}
.serviceGroupChildSelected {
  margin-left: 20px;
  margin-right: 10px;
  padding-left: 10px;
  padding-right: 15px;
  height: 30px;
  line-height: 30px;
  opacity: 0.5;
  cursor: pointer;
  background: red;
  border-radius: 5px;
  background: #bad1f7;
}
.serviceGroupChildIcon {
  height: 20px;
  margin-top: 5px;
  float: left;
  margin-right: 5px;

}
.serviceGroupChild:hover {
  padding-left: 20px;
  transition: 0.5s;
}
.recordContainer {
  padding: 20px;
  background: white;
  margin: 20px;
  border-radius: 10px;
  cursor: pointer;
  display: grid;
}
.listFieldTitle {
  font-weight: bold;
}
.options {
  background: #DCE8FB;
  height: 100vh;
  width: 245px;
  position: fixed;
  top: 0;
  left: 250px;
  display: none;
}
.serviceGroupHeaderAvatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  float: left;
  margin-right: 5px;
  margin-top: 5px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
.serviceGroupContainer {
  height: calc(100vh - 75px);
  overflow-y: scroll;
}
#modal {
  position: fixed;
  right: 0;
  top: 0;
  width: calc((100% - 500px) / 2);
  height: 100vh;
  background: white;
  z-index: 1000;
  -webkit-box-shadow: 0px 0px 3px 1px rgba(0,0,0,0.5);
  box-shadow: 0px 0px 3px 1px rgba(0,0,0,0.5);
  opacity: 0;
}
#submodal {
  position: fixed;
  right: calc((100% - 500px) / 2);
  top: 0;
  width: calc((100% - 500px) / 2);
  height: 100vh;
  background: white;
  z-index: 999;
  -webkit-box-shadow: 0px 0px 3px 1px rgba(0,0,0,0.5);
  box-shadow: 0px 0px 3px 1px rgba(0,0,0,0.5);
  opacity: 0;
}
#modalBG {
  background: #bad1f7;
  z-index: 998;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100vh;
  opacity: 0.5;
  display: none;
}
.reverseContainer {
  margin: 20px;
  padding: 20px;
  background: #eaeaea;
  border-radius: 10px;
  cursor: pointer;
  display: grid;
}
.submodalHeader {
  height: 50px;
  background: #343434;
  color: white;
  font-weight: bold;
  line-height: 50px;
  padding-left: 20px;
  padding-right: 20px;
  font-size: 18px;
}
.headerButton {
  background: white;
  height: 30px;
  margin: 10px;
  color: #023047;
  border: none;
  float: right;
  font-size: 16px;
  padding-left: 5px;
  padding-right: 5px;
  font-family: "Outfit", sans-serif;
  border-radius: 5px;
  cursor: pointer;
}
.optionBar {
  height: 50px;
  border: solid 0px #eaeaea;
  border-radius: 5px;
  margin: 20px;
}
#contentContainer {
  height: calc(100vh - 115px);
  margin: 20px;
  margin-top: 0px;
  border: solid 1px #eaeaea;
  border-radius: 5px;
  overflow: hidden;
}
.contentTable {
  max-height: calc(100vh - 115px);
  overflow-y: scroll;
  border-collapse: collapse;
  width: 100%;
}
.contentTable thead {
  position: sticky;
  background: #023047;
  color: white;
  height: 50px;
  font-weight: bold;
}
.contentTable tbody tr {
  height: 50px;
  cursor: pointer;
}
.contentTable tbody tr:hover {
  background: #eaeaea;
  transition: 0.2s;
}
.optionButton {
  background: #023047;
  height: 50px;
  margin-right: 10px;
  float: left;
  color: white;
  border: none;
  border-radius: 5px;
  font-family: "Outfit", sans-serif;
  font-size: 16px;
  cursor: pointer;
  font-weight: bold;
  padding-left: 20px;
  padding-right: 20px;
}
.serviceSelector {
  padding: 20px;
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 20px;
}
.serviceContainer {
  border: solid 3px #eaeaea;
  background: white;
  padding: 20px;
  text-align: center;
  cursor: pointer;
  border-radius: 5px;
}
.serviceContainerSelected {
  border: solid 3px #023047;
  background: white;
  padding: 20px;
  text-align: center;
  cursor: pointer;
  border-radius: 5px;
}
.serviceContainer:hover {
  background: #eaeaea;
  transition: .2s;
}
.serviceContainerSelected:hover {
  background: #eaeaea;
  transition: .2s;
}
.scIcon {
  height: 50px;
  margin: 0 auto;
}
.scTitle {
  font-weight: bold;
  font-size: 14px;
}
.scDescription {
  font-size: 12px;
  color: grey;
}
.blueButton {
  height: 30px;
  background: #023047;
  color: white;
  border: none;
  cursor: pointer;
  border-radius: 5px;
}

.adminUserAvatar {
  height: 150px;
  width: 150px;
  cursor: pointer;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 50%;
  margin-top: 10px;
}
.modalWarning {
  margin: 20px;
  margin-bottom: 0px;
  padding: 20px;
  background: #910b01;
  border-radius: 5px;
  color: white;
}
.layoutDataContainer {
  overflow: auto;
}
.layoutDataContainerLeft {
  width: calc(100%);
  float: left;
}
.layoutDataContainerRight {
  float: right;
  width: 15px;
  padding-top: 10px;
  margin-right: 10px;
}
.layoutDataContainerRight img {
  width: 100%;
  cursor: pointer;
}
.loginContainer {
  width: 70%;
  height: 70vh;
  background: white;
  position: fixed;
  left: 15%;
  top: 15vh;
  border-radius: 5px;
  overflow: hidden;
}
.loginContainer .loginContainerImage {
  width: 50%;
  height: 70vh;
  float: left;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
.loginContainer .loginContainerForm {
  width: 50%;
  height: 70vh;
  background: white;
  float: right;
  text-align: center;
}
.loginFormInner {
  margin: 50px;
}
.loginFormInner img {
  width: 50%;
}
.demoInputLeft {
  float: left;
  width: calc(100% - 30px);
}
.demoInputRight {
  float: right;
  width: calc(15px);
}
.demoInputRight img {
  width: 100%;
  cursor: pointer;
}
.menuGroup {
  margin: 20px;
  overflow: auto;
}
.menuGroupHeader {
  background: #023047;
  color: white;
  padding-left: 10px;
  padding-right: 10px;
  float: left;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  overflow: auto;
  height: 30px;
  line-height: 32px;
  font-weight: bold;
  text-transform: uppercase;
  font-size: 12px;
  overflow: hidden;
}
.menuGroupInner {
  border: solid 2px #023047;
  border-radius: 5px;
  border-top-left-radius: 0px;
  padding-bottom: 10px;
  margin-top: 30px;
  overflow: auto;
}
.optionButton img {
  height: 15px;
  margin-right: 5px;
}
.viewFieldContainer {
  margin: 20px;
  margin-bottom: 0px;
  background: #eaeaea;
  border-radius: 10px;
  overflow: auto;
  padding: 20px;
}
.viewFieldInfo {
  float: left;
  width: calc(100% - 40px);
}
.viewFieldType {
  float: right;
  text-align: right;
}
.viewFieldTitle {
  float: left;
}
.viewFieldOptions {
  float: right;
  width: 15px;
  margin-top: -5px;
  margin-bottom: -10px;
}
.viewFieldOptions img {
  width: 100%;
  cursor: pointer;
}