/* You can add global styles to this file, and also import other style files */
@use '../node_modules/ol/ol.css';
@use '../font_resources/material/material-roboto.css';
@use '../font_resources/material/material-icons.css';

* { -webkit-tap-highlight-color: transparent; }
* { tap-highlight-color: transparent; }	

.app-night {
    filter: brightness(0.3) sepia(0.2) hue-rotate(-30deg);
    backdrop-filter: brightness(0.3);
    transition: filter 0.3s ease;
} 

body {
    font-family: Roboto, "Helvetica Neue", sans-serif;
    background-color: white;
    margin: 0 0 0 0;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}
b { font-weight: 500; }

.loading {	/*loading screen */
    font-size:12pt;
    font-family: Arial, Helvetica, sans-serif;
    position: absolute;
    top: 25%;
    left: 0;
    right:0;
    margin-right: auto;
    color: black;
    text-align: center;
}

.loading img {
    border: 5px rgba(200,200,200,0) solid; 
    border-radius: 100px;
    animation: colorchange 1s;
    animation-iteration-count: infinite;
}

.ol-scale-bar {
    bottom: unset;
    top: 10px;
    left: 180px;
    background-color: transparent;
    font-family: 'Roboto';
}

.transparent-backdrop {
    background: transparent !important;
}

@keyframes colorchange
{
    0%      {border:3px solid rgba(8, 85, 178, .1);}
    25%     {border:3px solid #7AB7FF;}
    50%     {border:3px solid rgba(8, 85, 178, 1);}
    75%     {border:3px solid #7AB7FF;}
    100%    {border:3px solid rgba(8, 85, 178, .1);}
}

.theme-page {
    font-family: roboto;
}

.theme-panel {	
    margin: 0;
    color: inherit;
}

/* GFM tables rendered by <remark>. ngx-remark ships no CSS and emits a bare
   <table>, which the browser draws without borders. Scoped to `remark` so it
   cannot reach Angular Material's tables. Column alignment from the Markdown
   (`:---:`) is applied inline by ngx-remark and so still wins over this. */
remark table {
    border-collapse: collapse;
    width: 100%;
    margin: 0.5em 0;
}

remark th,
remark td {
    border: 1px solid var(--mat-sys-outline-variant, #ccc);
    padding: 4px 8px;
    text-align: left;
}

remark th {
    font-weight: 500;
    background: var(--mat-sys-surface-container, rgba(127, 127, 127, 0.12));
}

/*xs*/
@media only screen and (max-width: 599px) {
    .weather-data .mat-horizontal-content-container {
        padding: 0 !important;
      }
}

@media only screen and (min-width: 600px) and (max-width: 959px),
/*md*/
screen and (min-width: 960px) and (max-width: 1279px),
/*lg*/
screen and (min-width: 1280px) and (max-width: 1919px),
/*xl*/
screen and (min-width: 1920px) and (max-width: 5000px) {

}