/*
================================================================
utility.css for mi store site
Aug. 2019
================================================================
*/



/*
----------------------------------------------------------------
font 
----------------------------------------------------------------
*/

/* 
----------------
heading 
----------------
*/

.h { font-weight: bold; letter-spacing: .05rem;}

.h.h1,
.h.h1 * { font-size: 40px !important; }

.h.h2,
.h.h2 * { font-size: 35px !important; }

.h.h3,
.h.h3 * { font-size: 30px !important; }

.h.h4,
.h.h4 * { font-size: 25px !important; }

.h.h5,
.h.h5 * { font-size: 20px !important; }

.h.h6,
.h.h6 * { font-size: 15px !important; }

.h i
{
	font-style: normal;
	font-weight: normal;
	font-size: 1rem;
	letter-spacing: 0;
}

/* 
----------------
pragraph
----------------
*/

.text p {}

.font-sm,
.font-small { font-size: 1.3rem;}

.font-lg,
.font-large { font-size: 1.8rem;}

.font-xl {font-size: 2.2rem;}

.font-10, .font-10 > * { font-size: 10px !important;}
.font-12, .font-12 > * { font-size: 12px !important;}
.font-14, .font-14 > * { font-size: 14px !important;}
.font-16, .font-16 > * { font-size: 16px !important;}
.font-18, .font-18 > * { font-size: 18px !important;}
.font-20, .font-20 > * { font-size: 20px !important;}
.font-22, .font-22 > * { font-size: 22px !important;}
.font-24, .font-24 > * { font-size: 24px !important;}
.font-26, .font-26 > * { font-size: 26px !important;}
.font-28, .font-28 > * { font-size: 28px !important;}
.font-30, .font-30 > * { font-size: 30px !important;}

/*
----------------
font weight
----------------
*/

.font-thin,
.font-thin * { font-weight: 100 !important;}

.font-light,
.font-light * { font-weight: 300 !important;}

.font-normal,
.font-normal * { font-weight: 400 !important;}

.font-bold,
.font-bold * { font-weight: 700 !important;}

.font-black,
.font-black * { font-weight: 900 !important;}

.font-lighter,
.font-lighter * { font-weight: lighter !important;}

.font-bolder,
.font-bolder * { font-weight: bolder !important;}

/*
----------------
letter space
----------------
*/

.letter-sp-01,
.letter-sp-01 * { letter-spacing: 1px;}

.letter-sp-02,
.letter-sp-02 * { letter-spacing: 2px;}

.letter-sp-03,
.letter-sp-03 * { letter-spacing: 3px;}

/*
----------------
line height
----------------
*/
.lh-100 { line-height: 1.0;}
.lh-110 { line-height: 1.1;}
.lh-120 { line-height: 1.2;}
.lh-130 { line-height: 1.3;}
.lh-140 { line-height: 1.4;}
.lh-150 { line-height: 1.5;}
.lh-160 { line-height: 1.6;}
.lh-170 { line-height: 1.7;}
.lh-180 { line-height: 1.8;}
.lh-190 { line-height: 1.9;}
.lh-200 { line-height: 2.0;}

/*
----------------------------------------------------------------
box spacing
----------------------------------------------------------------
*/


.m-auto { margin: auto !important; }
.mt-auto, .my-auto { margin-top: auto !important; }
.mr-auto, .mx-auto { margin-right: auto !important; }
.mb-auto, .my-auto { margin-bottom: auto !important; }
.ml-auto, .mx-auto { margin-left: auto !important; }


/* spacing */
.m-00, .m-00 * { margin: 0 !important;}
.m-05 { margin: 5px !important;}
.m-10 { margin: 10px !important;}
.m-15 { margin: 15px !important;}
.m-20 { margin: 20px !important;}
.m-25 { margin: 25px !important;}
.m-30 { margin: 30px !important;}
.m-40 { margin: 40px !important;}
.m-50 { margin: 50px !important;}
.m-60 { margin: 60px !important;}

.mt-00, .mt-00 * { margin-top: 0 !important;}
.mt-05 { margin-top: 5px !important;}
.mt-10 { margin-top: 10px !important;}
.mt-15 { margin-top: 15px !important;}
.mt-20 { margin-top: 20px !important;}
.mt-25 { margin-top: 25px !important;}
.mt-30 { margin-top: 30px !important;}
.mt-40 { margin-top: 40px !important;}
.mt-50 { margin-top: 50px !important;}
.mt-60 { margin-top: 60px !important;}

