/**
#455A64
#EEB111
#FF5722
#B6B6B6
**/

@font-face { font-family: Roboto; src: url('font/Roboto-Regular.ttf'); }
@font-face { font-family: Yanone; src: url('font/YanoneKaffeesatz-Regular.otf'); }


body{
    font-family: 'Roboto';
    font-size: 14px;
}
.stroke{
    text-decoration: line-through;
}

._md-select-value span{
    max-height: 45px;
    overflow-y: auto !important;
    margin-bottom: 2px;
}

.fixed-height{
    height: 100% !important;
}

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    display: block;
    z-index: 999;
    height: 100%;
    background: rgba(0,0,0,0.3);  }


.toolbardemoBasicUsage md-toolbar md-icon.md-default-theme {
    color: whitesmoke; }

.search-field {
    background-color: rgba(255, 255, 255, 0);
    max-width: 400px;
    border-radius: 30px;
    border: 5px solid whitesmoke;
    padding: 10px !important;
    font-weight: 700;
    margin: 20px;
}

.search-field label,.search-field input, .search-field.md-placeholder, .search-field .md-input-container{
    color:whitesmoke !important;
}

.clear-filter {
    font-size: 30px;
    color: whitesmoke;
}

.carddemoBasicUsage .card-media {
    background-color: #999999; }


md-card {
    padding: 10px;
}

.filter-container {
    margin-left: 10px;
    margin-right: 10px;
}

.dialogdemoBasicUsage #popupContainer {
    position: relative; }
.dialogdemoBasicUsage .footer {
    width: 100%;
    text-align: center;
    margin-left: 20px; }
.dialogdemoBasicUsage .footer, .dialogdemoBasicUsage .footer > code {
    font-size: 0.8em;
    margin-top: 50px; }
.dialogdemoBasicUsage button {
    width: 200px; }
.dialogdemoBasicUsage div#status {
    color: #c60008; }

md-select.md-default-theme ._md-select-value._md-select-placeholder, md-select ._md-select-value._md-select-placeholder{
    color: rgba(0,0,0,0.68);
}

md-autocomplete label{
    color: rgba(0,0,0,0.68);
}

md-input-container:not(.md-input-has-value) input:not(:focus), md-input-container:not(.md-input-has-value) input:not(:focus)::-webkit-datetime-edit-ampm-field, md-input-container:not(.md-input-has-value) input:not(:focus)::-webkit-datetime-edit-day-field, md-input-container:not(.md-input-has-value) input:not(:focus)::-webkit-datetime-edit-hour-field, md-input-container:not(.md-input-has-value) input:not(:focus)::-webkit-datetime-edit-millisecond-field, md-input-container:not(.md-input-has-value) input:not(:focus)::-webkit-datetime-edit-minute-field, md-input-container:not(.md-input-has-value) input:not(:focus)::-webkit-datetime-edit-month-field, md-input-container:not(.md-input-has-value) input:not(:focus)::-webkit-datetime-edit-second-field, md-input-container:not(.md-input-has-value) input:not(:focus)::-webkit-datetime-edit-text, md-input-container:not(.md-input-has-value) input:not(:focus)::-webkit-datetime-edit-week-field, md-input-container:not(.md-input-has-value) input:not(:focus)::-webkit-datetime-edit-year-field {
    color: inherit !important;
}

#main-view {
    top:60px;
    position:absolute;
    left:0;
    right:0;
    bottom:0;

}

/*
Generic Styling, for Desktops/Laptops
*/
.responsive-table{
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}
/* Zebra striping */
.responsive-table tr:nth-of-type(odd) {
    background: #eee;
}
.responsive-table th {
    background: #90a7b2;
    color: whitesmoke;
    font-weight: 100;
}

.responsive-table td, th {
    padding: 6px;
    border-bottom: 1px solid #ccc;
    text-align: left;
    min-height: 25px;
}
.responsive-table-header{
    display: none;
}
.responsive-table-header .responsive-header-value{
    display: block;
    padding-left: 30px;
    flex: 70%;
}
.responsive-table-header .responsive-header-key{
    display: block;
    padding-left: 5px;
    min-width: 100px;
    flex: 30%;
}

.responsive-table .responsive-table-key{
    display: none;
}
.responsive-table .responsive-table-value{
    flex: 100%;
}

.subheaderdemoBasicUsage .face {
    border-radius: 30px;
    border: 1px solid #ddd;
    width: 56px;
    margin: 16px; }

.gridListdemoBasicUsage md-grid-list {
    margin: 8px;
}

.gridListdemoBasicUsage .gray {
    background: #f5f5f5;
}

.gridListdemoBasicUsage md-grid-tile {
    transition: all 400ms ease-out 50ms;
}


/* fix the outline on go back title*/
#goHomeTitle{
    outline: none;
}

/* Font size on result query message */
#query-message {
    align-items: initial;
    margin-top: 3%;
    width: 100%;
    text-align: center;
    color: rgba(0,0,0,0.54)
}

@media (max-width: 480px){
    md-toolbar div{
        font-size:14px;
        color: whitesmoke;
    }
    #query-message { font-size: 15px !important;}

    .header-template {
        font-size: medium !important;
    }
    .details-button-desktop {
        display: none;
    }
    .details-button-mobile {
        display: flex;
    }
}

@media (min-width: 480px) and (max-width: 600px){
    md-toolbar div{
        font-size:16px;
        color: whitesmoke;
    }
    #query-message { font-size: 18px !important;}
    .header-template {
        font-size: medium !important;
    }

    .details-button-desktop {
        display: none;
    }
    .details-button-mobile {
        display: flex;
    }
}

@media (min-width: 600px) and (max-width: 1280px) {
    md-toolbar div{
        font-size:16px;
        color: whitesmoke;
    }
    #query-message { font-size: 20px !important;}
    .header-template {
        font-size: large !important;
    }

    .details-button-mobile {
        display: none;
    }
}

@media (min-width: 1280px) {
    md-toolbar div{
        font-size:16px;
        color: whitesmoke;
    }
    #query-message { font-size: 25px !important;}

    .details-button-mobile {
        display: none;
    }
}

/*
Max width before this PARTICULAR table gets nasty
This query will take effect for any screen smaller than 760px
and also iPads specifically.
*/
@media
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px)  {

    .responsive-table-header{
        display: flex;
    }

    /* Force table to not be like tables anymore */
    .responsive-table table, thead, tbody, th, td, tr {
        display: block;
    }

    /* Hide table headers (but not display: none;, for accessibility) */
    .responsive-table thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

    .responsive-table tr {}

    .responsive-table td {
        /* Behave  like a "row" */
        border: none;
        border-bottom: 1px solid #ddd;
        position: relative;
    }

    .responsive-table td:before {
        /* Now like a table header */
        position: absolute;
        /* Top/left values mimic padding */
        top: 6px;
        left: 6px;
        width: 45%;
        padding-right: 10px;
        white-space: nowrap;
    }

    .responsive-table .responsive-table-key{
        display: block;
        min-width: 100px;
        flex: 30%;
    }
    .responsive-table .responsive-table-value{
        padding-left: 30px;
        flex: 70%;
    }
}