/*-------------------------------------------------------------
12.1 Scaffolding
-------------------------------------------------------------*/
//Scaffolding
html {
   font-size: $html-font-size;

}

@media (max-width: 1280px) and (min-width: 960px) {
   html {
      font-size: $html-font-size - 1;
   }
}    

@media (max-width: 959px){
   html {
      font-size:  $html-font-size - 2;
   }
}    

html,
body {
   width: 100%;
   height: 100%;
   position: relative;
   font-family: $body-font-family;
   min-height: 100%;
   color: $font-color;
  -webkit-overflow-scrolling: touch;
  overflow: hidden;
}


body {
   margin: 0;
   padding: 0;
   font-family:$body-font-family;
   font-weight: $body-font-weight;
   font-size: $body-font-size;
   line-height: $body-line-height;
}

body .mat-card {
   font-family: $body-font-family;
   color: $font-color !important;
   background-color: $mat-card-bg-color;
   box-shadow:$mat-card-box-shadow;
   margin-bottom:0;
   border-radius:$mat-border-none;
   overflow:hidden;
   position:relative;
   transition: all .4s ease-in-out 0s;

   &:hover{
      box-shadow: $mat-shadow-none;
   }
}

body .mat-list .mat-list-item .mat-list-item-content,
.mat-nav-list .mat-list-item .mat-list-item-content,
.mat-toolbar,
.mat-button,
.mat-fab,
.mat-icon-button,
.mat-mini-fab,
.mat-raised-button,
.mat-checkbox,
.mat-input-element,
.mat-input-container,
.mat-tab-labels,
.mat-tab-label,
.mat-toolbar,
.mat-menu-item,
.mat-simple-snackbar,
.mat-select-content {
   font-family: $mat-font-family !important;
}


[tabindex='-1']:focus {
   outline: none;
}

select,
button,
textarea,
input {
   vertical-align: baseline;
}

html,
body {
   &[dir=rtl],
   &[dir=ltr] {
      unicode-bidi: embed
   }
}

bdo[dir=rtl] {
   direction: rtl;
   unicode-bidi: bidi-override;
}

bdo[dir=ltr] {
   direction: ltr;
   unicode-bidi: bidi-override;
}

.mat-card.settings-panel {
   position: fixed;
   bottom: 6px;
   right: 6px;
   width: 300px;
   z-index: 9;
}

p {
   margin-bottom: 1rem;
   margin-top: 0;
   font-size:1rem;
}

.height-full {
   height: 100%;
}

body .app-dark{
   .mat-card{
      font-family: $mat-font-family;
      background-color:$text-color;
      color:$text-color;
   }
}

img {
	max-width: 100%;
	height: auto;
	vertical-align: middle;
}
.mat-card-image{
   max-width: none;
}

.app-card{
   .card-title h3{
      color: $font-color;
      font-size:$font-size-base;
      font-weight:600;
      margin:0;
      text-transform:capitalize;
   }
}

