.container {
  margin: 0;
  padding: 0;
}










* {
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

*::selection{
  background-color: #fc316438;
}







/*----------- Whole Body -----------*/



.whole-body {
  width: 100%;
  height: 100vh;
}














.ab-colorbar{
  height: 5px;
  width: 100%;
  position: relative;
  z-index: 2;
  background: linear-gradient(45deg, #ff5e00 5.66%, #e6235d);
}








/*----------- Action Bar -----------*/


.actionbar{
  width: 100%;
  min-width: 720px;
  height: 70px;
  display: flex;
  align-items: center;
  position: relative;
  z-index: 2;
  background-color: #22292F;
  box-shadow: 0px 10px 20px #0000000e;
}













.ab-logo{
  width: 55px;
  height: 55px;
  border-radius: 100px;
  margin: 0px 12px 0px 12px;
}














.ab-title-section{
  width: 300px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}




.ab-heading{
  font-size: 18px;
  font-family: 'Poppins';
  font-weight: 500;
  color: #ffffff;
  margin: 0px 0px 0px 0px;
}


.ab-subheading{
  font-size: 14px;
  font-family: 'Poppins';
  font-weight: 400;
  color: #ffffff;
  margin: 0px 0px 0px 0px;
}


















.ab-headingbox{
  width: 250px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: calc(50% - 504px);

  background-color: #2B343B;
  border-radius: 6px;
}


.ab-headingbox-text{
  font-size: 14px;
  font-family: 'Nunito';
  font-weight: 600;
  color: #ffffff;
  margin: 0px;
}














.ab-profile{
  width: 80px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: calc(50% - 205px);
}







.ab-profile-box{
  width: 50px;
  height: 50px;
  display: flex;
  border-radius: 100px;
  background-color: #5f6368;
}



.ab-profile-icon{
  width: 50px;
  height: 50px;
  border-radius: 100px;
  transition: 0.5s;
}
















.ab-profile-ripple{
  width: 80px;
  height: 70px;
  display: flex;
  position: fixed;
}





.abp-ripple{
  width: 100%;
  height: 100%;
  display: flex;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}




.abp-ripple > span {
  position: absolute;
  background: #5f6368;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
  animation: abp-ripple-animation 1s linear infinite;
  cursor: text;
}






@keyframes abp-ripple-animation {
  0% {
    width: 0px;
    height: 0px;
    opacity: 0.5;
  }
  100% {
    width: 1000px;
    height: 1000px;
    opacity: 0;
  }
}










































/*---------- Whole Body Main Content ----------*/



.whole-body-content{
  width: 100%;
  height: calc(100vh - 76px);
  display: flex;
}






















/*---------- Drawer ----------*/


.drawer{
  width: 250px;
  height: 100%;
  display: flex;
  flex-direction: column;
  z-index: 0;
  /* #F9F9F9 - #e0e0e0 */
  background-color: #ffffff;
  border-right: 1px solid #e0e0e0;
}







.drawer-tab{
  width: 100%;
  height: 45px;
  display: flex;
  align-items: center;
  background-color: #ffffff;
  border-radius: 0px 50px 50px 0px;
  cursor: pointer;
  transition: 0.5s;
}

#dt1-main{
  margin-top: 16px;
}




.drawer-tab-bar{
  width: 0px;
  height: 100%;
  display: flex;
  background-color: #7e57c2;
  transition: 0.5s;
}




.drawer-tab-icon{
  width: 24px;
  height: 24px;
  margin: 0px 20px 0px 16px;
  fill: #5f6368;
  transition: 0.5s;
}




.drawer-tab-text{
  font-size: 14px;
  font-family: 'Baloo 2';
  font-weight: 500;
  color: #5f6368;
  transition: 0.5s;
}






.dt-ripple-main{
  width: 250px;
  height: 45px;
  display: flex;
  position: fixed;
  border-radius: 0px 50px 50px 0px;
  overflow: hidden;
}


.dt-ripple{
  width: 100%;
  height: 100%;
  display: flex;
  transition: 0.5s;
}

.dt-ripple:hover{
  transition: 0.5s;
  background-color: #d1d1d13b;
}











.dt-ripple > span {
  position: absolute;
  background: #57595c8f;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
  animation: ripple-animation 1s linear infinite;
  cursor: text;
}






@keyframes ripple-animation {
  0% {
    width: 0px;
    height: 0px;
    opacity: 0.5;
  }
  100% {
    width: 1000px;
    height: 1000px;
    opacity: 0;
  }
}









.dv1-tab{
  width: calc(100% + 1px);
  height: 0.5px;
  display: flex;
  margin: 16px 0px 16px 0px;
  background-color: #DADCE0;
}









/* ---- Messages Status ---- */


.tab7{
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
}



.tab7-head{
  width: 100%;
  height: 46px;
  display: flex;
  align-items: center;
  transition: 0.3s;
  cursor: pointer;
}
.tab7-head:hover{
  transition: 0.3s;
  background-color: #61ce7033;
}
.tab7-head:hover .tab7-icon{
  transition: 0.2s;
  transform: scale(1.1, 1.1);
}
.tab7-head:active .tab7-icon{
  transition: 0.2s;
  transform: scale(1, 1);
}


.tab7-icon{
  width: 24px;
  height: 24px;
  margin: 0px 16px 0px 16px;
  transition: 0.2s;
}

.tab7-heading{
  font-size: 12px;
  font-family: 'Poppins';
  font-weight: 600;
  color: #61ce70;
}

.tab7-dd-icon{
  width: 24px;
  height: 24px;
  fill: #cacaca;
  margin-left: 20px;
}



.tab7-sb{
  width: calc(100% - 32px);
  height: 4px;
  display: flex;
  margin: 12px 0px 0px 16px;

  background-color: #e0e0e0;
  border-radius: 10px;
  overflow: hidden;
}
.tab7-sb-used{
  width: 25%;
  height: 100%;
  display: flex;

  background-color: #61ce70;
  border-radius: 10px;
}




.tab7-text{
  font-size: 12px;
  font-family: 'Roboto';
  font-weight: 400;
  color: #5f6368;
  margin: 12px 0px 0px 16px;
}




.tab7-button{
  width: 120px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 20px 0px 0px 16px;

  background-color: #ffffff;
  outline: none;
  border: 2px solid #DADCE0;
  border-radius: 6px;

  font-size: 13px;
  font-family: 'Baloo 2';
  font-weight: 500;
  color: #9e9e9e;

  cursor: pointer;
  transition: 0.3s;
}

.tab7-button:hover{
  transition: 0.3s;
  border: none;
  background-color: #e6235d;
  color: #ffffff;
  transform: scale(1.05, 1.05);
}

.tab7-button:active{
  transition: 0.1s;
  transform: scale(1, 1);
}



















/* ---- Menu ---- */

.tab7-menu{
  width: 240px;
  height: 0px;
  display: flex;
  flex-direction: column;
  margin: -100px 0px 0px 10px;

  background-color: #ffffff;
  box-shadow: 0px 0px 30px #dbdbdb;
  border-radius: 12px;

  position: fixed;
  overflow: hidden;
  transition: 0.4s;
}


.tm7-item{
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
  cursor: pointer;
  transition: 0.3s;
}


.tm7-item-icon{
  width: 26px;
  height: 26px;
  margin: 0px 16px 0px 16px;
  transition: 0.2s;
}


.tm7-item-text{
  font-size: 13px;
  font-family: 'Poppins';
  font-weight: 500;
}



#tm7-item1:hover{
  transition: 0.3s;
  background-color: #61ce7033;
}


