:root {
    --primary-bg:#267F01;
    --primary-bg-sub1: #2A7404;
    --primary-bg-sub2:#38A001;
    --primary-bg-sub3:#58AA1C;
    --secondary-bg:#222;
    --secondary-bg-sub1:#2EBA4D;
    --main-bg: #FBFBFB;
    --light-bg:#FFF;
    --dark-bg:#000;

    --text-header: #252424;
    --text-primary: #686868;
    --text-secondary:#AAA;
    --text-secondary-sub1:#B7B7B6;
    --text-secondary-sub2:#EBEBEB;
    --text-secondary-sub3:#F2F2F2;
    --text-secondary-sub4:#F9F9F9;

    --input-border:#E8E8E8;

    --approved: #267F01;
    --paid: #2196F3;
    --pending: #FFB800;
    --denied: #EF0000;
  }

  @font-face {
    font-family: 'Asap';font-style: normal;font-weight: 400;src: local('Asap'), local('Asap'), url('../Fonts/Asap.ttf') format('truetype');
  }
  @font-face {
    font-family: 'Ubuntu';font-style: normal;font-weight: 400;src: local('Ubuntu Regular'), local('Ubuntu-Regular'), url('../Fonts/Ubuntu-Regular.ttf') format('truetype');
  }
  @font-face {
    font-family: 'Roboto';font-style: normal;font-weight: 400;src: local('Roboto Regular'), local('Roboto-Regular'), url('../Fonts/Roboto-Regular.ttf') format('truetype');
  }

  *{font-family: 'Roboto', sans-serif;}


body{background: linear-gradient(88deg, var(--primary-bg-sub1) 0%, var(--primary-bg-sub2) 100%);margin: 0;}

.mb-20px{margin-bottom: 20px;}
.mb-16px{margin-bottom: 16px;}

.mt-40px{margin-top: 40px;}
.mt-24px{margin-top: 24px;}
.mt-20px{margin-top: 20px;}
.mt-16px{margin-top: 16px;}

/*------Form controls--------*/

.radiused{border-radius: 60px !important;border: 1px solid var(--input-border) !important;background: var(--light-bg);box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.03);}

.btn-gradient{height: 55px; background: linear-gradient(90deg, var(--primary-bg-sub1) 0%, var(--primary-bg-sub3) 100%); border-radius: 110px;width: 100%;border: none;color: var(--light-bg) !important;text-align: center;font-size: 16px;font-weight: 700;}
.btn-gradient:hover{box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.1);}

select {
  border: 1px solid transparent;
  background-color: transparent;
  color: var(--text-primary);
  text-align: left;
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  padding: 16px 16px 16px 0;
}
select option{
  background-color: transparent !important;
  border: 1px solid #e4e4e4;
  color: var(--text-header);
  -webkit-appearance: none; 
  -moz-appearance: none; 
}
select:focus{outline:0px solid transparent; outline-offset:0px;outline: none !important;}

.form-floating>.form-control:focus~label, .form-floating>.form-control:not(:placeholder-shown)~label, .form-floating>.form-select~label{
  transform: scale(.76) translateY(-0.5rem) translateX(0.9rem) !important;
}
.form-floating>.form-control:focus, .form-floating>.form-control:not(:placeholder-shown){
  padding-top: 1.25rem !important;
}
.form-floating>.form-control, .form-floating>.form-select {  height: calc(3.3rem + 2px) !important;}
.form-floating>.form-control{padding: 0.5rem 1.2rem !important;}
.form-check-label{  font-size: 12px;  margin-top: 0.2rem;  color: var(--text-primary);}
.form-check-input{  margin-top: 0.35em !important;}
.form-check-input:focus{  box-shadow: none !important;}

