@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap');
body {
	margin: 0;
	padding: 0;
	background-color: var(--body_bg);
}

/* PWA install button styles */
.install-btn {
    position: fixed;
    bottom: 70px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    padding: 10px 15px;
    border-radius: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    animation: pulse 2s infinite;
}

.dismiss-btn{
	position: absolute;
	top: -5px;
	right: -5px;
	background: #1747d6;
	border-radius: 50%;
	width: 20px;
	height: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 14px;
	cursor: pointer;
}

@keyframes pulse {
    0% {
        transform: translateX(-50%) scale(1);
    }
    50% {
        transform: translateX(-50%) scale(1.05);
    }
    100% {
        transform: translateX(-50%) scale(1);
    }
}

:root {
	--white_bg: #fff;
	--border_radius: 7px;
	--border-top: 1px solid rgba(0, 0, 0, .05);
	--border-bottom: 1px solid rgba(0, 0, 0, .05);
	--border-left: 1px solid rgba(0, 0, 0, .05);
	--border-right: 1px solid rgba(0, 0, 0, .05);
	--border: 1px solid rgba(0, 0, 0, .05);
	--light_bg: #F9F9F9;
	--black_bg: #0D0D0D;
	--inactive_link: #999;
	--bg_success: #EEFCF3;
	--bg_danger: #FFEEEB;
	--bg_warning: #FFF5EB;
	--body_bg: #f7f8ff;
	--brand_color: #1747d6;
	--placeholder_color: #FAFAFA;
}

@font-face {
	font-family: 'Outfit-Bold';
	src: url('font/Outfit-Bold.otf');
	font-weight: 800;
	font-display: swap;
	font-style: normal;
}

@font-face {
	font-family: 'Outfit-Medium';
	src: url('font/Outfit-Medium.otf');
	font-weight: 500;
	font-display: swap;
	font-style: normal;
}

@font-face {
	font-family: 'Outfit-Light';
	src: url('font/Outfit-Light.otf');
	font-weight: 300;
	font-display: swap;
	font-style: normal;
}

/*added by kayd*/
.show{
	display:block !important;
}
.hidden{
	display:none !important;
}

/******Bottom Navigation *******/
.bottomNavigation {
	width: 100%;
	height: auto;
	position: fixed;
	bottom: 0;
	left: 0;
	z-index: 9999999;
	border-top: var(--border-top);
	padding: 10px 0;
	padding-bottom: 0;
	background: var(--brand_color);
}

.bottomNavigation .navItemsRow {
	margin-bottom: 0;
	padding-left: 0;
	width: 100%;
	display: flex;
	justify-content: space-around;
}

.bottomNavigation .navItemsRow .navItem {
	display: flex;
	justify-content: center;
	align-items: center;
}

.bottomNavigation .navItemsRow .navItem .navLink {
	text-decoration: none;
	color: var(--white_bg);
	text-align: center;
}

.bottomNavigation .navItemsRow .navItem .navLink.active {
	color: var(--white_bg);
}

.bottomNavigation .navItemsRow .navItem .navLink.active::before {
	content: "";
	display: block;
	width: 35px;
	height: 2px;
	border-radius: var(--border_radius);
	margin: 0 auto;
	background-color: var(--white_bg);
	position: relative;
	top: -11px;
}

.bottomNavigation .navItemsRow .navItem .navLink span {
	font-family: 'Outfit-Light', sans-serif;
	font-size: .6em;
	position: relative;
	top: -5px;
}

/*******Bottom Navigation ends *********/

/*******Top Navigation Bar********/
.top_nav {
	padding: 10px 15px;
	background: var(--white_bg);
	/* border-bottom: var(--border-bottom); */
}

.top_nav .img_box {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	border: 1px solid var(--border);
}
.disabled-btn{
    background-color: #87a2f4;
    color:#fff !important;
}

.top_nav .img_box .img {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	/**background-image: url('../img/logo.webp');
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;**/
	overflow:hidden;
}

.top_nav .itemText h1 {
	font-family: 'Outfit-Bold', sans-serif;
	font-size: .8em;
	margin-bottom: 0;
	/* margin-top: 5px; */
	color: var(--black_bg);
}
.top_nav .page_title h1 {
	font-family: 'Outfit-Bold', sans-serif;
	font-size: 1.3em;
	margin-bottom: 0;
	color: var(--black_bg);
	text-align: center;
	text-transform: uppercase;
}

.top_nav .page_title p {
	font-family: 'Outfit-Light', sans-serif;
	font-size: .6em;
	margin-bottom: 0;
	color: var(--inactive_link);
	text-align: center;
}

.switch_action {
	cursor: pointer;
	height: 100%;
	justify-content: center;
	align-items: center;
	width:20px;
  }
.top-profile-name p{
	padding-left:10px;
	font-size:12px !important;
}
.switch_action .chev_icon svg{
	width: 15px;
	height: 15px;
	margin-top: 0;
	margin-left: 6px;
}

.top_nav .itemText p {
	font-family: 'Outfit-Light', sans-serif;
	font-size: .6em;
	margin-bottom: 0;
	color: var(--inactive_link);
}

.empty_state {
	/* border: var(--border); */
	 border-radius: var(--border_radius);
	padding: 20px;
	background-color: var(--white_bg);
	margin-top: 20px;
}
.empty_state .img {
	width: 100%;
	height: 150px;
}

.empty_state .img img, .top-box .img_box img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.top_nav .image_box .img{
    overflow:hidden;
}

.empty_state .heading h2{
	font-family: 'Outfit-Medium', sans-serif;
	font-size: .8em;
	color: var(--black_bg);
}

.empty_state .action_btn a{t
	font-family: 'Outfit-Light', sans-serif;
	font-size: .8em;
	margin-bottom: 0;
	color: var(--white_bg);
	background: var(--brand_color);
	border-radius: var(--border_radius);
	padding: 10px 35px;
}

.empty_state .action_btn a{
	margin-top: 20px;
}

.top_nav .notificationItem {
	position: relative;
}
.clock-wrap svg{
    height:10px;
    width:10px;
}
.top_nav .notificationItem .item {
	text-decoration: none;
	color: var(--black_bg);
	position: absolute;
	right: 0;
}
.pin-alert{
    font-size:11px;
    width:100%;
    text-align:center;
    margin-bottom:10px;
}
.top_nav .notificationItem .alert_action {
	position: absolute;
	right: 0px;
	top: 0px;
	width: 5px;
	height: 5px;
	background: var(--danger);
	border-radius: 50%;
}

.top_nav .search_box {
	margin-top: 5px;
	margin-bottom: 5px;
}

.top_nav .search_box .form-group {
	margin-bottom: 0;
}

.top_nav .search_box .form-group input,.charges-form select,.charges-form input,
.top_nav .search_box .form-group select{
	width: 100%;
	padding: 7px 10px;
	border: none;
	outline: none !important;
	border-top: var(--border-top);
	border-bottom: var(--border-bottom);
	border-right: var(--border-right);
	border-top-right-radius: var(--border_radius);
	border-bottom-right-radius: var(--border_radius);
	font-family: 'Outfit-Light', sans-serif;
	font-size: 1em;
	box-shadow:none !important;
}
.verified-users span,.top_nav .search_box .form-group select option{
    font-size:13px;
    font-family: 'Outfit-Light', sans-serif;
}
.charges-form select,.charges-form input {
    font-size:13px !important;
    border:1px solid #edebeb !important;
    margin-bottom:4px;
    border-radius:5px !important;
}
.charges-form label {
  font-family: 'Outfit-Light', sans-serif;
  font-size: .8em;
  margin-bottom: 10px;
  color: var(--inactive_link);
}
.top_nav .search_box .form-group input::placeholder {
	color: var(--inactive_link);
	font-size: .8em;
}


.appBody .items .itemBody .search_box {
	margin-top: 5px;
	margin-bottom: 5px;
}

.top_nav .search_box .form-group {
	margin-bottom: 0;
}

.appBody .items .itemBody .search_box .form-group input {
	width: 100%;
	padding: 7px 10px;
	border: none;
	outline: none;
	border-top: var(--border-top);
	border-bottom: var(--border-bottom);
	border-right: var(--border-right);
	border-top-right-radius: var(--border_radius);
	border-bottom-right-radius: var(--border_radius);
	font-family: 'Outfit-Light', sans-serif;
	font-size: 1em;
}

.appBody .items .itemBody .search_box .form-group input::placeholder {
	color: var(--inactive_link);
	font-size: .8em;
}



.icon_box {
	padding: 7px 10px;
	border-top: var(--border-top);
	border-bottom: var(--border-bottom);
	border-left: var(--border-left);
	border-top-left-radius: var(--border_radius);
	border-bottom-left-radius: var(--border_radius);
	background-color: var(--white_bg);
	display:flex; align-items:center; justify-content:center
}

.icon_box span svg {
	width: 15px;
	height: 15px;
	color: var(--inactive_link);
}

.appViewNav {
	padding: 10px 15px;
	background: var(--white_bg);
	border-bottom: var(--border-bottom);
}

.appViewNav .img_box {
	width: 35px;
	height: 35px;
	border-radius: 50%;
	border: var(--border);
}

.appViewNav .img_box .img {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background-image: url('../img/logo.webp');
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}
.appViewNav .img_box .img img{
	width: 100%;
	height: 100%;
	border-radius: 50%;
	object-fit: cover;
}
.appViewNav .title h1 {
	font-family: 'Outfit-Bold', sans-serif;
	font-size: 1.3em;
	margin-bottom: 0;
	color: var(--black_bg);
	text-transform: uppercase;
}

.appViewNav .title {
	margin-top: 5px;
}

.appViewNav .icon {
	margin-top: 5px;
}

.appViewNav .call_action a {
	text-decoration: none;
	color: var(--black_bg);
}

.appViewNav .icon a {
	text-decoration: none;
	color: var(--black_bg);
}

.appViewNav .call_action a svg {
	/* fill: var(--black_bg); */
	color: var(--black_bg);
	width: 20px;
	height: 20px;
}

/*******Top Navigation Bar********/

/*******App body*******/
.appBody {
	padding: 20px 15px;
	margin-bottom: 80px;
}

/*******Stat dats starts here *******/
.appBody .statItem {
	/* box-shadow: 0px 0px 5px 0px rgba(0,0,0,.05); */
	/* border: var(--border); */
	background-color: var(--white_bg);
	border-radius: var(--border_radius);
	padding: 10px 15px;
	margin-bottom: 10px;
	box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.08);
}

.appBody .statItem .icon_pending {
	width: 45px;
	height: 45px;
	border-radius: 50%;
	background: rgba(19, 119, 226,.1);
	position: relative;
	margin-bottom: 10px;
}

.appBody .statItem .icon_active {
	width: 45px;
	height: 45px;
	border-radius: 50%;
	background: rgba(19, 119, 226,.1);
	position: relative;
	margin-bottom: 10px;
}

.appBody .statItem .icon_pending svg {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 25px;
	height: 25px;
	color: var(--brand_color);
}

.appBody .statItem .icon_active svg {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 25px;
	height: 25px;
	color: var(--brand_color);
}

.appBody .statItem .textBox p {
	font-family: 'Outfit-Light', sans-serif;
	font-size: .8em;
	margin-bottom: 10px;
	color: var(--inactive_link);
}

.appBody .statItem .textBox h1 {
	font-family: 'Outfit-Bold', sans-serif;
	font-size: 1em;
	margin-bottom: 5px;
	color: var(--black_bg);
}

.appBody .stat_group .title h2 {
	font-family: 'Outfit-Medium', sans-serif;
	font-size: .8em;
	margin-bottom: 3px;
	color: var(--black_bg);
}

.appBody .stat_group .title {
	padding: 5px 20px;
}

.comments_btn,
.media_btn {
	cursor: pointer;
}

/*******Stat data ends here*******/

/*******Recent Project Starts here *******/
.appBody.project_body {
	background-color: #fff;
	border-top-left-radius: 40px;
	border-top-right-radius: 40px;
	margin-top: 10px;
	height: 80vh;
	max-height: 80vh;
	overflow-y: scroll;
	overflow-x: hidden;
}

.appBody.project_body .tab_list {
	margin: 0px 0;
}

.appBody .recent_projects {
	margin-bottom: 30px;
}

.appBody .items .itemBody, .view_workpackage_list .itemBody{
	background-color: var(--white_bg);
	border-radius: 10px;
	padding: 15px 15px;
	border: var(--border);
	margin-bottom: 15px;
}

.appBody.view_project .items .itemBody {
	background-color: var(--white_bg);
	border-radius: var(--border_radius);
	padding: 15px 15px;
	margin-bottom: 20px;
	box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.05);
}

.appBody .items .accordion .card {}

.appBody .items .accordion .card {
	margin-bottom: 15px;
	background-color: var(--white_bg);
	border-radius: var(--border_radius);
	/* box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.05); */
}

.accordion > .card:not(:last-of-type) {
	border-bottom: 1px solid rgba(0,0,0,.125);
  }


.appBody .items .accordion .card .card-body {
	padding: 1.25rem .9rem;
}

.appBody .items .accordion .card .icon_data_box {
	width: 35px;
	height: 35px;
	border-radius: 50%;
	background: rgba(19, 119, 226,.1);
	position: relative;
}

.appBody .items .accordion .card .icon_main_box  {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: rgba(19, 119, 226,.1);
	position: relative;
	margin-right: 20px;
}

.appBody .items.view_team .item_icon {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: rgba(19, 119, 226,.1);
	position: relative;
	margin-right: 15px;
	margin-top: 5px;
}