#tm7-item2:hover{
  transition: 0.3s;
  background-color: #ff05501f;
}


#tm7-item3:hover{
  transition: 0.3s;
  background-color: #6f4daa31;
}


#tm7-item4:hover{
  transition: 0.3s;
  background-color: #03a8f42c;
}


#tm7-item1:hover .tm7-item-icon, #tm7-item2:hover .tm7-item-icon, #tm7-item3:hover .tm7-item-icon, #tm7-item4:hover .tm7-item-icon{
  transition: 0.1s;
  transform: scale(1.1, 1.1);
}

#tm7-item1:active .tm7-item-icon, #tm7-item2:active .tm7-item-icon, #tm7-item3:active .tm7-item-icon, #tm7-item4:active .tm7-item-icon{
  transition: 0.1s;
  transform: scale(1, 1);
}







#tm7-item-text1{
  color: #61ce70;
}

#tm7-item-text2{
  color: #ff0550;
}

#tm7-item-text3{
  color: #6f4daa;
}

#tm7-item-text4{
  color: #03a9f4;
}





















.copyright{
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  font-size: 12px;
  font-family: 'Rubik';
  font-weight: 500;
  color: #e6235d;
  text-align: center;
}





























/*---------- All Screen Sections ----------*/


.screen-section{
  width: calc(100% - 250px);
  height: 100%;
  display: flex;
  background-color: #EBEFF2;
}


























