/* remember: top right bottom left */

/**
 * html over ride
 */

@font-face {
    font-family:            Muli;
    src:                    url('font/Muli-Regular.woff');
}

body
{
    padding:                0px;
    border:                 0px;
    margin:                 0px;
    overflow-y:             hidden;
    overflow-x:             hidden;
    font-family:            Muli;
    height:                 100%;
}

table
{
    border-collapse:        collapse;
}

td
{
    padding:                0px;
    vertical-align:         top;
    font-size:              75%;
}

th
{
    padding:                0px;
    height:                 0px;
}

table.panel
{
    height:                 100%;
    width:                  100%;
}


/*******************************************************************************
 * mumms.html - main divs
 */

img.icon
{
    cursor:                 pointer;
}

div#global
{
    width:                  100%;
    height:                 100%;
    border:                 none;
    background:             #000000;
}

div#top-icons
{
    height:                 35px;
    width:                  100%;
    overflow:               hidden;
    position:               absolute;
    top:                    0px;
}

.top-toolbar-icon
{
    height:                 30px;
    width:                  30px;
    padding-left:           5px;
    padding-right:          5px;
    padding-top:            1px;
}

div#top-overview
{
    height:                 35px;
    width:                  100%;
    overflow:               hidden;
    position:               absolute;
    top:                    40px;
    padding-left:           5px;
}

div#top-tasks
{
    height:                 35px;
    width:                  100%;
    overflow:               hidden;
    position:               absolute;
    top:                    80px;
    padding-left:           5px;
    padding-top:            10px;
}

div#dancefloor
{
    position:               absolute;
    top:                    80px;
    /*margin-bottom:          120px;*/
    height:                 -moz-calc(100% - 195px);    /* top 120px bottom 120px */
    width:                  100%;
    overflow-y:				auto;
}


/*******************************************************************************
 * login.html - login form elements
 */

div.login-form
{
	top:                    -moz-calc(50% - 250px);
	top:                    -webkit-calc(50% - 250px);
	left:                   -moz-calc(50% - 250px);
	left:                   -webkit-calc(50% - 250px);
	margin:					auto;
	margin-top:				0px;
    z-index: 1000;
}

div.login-box
{
	height:                 auto;
	width:                  250px;
	background-color:       #525252;
	margin:                 auto;
	border-radius:          5px;
	vertical-align:         middle;
	display:				inline-block;

}

div.login-box-label
{
	padding-top:            10px;
	color:                  white;
/*	align:                  center;*/
	font-size:				80%;
}

div.login-box-button
{
	cursor:                 pointer;
	margin:                 0 auto;
	width:                  175px;
	background-color:       #222;
	border-radius:          5px;
	color:                  white;
}

input.login-box-input
{
    background-color: 		#FAFFBD;
    border: 				1px solid white;
    border-radius: 			5px 5px 5px 5px;
    color: 					black;
    padding: 				4px;
    width: 					175px;
}

/*******************************************************************************
 * mumms.html - header elements
 */

div.header-span
{
    height:                 100%;
/*     float:                  right; */
    line-height:            35px;
/*     display:                inline-block; */
    padding-top:            1px;
}

div.info-span
{
    height:                 100%;
    float:                  left;
    line-height:            35px;
    padding-right:          55px;
    font-size:              13px;
}

div.open-visit-title
{
    text-transform:         uppercase;
    height:                 100%;
    float:                  left;
    line-height:            35px;
    font-size:              15px;
    padding-right:          30px;
}

/*
.open-visit-title::after
{
    content:                url('images/dance-floor-icons/mandatory.png');
}
*/

div.open-visit-id
{
    text-transform:         uppercase;
    height:                 100%;
    float:                  left;
    padding-left:           5px;
    font-size:              15px;
    line-height:            35px;
}

/*
.open-visit-id::after
{
    content:                url('images/dance-floor-icons/mandatory.png');
}
*/

div#hummingbird-name
{
    position:               absolute;
    left:                   0px;
    width:                  15%;
    padding-left:           5px;
    font-family:            Muli;
    size:                   1.75em;
}

