:root {
    --theme-primary-bg: #146c43;
}

.bi {
    pointer-events: none;
}

.navbar {
    background-color: var(--theme-primary-bg);
}

.primaryBG {
    background-color: var(--theme-primary-bg);
}
/* Label style after Input feild is in focus. Can also use input:focus ~ label to select sibling. */
  
  /* Input form Style */
  
 .input_wrap input, .input_wrap select {
    border: 2px solid #afbdcf;
    border-radius: 5px;
    height: 47px;
    width:300px;
    color: #000000;
    font-size: 14px;
    padding-left: 20px;
    box-shadow: none;  
    pointer-events: all;
  }
  
.input_wrap :focus + label, .input_wrap :valid + label{
    font-size: 12px;
    top: -10px;
    left: 7px;
    background: #ffffff;
    padding: 2px;
    margin: 0 3px;
  }
  
  .input_wrap {
      width:auto;
      height:auto;
      position:relative;
      padding: 0;
      text-align: left;
      left: 46px;
      pointer-events: none;
  }
  
  .input_wrap label {
    font-family:arial;
    font-size:16px;
    padding: 12px 14px;
    position: absolute;
    left: 0;
    transition:0.2s ease all; 
    -moz-transition:0.2s ease all; 
    -webkit-transition:0.2s ease all;
    pointer-events: none;
  
  }
  
  .input_wrap input:focus {outline:none;}
  
  /*       end of input focus */


#preloader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    overflow: hidden;
    background: #fff;
   }
#preloader:before {
   content: "";
   position: fixed;
   top: calc(50% - 30px);
   left: calc(50% - 30px);
   border: 6px solid #f2f2f2;
   border-top: 6px solid #56829e ;
   border-radius: 50%;
   width: 60px;
   height: 60px;
   -webkit-animation: animate-preloader 1s linear infinite;
   animation: animate-preloader 1s linear infinite;
}
@-webkit-keyframes animate-preloader {
   0% {
       -webkit-transform: rotate(0deg);
       transform: rotate(0deg);
   }
   100% {
       -webkit-transform: rotate(360deg);
       transform: rotate(360deg);
   }
}
@keyframes animate-preloader {
   0% {
       -webkit-transform: rotate(0deg);
       transform: rotate(0deg);
   }
   100% {
       -webkit-transform: rotate(360deg);
       transform: rotate(360deg);
   }
}

#workspaceTableBody{
    max-height: 80vh;
    overflow: scroll;
    overflow-x:hidden;
}
.locationResult, .departmentResult{
    display: block;
    width: 100%;
    border-radius: 5px;
    border: 1px solid black;
    border-collapse: separate;
    background-color: white !important;
    margin-bottom: 0;
    
}

.roleTable{
    width: 97%;
    padding: 1%;
    margin-top: 1em;
    margin-left: 1em;
    margin-right: 1em;
    background-color: rgb(170, 170, 170) !important;
}

.roleTable>thead {
    background-color: white;
    border: 1px solid black;
}
.emplResult{
    display: block;
    width:65vw;
    height: 16em;
    border: 1px solid black;
    border-collapse: separate;
    margin-left: 1em;
    margin-right: 0.5em;
}

.locationResult thead th, .departmentResult thead th, .roleTable thead th {
    border: 0px;
    border-bottom: 1px solid black;
    width: 100vw;
}


.departmentTable{
    padding: 1%;
    margin-top: 1em;
    margin-right: 1em;
}

.roleTableRow{
    width:100%;
}
#workspaceTable {
    position: relative;
}

#workspaceTable>thead{
    background-color: white;
}

#workspaceTable tr, #workspaceTable td{
    border:0;
    
}


/*#workspaceTable .result{
}*/

#workspaceTable thead{
    max-width: inherit;
}
#workspaceTable .header{
    border: 1px solid black;
    max-width: inherit;
}

.resultField {
    font-weight: bold;
}

a:link{
    color:black;
}
a:visited{
    color: black;
}

#searchContainer{
    margin-top: 1em;
}

#filter {
    margin-top: 0.5em;
}
#mainContainer {
    position: fixed;
    height: 100vh;
}

.filterField {
    max-width: 85%;
}
.filterRow{
    max-width: 8vw;
    margin-right: 0px;
    margin-left: 0px;
}
#locationsModal{
    top: 7em;
    left: 12em;
}

.modal-dialog {
    max-width: inherit;
    margin: 1.75rem 1rem;
}

#detailsHeader {
    color:white;
}

#modModalHeader {
    color: white;
}

#detailsModal {
    position: fixed;
    width: auto;
    min-height: 25%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin-top: 0;
    margin-left: 0;
    background-color: white;
    border: 1px solid black;
    z-index: 1000;
}

#detailsCloseBtn{
    position: absolute;
    right: 0;
    top: 0;
    border-radius: 2%;
    height: 100%;

}


.depModBtn {
    margin: 0.5rem;
}
.detailsBody{
    min-height: 100%;
    display: flex;
}
.detailsModalVarWidth {
    width: 100%;
}
#personnelResults{
    max-height: 40vh;
    overflow: scroll;
    list-style-type: none;
    padding-inline-start: 0px;
    margin-block-start: 0em;
    overflow-x:hidden;

}

#modificationModal {
    position: fixed;
    width: auto;
    min-height: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin-top: 0;
    margin-left: 0;
    background-color: white;
    border: 1px solid black;
    z-index: 1000;
}
#modModalCloseButton{
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;

}


#applyFilterBtn{
    height: 47px;
    border-top-right-radius: 26px;
    border-bottom-right-radius: 26px;
}

