:root {
  --background-wrapper: #000;
  --brand-dark-blue: #23097A;
  --brand-blue: #4213F6;
  --brand-green: #6AFFD6;

  --secondary-indigo: #7B61FF;
  --secondary-soft-indigo: #A5A6F6;
  --secondary-lilas: #EBE7FF;
  --secondary-blue: #597EFF;
  --secondary-soft-blue: #9BB2FF;

  --text-black: #101010;
  --text-soft-black: #757575;
  --text-mutted: #ABABAB;
  --text-white: #FFFFFF;
  --text-blue: #597EFF;

  --state-success: #09A552;
  --state-danger: #DF2638;

  --tag-box-pink: #D82D7E;
  --tag-box-soft-pink: #FFE2F0;
  --tag-box-orange: #FA8F21;
  --tag-box-soft-orange: #FFE7CE;
  --tag-box-blue: #2AABEE;
  --tag-box-soft-blue: #D8F2FF;
  --tag-box-yellow: #FFCA42;
  --tag-box-red: #DF2638;

  --breakpoint-xs: 0;
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  --breakpoint-xxl: 1440;

  --spacing-4-xs: 0.125rem;
  --spacing-3-xs: 0.25rem;
  --spacing-2-xs: 0.5rem;
  --spacing-xs: 0.75rem;
  --spacing-t: 1rem;
  --spacing-m: 1.5rem;
  --spacing-l: 2rem;
  --spacing-xl: 2.5rem;
  --spacing-2-xl: 3rem;
  --spacing-3-xl: 3.5rem;
  --spacing-3-xl: 3.5rem;
  --spacing-layout-l: 4rem;
  --spacing-layout-xl: 6rem;
  --spacing-layout-2-xl: 8rem;

  --border-radius-button-default: 12px;
  --padding-bottom-default: 10px;
  --border-radius-input-default: 30px;
  --border-radius-modal-default: 20px;


}

*,
*::before,
*::after {
  box-sizing: border-box;
}

@font-face {
  font-family: 'Nunito';
  src: url('../fonts/Nunito-Regular.ttf');
}

@font-face {
  font-family: 'Nunito';
  src: url('../fonts/Nunito-ExtraLight.ttf');
  font-weight: 200;
}

@font-face {
  font-family: 'Nunito';
  src: url('../fonts/Nunito-Light.ttf');
  font-weight: 300;
}

@font-face {
  font-family: 'Nunito';
  src: url('../fonts/Nunito-Regular.ttf');
  font-weight: 400;
}

@font-face {
  font-family: 'Nunito';
  src: url('../fonts/Nunito-Medium.ttf');
  font-weight: 500;
}

@font-face {
  font-family: 'Nunito';
  src: url('../fonts/Nunito-SemiBold.ttf');
  font-weight: 600;
}

@font-face {
  font-family: 'Nunito';
  src: url('../fonts/Nunito-Bold.ttf');
  font-weight: 700;
}

.container-full {
  width: 100%;
}

.flex {
  display: flex;
}

.justify-content-between {
  justify-content: space-between;
}

.justify-content-end {
  justify-content: flex-end;
}

.justify-content-start {
  justify-content: flex-start;
}

.justify-content-center {
  justify-content: center;
}

.align-items-center {
  align-items: center
}

.flex-wrap {
  flex-wrap: wrap;
}

.gap10 {
  gap: 10px
}

.gap20 {
  gap: 20px
}

.gap30 {
  gap: 30px
}

.gap40 {
  gap: 40px
}

.m-4-xs {
  margin: var(--spacing-4-xs);
}

.uppercase {
  text-transform: uppercase;
}

.headline {
  font-weight: 700;
  font-size: 22px;
}

.headline-sm {
  font-weight: 700;
  font-size: 16px;
}

.headline-xsm {
  font-weight: 700;
  font-size: 14px;
}

.text-base {
  font-weight: 400;
  font-size: 16px;
}