/*---------- Home Screen 1 ----------*/


.home-screen{
  width: 100%;
  height: 100%;
  display: flex;
}




.home-screen-main{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}







.hs-heading1{
  font-size: 22px;
  font-family: 'Poppins';
  font-weight: 700;
  color: #383333;
  margin: 50px 0px 0px 50px;
}



.hsh1-loader{
  width: 150px;
  height: 34px;
  display: flex;
  margin-left: 50px;
  border-radius: 3px;
  animation: skloader 0.5s linear infinite alternate;
}




@keyframes skloader {
  0% {
    background-color: #e0e3e6;
  }
  100% {
    background-color: #c2c6ca;
  }
}






.qr{
  width: 264px;
  height: 264px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 30px 0px 0px 50px;

  background-color: #ffffff;
  border-radius: 16px;
  
  cursor: none;
}





































































/*---------- Services Screen 2 ----------*/


.services-screen{
  width: 100%;
  height: 100%;
  display: none;
}





































































/*---------- Analytics Screen 3 ----------*/


.analytics-screen{
  width: 100%;
  height: 100%;
  display: none;
}





































































/*---------- Payments Screen 4 ----------*/


.payments-screen{
  width: 100%;
  height: 100%;
  display: none;
}





































































/*---------- Profile Screen 5 ----------*/


.profile-screen{
  width: 100%;
  height: 100%;
  display: none;
  background-color: yellowgreen;
}





































































/*---------- Settings Screen 6 ----------*/


.settings-screen{
  width: 100%;
  height: 100%;
  display: none;
}










































































/*----------------- Custom Snackbar -----------------*/



.snackbar {
  min-height: 40px;
  width: 375px;
  display: flex;
  align-items: center;
  background-color: #383333;
  box-shadow: 0px 0px 10px #0000007c;
  border-radius: 5px;
  left: 30px;
  bottom: -50px;
  z-index: 10;
  position: fixed;
  visibility: hidden;
}

.snackbar-icon-section{
  width: 10%;
  display: flex;
}
.snackbar-icon{
  height: 20px;
  width: 20px;
  margin-left: 16px;
  margin-top: 12px;
  margin-bottom: 12px;
  display: flex;
}

.snackbar-text-section{
  width: inherit;
}
.snackbar-text{
  display: flex;
  font-family: 'Roboto';
  font-size: 14px;
  color: #ffffff;
  font-weight: 400;
  margin-top: 16px;
  margin-bottom: 16px;
  margin-left: 16px;
  user-select: none;
}

.snackbar-button-section{
  display: flex;
  justify-content: flex-end;
}
.snackbar-button{
  min-width: 60px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 8px;
  background-color: #383333;
  outline: none;
  border: none;
  border-radius: 4px;
  font-family: 'Roboto';
  font-size: 12px;
  color: #ffffff;
  font-weight: 400;
  cursor: pointer;
  user-select: none;
  transition: 0.3s;
}