/* You can add global styles to this file, and also import other style files */
@import 'bootstrap.css';
@import 'style.css';
@import 'grid.css';
@import 'colours.css';
@import 'roboto-mono/fonts.css';
@import 'font-awesome.min.css';
@import 'material.css';

body,
html {
    font-family: 'Roboto', sans-serif;
    width: 100%;
    height: 100%;
    margin: 0;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    -ms-overflow-style: scrollbar;
    -webkit-tap-highlight-color: transparent;
}

@-ms-viewport {
    width: device-width;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

* {
    outline-style: none;
}

:not(.selectable) {
    user-select: none;
}

a {
    cursor: pointer;
    text-decoration: none;
}

.btn {
    display: inline-block;
    padding: 10px 20px;
    border: 1px solid #888;
    background-color: #537e4b;
    color: #fff;
    font-weight: bold;
    cursor: pointer;
}

h2 {
    margin: 0;
    padding: 0;
}


/* Text Alignment */

.text-left {
    text-align: left;
}

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

.text-right {
    text-align: right;
}

.text-justify {
    text-align: justify;
}


/* Text */

.text-strikethrough {
    text-decoration: line-through;
}


/* Standard theme colours */

.primary-bg {
    background-color: #1E3642;
}

.primary-text {
    color: #1E3642;
}

.secondary-bg {
    background-color: #b096ca;
}

.secondary-text {
    color: #b096ca;
}

.mat-dialog-container {
    padding: 0 !important;
}

.mat-dialog-container .title {
    padding: 15px 25px;
    background: #1E3642;
    color: #FFFFFF;
}

.mat-dialog-container .body {
    padding: 20px;
}

.border-bottom-line {
    border-bottom: 3px solid #4a88a5;
}

.sidenav {
    width: 360px;
    background: transparent;
    background-color: transparent;
    /*-webkit-animation: slide 0.5s forwards;
  -webkit-animation-delay: 0s;
  animation: slide 0.5s forwards;
  animation-delay: 0s;*/
}

.rootContainer {
    height: 100%;
}

table,
table tr,
table thead tr th,
table tbody tr td {
    padding: 0;
    margin: 0;
}


/*@-webkit-keyframes slide {
  100% { margin-left: 0; }
}

@keyframes slide {
  100% { margin-left: 0; }
}*/

app-header {
    padding-top: 0;
    display: grid;
    height: 68px
}

app-header header {
    position: fixed;
    z-index: 999;
    width: 100%;
    height: 70px
}

app-header header>.container {
    height: 66px
}

app-header header nav {
    display: -webkit-box; /* wkhtmltopdf uses this one */
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-align: center;
    align-items: center;
    padding: 0;
    color: #fff;
    height: 4rem;
    background: #fff;
    margin-left: -15px;
    margin-right: -15px
}

app-header header nav .mat-raised-button {
    color: #357eae;
    margin-right: 1rem
}

app-header header nav .progress-bar {
    display: -webkit-box; /* wkhtmltopdf uses this one */
    display: -ms-flexbox;
    display: flex;
    -ms-flex-line-pack: center;
    align-content: center;
    -ms-flex-align: center;
    align-items: center;
    height: .3125rem
}

app-header header nav .icon__image {
    width: 1.25rem;
    height: 1.25rem
}

app-header header nav img {
    vertical-align: middle
}

app-header header nav #today {
    font-size: .7rem
}

app-header header nav #logo {
    display: -webkit-box; /* wkhtmltopdf uses this one */
    display: -ms-flexbox;
    display: flex;
    margin-right: 1rem
}

app-header header nav #logo a {
    width: 4.25rem;
    height: 4.25rem
}

app-header header nav #logo a img {
    width: 100%;
    height: auto;
    opacity: .8
}

app-header header nav #logo a img:hover {
    opacity: 1
}

@media (max-width:807px) {
    #today {
        width: 50%
    }
    #logo {
        display: none
    }
}

@media (max-width:680px) {
    app-header {
        padding-top: 0
    }
    app-header header {
        position: relative
    }
    app-header header nav {
        display: -webkit-box; /* wkhtmltopdf uses this one */
        display: -ms-flexbox;
        display: flex
    }
}

@media (max-width:425px) {
    app-header {
        padding-bottom: 0
    }
    app-header header nav app-search-bar {
        width: 75%
    }
}

body.dark app-header header nav {
    color: #fff;
    background: #333
}

.customer-img>span {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%)
}

.customer-img>span:hover {
    opacity: 1;
    -webkit-filter: grayscale(0);
    filter: grayscale(0)
}

.customer-img {
    width: 80px;
    height: 80px;
    line-height: 80px;
    margin: 15px;
    vertical-align: middle;
    display: inline-block
}

.customer-img>span {
    opacity: 0.6;
    display: inline-block;
    margin: auto;
    zoom: .8;
    -moz-transform: scale(.8);
    -moz-transform-origin: 0 0;
    vertical-align: middle;
    background-image: url('/img/customers.png')
}

.customer-img>span.apple {
    width: 65px;
    height: 81px;
    background-position: 0 0
}

.customer-img>span.cisco {
    width: 100px;
    height: 47px;
    background-position: -67px 0
}

.customer-img>span.comcast {
    width: 100px;
    height: 65px;
    background-position: -67px -48px
}

.customer-img>span.google {
    width: 71px;
    height: 71px;
    background-position: -168px 0
}

.customer-img>span.nasa {
    width: 79px;
    height: 66px;
    background-position: -340px 0
}

.customer-img>span.nhs {
    width: 100px;
    height: 41px;
    background-position: -239px -86px
}

.customer-img>span.nih {
    width: 100px;
    height: 64px;
    background-position: -511px 0
}

.customer-img>span.nvidia {
    width: 90px;
    height: 68px;
    background-position: -420px 0
}

.customer-img>span.o2 {
    width: 70px;
    height: 70px;
    background-position: -168px -72px
}

.customer-img>span.oracle {
    width: 100px;
    height: 100px;
    background-position: -340px -69px
}

.customer-img>span.tfl {
    width: 100px;
    height: 100px;
    background-position: -441px -69px
}

.customer-img>span.veolia {
    width: 100px;
    height: 78px;
    background-position: -1px -114px
}

.customer-img>span.verizon {
    width: 100px;
    height: 60px;
    background-position: -239px -128px
}

.customer-img>span.virgin-media {
    width: 100px;
    height: 60px;
    background-position: -101px -133px
}

.customer-img>span.vmware {
    width: 100px;
    height: 85px;
    background-position: -239px 0
}

.customer-img:nth-child(8) {
    clear: both
}

.background {
    background-image: url('/assets/images/background.png');
    background-size: 1300px 700px;
    background-repeat: repeat
}

footer {
    color: #fff;
    position: -webkit-sticky;
    position: sticky;
    top: 100%;
    border-top: 1px solid #eee
}

footer img {
    width: 45%
}

.full-border {
    border-radius: 5px;
    border: 1px solid #dedede
}

.full-border.selected {
    color: #4a88a5 !important;
    border: 1px solid #4a88a5 !important;
    background-color: #f6fcff !important;
}

.full-border.selected i.far {
    color: #f9a825 !important;
}

.footer-xs {
    text-align: center;
    padding-top: 1rem
}