doneit-web/src/style/main.scss

.v-application .overflow-auto {
    overflow: auto !important;
}
.overflow-hidden {
    overflow: hidden !important;
}
.overflow-visible {
    overflow: visible !important;
}
.overflow-x-auto {
    overflow-x: auto !important;
}
.overflow-x-hidden {
    overflow-x: hidden !important;
}
.overflow-y-auto {
    overflow-y: auto !important;
}
.overflow-y-hidden {
    overflow-y: hidden !important;
}
.d-none {
    display: none !important;
}
.d-inline {
    display: inline !important;
}
.d-inline-block {
    display: inline-block !important;
}
.d-block {
    display: block !important;
}
.d-table {
    display: table !important;
}
.d-table-row {
    display: table-row !important;
}
.d-table-cell {
    display: table-cell !important;
}
.d-flex {
    display: flex !important;
}
.d-inline-flex {
    display: inline-flex !important;
}
.float-none {
    float: none !important;
}
.float-left {
    float: left !important;
}
.float-right {
    float: right !important;
}
.flex-fill {
    flex: 1 1 auto !important;
}
.flex-row {
    flex-direction: row !important;
}
.flex-column {
    flex-direction: column !important;
}
.flex-row-reverse {
    flex-direction: row-reverse !important;
}
.flex-column-reverse {
    flex-direction: column-reverse !important;
}
.flex-grow-0 {
    flex-grow: 0 !important;
}
.flex-grow-1 {
    flex-grow: 1 !important;
}
.flex-shrink-0 {
    flex-shrink: 0 !important;
}
.flex-shrink-1 {
    flex-shrink: 1 !important;
}
.flex-wrap {
    flex-wrap: wrap !important;
}
.flex-nowrap {
    flex-wrap: nowrap !important;
}
.flex-wrap-reverse {
    flex-wrap: wrap-reverse !important;
}
.justify-start {
    justify-content: flex-start !important;
}
.justify-end {
    justify-content: flex-end !important;
}
.justify-center {
    justify-content: center !important;
}
.justify-space-between {
    justify-content: space-between !important;
}
.justify-space-around {
    justify-content: space-around !important;
}
.align-start {
    align-items: flex-start !important;
}
.align-end {
    align-items: flex-end !important;
}
.align-center {
    align-items: center !important;
}
.align-baseline {
    align-items: baseline !important;
}
.align-stretch {
    align-items: stretch !important;
}
.align-content-start {
    align-content: flex-start !important;
}
.align-content-end {
    align-content: flex-end !important;
}
.align-content-center {
    align-content: center !important;
}
.align-content-space-between {
    align-content: space-between !important;
}
.align-content-space-around {
    align-content: space-around !important;
}
.align-content-stretch {
    align-content: stretch !important;
}
.align-self-auto {
    align-self: auto !important;
}
.align-self-start {
    align-self: flex-start !important;
}
.align-self-end {
    align-self: flex-end !important;
}
.align-self-center {
    align-self: center !important;
}
.align-self-baseline {
    align-self: baseline !important;
}
.align-self-stretch {
    align-self: stretch !important;
}





.m-t-20 {
    margin-top: 20px;
}

.m-b-20 {
    margin-bottom: 20px;
}

.m-l-20 {
    margin-left: 20px;
}

.m-l-auto {
    margin-left: auto;
}

.m-r-20 {
    margin-right: 20px;
}

.m-auto {
    margin: 0 auto;
}

.pd-10 {
    padding: 10px;
    box-sizing: border-box;
}

.pd-t-20 {
    padding-top: 20px;
}

.pd-b-20 {
    padding-bottom: 20px;
}

.pd-r-20 {
    padding-right: 20px;
}

.pd-l-20 {
    padding-left: 20px;
}

.text-bold {
    font-weight: 700;
}

.text-blue {
    color: #0d89d1;
}

.text-red {
    color: #d30a0a;
}

.text-dark-blue {
    color: #061b52;
}

.text-grey {
    color: #797979;
}

.text-white {
    color: white;
}

.text-black {
    color: black;
}

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

.width-100{
    width: 100%;
}

.height-100{
    height: 100%;
}
.height-fit-content{
    height: fit-content;
}

.width-50{
    width: 50%;
}


.flex-1{
    flex: 1;
}


.flex-0{
    flex: 0;
}

// system spacing





@for $i from 0 through 10 {

    $size: $i * 5;
    
    $properties:
      "margin" "m",
      "padding" "p";
  
    @each $property, $short in $properties {
      // all directions
      .#{$short}a-#{$size} {
        #{$property}-left: #{$size}px !important; 
        #{$property}-right: #{$size}px !important;
        #{$property}-top: #{$size}px !important; 
        #{$property}-bottom: #{$size}px !important;
      }
      // top
      .#{$short}t-#{$size} {
        #{$property}-top: #{$size}px !important
      }
      // bottom
      .#{$short}b-#{$size} {
        #{$property}-bottom: #{$size}px !important
      }
      // left
      .#{$short}l-#{$size} {
        #{$property}-left: #{$size}px!important
      }
      // right
      .#{$short}r-#{$size} {
        #{$property}-right: #{$size}px!important
      }
      // left and right
      .#{$short}x-#{$size} {
        #{$property}-left: #{$size}px!important;
        #{$property}-right: #{$size}px!important;
      }
      // top and bottom
      .#{$short}y-#{$size} {
        #{$property}-top: #{$size}px !important;
        #{$property}-bottom: #{$size}px !important;
      }
  
    }
  }


  @for $i from 0 through 50 {
    .font-#{$i} {
        font-size: #{$i}px ;
    }
  }