/*---------External CSS Imports------------*/
@import "componentLoader.css";
/*-----------------------------------------*/

@import url("https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swap");
@font-face {
	font-family: scb;
	src: url(./scb.ttf);
}

:root {
	--main-color: #2863ac;
	--darker: #20528f;
	--bg: #efefef;
	--text: #fff;
	--description: gray;
	--white: #fff;
	--black: #121212;
	--box-shadow: 0 0.7vh 1.5vh 0.5vh rgba(0, 0, 0, 0.2);
	--box-shadow-index: -1.5vh -1.5vh #7da2cf;
}

/*----------------------------------------Defaults and Scrollbar-----------------------------------------*/

* {
	font-family: "scb", sans-serif;
	margin: 0;
	padding: 0;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	outline: none;
	border: none;
	text-decoration: none;
	color: var(--main-color);
	-webkit-transition: all 0.3s ease-out;
	transition: all 0.3s ease-out;
	scroll-behavior: smooth;
}

::-webkit-scrollbar {
	width: 1vh;
}

::-webkit-scrollbar-track {
	background: hsla(0, 0%, 100%, 0.25);
}

::-webkit-scrollbar-thumb {
	background: hsla(235, 100%, 50%, 0.35);
	border-radius: 1vh;
}

.hidden {
	display: none !important;
}
/*----------------------------------------Index Top Navbar and 4k Img--------------------------------------*/

body {
	background-color: var(--bg);
}

.topNav {
	display: -webkit-inline-box;

	display: -ms-inline-flexbox;

	display: inline-flex;
	height: 10vh;
	overflow: hidden;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	width: 100%;
}

.topNavLeft,
.topNavRight {
	width: 50%;
	height: 100%;
	text-align: left;
	font-size: 3vh;
	padding: 2vh 0;
	display: -webkit-inline-box;
	display: -ms-inline-flexbox;
	display: inline-flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
}

.topNavLeft .topNavImg {
	width: 20%;
}

.topNavLeft img {
	width: 100%;
}

.topNavLeft .link {
	margin-left: 1vh;
	display: -webkit-inline-box;
	display: -ms-inline-flexbox;
	display: inline-flex;
}

.link:hover {
	color: var(--black);
	cursor: pointer;
}

.topNavRight {
	display: -webkit-box;

	display: -ms-flexbox;

	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: reverse;
	-ms-flex-direction: row-reverse;
	flex-direction: row-reverse;
}

.topNavRight .link {
	margin-right: 1.5vh;
}

.topNavRight .linkBtn {
	margin-right: 1.5vh;
	background-color: var(--main-color);
	color: var(--text);
	padding: 1vh 4vh;
	border-radius: 0.5vh;
	-webkit-box-shadow: var(--box-shadow);
	box-shadow: var(--box-shadow);
}

.linkBtn:hover {
	background-color: var(--darker);
	cursor: pointer;
}

.indexImg {
	width: 100%;
}

.insideImg {
	text-align: center;
	z-index: 10000;
	-webkit-transform: translateY(-160%);
	transform: translateY(-160%);
}

.insideImg input {
	border-top-left-radius: 0.5vh;
	border-bottom-left-radius: 0.5vh;
	height: 4vh;
	width: -webkit-fit-content;
	width: -moz-fit-content;
	width: fit-content;
	padding: 0 1.5vh;
	font-size: 2vh;
}

.insideImg button {
	background-color: var(--main-color);
	color: var(--text);
	height: 4vh;
	width: -webkit-fit-content;
	width: -moz-fit-content;
	width: fit-content;
	padding: 1.5vh;
	border-top-right-radius: 0.5vh;
	border-bottom-right-radius: 0.5vh;
	font-size: 2vh;
	display: -webkit-inline-box;
	display: -ms-inline-flexbox;
	display: inline-flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-transform: translateX(-0.3rem);
	transform: translateX(-0.3rem);
}

.insideImg button:hover {
	background-color: var(--darker);
}

/*--------------------------------------Information and Partners-------------------------------------------*/

.information {
	margin-bottom: 30vh;
}

.box-container {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(20vh, 1fr));
	margin: 5% 5%;
	gap: 18%;
}

.box-container .box {
	text-align: center;
	background-color: var(--white);
	-webkit-box-shadow: var(--box-shadow-index), var(--box-shadow);
	box-shadow: var(--box-shadow-index), var(--box-shadow);
	border-radius: 0.5vh;
	padding: 2.5vh;
}

.information .box-container .box {
	height: 150%;
}

.box-container .box h3 {
	color: var(--description);
	padding-bottom: 1.5vh;
	font-size: 2.8vh;
}

.box-container .box p {
	text-align: left;
	color: var(--description);
	font-size: 2.3vh;
}

