/*
 * NEW v2 CSS
 */

/******************************************************************
 * W3CSS extensions
 */
@media(max-width:600px){.w3-mobile-only{display:block !important}}
@media(min-width:601px){.w3-mobile-only{display:none !important}}
.w3-button, .w3-btn {
   min-width: 3em;
}
h1, h2, h3, h4, h5, h6 {
   _font-size:revert;
}
h1{font-size:26px}
h2{font-size:24px}
h3{font-size:22px}
h4{font-size:20px}
h5{font-size:18px}
h6{font-size:16px}
.w3-input {
   border-radius: 5px;
   background-color: #F7F7F7;
   border: 1px solid var(--orange);
}
.w3-input:focus {
   box-shadow: 0 0 5px 0 var(--orange);
   border: 1px solid var(--orange);
}
.w3-input.readonly {
   color: #A4A4A4;   
   border:0;
}
.w3-input-inline {
   width:revert;
   display:revert;
}
.w3-padding-bottom-32 {
   padding-bottom:32px!important
}

:root {
   --orange: #ffa43b;
   --light-grey:#CCC;
   --grey:#BBB;
}

/******************************************************************
 * DOCUMENT LAYOUT
 */
body {
   font-family: roboto, sans-serif, "Helvetica Neue", "Lucida Grande", Arial;
   margin-bottom:60px;
   _padding-top: 85px; /* header */
   _padding-bottom: 45px; /* footer */
}
body > main  {
   _margin-top: 83px;
   padding-top:10px !important;
   margin-top: 74px;
}
/* body > main._all_.home {   
   max-width: none;
   box-shadow: none;
   background-color: transparent !important;   
} */
header .w3-cell {
   padding:3px 10px;
   _white-space: nowrap;
   font-size: calc(11px + 0.2vw);
}
body > footer {
   position: fixed;
   left: 0;
   bottom: 0;
   width: 100%;
   background-color: white;
   _color: white;
   text-align: center;
   margin-top: 20px;
 }
.topnav {
   position: relative;
   z-index: 2;
   font-size: 17px;
   background-color: #5f5f5f;
   color: #f1f1f1;
   width: 100%;
   padding: 0;
   letter-spacing: 1px;
   font-family: "Segoe UI",Arial,sans-serif;
}
.topnav .w3-bar a:hover, .topnav .w3-bar a:focus {
   background-color: #ececec !important;
   color: #ffffff !important;
}
.topnav a.w3-bar-item:hover, .topnav .w3-bar-item:hover {
   background-color: #6a6a6a !important;
   color: #ffffff !important;
}
.flex-parent {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
}
.flex-box {
   flex: 0 1 170px;
   margin: 5px;
   white-space: normal;
}

/******************************************************************
 * GENERAL TYPOGRAPHY
 */
.uppercase {
   text-transform: uppercase;
}
.nowrap {
   white-space:nowrap;
}
.pointer {
   cursor: pointer;
}

/******************************************************************
 * LOGO / BRANDING
 */
.logo {
   background-image: url('images/cellpower_logo.svg');
   background-size: contain;
   background-repeat: no-repeat;
	background-position: center center;
   height: 160px;
}
.logo-noshadow {
   background-image: url('images/cellpower_logo-noshadow.svg');
}
.topnav .logo {
   background-image: url('images/cellpower_logo-noshadow.svg');
}
.login .logo {
   height:160px;
}
h3 > img {
   max-height:50px;
   padding-right:10px;
   max-width: 150px;
}
/* style the heading text when it is preceded by a logo image */
h3 >  img + .heading_text{
   border-left: 4px solid #f7860d;
   height: 50px;
   line-height:50px;
   display: inline-block;
   padding-left:10px;
}

/******************************************************************
 * ICONS
 */
.bg-icon {
   background-size: contain;
   background-repeat: no-repeat;
	background-position: center center;
   display: inline-block;
}
.bg-icon.navbar {
   height:36px;
   width:42px;
   vertical-align: middle;
}
.bg-icon.navbar.home {
   background-image: url('images/navbar_home.svg');
}
.bg-icon.navbar.account {
   background-image: url('images/navbar_account.svg');
}
.bg-icon.navbar.products {
   background-image: url('images/navbar_shopping_cart.svg');
}
.bg-icon.navbar.menu {
   background-image: url('images/navbar_hamburger.svg');
}
.bg-icon.navbar.info {
   background-image: url('images/navbar_info.svg');
}

