/* You can add global styles to this file, and also import other style files */

@use '@angular/material' as mat;

@include mat.core();

@import "../node_modules/@angular/material/prebuilt-themes/azure-blue.css";

app-root,
main,
.main {
  min-width: 150px;
  max-width: 800px;
  /*width: 100%;*/
  margin-left: auto;
  margin-right: auto;
  padding: 0 16px;
}

main,
.main {
  min-height: calc(100vh - 40px);
}

.main .content {
  padding: 0 24px;
}

mat-sidenav-content,
mat-sidenav-container {
  min-height: calc(100vh - 40px);
}

.main mat-toolbar {
  /*background-color: #e0e0ff;*/
  /*background-color: var(--mdc-fab-small-container-color, var(--mat-app-primary-container));*/
  background-color: #005A78;
  border-radius: 10px;
  color: #fff;
}

.mat-mdc-text-field-wrapper,
div.mat-mdc-select-panel,
div[role=listbox] {
  background-color: rgb(241 245 255) !important;
  border-top-left-radius: 7px;
  border-top-right-radius: 7px;
}

.mat-mdc-text-field-wrapper:hover,
div.mat-mdc-select-panel:hover,
div[role=listbox] {
  background-color: rgb(241 245 255) !important;
}

.mat-drawer-content {
  overflow: hidden !important;
}

.success-backdrop,
.submit-backdrop,
.spinner-backdrop {
  position: fixed;
  width: 100%;
  height: 100vh;
  top: 0px;
  left: 0px;
  align-content: center;
  display: block;
  background-color: #000;
  opacity: 0.3 !important;
  z-index: 1002;
  max-height: 100vh !important;
}

.success-backdrop,
.submit-backdrop {
  display: block;
  background-color: #0000005e;
  opacity: 1 !important;
  z-index: 1001;
}

.success-backdrop .content,
.submit-backdrop .content {
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  background-color: #fff;
  z-index: 1001;
  padding: 15px 15px 15px 15px;
}

.success-backdrop .content,
.submit-backdrop .content,
.spinner-backdrop mat-spinner {
  margin-left: auto;
  margin-right: auto;
  border-radius: 16px;
}

.content .p-center {
    text-align: center;
}

.btn-margin-right {
    margin-right: 3px;
}
.btn-margin-left {
    margin-left: 3px;
}

a.btn-Red,
.btn-Red {
  background-color: #6b3d3d !important;
  color: #fff;
}

.burger {
  color: #fff !important;
}

.mat-drawer-backdrop.mat-drawer-shown,
.mat-drawer-transition .mat-drawer-backdrop,
.mat-drawer-backdrop {
  border-top-right-radius: 16px !important;
}

.mat-app-background {
  background-color: #ededed !important;
}

.mat-sidenav,
.mat-sidenav-container {
  background-color: #ededed !important;
}

.mat-expansion-panel-header span.mat-content,
.mat-expansion-panel-header .mat-content {
  display: block !important;
  flex: 1;
  flex-direction: row;
  overflow: hidden;
}

.search-form-field {
  width: 100%;
}

.mat-mdc-list-item:not(.mat-mdc-list-item-interactive), .mat-mdc-list-option:not(.mat-mdc-list-item-interactive) {
  cursor: pointer !important;
}

body,
.main {
  font-family: sans-serif !important;
}

@media (min-width: 769px) {
  .nav {
    display: block;
    position: absolute;
    right: 0px;
  }
  .burger {
      display: none !important;
  }
}

@media (max-width: 768px) {
  .nav {
    display: none;
  }
  .burger {
      display: block;
  }
}

@media (max-width: 600px)
{
  app-root, main, .main {
    min-width: 150px;
    max-width: 600px;
    /*width: 100%;*/
    margin-left: auto;
    margin-right: auto;
    padding: 0 5px;
  }

  .btn-Red {
    width: 100%;
    margin-top: 15px;
  }
}

@media (max-width: 300px) {
  app-root, main, .main {
    min-width: 150px;
    max-width: 300px;
    /*width: 100%;*/
    margin-left: auto;
    margin-right: auto;
    padding: 0 2px;
  }
}