@import url('../variables-2.html');
@import url('../color-variables-2.html');

@font-face
{
    font-family: 'Roboto';
    src:         url('../roboto-regular-2.html') format('truetype');
    font-weight: 400;
}

@font-face
{
    font-family: 'Roboto';
    src:         url('../roboto-light-2.html') format('truetype');
    font-weight: 300;
}

@font-face
{
    font-family: 'Roboto';
    src:         url('../roboto-bold-2.html') format('truetype');
    font-weight: 600;
}

html
{ font-size: var(--base-font-size); }

html,
body,
.web
{ height: 100%; }

.web
{
    display:        -webkit-flex;
    display:        -ms-flexbox;
    display:        flex;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
}

body
{ background-color: #f1f1f1; }

.modal-backdrop.in
{ opacity: .5; }

.modal-backdrop
{ background: #4a4a4a; }

.modal-content
{
    border-color:  rgba(255, 255, 255, .5);
    border-radius: 0;
    background:    #4a4a4a;
}

.modal-header,
.modal-body
{ padding: 0; }

ul.nav.nav-pills > li > a
{ border-radius: 0; }

.modal-header
{
    display:        -webkit-flex;
    display:        -ms-flexbox;
    display:        flex;
    -webkit-flex-direction: row-reverse;
        -ms-flex-direction: row-reverse;
            flex-direction: row-reverse;
}

.modal-header button
{
    padding: .5rem;
}

.modal-header h4
{
    padding: 1rem;
    -webkit-flex:    1 1 auto;
        -ms-flex:    1 1 auto;
            flex:    1 1 auto;
}

.modal-header button,
.modal-header h4
{ color: #fff; }

.modal-header .close:hover,
.modal-header .close:focus
{
    opacity:    .75;
    color:      #fff;
    background: #333;
}

.modal-header button.close
{ margin-top: 0; }

.modal-header button
{ height: auto; }

/* Reset */
html,
body,
div
{
    margin:  0;
    padding: 0;
    border:  0;
}

/* Box-sizing border-box */
*
{ box-sizing: border-box; }

/* Set up a default font and some padding to provide breathing room */
body
{
    font-family:             'Roboto', 'Helvetica Neue', sans-serif !important;
    font-size:               var(--font-size--16);
    color:                   #000;
    color:                   var(--text-color) !important;
    -webkit-font-smoothing:  antialiased;
    -moz-osx-font-smoothing: grayscale;
}

p /* RH suggested change */
{
    font-size:      var(--font-size--16);
    font-weight:    var(--font-weight--4);
    line-height:    1.3rem;
    letter-spacing: 0;
    color:          rgba(0, 0, 0, .75);
}

.mdl-card__supporting-text /* RH suggested change -- add a class specific to track, function, activity and paper description */
{
    color:       var(--text-color);
    font-size:   var(--font-size--16);
    line-height: 1.3rem;
}

h5
{
    font-size:   1.25rem; /* 20px */
    font-weight: 400;
    color:       #000;
    color:       var(--text-color) !important;
}

h4
{
    font-size: 1.5625rem; /* 25px */
    color:     #000;
    color:     var(--text-color) !important;
}

h3
{
    font-size: 1.875rem; /* 30px */
    color:     #000;
    color:     var(--text-color) !important;
}

h2
{
    font-size:   2.1875rem; /* 35px */
    font-weight: 600;
    color:       #000;
    color:       var(--title-color) !important;
}

h1
{
    font-size:   2.5rem; /* 40px */
    font-weight: 600;
    color:       #000;
    color:       var(--title-color) !important;
}

/*ul
{
    margin:  .66rem;
    padding: 1.33rem;
}

li
{
    font-size:   1rem;
    font-weight: 400;
    color:       var(--text-color) !important;
}
*/
input
{
    font-size: var(--font-size--14);
}

button
{
    font-size:        var(--font-size--16);
    display:          inline-block;
    height:           3.66rem;
    padding:          .6rem 1.2rem;
    cursor:           pointer;
    text-decoration:  none;
    color:            rgba(255, 255, 255, .87);
    border-style:     none;
    background-color: #106cc8;
}

button:hover
{ background-color: #28739e; }

a
{
    color: #337ab7;
    text-decoration: underline;
}

a:hover, a:active
{
    text-decoration: none !important;
    color: #337ab7 !important;
}

/* platform specific */
.desktop lang-switcher
{ display: none; }

.mdl-grid
{ margin: 0; }

a:hover
{ text-decoration: none; }

/*Custom Cells to keep everything in place*/
.custom-cell-nav
{ width: 21.3335rem; }

.custom-cell-body
{ width: calc(100% - 22rem); }

.center-content
{
    margin:    0 auto;
    max-width: 1546px;
}


/*MDL Changes*/
.mdl-color--primary,
.mdl-button--raised.mdl-button--colored,
.mdl-button--raised.mdl-button--colored:hover,
.mdl-button--raised.mdl-button--colored:active,
.mdl-button--raised.mdl-button--colored:focus:not(:active),
.mdl-button--primary.mdl-button--primary.mdl-button--raised,
.mdl-button--primary.mdl-button--primary.mdl-button--fab
{ background-color: var(--primary-color) !important; }

.mdl-color--primary-contrast,
.mdl-button--raised.mdl-button--colored,
.mdl-button--primary.mdl-button--primary
{ background-color: var(--primary-contrast) !important; }

.mdl-color--primary-dark
{ background-color: var(--primary-secondary-color) !important;}

.mdl-color-text--primary,
.mdl-button.mdl-button--colored,
.mdl-button--primary.mdl-button--primary
{ color: var(--primary-color) !important; }

.mdl-color-text--primary-contrast,
.mdl-button--raised.mdl-button--colored,
.mdl-button--primary.mdl-button--primary.mdl-button--raised,
.mdl-button--primary.mdl-button--primary.mdl-button--fab
{ color: var(--primary-contrast) !important; }

.mdl-color-text--primary-dark
{ color: var(--primary-secondary-color) !important; }


@media screen and (max-width: 960px)
{
    .custom-cell-nav
    { width: 16rem; }

    .custom-cell-body
    {
        padding-left: 0rem;
        width:        calc(100% - 16rem);
    }
}