/*
    List of all CSS prefixes - if you want to create a new page, make up a prefix that doesn't exist
    below and add it. When looking at the page through a browser, you'll then have a better understanding
    of where that code is coming from and where to go looking for it.

    gl- (Global classes)
    ly- Shared CSS
    sh- Shared _Layout.cshtml

    lg- (login page)
    lf- (leftNavigationList Partial)
    ad- (Admin Pages)
    eg- (Engineers Diary)
    sv- (Surveys)
    
    ec- Engineers Contracts
    et- Engineers Timesheets
    ac- Access Levels (Admin)
    hm- Home page
    rp- Reporting
    es- Electronic timesheet search
    mu- My Users (Administration)
    qm- QSHE Management (Questionnaire)
    cs- CAFM Search

    *RETIRED* csp- CAFM Search Popup Job
    jp- CAFM Job popup
    jc- CAFM Job cancellation popup
    un- CAFM Unschedule jobs popup
    cm- CAFM Complete selected jobs popup
    jr- CAFM Job rejection popup (Job manager)
    cr- CAFM Create Remedial popup (Scheduling)
    ev- Engineer visits component
    csl- Site locations component
    csr- Site resources component
    csu- Site responsible users component
    csi- Site images component
    cp- Contract popup
    cgp- Contract group popup
    de- Demobilisation component
    cpr- Contract priorities component
    cpt- Contract problem types component
    cu- Custom properties component

    cjs - CAFM job search and selection component

    cd- Customer Dashboard
    ma- Mobile app
        sc - Scheduling / Engineers Diary (Discontinued)
    dr- Diary / mobile app
    qn- survey question
	srv- survey response viewer
	sb- survey builder
    saps - survey approval search
    sapr - survey approval request

    qf- Quote Edit and Quote Customer Form
    qos- Quote Search
    eqp - Quote Engineer Popup (Engineer)
    qo - Quote
    qr- Quote Request (Engineer + Customer)
    qrc- Quote Request Component
    qp - Quote Search Popup

    qs-  QSHE
    ts- Tasks + Actions (Moved)
    tas- Tasks Actions Search
    ql- QSHE Compliance Landing page
    mr- Meter Readings
    mt- Missing timesheets
    tr- Tree / Customer Tree
    td- Timesheet Draft 
    pu- Popup user screen (Treeview)

    dra- Dynamic risk assessment popups

    tsp- Timesheets to Payroll
    dm- Document Manager

    as- Asset Barcoding / Explorer
    am- Asset Manager

    gp- GPS Engineer tracking
    ci- Check In

    jm- CAFM Job Manager

    ub- User popup (basic profile)
    cf- (Configure My Account)

    inst- Instruction Sets
    isfg- Instruction Set SFG20 search
    sa- System Agent
    sl- System Logging
    slp- System Log Item popup
    sp- System Projects
    pp- System Project Popup
    ps- System Project Schedule
    pr- System Project Readonly
    pd- System Project Dashboard
    eq- System Email Queue
    jt- System Job Translations

    ss- CAFM Site Search
    si- CAFM Site popup

    lp- QSHE CAFM Linking popup
    tm- Email templates (System)

    aps- Asset popup search

    fn- Frontpage news (/Home/News)

    sc- Scheduling
    au- Auto-scheduling popup
    te- Team Structure
    tp- Team user popup

    ap- Approval search
    aa- Approval Admin

    sk- Skill Search
    skp- Skill Popup

    saa- Subcontractor Access Admin
    sac- Subcontractor Access Create
    sae- Subcontractor Access Edit
    sas- Subcontractor Access Search
    sax- Subcontractor Access Security

    lp- Labour pools
    lpp- Labour pool popup

    pri- Privacy Policy
    ct- Helpdesk create ticket

    sg- System user groups

    dj- System Database Jobs
    sat- Satisfaction popup (Home Popup)
    wi- Wiki

    tx- testing page / controller

	sms - Stock Management Storefront
    smc - Stock Management Checkout
    smt - Stock Management Config
    smi - Stock Management Introduction
    smw - Stock Management Warehouse Manager
    smb- Stock Management Basket popup
    spp- Stock Management Product popup
    spe - Stock Management Product Edit popup
    sku- Stock Management SKU popup
    smo - Stock Management Orders
    smf - Stock Management Order Fulfilment
    smp - Stock Management Pick List popup
    spl - Stock Management Product List
    rfi - Stock Management RFID Scan
    rfs - Stock Management RFID Stocktaking

    hd = Help desk

    cl- Calendar
    scs- Subcontractor Search

    kg- Kendogrid column popup

    ctb- Tree Browser (Component)

    ur- User request form

    up- Repository upload (Mobilisation)
    ra- Repository assets (Mobilisation)
    ms- Mobilisation Summary

    jup- Job updates (Component)
    us- User scheduling (Component)

    iss- Instruction set search
    aav- Asset Availability (component)
    fp- Frequency Planner (component)
    fr- Frequencies (Assets/Mobilisation component)

    exm- Exception Monitoring

    soc- Site or Contract search (component)

    inb- Instruction set browse
    inu- Instruction set Update
    int- Instruction set tree
    inc- Instruction set catalog
    ince- Instruction set catalog (editable version)

    fu- File uploader (component)

    sf- Smart form (editor)
    sft- Smart form tree (component)
    sfe- Smart form editor (component)
    sfs- Smart form Search
    sfc- Smart form Create
    sfts- Smart form Testing
    sfcl- Smart form Checklist (component)

    bs- Barcode scanner (component)

    ed- [New] Engineer Diary
    edj- [New] Engineer Diary - Jobs
    edjc- [New] Engineer Diary - Job Completion (popup)
    edjp- [New] Engineer Diary - Job popup
    edtp- [New] Engineer Diary - Travel popup
    edcs- [New] Engineer Diary - Customer sign-off popup
    edds- [New] Engineer Diary - Data Sync (component)
    edlp- [New] Engineer Diary - Location Permission (component)
    edtv- [New] Engineer Diary - Tile View (component)

    fgev- F-Gas events (component)
    fged- F-Gas editor (component)

    lh- Location hierarchy (component)

    cusr- connected users (component)
    udp- user details panel (component)
    tpx- text panel (component)

    dpr- Diary Parts Required (component)
    
    jpr- Job pdf reporting (component)

    prs- Parts required search
    prp- Parts required popup (service)
    prr- Parts required readonly

    rr- remedial requests
    bhe- bank holiday editor

    *************************************************************


    abs- Asset search by site (component)

    tsd- Timesheet direct to financial (component)
    tsj- Timesheet direct to financial (component)

    ta- Training academy
    tat- Training academy tree (component)
    tb- Training video button (component)
    tvp- Training video playback dialog (global)

    rm- Roadmaps (Projects)
    rs- Roadmap stakeholders (Projects)

    rmt- Roadmaps Timespent (component)
    rma- Roadmaps AssignedTo (component)
    rmc- Roadmaps Comments (component)
    rmad- Roadmaps Add task (component)
    rmtk- Roadmaps task Item (component)
    rmtb- Roadmaps task Board (component)
    rms- Roadmaps stakeholders (component)

    jrr- job remedial requests (component)

    tec- text editor (component)

    *************************************************************

    Supported Layouts for responsive design:
    layout-xs = 0 - 599px - Phones 
    layout-sm = 600 - 959px - iPad Landscape 
    layout-md = 960 - 1279px - iPad Portrait 
    layout-?? = 1280 - 1440px - small resolutions (laptops 1366x768) - Not supported by angular material

    Good CSS Gradient Calc: http://www.colorzilla.com/gradient-editor/

*/