.partners .box {
	text-align: center;
	background-color: var(--white);
	-webkit-box-shadow: var(--box-shadow-index), var(--box-shadow);
	box-shadow: var(--box-shadow-index), var(--box-shadow);
	border-radius: 1vh;
	padding: 2.5vh;
	width: 95%;
	height: 31vh;
	margin: auto;
}

#partnersDiv {
	margin: auto;
	height: 100%;
	padding: 1.5vh;
	overflow-x: scroll;
	white-space: nowrap;
}

#partnersDiv .partnerBox {
	float: left;
	width: 25%;
	height: 100%;
	margin: 0 0 0 2.5vh;
	text-align: center;
}

#partnersDiv .partnerBox img {
	height: 18vh;
}

.partnerBox h3 {
	font-size: 2.5vh;
}

/*--------------------------------Index About us and Contact us Section---------------------------------------------*/

.contact {
	padding-bottom: 5vh;
}

.contact .box-container {
	margin: 8vh 3vh 0 3vh;
	gap: 5vh;
}

.contact .box-container .box {
	padding: 0;
}

.contact .stuffNav {
	width: 100%;
	display: -webkit-inline-box;
	display: -ms-inline-flexbox;
	display: inline-flex;
}

.contact .stuffNav #personal,
.contact .stuffNav #business {
	width: 50%;
	height: 4.5vh;
	padding-top: 2.5%;
}

.contact .stuffNav .heading.active {
	-webkit-box-shadow: 0 0.5vh #4accff;

	box-shadow: 0 0.5vh #4accff;
}

.contact .box .description {
	text-align: left;
	display: none;
	padding: 2vh;
	font-size: 2vh;
}

.contact .box #descLeft {
	display: block;
}

#personal:hover,
#business:hover {
	cursor: pointer;
	color: var(--main-color);
}

/*----------------------------------------Chat with us--------------------------------------------*/

.inputFields {
	padding: 3vh 2vh 0 2vh;
	text-align: left;
}

.inputFields label {
	color: var(--black);
	font-size: 2vh;
}

.inputFields input,
.contact textarea {
	color: var(--black);
	background-color: var(--white);
	margin: 1vh 0;
	height: 3vh;
	font-size: 2vh;
	width: 100%;
	border-radius: 0.5vh;
	border: solid 0.1vh rgb(192, 192, 192);
	padding-left: 1vh;
}

.inputFields.index {
	text-align: center;
}

.inputFields.index input,
.contact textarea {
	margin: 1vh 0;
}

.contact textarea {
	height: 4.5vh;
	resize: none;
}

.heading {
	color: var(--description);
	font-size: 2vh;
}

#chatWith {
	margin: 1vh 0;
}

.chatWithBtn {
	background-color: var(--darker);
	color: var(--white);
	border-radius: 0.5vh;
	font-size: 2vh;
	padding: 1vh;
	margin: 1vh 0;
}

.chatWithBtn:hover {
	background-color: var(--main-color);
	cursor: pointer;
}

/* ------------------------------------Login and Register pages------------------------------------ */

#loginPage,
#registerPage,
#bugReportBody,
#redeemPage,
#branchList {
	background-color: var(--bg);
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	height: 100vh;
}

.login,
.register,
.bugReport,
.redeem {
	text-align: center;
	display: -webkit-inline-box;
	display: -ms-inline-flexbox;
	display: inline-flex;
}

.login .leftLogin,
.login .rightLogin,
.register .leftRegister,
.register .rightRegister,
.bugReport .leftSide,
.bugReport .rightSide,
.redeem .redeemSide {
	height: 50vh;
	width: 16vw;
	background-color: rgb(57, 54, 131);
	-webkit-box-shadow: var(--box-shadow);
	box-shadow: var(--box-shadow);
	border-top-left-radius: 2vh;
	border-bottom-left-radius: 2vh;
	overflow: hidden;
}

.login .leftLogin img,
.register .leftRegister .leftImg,
.leftSide img,
.redeem .redeemSide img {
	height: 25vh;
	margin: 12.5vh auto;
}

.login .rightLogin,
.register .rightRegister,
.bugReport .rightSide,
.redeem .redeemSide.Right {
	background-color: var(--white);
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
	border-top-right-radius: 2vh;
	border-bottom-right-radius: 2vh;
}

.login .rightLogin h3,
.register .rightRegister h3,
.rightSide h3,
.redeem .redeemSide.Right h3 {
	padding-top: 2vh;
	font-size: 2.5vh;
	font-family: Permanent Marker;
	color: var(--black);
}

#inputPassword,
#inputConfPassword,
#inputBranchPassword {
	font-family: Arial, Helvetica, sans-serif;
}

