/*
    CONTENTS:               /////////////////////////////////////////////////////////
    ---------------------
    unordered list
    user roles
        centering divs      - used for USER ROLES buttons
        button styling      - div inside div for transparency
        styling box
    login box
        grey box            - that holds the 'user name' & 'password' input boxes + 'login' button
        labels              - for 'user name' & 'password'
        icons               - for 'user name' & 'password'
        input boxes         - for 'user name' & 'password'
    buttons
        header button
        login button
    body 
        top padding         - to account for the fixed navbar overlaying your content
        full backg pic      - centers + no-repeat on full background picture
    headlines
        headlineOne         - used for 'PROVIDING COVERAGE'
        headlineTwo         - used for 'PORTAL' text
    buttons
        header              - blue with white text
    spacers                 - allows for adding white space
    media querries          
                            - hides objects I don't want seen on mobile devices
                            - logo swap
    grey lines
        greyLine            - replaces <hr> color: #f0f0f0;
        darkerGreyLine      - color: #A8A8A8;
    login footer
        p.loginFooterText
        a.loginFooterLink
    moz-selection           - change text selection color
    input box 
        remove border highlight 
*/

h1, h2, h3, h4, h5, h6 { font-family: 'Nunito Sans', sans-serif !important; }

.panel-default > .panel-heading {
    color: #ffffff;
    background-color: #295578;
    border-color: #295578;
}
.panel-heading {
    border: #295578 solid 1px !important;
    -webkit-transition-duration: 0.4s;
    transition-duration: 0.4s;
}

.blueText {
    color: #295578;
    font-weight: 500;
    font-size: 14px;
}

    /* TABLET VISIBILITY */
    @media only screen and (max-width: 991px) {


        /* HIDDEN ON TABLET */

        .hideOnTablet {
            visibility: hidden;
            clear: both;
            display: none;
        }


        /* VISIBLE ON MOBILE */

        .showOnTablet {
            visibility: visible;
            display: block;
        }
    }

 /* ------------------ ICONS ----------------------------  */
.appLinkIcons {
    height: 40px;
    width: 40px;
    padding-bottom: 5px;
}

.appHomeIcons {
    height: 120px;
    width: 120px;
    margin:auto;
    display:block;
    float:right;
}

/* Anthony's toggle div styles */

.menu {
    height: 40px;
    border: 4px solid transparent;
    margin-top: 4px;
    margin-bottom: 2px;
    margin-left: 4px;
    margin-right: 4px;
    /*padding-left: 15px;
    padding-right: 15px;*/
    padding-top: 4px;
    padding-bottom: 10px;
    /*font-size: 17px;*/
    background-color: transparent;
    /*color: white;*/
}

.menuLight {
    margin-top: 10px;
    margin-bottom: 10px;
    font-size:20px;
}

.masterMainLink{
    color: #555;
    line-height: 27px;
    text-transform: uppercase;
    text-shadow: none;
    font-weight: normal;
    font-family: 'Nunito Sans', sans-serif;
}
    .masterMainLink:hover {
        color: #4765a0;
        text-decoration: none;
    }


/* ///////////////////////// body */
/*---------------------------------------------------------------*/
/*---------------------------------------------------------------*/
/*---------------------------------------------------------------*/
body {
    /* body top padding - to fix navbar overlay */
    padding-top: 130px;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    font-family: 'Roboto', sans-serif;
}
/*---------------------------------------------------------------*/
/*---------------------------------------------------------------*/
/*---------------------------------------------------------------*/

/* ///////////////////////// headline */
#headlineOneMaster {
    display: inline-flex;
    font-family: 'Nunito Sans', sans-serif; /* Google API font */
    font-size: 26px;
    color: #ffffff;
    text-align: center;
}

.headlineTwoMaster {
    font-family: 'Nunito Sans', sans-serif; /* Google API font */
    font-size: 21px;
    color: #ffffff;
    text-align: center;
    display: flex;
    margin-right: auto;
    margin-left: auto;
    flex-direction: row;
    justify-content: center;
}



.font-weight-100 {
    font-weight: 100;
}
.font-weight-200 {
    font-weight: 200;
}
.font-weight-300 {
    font-weight: 300;
}
.font-weight-400 {
    font-weight: 400;
}
.font-weight-500 {
    font-weight: 500;
}
.font-weight-600 {
    font-weight: 600;
}
.font-weight-700 {
    font-weight: 700;
}
.font-weight-800 {
    font-weight: 800;
}
.font-weight-900 {
    font-weight: 900;
}

/* //////// Spacers ///////////////////////////////////////////////// */
/* MOVED to Utility.css */
.spacer-1px {
    padding-top: 1px;
}

.spacer-2px {
    padding-top: 2px;
}

.spacer-3px {
    padding-top: 3px;
}

.spacer-4px {
    padding-top: 4px;
}

.spacer-5px {
    padding-top: 5px;
}

.spacer-6px {
    padding-top: 6px;
}

.spacer-7px {
    padding-top: 7px;
}