@media screen and (min-width: 1300px) {

div#top-icon-drawer
{
    display:                inline-block;
    padding-top:            2px;
    position:				relative;
    width: 					50%;
    -moz-transform:         translate(50%);
    transform:              translate(50%);
}

div#top-status-span
{
	display:				inline-block;
    float:                  right;
    width:                  auto;
}

}

@media screen and (min-width: 1000px) and (max-width: 1300px) {

div#top-icon-drawer
{
    display:                inline-block;
    padding-top:            2px;
    position:				relative;
    width: 					50%;
    -moz-transform:         translate(35%);
    transform:              translate(35%);
}

div#top-status-span
{
	display:				inline-block;
    float:                  right;
    width:                  30%;
}

}

@media screen and (min-width: 800px) and (max-width: 1000px) {

div#top-icon-drawer
{
    display:                inline-block;
    padding-top:            2px;
    position:				relative;
    width: 					70%;
    -moz-transform:         translate(25%);
    transform:              translate(25%);
}

div#top-status-span
{
	display:				inline-block;
    float:                  right;
    width:                  20%;
}

}

@media screen and (min-width: 800px) {

div#top-icon-drawer
{
    display:                inline-block;
    padding-top:            2px;
    position:				relative;
    width: 					60%;
    -moz-transform:         translate(30%);
    transform:              translate(30%);
    overflow:               auto;
}

div#top-status-span
{
	display:				inline-block;
    float:                  right;
    width:                  20%;
}

}

div#worker-name
{
    font-size:              125%;
}

div#listing-spans
{
    position:               absolute;
    width:                  100%;
    left:                   0px;
    line-height:            35px;
    padding-left:           5px;
    text-transform:         uppercase;
}

div#info-spans
{
    float:                  left;
}

div#right-pane-toggle
{
    text-align:             right;
    vertical-align:         bottom;
    width:                  100px;
    position:               absolute;
    right:                  0px;
    overflow:               hidden;
    float:                  right;
}

div#icon-dropdown-image
{
    position:               relative;
    float:                  left;
}

div#icon-dropdown
{
    position:               absolute;
    bottom:                 0px;
    left:                   0px;
}

div#icon-dropdown ul li
{
    font-size:              85%;
    padding:                0px;
    text-transform:         uppercase;
    z-index:                10;
}

/*******************************************************************************
 * mumms.html - footer elements
 */

div#bottom-tasks
{
    height:                 35px;
    width:                  75%;
    overflow:               hidden;
    position:               absolute;
    bottom:                 75px;
}

div#bottom-right-tasks
{
    height:                 35px;
    width:                  25%;
    overflow:               hidden;
    position:               absolute;
    bottom:                 75px;
    right:                  0px
}

.currentpage-icon
{
    height:                 28px;
    width:                  28px;
    top:                    4%;
    left:                   4px;
    position:               absolute;
    display:                inline-block;
    float:                  left;
}

.currentpage-links
{
    font-size:              13px;
    float:                  left;
    display:                inline-block;
    text-transform:         uppercase;
    padding:                5px 2px;
}

.currentpage-links-right
{
    font-size:              13px;
    float:                  right;
    display:                inline-table;
    text-transform:         uppercase;
    padding:                5px 2px;
    margin-right:           5px;
}

.currentpage-separator
{
    font-size:              13px;
    float:                  left;
    display:                inline-block;
    padding:                3px 5px;
}

.currentpage-dot
{
    font-size:              7px;
    float:                  left;
    display:                inline-block;
    line-height:            27px;
    padding:                5px;
}

.bottom-toolbar-icons
{
    display:                inline-block;
    float:                  left;
    height:                 55px;
    width:                  100%;
    position:               absolute;
    border:                 none;
    overflow:               hidden;
}

.bottom-toolbar-icon, .bottom-toolbar-sub-icon
{
    height:                 40px;
    width:                  40px;
    padding-left:           10px;
    padding-right:          10px;
    padding-top:            6px;
    display:                inline-block;
}

