/*
Theme Name: Shopkite Agents Template
Author: Damola Ogunbambo
Author URI: https://agent.shopkite.com.ng/
Description: The Shopkite agent theme
Version: 1.0
License: Shopkite
Tags: shopkite, shopkite agent

This theme is the intellectual property of Shopkite trademark 
*/


/**
 * Table of Contents
 *
 * 1.0 - Reset
 * 2.0 - Genericons
 * 3.0 - Typography
 * 4.0 - Elements
 * 5.0 - Forms
 * 6.0 - Navigations
 *   6.1 - Links
 *   6.2 - Menus
 * 7.0 - Accessibility
 * 8.0 - Alignments
 * 9.0 - Clearings
 * 10.0 - Header
 * 11.0 - Widgets
 * 12.0 - Content
 *    12.1 - Posts and pages
 *    12.2 - Post Formats
 *    12.3 - Comments
 * 13.0 - Footer
 * 14.0 - Media
 *    14.1 - Captions
 *    14.2 - Galleries
 * 15.0 - Multisite
 * 16.0 - Media Queries
 *    16.1 - Mobile Large
 *    16.2 - Tablet Small
 *    16.3 - Tablet Large
 *    16.4 - Desktop Small
 *    16.5 - Desktop Medium
 *    16.6 - Desktop Large
 *    16.7 - Desktop X-Large
 * 17.0 - Print
 */

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

/**
 * 1.0 - Reset
 *
 * Resetting and rebuilding styles
 * 
 */

	* {
		padding: 0;
		margin: 0;
	}

	html, body {
		width: 100%;
		overflow-x: hidden;
	}


/**
 * 2.0 - Genericons
 *
 * Resetting and rebuilding styles
 * 
 */
 	.icon {
 		width: 30px;
 		height: 30px;
 	}
 	input[type=text],input[type=password],input[type=email],input[type=number],input[type="tel"], input[type="datetime-local"],textarea,select,input[type=search] {   
   	/* iOS Input Style */
   	-webkit-appearance: none;
   	-moz-appearance: none;
   	appearance: none;  
}

/**
 * 3.0 - Typography
 *
 * Resetting and rebuilding styles
 * 
 */
 	.thin-text {
 		font-weight: 100;
 	}
/**
 * 4.0 - Elements
 *
 * Resetting and rebuilding styles
 * 
 */
	header {
 		background-color: #fff;
 	}

	img {
		max-width: 80%;
	}

	section {
		border-bottom: 1px solid #e3e3e3;
	}

	footer {
		padding: 15px 0;
		background-color: transparent;
		color: #616161;
	}

	select {
		background-image: url('../images/icons/drop-down-arrow.png');
		background-position: right center;
    	background-size: 35px;
    	background-repeat: no-repeat;
	}

	ul, ol {
	    padding-left: 2rem !important;
	}


