.tooltip {
   background-color:#000;
   border:1px solid #fff;
   padding:10px 15px;
   width:200px;
   display:none;
   color:#fff;
   text-align:left;
   font-size:12px;

   /* outline radius for mozilla/firefox only */
   -moz-box-shadow:0 0 10px #000;
   -webkit-box-shadow:0 0 10px #000;
}

.ui-tooltip {
   background: #f0f0f0;
   color: black;
   text-align: left;
   width: 350px;
}

ul.ui-autocomplete li.ui-menu-item{text-align:left;}


input,textarea,button {
   border: 1px solid #aaaaaa/*{borderColorContent}*/;
   color: #000000/*{fcContent}*/;
   border-top-left-radius: 4px/*{cornerRadius}*/;
   border-top-right-radius: 4px/*{cornerRadius}*/;
   border-bottom-left-radius: 4px/*{cornerRadius}*/;
   border-bottom-right-radius: 4px/*{cornerRadius}*/;
   background-color: #f0f0f0;
}

select {
   border: 1px solid #aaaaaa/*{borderColorContent}*/;
}

.select-box {
   margin-bottom:4px;
   margin-right:4px;
   margin-top:4px;
   overflow: hidden;
   color: #000000;
   background-color: #ffffff;
}

.select-box select {
   box-shadow: none;
   background-color: transparent;
   background-image: none;
}

.select-box200 {
   width:200px;
}


.select-width40 {
   margin-bottom:4px;
   margin-right:4px;
   margin-top:0px;
   width:40px;
   overflow: hidden;
}

.select-width50 {
   margin-bottom:4px;
   margin-right:4px;
   margin-top:0px;
   width:50px;
   overflow: hidden;
}

.select-width75 {
   margin-bottom:4px;
   margin-right:4px;
   margin-top:0px;
   width:75px;
   overflow: hidden;
}

.select-width100 {
   margin-bottom:4px;
   margin-right:4px;
   margin-top:0px;
   width:100px;
   overflow: hidden;
}

.select-width200 {
   margin-bottom:4px;
   margin-right:4px;
   margin-top:0px;
   width:200px;
   overflow: hidden;
}

.select-width300 {
   margin-bottom:4px;
   margin-right:4px;
   margin-top:0px;
   width:300px;
}

.select-width400 {
   margin-bottom:4px;
   margin-right:4px;
   margin-top:0px;
   width:400px;
}

.select-width500 {
   margin-bottom:4px;
   margin-right:4px;
   margin-top:0px;
   width:500px;
}


.linfo {
   color: #f80000;
   font-weight: bold;
}

.option-buttons {
   padding: 3px 0 2px 0;
}

.align-center { text-align:center; }
.align-left { text-align:left; }

.no-break {
   white-space: nowrap;
}

.assigned-locker-table {
   padding: 0px;
   margin: 0px;
}

.assigned-locker-table td {
   padding: 0px;
   margin: 0px;
}

label {
   padding: 0px;
   margin: 0px;
}


/* Tooltip container */
.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}

/* Tooltip text */
.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;
 
    /* Position the tooltip text - see examples below! */
    position: absolute;
    z-index: 1;
}

.tooltip .tooltiptext {
    width: 120px;
    top: 100%;
    left: 50%; 
    margin-left: -60px; /* Use half of the width (120/2 = 60), to center the tooltip */
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
    visibility: visible;
}

.tooltip .tooltiptext::after {
    content: " ";
    position: absolute;
    bottom: 100%;  /* At the top of the tooltip */
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent black transparent;
}

.profile-header {
   width: 100%;
   background: #000000;
   color: #ffffff;
   font-weight: bold;
}

#combo-message {
   width: 95%;
   background: #eeeeee;
   text-align: center;
   padding: 5px;
}

#ccstatement {
   background: #eeeeee;
   font-weight: bold;
   padding: 5px;
}

.command-span {
   float: right;
   font-size: 10px;
   font-weight: normal;
}

.toggle-category, .toggle-subcategory {
   float: left;
   font-weight: bold;
   font-size:  20px;
   width: 15px;
}

.fee-text {
   float: left;
   padding: 0 20px 0 0;
   margin: 0 0 0 10px;
}

.school-fee-subcategory-header {
   color:#000000;
   background: #aaaaaa;
   margin: 1px;
   padding: 1px;
   font-weight: bold;
   font-size:  12px;
   text-align: left;
   border-bottom: 2px solid black;
}

.subcategory {
   margin: 0 0 0 20px;
}

.school-fee-description {
   margin: 0 0 0 40px;
}

.school-fee {
   float: right;
   margin: 0 50px 0 0;
}

.table-fees {
   margin: 10px;
   padding: 0px;
   border-spacing: 2px;
}

.fee-cell {
   text-align: left;
}

.fee-icon {
   margin: 0 40px 0 0;
}

.movebuttons {
   margin-left: auto;
   margin-right: auto;
   text-align: center;
}

.fee-heading-row {
   background-color: #008000;
   color: #ffffff;
}

.fee-heading {
   font-weight: bold;
   font-size:  14px;
   text-color: #ffffff;
}

.fee-break {
   font-weight: normal;
   font-size:  10px;
   text-color: #aaaaaa;
}

#topButton {
   display: none; /* Hidden by default */
   position: fixed; /* Fixed/sticky position */
   bottom: 20px; /* Place the button at the bottom of the page */
   right: 20px; /* Place the button 30px from the right */
   z-index: 99; /* Make sure it does not overlap */
   width: 100px;
}

#locker-log-div {
   height: 400px;
   overflow-y: scroll;
   overflow-x: hidden;
}

.dialog-table td {
   padding: 5px;
}

.warning-msg-table {
   margin: 0 0 5px 0;
}

.messages-table a {
   text-decoration: underline;
   color: blue;
}

.log-entry {
   border:1px solid #aaa;
}

.lockers-data-header {
   font-size:  10px;
}

.start-date-future {
   border: 2px solid #FF8040;
}

.end-date-past {
   border: 2px solid #FF0000;
}

.current-combination {
   border: 2px solid #006000;
}

.title-box {
   border: 1px solid #404040;
   border-top: 2px solid #404040;
   width: 90%;
}

.title-box #title {
   position: relative;
   top: -0.5em;
   margin-left: 5px;
   display: inline;
   background-color: #ffeeaa;
   font-weight: bold;
   padding: 0 5px;
}

.title-box p {
   margin-left: 10px;
}

.title-box #content {
}


#lockers-menu {
   background: #ffffff;
   height:70px;
   width:100%;
   margin-left:0px;
   margin-right:0px;
   text-align: center;
}
sticknav {
   background: #ffffff;
   height: 30px;
   width: 100%;
   margin-right: 0px;
   margin-left: 0px;
   left: 0px;
   right: 0px;
   position: relative;
   z-index: 99;
}
.fixed {
   position:fixed;
}