/*
    Material elements stylesheet
    James Dixon <james.dixon@enviroessentials.com.au>
*/

.material_element {
    box-shadow   : 0px 2px 4px rgba(0, 0, 0, 0.4);
    border-radius : 2px;
    transition   : all 0.2s;
}

.material_ripple svg {
    position : absolute;
    top      : 0;
    left     : 0;
    width    : 100%;
    height   : 100%;
}

.material_ripple svg circle {
    fill : rgba(255, 255, 255, 0.2);
}

.material_ripple.ripple_dark svg circle {
    fill : rgba(0, 0, 0, 0.05);
}

.material_ripple.ripple_red svg circle {
    fill : rgba(203, 0, 0, 1);
}

.material_ripple.ripple_green svg circle {
    fill : rgba(25, 170, 73, 1);
}

.material_fab_container {
    position    : fixed;
    width       : 40px;
    color       : #FFF;
    bottom      : 20px;
    right       : 30px;
    font-size   : 16px;
    text-align  : center;
    box-sizing  : border-box;
    z-index     : 100001;
    font-family : Roboto, Arial, Helvetica, sans-serif;
}

.material_fab {
    width         : 40px;
    height        : 40px;
    border-radius : 20px;
    margin-bottom : 10px;
    box-shadow    : 0px 2px 4px rgba(0, 0, 0, 0.4);
    line-height   : 31px;
    color         : #FFF;
    position      : relative;
    font-size     : 16px;
    text-align    : center;
    border-bottom : 1px solid rgba(0, 0, 0, 0.1);
    box-sizing    : border-box;
    overflow      : hidden;
    z-index       : 100001;
    font-family   : Roboto, Arial, Helvetica, sans-serif;
    transition    : transform 0.2s;
}

.material_fab:hover {
    cursor     : pointer;
    transform  : scale(1.2);
    transition : transform 0.2s;
}

.material_fab span {
    font-size : 18px;
    position  : relative;
    top       : 4px;
}

.material_container {
    box-sizing       : border-box;
    border-radius    : 2px;
    box-shadow       : 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.1555), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
    background-color : #FAFAFA;
    padding          : 5px;
    width            : 100%;
    min-height       : 200px;
    font-family      : Roboto, Arial, Helvetica, sans-serif;
    overflow         : hidden !important;
    position         : relative;
}

.material_table {
    width    : 100%;
    display  : table;
    overflow : hidden;
}

.material_row {
    display    : table-row;
    width      : 100%;
    transition : all 0.2s;
    position   : relative;
}

/*.material_row:hover {*/
/*cursor : pointer;*/
/*}*/

.material_border_bottom {
    border-bottom : 1px solid rgba(0, 0, 0, 0.1);
    box-sizing    : border-box;
}

.material_cell {
    position   : relative;
    display    : table-cell;
    padding    : 8px;
    transition : all 0.2s;
}

.material_white {
    background-color : #FFF;
    border-radius    : 2px;
    box-shadow       : 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.1555), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
}

.material_cell_container {
    min-height       : 100px;
    box-sizing       : border-box;
    background-color : #FFF;
    border-radius    : 2px;
    box-shadow       : 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.1555), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
    overflow         : hidden;
    padding-bottom   : 36px;
    position         : relative;
}

.material_cell_heading {
    font-size        : 14px;
    color            : #666;
    padding          : 10px;
    width            : 100%;
    box-sizing       : border-box;
    border-bottom    : 1px solid rgba(0, 0, 0, 0.05);
    background-color : #FCFCFC;
}

.material_cell_heading .fa {
    position  : absolute;
    right     : 14px;
    top       : 10px;
    color     : #999;
    font-size : 16px;
}

.material_big_number {
    font-size   : 32px;
    font-weight : 300;
    color       : #C00;
    padding     : 20px 0px 20px 0px;
    width       : 100%;
    box-sizing  : border-box;
    text-align  : center;
    min-height  : 63px;
}

.material_big_number span:not(.fa):after {
    content: " issues";
    font-size: 12px;
    text-transform : uppercase;
}

.material_button_bottom {
    position         : absolute;
    width            : 100%;
    background-color : #0782C1;
    color            : #FFF;
    font-weight      : bold;
    padding          : 10px;
    box-sizing       : border-box;
    text-align       : center;
    font-size        : 14px;
    transition       : all 0.2s;
}