/**
 * 5.0 - Forms
 *
 * Resetting and rebuilding styles
 * 
 */
 	input[type="email"], input[type="text"],input[type="tel"], input[type="password"], text, select, input[type="url"],
 	input[type="date"], input[type="number"], input[type="datetime-local"], textarea,input[type=search]  {
 		border: 1px solid #dadada;
 		background-color: transparent;
 		height: 45px;
	   border-radius: 40px;
	   text-indent: 25px;
 	}

 	button, a.button {
 		border-radius: 40px;
 		padding: 10px 30px;
 		color: #fff;
 		text-align: center;
 		background-color: #ff0200;
 		border: none;
 		display: inline-block;
 	}

 	.grey-button {
 		background-color: #e4e4e4 !important;
 	}

 	.inactive-button {
 		cursor: not-allowed;
 	}

 	input[type="email"], input[type="text"],input[type="tel"], input[type="password"], text, select, button, input[type="url"],
 	input[type="date"], input[type="number"], input[type="datetime-local"], textarea,input[type=search],a.cta  {
 		width: 90%;
 		max-width: 600px;
 	}

 	.selectize-input {
   	border: 1px solid #dadada !important;
   	background-color: transparent !important;
   	height: 45px !important;
   	border-radius: 40px !important;
   	/*text-indent: 25px !important;*/
   	background-image: url(../images/icons/drop-down-arrow.png) !important;
   	background-position: right center !important;
   	background-size: 35px !important;
   	background-repeat: no-repeat !important;
   	padding: 10px 0px 0px 25px !important;   	
   	width: 90% !important;
 		max-width: 600px !important;
 		text-align: left;
	}

	.selectize-control.single .selectize-input:after {
		content: none !important;
	}

 	textarea {
		height: 110px;
		padding-top: 20px;
		padding-left: 25px;
		text-indent: 0;
		border-radius: 10px;
 	}

 	label.align-content-middle {
	    height: 45px;
	    line-height: 45px;
	}

	input[type="datetime-local"] {
		padding-right: 15px;
	}

 	a.inverted, button.inverted {
 		color: #ff0200;
 		background-color: #fff;
 		border: 1px solid #ff0200;
 	}

 	.cta-holder, .description {
 		padding: 20px 10px;	
 	}

 	div#country-code-holder {
		position: absolute;
		left: 30px;
	}

	div#country-code-holder,div.country-code-holder {
	   width: 100px;
	   text-indent: unset;
	}

	div.country-code-holder {
		float: left;
	}

	div#country-code-holder select,div.country-code-holder select {
	    border: none;
	    /*background-color: #f3f3f3;*/
	    text-indent: 15px;
	}

	input.telephone {
	    text-indent: 90px;
	}

	input[type="date"] {
	    text-indent: 13px;
	    padding-right: 10px;
	}

	.file-upload-holder {
	    width: 100%;
	    height: 150px;
	    background-color: #f1f1f1;
	    max-width: 150px;
	    margin: 0 auto;
	    border: 1px dashed #adacac;
	    position: relative;
	    cursor: pointer;
	    overflow-y: hidden;
	}

	.file-upload-input-hide {
		visibility: hidden;
		position: fixed;
	}

	.file-upload-holder img {
		width: 130px;
		height: auto;
		margin: auto;
		max-width: unset;
		top: 0;
	    bottom: 0;
    	position: absolute;
    	left: 10px;
    	cursor: pointer;
	}

	.readonly {
		cursor: not-allowed;
	}

	.progress { position:relative; width:100%;border-radius: 1rem;}
    .bar { background-color: #ff0200; width:0%; height:20px; }
    .percent { position:absolute; display:inline-block; left:50%; color: #040608; top: 0px;}

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

/**
 * 6.0 - Navigations
 *
 * Resetting and rebuilding styles
 * 
 */

 	/**
	 * 6.1 Links
	 */
	 	a {
	 		text-decoration: none;
	 		color: #ff0200;
	 	}

		.no-focus-links {
			color: #757575;
			text-decoration: none;
			cursor: pointer;
		}

		.no-focus-links:hover {
			text-decoration: underline;
		}

		a[href^="tel"] {
		  color: inherit; /* Inherit text color of parent element. */
		  text-decoration: none; /* Remove underline. */
		  /* Additional css `propery: value;` pairs here */
		}

		.paginate {
		    padding: 20px 0;
		    width: auto;
		    margin: 0 auto;
		}

		.page-item.active .page-link {
			background-color: #ff0200;
    		border-color: #ff0200;
		}

		.page-link {
			color: #ff0200;
		}
		
		.page-link:hover {
			color: #ff0200;
		}

		a.action-btn-dash-top {
			display: inline-block;
			padding-top: 0;
    		padding-bottom: 0;
		}

	/**
	 * 6.2 Menus
	 */
	 	div#side-menu {
		    position: fixed;
		    right: -300px;
		    width: 300px;
		    background-color: #fff;
		    z-index: 3;
		    height: 100%;
		    top: 80px;
		    transition: right 0.7s;
		    box-shadow: 5px 5px 13px rgba(0,0,0,0.5);
		    overflow-y: auto;
		    padding-bottom: 80px;
		}

		.menu-items li {
		    padding: 10px;
		    cursor: pointer;
		    border-radius: 10px;
		}

		.menu-items li:hover {
			background-color: #ff0200;
		}

		.menu-items li:hover a {
			color: #fff;
		}

		.menu-items li a {
		    display: inline-block;
		    width: 100%;
		    /*height: 100%;*/
		}

		li a img.icon {
			margin-right: 5px;
		}

		.menu {
			background-image: url('../images/icons/dashboard.png');
			float: right;
			margin-right: 50px;
			width: 50px;
			height: 50px;
			background-size: 100% auto;
			background-position: center;
			margin-top: 10px;
			cursor: pointer;
		}

		.profile-pic-holder {
		    width: 70px;
		    text-align: center;
		    border-radius: 70px;
		    height: 70px;
		    background-size: cover;
		    background-repeat: no-repeat;
		    margin: -10px 10px 0;
		    background-position: center;
		}

		.user-data {
		    width: 200px;
		    vertical-align: middle;
		    padding-left: inherit;
		}

		.menu-icon {
			width: 50px;
			text-align: right;
		}

		.close-menu {
			margin-right: 0;
			margin-top: 0;
		}

		.profile-pic-holder, .user-data, .menu-icon {
			float: left;
		}

		/*HAMBURGER MENU*/
		.menu-btn {
		  position: relative;
		  display: flex;
		  justify-content: center;
		  align-items: center;
		  width: 80px;
		  height: 80px;
		  cursor: pointer;
		  transition: all .5s ease-in-out;
		  float: right;
		  /* border: 3px solid #fff; */
		}
		.menu-btn__burger {
		  width: 40px;
		  height: 4px;
		  background: #ff0200;
		  border-radius: 5px;
		  /*box-shadow: 0 2px 5px rgba(255,101,47,.2);*/
		  transition: all .5s ease-in-out;
		}
		.menu-btn__burger::before,
		.menu-btn__burger::after {
		  content: '';
		  position: absolute;
		  width: 40px;
		  height: 4px;
		  background: #ff0200;
		  border-radius: 5px;
		  /*box-shadow: 0 2px 5px rgba(255,101,47,.2);*/
		  transition: all .5s ease-in-out;
		}
		.menu-btn__burger::before {
		  transform: translateY(-12px);
		}
		.menu-btn__burger::after {
		  transform: translateY(12px);
		}
		/* ANIMATION */
		.menu-btn.open .menu-btn__burger {
		  transform: translateX(-50px);
		  background: transparent;
		  box-shadow: none;
		}
		.menu-btn.open .menu-btn__burger::before {
		  transform: rotate(45deg) translate(35px, -35px);
		}
		.menu-btn.open .menu-btn__burger::after {
		  transform: rotate(-45deg) translate(35px, 35px);
		}
 
/**
 * 8.0 - Alignments
 *
 * Resetting and rebuilding styles
 * 
 */

	.centralize {
		text-align: center;
	}

	.centralize-btn {
		margin: 10px auto !important;
		text-align: center !important;
	}

	.merchant-btn {
    background-color: #ff6600 !important;
	}

	img.centralize {
    margin: 10px auto;
	}

	.grey-border {
		border: 2px solid #e4e4e4;
	}

	.align-content-middle-vertical {
		height: fit-content;
	    position: absolute;
	    margin-top: auto;
	    margin-bottom: auto;
	    top: 0;
	    bottom: 0;
	}

	.relative-pos {
		position: relative;
	}

	.align-content-middle-horizontal {
		margin-right: auto;
		margin-left: auto;
	}

	.top-bottom-padding, .top-bottom-padding-mobile {
		padding-top: 10px;
		padding-bottom: 10px; 
	}

	.large-padding {
		padding: 150px 0;
	}

	.medium-padding {
		padding: 75px 0;
	}

	.small-padding {
		padding: 35px 0;
	}

	.side-padding {
		padding-left: 40px;
    	padding-right: 40px;
	}

	.align-content-left {
		text-align: left;
	}

	.align-content-right {
		text-align: right;
	}

	.align-content-justify {
		text-align: justify;
	}

	.relative {
		position: relative;
	}

	span.relative svg {
   	height: 40px;
	}

	.sm\:hidden {
   	display: none;
	}

	.float {
	    position: absolute;
	    width: 280px;
	    background-color: #ffffff;
	    padding: 10px;
	    border: 1px solid #f1f1f1;
	    box-shadow: 1px 1px 5px rgba(0,0,0,0.1);
	    top: 32px;
	    margin: auto;
	    left: 0;
	    right: 0;
	    z-index: 2;
	}

	.float:after {
		content: "";
	    position: absolute;
	    display: block;
	    width: 37px;
	    height: 12px;
	    top: -12px;
	    left: 0;
	    right: 0;
	    margin: 0 auto;
	    background-image: url('../images/icons/dropdown-arrow.png');
	    background-size: 100% 100%
	}

	.margin-horizontal-space-small {
		margin-top: 20px;
		margin-bottom: 20px;
	}

	.filter-text {
		cursor: pointer;
		background-color: #f2f2f2;
   	width: fit-content;
   	margin: 0 auto;
   	padding: 3px 10px;
   	border-radius: 5px;
   	box-shadow: 1px 1px 3px #d6d6d6;
   }

   .filter-text:hover {
	   box-shadow: 1px 1px 3px #adabab;
	   padding: 4px 12px;
	   transition: 0.7s all;
	}


/**
 * 10.0 - Clearings
 *
 * Resetting and rebuilding styles
 * 
 */
	.no-border {
		border: none;
	}


/**
 * 10.0 - Header
 *
 * Resetting and rebuilding styles
 * 
 */

 	.site-logo {
 		background-image: url('../images/shopkite-agent-icon.png');
 		background-repeat: no-repeat;
 		background-size: 100% auto;
 		width: 50px;
 		height: 50px;
 		margin: 10px auto;
 	}

 	.merchant-logo {
 		background-image: url('../images/shopkite-merchant-icon.png') !important;
 	}

 	header#header {
	    border-bottom: 1px solid #f2f2f2;
	}

	.cta-links {
	    text-align: right;
	    margin-right: 30px;
	    height: 100%;
	    padding: 15px 0;
	}

	.cta-links a {
	    margin: 0 10px;
	}

	.offline {
		filter: grayscale(100%);
	}

