﻿div.proLogon_top div#logonPageLogo, div.patLogon_top div#logonPageLogo, div.patBrandHeader div#logoParent, #patient-portal-nav .client-logo {
    max-width: 443px;
    height: 80px;
    margin: 10px 0px 8px -34px;
    background-image: url(images/Tift_Main_Logo.png);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}


div#logoParent,
#clinical-portal-nav .client-logo,
#admin-portal-nav .client-logo {
    max-width: 413px;
    height: 76px;
    margin: 10px 4px 10px 0px;
    background-image: url(images/Tift_Main_Logo.png);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}


@media (max-width: 600px) {
    .Logon-background {
        padding-bottom: 15px !important;
    }
}



.Logon-fields {
    padding-right: 15px;
    margin-left: 16px;
}

}

.Logon-background {
    background-color: #FAFAFA;
    border-top: 20px solid #6C8DB8;
    padding-bottom: 150px;
}



.Logon-heading {
    color: #54585A;
    font-size: 20px;
    font-weight: bold;
    padding-left: 15px;
    padding-bottom: 5px;
    padding-top: 14px;
}

    .Logon-heading .icon-helpButton {
        margin-right: 10px;
    }




.Footer {
    color: #333333;
    max-width: 714px;
    margin-left: auto;
    margin-right: auto;
    height: auto;
    margin-top: 30px;
    font-size: 12px;
}


mmd-context-help-button .fa-question-circle {
    color: #78D5E1;
    vertical-align: 8px;
    margin-right: 0px;
}

    mmd-context-help-button .fa-question-circle:hover {
        color: #BBBCBC;
    }

#mmd-content mmd-help-button .fa-question-circle {
    color: #1B365D;
}

    #mmd-content mmd-help-button .fa-question-circle:hover {
        color: #78D5E1;
    }

div.navbar-header mmd-help-button .fa-question-circle:hover {
    color: #3A3632;
}

header h1.ng-binding, .logonBlock h3, .patLogonBlock h3 {
    color: #00649E !important;
    font-size: 22px;
}

.logonBlock h3, .patLogonBlock h3 {
    color: #4B4F54 !important;
    text-align: left;
    padding-left: 1px !important;
    font-size: 20px;
}

/*Patient Portal Specific*/

.logonBlock, .patLogonBlock {
    width: 100%;
    max-width: 710px;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
    margin-top: -25px;
    padding-bottom: 10px;
    background-color: #ffffff;
    -webkit-box-shadow: 0px 0px 10px 5px rgba(50, 50, 50, 0.5);
    -moz-box-shadow: 0px 0px 10px 5px rgba(50, 50, 50, 0.5);
    box-shadow: 0px 0px 10px 5px rgba(50, 50, 50, 0.5);
    background-repeat: no-repeat;
    border-radius: 10px;
    /* 	line-height: 1.0 !important;  */
}


/*Patient Portal Specific END*/


.centerWidthBox {
    width: 100%;
    max-width: 686px;
    margin-left: auto;
    margin-right: auto;
    height: auto;
    text-align: left;
    /*border:1px solid black;*/
}





.centerWidthBoxAnnouncement {
    width: 100%;
    max-width: 686px;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
    max-height: 200px;
    overflow-y: auto;
}

.logonAnncmnt {
    height: auto;
    overflow-y: auto;
}


.logonBanner {
    min-height: 75px;
    background-color: #1B365D;
    /*     border-top: 1px solid #4B4F54 ;
    border-bottom: 1px solid #4B4F54 ; */
}

    .logonBanner a {
        color: #ffffff;
        font-weight: bold;
    }

    .logonBanner span.pipe {
        color: #ffffff;
        margin: 0px 4px 0px 4px;
    }

    .logonBanner .dropdown-toggle {
        background-color: transparent;
        color: #ffffff;
        border-color: #ffffff;
    }

    .logonBanner ul.dropdown-menu {
        background-color: #A5ACAF;
    }

        .logonBanner ul.dropdown-menu a {
            color: #ffffff;
        }

            .logonBanner ul.dropdown-menu a:hover {
                background-color: #A5ACAF;
            }
/* from ea demo */
.logonPadAnnouncement {
    width: auto;
    max-height: 232px;
    overflow-y: auto;
    padding-top: 16px;
    padding-bottom: 10px;
    padding-left: 20px;
    padding-right: 20px;
    margin-top: 12px;
}

