doneit-web/src/theme/variables.scss

// Custom Theming for Angular Material
// For more information: https://material.angular.io/guide/theming
@import "~@angular/material/theming";
@import '~src/function.scss';
// Plus imports for other components in your app.

// Include the common styles for Angular Material. We include this here so that you only
// have to load a single css file for Angular Material in your app.
// Be sure that you only ever include this mixin once!
@include mat-core();

// Define the palettes for your theme using the Material Design palettes available in palette.scss
// (imported above). For each palette, you can optionally specify a default, lighter, and darker
// hue. Available color palettes: https://material.io/design/color/
$app-primary: mat-palette($mat-indigo);
$app-accent: mat-palette($mat-pink, A200, A100, A400);

// The warn palette is optional (defaults to red).
$app-warn: mat-palette($mat-red);

// Create the theme object. A theme consists of configurations for individual
// theming systems such as "color" or "typography".
$app-theme: mat-light-theme(
  (
    color: (
      primary: $app-primary,
      accent: $app-accent,
      warn: $app-warn,
    ),
  )
);

// Include theme styles for core and each component used in your app.
// Alternatively, you can import and @include the theme mixins for each component
// that you are using.
@include angular-material-theme($app-theme);

// Ionic Variables and Theming. For more info, please see:
// http://ionicframework.com/docs/theming/

/** Ionic CSS Variables **/
:root {
  /** primary **/
  --ion-color-primary: #3880ff;
  --ion-color-primary-rgb: 56, 128, 255;
  --ion-color-primary-contrast: #ffffff;
  --ion-color-primary-contrast-rgb: 255, 255, 255;
  --ion-color-primary-shade: #3171e0;
  --ion-color-primary-tint: #4c8dff;

  /** secondary **/
  --ion-color-secondary: #3dc2ff;
  --ion-color-secondary-rgb: 61, 194, 255;
  --ion-color-secondary-contrast: #ffffff;
  --ion-color-secondary-contrast-rgb: 255, 255, 255;
  --ion-color-secondary-shade: #36abe0;
  --ion-color-secondary-tint: #50c8ff;

  /** tertiary **/
  --ion-color-tertiary: #5260ff;
  --ion-color-tertiary-rgb: 82, 96, 255;
  --ion-color-tertiary-contrast: #ffffff;
  --ion-color-tertiary-contrast-rgb: 255, 255, 255;
  --ion-color-tertiary-shade: #4854e0;
  --ion-color-tertiary-tint: #6370ff;

  /** success **/
  --ion-color-success: #2dd36f;
  --ion-color-success-rgb: 45, 211, 111;
  --ion-color-success-contrast: #ffffff;
  --ion-color-success-contrast-rgb: 255, 255, 255;
  --ion-color-success-shade: #28ba62;
  --ion-color-success-tint: #42d77d;

  /** warning **/
  --ion-color-warning: #ffc409;
  --ion-color-warning-rgb: 255, 196, 9;
  --ion-color-warning-contrast: #000000;
  --ion-color-warning-contrast-rgb: 0, 0, 0;
  --ion-color-warning-shade: #e0ac08;
  --ion-color-warning-tint: #ffca22;
  --ion-color-yellow-orange:#ffb703;

  /** danger **/
  --ion-color-red: #d30a0a;
  --ion-color-danger: #eb445a;
  --ion-color-danger-rgb: 235, 68, 90;
  --ion-color-danger-contrast: #ffffff;
  --ion-color-danger-contrast-rgb: 255, 255, 255;
  --ion-color-danger-shade: #cf3c4f;
  --ion-color-danger-tint: #ed576b;

  /** dark **/
  --ion-color-dark: #222428;
  --ion-color-dark-rgb: 34, 36, 40;
  --ion-color-dark-contrast: #ffffff;
  --ion-color-dark-contrast-rgb: 255, 255, 255;
  --ion-color-dark-shade: #1e2023;
  --ion-color-dark-tint: #383a3e;

  /** medium **/
  --ion-color-medium: #92949c;
  --ion-color-medium-rgb: 146, 148, 156;
  --ion-color-medium-contrast: #ffffff;
  --ion-color-medium-contrast-rgb: 255, 255, 255;
  --ion-color-medium-shade: #808289;
  --ion-color-medium-tint: #9d9fa6;

  /** light **/
  --ion-color-light: #f4f5f8;
  --ion-color-light-rgb: 244, 245, 248;
  --ion-color-light-contrast: #000000;
  --ion-color-light-contrast-rgb: 0, 0, 0;
  --ion-color-light-shade: #d7d8da;
  --ion-color-light-tint: #f5f6f9;

  --ion-color-expediente: #dae3f3;


  --ion-color-primary-contrast: black;


  --swiper-theme-color: transparent;
  --swiper-navigation-color: transparent;
  --swiper-pagination-color: transparent;
}

