@font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    src: url(../icons/MaterialIcons-Regular.eot); /* For IE6-8 */
    src: local('Material Icons'),
    local('MaterialIcons-Regular'),
    url(../icons/MaterialIcons-Regular.woff2) format('woff2'),
    url(../icons/MaterialIcons-Regular.woff) format('woff'),
    url(../icons/MaterialIcons-Regular.ttf) format('truetype');
}
.md .checkbox i, .md .icon-checkbox {
    border: 1px solid #ffffff;
}

.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';
}

/*
   statusbar-overlay sets the background color for the overlay. Black text is the default when the statusbar plugin is not added. When the
   statusbar plugin is added, it also adds default setting to make the content white via:

       <preference name="StatusBarStyle" value="lightcontent"/>

   Setting the background color to black will allow the default light content (white text/icons) to show on it. The statusbar plugin is included
   in the config.xml file and will be added by the CLI when you build locally.

   See https://github.com/apache/cordova-plugin-statusbar
*/

.statusbar-overlay {
    background: #000000;
}

div[class*="col"] {
    /*background: #fff;*/
    text-align: center;
    color: #000;
    /*border: 1px solid #ddd;*/
    padding: 5px;
    margin-bottom: 15px;
    font-size: 12px;
}

.main-tiles div.card {
/*.main-tiles div {*/
    /*border:  1px solid #FFFFFF;*/
    border-radius: 50%;
    font-size: 15vw;
    color: #FFFFFF;
    background-color: #2196f3;
    /*background-color: #1976d2;*/
    width: 60vw;
    height: 60vw;
    line-height: 60vw;
    margin: 8px auto;
    cursor: pointer;
}

@media all and (orientation:portrait) {
    .main-tiles div.card {
        font-size: 15vw;
        width: 60vw;
        height: 60vw;
        line-height: 60vw;
    }
}

@media screen and (orientation:landscape) {
    .main-tiles div.card {
        font-size: 12vh;
        width: 50vh;
        height: 50vh;
        line-height: 50vh;
    }
}
.main-tiles div span.card-content{
    line-height: 1;
    vertical-align: middle;
    display: inline-block;
    display: none;
}

.main-tiles div span#start-text{
    line-height: 1;
    vertical-align: middle;
    display: inline-block;
}
.page-content{
    /*background-color: #2196f3;*/
    background-color: #1976d2;
}

button#mainToggle {
    background-color: #2196f3;
    /*background-color: #1976d2;*/
}

.card-blue{
    background-color: #2196f3;
    color: #fff;
    width: 100%;
}
.card-blue .card-content{
    text-align: justify;
}
.card-blue .card-footer{
    text-align: right;
    color: #fff;
}

.card-blue a{
    color: #fff;
}