/* Login Page */

/* General Standards */

* {
    font-family: 'Roboto Slab';
    font-size: 1.2rem !important;
    font-weight: 300;
    box-sizing: border-box;
}

.unity {
    /*Because while useful, Selectize is incredibly annoying to customize*/
    border-radius: .25rem;
    border:1px solid #bbb;
    box-sizing:border-box;
    box-shadow:none;
    height:calc(1.0em + 2px);/**/
    padding:calc(.375rem - 1px) .75rem calc(.375rem - 1px) .75rem;
    line-height:1.0;
}

textarea {
    display: block;
    margin: 10px 0px 10px 0px;
    align-self: center;
}

.psuedo_selectize {
    display:inline-block;
    width:100%;
    position:relative;
    box-sizing:initial;
}

.noclickie {
    user-select: none;
    -o-user-select: none;
    -ms-user-select: none;
    -moz-user-select: none;
    -webkit-user-select:none;
}

#login {
    text-align: center;
    background: #e3e3e3 no-repeat top left;
    border: 1px solid #cfcfcf;
    min-height: 330px;
    width: 705px;
    position: absolute;
    left: 50%;
    margin-left: -352px;
    top: 50%;
    margin-top: -165px;
    border-radius: 30px;
}

span.exit {
    position: absolute;
    top: 0;
    right: 0;
    background: #6361df;
    color: #292929;
    line-height: 14px;
    font-weight: bold;
    padding: 0 .3em;
    cursor: pointer;
    border-left: 1px dotted white;
    border-bottom: 1px dotted white;
}

/* Search and Result Display */


/*Search Results*/
div#resultEntry {
    display: block;
    outline: 3px solid;
    width: 98%;
    margin-bottom: 10px;
    margin-left: 1%;
    font-size: 1.25vw;
    z-index: 48;
}

div#resultEntry:hover {
    display: block;
    background: #DDF;
    outline: 5px solid;
    width: 98%;
    margin-bottom: 10px;
    margin-left: 1%;
    font-size: 1.25vw;
}

.resultPopup {
    display: none;/*Should be none by default, flex for testing*/
    background: #DFF;
    width: 60vw;
    min-width: 400px;
    padding: 0.5vw;
    top: 20vh;
    left: 20%;
    position: absolute;
    justify-content: center;
    z-index: 50;
}

.exitPopup {
    display: none;
    background: transparent;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0%;
    left: 0%;
    z-index: 49;
}

.popBlock {
    flex-direction: column;
}

.popBlock:nth-child(even) {
    background: #FDD;
}

.popBlock:nth-child(odd) {
    background: #FCC;
}

div#resultDetail {
    display: block;
}

div#myLbl {
    /*Because while useful, Selectize is incredibly annoying to customize*/
    border-radius: .25rem;
    border:1px solid #bbb;
    box-sizing:initial;
    box-shadow:none;
    height:calc(1.0em + 2px);/**/
    padding:calc(.375rem - 1px) .75rem calc(.375rem - 1px) .75rem;
    line-height:1.0;
    position:relative;
    display: inline-block;
    margin: 2px;
    white-space: nowrap;
    font-weight: bold;
}

.popSummary {
    display: block;/*Default is block*/
}

.popDetail {
    background: #DFD;
    display: none;/*Default is block*/
}

div#editResult {
    display: inline-block;
    border-radius: 0.1vw;
    outline: 3px solid;
    
    text-align: center;
    line-height: 1.25;
}

.resultBlock {
    display: block;
}

.resultElement {
    display: inline-block;
    margin: 0px 10px 0px 10px;
    border: 1px solid #cfcfcf;
}

.resultExtra {
    display: block;
}

.result{
    position: absolute;        
    z-index: 999;
    top: 100%;
    left: 0;
    width: 500px;
    content:"";
    display:table;
    clear:both;
}

/*Search boxes*/

div#search_form {
    display: flex;
    justify-content: space-evenly;
}

.search_element {
    display: inline-block;
}

.search_text {
    width: 18vw;
    border: 1px solid #ccc;
    margin: 0.1vw;
}

.search_button {
    width: 20px;
    padding-left: 0.2rem !important;
    padding-right: 0.85rem !important;
    vertical-align: baseline;
}

.search_button:active {
    background: #DDD;
}

div.input-box input.error {
    border: 2px dashed red;
    background: #fee;
}

/*Enter Record*/
div#form_popup {
    display: none;/*Default (when enabled): flex*/
    background: #777;
    width: 70vw;
    min-width: 400px;
    padding: 1.5vw;
    top: 30%;
    left: 20%;
    border-radius: 3vw;
    position: absolute;
    justify-content: center;
}

div#recordButton {
    background: #FF0000;
    display: block;
    position: fixed;
    width: 70px;
    height: 70px;
    bottom: 5vw;
    right: 5vw;
    justify-content: space-around;
    border-radius: 20px;
    
    color: #FFF;
    text-align: center;
    line-height: 1.35;
}

.addRecordText {
    font-size: 50px !important;
}

form#new_record {
    width: 98%;
    height: 98%;
}

div#addContainer {
    display: flex;
    justify-content: space-between;/**/
    margin: 5px 0px 5px 0px;
    width: 100%;
}

textarea#FRMdescription {
    height: 100px;
    overflow: auto;
}

textarea#FRMreason {
    display: none;
    height: 50px;
    overflow: auto;
}

.resultDesc {
    height: 100px;
    overflow: auto;
}

.addElement {
    display: inline-block;
    margin: 2px;
}

.addDuration {
    width: 160px;
}

.addUsername {
    background-color: #CCC;
    height: 100%;
    overflow: clip;
    border-radius: .25rem;
    width: 70%;
    padding: 10px 0 10px 0;
}

.addDrop {
    width: 150px;
}

.categoryContainer {
    width: 100%;
}

.centerContainer {
    display: flex;
    justify-content: space-around !important;
}

/* Button used to open the contact form - fixed at the bottom of the page */
.open-button {
    background-color: #555;
    color: white;
    padding: 16px 20px;
    border: none;
    cursor: pointer;
    opacity: 0.8;
    position: fixed;
    bottom: 23px;
    right: 28px;
    width: 280px;
}

/* The popup form - hidden by default */
.form-popup {
    display: none;
    position: fixed;
    bottom: 0;
    right: 15px;
    border: 3px solid #f1f1f1;
    z-index: 9;
}

/* Add styles to the form container */
.form-container {
    max-width: 300px;
    padding: 10px;
    background-color: white;
}

/* Full-width input fields */
.form-container input[type=text], .form-container input[type=password] {
    width: 100%;
    padding: 15px;
    margin: 5px 0 22px 0;
    border: none;
    background: #f1f1f1;
}

/* When the inputs get focus, do something */
.form-container input[type=text]:focus, .form-container input[type=password]:focus {
    background-color: #ddd;
    outline: none;
}

/* Set a style for the submit/login button */
.form-container .btn {
    background-color: #04AA6D;
    color: white;
    padding: 16px 20px;
    border: none;
    cursor: pointer;
    width: 100%;
    margin-bottom:10px;
    opacity: 0.8;
}

/* Add a red background color to the cancel button */
.form-container .cancel {
    background-color: red;
}

/* Add some hover effects to buttons */
.form-container .btn:hover, .open-button:hover {
    opacity: 1;
}