/* #region - Global */ 

* {
    box-sizing: border-box;
}

/* #endregion - Global */

/* #region - Colors */

.dm-color-white {
    color: #FFF;
}

.dm-bg-color-white {
    background-color: #FFF;
}

.dm-color-black {
    color: #000;
}

.dm-bg-color-black {
    background-color: #000;
}

/* #endregion - Colors */

/* #region - Cursor */ 

.dm-pointer-events-none {
    pointer-events: none;
}

.dm-pointer {
    cursor: pointer;
}

/* #endregion - Cursor */

/* #region - Sizing */ 

.dm-width-100 {
    width: 100%;
}

.dm-max-width-2000 {
    max-width: 2000px;
}

.dm-height-100 {
    height: 100%;
}

/* #endregion - Sizing */

/* #region - Text */ 

.dm-text-left {
    text-align: left;
}

.dm-text-right {
    text-align: right;
}

.dm-text-center {
    text-align: center;
}

.dm-text-underline {
    text-decoration: underline;
}

.dm-uppercase {
    text-transform: uppercase;
}

.dm-capitalize {
     text-transform: capitalize;
}

.dm-bold {
    font-weight: bold;
}

/* #endregion - Text */

/* #region - Border */ 

.dm-border-top-bottom {
  border-top: 1px solid black;
  border-bottom: 1px solid black;
}

.dm-border-bottom {
  border-bottom: 1px solid black;
}

.dm-border-top {
  border-top: 1px solid black;
}

/* #endregion - Border */

/* #region - Spinner */ 

.dm-spinner {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.6);
    color: #FFF;
    z-index: 100000;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    display: none;
    top: 0;
}

.e-spinner-pane {
    background-color: rgba(0,0,0,0.6) !important;
    color: #FFF;
}

.e-spinner-pane .e-spinner-inner .e-spin-material {
  stroke: #FFF !important;
}

.e-spinner-pane .e-spinner-inner::after {
    content: 'Loading...';
    position: absolute;
    left: -13px;
    color: #FFF;
    margin-top: 20px;
}

.scrollable .e-dlg-content {
    padding: 0 !important;
    display: flex !important;
    flex-direction: column;
}

/* #endregion - Spinner */

/* #region - Text / Overflow Display */

.dm-overflow-hidden {
    overflow: hidden;
  }
  
  .dm-overflow-scroll {
    overflow: scroll !important;
  }
  
  .dm-overflow-y-scroll {
    overflow-y: scroll !important;
  }
  
  .dm-overflow-x-auto {
      overflow-x: auto !important;
  }
  
  .dm-overflow-y-auto {
      overflow-y: auto !important;
  }
  
  .dm-text-ellipsis {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  
  .dm-text-nowrap {
      white-space: nowrap;
  }

/* #endregion - Text / Overflow Display */

/* #region - Basic Page Setup */
#app {
    width: 100%;
    height: 100%;
    position: fixed;
    display: flex;
    flex-direction: column;
  }
  
  body {
    margin: 0;
    height: 100vh;
    width: 100vw;
    overflow-x: hidden;
  }
  
  .dm-page-container {
  /* TODO: I think we remove this */
    flex-grow: 1;
  }
  
  /* #endregion - Basic Page Setup */
  
/* #region - Position */ 

.dm-position-relative {
    position: relative;
}

.dm-position-absolute {
    position: absolute;
}

/* #endregion - Position */

/* #region - Flexbox */

.dm-flex-row {
display: flex;
flex-direction: row;
}

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

.dm-flex-wrap {
flex-wrap: wrap;
}

.dm-flex-wrap-reverse {
flex-wrap: wrap-reverse;
}

.dm-flex-grow {
flex-grow: 1;
}

.dm-align-items-center {
align-items: center;
}

.dm-align-items-flex-end {
align-items: flex-end;
}

.dm-align-items-start {
align-items: flex-start;
}

.dm-align-items-stretch {
align-items: stretch;
}

.dm-align-self-flex-end {
align-self: flex-end;
}

.dm-justify-content-flex-end {
justify-content: flex-end;
}

.dm-justify-content-space-between {
justify-content: space-between;
}

.dm-justify-content-space-evenly {
justify-content: space-evenly;
}

.dm-justify-content-space-around {
justify-content: space-around;
}

.dm-justify-content-center {
justify-content: center;
}

.dm-flex-1 {
flex: 1;
}

.dm-flex-2 {
flex: 2;
}

.dm-flex-3 {
flex: 3;
}

.dm-flex-none {
flex: none;
}

/* #endregion - Flexbox */

/* #region - Margin and Padding */

.dm-padding-0 {
    padding: 0px !important;
}

.dm-padding-xs {
    padding: 2px!important;
}

.dm-padding-sm {
    padding: 10px!important;
}

.dm-padding-md {
    padding: 20px!important;
}

.dm-padding-lg {
    padding: 50px!important;
}

.dm-padding-top-sm {
    padding-top: 10px!important;
}

.dm-padding-top-md {
    padding-top: 20px!important;
}

.dm-padding-top-lg {
    padding-top: 40px !important;
}

.dm-padding-right-sm {
    padding-right: 10px!important;
}

.dm-padding-right-md {
    padding-right: 20px!important;
}

.dm-padding-bottom-sm {
    padding-bottom: 10px!important;
}

.dm-padding-bottom-md {
    padding-bottom: 20px!important;
}

.dm-padding-left-sm {
    padding-left: 10px!important;
}

.dm-padding-left-md {
    padding-left: 20px!important;
}

.dm-padding-horizontal-sm {
    padding-left: 10px !important;
    padding-right: 10px !important;
}

.dm-padding-horizontal-md {
    padding-left: 20px !important;
    padding-right: 20px !important;
}

.dm-margin-0 {
margin: 0px!important;
}

.dm-margin-sm {
    margin: 10px!important;
}

.dm-margin-md {
    margin: 20px!important;
}

.dm-margin-top-0 {
    margin-top: 0!important;
}

.dm-margin-top-sm {
    margin-top: 10px!important;
}

.dm-margin-top-md {
    margin-top: 20px!important;
}

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

.dm-margin-right-sm {
    margin-right: 10px!important;
}

.dm-margin-right-md {
    margin-right: 20px!important;
}

.dm-margin-right-lg {
    margin-right: 30px!important;
}

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

.dm-margin-bottom-md {
    margin-bottom: 20px!important;
}

.dm-margin-bottom-lg {
    margin-bottom: 30px!important;
}

.dm-margin-left-sm {
    margin-left: 10px!important;
}

.dm-margin-left-md {
    margin-left: 20px!important;
}

/* #endregion - Margin and Padding */