.appBody .items.view_team .item_icon svg {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 15px;
	height: 15px;
	color: var(--brand_color);
  }

.appBody .items .accordion .card .icon_main_box svg {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 15px;
	height: 15px;
	color: var(--brand_color);
}

.appBody .items .item_history .icon_data_box {
	width: 35px;
	height: 35px;
	border-radius: 50%;
	background: rgba(19, 119, 226,.1);
	position: relative;
}

.appBody .items .item_history .icon_data_box svg {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 15px;
	height: 15px;
	color: var(--brand_color);
}

.appBody .items .accordion .card .icon_data_box svg, .trans_pin_content .icon_data_box svg {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 15px;
	height: 15px;
	color: var(--brand_color);
}

.appBody  .today_task  .icon_data_box, .trans_pin_content .icon_data_box {
	width: 35px;
	height: 35px;
	border-radius: 50%;
	background: rgba(19, 119, 226,.1);
	position: relative;
}

.appBody  .today_task .icon_data_box svg {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 15px;
	height: 15px;
	color: var(--brand_color);
}

.appBody .items .profile_body .icon_data_box {
	width: 35px;
	height: 35px;
	border-radius: 50%;
	background: rgba(19, 119, 226,.1);
	position: relative;
}

.appBody .items .profile_body .icon_data_box svg {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 15px;
	height: 15px;
	color: var(--brand_color);
}

.appBody.notification .items  .icon_data_box {
	width: 35px;
	height: 35px;
	border-radius: 50%;
	background: rgba(238, 252, 243, .7);
	position: relative;
}

.appBody.notification .items  .icon_data_box svg {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 15px;
	height: 15px;
	color: var(--success);
}

.appBody.notification .items  .icon_data_box i {
	position: absolute;
	left: 50%;
	top: 30%;
	transform: translate(-50%, -40%);
	width: 15px;
	height: 15px;
	color: var(--success);
}

.appBody .items  .add_action {
	margin-bottom: 0px;
	cursor: pointer;
}

.appBody .items .add_action a.dropIcon {
	font-family: 'Outfit-Light', sans-serif;
	font-size: 13px;
	color: var(--black_bg);
	border-bottom: 1px solid var(--black_bg);
	text-decoration: none;
}

.appBody .items .accordion .card .card-body .add_action {
	margin-bottom: 15px;
	cursor: pointer;
}

.appBody .items .accordion .card .card-body .add_action span {
	font-family: 'Outfit-Light', sans-serif;
	font-size: 13px;
	color: var(--black_bg);
	border-bottom: 1px solid var(--black_bg);
}

.appBody .items .accordion .card .card-body .add_action .plus_btn {
	position: relative;
	width: 15px;
	height: 15px;
	background: var(--brand_color);
	border-radius: 50%;
	margin-left: 7px;
	margin-top: 7px;
}

.appBody .items .accordion .card .card-body .add_action .plus_btn svg {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 10px;
	height: 10px;
	color: var(--white_bg);
  }


  .appBody.getChat .add_action {
	/* margin-bottom: 15px; */
	cursor: pointer;
}

.appBody.getChat .add_action span {
	font-family: 'Outfit-Light', sans-serif;
	font-size: 13px;
	color: var(--black_bg);
	border-bottom: 1px solid var(--black_bg);
}

.appBody.getChat .add_action .plus_btn {
	position: relative;
	width: 15px;
	height: 15px;
	background: var(--brand_color);
	border-radius: 50%;
	margin-left: 7px;
	margin-top: 7px;
}

.appBody.getChat .add_action .plus_btn svg {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 10px;
	height: 10px;
	color: var(--white_bg);
  }


  .appBody.view_task .add_action {
	/* margin-bottom: 15px; */
	cursor: pointer;
}

.appBody.view_task .add_action span {
	font-family: 'Outfit-Light', sans-serif;
	font-size: 13px;
	color: var(--black_bg);
	border-bottom: 1px solid var(--black_bg);
}

.appBody.view_task .add_action .plus_btn {
	position: relative;
	width: 15px;
	height: 15px;
	background: var(--brand_color);
	border-radius: 50%;
	margin-left: 7px;
	margin-top: 7px;
}

.appBody.view_task .add_action .plus_btn svg {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 10px;
	height: 10px;
	color: var(--white_bg);
  }



  .appBody .items  .add_action.active span {
	font-family: 'Outfit-Light', sans-serif;
	font-size: 13px;
	color: var(--black_bg);
	border-bottom: 1px solid var(--black_bg);
}

.appBody .items .add_action.active .plus_btn {
	position: relative;
	width: 15px;
	height: 15px;
	background: var(--brand_color);
	border-radius: 50%;
	margin-left: 7px;
	margin-top: 7px;
}

.appBody .items  .add_action.active .plus_btn svg {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 10px;
	height: 10px;
	color: var(--white_bg);
  }



.appBody .items .accordion .card .card-body .add_action a {
	font-family: 'Outfit-Light', sans-serif;
	font-size: 13px;
	color: var(--black_bg);
	border-bottom: 1px solid var(--black_bg);
	text-decoration: none;
}

 .create-workpackage .btn,
 .create-task .btn{
	color: var(--white_bg) !important;
}

.appBody .items .accordion .card .card-body .add_action.total_expense {
	margin-bottom: 0px;
	cursor: pointer;
}

.appBody .items .accordion .card .card-body .add_action.total_expense span {
	border-bottom: none;
}

.appBody .items .accordion {
	/* background-color: var(--white_bg);
	border-radius: var(--border_radius);
	box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.05); */
}

.appBody .items .accordion .card .card-header,
.modal-body .card .card-header{
	background-color: var(--white_bg);
	border-bottom: var(--border-bottom);
	padding: .75rem .4rem;
}

.appBody .items .accordion .card .card-header button.btn-link,
.modal-body .card .card-header button.btn-link{
	font-family: 'Outfit-Medium', sans-serif;
	font-size: 14px;
	color: var(--black_bg);
	text-decoration: none;
}

.appBody.getChat .items .accordion .card .card-header button.btn-link {
	padding: .275rem .25rem;
}


.appBody .items .accordion .card .card-header a.btn-link {
	font-family: 'Outfit-Medium', sans-serif;
	font-size: 14px;
	color: var(--black_bg);
	text-decoration: none;
}

.appBody .items .accordion .card .card-header button.btn-link span.title {
	position: relative;
	top: 5px;
}
.appBody .items .accordion .card .card-header button.btn-link span.float-right.chev_icon {
	position: relative;
	top: 4px;
}

.appBody .items .accordion .card .card-header button span.float-right {
	position: relative;
	top: -10px;
}

.btn-block.text-left span svg {
	transition: all .2s ease-in-out;
	width: 17px;
	height: 17px;
}

.appBody.view_project .items .accordion .card .card-header button span.float-right {
	position: relative;
	top: 0;
}

.appBody.view_user .items .accordion .card .card-header button span.float-right {
	position: relative;
	top: 0;
}

.appBody .items .accordion.wallet .card .card-header button span.float-right {
	position: relative;
	top: 0;
}
.appBody.view_user .items .accordion .card .user_balance h1{
	font-family: 'Outfit-Bold', sans-serif;
	font-size: 1.5em;
	color: var(--black_bg);
	text-decoration: none;
}
.close_btn {
  cursor: pointer;
}

.appBody .items .accordion .card .card-header button.btn-link i {
	font-family: 'Outfit-Light', sans-serif;
	font-size: 11px;
	color: var(--inactive_link);
}

.appBody .items .accordion .card .itemBody {
	background-color: var(--white_bg);
	border-radius: var(--border_radius);
	padding: 15px 15px;
	border: var(--border);
	margin-bottom: 15px;
	box-shadow: none;
}

.appBody .items .accordion .card  .note {
	font-family: 'Outfit-Light', sans-serif;
	font-size: 12px;
	color: var(--inactive_link);
	font-style: italic;
	padding: 0 5px;
}

.appBody .items .accordion .card .itemBody .itemBoxHeading h1, .appBody .items .accordion .card .itemBody .itemBoxHeading h1 span {
	font-size: .8em;
}

.appBody .items .itemBody .itemBoxHeading .h1{
	font-family: 'Outfit-Bold', sans-serif;
	color: var(--black_bg);
	margin-bottom: 0;
	font-size: 2em;
}

.appBody .items .itemBody.team_list .itemBoxHeading p.p {
	font-size: .8em;
  }

  .appBody .items .total_data .btn-link.btn-block  {
	color: var(--black_bg);
	text-decoration: none;	
  }

  .appBody .items .total_data .btn-link.btn-block .chev_icon {
	color: var(--black_bg);
	text-decoration: none;	
	position: relative;
	top: 20px;
  }

  #costAccordion .card  .p {
	color: var(--black_bg);
	font-size: 13px;
  }

  #costAccordion .card,  #costAccordion .card-header {
	background: rgba(19, 119, 226,.1);
  }

  #costAccordion .card .itemBody.team_list {
	background: rgba(19, 119, 226,.1);
	margin-top: 0;
  }

  #costAccordion .card .card-header .itemBoxHeading {
	padding: 0 10px;
  }

.appBody.project_body .items .itemBody {
	background-color: transparent;
	border-radius: 0;
	padding: 15px 10px;
	border: var(--border_radius);
	border-bottom: var(--border-bottom);
	margin-bottom: 0px;
}

.appBody.project_body .items .itemBody.project_inprogress i {
	color: var(--warning);
}

.appBody.project_body .items .itemBody.project_completed i {
	color: var(--success);
}

.appBody.project_body .items .itemBody.project_ended i {
	color: var(--danger);
}

.appBody.project_body .items .itemBody .item_icon svg {
	width: 35px;
	height: 35px;
}

.appBody.project_body .items .itemBody .item_icon i {
	font-size: 40px;
}

.appBody.project_body .items .itemBody .item_icon i::before {
	vertical-align: .5rem;
}

.appBody.project_body .items .itemBody .progress_bar .progress {
	margin-bottom: 10px;
}

.appBody .items .itemBody.task_inProgress svg, .view_workpackage_list .itemBody.task_inProgress svg {
	color: var(--warning);
}

.appBody .items .itemBody.task_ended svg, .view_workpackage_list .itemBody.task_ended svg {
	color: var(--danger);
}

.appBody .items .itemBody.task_success svg,.view_workpackage_list .itemBody.task_success svg {
	color: var(--success);
}

.appBody .items .itemBody.task_overdue svg,.view_workpackage_list .itemBody.task_overdue svg {
	color: var(--danger);
}

.appBody .items .itemBody .item_icon svg,.view_workpackage_list .itemBody .item_icon svg {
	width: 35px;
	height: 35px;
}

.float_action {
	position: fixed;
	bottom: 70px;
	right: 20px;
	width: 35px;
	height: 35px;
	background-color: var(--brand_color);
	border-radius: 50%;
	z-index: 1000;
	box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.08), 0px 12px 16px rgba(0, 0, 0, 0.09);
}

.float_action svg {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 20px;
	height: 20px;
	color: var(--white_bg);
}

/*******Toggle Switch *******/
.switch {
	position: relative;
	display: inline-block;
	width: 50px;
	height: 25px;
  }
  
  .switch input { 
	opacity: 0;
	width: 0;
	height: 0;
  }
  
  .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: 23px;
	width: 23px;
	left: 0px;
	bottom: 1px;
	background-color: white;
	-webkit-transition: .4s;
	transition: .4s;
  }
  
  input:checked + .slider {
	background-color: var(--brand_color);
  }
  
  input:focus + .slider {
	box-shadow: 0 0 1px var(--brand_color);
  }
  
  input:checked + .slider:before {
	-webkit-transform: translateX(25px);
	-ms-transform: translateX(26px);
	transform: translateX(26px);
  }
  
  /* Rounded sliders */
  .slider.round {
	border-radius: 34px;
  }
  
  .slider.round:before {
	border-radius: 50%;
  }

  .appBody .items .task_check .title p {
	font-family: 'Outfit-Light', sans-serif;
	font-size: .9em;
	margin-bottom: 0;
	color: var(--black_bg);
  }

/* .appBody .items .itemBody.task_success {
  background-color: var(--bg_success);
}
.appBody .items .itemBody.task_overdue {
  background-color: var(--bg_danger);
}
.appBody .items .itemBody.task_inProgress {
  background-color: var(--bg_warning);
} */
.appBody .items .itemBody .status_box {
	/* background-color: var(--white_bg);
  border-radius: 7px;
  padding: 3px 3px;
  text-align: center; */
}

.appBody .items .itemBody .status_box p {
	font-family: 'Outfit-Light', sans-serif;
	font-size: .7em;
	margin-bottom: 0;
}

.appBody .items .itemBody .status_box.in_progress p {
	color: var(--warning);
}

.appBody .items .itemBody .status_box.completed p {
	color: var(--success);
}

.appBody .items .itemBody .status_box.ended p {
	color: var(--danger);
}

.appBody .items .itemBody .dropdown .dropIcon, .view_workpackage_list .itemBody .dropdown .dropIcon {
	text-decoration: none;
	color: var(--black_bg);
}

.appBody .items .itemBody .dropdown .dropIcon svg, .view_workpackage_list .itemBody .dropdown .dropIcon svg {
	color: var(--black_bg);
}

.appBody .items .itemBody .dropdown .dropdown-menu {
	min-width: 8rem;
	border: var(--border);
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
	z-index: 9999999;
}

