@import url(https://fonts.googleapis.com/css?family=Nunito:400,700,600|Inter:500);
/*==============================
** Main Scss
==============================*/
/*-------------------------------------------------------------
# Typography
---------------------------------------------------------------*/
/*--------------------------------------------------------------
# Normalize
--------------------------------------------------------------*/
:root {
  --azure-radiance: #00a3ff;
  --blue: #3082ff0f;
  --blue-2: #3082ff0a;
  --blue-ribbon: #0167ff;
  --cape-cod: #383f45;
  --cararra: #ebebeb;
  --coral-red: #f23c3c;
  --cultured-pearl: #f5f5f5;
  --dfab1e: #dfab1e;
  --f14247: #f14247;
  --f8f9fa: #f8f9fa;
  --ffffff: #ffffff;
  --green: #1edc0f;
  --green-2: #1edb0e;
  --lemon-yellow: #fff852;
  --mine-shaft: #333333;
  --trout: #47526114;
  --trout-2: #4752611a;
  --trout-3: #4752610f;
  --trout-4: #48536214;
  --trout-5: #4752610d;
  --trout-6: #4752610a;
  --vida-loca: #42a819;
  --white: #ffffff4c;
  --x00a743: #00a642;
  --x262d37: #262d37;
  --x3082ff: #3082ff;
  --x475261: #475261;
  --x4d16dd: #4d16dd;
  --yellow-orange: #ffb240;
  --font-size-l: 16px;
  --font-size-m: 14px;
  --font-size-s: 12px;
  --font-size-xl: 18px;
  --font-family-inter: "Inter", Helvetica;
  --font-family-nunito: "Nunito", Helvetica;
  --font-family-sofia_pro-medium: "Sofia Pro-Medium", Helvetica;
  --nunito-font:"Nunito", sans-serif;
}

html {
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  font-family: var(--body-font);
}

* {
  box-sizing: border-box;
  outline: none;
  -moz-osx-font-smoothing: grayscale;
  /* Firefox */
  -webkit-font-smoothing: antialiased;
  /* WebKit  */
}

body {
  margin: 0;
  color: var(--x475261);
  overflow-x: hidden;
  font-family: var(--font-family-nunito);
}

h1 {
  font-size: 46px;
  line-height: 38px;
}

h2 {
  font-size: 36px;
  line-height: 1.4444444444;
  text-transform: uppercase;
}

h3 {
  font-size: 24px;
  line-height: 1.0833333333;
}

h4 {
  font-size: 20px;
  line-height: 1.2380952381;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-family-nunito);
}

p {
  font-size: var(--font-size-m);
  font-family: var(--font-family-nunito);
  color: var(--x475261);
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
  margin-bottom: 10px;
  line-height: 1.6;
  font-weight: 600;
}

a {
  color: inherit;
  text-decoration: none;
  color: var(--paragraph-color);
}

a,
a:hover,
a:focus,
a:active {
  text-decoration: none;
  outline: none;
  color: inherit;
}

pre {
  word-break: break-word;
}

a i {
  padding: 0 2px;
}

img {
  max-width: 100%;
}

ol {
  counter-reset: counter;
  padding-left: 0;
}

ol li {
  list-style: none;
  margin-bottom: 1rem;
}

ol li:before {
  counter-increment: counter;
  content: counter(counter);
  font-weight: 500;
  margin-right: 10px;
}

.no-padding {
  padding: 0 !important;
  margin: 0 !important;
}

/*input and button type focus outline disable*/
input[type=text]:focus,
input[type=email]:focus,
input[type=url]:focus,
input[type=password]:focus,
input[type=search]:focus,
input[type=tel]:focus,
input[type=number]:focus,
textarea:focus,
input[type=button]:focus,
input[type=reset]:focus,
input[type=submit]:focus,
select:focus {
  outline: none;
  box-shadow: none;
  border: 1px solid #ddd;
}

/*--------------------------------------------------------------
# Accessibility
--------------------------------------------------------------*/
/* Do not show the outline on the skip link target. */
#content[tabindex="-1"]:focus {
  outline: 0;
}

/*--------------------------------------------------------------
# Globals
--------------------------------------------------------------*/
.padding-left-0 {
  padding-left: 0;
}

.padding-right-0 {
  padding-left: 0;
}

.gray-bg {
  background-color: #f8f8f8;
}

.padding-top-10 {
  padding-top: 10px;
}

.padding-top-20 {
  padding-top: 20px;
}

.padding-top-30 {
  padding-top: 30px;
}

.padding-top-40 {
  padding-top: 40px;
}

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

.padding-top-60 {
  padding-top: 60px;
}

.padding-top-65 {
  padding-top: 65px;
}

.padding-top-70 {
  padding-top: 70px;
}

.padding-top-80 {
  padding-top: 80px;
}

.padding-top-90 {
  padding-top: 90px;
}

.padding-top-95 {
  padding-top: 95px;
}

.padding-top-100 {
  padding-top: 100px;
}

.padding-top-105 {
  padding-top: 105px;
}

.padding-top-110 {
  padding-top: 110px;
}

.padding-top-115 {
  padding-top: 115px;
}

.padding-top-120 {
  padding-top: 120px;
}

.padding-bottom-10 {
  padding-bottom: 10px;
}

.padding-bottom-20 {
  padding-bottom: 20px;
}

.padding-bottom-30 {
  padding-bottom: 30px;
}

.padding-bottom-40 {
  padding-bottom: 40px;
}

.padding-bottom-50 {
  padding-bottom: 50px;
}

.padding-bottom-60 {
  padding-bottom: 60px;
}

.padding-bottom-65 {
  padding-bottom: 65px;
}

.padding-bottom-70 {
  padding-bottom: 70px;
}

.padding-bottom-80 {
  padding-bottom: 80px;
}

.padding-bottom-85 {
  padding-bottom: 85px;
}

.padding-bottom-90 {
  padding-bottom: 90px;
}

.padding-bottom-95 {
  padding-bottom: 95px;
}

.padding-bottom-100 {
  padding-bottom: 100px;
}

.padding-bottom-110 {
  padding-bottom: 110px;
}

.padding-bottom-105 {
  padding-bottom: 105px;
}

.padding-bottom-115 {
  padding-bottom: 115px;
}

.padding-bottom-120 {
  padding-bottom: 120px;
}

.padding-bottom-130 {
  padding-bottom: 130px;
}

.padding-bottom-135 {
  padding-bottom: 135px;
}

.padding-l-r-0-15 {
  padding-left: 0px;
  padding-right: 15px;
}

.padding-r-0 {
  padding-right: 0px;
}

.padding-120 {
  padding-top: 120px;
  padding-bottom: 120px;
}

.padding-110 {
  padding-top: 110px;
  padding-bottom: 110px;
}

.padding-100 {
  padding-top: 100px;
  padding-bottom: 100px;
}

.padding-100-150 {
  padding-top: 100px;
  padding-bottom: 150px;
}

.padding-20 {
  padding-top: 20px;
  padding-bottom: 20px;
}

.padding-30 {
  padding-top: 30px;
  padding-bottom: 30px;
}

.padding-40 {
  padding-top: 40px;
  padding-bottom: 40px;
}

.padding-50 {
  padding-top: 50px;
  padding-bottom: 50px;
}

.padding-60 {
  padding-top: 60px;
  padding-bottom: 60px;
}

.padding-70 {
  padding-top: 70px;
  padding-bottom: 70px;
}

.padding-80 {
  padding-top: 80px;
  padding-bottom: 80px;
}

.padding-90 {
  padding-top: 90px;
  padding-bottom: 90px;
}

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

.padding-top-500 {
  padding-top: 500px;
}

.padding-l-r-140 {
  padding: 0px 140px;
}

.margin-top-0 {
  margin-top: 0px;
}

.margin-top-10 {
  margin-top: 10px;
}

.margin-top-500 {
  margin-top: 500px;
}

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

.margin-top-30 {
  margin-top: 30px;
}

.margin-top-40 {
  margin-top: 40px;
}

.margin-top-50 {
  margin-top: 50px;
}

.margin-top-55 {
  margin-top: 55px;
}

.margin-top-60 {
  margin-top: 60px;
}

.margin-top-70 {
  margin-top: 70px;
}

.margin-top-80 {
  margin-top: 80px;
}

.margin-top-90 {
  margin-top: 90px;
}

.margin-top-100 {
  margin-top: 100px;
}

.margin-top-106 {
  margin-top: 106px;
}

.margin-top-160 {
  margin-top: 160px;
}

.margin-89 {
  margin-top: 89px;
  margin-bottom: 89px;
}

.margin-90 {
  margin-top: 90px;
  margin-bottom: 90px;
}

.margin-top-155 {
  margin-top: 155px;
}

.margin-top-14vh {
  margin-top: 14vh;
}

.margin-top-24vh {
  margin-top: 24vh;
}

.margin-top-30vh {
  margin-top: 30vh;
}

.margin-top-50vh {
  margin-top: 50vh;
}

.margin-top-30vh {
  margin-top: 30vh;
}

.margin-t-80-b-100 {
  margin-top: 80px;
  margin-bottom: 100px;
}

.margin-bottom-0 {
  margin-bottom: 0px !important;
}

.margin-bottom-5 {
  margin-bottom: 5px;
}

.margin-bottom-10 {
  margin-bottom: 10px;
}

.margin-bottom-15 {
  margin-bottom: 15px;
}

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

.margin-bottom-25 {
  margin-bottom: 25px;
}

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

.margin-bottom-40 {
  margin-bottom: 40px;
}

.margin-bottom-50 {
  margin-bottom: 50px;
}

.margin-bottom-55 {
  margin-bottom: 55px;
}

.margin-bottom-60 {
  margin-bottom: 60px;
}

.margin-bottom-70 {
  margin-bottom: 70px;
}

.margin-bottom-80 {
  margin-bottom: 80px;
}

.margin-bottom-85 {
  margin-bottom: 85px;
}

.margin-bottom-90 {
  margin-bottom: 90px;
}

.margin-bottom-120 {
  margin-bottom: 120px;
}

.margin-bottom-200 {
  margin-bottom: 200px;
}

.margin-bottom-400 {
  margin-bottom: 400px;
}

.margin-top-100 {
  margin-bottom: 100px;
}

.margin-top-120 {
  margin-top: 120px;
}

.margin-top-250 {
  margin-top: 250px;
}

.min-height-600 {
  min-height: 600px;
}

.margin-80 {
  margin-top: 80px;
  margin-bottom: 80px;
}

.margin-65 {
  margin-top: 65px;
  margin-bottom: 65px;
}

.margin-bottom-25vh {
  margin-bottom: 25vh;
}

.margin-top-20vh {
  margin-top: 20vh;
}

.margin-right-5 {
  margin-right: 5px;
}

.margin-right-10 {
  margin-right: 10px;
}

.margin-right-16 {
  margin-right: 16px;
}

.margin-right-15 {
  margin-right: 15px;
}

.margin-left-110 {
  margin-left: 110px;
}

/*--------------------------------------------------------------
# Alignments
--------------------------------------------------------------*/
.alignleft {
  float: left;
  clear: both;
  margin-right: 20px;
}

.alignright {
  float: right;
  clear: both;
  margin-left: 20px;
}

.aligncenter {
  clear: both;
  display: block;
  margin: 0 auto 1.75em;
}

.alignfull {
  margin: 1.5em 0;
  max-width: 100%;
}

.alignwide {
  max-width: 1100px;
}

/*--------------------------------------------------------------
# Clearings
--------------------------------------------------------------*/
.clear:before,
.clear:after,
.entry-content:before,
.entry-content:after,
.comment-content:before,
.comment-content:after,
.site-header:before,
.site-header:after,
.site-content:before,
.site-content:after,
.site-footer:before,
.site-footer:after {
  content: "";
  display: table;
  table-layout: fixed;
}

.clear:after,
.entry-content:after,
.comment-content:after,
.site-header:after,
.site-content:after,
.site-footer:after {
  clear: both;
}

/* Make sure embeds and iframes fit their containers. */
embed,
iframe,
object {
  max-width: 100%;
}

/* Make sure logo link wraps around logo image. */
.custom-logo-link {
  display: inline-block;
}

/*--------------------------------------------------------------
# cutome Container
--------------------------------------------------------------*/
.custom-container-fluid {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
  max-width: 1340px;
}

.wrapper-body {
  position: relative;
  z-index: 99;
  margin-bottom: 320px;
  background: white;
}

.dashboard-wrapper {
  width: 100%;
}
.dashboard-wrapper .dashboard {
  display: flex;
  align-items: stretch;
}

.content {
  width: 100%;
  padding: 20px 40px;
  min-height: 100vh;
  transition: all 0.3s;
}

/*--------------------------------------------------------------
# Hidden Hamburger
--------------------------------------------------------------*/
.sidebarCollapse {
  display: none;
}

/*--------------------------------------------------------------
# Wrapper 
--------------------------------------------------------------*/
.wrapper {
  background: #fff;
}