// dark-mode
@media (prefers-color-scheme: dark) {
  /*
   * Dark Colors
   * -------------------------------------------
   */

  body {
    --ion-color-primary: #428cff;
    --ion-color-primary-rgb: 66, 140, 255;
    --ion-color-primary-contrast: #ffffff;
    --ion-color-primary-contrast-rgb: 255, 255, 255;
    --ion-color-primary-shade: #3a7be0;
    --ion-color-primary-tint: #5598ff;

    --ion-color-secondary: #50c8ff;
    --ion-color-secondary-rgb: 80, 200, 255;
    --ion-color-secondary-contrast: #ffffff;
    --ion-color-secondary-contrast-rgb: 255, 255, 255;
    --ion-color-secondary-shade: #46b0e0;
    --ion-color-secondary-tint: #62ceff;

    --ion-color-tertiary: #6a64ff;
    --ion-color-tertiary-rgb: 106, 100, 255;
    --ion-color-tertiary-contrast: #ffffff;
    --ion-color-tertiary-contrast-rgb: 255, 255, 255;
    --ion-color-tertiary-shade: #5d58e0;
    --ion-color-tertiary-tint: #7974ff;

    --ion-color-success: #2fdf75;
    --ion-color-success-rgb: 47, 223, 117;
    --ion-color-success-contrast: #000000;
    --ion-color-success-contrast-rgb: 0, 0, 0;
    --ion-color-success-shade: #29c467;
    --ion-color-success-tint: #44e283;

    --ion-color-warning: #ffd534;
    --ion-color-warning-rgb: 255, 213, 52;
    --ion-color-warning-contrast: #000000;
    --ion-color-warning-contrast-rgb: 0, 0, 0;
    --ion-color-warning-shade: #e0bb2e;
    --ion-color-warning-tint: #ffd948;

    --ion-color-danger: #ff4961;
    --ion-color-danger-rgb: 255, 73, 97;
    --ion-color-danger-contrast: #ffffff;
    --ion-color-danger-contrast-rgb: 255, 255, 255;
    --ion-color-danger-shade: #e04055;
    --ion-color-danger-tint: #ff5b71;

    --ion-color-dark: #f4f5f8;
    --ion-color-dark-rgb: 244, 245, 248;
    --ion-color-dark-contrast: #000000;
    --ion-color-dark-contrast-rgb: 0, 0, 0;
    --ion-color-dark-shade: #d7d8da;
    --ion-color-dark-tint: #f5f6f9;

    --ion-color-medium: #989aa2;
    --ion-color-medium-rgb: 152, 154, 162;
    --ion-color-medium-contrast: #000000;
    --ion-color-medium-contrast-rgb: 0, 0, 0;
    --ion-color-medium-shade: #86888f;
    --ion-color-medium-tint: #a2a4ab;

    --ion-color-light: #222428;
    --ion-color-light-rgb: 34, 36, 40;
    --ion-color-light-contrast: #ffffff;
    --ion-color-light-contrast-rgb: 255, 255, 255;
    --ion-color-light-shade: #1e2023;
    --ion-color-light-tint: #383a3e;

    --ion-color-expediente: #dae3f3;
  }

  /*
   * iOS Dark Theme
   * -------------------------------------------
   */

  /* .ios body {
    --ion-background-color: #000000;
    --ion-background-color-rgb: 0, 0, 0;

    --ion-text-color: #ffffff;
    --ion-text-color-rgb: 255, 255, 255;

    --ion-color-step-50: #0d0d0d;
    --ion-color-step-100: #1a1a1a;
    --ion-color-step-150: #262626;
    --ion-color-step-200: #333333;
    --ion-color-step-250: #404040;
    --ion-color-step-300: #4d4d4d;
    --ion-color-step-350: #595959;
    --ion-color-step-400: #666666;
    --ion-color-step-450: #737373;
    --ion-color-step-500: #808080;
    --ion-color-step-550: #8c8c8c;
    --ion-color-step-600: #999999;
    --ion-color-step-650: #a6a6a6;
    --ion-color-step-700: #b3b3b3;
    --ion-color-step-750: #bfbfbf;
    --ion-color-step-800: #cccccc;
    --ion-color-step-850: #d9d9d9;
    --ion-color-step-900: #e6e6e6;
    --ion-color-step-950: #f2f2f2;

    --ion-toolbar-background: #0d0d0d;

    --ion-item-background: #000000;

    --ion-card-background: #1c1c1d;

    --ion-color-expediente: #dae3f3;
  } */

  /*
   * Material Design Dark Theme
   * -------------------------------------------
   */

  /* .md body {
    --ion-background-color: #121212;
    --ion-background-color-rgb: 18, 18, 18;

    --ion-text-color: #ffffff;
    --ion-text-color-rgb: 255, 255, 255;

    --ion-border-color: #222222;

    --ion-color-step-50: #1e1e1e;
    --ion-color-step-100: #2a2a2a;
    --ion-color-step-150: #363636;
    --ion-color-step-200: #414141;
    --ion-color-step-250: #4d4d4d;
    --ion-color-step-300: #595959;
    --ion-color-step-350: #656565;
    --ion-color-step-400: #717171;
    --ion-color-step-450: #7d7d7d;
    --ion-color-step-500: #898989;
    --ion-color-step-550: #949494;
    --ion-color-step-600: #a0a0a0;
    --ion-color-step-650: #acacac;
    --ion-color-step-700: #b8b8b8;
    --ion-color-step-750: #c4c4c4;
    --ion-color-step-800: #d0d0d0;
    --ion-color-step-850: #dbdbdb;
    --ion-color-step-900: #e7e7e7;
    --ion-color-step-950: #f3f3f3;

    --ion-item-background: #1e1e1e;

    --ion-toolbar-background: #1f1f1f;

    --ion-tab-bar-background: #1f1f1f;

    --ion-card-background: #1e1e1e;

    --ion-color-expediente: #dae3f3;
  } */
}
.center {
  text-align: center;
}
.wrapper {
  padding: 150px 20px 0 20px;
  overflow: auto;
}
/* .cal-modal{
  --height: 80%;
  --border-radius: 10px;
  padding: 25px;
} */
//MODALS
.centered-rounded-modal {
  --height: 100%;
  --border-radius: 10px;
  padding: 25px;
  background: rgba(51, 51, 51, 0.3);
}
.add-note-modal,
.emend-message-modal {
  --height: 50%;
  --border-radius: 10px;
  padding: 25px;
  background: rgba(51, 51, 51, 0.3);
}
.add-note-modal-no-height {
  --border-radius: 10px;
  padding: 25px;
  background: rgba(51, 51, 51, 0.3);
}
.discart-expedient-modal {
  --height: 50%;
  --border-radius: 10px;
  padding: 25px;
  background: rgba(51, 51, 51, 0.3);
}