.text-sm {
  font-weight: 400;
  font-size: 14px;
}

.text-sm-bold {
  font-weight: 900;
  font-size: 14px;
}

.text-xsm {
  font-weight: 400;
  font-size: 10px;
}

.text-button {
  font-weight: 500;
  font-size: 16px;
}

.text-link {
  font-weight: 400;
  font-size: 14px;
}

.text-link-menu {
  font-weight: 600;
  font-size: 16px;
}

.bg-brand-dark-blue {
  background-color: var(--brand-dark-blue) !important;
}

.bg-brand-blue {
  background-color: var(--brand-blue) !important;
}

.bg-brand-green {
  background-color: var(--brand-green) !important;
}

.bg-secondary-indigo {
  background-color: var(--secondary-indigo) !important;
}

.bg-secondary-soft-indigo {
  background-color: var(--secondary-soft-indigo) !important;
}

.bg-secondary-lilas {
  background-color: var(--secondary-lilas) !important;
}

.bg-secondary-blue {
  background-color: var(--secondary-blue) !important;
}

.bg-secondary-soft-blue {
  background-color: var(--secondary-soft-blue) !important;
}

.bg-state-success {
  background-color: var(--state-success) !important;
}

.bg-state-danger {
  background-color: var(--state-danger) !important;
}

.bg-tag-box-pink {
  background-color: var(--tag-box-pink) !important;
}

.bg-tag-box-soft-pink {
  background-color: var(--tag-box-soft-pink) !important;
}

.bg-tag-box-orange {
  background-color: var(--tag-box-orange) !important;
}

.bg-tag-box-soft-orange {
  background-color: var(--tag-box-soft-orange) !important;
}

.bg-tag-box-blue {
  background-color: var(--tag-box-blue) !important;
}

.bg-tag-box-soft-blue {
  background-color: var(--tag-box-soft-blue) !important;
}

.bg-tag-box-yellow {
  background-color: var(--tag-box-yellow) !important;
}

.bg-tag-box-red {
  background-color: var(--tag-box-red) !important;
}

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

.text-soft-black {
  color: var(--text-soft-black) !important;
}

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

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

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

.headline-blue {
  color: var(--brand-dark-blue) !important;
}

.mt-10 {
  margin-top: 10px !important;
}

.mt-20 {
  margin-top: 20px !important;
}

.mb-10 {
  margin-bottom: 10px !important;
}

.mb-20 {
  margin-bottom: 20px !important;
}

.border-input-default {
  border-radius: var(--border-radius-button-default) !important;
}

.border-button-default {
  border-radius: var(--border-radius-button-default) !important;
}

.border-modal-default {
  border-radius: var(--border-radius-modal-default) !important;
}

.padding-button-default {
  padding: var(--padding-bottom-default) !important;
}

/* .btn-add {
  width: 200px !important;
  height: 40px !important;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 12px !important;
  background-color: var(--secondary-blue) !important;
  color: var(--text-white) !important;
  font-weight: 400;
} */

.btn-close {
  width: 200px !important;
  height: 40px !important;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 12px !important;
  font-weight: 400;
}

.select-input {
  background-color: transparent !important;
}

.mdc-text-field--filled:not(.mdc-text-field--disabled) {
  background-color: transparent !important;
  border: 1px solid #BDBDBD !important;
  border-radius: 15px !important
}

.mat-mdc-text-field-wrapper {
  height: 50px !important;
}

.padding-icon-input {
  padding: 0 10px !important;
}

.remove-bottom-space-input {
  margin-bottom: -1.25em
}

.mat-mdc-tab-labels {
  width: 50%
}

.mat-mdc-tab .mdc-tab__text-label {
  font-size: 20px;
  color: var(--brand-dark-blue) !important;
}

.mat-mdc-dialog-container .mdc-dialog__surface {
  border-radius: var(--border-radius-modal-default) !important;
  padding: 20px !important;
}

table {
  width: 100%;
}

