html, body {
  font-family: 'Open Sans', sans-serif;
  font-size: 13px;
  color: rgba(0, 0, 0, 0.54);
}

md-content {
  overflow: hidden;
}

md-content .main {
  padding-bottom: 20px;
}

md-content .grey {
  background-color: rgba(238, 238, 238, 1);
}

.md-dialog-container {
  /* z-index: 2000; */
}

*:focus {
  outline: none;
}

*::-webkit-scrollbar-track {
	background-color: rgba(0, 0, 0, 0.12);
}

*::-webkit-scrollbar {
	width: 10px;
  height: 10px;
}

*::-webkit-scrollbar-thumb {
	background-color: rgba(236, 0, 140, 0.66);
}

.va-signin-circular svg path {
  stroke: white;
}

/* =============== VELDWERK APP CUSTOMS =============== */

.va-margin {
  margin: 10px;
}

.va-padding {
  padding: 10px;
}

.auto-height {
  height: auto !important;
  min-height: 0 !important;
}

.auto-width {
  min-width: 0 !important;
  width: auto !important;
}

.full-height {
  height: 100% !important;
}

.fixed-height {
  height: 80%;
}

.full-width {
  width: 100% !important;
}

.no-margin {
  margin: 0 !important;
}

.margin-top {
  margin-top: 10px;
}

.margin-top-30 {
  margin-top: 30px !important;
}

.margin-bottom {
  margin-bottom: 10px !important;
}

.margin-right {
  margin-right: 10px;
}

.margin-right-80 {
  margin-right: 80px;
}

.width-50 {
  width: 50% !important;
}

.width-100 {
  width: 100% !important;
}

.height-300 {
  height: 300px;
}

.no-padding {
  padding: 0 !important;
}

.no-whiteframe .va-card-inner {
  -webkit-box-shadow: none !important;
	-moz-box-shadow: none !important;
	box-shadow: none !important;
}

.position-relative {
  position: relative !important;
}

.preserve-ws {
  white-space: -moz-pre-wrap; /* Firefox */
  white-space: -pre-wrap; /* ancient Opera */
  white-space: -o-pre-wrap; /* newer Opera */
  white-space: pre-wrap; /* Chrome; W3C standard */
  word-wrap: break-word; /* IE */
}

.inline-box {
  display: -webkit-inline-box;
}