.login .loginBtn,
.register .loginBtn,
.register .nextBtn,
.register .regBtn,
.rightSide .submitBtn,
.rightSide .backBtn,
.redeem .redeemBtn {
	display: -webkit-box;

	display: -ms-flexbox;

	display: flex;
	margin: auto;
	width: 80%;
	background-color: rgb(57, 54, 131);
	border-radius: 1vh;
	height: 4vh;
	font-size: 2vh;
	color: var(--white);
	cursor: pointer;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
}

.loginBtn:hover,
.nextBtn:hover,
.regBtn:hover,
.submitBtn:hover,
.backBtn:hover,
.redeemBtn:hover {
	background-color: rgb(42, 40, 99);
}

.login .rightLogin p {
	padding-top: 2vh;
	color: var(--description);
	font-size: 1.5vh;
}

#resetPass {
	width: -webkit-fit-content;

	width: -moz-fit-content;

	width: fit-content;
	margin: auto;
}

#resetPass:hover,
#showLogin:hover {
	color: var(--main-color);
	cursor: pointer;
}

#showRight,
#hideRight,
#hideLeft,
#showLeft {
	-webkit-transition: 0.5s ease-in-out;

	transition: 0.5s ease-in-out;
	height: 50vh;
	padding: 5vh 0;
}

#showRight {
	-webkit-box-align: center;

	-ms-flex-align: center;

	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-ms-flex-line-pack: center;
	align-content: center;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
}

#showRight form {
	width: 100%;
}

/*-------------------------------------------Register----------------------------------------------------*/

.register .leftRegister #showLeft {
	margin-top: 10%;
	font-size: 2vh;
}

.register .leftRegister #showLeft div,
.register .leftRegister #showLeft .description {
	color: var(--white);
}

.register .leftRegister #showLeft .description:hover {
	color: var(--black);
	cursor: pointer;
}

.register .leftRegister #showLeft .descText {
	font-size: 1.6vh;
	color: var(--description);
}

.register .leftRegister img {
	margin: 3vh 0;
	height: 15vh;
	border-radius: 1vh;
}

.register .leftRegister img:hover {
	cursor: pointer;
}

.register .leftRegister,
.register .rightRegister {
	height: 55vh;
}

.register .rightRegister {
	width: 25vw;
}

.register .rightRegister h3 {
	text-align: right;
	padding-right: 1vh;
	font-size: 3vh;
}

.register .inputFields input {
	margin: 1vh 0 1vh 0;
}

.register .regDesc {
	padding: 0 1vh;
	color: var(--black);
	text-align: left;
	font-size: 1.8vh;
}

.register .regDesc a {
	color: var(--main-color);
}

.register .regDesc a:hover {
	text-decoration: underline;
}

.register .bottomBtns {
	text-align: left;
	margin-top: 2vh;
}

.register #showRight .bottomBtns {
	margin-top: 2vh;
}

.register .bottomBtns .nextBtn,
.register .bottomBtns .loginBtn,
.register .bottomBtns .regBtn {
	display: inline-block;
	width: -webkit-fit-content;
	width: -moz-fit-content;
	width: fit-content;
	padding: 2%;
	margin-left: 2vh;
}

.register .bottomBtns .nextBtn:hover,
.register .bottomBtns .loginBtn:hover,
.register .bottomBtns .regBtn:hover {
	background-color: var(--white);
	color: rgb(57, 54, 131);
	-webkit-box-shadow: 0 0 0.5vh 0.5vh rgba(57, 54, 131, 0.5);
	box-shadow: 0 0 0.5vh 0.5vh rgba(57, 54, 131, 0.5);
}

.register .bottomBtns .nextBtn,
.register .bottomBtns .regBtn {
	float: right;
	margin-right: 1vh;
}

.register .bottomBtns .regBtn {
	width: 25%;
	text-align: center;
	padding: 0;
}

/*-------------------------------------------Admin-Sidenav----------------------------------------------------*/

.sidenav {
	height: 100%;
	width: 22vh;
	position: fixed;
	z-index: 10000;
	background-color: var(--darker);
	top: 0;
	overflow: hidden;
	padding-top: 1vh;
	text-align: center;
}

.sidenavSection .dashLogo {
	width: 100%;
}

.sidenavSection .CENTER {
	text-align: center;
}

.sidenavSection .CENTER .companyIcon {
	height: 12.5vh;
	border-radius: 6vh;
	-webkit-box-shadow: var(--box-shadow);
	box-shadow: var(--box-shadow);
	margin-bottom: 1vh;
}

/* Sidenavigation buttons */
.sidenav button {
	padding: 1vh;
	font-size: 2.5vh;
	color: var(--white);
	display: block;
	-webkit-transition: 0.3s;
	transition: 0.3s;
	border-top: 0.1vh solid rgba(0, 0, 0, 0.2);
	background-color: rgba(0, 0, 0, 0);
	width: 100%;
}

.sidenav button:hover {
	background-color: var(--main-color);
	cursor: pointer;
}

.sidenav .last {
	border-bottom: 0.1vh solid rgba(0, 0, 0, 0.2);
}

