/*============================================================================================================*/
/* BasicForm                                                                                                  */
/*============================================================================================================*/


.BasicForm {
   
    
}
.BasicForm fieldset {
    background-color: #efefe3;   
    display: inline; 
    border-width: 1px;
    border-style: solid;
    border-color: black;
    border-image: initial;
    padding: .5em;   
    margin: .25em;
    -moz-border-radius:6px;  
    -webkit-border-radius: 6px;
}
/*
.BasicForm table {
    border-collapse: collapse;
    border-width: 0;
    padding: 0;
    margin: 0;
}

.BasicForm td {
    border-width: 0;
    padding: 0;
    margin: 0;
}

.BasicForm tr td:nth-child(2n+1) {
    text-align: right;
}

    */

.BasicForm legend {
    font-weight: normal;
    color: #4c8082;  
    font-size: 1.5em;
    border: none;
    margin-bottom: 0em;
    display: block;
    width: auto;
   
}

.BasicForm label {
    font-weight: bold;
    font-size: 1.1em;
    padding-right: .3em;
    padding-left: .3em;
    display: inline;
}

.BasicForm input[type="text"] {
    font-size: 1.1em;
    margin-bottom: .2em;
    width: 5.5em;
   
}

.BasicForm input[type="number"] {
    width: 3em;
}

.BasicForm select {
    font-size: 1.1em;
    /*display: table-cell;*/
    margin-bottom: .2em;
}



.BasicForm input[type="time"] {
    width: 5.5em;
}


.BasicForm label.error, label.error {
    color: red;
    font-style: italic;
    font-size: 1em;
}

.BasicForm label span {
         display: inline-block;
    width: 10em;
    text-align: right;
}

 .center {
            margin: auto; 
            width: 95%;
            display: inline-block;
            
        }

.BasicForm hr {
    border-color: black;
}

.BasicForm h3 {
    color: #4c8082;
}

.validationError {
    color: red;
    font-style: italic;
}

.inline {
    display: inline;
}



/* Popup container */
.popup {
    position: relative;
    display: inline-block;
    cursor: pointer;
}

/* The actual popup (appears on top) */
.popup .popuptext {
   /* visibility: hidden;*/
    width: 30em;
    background-color: #555;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 8px 0;
    position: absolute;
    z-index: 1;
    top: 125%;
    left: 50%;
    margin-left: -15em;
    padding: 3px;
}

/* Popup arrow */
.popup .popuptext::after {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color:  transparent transparent #555 transparent;
}

/* Toggle this class when clicking on the popup container (hide and show the popup) */
.popup .show {
    visibility: visible;
    -webkit-animation: fadeIn 1s;
    animation: fadeIn 1s
}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
    from {opacity: 0;} 
    to {opacity: 1;}
}

@keyframes fadeIn {
    from {opacity: 0;}
    to {opacity:1 ;}
}


/* The actual popup (appears on top) */
.popuptextRight {
    width: 30em !important;
    margin-left: -25em !important;
}

.popuptextRight::after {
    left: 83.6% !important;
}