.appBody .items .itemBody .dropdown .dropdown-menu .dropdown-item,.view_workpackage_list .itemBody .dropdown .dropdown-menu .dropdown-item {
	font-family: 'Outfit-Light', sans-serif;
	font-size: .7em;
	color: var(--black_bg);
	cursor: pointer;
}

.appBody .items .itemBody .dropdown .dropdown-menu .dropdown-divider {
	margin: .6rem 0;
	border-top: var(--border-top);
}

.appBody .items .history.page .dropdown .dropdown-menu {
	min-width: 8rem;
	border: var(--border);
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
	z-index: 9999999;
}

.appBody .items .history.page .dropdown .dropdown-menu .dropdown-item {
	font-family: 'Outfit-Light', sans-serif;
	font-size: .7em;
	color: var(--black_bg);
	cursor: pointer;
}

.appBody .items .history.page .dropdown .dropdown-menu .dropdown-divider {
	margin: .6rem 0;
	border-top: var(--border-top);
}

.appBody .items .itemBody .itemBoxHeading h1, .appBody .items .itemBody .itemBoxHeading h1 span, .view_workpackage_list .itemBody .itemBoxHeading h1 {
	font-family: 'Outfit-Medium', sans-serif;
	font-size: .9em;
	margin-bottom: 0;
	color: var(--black_bg);
}

.appBody .items .itemBody .page_title h1 {
	font-family: 'Outfit-Bold', sans-serif;
	font-size: 1.5em;
	margin-bottom: 10px;
	color: var(--black_bg);
}

.appBody .items .itemBody .page_title  {
	margin-bottom: 20px;
}

.appBody .items .itemBody .itemBoxHeading h3 {
	font-family: 'Outfit-Medium', sans-serif;
	font-size: .9em;
	margin-bottom: 2px;
	color: var(--black_bg);
}

.appBody .items .itemBody .read h3{
    font-family: 'Outfit-Light', sans-serif;
    font-weight:300 !important;
    color:#666;
}
.appBody .items .itemBody .itemBoxHeading p {
	font-family: 'Outfit-Light', sans-serif;
	font-size: .9em;
	margin-bottom: 0;
	color: var(--inactive_link);
	line-height: 20px;
}

.appBody .items .itemBody .itemBoxHeading.item_group p {
	color: var(--black_bg);
	font-size: .8em;
}

.appBody .items .itemBody .itemBoxHeading.item_group .img_box {
	width: 100%;
	height: 250px;
	border-radius: 5px;
	border: var(--border);
}

.appBody .items .itemBody .itemBoxHeading.item_group  .img_box .img {
	width: 100%;
	height: 100%;
	border-radius: 5px;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}

.appBody .items .itemBody.team_list .itemBoxHeading span {
	font-family: 'Outfit-Light', sans-serif;
	font-size: .7em;
	margin-bottom: 0;
	color: var(--inactive_link);
	line-height: 20px;
}

.appBody .items .itemBody.team_list .itemBoxHeading h2 {
	font-family: 'Outfit-Medium', sans-serif;
	font-size: .9em;
	color: var(--black_bg);
}


.appBody .items .itemBody .itemBoxHeading span {
	color: var(--blue);
	font-family: 'Outfit-Light', sans-serif;
	font-size: .7em;
	/* margin-bottom: 15px; */
}


.appBody .items .itemBody a,.view_workpackage_list .itemBody a{
	color: var(--black_bg);
	text-decoration: none;
}

.appBody .items .itemBody .itemBoxHeading {
	margin-top: 0px;
	margin-bottom: 10px;
}

.appBody.getChat .items .itemBody .itemBoxHeading {
	margin-top: 0px;
	margin-bottom: 0px;
}

.appBody.view_task .items .itemBody .itemBoxHeading {
	margin-top: 0px;
	margin-bottom: 0px;
}

.appBody.view_project .items .itemBody .itemBoxHeading {
	margin-bottom: 0px;
}

.appBody .items .itemBody .itemBoxHeading.item_group span.heading,.view_workpackage_list .itemBody .itemBoxHeading span.heading {
	color: var(--inactive_link);
	font-size: .7em;
}

.appBody .items .itemBody .itemBoxHeading.item_group  {
	border-bottom: var(--border-bottom);
	margin-bottom: 15px;
	padding-bottom: 10px;
}

.appBody .items .itemBody .dateBox p, .view_workpackage_list .itemBody .dateBox p {
	font-family: 'Outfit-Light', sans-serif;
	font-size: 12px;
	margin-bottom: 0px;
	color: var(--inactive_link);
}

.appBody .items .itemBody .dateBox p span, .view_workpackage_list .itemBody .dateBox p span{
	font-family: 'Outfit-Light', sans-serif;
	font-size: 11px;
	margin-bottom: 0px;
	color: var(--inactive_link);
}

.appBody .items .itemBody .team_list {
	display: flex;
	margin-bottom: 10px;
	margin-top: 10px;
}

.appBody.getChat .items .itemBody .team_list {
	display: flex;
	margin-bottom: 0px;
	margin-top: 10px;
}

.appBody.view_task .items .itemBody .team_list {
	display: flex;
	margin-bottom: 0px;
	margin-top: 10px;
}

.appBody .items .itemBody.team_list a{
	text-decoration: none;
	color: var(--black_bg);
}

.appBody .items .itemBody .team_list .team .img_box {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	border: 2px solid #FFF3F0;
	position: relative;
	display: flex;
	justify-content: start;
}

.appBody .items .itemBody .team_list .team .img_box .img {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}

.appBody .items .itemBody .team_list .team .img_box span {
	font-family: 'Outfit-Medium', sans-serif;
	font-size: 12px;
	margin-bottom: 0px;
	color: var(--black_bg);
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.appBody .items .itemBody .progress_bar .progress {
	height: .4rem;
	border-radius: .45rem;
	margin-bottom: 5px;
}

.appBody .items .itemBody .progress_bar p {
	font-family: 'Outfit-Light', sans-serif;
	font-size: 12px;
	margin-bottom: 0px;
	color: var(--inactive_link);
}

.appBody .items .itemBody .progress_bar .progress .progress-bar {
	border-radius: .45rem;
	font-family: 'Outfit-Light', sans-serif;
	font-size: 10px;
}

.appBody .recent_projects .carousel-indicators {
	bottom: -20px;
}

.appBody .recent_projects .carousel-indicators li {
	width: 7px;
	height: 7px;
	background-color: var(--black_bg);
	border-radius: 50%;
	opacity: .3;
}

.appBody .recent_projects .carousel-indicators li.active {
	opacity: 1;
}

.appBody .header {
	padding: 10px 5px;
}

.appBody .header .title h1 {
	font-family: 'Outfit-Medium', sans-serif;
	font-size: .9em;
	margin-bottom: 0px;
	color: var(--black_bg);
	line-height: 30px;
}

.appBody .card .card-body .header .title h1 {
	font-family: 'Outfit-Medium', sans-serif;
	font-size: .9em;
	margin-bottom: 0px;
	color: var(--black_bg);
	line-height: 30px;
  }

.appBody.view_project .header .title h1 {
	font-family: 'Outfit-Bold', sans-serif;
	font-size: 1.1em;
}

.appBody.view_project .header .add_action {
	position: relative;
	width: 30px;
	height: 30px;
	background: var(--brand_color);
	border-radius: 50%;
	cursor: pointer;
}

.appBody.view_project .header .add_action svg {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 20px;
	height: 20px;
	color: var(--white_bg);
}

.appBody .header .add_action {
	position: relative;
	width: 25px;
	height: 25px;
	background: var(--brand_color);
	border-radius: 50%;
	cursor: pointer;
}

.appBody .header .add_action svg {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 15px;
	height: 15px;
	color: var(--white_bg);
}

.appBody.view_project .items .itemBody .team_list {
	display: flex;
	margin-bottom: 0px;
	margin-top: 10px;
}

.appBody .items .itemBody.team_list .img_box {
	width: 35px;
	height: 35px;
	border-radius: 50%;
	/**border: 2px solid #FFF3F0;**/
}

.appBody .items .itemBody.team_list .img_box img{
	width: 100%;
	height: 100%;
	border-radius: 50%;
	object-fit:cover;
}

.appBody .items .itemBody.team_list .img_box .img {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}

.appBody .items .itemBody.team_list .itemBoxHeading {
	margin-top: 0px;
	margin-bottom: 0px;
}

.appBody .items .itemBody.team_list .itemBoxHeading p {
	font-size: .7em;
	line-height: 20px;
}

.appBody.view_project .items .itemBody .itemBoxHeading .h3 {
	font-family: 'Outfit-Bold', sans-serif;
	font-size: 1.1em;
	margin-bottom: 15px;
}

.appBody.view_project .items .itemBody .itemBoxHeading.item_group .h3 {
	font-size: 1em;
	margin-bottom: 0px;
}

.appBody.view_project .items .itemBody .itemBoxHeading h1 {
	font-family: 'Outfit-Medium', sans-serif;
	font-size: .9em;
	margin-bottom: 0px;
}

.appBody.view_project .items .itemBody .itemBoxHeading h2 {
	font-family: 'Outfit-Medium', sans-serif;
	font-size: 1.2em;
	margin-bottom: 0px;
}

.appBody .header .view_all a {
	text-decoration: none;
	font-family: 'Outfit-Light', sans-serif;
	font-size: .8em;
	margin-bottom: 0;
	color: var(--inactive_link);
	line-height: 20px;
}

.appBody .items .itemBody.subtask {
	margin-bottom: 15px;
}

.appBody .items .itemBody.subtask h4 {
	font-family: 'Outfit-Medium', sans-serif;
	font-size: 1em;
	margin-bottom: 2px;
	color: #333;
}

.appBody .items .itemBody.check_subtask {
	font-family: 'Outfit-Light', sans-serif;
	font-size: 1em;
	margin-bottom: 2px;
	color: #444;
	cursor: pointer;
	margin-bottom: 15px;
}

.appBody .items .itemBody.check_subtask svg {
	width: 15px;
	height: 15px;
	margin-right: 10px;
}

.appBody .items .itemBody.check_subtask.active_subtask {
	background-color: var(--success);
	color: var(--white_bg);
}

.appBody .items .itemBody.check_subtask {
	text-align: center;
}

.appBody .items .form-box .itemBody.check_permission {
	font-family: 'Outfit-Light', sans-serif;
	font-size: 1em;
	margin-bottom: 2px;
	color: #444;
	cursor: pointer;
	margin-bottom: 15px;
	background-color: var(--white_bg);
	border-radius: 10px;
	padding: 15px 15px;
	border: var(--border);
  }

  .appBody .items .form-box .itemBody.check_permission.active_item {
	background-color: var(--brand_color);
	color: var(--white_bg);
  }

  .appBody .items .form-box .itemBody.check_permission svg {
	width: 15px;
	height: 15px;
	margin-right: 10px;
  }

.appBody .items .form-box {
	margin-bottom: 30px;
	background: var(--white_bg);
	padding: 15px;
	border-radius: 5px;
	box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.08);
}

.appBody .items .form-box .form-control[readonly] {
	font-size: 13px;
	color: #555;
	background-color: var(--body_bg);
}

.appBody .items .form-box h1 {
	font-family: 'Outfit-Bold', sans-serif;
	font-size: 1.5em;
	margin-bottom: 10px;
	color: #333;
}

.appBody .items .form-box input {
	font-family: 'Outfit-Light', sans-serif;
	font-size: 15px;
	color: #333;
	/* border-radius: var(--border_radius); */
	border: var(--border);
}

.appBody .items .form-box textarea {
	font-family: 'Outfit-Light', sans-serif;
	font-size: 15px;
	color: #333;
	/* border-radius: var(--border_radius); */
	border: var(--border);
}

.appBody .items .form-box input[type="date"] {
	color: #666;
	font-size: 13px;
}

.appBody .items .form-box select {
	font-family: 'Outfit-Light', sans-serif;
	font-size: 13px;
	color: #666;
	/* border-radius: var(--border_radius); */
	border: var(--border);
}

.appBody .items .form-box button[type="submit"] {
	font-family: 'Outfit-Medium', sans-serif;
	font-size: 15px;
	color: var(--white_bg);
	/* border-radius: var(--border_radius); */
	background: var(--brand_color);
	border: var(--brand_color);
}
button:disabled,.appBody .items .form-box button[type="submit"]:disabled {
    background-color: #87a2f4;
    color:#fff !important;
}
.appBody .items .form-box label {
	font-family: 'Outfit-Light', sans-serif;
	font-size: 12px;
	color: var(--black_bg);
	margin-bottom: 5px;
}

.appBody .items .form-box input::placeholder {
	font-size: 13px;
	color: var(--inactive_link);
}

.appBody .items .form-box textarea::placeholder {
	font-size: 13px;
	color: var(--inactive_link);
}

.appBody .items .form-box .searchTeam {
	position: relative;
}

.appBody .items .form-box .searchTeam .teamDropDown {
	position: absolute;
	top: 70px;
	left: 0;
	width: 100%;
	height: auto;
	padding: 0 15px;
	background: var(--body_bg);
	border-radius: var(--border_radius);
	box-shadow: 0px 0px 5px 1px rgb(0 0 0 / 5%);
	border: var(--border);
	z-index: 9999999;
	max-height: 300px;
	overflow-y: scroll;
	overflow-x: hidden;
	display: none;
}

.appBody .items .form-box .searchTeam .teamDropDown.active {
	display: block !important;
}

.appBody .items .form-box .searchTeam .teamDropDown .dropDownItem .img_box {
	width: 35px;
	height: 35px;
	border-radius: 50%;
	border: var(--border);
}

