@font-face {
  font-family: "HelveticaNeueLTArabic-Bold_2";
  src: url(./fonts/HelveticaNeueLTArabic-Bold_2.ttf);
}
@font-face {
  font-family: "HelveticaNeueLTArabic-Light_0";
  src: url(./fonts/HelveticaNeueLTArabic-Light_0.ttf);
}
@font-face {
  font-family: "HelveticaNeueLTArabic-Roman_0";
  src: url(./fonts/HelveticaNeueLTArabic-Roman_0.ttf);
}
body {
  margin: 0;
  display: block!important;
  font-family: "HelveticaNeueLTArabic-Roman_0";
}
.v-card{
  background-color: transparent!important;
}
.ql-customButton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: none;
  border: none;
  cursor: pointer;
}

.ql-customButton::before {
  content: '';
  display: inline-block;
  width: 18px;
  height: 18px;
  color: rgb(var(--v-theme-grey-900));
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-code"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M7 8l-4 4l4 4" /><path d="M17 8l4 4l-4 4" /><path d="M14 4l-4 16" /></svg>');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
#scrollRightBtn {
  float: right;
  position: absolute;
  z-index: 300;
  right: 0;
}
#scrollLeftBtn {
  z-index: 300;
  float: left;
}
.v-expansion-panel{
  background-color: transparent!important;
}
tr{
  background-color: transparent!important;
}
.v-theme--light{
  background-color: transparent!important;
}
table thead{
  background-color: transparent!important;
}
.v-list{
  background-color: transparent!important;
}

html {
  overflow-x: hidden;
  overflow-y: scroll;
}
/*.apexcharts-toolbar{
  top:-1.5rem!important;
}*/
.filter-user-date input{
  margin:auto!important;
}
#loading-bg {
  position: absolute;
  display: block;
  background: var(--initial-loader-bg, #fff);
  block-size: 100%;
  inline-size: 100%;
  text-align: center;
}

.custom-combobox {
  height: 40px; /* Adjust the height to your desired value */
}
.loading-logo {
  position: absolute;
  inset-block-start: 40%;
  inset-inline-start: calc(50% - 70px);
}

