/* This CSS is for some classes that are not included in the Bootstrap framework. 
It is used to add some utility classes to the Bootstrap framework. 
It is not necessary to include this CSS file if you are not using the utility classes. */
/* Margin classes */
.m-0  { margin: 0px; }
.m-1  { margin: 4px; }
.m-2  { margin: 8px; }
.m-3  { margin: 12px; }
.m-4  { margin: 16px; }
.m-5  { margin: 24px; }
.m-6  { margin: 32px; }

.mt-0 { margin-top: 0px; }
.mt-1 { margin-top: 4px; }
.mt-2 { margin-top: 8px; }
.mt-3 { margin-top: 12px; }
.mt-4 { margin-top: 16px; }
.mt-5 { margin-top: 24px; }
.mt-6 { margin-top: 32px; }

.mb-0 { margin-bottom: 0px; }
.mb-1 { margin-bottom: 4px; }
.mb-2 { margin-bottom: 8px; }
.mb-3 { margin-bottom: 12px; }
.mb-4 { margin-bottom: 16px; }
.mb-5 { margin-bottom: 24px; }
.mb-6 { margin-bottom: 32px; }

.ms-0 { margin-left: 0px; }
.ms-1 { margin-left: 4px; }
.ms-2 { margin-left: 8px; }
.ms-3 { margin-left: 12px; }
.ms-4 { margin-left: 16px; }
.ms-5 { margin-left: 24px; }
.ms-6 { margin-left: 32px; }

.me-0 { margin-right: 0px; }
.me-1 { margin-right: 4px; }
.me-2 { margin-right: 8px; }
.me-3 { margin-right: 12px; }
.me-4 { margin-right: 16px; }
.me-5 { margin-right: 24px; }
.me-6 { margin-right: 32px; }

/* Padding classes */
.p-0  { padding: 0px; }
.p-1  { padding: 4px; }
.p-2  { padding: 8px; }
.p-3  { padding: 12px; }
.p-4  { padding: 16px; }
.p-5  { padding: 24px; }
.p-6  { padding: 32px; }

.pt-0 { padding-top: 0px; }
.pt-1 { padding-top: 4px; }
.pt-2 { padding-top: 8px; }
.pt-3 { padding-top: 12px; }
.pt-4 { padding-top: 16px; }
.pt-5 { padding-top: 24px; }
.pt-6 { padding-top: 32px; }

.pb-0 { padding-bottom: 0px; }
.pb-1 { padding-bottom: 4px; }
.pb-2 { padding-bottom: 8px; }
.pb-3 { padding-bottom: 12px; }
.pb-4 { padding-bottom: 16px; }
.pb-5 { padding-bottom: 24px; }
.pb-6 { padding-bottom: 32px; }

.ps-0 { padding-left: 0px; }
.ps-1 { padding-left: 4px; }
.ps-2 { padding-left: 8px; }
.ps-3 { padding-left: 12px; }
.ps-4 { padding-left: 16px; }
.ps-5 { padding-left: 24px; }
.ps-6 { padding-left: 32px; }

.pe-0 { padding-right: 0px; }
.pe-1 { padding-right: 4px; }
.pe-2 { padding-right: 8px; }
.pe-3 { padding-right: 12px; }
.pe-4 { padding-right: 16px; }
.pe-5 { padding-right: 24px; }
.pe-6 { padding-right: 32px; }

/* Auto margin */
.mx-auto { margin-left: auto; margin-right: auto; }
.my-auto { margin-top: auto; margin-bottom: auto; }

/* Horizontal & Vertical Margins */
.mx-0 { margin-left: 0px; margin-right: 0px; }
.mx-1 { margin-left: 4px; margin-right: 4px; }
.mx-2 { margin-left: 8px; margin-right: 8px; }
.mx-3 { margin-left: 12px; margin-right: 12px; }
.mx-4 { margin-left: 16px; margin-right: 16px; }
.mx-5 { margin-left: 24px; margin-right: 24px; }
.mx-6 { margin-left: 32px; }

.my-0 { margin-top: 0px; margin-bottom: 0px; }
.my-1 { margin-top: 4px; margin-bottom: 4px; }
.my-2 { margin-top: 8px; margin-bottom: 8px; }
.my-3 { margin-top: 12px; margin-bottom: 12px; }
.my-4 { margin-top: 16px; margin-bottom: 16px; }
.my-5 { margin-top: 24px; margin-bottom: 24px; }
.my-6 { margin-top: 32px; }

/* Horizontal & Vertical Padding */
.px-0 { padding-left: 0px; padding-right: 0px; }
.px-1 { padding-left: 4px; padding-right: 4px; }
.px-2 { padding-left: 8px; padding-right: 8px; }
.px-3 { padding-left: 12px; padding-right: 12px; }
.px-4 { padding-left: 16px; padding-right: 16px; }
.px-5 { padding-left: 24px; padding-right: 24px; }
.px-6 { padding-left: 32px; }

.py-0 { padding-top: 0px; padding-bottom: 0px; }
.py-1 { padding-top: 4px; padding-bottom: 4px; }
.py-2 { padding-top: 8px; padding-bottom: 8px; }
.py-3 { padding-top: 12px; padding-bottom: 12px; }
.py-4 { padding-top: 16px; padding-bottom: 16px; }
.py-5 { padding-top: 24px; padding-bottom: 24px; }
.py-6 { padding-top: 32px; }

/* display classes */
.d-none   { display: none !important; }
.d-inline { display: inline !important; }
.d-inline-block { display: inline-block !important; }
.d-block  { display: block !important; }
.d-flex   { display: flex !important; }
.d-inline-flex { display: inline-flex !important; }
.d-table  { display: table !important; }
.d-table-cell { display: table-cell !important; }
.d-table-row { display: table-row !important; }
.d-grid   { display: grid !important; }
.d-inline-grid { display: inline-grid !important; }

@media (min-width: 576px) { /* Small (sm) */
    .d-sm-none   { display: none !important; }
    .d-sm-inline { display: inline !important; }
    .d-sm-inline-block { display: inline-block !important; }
    .d-sm-block  { display: block !important; }
    .d-sm-flex   { display: flex !important; }
    .d-sm-inline-flex { display: inline-flex !important; }
    .d-sm-grid   { display: grid !important; }
  }
  
  @media (min-width: 768px) { /* Medium (md) */
    .d-md-none   { display: none !important; }
    .d-md-inline { display: inline !important; }
    .d-md-inline-block { display: inline-block !important; }
    .d-md-block  { display: block !important; }
    .d-md-flex   { display: flex !important; }
    .d-md-inline-flex { display: inline-flex !important; }
    .d-md-grid   { display: grid !important; }
  }
  
  @media (min-width: 992px) { /* Large (lg) */
    .d-lg-none   { display: none !important; }
    .d-lg-inline { display: inline !important; }
    .d-lg-inline-block { display: inline-block !important; }
    .d-lg-block  { display: block !important; }
    .d-lg-flex   { display: flex !important; }
    .d-lg-inline-flex { display: inline-flex !important; }
    .d-lg-grid   { display: grid !important; }
  }
  
  @media (min-width: 1200px) { /* Extra Large (xl) */
    .d-xl-none   { display: none !important; }
    .d-xl-inline { display: inline !important; }
    .d-xl-inline-block { display: inline-block !important; }
    .d-xl-block  { display: block !important; }
    .d-xl-flex   { display: flex !important; }
    .d-xl-inline-flex { display: inline-flex !important; }
    .d-xl-grid   { display: grid !important; }
  }