.material_button_bottom:hover {
    cursor         : pointer;
    -webkit-filter : saturate(2);
    transition     : all 0.2s;
}

.material_cell_content {
    position   : relative;
    display    : block;
    min-height : 56px;
}

.material_button_bottom .fa {
    padding-right : 10px;
}

.material_container_header {
    font-size      : 16px;
    border-bottom  : 1px solid rgba(0, 0, 0, 0.05);
    width          : 100%;
    padding        : 10px;
    box-sizing     : border-box;
    color          : #666;
    font-weight    : bold;
    padding-bottom : 10px;
    margin-bottom  : 10px;
}

.material_container_header .fa {
    position  : absolute;
    right     : 14px;
    top       : 14px;
    color     : #999;
    font-size : 16px;
}

.material_hidden_content {
    display : none;
}

.material_table div[selector=entry] {
    display       : table-row;
    padding       : 4px;
    border-bottom : 1px solid rgba(0, 0, 0, 0.05);
}

.material_table[selector=results_output] {
    box-sizing : border-box;
}

.material_table_container {
    padding          : 10px;
    width            : 94%;
    box-sizing       : border-box;
    max-height       : 300px;
    overflow         : hidden;
    overflow-y       : scroll;
    border-radius    : 3px;
    box-shadow       : 0px 2px 4px rgba(0, 0, 0, 0.2);
    background-color : #FFF;
    margin           : 0 auto;
    margin-bottom    : 30px;
}

.material_seperator {
    height        : 15px;
    margin-bottom : 15px;
    border-bottom : 1px solid rgba(0, 0, 0, 0.05);
}

.material_fab_badge {
    position         : absolute;
    top              : -5px;
    left             : -5px;
    background-color : #444;
    padding          : 1px 4px;
    color            : #FFF;
    z-index          : 100002;
    border-radius    : 50px;
    font-size        : 10px;
    min-width        : 10px;
    text-align       : center;
}

.material_large_cell_text {
    color          : #FFF;
    font-size      : 20px;
    text-align     : center;
    padding-top    : 10px;
    padding-bottom : 10px;
    border-radius  : 2px;
}

.material_empty_cell {
    display        : table-cell;
    width          : 50%;
    padding        : 10px;
    vertical-align : top;
}

.material_split_cell_large_text {
    color       : #444;
    font-weight : bold;
    font-size   : 18px;
    text-align  : right;
}

.material_split_cell_small_text {
    color       : #444;
    font-size   : 10px;
    line-height : 12px;
    margin-top  : 4px;
    text-align  : right;
}

.material_heading {
    font-size     : 2em;
    font-family   : Roboto, Arial, Helvetica, sans-serif;
    color         : #666;
    font-weight   : 300;
    padding       : 10px 0px;
    border-bottom : 1px dotted rgba(0, 0, 0, 0.1);
    margin-bottom : 10px;
}

.material_toggle_container {
    position : relative;
    left     : 10px;
    width    : 30px;
    height   : 20px;
}

.material_toggle_container:hover {
    transition : all 0.2s;
    opacity    : 0.8;
    cursor     : pointer;
}

.material_toggle_track {
    width            : 100%;
    height           : 10px;
    position         : absolute;
    top              : 50%;
    left             : 0px;
    transform        : translate(0%, -50%);
    background-color : #666;
    border-radius    : 20px;
    behavior         : url(PIE.php);
}

.material_toggle_knob {
    z-index       : 2;
    width         : 16px;
    height        : 16px;
    border-radius : 10px;
    position      : absolute;
    top           : 50%;
    left          : 14px;
    transform     : translate(0%, -50%);
    box-shadow    : 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.1555), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
    transition    : all 0.2s;
    behavior      : url(PIE.php);
}

.material_toggle_off .material_toggle_knob {
    left             : 0px;
    transition       : all 0.2s;
    background-color : #F6F6F6 !important;
}

.material_toggle_off .material_toggle_track {
    transition       : all 0.2s;
    background-color : #D6D6D6;
}

.toggle_disabled {
    pointer-events : none;
}

.toggle_disabled .material_toggle_knob {
    background-color : #CCC !important;
}

.toggle_disabled .material_toggle_track {
    background-color : #BBB !important;
}

.material_toggle_off.toggle_disabled .material_toggle_track {
    background-color : #E1E1E1 !important;
}

.material_ie_fallback_table {
    font-size : 12px;
    color     : #444;
}