/*=========================
** Sections Scss File
=========================*/
/*==============================
** Feature Scss
==============================*/
.feature-sec-wrapper {
  margin: 20px 0px;
}
.feature-sec-wrapper.filter {
  margin-top: 0px;
  margin-bottom: 3g0px !important;
}
.feature-sec-wrapper .feature-sec {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.feature-sec-wrapper .feature-sec .user-role-sec-wrapper .user-role-sec {
  display: flex;
  align-items: center;
  margin-bottom: 0px;
}
.feature-sec-wrapper .feature-sec .user-role-sec-wrapper .user-role-sec li {
  margin: 0px 15px 0px 0px;
}
.feature-sec-wrapper .feature-sec .user-role-sec-wrapper .user-role-sec li .dropdown button {
  outline: none;
}
.feature-sec-wrapper .feature-sec .user-role-sec-wrapper .user-role-sec li .dropdown-menu {
  top: 10px !important;
  width: 320px;
  left: 26px !important;
}
.feature-sec-wrapper .feature-sec .user-role-sec-wrapper .user-role-sec li .dropdown-menu li {
  margin: 0px;
}
.feature-sec-wrapper .feature-sec .user-role-sec-wrapper .user-role-sec li .dropdown-menu li.search-bar-wrapper {
  padding: 0px;
  margin-bottom: 10px;
}
.feature-sec-wrapper .feature-sec .user-role-sec-wrapper .user-role-sec li .dropdown-menu li.search-bar-wrapper:hover {
  background-color: var(--ffffff);
}
.feature-sec-wrapper .feature-sec .user-role-sec-wrapper .user-role-sec li .dropdown-menu li.search-bar-wrapper .search-bar form input {
  width: 85%;
}
.feature-sec-wrapper .feature-sec .user-role-sec-wrapper .user-role-sec li .dropdown-menu li .dp-sub-item img {
  border: 1px solid var(--cararra);
  border-radius: 20px;
  padding: 2px;
}
.feature-sec-wrapper .feature-sec .current-user-sec-wrapper .current-user-sec h4 {
  font-weight: 700;
  font-size: 16px;
  line-height: 24px;
  margin-bottom: 0px;
}
.feature-sec-wrapper .feature-sec .current-user-sec-wrapper .current-user-sec p {
  font-size: 14px;
  line-height: 14px;
  margin: 2px 0px;
}
.feature-sec-wrapper .feature-sec .func-wrapper .func {
  display: flex;
  align-items: center;
}
.feature-sec-wrapper .feature-sec .func-wrapper .func .sorted-sec-wrapper .sorted-sec {
  display: flex;
  align-items: center;
  background-color: transparent;
  border-radius: 10px;
  padding: 5px;
  border: 1px solid rgba(72, 83, 98, 0.08);
  color: var(--x475261);
  margin-bottom: 0px;
}
.feature-sec-wrapper .feature-sec .func-wrapper .func .sorted-sec-wrapper .sorted-sec li {
  padding: 4px 6px 4px 6px;
  cursor: pointer;
  transition: all 0.5s;
}
.feature-sec-wrapper .feature-sec .func-wrapper .func .sorted-sec-wrapper .sorted-sec li a i {
  font-size: 18px;
  color: var(--x475261);
  transition: all 0.5s;
}
.feature-sec-wrapper .feature-sec .func-wrapper .func .sorted-sec-wrapper .sorted-sec li a svg path {
  stroke: #475261;
}
.feature-sec-wrapper .feature-sec .func-wrapper .func .sorted-sec-wrapper .sorted-sec li:first-child {
  margin-right: 5px;
  padding: 5.5px 6px 5.5px 6px;
}
.feature-sec-wrapper .feature-sec .func-wrapper .func .sorted-sec-wrapper .sorted-sec li.active, .feature-sec-wrapper .feature-sec .func-wrapper .func .sorted-sec-wrapper .sorted-sec li:hover {
  background-color: rgba(48, 130, 255, 0.1);
  border-radius: 4px;
}
.feature-sec-wrapper .feature-sec .func-wrapper .func .sorted-sec-wrapper .sorted-sec li.active a i, .feature-sec-wrapper .feature-sec .func-wrapper .func .sorted-sec-wrapper .sorted-sec li:hover a i {
  color: var(--x3082ff);
}
.feature-sec-wrapper .feature-sec .func-wrapper .func .sorted-sec-wrapper .sorted-sec li.active a svg path, .feature-sec-wrapper .feature-sec .func-wrapper .func .sorted-sec-wrapper .sorted-sec li:hover a svg path {
  stroke: #3082FF;
}
.feature-sec-wrapper .feature-sec .func-wrapper .func .filter-wrapper .filter .selector-btn {
  font-weight: 600;
  color: var(--x475261);
  padding: 10px 15px;
}
.feature-sec-wrapper .feature-sec .func-wrapper .func .filter-wrapper .filter .selector-btn span img {
  margin-left: 10px;
}

@media (max-device-width: 1600px) {
  .feature-sec-wrapper .feature-sec .user-role-sec-wrapper .user-role-sec.response-btn {
    overflow: auto;
    white-space: nowrap;
    max-width: 500px;
  }
}
/*=========================
** Component  Scss File
=========================*/
.divider {
  height: 1px;
  width: calc(100% - 80px);
  display: block;
  background-color: rgba(71, 82, 97, 0.08);
  margin: 0 auto;
}

/*==============================
** BUTTON component
==============================*/
/* ----------------
Selector Button 
-----------------*/
.selector-btn {
  background-color: transparent;
  border-radius: 8px;
  border: 1px solid rgba(72, 83, 98, 0.08);
  outline: none !important;
  padding: 8px 10px;
  font-family: var(--font-family-nunito);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.selector-btn span img {
  margin-top: -3px;
}
.selector-btn span img.co-img {
  margin-left: 8px;
  margin-right: 8px;
}

/* ----------------
User Button 
-----------------*/
.user-button {
  background-color: transparent;
  border-radius: 10px;
  border: 1px solid rgba(72, 83, 98, 0.08);
  padding: 10px 15px;
  font-family: var(--font-family-nunito);
  font-size: 14px;
  font-weight: 600;
  color: var(--x475261);
  cursor: pointer;
  transition: all 0.5s;
}
.user-button:hover {
  background-color: var(--x3082ff);
  color: var(--ffffff);
}
.user-button.blue-button {
  background-color: var(--x3082ff);
  color: var(--ffffff) !important;
}
.user-button.blue-button span img {
  margin-top: -2px;
  margin-left: 4px;
}

/* ----------------
Group Card Button 
-----------------*/
.grp-card-btn {
  outline: none;
  border: 1px solid #1A87FF;
  box-sizing: border-box;
  border-radius: 6px;
  background: #1A87FF;
  color: var(--ffffff);
  font-size: 14px;
  line-height: 14px;
  font-weight: bold;
  margin-right: 14px !important;
  padding: 15px 20px !important;
  cursor: pointer;
  transition: all 0.5s;
}
.grp-card-btn.dot {
  padding: 7px 13px;
  margin: 0px;
  padding: 15px 24px;
  cursor: pointer;
  transition: all 0.5s;
}
.grp-card-btn.dot:hover .dot-button-icon path {
  fill: black;
}
.grp-card-btn.dot.dot {
  padding: 9px 3px 5px 3px;
}
.grp-card-btn.dot:hover, .grp-card-btn.dot:focus {
  border: 1px solid var(--ffffff);
  background: var(--ffffff);
  color: #1A87FF;
  outline: none;
}

/*==============================
** Group-Card component
==============================*/
.group-details-card-wrapper {
  background: linear-gradient(90.14deg, #0066FF 0.03%, var(--azure-radiance) 100%);
  border-radius: 10px;
  padding: 30px;
}
.group-details-card-wrapper .group-details-card.full {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.group-details-card-wrapper .group-details-card.full .group-details-card-footer {
  margin: 0px;
}
.group-details-card-wrapper .group-details-card.full .group-details-card-footer .dropdown.dot-dropdown .dropdown-menu {
  left: -85px !important;
  top: 20px !important;
}
.group-details-card-wrapper .group-details-card .group-details-card-h-b-wrapper .group-details-card-header {
  display: flex;
  align-items: center;
}
.group-details-card-wrapper .group-details-card .group-details-card-h-b-wrapper .group-details-card-header .grp-img {
  margin-right: 10px;
  width: 14px;
  margin-top: -3px;
}
.group-details-card-wrapper .group-details-card .group-details-card-h-b-wrapper .group-details-card-header p {
  margin: 0px;
  color: var(--ffffff);
  font-size: 14px;
  font-weight: 600;
}
.group-details-card-wrapper .group-details-card .group-details-card-h-b-wrapper .group-details-card-body {
  margin-top: 15px;
}
.group-details-card-wrapper .group-details-card .group-details-card-h-b-wrapper .group-details-card-body h3 {
  font-size: 18px;
  font-weight: 700;
  margin: 0px;
  color: var(--ffffff);
  line-height: 24px;
  margin-bottom: 8px;
}
.group-details-card-wrapper .group-details-card .group-details-card-h-b-wrapper .group-details-card-body .group-date-wrapper {
  display: flex;
  align-items: center;
}
.group-details-card-wrapper .group-details-card .group-details-card-h-b-wrapper .group-details-card-body .group-date-wrapper li {
  color: var(--ffffff);
  font-size: 14px;
  position: relative;
  margin-right: 30px;
}
.group-details-card-wrapper .group-details-card .group-details-card-h-b-wrapper .group-details-card-body .group-date-wrapper li::after {
  content: "";
  position: absolute;
  width: 1px;
  height: 10px;
  background-color: var(--ffffff);
  top: 5px;
  right: -14px;
}
.group-details-card-wrapper .group-details-card .group-details-card-h-b-wrapper .group-details-card-body .group-date-wrapper li::before {
  content: "";
  position: absolute;
  width: 1px;
  height: 10px;
  background-color: var(--ffffff);
  top: 5px;
  right: -17px;
}
.group-details-card-wrapper .group-details-card .group-details-card-h-b-wrapper .group-details-card-body .group-date-wrapper li:last-child::after, .group-details-card-wrapper .group-details-card .group-details-card-h-b-wrapper .group-details-card-body .group-date-wrapper li:last-child::before {
  display: none;
}
.group-details-card-wrapper .group-details-card .group-details-card-footer {
  display: flex;
  align-items: center;
  margin-top: 8px;
}
.group-details-card-wrapper .group-details-card .group-details-card-footer .grp-card-btn {
  margin-right: 20px;
}

/*==============================
** Board-Card component
==============================*/
.group-board-card-wrapper {
  background: var(--ffffff);
  border: 1px solid rgba(71, 82, 97, 0.1);
  box-shadow: 0px 8px 40px rgba(71, 82, 97, 0.04);
  border-radius: 10px;
  padding: 30px;
}
.group-board-card-wrapper .group-board-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.group-board-card-wrapper .group-board-card .group-board-card-h-b-wrapper .group-board-card-header {
  display: flex;
  align-items: center;
}
.group-board-card-wrapper .group-board-card .group-board-card-h-b-wrapper .group-board-card-header .brd-img {
  margin-right: 10px;
  width: 14px;
  margin-top: -3px;
}
.group-board-card-wrapper .group-board-card .group-board-card-h-b-wrapper .group-board-card-header p {
  margin: 0px;
  color: var(--x262d37);
  font-size: 14px;
  font-weight: 600;
}
.group-board-card-wrapper .group-board-card .group-board-card-h-b-wrapper .group-board-card-body {
  margin-top: 15px;
}
.group-board-card-wrapper .group-board-card .group-board-card-h-b-wrapper .group-board-card-body .header {
  display: flex;
  align-items: center;
  box-shadow: none;
  justify-content: flex-start;
}
.group-board-card-wrapper .group-board-card .group-board-card-h-b-wrapper .group-board-card-body .header h3 {
  font-size: 18px;
  font-weight: 700;
  margin: 0px;
  color: var(--x262d37);
  line-height: 24px;
}
.group-board-card-wrapper .group-board-card .group-board-card-h-b-wrapper .group-board-card-body .header .active-sec {
  background-color: rgba(0, 167, 67, 0.1);
  border-radius: 15px;
  padding: 5px 20px;
  width: 83px;
  margin-left: 25px;
}
.group-board-card-wrapper .group-board-card .group-board-card-h-b-wrapper .group-board-card-body .header .active-sec p {
  color: var(--x00a743);
  font-family: var(--font-family-nunito);
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 0px;
}
.group-board-card-wrapper .group-board-card .group-board-card-h-b-wrapper .group-board-card-body .group-date-wrapper {
  display: flex;
  align-items: center;
  margin-top: 18px;
  margin-bottom: 0px;
}
.group-board-card-wrapper .group-board-card .group-board-card-h-b-wrapper .group-board-card-body .group-date-wrapper li {
  color: var(--x262d37);
  font-size: 14px;
  position: relative;
  margin-right: 30px;
}
.group-board-card-wrapper .group-board-card .group-board-card-h-b-wrapper .group-board-card-body .group-date-wrapper li::after {
  content: "";
  position: absolute;
  width: 1px;
  height: 10px;
  background-color: var(--x262d37);
  top: 5px;
  right: -14px;
}
.group-board-card-wrapper .group-board-card .group-board-card-h-b-wrapper .group-board-card-body .group-date-wrapper li::before {
  content: "";
  position: absolute;
  width: 1px;
  height: 10px;
  background-color: var(--x262d37);
  top: 5px;
  right: -17px;
}
.group-board-card-wrapper .group-board-card .group-board-card-h-b-wrapper .group-board-card-body .group-date-wrapper li:last-child::after, .group-board-card-wrapper .group-board-card .group-board-card-h-b-wrapper .group-board-card-body .group-date-wrapper li:last-child::before {
  display: none;
}
.group-board-card-wrapper .group-board-card .group-board-card-footer ul {
  display: flex;
  align-items: center;
  margin: 0px;
}
.group-board-card-wrapper .group-board-card .group-board-card-footer ul li {
  margin-right: 30px;
}
.group-board-card-wrapper .group-board-card .group-board-card-footer ul li:hover {
  cursor: pointer;
}
.group-board-card-wrapper .group-board-card .group-board-card-footer ul li:last-child {
  margin-right: 0px;
}

/*==============================
** CARD component
==============================*/
.card-wrapper {
  margin-bottom: 25px;
}
.card-wrapper .card {
  background-color: var(--ffffff);
  border-radius: 10px;
  padding: 30px;
}
.card-wrapper .card .custom-card-header {
  display: flex;
  justify-content: space-between;
}
.card-wrapper .card .custom-card-header.n-b-w {
  align-items: center;
  margin-bottom: 5px;
}
.card-wrapper .card .custom-card-header .dat-sec .eng-date {
  display: flex;
  align-items: center;
}
.card-wrapper .card .custom-card-header .dat-sec .eng-date p {
  margin-left: 10px;
  margin-bottom: 0px;
}
.card-wrapper .card .custom-card-header .dat-sec .nor-date {
  margin-top: 10px;
}
.card-wrapper .card .custom-card-header .dat-sec .nor-date h4 {
  font-family: var(--font-family-nunito);
  font-size: 16px;
  font-weight: 700;
  color: var(--x262d37);
}
.card-wrapper .card .custom-card-header .dat-sec.name-board .nor-date {
  margin-top: 0px;
}
.card-wrapper .card .custom-card-header .dat-sec.name-board .nor-date h4 {
  margin-bottom: 0px;
  cursor: pointer;
}
.card-wrapper .card .custom-card-header .dat-sec.name-board .nor-date.assign-grp-card-header {
  display: flex;
  align-items: center;
}
.card-wrapper .card .custom-card-header .dat-sec.name-board .nor-date.assign-grp-card-header img {
  border-radius: 20px;
  border: 1px solid var(--cararra);
  margin-right: 10px;
  padding: 2px;
}
.card-wrapper .card .custom-card-header .dat-sec .email-phn {
  font-size: 16px;
  font-weight: 400;
  margin-top: 5px;
  margin-bottom: 0px;
}
.card-wrapper .card .custom-card-header .card-btns-sec {
  display: flex;
  align-items: center;
}
.card-wrapper .card .custom-card-header .card-btns-sec .selector-btn {
  border: 0px;
  color: var(--cape-cod);
  opacity: 0.5;
  padding: 0px;
}
.card-wrapper .card .custom-card-header .card-btns-sec.assign-grp-card-btn .dropdown {
  margin-top: -70px;
}
.card-wrapper .card .event-date-wrapper {
  margin-top: 10px;
}
.card-wrapper .card .event-date-wrapper .event-date {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.card-wrapper .card .event-date-wrapper .event-date h6 {
  font-family: var(--font-family-nunito);
  font-size: 12px;
  text-transform: uppercase;
  font-weight: 600;
  opacity: 0.7;
  margin-bottom: 5px;
}
.card-wrapper .card .active-sec-wrapper {
  margin-top: 15px;
  display: flex;
  justify-content: space-between;
}
.card-wrapper .card .active-sec-wrapper.assign-grp-card {
  margin-top: 5px;
  justify-content: start;
}
.card-wrapper .card .active-sec-wrapper.assign-grp-card .active-sec {
  padding: 5px 0px;
}
.card-wrapper .card .active-sec-wrapper.assign-grp-card .user-wrapper {
  margin-left: 20px;
}
.card-wrapper .card .active-sec-wrapper.assign-grp-card .user-wrapper .user-sec li {
  margin-left: -13px;
}
.card-wrapper .card .active-sec-wrapper.assign-grp-card .user-wrapper .user-sec li .avatar {
  padding: 0px;
}
.card-wrapper .card .active-sec-wrapper.on-board-card {
  margin-top: 5px;
  justify-content: space-between;
  align-items: center;
}
.card-wrapper .card .active-sec-wrapper.on-board-card .active-sec {
  padding: 5px 0px;
}
.card-wrapper .card .active-sec-wrapper.on-board-card .selector-btn {
  transition: all 0.5s;
}
.card-wrapper .card .active-sec-wrapper.on-board-card .selector-btn:hover {
  background-color: var(--x3082ff);
  color: var(--ffffff);
}
.card-wrapper .card .active-sec-wrapper.n-b-w {
  margin-top: 10px;
}
.card-wrapper .card .active-sec-wrapper.n-b-w .selector-btn {
  border-radius: 50px;
  padding: 10px 20px;
}
.card-wrapper .card .active-sec-wrapper .connected-grp p {
  margin-bottom: 0px;
}
.card-wrapper .card .active-sec-wrapper .connected-grp p i::before {
  display: inline-block;
  border-radius: 50%;
  margin: -2px 5px -2px 0px;
}
.card-wrapper .card .active-sec-wrapper .connected-grp.u-c {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.card-wrapper .card .active-sec-wrapper .connected-grp.u-c p::before {
  display: none;
}
.card-wrapper .card .active-sec-wrapper .connected-grp.u-c .switch {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 20px;
  margin-right: 10px;
  margin-left: 10px;
  margin-top: 2px;
}
.card-wrapper .card .active-sec-wrapper .connected-grp.u-c .switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.card-wrapper .card .active-sec-wrapper .connected-grp.u-c .switch input:checked + .slider {
  background: linear-gradient(90.14deg, #00A743 0.03%, #02CE53 100%);
  box-shadow: -2px 4px 10px rgba(0, 167, 67, 0.14);
}
.card-wrapper .card .active-sec-wrapper .connected-grp.u-c .switch input:checked + .slider::before {
  transform: translateX(16px);
}
.card-wrapper .card .active-sec-wrapper .connected-grp.u-c .switch input:empty ~ span {
  margin: 2px 0;
  height: 20px;
  width: 36px;
}
.card-wrapper .card .active-sec-wrapper .connected-grp.u-c .switch .slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90.14deg, #0066FF 0.03%, #00A3FF 100%);
  box-shadow: 2px 4px 10px rgba(1, 103, 255, 0.14);
  border-radius: 20px;
  transition: all 0.5s;
}
.card-wrapper .card .active-sec-wrapper .connected-grp.u-c .switch .slider::before {
  position: absolute;
  content: "";
  height: 12px;
  width: 12px;
  left: 4px;
  top: 4px;
  background-color: var(--ffffff);
  transition: all 0.5s;
  border-radius: 50%;
}
.card-wrapper .card .active-sec-wrapper .connected-grp.u-c .switch .slider::after {
  display: none;
}
.card-wrapper .card .active-sec-wrapper .active-sec {
  border-radius: 15px;
  padding: 5px 20px;
  cursor: pointer;
}
.card-wrapper .card .active-sec-wrapper .active-sec p {
  font-family: var(--font-family-nunito);
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 0px;
  cursor: pointer;
}
.card-wrapper .card .active-sec-wrapper .active-sec.green {
  background-color: rgba(0, 167, 67, 0.1);
  color: var(--x00a743);
}
.card-wrapper .card .active-sec-wrapper .active-sec.yellow {
  background-color: rgba(223, 171, 30, 0.1);
  color: var(--dfab1e);
}
.card-wrapper .card .active-sec-wrapper .active-sec.blue {
  background: linear-gradient(0deg, rgba(48, 130, 255, 0.1), rgba(48, 130, 255, 0.1));
  border-radius: 30px;
  padding: 2px 8px 5px 8px;
  cursor: pointer;
  transition: all 0.5s;
}
.card-wrapper .card .active-sec-wrapper .active-sec.red {
  background-color: rgba(223, 30, 30, 0.1);
  border-radius: 30px;
  padding: 2px 8px 5px 8px;
  cursor: pointer;
  transition: all 0.5s;
}
.card-wrapper .card .active-sec-wrapper .user-wrapper .user-sec {
  display: flex;
  align-items: center;
  margin-bottom: 0px;
}
.card-wrapper .card .active-sec-wrapper .user-wrapper .user-sec li {
  background-color: var(--ffffff);
  border-radius: 20px;
  border: 1px solid var(--cararra);
  margin-left: -8px;
}
.card-wrapper .card .active-sec-wrapper .user-wrapper .user-sec li .avatar {
  padding: 2px;
  margin-bottom: 0px;
}
.card-wrapper .card .active-sec-wrapper .user-wrapper .user-sec li .avatar.text {
  padding: 2px 4px;
}
.card-wrapper .card hr {
  background: var(--ffffff);
  border: 1px solid rgba(71, 82, 97, 0.08);
  margin: 10px 0px;
}
.card-wrapper .card.top-card {
  padding: 25px;
}
.card-wrapper .card.top-card .header-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.card-wrapper .card.top-card .header-card .name-date {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.card-wrapper .card.top-card .header-card .name-date h3 {
  font-size: 18px;
  font-weight: 700;
  margin: 0px;
  color: var(--x262d37);
  line-height: 24px;
  margin-right: 25px;
}
.card-wrapper .card.top-card .header-card .name-date ul {
  display: flex;
  align-items: center;
  margin-bottom: 0px;
  margin-left: 25px;
}
.card-wrapper .card.top-card .header-card .name-date ul li {
  color: var(--x262d37);
  font-size: 14px;
  position: relative;
  margin-right: 30px;
}
.card-wrapper .card.top-card .header-card .name-date ul li::after {
  content: "";
  position: absolute;
  width: 1px;
  height: 10px;
  background-color: var(--x262d37);
  top: 5px;
  right: -14px;
}
.card-wrapper .card.top-card .header-card .name-date ul li::before {
  content: "";
  position: absolute;
  width: 1px;
  height: 10px;
  background-color: var(--x262d37);
  top: 5px;
  right: -17px;
}
.card-wrapper .card.top-card .header-card .name-date ul li:last-child::after, .card-wrapper .card.top-card .header-card .name-date ul li:last-child::before {
  display: none;
}
.card-wrapper .card.top-card .header-card .active-sec {
  border-radius: 15px;
  padding: 5px 20px;
}
.card-wrapper .card.top-card .header-card .active-sec p {
  font-family: var(--font-family-nunito);
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 0px;
}
.card-wrapper .card.top-card .header-card .active-sec.green {
  cursor: pointer;
  background-color: rgba(0, 167, 67, 0.1);
  color: var(--x00a743);
}
.card-wrapper .card.top-card .header-card .active-sec.yellow {
  background-color: rgba(223, 171, 30, 0.1);
  color: var(--dfab1e);
}
.card-wrapper .card.top-card .header-card .active-sec.red {
  background-color: rgba(223, 30, 30, 0.1);
  color: red;
}

/*--------------------------------------------------------------
# Responsive CSS
--------------------------------------------------------------*/
@media all and (max-width: 1300px) {
  .group-details-card-wrapper .group-details-card .group-details-card-h-b-wrapper .group-details-card-body .group-date-wrapper {
    display: inline-flex;
  }
  .group-details-card-wrapper .group-board-card .group-board-card-footer ul li {
    margin-right: 20px !important;
  }
  .group-details-card-wrapper .group-board-card .group-board-card-footer ul li:hover {
    cursor: pointer !important;
  }
  .group-details-card-wrapper .group-board-card .group-board-card-footer ul li a {
    display: block;
  }
}
.event-card-body:nth-child(3n+3) .card-wrapper .card .custom-card-header .dropdown.dot-dropdown .dropdown-menu {
  left: -110px !important;
}

/*==============================
** Dropdown component
==============================*/
.dropdown .dropdown-menu {
  background-color: var(--ffffff);
  border: 1px solid rgba(71, 82, 97, 0.1);
  border-radius: 10px;
  top: 10px !important;
  left: -132px !important;
  width: 240px;
  padding: 12px;
}
.dropdown .dropdown-menu li {
  padding: 10px;
  cursor: pointer;
  transition: all 0.5s;
}
.dropdown .dropdown-menu li .dp-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.dropdown .dropdown-menu li .dp-item .lg-w-item {
  display: flex;
  align-items: center;
}
.dropdown .dropdown-menu li .dropdown-sub-menu {
  position: absolute;
  will-change: transform;
  background-color: var(--ffffff);
  opacity: 0;
  transform: translate3d(-15px, 0, 0);
  border: 1px solid rgba(71, 82, 97, 0.1);
  border-radius: 10px;
  box-shadow: 0px 10px 30px #6f6a6a0a, 0px 10px 30px #6f6a6a0a, 0px -4px 30px #6f6a6a0a;
  top: 100px !important;
  left: 250px !important;
  width: 176px;
  padding: 12px;
  transition: all 0.5s;
  visibility: hidden;
  pointer-events: none;
}
.dropdown .dropdown-menu li .dropdown-sub-menu .dp-sub-item {
  display: flex;
  align-items: center;
}
.dropdown .dropdown-menu li.active, .dropdown .dropdown-menu li:hover {
  background-color: var(--cultured-pearl);
  border-radius: 5px;
}
.dropdown .dropdown-menu li.active .dropdown-sub-menu, .dropdown .dropdown-menu li:hover .dropdown-sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translate3d(0, 0, 0);
}
.dropdown.dot-dropdown .selector-btn {
  border: 0px;
  color: var(--cape-cod);
  opacity: 0.5;
  padding: 0px;
}
.dropdown.dot-dropdown .dropdown-menu {
  left: -226px !important;
}
.dropdown.dot-dropdown .dropdown-menu li {
  padding: 8px;
}
.dropdown .dropdown-toggle::after {
  display: none;
}

/*==============================
** Search component
==============================*/
.search-bar-wrapper .search-bar {
  border: 1px solid rgba(71, 82, 97, 0.06);
  border-radius: 6px;
  box-sizing: border-box;
}
.search-bar-wrapper .search-bar.selector-btn {
  padding: 6px 10px;
}
.search-bar-wrapper .search-bar form input[type=text] {
  border: none;
}
.search-bar-wrapper .search-bar form input[type=text]::-moz-placeholder {
  font-family: var(--font-family-nunito);
  font-size: 14px;
  font-weight: 600;
  color: var(--x475261);
}
.search-bar-wrapper .search-bar form input[type=text]:-ms-input-placeholder {
  font-family: var(--font-family-nunito);
  font-size: 14px;
  font-weight: 600;
  color: var(--x475261);
}
.search-bar-wrapper .search-bar form input[type=text]::placeholder {
  font-family: var(--font-family-nunito);
  font-size: 14px;
  font-weight: 600;
  color: var(--x475261);
}
.search-bar-wrapper .search-bar form button {
  background: rgba(48, 130, 255, 0.06);
  border: none;
  outline: none;
  cursor: pointer;
  padding: 3px 8px 5px 8px;
  border-radius: 6px;
}
.search-bar-wrapper .search-bar form button img {
  width: 16px;
}

.card {
  padding: 0px;
}
.card.card-custom {
  box-shadow: none;
  border: none;
}
.card.card-custom .card-header {
  padding: 0px;
}
.card.card-custom .card-body {
  padding: 0px;
}

/*==============================
** Table component
==============================*/
table {
  border-collapse: separate;
  border-spacing: 0px 15px !important;
}

.dataTables_wrapper {
  margin-top: -30px;
}
.dataTables_wrapper .dataTables_length {
  display: none;
}
.dataTables_wrapper thead tr .sorting {
  background: rgba(48, 130, 255, 0.04);
  border: 0px;
}
.dataTables_wrapper thead tr .sorting:first-child {
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
  padding-left: 20px !important;
}
.dataTables_wrapper thead tr .sorting:last-child {
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
}
.dataTables_wrapper thead tr .sorting::before, .dataTables_wrapper thead tr .sorting::after {
  display: none;
}
.dataTables_wrapper thead tr th {
  padding: 17px;
}
.dataTables_wrapper tbody tr td {
  border-top: 1px solid rgba(71, 82, 97, 0.06) !important;
  border-bottom: 1px solid rgba(71, 82, 97, 0.06) !important;
  margin: 10px 0px;
  vertical-align: middle;
}
.dataTables_wrapper tbody tr td:first-child {
  border-left: 1px solid rgba(71, 82, 97, 0.06);
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
  padding-left: 20px !important;
}
.dataTables_wrapper tbody tr td:last-child {
  border-right: 1px solid rgba(71, 82, 97, 0.06);
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
  padding-right: 20px;
}
.dataTables_wrapper tbody tr td .name {
  display: flex;
  align-items: center;
}
.dataTables_wrapper tbody tr td .name img {
  border-radius: 20px;
  border: 1px solid var(--cararra);
  margin-right: 5px;
  padding: 2px;
  width: 30px;
  height: 30px;
}
.dataTables_wrapper tbody tr td .name p {
  font-size: 16px;
  margin: 0px;
  font-weight: 400;
}
.dataTables_wrapper tbody tr td .date {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.dataTables_wrapper tbody tr td .date p {
  font-size: 16px;
  margin: 0px;
  font-weight: 400;
}
.dataTables_wrapper tbody tr td .date .edit-delete .ico {
  cursor: pointer;
}
.dataTables_wrapper tbody tr td .date .edit-delete .ico:first-child {
  margin-right: 40px;
}
.dataTables_wrapper tbody tr td .grp-table p {
  font-size: 16px;
  margin: 0px;
  font-weight: 400;
}
.dataTables_wrapper tbody tr td .grp-table p::before {
  content: "";
  display: inline-block;
  width: 15px;
  height: 15px;
  border-radius: 6.5px;
  background-color: var(--yellow-orange);
  margin: -2px 10px -2px 0px;
}
.dataTables_wrapper tbody tr td .phone {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.dataTables_wrapper tbody tr td .phone p {
  font-size: 16px;
  margin: 0px;
  font-weight: 400;
}
.dataTables_wrapper tbody tr td .phone .ico {
  cursor: pointer;
}
.dataTables_wrapper tbody tr td .assign-grp-td {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.dataTables_wrapper tbody tr td .assign-grp-td .user ul {
  display: flex;
  align-items: center;
  margin-bottom: 0px;
}
.dataTables_wrapper tbody tr td .assign-grp-td .user ul li {
  border-radius: 20px;
  border: 1px solid var(--cararra);
  margin-left: -8px;
}
.dataTables_wrapper tbody tr td .assign-grp-td .user ul li.green {
  background-color: var(--vida-loca);
  padding: 12px;
}
.dataTables_wrapper tbody tr td .assign-grp-td .user ul li.blue {
  background-color: var(--azure-radiance);
  padding: 12px;
}
.dataTables_wrapper tbody tr td .assign-grp-td .user ul li p {
  margin: 0px;
  padding: 3px 5px;
}
.dataTables_wrapper tbody tr td .assign-grp-td .ico {
  cursor: pointer;
}
.dataTables_wrapper .dataTables_info {
  display: none;
}
.dataTables_wrapper .dataTables_paginate {
  display: none;
}
.dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_info {
  display: none;
}

/* -------- custom table list -------- */
.custom-table-list .card {
  box-shadow: none;
}
.custom-table-list .card.card-custom > .card-body {
  padding: 20px 20px;
}
.custom-table-list .card.card-custom > .card-header {
  padding: 20px 20px 0 20px;
}

/* -------- table-Board-row-name -------- */
.table-board-row-name {
  display: flex;
  gap: 10px;
  align-items: center;
}

.active-sec-wrapper .active-sec {
  border-radius: 15px;
  padding: 3px 20px;
}
.active-sec-wrapper .active-sec p {
  font-family: var(--font-family-nunito);
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 0px;
}
.active-sec-wrapper .active-sec.green {
  background-color: rgba(0, 167, 67, 0.1);
  color: var(--x00a743);
}
.active-sec-wrapper .active-sec.yellow {
  background-color: rgba(223, 171, 30, 0.1);
  color: var(--dfab1e);
}
.active-sec-wrapper .active-sec.blue {
  background: linear-gradient(0deg, rgba(48, 130, 255, 0.1), rgba(48, 130, 255, 0.1));
  border-radius: 30px;
  padding: 2px 8px 5px 8px;
  cursor: pointer;
  transition: all 0.5s;
}

.card-btns-sec {
  display: flex;
  align-items: center;
}
.card-btns-sec .selector-btn {
  border: 0px;
  color: var(--cape-cod);
  opacity: 0.5;
  padding: 0px;
}

.group-table td {
  padding: 8px !important;
}

.tab-content-wrapper {
  margin-top: 40px;
}
.tab-content-wrapper .tab-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.tab-content-wrapper .tab-header .gp-member h4 {
  font-size: 18px;
  font-weight: 700;
  color: var(--x262d37);
  margin: 0px;
}
.tab-content-wrapper .tab-header .nav-tab ul {
  margin: 0px;
}
.tab-content-wrapper .tab-header .nav-tab ul .nav-item {
  margin-right: 0px;
}
.tab-content-wrapper .tab-header .nav-tab ul .nav-item .nav-link {
  border: 1px solid var(--x3082ff);
  box-sizing: border-box;
  box-shadow: 0px 8px 40px rgba(71, 82, 97, 0.04), 14.0351px 0px 25px rgba(86, 128, 248, 0.03);
  font-size: 14px;
  font-weight: 400;
  border-radius: 6px 0px 0px 6px;
  font-family: var(--font-family-nunito);
  margin: 0px;
  padding: 10px 20px;
  transition: all 0.5s;
  color: var(--x3082ff);
}
.tab-content-wrapper .tab-header .nav-tab ul .nav-item .nav-link.active {
  background-color: var(--x3082ff);
  color: white;
  font-weight: 600;
}
.tab-content-wrapper .tab-header .nav-tab ul .nav-item:last-child {
  margin-right: 0px;
}
.tab-content-wrapper .tab-header .nav-tab ul .nav-item:last-child .nav-link {
  border-radius: 0px 6px 6px 0px !important;
}
.tab-content-wrapper .tab-content .current-member-drodown {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.tab-content-wrapper .tab-content .current-member-drodown .dropdown-text {
  display: flex;
  align-items: center;
}
.tab-content-wrapper .tab-content .current-member-drodown .dropdown-text h4 {
  margin: 0px;
  font-size: 16px;
  font-weight: 700;
  color: var(--x262d37);
}
.tab-content-wrapper .tab-content .current-member-drodown .dropdown-text p {
  color: var(--x475261);
  font-size: 14px;
  font-weight: 400;
  margin: 0px 0px 0px 20px;
}
.tab-content-wrapper .tab-content .search-filter-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 70px;
}

/*-----------------------------
    Accordion Item
-----------------------------*/
.accordion-wrapper .card {
  border: 1px solid rgba(71, 82, 97, 0.06);
  box-sizing: border-box;
  box-shadow: 0px 8px 40px rgba(71, 82, 97, 0.04);
  border-radius: 10px;
}
.accordion-wrapper .card .card-header {
  background: var(--ffffff);
  border-bottom: 1px solid rgba(71, 82, 97, 0.06);
}

.add-new-sec {
  margin-top: 30px;
}
.add-new-sec .container {
  max-width: 946px;
  margin: 0 auto;
}
.add-new-sec .container .step-header-wrapper {
  background: var(--ffffff);
  border: 1px solid rgba(71, 82, 97, 0.08);
  box-sizing: border-box;
  border-radius: 6px;
  padding: 0px 26px;
  margin-bottom: 30px;
}
.add-new-sec .container .step-header-wrapper .step-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}
.add-new-sec .container .step-header-wrapper .step-header .add-new {
  display: flex;
  align-items: center;
  flex: 50%;
}
.add-new-sec .container .step-header-wrapper .step-header .add-new .add-new-img {
  background: rgba(48, 130, 255, 0.1);
  box-shadow: 14.0351px 0px 25px rgba(86, 128, 248, 0.03), 35.0877px 0px 70px rgba(86, 128, 248, 0.05), 23.8596px 5.61404px 50px rgba(0, 0, 0, 0.02);
  border-radius: 46px;
  padding: 6px 10px;
  margin-right: 12px;
}
.add-new-sec .container .step-header-wrapper .step-header .add-new .add-new-img img {
  width: 16px;
  margin-top: -4px;
}
.add-new-sec .container .step-header-wrapper .step-header .add-new h4 {
  font-size: 16px;
  font-weight: bold;
  margin: 0px;
}
.add-new-sec .container .step-header-wrapper .step-header .step-wrapper {
  display: flex;
  align-items: center;
  flex: 50%;
  justify-content: space-between;
}
.add-new-sec .container .step-header-wrapper .step-header .step-wrapper.active {
  border-bottom: 2px solid var(--x3082ff);
  position: relative;
}
.add-new-sec .container .step-header-wrapper .step-header .step-wrapper.active .first-step.active {
  border-bottom: none;
}
.add-new-sec .container .step-header-wrapper .step-header .step-wrapper.active .first-step.active::before {
  content: "";
  background-color: var(--x3082ff);
  height: 12px;
  width: 12px;
  position: absolute;
  border-radius: 50%;
  border: 2px solid var(--x3082ff);
  top: 93%;
  left: 85%;
}
.add-new-sec .container .step-header-wrapper .step-header .step-wrapper.active .first-step.active::after {
  content: "";
  position: absolute;
  left: 8px;
  top: 4px;
  width: 4px;
  height: 7px;
  border: solid var(--ffffff);
  border-width: 0px 2px 2px 0;
  transform: rotate(45deg);
  top: 96%;
  left: 86.5%;
}
.add-new-sec .container .step-header-wrapper .step-header .step-wrapper.active::before {
  content: "";
  background-color: var(--ffffff);
  height: 12px;
  width: 12px;
  position: absolute;
  border-radius: 50%;
  border: 2px solid var(--x3082ff);
  top: 93%;
  left: 90.5%;
}
.add-new-sec .container .step-header-wrapper .step-header .step-wrapper .first-step {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 61%;
}
.add-new-sec .container .step-header-wrapper .step-header .step-wrapper .first-step.active {
  border-bottom: 2px solid var(--x3082ff);
  position: relative;
}
.add-new-sec .container .step-header-wrapper .step-header .step-wrapper .first-step.active .step-1.active {
  border-bottom: none;
}
.add-new-sec .container .step-header-wrapper .step-header .step-wrapper .first-step.active .step-1.active::before {
  content: "";
  background-color: var(--x3082ff);
  height: 12px;
  width: 12px;
  position: absolute;
  border-radius: 50%;
  border: 2px solid var(--x3082ff);
  top: 93%;
  left: 42%;
}
.add-new-sec .container .step-header-wrapper .step-header .step-wrapper .first-step.active .step-1.active::after {
  content: "";
  position: absolute;
  left: 8px;
  top: 4px;
  width: 4px;
  height: 7px;
  border: solid var(--ffffff);
  border-width: 0px 2px 2px 0;
  transform: rotate(45deg);
  top: 96%;
  left: 47%;
}
.add-new-sec .container .step-header-wrapper .step-header .step-wrapper .first-step.active::before {
  content: "";
  background-color: var(--ffffff);
  height: 12px;
  width: 12px;
  position: absolute;
  border-radius: 50%;
  border: 2px solid var(--x3082ff);
  top: 93%;
  left: 85%;
}
.add-new-sec .container .step-header-wrapper .step-header .step-wrapper .first-step .step-1,
.add-new-sec .container .step-header-wrapper .step-header .step-wrapper .first-step .step-2 {
  padding: 15px 0px;
}
.add-new-sec .container .step-header-wrapper .step-header .step-wrapper .first-step .step-1 p,
.add-new-sec .container .step-header-wrapper .step-header .step-wrapper .first-step .step-2 p {
  font-weight: 600;
  font-size: 14px;
  margin: 0px;
  color: var(--x262d37);
}
.add-new-sec .container .step-header-wrapper .step-header .step-wrapper .first-step .step-1 p:last-child,
.add-new-sec .container .step-header-wrapper .step-header .step-wrapper .first-step .step-2 p:last-child {
  color: var(--x475261);
  opacity: 0.7;
}
.add-new-sec .container .step-header-wrapper .step-header .step-wrapper .first-step .step-1.active,
.add-new-sec .container .step-header-wrapper .step-header .step-wrapper .first-step .step-2.active {
  border-bottom: 2px solid var(--x3082ff);
  position: relative;
}
.add-new-sec .container .step-header-wrapper .step-header .step-wrapper .first-step .step-1.active::before,
.add-new-sec .container .step-header-wrapper .step-header .step-wrapper .first-step .step-2.active::before {
  content: "";
  background-color: var(--ffffff);
  height: 12px;
  width: 12px;
  position: absolute;
  border-radius: 50%;
  border: 2px solid var(--x3082ff);
  top: 93%;
  left: 42%;
}
.add-new-sec .container .step-header-wrapper .step-header .step-wrapper .step-3 {
  padding: 15px 0px;
}
.add-new-sec .container .step-header-wrapper .step-header .step-wrapper .step-3 p {
  font-weight: 600;
  font-size: 14px;
  margin: 0px;
  color: var(--x262d37);
}
.add-new-sec .container .step-header-wrapper .step-header .step-wrapper .step-3 p:last-child {
  color: var(--x475261);
  opacity: 0.7;
}
.add-new-sec .container .step-header-wrapper .step-header .step-wrapper .step-3.active {
  border-bottom: 2px solid var(--x3082ff);
  position: relative;
}
.add-new-sec .container .step-header-wrapper .step-header .step-wrapper .step-3.active::before {
  content: "";
  background-color: var(--ffffff);
  height: 12px;
  width: 12px;
  position: absolute;
  border-radius: 50%;
  border: 2px solid var(--x3082ff);
  top: 93%;
  left: 42%;
}
.add-new-sec .container .from-grp-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.add-new-sec .container .from-wrapper {
  max-width: 580px;
  background: var(--ffffff);
  border: 1px solid rgba(71, 82, 97, 0.08);
  box-sizing: border-box;
  box-shadow: 0px 10px 40px rgba(71, 82, 97, 0.06);
  border-radius: 10px;
  margin: 0 auto;
  padding: 20px;
}
.add-new-sec .container .from-wrapper.small {
  width: 500px;
  margin: 0px;
}
.add-new-sec .container .from-wrapper .from {
  background: var(--ffffff);
  border: 1px solid rgba(71, 82, 97, 0.08);
  border-radius: 6px;
  padding: 20px;
  /*==============================
          ** CUSTOM CHECK BOX
          ==============================*/
}
.add-new-sec .container .from-wrapper .from .form-group {
  margin-top: 10px;
  /*==============================
            ** Filter Dropdown
            ==============================*/
}
.add-new-sec .container .from-wrapper .from .form-group label {
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
  color: var(--x262d37);
}
.add-new-sec .container .from-wrapper .from .form-group label::after {
  content: "*";
  color: var(--x3082ff);
  margin-left: 3px;
}
.add-new-sec .container .from-wrapper .from .form-group label.not-important::after {
  display: none;
}
.add-new-sec .container .from-wrapper .from .form-group input {
  width: 100%;
  background: #ffffff;
  border: 1px solid rgba(71, 82, 97, 0.1);
  box-sizing: border-box;
  box-shadow: 0px 14px 40px rgba(38, 45, 55, 0.02);
  border-radius: 6px;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--x475261);
}
.add-new-sec .container .from-wrapper .from .form-group .calender {
  border: 1px solid rgba(71, 82, 97, 0.1);
  box-sizing: border-box;
  box-shadow: 0px 14px 40px rgba(38, 45, 55, 0.02);
  border-radius: 6px;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.add-new-sec .container .from-wrapper .from .form-group .calender input {
  border: none;
  padding: 0px;
}
.add-new-sec .container .from-wrapper .from .form-group .filter-dropdown-button .filter-dropdown-selector {
  position: relative;
  font-family: Arial;
  /*hide the items when the select box is closed:*/
}
.add-new-sec .container .from-wrapper .from .form-group .filter-dropdown-button .filter-dropdown-selector select {
  display: none;
}
.add-new-sec .container .from-wrapper .from .form-group .filter-dropdown-button .filter-dropdown-selector .select-selected {
  background: var(--ffffff);
  border: 1px solid rgba(71, 82, 97, 0.08);
  border-radius: 6px;
  color: var(--x475261);
  font-size: 14px;
  padding: 10px 16px;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  width: 100%;
}
.add-new-sec .container .from-wrapper .from .form-group .filter-dropdown-button .filter-dropdown-selector .select-selected:after {
  position: absolute;
  content: "";
  top: 15px;
  right: 19px;
  width: 0;
  height: 0;
  border: solid var(--x475261);
  border-width: 0 2px 2px 0;
  display: inline-block;
  padding: 3px;
  transform: rotate(45deg);
  transition: all 0.5s;
}
.add-new-sec .container .from-wrapper .from .form-group .filter-dropdown-button .filter-dropdown-selector .select-selected.select-arrow-active:after {
  top: 18px;
  transform: rotate(-135deg);
}
.add-new-sec .container .from-wrapper .from .form-group .filter-dropdown-button .filter-dropdown-selector .select-items {
  position: absolute;
  background-color: var(--ffffff);
  top: 10px;
  left: 0;
  right: 0;
  z-index: 99;
  border: 1px solid rgba(71, 82, 97, 0.08);
  border-radius: 5px;
  transform: translate3d(0, 40px, 0);
  opacity: 1;
  visibility: visible;
}
.add-new-sec .container .from-wrapper .from .form-group .filter-dropdown-button .filter-dropdown-selector .select-items div {
  color: var(--black);
  font-size: 14px;
  padding: 10px 16px;
  border: 1px solid transparent;
  border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  box-sizing: border-box;
  border-radius: 2px;
  transition: all 0.5s;
}
.add-new-sec .container .from-wrapper .from .form-group .filter-dropdown-button .filter-dropdown-selector .select-items div:hover {
  background-color: var(--x3082ff);
  color: var(--ffffff);
}
.add-new-sec .container .from-wrapper .from .form-group .filter-dropdown-button .filter-dropdown-selector .select-hide {
  transition: all 0.5s;
  transform: translate3d(0, 0, 0);
  visibility: hidden;
  pointer-events: none;
  opacity: 0;
}
.add-new-sec .container .from-wrapper .from .form-group .boardname {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.add-new-sec .container .from-wrapper .from .form-group .boardname input {
  width: 80%;
}
.add-new-sec .container .from-wrapper .from .form-group .boardname .user-button {
  margin: 0px;
  padding: 10px 17px;
}
.add-new-sec .container .from-wrapper .from .check-box-wrapper {
  margin-top: 10px;
  margin-bottom: 30px;
}
.add-new-sec .container .from-wrapper .from .check-box-wrapper label {
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
  color: var(--x262d37);
}
.add-new-sec .container .from-wrapper .from .check-box-wrapper .checkbox-form {
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.add-new-sec .container .from-wrapper .from .check-box-wrapper .checkbox-form .checkbox-container {
  display: block;
  position: relative;
  padding-left: 40px;
  margin-bottom: 6px;
  font-size: 16px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.add-new-sec .container .from-wrapper .from .check-box-wrapper .checkbox-form .checkbox-container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}
.add-new-sec .container .from-wrapper .from .check-box-wrapper .checkbox-form .checkbox-container input:checked ~ .checkmark.purple {
  background-color: #960fc0;
}
.add-new-sec .container .from-wrapper .from .check-box-wrapper .checkbox-form .checkbox-container input:checked ~ .checkmark.green {
  background-color: #37c699;
}
.add-new-sec .container .from-wrapper .from .check-box-wrapper .checkbox-form .checkbox-container input:checked ~ .checkmark.green-2 {
  background-color: #42a819;
}
.add-new-sec .container .from-wrapper .from .check-box-wrapper .checkbox-form .checkbox-container input:checked ~ .checkmark.yellow {
  background-color: #c28664;
}
.add-new-sec .container .from-wrapper .from .check-box-wrapper .checkbox-form .checkbox-container input:checked ~ .checkmark.purple-2 {
  background-color: #7622f3;
}
.add-new-sec .container .from-wrapper .from .check-box-wrapper .checkbox-form .checkbox-container input:checked ~ .checkmark.orange {
  background-color: #d75269;
}
.add-new-sec .container .from-wrapper .from .check-box-wrapper .checkbox-form .checkbox-container input:checked ~ .checkmark.yellow-2 {
  background-color: #b8a83d;
}
.add-new-sec .container .from-wrapper .from .check-box-wrapper .checkbox-form .checkbox-container input:checked ~ .checkmark::after {
  display: block;
}
.add-new-sec .container .from-wrapper .from .check-box-wrapper .checkbox-form .checkbox-container input:checked ~ .checkmark::before {
  display: block;
}
.add-new-sec .container .from-wrapper .from .check-box-wrapper .checkbox-form .checkbox-container .checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 22px;
  width: 22px;
  border-radius: 20px;
}
.add-new-sec .container .from-wrapper .from .check-box-wrapper .checkbox-form .checkbox-container .checkmark.purple {
  background-color: #960fc0;
}
.add-new-sec .container .from-wrapper .from .check-box-wrapper .checkbox-form .checkbox-container .checkmark.purple::before {
  background-color: #992bbb6e;
}
.add-new-sec .container .from-wrapper .from .check-box-wrapper .checkbox-form .checkbox-container .checkmark.green {
  background-color: #37c699;
}
.add-new-sec .container .from-wrapper .from .check-box-wrapper .checkbox-form .checkbox-container .checkmark.green::before {
  background-color: #37c69969;
}
.add-new-sec .container .from-wrapper .from .check-box-wrapper .checkbox-form .checkbox-container .checkmark.blue {
  background-color: #678bf5;
}
.add-new-sec .container .from-wrapper .from .check-box-wrapper .checkbox-form .checkbox-container .checkmark.blue::before {
  background-color: #678af569;
}
.add-new-sec .container .from-wrapper .from .check-box-wrapper .checkbox-form .checkbox-container .checkmark.green-2 {
  background-color: #42a819;
}
.add-new-sec .container .from-wrapper .from .check-box-wrapper .checkbox-form .checkbox-container .checkmark.green-2::before {
  background-color: #42a8196c;
}
.add-new-sec .container .from-wrapper .from .check-box-wrapper .checkbox-form .checkbox-container .checkmark.yellow {
  background-color: #c28664;
}
.add-new-sec .container .from-wrapper .from .check-box-wrapper .checkbox-form .checkbox-container .checkmark.yellow::before {
  background-color: #c286646c;
}
.add-new-sec .container .from-wrapper .from .check-box-wrapper .checkbox-form .checkbox-container .checkmark.purple-2 {
  background-color: #7622f3;
}
.add-new-sec .container .from-wrapper .from .check-box-wrapper .checkbox-form .checkbox-container .checkmark.purple-2::before {
  background-color: #7622f36c;
}
.add-new-sec .container .from-wrapper .from .check-box-wrapper .checkbox-form .checkbox-container .checkmark.orange {
  background-color: #d75269;
}
.add-new-sec .container .from-wrapper .from .check-box-wrapper .checkbox-form .checkbox-container .checkmark.orange::before {
  background-color: #d752686c;
}
.add-new-sec .container .from-wrapper .from .check-box-wrapper .checkbox-form .checkbox-container .checkmark.yellow-2 {
  background-color: #b8a83d;
}
.add-new-sec .container .from-wrapper .from .check-box-wrapper .checkbox-form .checkbox-container .checkmark.yellow-2::before {
  background-color: #b8a83d6c;
}
.add-new-sec .container .from-wrapper .from .check-box-wrapper .checkbox-form .checkbox-container .checkmark::after {
  content: "";
  position: absolute;
  display: none;
  left: 8px;
  top: 4px;
  width: 6px;
  height: 10px;
  border: solid var(--ffffff);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.add-new-sec .container .from-wrapper .from .check-box-wrapper .checkbox-form .checkbox-container .checkmark::before {
  content: "";
  position: absolute;
  display: none;
  height: 30px;
  width: 30px;
  border-radius: 20px;
  top: -4px;
  left: -4px;
}
.add-new-sec .container .from-wrapper .user-button {
  border-radius: 6px;
  margin-top: 20px;
  margin-left: 83%;
}
.add-new-sec .container .from-wrapper .frm-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.add-new-sec .container .from-wrapper .frm-btn .user-button {
  margin-left: 0%;
  outline: none;
}
.add-new-sec .container .from-wrapper .frm-btn .user-button a span img {
  margin-top: -3px;
  margin-right: 3px;
}
.add-new-sec .container .from-wrapper .frm-btn .user-button:hover {
  background-color: transparent;
  color: var(--x475261) !important;
}
.add-new-sec .container .from-wrapper .frm-btn .user-button.blue-button:hover {
  background-color: var(--x3082ff);
  color: var(--ffffff) !important;
}
.add-new-sec .container .group-info-wrapper {
  border: 1px solid rgba(71, 82, 97, 0.08);
  box-sizing: border-box;
  border-radius: 6px;
  background-color: var(--ffffff);
  width: 390px;
}
.add-new-sec .container .group-info-wrapper .group-info {
  padding: 30px;
}
.add-new-sec .container .group-info-wrapper .group-info .group-info-header h4 {
  font-size: 16px;
  font-weight: 700;
  color: var(--x475261);
}
.add-new-sec .container .group-info-wrapper .group-info .group-info-header h4::before {
  content: "";
  display: inline-block;
  width: 15px;
  height: 15px;
  border-radius: 6.5px;
  background-color: var(--yellow-orange);
  margin: -2px 10px -2px 0px;
}
.add-new-sec .container .group-info-wrapper .group-info .group-info-card {
  background: rgba(255, 255, 255, 0.3);
  border: 1px solid rgba(71, 82, 97, 0.08);
  box-sizing: border-box;
  box-shadow: 0px 14px 40px rgba(38, 45, 55, 0.02);
  border-radius: 6px;
  padding: 9px 16px;
  margin-top: 20px;
}
.add-new-sec .container .group-info-wrapper .group-info .group-info-card p {
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  margin: 0px;
}
.add-new-sec .container .group-info-wrapper .group-info .group-info-card p:last-child {
  font-size: 16px;
}
.add-new-sec .container .group-info-wrapper .group-info .grp-name-card-wrapper {
  display: flex;
  align-items: center;
}
.add-new-sec .container .group-info-wrapper .group-info .grp-name-card-wrapper .grp-name-card {
  display: flex;
  align-items: center;
  margin-top: 10px;
  background: rgba(51, 51, 51, 0.06);
  border-radius: 16px;
  padding: 5px;
}
.add-new-sec .container .group-info-wrapper .group-info .grp-name-card-wrapper .grp-name-card:last-child {
  margin-left: 10px;
}
.add-new-sec .container .group-info-wrapper .group-info .grp-name-card-wrapper .grp-name-card img {
  margin-right: 10px;
}
.add-new-sec .container .group-info-wrapper .group-info .grp-name-card-wrapper .grp-name-card p {
  text-transform: capitalize;
}
.add-new-sec .container .email-group-with-add-button {
  display: flex;
}
.add-new-sec .container .email-group-with-add-button .button {
  margin-top: 30px;
  margin-left: 10px;
}
.add-new-sec .container .email-selector-wrapper {
  margin-top: 30px;
  margin-bottom: 20px;
}
.add-new-sec .container .email-selector-wrapper .email-selector {
  display: flex;
  align-items: center;
}
.add-new-sec .container .email-selector-wrapper .email-selector .email-selector-card {
  display: flex;
  align-items: center;
  margin-top: 10px;
  background: rgba(51, 51, 51, 0.06);
  border-radius: 16px;
  padding: 5px 8px;
}
.add-new-sec .container .email-selector-wrapper .email-selector .email-selector-card:last-child {
  margin-left: 10px;
}
.add-new-sec .container .email-selector-wrapper .email-selector .email-selector-card img {
  margin-left: 5px;
}
.add-new-sec .container .email-selector-wrapper .email-selector .email-selector-card img:first-child {
  margin-right: 5px;
  margin-left: 0px;
}
.add-new-sec .container .email-selector-wrapper .email-selector .email-selector-card p {
  margin: 0px;
}
.add-new-sec .container .frm-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 30px;
}
.add-new-sec .container .frm-btn .user-button {
  margin-left: 0%;
  outline: none;
  text-transform: uppercase;
}
.add-new-sec .container .frm-btn .user-button a span img {
  margin-top: -3px;
  margin-right: 3px;
}
.add-new-sec .container .frm-btn .user-button:hover {
  background-color: transparent;
  color: var(--x475261) !important;
}
.add-new-sec .container .frm-btn .user-button.blue-button:hover {
  background-color: var(--x3082ff);
  color: var(--ffffff) !important;
}
.add-new-sec .container .frm-btn .user-button .email-group-with-add-button {
  display: flex;
}
.add-new-sec .container .frm-btn .user-button .email-group-with-add-button .button {
  margin-top: 30px;
  margin-left: 10px;
}
.add-new-sec .container .frm-btn .user-button .email-selector-wrapper {
  margin-top: 30px;
  margin-bottom: 20px;
}
.add-new-sec .container .frm-btn .user-button .email-selector-wrapper .email-selector {
  display: flex;
  align-items: center;
}
.add-new-sec .container .frm-btn .user-button .email-selector-wrapper .email-selector .email-selector-card {
  display: flex;
  align-items: center;
  margin-top: 10px;
  background: rgba(51, 51, 51, 0.06);
  border-radius: 16px;
  padding: 5px 8px;
}
.add-new-sec .container .frm-btn .user-button .email-selector-wrapper .email-selector .email-selector-card:last-child {
  margin-left: 10px;
}
.add-new-sec .container .frm-btn .user-button .email-selector-wrapper .email-selector .email-selector-card img {
  margin-left: 5px;
}
.add-new-sec .container .frm-btn .user-button .email-selector-wrapper .email-selector .email-selector-card img:first-child {
  margin-right: 5px;
  margin-left: 0px;
}
.add-new-sec .container .frm-btn .user-button .email-selector-wrapper .email-selector .email-selector-card p {
  margin: 0px;
}
.add-new-sec .container .frm-btn .user-button .frm-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 30px;
}
.add-new-sec .container .frm-btn .user-button .frm-btn .user-button {
  margin-left: 0%;
  outline: none;
  text-transform: uppercase;
}
.add-new-sec .container .frm-btn .user-button .frm-btn .user-button a span img {
  margin-top: -3px;
  margin-right: 3px;
}
.add-new-sec .container .frm-btn .user-button .frm-btn .user-button:hover {
  background-color: transparent;
  color: var(--x475261) !important;
}
.add-new-sec .container .frm-btn .user-button .frm-btn .user-button.blue-button:hover {
  background-color: var(--x3082ff);
  color: var(--ffffff) !important;
}
.add-new-sec .container .frm-btn .popup-container {
  padding: 0;
}
.add-new-sec .container .frm-btn .popup-container .step-header-wrapper {
  border: none;
  padding: 0;
}
.add-new-sec .container .frm-btn .popup-container .from-wrapper {
  box-shadow: none;
  border: none;
  padding: 0px;
}
.add-new-sec .container .frm-btn .popup-container .title {
  display: flex;
  align-items: center;
}
.add-new-sec .container .frm-btn .popup-container .add-new {
  justify-content: inherit;
}
.add-new-sec .container .frm-btn .popup-container .email {
  width: 80%;
}

/*==============================
                ** CUSTOM CHECK BOX
                ==============================*/
.check-box-wrapper {
  margin-top: 10px;
  margin-bottom: 30px;
}
.check-box-wrapper label {
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
  color: var(--x262d37);
}
.check-box-wrapper .checkbox-form {
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.check-box-wrapper .checkbox-form .checkbox-container {
  display: block;
  position: relative;
  padding-left: 40px;
  margin-bottom: 6px;
  font-size: 16px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.check-box-wrapper .checkbox-form .checkbox-container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}
.check-box-wrapper .checkbox-form .checkbox-container input:checked ~ .checkmark.purple {
  background-color: #960fc0 !important;
}
.check-box-wrapper .checkbox-form .checkbox-container input:checked ~ .checkmark.green {
  background-color: #37c699;
}
.check-box-wrapper .checkbox-form .checkbox-container input:checked ~ .checkmark.green-2 {
  background-color: #42a819;
}
.check-box-wrapper .checkbox-form .checkbox-container input:checked ~ .checkmark.yellow {
  background-color: #c28664;
}
.check-box-wrapper .checkbox-form .checkbox-container input:checked ~ .checkmark.purple-2 {
  background-color: #7622f3;
}
.check-box-wrapper .checkbox-form .checkbox-container input:checked ~ .checkmark.orange {
  background-color: #d75269;
}
.check-box-wrapper .checkbox-form .checkbox-container input:checked ~ .checkmark.yellow-2 {
  background-color: #b8a83d;
}
.check-box-wrapper .checkbox-form .checkbox-container input:checked ~ .checkmark::after {
  display: block;
}
.check-box-wrapper .checkbox-form .checkbox-container input:checked ~ .checkmark::before {
  display: block;
}
.check-box-wrapper .checkbox-form .checkbox-container .checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 22px;
  width: 22px;
  border-radius: 20px;
}
.check-box-wrapper .checkbox-form .checkbox-container .checkmark.purple {
  background-color: #960fc0;
}
.check-box-wrapper .checkbox-form .checkbox-container .checkmark.purple::before {
  background-color: #992bbb6e;
}
.check-box-wrapper .checkbox-form .checkbox-container .checkmark.green {
  background-color: #37c699;
}
.check-box-wrapper .checkbox-form .checkbox-container .checkmark.green::before {
  background-color: #37c69969;
}
.check-box-wrapper .checkbox-form .checkbox-container .checkmark.blue {
  background-color: #678bf5;
}
.check-box-wrapper .checkbox-form .checkbox-container .checkmark.blue::before {
  background-color: #678af569;
}
.check-box-wrapper .checkbox-form .checkbox-container .checkmark.green-2 {
  background-color: #42a819;
}
.check-box-wrapper .checkbox-form .checkbox-container .checkmark.green-2::before {
  background-color: #42a8196c;
}
.check-box-wrapper .checkbox-form .checkbox-container .checkmark.yellow {
  background-color: #c28664;
}
.check-box-wrapper .checkbox-form .checkbox-container .checkmark.yellow::before {
  background-color: #c286646c;
}
.check-box-wrapper .checkbox-form .checkbox-container .checkmark.purple-2 {
  background-color: #7622f3;
}
.check-box-wrapper .checkbox-form .checkbox-container .checkmark.purple-2::before {
  background-color: #7622f36c;
}
.check-box-wrapper .checkbox-form .checkbox-container .checkmark.orange {
  background-color: #d75269;
}
.check-box-wrapper .checkbox-form .checkbox-container .checkmark.orange::before {
  background-color: #d752686c;
}
.check-box-wrapper .checkbox-form .checkbox-container .checkmark.yellow-2 {
  background-color: #b8a83d;
}
.check-box-wrapper .checkbox-form .checkbox-container .checkmark.yellow-2::before {
  background-color: #b8a83d6c;
}
.check-box-wrapper .checkbox-form .checkbox-container .checkmark::after {
  content: "";
  position: absolute;
  display: none;
  left: 8px;
  top: 4px;
  width: 6px;
  height: 10px;
  border: solid var(--ffffff);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.check-box-wrapper .checkbox-form .checkbox-container .checkmark::before {
  content: "";
  position: absolute;
  display: none;
  height: 30px;
  width: 30px;
  border-radius: 20px;
  top: -4px;
  left: -4px;
}

/*==============================
        ** INVITE USERS
==============================*/
.modal-content {
  width: 530px;
  border-radius: 10px !important;
  -webkit-border-radius: 10px !important;
  -moz-border-radius: 10px !important;
  -ms-border-radius: 10px !important;
  -o-border-radius: 10px !important;
}

.modal-body input::-moz-placeholder {
  color: #475261;
  font-size: 14px;
  font-family: "Nunito";
  font-weight: 600;
}

.modal-body input:-ms-input-placeholder {
  color: #475261;
  font-size: 14px;
  font-family: "Nunito";
  font-weight: 600;
}

.modal-body input::placeholder {
  color: #475261;
  font-size: 14px;
  font-family: "Nunito";
  font-weight: 600;
}
.modal-body .check-box-wrapper {
  display: grid !important;
}
.modal-body .add-new-sec {
  margin-top: 0px !important;
}
.modal-body .add-new-sec h4 {
  color: #262d37 !important;
}
.modal-body .step-header-wrapper {
  border: none !important;
  padding: 0px !important;
}
.modal-body .button {
  margin-top: 28px !important;
}
.modal-body .button #add_btn {
  padding: 11px;
  background: #3082ff;
  background: #3082ff;
  text-transform: uppercase;
  line-height: 20px;
  font-weight: 700;
  font-size: 14px;
  font-family: "Nunito";
}
.modal-body .button #add_btn svg {
  margin-top: -2px;
  margin-left: 9px;
}
.modal-body .email {
  width: 76% !important;
}
.modal-body .add-new-img img {
  width: 18px;
}
.modal-body .close {
  background: #4752612e;
  padding: 7px;
  border-radius: 50%;
  line-height: 6px;
  opacity: 0.5;
}
.modal-body .close i {
  font-size: 8px;
  color: #0e0e0e;
}
.modal-body .form label {
  font-weight: 600 !important;
}

/*==============================
        Group admin wrapper
==============================*/
.group-admin-wrapper .goup-admin-checkbox {
  height: 450px;
  overflow: auto;
  border: 1px solid rgba(71, 82, 97, 0.1);
  padding-top: 16px;
  padding-bottom: 16px;
  padding-left: 5px;
  border-radius: 5px;
}
.group-admin-wrapper .goup-admin-checkbox::-webkit-scrollbar {
  width: 6px;
}
.group-admin-wrapper .goup-admin-checkbox::-webkit-scrollbar-track {
  background: #3083ff21;
  border-radius: 4px;
}
.group-admin-wrapper .goup-admin-checkbox::-webkit-scrollbar-thumb {
  background-color: #3082ff;
  border-radius: 4px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
}
.group-admin-wrapper ul {
  list-style: none;
}
.group-admin-wrapper ul li {
  cursor: pointer;
}
.group-admin-wrapper ul li label {
  cursor: pointer;
  position: relative;
}
.group-admin-wrapper ul li label::before {
  content: "";
  background-image: url("/assets/img/check-box.svg");
  background-position: center;
  background-size: contain;
  width: 10px;
  height: 10px;
  position: absolute;
  left: -24px;
  top: 4px;
  transform: scale(0) rotateZ(180);
  -webkit-transform: scale(0) rotateZ(180);
  -moz-transform: scale(0) rotateZ(180);
  -ms-transform: scale(0) rotateZ(180);
  -o-transform: scale(0) rotateZ(180);
}
.group-admin-wrapper ul li label::after {
  content: "";
  display: block;
  width: 18px;
  height: 18px;
  position: relative;
  left: -28px;
  top: -20px;
  border: 1.4px solid rgba(71, 82, 97, 0.5);
  border-radius: 5px;
}
.group-admin-wrapper ul li input {
  display: none !important;
}
.group-admin-wrapper ul li input:checked + label::before {
  transform: scale(1) rotateZ(180);
  -webkit-transform: scale(1) rotateZ(180);
  -moz-transform: scale(1) rotateZ(180);
  -ms-transform: scale(1) rotateZ(180);
  -o-transform: scale(1) rotateZ(180);
  z-index: 10;
}
.group-admin-wrapper ul li input:checked + label::after {
  background-color: #3082ff;
  border: #3082ff;
}

#groupModal .modal-dialog {
  position: absolute;
  right: 0px;
  top: -20px;
}
#groupModal .modal-dialog .modal-content {
  min-height: 99vh;
}

#ediModal .modal-dialog {
  position: absolute;
  right: 0px;
  top: -20px;
}
#ediModal .modal-dialog .modal-content {
  min-height: 99vh;
}

.modal-body label {
  text-transform: uppercase;
  font-weight: 700 !important;
  font-size: 14px;
  color: #475261 !important;
  font-family: "Nunito";
}

@media all and (max-width: 768px) {
  #groupModal .modal-dialog {
    position: initial !important;
  }
}
/*==============================
** SIDE BAR
==============================*/
.aside {
  background-color: var(--x475261);
}
.aside .brand {
  background-color: rgba(38, 45, 55, 0.2);
  padding: 0px;
  height: 92px;
  justify-content: space-evenly;
}
.aside .brand .btn .svg-icon svg g [fill] {
  fill: rgba(38, 45, 55, 0.8);
}

.aside-menu {
  background-color: var(--x475261);
  margin-top: 30px;
}
.aside-menu .menu-nav {
  padding: 0px;
}
.aside-menu .menu-nav.logout {
  position: absolute;
  width: 100%;
  bottom: 0px;
}
.aside-menu .menu-nav .menu-item .menu-link {
  padding: 18px 25px;
  transition: all 0.5s;
}
.aside-menu .menu-nav .menu-item .menu-link .menu-text {
  color: var(--f8f9fa);
  font-size: 16px;
  font-family: var(--font-family-nunito);
}
.aside-menu .menu-nav .menu-item .menu-link .menu-text.ray {
  justify-content: flex-end;
}
.aside-menu .menu-nav .menu-item .menu-link:hover {
  color: #F8F9FA !important;
  background-color: rgba(38, 45, 55, 0.2) !important;
  box-shadow: 23.8596477509px 5.6140351295px 50px #00000005, 35.0877189636px 0px 70px #5680f80d, 14.0350866318px 0px 25px #5680f808 !important;
}
.aside-menu .menu-nav .menu-item .menu-link .ray-ico {
  background-color: rgba(38, 45, 55, 0.2);
  border-radius: 6px;
  box-shadow: 23.8596477509px 5.6140351295px 50px #00000005, 35.0877189636px 0px 70px #5680f80d, 14.0350866318px 0px 25px #5680f808;
  padding: 6px 10px;
}
.aside-menu .menu-nav .menu-item.menu-item-active .menu-link {
  background-color: rgba(38, 45, 55, 0.2);
  font-weight: 600;
}

.border-line hr {
  margin: 0px;
}

/*==============================
** RESPONSIVE
==============================*/
@media (max-width: 1440px) {
  .aside-menu .menu-nav.logout {
    margin-top: 200px;
    position: static;
  }
}
@media (max-width: 991.98px) {
  .header-mobile {
    background-color: var(--x475261);
  }

  .header-mobile .btn.active .svg-icon svg g [fill], .header-mobile .btn .svg-icon svg g [fill] {
    fill: #262d37;
  }

  .header-mobile .burger-icon span::after, .header-mobile .burger-icon span::before {
    background-color: #262d37;
  }

  .header-mobile .burger-icon span {
    background-color: #262d37;
  }
}
.add-new-steps-sec {
  margin-top: 30px;
}
.add-new-steps-sec .container {
  max-width: 946px;
  margin: 0 auto;
}
.add-new-steps-sec .container .step-header-wrapper {
  background: var(--ffffff);
  border: 1px solid rgba(71, 82, 97, 0.08);
  box-sizing: border-box;
  border-radius: 6px;
  padding: 0px 26px;
  margin-bottom: 30px;
}
.add-new-steps-sec .container .step-header-wrapper .step-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 1 1 0;
}
.add-new-steps-sec .container .step-header-wrapper .step-header .add-new {
  display: flex;
  align-items: center;
  flex: 50%;
}
.add-new-steps-sec .container .step-header-wrapper .step-header .add-new .add-new-img {
  background: rgba(48, 130, 255, 0.1);
  box-shadow: 14.0351px 0px 25px rgba(86, 128, 248, 0.03), 35.0877px 0px 70px rgba(86, 128, 248, 0.05), 23.8596px 5.61404px 50px rgba(0, 0, 0, 0.02);
  border-radius: 46px;
  padding: 6px 10px;
  margin-right: 12px;
}
.add-new-steps-sec .container .step-header-wrapper .step-header .add-new .add-new-img img {
  width: 16px;
  margin-top: -4px;
}
.add-new-steps-sec .container .step-header-wrapper .step-header .add-new h4 {
  font-size: 16px;
  font-weight: bold;
  margin: 0px;
}
.add-new-steps-sec .container .step-header-wrapper .step-header .step-wrapper {
  padding-top: 10px;
  display: flex;
  align-items: center;
  flex: 50%;
  justify-content: space-between;
}
.add-new-steps-sec .container .step-header-wrapper .step-header .step-wrapper .steps {
  width: 33.33%;
  text-align: center;
}
.add-new-steps-sec .container .step-header-wrapper .step-header .step-wrapper a {
  color: #262d37;
}
.add-new-steps-sec .container .step-header-wrapper .step-header .step-wrapper .step-1 {
  border-bottom: 2px solid #3082ff;
  position: relative;
}
.add-new-steps-sec .container .step-header-wrapper .step-header .step-wrapper .step-1::before {
  content: "";
  background-color: #3082ff;
  height: 12px;
  width: 12px;
  position: absolute;
  border-radius: 50%;
  border: 2px solid #3082ff;
  top: 93%;
  left: 45%;
}
.add-new-steps-sec .container .step-header-wrapper .step-header .step-wrapper .step-1::after {
  content: "";
  position: absolute;
  left: 8px;
  top: 4px;
  width: 4px;
  height: 7px;
  border: solid white;
  border-width: 0px 2px 2px 0;
  transform: rotate(45deg);
  top: 95%;
  left: 48%;
}
.add-new-steps-sec .container .step-header-wrapper .step-header .step-wrapper .step-1.active {
  border-bottom: 2px solid #3082ff;
  position: relative;
}
.add-new-steps-sec .container .step-header-wrapper .step-header .step-wrapper .step-1.active::before {
  content: "";
  background-color: white;
  height: 12px;
  width: 12px;
  position: absolute;
  border-radius: 50%;
  border: 2px solid #3082ff;
  top: 93%;
  left: 45%;
}
.add-new-steps-sec .container .step-header-wrapper .step-header .step-wrapper .step-2.active {
  border-bottom: 2px solid #3082ff;
  position: relative;
}
.add-new-steps-sec .container .step-header-wrapper .step-header .step-wrapper .step-2.active::before {
  content: "";
  background-color: white;
  height: 12px;
  width: 12px;
  position: absolute;
  border-radius: 50%;
  border: 2px solid #3082ff;
  top: 93%;
  left: 45%;
}
.add-new-steps-sec .container .step-header-wrapper .step-header .step-wrapper .step-title {
  font-weight: 600;
}
.add-new-steps-sec .container .step-header-wrapper .step-header .step-wrapper.active .step-2 {
  border-bottom: 2px solid #3082ff;
  position: relative;
}
.add-new-steps-sec .container .step-header-wrapper .step-header .step-wrapper.active .step-2::before {
  content: "";
  background-color: #3082ff;
  height: 12px;
  width: 12px;
  position: absolute;
  border-radius: 50%;
  border: 2px solid #3082ff;
  top: 93%;
  left: 45%;
}
.add-new-steps-sec .container .step-header-wrapper .step-header .step-wrapper.active .step-2::after {
  content: "";
  position: absolute;
  left: 8px;
  top: 4px;
  width: 4px;
  height: 7px;
  border: solid white;
  border-width: 0px 2px 2px 0;
  transform: rotate(45deg);
  top: 95%;
  left: 48%;
}
.add-new-steps-sec .container .step-header-wrapper .step-header .step-wrapper.active .step-3 {
  border-bottom: 2px solid #3082ff;
  position: relative;
}
.add-new-steps-sec .container .step-header-wrapper .step-header .step-wrapper.active .step-3::before {
  content: "";
  background-color: white;
  height: 12px;
  width: 12px;
  position: absolute;
  border-radius: 50%;
  border: 2px solid #3082ff;
  top: 93%;
  left: 45%;
}

.create-group-form {
  width: 620px;
  background: #ffffff;
  padding: 30px;
  border: 1px solid rgba(71, 82, 97, 0.04);
  box-sizing: border-box;
  box-shadow: 0px 10px 40px rgba(71, 82, 97, 0.06);
  border-radius: 10px;
}
.create-group-form .form-wrap {
  padding: 30px;
  border: 1px solid rgba(71, 82, 97, 0.04);
  box-sizing: border-box;
  box-shadow: 0px 10px 40px rgba(71, 82, 97, 0.06);
  border-radius: 10px;
}
.create-group-form label {
  text-transform: uppercase;
  font-weight: 400;
}

.check-box-wrapper {
  margin-top: 10px;
  margin-bottom: 30px;
}
.check-box-wrapper label {
  font-weight: 600;
  font-size: 15px;
  color: #181c32;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.check-box-wrapper .checkbox-form {
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.check-box-wrapper .checkbox-form .checkbox-container {
  display: block;
  position: relative;
  padding-left: 40px;
  margin-bottom: 6px;
  font-size: 16px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.check-box-wrapper .checkbox-form .checkbox-container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}
.check-box-wrapper .checkbox-form .checkbox-container input:checked ~ .checkmark.purple {
  background-color: #960fc0;
}
.check-box-wrapper .checkbox-form .checkbox-container input:checked ~ .checkmark.green {
  background-color: #37c699;
}
.check-box-wrapper .checkbox-form .checkbox-container input:checked ~ .checkmark.green-2 {
  background-color: #42a819;
}
.check-box-wrapper .checkbox-form .checkbox-container input:checked ~ .checkmark.yellow {
  background-color: #c28664;
}
.check-box-wrapper .checkbox-form .checkbox-container input:checked ~ .checkmark.purple-2 {
  background-color: #7622f3;
}
.check-box-wrapper .checkbox-form .checkbox-container input:checked ~ .checkmark.orange {
  background-color: #d75269;
}
.check-box-wrapper .checkbox-form .checkbox-container input:checked ~ .checkmark.yellow-2 {
  background-color: #b8a83d;
}
.check-box-wrapper .checkbox-form .checkbox-container input:checked ~ .checkmark.deep-yellow {
  background-color: #F1D302;
}
.check-box-wrapper .checkbox-form .checkbox-container input:checked ~ .checkmark::after {
  display: block;
}
.check-box-wrapper .checkbox-form .checkbox-container input:checked ~ .checkmark::before {
  display: block;
}
.check-box-wrapper .checkbox-form .checkbox-container .checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 22px;
  width: 22px;
  border-radius: 20px;
}
.check-box-wrapper .checkbox-form .checkbox-container .checkmark.purple {
  background-color: #960fc0;
}
.check-box-wrapper .checkbox-form .checkbox-container .checkmark.purple::before {
  background-color: #992bbb6e;
}
.check-box-wrapper .checkbox-form .checkbox-container .checkmark.green {
  background-color: #37c699;
}
.check-box-wrapper .checkbox-form .checkbox-container .checkmark.green::before {
  background-color: #37c69969;
}
.check-box-wrapper .checkbox-form .checkbox-container .checkmark.blue {
  background-color: #678bf5;
}
.check-box-wrapper .checkbox-form .checkbox-container .checkmark.blue::before {
  background-color: #678af569;
}
.check-box-wrapper .checkbox-form .checkbox-container .checkmark.green-2 {
  background-color: #42a819;
}
.check-box-wrapper .checkbox-form .checkbox-container .checkmark.green-2::before {
  background-color: #42a8196c;
}
.check-box-wrapper .checkbox-form .checkbox-container .checkmark.yellow {
  background-color: #c28664;
}
.check-box-wrapper .checkbox-form .checkbox-container .checkmark.yellow::before {
  background-color: #c286646c;
}
.check-box-wrapper .checkbox-form .checkbox-container .checkmark.purple-2 {
  background-color: #7622f3;
}
.check-box-wrapper .checkbox-form .checkbox-container .checkmark.purple-2::before {
  background-color: #7622f36c;
}
.check-box-wrapper .checkbox-form .checkbox-container .checkmark.orange {
  background-color: #d75269;
}
.check-box-wrapper .checkbox-form .checkbox-container .checkmark.orange::before {
  background-color: #d752686c;
}
.check-box-wrapper .checkbox-form .checkbox-container .checkmark.yellow-2 {
  background-color: #b8a83d;
}
.check-box-wrapper .checkbox-form .checkbox-container .checkmark.yellow-2::before {
  background-color: #b8a83d6c;
}
.check-box-wrapper .checkbox-form .checkbox-container .checkmark.deep-yellow {
  background-color: #F1D302;
}
.check-box-wrapper .checkbox-form .checkbox-container .checkmark.deep-yellow::before {
  background-color: #f1d1028c;
}
.check-box-wrapper .checkbox-form .checkbox-container .checkmark::after {
  content: "";
  position: absolute;
  display: none;
  left: 8px;
  top: 4px;
  width: 6px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.check-box-wrapper .checkbox-form .checkbox-container .checkmark::before {
  content: "";
  position: absolute;
  display: none;
  height: 30px;
  width: 30px;
  border-radius: 20px;
  top: -4px;
  left: -4px;
}

.create-board-form {
  width: 550px;
  background: #ffffff;
  padding: 30px;
  border: 1px solid rgba(71, 82, 97, 0.04);
  box-sizing: border-box;
  box-shadow: 0px 10px 40px rgba(71, 82, 97, 0.06);
  border-radius: 10px;
}
.create-board-form label {
  text-transform: uppercase;
}

.form-wrap {
  padding: 30px;
  border: 1px solid rgba(71, 82, 97, 0.04);
  box-sizing: border-box;
  box-shadow: 0px 10px 40px rgba(71, 82, 97, 0.06);
  border-radius: 10px;
}

.form-group label {
  font-weight: 400;
}

.board-card {
  width: 350px;
}
.board-card .card-header {
  border: none;
  min-height: 45px !important;
}
.board-card .card-items {
  border: 1px solid;
  border: 1px solid rgba(71, 82, 97, 0.08);
  box-sizing: border-box;
  box-shadow: 0px 14px 40px rgba(38, 45, 55, 0.02);
  border-radius: 6px;
  margin-bottom: 15px;
  padding: 15px;
  text-transform: uppercase;
}
.board-card .circle-icon {
  width: 16px;
  height: 16px;
  border-radius: 50%;
}

.primary-contact-wrap {
  display: flex;
  flex-wrap: wrap;
}
.primary-contact-wrap .grp-name-card {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 3px;
  background: rgba(51, 51, 51, 0.06);
  border-radius: 16px;
  padding: 5px;
  margin-right: 3px;
}
.primary-contact-wrap .grp-name-card img {
  margin-right: 3px;
}
.primary-contact-wrap .grp-name-card p {
  text-transform: capitalize;
  margin-bottom: 0;
}

.email-selector-card {
  display: flex;
  align-items: center;
  margin-top: 10px;
  background: rgba(51, 51, 51, 0.06);
  border-radius: 16px;
  padding: 5px 8px;
  height: 35px;
}
.email-selector-card:last-child {
  margin-left: 10px;
}
.email-selector-card img {
  margin-left: 5px;
}
.email-selector-card img:first-child {
  margin-right: 5px;
  margin-left: 0px;
}
.email-selector-card p {
  margin: 0px;
}

.link-hover:hover {
  text-decoration: underline !important;
}

/*=========================
** User header
=========================*/
.front-end-header {
  background-color: #475261 !important;
}
.front-end-header .all-grp-wrapper {
  display: flex;
  align-items: center;
}
.front-end-header .all-grp-wrapper ul {
  margin: 0;
  padding: 0;
  display: inline-flex;
  margin-left: 117px;
}
.front-end-header .all-grp-wrapper ul li {
  margin-right: 46px;
}
.front-end-header .all-grp-wrapper ul li:last-child {
  margin-right: 0;
}
@media (max-width: 1100px) {
  .front-end-header .all-grp-wrapper ul {
    margin-left: 50px;
  }
}
.front-end-header .btn {
  display: inline-block;
  margin-right: 30px;
  background: #3082ff;
  text-transform: uppercase;
  padding: 10px;
  border-radius: 8px;
  border: none;
  font-family: "Nunito";
  font-weight: 800;
}
.front-end-header .btn svg {
  margin-right: 5px;
  margin-top: -2px;
}
.front-end-header .notifications {
  background: #f14247 !important;
  border-radius: 50%;
  display: inline-block;
  width: 20px;
  height: 20px;
  color: #fff;
  margin-left: 19px;
  line-height: 20px;
  font-size: 12px;
}
.front-end-header .language {
  color: #fff !important;
  border: 1px solid #fff !important;
}
.front-end-header .notify-ico.active::after {
  background-color: #f14247 !important;
}
.front-end-header .message {
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
}
.front-end-header .message:hover {
  background-color: #3082ff !important;
  border: none !important;
}

/*=========================
** Accordion design
=========================*/
.blue-user .accordion-wrapper .accordion-title {
  background: #678af538;
}
.blue-user .modal-button {
  background: #678af523;
  color: #262d37;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}
.blue-user .modal-button:hover {
  border: 1px solid #678bf5;
}
.blue-user .modal-wrap {
  border: 1px solid #678bf5;
  cursor: pointer;
}
.blue-user .modal-title::after {
  background-color: #678bf5;
}
.blue-user .prmiary-card {
  background: #678af538;
  border: 1px solid #678bf5 !important;
}
.blue-user .prmiary-card-header {
  background: #678bf559;
  color: #262d37;
}
.blue-user .modal .modal-header .close {
  background-color: #678af5ce;
  cursor: pointer;
}
.blue-user .modal .modal-header .close:hover {
  color: white;
}

.green-user .accordion-wrapper .accordion-title {
  background: #37c69938;
}
.green-user .modal-button {
  background: #37c69923;
  color: #262d37;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}
.green-user .modal-button:hover {
  border: 1px solid #37c699;
}
.green-user .modal-title::after {
  background-color: #37c699;
}
.green-user .prmiary-card {
  background: #37c69938;
  border: 1px solid #37c699 !important;
}
.green-user .prmiary-card-header {
  background: #37c69959;
  color: #262d37;
}
.green-user .modal-wrap {
  border: 1px solid #37c699;
  cursor: pointer;
}
.green-user .modal .modal-header .close {
  background-color: #37c699ce;
  cursor: pointer;
}
.green-user .modal .modal-header .close:hover {
  color: white;
}

.red-user .accordion-wrapper .accordion-title {
  background: #d7526938;
}
.red-user .modal-button {
  background: #d7526923;
  color: #262d37;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}
.red-user .modal-button:hover {
  border: 1px solid #d75269;
}
.red-user .modal-title::after {
  background-color: #d75269;
}
.red-user .prmiary-card {
  background: #d7526938;
  border: 1px solid #d75269 !important;
}
.red-user .prmiary-card-header {
  background: #d7526959;
  color: #262d37;
}
.red-user .modal-wrap {
  border: 1px solid #d75269;
  cursor: pointer;
}
.red-user .modal .modal-header .close {
  background-color: #d75269ce;
  cursor: pointer;
}
.red-user .modal .modal-header .close:hover {
  color: white;
}

.yellow-user .accordion-wrapper .accordion-title {
  background: #f1d30238;
}
.yellow-user .modal-button {
  background: #f1d30223;
  color: #262d37;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}
.yellow-user .modal-button:hover {
  border: 1px solid #f1d302;
}
.yellow-user .modal-title::after {
  background-color: #f1d302;
}
.yellow-user .prmiary-card {
  background: #f1d30238;
  border: 1px solid #f1d302 !important;
}
.yellow-user .prmiary-card-header {
  background: #f1d30259;
  color: #262d37;
}
.yellow-user .modal-wrap {
  border: 1px solid #f1d302;
  cursor: pointer;
}
.yellow-user .modal .modal-header .close {
  background-color: #f1d302ce;
  cursor: pointer;
}
.yellow-user .modal .modal-header .close:hover {
  color: white;
}

.purple-user .accordion-wrapper .accordion-title {
  background: #960fc038;
}
.purple-user .modal-button {
  background: #960fc023;
  color: #262d37;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}
.purple-user .modal-button:hover {
  border: 1px solid #960fc0;
}
.purple-user .modal-title::after {
  background-color: #960fc0;
}
.purple-user .prmiary-card {
  background: #960fc038;
  border: 1px solid #960fc0 !important;
}
.purple-user .prmiary-card-header {
  background: #960fc059;
  color: #262d37;
}
.purple-user .modal-wrap {
  border: 1px solid #960fc0;
  cursor: pointer;
}
.purple-user .modal .modal-header .close {
  background-color: #960fc0ce;
  cursor: pointer;
}
.purple-user .modal .modal-header .close:hover {
  color: white;
}

.brown-user .accordion-wrapper .accordion-title {
  background: #c2866438;
}
.brown-user .modal-button {
  background: #c2866423;
  color: #262d37;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}
.brown-user .modal-button:hover {
  border: 1px solid #c28664;
}
.brown-user .modal-title::after {
  background-color: #c28664;
}
.brown-user .prmiary-card {
  background: #c2866438;
  border: 1px solid #c28664 !important;
}
.brown-user .prmiary-card-header {
  background: #c2866459;
  color: #262d37;
}
.brown-user .modal-wrap {
  border: 1px solid #c28664;
  cursor: pointer;
}
.brown-user .modal .modal-header .close {
  background-color: #c28664ce;
  cursor: pointer;
}
.brown-user .modal .modal-header .close:hover {
  color: white;
}

.accordion-wrapper {
  margin-top: 50px;
  font-family: "Nunito";
  color: #262d37;
  font-size: 16px;
}
.accordion-wrapper .accordion-title {
  background: #3082ff14;
  border-radius: 6px;
  margin-bottom: 30px;
}
.accordion-wrapper .accordion-title p {
  font-size: 18px;
  font-family: "Nunito";
  line-height: 16px;
  color: #262d37;
  padding: 20px;
  font-weight: 800;
}
.accordion-wrapper .accordion {
  padding: 20px;
  border: 1px solid rgba(71, 82, 97, 0.1);
  box-shadow: 0px 10px 40px rgba(71, 82, 97, 0.1);
  border-radius: 10px;
}
.accordion-wrapper .accordion .divider {
  color: rgba(71, 82, 97, 0.08);
}
.accordion-wrapper .accordion .accordion-body {
  font-family: "Nunito";
  font-size: 16px;
  line-height: 24px;
  color: #262d37;
}
.accordion-wrapper .accordion .accordion-body p {
  font-family: "Nunito";
  font-size: 16px;
  line-height: 24px;
  color: #262d37;
  font-weight: 400;
}
.accordion-wrapper .accordion .accordion-body h6 {
  font-size: 18px;
  font-family: "Nunito";
  font-weight: 600;
  line-height: 16px;
  margin-bottom: 16px;
}
.accordion-wrapper .accordion .accordion-body .accordion-tabs ul {
  display: flex;
  margin-top: 31px;
}
.accordion-wrapper .accordion .accordion-body .accordion-tabs ul li:first-child::after {
  content: "|";
  display: inline-block;
  margin: 0 16px;
}
.accordion-wrapper .accordion .accordion-item {
  border: none;
  margin-bottom: 20px;
  background: none;
  text-align: center;
}
.accordion-wrapper .accordion .accordion-item:last-child {
  margin: 0;
}
.accordion-wrapper .accordion .accordion-item .modal {
  background: white;
}
.accordion-wrapper .accordion .accordion-item .modal-dialog {
  max-width: 850px;
}
.accordion-wrapper .accordion .accordion-item .modal-body {
  padding: 0px 0px 0px 15px !important;
  text-align: left !important;
}
.accordion-wrapper .accordion .accordion-item .modal-body p {
  font-size: 18px;
}
.accordion-wrapper .accordion .accordion-item .modal-content {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  pointer-events: auto;
  background-color: #fff;
  background-clip: padding-box;
  border: none;
  box-shadow: none;
  outline: 0;
}
.accordion-wrapper .accordion .collapsed {
  border: 1px solid rgba(71, 82, 97, 0.1);
  border-radius: 10px !important;
  -webkit-border-radius: 10px !important;
  -moz-border-radius: 10px !important;
  -ms-border-radius: 10px !important;
  -o-border-radius: 10px !important;
}
.accordion-wrapper .accordion-button {
  font-size: 18px;
  font-family: "Nunito";
  line-height: 16px;
  background: none;
  border-radius: inherit;
  box-shadow: none;
  border-top: none;
  border-left: none;
  border-right: none;
  border-bottom: 1px solid rgba(71, 82, 97, 0.08);
  border: 1px solid rgba(48, 130, 255, 0.5);
  border-bottom: navajowhite;
  border-top-left-radius: 10px !important;
  border-top-right-radius: 10px !important;
}
.accordion-wrapper .accordion-button .accordion-item:first-of-type .accordion-button {
  border-top-left-radius: calc(0.25rem - 1px);
  border-top-right-radius: calc(0.25rem - 1px);
}
.accordion-wrapper .accordion-button .accordion-wrapper .accordion-button {
  font-size: 18px;
  font-family: "Nunito";
  line-height: 16px;
  background: none;
  border-radius: inherit;
  box-shadow: none;
  border-top: none;
  border-left: none;
  border-right: none;
  border-bottom: 1px solid rgba(71, 82, 97, 0.08);
  border: 1px solid rgba(48, 130, 255, 0.5);
  border-bottom: navajowhite;
  border-top-left-radius: 10px !important;
  border-top-right-radius: 10px !important;
}
.accordion-wrapper .accordion-button:not(.collapsed) {
  color: #262d37 !important;
  border-bottom: 1px solid rgba(71, 82, 97, 0.08);
}
.accordion-wrapper .accordion-collapse {
  border: 1px solid rgba(48, 130, 255, 0.5);
  border-top: none;
  border-bottom-left-radius: 10px !important;
  border-bottom-right-radius: 10px !important;
}
.accordion-wrapper .accordion-body ul {
  list-style: none !important;
  padding: 0px;
  font-family: "Nunito";
  font-size: 16px;
}
.accordion-wrapper .accordion-body ul li {
  margin-bottom: 16px;
}
.accordion-wrapper .accordion-body a {
  color: #3082ff;
  text-decoration: underline;
  font-family: "Nunito";
  font-size: 16px;
}

/*=========================
** Video popup with background
=========================*/
.video-background-wrapper .video-background {
  background-image: url("/assets/img/bg.png");
  height: 250px;
  position: relative;
  border-radius: 10px;
}
.video-background-wrapper .play-button {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  background: #fff;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  border: none;
}
.video-background-wrapper .play-button:focus {
  box-shadow: none;
}
.video-background-wrapper .play-button:hover path {
  fill: #fff;
}
.video-background-wrapper .modal-body {
  padding: 0px;
}
.video-background-wrapper .modal-body video {
  width: 100%;
}

.prmiary-card {
  border-radius: 8px !important;
  border: 0 !important;
  box-shadow: 0 7px 20px 5px rgba(0, 0, 0, 0.05) !important;
  overflow: hidden !important;
  padding: 20px !important;
}

.prmiary-card-header {
  border: 0;
  border-radius: 8px;
  text-align: center;
  box-shadow: 0 3px 20px 5px rgba(0, 0, 0, 0.05);
  padding: 15px;
}

.prmiary-cart-title {
  font-weight: 600;
  font-size: 20px;
}

.prmiary-card-body {
  margin-top: 20px;
  border: 8px;
  overflow: hidden;
}

.name {
  margin-top: 20px;
  font-weight: bold;
}

.modal-header {
  border: none;
}

.modal-button {
  width: 90%;
  border: none;
  padding: 10px;
  border-radius: 6px;
  font-weight: 600;
  font-size: 18px;
}

.modal-title {
  color: #181c32 !important;
  font-weight: bold !important;
  font-size: 45px !important;
  margin-bottom: 5px !important;
  text-align: left;
}
.modal-title::after {
  content: "";
  display: block;
  height: 6px;
  width: 120px;
  margin-bottom: 30px;
}

.modal-wrap {
  border-radius: 8px;
  border: 0;
  box-shadow: 0 7px 20px 5px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  padding: 30px;
}
.modal-wrap h3 {
  font-size: 15px;
  margin-top: 20px;
}

.modal .modal-header .close {
  outline: none !important;
  color: #fff;
  padding: 20px 12px;
  margin: 0;
  line-height: 0;
  font-size: 30px;
  background-color: red;
  opacity: 1;
}

@media all and (max-width: 991px) {
  .topbar {
    background: #475261;
  }
}
.navigation-container {
  width: 95%;
  margin: 50px auto;
  margin-bottom: 0px;
  align-items: center;
}
.navigation-container .navigate a {
  font-family: "Nunito";
  font-weight: 700;
  color: #2c2c2c;
  font-size: 14px;
  margin: 0px;
}
.navigation-container .navigate a svg {
  margin-left: 13px;
}
.navigation-container .footer-right a {
  color: #262d37 !important;
  font-weight: 600 !important;
  font-family: "Nunito";
  font-size: 14px;
}
.navigation-container .footer-left {
  color: #262d37 !important;
  font-weight: 600 !important;
  font-family: "Nunito";
  font-size: 14px;
}
.navigation-container .footer-left a {
  color: #262d37 !important;
  font-weight: 600 !important;
  font-family: "Nunito";
  font-size: 14px;
}
.navigation-container .footer {
  position: fixed;
  display: flex !important;
  width: 95%;
  bottom: 50px;
}

.login-signup-on .mb-3 {
  margin-bottom: 20px !important;
}
.login-signup-on h3 {
  font-family: "Nunito";
  font-weight: 800 !important;
  font-size: 40px !important;
  line-height: 50px;
  text-align: center;
  margin-bottom: 50px;
}
.login-signup-on p {
  font-family: "Nunito";
  width: 70%;
  margin: auto;
  font-size: 16px !important;
  line-height: 24px;
  text-align: center;
  color: #262d37 !important;
  margin-bottom: 40px;
}
.login-signup-on .input-container {
  width: 400px;
  margin: auto;
}
.login-signup-on .input-container .text-danger {
  color: #262d37 !important;
  margin-top: 14px;
  font-family: "Nunito";
  font-size: 14px;
}
.login-signup-on .input-container .input-icon {
  position: relative;
}
.login-signup-on .input-container .in-icon {
  position: absolute;
  top: 26px;
  left: 8px;
}
.login-signup-on .input-container .in-icon::after {
  content: "";
  display: block;
  position: absolute;
  left: 42px;
  border: 1px solid rgba(71, 82, 97, 0.1);
  height: 23px;
}
.login-signup-on .input-container .eye {
  position: absolute;
  right: 23px;
  top: 17px;
  cursor: pointer;
}
.login-signup-on .input-container .eye-container {
  position: relative;
}
.login-signup-on .input-container input {
  font-size: 16px;
  line-height: 16px;
  color: #262d37;
  font-family: "Nunito";
  border: 2px solid rgba(71, 82, 97, 0.1);
  padding: 25px 0;
  padding-left: 20px;
  border-radius: 6px !important;
}
.login-signup-on .input-container input:focus {
  border: 2px solid rgba(48, 130, 255, 0.4);
}
.login-signup-on .input-container input::-moz-placeholder {
  color: #262d37;
  opacity: 0.6;
}
.login-signup-on .input-container input:-ms-input-placeholder {
  color: #262d37;
  opacity: 0.6;
}
.login-signup-on .input-container input::placeholder {
  color: #262d37;
  opacity: 0.6;
}
.login-signup-on .input-container .skip {
  font-family: "Nunito";
  font-size: 14px;
  font-weight: 600;
}
.login-signup-on .input-container .rcv-email {
  font-size: 14px !important;
  width: 78%;
  text-align: center;
  color: #475261 !important;
  line-height: 22px;
  margin-top: 140px;
}
.login-signup-on .input-container button {
  width: 100%;
  background: #3082ff !important;
  font-family: "Nunito";
  font-size: 14px !important;
  font-weight: 700 !important;
}
.login-signup-on .input-container button:hover {
  background: #1d7fe4;
}

@media all and (max-width: 768px) {
  .login-signup-on .input-container {
    width: 100% !important;
  }
  .login-signup-on .container {
    margin: 0px;
    padding: 0px;
  }
  .login-signup-on .container p {
    width: 100%;
  }
  .login-signup-on .container h3 {
    font-size: 34px !important;
  }

  .navigation-container .footer {
    margin-top: 50px;
    display: block !important;
    position: initial;
  }
}
.add-admin-modal .modal-body .name-wrap input {
  width: 300px;
}
.add-admin-modal .select-grp input {
  height: 30px;
}
.add-admin-modal .select-grp .select2-selection__choice {
  background: #3083ff1c !important;
  border-radius: 15px !important;
  color: #3082ff !important;
  padding: 8px !important;
}
.add-admin-modal .select-grp .select2-selection__rendered {
  display: flex;
  align-items: center;
}

.modal-body {
  padding: 30px;
}
.modal-body input {
  height: 46px;
  background: #ffffff;
  border: 1px solid rgba(71, 82, 97, 0.1);
  box-sizing: border-box;
  box-shadow: 0px 14px 40px rgba(38, 45, 55, 0.02);
  border-radius: 6px;
  font-weight: 600;
  font-size: 14px;
  line-height: 14px;
}
.modal-body label {
  text-transform: uppercase;
  font-weight: 600;
  font-size: 14px;
}
.modal-body .form-group:last-child {
  margin-bottom: 0;
}

.modal-footer {
  border-top: none;
  padding: 30px;
}
.modal-footer button {
  text-transform: uppercase;
  padding: 10px 20px;
  margin: 0;
  margin-top: -20px;
}

.modal {
  z-index: 1051 !important;
}

.checkbox-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  list-style: none;
  padding-left: 0px;
}
.checkbox-wrapper li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 5px;
}
.checkbox-wrapper li label {
  margin-bottom: -1px;
}

/*=========================
** Responsive Scss File
=========================*/
/*==============================
** Global Body Scss
==============================*/
.content {
  background-color: white;
  padding: 10px 40px;
}

.topbar {
  align-items: center;
}

.shadow {
  box-shadow: 0 8px 8px -4px lightblue !important;
}

/*==============================
** New  Header Scss
==============================*/
.header {
  padding-top: 20px;
  padding-bottom: 25px;
  display: block;
  max-height: 150px;
}
.header.header-fixed {
  background-color: var(--ffffff);
  box-shadow: none;
  max-height: 150px;
  height: auto;
}
.header .header-pad {
  padding: 0px 40px;
}
.header .all-grp-wrapper .all-grp {
  display: flex;
  align-items: center;
  margin: 0px;
}
.header .all-grp-wrapper .all-grp .arrow {
  display: flex;
  align-items: center;
  margin: 0px;
}
.header .all-grp-wrapper .all-grp .arrow li {
  margin: 0px 2px;
  padding: 2px 12px 3px 12px;
  opacity: 0.6;
  transition: all 0.5s;
}
.header .all-grp-wrapper .all-grp .arrow li.active, .header .all-grp-wrapper .all-grp .arrow li:hover {
  background: rgba(71, 82, 97, 0.06);
  border-radius: 4px;
  cursor: pointer;
  opacity: 1;
}
.header .all-grp-wrapper .all-grp .arrow li .right-arrow {
  transform: rotate(180deg);
}
.header .all-grp-wrapper .all-grp .all-grp-text {
  margin: 0px 0px 0px 10px;
  font-family: var(--font-family-nunito);
  font-size: 14px;
  font-weight: 600;
  color: var(--x475261);
  text-transform: uppercase;
}
.header .all-grp-wrapper .all-grp .all-grp-text.create-grp {
  margin: 0px;
}
.header .notify-ico.active {
  position: relative;
}
.header .notify-ico.active::before {
  content: "";
  background-color: var(--ffffff);
  height: 12px;
  width: 12px;
  position: absolute;
  border-radius: 50%;
  right: 0px;
  z-index: 1;
}
.header .notify-ico.active::after {
  content: "";
  background-color: var(--x4d16dd);
  height: 7px;
  width: 7px;
  position: absolute;
  border-radius: 50%;
  left: 11px;
  top: 2px;
  z-index: 2;
}
.header .notify-ico .dropdown.dot-dropdown .selector-btn {
  opacity: 1;
}
.header .notify-ico .dropdown.dot-dropdown .dropdown-menu {
  position: relative;
  left: -210px !important;
  top: 23px !important;
  width: 520px;
  height: 470px;
}
.header .notify-ico .dropdown.dot-dropdown .dropdown-menu li {
  margin: 0px;
  padding: 0px;
}
.header .notify-ico .dropdown.dot-dropdown .dropdown-menu li .dp-sub-item {
  font-size: 14px;
  font-weight: 600;
}
.header .notify-ico .dropdown.dot-dropdown .dropdown-menu li .dp-sub-item .co-img {
  margin-top: -3px;
  margin-left: 5px;
  border-radius: 20px;
}
.header .notify-ico .dropdown.dot-dropdown .dropdown-menu li.notify-header-wrapper {
  margin-top: 6px;
}
.header .notify-ico .dropdown.dot-dropdown .dropdown-menu li.notify-header-wrapper .notify-heade {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.header .notify-ico .dropdown.dot-dropdown .dropdown-menu li.notify-header-wrapper .notify-heade .notify-text h3 {
  font-size: 18px;
  font-weight: 700;
  margin: 0px;
}
.header .notify-ico .dropdown.dot-dropdown .dropdown-menu li.notify-header-wrapper .notify-heade .notify-button .btn {
  font-size: 14px;
  font-weight: 600;
  outline: none;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all 0.5s;
}
.header .notify-ico .dropdown.dot-dropdown .dropdown-menu li.notify-header-wrapper .notify-heade .notify-button .btn:hover {
  color: var(--x3082ff);
}
.header .notify-ico .dropdown.dot-dropdown .dropdown-menu li:hover {
  background-color: var(--ffffff);
}
.header .notify-ico .dropdown.dot-dropdown .dropdown-menu li hr {
  border: 1px solid rgba(71, 82, 97, 0.1);
}
.header .notify-ico .dropdown.dot-dropdown .dropdown-menu li .notify-content-wrapper .notify-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.header .notify-ico .dropdown.dot-dropdown .dropdown-menu li .notify-content-wrapper .notify-content .notify-grp {
  display: flex;
  align-items: center;
}
.header .notify-ico .dropdown.dot-dropdown .dropdown-menu li .notify-content-wrapper .notify-content .notify-grp .notify-grp-img {
  margin-right: 15px;
  border: 1px solid;
  background: seashell;
  border-radius: 50px;
  padding: 15px 20px 15px 20px;
  font-weight: 900;
}
.header .notify-ico .dropdown.dot-dropdown .dropdown-menu li .notify-content-wrapper .notify-content .notify-grp .notify-grp-img img {
  border-radius: 50%;
}
.header .notify-ico .dropdown.dot-dropdown .dropdown-menu li .notify-content-wrapper .notify-content .notify-grp .notify-grp-img.green {
  position: relative;
}
.header .notify-ico .dropdown.dot-dropdown .dropdown-menu li .notify-content-wrapper .notify-content .notify-grp .notify-grp-img.green::before {
  content: "";
  background-color: var(--ffffff);
  height: 12px;
  width: 12px;
  position: absolute;
  border-radius: 50%;
  right: 0px;
  bottom: 0px;
}
.header .notify-ico .dropdown.dot-dropdown .dropdown-menu li .notify-content-wrapper .notify-content .notify-grp .notify-grp-img.green::after {
  content: "";
  background-color: var(--green);
  height: 8px;
  width: 8px;
  position: absolute;
  border-radius: 50%;
  right: 2px;
  bottom: 2px;
}
.header .notify-ico .dropdown.dot-dropdown .dropdown-menu li .notify-content-wrapper .notify-content .notify-grp .notify-grp-img.yellow {
  position: relative;
}
.header .notify-ico .dropdown.dot-dropdown .dropdown-menu li .notify-content-wrapper .notify-content .notify-grp .notify-grp-img.yellow::before {
  content: "";
  background-color: var(--ffffff);
  height: 12px;
  width: 12px;
  position: absolute;
  border-radius: 50%;
  right: 0px;
  bottom: 0px;
}
.header .notify-ico .dropdown.dot-dropdown .dropdown-menu li .notify-content-wrapper .notify-content .notify-grp .notify-grp-img.yellow::after {
  content: "";
  background-color: var(--dfab1e);
  height: 8px;
  width: 8px;
  position: absolute;
  border-radius: 50%;
  right: 2px;
  bottom: 2px;
}
.header .notify-ico .dropdown.dot-dropdown .dropdown-menu li .notify-content-wrapper .notify-content .notify-grp .notify-text p {
  font-weight: 14px;
  font-weight: 400;
  margin: 0px;
}
.header .notify-ico .dropdown.dot-dropdown .dropdown-menu li .notify-content-wrapper .notify-content .notify-grp .notify-text p span {
  color: var(--x3082ff);
}
.header .notify-ico .dropdown.dot-dropdown .dropdown-menu li .notify-content-wrapper .notify-content .notify-grp .notify-text p:first-child {
  font-size: 16px;
  font-weight: 700;
  color: var(--x262d37);
}
.header .prof-pic-status {
  margin-left: 30px;
}
.header .prof-pic-status .dropdown.dot-dropdown .selector-btn {
  opacity: 1;
}
.header .prof-pic-status .dropdown.dot-dropdown .dropdown-menu {
  position: relative;
  left: -145px !important;
  top: 20px !important;
}
.header .prof-pic-status .dropdown.dot-dropdown .dropdown-menu li {
  margin: 0px;
}
.header .selector-wrapper {
  margin-left: 30px;
}
.header .selector-wrapper .dropdown.dot-dropdown .selector-btn {
  opacity: 1;
  border: 1px solid rgba(72, 83, 98, 0.08);
  padding: 8px 10px;
}
.header .selector-wrapper .dropdown.dot-dropdown .dropdown-menu {
  position: relative;
  left: 0px !important;
  top: 10px !important;
  min-width: 105px;
  width: 105px;
  padding: 0px;
}
.header .selector-wrapper .dropdown.dot-dropdown .dropdown-menu li {
  margin: 0px;
  padding: 8px 20px;
}
.header .selector-wrapper .dropdown.dot-dropdown .dropdown-menu li .dp-sub-item {
  font-size: 14px;
  font-weight: 600;
}
.header .selector-wrapper .dropdown.dot-dropdown .dropdown-menu li .dp-sub-item .co-img {
  margin-top: -3px;
  margin-left: 5px;
  border-radius: 20px;
}

@media screen and (min-width: 992px) {
  .header-fixed .wrapper {
    padding-top: 85px;
  }
}
/*==============================
** Old  Header Scss
==============================*/
.header-sec-wrapper .header-sec {
  padding: 10px 0px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* -----------
      All groups
  ---------------*/
  /* ----------------
      Notification
  -----------------*/
}
.header-sec-wrapper .header-sec .all-grp-wrapper .all-grp {
  display: flex;
  align-items: center;
  margin: 0px;
}
.header-sec-wrapper .header-sec .all-grp-wrapper .all-grp .arrow {
  display: flex;
  align-items: center;
  margin: 0px;
}
.header-sec-wrapper .header-sec .all-grp-wrapper .all-grp .arrow li {
  margin: 0px 2px;
  padding: 2px 12px 3px 12px;
  opacity: 0.6;
  transition: all 0.5s;
}
.header-sec-wrapper .header-sec .all-grp-wrapper .all-grp .arrow li.active, .header-sec-wrapper .header-sec .all-grp-wrapper .all-grp .arrow li:hover {
  background: rgba(71, 82, 97, 0.06);
  border-radius: 4px;
  cursor: pointer;
  opacity: 1;
}
.header-sec-wrapper .header-sec .all-grp-wrapper .all-grp .arrow li .right-arrow {
  transform: rotate(180deg);
}
.header-sec-wrapper .header-sec .all-grp-wrapper .all-grp .all-grp-text {
  margin: 0px 0px 0px 10px;
  font-family: var(--font-family-nunito);
  font-size: 14px;
  font-weight: 600;
  color: var(--x475261);
  text-transform: uppercase;
}
.header-sec-wrapper .header-sec .all-grp-wrapper .all-grp .all-grp-text.create-grp {
  margin: 0px;
}
.header-sec-wrapper .header-sec .notify-wrapper .notify {
  display: flex;
  align-items: center;
  margin: 0px;
}
.header-sec-wrapper .header-sec .notify-wrapper .notify li {
  margin: 0px 0px 0px 30px;
  cursor: pointer;
}
.header-sec-wrapper .header-sec .notify-wrapper .notify li.notify-ico.active {
  position: relative;
}
.header-sec-wrapper .header-sec .notify-wrapper .notify li.notify-ico.active::before {
  content: "";
  background-color: var(--ffffff);
  height: 12px;
  width: 12px;
  position: absolute;
  border-radius: 50%;
  right: 0px;
  z-index: 1;
}
.header-sec-wrapper .header-sec .notify-wrapper .notify li.notify-ico.active::after {
  content: "";
  background-color: var(--x4d16dd);
  height: 7px;
  width: 7px;
  position: absolute;
  border-radius: 50%;
  left: 11px;
  top: 2px;
  z-index: 2;
}
.header-sec-wrapper .header-sec .notify-wrapper .notify li.notify-ico .dropdown.dot-dropdown .selector-btn {
  opacity: 1;
}
.header-sec-wrapper .header-sec .notify-wrapper .notify li.notify-ico .dropdown.dot-dropdown .dropdown-menu {
  position: relative;
  left: -210px !important;
  top: 23px !important;
  width: 520px;
  height: 470px;
}
.header-sec-wrapper .header-sec .notify-wrapper .notify li.notify-ico .dropdown.dot-dropdown .dropdown-menu li {
  margin: 0px;
  padding: 0px;
}
.header-sec-wrapper .header-sec .notify-wrapper .notify li.notify-ico .dropdown.dot-dropdown .dropdown-menu li .dp-sub-item {
  font-size: 14px;
  font-weight: 600;
}
.header-sec-wrapper .header-sec .notify-wrapper .notify li.notify-ico .dropdown.dot-dropdown .dropdown-menu li .dp-sub-item .co-img {
  margin-top: -3px;
  margin-left: 5px;
  border-radius: 20px;
}
.header-sec-wrapper .header-sec .notify-wrapper .notify li.notify-ico .dropdown.dot-dropdown .dropdown-menu li.notify-header-wrapper {
  margin-top: 6px;
}
.header-sec-wrapper .header-sec .notify-wrapper .notify li.notify-ico .dropdown.dot-dropdown .dropdown-menu li.notify-header-wrapper .notify-heade {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.header-sec-wrapper .header-sec .notify-wrapper .notify li.notify-ico .dropdown.dot-dropdown .dropdown-menu li.notify-header-wrapper .notify-heade .notify-text h3 {
  font-size: 18px;
  font-weight: 700;
  margin: 0px;
}
.header-sec-wrapper .header-sec .notify-wrapper .notify li.notify-ico .dropdown.dot-dropdown .dropdown-menu li.notify-header-wrapper .notify-heade .notify-button button {
  font-size: 14px;
  font-weight: 600;
  outline: none;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all 0.5s;
}
.header-sec-wrapper .header-sec .notify-wrapper .notify li.notify-ico .dropdown.dot-dropdown .dropdown-menu li.notify-header-wrapper .notify-heade .notify-button button:hover {
  color: var(--x3082ff);
}
.header-sec-wrapper .header-sec .notify-wrapper .notify li.notify-ico .dropdown.dot-dropdown .dropdown-menu li:hover {
  background-color: var(--ffffff);
}
.header-sec-wrapper .header-sec .notify-wrapper .notify li.notify-ico .dropdown.dot-dropdown .dropdown-menu li hr {
  border: 1px solid rgba(71, 82, 97, 0.1);
}
.header-sec-wrapper .header-sec .notify-wrapper .notify li.notify-ico .dropdown.dot-dropdown .dropdown-menu li .notify-content-wrapper .notify-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.header-sec-wrapper .header-sec .notify-wrapper .notify li.notify-ico .dropdown.dot-dropdown .dropdown-menu li .notify-content-wrapper .notify-content .notify-grp {
  display: flex;
  align-items: center;
}
.header-sec-wrapper .header-sec .notify-wrapper .notify li.notify-ico .dropdown.dot-dropdown .dropdown-menu li .notify-content-wrapper .notify-content .notify-grp .notify-grp-img {
  margin-right: 15px;
}
.header-sec-wrapper .header-sec .notify-wrapper .notify li.notify-ico .dropdown.dot-dropdown .dropdown-menu li .notify-content-wrapper .notify-content .notify-grp .notify-grp-img img {
  border-radius: 50%;
}
.header-sec-wrapper .header-sec .notify-wrapper .notify li.notify-ico .dropdown.dot-dropdown .dropdown-menu li .notify-content-wrapper .notify-content .notify-grp .notify-grp-img.green {
  position: relative;
}
.header-sec-wrapper .header-sec .notify-wrapper .notify li.notify-ico .dropdown.dot-dropdown .dropdown-menu li .notify-content-wrapper .notify-content .notify-grp .notify-grp-img.green::before {
  content: "";
  background-color: var(--ffffff);
  height: 12px;
  width: 12px;
  position: absolute;
  border-radius: 50%;
  right: 0px;
  bottom: 0px;
}
.header-sec-wrapper .header-sec .notify-wrapper .notify li.notify-ico .dropdown.dot-dropdown .dropdown-menu li .notify-content-wrapper .notify-content .notify-grp .notify-grp-img.green::after {
  content: "";
  background-color: var(--green);
  height: 8px;
  width: 8px;
  position: absolute;
  border-radius: 50%;
  right: 2px;
  bottom: 2px;
}
.header-sec-wrapper .header-sec .notify-wrapper .notify li.notify-ico .dropdown.dot-dropdown .dropdown-menu li .notify-content-wrapper .notify-content .notify-grp .notify-grp-img.yellow {
  position: relative;
}
.header-sec-wrapper .header-sec .notify-wrapper .notify li.notify-ico .dropdown.dot-dropdown .dropdown-menu li .notify-content-wrapper .notify-content .notify-grp .notify-grp-img.yellow::before {
  content: "";
  background-color: var(--ffffff);
  height: 12px;
  width: 12px;
  position: absolute;
  border-radius: 50%;
  right: 0px;
  bottom: 0px;
}
.header-sec-wrapper .header-sec .notify-wrapper .notify li.notify-ico .dropdown.dot-dropdown .dropdown-menu li .notify-content-wrapper .notify-content .notify-grp .notify-grp-img.yellow::after {
  content: "";
  background-color: var(--dfab1e);
  height: 8px;
  width: 8px;
  position: absolute;
  border-radius: 50%;
  right: 2px;
  bottom: 2px;
}
.header-sec-wrapper .header-sec .notify-wrapper .notify li.notify-ico .dropdown.dot-dropdown .dropdown-menu li .notify-content-wrapper .notify-content .notify-grp .notify-text p {
  font-weight: 14px;
  font-weight: 400;
  margin: 0px;
}
.header-sec-wrapper .header-sec .notify-wrapper .notify li.notify-ico .dropdown.dot-dropdown .dropdown-menu li .notify-content-wrapper .notify-content .notify-grp .notify-text p span {
  color: var(--x3082ff);
}
.header-sec-wrapper .header-sec .notify-wrapper .notify li.notify-ico .dropdown.dot-dropdown .dropdown-menu li .notify-content-wrapper .notify-content .notify-grp .notify-text p:first-child {
  font-size: 16px;
  font-weight: 700;
  color: var(--x262d37);
}
.header-sec-wrapper .header-sec .notify-wrapper .notify li.notify-ico .dropdown.dot-dropdown .dropdown-menu li .notify-content-wrapper .notify-content .notify-time {
  width: 85px;
}
.header-sec-wrapper .header-sec .notify-wrapper .notify li.prof-pic-status .dropdown.dot-dropdown .selector-btn {
  opacity: 1;
}
.header-sec-wrapper .header-sec .notify-wrapper .notify li.prof-pic-status .dropdown.dot-dropdown .dropdown-menu {
  position: relative;
  left: -145px !important;
  top: 20px !important;
}
.header-sec-wrapper .header-sec .notify-wrapper .notify li.prof-pic-status .dropdown.dot-dropdown .dropdown-menu li {
  margin: 0px;
}
.header-sec-wrapper .header-sec .notify-wrapper .notify li.selector-wrapper .dropdown.dot-dropdown .selector-btn {
  opacity: 1;
  border: 1px solid rgba(72, 83, 98, 0.08);
  padding: 8px 10px;
}
.header-sec-wrapper .header-sec .notify-wrapper .notify li.selector-wrapper .dropdown.dot-dropdown .dropdown-menu {
  position: relative;
  left: 0px !important;
  top: 15px !important;
  min-width: 105px;
  width: 105px;
  padding: 0px;
}
.header-sec-wrapper .header-sec .notify-wrapper .notify li.selector-wrapper .dropdown.dot-dropdown .dropdown-menu li {
  margin: 0px;
  padding: 8px 20px;
}
.header-sec-wrapper .header-sec .notify-wrapper .notify li.selector-wrapper .dropdown.dot-dropdown .dropdown-menu li .dp-sub-item {
  font-size: 14px;
  font-weight: 600;
}
.header-sec-wrapper .header-sec .notify-wrapper .notify li.selector-wrapper .dropdown.dot-dropdown .dropdown-menu li .dp-sub-item .co-img {
  margin-top: -3px;
  margin-left: 5px;
  border-radius: 20px;
}
.header-sec-wrapper hr {
  background: var(--ffffff);
  border: 1px solid rgba(71, 82, 97, 0.08);
}

.logoutform button {
  background: none;
  border: none;
}

/*==============================
** Feature Scss
==============================*/
.feature-sec-wrapper {
  margin: 20px 0px;
}
.feature-sec-wrapper.filter {
  margin-top: 0px;
  margin-bottom: 3g0px !important;
}
.feature-sec-wrapper .feature-sec {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.feature-sec-wrapper .feature-sec .user-role-sec-wrapper .user-role-sec {
  display: flex;
  align-items: center;
  margin-bottom: 0px;
}
.feature-sec-wrapper .feature-sec .user-role-sec-wrapper .user-role-sec li {
  margin: 0px 15px 0px 0px;
}
.feature-sec-wrapper .feature-sec .user-role-sec-wrapper .user-role-sec li .dropdown button {
  outline: none;
}
.feature-sec-wrapper .feature-sec .user-role-sec-wrapper .user-role-sec li .dropdown-menu {
  top: 10px !important;
  width: 320px;
  left: 26px !important;
}
.feature-sec-wrapper .feature-sec .user-role-sec-wrapper .user-role-sec li .dropdown-menu li {
  margin: 0px;
}
.feature-sec-wrapper .feature-sec .user-role-sec-wrapper .user-role-sec li .dropdown-menu li.search-bar-wrapper {
  padding: 0px;
  margin-bottom: 10px;
}
.feature-sec-wrapper .feature-sec .user-role-sec-wrapper .user-role-sec li .dropdown-menu li.search-bar-wrapper:hover {
  background-color: var(--ffffff);
}
.feature-sec-wrapper .feature-sec .user-role-sec-wrapper .user-role-sec li .dropdown-menu li.search-bar-wrapper .search-bar form input {
  width: 85%;
}
.feature-sec-wrapper .feature-sec .user-role-sec-wrapper .user-role-sec li .dropdown-menu li .dp-sub-item img {
  border: 1px solid var(--cararra);
  border-radius: 20px;
  padding: 2px;
}
.feature-sec-wrapper .feature-sec .current-user-sec-wrapper .current-user-sec h4 {
  font-weight: 700;
  font-size: 16px;
  line-height: 24px;
  margin-bottom: 0px;
}
.feature-sec-wrapper .feature-sec .current-user-sec-wrapper .current-user-sec p {
  font-size: 14px;
  line-height: 14px;
  margin: 2px 0px;
}
.feature-sec-wrapper .feature-sec .func-wrapper .func {
  display: flex;
  align-items: center;
}
.feature-sec-wrapper .feature-sec .func-wrapper .func .sorted-sec-wrapper .sorted-sec {
  display: flex;
  align-items: center;
  background-color: transparent;
  border-radius: 10px;
  padding: 5px;
  border: 1px solid rgba(72, 83, 98, 0.08);
  color: var(--x475261);
  margin-bottom: 0px;
}
.feature-sec-wrapper .feature-sec .func-wrapper .func .sorted-sec-wrapper .sorted-sec li {
  padding: 4px 6px 4px 6px;
  cursor: pointer;
  transition: all 0.5s;
}
.feature-sec-wrapper .feature-sec .func-wrapper .func .sorted-sec-wrapper .sorted-sec li a i {
  font-size: 18px;
  color: var(--x475261);
  transition: all 0.5s;
}
.feature-sec-wrapper .feature-sec .func-wrapper .func .sorted-sec-wrapper .sorted-sec li a svg path {
  stroke: #475261;
}
.feature-sec-wrapper .feature-sec .func-wrapper .func .sorted-sec-wrapper .sorted-sec li:first-child {
  margin-right: 5px;
  padding: 5.5px 6px 5.5px 6px;
}
.feature-sec-wrapper .feature-sec .func-wrapper .func .sorted-sec-wrapper .sorted-sec li.active, .feature-sec-wrapper .feature-sec .func-wrapper .func .sorted-sec-wrapper .sorted-sec li:hover {
  background-color: rgba(48, 130, 255, 0.1);
  border-radius: 4px;
}
.feature-sec-wrapper .feature-sec .func-wrapper .func .sorted-sec-wrapper .sorted-sec li.active a i, .feature-sec-wrapper .feature-sec .func-wrapper .func .sorted-sec-wrapper .sorted-sec li:hover a i {
  color: var(--x3082ff);
}
.feature-sec-wrapper .feature-sec .func-wrapper .func .sorted-sec-wrapper .sorted-sec li.active a svg path, .feature-sec-wrapper .feature-sec .func-wrapper .func .sorted-sec-wrapper .sorted-sec li:hover a svg path {
  stroke: #3082FF;
}
.feature-sec-wrapper .feature-sec .func-wrapper .func .filter-wrapper .filter .selector-btn {
  font-weight: 600;
  color: var(--x475261);
  padding: 10px 15px;
}
.feature-sec-wrapper .feature-sec .func-wrapper .func .filter-wrapper .filter .selector-btn span img {
  margin-left: 10px;
}

@media (max-device-width: 1600px) {
  .feature-sec-wrapper .feature-sec .user-role-sec-wrapper .user-role-sec.response-btn {
    overflow: auto;
    white-space: nowrap;
    max-width: 500px;
  }
}
.settings-wrap {
  width: 550px;
  background: #ffffff;
  border: 1px solid rgba(71, 82, 97, 0.1);
  box-sizing: border-box;
  box-shadow: 0px 10px 40px rgba(71, 82, 97, 0.06);
  border-radius: 10px;
  padding: 30px;
  margin-top: 40px;
}
.settings-wrap h4 {
  font-weight: bold;
  font-size: 18px;
  line-height: 24px;
  margin-bottom: 20px;
  color: #262d37;
}
.settings-wrap .tabs-wrap {
  display: flex;
  align-items: center;
  border: none;
}
.settings-wrap .tabs-wrap .nav-item {
  margin-right: 20px;
}
.settings-wrap .tabs-wrap .nav-link:hover,
.settings-wrap .tabs-wrap .nav-link:focus {
  border-color: transparent;
}
.settings-wrap .tabs-wrap .nav-link {
  font-weight: 600;
  font-size: 14px;
  line-height: 14px;
  background: #ffffff;
  border: 1px solid rgba(71, 82, 97, 0.1);
  box-sizing: border-box;
  box-shadow: 0px 10px 40px rgba(71, 82, 97, 0.06);
  border-radius: 8px;
  padding: 14px 15px;
}
.settings-wrap .tabs-wrap .nav-link.active {
  border-color: rgba(48, 130, 255, 0.6);
}

.image-input {
  margin-bottom: 16px;
}
.image-input .image-input-wrapper {
  width: 90px;
  height: 90px;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 50%;
}

.settings-tab-body .profile-title,
.settings-tab-body .form-group > label {
  font-style: normal;
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  margin-bottom: 16px;
}
.settings-tab-body .form-control {
  height: 46px;
  background: #ffffff;
  border: 1px solid rgba(71, 82, 97, 0.1);
  box-sizing: border-box;
  border-radius: 6px;
  font-weight: 600;
  font-size: 14px;
  line-height: 14px;
  opacity: 0.9;
}
.settings-tab-body .tab-body-wrap {
  height: 520px;
  overflow-y: auto;
}
.settings-tab-body .tab-body-wrap .password-btn-wrap {
  display: flex;
  align-items: end;
  height: 185px;
}

.group-manage {
  height: 520px;
  overflow-y: auto;
}
.group-manage__title {
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  margin-bottom: 10px;
}
.group-manage ul {
  padding-left: 0;
}
.group-manage ul li {
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #ffffff;
  border: 1px solid rgba(71, 82, 97, 0.1);
  box-sizing: border-box;
  border-radius: 6px;
  padding: 16px;
  margin-bottom: 16px;
  font-weight: 600;
  font-size: 14px;
  line-height: 14px;
  opacity: 0.9;
}
.group-manage ul li:last-child {
  margin-bottom: 0;
}

.group-manage::-webkit-scrollbar {
  width: 8px;
}

.group-manage::-webkit-scrollbar-track {
  box-shadow: none;
}

.group-manage::-webkit-scrollbar-thumb {
  background-color: var(--azure-radiance);
  border-radius: 6px;
}

/* --- Backend ---*/
.backend-report-header {
  margin-top: 23px;
}
.backend-report-header .card {
  background: #FFFFFF;
  border: 1px solid rgba(71, 82, 97, 0.1);
  box-sizing: border-box;
  box-shadow: 0 8px 40px rgba(71, 82, 97, 0.04);
  border-radius: 10px;
}
.backend-report-header .btn-outline-dark {
  background: #FFFFFF;
  border: 1px solid rgba(71, 82, 97, 0.06);
  box-sizing: border-box;
  border-radius: 6px;
  font-size: 14px;
  font-family: inherit;
  display: flex;
  align-items: center;
  align-content: center;
  padding: 15px 25px;
}
.backend-report-header .btn-outline-dark:first-child span {
  margin-left: 4px;
}
.backend-report-header .btn-outline-dark:nth-child(2) span {
  margin-right: 5px;
}

.backend-report-body .table-bordered {
  border: 0;
  border-spacing: 0 !important;
}

/* --- Front end ---*/
.frontend-report__container {
  width: 1150px;
}
.frontend-report__container .button-wrap .date-btn {
  border: 1px solid rgba(71, 82, 97, 0.1);
  border-radius: 10px;
}
.frontend-report__container .button-wrap .date-btn button {
  padding: 10px 10px 12px 10px;
}
.frontend-report__container .button-wrap .date-btn .date {
  font-weight: 600;
  font-size: 16px;
  line-height: 16px;
  margin-top: 0px;
}
.frontend-report__container .row .event-desc {
  border: 1px solid rgba(71, 82, 97, 0.1);
  border-radius: 10px;
  padding: 20px;
  font-weight: 600;
  font-size: 14px;
  line-height: 14px;
}
.frontend-report__container .row .event-desc p {
  padding-bottom: 20px;
}
.frontend-report__container .row .event-desc .form-group {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.frontend-report__container .row .event-desc .form-group input {
  width: 120px;
  height: 30px !important;
  padding: 10px !important;
  border-radius: 0 !important;
  background-color: transparent;
  border: none;
  border-bottom: 1px solid rgba(71, 82, 97, 0.1);
  margin-top: -10px;
}
.frontend-report__container .row .event-desc ul {
  padding: 0;
  margin: 0;
}
.frontend-report__container .row .event-desc ul li {
  display: flex;
  list-style: none;
  border-bottom: 1px solid rgba(71, 82, 97, 0.1);
}
.frontend-report__container .row .event-desc ul li .time {
  padding: 14px 20px;
  border-right: 1px solid rgba(71, 82, 97, 0.1);
  white-space: nowrap;
}
.frontend-report__container .row .event-desc ul li .desc {
  padding: 14px 20px;
}
.frontend-report__container .row .event-desc ul li p {
  padding: 0;
  margin: 0;
}
.frontend-report__container .row .event-desc ul li:last-child {
  border-bottom: none;
}