.cut-off {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.va-auth-forgot {
  color: rgb(236, 0, 140);
  cursor: pointer;
}

.scroll-y {
  overflow-y: auto !important;
}

.va-draggable-list ul[dnd-list] {
  width: 100%;
  min-height: 42px;
  padding-left: 0px;
}

.va-draggable-listitem {
  max-width: 100% !important;
  min-width: 525px !important;
  height: auto !important;
  background: none !important;
}

.va-draggable-item {
  height: 60px;
}

.va-draggable-item.drag-cursor {
  cursor: move;
}

.va-draggable-item md-checkbox {
  margin: 0;
}

.va-draggable-item-segment {
  width: 200px;
}

.va-draggable-listitem .va-card-content {
  min-height: 150px;
}

md-dialog-content ul[dnd-list] {
  -webkit-padding-start: 0;
}

.va-draggable-list ul[dnd-list] .dndDraggingSource {
  display: none;
}

.va-draggable-listitem.dndPlaceholder {
  display: block;
  background-color: #ddd;
  max-width: 100%;
  min-width: 50%;
  min-height: 206px;
  padding: 10px;
}

.va-draggable-listitem-small.dndPlaceholder {
  display: block;
  max-width: 100%;
  min-width: 50%;
  min-height: 24px;
  padding: 10px;
}

.va-draggable-listitem-small.dndPlaceholder .va-draggable-placeholder {
  width: 100%;
  height: 100%;
  background-color: rgba(33, 150, 243, 0.2);
}

.va-draggable-placeholder {
  width: 100%;
  height: 100%;

  background-color: rgba(0, 0, 0, 0.12);
  box-shadow: 0 1px 3px 0 rgba(0,0,0,.2),
              0 1px 1px 0 rgba(0,0,0,.14),
              0 2px 1px -1px rgba(0,0,0,.12);
}

/* ===================== SIDENAV ====================== */

@media (max-width: 599px){
  .va-sidenav-large.hide-xs:not(.show-xs):not(.show),
  .va-sidenav-large.hide:not(.show-xs):not(.show) {
    display: none !important;
  }
}

.va-sidenav-large {
  width: 240px;
}

.va-sidenav-large .va-sidenav-logo {
  height: 64px;
  min-height: 64px;
  border-bottom: 2px solid rgb(0, 121, 170);
}

.va-sidenav-small .va-sidenav-logo {
  height: 56px;
  border-bottom: 2px solid rgb(0, 121, 170);
}

.va-sidenav-logo h2 {
  margin: 0;
}

.va-sidenav-logo img {
  max-height: 80%;
  margin-right: 5px;
}

.va-sidenav-small {
  width: 60px;
  max-width: 60px;
  min-width: 60px;
}

.va-sidenav-item-container {
  overflow-y: auto;
}

.va-sidenav-items{
  padding: 0;
}

.va-sidenav-item {
  border-bottom: 1px solid #d9d9d9;
}

.va-sidenav-item > .md-button {
  min-width: 0;
}

.va-sidenav-icon {
    margin: 0 !important;
    margin-right: 16px !important;
    color: rgb(236, 0, 140);
}

/* ====================== DIALOG ======================= */

.va-dialog {
  width: 80%;
  max-width: 1200px;
  max-height: 80%;
}

.va-dialog.full {
  height: 80%;
}

.va-dialog md-dialog-content {
  overflow-x: hidden;
  overflow-y: auto;
}

.va-dialog md-dialog-actions {
  border-top: 1px solid rgba(0, 121, 170, 0.33);
}

.va-dialog-options md-icon {
  cursor: pointer;
  font-size: 20px;
  line-height: 25px;
}

.va-dialog-options md-icon:hover {
  color: rgb(233, 30, 99);
}


.va-dialog-imageplaceholder {
  width: 250px;
  height: 250px;
  margin-top: 10px;
  border-width: 1px;
  border-style: solid;
  border-color: rgba(0, 0, 0, 0.12);
  border-radius: 4px;

  cursor: pointer;
}

.va-dialog-imageupload {
  width: 250px;
  height: 2500px;
  cursor: pointer;
}

.va-dialog-imageupload img {
  max-width: 100%;
  max-height: 100%;
}

.va-dialog-ticket {
  max-width: 100%;
  max-height: 100%;
}

.va-dialog-crop {
  width: 100%;
  height: 100%;

  padding: 10px;
  position: relative;
}

.va-dialog-crop-placeholder {
  width: 200px;

  text-align: center;
  cursor: pointer;
}

.va-dialog-imageupload input[type='file'],
.va-dialog-document-upload input[type='file'],
.va-dialog-crop input[type='file'] {
  width: 0px;
  height: 0px;
  opacity: 0;
}

.va-dialog-crop > canvas {
  width: 0px;
  height: 0px;
  opacity: 0;
}

.va-dialog-crop-warning {
  margin: 20px;
  padding: 10px;
  top: 20px;
  position: absolute;
  z-index: 1050;

  border-radius: 5px;
  background-color: rgb(247, 157, 153);
  text-align: center;
}

.va-dialog-document-upload {
  width: 300px;
  height: 100px;
  min-height: 100px;
  margin: 10px auto;
  padding: 10px;

  border-width: 1px;
  border-style: solid;
  border-color: rgba(0, 0, 0, 0.12);
  border-radius: 4px;

  color: rgba(0, 0, 0, 0.54);
  cursor: pointer;
}

.va-dialog-document-upload md-icon,
.va-dialog-crop md-icon {
  width: auto;
  height: auto;
  font-size: 60px;
}

.va-dialog-document-list-container {
  margin-right: 10px;
}

.va-dialog-document-list {
  width: 250px;
  min-height: 65px;
  padding: 5px;
  position: relative;
  border-bottom: 1px solid rgba(0, 121, 170, 0.33);
}

.va-dialog-document-list > .dndDragover {
  box-shadow: 0 1px 3px 0 rgba(0,0,0,.2),
              0 1px 1px 0 rgba(0,0,0,.14),
              0 2px 1px -1px rgba(0,0,0,.12);
}

.va-dialog-document-list.main {
  width: 100%;
}

.va-dialog-document-list ul[dnd-list] {
  width: 100%;
  min-height: 60px;
  padding: 0px;
  padding-top: 5px;
  margin: 0px;
}

.va-dialog-document-list ul[dnd-list] .va-subheader {
  width: 250px;
  min-height: 25px;
  margin-left: 5px;
  position: absolute;
}

.va-dialog-document-list ul[dnd-list] li {
  height: auto;
  padding: 10px;
  margin-left: 5px;
  background-color: #fff;
  display: block;

  text-align: center;

  border: 1px solid rgba(236, 0, 140, 0.33);
  border-radius: 50px;
}

.va-dialog-document-list ul[dnd-list] li.padding-top {
  padding-top: 40px;
}

.va-dialog-document-list ul[dnd-list] li:hover {
  background-color: rgba(158, 158, 158, 0.2);
}

.va-dialog-document-list ul[dnd-list] li.selected {
  background-color: rgba(33, 150, 243, 0.2);
}

.va-dialog-document-define {
  border: none;
  font-size: 13px;
  font-weight: bold;

  font-family: 'Open Sans', sans-serif;
}

.va-dialog-document-label {
  /* color: #186FAA; */
  margin-left: 5px;
  font-weight: bold;
}

.va-dialog-filters {
  width: 100%;
}

.va-dialog-list-header {
  margin-bottom: 10px;

  color: rgba(0, 0, 0, 0.54);
  font-size: 14px;
  text-transform: uppercase;
}

.va-dialog-list-noresults {
  margin-left: 30px;

  color: rgb(233, 30, 99);
  font-size: 14px;
}

/* ======================= TABS ======================== */

/* .va-tabs {
  width: 100%;
  height: 50px;
  margin: 0;

  background-color: rgb(255, 255, 255);
  border-bottom: solid 1px rgba(0, 121, 170, 0.33);
} */

.va-tabs-button {
  height: 100%;
  margin: 0;
  padding: 0;

  color: rgba(0,0,0,0.54);
  font-size: 13px;
}

.va-tabs-button.active {
  border-bottom: solid 2px rgb(0, 121, 170);

  color: rgb(236, 0, 140);
}

.va-tabs-button span {
  margin: 12px 24px;
}

.va-tabs.no-height {
  height: auto;
}

.va-tabs md-ink-bar {
  background: rgb(0, 121, 170);
  color: rgb(0, 121, 170);
}

.va-tabs md-tabs-wrapper {
  background-color: rgb(255, 255, 255);
  border-color: rgba(0, 121, 170, 0.33);
}

.va-tabs md-tab-item {
  font-size: 13px;
}

.va-tabs md-tab-item.md-active {
  color: rgb(236, 0, 140);
}

.va-tabs md-tab-content {
  width: auto;
  transition: none;
}


.va-tabs-content  {
  height: 100%;
}

/* ====================== TOOLBAR ====================== */

.va-toolbar {
  min-height: 60px;
  padding: 10px;
}

.va-toolbar-field {
  min-height: 100px;
}

.va-toolbar md-switch {
  margin: 0px;
  margin-left: 10px;
}

.va-toolbar .delete {
  background-color: 'red';
}

.va-toolbar-tools {
  padding-left: 0;
}

.va-toolbar-title,
.va-toolbar-project {
  font-size: 16px;
  font-weight: bold;
  text-transform: uppercase;
}

.va-toolbar-title.link {
  cursor: pointer;
}

.va-toolbar-link {
  margin-top: 2px;
}

.va-toolbar-icon {
  width: 26px;
}

.link:hover .va-toolbar-icon md-icon,
.link:hover .va-toolbar-link {
  color: rgb(233, 30, 99);
}

.va-toolbar-buttons {
  min-height: 45px;
}

.va-toolbar-divider {
  height: 25px;
  margin-left: 10px;
  margin-right: 10px;
}

.va-toolbar-project {
  margin-top: 2px;
}

.va-toolbar-search {
  width: 200px;
  border-bottom: 1px solid rgb(233, 30, 99);

  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
}

.va-toolbar-search md-icon {
  color: rgba(0, 0, 0, 0.54);
}

.va-toolbar-searchbox {
  height: 100%;
  width: 100%;
  padding: 2px;

  border: none;
  outline: none;
  background: transparent;

  color: rgb(0, 121, 170);
  font-size: 16px;
}

.va-toolbar-select-header .va-toolbar-select-searchbox {
  border: none;
  outline: none;
  height: 100%;
  width: 100%;
  padding: 0;
}
.va-toolbar-select .va-toolbar-select-header {
  box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.1), 0 0 0 0 rgba(0, 0, 0, 0.14), 0 0 0 0 rgba(0, 0, 0, 0.12);
  padding-left: 10.667px;
  height: 48px;
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
  width: auto;
}
.va-toolbar-select-header md-content._md {
  max-height: 240px;
}