.event-recurrence-modal {
  --height: 50%;
  --border-radius: 10px;
  padding: 25px;
  background: rgba(51, 51, 51, 0.3);
}

.event-recurrence-modal::part(content){
  top: unset !important;
  position: absolute;
  max-width: 310px;
  max-height: 280px;
}

.modal,
.newchat,
.new-group,
.contacts,
.group-messages,
.custom-modal {
  padding-top: 65px;
  --border-radius: 25px 25px 0 0;
  --border-width: 0px;
}
.capitalizeText {
  text-transform: capitalize;
}
//POPOVER
.chat-popover .popover-content {
  width: 100% !important;
  left: 0 !important;
  bottom: 0 !important;
  right: 0 !important;
  top: unset !important;
}
.messages-options .popover-content {
  width: 100% !important;
  left: 0 !important;
  bottom: 0 !important;
  right: 0 !important;
  top: unset !important;
}
.events-options .popover-content {
  width: 100% !important;
  left: 0 !important;
  bottom: 0 !important;
  right: 0 !important;
  top: unset !important;
}

.popover-bottom::part(content), .popover-bottom .popover-content {
 top: unset !important;
 bottom: 0px;
 position: absolute;
 width: 100%;
 left: 0px !important;
 right: 0px;
}

.chat-option-aside::part(content), .chat-option-aside .modal-wrapper{
  position: absolute;
  right: 0px;
  height: 90%;
  max-width: 100%;
  top: -40px;
  border-radius:  0 0 25px 25px;
  -webkit-border-radius:  0 0 25px 25px;
  -moz-border-radius:  0 0 25px 25px;
  -ms-border-radius:  0 0 25px 25px;
  -o-border-radius:  0 0 25px 25px;
  max-width: 400px;
  width: 100%;
  opacity: 1;
}

.modal-aside::part(content), .modal-aside .modal-wrapper {
  position: absolute;
  right: 0px;
  height: 90%;
  max-width: 100%;
  border-radius:  0 0 25px 25px;
  -webkit-border-radius:  0 0 25px 25px;
  -moz-border-radius:  0 0 25px 25px;
  -ms-border-radius:  0 0 25px 25px;
  -o-border-radius:  0 0 25px 25px;
  max-width: 400px;
  width: 100%;
  opacity: 1;
  top: 0px;
}

