/* Please see documentation at https://docs.microsoft.com/aspnet/core/client-side/bundling-and-minification
for details on configuring this project to bundle and minify static web assets. */

a.navbar-brand {
  white-space: normal;
  text-align: center;
  word-break: break-all;
}

/* Provide sufficient contrast against white background */
a {
  color: #0366d6;
}

.btn-primary {
  color: #fff;
  background-color: #1b6ec2;
  border-color: #1861ac;
}

.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
  color: #fff;
  background-color: #1b6ec2;
  border-color: #1861ac;
}

.error {
    color: red;
    background-color: mistyrose;
}

/* Sticky footer styles
-------------------------------------------------- */
html {
  font-size: 14px;
}
@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.border-top {
  border-top: 1px solid #e5e5e5;
}
.border-bottom {
  border-bottom: 1px solid #e5e5e5;
}

.box-shadow {
  box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}

button.accept-policy {
  font-size: 1rem;
  line-height: inherit;
}

.header {
    z-index: 10;
}

.main-container {
    z-index: 5;
    margin-top:25px;
}

.footer {
    z-index: 0;
}

/* Sticky footer styles
-------------------------------------------------- */
html {
  position: relative;
  min-height: 100%;
}

body {
  /* Margin bottom by footer height */
  margin-bottom: 60px;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  white-space: nowrap;
  line-height: 60px; /* Vertically center the text there */
}


/* ===== Primary Styles ========================================================
   Author: Shajed Evan
   ========================================================================== */


/* General Style 
      Applicable on any elements. Insert any global styling in this group
   */
body {
    background: #cccccc url(../img/BESTRobotics_Logo_white.png);
    background-position-x: center;
    background-repeat: no-repeat;
    background-position-y: center;
    height: 100vh;
    position: relative;
    display: grid;
    grid-template-rows: 55px auto 50px;
}

h1 {
    font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif;
    font-weight: 400;
}

p {
    font-size: 1.231em;
    line-height: 21px;
}

/* Google Web Font Loader Classes */
.wf-loading h1 {
    visibility: visible;
}

.wf-inactive h1 {
    visibility: visible;
}

.wf-active h1 {
    font-family: 'Oleo Script',cursive, serif;
}