.appBody .items .form-box .searchTeam .teamDropDown .dropDownItem .img_box .img {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}

.appBody .items .form-box .searchTeam .teamDropDown .dropDownItem {
	padding: 15px 0;
	border-bottom: var(--border-bottom);
	cursor: pointer;
}

.appBody .items .form-box .searchTeam .teamDropDown .dropDownItem .textBox h2 {
	font-family: 'Outfit-Bold', sans-serif;
	font-size: .9em;
	color: #111;
	margin-bottom: 0px;
	margin-top: 7px;
}

.appBody .items .form-box .searchTeam .teamDropDown .dropDownItem .textBox p {
	font-family: 'Outfit-Light', sans-serif;
	font-size: 12px;
	color: var(--inactive_link);
	margin-bottom: 0px;
}

.appBody .items .form-box .collectTeamData {
	padding: 0 15px;
	background: var(--white_bg);
	border-radius: var(--border_radius);
	border: var(--border);
	box-shadow: 0px 0px 5px 1px rgb(0 0 0 / 5%);
	max-height: 300px;
	overflow-y: scroll;
	overflow-x: hidden;
	display: none;
}

.appBody .items .form-box .collectTeamData.active {
	display: block !important;
}

.appBody .items .form-box .collectTeamData .img_box {
	width: 35px;
	height: 35px;
	border-radius: 50%;
	border: var(--border);
}

.appBody .items .form-box .collectTeamData .img_box .img {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}

.appBody .items .form-box .collectTeamData .teamDropItem {
	padding: 15px 0;
	border-bottom: var(--border-bottom);
}

.appBody .items .form-box .collectTeamData .teamDropItem .textBox h2 {
	font-family: 'Outfit-Bold', sans-serif;
	font-size: .9em;
	color: #111;
	margin-bottom: 0px;
	margin-top: 7px;
}

.appBody .items .form-box .collectTeamData .teamDropItem .textBox p {
	font-family: 'Outfit-Light', sans-serif;
	font-size: 12px;
	color: var(--inactive_link);
	margin-bottom: 0px;
}

.appBody .items .form-box .collectTeamData .teamDropItem .remove_btn {
	color: var(--danger);
	cursor: pointer;
	text-align: right;
}

.appBody .items .form-box .collectTeamData .teamDropItem .remove_btn i {
	color: var(--danger);
	font-size: 20px;
}

.appBody .items .form-box .remove_role_trigger i {
	color: var(--danger);
	font-size: 20px;
	margin-top: 8px;
}

.appBody .items .form-box span.remove_role_trigger {
	cursor: pointer;
	color: var(--danger);
	font-size: 13px;
	font-style: italic;
	font-family: 'Outfit-Light', sans-serif;
	line-height: 0;
}

.appBody .items .form-box .collectTeamData .teamDropItem .remove_btn svg {
	width: 15px;
	height: 15px;
}

.appBody .items .form-box .tab_list .d-flex ul li {
	width: 50%;
}

.appBody .items .form-box .add_role_action span {
	font-family: 'Outfit-Light', sans-serif;
	font-size: 14px;
	color: var(--black_bg);
	cursor: pointer;
	border-bottom: 1px solid var(--black_bg);
}

.appBody .items .form-box .sign_up_action {
	font-family: 'Outfit-Light', sans-serif;
	font-size: 14px;
	color: var(--inactive_link);
	margin-bottom: 0px;
}

.appBody .items .form-box .google_signin button {
	font-family: 'Outfit-Light', sans-serif;
	font-size: 14px;
	color: var(--black_bg);
	background: var(--white_bg);
	border-radius: 30px;
}

.appBody .items .form-box .google_signin button img {
	margin: 0 10px;
}

.appBody .items .form-box .flex_row {
	margin-top: 30px;
	margin-bottom: 30px;
}

.appBody .items .form-box .flex_row p {
	font-family: 'Outfit-Light', sans-serif;
	font-size: 11px;
	text-transform: uppercase;
	color: var(--inactive_link);
	margin-bottom: 0px;
}

.appBody.notification .items  .flex_row {
	margin-top: 30px;
	margin-bottom: 30px;
}

.appBody.notification .items .flex_row p {
	font-family: 'Outfit-Light', sans-serif;
	font-size: 11px;
	text-transform: uppercase;
	color: var(--black_bg);
	margin-bottom: 0px;
}

.appBody .items .form-box .textBox h2 {
	font-family: 'Outfit-Bold', sans-serif;
	font-size: 1.5em;
	color: var(--black_bg);
}


.appBody .items .form-box  h2 {
	font-family: 'Outfit-Bold', sans-serif;
	font-size: 1em;
	color: var(--black_bg);
}

/* .appBody .items .form-box .textBox  {
  margin-bottom: 20px;
 } */
.appBody .items .form-box .textBox p {
	font-family: 'Outfit-Light', sans-serif;
	font-size: 13px;
	color: var(--inactive_link);
}

.appBody .items .form-box.signin_form {
	/*margin-top: 60px;*/
}

.appBody .items .form-box .forgot_password a {
	font-family: 'Outfit-Light', sans-serif;
	font-size: 14px;
}

.appBody .items .form-box .password-group {
	position: relative;
}

.appBody .items .form-box .password-group .pass-view {
	position: absolute;
	right: 10px;
	top: 31px;
}

.appBody .items .form-box .password-group .pass-view i {
	color: #888;
	cursor: pointer;
}

.appBody .items .form-box .password-group .pass-view i.active::before {
	content: "\f070";
	color: #333;
}

/*******Recent Project ends here *******/

/********Notification*******/
.appBody.notification .header  {
	padding: 0 5px;
}
.appBody.notification .header .title h3 {
	font-family: 'Outfit-Bold', sans-serif;
	font-size: 1.1em;
	margin-bottom: 0px;
	color: var(--black_bg);
	line-height: 30px;
}
.appBody.notification .item_body {
margin: 15px 0;
}
.appBody.notification .item_body .item_header p.p{
	font-family: 'Outfit-Light', sans-serif;
	font-size: 13px;
	margin-bottom: 5px;
	color: var(--inactive_link);
	}
	.appBody.notification .items .itemBody .itemBoxHeading {
		margin-top: 0px;
		margin-bottom: 0px;
	  }
	  
.appBody .append_group {
	border: var(--border);
	border-radius: var(--border_radius);
	padding: 15px;
	margin-bottom: 15px;
}
/*******Modal*********/
.modal{
 z-index:9999999999500 !important;
}
.modal .modal-title {
	font-family: 'Outfit-Bold', sans-serif;
	font-size: 1.1em;
}
.modal .append_group {
	border: var(--border);
	border-radius: var(--border_radius);
	padding: 15px;
	margin-bottom: 15px;
}

.modal.fade .modal-body {
	background-color: var(--body_bg);
}

.modal.fade .post_modal_content {
	background: var(--white_bg);
	padding: 15px;
	border-radius: 5px;
	box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.08);
}

.modal.fade .post_modal_content .remove_role_trigger i {
	color: var(--danger);
	font-size: 20px;
	margin-top: 8px;
}

.modal.fade .post_modal_content .remove_role_trigger {
	cursor: pointer;
}

.modal.fade .post_modal_content .add_role_action span {
	font-family: 'Outfit-Medium', sans-serif;
	font-size: 14px;
	color: var(--black_bg);
	cursor: pointer;
}

.modal.fade .post_modal_content .add_role_action {
	margin-bottom: 10px;
}

.modal.fade .post_modal_content label {
	font-family: 'Outfit-Light', sans-serif;
	font-size: 12px;
	color: var(--black_bg);
	margin-bottom: 5px;
}

.modal.fade .post_modal_content input {
	font-family: 'Outfit-Light', sans-serif;
	font-size: 15px;
	color: #333;
	border-radius: var(--border_radius);
	border: var(--border);
}

.modal.fade .post_modal_content select {
	font-family: 'Outfit-Light', sans-serif;
	font-size: 13px;
	color: #666;
	/* border-radius: var(--border_radius); */
	border: var(--border);
}

.modal.fade .post_modal_content .form-control[readonly] {
	font-size: 13px;
	color: #555;
	background-color: var(--body_bg);
}

.modal.fade .modal-footer button.close_action {
	font-family: 'Outfit-Light', sans-serif;
	font-size: 15px;
	color: #333;
	border: 2px solid var(--black_bg);
}

.modal.fade .modal-footer button.submit_trigger, .charges-form button.submit_trigger{
	font-family: 'Outfit-Light', sans-serif;
	font-size: 15px;
	color: var(--white_bg);
	border: 2px solid var(--brand_color);
	background: var(--brand_color);
}
.charges-form button.submit_trigger{
    float:right;
    margin-top:10px;
}
.modal.fade  button.submit_trigger,.charges-form button.submit_trigger {
	font-family: 'Outfit-Light', sans-serif;
	font-size: 15px;
	color: var(--white_bg);
	border: 2px solid var(--brand_color);
	background: var(--brand_color);
}

.modal.fade .modal-footer button.delete_trigger, .suspend_user {
	font-family: 'Outfit-Light', sans-serif;
	font-size: 15px;
	color: var(--white_bg);
	border: 2px solid var(--danger);
	background: var(--danger);
}

.modal.fade .post_modal_content input::placeholder {
	font-size: 13px;
	color: var(--inactive_link);
}

.modal.fade .post_modal_content .searchTeam {
	position: relative;
}

.modal.fade .post_modal_content .searchTeam .teamDropDown {
	position: absolute;
	top: 70px;
	left: 0;
	width: 100%;
	height: auto;
	padding: 0 15px;
	background: var(--body_bg);
	border-radius: var(--border_radius);
	box-shadow: 0px 0px 5px 1px rgb(0 0 0 / 5%);
	border: var(--border);
	z-index: 9999999;
	max-height: 300px;
	overflow-y: scroll;
	overflow-x: hidden;
	display: none;
}

.modal.fade .post_modal_content .searchTeam .teamDropDown.active {
	display: block !important;
}

.modal.fade .post_modal_content .searchTeam .teamDropDown .dropDownItem .img_box {
	width: 35px;
	height: 35px;
	border-radius: 50%;
	border: var(--border);
}

.modal.fade .post_modal_content .searchTeam .teamDropDown .dropDownItem .img_box .img {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}

.modal.fade .post_modal_content .searchTeam .teamDropDown .dropDownItem {
	padding: 15px 0;
	border-bottom: var(--border-bottom);
	cursor: pointer;
}

.modal.fade .post_modal_content .searchTeam .teamDropDown .dropDownItem .textBox h2 {
	font-family: 'Outfit-Bold', sans-serif;
	font-size: .9em;
	color: #111;
	margin-bottom: 0px;
	margin-top: 7px;
}

.modal.fade .post_modal_content .searchTeam .teamDropDown .dropDownItem .textBox p {
	font-family: 'Outfit-Light', sans-serif;
	font-size: 12px;
	color: var(--inactive_link);
	margin-bottom: 0px;
}

.modal.fade .post_modal_content .collectTeamData {
	padding: 0 15px;
	background: var(--white_bg);
	border-radius: var(--border_radius);
	border: var(--border);
	box-shadow: 0px 0px 5px 1px rgb(0 0 0 / 5%);
	max-height: 300px;
	overflow-y: scroll;
	overflow-x: hidden;
	display: none;
}

.modal.fade .post_modal_content .collectTeamData.active {
	display: block !important;
}

.modal.fade .post_modal_content .collectTeamData .img_box {
	width: 35px;
	height: 35px;
	border-radius: 50%;
	border: var(--border);
}

.modal.fade .post_modal_content .collectTeamData .img_box .img {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}

.modal.fade .post_modal_content .collectTeamData .teamDropItem {
	padding: 15px 0;
	border-bottom: var(--border-bottom);
}

.modal.fade .post_modal_content .collectTeamData .teamDropItem .textBox h2 {
	font-family: 'Outfit-Bold', sans-serif;
	font-size: .9em;
	color: #111;
	margin-bottom: 0px;
	margin-top: 7px;
}

.modal.fade .post_modal_content .collectTeamData .teamDropItem .textBox p {
	font-family: 'Outfit-Light', sans-serif;
	font-size: 12px;
	color: var(--inactive_link);
	margin-bottom: 0px;
}

.modal.fade .post_modal_content .collectTeamData .teamDropItem .remove_btn {
	color: var(--danger);
	cursor: pointer;
	text-align: right;
}

.modal.fade .post_modal_content .collectTeamData .teamDropItem .remove_btn i {
	color: var(--danger);
	font-size: 20px;
}

.modal.fade .post_modal_content .remove_role_trigger i {
	color: var(--danger);
	font-size: 20px;
	margin-top: 8px;
}

.modal.fade .post_modal_content .remove_role_trigger {
	cursor: pointer;
}

.modal.fade .post_modal_content span.remove_role_trigger {
	cursor: pointer;
	color: var(--danger);
	font-size: 13px;
	font-style: italic;
	font-family: 'Outfit-Light', sans-serif;
	line-height: 0;
}

.modal.fade .post_modal_content .collectTeamData .teamDropItem .remove_btn svg {
	width: 15px;
	height: 15px;
}

.modal.fade .post_modal_content p {
	color: var(--black_bg);
	font-size: 13px;
	font-family: 'Outfit-Light', sans-serif;
}

.modal.fade .post_modal_content .itemBody.check_role, .check_project {
	margin-bottom: 15px;
}

.modal.fade .post_modal_content .itemBody.check_role h4, .check_project h4 {
	font-family: 'Outfit-Medium', sans-serif;
	font-size: 1em;
	margin-bottom: 2px;
	color: #333;
}

