@import url("https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;700&family=Quicksand:wght@300;400;500;600;700&display=swap");

:root {
  --si-purple: rgb(126 34 206);
  --si-dark-purple: rgb(107 33 168);
  --si-darkest-purple: #130e1c;
  --si-highlight: #67acc7;
  --si-light: #ffffff;
  --si-lightish: #f3f3f3;
  --si-dark: #1d252d;
  --si-black: #000000;
  --si-card: #171521;
  --si-card-border: #2f2b36;
}

html {
  --body-background-color: #ffffff;
  --body-text-color: #7a86a1;
  --body-background-dot-color: rgba(0, 0, 0, 0.15);
  --header-background-color: #ffffff;
  --header-slash-color: var(--si-dark);
  --nav-text-color: var(--si-dark);
  --card-background-color: #ffffff;
  --card-border-color: rgba(255, 255, 255, 0);
  --card-figure-color: #000;
  --table-header-background-color: #f6efff;
  --page-name-color: #000000;
  --offcanvas-background-color: #f6efff;
  --offcanvas-color: #000000;
  --si-text-muted: #6c757d;
  --calendar-border-color: #e1e8ef;
  --badge-background-color: #f6efff;
  --badge-text-color: var(--si-purple);
}

html[data-theme="dark"] {
  --body-background-color: var(--si-darkest-purple);
  --body-text-color: #d7d5d5;
  --body-background-dot-color: rgba(255, 255, 255, 0.15);
  --header-background-color: var(--si-darkest-purple);
  --header-slash-color: var(--si-lightish);
  --nav-text-color: var(--si-lightish);
  --card-background-color: var(--si-card);
  --card-border-color: var(--si-card);
  --card-figure-color: #d7d5d5;
  --table-header-background-color: #130e1c;
  --page-name-color: var(--si-light);
  --offcanvas-background-color: var(--si-darkest-purple);
  --offcanvas-color: var(--si-light);
  --si-text-muted: #8b8b8b;
  --calendar-border-color: #3c2860;
}

html[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(2n+1), html[data-theme="dark"] .btn {
  --bs-table-accent-bg: #4e3e6259;
  color: #d2d0d0;
}

/* Hide scrollbar in Firefox */
* {
  scrollbar-width: none;
}

/* Hide scrollbar in Webkit browsers */
*::-webkit-scrollbar {
  width: 0;
}

/* Style scrollbar track */
*::-webkit-scrollbar-track {
  background-color: transparent; /* Set background color to transparent */
}

/* Style scrollbar thumb */
*::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.5); /* Set thumb color */
  border-radius: 10px; /* Add border-radius for thumb */
}


body {
  font-family: "Quicksand", sans-serif;
  background-color: var(--body-background-color);
  color: var(--body-text-color);
  min-height: 100vmin;
  margin: 0;
  background-image: radial-gradient(
    var(--body-background-dot-color) 1px,
    transparent 0
  );
  background-size: 40px 40px;
  background-position: 0 -19px;
}
.btn:focus,
a:focus {
  outline: none !important;
  box-shadow: none !important;
}

a {
  color: var(--body-text-color);
  text-decoration: none;
}
a:hover {
  color: var(--si-purple);
  text-decoration: underline;
}
textarea {
    resize: none;
}

.text-small {
  font-size: 0.8rem;
}

table span.text-small {
  overflow: hidden;
  text-overflow: ellipsis;
}

.btn-dashed {
    border: 1px dashed #c6c6c6;
    color: var(--body-text-color);
}

.modal-backdrop:nth-of-type(odd) {
    _z-index: 1055 !important;
}

.text-muted {
    color: var(--si-text-muted)!important;
} 