.va-toolbar-reset {
  color: rgb(236, 0, 140);
  cursor: pointer;
  text-transform: uppercase;
}

/* ==================== TWO COLUMN ===================== */

.va-two-column {
  margin: 10px;
}

/* ==================== SUB HEADER ===================== */

.va-subheader {
  background-color: #fff;
  border-bottom: 1px solid rgba(0, 121, 170, 0.33);
  padding: 5px 10px;

  color: rgb(236, 0, 140);
  font-size: 12px;
  text-transform: uppercase
}

.va-subheader.bottom {
  height: 60px;
  border: 0;
  border-top: 1px solid rgba(0, 121, 170, 0.33);
}

.va-subheader .md-subheader-inner {
  width: 100%;
  padding: 0;
}

.va-subheader .md-subheader-content {
  height: 25px;
}

.va-double-subheader .md-subheader-content {
  height: 50px;
}

.va-subheader.card .md-subheader-content {
  height: auto;
}

.va-subheader.card .md-subheader-content button {
  float: right;
}

.va-subheader .md-subheader-content div {
  height: 100%;
  font-size: 13px;
}

.va-subheader md-icon {
  cursor: pointer;
  font-size: 20px;
  line-height: 25px;
}

.va-subheader md-icon:hover {
  color: rgb(233, 30, 99);
}

