/* You can add global styles to this file, and also import other style files */
@import "~@angular/material/prebuilt-themes/indigo-pink.css";
@import '~@angular/material/theming';

@import "variables";
@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/mixins";
@import "~bootstrap/scss/reboot";
@import "~bootstrap/scss/grid";
@import "~bootstrap/scss/utilities/text";
@import "reset";

@include mat-core();

// tidymail theme colors
$tm-app-primary: mat-palette($mat-indigo, A700);
$tm-app-accent:  mat-palette($mat-pink, A200, A100, A400);
$tm-app-theme: mat-light-theme($tm-app-primary, $tm-app-accent);
@include angular-material-theme($tm-app-theme);

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


.loader {
    background: url(assets/loading.gif) no-repeat center center;
    background-size: 200px 200px;
    height: 100%;
    width: 100%;
}

.tm-stepper > div > mat-step-header:first-child  {
    padding-left: 18px !important;
}

.tm-stepper > div > mat-step-header:last-child  {
    padding-right: 18px !important;
}

.tm-stepper > div > .mat-step-header {
    padding: 12px;
}

.tm-stepper > div > .mat-step-header:after {
    top: 19px !important;
    border-top-width: 3px !important;
    width: calc(50% - 8px) !important;
}

.tm-stepper > div > .mat-step-header:first-child:after {
    width: calc(50% - 11px) !important;
}

.tm-stepper > div > .mat-step-header:before {
    top: 19px !important;
    border-top-width: 3px !important;
    width: calc(50% - 8px) !important;
}

.tm-stepper > div > .mat-step-header:last-child:before {
    width: calc(50% - 11px) !important;
}

.tm-stepper > div > .mat-stepper-horizontal-line {
    top: 19px !important;
    border-top-width: 3px !important;
    width: calc(50% - 8px) !important;
}

.tm-stepper > div > .mat-step-header > .mat-step-icon {
    width: 16px;
    height: 16px;
}

.tm-stepper > div > .mat-step-header > .mat-step-icon.mat-step-icon-selected {
    background-color: #304ffe !important;
}

.tm-stepper > div > .mat-step-header > .mat-step-icon.mat-step-icon-state-edit {
    background-color: rgba(0, 0, 0, 0.12) !important;
}

.tm-stepper > div > .mat-step-header > .mat-step-icon-state-number {
    background-color: rgba(0, 0, 0, 0.12);
}

.tm-stepper > div > .mat-step-header > .mat-step-icon-state-done {
    background-color: rgba(0, 0, 0, 0.12);
}

.tm-stepper > div > .mat-step-header:hover {
    background-color: transparent !important;
}

.tm-stepper > div > .mat-step-header.cdk-program-focused {
    background-color: transparent !important;
}

.tm-stepper b {
    font-weight: 500;
    color: rgba(0, 0, 0, 0.87);
}

.newsletterlist .mat-list-text {
    flex-grow: 1;
    flex-basis: 0;

}

.newsletterlist .mat-list-text p {
    max-width: 640px;
}

.newsletterlist .listheader {
    align-items: start;
    padding-top: 18px;
    min-width: 49px;
}

.newsletterlist img.favimg {
    vertical-align: unset;
    position: relative;
    bottom: -2px;
    padding-right:10px;
    min-width: 26px;
}

.header {
    background-color:#f8f9fa;
    border-bottom-color: rgba(0, 0, 0, 0.12);
    border-bottom-style: solid;
    border-bottom-width: 1px;
  }