.text-align-center {
  text-align: center !important;
}

.text-align-left {
  text-align: left !important;
}

.text-align-right {
  text-align: right !important;
}

/* tbody tr {
  -webkit-box-shadow: 0px 10px 7px -11px rgba(135,135,135,1);
  -moz-box-shadow: 0px 10px 7px -11px rgba(135,135,135,1);
  box-shadow: 0px 10px 7px -11px rgba(135,135,135,1);
} */

tbody tr td {
  /* display: grid; */
  background-color: white;
  padding: 20px 12px;
  margin-bottom: 15px;
  font-size: 14px;
  /* -webkit-box-shadow: 0px 10px 7px -11px rgba(135,135,135,1);
  -moz-box-shadow: 0px 10px 7px -11px rgba(135,135,135,1);
  box-shadow: 0px 10px 7px -11px rgba(135,135,135,1); */
}

tbody>tr>td:first-child {
  border-bottom-left-radius: 16px;
  border-top-left-radius: 16px;
}

tbody>tr>td:last-child {
  border-bottom-right-radius: 16px;
  border-top-right-radius: 16px;
}

table#card {
  border-collapse: separate;
  border-spacing: 0 15px;
}

.table-tag {
  padding: 3px 10px;
  color: #fff;
  border-radius: 10px;
  margin-right: 10px;
}

mat-form-field {
  width: 100%;
}

.mat-mdc-form-field-infix {
  /* padding-top: 25px !important; */
}

.mdc-text-field--filled.mdc-text-field--invalid:not(.mdc-text-field--disabled) .mdc-text-field__input{
  caret-color: transparent;
}

.card-icon-content {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.mat-mdc-card {
  box-shadow: none !important;
}

.mat-table {
  box-shadow: none !important;
  z-index: none !important;


}

::ng-deep .mat-form-field-underline {
  display: none;
}

.container-chat{
  display: flex;
  flex: 1;
  flex-direction: column;
  height: 100%; 
  background-color: #ededed;
} 

.card-icon-content{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.contact-card{
  display: flex;
  flex: 1;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  margin-top: 10px;
  cursor: pointer;
  border-radius: 10px;

  .img-user{
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    background-color: #cdcdcd;
  }
  .status-overtime{
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: #EF4444;
    margin-top: 35px;
    margin-left: -15px;
    position: relative;
  }
  .status-progress{
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: #09A552;
    margin-top: 35px;
    margin-left: -15px;
    position: relative;
  }
  .status-wating{
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: #EE6820;
    margin-top: 35px;
    margin-left: -15px;
    position: relative;;
  }
  .status-pause{
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: #3B82F6;
    margin-top: 35px;
    margin-left: -15px;
    position: relative;
  }
  .status-close{
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: #667085;
    margin-top: 35px;
    margin-left: -15px;
    position: relative;
  }
  .user-details{
    display: flex;
    flex: 1;
    flex-direction: column;
    margin-left: 10px;
    .user-name{
      font-weight: 700;
      font-size: 16px;
    }
    .last-msg{
      font-weight: 200;
      font-size: 12px;
      color: var(--text-mutted);
    }
  }
  .info-msg{
    display: flex;
    flex: 1;
    justify-content: space-between;
    align-items: center;
    .channel{
      width: 25px;
      height: 25px;
      border-radius: 50%;
      color: var(--text-white);
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 12px;
    }
    .container-time-msg{
      display: flex;
      gap: 5px;

      .time-msg{
        height: 20px;
        font-weight: 200;
        font-size: 12px;
        color: var(--text-mutted);
      }
      .img-attendance{
        width: 15px;
        height: 15px;
        border-radius: 50%;
        object-fit: cover;
        background-color: #cdcdcd;
      }
    
    }
  }  
}

.contact-card:hover{
  background-color:  #eef0f3;
  border: 1px solid #dfdfe0;
}

.contact-card-selected {
  background-color:  #eef0f3;
  border: 1px solid #dfdfe0;
}