#applyFilterBtnDiv{
    position: relative;
    right: 3em;
}
#listOfEmplFromSelectedDep{
    max-height: 30vh;
    overflow:scroll;
    overflow-x:hidden;
}
.hide {
    display: none !important;
}
.depLists{
    background-color: whitesmoke;
    border: 1px solid black;
    height: 50vh;
    overflow: scroll;
    overflow-x:hidden;
}
.locList{
    background-color: whitesmoke;
    border: 1px solid black;
    max-height: 100vh;
    overflow: scroll;
    overflow-x:hidden;
}
.departmentWorkspace{
    width: 100vw;
}

.personRow{
    margin-left: 0px;
    display: table-row;
    vertical-align: middle;
    height: 10vh;
}

.personnelListArea{
    max-height: 50vh;
    overflow: scroll;
}

.personnelFieldRow{
    width: 100%;
}


.personnelFieldRow .input_wrap{
    left: 0px;
}

.selectPersonToRemoveCheckbox{
    height: 20px;
    margin-top: 3px;
}
.personnelListArea li:nth-of-type(odd){
    background-color: white;
}
.personnelListArea li:nth-of-type(even){
    background-color: rgb(221, 221, 221);
}

.addButton {
    height: 45px;
}

.depH4 {
    min-height:58px;
}

@media (min-width: 1200px){
    .container {
        max-width: 92vw;
    }
}


@media (min-width: 319px ) and (max-width: 767px){

    #workspaceHeaderText{
        text-align: center;
    }

    #searchContainer{
        margin-left: 10em;
    }

    .addButtonHeader{
        text-align: center;
    }
    
    .roleTable{
        width: 90vw;
        margin-right:0;
        margin-left: 1em;
    }

    #detailsModal {
        width: 100%;
        height: 100%;
    }
    .personResult{
        position: relative;
        width: 95vw;
    }

    .personResult td {
        border: 0;
    }
    .detailsBody{
        display:block;
        width: 95%;
    }

    #modificationModal{
        width: 100%;
        height: 100%;
    }
    .personRow{
        display: inline-flex;
        height: auto;
        width: 100%;
        font-size: 0.8em;
    }

    #filter{
        max-width: 100%;
    }

    .depBtns{
        position: relative;
        width: 100%;
        left: -0.25em;
    }
    .depModBtn {
        position:relative;
        margin: 2px;
        padding: 5px;
    }
    .emplResult{
        width: 90vw;
        margin-left: -1vw;
        margin-right: 0;
        height: 100%;
    }

    .emplFieldRow{
        margin-right: 0;
        margin-left: 0;
    }
    .personnelResult{
        width:97vw;
    }
    .personnelListArea{
        max-height: 58vh;
        overflow: scroll;
        overflow-x: hidden;
        background-color: lightgrey;
        border: 1px solid black;
    }
    
    
    .filterRow{
        width: 100%;
        max-width: 100%;
    }
    .filterField{
        width: 100%;
        max-width: 100%;
    }
    .input_wrap input, .input_wrap select {
        width: 50vw;
    }

    .personnelInputBar{
        width: 75vw !important;
    }
    .input_wrap{
        left:0px;
    }
    .locationFieldRow{
        width: 90%;
    }
    
}

@media (min-width: 374px){

    .emplResult{
        width: 92vw;
        margin-left: -2vw;
        margin-right: 0;
        height: 100%;
    }
}

@media (min-width: 424px){

    .emplResult{
        width: 91vw;
        margin-left: 0vw;
        margin-right: 0;
        height: 100%;
    }
}

@media (min-width: 575px){
    #filterTable{
        left: 0;
        transform: translate(0%);
        max-height: 10vh;
    }

    #filterTable th{
        border: 0px;
    }

    .roleTable {
        width: 91vw;
        margin-left: 3vw;
    }

    .emplResult{
        width: 88vw;
        margin-right: -2vw;
        margin-left: -2vw;
    }
}


@media (min-width: 767px){
    
    #workspaceTable>tbody{
        width: 10vw;
    }

    .filterRow{
        max-width:100%;
        width: 14em !important;
        
    }
    .roleTable {
        width: 89vw;
    }

    .personnelResult {
        width: 87vw;
    }

    .detailsBody .personnelResult{
        margin-top: 6vh;
    }
}

@media (min-width: 1023px){
    .roleTable {
        width: 88.5vw;
        margin-left: 4vw;
    }

    .emplResult {
        width: 86vw;
        margin-left: -1vw;
    }

    .personnelResult{
        width: 89vw;
        margin-left: 1em;
    }

    .detailsBody .personnelResult{
        margin-top: 6vh;
    }

}
@media (min-width: 1386px){
    .roleTable{
        width: 76vw;
        margin-left:3vw;
    }
    .emplResult{
        width: 75vw;
        margin-left: -0.5vw;
    }

    .personnelResult{
        width: 75vw;
    }
    .detailsBody .personnelResult{
        margin-top: 6vh;
    }

}

@media (min-width: 1439px){
    .roleTable{
        width: 76vw;
        margin-left:3vw;
    }

    .emplResult{
        width: 75vw;
        margin-left: -0.5vw;
    }

    .personnelResult{
        width: 75vw;
    }
    .detailsBody .personnelResult{
        margin-top: 6vh;
    }

}
@media (min-width: 2559px){
    #orderBar{
        position: relative;
        right: 100px;
    }
    .roleTable{
        width: 85.5vw;
        margin-left: 3vw;
    }

    .emplResult{
        width: 85vw;
        margin-left: -0.5vw;
    }

    .personnelResult{
        width: 75vw;
    }

    .personRow{
        height: 5vh;
    }



}