/******************************************************************
 * CAROUSEL / SLIDER
 */
 .slider {
   width: 100%;
   text-align: center;
   overflow: hidden;
}
.slides {
   display: flex;
   overflow-x: auto;
   -ms-scroll-snap-type: x mandatory;
   scroll-snap-type: x mandatory;
   scroll-behavior: smooth;
   -webkit-overflow-scrolling: touch;
}
.slides > div {
   scroll-snap-align: start;
   flex-shrink: 0;
   width: 25%;
   min-width: 170px;
   _width: 300px;
   _height: 300px;
   _margin-right: 50px;
   _border-radius: 10px;
   background: #eee;
   transform-origin: center center;
   transform: scale(1);
   transition: transform 0.5s;
   position: relative;
   _display: flex;
   _justify-content: center;
   _align-items: center;
   _font-size: 100px;
}

/******************************************************************
 * COLOURS
 */
.w3-light-grey, .w3-hover-light-grey:hover, .w3-light-gray, .w3-hover-light-gray:hover {
   color: #000 !important;
   background-color: #f1f1f1 !important;
}
.w3-white {
   color:inherit;
   background-color: #fff !important;
}
.w3-border-red, .w3-hover-border-red:hover {
   border-color: #fd6256 !important;
}
.w3-pale-red, .w3-hover-pale-red:hover {
   color: #000 !important;
   background-color: #ffdddd !important;
}
.w3-orange, .w3-hover-orange:hover {
   color: white !important;
   background-color: #ffa43b !important;
}
/* .w3-blue, .w3-hover-blue:hover {
   color: white !important;
   background-color: #32487d !important;
} */
.w3-blue, .w3-hover-blue:hover {
   color: #fff !important;
   background-color: #62a9e8 !important;
}
.w3-border-blue, .w3-hover-border-blue:hover {
   border-color: #2B6A9B !important;
}
.w3-light-blue, .w3-hover-light-blue:hover {
   color: #085997 !important;   
   background-color: #d1ebff !important;
   border-color: #5fabe6 !important;
}
.w3-green, .w3-hover-green:hover {
   color: #fff !important;
   background-color: #4CAF50 !important;
}
.w3-dark-green, .w3-hover-dark-green:hover {
   color: #fff !important;
   background-color: #55953e !important;
}
.w3-border-green, .w3-hover-border-green:hover {
   border-color: #4CAF50 !important;
}
.w3-pale-green, .w3-hover-pale-green:hover {
   color: #000 !important;
   background-color: #ddffdd !important;
}
.w3-red, .w3-hover-red:hover {
   color: #fff !important;
   background-color: #fd6256 !important;
}
.w3-hover-grey:hover, .w3-hover-gray:hover {
   background-color: #ccc !important
}
.w3-hover-medium-grey:hover, .w3-hover-medium-gray:hover {
   background-color: #DDD !important
}
.w3-dark-grey, .w3-hover-dark-grey:hover {
   color: white !important;
   background-color: #6a6a6a !important;
}
.w3-hover-dark-grey:hover, .w3-hover-dark-gray:hover {
   background-color: #6a6a6a !important
}
.w3-border-yellow, .w3-hover-border-yellow:hover {
   border-color: #ffeb3b !important;
}
.w3-pale-yellow, .w3-hover-pale-yellow:hover {
   color: #79522f !important;
   background-color: #ffffcc !important;
}
.w3-amber, .w3-hover-amber:hover {
   color: #000 !important;
   background-color: #ffc107 !important;
}
.w3-gold, .w3-hover-gold:hover {
   color: #000 !important;
   background-color: #fdd372 !important;
}
.w3-border-lightbrown, .w3-hover-border-lightbrown:hover {
   border-color: #e1a455 !important;
}

/******************************************************************
 * PRODUCTS
 */