.modal.fade .post_modal_content .itemBody.check_role, .check_project {
	font-family: 'Outfit-Light', sans-serif;
	font-size: 1em;
	margin-bottom: 2px;
	color: #444;
	cursor: pointer;
	margin-bottom: 15px;
	background-color: var(--white_bg);
	border-radius: 10px;
	padding: 15px 15px;
	border: var(--border);
}

.modal.fade .post_modal_content .itemBody.check_role svg, .check_project svg {
	width: 15px;
	height: 15px;
	margin-right: 10px;
}

.modal.fade .post_modal_content .itemBody.check_role.active_role {
	background-color: var(--brand_color);
	color: var(--white_bg);
}


.appBody .form-box.location_ui .itemBody.check_role {
	margin-bottom: 15px;
}

.appBody .form-box.location_ui.itemBody.check_role h4 {
	font-family: 'Outfit-Medium', sans-serif;
	font-size: 1em;
	margin-bottom: 2px;
	color: #333;
}

.appBody .form-box.location_ui .itemBody.check_role {
	font-family: 'Outfit-Light', sans-serif;
	font-size: 1em;
	margin-bottom: 2px;
	color: #444;
	cursor: pointer;
	margin-bottom: 15px;
	background-color: var(--white_bg);
	border-radius: 10px;
	padding: 15px 15px;
	border: var(--border);
}

.appBody .form-box.location_ui .itemBody.check_role.active_role {
	background-color: var(--brand_color);
	color: var(--white_bg);
}

.modal.fade .post_modal_content  .inputWrapper {
    overflow: hidden;
    position: relative;
    cursor: pointer;
    background-color: transparent;
}
.modal.fade .post_modal_content .fileInput {
    cursor: pointer;
    height: 100%;
    position:absolute;
    top: 0;
    right: 0;
    /*This makes the button huge so that it can be clicked on*/
    font-size:60px;
	border: none;
}

.modal.fade .post_modal_content .replace-btn {
    font-family: 'Outfit-Light', sans-serif;
    font-size: .8em;
    font-weight: 400;
    color: rgb(59, 57, 199);
    text-decoration: none;
    cursor: pointer;
}


.appBody .items .form-box  .inputWrapper {
    overflow: hidden;
    position: relative;
    cursor: pointer;
    background-color: transparent;
}
.appBody .items .form-box .fileInput {
    cursor: pointer;
    height: 100%;
    position:absolute;
    top: 0;
    right: 0;
    /*This makes the button huge so that it can be clicked on*/
    font-size:60px;
	border: none;
}

.appBody .items .form-box .replace-btn {
    font-family: 'Outfit-Light', sans-serif;
    font-size: .8em;
    font-weight: 400;
    color: rgb(59, 57, 199);
    text-decoration: none;
    cursor: pointer;
}

/*******Today's Task starts here *******/
.today_task .items .itemBody {
	background-color: var(--white_bg);
	border-radius: 5px;
	padding: 20px 15px;
	border: var(--border);
	margin-bottom: 10px;
	/* box-shadow: 0px 0px 7px -1px rgba(0, 0, 0, .1); */
	/* box-shadow: 0px 0px 5px 0px rgba(0,0,0,.05); */
}
.copy_refLink {
	cursor: pointer;
	position:relative;
}

.appBody .today_task .items .itemBody .itemBoxHeading h1 {
	font-family: 'Outfit-Medium', sans-serif;
	font-size: .9em;
	margin-bottom: 0px;
}

.appBody .today_task .header .title h1 {
	font-family: 'Outfit-Bold', sans-serif;
	font-size: 1em;
}

.appBody .today_task {
	margin-top: 20px;
}

.appBody .today_task .items .itemBody .dateBox {
	margin-top: 0px;
}

.appBody .today_task .items .itemBody .team_list {
	margin-bottom: 5px;
}

.appBody .today_task .items .itemBody .itemBoxHeading {
	margin-bottom: 0px;
}

/*******Today's ends here *******/

/*******Tab style Starts here*******/
.appBody .tab_list {
	margin: 20px 0;
}

.appBody .tab_list .d-flex {
	width: 100%;
}

.appBody .tab_list .d-flex ul {
	width: 100%;
	border-bottom: var(--border-bottom);
	margin-bottom: 0;
	text-align: center;
}

.appBody .tab_list.quad_tab .d-flex ul li {
	width: 25%;
}

.appBody .tab_list.double_tab .d-flex ul li {
	width: 50%;
}
.appBody .tab_list.tri_tab .d-flex ul li {
	width: 33.3%;
}
.appBody .tab_list.four_tab .d-flex ul li {
	width: 25%;
}

.appBody .tab_list.four_tab .d-flex ul li a {
	padding:10px 5px !important;
}
.appBody .tab_list.double_tab  {
	margin-top: 0;
}
.appBody .tab_list.double_tab .d-flex .nav-mobile-role  {
	margin-bottom: 20px;
}

.appBody .tab_list.tri_tab  {
	margin-top: 0;
}
.appBody .tab_list.tri_tab .d-flex .nav-mobile-role  {
	margin-bottom: 20px;
}

.appBody .tab_list .d-flex ul li a {
	text-decoration: none;
	color: var(--inactive_link);
	font-family: 'Outfit-Light', sans-serif;
	font-size: .8em;
}

.appBody .tab_list .d-flex ul li a.active {
	color: var(--brand_color);
	font-family: 'Outfit-Bold', sans-serif;
}

.appBody .tab_list .d-flex ul li a.active span{
	padding-bottom: 9px;
	border-bottom: 2px solid var(--brand_color);
}

/*******Tab style Ends here*******/

/*******Loader and Alert *******/
.alert {
	display: block;
	box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.08), 0px 12px 16px rgba(0, 0, 0, 0.04);
}

.alert.alert-success {
	/* display: none; */
	background: var(--success);
	border: 1px solid var(--success);
}

.alert.alert-danger {
	/* display: none; */
	background: var(--danger);
	border: 1px solid var(--danger);
}

.alert p {
	margin-bottom: 0;
	font-family: 'Outfit-Light', sans-serif;
	font-size: 15px;
	color: var(--white_bg);
	/*text-transform: capitalize;*/
}

.alert-container {
	position: fixed;
	top: 50px;
	bottom: auto;
	left: 50%;
	transform: translate(-50%, 0%);
	z-index: 99999999999999999 !important;
}

.transaction-load{
    width:100%;
    height:60px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#666;
    font-size:12px;
}
.loader {
	width: 20px;
	height: 20px;
	border: 4px solid var(--white_bg);
	border-bottom-color: transparent;
	border-radius: 50%;
	display: inline-block;
	box-sizing: border-box;
	animation: rotation 1s linear infinite;
}

@keyframes rotation {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}

/******Loader ends here ********/

/********Wallet********/
.appBody .items .itemBody.balance_container {
	background: var(--white_bg);
	padding: 20px 20px;
	margin-top: 20px;
	margin-bottom: 30px;
	border: none;
	box-shadow: 0px 0px 5px 1px rgb(0 0 0 / 5%);
}

.appBody .items .itemBody.balance_container p {
	font-family: 'Outfit-Light', sans-serif;
	font-size: 15px;
	color: var(--inactive_link);
	margin-bottom: 10px;
}

.appBody .items .itemBody.balance_container h1 {
	font-family: 'Outfit-Bold', sans-serif;
	font-size: 2em;
	color: var(--black_bg);
}

.appBody .items .history {
	padding: 20px 0;
	margin-top: 0px;
}

.appBody .items .history.page {
	padding: 0px 5px;
	margin-top: 0px;
}

.appBody .items .history.page .top_nav {
	padding: 0;
	margin-bottom: 10px;
	border-bottom: none;
	background: transparent;
}

.appBody .items .history.page .top_nav .search_box {
	margin-top: 5px;

	margin-bottom: 15px;
}

.appBody .items .history .item_history {
	padding: 15px 15px;
	cursor: pointer;
	background-color: var(--white_bg);
	border-radius: 5px;
	border: var(--border);
	margin-bottom: 15px;
	/* box-shadow: 0px 0px 5px 1px rgb(0 0 0 / 5%); */
}

.appBody .items .history .item_history .img_box {
	width: 35px;
	height: 35px;
	border-radius: 50%;
	border: var(--border);
}

.appBody .items .history .item_history .img_box .img {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}

.appBody .items .history .item_history .textBox h2 {
	font-family: 'Outfit-Medium', sans-serif;
	font-size: .9em;
	color: var(--black_bg);
	margin-bottom: 0px;
}
.appBody .items .history .item_history .textBox span {
	font-family: 'Outfit-Light', sans-serif;
    font-size: 12px;
	color: var(--inactive_link);
	margin-bottom: 0px;
	line-height:5px;
}
.appBody .items .history .item_history .textBox h5 {
	font-family: 'Outfit-Bold', sans-serif;
	font-size: 1.1em;
	color: var(--black_bg);
	margin-bottom: 0px;
}

.appBody .items .history .item_history .textBox h3 {
	font-family: 'Outfit-Medium', sans-serif;
	font-size: .7em;
	margin-bottom: 0;
}

.appBody .items .history .item_history .textBox.send_out h3 {
	color: var(--danger);
}

.appBody .items .history .item_history .textBox.send_in h3 {
	color: var(--success);
}

.appBody .items .history .item_history .textBox p {
	font-family: 'Outfit-Light', sans-serif;
	font-size: 12px;
	color: var(--inactive_link);
	margin-bottom: 0;
}

.appBody .items .history .title {
	margin-bottom: 20px;
}

.appBody .items .history .title h2 {
	font-family: 'Outfit-Bold', sans-serif;
	font-size: 1em;
	color: var(--black_bg);
	margin-bottom: 0;
}

.appBody .items .history .title a {
	font-family: 'Outfit-Light', sans-serif;
	font-size: 13px;
	text-decoration: none;
	color: var(--inactive_link);
	cursor: pointer;
}

.appBody .items .history .title {
	margin-bottom: 10px;
}

.appBody .items .action_box {
	padding: 10px;
	cursor: pointer;
	border-radius: 10px;
	background-color: var(--white_bg);
	box-shadow: 0px 0px 5px 1px rgb(0 0 0 / 5%);
}

.appBody .items .action_box a{
	text-decoration: none;
}

.appBody .items .action_box p {
	font-family: 'Outfit-Light', sans-serif;
	font-size: 14px;
	color: var(--black_bg);
	margin-bottom: 0;
	margin-top: 5px;
}

.appBody .items .action_box span {
	font-family: 'Outfit-Light', sans-serif;
	font-size: 14px;
	color: var(--inactive_link);
	margin-bottom: 0;
}

.appBody .items .action_box h3 {
	font-family: 'Outfit-Bold', sans-serif;
	font-size: .9em;
	color: var(--black_bg);
	margin-bottom: 0;
}

/* .appBody .items .action_box.tr {
 background-color: #DFE0F2;
}
.appBody .items .action_box.rq {
  background-color: #FAF1FF;
 }
 .appBody .items .action_box.py {
  background-color: #F2F4FF;
 } */
.appBody .items .action_box.top_up {
	background-color: var(--white_bg);
	margin-bottom: 20px;
	padding: 15px 20px;
	box-shadow: 0px 0px 5px 1px rgb(0 0 0 / 5%);
}

.appBody .items .action_box.top_up .topup_btn {
	position: relative;
	width: 35px;
	height: 35px;
	background: var(--brand_color);
	border-radius: 50%;
	box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.08), 0px 12px 16px rgba(0, 0, 0, 0.04);
}
.cashout-btn{
    height: 35px;
	background: var(--brand_color);
	color:#fff !important;
	display:flex;
	align-items:center;
	font-family: 'Outfit-Light', sans-serif;
	font-size:13px;
}
.appBody .items .action_box.top_up .topup_btn svg {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 25px;
	height: 25px;
	color: var(--white_bg);
}

.transaction_details {
	position: fixed;
	bottom: -100%;
	left: 0;
	z-index: 999999;
	width: 100%;
	height: 70vh;
	background: var(--white_bg);
	transition: all .5s ease-in-out;
	border-top-right-radius: 20px;
	border-top-left-radius: 20px;
	padding: 20px;
	overflow: scroll;
}

.transaction_details.active {
	bottom: 0 !important;
}

.project_select {
	position: fixed;
	bottom: -100%;
	left: 0;
	z-index: 999999;
	width: 100%;
	height: 30vh;
	background: var(--white_bg);
	transition: all .5s ease-in-out;
	border-top-right-radius: 20px;
	border-top-left-radius: 20px;
	padding: 20px;
}

.project_select.active {
	bottom: 0 !important;
}

.project_select .heading h2 {
	font-family: 'Outfit-Bold', sans-serif;
	font-size: 1em;
	color: var(--black_bg);
}

.project_select .items_row .items_group a{
	font-family: 'Outfit-Light', sans-serif;
	font-size: .9em;
	border: 1px solid var(--brand_color);
	border-radius: var(--border_radius);
	color: var(--brand_color);
	margin-bottom: 15px;
	background: var(--white_bg);
	text-decoration: none;
}

.project_select .items_row .items_group.active a{
	background-color: var(--brand_color);
	color: var(--white_bg);
}

.project_select .items_row  {
	margin-top: 25px;
}

.overlay_bg {
	position: fixed;
	bottom: 0;
	left: 0;
	z-index: 99999;
	width: 100%;
	height: 100vh;
	background: rgba(0, 0, 0, .08);
	display: none;
}