.material_ie_fallback_table td {
    padding : 5px;
}

.loading_spiral_container {
    width: 100%;
    height: 100px;
    position: relative;
    display: block;
}

.ie_loading_icon {
    font-size: 2em;
    text-align: center;
    width: 100%;
    top: 35%;
    line-height: 100%;
    position: absolute;
}

.loading_circular_svg {
    -webkit-animation: loading_spiral_rotate 2s linear infinite;
    animation: loading_spiral_rotate 2s linear infinite;
    height: 100%;
    -webkit-transform-origin: center center;
    -ms-transform-origin: center center;
    transform-origin: center center;
    width: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
}

.loading_circular_line {
    stroke-dasharray: 1,200;
    stroke-dashoffset: 0;
    -webkit-animation: dash 1.5s ease-in-out infinite, product_colors 7.5s ease-in-out infinite;
    animation: dash 1.5s ease-in-out infinite, product_colors 7.5s ease-in-out infinite;
    stroke-linecap: square;
}

@-webkit-keyframes loading_spiral_rotate {
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@keyframes loading_spiral_rotate {
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@-webkit-keyframes dash {
    0% {
        stroke-dasharray: 1,200;
        stroke-dashoffset: 0;
    }
    50% {
        stroke-dasharray: 89,200;
        stroke-dashoffset: -35px;
    }
    100% {
        stroke-dasharray: 89,200;
        stroke-dashoffset: -124px;
    }
}
@keyframes dash {
    0% {
        stroke-dasharray: 1,200;
        stroke-dashoffset: 0;
    }
    50% {
        stroke-dasharray: 89,200;
        stroke-dashoffset: -35px;
    }
    100% {
        stroke-dasharray: 89,200;
        stroke-dashoffset: -124px;
    }
}

@-webkit-keyframes product_colors {
    0% {
        color: #19AB49;
        stroke: #19AB49;
    }
    15% {
        color: #19AB49;
        stroke: #19AB49;
    }
    20% {
        color: #F0B608;
        stroke: #F0B608;
    }
    35% {
        color: #F0B608;
        stroke: #F0B608;
    }
    40% {
        color: #447EC0;
        stroke: #447EC0;
    }
    55% {
        color: #447EC0;
        stroke: #447EC0;
    }
    60% {
        color: #6633BB;
        stroke: #6633BB;
    }
    75% {
        color: #6633BB;
        stroke: #6633BB;
    }
    80% {
        color: #92278F;
        stroke: #92278F;
    }
    95% {
        color: #92278F;
        stroke: #92278F;
    }
    100% {
        color: #19AB49;
        stroke: #19AB49;
    }
}

@-moz-keyframes product_colors {
    0% {
        color: #19AB49;
        stroke: #19AB49;
    }
    15% {
        color: #19AB49;
        stroke: #19AB49;
    }
    20% {
        color: #F0B608;
        stroke: #F0B608;
    }
    35% {
        color: #F0B608;
        stroke: #F0B608;
    }
    40% {
        color: #447EC0;
        stroke: #447EC0;
    }
    55% {
        color: #447EC0;
        stroke: #447EC0;
    }
    60% {
        color: #6633BB;
        stroke: #6633BB;
    }
    75% {
        color: #6633BB;
        stroke: #6633BB;
    }
    80% {
        color: #92278F;
        stroke: #92278F;
    }
    95% {
        color: #92278F;
        stroke: #92278F;
    }
    100% {
        color: #19AB49;
        stroke: #19AB49;
    }
}

@keyframes product_colors {
    0% {
        color: #19AB49;
        stroke: #19AB49;
    }
    15% {
        color: #19AB49;
        stroke: #19AB49;
    }
    20% {
        color: #F0B608;
        stroke: #F0B608;
    }
    35% {
        color: #F0B608;
        stroke: #F0B608;
    }
    40% {
        color: #447EC0;
        stroke: #447EC0;
    }
    55% {
        color: #447EC0;
        stroke: #447EC0;
    }
    60% {
        color: #6633BB;
        stroke: #6633BB;
    }
    75% {
        color: #6633BB;
        stroke: #6633BB;
    }
    80% {
        color: #92278F;
        stroke: #92278F;
    }
    95% {
        color: #92278F;
        stroke: #92278F;
    }
    100% {
        color: #19AB49;
        stroke: #19AB49;
    }
}