.va-subheader-button {
  padding: 10px;
  color: rgba(0, 0, 0, 0.56);

  cursor: pointer;
}

.va-subheader-button:hover {
  color: rgb(236, 0, 140);
}

.va-subheader-button.active {
  color: rgb(236, 0, 140);
}


/* ======================= CARD ======================== */

.va-card {
  height: 120px;
  max-width: 100%;
  min-width: 350px;
  padding: 10px;
  position: relative;
}

.va-card-small {
  max-width: 100%;
  height: 50px;
  padding: 10px;
}

.va-card-large {
  height: 300px;
  max-width: 100%;
  min-width: 450px;
  min-height: 300px;
  padding: 10px;
  position: relative;
}

.va-card-large.fixed-width {
  width: 300px;
}

@media(max-width: 599px) {
  .va-card-large {
    /*height: auto;*/
    min-width: 200px;
    min-height: 300px;
  }
}

.va-card-large ul {
  padding-left: 0px;
}

.va-card-select {
  width: 250px;
  height: 250px;
  min-height: 250px;
}

.va-card-select:hover .va-card-inner {
  cursor: pointer;
  box-shadow: 0 3px 5px -1px rgba(0,0,0,.2),
              0 5px 8px 0 rgba(0,0,0,.14),
              0 1px 14px 0 rgba(0,0,0,.12)
}

.va-card-inner {
  width: 100%;
  height: 100%;
  background-color: #fff;
}

.va-card-content {
  width: 100%;
  padding: 10px 10px;
}

.va-card-project {
  height: 100px;
}

.va-card-project-info {
  width: 175px;
  margin-right: 20px;
}

.va-card-project-info-header {
  height: 35px;
  margin-bottom: 20px;
}

.va-card-project-content-container,
.va-card-project-content-container .va-card-block-text {
  width: 100%;
}

.va-card-project-stats {
  width: 300px;
  margin-right: 20px;
}

.va-card-project-image {
  width: 100px;
  height: 100px;
}

.va-card-project-image img {
  max-width: 100%;
  max-height: 100%;
}

.va-card-project-graph .va-subheader-button {
  padding: 0px 10px;
}

.va-card-content-userlist {
  width: 100%;
  min-height: 50px;
}

.va-card-content-userlist .inactive md-icon:hover {
  color: rgb(236, 0, 140);
}

.va-card-content-userlist ul[dnd-list] {
  width: 100%;
  min-height: 50px;
  margin: 0;
  padding-left: 0px;
}

.va-card ul {
  -webkit-margin-before: 0;
    -webkit-margin-after: 0;
    -webkit-margin-start: 0;
    -webkit-margin-end: 0;
    -webkit-padding-start: 0;
}

.dndDragover .va-card-inner {
  box-shadow: 0 3px 5px -1px rgba(0,0,0,.2),
              0 5px 8px 0 rgba(0,0,0,.14),
              0 1px 14px 0 rgba(0,0,0,.12)
}

ul[dnd-list] li {
  height: 24px;
  background-color: #fff;
  display: block;
}

.va-card-content-userlist ul[dnd-list] li.dndPlaceholder {
  height: 0px;
  display: none;
}

.va-card-inner > .dndDragover {
  box-shadow: 0 3px 5px -1px rgba(0,0,0,.2),
              0 5px 8px 0 rgba(0,0,0,.14),
              0 1px 14px 0 rgba(0,0,0,.12)
}

md-icon.va-click {
  cursor: pointer;
}

md-icon.va-drag {
  cursor: move;
}

dnd-nodrag md-icon:hover {
  color: rgb(236, 0, 140);
}

.va-card-content-userlist ul[dnd-list] li:hover.inactive {
  background-color: #fff;
}
.va-card-content-userlist li:hover {
  color: rgba(33, 150, 243, 1);
  cursor: pointer;
}

.va-card-content-userlist li.selected {
  background-color: rgba(33, 150, 243, 0.2);
}

.va-card-block {
  min-width: 150px !important;
}

@media (max-width: 599px){
  .va-card-block {
    width: 100%;
  }
}

.va-card-block-image {
  width: 120px;
  height: 120px;
  margin: 0 auto;
}

.va-card-block-image img {
  min-width: 120px;
  max-width: 100%;
  max-height: 100%;
}

.va-card-block-image-placeholder,
.va-card-block-image-cropped {
  width: 100%;
  height: 100%;

  cursor: pointer;
}

.va-card-block-image-placeholder {
  border: 1px solid rgba(0, 121, 170, 0.33);
  border-radius: 50%;
}

.va-card-block-image-cropped img {
  border-radius: 50%;
}

.va-card-block-attachment {
  width: 100%;
  height: 120px;
  margin-bottom: 20px;

  text-align: center;
  cursor: pointer;
}