.transaction_details .active_btn {
	position: relative;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	margin: 0 auto;
}

.transaction_details .active_btn svg {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 25px;
	height: 25px;
}

.transaction_details .active_btn.success svg {
	color: var(--success);
}

.transaction_details .active_btn.danger svg {
	color: var(--danger);
}

.transaction_details .active_btn.success {
	background: rgba(131, 207, 54, .2);
}

.transaction_details .active_btn.danger {
	background: rgba(167, 24, 24, .2)
}

.transaction_details .top_val {
	text-align: center;
	margin-bottom: 20px;
}

.transaction_details .top_val .amount_val h2 {
	font-family: 'Outfit-Bold', sans-serif;
	font-size: 1.5em;
	color: var(--black_bg);
	margin-bottom: 0;
	margin-top: 10px;
}

.transaction_details .details .item {
	padding: 20px 0;
	border-bottom: var(--border-bottom);
}

.transaction_details .details .item .textBox.header p {
	font-family: 'Outfit-Light', sans-serif;
	font-size: 13px;
	color: var(--inactive_link);
	margin-bottom: 0;
}

.transaction_details .details .item .textBox.body p {
	font-family: 'Outfit-Light', sans-serif;
	font-size: 13px;
	color: var(--black_bg);
	margin-bottom: 0;
}

.item_btn.hidden {
	display: none;
}
.hidden{
	display: none !important;
}
.payment-options{
    border:none;
}
.topup_details {
	position: fixed;
	bottom: -100%;
	left: 0;
	z-index: 999999;
	width: 100%;
	height: 70vh;
	max-height: 70vh;
	background: var(--white_bg);
	transition: all .5s ease-in-out;
	border-top-right-radius: 20px;
	border-top-left-radius: 20px;
	padding: 20px;
	padding-bottom: 60px;
	overflow-y: scroll;
	overflow-x: hidden;
}

.topup_details.active {
	bottom: 0 !important;
}


.topup_details .active_btn {
	position: relative;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	margin: 0 auto;
}

.topup_details .active_btn svg {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 25px;
	height: 25px;
}

.topup_details .active_btn.success svg {
	color: var(--success);
}

.topup_details .active_btn.danger svg {
	color: var(--danger);
}

.topup_details .active_btn.success {
	background: rgba(131, 207, 54, .2);
}

.topup_details .active_btn.danger {
	background: rgba(167, 24, 24, .2)
}

.topup_details .top_val {
	text-align: center;
	margin-bottom: 20px;
}

.topup_details .top_val .amount_val h2 {
	font-family: 'Outfit-Bold', sans-serif;
	font-size: 1.5em;
	color: var(--black_bg);
	margin-bottom: 0;
	margin-top: 10px;
}

.topup_details .details .item {
	padding: 20px 0;
	border-bottom: var(--border-bottom);
}

.topup_details .details .item .textBox.header p {
	font-family: 'Outfit-Light', sans-serif;
	font-size: 13px;
	color: var(--inactive_link);
	margin-bottom: 0;
}

.topup_details .details .item .textBox.body p {
	font-family: 'Outfit-Light', sans-serif;
	font-size: 13px;
	color: var(--black_bg);
	margin-bottom: 0;
}

.topup_details .details .item button.topup_trigger {
	font-family: 'Outfit-Light', sans-serif;
	font-size: 13px;
	color: var(--white_bg);
	background-color: var(--black_bg);
}


.payment_details {
	position: fixed;
	bottom: -100%;
	left: 0;
	z-index: 999999;
	width: 100%;
	height: 70vh;
	max-width: 70vh;
	background: var(--white_bg);
	transition: all .5s ease-in-out;
	border-top-right-radius: 20px;
	border-top-left-radius: 20px;
	padding: 20px;
	padding-bottom: 60px;
	overflow-y: scroll;
	overflow-x: hidden;
}

.payment_details.active {
	bottom: 0 !important;
}


.payment_details .active_btn {
	position: relative;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	margin: 0 auto;
}

.payment_details .active_btn svg {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 25px;
	height: 25px;
}

.payment_details .active_btn.success svg {
	color: var(--success);
}

.payment_details .active_btn.danger svg {
	color: var(--danger);
}

.payment_details .active_btn.success {
	background: rgba(131, 207, 54, .2);
}

.payment_details .active_btn.danger {
	background: rgba(167, 24, 24, .2)
}

.payment_details .top_val {
	text-align: center;
	margin-bottom: 20px;
}

.payment_details .top_val .amount_val h2 {
	font-family: 'Outfit-Bold', sans-serif;
	font-size: 1.5em;
	color: var(--black_bg);
	margin-bottom: 0;
	margin-top: 10px;
}

.payment_details .details .item {
	padding: 20px 0;
	border-bottom: var(--border-bottom);
}

.payment_details .details .item .textBox.header p {
	font-family: 'Outfit-Light', sans-serif;
	font-size: 13px;
	color: var(--inactive_link);
	margin-bottom: 0;
}

.payment_details .details .item .textBox.body p {
	font-family: 'Outfit-Light', sans-serif;
	font-size: 13px;
	color: var(--black_bg);
	margin-bottom: 0;
}
.payment_details .details .item button.pay_trigger {
	font-family: 'Outfit-Light', sans-serif;
	font-size: 13px;
	color: var(--white_bg);
	background-color: var(--black_bg);
}

.payout_details {
	position: fixed;
	bottom: -100%;
	left: 0;
	z-index: 999999;
	width: 100%;
	height: 70vh;
	max-width: 70vh;
	background: var(--white_bg);
	transition: all .5s ease-in-out;
	border-top-right-radius: 20px;
	border-top-left-radius: 20px;
	padding: 20px;
	padding-bottom: 60px;
	overflow-y: scroll;
	overflow-x: hidden;
}

.payout_details.active {
	bottom: 0 !important;
}


.payout_details .active_btn {
	position: relative;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	margin: 0 auto;
}

.payout_details .active_btn svg {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 25px;
	height: 25px;
}

.payout_details .active_btn.success svg {
	color: var(--success);
}

.payout_details .active_btn.danger svg {
	color: var(--danger);
}

.payout_details .active_btn.success {
	background: rgba(131, 207, 54, .2);
}

.payout_details .active_btn.danger {
	background: rgba(167, 24, 24, .2)
}

.payout_details .top_val {
	text-align: center;
	margin-bottom: 20px;
}

.payout_details .top_val .amount_val h2 {
	font-family: 'Outfit-Bold', sans-serif;
	font-size: 1.5em;
	color: var(--black_bg);
	margin-bottom: 0;
	margin-top: 10px;
}

.payout_details .details .item {
	padding: 20px 0;
	border-bottom: var(--border-bottom);
}

.payout_details .details .item .textBox.header p {
	font-family: 'Outfit-Light', sans-serif;
	font-size: 13px;
	color: var(--inactive_link);
	margin-bottom: 0;
}

.payout_details .details .item .textBox.body p {
	font-family: 'Outfit-Light', sans-serif;
	font-size: 13px;
	color: var(--black_bg);
	margin-bottom: 0;
}
.payout_details .details .item button.pay_trigger {
	font-family: 'Outfit-Light', sans-serif;
	font-size: 13px;
	color: var(--white_bg);
	background-color: var(--black_bg);
}

/*****Wallet****/

/*******Chat********/
.chat_box {
	width: 100%;
	height: auto;
	position: fixed;
	bottom: 0;
	left: 0;
	z-index: 9999999;
	padding: 10px 20px;
	background: var(--white_bg);
}

.chat_box .input {
	border-top-left-radius: 20px;
	border-bottom-left-radius: 20px;
	padding: 0 20px;
	font-family: 'Outfit-Light', sans-serif;
	font-size: 16px;
	color: var(--black_bg);
}

.chat_box .input::placeholder {
	font-size: 14px;
	color: var(--inactive_link);
}

.chat_box .input-group-text {
	border-top-right-radius: 20px;
	border-bottom-right-radius: 20px;
	background: var(--white_bg);
}

.chat_box .select_team .p {
	margin-right: 10px;
	margin-top: 5px;
}

.chat_box .select_team .p p {
	font-family: 'Outfit-Light', sans-serif;
	font-size: 14px;
	color: var(--inactive_link);
}

.chat_box .select_team .select_user {
	font-family: 'Outfit-Light', sans-serif;
	font-size: 14px;
	background: #f9f9fc;
	border: var(--border);
	border-radius: var(--border_radius);
	padding: 5px 10px;
}

.chat_box .select_team .select_user option {
	font-family: 'Outfit-Light', sans-serif;
	font-size: 14px;
	border: var(--border);
	border-radius: 5px;
}

.appBody .items .itemBody .show_alert {
	position: relative;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	display: inline-block;
	margin-top: 10px;
}

.appBody .items .itemBody .show_alert.success {
	background: var(--success);
}

.appBody .items .itemBody .show_alert.danger {
	background: var(--danger);
}

.appBody .items .itemBody .show_alert.inprogress {
	background: var(--warning);
}

.appBody .items .chat_date_header {
	background-color: var(--white_bg);
	padding: 5px 10px;
	/* border: var(--border); */
	box-shadow: 0px 0px 5px 1px rgb(0 0 0 / 5%);
	/* box-shadow: 0px 0px 8px rgba(0,0,0,0.03),0px 0px 8px rgba(0,0,0,0.03); */
	font-family: 'Outfit-Light', sans-serif;
	font-size: 14px;
	border-radius: 5px;
}

.appBody .items .chat_body .msg_source span {
	font-family: 'Outfit-Light', sans-serif;
	font-size: 14px;
	color: var(--inactive_link);
}

.appBody .items .chat_body .msg_source span.u_name {
	color: var(--blue);
}

.appBody .items .chat_body .img_box {
	width: 35px;
	height: 35px;
	border-radius: 50%;
}

.appBody .items .chat_body .chat_item .img_box .img {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}

.appBody .items .chat_body .chat_item {
	margin-top: 0px;
	margin-bottom: 10px;
}

.appBody .items .chat_body {
	border-bottom: var(--border-bottom);
	margin-bottom: 0px;
	padding: 15px 0;
}

.appBody.single_chat .items .chat_body {
	border-bottom: none;
}

.appBody .items .chat_body .chat_item .itemBoxHeading {
	background-color: var(--white_bg);
	padding: 10px;
	border-radius: 5px;
	box-shadow: 0px 0px 5px 1px rgb(0 0 0 / 5%);
}

.appBody .items .chat_body .chat_item .itemBoxHeading .chat_data p {
	font-family: 'Outfit-Light', sans-serif;
	font-size: 14px;
	color: var(--black_bg);
	margin-bottom: 0;
}

.appBody .items .chat_body .chat_item .itemBoxHeading .chat_time span {
	font-family: 'Outfit-Light', sans-serif;
	font-size: 10px;
	color: var(--inactive_link);
}

/*******Chat ends here *******/

/******Profile********/
.appBody .profile_header {
	margin-top: 10px;
}

.appBody .profile_header .img_box {
	width: 100px;
	height: 100px;
	border-radius: 50%;
	border: 3px solid rgba(19, 119, 226,.1);
	margin: 0 auto;
	margin-bottom: 5px;
}

.appBody .profile_header .img_box .img {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}

.appBody .profile_header .img_box .img img{
	width: 100%;
	height: 100%;
	border-radius: 50%;
	object-fit: cover;
}

.appBody .profile_header h1 {
	font-family: 'Outfit-Bold', sans-serif;
	font-size: 1.3em;
	margin-bottom: 0;
	color: var(--black_bg);
}

.appBody .profile_header p {
	font-family: 'Outfit-Light', sans-serif;
	font-size: .7em;
	margin-bottom: 0;
	color: var(--inactive_link);
}

.appBody .profile_body {
	margin-top: 20px;
	padding: 0 0px;
}

.appBody .profile_body .item {
	padding: 15px 15px;
	cursor: pointer;
	background-color: var(--white_bg);
	margin-bottom: 15px;
	border-radius: var(--border_radius);
}

.appBody .profile_body .item a{
	text-decoration: none;
	color: var(--black_bg);
}

.appBody .profile_body .item p {
	font-family: 'Outfit-Light', sans-serif;
	font-size: .9em;
	margin-bottom: 0;
	color: var(--black_bg);
	margin-top: 5px;
}

.appBody .profile_body .item .chev-right svg {
	width: 15px;
	height: 15px;
	color: var(--inactive_link);
}

/**********404*********/
._hero_bg {
	background-color: #f9f9fc;
	width: 100%;
	height: 100vh;
	position: relative;
}

._hero_bg .inner_box {
	background: #fff;
	box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, .1);
	width: 80%;
	height: 80vh;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	border-radius: 5px;
}

._hero_bg .inner_box .box_inner {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
}

._hero_bg .inner_box .box_inner h1 {
	font-size: 10em;
	color: #000;
	font-family: 'Bebas Neue', cursive;
	margin-bottom: 0;
	line-height: 1;
}

._hero_bg .inner_box .box_inner .top_p {
	margin-bottom: 0;
	color: #aeaeae;
	font-family: 'Outfit-Light', sans-serif;
	text-transform: uppercase;
	font-size: 12px;
	font-weight: 500;
}

._hero_bg .inner_box .box_inner .bottom_p {
	margin-bottom: 0;
	color: #232323;
	font-family: 'Outfit-Medium', sans-serif;
	text-transform: uppercase;
	font-size: 11px;
	font-weight: 600;
}