/* RESPONSIVE LAYOUT TEMPLATE - Copy this when adding media queries so we always stick to fixed widths */
@media (min-width: 0px) and (max-width: 320px) {
    /* layout-xs = 0 - 320px - iPhone 5 */
}

@media (min-width: 321px) and (max-width: 599px) {
    /* layout-xs = 321 - 599px - Most Phones */
}

@media (min-width: 600px) and (max-width: 964px) {
    /* layout-sm = 600 - 959px - iPad Landscape */
}

@media (min-width: 965px) and (max-width: 1279px) {
    /* layout-?? = 1280 - 1440px - small resolutions */
}

@media (min-width: 1280px) and (max-width: 1440px) {
    /* layout-md = 960 - 1279px - iPad Portrait */
}

@media (min-width: 0) and (max-height: 599px) and (orientation: landscape) {
    /* 
        Small phones in landscape mode - VERY SMALL HEIGHT. Use this where the phone and tablet conflict.
        Tablet in portrait would have a small width, long height (and be covered above) 
        Phone in landscape would have a long width, small height and need further logic to fit - where this comes in. 
        Example in Dev tools: Samsung Galaxy S20 Ultra
    */

}



/* 
    *****************************************************
    gl- GLOBAL CSS / MATERIAL OVERRIDES
    *****************************************************
*/

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    src: url(/Content/Roboto-Regular.ttf) format('truetype');
}

@font-face {
    /*190421 MG - Updated fonts from https://github.com/google/material-design-icons*/
    /*Use: https://fonts.google.com/icons */
    /*DEPRECIATED FONT FACE*/
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    src: local('Material Icons'), local('MaterialIcons-Regular'), url(/Content/MaterialIcons-Regular.woff2) format('woff2'), url(/Content/MaterialIcons-Regular.ttf) format('truetype');
}

.material-icons {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 24px; /* Preferred icon size */
    display: inline-block;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
    /* Support for all WebKit browsers. */
    -webkit-font-smoothing: antialiased;
    /* Support for Safari and Chrome. */
    text-rendering: optimizeLegibility;
    /* Support for Firefox. */
    -moz-osx-font-smoothing: grayscale;
    /* Support for IE. */
    font-feature-settings: 'liga';
}

@font-face {
    /*17/Sep/2025 MG - Updated fonts from https://github.com/google/material-design-icons*/
    font-family: 'Material Symbols Outlined';
    font-style: normal;
    font-weight: 400;
    src: local('Material Symbols Outlined'), local('MaterialSymbols-Outlined'), url(/Content/MaterialSymbolsOutlined.woff2) format('woff2'), url(/Content/MaterialSymbolsOutlined.ttf) format('truetype');
}

.material-symbols-outlined {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    font-size: 24px; /* Preferred icon size */
    display: inline-block;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
    /* Support for all WebKit browsers. */
    -webkit-font-smoothing: antialiased;
    /* Support for Safari and Chrome. */
    text-rendering: optimizeLegibility;
    /* Support for Firefox. */
    -moz-osx-font-smoothing: grayscale;
    /* Support for IE. */
    font-feature-settings: 'liga';
}

@font-face {
    /*06-05-2024 CB - Updated fonts from https://github.com/google/material-design-icons*/
    font-family: 'Material Symbols Rounded';
    font-style: normal;
    font-weight: 400;
    src: local('Material Symbols Rounded'), local('MaterialSymbols-Rounded'), url(/Content/MaterialSymbolsRounded.woff2) format('woff2'), url(/Content/MaterialSymbolsRounded.ttf) format('truetype');
}