.va-card-block-attachment img {
  max-width: 100%;
  max-height: 100%;
}

.va-card-block-pdf {
  height: 100px;
  width: 100px;

  line-height: 100px;
}

.va-card-block-pdf md-icon {
  width: auto;
  height: auto;
  font-size: 48px;
}

.va-card-block-attachment-text {
  height: 20px;
  width: 100%;
}


.va-card-block-name {
  color: rgb(236, 0, 140);
  font-size: 13px;
  text-transform: uppercase;
}

.va-card-block-text {
  color: rgb(97, 97, 97);
  /*font-size: 12px;*/
  /*text-transform: uppercase;*/
}

.va-card-block-text.pink {
  color: rgb(236, 0, 140);
}

.va-card-block-text.blue {
  color: rgb(0, 121, 170);
}

.va-card-block-name.center,
.va-card-block-text.center {
  text-align: center;
}

.va-card-block-text md-icon {
  margin-right: 10px;
  font-size: 18px;
  text-align: center;
  line-height: 24px;
}

.va-card-block-progress {
  width: 120px;
  height: 120px;
  margin: 0 auto;
  position: relative;
}

.va-card-block-progress md-progress-circular {
  position: absolute;
}

.va-card-block-progress md-progress-circular:first-child {
  z-index: 10;
}

.va-card-block-progress md-progress-circular:nth-child(2) path {
  stroke: rgba(0, 0, 0, 0.12);
}

.va-card-block-remaining {
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  text-align: center;
  font-size: 24px;
  color: rgb(236, 0, 140);
}

.va-card-block-remaining span {
  font-size: 12px;
  color: rgba(0, 0, 0, 0.54);
}

.va-card-sideblock {
  width: 50px;
  height: 100%;
  margin-left: 10px;
  padding: 10px 0;
  border-left: 1px solid rgba(0, 0, 0, 0.12);
}

@media (max-width: 599px){
  .va-card-sideblock {
    width: 100%;
    height: 50px;
    margin: 10px 0 0 0;
    padding: 10px 0;
    border: none;
    border-top: 1px solid rgba(0, 0, 0, 0.12);
  }
}

.va-card-block-graph {
  height: 200px;
}

.va-card-faqquestion {
  color: rgb(236, 0, 140);
  /*text-transform: uppercase;*/
}

.va-card-faqlist {
  margin-top: 20px;
}

.va-card-faqlist ul {
  list-style-position: inside;
}

.va-card-document {
  padding: 10px 0;
  cursor: pointer;
  text-decoration: underline;
}

.va-card-document:hover {
  color: rgb(236, 0, 140);
}

.va-card-map {
  height: 300px;
}

.va-card-legend {
  padding: 5px;
}

.va-card-legend-item  {
  height: 14px;
  width: 14px;
  margin-right: 10px;
  border-radius: 50%;
}

.va-card-legend-item.blue {
  background-color: rgb(236, 0, 140);
}

.va-card-legend-item.pink {
  background-color: rgb(0,121,170);
}

/* ======================= CHAT ======================== */
.va-chat {
  width: 100%;
}

.va-chat input {
  border: none;
  outline: none;
  height: 100%;
  width: 100%;
  padding: 0;
}

.va-chat-message-date {
  text-align: center;
}

.va-chat-message-date-container {
  overflow: hidden;
}

.va-chat-message-action {
  padding: 5px;
  margin: 2px;
  border-radius: 5px;
  background-color: rgba(0, 0, 0, 0.12);
  float: left;
  clear: both;
}

.va-chat-message-left,
.va-chat-message-right {
  padding: 5px;
  margin: 2px;
  border-radius: 5px;
  background-color: rgba(0, 121, 170, 0.1);
  float: left;
  clear: both;
}

.va-chat-message-right {
  background-color: rgba(236, 0, 140, 0.1);
  float: right;
  clear: both;
}

.va-chat-message-time {
  font-size: 11px;
  color: rgba(0, 0, 0, 0.52);
}

.va-chat-userbar {
  width: 300px;
}

.va-message-center {
  width: 400px;
  height: 500px;
  bottom: 0;
  right: 0;

  z-index: 1050;
  position: absolute;
}

.va-message-center-header {
  border-bottom: 1px solid rgba(0, 121, 170, 0.33);
  padding: 5px 10px;

  color: rgb(236, 0, 140);
  font-size: 12px;
  text-transform: uppercase
}

.va-message-center-header md-icon {
  cursor: pointer;
}

.va-message-center-content {
  padding: 10px;
}

.va-message-button {
  position: relative;
}

.va-message-indicator {
  height: 15px;
  width: 15px;

  top: 5px;
  right: 5px;
  z-index: 1040;
  position: absolute;

  border-radius: 50%;
  background-color: rgb(0,121,170);

  line-height: 15px;
  font-size: 10px;
  font-weight: bold;
  color: #fff;
  text-align: center;
}