/* Header Style */
#header {
    display: block;
    background: #333333;
    background: -moz-linear-gradient(top, #333333 0%, #000000 100%);
    background: -webkit-linear-gradient(top, #333333 0%,#000000 100%);
    background: linear-gradient(to bottom, #333333 0%,#000000 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#333333', endColorstr='#000000',GradientType=0 );
    color: white;
    text-align: center;
    padding: 1em;
    grid-row: 1;
}

    #header h3 {
        color: white;
        margin: 0;
    }

.logo {
    display: block;
    padding-top: 5px;
}

    .logo a {
        display: block;
        width: 120px;
        height: 62px;
        margin: auto;
        padding: auto;
        background: url("../img/logo.png") no-repeat;
        text-indent: -9999px;
    }

/* First Placeholder Style 
    --------------------------
   */
.first_placeholder {
    margin-top: 2em;
    margin-bottom: 2em;
    text-align: center;
}

    .first_placeholder h1 {
        color: #362f2d;
        font-size: 4.231em;
        line-height: 1em;
        margin-bottom: 0.5em;
        margin-top: 1em;
    }

    .first_placeholder a { /*color: #cc5944; font-size:1.385em;*/
    }

    /* Collapsible Box Style */
    .first_placeholder .collapse {
        visibility: hidden;
    }

    .first_placeholder .collapsible_box {
        width: 60%;
    }

    .first_placeholder .collapsible_box {
        background: #DDD;
        background: rgba(222,222,222,0.5);
        border: 1px solid #CCC;
        padding: 0 1em;
        margin: 1em auto;
        text-align: center;
    }

        .first_placeholder .collapsible_box a.close {
            opacity: 0.9;
            filter: alpha(opacity=90);
        }

        .first_placeholder .collapsible_box h1 {
            font-size: 1.8em;
            margin-top: 1em;
            color: #CC5944;
        }

        .first_placeholder .collapsible_box p {
            font-size: 1.2em;
            text-align: left;
            margin-bottom: 1.5em;
        }

        .first_placeholder .collapsible_box ul {
            margin-bottom: 1em;
            text-align: left;
        }

        .first_placeholder .collapsible_box li {
            list-style: none;
            padding: 0.5em 1em;
            font-size: 1.2em;
        }

        .first_placeholder .collapsible_box .btn {
            margin-bottom: 1em;
        }

    .first_placeholder form {
        margin-top: 0em;
        text-align: center;
    }

    .first_placeholder label {
        text-align: center;
    }

        .first_placeholder label.big {
            font-size: 2em;
            color: #818181;
            text-align: center;
            margin-bottom: 0.5em;
        }

    .first_placeholder p {
        text-align: center;
    }

        .first_placeholder p span {
            color: #CC5944;
        }

    .first_placeholder form input {
        font-size: 1.385em;
        color: #999;
        font-weight: normal;
        margin: 10px 5px;
    }

    .first_placeholder form .btn {
        font-size: 1.385em;
        color: #000000;
        padding: 7px;
        margin-bottom: 7px;
    }

    /* Carousel Slider */
    .first_placeholder .slide {
        vertical-align: middle;
        margin: 0 auto;
        text-align: center;
        max-height: 375px;
        overflow: hidden;
    }

/* IE7, IE8 hacks for First Placeholder Elements */
.ie7 .first_placeholder form .btn, .ie8 .first_placeholder form .btn {
    background-color: #CC5944 !important;
}


/* Second Placeholder Style 
    ---------------------------
   */
.second_placeholder {
    margin-top: 2em;
}

    .second_placeholder h1 {
        text-align: center;
        font-size: 2.769em;
        color: #cc5944;
        line-height: 1.3em;
        margin-bottom: 1em;
    }

    .second_placeholder h2 {
        font-size: 1.845em;
        font-weight: normal;
        line-height: 1em;
    }

    .second_placeholder p {
        padding-top: 5px;
    }

/* Featured Section Style */
.featured_one, .featured_two, .featured_three {
    width: auto;
    height: 36px;
    padding-left: 45px;
    padding-bottom: 0.5em;
}

.featured_one {
    background: url('../img/featured_icon_display.png') no-repeat left top;
}

.featured_two {
    background: url('../img/featured_icon_plus.png') no-repeat left top;
}

.featured_three {
    background: url('../img/featured_icon_rss.png') no-repeat left top;
}


.season-toolbar {
    font-weight: bold;
    color: white;
}

/* Twitter Widget */
.tweet,
.query {
    color: #333;
}

.tweet {
    padding: 3em 0em;
    width: 50%;
    margin: 0 auto;
}

    .tweet h3 {
        font-weight: normal;
        text-align: center;
    }

.query {
    padding: 1.5em 2em;
    -webkit-border-radius: 0.5em;
    -moz-border-radius: 0.5em;
    border-radius: 0.5em;
    background: #cc5944;
    background: rgba(204,89,68,0.3);
    text-shadow: 0px 1px 1px #FFF;
    box-shadow: inset 0px 1px 3px 1px rgba(000,000,000,0.5), 0px 1px 1px 1px #FFF;
    -webkit-box-shadow: inset 0px 1px 3px 1px rgba(000,000,000,0.5), 0px 1px 1px 1px #FFF;
}

.ie7 .query, .ie8 .query {
    background: #cc5944;
}

.tweet_list {
    list-style: none;
    margin: 0;
    padding: 0;
    overflow-y: hidden;
}

    .tweet_list li {
        overflow-y: auto;
        overflow-x: hidden;
        padding-bottom: 0.5em;
        list-style-type: none;
    }

        .tweet_list li a {
        }

    .tweet_list .tweet_box {
        display: block;
        width: 85%;
        float: right;
        text-align: left;
    }

    .tweet_list .tweet_text {
        display: block;
        font-size: 1.2em;
        padding: 0.8em 0em;
    }

    .tweet_list .tweet_even {
        background-color: #91E5E7;
    }

    .tweet_list .tweet_avatar {
        padding-right: 1em;
        float: left;
    }

        .tweet_list .tweet_avatar img {
            vertical-align: middle;
            border: 5px solid #BBB;
            margin-top: 0.8em;
        }

.ie7 .tweet_list .tweet_avatar img, .ie8 .tweet_list .tweet_avatar img {
    border: 0px;
}

/* Footer Style */

#footer {
    padding: 1em 2em;
    border-top: 1px solid #9c9c9c;
    color: #fff;
    width: 100%;
    background: #848484;
    grid-row: 3;
}

    #footer p, #footer p.credit {
        font-size: 1em;
        margin-bottom: 0;
        line-height: 18px;
    }

        #footer p.html5 {
            margin: 2em auto;
            text-align: center;
        }

