﻿/*#region Biotime Header*/
#gHeader { height: 38px; min-width: 1280px; position: relative; background-color: #fff }

/* Page Header Menus */
#wheader { position: relative; z-index: 2; }
    #wheader #header { margin-right: 50px; }

.navUtility { float: right; height: 35px; vertical-align: middle; }

.navAccount,
.navAccount:link { color: #516AA5; text-decoration: none; padding-top: 10px; padding-right: 10px; }
    .navAccount:hover { color: #002E5E; }

#wrapRibbon { background-color: #516AA5; clear: both; position: relative; z-index: 1; min-width: 1292px }
    #wrapRibbon #ribbon { margin: auto; height: 40px; padding-left: 100px; padding-right: 15px }
        #wrapRibbon #ribbon input[type=text] { border: 1px solid #fff; }

#navLocal { float: left; height: 30px; margin: 0; padding: 7px 0 0 0; }
    #navLocal li { position: relative; float: left; list-style-type: none; padding: 0; }
        #navLocal li a { border-left: 1px dotted #A9B8DC; color: #F1F1F1; display: block; font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; font-size: 13px; padding: 6px 10px; text-decoration: none; }
            #navLocal li a:hover,
            #navLocal li.selected a { color: #F9C32F; }
        #navLocal li:first-child a { border-left: none; padding-left: 0; }

        #navLocal li ul { position: absolute; padding-top: 8px; padding-left: 10px; padding-bottom: 8px; top: 25px; width: 142px; background-color: #516AA5; box-shadow: 0px 3px 5px #000 }
        #navLocal li li { clear: both; }
            #navLocal li li a { color: #fff !important; border-left: none !important; padding-left: 0px !important; width: 130px; }
                #navLocal li li a:hover { color: #F9C32F !important; border-right: 2px solid; border-right-color: #F9C32F; }

ul.sub-menu { display: none; }

#navRight { float: right; height: 30px; margin: 0; padding-top: 8px; color: #fff }

/*#region Main Navigation*/
#gNav { position: absolute; height: 30px; top: 8px; right: 50px; z-index: 101; }
    #gNav li { float: left; list-style-type: none; padding: 0 0 13px 0; }
        #gNav li.selected,
        #gNav li:hover { background: url('/Images/arrow_navGlobal.png') no-repeat center bottom; z-index: 101; color: #002e5e; }
        #gNav li a { border-right: 1px dotted #516aa5; display: block; font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; padding: 4px 10px; text-decoration: none; cursor: pointer }
        #gNav li:last-child a { border-right: none; }

.helplink { height: 14px; font-size: 26px; color: #516aa5 !important; }
    .helplink i { margin-top: -6px }

/* The container <div> - needed to position the dropdown content */
.dropdownmenu { position: relative; display: inline-block; }

/* Dropdown Content (Hidden by Default) */
.dropdownmenu-content { display: none; position: absolute; margin-left: -1px; border-radius: 0 0 5px 5px; padding: 8px 0; background-color: #fff; box-shadow: 0px 15px 15px 0px rgba(0,0,0,0.5); z-index: 50; min-width: 100px; }
    .dropdownmenu-content.dropmenuright { right: -10px; }

    /* Links inside the dropdown */
    .dropdownmenu-content a { font-size: 15px; line-height: 15px; color: #516aa5; padding: 1px 10px !important; text-decoration: none; display: block; border: none !important }

        /* Change color of dropdown links on hover */
        .dropdownmenu-content a:hover { color: #000 !important; }

/* Show the dropdown menu on hover */
.dropdownmenu:hover .dropdownmenu-content { display: block; float: left; }

/* Submenu Icons */
.submenu-icon { position: absolute; }
.submenu-title { margin-left: 24px; line-height: 21px; }

/*#endregion Main Navigation*/

/*#region Notification*/
#dUserNotificationMenu .acktitle { font-size: 15px; font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; }
.ackcounter { position: absolute; top: 0px; left: 15px; padding: 1px 5px; height: 14px; color: #fff; background-color: #d00; border-radius: 8px }
.ackmenuitem { padding: 2px 10px; }
    .ackmenuitem:hover { color: #002E5E; }
.ackicon { float: left; }
.acktitle { margin-left: 24px; }
/*#endregion Notification*/

.buttonpopup { display: none; background-color: #fff; padding: 5px; border: solid 1px #000; border-radius: 3px; width: 200px; z-index: 12; box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.30); }
    .buttonpopup .optioncontainer { z-index: 15; color: var(--default); font-size: 15px; line-height: 15px; border-radius: 3px; font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; padding: 4px 0px 4px 4px; cursor: pointer }
        .buttonpopup .optioncontainer:hover { color: #000; background-color: #f1f1f1; cursor: pointer }
.buttonpopupscroll { max-height: 400px; overflow-y: auto }
    .buttonpopupscroll div { padding-right: 5px }

/* Tab Header */ .navigateblock { float: left; min-width: 120px; padding-left: 15px; padding-right: 15px; text-align: center; line-height: 30px; margin-top: 3px; background-color: #516AA4; box-sizing: border-box; user-select: none }
    .navigateblock:hover { cursor: pointer; height: 32px; margin-top: 1px; }
    .navigateblock.selected { font-weight: bold; background-color: #fff; color: #000; cursor: default; line-height: 34px; height: 34px; margin-top: 0px; border-left: solid 1px #253D75; }
        .navigateblock.selected:last-child { border-right: solid 1px #516AA4 }
    .navigateblock.disabled { color: #8EA2CC; cursor: default; }
        .navigateblock.disabled:hover { background-color: #516AA4; line-height: 30px; height: 30px; margin-top: 3px; }
    .navigateblock:not(:first-child) { border-left: solid 1px #253D75; }

/* Notifications */
#dUserNotification { top: 22px; right: -35px; }
    #dUserNotification .dropdownmenu-content { width: 420px; cursor: default }

.floatingButton { border-radius: 3px; padding: 5px; cursor: pointer }
    .floatingButton:hover { background-color: #eee }

.notificationmenu { color: #000; width: 400px; padding: 2px 10px; font-size: 16px; user-select: none }
    .notificationmenu .container { height: calc(100vh - 80px); overflow-y: auto; padding-right: 5px }
        .notificationmenu .container .header { padding: 5px; padding-top: 10px; position: sticky; top: 0px; background-color: #fff; height: 20px; border-bottom: 1px solid #ccc; z-index: 2 }
        .notificationmenu .container .section { font-size: 16px; padding-bottom: 5px; border-bottom: 1px solid #ccc }
            .notificationmenu .container .section .header { font-size: 18px; padding: 5px; padding-top: 10px; position: sticky; top: 35px; background-color: #fff; height: 20px; border-bottom: 1px solid #ccc; z-index: 1 }
        .notificationmenu .container .item { border-radius: 3px; padding: 5px; min-height: 40px; background-color: #fff; margin-top: 5px; padding-bottom: 20px }
            .notificationmenu .container .item .ih { font-size: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #000; height: 25px; }
            .notificationmenu .container .item .left { font-size: 12px; display: inline-block; width: 40px; vertical-align: top; color: #666; }
            .notificationmenu .container .item .middle { display: inline-block; font-size: 14px; line-height: 14px; width: 305px; vertical-align: top; color: #666; }
                .notificationmenu .container .item .middle a { padding: 0px !important; padding-top: 10px !important; }
            .notificationmenu .container .item .right { display: inline-block; width: 20px; vertical-align: top; margin-left: 5px; }
            .notificationmenu .container .item:hover { background-color: #eee }

#ddlEmployeeFilterSelect-button.colour0 { border-color: #000 !important; color: #fff !important; background-color: #f44336 !important }
#ddlEmployeeFilterSelect-button.colour1 { border-color: #000 !important; color: #fff !important; background-color: #e81e63 !important }
#ddlEmployeeFilterSelect-button.colour2 { border-color: #000 !important; color: #fff !important; background-color: #9c27b0 !important }
#ddlEmployeeFilterSelect-button.colour3 { border-color: #000 !important; color: #fff !important; background-color: #673ab7 !important }
#ddlEmployeeFilterSelect-button.colour4 { border-color: #fff !important; color: #fff !important; background-color: #3f51b5 !important }
#ddlEmployeeFilterSelect-button.colour5 { border-color: #000 !important; color: #fff !important; background-color: #2196f3 !important }
#ddlEmployeeFilterSelect-button.colour6 { border-color: #000 !important; color: #fff !important; background-color: #03a9f4 !important }
#ddlEmployeeFilterSelect-button.colour7 { border-color: #000 !important; color: #fff !important; background-color: #00bcd4 !important }
#ddlEmployeeFilterSelect-button.colour8 { border-color: #000 !important; color: #fff !important; background-color: #009688 !important }
#ddlEmployeeFilterSelect-button.colour9 { border-color: #000 !important; color: #fff !important; background-color: #4caf50 !important }
#ddlEmployeeFilterSelect-button.colour10 { border-color: #000 !important; color: #000 !important; background-color: #8bc34a !important }
#ddlEmployeeFilterSelect-button.colour11 { border-color: #000 !important; color: #000 !important; background-color: #cddc39 !important }
#ddlEmployeeFilterSelect-button.colour12 { border-color: #000 !important; color: #000 !important; background-color: #ffeb3b !important }
#ddlEmployeeFilterSelect-button.colour13 { border-color: #000 !important; color: #000 !important; background-color: #ffc107 !important }
#ddlEmployeeFilterSelect-button.colour14 { border-color: #000 !important; color: #fff !important; background-color: #ff9800 !important }
#ddlEmployeeFilterSelect-button.colour15 { border-color: #000 !important; color: #fff !important; background-color: #ff5722 !important }
