.is-active {
  color: red !important;
}

.not-active {
  color: grey;
}

.bottom-bar {
  height: 60px;
}

.map-container {
  margin-left: 5%;
  margin-right: 5%;
}

.app-container {
  margin-left: 5%;
  margin-right: 5%;
  display: flex;
}

.v2-form-container {
  margin-left: 5%;
  margin-right: 5%;
  /* display:flex; */
}

.shop-container {
  margin-left: 5%;
  margin-right: 5%;
}

.ticket-popup-container {
  margin-left: 5%;
  margin-right: 5%;
}

.order-detail-popup {
  margin-left: 5%;
  margin-right: 5%;
}

.event-product-container {
  margin-left: 2%;
  margin-right: 2%;
}

.about-page-container {
  margin-left: 1%;
  margin-right: 1%;
}

.trans-hist-container {
  width: 100%;
  margin: 0px;
  border-radius: 0px;
}

.home-menu {
  margin-left: 5%;
  margin-right: 6%;
  display: block;
}

.fixed {
  width: 75px;
}

.flex-item {
  flex-grow: 1;
}

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

.warning-msg {
  color: red;
  margin-top: 10px;
}

.incident-desc {
  text-align: center;
  margin-bottom: 20px;
  font-size: 14px;
  color: red;
}

.success-msg {
  color: green;
}

#outer-circle {

  border-radius: 50%;
  height: 50px;
  width: 50px;
  position: relative;
  box-shadow: 0 0 0 1px blue;
  margin: auto;
}

.circle-txt {
  position: absolute;
  top: 7px;
  width: 100%;
  text-align: center;
  /* NOT IMPORTANT */
  font-family: arial, sans-serif;
  font-size: 2em;
  font-weight: bold;
}


/*Logo for menu, change path and properties as required, change under all CSS Media Queries as well*/
.vwallet-logo {
  content: url(../images/vwallet-logo-blue-short.png);
  width: 230px;
  padding-bottom: 30px;
  padding-top: 30px;
}