.text-purple {
  color: var(--si-purple);
}
.bg-purple {
  background-color: var(--si-purple) !important;
}
.bg-hightlight {
  background-color: var(--si-highlight) !important;
}
.bg-primary-gradient {
  background-color: var(--cui-primary, #2e8ae6);
  background-image: linear-gradient(45deg, #70b8ff 0%, #2e8ae6 100%);
}
.bg-warning-gradient {
  background-color: var(--cui-warning, #e6b800);
  background-image: linear-gradient(45deg, #ffdb4d 0%, #e6b800 100%);
  color: var(--si-dark);
}
.bg-purple-gradient {
  background-color: var(--cui-warning, #e6b800);
  background-image: linear-gradient(
    45deg,
    #fff 0%,
    var(--si-darkest-purple) 100%
  );
}

.bg-primary {
    background-color: var(--si-purple) !important;
}

.btn.btn-primary {
  background-color: var(--si-purple);
  border-color: var(--si-purple);
  color: var(--si-light);
}
.btn.btn-primary:hover {
  background-color: var(--si-dark-purple);
  border-color: var(--si-dark-purple);
  color: var(--si-light);
}
.btn-xs {
  font-size: 0.7rem;
  line-height: 1.2rem;
  padding: 0.1rem 0.3rem;
  text-transform: uppercase;
}

.notifications .btn {
    color: var(--nav-text-color);
}

.notifications .btn-group .btn {
  padding: 0;
  font-size: 1.25rem;
}

.notifications .btn-group .badge {
  position: absolute;
  transform: translate(-50%, -20%);
  border-radius: 50%;
  font-size: 0.65rem;
  background-color: #fa6767;
}

.minh-400 {
  min-height: 400px;
}

header {
  border-bottom: 2px solid rgba(210, 210, 210, 0.4);
  background-color: var(--header-background-color);
}

header .brand img {
  height: 25px;
  margin-right: 10px;
}
[data-theme="light"] header .brand .logo.light {
    display: none !important;
}
[data-theme="dark"] header .brand .logo.dark {
    display: none !important;
}
header .brand h2 {
  font-size: 1.2rem;
  margin: 0;
}
header .slash {
  color: var(--header-slash-color);
}

header .club-name label,
header .club-name button,
header .club-name button:hover {
  font-size: 0.9rem;
  line-height: 0.9rem;
  margin: 0;
  color: var(--body-text-color);
  outline: none;
}
header .club-name .dropdown-menu ul {
  max-height: 200px;
  overflow-y: auto;
}

.dropdown-menu {
    padding: 0;
}
.dropdown-menu .dropdown-item:hover {
    background-color: var(--table-header-background-color);
    color: var(--offcanvas-color);
}
.dropdown-menu .dropdown-item.active, .dropdown-menu .dropdown-item.active:hover {
    background-color: var(--si-purple);
}

header nav {
  margin-top: 0px;
  margin-bottom: -2px !important;
}
header nav .nav-link {
  color: var(--nav-text-color);
  padding-top: 0;
  padding-bottom: 0;
  font-size: 0.9rem;
  line-height: 2rem;
  border-bottom: 2px solid transparent;
  /* background-color: var(--header-background-color) !important; */
}
header nav .nav-link:hover,
header nav .nav-link.active {
  color: var(--nav-text-color);
}
header nav .nav-link.active {
  border-bottom: 2px solid var(--si-highlight);
}

main {
  margin-top: 30px;
}
main h2.page-name {
  margin-bottom: 1rem;
  color: var(--page-name-color);
  text-transform: lowercase;
}

.card {
  background-color: var(--card-background-color);
  border: 1px solid var(--card-border-color);
  border-radius: 15px;
  margin-bottom: 1.5rem;
  overflow: hidden;
}
.card-header {
  padding: 1rem 1rem 0.5rem 1rem;
  background-color: unset !important;
  border: none;
}

.card .card-title {
  font-size: 1rem;
  text-transform: capitalize !important;
  margin-bottom: 0;
  font-weight: 400;
}

.card .card-figure, .activity-name  {
  font-size: 1.5rem;
  line-height: 1.2;
  font-weight: 500;
  margin-bottom: 0;
  color: var(--card-figure-color);
}

.card-body p:last-child {
  margin-bottom: 0;
}

.card-body .chart {
    min-height: 300px;
}

a.dropdown-item:hover {
    text-decoration: none;
}

.shadow3d {
  box-shadow: 2px 2px 2px black;
}
.grad-border {
  border-image: linear-gradient(45deg, var(--si-highlight), var(--si-purple));
  border-style: solid;
  border-image-slice: 1;
  border-width: 1px;
}

.icon {
  width: 3rem;
  height: 3rem;
}

.icon i {
  font-size: 2.25rem;
}

.icon-shape {
  display: inline-flex;
  padding: 12px;
  text-align: center;
  align-items: center;
  justify-content: center;
}

.icon-shape i {
  font-size: 1.25rem;
}

.icon.icon-shape.rounded {
    border-radius: 1.15rem !important;
}
.icon.icon-shape.square {
    border-radius: 0 !important;
}
.icon.icon-shape.circle {
    border-radius: 50% !important;
}

.info-icon {
    display: inline-block;
    width: 20px;
    text-align: left;
}

.table {
  --bs-table-striped-bg: #f6efff59;
  color: var(--body-text-color);
  margin-bottom: 0;
  font-size: 0.9rem;
  line-height: 1.3rem;
}
.table > :not(caption) > * > * {
  border-style: none;
  padding: 0.9rem 1rem;
  vertical-align: top;
}
.table th, .table tfoot td {
  background-color: var(--table-header-background-color);
  /* text-transform: uppercase; */
  font-weight: 500;
}
.table tbody tr {
  color: var(--card-figure-color);
}

.modal-content {
    background-color: var(--offcanvas-background-color);
    color: var(--offcanvas-color);

    textarea {
        min-height: 92px;
    }
}
.offcanvas {
  background-color: var(--offcanvas-background-color);
  color: var(--offcanvas-color);
  width: 500px;
  max-width: calc(100%-20px);
  margin: 10px;
  border-radius: 20px;
  overflow: hidden;
}

/* ================================    Avtar Start  ===================== */
.avtar {
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 18px;
  width: 48px;
  height: 48px;
}

.avtar.avtar-xs {
  width: 32px;
  height: 32px;
  font-size: 12px;
}

.avtar.avtar-s {
  width: 40px;
  height: 40px;
  font-size: 14px;
}

.avtar.avtar-l {
  width: 64px;
  height: 64px;
  font-size: 20px;
}

.avtar.avtar-xl {
  width: 80px;
  height: 80px;
  font-size: 24px;
}

.avtar.avtar-square {
  border-radius: 4px;
  border-width: 2px;
}

.avtar.avtar-icon {
  border: 2px solid #d7dfe9;
}

.avtar.avtar-icon > img {
  width: 60%;
}

/* ================================    Avtar End  ===================== */

.card {
  box-shadow: 0 .1rem 1.2rem rgba(55, 35, 85, 0.1) !important;
  border-width: 0 !important;
}

.card:hover {
  box-shadow: 0 .1rem 1.2rem rgba(126, 34, 206, 0.3) !important;
}

/* #8e5bda -> #cb7ae6 */

.card.gradient {
  background: linear-gradient(45deg, #8e5bda, #cb7ae6);
  color: white;
}

/** Card Styles **/

.card.style-1 {
  background-color: #fff4f2;
  color: black;
  text-align: center;
  background-image: url(/image/pink-tube.png);
  background-size: 70% auto;
  background-position: -10px 50%;
  background-repeat: no-repeat;
}
.card.style-1 .card-body {
  padding-top: 50px;
  padding-bottom: 50px;
}
.card.style-1 .btn {
  margin-top: 30px;
  display: inline-block;
  padding: 0.3rem 1rem;
  border-radius: 0.75rem;
  font-size: 0.8rem;
}

.card.style-2 {
  background-image: url(/image/orange-ball.png), url(/image/grey-dots.png),
    linear-gradient(45deg, #8e5bda, #cb7ae6);
  background-repeat: no-repeat;
  background-size: 86px 92px, 33% auto, cover;
  background-position: -20px -10px, bottom -35px right -10px, center;
  color: white;
}
.card.style-2 .card-body {
  padding-left: 70px;
}
.card.style-2 .card-figure {
  color: white;
}

.card.style-3 .card-title {
  color: black;
}
.card.style-3 .card-figure {
  font-size: 1rem;
  color: #7986a0;
}
.card.style-3 .badge {
  background-color: var(--offcanvas-background-color);
  color: black;
  padding: 0.4rem 1rem;
  border-radius: 4rem;
}

.card.style-4 {
  background-image: url(/image/ring.png), url(/image/dot-doughnut.png),
    url(/image/grey-dots.png), linear-gradient(45deg, #8e5bda, #cb7ae6);
  background-repeat: no-repeat;
  background-size: 60% auto, 33% auto, auto 60%, cover;
  background-position: -50px -50px, bottom -50px right 33%, center right -50px,
    center;
  text-align: center;
  color: white;
}
.card.style-4 .card-body {
  padding-top: 50px;
  padding-bottom: 50px;
}
.card.style-4 .card-title {
  font-size: 1.65rem;
  font-weight: 500;
  line-height: 1.2;
  margin-bottom: 13px;
}
.card.style-4 .card-figure {
  color: white;
  font-size: 1rem;
  line-height: 1rem;
}
.card.style-4 .btn {
  background-color: white;
  color: #5f46c9;
  margin-top: 30px;
  display: inline-block;
  padding: 0.3rem 1rem;
  border-radius: 0.75rem;
  font-size: 0.8rem;
  font-weight: bold;
}

.card.style-5 {
  background-color: #f6efff;
  background-image: url(/image/rect-3d-pink.png), url(/image/pink-dots.png);
  background-repeat: no-repeat;
  background-position: bottom -50px right 33%, bottom -20px right -50px;
}
.card.style-5 .card-body {
  padding-top: 50px;
  padding-bottom: 50px;
}

.card.style-6 {
  background-color: #fff4f2;
  background-image: url(/image/spiral-pink.png);
  background-repeat: no-repeat;
  background-size: 30% auto;
  background-position: bottom -30px right -10px;
}
.card.style-6 .card-figure {
  color: #7b7b7b;
}
.card.style-6 .card-body {
  padding-top: 30px;
  padding-bottom: 50px;
  color: #2f2b36;
}

.card .badge { 
  /*
    position: absolute;
    right: 15px;
    top: 15px;
  */
}

.badge {
    line-height: 1.1;
}

.sticker {
  background-color: #5f46c9;
  display: block;
  width: 50px;
  height: 50px;
  border-radius: 17px;
  background-repeat: no-repeat;
  background-size: 80%;
}
.sticker.sticker-1 {
  background-image: url(/image/cube-sm.png);
  background-position: top -10px right -8px;
}
.sticker.sticker-2 {
  background-image: url(/image/pyramid-sm.png);
  background-position: bottom -10px right -3px;
}
.sticker.sticker-3 {
  background-image: url(/image/cylinder-sm-pink.png);
  background-position: center left -8px;
}

/** End Card Styles **/

/** Person Profile Popout **/
.person-container {
    background-image: url(/image/profile-popout-header-dark.png);
    background-size: 100% auto;
    background-position: center -40px;
    background-repeat: no-repeat;
}
[data-theme="light"] .person-container {
    background-image: url(/image/profile-popout-header.png);
}

.person-profile {
    text-align: left;
    padding: 0 1rem;
}

.person-profile h6 {
    text-transform: uppercase;
}

.person-profile .info {
    list-style: none;
    padding: 0 0 0 0.5rem;
    margin-bottom: 1rem;
    font-size: .92rem;
}

.person-profile .info li {
    margin-bottom: 0.5rem;
}
.person-profile .info li .bi {
    margin-right: 0.5rem;
}

/** End Person Profile Popout **/

/** Calendar View **/

#EventView {
    position: absolute;
    left: 0;
    right: 0;
    overflow-x: clip;
    padding-bottom: 50px;
}

#EventView .day-container .date {
    padding: 15px;
    background-color: var(--table-header-background-color);
    border-bottom: 1px solid var(--body-background-dot-color);
    border-top: 1px solid var(--body-background-dot-color);
}

#EventView .day-container .date .activity-name {
    font-size: 1.5rem;
}

#EventView .day-container .day {
    width: 350px;
    float: left;
    border-right: 1px solid var(--body-background-dot-color);
    border-left: 1px solid var(--body-background-dot-color);
    border-bottom: 1px solid var(--body-background-dot-color);
}

#EventView .day-container .day .activity-name {
    font-size: 1.5rem;
}

#EventView .event {
    padding: 15px;
    border-bottom: 1px solid var(--body-background-dot-color);
    background-color: var(--body-background-color);
}

#EventView .event .spaces {
    font-weight: bold;
}

/** End Calendar View **/


/** Message Editor **/

.browser {
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 1.5rem 3rem rgba(0,0,0,.175)!important;
}

.browser-header {
    background-color: var(--table-header-background-color);
    padding: .25rem .25rem .5rem .25rem;
}

.browser-header .bi-circle-fill {
    font-size: .7rem;
    margin-left: .2rem;
}
.browser-header .bi-circle-fill:first-child {
    margin-left: .7rem;
}

.browser .body {
    background-color: #fff;
    min-height: 300px;
}

/** End Message Editor **/

.badge.rounded-pill {
  background-color: var(--badge-background-color);
  color: var(--badge-text-color);
  font-weight: 500;
}
.badge.rounded-pill .bi {
  font-size: .85rem;
}

.page-stats {
  margin-top: 1rem;
}
.page-stats h3 {
  font-size: 1.3rem;
  margin-bottom: 0;
}
.page-stats .activity-name {
  font-size: 2.65rem;
}

button.button {
  background-color: var(--card-background-color);
  color: var(--body-text-color);
  box-shadow: 0.1rem 0.2rem 1rem rgba(55, 35, 85, 0.2) !important;
  border-width: 0 !important;
  line-height: 1;
  padding: 5px 25px 5px 15px;
  border-radius: 20px;
  display: flex;
  align-items: center;
}
button.button i {
  font-size: 2rem;
}

button.button:hover {
  background-color: var(--table-header-background-color)
}

.btn.btn-outline {
  border: 1px solid #e1e8ef;
  border-radius: 20px;
}

.input-group {
    flex-wrap: unset;
}
.input-group .input-group-text {
  background-color: white;
  border-color: #e1e8ef;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}
.input-group .input-group-text.disabled {
    background: #e9ecef;
}
.input-group .form-control, .input-group .form-select, .form-floating .form-control { 
  border-left: none;
  border-color: #e1e8ef;
  border-radius: 0;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  padding-left: 3px;
}
.form-floating > label {
    padding-left: 0;
}

.form-floating label {
    color: #000;
}


textarea:focus, 
textarea.form-control:focus, 
input.form-control:focus, 
select.form-select:focus, 
input[type=text]:focus, 
input[type=password]:focus, 
input[type=email]:focus, 
input[type=number]:focus, 
input[type=checkbox]:focus, 
[type=text].form-control:focus, 
[type=password].form-control:focus, 
[type=email].form-control:focus, 
[type=tel].form-control:focus, 
[type=checkbox].form-control:focus, 
[contenteditable].form-control:focus {
  box-shadow: inset 0 0px 0 #ddd;
}

table .form-check-input {
  width: 1.3rem;
  height: 1.3rem;
}

.form-check-input:checked {
  background-color: var(--si-purple);
  border-color: var(--si-purple); 
}

.calendar { 
  
}
.calendar .day {
  text-align: center; 
  margin-bottom: 40px;
} 
.calendar .day b {
  display: block;
  font-size: 1.5rem;
} 
.calendar .day span {
  display: block;
  margin-bottom: 5px;
}
.calendar .day a {
  display: inline-block;
  padding: 0.5rem 1rem;
  border-radius: 18px;
  text-decoration: none;
}
.calendar .day a.active {
  background-color: var(--si-purple);
  color: white;
}
.calendar .day a:hover {
  background-color: var(--table-header-background-color);
} 
.calendar .day a.active:hover {
  background-color: var(--si-purple);
} 
.calendar .time-row {
  height: 90px; 
} 
.calendar .time {
  width: 70px;
  padding-left: 15px; 
} 
.calendar .time b {
  display: block; 
  margin-top: -12px;
}
.calendar .spacer {  
  width: 15px;
  border-top: 1px dashed var(--calendar-border-color);
}   
.calendar .slots {
  background-color: var(--card-background-color);
  border: 1px solid var(--calendar-border-color); 
  border-top-style: dashed;
  border-bottom-style: none;
} 
.slot-15 {
  display: block;
  height: 22.5px; 
  width: 100%; 
  cursor: pointer; 
}
.slot-15:hover {
  background-color: var(--table-header-background-color);
}
.calendar .events { 
  position: absolute; 
  top: 180px;
  left: 120px; 
  right: 35px; 
  border: none;
  bottom: 15px;
  pointer-events: none;  
} 
.calendar .events .event {
  position: absolute;
  border-radius: 10px;
  padding: 5px 10px;
  color: white;
  pointer-events: all;
  opacity: 0;
  color: black; 
  transition: opacity 0.3s ease-in-out;
  min-height: 55px;
  min-width: 220px;
  text-decoration: none;
} 
.calendar .events .event[data-calendar="3"] {
  min-width: 180px;
}
.calendar .events .event.show {
  opacity: .85;
}


.calendar .events .event:hover {
  background-color: var(--si-purple)!important;
  color: white;
  z-index: 999;
  cursor: pointer;
  opacity: .95;
} 

.calendar .events .event .additional {
  display: none;
}
.calendar .events .event:hover .additional {
  display: block;
}

.calendar .events .event:hover .text-muted {
  color: white!important;
}
.calendar .events .event p {
  margin: 0;
}


.person-container .btn.edit {
  position: absolute;
  right: 15px;
  top: 220px;
}

.input-group {
  margin-bottom: 5px;
}
.input-group-prepend {
  display: flex!important;
} 
.input-group-prepend .input-group-text {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.mailbox.nav {
    margin-top: 1rem;
    margin-bottom: 1rem;
    min-width: 200px;
}

.mailbox.nav .nav-item a {
    display: flex;
    align-items: center;
    padding: 7px 14px;
}
.mailbox.nav .nav-item a:hover {
    text-decoration: none;
    background-color: var(--table-header-background-color);
}

.mailbox.nav .nav-item.active a {
    color: var(--si-purple);
    background-color: var(--table-header-background-color);
}

.mailbox.nav .nav-item a i {
    width: 25px;
}

.timeline {
    border-left: 1px solid var(--body-background-dot-color);
    position: relative;
    list-style: none;
    margin-left: 1rem;

    .timeline-item {
        margin-bottom: 3rem;

        .icon {
            position: absolute;
            left: -1rem;
            background-color: hsl(217, 88.2%, 90%);
            color: hsl(217, 88.8%, 35.1%);
            border-radius: 50%;
            height: 31px;
            width: 31px;
            display: flex;
            align-items: center;
            justify-content: center;
        
            i {
                font-size: 1rem;
            }
        }

    }

}


.mailbox.structures .nav-item {
    height: 36px;
}

.row.structure {
    width: 100%;
}

.row.structure .col, .row.structure .col-8 {
    padding: 10px;
    border: 1px dashed rgba(0, 0, 0, 0.4);
}

.dropHere {
    border: 2px dashed rgba(0, 0, 0, 0.4);
    padding: 0 10px;
    border-radius: 7px;
    text-align: center;
    font-size: 1.1rem;
    color: rgba(0, 0, 0, 0.4);
    background-color: rgba(0, 0, 0, 0.03);
}

.email-structure {
    font-family: Arial, sans-serif;
    color: #000;
    position: relative;
    font-size: 1em;

}

.email-structure h1 {
    font-size: 2em;
}
.email-structure h2 {
    font-size: 1.5em;
}
.email-structure h3 {
    font-size: 1.17em;
}
.email-structure p {
    font-size: 1em;
}

.email-structure .options {
    background-color: white;
    border-radius: 5px;
    position: absolute;
    right: 10px;
    top: 15px;
    padding: 5px;
}

.email-structure .options .btn-delete, .email-structure .options .btn-edit, .email-structure .options .btn-up, .email-structure .options .btn-down {
    border: none;
    background-color: transparent;
    color: rgba(0, 0, 0, 0.4);
}

.email-structure .options .btn-delete:hover {
    color: #ff0000;
}

.email-structure .options .btn-edit:hover, .email-structure .options .btn-up:hover, .email-structure .options .btn-down:hover {
    color: var(--si-purple);
}

.wysihtml5-editor {
    min-height: 1rem;
}

.toolbar-editor {
    display: none;
    position: absolute;
    margin-top: 5px;
    margin-left: -3px;
    padding: 5px;
    background-color: #fff;
    border-radius: 5px;
    border: 1px solid rgba(0,0,0,0.1);
    z-index: 999;

    button {
        padding: 0.25rem 0.08rem;
    }
}
#MessageEditorToolbar {
    display: none;
    visibility: hidden;
}




/** AI Assistant Dialog **/

dialog {
    min-width: 400px;
    border-radius: 5px;
    border-width: 2px;
}

#AIAssistant {
    width: 750px;
    max-width: 95%;
}

.ai-result {
    padding: 5px;
    background-color: #fff;
    border: 1px solid #e1e8ef;
    border-radius: 10px;

}

.ai-result i {
    padding-left: 6px;
    color: #6c757d;
}

.ai-result label {
    opacity: .65;
    font-size: 13px;
}
/** End AI Assistant Dialog **/

#QuickMessageDialog {
    width: 500px;
    min-height: 260px;
}

