/* UTILITIES FROM BOOTSTRAP 4 */

/* NOTE: do not add !important to the base classes; it breaks the behaviour */
/* NOTE: this is not a full copy of bootstrap 4 utilities; behaviors may be different */

.d-none { display: none; }
@media (min-width: 0px) {.d-xs-none { display: none !important; }}
@media (min-width: 768px) {.d-sm-none { display: none !important; }}
@media (min-width: 992px) {.d-md-none { display: none !important; }}
@media (min-width: 1200px) {.d-lg-none { display: none !important; }}


.d-block { display: block ; }
@media (min-width: 0px) {.d-xs-block { display: block !important; }}
@media (min-width: 768px) {.d-sm-block { display: block !important; }}
@media (min-width: 992px) {.d-md-block { display: block !important; }}
@media (min-width: 1200px) {.d-lg-block { display: block !important; }}

.d-inline { display: inline ; }
@media (min-width: 0px) {.d-xs-inline { display: inline !important; }}
@media (min-width: 768px) {.d-sm-inline { display: inline !important; }}
@media (min-width: 992px) {.d-md-inline { display: inline !important; }}
@media (min-width: 1200px) {.d-lg-inline { display: inline !important; }}

.d-inline-block { display: inline-block ; }
@media (min-width: 0px)    {.d-xs-inline-block { display: inline-block !important; }}
@media (min-width: 768px)  {.d-sm-inline-block { display: inline-block !important; }}
@media (min-width: 992px)  {.d-md-inline-block { display: inline-block !important; }}
@media (min-width: 1200px) {.d-lg-inline-block { display: inline-block !important; }}


.d-flex { display: flex ; }
@media (min-width: 0px) {.d-xs-flex { display: flex !important; }}
@media (min-width: 768px) {.d-sm-flex { display: flex !important; }}
@media (min-width: 992px) {.d-md-flex { display: flex !important; }}
@media (min-width: 1200px) {.d-lg-flex { display: flex !important; }}


.m-1 { margin:  5px; }
.m-2 { margin: 10px; }
.m-3 { margin: 15px; }
.m-4 { margin: 20px; }
.m-5 { margin: 25px; }
.m-auto { margin: auto; }

.mx-1, .mr-1 { margin-right:  5px; }
.mx-2, .mr-2 { margin-right: 10px; }
.mx-3, .mr-3 { margin-right: 15px; }
.mx-4, .mr-4 { margin-right: 20px; }
.mx-5, .mr-5 { margin-right: 25px; }
.mx-auto, .mr-auto {margin-right: auto;}

.mx-1, .ml-1 { margin-left:  5px; }
.mx-2, .ml-2 { margin-left: 10px; }
.mx-3, .ml-3 { margin-left: 15px; }
.mx-4, .ml-4 { margin-left: 20px; }
.mx-5, .ml-5 { margin-left: 25px; }
.mx-auto, .ml-auto {margin-left: auto;}


.my-1, .mt-1 { margin-top:  5px; }
.my-2, .mt-2 { margin-top: 10px; }
.my-3, .mt-3 { margin-top: 15px; }
.my-4, .mt-4 { margin-top: 20px; }
.my-5, .mt-5 { margin-top: 25px; }
.my-auto, .mt-auto {margin-top: auto;}

.my-1, .mb-1 { margin-bottom:  5px; }
.my-2, .mb-2 { margin-bottom: 10px; }
.my-3, .mb-3 { margin-bottom: 15px; }
.my-4, .mb-4 { margin-bottom: 20px; }
.my-5, .mb-5 { margin-bottom: 25px; }
.my-auto, .mb-auto {margin-bottom: auto;}


.p-1 { padding:  5px; }
.p-2 { padding: 10px; }
.p-3 { padding: 15px; }
.p-4 { padding: 20px; }
.p-5 { padding: 25px; }

.px-1, .pr-1 { padding-right:  5px; }
.px-2, .pr-2 { padding-right: 10px; }
.px-3, .pr-3 { padding-right: 15px; }
.px-4, .pr-4 { padding-right: 20px; }
.px-5, .pr-5 { padding-right: 25px; }

.px-1, .pl-1 { padding-left:  5px; }
.px-2, .pl-2 { padding-left: 10px; }
.px-3, .pl-3 { padding-left: 15px; }
.px-4, .pl-4 { padding-left: 20px; }
.px-5, .pl-5 { padding-left: 25px; }


.py-1, .pt-1 { padding-top:  5px; }
.py-2, .pt-2 { padding-top: 10px; }
.py-3, .pt-3 { padding-top: 15px; }
.py-4, .pt-4 { padding-top: 20px; }
.py-5, .pt-5 { padding-top: 25px; }

.py-1, .pb-1 { padding-bottom:  5px; }
.py-2, .pb-2 { padding-bottom: 10px; }
.py-3, .pb-3 { padding-bottom: 15px; }
.py-4, .pb-4 { padding-bottom: 20px; }
.py-5, .pb-5 { padding-bottom: 25px; }


.align-items-start    { align-items: flex-start; }
.align-items-end      { align-items: flex-end; }
.align-items-center   { align-items: center; }
.align-items-baseline { align-items: baseline; }
.align-items-stretch  { align-items: stretch; }

.align-self-auto     { align-self: auto; }
.align-self-start    { align-self: flex-start; }
.align-self-end      { align-self: flex-end; }
.align-self-center   { align-self: center; }
.align-self-baseline { align-self: baseline; }
.align-self-stretch  { align-self: stretch; }

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

.flex-row            { flex-direction: row; }
.flex-column         { flex-direction: column; }
.flex-row-reverse    { flex-direction: row-reverse; }
.flex-column-reverse { flex-direction: column-reverse; }

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