input{color:var(--text-primary) !important;font-size: 16px !important;}
input:focus{outline: none !important;}
.form-floating>label{color: var(--text-primary);}
.form-control:focus{border-color: transparent !important;box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.03) !important;}
.icon>input, .icon>label{padding-left: 52px !important;}
.icon>input{background-repeat: no-repeat !important;background-position: 16px 1rem !important;}
.icon.user>input{background-image: url("../Img/User.svg") !important;}
.icon.password>input{background-image: url("../Img/LockKey.svg") !important;}



select.form-control{padding: 0.9rem 1rem !important;}
/*----------------Form controls end---------------*/


/*--------Typography-----------*/
.header1{color: var(--light-bg);font-family: 'Asap', sans-serif !important;font-size: 32px;font-weight: 700;letter-spacing: -0.96px;line-height: normal;}
.header2{color: var(--text-header);font-family:'Asap', sans-serif;font-size: 24px;font-weight: 700;line-height: normal;}
.header3{font-family: 'Asap', sans-serif !important;font-size: 18px;font-weight: 700;font-style: normal;line-height: normal;}

 .text2{color: var(--dark-bg);font-family: 'Roboto', sans-serif;font-size: 24px;font-style: normal;line-height: normal;letter-spacing: -0.72px;}
 .text3{font-family: 'Roboto', sans-serif !important;font-size: 18px;font-weight: 500;font-style: normal;line-height: normal;}
 .text4{font-family: 'Roboto', sans-serif;font-size: 16px;font-style: normal;line-height: normal;}
 .text5{color: var(--dark-bg);font-family: 'Roboto', sans-serif;font-size: 14px;font-weight: 500;font-style: normal;line-height: normal;}
 .text6{color: var(--dark-bg);font-family: 'Roboto', sans-serif;font-size: 12px;font-weight: 500;font-style: normal;line-height: normal;}
 .text7{color: var(--dark-bg);font-family: 'Roboto', sans-serif;font-size: 10px;font-weight: 500;font-style: normal;line-height: normal;}

.light{font-weight: 400;}
.regular{font-weight: 500;}
.semi-bold{font-weight: 700;}
.bold{font-weight: bolder;}

 .text-light{color: var(--light-bg);}
 .text-dark{color: var(--dark-bg);}

 /*--------Typography end-----------*/


 .bodyContent{background: var(--primary-bg);height: 100vh;}
.btn-transparent{background: transparent;border: none;}


  /*------- index page -------*/
  .logoCover{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100vh;
  }
  /* ------index page end------- */


  /* -------login page------ */
.loginBg{  background-color: var(--secondary-bg);height: 100vh;}

.login_logoCover{padding: 55px;padding-bottom: 42.5px;text-align: center;}

.mainContent {
    border-radius: 30px 30px 0px 0px;
    background: var(--main-bg);
    position: absolute;
    inset: 0;
    padding: 32px 40px;
    padding-bottom: 120px;
    max-height: fit-content;
}

.floatIcon{position: absolute;top: 15px;right: 18px;font-size: 20px;color: var(--primary-bg-sub1);}

  /* ------login page end------- */


/* ------footer action bar css------- */

.footerActionBar{  border-radius: 30px 30px 0px 0px;background: linear-gradient(180deg, var(--text-secondary-sub3) 0%, var(--text-secondary-sub4) 100%);position: fixed;bottom: 0;left: 0;right: 0;padding: 12px 24px;display: flex;justify-content: space-between;align-items: center;}
.iconSet{text-align: center;}
.iconSet>a{text-decoration: none;display: block;}
.iconSet .iconLabel{display: block;margin-top: 4px;}
 
/* -----footer action bar end------- */


/* ---------QR modal-------- */

