html,
body,
#app {
  height: 100%;
  margin: 0;
  padding: 0;
  position: relative;
}

.shadow-effect {
  box-shadow: 0.3px 0.3px 1.5px 0.7px rgba(99, 99, 99, 0.3),
    0.3px 0.3px 1.5px 0.7px rgba(99, 99, 99, 0.3);
  border-start-start-radius: 0px;
  border-start-end-radius: 0px;
  border-end-start-radius: 0px;
  border-end-end-radius: 0px;
  box-sizing: border-box;
}

.centered {
  position: absolute;
  left: 50%;
  top: 50%;
}

.text-title {
  color: var(--trimble-color-blue-dark);
}

.text-overflow-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
}

.text-description {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-size: 14px;
  font-family: var(--font-family-roboto-flex);
  font-weight: 400;
}

.link-text,
.link-text-success,
.link-text-info {
  font-size: 13px;
  line-height: 10px;
  word-break: break-word;
  overflow-wrap: break-word;
  font-family: var(--font-family-calibri);
}

.link-text-success {
  color: var(--trimble-color-green);
}

.link-text-info {
  color: var(--trimble-color-blue);
}

.content-root {
  height: 100%;
  width: 100%;
  overflow-y: auto;
}

.page-breadcrumb {
  font-size: 12px;
  margin-bottom: 10px;
}

/*#region Card*/
.main-card > .ant-card-head {
  background-color: var(--white-shade-1);
}

.main-card > .ant-card-body {
  min-height: calc(100% - 70px);
}

.nested-card {
  margin: 7px 0;
}

.nested-card > .ant-card-head {
  background-color: var(--white-shade-2);
}

/*#endregion*/

/*#region Menu Items*/

.danger-menuitem {
  color: var(--trimble-color-white);
  background-color: var(--trimble-color-red);
  border-color: var(--trimble-color-red-light);
}

.danger-menuitem:hover,
.danger-menuitem:active,
.danger-menuitem:focus {
  color: var(--trimble-color-white);
  background-color: var(--trimble-color-red-light);
  border-color: var(--trimble-color-red);
}

/*#endregion*/

/*#region Grid Container*/

.grid-container {
  display: grid;
  grid-template-rows: auto;
  grid-auto-rows: auto;
  gap: 10px;
  margin-top: 10px;
}

.grid-container.four-columns {
  grid-template-columns: repeat(4, minmax(100px, 1fr));
}

.grid-container.three-columns {
  grid-template-columns: repeat(3, minmax(100px, 1fr));
}

.grid-container.two-columns {
  grid-template-columns: repeat(2, minmax(100px, 1fr));
}

.grid-container .element-card {
  background-color: var(--white-shade-5);
  box-shadow: 0.3px 0.31px 0px 1px rgba(0, 0, 0, 0.3);
  border-start-start-radius: 0px;
  border-start-end-radius: 0px;
  border-end-start-radius: 0px;
  border-end-end-radius: 0px;
  box-sizing: border-box;
  height: 100%;
}

.grid-container .element-card:hover {
  border-left: 3px solid var(--trimble-color-blue);
  box-shadow: 0.3px 0.31px 15px 1px rgba(0, 0, 0, 0.4);
}

.grid-container .element-card.transparent {
  background-color: transparent;
}

/*#endregion*/

.dialogs-error-view {
  margin: 10px 0px;
}

.full-height {
  min-height: 100%;
}

.content-full-height {
  min-height: var(--content-height);
}

.full-width {
  min-width: 100%;
}

.main-page-description {
  margin-bottom: 20px;
}

.error-dialog .ant-modal-header {
  background-color: var(--trimble-color-red);
  color: var(--trimble-color-white);
}

.error-dialog .ant-modal-header > .ant-modal-title,
.error-dialog .ant-modal-header > .ant-modal-close {
  color: var(--trimble-color-white);
}

.delete-icon {
  color: var(--trimble-color-red);
}

.delete-info-text {
  font-size: 14px;
  font-family: var(--font-family-roboto-flex);
  font-weight: 400;
}

.delete-confimation-text {
  font-size: 15px;
  font-family: var(--font-family-roboto-flex);
  font-weight: 600;
  color: var(--trimble-color-blue);
}

.delete-identifier {
  font-size: 14px;
  font-family: var(--font-family-roboto);
  font-weight: 500;
}