footer a {
    color: white;
    font-weight: bold;
}

/* =============================================================================
   Non-Semantic Helper Classes
   ========================================================================== */

.ir {
    display: block;
    border: 0;
    text-indent: -999em;
    overflow: hidden;
    background-color: transparent;
    background-repeat: no-repeat;
    text-align: left;
    direction: ltr;
    *line-height: 0;
}

    .ir br {
        display: none;
    }

.hidden {
    display: none !important;
    visibility: hidden;
}

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

    .visuallyhidden.focusable:active, .visuallyhidden.focusable:focus {
        clip: auto;
        height: auto;
        margin: 0;
        overflow: visible;
        position: static;
        width: auto;
    }

.invisible {
    visibility: hidden;
}

.clearfix:before, .clearfix:after {
    content: "";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

.chromeframe {
    margin: 0.2em 0;
    background: #ccc;
    color: black;
    padding: 0.2em 0;
}

#rolling-table {
    max-height: 646px;
    overflow: hidden;
    border: 2px solid black;
    box-shadow: 0px 0px 15px #353535;
}

.table-striped { /* border:2px solid #333; */ /* box-shadow: 5px 5px 10px #949494; */
}

    .table-striped tbody td:not(:last-child) {
        border-right: 2px solid white;
    }

    .table-striped thead tr th {
        padding: .3em;
        background-color: rgb(16, 31, 96);
        color: white;
    }

.red {
    color: red;
}

.green {
    color: green;
}

.white {
    background-color: #FFF;
}

.bk-red {
    background-color: rgba(255, 153, 153, .8);
}

.dropped {
    text-decoration: line-through;
    background-color: lightcoral;
}

.certified {
    font-weight:bolder;
    font-style:italic;
    background-color: lightgreen;
}

.submitted-rubric {
    border-top: dashed 1px;
    border-bottom: dashed 1px;
    white-space: nowrap;
}

.completed:before {
    content: "• ";
    background-color: lightcyan;
}

.lowest {
    color: red;
    text-decoration: line-through;
}

.table-striped tbody tr {
    background-color: rgba(204, 221, 255, .8);
}

    .table-striped tbody tr:nth-child(2n+1) {
        background-color: rgba(255,255,255, 0.8);
    }

    .table-striped tbody tr.light-grey {
        background-color: rgba(231,231,231, .9);
    }

    .table-striped tbody tr.medium-grey {
        background-color: rgba(200, 200, 200, .9);
    }

    .table-striped tbody tr:nth-child(odd) td.blue, .light-blue, .table-striped tbody tr.light-blue {
        background-color: rgba(204, 221, 255, .8);
    }

    .table-striped tbody tr:nth-child(even) td.blue, .table-striped tbody tr.blue {
        background-color: rgba(148, 170, 214, .8);
    }

    .table-striped tbody tr:nth-child(odd) td.red, .light-red, .table-striped tbody tr.light-red {
        background-color: rgba(255, 204, 204, .8);
    }

    .table-striped tbody tr:nth-child(even) td.red, .table-striped tbody tr.red {
        background-color: rgba(255, 153, 153, .8);
    }

    .table-striped tbody tr:nth-child(odd) td.green, .light-green, .table-striped tbody tr.light-green {
        background-color: rgba(153, 255, 153, .6);
    }

    .table-striped tbody tr:nth-child(even) td.green, .table-striped tbody tr.green {
        background-color: rgba(102, 255, 102, .6);
    }

    .table-striped tbody tr:nth-child(odd) td.yellow, .light-yellow, .table-striped tbody tr.light-yellow {
        background-color: rgba(255, 255, 179, .8);
    }

    .table-striped tbody tr:nth-child(even) td.yellow, .table-striped tbody tr.yellow {
        background-color: rgba(255, 255, 51, .8);
    }

