/* 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 ; }


.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; }}


.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;}


.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; }


.row.justify-content-center {
    display: flex;
    justify-content: center;
}