.material-symbols-rounded {
    font-family: 'Material Symbols Rounded';
    font-weight: normal;
    font-style: normal;
    font-size: 24px; /* Preferred icon size */
    display: inline-block;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
    /* Support for all WebKit browsers. */
    -webkit-font-smoothing: antialiased;
    /* Support for Safari and Chrome. */
    text-rendering: optimizeLegibility;
    /* Support for Firefox. */
    -moz-osx-font-smoothing: grayscale;
    /* Support for IE. */
    font-feature-settings: 'liga';
}

@font-face {
    /*06-05-2024 CB - Updated fonts from https://github.com/google/material-design-icons*/
    font-family: 'Material Symbols Sharp';
    font-style: normal;
    font-weight: 400;
    src: local('Material Symbols Sharp'), local('MaterialSymbols-Sharp'), url(/Content/MaterialSymbolsSharp.woff2) format('woff2'), url(/Content/MaterialSymbolsSharp.ttf) format('truetype');
}

.material-symbols-sharp {
    font-family: 'Material Symbols Sharp';
    font-weight: normal;
    font-style: normal;
    font-size: 24px; /* Preferred icon size */
    display: inline-block;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
    /* Support for all WebKit browsers. */
    -webkit-font-smoothing: antialiased;
    /* Support for Safari and Chrome. */
    text-rendering: optimizeLegibility;
    /* Support for Firefox. */
    -moz-osx-font-smoothing: grayscale;
    /* Support for IE. */
    font-feature-settings: 'liga';
}

.safari-flex-auto {
    display: -webkit-flex;
    -webkit-flex: auto;
    flex: auto;
}

/* Sub header color */
.md-subheader {
    background-color: rgb(117, 181, 217);
}
/* Toolbar color */
md-toolbar:not(.md-menu-toolbar) {
    background-color: rgb(52, 71, 88);
}

.md-button {
    font-weight: bold;
}
    /* Button default color */
    .md-button.md-primary.md-raised, .md-raised.md-primary.md-button.md-default-theme:not([disabled]) {
        background-color: rgb(52, 71, 88);
    }
        /* Button hover color */
        .md-button.md-default-theme.md-primary.md-fab:not([disabled]).md-focused, .md-button.md-primary.md-fab:not([disabled]).md-focused, .md-button.md-default-theme.md-primary.md-fab:not([disabled]):hover, .md-button.md-primary.md-fab:not([disabled]):hover, .md-button.md-default-theme.md-primary.md-raised:not([disabled]).md-focused, .md-button.md-primary.md-raised:not([disabled]).md-focused, .md-button.md-default-theme.md-primary.md-raised:not([disabled]):hover, .md-button.md-primary.md-raised:not([disabled]):hover {
            background-color: #126390;
        }

/*Makes the disabled buttons lighter than the default*/
md-radio-button.md-default-theme[disabled] .md-container .md-off, md-radio-button[disabled] .md-container .md-off, md-radio-button.md-default-theme[disabled] .md-container .md-on, md-radio-button[disabled] .md-container .md-on, md-radio-group.md-default-theme[disabled] .md-container .md-off, md-radio-group[disabled] .md-container .md-off, md-radio-group.md-default-theme[disabled] .md-container .md-on, md-radio-group[disabled] .md-container .md-on {
    border-color: rgba(0,0,0,0.24);
}



.md-button:hover md-icon:not(.nospin) {
    /* MG - Make the md-buttons rotate - Groovy points. */
    /*Note: to turn this off, add a class 'nospin' to the md-icon*/
    transform: rotate(360deg);
    transition-duration: 0.8s;
}

.md-dialog-container md-dialog {
    max-height: 90%;
}

html {
    height: 100%;
}

body {
    display: -webkit-flex;
    display: -webkit-box;
    display: -moz-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    height: 100%;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    font-family: 'Roboto', sans-serif;
    /*font-weight: 500;*/
    margin: 0px;
}

h2, h3, h4, p {
    margin: 0px;
}

/* Modify default md-input-container/inputs to have blue forecolor */
md-input-container label {
    color: #a8b6d1;
}

md-checkbox[disabled]:not(.md-checked) .md-icon {
    /* show the checkboxes as grey - default is too subtle */
    border-color: darkgrey;
    background-color: lightgray;
}

/* This is the input label when the input has a value (small, hovering above) */
md-input-container.md-default-theme:not(.md-input-invalid).md-input-has-value label, md-input-container:not(.md-input-invalid).md-input-has-value label {
    color: #698fd4;
}
/* This is the input label when the input is blank */
md-input-container label {
    color: #698fd4;
}
/* The color of the text box underlines when NOT selected*/
md-input-container.md-default-theme .md-input, md-input-container .md-input {
    border-color: #a8a2a2;
}

/* When using the autocomplete, this simply adds a space to any icon added inside of it*/
.md-autocomplete-suggestions li md-icon {
    margin-right: 10px;
}

/* Shows a red error message for the toast */
md-toast.error .md-toast-content {
    background-color: #dc4646 !important;
    border: 1px solid #691010;
}

md-toast.error span {
    text-align: center;
}

/* Shows a green error message for the toast */
md-toast.success .md-toast-content {
    background-color: #42b01c !important;
    border: 1px solid #2b6b30;
}

md-toast.success span {
    text-align: center;
}

.gl-two-thirds {
    flex: 1 1 66%;
}

.gl-one-third {
    flex: 1 1 33%;
}

.gl-one-half {
    flex: 1 1 50%;
}

.sh-maincontent-container md-toolbar.md-default-theme.md-hue-2:not(.md-menu-toolbar), md-toolbar.md-hue-2:not(.md-menu-toolbar) {
    background-color: rgb(255,64,129);
}