#main {
    margin-bottom: 20px;
    grid-row: 2;
}
main {
    background-color: whitesmoke;
    padding: 15px;
}

#completed-matches table {
    width: 100%;
}

    #completed-matches table thead tr th {
        font-size: 1.5em;
        font-weight: bold;
        text-align: center;
    }

    #completed-matches table tbody tr td {
        font-size: 1.4em;
        text-align: center;
        padding: .5em;
    }

.highlight {
    background-color: yellow;
}

b.score {
    font-size: 7em;
    margin: auto;
}

.field > h3 {
    font-size: 300%;
    font-weight: bold;
    color: white;
    text-shadow: 0px 0px 5px #807c7c;
}

.scorecard-container {
    cursor: pointer;
    background: rgba(255,255,255, .9);
    margin-bottom: 2em;
    box-shadow: 0px 0px 10px 1px #ababab;
}

    .scorecard-container header {
        padding: .5em;
        min-height: 5em;
        background: #000;
    }

    .scorecard-container.red header {
        border-bottom: 10px solid red;
    }

    .scorecard-container.blue header {
        border-bottom: 10px solid blue;
    }

    .scorecard-container.green header {
        border-bottom: 10px solid green;
    }

    .scorecard-container.yellow header {
        border-bottom: 10px solid yellow;
    }

    .scorecard-container header h3 {
        margin: 0;
        color: white;
        font-weight: bold;
    }

.scorecard {
    max-width: 900px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    /* background-color: #FFF; */
    /* border: #000 1px solid; */
    position: relative;
}

.scorecard-details .score {
    font-size: 5em;
}

.scorecard-details {
    background: white;
    box-shadow: 0px 0px 10px #797979;
    padding: .5em;
    position: sticky;
    top: 1em;
    margin-bottom: 1em;
    z-index: 999;
}

    .scorecard-details.red {
        border: 3px solid red;
    }

    .scorecard-details.green {
        border: 3px solid green;
    }

    .scorecard-details.blue {
        border: 3px solid blue;
    }

    .scorecard-details.yellow {
        border: 3px solid yellow;
    }

.scorecard .field {
    padding: 8px;
    text-align: left;
    background: rgba(255, 255, 255, .9);
    margin: 1em;
    box-shadow: 0px 0px 10px #797979;
}

    .scorecard .field .Label {
        width: 35%;
        display: inline-block;
        text-align: right;
        font-weight: bold;
        padding-right: 1em;
        vertical-align: middle;
    }

    .scorecard .field input[type=text],
    .scorecard .field input[type=number],
    .scorecard .field select {
        width: 100px;
        display: inline-block;
        vertical-align: middle;
    }

.scorecard .modifier {
    display: inline-block;
    width: 75px;
}

    .scorecard .modifier input[type=text],
    .scorecard .modifier input[type=number],
    .scorecard .modifier select {
        width: 60px;
    }

    .scorecard .modifier .Label {
        width: 100%;
        font-size: 0.7em;
        text-align: center;
    }

#team-rubrics table thead th:nth-child(1), #team-rubrics table thead td:nth-child(1) {
    max-width: 40px;
}

#team-rubrics table thead th:nth-child(2), #team-rubrics table thead td:nth-child(2) {
    min-width: 180px;
}

#team-rubrics table tbody td {
    text-align: left;
}