.mb-00, .mb-00 * { margin-bottom: 0 !important;}
.mb-05 { margin-bottom: 5px !important;}
.mb-10 { margin-bottom: 10px !important;}
.mb-15 { margin-bottom: 15px !important;}
.mb-20 { margin-bottom: 20px !important;}
.mb-25 { margin-bottom: 25px !important;}
.mb-30 { margin-bottom: 30px !important;}
.mb-40 { margin-bottom: 40px !important;}
.mb-50 { margin-bottom: 50px !important;}
.mb-60 { margin-bottom: 60px !important;}

.mr-00 { margin-right: 0 !important;}
.mr-05 { margin-right: 5px !important;}
.mr-10 { margin-right: 10px !important;}
.mr-15 { margin-right: 15px !important;}
.mr-20 { margin-right: 20px !important;}
.mr-25 { margin-right: 25px !important;}
.mr-30 { margin-right: 30px !important;}
.mr-40 { margin-right: 40px !important;}
.mr-50 { margin-right: 50px !important;}
.mr-60 { margin-right: 60px !important;}

.ml-00 { margin-left: 0 !important;}
.ml-05 { margin-left: 5px !important;}
.ml-10 { margin-left: 10px !important;}
.ml-15 { margin-left: 15px !important;}
.ml-20 { margin-left: 20px !important;}
.ml-25 { margin-left: 25px !important;}
.ml-30 { margin-left: 30px !important;}
.ml-40 { margin-left: 40px !important;}
.ml-50 { margin-left: 50px !important;}
.ml-60 { margin-left: 60px !important;}

.mx-00 { margin-right: 0 !important; margin-left: 0 !important;}
.mx-05 { margin-right: 5px !important; margin-left: 5px !important;}
.mx-10 { margin-right: 10px !important; margin-left: 10px !important;}
.mx-15 { margin-right: 15px !important; margin-left: 15px !important;}
.mx-20 { margin-right: 20px !important; margin-left: 20px !important;}
.mx-25 { margin-right: 25px !important; margin-left: 25px !important;}
.mx-30 { margin-right: 30px !important; margin-left: 30px !important;}
.mx-40 { margin-right: 40px !important; margin-left: 40px !important;}
.mx-50 { margin-right: 50px !important; margin-left: 50px !important;}
.mx-60 { margin-right: 60px !important; margin-left: 60px !important;}

.my-00 { margin-top: 0 !important; margin-bottom: 0 !important;}
.my-05 { margin-top: 5px !important; margin-bottom: 5px !important;}
.my-10 { margin-top: 10px !important; margin-bottom: 10px !important;}
.my-15 { margin-top: 15px !important; margin-bottom: 15px !important;}
.my-20 { margin-top: 20px !important; margin-bottom: 20px !important;}
.my-25 { margin-top: 25px !important; margin-bottom: 25px !important;}
.my-30 { margin-top: 30px !important; margin-bottom: 30px !important;}
.my-40 { margin-top: 40px !important; margin-bottom: 40px !important;}
.my-50 { margin-top: 50px !important; margin-bottom: 50px !important;}
.my-60 { margin-top: 60px !important; margin-bottom: 60px !important;}

.p-00 { padding: 0 !important;}
.p-05 { padding: 5px !important;}
.p-10 { padding: 10px !important;}
.p-15 { padding: 15px !important;}
.p-20 { padding: 20px !important;}
.p-25 { padding: 25px !important;}
.p-30 { padding: 30px !important;}
.p-40 { padding: 40px !important;}
.p-50 { padding: 50px !important;}
.p-60 { padding: 60px !important;}

.pt-00 { padding-top: 0 !important;}
.pt-05 { padding-top: 5px !important;}
.pt-10 { padding-top: 10px !important;}
.pt-15 { padding-top: 15px !important;}
.pt-20 { padding-top: 20px !important;}
.pt-25 { padding-top: 25px !important;}
.pt-30 { padding-top: 30px !important;}
.pt-40 { padding-top: 40px !important;}
.pt-50 { padding-top: 50px !important;}
.pt-60 { padding-top: 60px !important;}

.pb-00 { padding-bottom: 0 !important;}
.pb-05 { padding-bottom: 5px !important;}
.pb-10 { padding-bottom: 10px !important;}
.pb-15 { padding-bottom: 15px !important;}
.pb-20 { padding-bottom: 20px !important;}
.pb-25 { padding-bottom: 25px !important;}
.pb-30 { padding-bottom: 30px !important;}
.pb-40 { padding-bottom: 40px !important;}
.pb-50 { padding-bottom: 50px !important;}
.pb-60 { padding-bottom: 60px !important;}