#ActivityVariantDialog {
    width: 750px;
    min-height: 260px;
}

#AmendMembershipDialog {
    background-color: #f5eefd;
}

#_ActionResult {
    width: 100%;
    height: 100%;

    .col-auto .card {
        position: sticky;
        top: 0;
    }

    .btn-close {
        position: fixed;
        right: 40px;
        top: 40px;
    }
}

#MailSettingsDialog {
    width: 600px;
    max-width: 95%;
}

#PeopleSearchDialog {
    width: 800px;
    min-height: 500px;
    padding: 0;

}

#PeopleSearchDialog form {
    position: sticky;
    top: 0;
    background-color: #fff;
    border-bottom: 1px solid var(--table-header-background-color);
}

#PeopleSearchDialog form .btn-close {
    position: absolute;
    top: 5px;
    right: 5px;
}

.settings a {
    display: block;
    text-decoration: none;
    border-radius: 15px;
    padding: 15px 15px 0 15px;
}
.settings a i {
    background-color: var(--table-header-background-color);
    width: 30px;
    height: 30px;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.settings a h5 {
    margin: 0;
}
.settings a:hover {
    background-color: var(--table-header-background-color);
}

.nav-pills .nav-link {
    color: var(--body-text-color);
}

.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
    background-color: var(--table-header-background-color);
    color: var(--si-purple);
}