.sidenav .sidenavBottom {
	text-align: center;
	bottom: 0;
	position: absolute;
	width: 22vh;
}

/*-------------------------------------------Dashboard----------------------------------------------------*/

.flexCenter {
	display: -webkit-box;

	display: -ms-flexbox;

	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	margin-left: 22vh;
	height: 100vh;
}

.flexCenter .topManage {
	position: fixed;
	top: 0;
	left: 0;
}

.topDash,
.bottomDash,
.topManage,
.leftManage,
.topApi,
.viewKey {
	margin-left: 26vh;
}

.topDash h3,
.topManage h3,
.topApi h3 {
	margin-top: 2vh;
	padding: 1vh 1.5vh;
	width: -webkit-fit-content;
	width: -moz-fit-content;
	width: fit-content;
	font-size: 2.2vh;
	border-radius: 3vh;
	background-color: var(--white);
	-webkit-box-shadow: var(--box-shadow);
	box-shadow: var(--box-shadow);
	text-align: center;
	color: var(--black);
	font-family: Permanent Marker;
}

.graph,
.leftManage .branches,
.rightManage .branchRegister,
.rightManage .branchActivity,
.vouchers,
.newVoucher,
.employees,
.employeeRegister,
.employeeActivity {
	height: 50vh;
	width: 98%;

	margin-top: 5vh;
	background-color: var(--white);
	padding: 1vh;
	border-radius: 1.5vh;
	-webkit-box-shadow: var(--box-shadow);
	box-shadow: var(--box-shadow);
}

.bottomDash {
	margin-top: 6vh;
}

.bottomDash .recentActivity,
.bottomDash .popular {
	height: 29vh;
	width: 47.5%;

	float: left;
	background-color: var(--white);
	border-radius: 2vh;
	-webkit-box-shadow: var(--box-shadow);
	box-shadow: var(--box-shadow);
	overflow: hidden;
	margin-bottom: 2vh;
}

/* It's for being able to scroll sideways, but can live without it
.bottomDash .recentActivity {
    display: grid;
}
*/

.recentActivity .dashScroll {
	width: 100%;
	height: 84%;
	overflow-y: scroll;
}

.recentActivity .dashInfo .recentIcon {

margin-left: 10px;
}

.recentActivity .dashInfo {
	width: 100%;
	height: 6vh;

	display: -webkit-box;

	display: -ms-flexbox;

	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;

	border-bottom: 0.1vh solid rgba(0, 0, 0, 0.2);
}

.bottomDash h1,
.leftManage .branches h1,
.rightManage h1,
.vouchers h1,
.newVoucher h1,
.employees h1 {
	color: var(--black);
	padding: 1vh 1.5vh;
	font-size: 2vh;
}

.bottomDash .popular {
	margin-left: 3%;
}

.popular .popularScroll {
	display: -webkit-inline-box;

	display: -ms-inline-flexbox;

	display: inline-flex;

	width: 100%;
	height: 83.3%;
	overflow-x: scroll;
}

.popular .popularScroll .popularContainer {
	display: -webkit-inline-box;

	display: -ms-inline-flexbox;

	display: inline-flex;
	padding: 1.5vh;
	height: 100%;
	width: -webkit-fit-content;
	width: -moz-fit-content;
	width: fit-content;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: reverse;
	-ms-flex-direction: row-reverse;
	flex-direction: row-reverse;
	border-right: 0.1vh solid rgba(0, 0, 0, 0.2);
}

.popular .popularScroll .popularContainer img {
	height: 14vh;
	margin-bottom: 1vh;
}
/*-------------------------------------------Management----------------------------------------------------*/

.leftManage .branches,
.rightManage .branchRegister,
.rightManage .branchActivity,
.vouchers,
.newVoucher,
.employees,
.employeeRegister,
.employeeActivity {
	height: 83vh;
	width: 60%;

	float: left;

	margin-top: 4vh;
	padding: 0;
	overflow: hidden;
}

.leftManage .branches h1,
.vouchers h1,
.branchesList .branchSelect h1,
.employees h1 {
	padding: 1.5vh;
	display: inline-block;
	width: 50%;
}

.leftManage .branches p,
.vouchers p,
.branchesList .branchSelect p,
.employees p {
	float: right;
	text-align: right;
	width: 50%;
	color: var(--description);
	padding: 1.5vh;
	font-size: 1.8vh;
}

.filter {
	text-align: center;
	margin-top: 1.5vh;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
}

.filter .filterBtn {
	width: -webkit-fit-content;

	width: -moz-fit-content;

	width: fit-content;
	padding: 0 1.5vh;
	margin-bottom: 1vh;
	font-size: 2.5vh;
	border-radius: 1.5vh;
	color: var(--white);
	background-color: var(--darker);
}