.scanner-logo {
  content: url(../images/scanner-logo.jpg);
  width: 230px;
  padding-bottom: 30px;
  padding-top: 30px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.visitor-logo {
  content: url(../images/visitor-logo.jpeg);
  width: 200px;
  padding-bottom: 30px;
  padding-top: 30px;
}


.bwellness-logo {
  content: url(../images/BWellLogo3.png);
  width: 200px;
  padding-bottom: 30px;
}

.santaco-logo {
  content: url(../images/santaco-login.png);
  width: 120px;
  padding-bottom: 30px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.cmoney-logo {
  content: url(../images/cmoney-logo.jpg);
  width: 200px;
  padding-bottom: 30px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.klofies-logo {
  content: url(../images/waterkloof-logo.png);
  width: 230px;
  padding-top: 10px;
  padding-bottom: 20px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.mac-logo {
  content: url(../images/mac-logo.png);
  width: 200px;
  padding-top: 10px;
  padding-bottom: 20px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.gcc-logo {
  content: url(../images/gcc-logo.jpg);
  width: 200px;
  padding-top: 10px;
  padding-bottom: 20px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.nories-logo {
  content: url(../images/bottom-logo-img-nories.png);
  width: 230px;
  padding-top: 10px;
  padding-bottom: 20px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.willow-logo {
  content: url(../images/bottom-logo-img-willow.png);
  width: 230px;
  padding-top: 10px;
  padding-bottom: 20px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.bestech-logo {
  content: url(../images/bestech-logo.png);
  width: 230px;
  padding-top: 10px;
  padding-bottom: 20px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.sa-concerts-logo {
  content: url(../images/sa-concerts-logo.png);
  width: 220px;
  padding-bottom: 30px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.berge-logo {
  content: url(../images/berge-logo.png);
  width: 220px;
  padding-bottom: 30px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.interskole-logo {
  content: url(../images/interskole-combo-logo.jpg);
  width: 280px;
  padding-bottom: 30px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.absa-logo {
  content: url(../images/absa_school_logo_login.png);
  width: 230px;
  padding-bottom: 30px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.dreams-logo {
  content: url(../images/dreams-logo.png);
  width: 230px;
  padding-bottom: 30px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.kknk-logo {
  content: url(../images/kknk-logo.png);
  width: 230px;
  padding-bottom: 30px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.arries-logo {
  content: url(../images/arries-logo.png);
  width: 230px;
  padding-bottom: 30px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.uj-logo {
  content: url(../images/uj-logo.png);
  width: 220px;
  padding-bottom: 30px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.lydens-logo {
  content: url(../images/lydens-logo.png);
  width: 160px;
  padding-bottom: 10px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.toti-logo {
  content: url(../images/toti-logo.png);
  width: 150px;
  padding-bottom: 10px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.aeswitch-logo {
  content: url(../images/aeswitch-logo.png);
  width: 250px;
  padding-top: 10px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.aeswitch-uj-logo {
  content: url(../images/aeswitch-logo.png);
  width: 250px;
  padding-top: 10px;
  padding-bottom: 10px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.ha-logo {
  content: url(../images/ha-logo.png);
  width: 170px;
  /* padding-bottom: 10px; */
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.toti-donation-logo {
  content: url(../images/toti-donation-logo.png);
  width: 100%;
  padding-bottom: 10px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.toti-donation-img {
  content: url(../images/toti-donation-img.jpg);
  width: 100%;
  display: block;
  margin-left: auto;
  margin-right: auto;
  border-radius: 15px;
}

.sonstraaltjie-logo {
  content: url(../images/sonstraaltjie-logo.png);
  width: 220px;
  padding-bottom: 10px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.vtickets-logo {
  content: url(../images/vtickets-logo.png);
  width: 250px;
  padding-bottom: 30px;
  padding-top: 30px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.vtickets-popup-logo {
  content: url(../images/vtickets-logo.png);
  width: 220px;
  padding-bottom: 0px;
  padding-top: 30px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.randjie-logo {
  content: url(../images/randjie-logo.jpeg);
  width: 220px;
  padding-bottom: 20px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.kempie-logo {
  content: url(../images/kempie-logo.jpeg);
  width: 220px;
  padding-bottom: 20px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.affies-logo {
  content: url(../images/affies-logo.png);
  width: 150px;
  padding-bottom: 20px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.dellie-logo {
  content: url(../images/dellies-logo.jpeg);
  width: 120px;
  padding-bottom: 20px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.awallet-logo {
  content: url(../images/anchor-logo.jpeg);
  width: 220px;
  padding-bottom: 30px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.bwallet-logo {
  content: url(../images/bwallet-logo.png);
  width: 270px;
  padding-bottom: 30px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.bushveldtour-logo {
  content: url(../images/bushveldtour-logo.jpeg);
  width: 150px;
  padding-bottom: 30px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.skyfco-logo {
  content: url(../images/skyfco-logo.jpg);
  width: 220px;
  padding-bottom: 30px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.amplified-logo {
  content: url(../images/amplified-logo.png);
  width: 220px;
  padding-bottom: 40px;
  padding-top: 40px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.blxck-logo {
  content: url(../images/jo-black-logo.png);
  width: 220px;
  padding-bottom: 20px;
  padding-top: 20px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.huizbesoek-logo {
  content: url(../images/huizbesoek-logo.png);
  width: 220px;
  padding-bottom: 20px;
  padding-top: 20px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.harlequins-logo {
  content: url(../images/harlequins-logo.png);
  width: 120px;
  padding-bottom: 20px;
  padding-top: 20px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.numed-logo {
  content: url(../images/numed-logo.png);
  width: 220px;
  padding-bottom: 20px;
  padding-top: 20px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.capital-logo {
  content: url(../images/thecapital-logo.png);
  width: 220px;
  padding-bottom: 30px;
  padding-top: 20px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.capital96-logo {
  content: url(../images/thecapital96-logo.png);
  width: 220px;
  padding-bottom: 30px;
  padding-top: 20px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.capital-zimbali-logo {
  content: url(../images/thecapital-zimbali-logo.png);
  width: 220px;
  padding-bottom: 30px;
  padding-top: 20px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.pharmacomm-logo {
  content: url(../images/pharmacomm-logo.jpeg);
  width: 220px;
  padding-bottom: 10px;
  padding-top: 20px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.powered-by-logo-cmoney {
  content: url(../images/power\ by.png);
  width: 140px;
  margin-top: 10px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}


.powered-by-logo-aeswitch {
  content: url(../images/LogoAE.fw_.png);
  width: 140px;
  margin-top: 20px;
  margin-bottom: 10px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.powered-by-logo-vwallet {
  content: url(../images/vwallet-logo-white.png);
  width: 150px;
  margin-top: 10px;
  margin-bottom: 0px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.powered-by-logo-waterkloof {
  content: url(../images/power-by-logo-waterkloof.png);
  width: 180px;
  margin-top: 10px;
  margin-bottom: 0px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.powered-by-logo-absa-aeswitch {
  content: url(../images/power-by-logo-absa-aes.png);
  width: 220px;
  margin-top: 10px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.partnership-aeswitch {
  content: url(../images/AEAbsapartnership.fw.png);
  width: 180px;
  margin-top: 10px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.powered-by-logo-aeswitch-vtickets {
  content: url(../images/LogoAE.fw_.png);
  width: 170px;
  margin-top: 10px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.aes-saconcerts {
  content: url(../images/aes-vt-saconcerts.png);
  width: 250px;
  margin-top: 10px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}




/*   background-image: url(../images/IMG-20210608-WA0011.jpg);
  background-repeat: repeat-x;
  background-attachment: fixed;
  background-position: bottom;
  background-size: cover; */
/* bg11b.jpg*/

/* .vwallet-bg {

  background-image: url(../images/cmoney-bg.jpg);
  background-repeat: repeat-x;
  background-attachment: fixed;
  background-position: top;
  background-size: cover;

} */


.vwallet-bg {
  background-color: #23396b;
}

.visitor-bg {
  background-color: black;
}

.kofies-bg {
  background-image: url(../images/waterkloof-bg.jpg);
  /* bg4.jpg*/
  background-repeat: repeat-x;
  background-attachment: fixed;
  background-position: bottom;
  background-size: cover;
}

.nories-bg {
  background-color: #73b0dc;
}

.mac-bg {
  background-color: black;
}

.gcc-bg {
  background-color: #1c3b77;
}

.willow-bg {
  background-color: #7c1116;
}

.bestech-bg {
  background-color: #323440;
}

.sa-concerts-bg {
  background: linear-gradient(130deg, #828282, #252525, #090909);
  background-size: 100% 100%;
}

.berge-bg {
  background-color: black;
}

.absa-bg {

  background: linear-gradient(130deg, #ef3159, #d62028, #b51228, #960528, #b51228, #d62028, #ef3159);
  background-size: 200% 200%;

}

.interskole-bg {
  background-color: #20366b;
}

.dreams-bg {
  background-color: #323232;
}

.kknk-bg {
  background-color: #bd3357;
}

/* .kknk-bg {
  background-image: url("../images/kknk-bg.png");
  background-position:bottom;
} */

.arries-bg {
  background-color: #1A4787;
}

.henwil-bg {
  background-color: #FAAF40;
}

.randjie-bg {
  background-image: url(../images/randjie-bg.jpeg);
  /* bg4.jpg*/
  background-repeat: repeat-x;
  background-attachment: fixed;
  background-position: bottom;
  background-size: cover;
}

.kempie-bg {
  background-image: url(../images/kempie-bg.jpeg);
  /* bg4.jpg*/
  background-repeat: repeat-x;
  background-attachment: fixed;
  background-position: bottom;
  background-size: cover;
}

.affies-bg {
  background-image: url(../images/affies-bg.jpg);
  background-repeat: repeat-x;
  background-attachment: fixed;
  background-position: bottom;
  background-size: cover;
}

.dellie-bg {
  background-image: url(../images/dellies-bg.jpeg);
  /* bg4.jpg*/
  background-repeat: repeat-x;
  background-attachment: fixed;
  background-position: bottom;
  background-size: cover;
}

.santaco-bg {
  background-image: url(../images/santago-bg.jpg);
  /* bg11b.jpg*/
  background-repeat: repeat-x;
  background-attachment: fixed;
  background-position: top;
  background-size: cover;
}

.cmoney-bg {
  background-image: url(../images/cmoney-bg.jpg);
  /* bg11b.jpg*/
  background-repeat: repeat-x;
  background-attachment: fixed;
  background-position: top;
  background-size: cover;
}

.awallet-bg {
  background-color: black;
}

.bwallet-bg {
  background-color: #81806C;
}


.bushveldtour-bg {
  background-image: url(../images/bushveldtour-bg.jpeg);
  background-repeat: repeat-x;
  background-attachment: fixed;
  background-position: top;
  background-size: cover;
}

.blxck-bg {
  background-image: url(../images/blxck-bg.png);
  /* bg11b.jpg*/
  background-repeat: repeat-y;
  background-attachment: fixed;
  background-position: top;
  background-size: 100%;
}

.huizbesoek-bg {
  background-image: url(../images/huizbeskoek-bg.jpeg);
  background-repeat: repeat-x;
  background-attachment: fixed;
  background-position: top;
  background-size: cover;
}

.harlequins-bg {
  background-color: #7FBFE9;
}

.numed-bg {
  background-image: url(../images/numed-bg.jpg);
  background-repeat: repeat-x;
  background-attachment: fixed;
  background-position: top;
  background-size: cover;
}

.uj-bg {
  background-color: #f26522;
}

.blxck-icon-color {
  background-color: black;
}

.huizbesoek-icon-color {
  background-color: #373a4d;
}

.harlequins-icon-color {
  background-color: #C61E56;
  ;
}

.harlequins-icon-color-1 {
  background-color: #7FBFE9;
}

.harlequins-icon-color-2 {
  background-color: #C61E56;
}

.harlequins-icon-color-3 {
  background-color: #7C461E;
}

.harlequins-icon-color-4 {
  background-color: #B2B4B7;
}

.harlequins-icon-color-5 {
  background-color: #1F9346;
}



.numed-icon-color {
  background-color: #789e4b;
}

.bwallet-icon-color {
  background-color: #81806C;
}

.bushveldtour-icon-color {
  background-color: #BC5022;
}

.randjie-icon-color {
  background-color: #26509c;
}

.kempie-icon-color {
  background-color: #433177;
}

.affies-icon-color {
  background-color: #1f4d33;
}

.dellie-icon-color {
  background-color: #232063;
}

.vwallet-icon-color {
  background-color: #23396b;
}

.santaco-icon-color {
  background-color: #6a6260;
}

.klofies-icon-color {
  background-color: #040d48;
}

.nories-icon-color {
  background-color: #01253d;
}

.mac-icon-color {
  background-color: #F8C901;
}

.gcc-icon-color {
  background-color: #FF8900;
}

.willow-icon-color {
  background-color: #7c1116;
}

.bestech-icon-color {
  background-color: #323440;
}


.sa-concerts-icon-color {
  background-color: #343434;
}

.berge-icon-color {
  background-color: black;
}

.interskole-icon-color {
  background-color: #20366b;
}

.absa-icon-color {
  /* background-color: #d62029; */
  background: linear-gradient(130deg, #ef3159, #d62028, #b51228, #960528, #b51228, #d62028, #ef3159);
}

.dreams-icon-color {
  background-color: #323232;
}

.kknk-icon-color {
  background-color: #bd3357;
}

.arries-icon-color {
  background-color: #09024f;
}

.uj-icon-color {
  background-color: #f26522;
}

.lydens-icon-color {
  background-color: #3b7941;
}

.toti-icon-color {
  background-color: #b20000;
}

.aeswitch-icon-color {
  background-color: #3b414f;
}

.ha-icon-color {
  background-color: black;
}

.sonstraaltjie-icon-color {
  background-color: #F8C128;
}

.vtickets-icon-color {
  background-color: #23396b;
}

.visitor-icon-color {
  background-color: black;
}

.capital-bg {
  background-color: black;
}

.capital-icon-color {
  background-color: black;
}

.pharmacomm-bg {
  background-color: black;
}

.amplified-bg {
  background-color: black;
}

.skyfco-bg {
  background-color: black;
}

.lydens-bg {
  background-color: #3b7941;
}

.toti-bg {
  background-color: #b20000;
}

.aeswitch-bg {
  background-color: #3b414f;
}

/* .ha-bg {
  background-image: url(../images/ha-bg.jpg);
  background-repeat: repeat-x;
  background-attachment: fixed;
  background-position: bottom;
  background-size: cover;
} */

.ha-bg {
  background-color: black;
}

.sonstraaltjie-bg {
  background-image: url(../images/sonstraaltjie-bg-2.jpg);
  background-repeat: repeat-x;
  background-attachment: fixed;
  background-position: bottom;
  background-size: cover;

}

.vtickets-bg {
  background-color: #23396b;
}

.jo-black-bg {
  background-image: url(../images/jo-black-bg.jpeg);
  /* bg11b.jpg*/

  background-attachment: fixed;
  background-position: top;
  background-size: auto;
}

.top_page_margin {
  margin-top: 55px;
}

.top_page_margin_wp_menu {
  margin-top: 80px;
}


.bottom-logo-container {
  margin-bottom: 120px;
  margin-top: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.prelogin-bottom-logo-container {
  display: flex;
  align-items: center;
  justify-content: center;
}

.bottom-logo-col {
  width: 100%;
  /*or whatever you choose*/
  margin: auto;
}

.bottom-logo-img-vwallet {
  display: block;
  width: 360px;
  border-radius: 5px;
  height: auto;
  /* maintain aspect ratio*/
  margin: auto;
  /*optional centering of image*/
  content: url(../images/vwallet-logo-white.png);
}

.bottom-logo-img-scanner {
  display: block;
  width: 300px;
  border-radius: 5px;
  height: auto;
  /* maintain aspect ratio*/
  margin: auto;
  /*optional centering of image*/
  content: url(../images/bottom-logo-img-scanner.png);
}

.bottom-logo-img-visitor {
  display: block;
  width: 260px;
  border-radius: 5px;
  height: auto;
  /* maintain aspect ratio*/
  margin: auto;
  /*optional centering of image*/
  content: url(../images/bottom-logo-img-visitor.png);
}

.bottom-logo-img-randjie {
  display: block;
  width: 260px;
  border-radius: 5px;
  height: auto;
  /* maintain aspect ratio*/
  margin: auto;
  /*optional centering of image*/
  content: url(../images/bottom-logo-img-randjie.jpeg);
}

.bottom-logo-img-kempie {
  display: block;
  width: 160px;
  border-radius: 5px;
  height: auto;
  /* maintain aspect ratio*/
  margin: auto;
  /*optional centering of image*/
  content: url(../images/bottom-logo-img-kempie.png);
}

.bottom-logo-img-affies {
  display: block;
  width: 100px;
  border-radius: 5px;
  height: auto;
  /* maintain aspect ratio*/
  margin: auto;
  /*optional centering of image*/
  content: url(../images/bottom-logo-img-affies.png);
}

.bottom-logo-img-dellie {
  display: block;
  width: 160px;
  border-radius: 5px;
  height: auto;
  /* maintain aspect ratio*/
  margin: auto;
  /*optional centering of image*/
  content: url(../images/bottom-logo-img-dellies2.png);
}

.bottom-logo-img-awallet {
  display: block;
  width: 260px;
  border-radius: 5px;
  height: auto;
  /* maintain aspect ratio*/
  margin: auto;
  /*optional centering of image*/
  content: url(../images/bottom-logo-img-anchor.jpeg);
}

.bottom-logo-img-bwallet {
  display: block;
  width: 230px;
  border-radius: 5px;
  height: auto;
  /* maintain aspect ratio*/
  margin: auto;
  /*optional centering of image*/
  content: url(../images/bottom-logo-img-bwallet.png);
}

.bottom-logo-img-bushveldtour {
  display: block;
  width: 130px;
  border-radius: 5px;
  height: auto;
  /* maintain aspect ratio*/
  margin: auto;
  /*optional centering of image*/
  content: url(../images/bottom-logo-img-bushveldtour.png);
}

.bottom-logo-img-amplified {
  display: block;
  width: 260px;
  border-radius: 5px;
  height: auto;
  /* maintain aspect ratio*/
  margin: auto;
  /*optional centering of image*/
  content: url(../images/bottom-logo-img-amplified.png);
}

.bottom-logo-img-blxck {
  display: block;
  width: 180px;
  border-radius: 5px;
  height: auto;
  /* maintain aspect ratio*/
  margin: auto;
  /*optional centering of image*/
  margin-top: 20px;
  content: url(../images/bottom-logo-img-jo-black.png);
}

.bottom-logo-img-huizbesoek {
  display: block;
  width: 260px;
  border-radius: 5px;
  height: auto;
  /* maintain aspect ratio*/
  margin: auto;
  /*optional centering of image*/
  content: url(../images/bottom-logo-img-huizbesoek.png);
}

.bottom-logo-img-harlequins {
  display: block;
  width: 100px;
  border-radius: 5px;
  height: auto;
  /* maintain aspect ratio*/
  margin: auto;
  /*optional centering of image*/
  content: url(../images/bottom-logo-img-harlequins.png);
}

.bottom-logo-img-numed {
  display: block;
  width: 260px;
  border-radius: 5px;
  height: auto;
  /* maintain aspect ratio*/
  margin: auto;
  /*optional centering of image*/
  content: url(../images/bottom-logo-img-numed.png);
  background-color: white;
}

.bottom-logo-img-capital-0 {
  display: block;
  width: 230px;
  border-radius: 5px;
  height: auto;
  /* maintain aspect ratio*/
  margin: auto;
  /*optional centering of image*/
  margin-top: 20px;
  content: url(../images/bottom-logo-img-capital-0.png);
}

.bottom-logo-img-capital-1 {
  display: block;
  width: 230px;
  border-radius: 5px;
  height: auto;
  /* maintain aspect ratio*/
  margin: auto;
  /*optional centering of image*/
  margin-top: 20px;
  content: url(../images/bottom-logo-img-capital-1.png);
}

.bottom-logo-img-pharmacomm {
  display: block;
  width: 230px;
  border-radius: 5px;
  height: auto;
  /* maintain aspect ratio*/
  margin: auto;
  /*optional centering of image*/
  margin-top: 20px;
  content: url(../images/bottom-logo-img-pharmacomm.jpeg);
}

.bottom-logo-img-skyfco {
  display: block;
  width: 260px;
  border-radius: 5px;
  height: auto;
  /* maintain aspect ratio*/
  margin: auto;
  /*optional centering of image*/
  content: url(../images/bottom-logo-img-skyfco.jpeg);
}

.bottom-logo-img-klofies {
  display: block;
  width: 260px;
  border-radius: 5px;
  height: auto;
  /* maintain aspect ratio*/
  margin: auto;
  /*optional centering of image*/
  content: url(../images/waterkloof-wallet.png);
}

.bottom-logo-img-nories {
  display: block;
  width: 290px;
  border-radius: 5px;
  height: auto;
  /* maintain aspect ratio*/
  margin: auto;
  /*optional centering of image*/
  content: url(../images/bottom-logo-img-nories.png);
}

.bottom-logo-img-mac {
  display: block;
  width: 220px;
  border-radius: 5px;
  height: auto;
  /* maintain aspect ratio*/
  margin: auto;
  /*optional centering of image*/
  content: url(../images/bottom-logo-img-mac.jpg);
}

.bottom-logo-img-gcc {
  display: block;
  width: 330px;
  border-radius: 5px;
  height: auto;
  /* maintain aspect ratio*/
  margin: auto;
  /*optional centering of image*/
  content: url(../images/bottom-logo-img-gcc.png);
}

.bottom-logo-img-willow {
  display: block;
  width: 290px;
  border-radius: 5px;
  height: auto;
  /* maintain aspect ratio*/
  margin: auto;
  /*optional centering of image*/
  content: url(../images/bottom-logo-img-willow-white.png);
}

.bottom-logo-img-bestech {
  display: block;
  width: 290px;
  border-radius: 5px;
  height: auto;
  /* maintain aspect ratio*/
  margin: auto;
  /*optional centering of image*/
  content: url(../images/bestech-logo.png);
}


.bottom-logo-img-sa-concerts {
  display: block;
  width: 260px;
  border-radius: 5px;
  height: auto;
  /* maintain aspect ratio*/
  margin: auto;
  /*optional centering of image*/
  content: url(../images/bottom-logo-img-sa-concerts.jpg);
}

.bottom-logo-img-berge {
  display: block;
  width: 260px;
  border-radius: 5px;
  height: auto;
  /* maintain aspect ratio*/
  margin: auto;
  /*optional centering of image*/
  content: url(../images/bottom-logo-img-berge.png);
}

.bottom-logo-img-interskole {
  display: block;
  width: 260px;
  border-radius: 5px;
  height: auto;
  /* maintain aspect ratio*/
  margin: auto;
  /*optional centering of image*/
  content: url(../images/bottom-logo-img-interskole.png);
}

.bottom-logo-img-absa {
  display: block;
  width: 280px;
  border-radius: 5px;
  height: auto;
  /* maintain aspect ratio*/
  margin: auto;
  /*optional centering of image*/
  content: url(../images/absa_school_logo_original.png);
}

.bottom-logo-img-dreams {
  display: block;
  width: 280px;
  border-radius: 5px;
  height: auto;
  /* maintain aspect ratio*/
  margin: auto;
  /*optional centering of image*/
  content: url(../images/bottom-logo-img-dreams.png);
}

.bottom-logo-img-kknk {
  display: block;
  width: 280px;
  border-radius: 5px;
  height: auto;
  /* maintain aspect ratio*/
  margin: auto;
  /*optional centering of image*/
  content: url(../images/bottom-logo-img-kknk.png);
}

.bottom-logo-img-arries {
  padding-top: 20px;
  display: block;
  width: 280px;
  border-radius: 5px;
  height: auto;
  /* maintain aspect ratio*/
  margin: auto;
  /*optional centering of image*/
  content: url(../images/pharmacy-logo.png);
}

.bottom-logo-img-uj {
  display: block;
  width: 260px;
  border-radius: 5px;
  height: auto;
  /* maintain aspect ratio*/
  margin: auto;
  /*optional centering of image*/
  content: url(../images/bottom-logo-img-uj.png);
}

.bottom-logo-img-lydens {
  display: block;
  width: 120px;
  border-radius: 5px;
  height: auto;
  /* maintain aspect ratio*/
  margin: auto;
  /*optional centering of image*/
  content: url(../images/bottom-logo-img-lydens.png);
}

.bottom-logo-img-toti {
  display: block;
  width: 220px;
  border-radius: 5px;
  height: auto;
  /* maintain aspect ratio*/
  margin: auto;
  /*optional centering of image*/
  content: url(../images/bottom-logo-img-toti.png);
}

.bottom-logo-img-aeswitch {
  display: block;
  width: 300px;
  border-radius: 5px;
  height: auto;
  /* maintain aspect ratio*/
  margin: auto;
  /*optional centering of image*/
  content: url(../images/aeswitch-logo.png);
}

.bottom-logo-img-ha {
  display: block;
  width: 100%;
  border-radius: 5px;
  height: auto;
  /* maintain aspect ratio*/
  margin: auto;
  /*optional centering of image*/
  content: url(../images/bottom-logo-img-ha.png);
}

.prelogin-bottom-logo-img-ha {
  display: block;
  width: 100%;
  border-radius: 5px;
  height: auto;
  /* maintain aspect ratio*/
  margin: auto;
  /*optional centering of image*/
  content: url(../images/prelogin-bottom-logo-img-ha.png);
}

.bottom-logo-img-sonstraaltjie {
  display: block;
  width: 120px;
  border-radius: 5px;
  height: auto;
  /* maintain aspect ratio*/
  margin: auto;
  /*optional centering of image*/
  content: url(../images/bottom-logo-img-sonstraaltjie.jpg);
}

.bottom-logo-img-vtickets {
  display: block;
  width: 280px;
  border-radius: 5px;
  height: auto;
  /* maintain aspect ratio*/
  margin: auto;
  /*optional centering of image*/
  content: url(../images/bottom-logo-img-vtickets.png);
}

.bottom-logo-img-vtickets-school {
  display: block;
  width: 280px;
  border-radius: 5px;
  height: auto;
  /* maintain aspect ratio*/
  margin: auto;
  /*optional centering of image*/
  content: url(../images/bottom-logo-img-vtickets-school.png);
}


.bottom-shop-logo-img-klofies {
  display: block;
  width: 260px;
  border-radius: 5px;
  height: auto;
  /* maintain aspect ratio*/
  margin: auto;
  /*optional centering of image*/
  content: url(../images/klofiesnoepie.png);
}

.bottom-shop-logo-img-uj {
  display: block;
  width: 260px;
  border-radius: 5px;
  height: auto;
  /* maintain aspect ratio*/
  margin: auto;
  /*optional centering of image*/
  content: url(../images/bottom-logo-img-uj.png);
}

.bottom-logo-img-santaco {
  display: block;
  width: 260px;
  border-radius: 5px;
  height: auto;
  /* maintain aspect ratio*/
  margin: auto;
  /*optional centering of image*/
  content: url(../images/SANTACO\ LOGO8.png);
}

.bottom-logo-img-cmoney {
  display: block;
  width: 260px;
  border-radius: 5px;
  height: auto;
  /* maintain aspect ratio*/
  margin: auto;
  /*optional centering of image*/
  content: url(../images/cmoney-bottom.png);
}


.bwellness-bg {
  background-image: url(../images/BwellBG.jpg);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: bottom;
  background-size: cover;
  background-color: #ddd3d1;
}

.visa-logo {
  content: url(../images/visa-prepaid-card.png);
  width: 220px;
  padding-bottom: 30px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.merchant-payment-img {
  width: 100%;
  padding-bottom: 30px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.event-logo {
  width: 90%;
  padding-bottom: 30px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.ozow-logo {
  content: url(../images/ozow-logo.jpg);
  width: 220px;
  padding-bottom: 30px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.mobipaid-logo {
  content: url(../images/mobipaid-logo.png);
  width: 220px;
  padding-bottom: 30px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.mno-logos {
  content: url(../images/mno-logos.png);
  width: 70%;
  padding-bottom: 10px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.login_btn_container {
  display: flex;
  height: 40px;
  flex-flow: column wrap;
  align-content: space-between;
}

.login_btn_container>div {
  margin: 10px;
}



.background-gradient {
  background: #4261cf;
  background: -moz-linear-gradient(45deg, #24b8d2 0%, #43b6d8 100%);
  background: -webkit-gradient(linear, left bottom, right top, color-stop(0%, #3023ae), color-stop(100%, #53a0fd));
  background: -webkit-linear-gradient(45deg, #24b8d2 0%, #43b6d8 100%);
  background: -o-linear-gradient(45deg, #24b8d2 0%, #43b6d8 100%);
  background: -ms-linear-gradient(45deg, #24b8d2 0%, #43b6d8 100%);
  background: linear-gradient(45deg, #24b8d2 0%, #43b6d8 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='$gradient-start', endColorstr='$gradient-end', GradientType=1);
  color: white;
}

.page,
.page__background,
.page__content {
  background-color: transparent !important;
  position: absolute;
}




.limiter {
  width: 100%;
  margin: 0 auto;
}

.form-container {
  width: 100%;
  margin-top: 5%;
  margin-bottom: 20px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;

}

.wrapper {
  width: auto;
  /*Changes for seatmap*/
  /*max-width: 210px;*/
  min-width: 210px;
  background: rgba(255, 255, 255);
  border-radius: 10px;
  overflow: hidden;
  padding: 20px 55px 20px 55px;
  /*padding: 20px 25px 20px 25px;*/
  box-shadow: 0 5px 10px 0px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0 5px 10px 0px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: 0 5px 10px 0px rgba(0, 0, 0, 0.1);
  -o-box-shadow: 0 5px 10px 0px rgba(0, 0, 0, 0.1);
  -ms-box-shadow: 0 5px 10px 0px rgba(0, 0, 0, 0.1);
  /*opacity: 0.8;*/
}


.comp-form {
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: 10px;
}

ons-input,
ons-radio,
ons-checkbox,
ons-search-input {
  /*     display: inline-block;
    position: relative; */
  width: 100%;
  margin-top: 5px;
}

.text-input--material__label {
  width: max-content;
}

/*   .text-input--underbar:invalid {
    border-bottom: none;
  } */

ons-input.ng-invalid.ng-dirty {
  border: 1px solid red;
}

input.ng-invalid.ng-dirty {
  border: 1px solid red;
}

ons-splitter-mask {
  z-index: 4;
  background-color: rgba(0, 0, 5, 0.7);
  display: none;
  opacity: 0;
}

/* Mobile first queries */
.hidden-md {
  display: none;
}

.row {
  display: flex;
  flex-wrap: wrap;
}

.row {
  flex-direction: column;
}

.product-detail-container {
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
}

.event-list-container {
  margin-left: 5%;
  margin-right: 5%;
}

.app-container {
  margin-left: 5%;
  margin-right: 5%;
}

.v2-form-container {
  margin-left: 5%;
  margin-right: 5%;
}

.shop-container {
  margin-left: 5%;
  margin-right: 5%;
}

.ticket-popup-container {
  margin-left: 5%;
  margin-right: 5%;
}

.order-detail-popup {
  margin-left: 5%;
  margin-right: 5%;
}

.event-product-container {
  margin-left: 2%;
  margin-right: 2%;
}

.about-page-container {
  margin-left: 1%;
  margin-right: 1%;
}

.trans-hist-container {
  width: 100%;
  margin: 0px;
  border-radius: 0px;
}

.elementor-heading-title {
  font-family: "Montserrat", Sans-serif;
  font-size: 22px;
  font-weight: 520;
  letter-spacing: 2px;
  color: white;
  margin-top: 35px;
  margin-bottom: 35px;
  text-transform: uppercase;
  margin-left: 50px;
  margin-right: 50px;
}


/* Larger than mobile */
@media (min-width: 400px) {
  .wrapper {
    width: auto;
    max-width: 390px;
    min-width: 210px;
  }

  .hidden-md {
    display: block;
  }

  .event-list-container {
    margin-left: 5%;
    margin-right: 5%;
  }

  .app-container {
    margin-left: 5%;
    margin-right: 5%;
  }

  .v2-form-container {
    margin-left: 5%;
    margin-right: 5%;
  }

  .shop-container {
    margin-left: 5%;
    margin-right: 5%;
  }

  .ticket-popup-container {
    margin-left: 10%;
    margin-right: 10%;
  }

  .order-detail-popup {
    margin-left: 10%;
    margin-right: 10%;
  }

  .event-product-container {
    margin-left: 2%;
    margin-right: 2%;
  }

  .about-page-container {
    margin-left: 1%;
    margin-right: 1%;
  }

  .trans-hist-container {
    width: 100%;
    margin: 0px;
    border-radius: 0px;
  }

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

}

/* Larger than phablet */
@media (min-width: 550px) {
  .wrapper {
    width: auto;
    max-width: 400px;
    min-width: 210px;
  }

  .event-list-container {
    margin-left: 25%;
    margin-right: 25%;
  }

  .app-container {
    margin-left: 20%;
    margin-right: 20%;
  }

  .v2-form-container {
    margin-left: 20%;
    margin-right: 20%;
  }

  .shop-container {
    margin-left: 25%;
    margin-right: 25%;
  }

  .ticket-popup-container {
    margin-left: 25%;
    margin-right: 25%;
  }

  .order-detail-popup {
    margin-left: 25%;
    margin-right: 25%;
  }

  .event-product-container {
    margin-left: 2%;
    margin-right: 2%;
  }

  .about-page-container {
    margin-left: 25%;
    margin-right: 25%;
  }

  .trans-hist-container {
    width: 50%;
    margin: 0px;
    border-radius: 0px;
  }

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

}

/* Larger than tablet */
@media (min-width: 750px) {

  .wrapper {
    width: auto;
    max-width: 600px;
    min-width: 400px;
  }

  .column {
    flex: 50%;
  }

  .row {
    flex-direction: row;
  }

  .product-detail-container {
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
  }

  .event-list-container {
    margin-left: 30%;
    margin-right: 30%;
  }

  .app-container {
    margin-left: 30%;
    margin-right: 30%;
  }

  .v2-form-container {
    margin-left: 30%;
    margin-right: 30%;
  }

  .shop-container {
    margin-left: 30%;
    margin-right: 30%;
  }

  .ticket-popup-container {
    margin-left: 30%;
    margin-right: 30%;
  }

  .order-detail-popup {
    margin-left: 30%;
    margin-right: 30%;
  }

  .event-product-container {
    margin-left: 20%;
    margin-right: 20%;
  }

  .about-page-container {
    margin-left: 30%;
    margin-right: 30%;
  }

  .trans-hist-container {
    width: 40%;
    margin: 0px;
    border-radius: 0px;
  }

  .elementor-heading-title {
    font-size: 35px !important;
  }

}

/* Larger than desktop */
@media (min-width: 1000px) {
  .wrapper {
    width: auto;
    max-width: 800px;
    min-width: 400px;
  }


  .bwellness-logo {
    content: url(../images/BWellLogo3.png);
    width: 300px;
    padding-bottom: 30px;
  }


  .column {
    flex: 30%;
  }

  .row {
    flex-direction: row;
  }

  .event-list-container {
    margin-left: 35%;
    margin-right: 35%;
  }

  .app-container {
    margin-left: 35%;
    margin-right: 35%;
  }

  .v2-form-container {
    margin-left: 35%;
    margin-right: 35%;
  }

  .shop-container {
    margin-left: 35%;
    margin-right: 35%;
  }

  .ticket-popup-container {
    margin-left: 35%;
    margin-right: 35%;
  }

  .order-detail-popup {
    margin-left: 35%;
    margin-right: 35%;
  }

  .event-product-container {
    margin-left: 20%;
    margin-right: 20%;
  }

  .about-page-container {
    margin-left: 35%;
    margin-right: 35%;
  }

  .trans-hist-container {
    width: 30%;
    margin: 0px;
    border-radius: 0px;
  }

  .elementor-heading-title {
    font-size: 55px !important;
  }

}

/* Larger than Desktop HD */
@media (min-width: 1200px) {

  .wrapper {
    width: auto;
    max-width: 800px;
    min-width: 400px;
    /*opacity: 0.8;*/
  }

  .event-list-container {
    margin-left: 37%;
    margin-right: 37%;
  }

  .app-container {
    margin-left: 37%;
    margin-right: 37%;
  }

  .v2-form-container {
    margin-left: 37%;
    margin-right: 37%;
  }

  .shop-container {
    margin-left: 37%;
    margin-right: 37%;
  }

  .ticket-popup-container {
    margin-left: 36.5%;
    margin-right: 37.5%;
  }

  .order-detail-popup {
    margin-left: 36.5%;
    margin-right: 37.5%;
  }

  .event-product-container {
    margin-left: 20%;
    margin-right: 20%;
  }

  .about-page-container {
    margin-left: 37%;
    margin-right: 37%;
  }

  .trans-hist-container {
    width: 30%;
    margin: 0px;
    border-radius: 0px;
  }

  .elementor-heading-title {
    font-size: 55px !important;
  }

}

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


.home_wrapper {
  display: flex;
  flex-direction: row;
}

.home_col {
  display: flex;
  flex-direction: column;
}

/* .toolbar__right {
	font-size: 12px;
} */
/* 
.list {
  opacity: 0.8;
}

 .card {
  opacity: 0.8;
}  */

.card-wrapper {
  display: flex;
  height: 40px;
  cursor: pointer;
  text-align: left;
}

.card-content {
  display: flex;
  align-content: center;
  justify-content: center;
  flex-direction: column;
  padding: 0;
}


a {
  font-size: 16px;
}


/* a:link {
  color: white;
}


a:visited {
  color: white;
}


a:hover {
  color: red;
}


a:active {
  color: blue;
} */


.prelogin-links:link {
  color: white;
}

.prelogin-links:visited {
  color: white;
}

.prelogin-links:hover {
  color: red;
}

.prelogin-links:active {
  color: blue;
}

/* unvisited link */
.sosial-links:link {
  color: black;
}

/* visited link */
.sosial-links:visited {
  color: black;
}

/* mouse over link */
.sosial-links:hover {
  color: darkblue;
  text-decoration: none;
}

/* selected link */
.sosial-links:active {
  color: blue;
}



ons-toolbar {
  font-family: -apple-system, "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif !important
}

.button--material--flat {
  text-transform: none !important
}

.ons-ios-scroll-fix .page:not(.page--wrapper)[shown]>.page__content {
  overflow-y: auto !important;
}


.banking-details {
  text-align: left;
  box-sizing: border-box;
  background-clip: padding-box;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  background: 0 0;
  border: none;
  line-height: normal;
  font-family: -apple-system, 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-weight: 400;
  font-weight: 400;
  vertical-align: top;
  resize: none;
  outline: 0;
  padding: 5px 5px 5px 5px;
  padding: 5px 5px 5px 5px;
  font-size: 16px;
  font-size: 16px;
  font-weight: 400;
  font-weight: 400;
  border-radius: 4px;
  border-radius: 4px;
  border: 1px solid #ccc;
  border: 1px solid #ccc;
  background-color: #efeff4;
  background-color: #efeff4;
  color: #1f1f21;
  color: #1f1f21;
  letter-spacing: 0;
  box-shadow: none;
  box-shadow: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: auto;
}

.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px solid blue;
  opacity: 1 !important;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 50px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  font-size: 11px;


  /* Position the tooltip */
  position: absolute;
  z-index: 1;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}

.alert-danger {
  color: #a94442;
  background-color: #f2dede;
  border-color: #ebccd1;
}

.alert {
  padding: 5px;
  margin-bottom: 20px;
  margin-top: 20px;
  border: 1px solid transparent;
  border-radius: 4px;
}

#branchCode {
  color: black;
  opacity: 1;
}

.circle-with-text {
  justify-content: center;
  align-items: center;
  border-radius: 100%;
  text-align: center;
  display: flex;
  background-color: #760000;
  height: 50px;
  width: 50px;
  color: white;
}


.rewards_container {
  display: flex;
  justify-content: center;
  margin-top: 10px;
  margin-bottom: 40px;
}

.rewards_box {
  background-color: white;
  width: 30%;
  cursor: pointer;
  padding: 15px;
  border-radius: 10px;
}


.coupon_container {
  position: relative;
  width: 100%;
  height: 1700px;
  overflow: hidden;
  padding-top: 56.25%;
  /* 16:9 Aspect Ratio */
}

.responsive-iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  border: none;
}

.selectable {
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
}


.product-info {
  align-self: flex-end;
}


table.Cart {
  width: 100%;
  background-color: #e5e5e5;
  border-collapse: collapse;
  border-width: 1px;
  border-color: #c0c0c0;
  border-style: solid;
  color: #000000;
}

table.Cart td,
table.Cart th {
  border-width: 1px;
  border-color: #c0c0c0;
  border-style: solid;
  padding: 3px;
}

table.Cart thead {
  background-color: #aaaaaa;
}



.store_list-item__right {
  box-sizing: border-box;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-grow: 1;
  flex-grow: 1;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-order: 1;
  order: 1;
  -webkit-align-items: center;
  align-items: center;
  -webkit-align-self: stretch;
  align-self: stretch;
  margin-left: 20px;
  border-bottom: none;
  background-size: 100% 1px;
  background-repeat: no-repeat;
  background-position: bottom;
  background-image: none;
  padding: 12px 6px 12px 0;
  line-height: 1.2em;
  min-height: 44px;
  min-height: 44px;
  text-align: right;
  margin-right: 20px;
}



.store_list-item__thumbnail {
  width: 100px;
  height: 100px;
  border-radius: 0px;
  display: block;
}

.store-list-container {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: nowrap;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-align-content: center;
  -ms-flex-line-pack: center;
  align-content: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;

  background-color: white;
  border-radius: 5px;
  margin-bottom: 10px;
}

.store-item:nth-child(1) {
  -webkit-order: 0;
  -ms-flex-order: 0;
  order: 0;
  -webkit-flex: 0 0 auto;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  -webkit-align-self: center;
  -ms-flex-item-align: center;
  align-self: center;
  text-align: left;


  padding-left: 10px;

}

.store-item:nth-child(2) {
  -webkit-order: 0;
  -ms-flex-order: 0;
  order: 0;
  -webkit-flex: 1 1 auto;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  -webkit-align-self: center;
  -ms-flex-item-align: center;
  align-self: center;
  text-align: left;


  height: 80px;
  font-size: small;
  margin-left: 5px;

}

.store-item:nth-child(3) {
  -webkit-order: 0;
  -ms-flex-order: 0;
  order: 0;
  -webkit-flex: 2 2 max-content;
  -ms-flex: 2 2 max-content;
  flex: 2 2 max-content;
  -webkit-align-self: center;
  -ms-flex-item-align: center;
  align-self: center;
  text-align: right;

  padding-right: 10px;
}


.store_category_list-item__thumbnail {
  width: 60px;
  height: 60px;
  border-radius: 0px;
  display: block;
}

.ha_list-item__thumbnail {
  width: 80px;
  height: 80px;
  border-radius: 0px;
  display: block;
}

.category-item:nth-child(1) {
  -webkit-order: 0;
  -ms-flex-order: 0;
  order: 0;
  -webkit-flex: 0 0 auto;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  -webkit-align-self: center;
  -ms-flex-item-align: center;
  align-self: center;
  text-align: left;


  padding-left: 10px;

}

.category-item:nth-child(2) {
  -webkit-order: 0;
  -ms-flex-order: 0;
  order: 0;
  -webkit-flex: 1 1 auto;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  -webkit-align-self: center;
  -ms-flex-item-align: center;
  align-self: center;
  text-align: left;


  height: 65px;
  font-size: small;
  margin-left: 5px;

}

.category-item:nth-child(3) {
  -webkit-order: 0;
  -ms-flex-order: 0;
  order: 0;
  -webkit-flex: 2 2 max-content;
  -ms-flex: 2 2 max-content;
  flex: 2 2 max-content;
  -webkit-align-self: center;
  -ms-flex-item-align: center;
  align-self: center;
  text-align: right;

  padding-right: 10px;
}

.event-list-container {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-flex-wrap: nowrap;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-align-content: center;
  -ms-flex-line-pack: center;
  align-content: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;

  background-color: white;
  border-radius: 5px;
  margin-bottom: 10px;
  padding-top: 20px;
  padding-bottom: 20px;


}


.qr-container {
  background-image: url(../images/white-bg.jpg);
  background-repeat: repeat;
}

.popup-container {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-flex-wrap: nowrap;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-align-content: center;
  -ms-flex-line-pack: center;
  align-content: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  background-color: white;
  border-radius: 5px;
  margin-left: 5%;
  margin-right: 5%;
  padding-bottom: 10px;
  padding-left: 10px;
  padding-right: 10px;
}

.ticket-popup-container {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-flex-wrap: nowrap;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-align-content: center;
  -ms-flex-line-pack: center;
  align-content: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  background-color: white;
  border-radius: 5px;
  padding-bottom: 10px;
  padding-left: 10px;
  padding-right: 10px;

}

.order-detail-popup {
  /*   display: -ms-flexbox;
  display: -webkit-flex;
  display: flex; */
  background-color: white;
  border-radius: 5px;
  padding-bottom: 10px;
  padding-left: 10px;
  padding-right: 10px;
}

.toolbar-container {
  display: flex;
}

.toolbar-item {
  flex-grow: 1;
  height: 100px;
}

.toolbar-item+.toolbar-item {
  margin-left: 2%;
}


.category-container {
  margin-left: 5%;
  margin-right: 5%;
  display: flex;
  background-color: white;
  border-radius: 5px;
  margin-bottom: 10px;
  height: 50px;
  /*height needs to be setup*/

  align-items: center;
  justify-content: center;
}

.product-detail-item__image {
  width: 100%;
  height: auto;
  display: block;
}




.product-detail-container {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-align-content: center;
  -ms-flex-line-pack: center;
  align-content: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;

  min-height: 300px;
  background-color: white;
  border-radius: 5px;
  margin-bottom: 10px;

}

.product-detail-item:nth-child(1) {
  -webkit-order: 0;
  -ms-flex-order: 0;
  order: 0;

  -webkit-align-self: auto;
  -ms-flex-item-align: auto;
  align-self: auto;
  flex: 25%;

}

.product-detail-item:nth-child(2) {
  -webkit-order: 0;
  -ms-flex-order: 0;
  order: 0;

  -webkit-align-self: auto;
  -ms-flex-item-align: auto;
  align-self: auto;

  flex: 25%;
  text-align: center;
  margin-top: 10px;
  margin-left: 10px;
  padding: 20px;

}

.status-used {
  color: red;
}

.status-active {
  color: green;
}

.qr-ready {
  position: relative;
  width: 100%;



  align-items: center;
  justify-content: center;
}

.qr-ready video {
  object-fit: cover;
  width: 100%;
  height: 80vmin;
}

/* #reader video {
  border-bottom: solid;
  border-bottom-color: white;
  border-bottom-width: 10px;
} */

.qr-ready:before,
.qr-ready:after,
.qr-ready>:first-child:before,
.qr-ready>:first-child:after {
  position: absolute;
  width: 25px;
  height: 25px;
  border-color: red;
  border-style: solid;
  content: ' ';

}

.qr-ready:before {
  top: 25px;
  left: 25px;
  border-width: 5px 0 0 5px
}

.qr-ready:after {
  top: 25px;
  right: 25px;
  border-width: 5px 5px 0 0
}

.qr-ready>:first-child:before {
  bottom: 25px;
  right: 25px;
  border-width: 0 5px 5px 0
}

.qr-ready>:first-child:after {
  bottom: 25px;
  left: 25px;
  border-width: 0 0 5px 5px
}

.qr-scanned:before,
.qr-scanned:after,
.qr-scanned>:first-child:before,
.qr-scanned>:first-child:after {
  border-color: green;
}

/*Removed Changes for seatmap*/
/* * {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
} */



*:before,
*:after {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
}



.navbar-default {
  background-color: #f8f8f8;
  border-color: #e7e7e7;
  height: 40px !important;
}

.navbar {
  position: relative;
  min-height: 40px !important;
  margin-bottom: 20px;
  border: 1px solid transparent;
}

/*     .navbar-left {
     float:left!important
    }*/
.navbar-right {
  position: relative;
  float: right;
  margin-right: 2px;
  padding-top: 2px;
}

.button {
  padding-top: 4px !important;
  display: inline-block;
  white-space: normal;
}

/*
    .navbar-right~.navbar-right {
     margin-right:0
    } */
.navbar-left {
  float: left !important;
}

.vwallet-nav-toggle {
  /*       position: relative;
      float: right; */
  padding: 0px 0px;
  margin-top: 5px;
  margin-right: 15px;
  margin-bottom: 8px;
  background-color: #e3dddd00;
  background-image: none;
  border: 1px solid #7f7777;
  border-radius: 4px;
  padding-left: 6px;
  padding-right: 6px;

  /*Changes for seatmap*/
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;


}

.menu-container {

  display: flex;
  background-color: white;
  border-radius: 7px;
  margin-bottom: 10px;
  height: 50px;
  padding-left: 7px;
  align-items: center;
  font-size: 18px;
  width: 100%;

}

.v2-menu-container {

  display: flex;
  background-color: #999999;
  border-radius: 7px;
  margin-bottom: 10px;
  height: 50px;
  padding-left: 7px;
  align-items: center;
  font-size: 18px;
  width: 100%;

}

.menu-icon {
  justify-content: center;
  align-items: center;
  border-radius: 100%;
  text-align: center;
  display: flex;
  height: 40px;
  width: 40px;
  color: white;
  margin-right: 6px;
}

.nav-container-body {
  padding-top: 5px;
  width: 100%;
  overflow-y: scroll;
  font-family: -apple-system, 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif !important;
  color: black;
  line-height: 1.2em;
}

.list {
  border-radius: 7px;
  font-size: 18px;
}

.list-item {
  padding-left: 7px;
}

.list-item__center {
  padding-top: 5px !important;
  padding-bottom: 6px !important;
}

button.fab,
ons-fab.fab,
ons-speed-dial-item.fab {
  transition: none !important;
}


.about_container {
  display: flex;
  justify-content: center;
  margin-top: 10px;
  margin-bottom: 40px;
}

.about_box {
  background-color: white;
  width: 90%;
  padding: 15px;
  border-radius: 10px;
}

.blank_page_logo {
  position: fixed;
  bottom: 190px;

}

button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
  /* color: inherit !important; */
  cursor: pointer;
}

button {
  font-size: 16px;
  font-family: -apple-system, "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
}

input[type=checkbox]:focus {
  outline: none !important;

}

.code-to-pay {
  width: 100%;
  box-sizing: border-box;
  border: 2px solid #d09191;
  border-radius: 4px;
  font-size: 24px;
  background-color: #f0e6e6;
  /* background-image: url('../images/code-to-pay.png'); */
  /*     background-position: 10px 10px;  */
  /* background-repeat: no-repeat; */
  padding-top: 8px;
  padding-bottom: 8px;
  text-align: center;
  margin-top: 20px;
  margin-bottom: 20px;
  font-weight: bold;
}

.msisdn-entry {
  width: 100%;
  box-sizing: border-box;
  border: 2px solid #00448c;
  border-radius: 4px;
  font-size: 24px;
  background-color: #a6d0fc;
  /* background-image: url('../images/code-to-pay.png'); */
  /*     background-position: 10px 10px;  */
  /* background-repeat: no-repeat; */
  padding-top: 8px;
  padding-bottom: 8px;
  text-align: center;
  margin-top: 10px;
  margin-bottom: 10px;
  font-weight: bold;
}

.msisdn-entry::placeholder {
  color: white;
}

iframe {
  display: block;
  width: 100%;
  height: 90%;
  margin: none;
  padding: none;
  border: none;
  line-height: 0;
  float: left;
  margin-bottom: 10px;
  margin-top: 10px;
  background: url(../images/Ajax_loader_metal_512.gif) center center no-repeat;
  background-size: 20%;
}

input[type=file]:focus,
input[type=checkbox]:focus,
input[type=radio]:focus {
  outline: none !important;
}

.vwallet-spinner {
  content: url(../images/map-loading.gif);
  width: 100px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.page-heading-col-1 {
  flex: 0.6;
}

.vticket-page {
  position: absolute;
  top: -10px;
  left: 0px;
  right: 0px;
  bottom: -20px;
}

.iframe-page {
  position: absolute;
  top: -10px;
  left: 0px;
  right: 0px;
  bottom: -20px;
}


.full-cover-page {
  position: absolute;
  top: -10px;
  left: 0px;
  right: 0px;

}

.v1-register {
  display: block;
  width: 100%;
  min-height: 100vh;
  margin: none;
  padding: none;
  border: none;
  float: left;
  margin-bottom: 0px;
  margin-top: 0px;
  background: url(../images/jo-bg-1.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

/* .v2-form-container {
	margin-bottom: 20px;
	display: -webkit-box;
	display: -webkit-flex;
	display: -moz-box;
	display: -ms-flexbox;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
} */

.v2-form-container {
  margin-bottom: 20px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  margin-top: 5%;
}

.v2-register-card {
  position: relative;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: #fff;
  background-clip: border-box;
  border: 1px solid rgba(0, 0, 0, .125);
  border-radius: .25rem;
  margin-top: 20px;
  margin-bottom: auto;
  min-width: 300px;
  background-color: rgba(173, 99, 20, .6) !important;
  border-radius: 10px;
  width: 100%;
}

.v2-register-card-header {
  padding: .75rem 1.25rem;
  margin-bottom: 0;
  background-color: rgba(0, 0, 0, .03);
  border-bottom: 1px solid rgba(0, 0, 0, .125);
}

.v2-register-card-body {
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  padding: 1.25rem;
}

.v2-register-card-footer {
  padding: .75rem 1.25rem;
  background-color: rgba(0, 0, 0, .03);
  border-top: 1px solid rgba(0, 0, 0, .125);
}

.v1-register-card {
  position: relative;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: #fff;
  background-clip: border-box;
  border: 1px solid rgba(0, 0, 0, .125);
  border-radius: .25rem;
  margin-top: 20px;
  margin-bottom: auto;
  width: 300px;
  background-color: rgba(0, 0, 0, 0.5) !important;
  border-radius: 10px
}

.v1-register-card-header {
  padding: .75rem 1.25rem;
  margin-bottom: 0;
  background-color: rgba(0, 0, 0, .03);
  border-bottom: 1px solid rgba(0, 0, 0, .125);
}

.v1-register-card-body {
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  padding: 1.25rem;
}

.v1-register-card-footer {
  padding: .75rem 1.25rem;
  background-color: rgba(0, 0, 0, .03);
  border-top: 1px solid rgba(0, 0, 0, .125);
}

.v1-powered-by-logo-aeswitch {
  content: url(../images/LogoAE.fw_white.png);
  width: 120px;
  margin-top: 10px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.ms-button {
  margin: 0 auto;
  display: inline-block;
  letter-spacing: .15em;
  background: #df1f29;
  color: #fff;
  font-size: 14px;
  line-height: 2.4;
  padding: 0 15px;
  text-transform: uppercase;
  text-decoration: none;
  position: relative;
  font-weight: 600;
  letter-spacing: .15em;
  font-size: 1em;
  transition: all .3s ease;
}

.ms-button:hover {
  color: #00005b;
  cursor: pointer;
}


.float {
  position: fixed;
  width: 20%;
  /* height: 150px; */
  bottom: 5px;
  right: 10px;
  text-align: center;
  z-index: 1000;
}

.my-float {
  margin-top: 22px;
}

.div-img {
  display: inline-block;
}

.vtickets-register-bg {
  position: absolute;
  top: 20px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  background-color: #fafaf9;
  background: url(../images/fluweel.jpeg);
  background-size: 80%;
  background-repeat: no-repeat;
  background-position: top;
  width: 100%;
}

.vtickets-iframe {
  display: block;
  width: 100%;
  height: 100%;
  margin: none;
  padding: none;
  border: none;
  line-height: 0;
  float: left;
  margin-bottom: 10px;
  margin-top: 10px;
  background: url(../images/iframe-loading.gif) center center no-repeat;
}

.wp-iframe {
  display: block;
  width: 100%;
  height: 100%;
  margin: none;
  padding: none;
  border: none;
  line-height: 0;
  float: left;
  margin-bottom: 10px;
  margin-top: 10px;
  /* background: url(../images/jo-black-loading-black-final.gif) center center no-repeat; */
}

.blink-icon {
  animation: blinker 1s linear infinite;
}

.blink {
  animation: blinker 1s linear infinite;
  color: black;
}

@keyframes blinker {
  50% {
    opacity: 0;
  }
}

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

.qr-close-btn {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: right;
}

/* #reader {
  max-height: 244px;
} */

.btn {
  font-family: "Lato";
  text-transform: uppercase;
  font-weight: 300;
  border-radius: 2px;
  background-color: transparent;
  border: 3px solid #333;
  padding: 6px 12px;
  transition: all 0.5s ease;
  cursor: pointer;
}


.btn-slide-down:hover {
  background-position: right top;
}

.btn-save {
  padding: 0.7em 1.5em;
  border: none;
  color: #fff;
  background: linear-gradient(to bottom, #2980b9 50%, #3498db 50%);
  background-size: 100% 200%;
  background-position: left bottom;
}

.btn-save:hover {
  background-position: right top;
}


.item {
  position: absolute;
  top: 35px;
  bottom: 0;
  right: 0;
  left: 0;
  animation-duration: 0.30s;
  animation-timing-function: ease-in-out;
  -webkit-animation-duration: 0.30s;
  -webkit-animation-timing-function: ease-in-out;
}

.item.ng-enter {
  animation-name: slideFromRight;
  -webkit-animation-name: slideFromRight;
}

.item.moveToLeft.ng-enter {
  animation-name: slideFromLeft;
  -webkit-animation-name: slideFromLeft;
}

.item.ng-leave {
  animation-name: slideFromLeft;
  animation-direction: reverse;
  -webkit-animation-name: slideFromLeft;
  -webkit-animation-direction: reverse;
}

.item.moveToLeft.ng-leave {
  animation-name: slideFromRight;
  animation-direction: reverse;
  -webkit-animation-name: slideFromRight;
  -webkit-animation-direction: reverse;
}

@keyframes slideFromRight {
  0% {
    transform: translateX(100%);
  }

  100% {
    transform: translateX(0);
  }
}

@keyframes slideFromLeft {
  0% {
    transform: translateX(-100%);
  }

  100% {
    transform: translateX(0);
  }
}

@-webkit-keyframes slideFromRight {
  0% {
    -webkit-transform: translateX(100%);
  }

  100% {
    -webkit-transform: translateX(0);
  }
}

@-webkit-keyframes slideFromLeft {
  0% {
    -webkit-transform: translateX(-100%);
  }

  100% {
    -webkit-transform: translateX(0);
  }
}

.btn-file {
  position: relative;
  overflow: hidden;
}

.btn-file input[type=file] {
  position: absolute;
  top: 0;
  right: 0;
  min-width: 100%;
  min-height: 100%;
  font-size: 100px;
  text-align: right;
  filter: alpha(opacity=0);
  opacity: 0;
  outline: none;
  background: white;
  cursor: inherit;
  display: block;
  border-radius: 50px;


}

.upload-file {
  position: absolute;
  left: 0;
  opacity: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  cursor: pointer;
}

.icon-img {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;

}

.icon-img-text {
  position: absolute;
  top: 65px;
  bottom: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  /*   color: white; */

}

.files {
  color: white;

}

.icon-label {
  display: inline-block;
  position: relative;
  height: 50px;
  width: 50px;
  margin-bottom: 30px;
  margin-right: 10px;
  margin-left: 10px;
}


.my-datepicker {
  height: 50px;
  width: 300px;
  margin-bottom: 40px;
  margin-top: 40px;
}

.my-datepicker .btn {
  padding: 8px 9px;
}

/* .text-input.text-input::placeholder {
  color: white;
  opacity: 1;
}

.text-input--material__label {
  color: white;
  opacity: 1;
} */

.v2-button {
  background-color: black !important;
}

.btn-black,
.btn-black:hover,
.btn-black:active,
.btn-black:visited {
  background-color: black !important;
  color: white;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 17px;
}

.btn-black.disabled,
.btn-black[disabled] {
  opacity: .35;
}


.textarea {
  display: block;
  width: 100%;
  overflow: hidden;
  min-height: 40px;
  line-height: 20px;


  overflow-x: hidden;
  overflow-y: auto;
  white-space: pre-wrap;
  word-wrap: break-word;
  padding: 0 0 0 2px;
  outline: 0;

}

.textarea {
  border: 1px solid #ccc;
  border-radius: 10px;
  font-family: inherit;
  font-size: inherit;
  padding: 10px;
}

.textarea[contenteditable]:empty::before {
  content: "Type a message";
  color: gray;
}


.textarea-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  margin-bottom: 5px;

}

.textarea-attachment {
  flex: 10%;
  text-align: center;
  cursor: pointer;
}

.textarea-msg {
  flex: 70%;
  padding: 0px;
  width: 180px;
}

.textarea-send {
  flex: 15%;
  cursor: pointer;
}

.circle {
  background: #008a7c;
  border-radius: 50%;
  color: #fff;
  position: relative;
  width: 45px;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  margin-left: 5px;
}


.conversation-compose .send .circle i {
  font-size: 24px;
  margin-left: 5px;
}

.refund-table-th-td {
  text-align: left;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 5px;
  padding-bottom: 5px;

}


:checked+.segment__button {
  background-color: black;
  background-color: black;
  color: #fff;
  color: #fff;
  transition: none;
}

.segment__button {
  color: black;
  color: black;
  border: 1px solid black;
}

.order-status.status-processing {
  background: #c6e1c6;
  color: #5b841b;
}

.order-status {
  display: inline-flex;

  color: #777;
  background: #e5e5e5;
  border-radius: 4px;
  border-bottom: 1px solid rgba(0, 0, 0, .05);
  margin: -.25em 0;
  cursor: inherit !important;
  white-space: nowrap;
  max-width: 100%;
  padding: 10px;
}

.table-container {
  width: 800px;
  height: 200px;
  position: relative;
  margin-left: 5%;
  margin-top: 20px;
  margin-bottom: 20px;

}

.circle-table {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: rgb(79, 78, 78);
  position: absolute;
  top: 45px;
  left: 47px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
}

.square {
  width: 40px;
  height: 40px;
  background-color: white;
  position: absolute;
  border-radius: 10px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.notice-container {
  position: relative;
}

.notice-container img {
  border-radius: 10px;
  width: 100%;
}

.date-overlay {
  position: absolute;
  top: 10px;
  left: 20px;
  color: black;
}

.date-overlay .day-of-month {
  margin-top: 2px;
  margin-bottom: 0px;
  font-size: 40px;
  font-weight: bold;
}

.date-overlay .month-year {
  margin-top: 0px;
  font-size: 16px;
}

.info-overlay {
  margin-right: 15px;
  margin-left: 5px;
  position: absolute;
  bottom: 10px;
  left: 10px;
  color: black;
  padding-left: 20px;
  background-color: white;
  opacity: 0.7;
  min-width: 90%
}

.info-overlay .notice-heading {
  margin-top: 2px;
  margin-bottom: 0px;
  font-size: 14px;
  font-weight: bold;
  font-family: Roboto, Noto, sans-serif;
}

.info-overlay .notice-info {
  margin-top: 0px;
  font-size: 12px;
  word-break: normal;
  margin-bottom: 10px;
}

.landing-page-container {
  position: absolute;
  text-align: center;
  bottom: 100px;
  left: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 100%;

}

.landing-page-container h1 {
  font-size: 1.0em;
  letter-spacing: .02em;
  color: #fff;
  font-weight: 700;
  border-radius: 15px;
  background-color: #7FBFE9;
  padding: 10px;
}

.landing-page-container h1:hover {

  color: #FFB625;
  cursor: pointer;

}


.pre-login-button {
  padding: 5px 10px;
  font-weight: bold;
  border: none;
  border-radius: 5px;
  overflow: hidden;
  transition: 0.5s;
  cursor: pointer;
  background: white;
  color: #23396b;
  box-shadow: 0 0 5px white,
    0 0 25px white,
    0 0 50px white,
    0 0 200px white;


}

.pre-login-button:hover {
  background-color: #23396b;
  color: white;
  box-shadow: none;
}

.pre-login-top-toolbar {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  box-sizing: border-box;
  z-index: 1000;
  display: block;
}

.pre-login-top-toolbar-container {
  text-align: right;
  width: 100%;
  padding-right: 30px;
  padding-top: 10px;
}



/* 
.login-dialog .dialog-container {
  background: none !important;
}

.dialog-mask {
  background-color: rgba(0, 0, 0, .8);
}

.login-dialog .dialog {
padding-top: 30px;
  min-width: 90%;
}
 */


/* styles.css */

.body-container-comp3 {
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;

}

.image-container-comp3 {
  position: relative;
  text-align: center;
  /* Center-align the image horizontally */
}

.background-image-comp3 {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

.form-container-comp3 {
  position: absolute;
  /* Position the form container absolutely within the image container */
  top: 70%;
  left: 50%;
  width: 90%;
  transform: translate(-50%, -45%);
  padding: 20px;
}


.msisdn-entry-comp3  {
  width: 100%;
  box-sizing: border-box;
  border: 2px solid #8a0304;
  border-radius: 4px;
  font-size: 24px;
  background-color: white;
  padding-top: 8px;
  padding-bottom: 8px;
  text-align: center;
  font-weight: bold;
}

.submit-btn-comp3 {
  background-color:  #be1218;
}

.msisdn-entry-comp3::placeholder {
  color: #8a0304; /* Example color */
}



.body-container-comp4 {
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;

}

.image-container-comp4 {
  position: relative;
  text-align: center;
  /* Center-align the image horizontally */
}

.background-image-comp4 {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

.form-container-comp4 {
  position: absolute;
  /* Position the form container absolutely within the image container */
  top: 70%;
  left: 50%;
  width: 90%;
  transform: translate(-50%, -45%);
  padding: 20px;
  color: white;
}


.msisdn-entry-comp4  {
  width: 100%;
  box-sizing: border-box;
  border: 2px solid #17468D;
  border-radius: 4px;
  font-size: 24px;
  background-color: white;
  padding-top: 8px;
  padding-bottom: 8px;
  text-align: center;
  font-weight: bold;
  color:#17468D
}

.submit-btn-comp4 {
  background-color:  #17468D;
}

.msisdn-entry-comp4::placeholder {
  color: #17468D; /* Example color */
}