.sh-maincontent-container md-datepicker .md-button.md-icon-button {
    /* Aligns the datepicker to every other control by removing the left padding*/
    margin: 0px;
    width: 24px;
    padding-left: 0px;
}

md-sidenav {
    max-width: 500px;
    width: 500px;
}

.md-button.md-default-theme.md-fab md-icon, .md-button.md-fab md-icon {
    /*260523 MG - Newer version of material makes the button color black!*/
    color: white;
}
/* Small positioning issue with the toolbar when in smaller resolution issues - override angularmaterial */
/*
    MG Removed - iPhone 6/7/8 doesn't work with this line
    @media (max-width: 964px) and (min-width: 0) and (orientation: landscape) {
    md-toolbar {
        min-height: 64px;
    }
}*/

@media (max-width: 964px) and (min-width: 0) and (orientation: portrait) {
    md-toolbar {
        min-height: 64px;
    }
}

@media (min-width: 0px) and (max-width: 320px) {
    /* layout-xs = 0 - 320px - iPhone 5 */
    md-dialog {
        min-width: 100%;
        min-height: 100%;
        -webkit-box-flex: 1 1 auto; /* OLD - iOS 6-, Safari 3.1-6 */
        -moz-box-flex: 1 1 auto; /* OLD - Firefox 19- */
        -webkit-flex: 1 1 auto; /* Safari 6.1+ */
        -ms-flex: 1 1 auto; /* IE 10 */
        flex: 1 1 auto;
    }

    md-sidenav {
        width: 100%;
        min-width: 100%;
        max-width: 100%;
    }
}

@media (min-width: 321px) and (max-width: 599px) {
    /* layout-xs = 321 - 599px - Most Phones */
    md-dialog {
        min-width: 100%;
        min-height: 100%;
        -webkit-box-flex: 1 1 auto; /* OLD - iOS 6-, Safari 3.1-6 */
        -moz-box-flex: 1 1 auto; /* OLD - Firefox 19- */
        -webkit-flex: 1 1 auto; /* Safari 6.1+ */
        -ms-flex: 1 1 auto; /* IE 10 */
        flex: 1 1 auto;
    }

    md-sidenav {
        width: calc(100% - 56px);
        min-width: calc(100% - 56px);
        max-width: calc(100% - 56px);
    }
}

@media (min-width: 600px) and (max-width: 964px) {
    /* layout-sm = 600 - 959px - iPad Landscape */


    md-dialog {
        min-width: 100%;
        min-height: 100%;
        -webkit-box-flex: 1 1 auto; /* OLD - iOS 6-, Safari 3.1-6 */
        -moz-box-flex: 1 1 auto; /* OLD - Firefox 19- */
        -webkit-flex: 1 1 auto; /* Safari 6.1+ */
        -ms-flex: 1 1 auto; /* IE 10 */
        flex: 1 1 auto;
    }
}

@media (min-width: 965px) and (max-width: 1279px) {
    /* layout-?? = 1280 - 1440px - small resolutions */
    md-dialog {
        min-width: 550px;
    }
}

@media (min-width: 1280px) and (max-width: 1440px) {
    /* layout-md = 960 - 1279px - iPad Portrait */

    md-dialog {
        min-width: 550px;
    }
}

/* 
    *****************************************************
    kendo Treeview - Overrides
    *****************************************************
*/

/*The new 2024 version has it's 'leaf' node flexible by default. */
.k-treeview .k-treeview-item .k-treeview-leaf {
    flex: 1;
}


/* 
    *****************************************************
    kendoGrid - Overrides
    *****************************************************
*/

.ly-kendotools-exportToExcel {
    width: 200px;
}

    .ly-kendotools-exportToExcel md-icon {
        margin-right: 10px;
    }

/*Standard cell template*/
.ly-kendotools-cell {
    height: 100%;
    padding: 5px 0 0 10px;
}

    /*Used by the common kendo cell template - allows sql to color backgrounds/foregrounds via meta data*/
    .ly-kendotools-cell.ly-kendotools-background-orange {
        background-color: #ffac55 !important;
        color: white;
    }
/*replaces the blue background when selected*/
tr.k-selected .ly-kendotools-cell.ly-kendotools-background-orange {
    background-color: #de8d39 !important;
    color: white;
}


.ly-kendotools-cell.ly-kendotools-background-lightgrey {
    background-color: #fafafa !important;
}
/*replaces the blue background when selected*/
tr.k-selected .ly-kendotools-cell.ly-kendotools-background-lightgrey {
    background-color: #cacaca !important;
    color: white;
}

.ly-kendotools-cell.ly-kendotools-background-lightyellow {
    background-color: #f9fcc6 !important;
    color: white;
}
/*replaces the blue background when selected*/
tr.k-selected .ly-kendotools-cell.ly-kendotools-background-lightyellow {
    background-color: #e0cf8e !important;
    color: white;
}


.ly-kendotools-cell.ly-kendotools-background-green {
    background-color: #6be26e !important;
    color: white;
}
/*replaces the blue background when selected*/
tr.k-selected .ly-kendotools-cell.ly-kendotools-background-green {
    background-color: #40b843 !important;
    color: white;
}

.ly-kendotools-cell.ly-kendotools-background-red {
    background-color: #fc7474 !important;
    color: white;
}
/*replaces the blue background when selected*/
tr.k-selected .ly-kendotools-cell.ly-kendotools-background-red {
    background-color: #e85858 !important;
    color: white;
}

.ly-kendotools-cell.ly-kendotools-background-grey {
    background-color: #989898 !important;
    color: white;
}

.ly-kendotools-cell.ly-kendotools-background-blue {
    background-color: #7db9e8 !important;
    color: white;
}

.ly-kendotools-cell.ly-kendotools-foreground-green {
    color: green;
}