.filter .filterInput {
	width: 30%;
	height: 2vh;

	color: var(--black);
	background-color: var(--white);
	font-size: 2vh;
	border-radius: 1.5vh;
	border: solid 0.1vh rgb(192, 192, 192);
	padding-left: 1.5vh;
	-webkit-box-shadow: var(--box-shadow);
	box-shadow: var(--box-shadow);
}

.branchScroll,
.vouchers .voucherScroll,
.employeeScroll {
	width: 100%;
	height: 95.4%;
	padding: 1.5vh 0 1.5vh 1vh;
	overflow-y: scroll;
	border-top: solid 0.1vh rgba(0, 0, 0, 0.2);
}

.branches .branchInfoContainer,
.vouchers .voucherInfoContainer,
.employeeInfoContainer {
	width: 90%;
	height: 10vh;

	display: -webkit-inline-box;

	display: -ms-inline-flexbox;

	display: inline-flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	margin: 0 5% 4% 5%;

	-webkit-box-shadow: var(--box-shadow);

	box-shadow: var(--box-shadow);
	border: 1px solid rgba(0, 0, 0, 0.2);
	border-radius: 0.5vh;
}

.branches .branchInfo,
.vouchers .voucherInfo,
.employeeInfo {
	width: 70%;
	height: 4vh;

	display: -webkit-inline-box;

	display: -ms-inline-flexbox;

	display: inline-flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
}

.branches .branchBtnContainer,
.vouchers .voucherBtnContainer,
.employeeBtnContainer {
	display: -webkit-inline-box;

	display: -ms-inline-flexbox;

	display: inline-flex;
	width: 30%;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: space-evenly;
	-ms-flex-pack: space-evenly;
	justify-content: space-evenly;
}

.selectBranch,
.editBranch,
.deleteBranch,
.editVoucher,
.deleteVoucher,
.editEmployee,
.deleteEmployee {
	width: 6vh;
	height: 6vh;

	display: -webkit-inline-box;

	display: -ms-inline-flexbox;

	display: inline-flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;

	margin-left: 1%;
	background-color: var(--white);
	-webkit-box-shadow: var(--box-shadow);
	box-shadow: var(--box-shadow);
	border: 1px solid rgba(0, 0, 0, 0.2);
	border-radius: 0.5rem;
	-webkit-transform: translateY(-0.2vh);
	transform: translateY(-0.2vh);
}

.selectBranch:hover,
.editBranch:hover,
.deleteBranch:hover,
.editVoucher:hover,
.deleteVoucher:hover,
.editEmployee:hover,
.deleteEmployee:hover {
	background-color: var(--darker);
	cursor: pointer;
}

.branchBtnContainer i,
.voucherBtnContainer i,
.employeeBtnContainer i {
	font-size: 3vh;
}

.selectBranch:hover i,
.editBranch:hover i,
.deleteBranch:hover i,
.editVoucher:hover i,
.deleteVoucher:hover i,
.editEmployee:hover i,
.deleteEmployee:hover i {
	color: var(--white);
}

.deleteBranch,
.deleteVoucher,
.deleteEmployee {
	margin-right: 0;
}

.branchInfo .branchName,
.voucherInfo .voucherName,
.recentActivity .dashInfo .recentName,
.employeeName {
	font-size: 2.5vh;
	padding: 0 1rem;
	color: var(--black);
}

.branchInfo .branchEmail,
.voucherInfo .voucherCount,
.recentActivity .dashInfo .recentDate,
.employeeCode {
	margin-left: auto;
	font-size: 1.8vh;
	padding: 0 1rem;
	color: var(--description);
}

.rightManage {
	display: -webkit-box;

	display: -ms-flexbox;

	display: flex;
	-ms-flex-line-pack: center;
	align-content: center;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
}

.rightManage .branchRegister,
.rightManage .branchActivity,
.newVoucher,
.employeeRegister,
.employeeActivity {
	height: 50vh;
	width: 29vw;

	margin-left: 3vw;
}

.rightManage .branchRegister,
.employeeRegister {
	overflow-y: scroll;
}

.rightManage .branchRegister .inputFields,
.employeeRegister .inputFields {
	padding-top: 1.5vh;
}

.rightManage .branchRegister .inputFields input,
.employeeRegister .inputFields input {
	margin: 2.5% auto;
	height: 3vh;
}

.rightManage .branchRegister .inputFields .branchRegisterBtn,
.employeeRegisterBtn {
	width: 100%;
	height: 4vh;

	background-color: var(--darker);
	color: var(--white);
	border-radius: 1vh;
	font-size: 2vh;
	cursor: pointer;
	margin-bottom: 1vh;
}

.rightManage .branchRegister .inputFields .branchRegisterBtn:hover,
.employeeRegisterBtn:hover {
	background-color: var(--main-color);
}