.exp-options .popover-content {
  width: 100% !important;
  left: 0 !important;
  bottom: 0 !important;
  right: 0 !important;
  top: unset !important;
}
/* .exp-options .popover-content{
  width: 100% !important;
  left: 0 !important;
  bottom: 0 !important;
  right: 0 !important;
  top: calc(100% - 260px) !important;
  max-height: 260px;
  min-height: 260px;
} */
.chat-options-popover .popover-content {
  width: 100% !important;
  left: 0 !important;
  bottom: 0 !important;
  right: 0 !important;
  top: unset !important;
}
.group-duration .popover-content {
  width: 100% !important;
  left: 0 !important;
  bottom: 0 !important;
  right: 0 !important;
  top: unset !important;
}

/* .event-actions-popover ion-list{
} */

.item-hover:hover {
  background-color: var(--box-hover-background-color) !important;
}

.box-hover:hover {
  background-color: var(--box-hover-background-color) !important;
  border: var(--box-hover-background-border-color) !important;
}

.Rectangle {
  border-radius: 15px;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.07);
  border: solid 1px #e9e9e9;
  background-color: var(--white);
  margin: 0 auto;
  padding: 10px;
  margin-bottom: 10px;
  overflow: auto;
}
.content-pr-Oficial,
.content-PR-Oficial {
  width: 340px;
  border-radius: 5px;
  border-left: 5px solid #99e47b;
  overflow: auto;
  padding-left: 10px;
}
.content-pr-Pessoal,
.content-PR-Pessoal {
  width: 340px;
  border-radius: 5px;
  border-left: 5px solid #958bfc;
  overflow: auto;
  padding-left: 10px;
}
.content-mdgpr-Oficial,
.content-MDGPR-Oficial,
.content-md-Oficial {
  width: 340px;
  border-radius: 5px;
  border-left: 5px solid #ffb703;
  overflow: auto;
  padding-left: 10px;
}
.content-mdgpr-Pessoal,
.content-md-Pessoal,
.content-MDGPR-Pessoal {
  width: 340px;
  border-radius: 5px;
  padding-left: 10px;
  border-left: 5px solid #f05d5e;
  overflow: auto;
}

.item-conten-agenda-Oficial-100000011 {
  border-radius: 5px;
  border-right: 5px solid #ffb703;
}

.item-conten-agenda-Pessoal-100000011 {
  border-radius: 5px;
  border-right: 5px solid #ff0303;
}

.item-conten-agenda-Oficial-100000014 {
  border-radius: 5px;
  border-right: 5px solid #03d838;
}

.item-conten-agenda-Pessoal-100000014 {
  border-radius: 5px;
  border-right: 5px solid #8b0ae0;
}

.approve-event-time {
  width: 33px;
  float: left;
}
.approve-event-time p {
  font-family: Roboto;
  font-size: rem(13) ;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: normal;
  color: var(--Antartic-grey);
  margin: 0;
  padding: 0;
}
.approve-event-detail {
  float: left;
  margin-left: 10px;
}
.approve-event-detail p {
  width: 250px;
  font-family: Roboto;
  font-size: rem(13);
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: normal;
  color: var(--black);
  margin: 0;
  padding: 0;
}
.approve-event-detail h3 {
  width: 250px;
  font-family: Roboto;
  font-size: rem(15);
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: normal;
  color: var(--header-tab-text-white);
  margin: 0;
  padding: 0;
}

.nav-icon {
  font-size: rem(40);
}

.btn-div {
  width: rem(390);
  margin: 10px;
  overflow: auto;
}
.footer-toolbar {
  width: 400px;
  max-width: 100%;
  margin: 10px auto;
  overflow: auto;
  --background: #fff;

  ion-buttons {
    max-width: 45%;
  }
}

.btn-ok-no-width {
  height: rem(45) !important;
  margin: 0 auto;
  padding: 0 !important;
  border-radius: 22.5px;
  background-color: var(--button-color);
  color: #ffffff !important;
}

.btn-ok {
  width: rem(170) !important;
  height: rem(45) !important;
  margin: 0 auto !important;
  padding: 0 !important;
  border-radius: 22.5px;
  background-color: var(--button-color);
  color: var(--button-text-color);
}

.btn-ok:hover {
  background-color: var(--button-hover);
  color: var(--button-text-color);
}

.btn-delete {
  display: block;
  width: rem(170) !important;
  height: rem(45) !important;
  margin: 0 auto !important;
  padding: 0 !important;
  border-radius: 22.5px;
  background-color: #ffe0e0;
  color: #d30a0a !important;
}