.bottom-toolbar-sub-icon
{
	padding-top:			8px;
	height:					34px;
	width:					34px;
}

.bottom-toolbar-text, .bottom-toolbar-sub-text
{
/*    display:                inline-block;*/
    font-size:              10px;
    font-weight:            lighter;
    text-transform:         uppercase;
    padding-left:           5px;
    padding-right:          5px;
}

.bottom-toolbar-sub-text
{
	/*color:					#A3A3A3;*/
}

div#bottom-icons
{
    height:                 75px;
    width:                  100%;
    overflow:               hidden;
    position:               absolute;
    bottom:                 0px;
}

div#bottom-icon-drawer
{
    /*width:                  550px;*/
    display:                inline-block;
    white-space:            nowrap;
    height:                 75px;
    overflow:               hidden;
    padding-bottom:         0px;
	padding-right:			8px;
}

div#visit-id-display
{
    position:               absolute;
    bottom:                 0px;
    left:                   550px;
    height:                 75px;
    padding-left:           5px;
}

div#logo
{
    text-align:             right;
    vertical-align:         bottom;
    width:                  20%;
    position:               absolute;
    bottom:                 0px;
    right:                  0px;
    padding:                15px;
}

.pp-dropdown
{
    height:                 25px;
    font-size:              13px;
    padding:                3px;
    text-indent:            0.01px;    /* Removes default arrow from firefox*/
    text-overflow:          "";
    box-shadow:             none;
    text-transform:         uppercase;
}

select.pp-dropdown option
{
    border:                 0px;
    font-weight:            lighter;
    font-size:              90%;
    padding-bottom:         3px;
    padding-top:            3px;
    padding-left:           3px;
}

.selector-heading
{
}

.task-selector
{
    font-size:              85%;
    text-transform:         capitalize;
}

a.task:visited, a.task:link, a.inactive-task:visited, a.inactive-task.link
{
    display:                block;
    text-decoration:        none;
    margin:                 0px 3px 0px 6px;
    padding:                5px 0px 5px 0px;
    vertical-align:         middle;
}

/*******************************************************************************
 * mumms.html - dancefloor elements
 */

div#left-pane
{
/*    float:                  center;*/
}

div#right-pane
{
    float:                  right;
/*    width:                  30%;*/
}

/*******************************************************************************
 * table elements
 */

td#navigation
{
    padding:                2px 0px 4px 2px;
    width:                  100%;
}

table.navigation
{
    width:                  100%;
}

table.navigation td.firm
{
    text-align:             right;
    padding-right:          4px;
}

table.navigation a.navigation:link,
table.navigation a.navigation:visited
{
    text-decoration:        none;
    padding-left:           4px;
    padding-right:          4px;
}

table.navigation a.navigation:hover
{
    text-decoration:        underline;
    padding-left:           4px;
    padding-right:          4px;
}

table.navigation .bullet
{
    font-weight:            bold;
}

.navigationText
{
    font-weight:            bold;
}

/**
 * heading
 */

table#body
{
    margin:                 0px;
    padding:                0px;
    height:                 100%;
}

img#flower
{
    height:                 40px;
    width:                  125px;
}

/*td#task-title
{
    vertical-align:         bottom;
    padding:                0px 6px 5px 9px;
    background:             #3b3b3b;
    width:                  99%;
    border-bottom:          5px solid #000000;
}

td#task-title-text
{
    white-space:            normal;
    font-size:              100%;
    color:                  #ffffff;
    vertical-align:         bottom;
}

td#right-pane-toggle
{
    text-align:             right;
    vertical-align:         bottom;
}*/

td#center
{
    text-align:             center;
}

img#right-open, img#right-close
{
    border:                 0px;
    cursor:                 pointer;
    width:                  20px;
    height:                 20px;
    padding-top:            7px;
}

img#right-close
{
    padding-right:          10px;
}

/*******************************************************************************
 * main
 */

div#main-control
{
    width:                  100%;
}

div#bottom-control
{
    position:               absolute;
    top:                    450px;
    width:                  100%;
    margin-top:             -1px;
}