.logonScrollPositioning {
    padding-top: 12px;
    padding-bottom: 2px;
    padding-left: 15px;
    padding-right: 15px;
}


/* from ea demo */
.logonPad {
    width: auto;
    height: auto;
    padding-top: 36px;
    padding-bottom: 10px;
    padding-left: 20px;
    padding-right: 20px;
}

/* from ea demo */
@media (max-width:800px) {

    .logonBlock, .patLogonBlock {
        margin-top: -10px;
        background-image: none;
    }

    .logonAnncmnt {
        height: auto;
    }

    .logonBanner {
        background-image: none;
    }
}

/* from ea demo */
.logonBlock {
    width: 100%;
    max-width: 710px;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
    margin-top: -24px;
    padding-bottom: 14x;
    background-color: #ffffff;
    -webkit-box-shadow: 0px 0px 10px 5px rgba(50, 50, 50, 0.5);
    -moz-box-shadow: 0px 0px 10px 5px rgba(50, 50, 50, 0.5);
    box-shadow: 0px 0px 10px 5px rgba(50, 50, 50, 0.5);
    background-repeat: no-repeat;
    border-radius: 10px;
}



/* BEGIN MEDIA QUERIES */

@media print {
    div#logoParent {
        background-image: url(images/Tift_Main_Logo.png);
    }

        div#logoParent:after {
            content: url(images/Tift_Main_Logo.png);
        }

    div.patBrandHeader div#logoParent:after {
        content: url(images/Tift_Main_Logo.png);
    }
}

@media only screen and (max-width : 450px) {
    a.navbar-brand {
        max-width: 270px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
    }

    span.navbar-brand {
        max-width: 270px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
    }
}

@media (max-width:800px) {

    .logonBlock, .patLogonBlock {
        margin-top: -10px;
        background-image: none;
    }

    .logonAnncmnt {
        height: auto;
    }

    .logonBanner {
        background-image: none;
    }
}


/*  -----------------------------------------------------------------------------------------------
    page header text
    ----------------------------------------------------------------------------------------------- */

header h4 {
    color: #54585A !important;
}



/*  -----------------------------------------------------------------------------------------------
    primary color change...
    anything that uses the Bootstrap primary color (anchor tags, buttons, pageation, etc)
    can be changed here.
    ----------------------------------------------------------------------------------------------- */

a {
    /*  color: #1B365D */; /* don't use !important here, it will fight the nav style */
}


    a:hover {
        /*   color: #78D5E1    ; */ /* don't use !important here, it will fight the nav style */
    }



.k-link {
    color: #54585A !important;
}


.btn-primary, /* bootstrap */
.bg-primary,
.k-button-solid-primary,
.k-primary /* kendo */ {
    background-color: #1B365D !important;
    border-color: #1B365D !important;
}


    .btn-primary:hover, /* bootstrap */
    .k-primary:hover /* kendo */ {
        /*   background-color: #4B4F54    !important;
    border-color: #4B4F54    !important;
	 */
        background-color: #78D5E1 !important;
        border-color: #78D5E1 !important;
    }


.btn-link {
    color: #1B365D !important;
}

.page-item.active .page-link, /* bootstrap */
.k-pager-numbers .k-selected /* kendo */ {
    background-color: #1B365D !important;
    border-color: #1B365D !important;
    color: #ffffff !important;
}



/* kendo pager: button hover */
.k-pager-wrap .k-link:hover, .k-pager-wrap .k-pager-nav:hover {
    background-color: #78D5E1 !important;
    color: white !important;
}


/* kendo pager: active button hover */
.k-pager-numbers .k-state-selected:hover {
    background-color: #78D5E1 !important;
    color: white !important;
}




/* -------------------------------------------------------------------------------------- */
/* 
    NOTE: The nav was initially styled with Bootstrap, using things like bg-light and text-secondary
    but it was changed to use just the CSS below, since it will always be customized when branding
    the site for a particular customer. This keeps us from having to fight Bootstrap or needing
    to use !important to override Bootstrap. Additional note: we're still using Bootstrap for
    structure and layout for the nav, just not the styling (aka colors). 
*/

/*  -----------------------------------------------------------------------------------------------
MMD-NAV-DESKTOP
    ----------------------------------------------------------------------------------------------- */

/*  desktop nav (main container)
    -----------------------------------------------------------------------------------------------
    modify menu main style here... background color, borders, etc. */