.btn-cancel {
  display: block;
  width: rem(170) !important;
  height: rem(45) !important;
  padding: 0 !important;
  border-radius: 22.5px;
  background-color: var(--button-color);
  color: var(--button-text-color);
  margin: 0 auto !important;
  //border: 1px solid var(--button-border-color) !important;
}

.btn-cancel:hover,
.btn-delete:hover {
  background-color: var(--button-hover);
  color: #ffffff !important;
}

.btn-ok-medium {
  width: rem(130) !important;
  height: rem(45) !important;
  margin: 0 auto !important;
  padding: 0 !important;
  border-radius: 22.5px;
  background-color: var(--button-color);
  color: var(--button-text-color);
}
.btn-delete-medium {
  display: block;
  width: rem(130) !important;
  height: rem(45) !important;
  margin: 0 auto !important;
  padding: 0 !important;
  border-radius: 22.5px;
  background-color: #ffe0e0;
  color: #d30a0a !important;
}
.btn-cancel-medium {
  display: block;
  width: rem(130) !important;
  height: rem(45) !important;
  padding: 0 !important;
  border-radius: 22.5px;
  background-color: #e0e9ee;
  color: #061b52 !important;
  margin: 0 auto !important;
}

.btn-no-color {
  background-color: #fff;
}

.exp-workflow {
  float: left;
  margin-left: 15px;

  .label {
    border-radius: 20px;
    background: #ffb703;
    font-size: rem(12);
    float: right;
    padding: 2.5px 13.5px 2.5px 13.5px;
    color: black;
  }
}

/* .main-content{
  width: 100%;
  height: 100% !important;
  overflow-y: auto;
} */

/* Importing Bootstrap SCSS file. */
@import "~bootstrap/scss/bootstrap";

html,
body {
  height: 100%;
}
body {
  margin: 0;
  font-family: Roboto, "Helvetica Neue", sans-serif;
}

.ion-segment-button-no-border {
  --indicator-color: transparent !important;
  --indicator-color-checked: transparent !important;
}

.yellow-orange{
  color: #ffb703 !important;
}