.w3-col.stock_group {
   _max-width:300px;
   _max-height:300px;
}
.w3-col .stock_types {
   _max-width:300px;
   max-height:200px;
   overflow:auto;
}
.product_menu {
   _background-color: #0b95ff;
}
.flex-box.stock_group {
   min-width: 240px;
   padding: 5px;   
   _color: white;
   border: 1px solid #FFAD71;
   _opacity: 80%;
   _background: #3eabff;
}
.flex-box.stock_group > h3 {
   margin:0;
   font-size:19px;
}
.flex-box.stock_group:hover {
   opacity: 100%;
}
.product_menu.w3-mobile img.operator_logo {
   max-width: 90px;
   max-height:30px;
   vertical-align: middle;   
}
.product_menu.w3-mobile .cp-stock_group img.operator_logo {
   max-width: 55px;
}
.product_menu.w3-mobile .cp-stock_group-stock_type img.operator_logo {
   margin-right:10px;
}
.product_menu.w3-hide-small img.operator_logo {
   max-height:50px;
   max-width: 150px;
}
.product_menu.w3-hide-small .stock_types img.operator_logo {
   max-height:20px;
   max-width: 90px;
   margin-right: 10px;
}
.product_menu.w3-hide-small .stock_types .menu_item.hide_logo img.operator_logo {
   display:none;
}
.product_menu.flex_parent .flex-box {
   flex: auto;
}
ul.stock_types {
   margin: 0;
   padding:0;
}
ul.stock_types > li {
   padding: 7px;
   list-style: none;
   background-color: #F0F0F0;
   box-sizing: border-box;
   margin-bottom: 3px;
}
ul.stock_types > li:hover {
   background-color:#add8f9;
}
ul.stock_types > li:hover a {
   color:#085997;
}
.stock_type a {
   width:100%;
   display: block;
   _border-radius:5px;
   _margin-bottom: 5px;
   text-decoration: none;   
   font-size: 12pt;
   color: dimgrey;
}

/******************************************************************
 * AIRTIME VOUCHERS
 */
.cp-operator,
.cp-stock_group {
   height:70px;
   vertical-align: middle;
   display: table-cell;
   width:inherit;
   padding:10px;
}
.cp-operators .slides > div,
.cp-stock_groups .slides > div {
   flex-shrink:unset;
   min-width: 80px;
   font-size: 12px;
   font-weight: 600;
   color: grey;
   border-radius: 8px;
   padding: 0;
}
.cp-operator img.operator_logo {
   max-width: 90px;
   max-height:30px;
   vertical-align: initial;
}
.cp-operators.slider .cp-operator img.operator_logo {
   max-width: 66px;
}
.cp-operator-voucher img.operator_logo {
   vertical-align:middle;
   margin-right: 10px;
   max-width: 90px;
   max-height:30px;
}
.cp-operator-voucher a {
   display: block;
   _height: 30px;
   width: 100%;
}
.cp-operator-voucher,
.cp-stock_group-stock_type {
   display:table;
   padding:10px;
   width: 100%;
   background-color: #EEE;
   margin-top: 5px;
   font-size: calc(10px + 0.5vw);
}
.cp-operator-voucher:hover,
.cp-stock_group-stock_type:hover {
   background-color: #DDD !important;
}
.cp-operator-voucher a,
.cp-stock_group-stock_type a {
   text-decoration: none;
   color: dimgrey;
}
.cp-content.airtime.purchase1 .cp-operator.voucher a {
   display: table-cell;
   vertical-align: middle;
   width: 130px;
   height: 110px;
}
.cp-content.airtime.purchase1 .cp-operators .slides > div {
   flex-shrink: unset;
   min-width: 150px;
}

/******************************************************************
 * CLARO-SPECIFIC ACCOUNT PAYMENT STUFF 
 */
table.cp-account_payment-service {
	border-collapse:collapse;
}
table.cp-account_payment-service tr td, table.cp-account_payment-service tr th {
	border: 1px solid #D0D0D0;
	padding: 5px;
}
table.cp-account_payment-service tr th {
	font-size: 9pt;
}
table.cp-account_payment-service_header tr td {
	background-color:#F7F7F7;
	vertical-align: top;
	border: 0px;
}
table.cp-account_payment-service tr.total td {
	font-weight:bold;
	font-size:12pt;
}
tr.cp-account_payment-service_header {
	background-color:#F7F7F7;
}
.cp-account_payment-service_description {
	font-weight: bold;
	font-size:10pt;
}
.cp-account_payment-service_warning {
	 text-decoration:underline;
	
}
.cp-account_payment-account_debtor {
	font-size:10pt; 
	font-weight:bold; 	
	text-transform:uppercase;
}
div.cp-account_payment-receipt {
   font-family: "Lucida Console", Monaco, Courier, monospace;
	width:350px;
}
.cp-account_payment-error {
	color: #fd6256;
}

/******************************************************************
 * PRINTED RECEIPT 
 */
div.tokens {
   max-width: 435px;
   font-family: "Lucida Console", Monaco, Courier,monospace; 
}
table.cp-receipt {
   width:100%;
}
table.cp-receipt td:last-child {
   text-align: right;
   white-space:nowrap;
}
table.cp-receipt td {
   font-family: "Lucida Console", Monaco, Courier, monospace;
   color: black;
}