/* ====================== FILTERS ====================== */
.va-filters .va-input-container {
  width: 90%;
}

.va-filters-info {
  width: 100%;
  padding: 10px;

  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

.va-filters-info md-switch {
  margin: 0px;
}


/* ==================== PAGINATION ===================== */

.va-pagination {
  width: fit-content;
  min-width: 100%;
  height: 100% !important;
  min-height: 176px !important;
  padding: 10px;
  position: relative;
}

.va-pagination .va-card-inner {
  width: fit-content;
  position: relative;
}

.va-pagination-item {
  height: 50px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

.va-pagination-item-small {
  height: 25px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

.va-pagination-item-small:hover,
.va-pagination-item:hover {
  cursor: pointer;
  background-color: rgba(158, 158, 158, 0.2)
}

.va-pagination-item-small:last-child,
.va-pagination-item:last-child {
  border-width: 0px;
}

.va-pagination-column {
  padding: 0 5px;
  width: 125px;
  min-width: 125px;
  height: 100%;
  position: relative;

  border-right: 1px solid rgba(0, 0, 0, 0.12);
}

.va-pagination-column-medium {
  margin: 0 5px;
  width: 150px;
  min-width: 150px;
}

.va-pagination-column.truncate {
  max-width: inherit;
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  position: relative;
  line-height: 49px;
}

.va-pagination-column-large {
  width: 250px;
  min-width: 250px;
}

.va-pagination-column-double {
  width: 100%;
  height: 24px;
  position: relative;
}

.va-pagination-column-small {
  width: 75px;
  min-width: 75px !important;
}

.va-pagination-auto {
  width: auto;
  min-width: 0px;
}

.va-pagination-column-double md-icon,
.va-pagination-column-double span {
  margin: 0;
  margin-right: 10px;
}

.va-subheader .va-pagination-column {
  border: 0;
}

.va-pagination-item .va-pagination-column:last-child {
  border: 0;
}

.va-pagination-select {
  height: 100%;
  width: 30px;
  margin-top: 15px;
}

.va-pagination-page {
  width: 25px;
  font-size: 20px !important;
  color: rgba(0, 0, 0, 0.54);
}

.va-pagination-page md-icon {
  font-size: 30px;
}

.va-pagination-check-true {
  color: #4CAF50;
}

.va-pagination-check-false {
  color: #F44336;
}

.va-pagination-check-undefined {
  color: rgba(0, 0, 0, 0.32);
}

.va-pagination-action {
  z-index: 1000;
}

.va-pagination-menu {
  position: relative;
}

.va-pagination-menu button {
  z-index: 1000;
}

/* ================== VIRTUAL REPEAT =================== */

.va-repeat {
  direction: rtl;
}

.va-repeat-card {
  width: 100%;
}

.va-repeat-scroller {
  width: 100%;
  height: 100%;
  overflow-x: auto;
}

.va-repeat-card .va-card-inner {
  width: fit-content;
  min-width: 100%;
}

.va-repeat-card .va-card-inner .va-subheader {
  padding-left: 20px !important;
}

.va-repeat-select {
  height: 100%;
  width: 30px;
  margin-top: 15px;
}

.va-repeat .md-virtual-repeat-scroller {
  overflow-y: scroll;
}

.va-repeat-item {
  width: fit-content;
  min-width: 100%;
  height: 50px;
  padding: 0 10px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
  direction: ltr;
}

.va-repeat-item-small {
  height: 25px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

.va-repeat-item-small:hover,
.va-repeat-item:hover {
  cursor: pointer;
  background-color: rgba(158, 158, 158, 0.2)
}

.va-repeat-item:last-child,
.va-repeat-item-child {
  border-width: 0px;
}

.va-repeat-column {
  padding: 0 5px;
  width: 125px;
  min-width: 125px;
  height: 100%;
  position: relative;

  border-right: 1px solid rgba(0, 0, 0, 0.12);
}

.va-hard-edge {
  border-right-color: rgba(0, 121, 170, 0.33);
}

.va-repeat-column-medium {
  margin: 0 5px;
  width: 150px;
  min-width: 150px;
}

.va-repeat-column-large {
  width: 250px;
  min-width: 250px;
}

.va-repeat-column-double {
  width: 100%;
  height: 24px;
  position: relative;
}

.va-repeat-column-small {
  width: 75px;
  min-width: 75px !important;
}

.va-repeat-column.truncate {
  max-width: inherit;
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  position: relative;
  line-height: 49px;
}

.va-repeat-auto {
  width: auto;
  min-width: 0px;
}

.va-repeat-column-double md-icon,
.va-repeat-column-double span {
  margin: 0;
  margin-right: 10px;
}

.va-subheader .va-repeat-column {
  border: 0;
}

.va-subheader .va-repeat-column:hover {
  border: 0;
  cursor: pointer;
}

.va-repeat-item .va-repeat-column:last-child {
  border: 0;
}

.va-repeat-select {
  height: 100%;
  width: 30px;
  margin-top: 15px;
}

.va-repeat-check-true {
  color: #4CAF50;
}

.va-repeat-check-false {
  color: #F44336;
}

.va-repeat-check-undefined {
  color: rgba(0, 0, 0, 0.32);
}

.va-repeat-action {
  z-index: 10;
}

.va-repeat-freeze {
  font-size: 16px;
  color: rgb(236, 0, 140);
  line-height: 24px;
  text-align: right;
}

.va-repeat-menu {
  position: relative;
}

.va-repeat-menu button {
  z-index: 1000;
}

/* ======================= INPUT ======================= */

.va-input-container {
  min-width: 160px;
  margin: 0;
  margin-top: 10px;
  padding: 2px 5px;
}

.va-input-container label {
  color: rgba(0, 0, 0, 0.54);
}

.va-input-container md-radio-group {
  margin-top: 8px;
}

.va-input-container md-checkbox {
  margin-top: 8px;
}

.va-input-container md-select {
  margin-bottom: 20px;
}

.va-input-date {
  margin-top: 20px;
}

.va-input-toggle md-icon {
  cursor: pointer;
  color: rgba(0, 0, 0, 0.12)
}

.va-input-toggle md-icon:hover {
  color: rgb(236, 0, 140);
}

.va-input-toggle .selected {
  color: rgb(236, 0, 140);
}

.va-input-file button {
  float: left;
}

.va-input-file label {
  margin-left: 50px;
}

.va-input-file p {
  margin-top: 3px;
  padding-left: 50px;
}

.va-input-file input[type='file'] {
  height: 0px;
  opacity: 0;
}

.va-input-select .va-input-select-searchbox {
  border: none;
  outline: none;
  height: 100%;
  width: 100%;
  padding: 0;
}
.va-input-select .va-input-select-header {
  box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.1),
              0 0 0 0 rgba(0, 0, 0, 0.14),
              0 0 0 0 rgba(0, 0, 0, 0.12);
  padding-left: 10.667px;
  height: 48px;
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
  width: auto;
}
.va-input-select md-content._md {
  max-height: 240px;
}

.va-input-divider {
  margin-bottom: 10px;
  border-bottom: 1px solid rgba(236, 0, 140, 0.33);
}

.va-input-divider:last-child {
  border-bottom: 0px;
}

/* ======================== FAB ======================== */

.va-fab-small{
  width: 30px !important;
  height: 30px !important;
  min-height: 0;
  line-height: 30px !important;

  font-weight: bold !important;
}

.va-fab-small md-icon {
  width: auto;
  height: auto;
  min-width: 0;
  min-height: 0;
  font-size: 18px;

  color: rgba(255,255,255, 1) !important;
}

.va-fab-small.va-fab-outline:not(.active) {
  background-color: #fff;

  color: rgb(236,0,140);
}

.va-fab-small.va-fab-outline:hover md-icon,
.va-fab-small.va-fab-outline:hover {
  color: rgba(255,255,255, 1) !important;
}

.va-fab-small.va-fab-outline md-icon {
  color: rgb(236,0,140) !important;
}

.va-fab-small.va-fab-green {
  background-color: rgb(76, 175, 80) !important;
}

.va-fab-small.va-fab-green:hover {
  background-color: rgba(76, 175, 80, 0.6) !important;
}

.va-fab-small.va-fab-red {
  background-color: rgb(244, 67, 54) !important;
}


.va-fab-small.va-fab-gray {
  background-color: rgb(100, 99, 99) !important;
}

.va-fab-small.va-fab-red:hover {
background-color: rgba(244, 67, 54, 0.6) !important;
}

.va-fab-small:disabled,
.va-fab-small:disabled:hover {
  background-color: rgba(0, 0, 0, 0.54) !important;
  cursor: not-allowed;
}

/* ====================== TICKET ======================= */

.va-ticket-message {
  width: 100%;
  display: inline-table;
  margin-bottom: 10px;
}

.va-ticket-message-header {
  min-height: 20px;
  margin-bottom: 5px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);

  color: rgba(0, 0, 0, 0.66);
}

.va-ticket-message-body {
  white-space: -moz-pre-wrap; /* Firefox */
  white-space: -pre-wrap; /* ancient Opera */
  white-space: -o-pre-wrap; /* newer Opera */
  white-space: pre-wrap; /* Chrome; W3C standard */
  word-wrap: break-word; /* IE */
}

/* ====================== ACTIVITY ======================= */

.va-activity {
  width: 100%;
  height: 30px !important;
  display: inline-table;
}

.va-activity span:not(:first-child) {
  padding-left: 10px;
}

.va-activity span:not(:last-child) {
  padding-right: 10px;
  /* border-right: 1px solid rgba(0, 0, 0, 0.12); */
}

.va-activity.unread{
  font-weight: bold;
}

/* ====================== BUTTON ======================= */

.va-button {
  padding: 0 12px;
  color: rgb(236, 0, 140) !important;
}

/* ===================== RESPONSE ====================== */

.va-response {
  margin-bottom: 20px;
}

/* ==================== CONTEXTMENU ==================== */
.va-contextmenu {
  background: white;
  border-radius: 4px;
  box-shadow: 0 7px 8px -4px rgba(0, 0, 0, 0.2),
      0 13px 19px 2px rgba(0, 0, 0, 0.14),
      0 5px 24px 4px rgba(0, 0, 0, 0.12);
  width: 256px;
  position: relative;
}

.va-contextmenu-medium-inverse-top-margin {
  margin-top: -7vw;
}

.va-contextmenu-small-inverse-top-margin {
  margin-top: -1vh;
}

#va-contextmenu-assignpanel,
#va-contextmenu-importpanel,
#va-contextmenu-memberpanel,
#va-contextmenu-statuspanel {
  min-width: 256px;
  max-width: 256px;
  width: auto;
  min-height: 48px;
  max-height: 500px;
  /*left: 246px;*/
  top: 0px;
  position: absolute;
}

#va-contextmenu-assignpanel {
  z-index: 2020;
}