.loading {
  position: absolute;
  box-sizing: border-box;
  border: 3px solid transparent;
  block-size: 55px;
  border-radius: 50%;
  inline-size: 55px;
  inset-block-start: 50%;
  inset-inline-start: calc(50% - 35px);
}
.no-overflow-table .v-table__wrapper{
  overflow-x: hidden;
}
.p-dropdown,.p-multiselect{
  background-color: transparent!important;
}
.ticket-upload .attachment-card{
  background-color:transparent!important;
}
.ticket-add .form-group .form-control{
  min-height:44px!important;
}
.loading .effect-1,
.loading .effect-2,
.loading .effect-3 {
  position: absolute;
  box-sizing: border-box;
  border: 3px solid transparent;
  block-size: 100%;
  border-inline-start: 3px solid var(--initial-loader-color, #eee);
  border-radius: 50%;
  inline-size: 100%;
}
.no-outline .v-field__outline{
  --v-field-border-width: 0px;
   --v-field-border-opacity: unset;
}
.loading .effect-1 {
animation: rotate 1s ease infinite;
}
.w-20{
  width: 20%;
}
.w-19{
  width:19%
}
.loading .effect-2 {
animation: rotate-opacity 1s ease infinite 0.1s;
}

.loading .effect-3 {
animation: rotate-opacity 1s ease infinite 0.2s;
}

.loading .effects {
transition: all 0.3s ease;
}
.no-overflow .v-card {
overflow: hidden!important;
}
@keyframes rotate {
0% {
  transform: rotate(0deg);
}

100% {
  transform: rotate(1turn);
}
}

@keyframes rotate-opacity {
0% {
  opacity: 0.1;
  transform: rotate(0deg);
}

100% {
  opacity: 1;
  transform: rotate(1turn);
}
}
.w-80{
width: 80%!important;
}

.v-theme--dark .app-logo svg path,
.v-theme--dark .v-card-text .mb-6 svg path{
fill: #fff
}

.bg-input-date .v-field--prepended{
background-color: white;
}
.bg-input-date-dark .v-field--prepended{
background-color: #26293A;
}
.welcome-card-title{
font-size: 1.5rem;line-height: 2rem;font-family: Almarai-bold,sans-serif!important;
}
.bg-input-date .v-field__prepend-inner svg{
fill: #25314C!important;
opacity: 1!important;
}
.bg-input-date .flatpickr-input{
color:#A0AEC0!important;
}

.role-box label{
cursor: pointer;
position: relative;
margin-inline-end: 1rem;
padding-inline-start: 30px;
}

.role-box input{
position: absolute;
z-index: -1;
opacity: 0;
}
.role-box label::before{
position: absolute;
content: "";
top: 0;
left: 0;
width: 20px;
height: 20px;
border-radius: 4px;
border: 1px solid #999;
}
.role-box label::after{
position: absolute;
content: "";
top: 5px;
left: 5px;
margin: auto;
width: 12px;
height: 6px;
transform: rotate(-45deg);
border-left: 2px solid #fff;
border-bottom: 2px solid #fff;
}

.role-box input:checked +label::before{
border-color: rgb(var(--v-theme-primary)) !important;
background-color: rgb(var(--v-theme-primary)) !important;
}
[dir="rtl"] .role-box label::before{
left: auto;
right: 0;
}

[dir="rtl"] .role-box label::after{
left: auto;
right: 5px;
}
.error .v-field{
border: 1px solid red;
}
.nav-item-title{
font-weight: 600;
font-size: 14px
}
.v-table > .v-table__wrapper > table > tbody > tr > th, .v-table > .v-table__wrapper > table > thead > tr > th, .v-table > .v-table__wrapper > table > tfoot > tr > th {
user-select: none;
font-size: 1rem;
}



.v-card .v-card-title{
line-height: 2rem !important;
font-weight: 800;
}
[dir="rtl"] .v-btn{
line-height: 1;
padding-top: 0;
}
.v-btn.v-btn--density-default,
.v-btn__content{
text-transform: capitalize !important;
}
.v-avatar{
border: 1px solid #eee
}

.v-table > .v-table__wrapper > table > tbody > tr > th,
.v-table > .v-table__wrapper > table > thead > tr > th,
.v-table > .v-table__wrapper > table > tfoot > tr > th {
font-size: 1rem !important;
}
.v-table > .v-table__wrapper > table > tbody > tr > td,
.v-table > .v-table__wrapper > table > thead > tr > td,
.v-table > .v-table__wrapper > table > tfoot > tr > td {
font-size: 14px !important;
}
.text-base {
font-size: 14px;
}

@font-face {
font-family: "Almarai-font";
src: url(/../fonts/Almarai-Regular.ttf);
}
@font-face {
font-family: "Almarai-bold";
src: url(/../fonts/Almarai-Bold.ttf);
}
*{
font-family: 'Almarai-font', sans-serif !important;
}
[dir="rtl"] *{
letter-spacing: 0!important;
}
.user-activity .v-timeline .v-timeline-divider__dot{
background-color: unset!important;
}
.small-size .v-input--density-compact{
--v-input-control-height:30px!important;
}
.small-size .v-field__input{
padding: 0px!important;
}
table .text-base,
table .font-weight-semibold {
font-weight: 500 !important;
}
.v-card .v-card-title{
font-weight: 500;
font-size: 1rem;
}
.v-alert-title{
font-weight: 500;
}
/*
.v-card-text .v-btn{
min-width: 180px !important;
}
*/
.v-pagination__list .v-btn{
  min-width: auto !important;
 
}

@media (max-width: 1400px) {
/*     
  .v-card-text .v-btn{
    min-width: 120px !important;
  } */
}

.v-img__img--contain {
  object-fit: cover !important;
}

.text-body-3 { 
  font-weight: normal; 
  font-weight: 400;
  line-height: 1.5; 
}

/*

*/

.task-preview .title span.label-side{
  width: 16px;
  height: 32px;
  background: #2E6D5D;
  border-radius: 4px;
  display: inline-block;
  margin-inline-end: 1rem;
}
.task-preview .title{
  position: relative;
  font-weight: 700;
  font-size: 18px;
  display: flex;
  margin-bottom: 20px;
}
.task-preview .sub-title{
  font-weight: 600;
  font-size: 15px;
  margin: 0;
}
.v-expansion-panels{  
  margin: 1rem 0;
}
.v-expansion-panel{ 
  background: #FAFAFA;
  border-radius: 12px; 
  margin-bottom: 16px;
  border-top: none;
  box-shadow: none;
}
.v-expansion-panel .v-expansion-panel__shadow{ 
  display: none;
}
.v-expansion-panels--variant-accordion > .v-expansion-panel::after {
  opacity: 0;
}
.v-expansion-panel-title{
  font-weight: 500;
  font-size: 14px;
  line-height: 150%; 
  color: #2A313C;
}
.courese-info-card table{
  line-height: 2;
}
.courese-info-card table td,
.courese-info-card table th{
  padding: 10px 0;
}
.courese-info-card table td{
  font-weight: 500;
  font-size: 14px;
  line-height: 150%;
  color: #718096;
  text-transform: capitalize;
}
.courese-info-card table th{
  display: flex;
  align-items: center;
  gap: 1rem;
  text-align: inherit;
  font-weight: 500;
  font-size: 14px;
  line-height: 150%;
  color: #2A313C;
}
.courese-info-card table th svg{
  min-width: 20px;
}
.courese-info-card .v-table{ 
  background: transparent; 
}
.courese-info-card .label-counrse-name{ 
  margin: 1rem 0;
  position: relative;
  padding-inline-start: 30px;
}
.courese-info-card .label-counrse-name::before{
  position: absolute;
  content: "";
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.2px solid #DDDDDD;
}
[dir="rtl"] .courese-info-card .label-counrse-name::before{ 
  left: auto; 
  right: 0; 
}

table thead{
  /* background-color: #F6F7F9; */
  background-color: rgb(var(--v-theme-surface));
}
.v-table > .v-table__wrapper > table > tbody > tr > th,
.v-table > .v-table__wrapper > table > thead > tr > th,
.v-table > .v-table__wrapper > table > tfoot > tr > th,
.v-table > .v-table__wrapper > table > tbody > tr > td,
.v-table > .v-table__wrapper > table > thead > tr > td,
.v-table > .v-table__wrapper > table > tfoot > tr > td {
  font-size: 13px !important;
}

.form-label{
  display: inline-block;
  font-weight: 800;
  font-size: 14px;
  margin-bottom: 10px;
  text-transform: capitalize;
}


.card-number{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 1rem; 
  box-shadow: 0px 0px 4px rgba(232, 236, 242, 0.8), 0px 2px 12px rgba(131, 146, 165, 0.08);
  border-radius: 12px;
  margin-bottom: 1rem;
  background-color: #fff;
}
.card-number .icon{
  min-width: 48px;
  width: 48px;
  height: 48px;
}
.card-number .number{ 
  font-weight: 700;
  font-size: 28px; 
}
.card-number .title{ 
  font-weight: 400;
  font-size: 14px;
}
.last-campaigns .v-carousel--hide-delimiter-background .v-carousel__controls{
  bottom: -1rem!important;
}

/*

*/
.changeImage-box{
  display: block;
  max-width: 120px;
  position: relative;
  overflow: hidden;
  margin: 0 0 2rem;
  border-radius: 10px;
  cursor: pointer;
}
.changeImage-box::before{
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  z-index: 2;
  opacity: 0;
  transition: all .3s ease;
}
.changeImage-box .icon{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  opacity: 0;
  transition: all .3s ease;
}

.changeImage-box:hover::before,
.changeImage-box:hover .icon{
  opacity: 1;
}
.gjs-one-bg{
  background-color: #2f3349!important;
  /* background-color: rgb(var(--v-theme-dropdown-cards-color)) !important; */
}



input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}
.subject .v-alert--variant-tonal .v-alert__underlay{
  background: #EFF1F5 !important; 
  border-radius: 4px !important;
}
.subject .v-alert__content{
  color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity));
}
.v-field__field input{
  text-align: start;
}
/* 
  Dashboard 
*/

