/* covers all scripts with the following exceptions:  index  login  register */
html, body {
    height: 100%;
    margin: 0;
}
  
.wrapper {
    height: 100%;
}
  
.header, .footer {
    height: 45px;
    margin-top: 5px;
    background: white;
}
  
.search {
    height: 45px;
    background: white;
}
  
.toggle {
    height: 35px;
    background: white;
}
  
.content {
    height: calc(100% - 130px);
    overflow: auto;
    background: white;
}
      
.content100 {
    height: calc(100% - 100px);
    overflow: auto;
    background: white;
}
      
.buttonLogin, .buttonRegister, .buttonUpdate, .buttonAdd {
    background-color: #f8f8f8;
    color: black;
    padding: 8px 16px;
    margin: 8px 0;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    width: 40%;
}
      
.buttonCancel {
    background-color: #f8f8f8;
    color: black;
    padding: 8px 16px;
    margin: 8px 0;
    border: 2px solid #4db3d0;
    border-radius: 12px;
    cursor: pointer;
    width: 40%;
}
  
.buttonSearch {
    background-color: #f8f8f8;
    color: black;
    padding: 8px 12px;
    border: 2px solid #4db3d0;
    border-radius: 12px;
    cursor: pointer;
    width: 20%;
}
  
button:hover {
    opacity: 0.8;
}
  
.buttonMenu {
    background-color: white;
    color: black;
    margin-right: 6px; 
    margin-bottom: 2px;
    border: none;
    cursor: pointer;
    width: 30px;
}
  
.dropup {
    float: right;
    position: relative;
}
  
.dropup-content {
    display: none;
    position: absolute;
    right: 0;
    background-color: #f8f8f8;
    min-width: 100px;
    bottom: 37px;
    z-index: 1;
}
  
.dropup-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}
  
.dropup:hover .buttonMenu {
    background-color: #f8f8f8;
}
  
.dropup-content a:hover {
    background-color: white;
}
  
.dropup:hover .dropup-content {
    display: block;
}
  
@media (hover: hover) {
    .dropup:hover .buttonMenu{
        background: #f8f8f8;
        color:black;
        cursor: pointer;
    }
}
  
@media (hover: none) {
    .dropup:active .buttonMenu{
        background: white;
        color:black;
        cursor: pointer;
    }
}
  
input[type=text], input[type=number], input[type=email], input[type=password] {
    background-color: white;
    color: black;
    padding: 8px 16px;
    margin: 8px 0;
    box-sizing: border-box;
    border: 1px solid #4db3d0;  
    border-radius: 12px;
    cursor: pointer;
    width: 40%;
}
        
input[type=text]:focus, input[type=number]:focus, input[type=email]:focus, input[type=password]:focus {
    border: 2px solid #4db3d0;
}
  
#textbox {
    display: flex;
    justify-content: space-between;
}

/* avatar & others */  

img.avatar {
    width: 10%;
    border-radius: 5%;
}

/* left and right containers - # means id='xxxx' */

#leftContainer {
    float:left;
}

#rightContainer {
    float:right;
}

/* colored horizontal lines */

hr.orange {
    border-top: 1px solid orange;
}
  
hr.blue {
    border-top: 1px solid blue;
}
  
hr.green {
    border-top: 1px solid #04aa6d;
}
  
hr.red {
    border-top: 1px solid red;
}

/* Is this necessary? */
td {
    height: 30px;
    vertical-align: middle;
}

.hvcenter {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.main {
    width: 100%;
    /* height: 100%; */
    height: calc(100% - 45px);
    margin-top: 45px;
    margin-bottom: 45px;
    border: none; 
    display: flex;
    align-items: stretch;
    text-align: center;
    overflow-y: scroll;
}
  
#main div {
    flex: 1;
    border: none;
    display: flex;
    flex-direction: column;
    overflow-y: scroll;
}
  
#main div > * {
    margin:auto 0;
}