#va-contextmenu-memberpanel {
  z-index: 2030;
}

#va-contextmenu-assignpanel.overflow-y,
#va-contextmenu-importpanel.overflow-y,
#va-contextmenu-memberpanel.overflow-y,
#va-contextmenu-statuspanel.overflow-y {
  overflow-y: auto;
}

.va-contextmenu-item {
  align-items: center;
  cursor: pointer;
  display: flex;
  height: 48px;
  padding: 0 16px;
  position: relative;
  transition: background 0.15s linear;
  width: auto;
}

.va-contextmenu-item:hover,
.va-contextmenu-item:focus {
  background-color: rgb(238, 238, 238);
}

/* ======================== D3 ========================= */
.d3-axis path,
.d3-axis line {
  stroke: rgba(0, 121, 170, 0.33);
}

.d3-grid line {
  stroke: rgba(0, 0, 0, 0.12);
  shape-rendering: crispEdges;
}

.d3-grid path {
  stroke-width: 0;
}

.d3-highlight-rect {
  /* box-shadow: 0 1px 3px 0 rgba(0,0,0,.2),
              0 1px 1px 0 rgba(0,0,0,.14),
              0 2px 1px -1px rgba(0,0,0,.12); */
              -webkit-svg-shadow: 0 0 7px #53BE12;
}