.ql-editor {
    padding: 0;
}

        .ql-editor img {
            display: block;
            width: 100%;                                                     
        }

        .ql-bubble .ql-picker.ql-size .ql-picker-item[data-value="10px"]::before {
            content: 'Small';
            font-size: 10px !important;
        }

        .ql-bubble .ql-picker.ql-size .ql-picker-item[data-value="18px"]::before {
            content: 'Large';
            font-size: 18px !important;
        }

        .ql-bubble .ql-picker.ql-size .ql-picker-item[data-value="24px"]::before {
            content: 'Bigger';
            font-size: 24px !important;
        }

        .ql-bubble .ql-picker.ql-size .ql-picker-item[data-value="36px"]::before {
            content: 'Huge';
            font-size: 36px !important;
        }
        
        .ql-bubble .ql-picker.ql-size .ql-picker-label[data-value="10px"]::before {
            content: 'Small';
        }

        .ql-bubble .ql-picker.ql-size .ql-picker-label[data-value="18px"]::before {
            content: 'Large';
        }

        .ql-bubble .ql-picker.ql-size .ql-picker-label[data-value="24px"]::before {
            content: 'Bigger';
        }

        .ql-bubble .ql-picker.ql-size .ql-picker-label[data-value="36px"]::before {
            content: 'Huge';
        }

        .ql-container {
            font-size: inherit;
        }

        .ql-bubble .ql-tooltip {
            z-index: 9999;
        }

        .ql-toolbar {
            text-align: center;
        }

            #editor p { margin: 0; padding: 0; }
            .ql-align-center { text-align: center; }
            .ql.align-right { text-align: right; }