.modalCover{position:fixed;inset: 0;background-color: rgba(0,0,0,0.6);display: flex;justify-content: center;align-items: center;}
.modalCover.closed{display: none !important;}
.modalClose{text-align: right;padding: 16px;}
.modalCover>.modalContent{width: 350px;height: 496px;background-color: white;padding-bottom: 32px;}
.modalCover>.modalContent>.qrCover{position:relative;width:250px;height:250px;padding: 16px; margin: auto;margin-top: 40px;}
.modalCover>.modalContent>.qrCover:before, .modalCover>.modalContent>.qrCover:after, .modalCover>.modalContent>.qrCover>:first-child:before, .modalCover>.modalContent>.qrCover>:first-child:after {
    position:absolute;width:64px; height: 64px;border-color:var(--primary-bg-sub2);border-style:solid;content: ' ';
}
.modalCover>.modalContent>.qrCover:before {top:0;left:0;border-width: 6px 0 0 6px}
.modalCover>.modalContent>.qrCover:after {bottom:0;right:0;border-width: 0 6px 6px 0}
.qrUserName{padding-top: 22px;text-align: center;}
.qrDesc{text-align: center;padding-top: 4px;letter-spacing: -0.36px;}

 /* ---------- QR Modal End ----------- */


/* -------------- Sidenar Nav----------- */
 
.sideNav{border-radius: 0px 20px 20px 0px;background: var(--primary-bg-sub2);position: fixed;left: 0;top: 0;bottom: 0;width: 300px;display: none;z-index: 3;}
.sideNav.open{display: block !important;}
.sideNav>.userInfo{padding: 64px 32px 32px;display: flex;height: 154px;}
.sideNav>.userInfo>.userImg{width: 50px;height: 50px;border-radius: 50%;margin-right: 14px;}
/*.sideNav>.menuSection{height:calc(100vh - 154px);border-radius: 0px 20px 20px 0px;background: #EFEFEF;padding: 64px 24px 40px 24px;position: relative;}*/
    .sideNav > .menuSection {
        height: calc(100vh - 284px);
        /* border-radius: 0px 0px 20px 0px; */
        background: #EFEFEF;
        padding: 64px 24px 40px 24px;
        position: relative;
        overflow: scroll;
    }
.menuSet{margin-bottom: 40px;display: block;text-decoration: none;}
.menuSet>.icon{width: 24px;height: 24px;margin-right: 20px;}
.menuSet>.caption{color: var(--text-header);}
.sideNavFooter{position: absolute;bottom: 0;left: 0;right: 0;padding: 40px 32px;}
.btn-logout{border-radius: 110px;background: var(--text-primary);color: var(--light-bg);text-align: center;font-family: 'Roboto',sans-serif;font-size: 16px;font-weight: 700;width: 100%;border: none;padding: 12px;}
.themeBtn.form-switch .form-check-input{width: 44px;height: 26px;background-color: #D9D9D9;border: none;cursor: pointer;}
.themeBtn.form-switch .form-check-input{background-image: url("../Img/checked_sun1.svg") !important; }
.themeBtn.form-switch .form-check-input:focus {background-image: url("../Img/checked_sun1.svg"); }
.themeBtn.form-switch .form-check-input:checked[type=checkbox] {background-image: url("../Img/checked_moon1.svg") !important; }
.overlay{position: fixed;background-color: rgba(0,0,0,0.6);inset: 0;display: none;z-index: 2;}
.overlay.open{display: block !important;}

/* -------------- Sidenar Nav End----------- */


.iconLabel{color: var(--text-secondary);text-align: center;font-family: 'Roboto',sans-serif;font-size: 14px;font-style: normal;font-weight: 400;line-height: normal;}
.overflow-hidden{overflow:hidden ;}
.text-ellipsis{white-space: nowrap;text-overflow:ellipsis;}
.cardContent{border-radius: 10px;background: var(--text-secondary-sub4);box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.10);padding: 16px 24px;padding-right: 54px;margin-top: 24px;position: relative;}
.cardContent>a{text-decoration: none;display: block;}
.cardContent .cardTitle{display: flex;align-items: flex-end;}
.cardContent .cardTitle>.text{color: var(--dark-bg);font-family: 'Roboto', sans-serif;font-size: 18px;font-style: normal;font-weight: 500;line-height: normal;letter-spacing: -0.54px;margin-right: 8px;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;}
.cardContent .cardTitle>.brandImg{width: 24px;height: 24px;border-radius: 50%;}
.cardDesc{color: var(--text-primary);font-family: 'Roboto', sans-serif;font-size: 12px;font-weight: 400;letter-spacing: -0.36px;margin-top: 4px;line-height: normal;}
.cardContent .navArrow{position: absolute;top: 0;bottom: 0;margin-top: auto;margin-bottom: auto;right: 22px;}

