.uppercase { text-transform: uppercase }
.lowercase { text-transform: lowercase }
.capitalize { text-transform: capitalize }
.text-no-transform { text-transform: none }
.border { border: solid 1px; }
.black-border{ border: solid 1px black; }
.white-border{ border: solid 1px white; }

.margin-right { margin-right: 5px }
.margin-left { margin-left: 5px }
.margin-top { margin-top: 5px }
.margin-bottom { margin-bottom: 5px }

.fill { width: 100%; height: 100%; }
.fillW { width: 100%; }
.fillH { height: 100%; }

.w10 { width: 10px; }
.w20 { width: 20px; }
.w30 { width: 30px; }
.w40 { width: 40px; }
.w50 { width: 50px; }

.h10 { height: 10px; }
.h20 { height: 20px; }
.h30 { height: 30px; }
.h40 { height: 40px; }
.h50 { height: 50px; }

.padding5 { padding: 5px; }
.padding10 { padding: 10px; }
.padding15 { padding: 15px; }
.padding20 { padding: 20px; }

.relative { position: relative }
.absolute { position: absolute; top: 0; left: 0 }
.pointereventsnone { pointer-events: none }
.pointereventsauto { pointer-events: auto }

body {
font-family: 'Roboto', '-apple-system', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-smoothing: antialiased;
height: 100%;
width: 100%;
}

.row {
display: flex;
flex-flow: row;
}

.column {
    display: flex;
    flex-flow: column;
}

.items-center { align-items: center;  }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.items-between { align-items: space-between; }
.items-around { align-items: space-around; }
.items-even { align-items: space-evenly; }
.items-stretch { align-items: stretch; }

.justify-start{ justify-content: flex-start; }
.justify-end { justify-content: flex-end; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-around { justify-content: space-around; }
.justify-stretch { justify-content: stretch; }
.justify-even { justify-content: space-evenly; }

.nowrap {
    flex-wrap: nowrap;
}

.wrap { flex-wrap: wrap; }

.svtbtn {
    border: none;
    border-radius: 2px;
    cursor: pointer;
    padding: 10px;
    margin: 5px;
    outline: none;

    font-size: 12px;
    
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    background: white;
    text-decoration: none;

    display: inline-flex;
    align-items: center;
    justify-content: center;
}


.svti::after{ content: " "; white-space: pre; }

.svtbtn:hover {
    box-shadow: 0 1px 5px rgba(0,0,0,0.2), 0 2px 2px rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12);
    border: none;
    outline: none;
}


.content-start {
    align-content: flex-start;
  }
  .content-end {
    align-content: flex-end;
  }
  .content-center {
    align-content: center;
  }
  .content-between {
    align-content: space-between;
  }
  .content-around {
    align-content: space-around;
  }
  .self-start {
    align-self: flex-start;
  }
  .self-end {
    align-self: flex-end;
  }
  .self-center {
    align-self: center;
  }
  .self-baseline {
    align-self: baseline;
  }
  .self-stretch {
    align-self: stretch;
  }
  .self-grow-shrink {
      flex: 1 1 auto;
  }

::-webkit-scrollbar{
    width: 14px;
}

::-webkit-scrollbar-thumb {
    border: 4px solid rgba(0, 0, 0, 0);
    background-clip: padding-box;
    border-radius: 7px;
    -webkit-border-radius: 7px;
    background-color: rgba(0, 0, 0, 0.5);
}

.cursorPointer {
    cursor: pointer;
}

.nonSelectable {
    user-select: none;
}

.datetimeRoot > input {
    font-style: inherit;
    font-variant: inherit;
    font-weight: inherit;
    font-stretch: inherit;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
    background: inherit;
    padding-left: unset !important;
}

/* ::-webkit-scrollbar-thumb{ background-color: #CCC; } 
::-webkit-scrollbar-thumb:hover{ background-color: #0000ff; } 
::-webkit-scrollbar-track{ background-color: rgba(0,0,0,0); } 
::-webkit-scrollbar{ width: 13px; } */