/******************************************************************
 * ACS 
 */
#_ok_button_ {		
   -webkit-animation: glow 1s ease-in-out infinite alternate;
	-moz-animation: glow 1s ease-in-out infinite alternate;
	animation: glow 1s ease-in-out infinite alternate; 
}
@keyframes glow {
   from {
      box-shadow: 0 0 0 0 white;
   }
   to {
      box-shadow:0 0 7px 0 #555;
   }
}

/******************************************************************
 * WU 
 */
/* 
 * the table containing the WU token for a reprint via the sales report page:
 * override any parent table styling
 */
.wu_prod_search {
   position:sticky;top:80px;
}
.wu_token_reprint table tbody tr {
   background-color: white !important; 
}
.wu_token_reprint table td {   
   padding:0 !important;
}

/******************************************************************
/* REPORTS
 */
.trans_id {
   cursor: pointer;
   color: #018AFF;
   text-decoration: none;
}
.trans_id:hover {
   text-decoration:underline;
}
.reprint_email {
   background-image: url("images/mail-white.svg");
   height:25px;
   width:25px;
   vertical-align: middle;
   background-size:80%;
   border-radius:25px;
   background-color: var(--orange);
   margin-left: 10px;
}
.reprint_email:hover {
   background-color:var(--grey);
}
.trans_ok,.positive {color:green}
.trans_fail,.negative {color:#AA0000}

/******************************************************************
 * MEDIA WIDTH
 */
@media (max-width:600px) {
   body,h1, h2, h3, h4, h5, h6 {
      font-size:revert;
   }   
   .w3-container, .w3-panel {
      padding: 0.01em 10px;
   }
   .flex-box {
      min-width:100%;
   }
   .flex-box.stock_group {      
      border:0;
      min-width: 100%;
   }
   .flex-box.stock_group .stock_types {
      display: none;      
   }
   .w3-modal-content {
      margin:0;
   }
   body > main.w3-card,
   body > .w3-card-4 {
      box-shadow: none;
   }
   body > main  {
      _margin-top: 83px;
      _padding-top:10px !important;
      margin-top: 115px;
   }
   .check_response.w3-table th:first-child, .check_response.w3-table td:first-child {
      padding-left: unset;
   }
   .check_response.w3-table td, .check_response.w3-table  {
      padding: 3px 3px;
      display: block;
   }
   h3 > img {
      max-height: 20px;
   }
   h3 > img + .heading_text {
      height: 30px;
      line-height: 30px;
   }
   .w3-half {
      margin-bottom: 10px;
   }
   .wu_prod_search {
      top:120px;
   }
   .product_menu.flex_parent .flex-box a img {
      display: none;
   }
   .w3-tiny {
      font-size: 9px !important;
   }
}

/******************************************************************
 * MEDIA PRINT
 * 
 * must change printclass -> print and printclass1 -> noprint
 */
 @media print { 

   .print { display:block; } /* was printclass */
	.noprint { display:none !important; } /* was printclass1 */

   * {box-shadow:none !important;}
	body {
      font-size:10pt !important;
      margin:0 !important;
      padding:0 !important;
      line-height:1.3 !important;
      font-family: "Lucida Console", Monaco, Courier, monospace;
      color: black !important;
   }
   body > main {margin:0 !important;padding:0 !important;max-width:none !important;}
   header {display:none}
   footer {display:none}
   hr {border-top: 1px solid black !important;}
   /* NOTE: GWE - some of the classes below may be deprecated and should be cleaned up, e.g.
    * the voucher classes
    */
   table.voucher { color:#000000 !important; } 
   table.voucher table { color:#000000 !important; }
   div.voucher {padding:0;color:#000000 !important;}
   td {font-size:10pt}
   div.tokens {width:350px;max-width:none;}
   div.receipt {width:350px;max-width:none;}	
   table.cp-receipt td:last-child {
      white-space: normal;
   }
	button {display:none;}
   .w3-button {display:none;}
	.info, .success, .warning, .error, .validation, .confirm {
	   border: 0;
	   margin: 0;
	   padding: 5px !important;
	   background: none;
	   color: black;
	}
	.info.small, .success.small, .warning.small, .error.small, .validation.small, .confirm.small {
	   padding:3px !important;
	}
	.container_right {display:none !important}
}