.ly-kendotools-cell.ly-kendotools-foreground-red {
    color: red;
}

.ly-kendotools-cell.ly-kendotools-foreground-orange {
    color: darkorange;
}

.ly-kendotools-cell.ly-kendotools-foreground-grey {
    color: dimgrey;
}

.ly-kendotools-cell.ly-kendotools-foreground-blue {
    color: steelblue;
}

.ly-kendotools-cell img.ly-kendotools-icon {
    /*Default icon size - override if you need bigger than 24px*/
    margin: 5px 0 0 0;
    width: 24px;
}


.k-grid-filter.k-state-active {
    background-color: #ffb0b0 !important;
}

    .k-grid-filter.k-state-active span {
        color: red;
    }

/* 
    *****************************************************
    ly-attachments - Used for the standard file attachment interface
    Still in use as of 261124 MG
    *****************************************************
*/
.ly-attachment-maincontainer {
    margin-top: 10px;
    margin-bottom: 10px;
    padding: 20px;
    background-color: whitesmoke;
    width: 100%;
    /* Rounded corners */
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

.ly-attachment-container {
    width: 100%;
}

.ly-noAttachment-container {
    min-height: 160px;
}

.ly-attachment-button {
    width: 300px;
}

.ly-attachment-item {
    background-color: #ffc0c0;
    margin: 0 10px 10px 0;
}

    .ly-attachment-item .ly-attachment-image-container img {
        display: block;
        margin: auto auto;
        max-width: 200px;
        max-height: 224px;
    }

.ly-attachment-image-container {
    background-color: white;
    height: 200px;
    width: 200px;
}

.ly-attachment-item .md-button {
    width: 80%;
    margin: 0;
}

.ly-attachment-filename {
    font-size: 12px;
    background-color: #7d7d7d;
    width: 200px;
    overflow-x: hidden;
    text-align: center;
    color: white;
}

/*
    *****************************************************
    COMMON COLOR DEFINITIONS
    *****************************************************
*/

/* Forecolors*/
.gl-red {
    color: red !important;
}

.gl-orange {
    color: orange !important;
}

.gl-yellow {
    color: gold !important;
}

.gl-lightgreen {
    color: darkseagreen !important;
}

.gl-green {
    color: green !important;
}

.gl-pink {
    color: rgb(255,64,129) !important;
}

.gl-white {
    color: #fff !important;
}

/*
    *****************************************************
    COMMON CSS DEFINITIONS
    *****************************************************
*/

.ly-width10perc {
    width: 10%;
}

.ly-width20perc {
    width: 20%;
}

.ly-width30perc {
    width: 30%;
}

.ly-width40perc {
    width: 40%;
}

.ly-width50perc {
    width: 50%;
}

.ly-width60perc {
    width: 60%;
}

.ly-width70perc {
    width: 70%;
}

.ly-width80perc {
    width: 80%;
}

.ly-width90perc {
    width: 90%;
}

.ly-width100perc {
    width: 100%;
}


.ly-height90perc {
    height: 90%;
}

.ly-height100perc {
    height: 100%;
}

.ly-no-margin {
    margin: 0;
}

.ly-text-align-center {
    text-align: center!important;
}

.ly-hover-cursor-pointer:hover {
    cursor: pointer;
}

/* 
    *****************************************************
    ly- Shared Layout - _Layout.cshtml
    *****************************************************
*/


.ly-centre-children {
    display: flex;
    justify-content: center;
    align-items: center;
}

.ly-centre-children-vertically {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.ly-flex-autoGrowShrink {
    -webkit-box-flex: 1 1 auto; /* OLD - iOS 6-, Safari 3.1-6 */
    -moz-box-flex: 1 1 auto; /* OLD - Firefox 19- */
    -webkit-flex: 1 1 auto; /* Safari 6.1+ */
    -ms-flex: 1 1 auto; /* IE 10 */
    flex: 1 1 auto;
}

.ly-icon-marginright {
    /* Used to add a small margin when icon is used inside a button */
    margin-right: 10px;
}

.ly-icon-marginleft {
    /* Used to add a small margin when icon is used inside a button */
    margin-left: 10px;
}

.ly-prewrap {
    /* Used for showing linebreaks / new lines in html when passed from the database */
    white-space: pre-wrap;
}

.ly-page-container {
    width: 100%;
    padding-right: 0px;
    padding-left: 10px;
    min-height: 100%;
}

    .ly-page-container md-divider, .md-dialog-container md-divider {
        margin-top: 10px;
        margin-bottom: 10px;
        border-top-color: cornflowerblue;
        width: 100%;
        box-sizing: border-box;
    }

    .ly-page-container .ly-groupbox md-divider {
        width: 100%;
    }

md-dialog md-divider {
    /*Seems to loose positioning in the md-dialog*/
    width: 95%;
}

.ly-groupbox {
    min-height: 100px;
    background-color: white;
    margin-right: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
    /* Rounded corners */
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    -webkit-box-shadow: 4px 4px 10px 0px rgba(50, 50, 50, 0.42);
    -moz-box-shadow: 4px 4px 10px 0px rgba(50, 50, 50, 0.42);
    box-shadow: 4px 4px 10px 0px rgba(50, 50, 50, 0.42);
}

.ly-groupbox-padding {
    /* kept as a seperate class so you can optional apply standard padding values to a groupbox*/
    padding: 20px;
    box-sizing: border-box;
}

/*Used for the title, icon and small text that every groupbox starts with */
.ly-groupTitle {
    margin-bottom: 3px;
    padding: 0px;
}

    .ly-groupTitle md-icon {
        max-width: 24px;
        margin: 0px 8px 0px 0px;
    }

/*
    Used for the title, icon and small text that every groupbox starts with 
    New version!
*/
.ly-groupTitle-container md-icon {
    margin: 0 20px 0 0;
}

.ly-groupTitle-container .ly-groupTitle-container-right md-icon {
    margin: auto;
}

.ly-groupTitle-container-left {
    height: 60px;
}

    .ly-groupTitle-container-left span {
        font-size: 13px;
        margin-top: 2px;
    }

.ly-groupTitle-container-inline {
    height: 50px;
}

    /* .ly-groupTitle-container-inline h3 {
        font-size: 14px;
    } */

    .ly-groupTitle-container-inline span {
        font-size: 13px;
    }

.ly-groupTitle-container {
    width: 100%;
}

.ly-infogroup {
    background: #f3f0f0;
}

.ly-filter {
    background-color: rgba(255,64,129,0.87);
    padding: 10px 5px 5px 20px;
    color: white;
}

    .ly-filter md-input-container {
        margin: 0 0 0 20px;
        height: 36px;
        width: 300px;
    }

        .ly-filter md-input-container .md-input {
            color: black;
            background-color: white;
        }

    .ly-filter .md-button {
        margin: 0px;
    }

.ly-filterContainer {
    margin-bottom: 20px;
}


.ly-button-grey {
    background-color: #e6e6e6 !important;
    border: solid 1px #f1f1f1;
    color: black !important;
}

    .ly-button-grey md-icon {
        color: black !important;
    }

    .ly-button-grey[disabled] md-icon {
        color: #838383 !important;
    }

    .ly-button-grey[disabled] {
        background-color: #e6e6e6 !important;
        color: #bbbbbb !important;
    }

.md-button.ly-button-grey:not([disabled]):hover {
    background-color: #efefef;
}



.ly-button-red {
    background-color: #e35d5d !important;
    border: solid 1px red;
    color: white !important;
}

    .ly-button-red:hover {
        background-color: #d44242 !important;
    }


    .ly-button-red[disabled] {
        background-color: #e1e1e1 !important;
        border: solid 1px #c2c2c2 !important;
    }

        .ly-button-red[disabled]:hover {
            background-color: rgba(195, 37, 91, 0.87);
        }

.ly-button-pink {
    background-color: rgba(255,64,129,0.87) !important;
    border: solid 1px rgba(129, 19, 151, 0.75) !important;
    color: white !important;
}

    .ly-button-pink[disabled] {
        background-color: #e1e1e1 !important;
        border: solid 1px #c2c2c2 !important;
    }

.md-button.ly-button-pink:not([disabled]):hover {
    background-color: rgba(195, 37, 91, 0.87);
}





.ly-button-blue, .ly-button-blue:focus {
    background-color: #63b6db !important;
    border: solid 1px cornflowerblue;
    color: white !important;
}

    .ly-button-blue:disabled {
        background-color: #e4e4e4 !important;
        color: #9a9a9a !important;
        border: solid 1px #c7c7c7;
    }


    .ly-button-blue:not([disabled]):hover {
        background-color: #3d9eca;
    }

    .ly-button-blue:not([disabled]) md-icon {
        color: white !important;
    }

/*    This class is used in instances where we apply the ly-button-blue class to a label rather than an input/button and need it to show as if it were disabled. In cases where button/input is used, simply set the disabled attribute to true*/
.ly-button-force-disable-label {
    background-color: #e4e4e4 !important;
    color: #9a9a9a !important;
    border: solid 1px #c7c7c7;
    cursor: default;
}




.ly-button-scrolltop {
    position: fixed !important;
    -webkit-transform: scale(0);
    transform: scale(0);
    -webkit-transition: -webkit-transform 0.2s;
    transition: -webkit-transform 0.2s;
    transition: transform 0.2s;
    transition: transform 0.2s, -webkit-transform 0.2s;
    z-index: 999 !important;
}

    .ly-button-scrolltop.scrolling {
        -webkit-transform: scale(1);
        transform: scale(1);
    }


/* RESPONSIVE LAYOUT */
/* layout-xs = 0 - 599px - Phones */
/* layout-sm = 600 - 959px - iPad Landscape */
/* layout-md = 960 - 1279px - iPad Portrait */

@media (min-width: 0px) and (max-width: 320px) {
    /* layout-xs = 0 - 320px - iPhone 5 */

    .ly-groupTitle {
        padding-top: 10px;
        padding-left: 10px;
    }

    .ly-filterContainer {
        /* change layout from row to column*/
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
    }

    .ly-filter {
        background-color: rgba(255,64,129,0.87);
        padding: 5px;
        color: white;
    }

        .ly-filter md-input-container {
            margin: 0px;
            height: 36px;
            width: 100%;
        }

            .ly-filter md-input-container .md-input {
                color: black;
                background-color: white;
            }

        .ly-filter .md-button {
            margin: 0px;
            border: 1px solid white;
        }

    .ly-groupbox-padding {
        padding: 10px;
    }

    .ly-groupTitle-container-left {
        height: 100%;
    }

        .ly-groupTitle-container-left h3 {
            font-size: 14px;
        }

        .ly-groupTitle-container-left span {
            font-size: 12px;
        }

    .ly-groupTitle-container-inline {
        height: 100%;
    }

        .ly-groupTitle-container-inline h3 {
            font-size: 14px;
        }

        .ly-groupTitle-container-inline span {
            font-size: 12px;
        }
}

@media (min-width: 321px) and (max-width: 599px) {
    /* layout-xs = 321 - 599px - Most Phones */

    .ly-groupTitle {
        padding-top: 10px;
        padding-left: 10px;
    }

    .ly-filterContainer {
        /* change layout from row to column*/
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
    }

    .ly-filter {
        background-color: rgba(255,64,129,0.87);
        padding: 5px;
        color: white;
    }

        .ly-filter md-input-container {
            margin: 0px;
            height: 36px;
            width: 100%;
        }

            .ly-filter md-input-container .md-input {
                color: black;
                background-color: white;
            }

        .ly-filter .md-button {
            margin: 0px;
            border: 1px solid white;
        }

    .ly-groupbox-padding {
        padding: 12px;
    }

    .ly-groupTitle-container-left {
        font-size: 12px;
    }

    .ly-groupTitle-container md-icon:not(.ng-scope) {
        display: none; /* Don't include the round button icon */
    }
}

@media (min-width: 600px) and (max-width: 964px) {
    /* layout-sm = 600 - 959px - iPad Landscape */

}

@media (min-width: 965px) and (max-width: 1279px) {
    /* layout-?? = 1280 - 1440px - small resolutions */
}

@media (min-width: 1280px) and (max-width: 1440px) {
    /* layout-md = 960 - 1279px - iPad Portrait */
}





/* 
    *****************************************************
    lf- Left Navigation Page - leftNavigationList.cshtml (Partial)
    *****************************************************
*/

md-list {
    padding: 0px;
}

.lf-menuitem {
    min-height: 52px;
}

.lf-menuitem-container .lf-menuitem .md-button .md-list-item-inner {
    /* Slight offset needed as buttons are not aligned */
    margin-left: 4px;
}


.lf-menuitem.lf-menuitem-selected {
    background-color: #ff7d00;
}

    .lf-menuitem.lf-menuitem-selected md-icon {
        color: darkslategrey;
    }

    .lf-menuitem.lf-menuitem-selected h3 {
        color: darkslategrey;
        font-weight: 600;
    }

.lf-menuitem h3 {
    font-size: 14px;
    margin: 0px;
    line-height: 18px;
    font-weight: 500;
    color: whitesmoke;
    white-space: nowrap;
}

.lf-menuitem md-divider {
    border-top-color: #344758;
}

.lf-menuitem md-icon {
    margin: 0px;
    color: lightgrey;
}

.lf-menuitem-message {
    position: absolute;
    bottom: 6px;
    right: 6px;
    border-radius: 50%;
    background-color: rgb(255,64,129);
    min-width: 8px;
    height: 8px;
}

.lf-menuitem-side-message.md-button.md-fab {
    color: white;
    width: 32px;
    height: 32px;
    min-height: 32px;
    line-height: 32px;
    padding: 0;
    margin: 0;
}

md-list-item._md-button-wrap > div.md-button:first-child {
    padding-left: 14px;
}

.lf-childmenu-container md-list-item._md-button-wrap > div.md-button:first-child {
    padding-left: 32px;
}

/* Shows/hides the child menu items inside a smooth transition */
.lf-childmenu-container {
    /* 
        NOTE: Annoying hack when transforming on divs with an 'auto' height. Instead of using auto (Which disables the animation)
        i have to set a static value. Using max-height with a high value (bigger then the menu should ever get) sorts this with a slightly
        disabled animation
        http://stackoverflow.com/questions/3508605/how-can-i-transition-height-0-to-height-auto-using-css
    */
    /*max-height: 156px;*/ /* each button is 52high - enough for 3 buttons max - increase if needed */
    transition: all linear 0.3s;
    overflow: hidden;
}

    .lf-childmenu-container.ng-hide {
        max-height: 0px;
        transition: all linear 0.3s;
        overflow: hidden;
    }

    .lf-childmenu-container .lf-menuitem {
        background-color: #5d6f80;
    }

    .lf-childmenu-container .lf-menuitem-selected {
        background-color: #ff7d00;
    }

        .lf-childmenu-container .lf-menuitem-selected md-icon {
            color: white;
        }

        .lf-childmenu-container .lf-menuitem-selected md-button {
            color: white;
        }

    .lf-childmenu-container .md-button {
        margin: 20px;
    }

    .lf-childmenu-container .lf-menuitem md-divider {
        border-top-color: rgba(50, 50, 50, 0.42);
    }



/* 
    *****************************************************
    sv-  Survey page css
    *****************************************************
*/


.sv-md-datepicker {
    margin: 0px 0px 0px 4px;
    padding: 10px 0px 10px 0px;
}

.sv-LoadSurveyButton {
    min-height: 80px;
    min-width: 150px;
}

.sv-Header {
    -webkit-box-flex: 0 0 auto; /* OLD - iOS 6-, Safari 3.1-6 */
    -moz-box-flex: 0 0 auto; /* OLD - Firefox 19- */
    -webkit-flex: 0 0 auto; /* Safari 6.1+ */
    -ms-flex: 0 0 auto; /* IE 10 */
    flex: 0 0 auto;
}

.sv-toolBars {
    -webkit-box-flex: 0 0 auto; /* OLD - iOS 6-, Safari 3.1-6 */
    -moz-box-flex: 0 0 auto; /* OLD - Firefox 19- */
    -webkit-flex: 0 0 auto; /* Safari 6.1+ */
    -ms-flex: 0 0 auto; /* IE 10 */
    flex: 0 0 auto;
}

.sv-container h2 {
    padding-left: 10px;
}

.sv-container md-icon {
    padding: 0px;
    margin: 0px;
}

.sv-listContainer md-divider {
    border-top-color: lightslategrey;
    margin-top: 10px;
    margin-bottom: 10px;
}

.sv-container .material-icons {
    font-size: 28px;
}

.sv-subHeader {
    background-color: rgb(71, 154, 204);
    padding: 30px;
    margin: 0px 0px 30px 0px;
}

.sv-button {
    min-height: 60px;
    min-width: 100px;
}

.sv-naQuestions {
    padding: 5px;
    background-color: rgba(0,0,0,.12);
    font-weight: bold;
    margin: 0 0 20px 0;
}

    .sv-naQuestions md-checkbox {
        padding: 10px;
        margin: 0px;
    }

.sv-listContainer {
    margin: 5px 0px 5px 0px;
    padding: 5px 0px 0px 0px;
}

.sv-warning {
    color: red;
}

/* Override the default themed color so when validation is enforced (red style applied) the items in the observation list do not look nasty */
.sv-listContainer md-content {
    background-color: transparent;
}

.sv-listContainer.sv-hasError {
    color: red;
}

.sv-listContainer md-toolbar {
    margin-top: 20px;
}

.sv-offline {
    color: red;
    padding: 3px;
}

.sv-online {
    color: green;
}

.sv-observation {
    padding: 5px;
}

.sv-radioButtons {
    margin: 18px 0;
    vertical-align: middle;
}

.sv-commentContainer {
    background-color: lightgrey;
    border: 1px solid #000000;
    margin-bottom: 10px;
}

.sv-contentIcon {
    padding: 0px 10px 0px 0px;
}

    .sv-contentIcon .iconGreen {
        color: green;
    }

    .sv-contentIcon .iconRed {
        color: red;
    }

.sv-container .md-fab p {
    font-size: 20px;
    font-weight: bold;
}

.sv-container .md-list-item {
    min-height: 0px;
    padding: 0px;
}

.sv-container .md-list-item-text p {
    padding: 10px;
}

.sv-score {
    font-size: 18px;
    margin-left: 35px;
}

.sv-clickCursor {
    cursor: pointer;
}

#sv-cacheSurveyDisplay md-input-container {
    padding: 0px 0px 0px 35px;
    margin: 0px 0px 0px 0px;
}

#sv-cacheSurveyDisplay .material-icons {
    color: grey;
}