.buttons
{
    width:                  250px;
    height:                 50px;
/*    background-color:       #525252;  */
/*    border-bottom-left-radius: 12px;  */
/*    border-bottom-right-radius:12px;  */
}

td.button
{
    width:                  80px;
    /*border-radius:          50px;*/
    padding:                3px 0px 3px 0px;
    text-align:             center;
    cursor:                 pointer;
    font-weight:            lighter;
}

div.maincontrol
{
    height:                 20px;
    padding-left:           8px;
    padding-right:          8px;
    vertical-align:         middle;
    cursor:                 pointer;
    position:               absolute;
    top:                    45px;
    right:                  5px;
    z-index:                10;    /*this will make it obscure anything else beneath this location*/
    overflow:               hidden;
    display:                block;
    font-size:              14px;
	text-transform:			uppercase
}

div.keycloaklogincontrol
{
    margin-top: 6px;
    cursor: pointer;
}
div.logincontrol, div.keycloaklogincontrol
{
    width:                  165px;
    padding:                5px 10px 3px 10px;
    text-align:             center;
    line-height:            30px;
    cursor:                 pointer;
    font-weight:            lighter;
    background-color:       #222222;
    color:                  #ffffff;
    border-radius:          5px 5px 5px 5px;
    border:                 1px solid black;
}

a.button
{
    width:                  80px;
    padding:                3px 0px 3px 0px;
    text-align:             center;
    cursor:                 pointer;
    font-weight:            lighter;
}

a.button
{
    width:                  80px;
    padding:                3px 0px 3px 0px;
    text-align:             center;
    cursor:                 pointer;
    font-weight:            lighter;
    background-color:       transparent;
    border:                 5px;
}

/*******************************************************************************
 * right pane
 */

td#right-splitter
{
}

img.cleardot
{
    height:                 1px;
    width:                  1px;
}

td.v-splitter
{
    width:                  5px;
    height:                 100%;
}

td#right-panelx
{
    height:                 99%;
    width:                  35%;
}

span#onoffbutton
{
    cursor:                 pointer;
}

span#onoffbutton:hover
{
    text-decoration:        underline;
}

/*********************************************
 * web apps
 */

div.side-bar
{
	margin-top:             14px;
}

div.side-bar-item
{
	margin-left:            14px;
}

div.side-bar-item-centered
{
	text-align:             center;
}

div.side-bar-heading
{
	font-weight:            bold;
	font-size:              11pt;
	margin:                 4px 0px 2px 4px;
}

a.side-bar-item, a.side-bar-item-centered, a.side-bar-heading
{
	text-decoration:        none;
}

#alert-zone
{
	position:               fixed;
	top:                    20px;
	left:                   50%;
/*	margin-left:            -200px;  */
	z-index:                9999;
}

.alert-box
{
    position:               absolute;
    top:                    300px;
    width:                  400px;
    text-align:             center;
    padding:                20px 0px 20px 0px;
    font:                   bold 20px Muli, sans-serif;
}

.alert-box input
{
	width:                  60px;
	text-align:             center;
	position:               relative;
	float:                  right;
	margin:                 5px;
	font-weight:            bold;
}

.alert-box input:hover
{
	text-decoration:        none;
}

.alert-message
{
	position:               relative;
	display:                inline-block;
	width:                  390px;
	margin-top:             2px;
	padding-top:            5px;
	margin-bottom:          2px;
}

a.nav-logout, a.form-logout
{
	text-align:             right;
	text-decoration:        none;
}

a.nav-logout
{
	padding-left:           95%;
}

a.form-logout
{
	padding-left:           200px;
	font-size:              9pt;
}

p.login-message
{
	padding-top:            10px;
	font-size:              10pt;
}


/*******************************************************************************
 * HIS page
 */

table.his
{
	width:					100%;
}

td.his-label
{
	text-align:				left !important;
    border-style:           none !important;
	width:					auto !important;
	padding:				0 !important;
}

td.his-buttons
{
	text-align:				right !important;
    border-style:           none !important;
	width:					auto !important;
	padding:				0 !important;
}