/* You can add global styles to this file, and also import other style files */
@import 'material-icons/iconfont/filled.css';
@import 'material-icons/iconfont/outlined.css';

@import '~@angular/material/theming';

@include mat-core();

$theme-primary: mat-palette($mat-teal, 700);
$theme-accent: mat-palette($mat-amber);
$theme-app-warn: mat-palette($mat-red);

$theme: mat-light-theme($theme-primary, $theme-accent, $theme-app-warn);
$dark-theme: mat-dark-theme($theme-primary, $theme-accent, $theme-app-warn);
@include angular-material-theme($theme);

.dark-theme {
    @include angular-material-theme($dark-theme);
}

html, body { height: 100vh; overflow: auto;}
body { 
    overflow-y: hidden;
    overflow-x: hidden;
    margin: 0; 
    font-family: Roboto, "Helvetica Neue", sans-serif;
}

.title {
    color: darkgrey;
}


.sidenav {
    background-color: mat-color($theme-primary);
    width: max-content;
    overflow-x: hidden !important;
}


::-webkit-scrollbar {
    width: 4px;
    overflow-y: scroll;
    background: grey;
    box-shadow: inset 0 0 4px #707070;
}

::-webkit-scrollbar-thumb {
    background: mat-color($theme-primary);
    border-radius: 10px;
}

.app-divider {
    margin-left: 15px !important;
    max-width: calc(100% - 15px);
}