.rightManage .branchActivity,
.employeeActivity {
	height: 28.9vh;
}

.activityInfo {
	text-align: left;
	width: 100%;
	height: 89%;
	overflow-y: scroll;
}

.activityInfo p {
	color: var(--black);
}

.activityInfo .activityText {
	border-bottom: 0.1vh solid rgba(0, 0, 0, 0.1);
	padding: 1vh;
	font-size: 2vh;
}

/*-------------------------------------------Vouchers----------------------------------------------------*/

.vouchers .voucherInfo {
	height: 8vh;
}

.vouchers .voucherInfo img,
.recentActivity .dashInfo img {
	padding: 0.3rem;
	height: 100%;
}

.newVoucher {
	height: 83vh;
	overflow-y: scroll;
}

.newVoucher h1 {
	display: -webkit-inline-box;

	display: -ms-inline-flexbox;

	display: inline-flex;
	width: 100%;
	padding: 1.5vh;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
}

.activeBtn {
	width: -webkit-fit-content;

	width: -moz-fit-content;

	width: fit-content;
	margin-left: auto;
}

.activeBtn h3,
.showCateg h3,
.vouchBranch h3 {
	font-size: 1.8vh;
	color: black;
	text-align: center;
	font-weight: bold;
}

.switch,
.showBranches .branchContainer,
.categContainer {
	position: relative;
	display: inline-block;
	width: 3.2vw;
	height: 3.5vh;
}

/* Hide default HTML checkbox */
.switch input,
.showBranches .branchContainer input,
.categContainer input {
	opacity: 0;
	width: 0;
	height: 0;
	margin-bottom: 1vh;
}

/* The slider */
.slider.round {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgb(170, 0, 0);
	border-radius: 10vh;
	height: 3.5vh;
	width: 3vw;
}

.slider.round:before {
	position: absolute;
	content: "";
	height: 2.8vh;
	width: 1.4vw;
	left: 0.2vw;
	bottom: 0.31vh;
	background-color: white;
	-webkit-transition: 0.4s;
	transition: 0.4s;
	border-radius: 50%;
}

input:checked + .slider {
	background-color: rgb(0, 140, 0);
}

input:focus + .slider {
	-webkit-box-shadow: 0 0 0.1vh #121212;

	box-shadow: 0 0 0.1vh #121212;
}

input:checked + .slider:before {
	-webkit-transform: translateX(1.2vw);

	transform: translateX(1.2vw);
}

.vouchBranch,
.showCateg {
	width: 90%;
	height: 20%;

	margin: 1.5vh auto 0 auto;
	padding: 0.5rem 0;
	border-radius: 1.5vh;
	-webkit-box-shadow: var(--box-shadow);
	box-shadow: var(--box-shadow);
	overflow: hidden;
}

.vouchBranch h3,
.showCateg h3 {
	border-bottom: 0.1vh solid rgba(0, 0, 0, 0.2);
}

.showBranches,
.categScroll {
	display: -webkit-inline-box;

	display: -ms-inline-flexbox;

	display: inline-flex;

	width: 100%;
	height: 100%;

	-ms-flex-wrap: wrap;

	flex-wrap: wrap;
	overflow: scroll;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
}

.showBranches .branchContainer,
.categContainer {
	display: -webkit-inline-box;

	display: -ms-inline-flexbox;

	display: inline-flex;
	height: -webkit-fit-content;
	height: -moz-fit-content;
	height: fit-content;
	width: 100%;
	padding: 0 0.5vh;
	margin: 1vh;
	background-color: var(--main-color);
	color: var(--white);
	font-size: 1.8vh;
	border-radius: 2vh;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
}

/* Text inside checkbox */
.showBranches .branchContainer .name,
.categContainer .name {
	position: absolute;
	cursor: pointer;
	color: var(--black);
	background-color: var(--bg);
	border: 0.1vh solid rgba(0, 0, 0, 0.1);
	text-align: center;
	border-radius: 1.5vh;
	width: 100%;
}

.showBranches .branchContainer .name:hover,
.categContainer .name:hover {
	background-color: #ddd;
}

.showBranches .branchContainer .name:before,
.categContainer .name:before {
	position: absolute;
}

.showBranches .branchContainer input:checked + .name,
.categContainer input:checked + .name {
	background-color: var(--main-color);
	color: var(--text);
}

.showBranches .branchContainer input:checked + .name:hover,
.categContainer input:checked + .name:hover {
	background-color: var(--darker);
}

.newVoucher .inputFields input {
	margin: 1rem 0;
}

.inputFields .goLeft {
	float: left;
}

.inputFields .randValue {
	font-size: 2vh;
	color: var(--black);
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	border: 0.1vh solid rgb(192, 192, 192);
	height: 3vh;
	border-radius: 0.5vh;
	border-right: none;
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
	padding-left: 1vh;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
}

