/* =====================================================
  Utility CSS
  - Single purpose classes
  - No layout / no component dependency
===================================================== */

/* ------------------------------
  Margin
------------------------------ */
/* top */
.u-mt0  { margin-top: 0 !important; }
.u-mt5  { margin-top: 5px !important; }
.u-mt10 { margin-top: 10px !important; }
.u-mt20 { margin-top: 20px !important; }
.u-mt30 { margin-top: 30px !important; }
.u-mt40 { margin-top: 40px !important; }

/* bottom */
.u-mb0  { margin-bottom: 0 !important; }
.u-mb5  { margin-bottom: 5px !important; }
.u-mb10 { margin-bottom: 10px !important; }
.u-mb20 { margin-bottom: 20px !important; }
.u-mb30 { margin-bottom: 30px !important; }
.u-mb40 { margin-bottom: 40px !important; }

/* ------------------------------
  Padding
------------------------------ */
/* top */
.u-pt0  { padding-top: 0 !important; }
.u-pt10 { padding-top: 10px !important; }
.u-pt20 { padding-top: 20px !important; }
.u-pt30 { padding-top: 30px !important; }

/* bottom */
.u-pb0  { padding-bottom: 0 !important; }
.u-pb10 { padding-bottom: 10px !important; }
.u-pb20 { padding-bottom: 20px !important; }
.u-pb30 { padding-bottom: 30px !important; }

/* ------------------------------
  Text
------------------------------ */
.u-text-center { text-align: center !important; }
.u-text-left   { text-align: left !important; }
.u-text-right  { text-align: right !important; }

.u-text-bold   { font-weight: bold !important; }
.u-text-small  { font-size: 0.875rem !important; }

/* ------------------------------
  Display
------------------------------ */
.u-block { display: block !important; }
.u-inline { display: inline !important; }
.u-inline-block { display: inline-block !important; }

/* ------------------------------
  Visibility
------------------------------ */
.u-hidden { display: none !important; }

@media screen and (max-width: 768px) {
  .u-hidden-sp { display: none !important; }
}

@media screen and (min-width: 769px) {
  .u-hidden-pc { display: none !important; }
}

/* ------------------------------
  Width
------------------------------ */
.u-w100 { width: 100% !important; }

/* ------------------------------
  Image
------------------------------ */
.u-img-responsive {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ------------------------------
  Link
------------------------------ */
.u-link-underline {
  text-decoration: underline !important;
}