/* ====================== LEAFLET ====================== */

.va-leaflet-container {
  position: relative;
}

.va-leaflet{
  height: 100%;
}

.leaflet-pane {
  z-index: 0;
}

.leaflet-top.leaflet-left {
  z-index: 10 !important;
}

.va-leaflet-select {
  position: absolute;
  top: 90px;
  left: 15px;
  z-index: 10 !important;
}

.va-leaflet-select-field {
  left: 5px;
}

.va-leaflet-deselect {
  position: absolute;
  top: 130px;
  left: 15px;
  z-index: 10 !important;
}

.va-leaflet-route {
  width: 300px;
  height: 100%;
  /* right: 0; */

  background-color: #fff;

  box-shadow: 0 1px 3px 0 rgba(0,0,0,.2),
              0 1px 1px 0 rgba(0,0,0,.14),
              0 2px 1px -1px rgba(0,0,0,.12);

  /* position: absolute; */
  /* z-index: 1030 !important; */
}

.va-leaflet-route-header {
  width: 100%;
  height: 48px;
  background-color: rgb(0,121,170);
}

.va-leaflet-route-header-close {
  color: #fff;
  margin-left: 10px;
  cursor: pointer;
}
.va-leaflet-route .va-card-block {
  padding: 10px;
}

.va-leaflet-route-step md-divider {
  margin-bottom: 10px;
  margin-top: 10px;
}

.va-leaflet-popup {
  width: 300px;
  height: 100px;

  position: absolute;
}

.va-leaflet-popup .va-card-inner .va-subheader {
  width: 300px;
}

.company-settings-colorlist {
  width: 200px;
}

.company-settings-color {
  width: 30px;
  height: 30px;
  border-radius: 50px;
  margin: 9px auto 0;
}

.company-details-color{
  min-width:35px;
  padding: 0 0px;
  margin: 0px 20px 0 5px;
}

.colorselector {
  left: -20px;
  top: -5px;
  min-width: 53px;
}

.colorselector:not([disabled]):hover {
    background: none;
}

.company-details-color:not([disabled]):hover {
    background: none;
}

.va-field-completed {
  position: absolute;
  margin-top: 30px;
  margin-left: 10px;
}