#team-rubrics > table {
    counter-reset: rowNumber;
}

    #team-rubrics > table tbody tr {
        counter-increment: rowNumber;
    }

        #team-rubrics > table tbody tr td:first-child::before {
            content: counter(rowNumber);
            min-width: 1em;
            margin-right: 0.5em;
        }

        #team-rubrics table tbody tr td.assigned, #team-skills table tbody tr td.assigned {
            font-weight: bold;
            font-size: 1.3em;
        }

            #team-rubrics table tbody tr td.assigned a:visited, #team-skills table tbody tr td.assigned a:visited,
            #team-rubrics table tbody tr td.not-assigned a:visited, #team-skills table tbody tr td.not-assigned a:visited {
                text-decoration: underline;
            }

#rubric-score {
    border-right: 1px solid #000;
    padding-left: 2px;
}

.tablesorter-headerUnSorted {
}

.rubric-summary {
    background-color: #CCC;
}

.currentWeighted {
    font-style: italic;
    font-size: 1.2em;
    padding: 0 5px;
}

.rubric {
    background-color: white;
    text-align: left;
    width: 100%;
}

    .rubric .conditions {
        border: black 2px solid;
        margin-bottom: 20px;
    }

        .rubric .conditions:before {
            content: "Conditions";
            font-weight: bold;
        }

    .rubric .categories > div > blockquote {
        border: 1px solid #000;
        background-color: #CCC;
    }

    .rubric .categories {
        padding: 3px 0;
        border: 2px solid #000;
    }

    .rubric .items {
        border-top: 1px dotted #000;
        border-bottom: 1px dotted #000;
    }

        .rubric .items .comments .all-centered {
            margin-bottom: auto;
            margin-top: auto;
            text-align: center;
        }

        .rubric .items .h6 {
            border-top: 2px double #000;
        }

    .rubric .ranges {
        border-top: 1px inset #000;
        border-bottom: 1px inset #000;
    }

    .rubric .items table {
        width: 100%;
    }

        .rubric .items table td:first-child {
            width: 15%;
        }

        .rubric .items table td:last-child {
            width: 15%;
        }

        .rubric .items table tbody tr:not(:first-child) {
            border-top: 1px dashed #000;
        }

    .rubric .comments {
        width: 95%;
    }

#rulesApplied {
    list-style: none;
    color: red;
}

#match_summary {
    background: rgba(255, 255, 255, .8);
    border: 2px solid black;
    box-shadow: 0px 0px 15px #353535;
    margin: 1em 0;
}

    #match_summary h2, #match_summary h3 {
        /*background-color: #FFF;*/
        margin: 0;
    }

    #match_summary th {
        font-weight: bold;
        font-size: 1.2em;
        background-color: rgb(16, 31, 96);
        color: white;
        text-align: center;
        padding: .2em;
    }

    #match_summary table {
        margin-left: auto;
        margin-right: auto;
        width: 100%;
    }

        #match_summary table td {
            padding: .5em;
            text-align: center;
            font-size: 1.2em;
            width: 50%;
        }

        #match_summary table th {
        }

.nameAndTimer {
    float: left;
    padding: .5em;
    min-width: 200px;
}

#match_summary .fields {
    text-align: right;
}

#match_summary .field {
    display: inline-block;
    width: 35%;
    min-width: 240px;
    vertical-align: text-top;
}

#match-section {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    clear: both;
    /* background: rgba(255, 255, 255, .8); */
}

#rolling-table table {
    width: 100%;
    /* max-height: 700px; */
    /* min-height: 400px; */
}

    #rolling-table table thead tr th {
        font-size: 1.5em;
        font-weight: bold;
        text-align: center;
    }

    #rolling-table table tbody tr td {
        font-size: 2em;
        text-align: center;
    }

#match-section, #upcoming-matches {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

    #upcoming-matches thead th {
        text-align: center;
        font-weight: bold;
        font-size: 1.6em;
    }

    #upcoming-matches tbody td {
        padding: 5px;
        font-size: 1.4em;
    }

#GameInfo {
    margin-left: auto;
    margin-right: auto;
}

#LookupInfo label {
    font-weight: bold;
    font-size: 1.1em;
}