#mmd-nav-desktop {
    /*    background: #f8f9fa; */
    /*  border-top: 1px solid #DFDFDF ;  */
    border-bottom: 4px solid #54585A;
    background-color: #1B365D !important;
    color: white !important;
}


    /*  modify the highlighted style of the menu item for the active page here */


    #mmd-nav-desktop .mmd-current-page,
    #mmd-nav-mobile .mmd-current-page {
        background-color: #78D5E1 !important;
    }

/* patient portal desktop nav menu*/
#mmd-nav-clinical-menu {
    border-top: 1px solid black;
    border-bottom: 1px solid black;
}

/*  desktop menu item
-------------------------------------------------------------------------------------------
modify menu text style here... font color, weight, etc. */

#mmd-nav-desktop .nav-link {
    color: white;
}

    /*  desktop menu item... hover
	---------------------------------------------------------------------------------------
	modify menu text hover style here... font color, font weight, etc. */

    #mmd-nav-desktop .nav-link:hover {
        background-color: #78D5E1;
        color: white !important;
        text-decoration: none !important;
        border: 0px;
        margin: 0px;
    }



/*  desktop menu item... active
-------------------------------------------------------------------------------------------
modify the highlighted style of the menu item for the active page here */

#mmd-nav-desktop .mmd-current-page {
    background-color: #78D5E1;
    color: white;
    text-decoration: none !important;
}

#mmd-nav-desktop .nav-link:focus {
    background-color: #78D5E1;
    color: white;
    text-decoration: none !important;
}

/*  desktop dropdown menu
-------------------------------------------------------------------------------------------
modify the style of a menu with a dropdown here */


/*background of drop down menu*/
#mmd-nav-desktop .dropdown-menu,
#mmd-nav-desktop .dropdown-item {
    background-color: #78D5E1;
    color: white;
    text-decoration: none !important;
}

    /*  desktop dropdown menu... hover 
	---------------------------------------------------------------------------------------
	modify the hover style of a dropdown menu item here */
    #mmd-nav-desktop .dropdown-item:hover {
        background-color: #1B365D;
        color: white !important;
        text-decoration: none !important;
    }





/*  -----------------------------------------------------------------------------------------------
MMD-NAV-MOBILE
----------------------------------------------------------------------------------------------- */

/*  mobile nav (main container)
-----------------------------------------------------------------------------------------------
modify menu main style here... background color, borders, etc. */

#mmd-nav-mobile {
    background-color: #1B365D;
    color: white;
    border-bottom: 1px solid #dee2e6;
}

    /*  mobile nav title
-----------------------------------------------------------------------------------------------
modify the main text of the mobile nav here (this is the active page name) */

    #mmd-nav-mobile .navbar-brand {
        background-color: #1B365D;
        color: white;
        font-size: 20px !important;
    }


        /*  help icon
	---------------------------------------------------------------------------------------
	modify the help icon color here */

        #mmd-nav-mobile .navbar-brand .fa-question-circle {
            color: white;
            vertical-align: 15%;
            font-size: 1em !important;
        }

            #mmd-nav-mobile .navbar-brand .fa-question-circle:hover {
                color: #F4F4F4;
            }




    /* #mmd-nav-mobile .fa-question-circle:hover {
	color: #0AA998;
}
 */

    /*  mobile nav hamburger outer container
-------------------------------------------------------------------------------------------
modify the color of the hamburger icon CONTAINER text here */

    #mmd-nav-mobile .navbar-toggler {
        border: 1px solid white;
        background-color: #1B365D;
    }

        #mmd-nav-mobile .navbar-toggler:hover {
            border: 1px solid white;
            background-color: #78D5E1;
        }



    /*  mobile nav hamburger (three line icon)
-------------------------------------------------------------------------------------------
modify the color of the hamburger icon text here */

    #mmd-nav-mobile .fa-bars {
        color: white;
    }

    /*  mobile menu item (this is the container that includes the menu link/text)
-------------------------------------------------------------------------------------------
You can set a different background color for the menu items here, keeping a different color
for the bar with the mobile menu text (displayed for the current page) */

    #mmd-nav-mobile .nav-item {
        text-decoration: none !important;
    }

        /*  mobile menu item... hover
	---------------------------------------------------------------------------------------
	modify style for hovering over a menu item here */

        #mmd-nav-mobile .nav-item:hover {
            background-color: 1D76B0;
            color: white;
            text-decoration: none !important;
        }




    /* this removes the left/right margins of a mobile menu item, so the background color goes full width */
    #mmd-nav-mobile .navbar-collapse {
        margin-left: -16px;
        margin-right: -16px;
    }

    /*  mobile menu text
-------------------------------------------------------------------------------------------
modify menu text style here... font color, weight, etc. */

    #mmd-nav-mobile .nav-link {
        padding-left: 15px; /* since we removed the left/right margins, need to add left padding for a menu item */
        color: white;
    }



        #mmd-nav-mobile .nav-link:focus {
            background-color: #78D5E1;
            color: white;
            text-decoration: none !important;
        }

        #mmd-nav-mobile .nav-link:hover {
            background-color: #78D5E1;
            color: white;
            text-decoration: none !important;
        }

    /*  mobile dropdown menu
-------------------------------------------------------------------------------------------
modify menu dropdown style here... background color, etc. */

    #mmd-nav-mobile .dropdown-menu {
        /*  background-color: #dcf0e6; */
        background-color: #1B365D;
        color: white;
        text-decoration: none !important;
    }

    /*  
mobile dropdown menu item
-------------------------------------------------------------------------------------------
modify dropdown menu text style here... font color, weight, etc. */

    #mmd-nav-mobile .dropdown-item {
        background-color: #1B365D;
        color: white;
        text-decoration: none !important;
    }

        /*  mobile dropdown menu item... hover
	---------------------------------------------------------------------------------------
	modify style for hovering over a menu item here */

        #mmd-nav-mobile .dropdown-item:hover {
            background-color: #78D5E1;
            color: white;
            text-decoration: none !important;
        }