.tribunal {
  --ion-color-primary: #000;
  --login-background: linear-gradient(180deg, #e1e7eb 60%, #7c8386b2 100%) !important;
  --login-label-text: #000;
  --button-hover: #000;
  --button-color: #ff0000;
  --button-border-color: #c63527;
  --button-text-color: #fff !important;
  --button-text-color-hover: #fff !important;
  --inicio-open-page-from-box: #c63527;
  --background-mobile: var(--color);
  --background-desktop:  var(--color);

  --header-tab-top-border: #000;
  --header-tab-text-white: rgb(0, 0, 0);
  --header-container-background: #fff;
  --header-bottom-line-background: rgb(255, 0, 0);
  --header-bottom-line-background-image: linear-gradient(to right, #ff0000, #fd0000, #ff0000);
  --font-awesome: #f7dddd;
  --font-awesome-1: #c63527;
  --PinDots: #44b5ea;
  --PinCircleBackground: url(/auth.svg);
  --PinBackground: #e1e7eb;
  --PinTextColor: #44b5ea;
  --Event-approve-header-color: #c63527;


  --color: #97cae631;
  --color2: #97cae631;
  --color3: #97cae631;
  --color4: #97cae631;
  --color5: #97cae631;

  --title-text-color: rgb(0, 0, 0);
  --subtitle-text-color: #000;
  --label-bg-color: #000;

  --box-container-color: #fff;
  --box-border-color: #e9e9e9;
  --box-border-color-shadow: rgb(0 0 0 / 7%);

  /* --box-container-color: #97cae66e;
  --box-border-color: #61BBEA;
  --box-border-color-shadow: rgb(151 203 230 / 10%); */

  /* --box-container-color: #F2F2F2;
  --box-border-color: #ccc;
  --box-border-color-shadow: rgb(242 242 242 / 10%); */

  --gabinete-title-container: #fff;
  --gabinete-main-container: #fff;

  --gabinete-active-hove-background: #C63527 !important;
  --gabinete-active-hove-box-sizing: border-box;

  --box-hover-background-color: #e4e8eb75 !important;
  --box-hover-background-border-color: 1px solid #ff4040 !important;

  --profile-text-color: #000000;

  .bg-blue {
    --background: #ffffff;
    background: #ffffff;
    --background-color: #ffffff;
    background-color: #ffffff;
    color: #000000;
    --color: #000000;
  }

  .bg-1{
    background: #ffc72c38;
    .bg-2{
      background: #ffc72c91;
      .bg-3{
        background:  #ffb71c91;

        .bg-4{

            //background: rgba(255, 255, 255, 0.918);
            background-color: #fff !important;

        }
      }
    }
  }

  .desk{
    color:  black !important;
  }
}

.gov {
  --login-label-text: #ffff;
  --chat-alert-msg-color: #e0e9ee;
  --chat-incoming-msg-color: #fff3da;
  --ion-color-primary: #000;
  --ion-color-secondary: #e4e8eb75;
  --login-background: linear-gradient(180deg, #c63527 60%, #000 100%) !important;
  --button-hover: #c63527;
  --button-color: #ffb81c;
  --button-text-color: black;
  --inicio-open-page-from-box: #c63527;
  --PinBackground: #e1e7eb;
  --background-mobile: var(--color);
  --background-desktop:  var(--color);

  --header-tab-top-border: #000;
  --header-tab-text-white: rgb(0, 0, 0);
  --header-container-background: #fff;
  --header-bottom-line-background: rgb(255, 0, 0);
  --header-bottom-line-background-image: linear-gradient(to right, #c63527, #ffb81c, #ffc72c);
  --font-awesome: #ffb81c;
  --font-awesome-1: #c63527;
  --mat-selected: #c63527;
  --mat-selected-hover: #c634277e;
  --mat-calendar-body-selected: #c63527;
  --monthview-selected: rgb(198 53 39 / 49%);
  --PinDots: #c63527;
  --PinTextColor: black;
  --PinCircleBackground: url(/auth.svg);
  --Event-approve-header-color: #ffb81c;

  --color: #d9d9d9;
  --color2: #f0f0f0;
  --color3: #d9d9d9;
  --color4: #d9d9d9ee;
  --color5: #ececec;

  --title-text-color: rgb(15, 15, 15);
  --subtitle-text-color: #000;
  --label-bg-color: #ffb703;

  --box-container-color: #fff;
  --box-border-color: #e9e9e9;
  --box-border-color-shadow: rgb(0 0 0 / 7%);

  --gabinete-title-container: #fff;
  --gabinete-main-container: #fff;

  --gabinete-active-hove-background: #C63527 !important;
  --gabinete-active-hove-box-sizing: border-box;

  --box-hover-background-color: #e4e8eb75 !important;
  --box-hover-background-border-color: 1px solid #ff4040 !important;

  --profile-text-color: #000000;

  .bg-blue {
    --background: #ffffff;
    background: #ffffff;
    --background-color: #ffffff;
    background-color: #ffffff;
    color: #000000;
    --color: #000000;
  }

  .bg-1{
    background: #ffc72c38;
    .bg-2{
      background:  #FFB81C;
      .bg-3{
        background: #FFC72C;

        .bg-4{

            background: rgba(255, 255, 255, 0.918);

        }
      }
    }
  }

  .desk{
    color:  black !important;
  }
}

// blue
.default {
  --login-label-text: #fff;
  --chat-alert-msg-color: #fef4c5;
  --chat-incoming-msg-color: #e4f4fe;
  --ion-color-primary: #3880ff;
  --ion-color-secondary: #e4e8eb75;
  --login-background: linear-gradient(180deg, #42b9fe 0%, #0782c9 100%) !important;
  --button-hover: #42b9fe;
  --inicio-open-page-from-box: #42b9fe;
  --button-color: #e0e9ee;
  --button-text-color: #061b52;
  --header-tab-top-border: white;
  --header-tab-text-white: white;
  --mat-selected: #87cefa;
  --mat-selected-hover: rgb(216 240 255);
  --mat-calendar-body-selected: #42b9fe ;
  --monthview-selected: lightskyblue;
  --background-desktop: linear-gradient(270deg, var(--color2) 0%, var(--color3) 23.44%, var(--color4) 78.13%, var(--color5) 100%) !important;
  --background-mobile: var(--color) !important;
  --PinDots: #44b5ea;
  --PinTextColor: #44b5ea;
  --PinCircleBackground: url(/assets/background/auth.svg);
  --PinBackground: white !important;
  --Event-approve-header-color: #42b9fe;


  --header-container-background: linear-gradient(
    270deg,
    var(--color2) 0%,
    var(--color3) 23.44%,
    var(--color4) 78.13%,
    var(--color5) 100%
  ) !important;
  --header-bottom-line-background: linear-gradient(
    270deg,
    var(--color2) 0%,
    var(--color3) 23.44%,
    var(--color4) 78.13%,
    var(--color5) 100%
  ) !important;
  --header-bottom-line-background-image: linear-gradient(
    270deg,
    var(--color2) 0%,
    var(--color3) 23.44%,
    var(--color4) 78.13%,
    var(--color5) 100%
  ) !important;

  --header-container-background: linear-gradient(
    270deg,
    var(--color2) 0%,
    var(--color3) 23.44%,
    var(--color4) 78.13%,
    var(--color5) 100%
  ) !important;
  --header-bottom-line-background: linear-gradient(
    270deg,
    var(--color2) 0%,
    var(--color3) 23.44%,
    var(--color4) 78.13%,
    var(--color5) 100%
  ) !important;
  --header-bottom-line-background-image: linear-gradient(
    270deg,
    var(--color2) 0%,
    var(--color3) 23.44%,
    var(--color4) 78.13%,
    var(--color5) 100%
  ) !important;
  --font-awesome: #42b9fe;
  --font-awesome-1: #42b9fe;
  --color: #0782c9;
  --color2: #45baff;
  --color3: #0782c9;
  --color4: #0782c9f0;
  --color5: #45baff;

  --title-text-color: #0d89d1;
  --subtitle-text-color: #000;
  --label-bg-color: #ffb703;

  --gabinete-title-container: #ecf8ff;
  --gabinete-main-container: #ecf8ff;

  --gabinete-active-hove-background: #42b9fe;
  --gabinete-active-hove-box-border: 1px solid #42b9fe;

  --box-hover-background-color: #e6f6ff75;
  --box-hover-background-border-color: 1px solid #42b9fe;

  --profile-text-color: #ffffff;


  --box-container-color: #fff;
  --box-border-color: #e9e9e9;
  --box-border-color-shadow: rgb(0 0 0 / 7%);

  .bg-blue {
    --background: #0782c9;
    background: #0782c9;
    --background-color: #0782c9;
    background-color: #0782c9;
    color: #ffffff;
    --color: #ffffff;
  }


  .bg-1{
    background: #4cb9f825;
    .bg-2{
        background: #61bdf2b4;
        .bg-3{
            background: #96d3f8be;
            .bg-4{
              background: rgba(255, 255, 255, 0.918);
            }
        }
    }
  }

}

.doneIt {
  --a: #69B3E7;
  --b: #FFFFFF;
  --c: #F0F7FD;
  --d: #D2E8F8;
  --e: #A5D1F1;
  //
  --login-label-text: #fff;
  --chat-alert-msg-color: #fef4c5;
  --chat-incoming-msg-color: #e4f4fe;
  --ion-color-primary: #3880ff;
  --ion-color-secondary: #e4e8eb75;


  --button-hover: #69B3E7;
  --inicio-open-page-from-box: #69B3E7;
  --button-color: #e0e9ee;
  --button-text-color: #243a5e;
  --header-tab-top-border: white;
  --header-tab-text-white: white;
  --mat-selected: #69B3E7;
  --mat-selected-hover: rgb(216 240 255);
  --mat-calendar-body-selected: #69B3E7 ;
  --monthview-selected: lightskyblue;

  --PinDots: #69B3E7;
  --PinTextColor: #69B3E7;
  --PinCircleBackground: url(/assets/background/auth.svg);
  --PinBackground: white !important;
  --Event-approve-header-color: #69B3E7;

  // --login-background: linear-gradient(180deg, #291D89 0%, #0782c9 100%) !important;
  --header-container-background: var(--color);
  --header-bottom-line-background: transparent;
  --header-bottom-line-background-image: transparent;
  --login-background: var(--color);
  --background-desktop: var(--color);
  --background-mobile: var(--color);

  --border-color: var(--color);
  --color-checked: #69B3E7 !important;

  --font-awesome: #69B3E7;
  --font-awesome-1: #69B3E7;
  --color: #69B3E7;
  --color2: #A5D1F1;
  --color3: #69B3E7;
  --color4: #69B3E7;
  --color5: #A5D1F1;

  --title-text-color: #243a5e;
  --subtitle-text-color: #69B3E7;
  --label-bg-color: #A5D1F1;

  --gabinete-title-container: #ecf8ff;
  --gabinete-main-container: #ecf8ff;

  --gabinete-active-hove-background: #69B3E7;
  --gabinete-active-hove-box-border: 1px solid #D2E8F8;

  --box-hover-background-color: #e6f6ff75;
  --box-hover-background-border-color: 1px solid #D2E8F8;

  --profile-text-color: #ffffff;


  --box-container-color: #fff;
  --box-border-color: #e9e9e9;
  --box-border-color-shadow: rgb(0 0 0 / 7%);

  .bg-blue {
    --background: #0782c9;
    background: #0782c9;
    --background-color: #0782c9;
    background-color: #0782c9;
    color: #ffffff;
    --color: #ffffff;
  }


  .bg-1{
    background: #4cb9f825;
    .bg-2{
        background: #61bdf2b4;
        .bg-3{
            background: #96d3f8be;
            .bg-4{
              background: rgba(255, 255, 255, 0.918);
            }
        }
    }
  }

}



.font-awesome {
  color: var(--font-awesome) !important;
}


.font-awesome-1 {
  color: var(--font-awesome-1) !important;
}



.chat-aside {
  top: -31px;
}



swiper-container::part(button-next) {


  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDk4IiBoZWlnaHQ9IjQ5OCIgdmlld0JveD0iMCAwIDQ5OCA0OTgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0yNDguMTA2IDEuMDAyMDFDMzg1LjEwNSAwLjUwODAxMyA0OTYuNTA0IDExMS4xMDcgNDk2Ljk5OCAyNDguMTA2QzQ5Ny40OTIgMzg1LjEwNSAzODYuODkzIDQ5Ni41MDQgMjQ5Ljg5NCA0OTYuOTk4QzExMi44OTUgNDk3LjQ5MiAxLjQ5NTQ2IDM4Ni44OTMgMS4wMDE1MyAyNDkuODk0QzAuNTA3NTk3IDExMi44OTUgMTExLjEwNyAxLjQ5NjAxIDI0OC4xMDYgMS4wMDIwMVpNMzYyLjgzOCAyMzEuNTlMMjI2Ljg1IDk2LjU3OUMyMTcuNDE2IDg3LjIxMyAyMDIuMjE3IDg3LjI2OCAxOTIuOTUxIDk2LjcwMUwxNzYuMDEyIDExMy43NjJDMTY2LjY0NiAxMjMuMTk2IDE2Ni43MDEgMTM4LjM5NiAxNzYuMTM0IDE0Ny42NjJMMjc4LjEgMjQ4Ljg5NUwxNzYuODY3IDM1MC44NjFDMTY3LjUwMSAzNjAuMjk1IDE2Ny41NTYgMzc1LjQ5NSAxNzYuOTg5IDM4NC43NjFMMTk0LjA1IDQwMS42OTlDMjAzLjQ4NCA0MTEuMDY1IDIxOC42ODQgNDExLjAxIDIyNy45NSA0MDEuNTc3TDM2Mi45NjEgMjY1LjU4OUMzNzIuMzI3IDI1Ni4xNTUgMzcyLjI3MiAyNDAuOTU2IDM2Mi44MzggMjMxLjU5WiIgZmlsbD0iI0U1RTRFMyIgZmlsbC1vcGFjaXR5PSIwLjgiLz4KPC9zdmc+Cg==");
  border: 1px solid;
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
}


swiper-container::part(button-prev) {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDk4IiBoZWlnaHQ9IjQ5OCIgdmlld0JveD0iMCAwIDQ5OCA0OTgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0yNDguMTA2IDEuMDAyMDFDMzg1LjEwNSAwLjUwODAxMyA0OTYuNTA0IDExMS4xMDcgNDk2Ljk5OCAyNDguMTA2QzQ5Ny40OTIgMzg1LjEwNSAzODYuODkzIDQ5Ni41MDQgMjQ5Ljg5NCA0OTYuOTk4QzExMi44OTUgNDk3LjQ5MiAxLjQ5NTQ2IDM4Ni44OTMgMS4wMDE1MyAyNDkuODk0QzAuNTA3NTk3IDExMi44OTUgMTExLjEwNyAxLjQ5NjAxIDI0OC4xMDYgMS4wMDIwMVpNMzYyLjgzOCAyMzEuNTlMMjI2Ljg1IDk2LjU3OUMyMTcuNDE2IDg3LjIxMyAyMDIuMjE3IDg3LjI2OCAxOTIuOTUxIDk2LjcwMUwxNzYuMDEyIDExMy43NjJDMTY2LjY0NiAxMjMuMTk2IDE2Ni43MDEgMTM4LjM5NiAxNzYuMTM0IDE0Ny42NjJMMjc4LjEgMjQ4Ljg5NUwxNzYuODY3IDM1MC44NjFDMTY3LjUwMSAzNjAuMjk1IDE2Ny41NTYgMzc1LjQ5NSAxNzYuOTg5IDM4NC43NjFMMTk0LjA1IDQwMS42OTlDMjAzLjQ4NCA0MTEuMDY1IDIxOC42ODQgNDExLjAxIDIyNy45NSA0MDEuNTc3TDM2Mi45NjEgMjY1LjU4OUMzNzIuMzI3IDI1Ni4xNTUgMzcyLjI3MiAyNDAuOTU2IDM2Mi44MzggMjMxLjU5WiIgZmlsbD0iI0U1RTRFMyIgZmlsbC1vcGFjaXR5PSIwLjgiLz4KPC9zdmc+Cg==");
  border: 1px solid;
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
  transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
}