.pageHeader{padding: 24px 22px;}
.navButtonCover{text-align: center;position: relative;}
.navButtonCover>button{position: absolute;left: 0;}

.text6.approved{color:var(--approved);}
.text6.paid{color:var(--paid);}
.text6.pending{color:var(--pending);}
.text6.denied{color:var(--denied);}

.bodyContent.approved{background-color:  var(--approved);}
.bodyContent.paid{background-color:  var(--paid);}
.bodyContent.pending{background-color:  var(--pending);}
.bodyContent.denied{background-color: var(--denied);}

[type="date"]::-webkit-inner-spin-button {display: none;}
[type="date"]::-webkit-calendar-picker-indicator {opacity: 0;}
.datePicker{color: var(--text-primary) !important;font-family: 'Roboto', sans-serif;font-size: 12px !important;font-style: normal;font-weight: 400;line-height: normal;padding-top: 10px;padding-bottom: 10px;background:var(--light-bg) url(../Img/calendarBlank.svg)  92% 48% no-repeat ;}

 
/*-------- country dropdown in textbox-----*/
.mobileField{position: relative;}
.mobileField.form-floating>label, .mobileField.form-floating>.form-control{padding-left: 86px !important;}
.form-floating.mobileField>.form-control:focus~label,.form-floating.mobileField>.form-control:not(:placeholder-shown)~label{transform: scale(.76) translateY(-0.5rem) translateX(1.7rem) !important;}
#country-select{position: absolute;left: 15px;top: 15px;margin: 0;bottom: 15px;}
#country-select dt a{border-right: 1px solid grey;display: inline-block;white-space: nowrap;}
.selectedCountry{display: flex;align-items: center;}
#country-select a .img{width: 24px;height: 24px;border-radius: 50%;display: inline-block;overflow: hidden;}
#country-select a .img svg{height: 32px;position: relative;left: -12px;top: -4px;}
#country-select li a{display: flex; align-items: center; margin-top: 4px;}
#country-select a{text-decoration: none;}
#country-select a .value{color: var(--text-primary);font-family: 'Roboto', sans-serif;font-size: 16px;font-style: normal;font-weight: 400;line-height: normal;display: inline-block;width: 36px;padding-left: 6px;}
.dropdown ul{list-style-type: none;margin-left: -8px;padding: 4px 8px;background: var(--light-bg);max-height: 172px;overflow: auto;box-shadow: 0px 4px 4px rgba(22, 22, 22, 0.20);position: sticky;z-index: 2;}
.dropdown ul li{padding: 4px 0;}
/*-------- country dropdown in textbox end-----*/

.err-msg{font-size: 10px; color: var(--denied); padding: 0 16px;display: none;}


a{cursor: pointer !important;}

.navButtonCover.scrolled{
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  background-color:var(--primary-bg);
  padding: 24px 22px;
  z-index: 2; 
}
.navButtonCover.scrolled>button{left: 22px;}

.bodyContent.approved .navButtonCover.scrolled{background-color:  var(--approved);}
.bodyContent.paid .navButtonCover.scrolled{background-color:  var(--paid);}
.bodyContent.pending .navButtonCover.scrolled{background-color:  var(--pending);}
.bodyContent.denied .navButtonCover.scrolled{background-color: var(--denied);}

/* bootstrap css */