/**
 * 10.0 - Header
 *
 * Resetting and rebuilding styles
 * 
 */

 	.overlay {
 		background-image: url('../images/loading.gif');
 		opacity: 0.8;
 		background-repeat: no-repeat;
 		background-size: 200px auto;
 		background-position: center; 
    	z-index: 999;
 	}

 	.overlay, .popup {
 		width: 100%;
 		height: 100%;
 		position: fixed;
 		top: 0;
 		left: 0;
 		background-color: #FFF;
    	display: none;
 	}


/**
 * 12.0 - Content
 *
 * Resetting and rebuilding styles
 * 
 */

 	#landing-area {
 		min-height: 500px;
 		/*background-color: #f5f5f5;*/
 		background-color: #ff0200;
    	color: #fff;
    	background-image: url('../images/agent-web-bg-min.png');
    	background-size: 100%;
 	}

 	.homepage h2 {
 		padding-left: 10px;
 	}

 	.card {
 		padding: 50px;
 		border-radius: 0.365rem;
 		/*min-width: 400px;*/
 	}

	div#dashboard-body {
	    background-color: #fbfbfb;
	    min-height: 400px;
	    overflow-y: auto;
	}

	.dashboard-inner-layout {
	    margin: 30px;
	    min-width: 90%;
	}

	.hide {display: none;}
	.stat-cards {margin-top: 10px;margin-bottom: 10px;}
	.stat-cards .card {padding: 20px;}

	.round-dot {
	    border-radius: 25px;
	    width: 15px;
	    height: 15px;
	    box-shadow: 1px 1px 3px rgba(0,0,0,0.4);
	    margin-left: 15px;
	}

	.round-dot-text-inline {
		display: inline-block;
    	margin-right: 5px;
    	margin-left: 0px;
	}

	.red {
		background-color: #ff0200;
	}

	.grey {
		background-color: #e4e4e4;
	}

	.dark-grey {
		background-color: rgb(87, 88, 78);
	}

	table#activity-table {
	    background-color: #FFF;
	    border: 1px solid #f2f2f2;
	    margin-top: 10px;
	}

	table#activity-table thead tr td {
	    font-weight: bold;
	}

	table#activity-table tr td.status-dot {
		padding-left: 10px;
		width: 100px;
	}

	table#activity-table tbody tr td:first-child {
		text-align: center;
	}

	table#activity-table tr td {
	    padding: 15px 0;
	}

	table#activity-table tr {
	    border-bottom: 1px solid #f2f2f2;
	}

	table#activity-table {
	    text-align: left;
	}

	table#activity-table tbody tr:hover {
		background-color: #f7f7f7;
	}

	.table-holder {
		padding-top: 50px;
	}

	.table-holder-inner {
		padding-top: 10px;
	}

	.card-body {
		padding: 0;
	}

	.white-bg {
		background-color: #fff;
	}

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

	.highlight-box, .action-btn-holder {
		border-radius: 40px;
		height: 40px;
		line-height: 40px;
		max-width: 350px;
		text-align: center;
		margin: 0 auto;
	}

	.highlight-text {
		font-weight: 700;
		color: #ff0200;
	}

	.action-btn-holder {
	    padding-right: 0;
	    margin-right: 15px;
	    text-align: right;
	}

	#otp-countdown-timer {
		font-weight: bold;
		display: inline-block;
	}

	.items-table-header-row {
   	background-color: #f4f4f4;
   	border-top: 1px solid #dadada !important;
	}

	.items-table-row {
   	border: 1px solid #dadada;
   	border-top: none;
	}

	.items-table-row-right {
   	border-left: 1px solid #dadada;
	}

	.item-quantity {
   	max-width: 120px !important;
   	text-align: center;
   	text-indent: unset !important;
	}

	.items-table-row-no-header {
   	border-top: 1px solid #dadada;
	}

	.popup  {
		z-index: 99;
		overflow-y: scroll;
		/*display: block !important;*/
	}

	.payment-receipt-photo, .single-page-image {
		width: 90%;
		max-width: 500px;
		height: auto;
		margin: 10px auto;
	}

	label.cameraButton {
   	display: inline-block;
   	margin: 1em 0;

		/* Styles to make it look like a button */
		padding: 0.5em;
		border: 1px solid #ff0200;

		background-color: #FFF;
		background-image: url('../images/icons/upload@2x-min.png');
		background-size: 30px auto;
		background-repeat: no-repeat;
		background-position: 10px center;
		text-indent: 40px;
		border-radius: 30px;
   }

   /* Look like a clicked/depressed button */
   label.cameraButton:active {
     border-color: #CCC #EEE #EEE #CCC;
   }

   /* This is the part that actually hides the 'Choose file' text box for camera inputs */
   label.cameraButton input[accept*="camera"] {
     display: none;
   }

   .tab-heading, .tab-headers {
   	border-radius: 40px;
   }

   .tab-headers {
   	text-align: center;
   	cursor: pointer;
   	/*transition: background-color .15s linear .1s;*/
   }

   .tab-headers, .tab-body-content {
   	-webkit-transition: all 0.8s ease;
   	transition: all 0.8s ease;
   }

   .tab-body-content ul, .tab-body-content ol, .tab-body-content li {
   	padding-left: 5px !important;
   }

   .tab-body-content li {
   	margin-bottom: 10px;
   }

   .tab-headers:hover {
   	/*background-color: #ff0200;/*#d5d3d3;*/
   	font-weight: 500;
   }

   .number-error-text {
   	color: #ff0200;
   	display: none;
   }

  .one-time-payment-link-more-info {
  	margin: 20px auto;
    background-color: #fff4f4;
    padding: 20px;
    border-radius: 5px;
 	}

	.radio-buttons {
    text-align: left;
    background-color: #f7f7f7;
    margin: 3px auto;
    border-radius: 30px;
    cursor: pointer;
    width: 90% !important;
	}

	.radio-buttons input {
    cursor: pointer;
    /* filter: hue-rotate(120deg); */
    appearance: none;
    width: 20px;
    height: 20px;
    border: 2px solid #dadada; /*#a6a5a5*/
    border-radius: 50%;
    outline: none;
    background-color: white;
    cursor: pointer;
	}

	.radio-buttons input:checked {background-color: #ff0200;}

   /* The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #ff0200;
}

input:focus + .slider {
  box-shadow: 0 0 1px #ff0200;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

/**
 * 11.0 - Footer
 *
 * Resetting and rebuilding styles
 * 
 */
	.social-links {
		text-align: center;
	}

	.social-links li {
		display: inline-block;
		width: 50px;
		height: 50px;
		margin: 20px;
	}

/**
 * 12.0 - Media Queries
 *
 * Resetting and rebuilding styles
 * 
 */
 /*.swiper-slide*/
	@media only screen and (min-width: 360px) and (max-width:768px) {
		html,body {overflow-x: hidden;width: 100%;}
		main#main {text-align: center;}
		.homepage section .col-spaced {
	 		padding-top:20px;padding-bottom:20px;
	 	}
	    .align-content-middle-vertical {
	    	position: initial;
	    }
	    .large-padding {
			padding: 75px 0;
		}

		.medium-padding {
			padding: 30px 0;
		}
		.no-shadow-mobile {
			box-shadow: none !important;
		}
		.no-border-mobile {
			border: none;
		}
		.card {
			padding: 10px;
			min-width: 80%;
			margin-left: 10px;
		}
		.card-single-page {
			margin-left: 10px;
		}
		.absolute-mobile {
		    position: absolute;
		}

		div#help-icon-holder,div#menu-icon-holder, div.menu-btn{
		    width: 60px;
		    height: 60px;
		}

		div#menu-icon-holder {
			/*top: -5px;
		   right: 20px;
		   width: 60px;
		   text-align: right;
		   width: 150px;*/
		   top: 5px;
		   right: 10px;
		   display: flex;
		}

		div#menu-icon-holder .menu {
		    margin-right: 0;
		}

		div#help-icon-holder {
		    left: 0;
		    top: 9px;
		}
		div#side-menu {
			text-align: left;
			min-width: 300px;
			top: 72px;
		}
		#dashboard-body {height: auto !important;}
		.dashboard-inner-layout {margin:10px;max-width: 95%;margin-left: 0;}

		.hide-mobile {
			display: none;
		}
		.stat-cards {
			width: 100%;
		}

		.top-bottom-padding-mobile {
			padding-top: 3px;
			padding-bottom: 3px; 
		}

		table#activity-table tr td.status-dot {
		    padding-left: 5px;
		    width: 60px;
		}
		.centralize-mobile {
			text-align: center !important;
		}

		.table-holder {
			width: 100%;
    		margin: auto;
		}

		.items-table-row-right {
			border-left: none;
		}

		.add-item-mobile {
	   	background-color: red;
	   	color: #FFF;
	   	padding: 20px 0;
		}

		.add-item-mobile a {
	   	color: #FFF;
	   	font-size: 16px;
		}

		.tab-heading-mobile {
			background:none;
		}

		.tab-headers-mobile {
			padding: 10px;
			margin-bottom: 10px;
		}

		.tab-body-content {
			text-align: left;
		}

		.status-holder {
			width: 360px;
    	background: none;
    	margin: 5px auto;
		}

		.status-bar {
			width: 100px;
		}

		.status-value {
			text-align: left;
    	min-width: 150px;
    	max-width: 230px;
		}
	}