._hero_bg .inner_box .box_inner .home_btn {
	text-decoration: none;
	color: #000;
	font-family: 'Outfit-Bold', sans-serif;
	text-transform: uppercase;
	font-size: 11px;
	font-weight: 600;
	border: 2px solid #000;
	margin-top: 20px;
	padding: 8px 50px;
	border-radius: 20px;
	transition: .5s ease-in-out;
	background: #fff;
}

._hero_bg .inner_box .box_inner .home_btn:hover {
	color: #fff;
	background: #000;
}

/***extras***/
.user-total-box{
    background: rgba(19, 119, 226,.1);
    padding:15px;
    border-radius:10px;
    margin-bottom:20px;
    border: 1px solid rgba(0,0,0,.125);
}
.suspension_notice{
    color:red;
}
.user-total-box p{
margin-bottom: 0;
color: var(--black_bg);
font-size: 13px;
}
.user-total-box h1{
font-family: 'Outfit-Bold', sans-serif;
color: var(--black_bg);
margin-bottom: 0;
font-size: 2em;
}
.appBody .invoice_list .icon_data_box {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  background: rgba(19, 119, 226,.1);
  position: relative;
}
.appBody .invoice_list .icon_data_box svg {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 15px;
  height: 15px;
  color: var(--brand_color);
}
.transaction_history-container{
    position:relative;
}
.view_project_team{
    max-height:400px;
    overflow-y:auto;
}
.project-copy-name{
    font-size:12px !important;
    font-family: 'Outfit-Light', sans-serif;
}
.bank-name-list,.inventory-name-list,.collect-inventory{
    font-size:12px;
    padding-bottom:5px;
    border-bottom:1px solid #fafafa;
    font-family: 'Outfit-Light', sans-serif;
    cursor:pointer;
}
.transaction_history-card{
    position:absolute;
    height:100%;
    width:100%;
    z-index:1;
    top:0;
    cursor:pointer;
    background-color:rgba(0,0,0,0)
}
.remarks-fill{
    font-size:11px;
    border:none;
    padding-left:2px;
}
.get_single_user{
	position: relative;
}
.team_member{
	position:absolute;
	width:100%;
	height: 100%;
	z-index:3;
	top:0;
}

.tasks-input .form-check,.projects-input .form-check{
	height:40px;
	border:1px solid #fafafa;
	border-radius: 5px;
	display:flex;
	align-items: center;
	margin-bottom: 10px;
	padding-left:30px;
	font-family: 'Outfit-Medium', sans-serif;
	font-size: 12px;
}
.tasks-input .form-check label,
.projects-input .form-check label{
	margin-top:3px;
	text-transform: capitalize !important;
}
.appBody .items .form-box .itemBody.check_permission:hover {
	background-color: var(--brand_color);
	color: var(--white_bg);
  }
  
.appBody .items .accordion .card,.modal .accordion .card {
	margin-bottom: 15px;
	background-color: var(--white_bg);
	border-radius: var(--border_radius);
	/* box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.05); */
}

.accordion > .card:not(:last-of-type) {
	border-bottom: 1px solid rgba(0,0,0,.125);
  }


.appBody .items .accordion .card .card-body,.modal .accordion .card .card-body {
	padding: 1.25rem .9rem;
}

.appBody .items .accordion .card .icon_data_box,.modal .accordion .card .icon_data_box {
	width: 35px;
	height: 35px;
	border-radius: 50%;
	background: rgba(19, 119, 226,.1);
	position: relative;
}

.appBody .items .accordion .card .icon_main_box,.modal .accordion .card .icon_main_box  {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: rgba(19, 119, 226,.1);
	position: relative;
	margin-right: 20px;
}

.appBody .items .accordion .card .icon_main_box svg,
.modal .accordion .card .icon_main_box svg {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 15px;
	height: 15px;
	color: var(--brand_color);
}
.short_note-fill{
	color:#000 !important;
	font-size:0.9em !important;
}
.placeholder-xs-bar{
    height:20px;
    width:70px;
    background-color:#fafafa;
    margin-top:10px;
}

.placeholder-sm-bar{
    height:30px;
    width:140px;
    background-color:#fafafa;
}
.placeholder-verticon{
    height:10px;
    width:30px;
    background-color:#fafafa;
    display:block;
}
.placeholder .item_icon i{
    color: var(--placeholder_color);
}
.placeholder .no-team{
    height:40px;
    width:40px;
    border-radius:50%;
    background-color:#fafafa;
}
.empty-returns{
    min-height:20px;
    padding:5px;
    width:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    color:rgba(19, 119, 226,.8);
    background:rgba(19, 119, 226,.1);
    font-size:13px;
    border-radius:5px;
}
.empty-returns p{
    margin:0;
}
.chat-sender{
    position:relative;
}
.chat-sender .process-form{
    position:absolute;
    display:block;
    width:100%;
    height:100%;
    opacity:0;
    z-index:5;
}
.chat-loader-wrap{
    max-height:40px;
    width:100%;
    display:flex;
    justify-content:center;
    align-items:center;
}
.chat-loader-wrap button{
    background-color:#fff;
    color:#000;
    font-family: 'Outfit-Light', sans-serif;
}
.required{
    border:1px solid red !important;
}
.approval-status-box,.remove_user_trigger{
    height:22px !important;
    width:22px !important;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    border-radius: 50%;
    opacity:1;
}
.approval-status-box i,.remove_user_trigger i{
    font-size:12px;
    font-weight:bold !important;
    box-shadow:1px 1px 2px rgba(0,0,0,0.1);
    display:block;
    border-radius:50%;
    color:#fff !important;
}
.approval-warning{
    font-size:12px;
    color:red;
}
.declined_bg,.remove_user_trigger{
    background-color:var(--danger);
}
.approved_bg{
    border:1px solid var(--success) !important;
}
.approved_bg i{
    color:var(--success) !important;
    box-shadow:none;
}
.paid_bg{
    background-color:var(--success) !important;
}
.pending_bg{
    background-color:gold !important;
}
.payment-filter,.trasaction-filter{
    font-size:13px;
}
.float_action-content{
    position:relative;
    height:100%;
    width:100%;
}
.chat-notif{
    height:7px;
    width:7px;
    background-color:red;
    border-radius:50%;
    position:absolute;
    top:7px;
    left:23px;
    z-index:3333333;
}
.linked-project{
    position:absolute;
    font-size:15px !important;
    color:#ccc  !important;
    left:28px;
    top:13px;
}
.back-office-btn{
    border:none !important;
}
.payment-filter,.trasaction-filter{
    border-radius:10px;
}
.view_tasks_qc .item_history {
  padding: 15px 15px;
  cursor: pointer;
  background-color: var(--white_bg);
  border-radius: 5px;
  border: var(--border);
  margin-bottom: 15px;
  box-shadow: 0px 0px 5px 1px rgb(0 0 0 / 5%);
}
.view_tasks_qc .itemBody {
  background-color: var(--white_bg);
  border-radius: 10px;
  padding: 15px 15px;
  border: var(--border);
  margin-bottom: 15px;
}
.view_tasks_qc  .item_history .icon_data_box {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  background: rgba(19, 119, 226,.1);
  position: relative;
}
.view_tasks_qc .item_history .icon_data_box {
	width: 35px;
	height: 35px;
	border-radius: 50%;
	background: rgba(19, 119, 226,.1);
	position: relative;
}

.view_tasks_qc .item_history .icon_data_box svg {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 15px;
	height: 15px;
	color: var(--brand_color);
}
.view_tasks_qc .item_history .textBox h2 {
  font-family: 'Outfit-Medium', sans-serif;
  font-size: .9em;
  color: var(--black_bg);
  margin-bottom: 0px;
}
.view_tasks_qc .item_history .textBox p {
  font-family: 'Outfit-Light', sans-serif;
  font-size: 12px;
  color: var(--inactive_link);
  margin-bottom: 0;
}
.view_tasks_qc .itemBody .dropdown .dropIcon {
  text-decoration: none;
  color: var(--black_bg);
}
.view_tasks_qc  .dropdown .dropIcon svg {
  color: var(--black_bg);
}
.view_tasks_qc  .dropdown .dropdown-menu {
  min-width: 8rem;
  border: var(--border);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  z-index: 9999999;
}
.view_tasks_qc .dropdown .dropdown-menu .dropdown-item {
  font-family: 'Outfit-Light', sans-serif;
  font-size: .7em;
  color: var(--black_bg);
  cursor: pointer;
}
.copy_link{
    height:100%;
    width:100%;
    position:absolute;
    top:0;
    z-index:3;
}
.modal-note{
    color:#b1b1b1;
}
.modal-note i {
    color:#b1b1b1;
}
.project-subtitle{
    font-family: 'Outfit-Light', sans-serif;
    font-size:10px;
    color: var(--inactive_link);
    display:block;
    text-transform:uppercase;
    margin-top: -3px;
      height: 15px;
      padding: 2px;
}
.project-subtitle.active{
    font-family: 'Outfit-Light', sans-serif;
    font-size:10px;
    color: #fff;
    text-transform:uppercase;
    background:var(--brand_color);
    margin-top: 3px;
      height: 15px;
      border: 1px solid var(--brand_color);
      padding: 2px;
      border-radius: 5px;
}
.logo-container{
    width:100%;
    height:50px;
    display:flex;
    align-items:center;
    justify-content:center;
}
.logo-wrap{
    width:40px;
    height:40px;
}
.logo-wrap img{
    height:100%;
    width:100%;
    object-fit:cover;
}
.create-workpackage{
    position:relative;
}
.create-workpackage button{
    position:absolute;
    width:100%;
    height:30px;
    opacity:0;
    left:0;
    z-index:10;
}
.modal-content{
    max-height:86vh !important;
}
.modal-body{
    height:75%;
    overflow:hidden;
    overflow-y:auto;
}
.appBody .items .accordion .card, .modal .accordion .card{
    overflow:visible;
}
.permissions-note{
    font-size:11px;
    color:#666;
}
.make-payment-btn {
  font-family: 'Outfit-Medium', sans-serif;
  font-size: 15px;
  color: var(--white_bg);
  border-radius: var(--border_radius);
  background: var(--brand_color);
  border: var(--brand_color);
}



/****end extras**/
@media screen and (max-width:950px) {
	._hero_bg .inner_box {
		width: 90%;
		height: 90vh;
	}

	._hero_bg .inner_box .box_inner .bottom_p {
		font-size: 10px;
	}
}


/******Recent Styles********/
/********Landing & Onboarding UI starts here ******/
.landing_container {
	width: 100%;
	height: 100vh;
	position: relative;
	background-color: var(--white_bg);
}

.landing_container .app_logo_display  {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	height: auto;
	padding: 30px;
	text-align: center;
}

.landing_container .app_logo_display span{
	font-family: 'Outfit-Light', sans-serif;
	font-size: .9em;
	margin-bottom: 0px;
	color: var(--inactive_link);
	margin: 0 10px;
	display: none;
}


.landing_container .landing_footer  {
	position: absolute;
	bottom: 20px;
	left: 0;
	width: 100%;
	height: auto;
	padding: 0px;
	text-align: center;
}

.landing_container .landing_footer  p{
	font-family: 'Outfit-Light', sans-serif;
	font-size: .8em;
	margin-bottom: 0px;
	color: var(--inactive_link);
}
.landing_container .landing_footer  h1{
	font-family: 'Outfit-Bold', sans-serif;
	font-size: 1.1em;
	margin-bottom: 0px;
	color: var(--brand_color);
}
.onboarding_container {
	width: 100%;
	height: 100vh;
	position: relative;
	background-color: #00CBFA;
	padding-top: 30px;
}
.onboarding_container .app_logo_display {
	text-align: center;
	margin-bottom: 10px;
}
.onboarding_container .boarding_carousel {
	/* width: 100%; */
	/* height: 50vh; */
}
.onboarding_container .boarding_carousel .carousel-item {
	width: 100%;
	height: 50vh;
}
.onboarding_container .boarding_carousel .carousel-item img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.onboarding_container .carousel-inner {
	padding-bottom: 150px;
}
.onboarding_container .boarding_text.carousel-caption {
	bottom: -150px;
	text-align: left;
	left: 5%;
	right: 5%;
}

.onboarding_container .boarding_text.carousel-caption h5{
	font-family: 'Outfit-Bold', sans-serif;
	font-size: 1.5em;
	margin-bottom: 15px;
	color: var(--white_bg);
}

.onboarding_container .boarding_text.carousel-caption p{
	font-family: 'Outfit-Light', sans-serif;
	font-size: .9em;
	margin-bottom: 0px;
	color: var(--white_bg);
}

.onboarding_container .boarding_carousel .carousel-indicators {
bottom: -50px;
justify-content: left;
margin-left: 5%;
margin-right: 5%;
z-index: 9999999;

}
.onboarding_container .boarding_carousel .carousel-indicators  li{
	background-color: var(--white_bg);
	width: 5px;
	height: 5px;
	border-radius: 50%;
}
.onboarding_container .boarding_carousel .carousel-indicators  li.active{
	background-color: var(--white_bg);
	width: 40px;
	height: 5px;
	margin-top: 10px;
	border-radius: 5px;
	border-top: none;
	border-bottom: none;
}

.onboarding_container .boarding_btn {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: auto;
	padding: 30px;
	border-top-left-radius: 30px;
	border-top-right-radius: 30px;
	background: var(--white_bg);
}

.onboarding_container .boarding_btn a{
	font-family: 'Outfit-Bold', sans-serif;
	font-size: 1em;
	color: var(--brand_color);
	text-decoration: none;
	border: none;
	text-align: center;
}
/********Landing & Onboarding UI ends here ******/