.spacer-8px {
    padding-top: 8px;
}

.spacer-9px {
    padding-top: 9px;
}

.spacer-10px {
    padding-top: 10px;
}

.spacer-15px {
    padding-top: 15px;
}

.spacer-20px {
    padding-top: 20px;
}

.spacer-25px {
    padding-top: 25px;
}

.spacer-30px {
    padding-top: 30px;
}

.spacer-35px {
    padding-top: 35px;
}

.spacer-40px {
    padding-top: 40px;
}

.spacer-45px {
    padding-top: 45px;
}

.spacer-50px {
    padding-top: 50px;
}

.spacer-55px {
    padding-top: 55px;
}

.spacer-60px {
    padding-top: 60px;
}

.spacer-65px {
    padding-top: 65px;
}

.spacer-70px {
    padding-top: 70px;
}

.spacer-75px {
    padding-top: 75px;
}

.spacer-80px {
    padding-top: 80px;
}

.spacer-85px {
    padding-top: 85px;
}

.spacer-90px {
    padding-top: 90px;
}

.hiddenOnDesktop {
    display: none;
}


/* ///////////////////////// media querries  
    hides objects I don't want seen on mobile devices */
@media screen and (max-width: 991px) {

    .hiddenOnDesktop {
        display: block;
    }

    body {
        padding-top: 102px;
    }
    /* the header gets smaller on mobile - this reduces the body padding
                                        to accomodate for the extra space */
    #spacer60HideOnMobile.spacer-60px { /* getting rid of space between '4 Main Links' and 'Mission' on mobile */
        clear: both;
        display: none;
        visibility: hidden;
    }
}

@media (min-width: 992px) {
.appCol {
        max-width: 14%;
    }
}
@media (min-width: 767px) {
    .appContainer {
        max-width: 75%;
        min-width: 75%;
    }
    
}
/*  Logo swap
            desktop mode - hides small logo
            mobile mode - hides big logo + shows small logo
    */
#smallLogo {
    display: none;
}

@media only screen and (max-width: 500px) {
    #bigLogo {
        display: none;
    }
    /*.linksBar { display: none; }*/ /* hides the white bar above the MENU when on mobile */

    .spacer-60px .hideOnMobile {
        visibility: hidden;
        display: none;
    }
}


@media screen and (max-width: 575px) {
    .hideOnMobile {
        visibility: hidden;
        clear: both;
        display: none;
    }
}

/* ///////////////////////// greyLine - replaces <hr> 
                                        use it: <div class="greyLine"></div> */
.greyLine {
    border-bottom: solid 1px #f0f0f0;
    margin: 10px 0px 10px 0px; /* top, right, bottom, left */
}

.darkerGreyLine {
    border-top: solid 1px #A8A8A8;
    margin: 10px 0px 0px 0px; /* top, right, bottom, left */
}

/* ///////////////////////// login footer styles  */
p.loginFooterText {
    color: #C0C0C0; /* was: #ECECEC #E7E7E7 #D4D4D4 */
    font-size: 12px;
    padding-top: 8px;
}

a.loginFooterLink {
    color: #C0C0C0; /* was: #ECECEC #E7E7E7 #D4D4D4 */
    font-size: 12px;
    padding-top: 8px;
}


/* ///////////////////////// change text selection color */
::-moz-selection { /* for Firefox */
    background: #E5FDFF; /* pink: #FF0099, blue: #BFD7E8 #33E6FA #33E6FA*/
    color: #EEE;
    text-shadow: none;
}

::selection { /* for Chrome */
    background: #E5FDFF; /* pink: #FF0099, blue: #BFD7E8 #33E6FA #33E6FA*/
    color: black;
    text-shadow: none;
}


/* ///////////////////////// remove border highlight - on input text element */
input:focus,
select:focus,
textarea:focus,
button:focus {
    outline: none;
}


/* ///////////////////////// navbar shadow */
/*#bootstrapOverride .navbar-default {
    -webkit-box-shadow: 0px 12px 23px -12px rgba(0,0,0,0.54);
    -moz-box-shadow: 0px 12px 23px -12px rgba(0,0,0,0.54);
    box-shadow: 0px 12px 23px -12px rgba(0,0,0,0.54);
}*/

/* ///////////////////////// edit profile dropdown */
/* this overrides the 'width' of the dropdown menu 
       the width will still be dictated by how many characters are in the links
       as well as the margins */

.envWarning {
    height: 30px;
    font-size: 20px;
    color: red;
    background: lime;
    margin-bottom: 5px;
    margin-right: -30px;
    margin-left: -50px;
    text-align: center;
    justify-content: center;
}

.tooltip-q {
    margin-left: 5px;
    background-color: grey;
    color: white;
    display: inline-block;
    width: 20px;
    line-height: 10px;
    text-align: center;
    padding: 5px;
    border-radius: 50%;
    font-weight: bold;
    opacity: 100;
    font-size: 14px
}

.cursorPointer {
    cursor: pointer;
}