.valueR {
	display: -webkit-inline-box;

	display: -ms-inline-flexbox;

	display: inline-flex;
	width: 100%;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-ms-flex-direction: row;
	flex-direction: row;
	-ms-flex-wrap: nowrap;
	flex-wrap: nowrap;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
}

#addVoucherValue,
#editVoucherValue {
	border-left: none;
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}

.newVoucher .inputFields p,
.editVoucherInfo .inputFields p {
	color: var(--description);
	font-size: 1.8vh;
}

.newVoucher .inputFields textarea,
.editVoucherInfo .inputFields textarea {
	border: 0.1vh solid rgba(0, 0, 0, 0.2);
	border-radius: 1vh;
	height: 8vh;
	width: 100%;
	padding: 1vh;
	font-size: 1.8vh;
	margin: 1.5vh 0;
	resize: none;
	color: var(--black);
}

.newVoucher .inputFields img,
.editVoucherInfo img {
	width: 50%;

	margin: 1.5vh 25%;
}

.newVoucher .inputFields .newVouchBtns,
.editVoucherInfo .editVouchBtn {
	background-color: var(--main-color);
	color: var(--text);
	padding: 1vh 0;
	text-align: center;
	width: 90%;
	height: 4vh;
	border-radius: 1vh;
	font-size: 2vh;
	margin: 0 5%;
	margin-bottom: 1.5vh;
}

.newVoucher .inputFields .newVouchBtns:hover,
.editVoucherInfo .editVouchBtn:hover {
	background-color: var(--darker);
	cursor: pointer;
}

/*-------------------------------------------Bug Report----------------------------------------------------*/

.bugReport .leftSide img {
	margin-top: 8vh;
	width: 100%;
}

.bugReport .rightSide label span {
	font-size: 1.6vh;
	color: var(--description);
}

.bugReport .rightSide input {
	margin: 0 0 1rem 0;
}

.bugReport .rightSide textarea {
	width: 100%;
	height: 6rem;
	margin: 0 2% 1rem 0;
	padding: 0.5rem;
	font-size: 1.8vh;
	resize: none;
	border: 1px solid rgba(0, 0, 0, 0.2);
	border-radius: 0.5rem;
}

.bugReport .rightSide .backBtn {
	margin: 0.5rem auto;
	padding: 0.5rem 1rem;

	width: -webkit-fit-content;

	width: -moz-fit-content;

	width: fit-content;
	height: -webkit-fit-content;
	height: -moz-fit-content;
	height: fit-content;
}

/*-------------------------------------------Branches Select List----------------------------------------------------*/

.branchesList .branchSelect {
	height: 50vh;
	width: 50vw;
	background-color: var(--white);
	-webkit-box-shadow: var(--box-shadow);
	box-shadow: var(--box-shadow);
	border-radius: 1.5vh;
}

.branchesList .branchSelect h1 {
	font-size: 3vh;
	color: var(--black);
}

.branchesList .branchSelect .branchInfo {
	display: -webkit-box;

	display: -ms-flexbox;

	display: flex;
	padding: 1vh;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
}

.branchesList .branchInfo:hover {
	background-color: var(--darker);
	cursor: pointer;
}

.branchesList .branchSelect .branchInfo:hover .branchName {
	color: var(--text);
}

/*-------------------------------------------View API key----------------------------------------------------*/

.viewKey {
	margin-top: 5vh;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
}

.viewKey .showKey,
.viewKey .bespokeApi {
	background-color: var(--white);
	border-radius: 1rem;
	width: 95%;
	height: -webkit-fit-content;
	height: -moz-fit-content;
	height: fit-content;
	font-size: 2vh;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	word-wrap: break-word;
	-webkit-box-shadow: var(--box-shadow);
	box-shadow: var(--box-shadow);
}

.viewKey .showKey h1,
.bespokeApi h1 {
	text-align: center;
	width: 100%;
	padding: 1vh;
	border-bottom: 0.1vh solid rgba(0, 0, 0, 0.2);
	color: var(--black);
}

.viewKey .showKey p,
.bespokeApi p {
	padding: 1.5vh;
	color: var(--black);
}

.viewKey .createKey,
.sendBtn {
	margin-top: 4vh;
	padding: 1.5vh;
	width: -webkit-fit-content;
	width: -moz-fit-content;
	width: fit-content;
	height: -webkit-fit-content;
	height: -moz-fit-content;
	height: fit-content;
	font-size: 2.5vh;
	background-color: var(--darker);
	color: var(--white);
	border-radius: 1vh;
	text-align: center;
	cursor: pointer;
}

.viewKey .createKey:hover {
	background-color: var(--main-color);
}

.viewKey .bespokeApi {
	margin-top: 15vh;
}

.viewKey .bespokeApi p {
	border-bottom: 0.1vh solid rgba(0, 0, 0, 0.2);
}

