doneit-web/src/theme/variables.scss

// Custom Theming for Angular Material
// For more information: https://material.angular.io/guide/theming
@import '~@angular/material/theming';
// 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;

  /** 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;
}

@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;
/* My colors */
    --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
.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);
}
.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;
}
.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{
} */
.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-right: 5px solid #99e47b;
  overflow: auto;
}
.content-pr-Pessoal, .content-PR-Pessoal{
  width: 340px;
  border-radius: 5px;
  border-right: 5px solid #958bfc;
  overflow: auto;
}
.content-mdgpr-Oficial, .content-MDGPR-Oficial{
  width: 340px;
  border-radius: 5px;
  border-right: 5px solid #ffb703;
  overflow: auto;
}
.content-mdgpr-Pessoal, .content-MDGPR-Pessoal{
  width: 340px;
  border-radius: 5px;
  border-right: 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, .item-conten-pessoal, .item-conten-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: 13px;
  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: 13px;
  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: 15px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: normal;
  color: #0d89d1;
  margin: 0;
  padding: 0;
}
.nav-icon{
  font-size: 40px;
}
.btn-div{
  width: 390px;
  margin: 10px;
  overflow: auto;
}
.footer-toolbar{
  width: 400px;
  margin: 10px auto;
  overflow: auto;
  --background: #fff;
}

.btn-ok-no-width{
  height: 45px !important;
  margin: 0 auto;
  padding:0 !important;
  border-radius: 22.5px;
  background-color: #42b9fe;
  color: #ffffff !important;
}
.btn-ok{
  width: 170px !important;
  height: 45px !important;
  margin: 0 auto !important;
  padding:0 !important;
  border-radius: 22.5px;
  background-color: #42b9fe;
  color: #ffffff !important;
}
.btn-delete{
  display: block;
  width: 170px !important;
  height: 45px !important;
  margin: 0 auto !important;
  padding:0 !important;
  border-radius: 22.5px;
  background-color: #ffe0e0;
  color: #d30a0a !important;
}
.btn-cancel{
  display: block;
  width: 170px !important;
  height: 45px !important;
  padding:0 !important;
  border-radius: 22.5px;
  background-color:  #e0e9ee;
  color: #061b52 !important;
  margin: 0 auto !important;
}

.btn-cancel:hover, .btn-delete:hover{
  background-color: #42b9fe;
  color: #ffffff !important;
}

.btn-ok-medium{
  width: 130px !important;
  height: 45px !important;
  margin: 0 auto !important;
  padding:0 !important;
  border-radius: 22.5px;
  background-color: #42b9fe;
  color: #ffffff !important;
}
.btn-delete-medium{
  display: block;
  width: 130px !important;
  height: 45px !important;
  margin: 0 auto !important;
  padding:0 !important;
  border-radius: 22.5px;
  background-color: #ffe0e0;
  color: #d30a0a !important;
}
.btn-cancel-medium{
  display: block;
  width: 130px !important;
  height: 45px !important;
  padding:0 !important;
  border-radius: 22.5px;
  background-color:  #e0e9ee;
  color: #061b52 !important;
  margin: 0 auto !important;
}
.btn-no-color{
  background-color: #fff;
}
.bg-blue{
  --background:#0782c9;
  background:#0782c9;
  --background-color:#0782c9;
  background-color:#0782c9;
  color: #ffffff;
  --color: #ffffff;
}
.exp-workflow{
  float: left;
  margin-left: 15px;

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



/* .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;
}