.pr-00 { padding-right: 0 !important;}
.pr-05 { padding-right: 5px !important;}
.pr-10 { padding-right: 10px !important;}
.pr-15 { padding-right: 15px !important;}
.pr-20 { padding-right: 20px !important;}
.pr-25 { padding-right: 25px !important;}
.pr-30 { padding-right: 30px !important;}
.pr-40 { padding-right: 40px !important;}
.pr-50 { padding-right: 50px !important;}
.pr-60 { padding-right: 60px !important;}

.pl-00 { padding-left: 0 !important;}
.pl-05 { padding-left: 5px !important;}
.pl-10 { padding-left: 10px !important;}
.pl-15 { padding-left: 15px !important;}
.pl-20 { padding-left: 20px !important;}
.pl-25 { padding-left: 25px !important;}
.pl-30 { padding-left: 30px !important;}
.pl-40 { padding-left: 40px !important;}
.pl-50 { padding-left: 50px !important;}
.pl-60 { padding-left: 60px !important;}

.px-00 { padding-right: 0 !important; padding-left: 0 !important;}
.px-05 { padding-right: 5px !important; padding-left: 5px !important;}
.px-10 { padding-right: 10px !important; padding-left: 10px !important;}
.px-15 { padding-right: 15px !important; padding-left: 15px !important;}
.px-20 { padding-right: 20px !important; padding-left: 20px !important;}
.px-25 { padding-right: 25px !important; padding-left: 25px !important;}
.px-30 { padding-right: 30px !important; padding-left: 30px !important;}
.px-40 { padding-right: 40px !important; padding-left: 40px !important;}
.px-50 { padding-right: 50px !important; padding-left: 50px !important;}
.px-60 { padding-right: 60px !important; padding-left: 60px !important;}

.py-00 { padding-top: 0 !important; padding-bottom: 0 !important;}
.py-05 { padding-top: 5px !important; padding-bottom: 5px !important;}
.py-10 { padding-top: 10px !important; padding-bottom: 10px !important;}
.py-15 { padding-top: 15px !important; padding-bottom: 15px !important;}
.py-20 { padding-top: 20px !important; padding-bottom: 20px !important;}
.py-25 { padding-top: 25px !important; padding-bottom: 25px !important;}
.py-30 { padding-top: 30px !important; padding-bottom: 30px !important;}
.py-40 { padding-top: 40px !important; padding-bottom: 40px !important;}
.py-50 { padding-top: 50px !important; padding-bottom: 50px !important;}
.py-60 { padding-top: 60px !important; padding-bottom: 60px !important;}


/*
----------------
alignment
----------------
*/

.block-center { margin: 1rem auto;}

/*
----------------
text alignment
----------------
*/

.text-monospace {
  font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important;
}

.text-justify {
  text-align: justify !important;
}

.text-wrap {
  white-space: normal !important;
}

.text-nowrap {
  white-space: nowrap !important;
}

.text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.text-left {
  text-align: left !important;
}

.text-right {
  text-align: right !important;
}

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


/*
----------------
form inline
----------------
*/



/*
----------------
input-group
----------------
*/

.input-group {
  position: relative;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-flex-align: stretch;
  align-items: stretch;
  width: 100%;
}

.input-group > .form-control,
.input-group > .form-control-plaintext,
.input-group > .custom-select,
.input-group > .custom-file {
  position: relative;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  width: 1%;
  margin-bottom: 0;
}

.input-group > .form-control + .form-control,
.input-group > .form-control + .custom-select,
.input-group > .form-control + .custom-file,
.input-group > .form-control-plaintext + .form-control,
.input-group > .form-control-plaintext + .custom-select,
.input-group > .form-control-plaintext + .custom-file,
.input-group > .custom-select + .form-control,
.input-group > .custom-select + .custom-select,
.input-group > .custom-select + .custom-file,
.input-group > .custom-file + .form-control,
.input-group > .custom-file + .custom-select,
.input-group > .custom-file + .custom-file {
  margin-left: -1px;
}

.input-group > .form-control:focus,
.input-group > .custom-select:focus,
.input-group > .custom-file .custom-file-input:focus ~ .custom-file-label {
  z-index: 3;
}

.input-group > .custom-file .custom-file-input:focus {
  z-index: 4;
}

