body {
    padding-top: 50px;
    padding-bottom: 20px;
}

/* Set padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
}

/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
.dl-horizontal dt {
    white-space: normal;
}


/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea{
    max-width: 280px;
}

.my-container {
  margin: 150px auto auto auto;
  width: 600px;
}

.my-login {
  position: relative;
  margin: auto;
  padding: 20px 20px 30px;
  width: 300px;
  background: lightgray;
  /*box-shadow: 0 4px 8px 0 white, 0 6px 20px 0 white;*/
}


.menucontainer{
    height: 100%;
    width: 0%;
    position: fixed; /* Stay in place */
    z-index: 10; /* Sit on top */
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    background-color: rgba(0,0,0, 0.98); 
    overflow-x: hidden; /* Disable horizontal scroll */
    transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
}

.menucontainer-content {
    position: relative;
    top: 10%; /* 25% from the top */
    left: 8%;
    width: 100%; /* 100% width */
    text-align: left; /* Centered text/links */
    margin-top: 30px; /* 30px top margin to avoid conflict with the close button on smaller screens */
}

.menucontainer a {
    padding: 8px;
    text-decoration: none;
    font-size: 20px;
    color: #818181;
    display: block; /* Display block instead of inline */
    transition: 0.3s; /* Transition effects on hover (color) */
}

.menucontainer a:hover, .menucontainer a:focus {
    color: #f1f1f1;
}

.menucontainer .closebtn {
    position: absolute;
    top: 30px;
    right: 0;
    font-size: 50px;
}

.coremenubarlogo{
    width:40px;
    height:40px;
    float:left;
    padding-right:5px;
    padding-top:10px;
    padding-left:5px;
    padding-bottom:0px;
    /*padding:10px,0px,5px,5px;*/
}

@media screen and (max-height: 450px) {
    .menucontainer-content{
        top: 20%;
        left: 2%;
    }

    .menucontainer a {
        font-size: 20px;
    }
    .menucontainer .closebtn {
        font-size: 40px;
        top: 30px;
        right: 10px;
    }

    .coremenubarlogo {
       margin-left:20px;
    }
}

.image_preview{
    width:280px;
    height:280px;
    border:thin;
}

.subdetail{
    height: 0%;
    width: 100%;
    position: fixed; /* Stay in place */
    z-index: 2; /* Sit on top */
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    background-color: rgba(0,0,0, 0.5); 
    overflow-x: hidden; /* Disable horizontal scroll */
    transition: 0.3s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
}


.subdetail_main{
    height: 80%;
    width: 80%;
    position: relative; /* Stay in place */
    z-index: 3; /* Sit on top */
    left: 140px;
    top: 100px;
    bottom: 0;
    right: 0;
    background-color: white; 
    border:solid;
    border-color:lightgray;
    border-radius:15px 15px;
    overflow-x:hidden;

}

.subdetail_close{
    position: absolute;
    top: -10px;
    right: 10px;
    font-size: 35px;
}

.subdetail_content{
    margin-left: 15px;
    margin-right: 15px;
    
}

.white, .white a {
  color: #fff;
}

.required{
    background-color:#ffff80;
}


.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}

/* Style the buttons that are used to open the tab content */
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}

.overlay-base{
    position:fixed;
    display:none;
    width:100%;
    height:100%;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background-color:rgba(0,0,0,0.5);
    z-index:2;
}

.loader {
  border: 16px solid #f3f3f3; /* Light grey */
  border-top: 16px solid #3498db; /* Blue */
  border-radius: 50%;
  width: 120px;
  height: 120px;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.centered-element {
  height: 100px;
  width: 100px;
  position: absolute;
  left: 50%;
  margin-left: -50px;
  top: 50%;
  margin-top: -50px;
}

.table-report {
    width: 50%;
    border-collapse:collapse;
}
.table-report td{
    padding: 5px;
}
.table-report td:first-child {
    text-align: right;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
        text-align: left !important;
    }