#sv-cacheSurveyDisplay {
    -webkit-box-flex: 1 0 auto; /* OLD - iOS 6-, Safari 3.1-6 */
    -moz-box-flex: 1 0 auto; /* OLD - Firefox 19- */
    -webkit-flex: 1 0 auto; /* Safari 6.1+ */
    -ms-flex: 1 0 auto; /* IE 10 */
    flex: 1 0 auto;
}

    #sv-cacheSurveyDisplay md-divider {
        border-top-color: lightslategrey;
        padding: 0px;
    }

.sv-container .animate-show-hide.ng-hide {
    opacity: 0;
}

.animate-show-hide.ng-hide-add,
.animate-show-hide.ng-hide-remove {
    transition: all linear 0.5s;
}

.sv-generalComments {
    padding: 5px 0px 0px 0px;
}

    .sv-generalComments .md-toolbar-tools {
        background-color: #42b01c;
    }

    .sv-generalComments md-input-container {
        padding: 0px;
        margin: 0px;
    }

    .sv-generalComments textarea {
        background-color: lightgrey;
        border: 1px solid #000000;
        min-height: 100px;
        max-height: 100px;
    }

.sv-save-form-btn {
    min-height: 80px;
    min-width: 200px;
}

.sv-radioPadding {
    padding-bottom: 25px;
}