/*  -----------------------------------------------------------------------------------------------
USER-MENU-DESKTOP
/*----------------------------------------------------------------------------------------------- */



#nav-user-desktop ul li {
    background-color: white !important;
    color: black !important;
}


    #nav-user-desktop ul li a {
        background-color: white !important;
        color: #54585A !important;
    }

#nav-user-desktop-username .nav-link {
    color: #4F7588;
    font-weight: bold;
}


/* user menu: hover */
#nav-user-desktop ul li a:hover {
    background-color: #F4F4F4 !important;
    color: #1B365D !important;
}

/* user menu: dropdown */
#nav-user-desktop .dropdown-menu,
#nav-user-desktop .dropdown-item {
    background-color: white !important;
    color: black !important;
}

    /* user menu: dropdown hover */
    #nav-user-desktop .dropdown-item:hover {
        background-color: #F4F4F4 !important;
        color: #1B365D !important;
    }

/* user menu: dropdown active */
#nav-user-desktop .active {
    background-color: F7F7F7 !important;
    color: #78D5E1 !important;
    font-weight: bold;
}



/*  -----------------------------------------------------------------------------------------------
USER-MENU-MOBILE
----------------------------------------------------------------------------------------------- */
#nav-user-mobile .dropdown-menu,
#nav-user-mobile .dropdown-menu .dropdown-item,
#nav-user-mobile .dropdown-menu .dropdown-item-text {
    background-color: white;
    color: black;
    text-decoration: none !important;
}


/* mobile user menu active (hamburger menu on login page) */
.dropdown-item:active {
    background-color: transparent;
    text-decoration: none;
}

/* mobile user menu: hover */
#nav-user-mobile .dropdown-menu .dropdown-item:hover {
    background-color: #F4F4F4;
    color: #1B365D !important;
    text-decoration: none !important;
}






/* GLOBAL SETTINGS --Desktop nav menu, desktop user menu, mobile nav menu, mobile user menu */

/* Set margin above all dropdown menus */
#mmd-nav-desktop .dropdown-menu, #mmd-nav-mobile .dropdown-menu,
#nav-user-desktop .dropdown-menu {
    /* margin-top: 0px; */



    margin: -0.975px 3px 0 -1px;
    border-top: .0px;
    border-top-left-radius: 0rem;
    border-top-right-radius: 0rem;
    border-bottom-right-radius: .25rem;
    border-bottom-left-radius: .25rem;
    padding-top: 8px;
    padding-bottom: 8px;
    padding-left: 1px;
}


#logon-button {
    background-color: #1B365D !important;
    border-color: #78D5E1 !important;
}

    #logon-button:hover {
        background-color: #78D5E1 !important;
        border-color: #1B365D !important;
    }

/*this changes the highlight color that goes around the input boxes for all pages to match clients color scheme (red in this case)*/
.form-control:focus {
    border-color: #78D5E1;
    box-shadow: 0 0 0 0.2rem rgba(120, 213, 225, 0.25);
}