.viewKey .bespokeApi textarea {
	font-size: 2vh;
	color: var(--black);
	resize: none;
	padding: 1.5vh;
	width: 100%;
	height: 20vh;
}

/*-------------------------------------------Edit Pages----------------------------------------------------*/

.midSection {
	width: 40%;
	height: -webkit-fit-content;
	height: -moz-fit-content;
	height: fit-content;
	-webkit-box-shadow: var(--box-shadow);
	box-shadow: var(--box-shadow);
	border-radius: 1.5vh;
	background-color: var(--white);
	overflow: hidden;
}

.midSection .editInfo {
	padding: 1.5vh 0;
}

.midSection .editVoucherInfo {
	height: 70vh;
	overflow: auto;
	padding-bottom: 2vh;
}

.editInfo h1 {
	color: var(--black);
	padding: 0 0 1.5vh 1.5vh;
	font-size: 2.5vh;
	border-bottom: 0.1vh solid rgba(0, 0, 0, 0.2);
}

.editVoucherInfo h1 {
	padding: 1vh;
	color: var(--black);
	font-size: 2.3vh;
	border-bottom: 0.1vh solid rgba(0, 0, 0, 0.1);
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
}

.finishEditBtn {
	margin: 0 25%;
	width: 50%;
	border-radius: 1vh;
	height: 4vh;
	padding: 1vh;
	-webkit-box-shadow: var(--box-shadow);
	box-shadow: var(--box-shadow);
	background-color: var(--main-color);
	color: var(--white);
	font-size: 2vh;
}

.finishEditBtn:hover {
	cursor: pointer;
	background-color: var(--darker);
}

/*-------------------------------------------Redeem Voucher----------------------------------------------------*/

.redeem .redeemSide.Right {
	padding: 7vh 0;
}

/*----------------------------------------Hide on Mobile--------------------------------------*/
/*
@media (max-width: 767px){

    .topNavRight .linkBtn{

        padding: 1vh 2vh;

    }

    .hideMobile{

        display: none;

    }

    .topNavLeft .topNavImg{

        width: 100%;
        
    }

    .information .box-container .box {

        height: 120%;
        margin-bottom: 10rem;

    }

}
*/
/*----------------------------------------Notify Message Styles--------------------------------------*/
.dmx-message {
	color: white;
}

/*----------------------------------------Analytics Page Styles--------------------------------------*/
.analyticsContent {
	width: 83%;
	height: 83vh;

	margin-top: 5vh;
	margin-left: 26vh;
	background-color: var(--white);
	border-radius: 1.5vh;
	-webkit-box-shadow: var(--box-shadow);
	box-shadow: var(--box-shadow);
}

.redemptionsScroll,
.claimsScroll {
	width: 100%;
	height: 95.4%;
	padding: 1.5vh 0 1.5vh 1vh;
	overflow-y: scroll;
}

.claimInfo,
.redemptionInfo {
	width: 100%;
	height: 100%;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	    -ms-flex-pack: justify;
	        justify-content: space-between;

	padding: 1vh;
	-webkit-box-pack: center;
}

.analytics .redemptionInfoContainer,
.analytics .claimInfoContainer {
	width: 90%;
	height: 10vh;

	display: -webkit-inline-box;

	display: -ms-inline-flexbox;

	display: inline-flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	margin: 0 5% 4% 5%;

	-webkit-box-shadow: var(--box-shadow);

	box-shadow: var(--box-shadow);
	border: 1px solid rgba(0, 0, 0, 0.2);
	border-radius: 0.5vh;
}

.claimInfoContainer .title {
	margin-left: auto;
	font-size: 1.8vh;
	padding: 0 1rem;
	color: var(--description);
}

.claimVoucherName .content,
.redemptionVoucherName .content {
	font-size: 2.5vh;
	padding: 0 1rem;
	color: var(--black);
}

.claimerName .content,
.redeemerName .content {
	margin-left: auto;
	font-size: 2.2vh;
	padding: 0 1rem;
	color: var(--black);
}

.claimTimestamp .content,
.redemptionTimestamp .content {
	margin-left: auto;
	font-size: 1.8vh;
	padding: 0 1rem;
	color: var(--description);
}

.analyticsHeader {
	width: 100%;
	height: 10vh;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	    -ms-flex-pack: justify;
	        justify-content: space-between;
	border-bottom: solid 0.1vh rgba(0, 0, 0, 0.2);
}

.analyticsHeader h1 {
	height: 100%;
	margin-left: 2vh;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
}

.switchAnalyticsTypeButton {
	height: 100%;
	width: 30vh;
	padding: 1vh 2vh;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	font-size: 3.5vh;
	background-color: var(--main-color);
	color: var(--white);
}

.switchAnalyticsTypeButton:hover {
	background-color: var(--darker);
	cursor: pointer;
}