.statistic-card{
  display: flex;
  gap: 1rem; 
  align-items: center;
}
.statistic-card .icon{
  width: 48px;
  height: 48px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.statistic-card .icon img{
  max-height: 100%;
  max-width: 100%;
  object-fit: cover;
}
.statistic-card .content .count{
  font-weight: 700;
  font-size: 28px;
}
.statistic-card .content .title{
  font-weight: 400;
  font-size: 12px;
}
@media (max-width: 1440px){
  .statistic-card{
    flex-direction: column;
    gap: 10px;
  }
  .statistic-card .content{
    text-align: center;
  }
}
/*--------------------------------- 
  welcome card
---------------------------------*/
.welcome-card{
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  padding: 2rem; 
  background-size: cover;
  height: 100%;
}
/*.welcome-card .pic{
  display: none;
}*/
.welcome-card .content svg{
  margin-inline-end: .5rem;
} 
.welcome-card.welcome-card-1{
  background-image: url("/dashboard/cards/Background-1.png");
}
.welcome-card.welcome-card-2{
  background-image: url("/dashboard/cards/Background-2.png");
}
.welcome-card .content .title{
  font-weight: 700;
  font-size: 16px;
  margin-bottom: 1rem;
}
.welcome-card-1 .content .title{
  color: #0B5BBB;
}
.welcome-card-1 .content svg rect,
.welcome-card-1 .content svg circle,
.welcome-card-1 .content svg path{
  stroke: #0B5BBB;
}
.welcome-card-2 .content .title{
  color: #6CCAA8;
}
.welcome-card-2 .content svg path{
  stroke: #6CCAA8;
}
.welcome-card .content .list{
  font-weight: 700;
  font-size: 12px;
  margin-bottom: 10px;
}
.welcome-card .content .info{ 
  font-size: 14px;
}
.v-theme--dark .welcome-card .content .list,
.v-theme--dark .welcome-card .content .info{
  color: #222121; 
}
/*-----------------------------
  campaigns-card 
-----------------------------*/
.campaigns-card .head,
.campaigns-card .content .info{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-bottom: .5rem;
}
.campaigns-card .head .title{
  font-weight: 700;
  font-size: 14px;
} 
.campaigns-card .icon{
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.campaigns-card .icon img{
  max-height: 100%;
  max-width: 100%;
}
.campaigns-card .content .info{
  font-weight: 400;
  font-size: 16px;
}
.custom-v-card{
  padding: 1rem 2rem
}

@media (min-width: 1440px){
  .campaigns-card .head .title{ 
    font-size: 14px;
  }
  .custom-v-card{
    padding: 1rem 1rem;
  }
}
.filter-input{
  width: 220px!important;
}
.filter-input-second{
  width: 160px!important;
}
/* 
  campaign-review
*/
.campaign-review{
  display: block;
  padding: 12px; 
  border: 1px solid #EFF1F5;
  border-radius: 4px;
}
.campaign-review .head{
  display: flex;
  gap: 1rem;
  width: 100%;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid #EFF1F5;
}
.v-theme--dark .campaign-review,
.v-theme--dark .campaign-review .head{
  border-color: rgba(255,255,255,.1);
}
.campaign-review .head .icon{
  min-width: 44px;
  width: 44px;
  height: 44px;
  background: #E0E8FF;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.campaign-review .head .icon img,
.campaign-review .head .icon svg{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.campaign-review .head .title{
  font-size: 14px;
  font-family: 800;
}
.outer-circle {
  /* 	design the circle */
  width: 200px;
  height: 200px;
  display: flex;
  align-content: center;
  justify-content: center;
  border-radius: 50%;
/*  box-shadow: 0 0 8px 0 #aaa;*/
  /* 	set its position as relative so that the inner green scanner can be positioned absolute */
  position: relative;
}


/* make waves using the pseudo-elements for semantic purposes */
.outer-circle:before{
  content: "";
  width: 200px;
  height: 200px;
  border-radius: 50%;
  position: absolute;
  border: 3px solid #EAF3FF;
  animation: pulse 2s infinite;
}
.outer-circle:after {
  content: "";
  margin-top: -10px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  position: absolute;
  border: 3px solid #EAF3FF;
   animation: pulse 2s infinite;
}


.outer-circle-big {
  /* 	design the circle */
  width: 200px;
  height: 200px;
  display: flex;
  align-content: center;
  justify-content: center;
  border-radius: 50%;

  /*  box-shadow: 0 0 8px 0 #aaa;*/
  /* 	set its position as relative so that the inner green scanner can be positioned absolute */
  position: relative;
}
.outer-circle-big:before{
  content: "";
  width: 240px;
  height: 240px;
  border-radius: 50%;
  position: absolute;
  margin-top: -20px;
  border: 3px solid #EAF3FF;
  animation: pulse 2s infinite;
}
.outer-circle-big:after {
  content: "";
  margin-top: -30px;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  position: absolute;
  border: 3px solid #EAF3FF;
  animation: pulse 2s infinite;
}

/*
.outer-circle:after {
  animation-delay: 1s;
}
*/

/*@keyframes scan {
  to {
    transform: rotate(1turn);
  }
}

@keyframes ripple {
  to {
    transform: scale(2.5);
  }
}*/
.campaign-review .head .date{
  font-weight: 400;
  font-size: 12px; 
}
.campaign-review .head .date span{
  margin-inline-end: 5px;
}
.campaign-review .head .date span:last-child{
  margin-inline-end: 0;
}
.campaign-review .body .statistics{
  display: flex;
  grid-area: 10px;
  justify-content: space-between;
}
.campaign-review .body .statistic-info{
  display: block;
  width: calc(100% / 3);
}
.campaign-review .body .statistic-info .count {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
} 
.campaign-review .body .statistic-info .count .number {
  font-weight: 800;
} 
.campaign-review .body .statistic-info .name{
  font-size: 12px;
  text-transform: capitalize;
}

/* 
current-phish-rist-rate
percent
haed-title
name
*/
.current-phish-rist-rate .percent{
  font-size: 52px;
  font-weight: 800;
}
.current-phish-rist-rate .name,
.current-phish-rist-rate .haed-title{
font-weight: 400;
font-size: 12px;
}

/* 
statistc-section-span 
*/
.statistc-section-span{
display: flex;
gap: 1rem;
align-items: center;
margin-bottom: 1rem;
}
.statistc-section-span span{
display: flex;
gap: 5px;
width: 10px;
height: 30px;
background: #FCE3E3;
border: 2px solid #F97179;
border-radius: 2.6px;
}
.statistc-section-span span.default{
display: flex;
gap: 5px;
width: 10px;
height: 30px;
background: #EEEEEE;
border: 2px solid #BDBDBD;
border-radius: 2.6px;
}

.last_campaing .v-carousel__controls .v-btn__content svg {
  width: calc(var(--v-btn-height) + -15px)!important;
  height: calc(var(--v-btn-height) + -15px)!important;
}
.last_campaing .v-carousel__controls .v-btn--icon.v-btn--density-default {
  width: calc(var(--v-btn-height) + -7px)!important;
  height: calc(var(--v-btn-height) + -7px)!important;
  padding: 0.1rem;
  border-radius: 50%;
}
.statistc-section-span span.active{
background: #EAF3FF; 
border: 2px solid #2B8CFF;
}
/* 
  group statistics
*/

.groups-user-card{
  text-align: center;
}
.groups-user-card.vacation{
  background-color: #F6F7F9;
}
.v-theme--dark .groups-user-card.vacation{
  background-color: rgba(255,255,255,.03);
}
.groups-user-card .title{
  font-weight: 700;
  font-size: 12px;
  margin-top: 10px;
}
.groups-user-card .email{
  font-weight: 400;
  font-size: 10px;
}
.groups-user-card .group-user-statistc-list{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
}
.groups-user-card .group-user-statistc-list .statistcBox{ 
  width: calc((100% / 3) - 8px);
  display: flex;
  gap: 10px;
  justify-content: space-around;
  align-items: center; 
  border: 1px dashed #DDE3E9;
  border-radius: 4px;
  padding: 5px;
}
.groups-user-card .group-user-statistc-list .statistcBox .counter{
  font-weight: 400;
  font-size: 12px;
}

@media (max-width: 1440px) {
    
  .groups-user-card .group-user-statistc-list .statistcBox{ 
    flex-direction: column-reverse;
    justify-content: space-between;
  }
}

/* 
  group statistics show
*/

.group-risk-score-percent{
  display: flex;
  gap: 0rem;
  justify-content: center;
  align-items: center;
}

.group-risk-score-percent .shap{
  position: relative;
  width: 48px;
  height: 176px;
  background: linear-gradient(180deg, #87C461 0%, #F97179 100%);
  border-radius: 8px;
  border: 4px solid #EAF3FF;
}
.outer-shap {
  /* 	design the circle */
  width: 48px;
  height: 176px;
  display: flex;
  align-content: center;
  justify-content: center;
  border-radius: 20px;
  /*  box-shadow: 0 0 8px 0 #aaa;*/
  /* 	set its position as relative so that the inner green scanner can be positioned absolute */
  position: relative;
}
.small-input  .v-input__control{
  height: 2rem;
}
.small-input .v-field{
  font-size: 0.8rem;
}
.bg-white{
  background-color: white!important;
}
.bg-transparent{
  background-color:transparent !important;
}
.outer-shap:before{
  content: "";
  width: 66px;
  height: 190px;
  border-radius: 20px;
  /* border-radius: 50%; */
  position: absolute;
  margin-top: -8px;
  border: 4px solid #EAF3FF;
  animation: pulse 2s infinite;
}
.outer-shap:after {
  content: "";
  width: 80px;
  height: 200px;
  border-radius: 20px;
  /* border-radius: 50%; */
  position: absolute;
  margin-top: -13px;
  border: 4px solid #EAF3FF;
  opacity: 0.5;
  animation: pulse 2s infinite;
}
.group-risk-score-percent .shap .indicator{
  position: absolute;
  width: 52px;
  height: 5px;
  background: #FFFFFF;
  border: 0.4px solid #95A3B1;
  border-radius: 1px;
  left: 50%;
  transform: translateX(-50%);
}


.enrolled-courses-card {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 1rem;
  padding: 16px;
  border-radius: 12px;
  border: 1px solid #DDE3E9;
}
.showImage img{
  display: block!important;
}
.no-overflow .v-dialog__content {
  max-height: 100%;
  overflow-y: hidden;
}

.enrolled-courses-card .content{
  max-width: 550px;
}
.enrolled-courses-card .action {
  display: flex;
  gap: 10px;
  align-items: center;
}
.v-theme--dark .enrolled-courses-card { 
  border: 1px solid #474e6f;
}

.v-theme--dark .apexcharts-legend-text{
  color: rgb(170 172 189) !important;
}
.v-theme--dark .apexcharts-datalabel,
.v-theme--dark .apexcharts-datalabel-label,
.v-theme--dark .apexcharts-datalabel-value,
.v-theme--dark .apexcharts-datalabels,
.v-theme--dark .apexcharts-pie-label{ 
  fill:rgb(170 172 189); 
}

.v-theme--dark #progress-chart .apexcharts-datalabel{
  fill: #36394f;
}
.v-theme--dark .apexcharts-grid-row{
  fill: #36394f;
}
.v-theme--dark .apexcharts-text.apexcharts-xaxis-label,
.v-theme--dark .apexcharts-text.apexcharts-yaxis-label{
  fill: rgb(170 172 189) !important
}
.apexcharts-yaxis,
.apexcharts-yaxis.apexcharts-xaxis-inversed{
  direction: ltr;
}


.otp .v-field__field input{
  text-align: center !important;
}
.v-text-field input{
  text-align: start !important;
}
.dividespace{
  background: rgb(var(--v-theme-background));
  height: 20px;
}
.stepper-title {
  width: 150px;
  text-align: center;
}
/* 
  basic-info
*/

.basic-info-tabs .v-tab{
  height: auto !important;
  padding: 0 !important;
  display: block;
  text-align: start;
}
.basic-info-tabs .basic-info-tab{
  position: relative;
  background: #F6F7F9;
  display: flex;
  gap: 1rem; 
  text-align: start;
  padding: 1rem;
  width: 100%;
  border-radius: 6px;
  margin-bottom: 10px;
}
.v-theme--dark .basic-info-tab{
  background: #4A5072!important;
}
.basic-info-tabs .basic-info-tab::after{
  position: absolute;
  content: '';
  /*background: #F6F7F9;*/
  width: 24px;
  height: 24px;
  rotate: 45deg;
  top: 50%;
  border-radius: 5px;
  right: -2px;
  transform: translateY(-50%);
}
.basic-info-tabs .basic-info-tab .content{
  width: 100%;
}
.basic-info-tabs .basic-info-tab .title{ 
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 5px;
}
.basic-info-tabs .basic-info-tab .info{ 
  font-weight: 400;
  font-size: 12px;
}
.basic-info-tabs .v-tab--selected .basic-info-tab{ 
  background: rgb(var(--v-theme-primary)) !important;
  color: #fff;
}
.basic-info-tabs .v-tab__slider{
  opacity: 0 !important;
  width: 0 !important;
}
.basic-info-tabs .v-tab--selected .basic-info-tab::after{
  background: rgb(var(--v-theme-primary)) !important;
}
.basic-info-tabs .v-tab--selected{
  border: none !important;
}
.basic-info-tabs .v-tab--selected .basic-info-tab .v-avatar{
  background: #fff !important;
  color: rgb(var(--v-theme-primary)) !important;;
}
.basic-info-tabs .v-tab--selected .basic-info-tab .title,
.basic-info-tabs .v-tab--selected .basic-info-tab .info{ 
  color: #fff;
}

.basic_information-card{
  display: flex; 
  flex-direction: row-reverse;
  align-items: center;
  justify-content: space-between;
  gap: 2rem; 
}
.basic_information-card .pic{
  max-width: 400px;
  width: 100%;
}
.basic_information-card .content .title{
  font-weight: 700;
/*  font-size: 28px;*/
  margin-bottom: 24px;
}
.basic_information-card .content .info{
  font-weight: 400;
  font-size: 16px;
  margin-bottom: 0;
}
.checkbox-button-label{
  display: inline-flex;
  align-items: center;
  padding: 10px 20px;
  gap: 8px;
  min-width: 109px;
  height: 44px;
  border-radius: 4px;
  font-weight: 700;
  font-size: 14px;
  color: #63707E;
  cursor: pointer;
  background:  rgb(var(--v-theme-primary),0.5);
}
.p-skeleton{
  background-color: rgb(var(--v-theme-grey-200))!important;
}
.checkbox-button-label:hover{
  color: rgb(var(--v-theme-primary));
  background:  rgb(var(--v-theme-primary),0.5);
}
.checkbox-button :checked + .checkbox-button-label{
  color: #fff;
  background: rgb(var(--v-theme-primary)) !important;
}
.sending-progile-card{
  cursor: pointer;
  display: block;
  border: 1px solid rgb(var(--v-theme-primary));
  border-radius: 8px; 
  overflow: hidden;
}
.sending-progile-card .head{
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  height: 36px;
  background:  rgb(var(--v-theme-primary),0.3);
  border-bottom: 1px solid rgb(var(--v-theme-primary));
}
.sending-progile-card .head .title{
  font-weight: 700;
  font-size: 12px;
  color: rgb(var(--v-theme-dark-800));
}

.sending-progile-card .content{
  padding: 8px;
}
.sending-progile-card .content .title{
  font-weight: 400;
  font-size: 14px;
}
.sending-progile-card .content .info{
  font-weight: 700;
  font-size: 12px;
  color: #383D42;
  margin-bottom: 4px;
}
.sending-progile-card .footer{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 36px;
  background: #FFFFFF;
  border-top: 1px solid #DDE3E9;
  text-align: center;
  font-size: 14px;
}
.sending-progile-card .footer .select{
  display: none;
} 
.sending-progile-card-select :checked + label .footer {
  color: #fff;
  background: rgb(var(--v-theme-primary));
  border: 0px solid #DDE3E9;
}

.checked-sending-profile label .footer{
  color: #fff !important;
  background: rgb(var(--v-theme-primary));
  border: 0px solid #DDE3E9;
}
.checked-sending-profile label{
  border-color: rgb(var(--v-theme-primary));
}

.sending-progile-card-select :checked + label {
  border-color: rgb(var(--v-theme-primary));
}
.sending-progile-card-select :checked + label .footer .no-select{
  display: none;
}
.sending-progile-card-select :checked + label .footer .select{
  display: block;
  
}
.basic-info-notifications{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
.basic-info-notifications .title{
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 5px;
}
.basic-info-notifications .info{
  font-weight: 400;
  font-size: 14px; 
}

.el-input__wrapper {
  padding: 4px 11px !important;
}
.v-breadcrumbs-item--disabled,
.v-breadcrumbs-item{
  opacity: 1 !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  line-height: 20px !important;
  text-align: center !important;
  color: #8392A5 !important;
}

    .policy-template-box{
        border: 1px solid #EFF1F5;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: none;
    }
    .policy-template-box .head{
        padding: 1rem;
    }
    .policy-template-box .head .title{
        font-weight: 700;
        font-size: 16px;
        color: rgb(var(--v-theme-dark-800));
    } 
    .policy-template-box .body{
        height: 220px;
    }
    .policy-template-box .body img{
        width: 100%;
        height: 100%;
        object-fit: cover;
    } 
    .policy-template-box .footer{ 
        border-top: 1px solid #EFF1F5;
    } 
    .policy-template-box .footer .select-policy-tamplate{
        display: block;
        text-align: center; 
        min-height: 40px;
        line-height: 40px;
        background: #F0F8FF; 
        font-weight: 700;
        font-size: 14px;
        color: #2B8CFF;
        transition: all .3s ease;
        cursor: pointer;
    }  
    .policy-template-card :checked + .policy-template-box .footer .select-policy-tamplate{
        background: #2B8CFF;
        color: #fff;
    }
    .policy-template-box .footer .select-policy-tamplate .select,
    .policy-template-card :checked + .policy-template-box .footer .select-policy-tamplate .no-select{
        display: none;
    }
    .policy-template-card :checked + .policy-template-box .footer .select-policy-tamplate .select{
        display: block;
    }

.stepper-steps-active .step-number,
.stepper-steps-completed .step-number{
  background-color: rgb(var(--v-theme-primary)) !important;
  border: 5px solid  rgba(250,250,250,0.3) !important;
}
.active_card{
  border-color: rgb(var(--v-theme-primary)) !important;
  background-color: rgb(var(--v-theme-primary)) !important;

}
.gjs-frame{
  border: 1px solid !important;
}
.gjs-field{
  width: 100%;
  cursor: pointer;
}
.gjs-rte-action:last-child{
  width: auto;
}
.gjs-field:focus{
  border: none !important;
  outline: none !important;
}
.gjs-field{
background-color: transparent !important;
color: rgb(var(--v-theme-grey-50));
padding: 2px 6px !important;
}
.gjs-field option{
  color: #222121 !important;
  padding: 4px 12px;
}
.v-navigation-drawer__scrim {
  position: fixed!important;
  width: 100%;
  top: 0!important;
  bottom: 0!important;
  left: 0!important;
  right: 0!important;
  background: black;
  opacity: 0.2;
  transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1;
}
.imoprt-email  .v-field--variant-outlined .v-field__outline__notch::before
{
  border-top-right-radius: 10px; /* Adjust the value as needed */
  border-bottom-right-radius: 10px;
}
.imoprt-email  .v-field--variant-outlined .v-field__outline__notch::after{
   border-top-right-radius: 10px; /* Adjust the value as needed */
  border-bottom-right-radius: 10px;
}
.imoprt-email  .v-field--variant-outlined .v-field__outline__end{
   border-top-right-radius: 10px; /* Adjust the value as needed */
  border-bottom-right-radius: 10px;
}
.imoprt-email .v-field--variant-outlined .v-field__outline__start{
  border-top-left-radius: 10px; /* Adjust the value as needed */
  border-bottom-left-radius: 10px;
}
.user-icon-section .cursor-pointer::before{
  background: none!important;
}
.user-icon-section  .cursor-pointer::after{
  background: none!important;
}
.layout-nav-type-vertical .layout-vertical-nav .vertical-nav-items-shadow{
  background: none!important;
}
.user-action-item{
  width: 24%;
}
.user-action-item:hover{
  transform: scale(1.03);
}
.v-breadcrumbs{
  flex-wrap: wrap;
}
.user-icon svg{
  width: 20px!important;
  height: 20px!important;
}
.user-item svg{
  width: 24px!important;
  height: 24px!important;
}
.user-icon .v-timeline-divider__dot--size-small .v-timeline-divider__inner-dot{
  height: calc(100% + 11px);
  width: calc(100% + 11px);
}
.user-icon .v-timeline-divider__dot--size-small{
  width: 48px;
  height: 36px;
}
.user-scroll::-webkit-scrollbar-track {
  border-radius: 100vh;
  background: #edf2f7;
}

/* Handle */
.user-scroll::-webkit-scrollbar-thumb {
  background: #cbd5e0;
  border-radius: 100vh;
  border: 3px solid #edf2f7;
}
.no-data-svg svg {
  height: 100%;
}

/*.currentGroups circle{
fill:  rgb(var(--v-theme-primary)) !important;;
}
.currentGroups path{
fill:  rgb(var(--v-theme-primary)) !important;;
}*/
/* Handle on hover */
.user-scroll::-webkit-scrollbar-thumb:hover {
  background: #a0aec0;
}
.user-scroll::-webkit-scrollbar {
  width: 12px;
  height: 16px;
}

/* Track */
.user-scroll::-webkit-scrollbar-track {
  border-radius: 100vh;
  background: #edf2f7;
}

/* Handle */
.user-scroll::-webkit-scrollbar-thumb {
  background: #cbd5e0;
  border-radius: 100vh;
  border: 3px solid #edf2f7;
}

/* Handle on hover */
.user-scroll::-webkit-scrollbar-thumb:hover {
  background: #a0aec0;
}
.radialClass .apexcharts-datalabels-group :nth-child(2){
  display: none;
}
.radialClass .apexcharts-datalabels-group :nth-child(1){
  fill: #616161!important;
}
.search-field .v-field.v-field--appended{
  display: flex;
  flex-direction: row-reverse;
}
.search-field .v-field__prepend-inner, .v-field__append-inner, .v-field__clearable{
  margin-left: 1em!important;
}
.no-data-statistic svg {
  width: 100%!important;
  height: fit-content;
}
.no-data svg{
  height: 75px!important;
}
.no-data p{
  font-size: 0.8rem!important;
}
.user-no-scroll::-webkit-scrollbar{
  display: none!important;
}
.pulse:hover {
  animation: none;
}

@-webkit-keyframes pulse {
  0% {
    -webkit-box-shadow: 0 0 0 0  rgba(var(--v-theme-primary),0.4);
  }
  70% {
    -webkit-box-shadow: 0 0 0 10px  rgba(var(--v-theme-primary), 0);
  }
  100% {
    -webkit-box-shadow: 0 0 0 0  rgba(var(--v-theme-primary), 0);
  }
}
@keyframes pulse {
  0% {
    -moz-box-shadow: 0 0 0 0  rgba(var(--v-theme-primary), 0.4);
    box-shadow: 0 0 0 0  rgba(var(--v-theme-primary), 0.4);
  }
  70% {
    -moz-box-shadow: 0 0 0 10px  rgba(var(--v-theme-primary), 0);
    box-shadow: 0 0 0 10px  rgba(var(--v-theme-primary), 0);
  }
  100% {
    -moz-box-shadow: 0 0 0 0  rgba(var(--v-theme-primary), 0);
    box-shadow: 0 0 0 0  rgba(var(--v-theme-primary), 0);
  }
}
.welcome-card-padding{
  padding: 1rem 2rem;
}
.container-fit-contain img{
  object-fit: contain!important;
}

@media(max-width: 1000px){

  .welcome-card-title{
    font-size: 0.8rem;
  }
  .welcome-card .content .list{
    font-weight: 700;
    font-size: 0.6rem;
    margin-bottom: 10px;
  }
  .welcome-card-padding{
    padding: 1rem 1rem;
  }
  .mobile-risk-gap{
    gap: 0rem!important;
  }
  .mobile-info{
    font-size: 0.8rem!important;
  }
  .mobile-gap{
    gap: 3rem!important;
  }
  .mobile-title{
    font-size: 1rem!important;
  }
  .img svg {
    width:100%!important;
  }
  .v-field__prepend-inner svg{
    width: 20px!important;
  }
  .v-field__prepend-inner{
    padding-top: 0px;
  }
  .mobile-dis .v-field__input{
    min-height: var(--v-input-control-height, 56px)!important;
  }
  .v-field__input{
    min-height: unset!important;
  }
  .filter-input{
    width: 150px!important;
  }
  .filter-input-second{
    width:140px!important;
  }
  .v-input--density-compact{
    height: unset!important;
  }
  .app-stepper .v-slide-group__content{
    flex-direction: row!important;
    overflow-x: scroll!important;
  }
  .quiz-question .app-stepper .v-slide-group__content{
    flex-direction: column!important;
  }
  .v-stepper-step {
    margin-bottom: 16px;
  }
  .checkout-stepper{
    flex-direction: row!important;
  }
  .checkout-stepper .v-slide-group__container{
    flex-direction: row!important;
    overflow-x: scroll!important;
  }
  .checkout-step .v-slide-group--vertical,.checkout-step .v-slide-group--vertical .v-slide-group__container, .checkout-step .v-slide-group--vertical .v-slide-group__content{
    flex-direction: column!important;
  }
  .basic_information-card {
    flex-direction: column;
  }
  .pic svg{
    width:45%!important;
    height: fit-content!important;
  }
  .checkbox-button{
    display: block;
  }
  .filter-svg{
    width: 20px!important;
    height: 20px!important;
  }
  .basic_information-card .content .title{
    margin-bottom: 15px;
  }
  .user-action-item{
    width: 100%;
  }
  .layout-page-content{
    padding: 1rem!important;
  }
  .layout-navbar{
    padding: 0px 1rem!important;
  }
  .mobile-padding{
    padding-left: 0px!important;
    padding-right: 0px!important;
  }
  .basic-info-tab .info{
    white-space: unset;
  }
  .min-height   .v-field__input{
    min-height:  var(--v-input-control-height, 56px)!important;
  }
  .w-mobile{
    width: 100%!important;
  }
  .text-3xl{
    font-size: 1.5rem!important;
  }
  .overlay-setting{
    background: rgba(0,0,0,0.5);
    z-index: 14;
    position: fixed!important;
    width: 100%;
    top: 0!important;
    bottom: 0!important;
    left: 0!important;
  }
  .right{
    right: 0!important;
    top: 0;
  }
  .left{
    left:0!important;
    top: 0;
  }
  .nav-setting{
    border-radius: 0px!important;
  }
  .mobile-width{
    width: 100%;
  }
  .gjs-pn-buttons{
    display: unset!important;
  }
  .gjs-pn-views{
    position: absolute!important;
    right: -3em!important;
  }
  .user-scroll::-webkit-scrollbar{
    display: none!important;
  }
  .small-datepicker .flatpickr-input {
    font-size: 0.7rem;
  }
}