.sv-footer {
    background-color: #c0c0c0;
    padding: 30px;
}

.sv-header {
    background-color: #c0c0c0;
    padding: 30px;
    margin: 10px 0px 30px 0px;
    font-weight: bold;
}

@media (min-width: 0px) and (max-width: 599px) {
    /* layout-xs = 0 - 599px - Phones */
    .sv-radioButtons {
        /* column flex direction */
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
    }

        .sv-radioButtons md-radio-button {
            padding: 5px;
        }

    .sv-container.sv-questionContainer {
        /* column flex direction */
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
    }

    .sv-observation {
        /* column flex direction */
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
    }

    .sv-observationButtons {
        /* column flex direction */
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
    }

    .sv-comment {
        /* column flex direction */
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
        margin-bottom: 10px;
    }

    .sv-commentContainer {
        background-color: lightgrey;
        border: 1px solid #000000;
        margin-bottom: 10px;
    }

    .sv-commentButtons {
        /* column flex direction */
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
    }

    .sv-container md-list {
        padding: 0px;
    }

    .sv-container md-list-item::before {
        min-height: 0px;
    }

    .sv-showHideIcon {
        display: none;
    }
}

@media (min-width: 0px) and (max-width: 415px) {
    .sv-questionButtons {
        /* column flex direction */
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
    }

    .sv-container md-list-item {
        padding: 0px;
    }
}











/*////////////////////////////////////////////////////////////////////////*/


/* 
    *****************************************************
    oo - online/offline component
    *****************************************************
*/

.oo span {
    font-size: small;
}

.oo .oo-online {
    color: darkgreen;
}

.oo .oo-offline {
    color: red;
}


/* Animation */
@-webkit-keyframes spinner {
    0% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@-moz-keyframes spinner {
    0% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@-o-keyframes spinner {
    0% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes spinner {
    0% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}


/* 
    *****************************************************
    ssm - survey search menu component
    *****************************************************
*/
.ssm-subheading-spacer {
    margin-bottom: 12px;
}

.ssm-fill-width {
    width: 100%;
}

.ssm-75-width {
    width: 75%;
}

.ssm-date-range-spacer {
    margin-bottom: 8px;
}

.ssm-clearbtn.md-button {
    width: 10px;
    margin: 0px;
}


/*Full calendar ovverride to stop text spilling out of events*/

.fc .fc-event {
    overflow: hidden;
}