.input-group > .form-control:not(:last-child),
.input-group > .custom-select:not(:last-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.input-group > .form-control:not(:first-child),
.input-group > .custom-select:not(:first-child) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.input-group > .custom-file {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
}

.input-group > .custom-file:not(:last-child) .custom-file-label,
.input-group > .custom-file:not(:last-child) .custom-file-label::after {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.input-group > .custom-file:not(:first-child) .custom-file-label {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.input-group-prepend,
.input-group-append {
  display: -ms-flexbox;
  display: flex;
}

.input-group-prepend .btn,
.input-group-append .btn {
  position: relative;
  z-index: 2;
}

.input-group-prepend .btn:focus,
.input-group-append .btn:focus {
  z-index: 3;
}

.input-group-prepend .btn + .btn,
.input-group-prepend .btn + .input-group-text,
.input-group-prepend .input-group-text + .input-group-text,
.input-group-prepend .input-group-text + .btn,
.input-group-append .btn + .btn,
.input-group-append .btn + .input-group-text,
.input-group-append .input-group-text + .input-group-text,
.input-group-append .input-group-text + .btn {
  margin-left: -1px;
}

.input-group-prepend {
  margin-right: -1px;
}

.input-group-append {
  margin-left: -1px;
}

.input-group-text {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  padding: 0.375rem 0.75rem;
  margin-bottom: 0;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #495057;
  text-align: center;
  white-space: nowrap;
  background-color: #e9ecef;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
}

.input-group-text input[type="radio"],
.input-group-text input[type="checkbox"] {
  margin-top: 0;
}

.input-group-lg > .form-control:not(textarea),
.input-group-lg > .custom-select {
  height: calc(1.5em + 1rem + 2px);
}

.input-group-lg > .form-control,
.input-group-lg > .custom-select,
.input-group-lg > .input-group-prepend > .input-group-text,
.input-group-lg > .input-group-append > .input-group-text,
.input-group-lg > .input-group-prepend > .btn,
.input-group-lg > .input-group-append > .btn {
  padding: 0.5rem 1rem;
  font-size: 1.25rem;
  line-height: 1.5;
  border-radius: 0.3rem;
}

.input-group-sm > .form-control:not(textarea),
.input-group-sm > .custom-select {
  height: calc(1.5em + 0.5rem + 2px);
}

.input-group-sm > .form-control,
.input-group-sm > .custom-select,
.input-group-sm > .input-group-prepend > .input-group-text,
.input-group-sm > .input-group-append > .input-group-text,
.input-group-sm > .input-group-prepend > .btn,
.input-group-sm > .input-group-append > .btn {
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  line-height: 1.5;
  border-radius: 0.2rem;
}

.input-group-lg > .custom-select,
.input-group-sm > .custom-select {
  padding-right: 1.75rem;
}

.input-group > .input-group-prepend > .btn,
.input-group > .input-group-prepend > .input-group-text,
.input-group > .input-group-append:not(:last-child) > .btn,
.input-group > .input-group-append:not(:last-child) > .input-group-text,
.input-group > .input-group-append:last-child > .btn:not(:last-child):not(.dropdown-toggle),
.input-group > .input-group-append:last-child > .input-group-text:not(:last-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.input-group > .input-group-append > .btn,
.input-group > .input-group-append > .input-group-text,
.input-group > .input-group-prepend:not(:first-child) > .btn,
.input-group > .input-group-prepend:not(:first-child) > .input-group-text,
.input-group > .input-group-prepend:first-child > .btn:not(:first-child),
.input-group > .input-group-prepend:first-child > .input-group-text:not(:first-child) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

/*
----------------
alert
----------------
*/

.alert {
  position: relative;
  padding: 0.75rem 1.25rem;
  margin-bottom: 1rem;
  border: 1px solid transparent;
  border-radius: 0.25rem;
}

.alert-heading {
  color: inherit;
}

.alert-link {
  font-weight: 700;
}

.alert-dismissible {
  padding-right: 4rem;
}

.alert-dismissible .close {
  position: absolute;
  top: 0;
  right: 0;
  padding: 0.75rem 1.25rem;
  color: inherit;
}

.alert-primary {
  color: #004085;
  background-color: #cce5ff;
  border-color: #b8daff;
}

.alert-primary hr {
  border-top-color: #9fcdff;
}

.alert-primary .alert-link {
  color: #002752;
}

.alert-secondary {
  color: #383d41;
  background-color: #e2e3e5;
  border-color: #d6d8db;
}

.alert-secondary hr {
  border-top-color: #c8cbcf;
}

.alert-secondary .alert-link {
  color: #202326;
}

.alert-success {
  color: #155724;
  background-color: #d4edda;
  border-color: #c3e6cb;
}

.alert-success hr {
  border-top-color: #b1dfbb;
}

.alert-success .alert-link {
  color: #0b2e13;
}

.alert-info {
  color: #0c5460;
  background-color: #d1ecf1;
  border-color: #bee5eb;
}

.alert-info hr {
  border-top-color: #abdde5;
}

.alert-info .alert-link {
  color: #062c33;
}

.alert-warning {
  color: #856404;
  background-color: #fff3cd;
  border-color: #ffeeba;
}

.alert-warning hr {
  border-top-color: #ffe8a1;
}

.alert-warning .alert-link {
  color: #533f03;
}

.alert-danger {
  color: #721c24;
  background-color: #f8d7da;
  border-color: #f5c6cb;
}

.alert-danger hr {
  border-top-color: #f1b0b7;
}

.alert-danger .alert-link {
  color: #491217;
}

.alert-light {
  color: #818182;
  background-color: #fefefe;
  border-color: #fdfdfe;
}

.alert-light hr {
  border-top-color: #ececf6;
}

.alert-light .alert-link {
  color: #686868;
}

.alert-dark {
  color: #1b1e21;
  background-color: #d6d8d9;
  border-color: #c6c8ca;
}

.alert-dark hr {
  border-top-color: #b9bbbe;
}

.alert-dark .alert-link {
  color: #040505;
}



/*
----------------------------------------------------------------
utility added
----------------------------------------------------------------
*/

.flex
{
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-ms-flex-pack: start;
	justify-content: flex-start;
	-ms-flex-align: center;
	align-items: center;
}

.fit img { width: 100%; height: auto;}

.fig img { border: 1px solid #ddd;}

/*
----------------------------------------------------------------
colors
----------------------------------------------------------------
*/

/* background */

.bg-l-gray { background-color: #f5f5f5; }
.bg-p-blue { background-color: #c6deeb ; }
.bg-l-blue { background-color: #5aafed; }
.bg-m-black { background-color: #333; }

.bg-gs-01 { background-color: rgba(0,0,0,.01); }
.bg-gs-02 { background-color: rgba(0,0,0,.02); }
.bg-gs-03 { background-color: rgba(0,0,0,.03); }
.bg-gs-04 { background-color: rgba(0,0,0,.04); }
.bg-gs-05 { background-color: rgba(0,0,0,.05); }
.bg-gs-06 { background-color: rgba(0,0,0,.06); }
.bg-gs-07 { background-color: rgba(0,0,0,.07); }
.bg-gs-08 { background-color: rgba(0,0,0,.08); }
.bg-gs-09 { background-color: rgba(0,0,0,.09); }
.bg-gs-10 { background-color: rgba(0,0,0,.10); }
.bg-gs-15 { background-color: rgba(0,0,0,.15); }
.bg-gs-20 { background-color: rgba(0,0,0,.20); }
.bg-gs-25 { background-color: rgba(0,0,0,.25); }
.bg-gs-30 { background-color: rgba(0,0,0,.30); }
.bg-gs-35 { background-color: rgba(0,0,0,.35); }
.bg-gs-40 { background-color: rgba(0,0,0,.40); }
.bg-gs-45 { background-color: rgba(0,0,0,.45); }
.bg-gs-50 { background-color: rgba(0,0,0,.50); }
.bg-gs-55 { background-color: rgba(0,0,0,.55); }
.bg-gs-60 { background-color: rgba(0,0,0,.60); }
.bg-gs-65 { background-color: rgba(0,0,0,.65); }
.bg-gs-70 { background-color: rgba(0,0,0,.70); }
.bg-gs-75 { background-color: rgba(0,0,0,.75); }
.bg-gs-80 { background-color: rgba(0,0,0,.80); }
.bg-gs-85 { background-color: rgba(0,0,0,.85); }
.bg-gs-90 { background-color: rgba(0,0,0,.90); }
.bg-gs-95 { background-color: rgba(0,0,0,.95); }

/* text */

.txt-white * { color: #fff;}
.bold-to-red b { font-style: normal; font-weight: normal; color: #ed1b23;}
.italic-to-red i { font-style: normal; color: #ed1b23;}

/*[EOF]*/