.appBody .items .accordion .card .card-body .add_action a.dropdown-item {
	font-family: 'Outfit-Light', sans-serif;
	font-size: .7em;
	color: var(--black_bg);
	cursor: pointer;
	border-bottom: none;
	text-decoration: none;
}

.appBody  .accordion .add_action.dropdown .dropdown-menu {
	min-width: 8rem;
	border: var(--border);
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
	z-index: 9999999;
  }
  .overlay_Bg {
	position: fixed;
	bottom: 0;
	left: 0;
	z-index: 9999999999;
	width: 100%;
	height: 100vh;
	background: rgba(0, 0, 0, .2);
	display: none;
}
  .prompt_ui {
	position: fixed;
	top: -200%;
	left: 50%;
   transform: translate(-50%, 200%);
	z-index: 9999999999;
	width: 95%;
	height: auto;
	background: var(--white_bg);
	transition: all .5s ease-in-out;
	border-radius: 15px;
	padding: 30px;
   text-align: center;
}
.prompt_ui.active {
	top: 50% !important;
	transform: translate(-50%, -50%) !important;
}
.prompt_ui .img_box {
    margin:0 auto;
	margin-bottom: 30px;
	height:80px;
	width:80px;
	overflow:hidden;
	border-radius:50%;
}
.prompt_ui .img_box img{
	height:100%;
	width:100%;
	object-fit:cover;
}

.prompt_ui .text_box h2{
	font-family: 'Outfit-Bold', sans-serif;
	font-size: 1.3em;
	color: var(--black_bg);
}
.prompt_ui .text_box p{
	font-family: 'Outfit-Light', sans-serif;
	font-size: .8em;
	color: var(--inactive_link);
	margin-bottom: 30px;
}

.prompt_ui .text_box .progress {
	height: .4rem;
	border-radius: .45rem;
	margin-bottom: 30px;
  }
  .prompt_ui .text_box .progress .progress-bar {
	border-radius: .45rem;
	font-family: 'Outfit-Light', sans-serif;
	font-size: 10px;
	background-color: var(--brand_color);
  }

  .prompt_ui .text_box .action_btn  {
	margin: 15px 0;
  }

  .prompt_ui .text_box .action_btn a {
	font-family: 'Outfit-Light', sans-serif;
	font-size: .95em;
	color: var(--white_bg);
	background-color: var(--brand_color);
	padding: 10px 50px;
	border-radius: 25px;
	cursor: pointer;
  }
  .prompt_ui .text_box .inactive_btn span {
	font-family: 'Outfit-Light', sans-serif;
	font-size: .9em;
	color: var(--brand_color);
	cursor: pointer;
  }

.appBody.signinForm .items {
	position: relative !important;
	width: 100%;
	height: 100vh;
}

.appBody.signinForm {
	margin-bottom: 0;
	padding: 0 15px;
	background: linear-gradient(to top, rgba(255, 255, 255, .5) 50%, rgba(255,255,255,.5) 50%), url('../img/bg_1.jpg');
	background-size: cover;
	background-repeat: repeat;
	background-position: bottom;
}

.appBody.signinForm .items .app_logo_display {
	text-align: center;
}

.appBody .items .form-box.signin_form {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	height: auto;
}

.appBody.signinForm .tab_list.double_tab .d-flex .nav-mobile-role  {
	margin-bottom: 0px;
}

.appBody .items .form-box a.btn{
	font-family: 'Outfit-Medium', sans-serif;
	font-size: 15px;
	color: var(--white_bg);
	border-radius: var(--border_radius);
	background: var(--brand_color);
	border: var(--brand_color);
	text-decoration: none;
  }

  .appBody .items .accordion .card .card-body .select_filter {
	font-family: 'Outfit-Light', sans-serif;
	font-size: 14px;
	background: #fff;
	border: var(--border);
	border-radius: var(--border_radius);
	padding: 10px 10px;
}

.appBody .items .accordion .card .card-body .select_filter option {
	font-family: 'Outfit-Light', sans-serif;
	font-size: 14px;
	border: var(--border);
	border-radius: 5px;
}
.onboarding_container {
	width: 100%;
	height: 100vh;
	position: relative;
	padding-top: 30px;
	background: linear-gradient(to left, rgba(23, 71, 214, .9), rgba(23, 71, 214,.9)), url('../img/bg_2.jpg');
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}

.onboarding_container .boarding_btn a{
	font-family: 'Outfit-Medium', sans-serif;
	font-size: 1em;
	color: var(--white_bg);
	text-decoration: none;
	border: none;
	text-align: center;
	border-radius: 10px;
	background-color: var(--brand_color);
}

.onboarding_container .boarding_btn {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	height: auto;
	padding: 30px;
	border-top-left-radius: 30px;
	border-top-right-radius: 30px;
	background: var(--white_bg);
}
.view-transaction{
    font-size:12px;
    text-decoration:underline;
    position:absolute;
    right:15px;
    bottom:0px;
    color: var(--inactive_link);
}
.view-transaction svg{
    width: 17px;
	height: 17px;
}
.text-sm{
	font-size:10px !important;
}
.printer-span svg{
    width: 14px;
	height: 14px;
	margin-right:3px;
}
.statement-container thead{
    font-size:14px;
}
.statement-container tbody{
    font-size:12px;
}
.printer-span{
    font-size:13px;
    float:right;
    /*text-decoration:underline;*/
    margin-bottom:10px 0;
}
.transaction-date-form input, .attendance-date-form input{
    height:34px;
    border-radius:10px;
    font-size:13px;
}
.transaction-date-form,.attendance-date-form {
    font-size:13px;
}
.print-btn-row{
    height:20px;
    width:100%;
}
.form_overlay{
    top:0 !important;
    height:100vh;
    width:100vw;
    background:rgba(255,255,255,0.6);
    position:fixed;
    z-index:99999999999999;
}
.payment-option-wrap{
    width:45%;
    height:161px;
    border-radius:5px;
    border:1px solid #fafafa;
    box-shadow:2px 2px 4px rgba(0,0,0,0.4);
}
.payment-option-wrap button{
    width:100%;
}
.payment-option-logo{
    height:120px;
    width:100%;
}
.payment-option-logo img{
    height:100%;
    width:100%;
    object-fit:contain;
}
.payment-options{
    display:flex;
    justify-content: center;
	align-items: center;
}

/** start country code styles **/
 .flag-select-button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: calc(2.3rem + 0px);
    padding: 0.375rem 0.75rem;
    border: 1px solid #ddd;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    cursor: pointer;
    background-color: #fff !important;
    border-right: none;
  }
  
  .flag-dropdown_img {
    width: 20px;
    height: 20px;
    object-fit: cover;
    border-radius: 50%;
    margin-right: 10px;
  }
  
  .flag-dropdown {
    list-style: none;
    padding: 0;
    background-color: #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    display: none;
    width: 100%;
    height: 50vh;
    overflow-x: hidden;
    overflow-y: scroll;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: rgba(0,0,0,.1) #f2f2f2;
    border-radius: 10px;
  }
  
  .flag-dropdown::-webkit-scrollbar {
      width: 6px;
      background-color: #f2f2f2;
      } 
      .dropdown::-webkit-scrollbar-thumb {
      background-color: rgba(0, 0, 0,.1);
      border-radius: 50px;
      }
.flag-dropdown::-webkit-scrollbar-track {
      -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1);
      background-color: #f2f2f2;
      border-radius: 50px;
      }
  
  .flag-dropdown.active {
    display: block;
  }
  
    ul {
      padding: 0;
      margin: 0;
    }
  
  .flag-dropdown li {
    padding: 10px 20px;
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    color: #333;
    font-family: 'Outfit-Light', sans-serif;
    font-size: 12px;
  }
  .flag-input_box {
    color: #333;
    font-family: 'Outfit-Light', sans-serif;
    font-size: 12px;
  }
  .flag-input_box::placeholder {
    color: #888;
  }
  .flag-dropdown li:hover {
    background-color: #f5f5f5;
  }
  
  .country-code {
    margin-left: 10px;
  }
  
  .flag-search-wrapper {
    margin-top: 10px;
  }
  
  .flag-image {
    width: 20px;
    height: 20px;
    object-fit: cover;
    border-radius: 50%;
    margin-right: 10px;
  }
  
  .flag-btn_text {
    color: #333;
    font-family: 'Outfit-Light', sans-serif;
    font-size: 12px;
  }
 .summary-transaction-status{
width:max-content;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:2px;
    border-radius:5px;
    text-align:center;
    margin-right:2px;
    font-size:10px !important;
     font-family: 'Outfit-Light', sans-serif !important;
     line-height: 10px !important;
     height:15px;
     padding-top:0px;
}
.summary-transaction-status.success,.summary-transaction-status.reversed{
   /* border:1px solid var(--success);
    color:var(--success) !important;
    border: 1px solid var(--success);*/
  color: #fff !important;
  background-color: var(--success) !important;
}
.summary-transaction-status.failed{
   /* border:1px solid var(--danger);
    color:var(--danger);
    border: 1px solid var(--success);*/
  color: #fff !important;
  background-color: var(--danger) !important;
}
.summary-transaction-status.pending,.summary-transaction-status.ongoing,.summary-transaction-status.processing{
   /* border:1px solid var(--warning);
    color:var(--warning);
    border: 1px solid var(--success);*/
  color: #fff !important;
  background-color: var(--warning) !important;
}
/** end country code styles **/

/**payment method**/
.top_nav .notificationItem {
	position: relative;
  }
  
  .top_nav .notificationItem .item {
	text-decoration: none;
	color: var(--black_bg);
	position: absolute;
	right: 0;
  }
  
  .top_nav .notificationItem .alert_action {
	position: absolute;
	right: 0px;
	top: 0px;
	width: 5px;
	height: 5px;
	background: var(--danger);
	border-radius: 50%;
  }
  
  .appBody.payment_method .flex_box {
	 display: flex;
	 flex-direction: column;
	 gap: 20px;
  }
  
  .appBody .items .itemBody .itemBoxHeading p.heading {
	font-family: 'Outfit', sans-serif;
	font-size: .9em;
	margin-bottom: 30px;
	color: var(--inactive_link);
    font-weight: 400;
  }
  
  .appBody.payment_method .flex_box .payment_option .item_box{
		display: flex;
		gap: 20px;
		justify-content: start;
		align-items: center;
		cursor: pointer;
		padding: 20px 15px;
		border: 1px solid rgba(0, 0, 0,.1);
		border-radius: .25rem;
	 }
  
	 .appBody.payment_method .flex_box .payment_option{
		display: flex;
		flex-direction: column;
		gap: 10px;
	 }
  
  .appBody.payment_method .flex_box .payment_option .img_box{
		width: 40px;
		height: 40px;
		border-radius: 50%;
		background-color: rgba(19, 119, 226,.1);
	 }
  
  
  .appBody.payment_method .flex_box .payment_option .img_box img{
		width: 100%;
		height: 100%;
		border-radius: 50%;
	   object-fit: contain;
	 }
  
  .appBody.payment_method .flex_box .payment_option h2 {
	  font-family: 'Outfit', sans-serif;
	  font-size: 1em;
	  color: var(--black);
	 margin-bottom: 0;
     font-weight: 600;
	}
  
	.appBody.payment_method .flex_box .payment_option p {
	  font-family: 'Outfit', sans-serif;
	  font-size: .85em;
	  color: #aeaeae;
	 margin-bottom: 0;
     font-weight: 400;
	}
  
	.appBody.payment_method .flex_box .payment_option i {
	  margin-left: auto ;
	  font-size: 1em;
	  color: var(--black);
	}

	.appBody.payment_method .flex_box .payment_option .card_header_icon {
		margin-left: auto ;
		transition: all .3s ease-in-out;
	  }


  .bank_details {
	 display: flex;
		flex-direction: column;
		gap: 20px;
  }
  
  .bank_details .data_box {
	 display: flex;
		gap: 20px;
		justify-content: start;
		align-items: center;
		cursor: pointer;
		padding: 15px 10px;
		border: 1px solid rgba(0, 0, 0,.1);
		border-radius: .25rem;
  }
  
	.appBody.payment_method .card-body {
	 padding: .7rem;
	 }
  
	 .appBody.payment_method .card-body label{
		font-family: 'Outfit-Bold', sans-serif;
	  font-size: .8em;
	  color: #000;
      font-weight: 400;
	 }
  
	 .appBody.payment_method .card-body input::placeholder{
	 color:#aeaeae !important;
	 }
	 .appBody.payment_method .card-body input{
	 font-family: 'Outfit', sans-serif;
	  font-size: 1em;
      font-weight: 400;
	 }
  
	 .appBody.payment_method .card-body button{
		font-family: 'Outfit', sans-serif;
		font-size: 1em;
		color: #fff;
		background-color: var(--brand_color); 
        font-weight: 400;
	 }

	 .appBody .flex_box  button{
		font-family: 'Outfit', sans-serif;
		font-size: 1em;
		color: #fff;
        font-weight: 400;
		background-color: var(--brand_color); 
	 }

	.rotate {
		transform: rotate(90deg);
	}

	.copy {
		cursor: pointer;
		margin-left: auto;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.copy svg {
		width: 20px;
		height: 20px;
	}

	.copy span {
		font-family: 'Outfit', sans-serif;
		font-size: .8em;
        font-weight: 400;
	}

	.appBody .items .itemBody .itemBoxHeading p.heading span {
		font-size: .9em;
		color: var(--brand_color);
	  }
/**end payment method**/