body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

header, footer {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: auto;
}

main {
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: auto;
}

.footer-desktop {
     background-color:#c80909;
  
}

.page-login .fa-circle {
  color: #ed1c25;
}

.page-content {
  padding: 30px 30px;
}

.page-login .fa-stack {
  position: absolute;
  transform: translate(-50%, -50%);
}

.page-login form {
  width: 340px;
  margin: 30px 0;
}

.page-login .panel {
  border-radius: 15px;
}

.page-login .panel-body {
  padding: 30px 15px;
}

.page-login .panel-header {
  height: 60px;
}

.page-login {
  margin-top: 50px;
  min-height: 695px;  
}

@media (max-width: 767.98px) {
  .page-login form {
    width: 300px; 
  } 
}

@media (max-width: 479.98px) {
  .page-login {
    margin-top: 10px;
  }
  .page-content {
    padding: 10px;
    margin-top: 60px;
  }
}

.bg-l-play {
  background: linear-gradient(150deg, #f24b4a4f 50%, #f6272554 30%)
}

.bg-l-close {
  background: linear-gradient(150deg, #b9a2a24f 50%, #937f7f54 30%)
}

.play-list-page {
  padding: 90px 0;  
}

.time-play {
  border-radius: 0px;
  border: none;
}

.btn-game-on, .btn-game-off {
  background: #c90a0a;
  border-radius: 4px;
  border: none;
  padding: 0;
  cursor: pointer;
  outline-offset: 4px;
}

.front-on, .front-off {
  display: block;
  padding: 8px 0px;
  border-radius: 7px;
  border-top-right-radius: 0px;
  border-top-left-radius: 0px;
  font-size: 1.25rem;
  background: #db2b28;
  color: white;
  transform: translateY(-4px);
}

.btn-game-off {
  background: #ccc !important;
}

.front-off {
  color: black;
  background: #eee !important;
}

.btn-game-on:active .front-on, .btn-game-on:active .front-off {
  transform: translateY(-2px);
}

.panel-lotto {
  box-shadow: none;
  border-radius: 0px;
  border: none;
  margin-bottom: 10px;
}

.panel-lotto > .panel-heading {
  color: #fff !important;
  background-image: linear-gradient(60deg, #f74343ed 60%, #c80909 60%) !important;
}

.panel-lotto > .panel-body {
  border: 0.1px solid #ddd;
  background: linear-gradient(150deg, #f24b4a26 50%, #f627252b 30%)
}

.panel-lotto > .panel-footer {
  background-color: none;
}

.panel-top, .panel-type {
  text-align: center;
  margin-bottom: 0px;
  width: 25%;
  border: none;
  border-radius: 0px;
}

.panel-top:not(:first-child), 
.panel-type:not(:first-child), 
.panel-stock:not(:first-child) {
  border-left: 1px solid #dddddd;
}

.panel-stock {
  text-align: center;
  margin-bottom: 0px;
  width: 50%;
  border: none;
  border-radius: 0px;
}

.panel-top > .panel-heading,
.panel-top > .panel-body,
.panel-type > .panel-heading,
.panel-type > .panel-body,
.panel-stock > .panel-heading,
.panel-stock > .panel-body {
  padding: 8px 0px;
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
  font-size: 13px;
}

.lable-title, .lable-time {
  position: absolute;
  top: 0px;
  right: 5px;
  border-top-right-radius: 3px;
  border-top-left-radius: 0px;
  border-bottom-right-radius: 0px;
  padding: 3px 10px;
  font-size: 12px;
  background-image: linear-gradient(0deg,#f74343ed 0%,#c80909 100%) !important;
}

.panel-title {
  position: relative;
}

.lable-title {
  top: 0px;
  right: 0px;
  font-size: 14px;
  padding: 6px 15px;
}

.yeekee-card {
  margin-top: 100px;
}

.yeekee-card .panel-lotto > .panel-heading {
  background-image: none !important;
  color: #333 !important;
  padding: 5px 10px;
}

.lt-time {
  line-height: 2;
}

@media only screen and (max-width: 768px) {
  .yeekee-card {
    margin-top: 20px;
  }
  .yeekee-card > .col-4 {
    padding: 0px 1px !important;
  }
  
  .yeekee-card .panel-body {
    padding: 0px !important;
    font-size: 1rem;
  }
  
  .yeekee-card .panel-heading {
    padding: 5px !important;
    font-size: 1.5rem;
  }

  .panel-lotto {
    margin-bottom: 2px !important;
  }

  .panel-type {
      width: 50% !important;
  }

  .panel-top > .panel-heading,
  .panel-top > .panel-body,
  .panel-stock > .panel-heading,
  .panel-stock > .panel-body,
  .panel-type > .panel-heading,
  .panel-type > .panel-body {
      padding: 5px 0px;
      font-size: 1.3rem;
  }

  .lable-time {
      font-size: 10px;
  }
}

.flag-icon {
  top: 0;
  right: 5px;
  background-size: cover;
  background-repeat: no-repeat;
  width: 50px;
  height: 33px;
  background-position: center;
  position: absolute;
  border-top-right-radius: 3px;
  border-bottom-left-radius: 5px;
}

.flag-icon-in {
  background-image: url(../images/flag/in.svg);
}
.flag-icon-la {
  background-image: url(../images/flag/la.svg);
}        
.flag-icon-my {
  background-image: url(../images/flag/my.svg);
}   
.flag-icon-ru {
  background-image: url(../images/flag/ru.svg);
} 
.flag-icon-sg {
  background-image: url(../images/flag/sg.svg);
} 
.flag-icon-tw {
  background-image: url(../images/flag/tw.svg);
} 
.flag-icon-us {
  background-image: url(../images/flag/us.svg);
} 
.flag-icon-vn {
  background-image: url(../images/flag/vn.svg);
} 
.flag-icon-cn {
  background-image: url(../images/flag/cn.svg);
} 
.flag-icon-jp {
  background-image: url(../images/flag/jp.svg);
}
.flag-icon-kr {
  background-image: url(../images/flag/kr.svg);
} 
.flag-icon-de {
  background-image: url(../images/flag/de.svg);
} 
.flag-icon-gb {
  background-image: url(../images/flag/gb.svg);
}
.flag-icon-eg {
  background-image: url(../images/flag/eg.svg);
}
.flag-icon-hk {
  background-image: url(../images/flag/hk.svg);
}
.flag-icon-th {
  background-image: url(../images/flag/th.png);
}
.flag-icon-gsb {
  background-image: url(../images/flag/gsb.png);
}
.flag-icon-baac {
  background-image: url(../images/flag/baac.png);
}

.flag-icon-yk {
  background-image: url(../images/flag/diamond.svg);
}

.btn-menusub-game li {
  width: 10%;
  border: 3px solid rgb(157 98 98 / 0%);
}

.btn-menusub-game li a, .btn-menusub-game li button {
  font-size: 14px;
  padding: 8px 0px;
  border-radius: 10px;
  letter-spacing: 0;
  box-shadow: none;
  border: 1px solid #d41833;
}

.btn-menusub-game li a:hover, .btn-menusub-game li button:hover{
  background: rgb(255 192 192);
}

.btn-menusub-game li a i, .btn-menusub-game li button i {
  font-size: 20px;
  margin: none;
}

@media only screen and (max-width: 768px) {
  .btn-menusub-game li {
    width: 25%;
    border: 3px solid rgb(157 98 98 / 0%);
  }
  
  .btn-menusub-game li.main {
    width: 33.33%;
    border: 3px solid rgb(157 98 98 / 0%);
  }
}

/******
  body {
    font-family: 'Lato', 'Prompt', sans-serif !important;
    line-height: 1.5;
  }
******/

[v-cloak] {
  display: none;
}

.preloading-loader {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;
}

.box-award {
  position: relative; 
  display: inline-block; 
  vertical-align: middle;
}

.award-number {
  position: relative; 
  float: left; 
  border: 1px solid transparent;
}

.mainmenu-user-mobile li {
    width: 92px;
}

.inbox-menutab li {
    width: auto;
}

@font-face {
  font-family: 'Xero';
  src: url('../../../fonts/Xero/XRO-RE.ttf') format('truetype');
}

@font-face {
  font-family: 'IBMPlexSansThai';
  src: url('../../../fonts/IBM_Plex_Sans_Thai/IBMPlexSansThai-Regular.ttf') format('truetype');
}

.btn-raised.active, .btn-raised.hover, .btn-raised:active, .btn-raised:hover, .open>.btn-raised.dropdown-toggle, .show>.btn-raised.dropdown-toggle {
    -webkit-box-shadow: 0 0 3px rgba(0,0,0,.15), 0 3px 6px rgba(0,0,0,.2);
    box-shadow: 0 0 3px rgba(0,0,0,.15), 0 3px 6px rgba(0,0,0,.2);
}

.btn-raised {
    -webkit-box-shadow: 0 0 2px rgba(0,0,0,.18), 0 2px 4px rgba(0,0,0,.21);
    box-shadow: 0 0 2px rgba(0,0,0,.18), 0 2px 4px rgba(0,0,0,.21);
    -webkit-transition: -webkit-box-shadow .25s cubic-bezier(.4,0,.2,1);
    transition: -webkit-box-shadow .25s cubic-bezier(.4,0,.2,1);
    transition: box-shadow .25s cubic-bezier(.4,0,.2,1);
    transition: box-shadow .25s cubic-bezier(.4,0,.2,1), -webkit-box-shadow .25s cubic-bezier(.4,0,.2,1);
}

.btn-outline-default, .btn-outline.btn-default {
    color: #76838f;
    background-color: transparent;
    border-color: #e4eaec;
}

.card {
    position: relative;
    display: -ms-flexbox;
    display: -webkit-box;
    display: flex;
    -ms-flex-direction: column;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border: 1px solid rgba(0, 0, 0, 0.125);
    border-radius: 0.25rem;
}

.bgwhitealpha .card-header {
    font-weight: 400;
    font-family: 'Mitr', sans-serif;
}
.card-header:first-child {
    border-radius: calc(0.25rem - 1px) calc(0.25rem - 1px) 0 0;
}
.text-danger {
    color: #dc3545 !important;
}
.p-1 {
    padding: 0.25rem !important;
}
.card-header {
    padding: 0.75rem 1.25rem;
    margin-bottom: 0;
    background-color: rgba(0, 0, 0, 0.03);
    border-bottom: 1px solid rgba(0, 0, 0, 0.125);
}

.card-body {
    -ms-flex: 1 1 auto;
    -webkit-box-flex: 1;
    flex: 1 1 auto;
    padding: 1.25rem;
}

.flex-row {
    -ms-flex-direction: row !important;
    -webkit-box-orient: horizontal !important;
    -webkit-box-direction: normal !important;
    flex-direction: row !important;
}
.d-flex {
    display: -ms-flexbox !important;
    display: -webkit-box !important;
    display: flex !important;
}

.bgwhitealpha .border-card-right {
    border-right: 1px solid rgba(0, 0, 0, 0.125);
    border-top: none;
    border-bottom: none;
    border-left: none;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
    /* border-radius: 0px; */
}

@media (min-width: 768px)
.bgwhitealpha .sub-card-header {
    font-family: 'Mitr', sans-serif !important;
}
@media (min-width: 576px)
.bgwhitealpha .sub-card-header {
    font-family: 'NotosansThai', sans-serif !important;
}
.bgwhitealpha .sub-card-header {
    font-size: 80%;
    /* line-height: 25px; */
    line-height: 1;
    padding: 5px 0px!important;
    vertical-align: middle;
    min-height: 25px;
    /* font-family: 'NotosansThai', sans-serif !important; */
}
.bgwhitealpha .card-header {
    font-weight: 400;
    font-family: 'Mitr', sans-serif;
}
.card-header:first-child {
    border-radius: calc(0.25rem - 1px) calc(0.25rem - 1px) 0 0;
}

.card-header {
    padding: 0.75rem 1.25rem;
    margin-bottom: 0;
    background-color: rgba(0, 0, 0, 0.03);
    border-bottom: 1px solid rgba(0, 0, 0, 0.125);
}

@font-face {
  font-family: 'Nunito-Font';
  src: url('../../../fonts/font_nunito/Nunito-Regular.ttf') format('truetype');
}

@font-face {
  font-family: 'Nunito-Number';
  src: url('../../../fonts/font_nunito/Nunito-Regular.ttf') format('truetype');
  unicode-range: U+30-39;
}

@font-face {
  font-family: 'GS';
  src: url('../../../fonts/Google-Sans/GoogleSans-Regular.ttf') format('truetype');
}

@font-face {
  font-family: 'GS-Number';
  src: url('../../../fonts/Google-Sans/GoogleSans-Regular.ttf') format('truetype');
  unicode-range: U+30-39;
}

.font-normal {
  font-family: Nunito-Font, GS-Number, Roboto, sans-serif;
}

@media (min-width: 768px) {
  .form-horizontal .form-control-label {
    padding-top: 7px;
      margin-bottom: 0;
      text-align: right;
  }


}

.form-horizontal .form-control-label {
  padding-right: 15px;
    padding-left: 15px;
}

.form-group .form-control-label {
  padding: .429rem 0;
}

.none-select {
  -webkit-user-select: none;
  -moz-user-select: none;
  -khtml-user-select: none;
  -ms-user-select: none;
}

body {
  font-family: 'Helvetica Neue', Helvetica,Arial,sans-serif;
  -webkit-font-smoothing: subpixel-antialiased !important;
}

.form-row {
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-right: -5px;
  margin-left: -5px;
}

.form-row>.col, .form-row>[class*=col-] {
  padding-right: 5px;
  padding-left: 5px;
}

.invalid-feedback {
  color: red;
  text-align: left;
}

.row.no-space>[class*=col-] {
  padding-right: 0;
  padding-left: 0;
}

.box-keyboard .group button:active {
  background-color: #e6e6e6;
  background-image: none;
  border-color: #adadad;
}

.border-radius {
  border-radius: .50rem!important;
}

.loading {
  min-height: auto;
}

.shadow-sm {
  -webkit-box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
}

.shadow {
  -webkit-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}

.shadow-lg {
  -webkit-box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important;
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important;
}

.shadow-none {
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
}

.border {
  border: 1px solid #e4eaec !important; }

.border-top {
  border-top: 1px solid #e4eaec !important; }

.border-right {
  border-right: 1px solid #e4eaec !important; }

.border-bottom {
  border-bottom: 1px solid #e4eaec !important; }

.border-left {
  border-left: 1px solid #e4eaec !important; }

.border-0 {
  border: 0 !important; }

.border-top-0 {
  border-top: 0 !important; }

.border-right-0 {
  border-right: 0 !important; }

.border-bottom-0 {
  border-bottom: 0 !important; }

.border-left-0 {
  border-left: 0 !important; }

.border-primary {
  border-color: #007bff !important; }

.border-secondary {
  border-color: #868e96 !important; }

.border-success {
  border-color: #28a745 !important; }

.border-info {
  border-color: #17a2b8 !important; }

.border-warning {
  border-color: #ffc107 !important; }

.border-danger {
  border-color: #dc3545 !important; }

.border-light {
  border-color: #f8f9fa !important; }

.border-dark {
  border-color: #343a40 !important; }

.border-white {
  border-color: #fff !important; }

.row.no-space {
  margin-right: 0;
  margin-left: 0
}

.row.no-space > [class * =col-] {
  padding-right: 0;
  padding-left: 0
}

.vertical-align {
  font-size: 0;
}

.vertical-align:before {
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  content: "";
}

.vertical-align-middle, .vertical-align-bottom {
  display: inline-block;
  max-width: 100%;
  font-size: 1rem;
}

.vertical-align-middle {
  vertical-align: middle;
}

.vertical-align-bottom {
  vertical-align: bottom;
}

.inline {
  display: inline !important;
}

.inline-block {
  display: inline-block !important;
}

.block {
  display: block !important;
}

.text-break {
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
  word-wrap: break-word;
  white-space: normal;
}

.text-top {
  vertical-align: top !important;
}

.text-middle {
  vertical-align: middle !important;
}

.text-bottom {
  vertical-align: bottom !important;
}

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

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

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

.font-weight-unset {
  font-weight: unset !important;
}

.font-weight-100 {
  font-weight: 100 !important;
}

.font-weight-200 {
  font-weight: 200 !important;
}

.font-weight-300 {
  font-weight: 300 !important;
}

.font-weight-400 {
  font-weight: 400 !important;
}

.font-weight-500 {
  font-weight: 500 !important;
}

.font-weight-600 {
  font-weight: 600 !important;
}

.font-weight-700 {
  font-weight: 700 !important;
}

.font-weight-800 {
  font-weight: 800 !important;
}

.font-weight-900 {
  font-weight: 900 !important;
}

.font-weight-light {
  font-weight: 100 !important;
}

.font-weight-normal {
  font-weight: 300 !important;
}

.font-weight-medium {
  font-weight: 400 !important;
}

.font-weight-bold {
  font-weight: 500 !important;
}

.font-size-0 {
  font-size: 0 !important;
}

.font-size-10 {
  font-size: 10px !important;
}

.font-size-12 {
  font-size: 12px !important;
}

.font-size-14 {
  font-size: 14px !important;
}

.font-size-16 {
  font-size: 16px !important;
}

.font-size-18 {
  font-size: 18px !important;
}

.font-size-20 {
  font-size: 20px !important;
}

.font-size-24 {
  font-size: 24px !important;
}

.font-size-26 {
  font-size: 26px !important;
}

.font-size-30 {
  font-size: 30px !important;
}

.font-size-40 {
  font-size: 40px !important;
}

.font-size-50 {
  font-size: 50px !important;
}

.font-size-60 {
  font-size: 60px !important;
}

.font-size-70 {
  font-size: 70px !important;
}

.font-size-80 {
  font-size: 80px !important;
}

.m-0 {
  margin: 0 !important;
}

.mt-0 {
  margin-top: 0 !important;
}

.mr-0 {
  margin-right: 0 !important;
}

.mb-0 {
  margin-bottom: 0 !important;
}

.ml-0 {
  margin-left: 0 !important;
}

.mx-0 {
  margin-right: 0 !important;
  margin-left: 0 !important;
}

.my-0 {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.m-3 {
  margin: 3px !important;
}

.mt-3 {
  margin-top: 3px !important;
}

.mr-3 {
  margin-right: 3px !important;
}

.mb-3 {
  margin-bottom: 3px !important;
}

.ml-3 {
  margin-left: 3px !important;
}

.mx-3 {
  margin-right: 3px !important;
  margin-left: 3px !important;
}

.my-3 {
  margin-top: 3px !important;
  margin-bottom: 3px !important;
}

.m-5 {
  margin: 5px !important;
}

.mt-5 {
  margin-top: 5px !important;
}

.mr-5 {
  margin-right: 5px !important;
}

.mb-5 {
  margin-bottom: 5px !important;
}

.ml-5 {
  margin-left: 5px !important;
}

.mx-5 {
  margin-right: 5px !important;
  margin-left: 5px !important;
}

.my-5 {
  margin-top: 5px !important;
  margin-bottom: 5px !important;
}

.m-10 {
  margin: 10px !important;
}

.mt-10 {
  margin-top: 10px !important;
}

.mr-10 {
  margin-right: 10px !important;
}

.mb-10 {
  margin-bottom: 10px !important;
}

.ml-10 {
  margin-left: 10px !important;
}

.mx-10 {
  margin-right: 10px !important;
  margin-left: 10px !important;
}

.my-10 {
  margin-top: 10px !important;
  margin-bottom: 10px !important;
}

.m-15 {
  margin: 15px !important;
}

.mt-15 {
  margin-top: 15px !important;
}

.mr-15 {
  margin-right: 15px !important;
}

.mb-15 {
  margin-bottom: 15px !important;
}

.ml-15 {
  margin-left: 15px !important;
}

.mx-15 {
  margin-right: 15px !important;
  margin-left: 15px !important;
}

.my-15 {
  margin-top: 15px !important;
  margin-bottom: 15px !important;
}

.m-20 {
  margin: 20px !important;
}

.mt-20 {
  margin-top: 20px !important;
}

.mr-20 {
  margin-right: 20px !important;
}

.mb-20 {
  margin-bottom: 20px !important;
}

.ml-20 {
  margin-left: 20px !important;
}

.mx-20 {
  margin-right: 20px !important;
  margin-left: 20px !important;
}

.my-20 {
  margin-top: 20px !important;
  margin-bottom: 20px !important;
}

.m-25 {
  margin: 25px !important;
}

.mt-25 {
  margin-top: 25px !important;
}

.mr-25 {
  margin-right: 25px !important;
}

.mb-25 {
  margin-bottom: 25px !important;
}

.ml-25 {
  margin-left: 25px !important;
}

.mx-25 {
  margin-right: 25px !important;
  margin-left: 25px !important;
}

.my-25 {
  margin-top: 25px !important;
  margin-bottom: 25px !important;
}

.m-30 {
  margin: 30px !important;
}

.mt-30 {
  margin-top: 30px !important;
}

.mr-30 {
  margin-right: 30px !important;
}

.mb-30 {
  margin-bottom: 30px !important;
}

.ml-30 {
  margin-left: 30px !important;
}

.mx-30 {
  margin-right: 30px !important;
  margin-left: 30px !important;
}

.my-30 {
  margin-top: 30px !important;
  margin-bottom: 30px !important;
}

.m-35 {
  margin: 35px !important;
}

.mt-35 {
  margin-top: 35px !important;
}

.mr-35 {
  margin-right: 35px !important;
}

.mb-35 {
  margin-bottom: 35px !important;
}

.ml-35 {
  margin-left: 35px !important;
}

.mx-35 {
  margin-right: 35px !important;
  margin-left: 35px !important;
}

.my-35 {
  margin-top: 35px !important;
  margin-bottom: 35px !important;
}

.m-40 {
  margin: 40px !important;
}

.mt-40 {
  margin-top: 40px !important;
}

.mr-40 {
  margin-right: 40px !important;
}

.mb-40 {
  margin-bottom: 40px !important;
}

.ml-40 {
  margin-left: 40px !important;
}

.mx-40 {
  margin-right: 40px !important;
  margin-left: 40px !important;
}

.my-40 {
  margin-top: 40px !important;
  margin-bottom: 40px !important;
}

.m-45 {
  margin: 45px !important;
}

.mt-45 {
  margin-top: 45px !important;
}

.mr-45 {
  margin-right: 45px !important;
}

.mb-45 {
  margin-bottom: 45px !important;
}

.ml-45 {
  margin-left: 45px !important;
}

.mx-45 {
  margin-right: 45px !important;
  margin-left: 45px !important;
}

.my-45 {
  margin-top: 45px !important;
  margin-bottom: 45px !important;
}

.m-50 {
  margin: 50px !important;
}

.mt-50 {
  margin-top: 50px !important;
}

.mr-50 {
  margin-right: 50px !important;
}

.mb-50 {
  margin-bottom: 50px !important;
}

.ml-50 {
  margin-left: 50px !important;
}

.mx-50 {
  margin-right: 50px !important;
  margin-left: 50px !important;
}

.my-50 {
  margin-top: 50px !important;
  margin-bottom: 50px !important;
}

.m-60 {
  margin: 60px !important;
}

.mt-60 {
  margin-top: 60px !important;
}

.mr-60 {
  margin-right: 60px !important;
}

.mb-60 {
  margin-bottom: 60px !important;
}

.ml-60 {
  margin-left: 60px !important;
}

.mx-60 {
  margin-right: 60px !important;
  margin-left: 60px !important;
}

.my-60 {
  margin-top: 60px !important;
  margin-bottom: 60px !important;
}
.mt-69 {
  margin-top: 69px !important;
}
.m-70 {
  margin: 70px !important;
}

.mt-70 {
  margin-top: 70px !important;
}

.mr-70 {
  margin-right: 70px !important;
}

.mb-70 {
  margin-bottom: 70px !important;
}

.ml-70 {
  margin-left: 70px !important;
}

.mx-70 {
  margin-right: 70px !important;
  margin-left: 70px !important;
}

.my-70 {
  margin-top: 70px !important;
  margin-bottom: 70px !important;
}

.m-80 {
  margin: 80px !important;
}

.mt-80 {
  margin-top: 80px !important;
}


.mr-80 {
  margin-right: 80px !important;
}

.mb-80 {
  margin-bottom: 80px !important;
}

.ml-80 {
  margin-left: 80px !important;
}

.mx-80 {
  margin-right: 80px !important;
  margin-left: 80px !important;
}

.my-80 {
  margin-top: 80px !important;
  margin-bottom: 80px !important;
}

.m-100 {
  margin: 100px !important;
}

.mt-100 {
  margin-top: 100px !important;
}

.mr-100 {
  margin-right: 100px !important;
}

.mb-100 {
  margin-bottom: 100px;
}

.ml-100 {
  margin-left: 100px !important;
}

.mx-100 {
  margin-right: 100px !important;
  margin-left: 100px !important;
}

.my-100 {
  margin-top: 100px !important;
  margin-bottom: 100px !important;
}

.p-0 {
  padding: 0 !important;
}

.pt-0 {
  padding-top: 0 !important;
}

.pr-0 {
  padding-right: 0 !important;
}

.pb-0 {
  padding-bottom: 0 !important;
}

.pl-0 {
  padding-left: 0 !important;
}

.px-0 {
  padding-right: 0 !important;
  padding-left: 0 !important;
}

.py-0 {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.p-3 {
  padding: 3px !important;
}

.pt-3 {
  padding-top: 3px !important;
}

.pr-3 {
  padding-right: 3px !important;
}

.pb-3 {
  padding-bottom: 3px !important;
}

.pl-3 {
  padding-left: 3px !important;
}

.px-3 {
  padding-right: 3px !important;
  padding-left: 3px !important;
}

.py-3 {
  padding-top: 3px !important;
  padding-bottom: 3px !important;
}

.p-5 {
  padding: 5px !important;
}

.pt-5 {
  padding-top: 5px !important;
}

.pr-5 {
  padding-right: 5px !important;
}

.pb-5 {
  padding-bottom: 5px !important;
}

.pl-5 {
  padding-left: 5px !important;
}

.px-5 {
  padding-right: 5px !important;
  padding-left: 5px !important;
}

.py-5 {
  padding-top: 5px !important;
  padding-bottom: 5px !important;
}

.p-10 {
  padding: 10px !important;
}

.pt-10 {
  padding-top: 10px !important;
}

.pr-10 {
  padding-right: 10px !important;
}

.pb-10 {
  padding-bottom: 10px !important;
}

.pl-10 {
  padding-left: 10px !important;
}

.px-10 {
  padding-right: 10px !important;
  padding-left: 10px !important;
}

.py-10 {
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}

.p-15 {
  padding: 15px !important;
}

.pt-15 {
  padding-top: 15px !important;
}

.pr-15 {
  padding-right: 15px !important;
}

.pb-15 {
  padding-bottom: 15px !important;
}

.pl-15 {
  padding-left: 15px !important;
}

.px-15 {
  padding-right: 15px !important;
  padding-left: 15px !important;
}

.py-15 {
  padding-top: 15px !important;
  padding-bottom: 15px !important;
}

.p-20 {
  padding: 20px !important;
}

.pt-20 {
  padding-top: 20px !important;
}

.pr-20 {
  padding-right: 20px !important;
}

.pb-20 {
  padding-bottom: 20px !important;
}

.pl-20 {
  padding-left: 20px !important;
}

.px-20 {
  padding-right: 20px !important;
  padding-left: 20px !important;
}

.py-20 {
  padding-top: 20px !important;
  padding-bottom: 20px !important;
}

.p-25 {
  padding: 25px !important;
}

.pt-25 {
  padding-top: 25px !important;
}

.pr-25 {
  padding-right: 25px !important;
}

.pb-25 {
  padding-bottom: 25px !important;
}

.pl-25 {
  padding-left: 25px !important;
}

.px-25 {
  padding-right: 25px !important;
  padding-left: 25px !important;
}

.py-25 {
  padding-top: 25px !important;
  padding-bottom: 25px !important;
}

.p-30 {
  padding: 30px !important;
}

.pt-30 {
  padding-top: 30px !important;
}

.pr-30 {
  padding-right: 30px !important;
}

.pb-30 {
  padding-bottom: 30px !important;
}

.pl-30 {
  padding-left: 30px !important;
}

.px-30 {
  padding-right: 30px !important;
  padding-left: 30px !important;
}

.py-30 {
  padding-top: 30px !important;
  padding-bottom: 30px !important;
}

.p-35 {
  padding: 35px !important;
}

.pt-35 {
  padding-top: 35px !important;
}

.pr-35 {
  padding-right: 35px !important;
}

.pb-35 {
  padding-bottom: 35px !important;
}

.pl-35 {
  padding-left: 35px !important;
}

.px-35 {
  padding-right: 35px !important;
  padding-left: 35px !important;
}

.py-35 {
  padding-top: 35px !important;
  padding-bottom: 35px !important;
}

.p-40 {
  padding: 40px !important;
}

.pt-40 {
  padding-top: 40px !important;
}

.pr-40 {
  padding-right: 40px !important;
}

.pb-40 {
  padding-bottom: 40px !important;
}

.pl-40 {
  padding-left: 40px !important;
}

.px-40 {
  padding-right: 40px !important;
  padding-left: 40px !important;
}

.py-40 {
  padding-top: 40px !important;
  padding-bottom: 40px !important;
}

.p-45 {
  padding: 45px !important;
}

.pt-45 {
  padding-top: 45px !important;
}

.pr-45 {
  padding-right: 45px !important;
}

.pb-45 {
  padding-bottom: 45px !important;
}

.pl-45 {
  padding-left: 45px !important;
}

.px-45 {
  padding-right: 45px !important;
  padding-left: 45px !important;
}

.py-45 {
  padding-top: 45px !important;
  padding-bottom: 45px !important;
}

.p-50 {
  padding: 50px !important;
}

.pt-50 {
  padding-top: 50px !important;
}

.pr-50 {
  padding-right: 50px !important;
}

.pb-50 {
  padding-bottom: 50px !important;
}

.pl-50 {
  padding-left: 50px !important;
}

.px-50 {
  padding-right: 50px !important;
  padding-left: 50px !important;
}

.py-50 {
  padding-top: 50px !important;
  padding-bottom: 50px !important;
}

.p-60 {
  padding: 60px !important;
}

.pt-60 {
  padding-top: 60px !important;
}

.pr-60 {
  padding-right: 60px !important;
}

.pb-60 {
  padding-bottom: 60px !important;
}

.pl-60 {
  padding-left: 60px !important;
}

.px-60 {
  padding-right: 60px !important;
  padding-left: 60px !important;
}

.py-60 {
  padding-top: 60px !important;
  padding-bottom: 60px !important;
}

.p-70 {
  padding: 70px !important;
}

.pt-70 {
  padding-top: 70px !important;
}

.pr-70 {
  padding-right: 70px !important;
}

.pb-70 {
  padding-bottom: 70px !important;
}

.pl-70 {
  padding-left: 70px !important;
}

.px-70 {
  padding-right: 70px !important;
  padding-left: 70px !important;
}

.py-70 {
  padding-top: 70px !important;
  padding-bottom: 70px !important;
}

.p-80 {
  padding: 80px !important;
}

.pt-80 {
  padding-top: 80px !important;
}

.pr-80 {
  padding-right: 80px !important;
}

.pb-80 {
  padding-bottom: 80px !important;
}

.pl-80 {
  padding-left: 80px !important;
}

.px-80 {
  padding-right: 80px !important;
  padding-left: 80px !important;
}

.py-80 {
  padding-top: 80px !important;
  padding-bottom: 80px !important;
}

.p-100 {
  padding: 100px !important;
}

.pt-100 {
  padding-top: 100px !important;
}

.pr-100 {
  padding-right: 100px !important;
}

.pb-100 {
  padding-bottom: 100px !important;
}

.pl-100 {
  padding-left: 100px !important;
}

.px-100 {
  padding-right: 100px !important;
  padding-left: 100px !important;
}

.py-100 {
  padding-top: 100px !important;
  padding-bottom: 100px !important;
}

.m--30 {
  margin: -30px !important;
}

.mt--30 {
  margin-top: -30px !important;
}

.mr--30 {
  margin-right: -30px !important;
}

.mb--30 {
  margin-bottom: -30px !important;
}

.ml--30 {
  margin-left: -30px !important;
}

.mx--30 {
  margin-right: -30px !important;
  margin-left: -30px !important;
}

.my--30 {
  margin-top: -30px !important;
  margin-bottom: -30px !important;
}

.m--25 {
  margin: -25px !important;
}

.mt--25 {
  margin-top: -25px !important;
}

.mr--25 {
  margin-right: -25px !important;
}

.mb--25 {
  margin-bottom: -25px !important;
}

.ml--25 {
  margin-left: -25px !important;
}

.mx--25 {
  margin-right: -25px !important;
  margin-left: -25px !important;
}

.my--25 {
  margin-top: -25px !important;
  margin-bottom: -25px !important;
}

.m--20 {
  margin: -20px !important;
}

.mt--20 {
  margin-top: -20px !important;
}

.mr--20 {
  margin-right: -20px !important;
}

.mb--20 {
  margin-bottom: -20px !important;
}

.ml--20 {
  margin-left: -20px !important;
}

.mx--20 {
  margin-right: -20px !important;
  margin-left: -20px !important;
}

.my--20 {
  margin-top: -20px !important;
  margin-bottom: -20px !important;
}

.m--15 {
  margin: -15px !important;
}

.mt--15 {
  margin-top: -15px !important;
}

.mr--15 {
  margin-right: -15px !important;
}

.mb--15 {
  margin-bottom: -15px !important;
}

.ml--15 {
  margin-left: -15px !important;
}

.mx--15 {
  margin-right: -15px !important;
  margin-left: -15px !important;
}

.my--15 {
  margin-top: -15px !important;
  margin-bottom: -15px !important;
}

.m--10 {
  margin: -10px !important;
}

.mt--10 {
  margin-top: -10px !important;
}

.mr--10 {
  margin-right: -10px !important;
}

.mb--10 {
  margin-bottom: -10px !important;
}

.ml--10 {
  margin-left: -10px !important;
}

.mx--10 {
  margin-right: -10px !important;
  margin-left: -10px !important;
}

.my--10 {
  margin-top: -10px !important;
  margin-bottom: -10px !important;
}

.m--5 {
  margin: -5px !important;
}

.mt--5 {
  margin-top: -5px !important;
}

.mr--5 {
  margin-right: -5px !important;
}

.mb--5 {
  margin-bottom: -5px !important;
}

.ml--5 {
  margin-left: -5px !important;
}

.mx--5 {
  margin-right: -5px !important;
  margin-left: -5px !important;
}

.my--5 {
  margin-top: -5px !important;
  margin-bottom: -5px !important;
}

.m--3 {
  margin: -3px !important;
}

.mt--3 {
  margin-top: -3px !important;
}

.mr--3 {
  margin-right: -3px !important;
}

.mb--3 {
  margin-bottom: -3px !important;
}

.ml--3 {
  margin-left: -3px !important;
}

.mx--3 {
  margin-right: -3px !important;
  margin-left: -3px !important;
}

.my--3 {
  margin-top: -3px !important;
  margin-bottom: -3px !important;
}

.m--1 {
  margin: -1px !important;
}

.mt--1 {
  margin-top: -1px !important;
}

.mr--1 {
  margin-right: -1px !important;
}

.mb--1 {
  margin-bottom: -1px !important;
}

.ml--1 {
  margin-left: -1px !important;
}

.mx--1 {
  margin-right: -1px !important;
  margin-left: -1px !important;
}

.my--1 {
  margin-top: -1px !important;
  margin-bottom: -1px !important;
}

.m-auto {
  margin: auto !important;
}

.mt-auto {
  margin-top: auto !important;
}

.mr-auto {
  margin-right: auto !important;
}

.mb-auto {
  margin-bottom: auto !important;
}

.ml-auto {
  margin-left: auto !important;
}

.mx-auto {
  margin-right: auto !important;
  margin-left: auto !important;
}

.my-auto {
  margin-top: auto !important;
  margin-bottom: auto !important;
}


.bg-red-100 {
  background-color: #ffdbdc !important;
}

.bg-red-200 {
  background-color: #ffbfc1 !important;
}

.bg-red-300 {
  background-color: #ffa1a4 !important;
}

.bg-red-400 {
  background-color: #ff8589 !important;
}

.bg-red-500 {
  background-color: #ff666b !important;
}

.bg-red-600 {
  background-color: #ff4c52 !important;
}

.bg-red-700 {
  background-color: #f2353c !important;
}

.bg-red-800 {
  background-color: #e62020 !important;
}

.bg-red-900 {
  background-color: #d60b0b !important;
}

.red-100 {
  color: #ffdbdc !important;
}

.red-200 {
  color: #ffbfc1 !important;
}

.red-300 {
  color: #ffa1a4 !important;
}

.red-400 {
  color: #ff8589 !important;
}

.red-500 {
  color: #ff666b !important;
}

.red-600 {
  color: #ff4c52 !important;
}

.red-700 {
  color: #f2353c !important;
}

.red-800 {
  color: #e62020 !important;
}

.red-900 {
  color: #d60b0b !important;
}

.bg-pink-100 {
  background-color: #ffd9e6 !important;
}

.bg-pink-200 {
  background-color: #ffbad2 !important;
}

.bg-pink-300 {
  background-color: #ff9ec0 !important;
}

.bg-pink-400 {
  background-color: #ff7daa !important;
}

.bg-pink-500 {
  background-color: #ff5e97 !important;
}

.bg-pink-600 {
  background-color: #f74584 !important;
}

.bg-pink-700 {
  background-color: #eb2f71 !important;
}

.bg-pink-800 {
  background-color: #e6155e !important;
}

.bg-pink-900 {
  background-color: #d10049 !important;
}

.pink-100 {
  color: #ffd9e6 !important;
}

.pink-200 {
  color: #ffbad2 !important;
}

.pink-300 {
  color: #ff9ec0 !important;
}

.pink-400 {
  color: #ff7daa !important;
}

.pink-500 {
  color: #ff5e97 !important;
}

.pink-600 {
  color: #f74584 !important;
}

.pink-700 {
  color: #eb2f71 !important;
}

.pink-800 {
  color: #e6155e !important;
}

.pink-900 {
  color: #d10049 !important;
}

.bg-purple-100 {
  background-color: #eae1fc !important;
}

.bg-purple-200 {
  background-color: #d9c7fc !important;
}

.bg-purple-300 {
  background-color: #c8aefc !important;
}

.bg-purple-400 {
  background-color: #b693fa !important;
}

.bg-purple-500 {
  background-color: #a57afa !important;
}

.bg-purple-600 {
  background-color: #9463f7 !important;
}

.bg-purple-700 {
  background-color: #8349f5 !important;
}

.bg-purple-800 {
  background-color: #7231f5 !important;
}

.bg-purple-900 {
  background-color: #6118f2 !important;
}

.purple-100 {
  color: #eae1fc !important;
}

.purple-200 {
  color: #d9c7fc !important;
}

.purple-300 {
  color: #c8aefc !important;
}

.purple-400 {
  color: #b693fa !important;
}

.purple-500 {
  color: #a57afa !important;
}

.purple-600 {
  color: #9463f7 !important;
}

.purple-700 {
  color: #8349f5 !important;
}

.purple-800 {
  color: #7231f5 !important;
}

.purple-900 {
  color: #6118f2 !important;
}

.bg-indigo-100 {
  background-color: #e1e4fc !important;
}

.bg-indigo-200 {
  background-color: #c7cffc !important;
}

.bg-indigo-300 {
  background-color: #afb9fa !important;
}

.bg-indigo-400 {
  background-color: #96a3fa !important;
}

.bg-indigo-500 {
  background-color: #7d8efa !important;
}

.bg-indigo-600 {
  background-color: #667afa !important;
}

.bg-indigo-700 {
  background-color: #4d64fa !important;
}

.bg-indigo-800 {
  background-color: #364ff5 !important;
}

.bg-indigo-900 {
  background-color: #1f3aed !important;
}

.indigo-100 {
  color: #e1e4fc !important;
}

.indigo-200 {
  color: #c7cffc !important;
}

.indigo-300 {
  color: #afb9fa !important;
}

.indigo-400 {
  color: #96a3fa !important;
}

.indigo-500 {
  color: #7d8efa !important;
}

.indigo-600 {
  color: #667afa !important;
}

.indigo-700 {
  color: #4d64fa !important;
}

.indigo-800 {
  color: #364ff5 !important;
}

.indigo-900 {
  color: #1f3aed !important;
}

.bg-blue-100 {
  background-color: #d9e9ff !important;
}

.bg-blue-200 {
  background-color: #b8d7ff !important;
}

.bg-blue-300 {
  background-color: #99c5ff !important;
}

.bg-blue-400 {
  background-color: #79b2fc !important;
}

.bg-blue-500 {
  background-color: #589ffc !important;
}

.bg-blue-600 {
  background-color: #3e8ef7 !important;
}

.bg-blue-700 {
  background-color: #247cf0 !important;
}

.bg-blue-800 {
  background-color: #0b69e3 !important;
}

.bg-blue-900 {
  background-color: #0053bf !important;
}

.blue-100 {
  color: #d9e9ff !important;
}

.blue-200 {
  color: #b8d7ff !important;
}

.blue-300 {
  color: #99c5ff !important;
}

.blue-400 {
  color: #79b2fc !important;
}

.blue-500 {
  color: #589ffc !important;
}

.blue-600 {
  color: #3e8ef7 !important;
}

.blue-700 {
  color: #247cf0 !important;
}

.blue-800 {
  color: #0b69e3 !important;
}

.blue-900 {
  color: #0053bf !important;
}

.bg-cyan-100 {
  background-color: #c2f5ff !important;
}

.bg-cyan-200 {
  background-color: #9de6f5 !important;
}

.bg-cyan-300 {
  background-color: #77d9ed !important;
}

.bg-cyan-400 {
  background-color: #54cbe3 !important;
}

.bg-cyan-500 {
  background-color: #28c0de !important;
}

.bg-cyan-600 {
  background-color: #0bb2d4 !important;
}

.bg-cyan-700 {
  background-color: #0099b8 !important;
}

.bg-cyan-800 {
  background-color: #007d96 !important;
}

.bg-cyan-900 {
  background-color: #006275 !important;
}

.cyan-100 {
  color: #c2f5ff !important;
}

.cyan-200 {
  color: #9de6f5 !important;
}

.cyan-300 {
  color: #77d9ed !important;
}

.cyan-400 {
  color: #54cbe3 !important;
}

.cyan-500 {
  color: #28c0de !important;
}

.cyan-600 {
  color: #0bb2d4 !important;
}

.cyan-700 {
  color: #0099b8 !important;
}

.cyan-800 {
  color: #007d96 !important;
}

.cyan-900 {
  color: #006275 !important;
}

.bg-teal-100 {
  background-color: #c3f7f2 !important;
}

.bg-teal-200 {
  background-color: #92f0e6 !important;
}

.bg-teal-300 {
  background-color: #6be3d7 !important;
}

.bg-teal-400 {
  background-color: #45d6c8 !important;
}

.bg-teal-500 {
  background-color: #28c7b7 !important;
}

.bg-teal-600 {
  background-color: #17b3a3 !important;
}

.bg-teal-700 {
  background-color: #089e8f !important;
}

.bg-teal-800 {
  background-color: #008577 !important;
}

.bg-teal-900 {
  background-color: #00665c !important;
}

.teal-100 {
  color: #c3f7f2 !important;
}

.teal-200 {
  color: #92f0e6 !important;
}

.teal-300 {
  color: #6be3d7 !important;
}

.teal-400 {
  color: #45d6c8 !important;
}

.teal-500 {
  color: #28c7b7 !important;
}

.teal-600 {
  color: #17b3a3 !important;
}

.teal-700 {
  color: #089e8f !important;
}

.teal-800 {
  color: #008577 !important;
}

.teal-900 {
  color: #00665c !important;
}

.bg-green-100 {
  background-color: #c2fadc !important;
}

.bg-green-200 {
  background-color: #99f2c2 !important;
}

.bg-green-300 {
  background-color: #72e8ab !important;
}

.bg-green-400 {
  background-color: #49de94 !important;
}

.bg-green-500 {
  background-color: #28d17c !important;
}

.bg-green-600 {
  background-color: #11c26d !important;
}

.bg-green-700 {
  background-color: #05a85c !important;
}

.bg-green-800 {
  background-color: #008c4d !important;
}

.bg-green-900 {
  background-color: #006e3c !important;
}


.menu-purple-bg{
    background-color: #4f05a8 !important;
}
.menu-red-bg{
    background-color: #bf272d !important;
}

.green-100 {
  color: #c2fadc !important;
}

.green-200 {
  color: #99f2c2 !important;
}

.green-300 {
  color: #72e8ab !important;
}

.green-400 {
  color: #49de94 !important;
}

.green-500 {
  color: #28d17c !important;
}

.green-600 {
  color: #11c26d !important;
}

.green-700 {
  color: #05a85c !important;
}

.green-800 {
  color: #008c4d !important;
}

.green-900 {
  color: #006e3c !important;
}

.bg-light-green-100 {
  background-color: #dcf7b0 !important;
}

.bg-light-green-200 {
  background-color: #c3e887 !important;
}

.bg-light-green-300 {
  background-color: #add966 !important;
}

.bg-light-green-400 {
  background-color: #94cc39 !important;
}

.bg-light-green-500 {
  background-color: #7eb524 !important;
}

.bg-light-green-600 {
  background-color: #6da611 !important;
}

.bg-light-green-700 {
  background-color: #5a9101 !important;
}

.bg-light-green-800 {
  background-color: #4a7800 !important;
}

.bg-light-green-900 {
  background-color: #3a5e00 !important;
}

.light-green-100 {
  color: #dcf7b0 !important;
}

.light-green-200 {
  color: #c3e887 !important;
}

.light-green-300 {
  color: #add966 !important;
}

.light-green-400 {
  color: #94cc39 !important;
}

.light-green-500 {
  color: #7eb524 !important;
}

.light-green-600 {
  color: #6da611 !important;
}

.light-green-700 {
  color: #5a9101 !important;
}

.light-green-800 {
  color: #4a7800 !important;
}

.light-green-900 {
  color: #3a5e00 !important;
}

.bg-yellow-100 {
  background-color: #fff6b5 !important;
}

.bg-yellow-200 {
  background-color: #fff39c !important;
}

.bg-yellow-300 {
  background-color: #ffed78 !important;
}

.bg-yellow-400 {
  background-color: #ffe54f !important;
}

.bg-yellow-500 {
  background-color: #ffdc2e !important;
}

.bg-yellow-600 {
  background-color: #ffcd17 !important;
}

.bg-yellow-700 {
  background-color: #fcb900 !important;
}

.bg-yellow-800 {
  background-color: #faa700 !important;
}

.bg-yellow-900 {
  background-color: #fa9600 !important;
}

.yellow-100 {
  color: #fff6b5 !important;
}

.yellow-200 {
  color: #fff39c !important;
}

.yellow-300 {
  color: #ffed78 !important;
}

.yellow-400 {
  color: #ffe54f !important;
}

.yellow-500 {
  color: #ffdc2e !important;
}

.yellow-600 {
  color: #ffcd17 !important;
}

.yellow-700 {
  color: #fcb900 !important;
}

.yellow-800 {
  color: #faa700 !important;
}

.yellow-900 {
  color: #fa9600 !important;
}

.bg-orange-100 {
  background-color: #ffe1c4 !important;
}

.bg-orange-200 {
  background-color: #ffc894 !important;
}

.bg-orange-300 {
  background-color: #fab06b !important;
}

.bg-orange-400 {
  background-color: #fa983c !important;
}

.bg-orange-500 {
  background-color: #f57d1b !important;
}

.bg-orange-600 {
  background-color: #eb6709 !important;
}

.bg-orange-700 {
  background-color: #de4e00 !important;
}

.bg-orange-800 {
  background-color: #b53f00 !important;
}

.bg-orange-900 {
  background-color: #962d00 !important;
}

.orange-100 {
  color: #ffe1c4 !important;
}

.orange-200 {
  color: #ffc894 !important;
}

.orange-300 {
  color: #fab06b !important;
}

.orange-400 {
  color: #fa983c !important;
}

.orange-500 {
  color: #f57d1b !important;
}

.orange-600 {
  color: #eb6709 !important;
}

.orange-700 {
  color: #de4e00 !important;
}

.orange-800 {
  color: #b53f00 !important;
}

.orange-900 {
  color: #962d00 !important;
}

.bg-brown-100 {
  background-color: #f5e2da !important;
}

.bg-brown-200 {
  background-color: #e0cdc5 !important;
}

.bg-brown-300 {
  background-color: #cfb8b0 !important;
}

.bg-brown-400 {
  background-color: #bda299 !important;
}

.bg-brown-500 {
  background-color: #ab8c82 !important;
}

.bg-brown-600 {
  background-color: #997b71 !important;
}

.bg-brown-700 {
  background-color: #82675f !important;
}

.bg-brown-800 {
  background-color: #6b534c !important;
}

.bg-brown-900 {
  background-color: #57403a !important;
}

.brown-100 {
  color: #f5e2da !important;
}

.brown-200 {
  color: #e0cdc5 !important;
}

.brown-300 {
  color: #cfb8b0 !important;
}

.brown-400 {
  color: #bda299 !important;
}

.brown-500 {
  color: #ab8c82 !important;
}

.brown-600 {
  color: #997b71 !important;
}

.brown-700 {
  color: #82675f !important;
}

.brown-800 {
  color: #6b534c !important;
}

.brown-900 {
  color: #57403a !important;
}

.bg-grey-100 {
  background-color: #fafafa !important;
}

.bg-grey-200 {
  background-color: #eee !important;
}

.bg-grey-300 {
  background-color: #e0e0e0 !important;
}

.bg-grey-400 {
  background-color: #bdbdbd !important;
}

.bg-grey-500 {
  background-color: #9e9e9e !important;
}

.bg-grey-600 {
  background-color: #757575 !important;
}

.bg-grey-700 {
  background-color: #616161 !important;
}

.bg-grey-800 {
  background-color: #424242 !important;
}

.bg-grey-900 {
  background-color: #474747 !important;
}

.grey-100 {
  color: #fafafa !important;
}

.grey-200 {
  color: #eee !important;
}

.grey-300 {
  color: #e0e0e0 !important;
}

.grey-400 {
  color: #bdbdbd !important;
}

.grey-500 {
  color: #9e9e9e !important;
}

.grey-600 {
  color: #757575 !important;
}

.grey-700 {
  color: #616161 !important;
}

.grey-800 {
  color: #424242 !important;
}

.grey-900 {
  color: #474747 !important;
}

.bg-blue-grey-100 {
  background-color: #f3f7f9 !important;
}

.bg-blue-grey-200 {
  background-color: #e4eaec !important;
}

.bg-blue-grey-300 {
  background-color: #ccd5db !important;
}

.bg-blue-grey-400 {
  background-color: #a3afb7 !important;
}

.bg-blue-grey-500 {
  background-color: #76838f !important;
}

.bg-blue-grey-600 {
  background-color: #526069 !important;
}

.bg-blue-grey-700 {
  background-color: #37474f !important;
}

.bg-blue-grey-800 {
  background-color: #263238 !important;
}

.bg-blue-grey-900 {
  background-color: #3e4854 !important;
}

.blue-grey-100 {
  color: #f3f7f9 !important;
}

.blue-grey-200 {
  color: #e4eaec !important;
}

.blue-grey-300 {
  color: #ccd5db !important;
}

.blue-grey-400 {
  color: #a3afb7 !important;
}

.blue-grey-500 {
  color: #76838f !important;
}

.blue-grey-600 {
  color: #526069 !important;
}

.blue-grey-700 {
  color: #37474f !important;
}

.blue-grey-800 {
  color: #263238 !important;
}

.blue-grey-900 {
  color: #3e4854 !important;
}

.bg-primary-100 {
  background-color: #d9e9ff !important;
}

.bg-primary-200 {
  background-color: #b8d7ff !important;
}

.bg-primary-300 {
  background-color: #99c5ff !important;
}

.bg-primary-400 {
  background-color: #79b2fc !important;
}

.bg-primary-500 {
  background-color: #589ffc !important;
}

.bg-primary-600 {
  background-color: #3e8ef7 !important;
}

.bg-primary-700 {
  background-color: #247cf0 !important;
}

.bg-primary-800 {
  background-color: #0b69e3 !important;
}

.primary-100 {
  color: #d9e9ff !important;
}

.primary-200 {
  color: #b8d7ff !important;
}

.primary-300 {
  color: #99c5ff !important;
}

.primary-400 {
  color: #79b2fc !important;
}

.primary-500 {
  color: #589ffc !important;
}

.primary-600 {
  color: #3e8ef7 !important;
}

.primary-700 {
  color: #247cf0 !important;
}

.primary-800 {
  color: #0b69e3 !important;
}

.black {
  color: #000 !important;
}

.white {
  color: #fff !important;
}

.bg-white {
  color: #76838f;
  background-color: #fff !important;
}

.bg-primary {
  color: #fff;
  background-color: #3e8ef7;
}

.bg-primary:hover {
  background-color: #6fabf9;
}

.bg-primary a, .bg-primary a.bg-primary {
  color: #fff;
}

.bg-primary a:hover, .bg-primary a.bg-primary:hover {
  color: #fff;
}

.bg-success {
  color: #fff;
  background-color: #11c26d;
}

.bg-success:hover {
  background-color: #1beb87;
}

.bg-success a, .bg-success a.bg-primary {
  color: #fff;
}

.bg-success a:hover, .bg-success a.bg-primary:hover {
  color: #fff;
}

.bg-info {
  color: #fff;
  background-color: #0bb2d4;
}

.bg-info:hover {
  background-color: #1fcff3;
}

.bg-info a, .bg-info a.bg-info {
  color: #fff;
}

.bg-info a:hover, .bg-info a.bg-info:hover {
  color: #fff;
}

.bg-warning {
  color: #fff;
  background-color: #eb6709;
}

.bg-warning:hover {
  background-color: #f78330;
}

.bg-warning a, .bg-warning a.bg-warning {
  color: #fff;
}

.bg-warning a:hover, .bg-warning a.bg-warning:hover {
  color: #fff;
}

.bg-danger {
  color: #fff;
  background-color: #ff4c52;
}

.bg-danger:hover {
  background-color: #ff7f83;
}

.bg-danger a, .bg-danger a.bg-danger {
  color: #fff;
}

.bg-danger a:hover, .bg-danger a.bg-danger:hover {
  color: #fff;
}

.bg-dark {
  color: #fff;
  background-color: #526069;
}

.bg-dark:hover {
  background-color: #687a86;
}

.bg-dark a, .bg-dark a.bg-dark {
  color: #fff;
}

.bg-dark a:hover, .bg-dark a.bg-dark:hover {
  color: #fff;
}

.social-facebook {
  color: #fff;
  background-color: #3b5998 !important;
}

.social-facebook:hover, .social-facebook:focus {
  color: #fff;
  background-color: #4c70ba !important;
}

.social-facebook:active, .social-facebook.active {
  color: #fff;
  background-color: #2d4373 !important;
}

.bg-facebook {
  background-color: #3b5998;
}

.social-twitter {
  color: #fff;
  background-color: #55acee !important;
}

.social-twitter:hover, .social-twitter:focus {
  color: #fff;
  background-color: #83c3f3 !important;
}

.social-twitter:active, .social-twitter.active {
  color: #fff;
  background-color: #2795e9 !important;
}

.bg-twitter {
  background-color: #55acee;
}

.social-google-plus {
  color: #fff;
  background-color: #dd4b39 !important;
}

.social-google-plus:hover, .social-google-plus:focus {
  color: #fff;
  background-color: #e47365 !important;
}

.social-google-plus:active, .social-google-plus.active {
  color: #fff;
  background-color: #c23321 !important;
}

.bg-google-plus {
  background-color: #dd4b39;
}

.social-linkedin {
  color: #fff;
  background-color: #0976b4 !important;
}

.social-linkedin:hover, .social-linkedin:focus {
  color: #fff;
  background-color: #0b96e5 !important;
}

.social-linkedin:active, .social-linkedin.active {
  color: #fff;
  background-color: #075683 !important;
}

.bg-linkedin {
  background-color: #0976b4;
}

.social-flickr {
  color: #fff;
  background-color: #ff0084 !important;
}

.social-flickr:hover, .social-flickr:focus {
  color: #fff;
  background-color: #ff339d !important;
}

.social-flickr:active, .social-flickr.active {
  color: #fff;
  background-color: #cc006a !important;
}

.bg-flickr {
  background-color: #ff0084;
}

.social-tumblr {
  color: #fff;
  background-color: #35465c !important;
}

.social-tumblr:hover, .social-tumblr:focus {
  color: #fff;
  background-color: #485f7c !important;
}

.social-tumblr:active, .social-tumblr.active {
  color: #fff;
  background-color: #222d3c !important;
}

.bg-tumblr {
  background-color: #35465c;
}

.social-xing {
  color: #fff;
  background-color: #024b4d !important;
}

.social-xing:hover, .social-xing:focus {
  color: #fff;
  background-color: #037b7f !important;
}

.social-xing:active, .social-xing.active {
  color: #fff;
  background-color: #011b1b !important;
}

.bg-xing {
  background-color: #024b4d;
}

.social-github {
  color: #fff;
  background-color: #4183c4 !important;
}

.social-github:hover, .social-github:focus {
  color: #fff;
  background-color: #689cd0 !important;
}

.social-github:active, .social-github.active {
  color: #fff;
  background-color: #3269a0 !important;
}

.bg-github {
  background-color: #4183c4;
}

.social-html5 {
  color: #fff;
  background-color: #e44f26 !important;
}

.social-html5:hover, .social-html5:focus {
  color: #fff;
  background-color: #ea7453 !important;
}

.social-html5:active, .social-html5.active {
  color: #fff;
  background-color: #bf3c18 !important;
}

.bg-html5 {
  background-color: #e44f26;
}

.social-openid {
  color: #fff;
  background-color: #f67d28 !important;
}

.social-openid:hover, .social-openid:focus {
  color: #fff;
  background-color: #f89b59 !important;
}

.social-openid:active, .social-openid.active {
  color: #fff;
  background-color: #e26309 !important;
}

.bg-openid {
  background-color: #f67d28;
}

.social-stack-overflow {
  color: #fff;
  background-color: #f86c01 !important;
}

.social-stack-overflow:hover, .social-stack-overflow:focus {
  color: #fff;
  background-color: #fe882e !important;
}

.social-stack-overflow:active, .social-stack-overflow.active {
  color: #fff;
  background-color: #c55601 !important;
}

.bg-stack-overflow {
  background-color: #f86c01;
}

.social-css3 {
  color: #fff;
  background-color: #1572b6 !important;
}

.social-css3:hover, .social-css3:focus {
  color: #fff;
  background-color: #1a8fe4 !important;
}

.social-css3:active, .social-css3.active {
  color: #fff;
  background-color: #105588 !important;
}

.bg-css3 {
  background-color: #1572b6;
}

.social-youtube {
  color: #fff;
  background-color: #b31217 !important;
}

.social-youtube:hover, .social-youtube:focus {
  color: #fff;
  background-color: #e1171d !important;
}

.social-youtube:active, .social-youtube.active {
  color: #fff;
  background-color: #850d11 !important;
}

.bg-youtube {
  background-color: #b31217;
}

.social-dribbble {
  color: #fff;
  background-color: #c32361 !important;
}

.social-dribbble:hover, .social-dribbble:focus {
  color: #fff;
  background-color: #dc3d7b !important;
}

.social-dribbble:active, .social-dribbble.active {
  color: #fff;
  background-color: #981b4b !important;
}

.bg-dribbble {
  background-color: #c32361;
}

.social-instagram {
  color: #fff;
  background-color: #3f729b !important;
}

.social-instagram:hover, .social-instagram:focus {
  color: #fff;
  background-color: #548cb9 !important;
}

.social-instagram:active, .social-instagram.active {
  color: #fff;
  background-color: #305777 !important;
}

.bg-instagram {
  background-color: #3f729b;
}

.social-pinterest {
  color: #fff;
  background-color: #cc2127 !important;
}

.social-pinterest:hover, .social-pinterest:focus {
  color: #fff;
  background-color: #e04046 !important;
}

.social-pinterest:active, .social-pinterest.active {
  color: #fff;
  background-color: #a01a1f !important;
}

.bg-pinterest {
  background-color: #cc2127;
}

.social-vk {
  color: #fff;
  background-color: #3d5a7d !important;
}

.social-vk:hover, .social-vk:focus {
  color: #fff;
  background-color: #4e739f !important;
}

.social-vk:active, .social-vk.active {
  color: #fff;
  background-color: #2c415b !important;
}

.bg-vk {
  background-color: #3d5a7d;
}

.social-yahoo {
  color: #fff;
  background-color: #350178 !important;
}

.social-yahoo:hover, .social-yahoo:focus {
  color: #fff;
  background-color: #4b01ab !important;
}

.social-yahoo:active, .social-yahoo.active {
  color: #fff;
  background-color: #1f0145 !important;
}

.bg-yahoo {
  background-color: #350178;
}

.social-behance {
  color: #fff;
  background-color: #1769ff !important;
}

.social-behance:hover, .social-behance:focus {
  color: #fff;
  background-color: #4a8aff !important;
}

.social-behance:active, .social-behance.active {
  color: #fff;
  background-color: #0050e3 !important;
}

.bg-behance {
  background-color: #024b4d;
}

.social-dropbox {
  color: #fff;
  background-color: #007ee5 !important;
}

.social-dropbox:hover, .social-dropbox:focus {
  color: #fff;
  background-color: #1998ff !important;
}

.social-dropbox:active, .social-dropbox.active {
  color: #fff;
  background-color: #0062b2 !important;
}

.bg-dropbox {
  background-color: #007ee5;
}

.social-reddit {
  color: #fff;
  background-color: #ff4500 !important;
}

.social-reddit:hover, .social-reddit:focus {
  color: #fff;
  background-color: #ff6a33 !important;
}

.social-reddit:active, .social-reddit.active {
  color: #fff;
  background-color: #cc3700 !important;
}

.bg-reddit {
  background-color: #ff4500;
}

.social-spotify {
  color: #fff;
  background-color: #7ab800 !important;
}

.social-spotify:hover, .social-spotify:focus {
  color: #fff;
  background-color: #9ceb00 !important;
}

.social-spotify:active, .social-spotify.active {
  color: #fff;
  background-color: #588500 !important;
}

.bg-spotify {
  background-color: #7ab800;
}

.social-vine {
  color: #fff;
  background-color: #00b488 !important;
}

.social-vine:hover, .social-vine:focus {
  color: #fff;
  background-color: #00e7af !important;
}

.social-vine:active, .social-vine.active {
  color: #fff;
  background-color: #008161 !important;
}

.bg-vine {
  background-color: #00b488;
}

.social-foursquare {
  color: #fff;
  background-color: #0cbadf !important;
}

.social-foursquare:hover, .social-foursquare:focus {
  color: #fff;
  background-color: #2ad0f4 !important;
}

.social-foursquare:active, .social-foursquare.active {
  color: #fff;
  background-color: #0992af !important;
}

.bg-foursquare {
  background-color: #0cbadf;
}

.social-vimeo {
  color: #fff;
  background-color: #1ab7ea !important;
}

.social-vimeo:hover, .social-vimeo:focus {
  color: #fff;
  background-color: #49c6ee !important;
}

.social-vimeo:active, .social-vimeo.active {
  color: #fff;
  background-color: #1295bf !important;
}

.bg-vimeo {
  background-color: #1ab7ea;
}

.social-skype {
  color: #fff;
  background-color: #77bcfd !important;
}

.social-skype:hover, .social-skype:focus {
  color: #fff;
  background-color: #a9d5fe !important;
}

.social-skype:active, .social-skype.active {
  color: #fff;
  background-color: #45a3fc !important;
}

.bg-skype {
  background-color: #77bcfd;
}

.social-evernote {
  color: #fff;
  background-color: #46bf8c !important;
}

.social-evernote:hover, .social-evernote:focus {
  color: #fff;
  background-color: #6ccca4 !important;
}

.social-evernote:active, .social-evernote.active {
  color: #fff;
  background-color: #369c71 !important;
}

.bg-evernote {
  background-color: #46bf8c;
}

.w-20 {
  width: 20px !important;
}

.w-30 {
  width: 30px !important;
}

.w-40 {
  width: 40px !important;
}

.w-50 {
  width: 50px !important;
}

.w-60 {
  width: 60px !important;
}

.w-80 {
  width: 80px !important;
}

.w-100 {
  width: 100px !important;
}

.w-120 {
  width: 120px !important;
}

.w-150 {
  width: 150px !important;
}

.w-160 {
  width: 160px !important;
}

.w-200 {
  width: 200px !important;
}

.w-250 {
  width: 250px !important;
}

.w-300 {
  width: 300px !important;
}

.w-350 {
  width: 350px !important;
}

.w-400 {
  width: 400px !important;
}

.w-450 {
  width: 450px !important;
}

.w-500 {
  width: 500px !important;
}

.w-p5 {
  width: 5% !important;
}

.w-p10 {
  width: 10% !important;
}

.w-p15 {
  width: 15% !important;
}

.w-p20 {
  width: 20% !important;
}

.w-p25 {
  width: 25% !important;
}

.w-p30 {
  width: 30% !important;
}

.w-p33 {
  width: 33.3333% !important;
}

.w-p50 {
  width: 50% !important;
}

.w-p75 {
  width: 75% !important;
}

.w-p100 {
  width: 100% !important;
}

.h-20 {
  height: 20px !important;
}

.h-30 {
  height: 30px !important;
}

.h-40 {
  height: 40px !important;
}

.h-50 {
  height: 50px !important;
}

.h-60 {
  height: 60px !important;
}

.h-80 {
  height: 80px !important;
}

.h-100 {
  height: 100px !important;
}

.h-120 {
  height: 120px !important;
}

.h-150 {
  height: 150px !important;
}

.h-160 {
  height: 160px !important;
}

.h-200 {
  height: 200px !important;
}

.h-250 {
  height: 250px !important;
}

.h-300 {
  height: 300px !important;
}

.h-350 {
  height: 350px !important;
}

.h-400 {
  height: 400px !important;
}

.h-450 {
  height: 450px !important;
}

.h-500 {
  height: 500px !important;
}

.h-p5 {
  height: 5% !important;
}

.h-p10 {
  height: 10% !important;
}

.h-p15 {
  height: 15% !important;
}

.h-p20 {
  height: 20% !important;
}

.h-p25 {
  height: 25% !important;
}

.h-p30 {
  height: 30% !important;
}

.h-p33 {
  height: 33.3333% !important;
}

.h-p50 {
  height: 50% !important;
}

.h-p75 {
  height: 75% !important;
}

.h-p100 {
  height: 100% !important;
}

.w-auto {
  width: auto !important;
}

.h-auto {
  height: auto !important;
}

.w-full {
  width: 100% !important;
}

.h-full {
  height: 100% !important;
}

.ribbon {
    position: absolute;
    top: -3px;
    left: -3px;
    width: 150px;
    height: 150px;
    text-align: center;
    background-color: transparent
}

.ribbon-inner {
    position: absolute;
    top: 16px;
    left: 0;
    display: inline-block;
    max-width: 100%;
    height: 30px;
    padding-right: 20px;
    padding-left: 20px;
    overflow: hidden;
    line-height: 30px;
    color: #fff;
    text-overflow: ellipsis;
    white-space: nowrap;
    background-color: #526069
}

.ribbon-inner .icon {
    font-size: 16px
}

.ribbon-lg .ribbon-inner {
    height: 38px;
    font-size: 1.286rem;
    line-height: 38px
}

.ribbon-sm .ribbon-inner {
    height: 26px;
    font-size: .858rem;
    line-height: 26px
}

.ribbon-xs .ribbon-inner {
    height: 22px;
    font-size: .858rem;
    line-height: 22px
}

.ribbon-vertical .ribbon-inner {
    top: 0;
    left: 16px;
    width: 30px;
    height: 60px;
    padding: 15px 0
}

.ribbon-vertical.ribbon-xs .ribbon-inner {
    width: 22px;
    height: 50px
}

.ribbon-vertical.ribbon-sm .ribbon-inner {
    width: 26px;
    height: 55px
}

.ribbon-vertical.ribbon-lg .ribbon-inner {
    width: 38px;
    height: 70px
}

.ribbon-reverse {
    right: -3px;
    left: auto
}

.ribbon-reverse .ribbon-inner {
    right: 0;
    left: auto
}

.ribbon-reverse.ribbon-vertical .ribbon-inner {
    right: 16px
}

.ribbon-bookmark .ribbon-inner {
    padding-right: 42px;
    background-color: transparent;
    background-image: linear-gradient(to left,transparent 22px,#526069 0);
    box-shadow: none
}

.ribbon-bookmark .ribbon-inner:before {
    position: absolute;
    top: 0;
    right: 0;
    display: block;
    width: 0;
    height: 0;
    content: "";
    border: 15px solid #526069;
    border-right: 10px solid transparent
}

.ribbon-bookmark.ribbon-vertical .ribbon-inner {
    height: 82px;
    padding-right: 0;
    padding-bottom: 37px;
    background-image: linear-gradient(to top,transparent 22px,#526069 0)
}

.ribbon-bookmark.ribbon-vertical .ribbon-inner:before {
    top: auto;
    bottom: 0;
    left: 0;
    margin-top: -15px;
    border-right: 15px solid #526069;
    border-bottom: 10px solid transparent
}

.ribbon-bookmark.ribbon-vertical.ribbon-xs .ribbon-inner:before {
    margin-top: -11px
}

.ribbon-bookmark.ribbon-vertical.ribbon-sm .ribbon-inner:before {
    margin-top: -13px
}

.ribbon-bookmark.ribbon-vertical.ribbon-lg .ribbon-inner:before {
    margin-top: -19px
}

.ribbon-bookmark.ribbon-reverse .ribbon-inner {
    padding-right: 20px;
    padding-left: 42px;
    background-image: linear-gradient(to right,transparent 22px,#526069 0)
}

.ribbon-bookmark.ribbon-reverse .ribbon-inner:before {
    left: 0;
    border-right: 15px solid #526069;
    border-left: 10px solid transparent
}

.ribbon-bookmark.ribbon-reverse.ribbon-vertical .ribbon-inner {
    padding-right: 0;
    padding-left: 0
}

.ribbon-bookmark.ribbon-reverse.ribbon-vertical .ribbon-inner:before {
    right: auto;
    left: 0;
    border-right-color: #526069;
    border-bottom-color: transparent;
    border-left: 15px solid #526069
}

.ribbon-bookmark.ribbon-xs .ribbon-inner:before {
    border-width: 11px
}

.ribbon-bookmark.ribbon-sm .ribbon-inner:before {
    border-width: 13px
}

.ribbon-bookmark.ribbon-lg .ribbon-inner:before {
    border-width: 19px
}

.ribbon-badge {
    top: -2px;
    left: -2px;
    overflow: hidden
}

.ribbon-badge .ribbon-inner {
    left: -40px;
    width: 100%;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg)
}

.ribbon-badge.ribbon-reverse {
    right: -2px;
    left: auto
}

.ribbon-badge.ribbon-reverse .ribbon-inner {
    right: -40px;
    left: auto;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg)
}

.ribbon-badge.ribbon-bottom {
    top: auto;
    bottom: -2px
}

.ribbon-badge.ribbon-bottom .ribbon-inner {
    top: auto;
    bottom: 16px;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg)
}

.ribbon-badge.ribbon-bottom.ribbon-reverse .ribbon-inner {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg)
}

.ribbon-corner {
    top: 0;
    left: 0;
    overflow: hidden
}

.ribbon-corner:before {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    content: "";
    border: 25px solid transparent;
    border-top-color: #526069;
    border-left-color: #526069
}

.ribbon-corner .ribbon-inner {
    top: 0;
    left: 0;
    width: 30px;
    height: 35px;
    padding: 0;
    line-height: 30px;
    background-color: transparent
}

.ribbon-corner.ribbon-reverse {
    right: 0;
    left: auto
}

.ribbon-corner.ribbon-reverse:before {
    right: 0;
    left: auto;
    border-right-color: #526069;
    border-left-color: transparent
}

.ribbon-corner.ribbon-reverse .ribbon-inner {
    right: 0;
    left: auto
}

.ribbon-corner.ribbon-bottom {
    top: auto;
    bottom: 0
}

.ribbon-corner.ribbon-bottom:before {
    top: auto;
    bottom: 0;
    border-top-color: transparent;
    border-bottom-color: #526069
}

.ribbon-corner.ribbon-bottom .ribbon-inner {
    top: auto;
    bottom: 0
}

.ribbon-corner.ribbon-xs:before {
    border-width: 22px
}

.ribbon-corner.ribbon-xs .ribbon-inner {
    width: 28px;
    height: 26px;
    line-height: 26px
}

.ribbon-corner.ribbon-xs .ribbon-inner>.icon {
    font-size: .858rem
}

.ribbon-corner.ribbon-sm:before {
    border-width: 26px
}

.ribbon-corner.ribbon-sm .ribbon-inner {
    width: 34px;
    height: 32px;
    line-height: 32px
}

.ribbon-corner.ribbon-sm .ribbon-inner>.icon {
    font-size: .858rem
}

.ribbon-corner.ribbon-lg:before {
    border-width: 36px
}

.ribbon-corner.ribbon-lg .ribbon-inner {
    width: 46px;
    height: 44px;
    line-height: 44px
}

.ribbon-corner.ribbon-lg .ribbon-inner>.icon {
    font-size: 1.286rem
}

.ribbon-clip {
    left: -14px
}

.ribbon-clip:before {
    position: absolute;
    top: 46px;
    left: 0;
    width: 0;
    height: 0;
    content: "";
    border: 7px solid transparent;
    border-top-color: #37474f;
    border-right-color: #37474f
}

.ribbon-clip .ribbon-inner {
    padding-left: 23px;
    border-radius: 0 5px 5px 0
}

.ribbon-clip.ribbon-reverse {
    right: -14px;
    left: auto
}

.ribbon-clip.ribbon-reverse:before {
    right: 0;
    left: auto;
    border-right-color: transparent;
    border-left-color: #37474f
}

.ribbon-clip.ribbon-reverse .ribbon-inner {
    padding-right: 23px;
    padding-left: 15px;
    border-radius: 5px 0 0 5px
}

.ribbon-clip.ribbon-bottom {
    top: auto;
    bottom: -3px
}

.ribbon-clip.ribbon-bottom:before {
    top: auto;
    bottom: 46px;
    border-top-color: transparent;
    border-bottom-color: #37474f
}

.ribbon-clip.ribbon-bottom .ribbon-inner {
    top: auto;
    bottom: 16px
}

.ribbon-clip.ribbon-xs:before {
    top: 38px
}

.ribbon-clip.ribbon-xs.ribbon-bottom:before {
    top: auto;
    bottom: 38px
}

.ribbon-clip.ribbon-sm:before {
    top: 42px
}

.ribbon-clip.ribbon-sm.ribbon-bottom:before {
    top: auto;
    bottom: 42px
}

.ribbon-clip.ribbon-lg:before {
    top: 54px
}

.ribbon-clip.ribbon-lg.ribbon-bottom:before {
    top: auto;
    bottom: 54px
}

.ribbon-primary .ribbon-inner {
    background-color: #3e8ef7
}

.ribbon-primary.ribbon-bookmark .ribbon-inner {
    background-color: transparent;
    background-image: linear-gradient(to left,transparent 22px,#3e8ef7 0)
}

.ribbon-primary.ribbon-bookmark .ribbon-inner:before {
    border-color: #3e8ef7;
    border-right-color: transparent
}

.ribbon-primary.ribbon-bookmark.ribbon-reverse .ribbon-inner {
    background-image: linear-gradient(to right,transparent 22px,#3e8ef7 0)
}

.ribbon-primary.ribbon-bookmark.ribbon-reverse .ribbon-inner:before {
    border-right-color: #3e8ef7;
    border-left-color: transparent
}

.ribbon-primary.ribbon-bookmark.ribbon-vertical .ribbon-inner {
    background-image: linear-gradient(to top,transparent 22px,#3e8ef7 0)
}

.ribbon-primary.ribbon-bookmark.ribbon-vertical .ribbon-inner:before {
    border-right-color: #3e8ef7;
    border-bottom-color: transparent
}

.ribbon-primary.ribbon-bookmark.ribbon-vertical.ribbon-reverse .ribbon-inner:before {
    border-right-color: #3e8ef7;
    border-bottom-color: transparent;
    border-left-color: #3e8ef7
}

.ribbon-primary.ribbon-corner:before {
    border-top-color: #3e8ef7;
    border-left-color: #3e8ef7
}

.ribbon-primary.ribbon-corner .ribbon-inner {
    background-color: transparent
}

.ribbon-primary.ribbon-corner.ribbon-reverse:before {
    border-right-color: #3e8ef7;
    border-left-color: transparent
}

.ribbon-primary.ribbon-corner.ribbon-bottom:before {
    border-top-color: transparent;
    border-bottom-color: #3e8ef7
}

.ribbon-primary.ribbon-clip:before {
    border-top-color: #247cf0;
    border-right-color: #247cf0
}

.ribbon-primary.ribbon-clip.ribbon-reverse:before {
    border-right-color: transparent;
    border-left-color: #247cf0
}

.ribbon-primary.ribbon-clip.ribbon-bottom:before {
    border-top-color: transparent;
    border-bottom-color: #247cf0
}

.ribbon-success .ribbon-inner {
    background-color: #11c26d
}

.ribbon-success.ribbon-bookmark .ribbon-inner {
    background-color: transparent;
    background-image: linear-gradient(to left,transparent 22px,#11c26d 0)
}

.ribbon-success.ribbon-bookmark .ribbon-inner:before {
    border-color: #11c26d;
    border-right-color: transparent
}

.ribbon-success.ribbon-bookmark.ribbon-reverse .ribbon-inner {
    background-image: linear-gradient(to right,transparent 22px,#11c26d 0)
}

.ribbon-success.ribbon-bookmark.ribbon-reverse .ribbon-inner:before {
    border-right-color: #11c26d;
    border-left-color: transparent
}

.ribbon-success.ribbon-bookmark.ribbon-vertical .ribbon-inner {
    background-image: linear-gradient(to top,transparent 22px,#11c26d 0)
}

.ribbon-success.ribbon-bookmark.ribbon-vertical .ribbon-inner:before {
    border-right-color: #11c26d;
    border-bottom-color: transparent
}

.ribbon-success.ribbon-bookmark.ribbon-vertical.ribbon-reverse .ribbon-inner:before {
    border-right-color: #11c26d;
    border-bottom-color: transparent;
    border-left-color: #11c26d
}

.ribbon-success.ribbon-corner:before {
    border-top-color: #11c26d;
    border-left-color: #11c26d
}

.ribbon-success.ribbon-corner .ribbon-inner {
    background-color: transparent
}

.ribbon-success.ribbon-corner.ribbon-reverse:before {
    border-right-color: #11c26d;
    border-left-color: transparent
}

.ribbon-success.ribbon-corner.ribbon-bottom:before {
    border-top-color: transparent;
    border-bottom-color: #11c26d
}

.ribbon-success.ribbon-clip:before {
    border-top-color: #05a85c;
    border-right-color: #05a85c
}

.ribbon-success.ribbon-clip.ribbon-reverse:before {
    border-right-color: transparent;
    border-left-color: #05a85c
}

.ribbon-success.ribbon-clip.ribbon-bottom:before {
    border-top-color: transparent;
    border-bottom-color: #05a85c
}

.ribbon-info .ribbon-inner {
    background-color: #0bb2d4
}

.ribbon-info.ribbon-bookmark .ribbon-inner {
    background-color: transparent;
    background-image: linear-gradient(to left,transparent 22px,#0bb2d4 0)
}

.ribbon-info.ribbon-bookmark .ribbon-inner:before {
    border-color: #0bb2d4;
    border-right-color: transparent
}

.ribbon-info.ribbon-bookmark.ribbon-reverse .ribbon-inner {
    background-image: linear-gradient(to right,transparent 22px,#0bb2d4 0)
}

.ribbon-info.ribbon-bookmark.ribbon-reverse .ribbon-inner:before {
    border-right-color: #0bb2d4;
    border-left-color: transparent
}

.ribbon-info.ribbon-bookmark.ribbon-vertical .ribbon-inner {
    background-image: linear-gradient(to top,transparent 22px,#0bb2d4 0)
}

.ribbon-info.ribbon-bookmark.ribbon-vertical .ribbon-inner:before {
    border-right-color: #0bb2d4;
    border-bottom-color: transparent
}

.ribbon-info.ribbon-bookmark.ribbon-vertical.ribbon-reverse .ribbon-inner:before {
    border-right-color: #0bb2d4;
    border-bottom-color: transparent;
    border-left-color: #0bb2d4
}

.ribbon-info.ribbon-corner:before {
    border-top-color: #0bb2d4;
    border-left-color: #0bb2d4
}

.ribbon-info.ribbon-corner .ribbon-inner {
    background-color: transparent
}

.ribbon-info.ribbon-corner.ribbon-reverse:before {
    border-right-color: #0bb2d4;
    border-left-color: transparent
}

.ribbon-info.ribbon-corner.ribbon-bottom:before {
    border-top-color: transparent;
    border-bottom-color: #0bb2d4
}

.ribbon-info.ribbon-clip:before {
    border-top-color: #0099b8;
    border-right-color: #0099b8
}

.ribbon-info.ribbon-clip.ribbon-reverse:before {
    border-right-color: transparent;
    border-left-color: #0099b8
}

.ribbon-info.ribbon-clip.ribbon-bottom:before {
    border-top-color: transparent;
    border-bottom-color: #0099b8
}

.ribbon-warning .ribbon-inner {
    background-color: #eb6709
}

.ribbon-warning.ribbon-bookmark .ribbon-inner {
    background-color: transparent;
    background-image: linear-gradient(to left,transparent 22px,#eb6709 0)
}

.ribbon-warning.ribbon-bookmark .ribbon-inner:before {
    border-color: #eb6709;
    border-right-color: transparent
}

.ribbon-warning.ribbon-bookmark.ribbon-reverse .ribbon-inner {
    background-image: linear-gradient(to right,transparent 22px,#eb6709 0)
}

.ribbon-warning.ribbon-bookmark.ribbon-reverse .ribbon-inner:before {
    border-right-color: #eb6709;
    border-left-color: transparent
}

.ribbon-warning.ribbon-bookmark.ribbon-vertical .ribbon-inner {
    background-image: linear-gradient(to top,transparent 22px,#eb6709 0)
}

.ribbon-warning.ribbon-bookmark.ribbon-vertical .ribbon-inner:before {
    border-right-color: #eb6709;
    border-bottom-color: transparent
}

.ribbon-warning.ribbon-bookmark.ribbon-vertical.ribbon-reverse .ribbon-inner:before {
    border-right-color: #eb6709;
    border-bottom-color: transparent;
    border-left-color: #eb6709
}

.ribbon-warning.ribbon-corner:before {
    border-top-color: #eb6709;
    border-left-color: #eb6709
}

.ribbon-warning.ribbon-corner .ribbon-inner {
    background-color: transparent
}

.ribbon-warning.ribbon-corner.ribbon-reverse:before {
    border-right-color: #eb6709;
    border-left-color: transparent
}

.ribbon-warning.ribbon-corner.ribbon-bottom:before {
    border-top-color: transparent;
    border-bottom-color: #eb6709
}

.ribbon-warning.ribbon-clip:before {
    border-top-color: #de4e00;
    border-right-color: #de4e00
}

.ribbon-warning.ribbon-clip.ribbon-reverse:before {
    border-right-color: transparent;
    border-left-color: #de4e00
}

.ribbon-warning.ribbon-clip.ribbon-bottom:before {
    border-top-color: transparent;
    border-bottom-color: #de4e00
}

.ribbon-danger .ribbon-inner {
    background-color: #ff4c52
}

.ribbon-danger.ribbon-bookmark .ribbon-inner {
    background-color: transparent;
    background-image: linear-gradient(to left,transparent 22px,#ff4c52 0)
}

.ribbon-danger.ribbon-bookmark .ribbon-inner:before {
    border-color: #ff4c52;
    border-right-color: transparent
}

.ribbon-danger.ribbon-bookmark.ribbon-reverse .ribbon-inner {
    background-image: linear-gradient(to right,transparent 22px,#ff4c52 0)
}

.ribbon-danger.ribbon-bookmark.ribbon-reverse .ribbon-inner:before {
    border-right-color: #ff4c52;
    border-left-color: transparent
}

.ribbon-danger.ribbon-bookmark.ribbon-vertical .ribbon-inner {
    background-image: linear-gradient(to top,transparent 22px,#ff4c52 0)
}

.ribbon-danger.ribbon-bookmark.ribbon-vertical .ribbon-inner:before {
    border-right-color: #ff4c52;
    border-bottom-color: transparent
}

.ribbon-danger.ribbon-bookmark.ribbon-vertical.ribbon-reverse .ribbon-inner:before {
    border-right-color: #ff4c52;
    border-bottom-color: transparent;
    border-left-color: #ff4c52
}

.ribbon-danger.ribbon-corner:before {
    border-top-color: #ff4c52;
    border-left-color: #ff4c52
}

.ribbon-danger.ribbon-corner .ribbon-inner {
    background-color: transparent
}

.ribbon-danger.ribbon-corner.ribbon-reverse:before {
    border-right-color: #ff4c52;
    border-left-color: transparent
}

.ribbon-danger.ribbon-corner.ribbon-bottom:before {
    border-top-color: transparent;
    border-bottom-color: #ff4c52
}

.ribbon-danger.ribbon-clip:before {
    border-top-color: #f2353c;
    border-right-color: #f2353c
}

.ribbon-danger.ribbon-clip.ribbon-reverse:before {
    border-right-color: transparent;
    border-left-color: #f2353c
}

.ribbon-danger.ribbon-clip.ribbon-bottom:before {
    border-top-color: transparent;
    border-bottom-color: #f2353c
}

.example {
  position: relative;
  padding: 50px 15px 15px 50px;
  background-color: #f3f7fa;
  border: 1px solid #eee; 
}

.example-reverse {
  padding: 50px 50px 15px 15px; 
}
  
.example-bottom {
  padding: 15px 15px 50px 50px; 
}

.example-bottom-reverse {
  padding: 15px 50px 50px 15px; 
}

.badge-notification {
  position: relative;
  margin-left: 50%;
  margin-top: -60%;
  font-family: monospace;
  padding: 4px;
  line-height: 7px;
  font-size: 10px;
}