.ql-bubble .ql-tooltip {
    background-color: #fff;
    border-radius: 6px;
    color: #fff;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.ql-bubble .ql-toolbar .ql-formats {
    margin: 8px 8px 8px 0;
}

.ql-bubble.ql-toolbar button, .ql-bubble .ql-toolbar button {
    background: none;
    border: none;
    cursor: pointer;
    display: inline-block;
    float: left;
    height: 19px;
    padding: 3px 5px;
    width: 21px;
}

.ql-bubble .ql-color-picker {
    width: 24px;
    margin-top: -4px;
}

.ql-bubble .ql-icon-picker {
    width: 22px;
    margin-top: -4px;
}

.ql-bubble .ql-stroke {
    stroke: rgba(0, 0, 0, 0.4);
}

.ql-bubble .ql-fill, .ql-bubble .ql-stroke.ql-fill {
    fill: #282828;
}

button:hover .ql-stroke, button:hover .ql-fill, .ql-picker-label:hover .ql-stroke {
    stroke: #000000 !important;
}

button:focus .ql-stroke, button:focus .ql-fill, .ql-picker-label:hover .ql-stroke, .ql-bubble .ql-toolbar button.ql-active {
    color: #000000 !important;
}
.ql-bubble .ql-toolbar .ql-picker-label.ql-active .ql-stroke, .ql-bubble .ql-toolbar button.ql-active .ql-stroke {
    stroke: #000000;
}
.ql-bubble .ql-toolbar .ql-picker-label.ql-active {
    color: #000000;
}

.ql-bubble .ql-picker-options {
    background-color: #66a3e0;
}


#EmailViewerDialog {
    padding: 0;
    border: none;
    border-radius: 1rem;
}
#EmailViewerBody p {
    margin: 0;
}
#EmailViewerBody img {
    display: none;
}

.text-nowrap {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    width: 100%;
}

.new-ticket-comment {
    padding: 1rem;
    background-color: #ede5f8;
    margin: -1rem;
    margin-bottom: 1rem;
}

.comment-pad-bottom {
    padding-bottom: 160px;
}

input.no-bg {
    background: none;
    border: none;
}

select.tags {
    display: none;
}