.judge-card {
    border: 3px solid rgb(16, 31, 96);
    background-color: rgba(204, 221, 255, .8);
    margin: 5px;
}

/* Landscape phones and down */
@media (max-width: 480px) {
    .first_placeholder .collapsible_box {
        width: 95%;
    }

    .tweet {
        padding: 2em 0em;
        width: 96%;
        margin: 0 auto;
    }

    .tweet_list .tweet_box {
        width: 55%;
    }

    .tweet_list .tweet_avatar {
        padding-right: 0em;
    }

    #footer p.credit {
        width: 70%;
    }
}

/* Landscape phone to portrait tablet */
@media (max-width: 768px) {
    .first_placeholder .collapsible_box {
        width: 95%;
    }

    .tweet {
        padding: 2em 0em;
        width: 96%;
        margin: 0 auto;
    }

    .tweet_list .tweet_box {
        width: 70%;
    }

    .tweet_list .tweet_avatar {
        padding-right: 0em;
    }
}

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 980px) {
    .tweet {
        padding: 2em 0em;
        width: 70%;
        margin: 0 auto;
    }

    .tweet_list .tweet_box {
        width: 85%;
    }

    .tweet_list .tweet_avatar {
        padding-right: 0em;
    }
}

@media (min-width: 980px) and (max-width: 1180px) {
    .tweet {
        padding: 2em 0em;
        width: 70%;
        margin: 0 auto;
    }

    .tweet_list .tweet_box {
        width: 85%;
    }
}

/* Large desktop */
@media (min-width: 1200px) {

    .second_placeholder h1 {
        padding: 0 2.5em;
    }

    .tweet {
        padding: 2em 0em;
        width: 70%;
        margin: 0 auto;
    }

    .tweet_list .tweet_box {
        width: 85%;
    }
}

/* =============================================================================
   Print Styles
   ========================================================================== */

@media print {
    * {
        background: transparent !important;
        color: black !important;
        box-shadow: none !important;
        text-shadow: none !important;
        filter: none !important;
        -ms-filter: none !important;
    }
    /* Black prints faster: h5bp.com/s */
    a, a:visited {
        text-decoration: underline;
    }

        a[href]:after {
            content: " (" attr(href) ")";
        }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after {
        content: "";
    }
    /* Don't show links for images, or javascript/internal links */
    pre, blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group;
    }
    /* h5bp.com/t */
    tr, img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    @page {
        margin: 0.5cm;
    }

    p, h2, h3 {
        orphans: 3;
        widows: 3;
    }

    h2, h3 {
        page-break-after: avoid;
    }
}

@media print {
    .no-print, .no-print * {
        display: none !important;
    }

    .rubric {
        font-size: .8em;
    }

        .rubric .items table, .rubric .category {
            -webkit-column-break-inside: avoid;
            page-break-inside: avoid;
            break-inside: avoid;
            margin: 10px 0 10px 0; /* to keep the page break from cutting too close to the text in the div */
        }
}

.loading-overlay {
    display: none;
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: rgba( 255, 255, 255, .7 ) url('../img/loading-gears-animation.gif') 50% 50% no-repeat;
}

body.loading .loading-overlay {
    overflow: hidden;
    display: block;
}


/* Rules for sizing the icon. */
.material-icons.md-8 {
    font-size: 8px;
}

.material-icons.md-11 {
    font-size: 11px;
}

.material-icons.md-18 {
    font-size: 18px;
}

.material-icons.md-24 {
    font-size: 24px;
}

.material-icons.md-36 {
    font-size: 36px;
}

.material-icons.md-48 {
    font-size: 48px;
}

/* Rules for using icons as black on a light background. */
.material-icons.md-dark {
    color: rgba(0, 0, 0, 0.54);
}

    .material-icons.md-dark.md-inactive {
        color: rgba(0, 0, 0, 0.26);
    }

/* Rules for using icons as white on a dark background. */
.material-icons.md-light {
    color: rgba(255, 255, 255, 1);
}

    .material-icons.md-light.md-inactive {
        color: rgba(255, 255, 255, 0.3);
    }