
.flex-container-mdr-search {
  /* We first create a flex layout context */
  display: flex;
  
  /* Then we define the flow direction 
     and if we allow the items to wrap 
   * Remember this is the same as:
   * flex-direction: row;
   * flex-wrap: wrap;
   */
  flex-flow: row wrap;
  
  /* Then we define how is distributed the remaining space */
  justify-content: space-between;
}

.flex-container-score {
  /* We first create a flex layout context */
  display: flex;
  
  /* Then we define the flow direction 
     and if we allow the items to wrap 
   * Remember this is the same as:
   * flex-direction: row;
   * flex-wrap: wrap;
   */
  flex-flow: row wrap;
  
  /* Then we define how is distributed the remaining space */
  justify-content: space-between;    /*https://css-tricks.com/almanac/properties/j/justify-content/*/
}

.flex-container-img-show{
  /* We first create a flex layout context */
  display: flex;
  
  /* Then we define the flow direction 
     and if we allow the items to wrap 
   * Remember this is the same as:
   * flex-direction: row;
   * flex-wrap: wrap;
   */
  flex-flow: row wrap;
  
  /* Then we define how is distributed the remaining space */
  justify-content: space-between;

}

.flex-container-img-button-show{
   /* We first create a flex layout context */
   display: flex;
  
   /* Then we define the flow direction 
      and if we allow the items to wrap 
    * Remember this is the same as:
    * flex-direction: row;
    * flex-wrap: wrap;
    */
   flex-flow: row wrap;
   
   /* Then we define how is distributed the remaining space */
   justify-content: flex-start;

}

.flex-container-button-filename-show{
   /* We first create a flex layout context */
   display: flex;
  
   /* Then we define the flow direction 
      and if we allow the items to wrap 
    * Remember this is the same as:
    * flex-direction: row;
    * flex-wrap: wrap;
    */
   flex-flow: row wrap;
   flex-direction: column ;
   /* Then we define how is distributed the remaining space */
   justify-content: flex-start;
}

/*Containers for app_simplified*/
.flex-job-title{
  /* We first create a flex layout context */
  display: flex;
  
  /* Then we define the flow direction 
     and if we allow the items to wrap 
   * Remember this is the same as:
   * flex-direction: row;
   * flex-wrap: wrap;
   */
  flex-flow: row wrap;
  /* Then we define how is distributed the remaining space */
  justify-content: space-between;

}
.flex-pam{
  /* We first create a flex layout context */
  display: flex;
  
  /* Then we define the flow direction 
     and if we allow the items to wrap 
   * Remember this is the same as:
   * flex-direction: row;
   * flex-wrap: wrap;
   */
  flex-flow: row wrap;
  /* Then we define how is distributed the remaining space */
  justify-content: space-between;

}
.flex-steps{
   /* We first create a flex layout context */
   display: flex;
  
   /* Then we define the flow direction 
      and if we allow the items to wrap 
    * Remember this is the same as:
    * flex-direction: row;
    * flex-wrap: wrap;
    */
   flex-flow: row wrap;
   /* Then we define how is distributed the remaining space */
   justify-content: space-between;

}
.flex-guide-pam-mm-bul{
  /* We first create a flex layout context */
  display: flex;
  
  /* Then we define the flow direction 
     and if we allow the items to wrap 
   * Remember this is the same as:
   * flex-direction: row;
   * flex-wrap: wrap;
   */
  flex-flow: row wrap;
  /* Then we define how is distributed the remaining space */
  justify-content: space-between;
  padding:5px; 
}

.flex-pam-mm-bul{
  /* We first create a flex layout context */
  display: flex;
  
  /* Then we define the flow direction 
     and if we allow the items to wrap 
   * Remember this is the same as:
   * flex-direction: row;
   * flex-wrap: wrap;
   */
  flex-flow: row wrap;
  /* Then we define how is distributed the remaining space */
  justify-content: space-between;
  padding:5px;
  flex-direction: column ;


}

.flex-div-steps{
  /* We first create a flex layout context */
  display: flex;
  
  /* Then we define the flow direction 
     and if we allow the items to wrap 
   * Remember this is the same as:
   * flex-direction: row;
   * flex-wrap: wrap;
   */
  flex-flow: row wrap;
  /* Then we define how is distributed the remaining space */
  justify-content:space-between;
  padding:5px; 
}

.flex-div-pam{
   /* We first create a flex layout context */
   display: flex;
  
   /* Then we define the flow direction 
      and if we allow the items to wrap 
    * Remember this is the same as:
    * flex-direction: row;
    * flex-wrap: wrap;
    */
   flex-flow: row wrap;
   /* Then we define how is distributed the remaining space */
   justify-content: flex-start;
   /*padding:5px; */

}
.flex-step2{
  /* We first create a flex layout context */
  display: flex;
  
  /* Then we define the flow direction 
     and if we allow the items to wrap 
   * Remember this is the same as:
   * flex-direction: row;
   * flex-wrap: wrap;
   */
  flex-flow: row wrap;
  /* Then we define how is distributed the remaining space */
  justify-content: space-between;
  padding:5px; 

}
.flex-status{
  /* We first create a flex layout context */
  display: flex;
  
  /* Then we define the flow direction 
     and if we allow the items to wrap 
   * Remember this is the same as:
   * flex-direction: row;
   * flex-wrap: wrap;
   */
  flex-flow: row wrap;
  /* Then we define how is distributed the remaining space */
  justify-content: flex-start;
}

.flex-view-images{
  /* We first create a flex layout context */
  display: flex;
  
  /* Then we define the flow direction 
     and if we allow the items to wrap 
   * Remember this is the same as:
   * flex-direction: row;
   * flex-wrap: wrap;
   */
  flex-flow: row wrap;
  /* Then we define how is distributed the remaining space */
  justify-content: space-between;
}

.flex-step3{
  /* We first create a flex layout context */
  display: flex;
  
  /* Then we define the flow direction 
     and if we allow the items to wrap 
   * Remember this is the same as:
   * flex-direction: row;
   * flex-wrap: wrap;
   */
  flex-flow: row wrap;
  flex-direction: column ;
  /* Then we define how is distributed the remaining space */
  justify-content: space-between;
}

.flex-div-insert-delete-example{
   /* We first create a flex layout context */
   display: flex;
  
   /* Then we define the flow direction 
      and if we allow the items to wrap 
    * Remember this is the same as:
    * flex-direction: row;
    * flex-wrap: wrap;
    */
   flex-flow: row wrap;
   /* Then we define how is distributed the remaining space */
   justify-content: space-between;

}

.flex-div-filter-position{
  /* We first create a flex layout context */
  display: flex;
  
  /* Then we define the flow direction 
     and if we allow the items to wrap 
   * Remember this is the same as:
   * flex-direction: row;
   * flex-wrap: wrap;
   */
  flex-flow: row wrap;
  /* Then we define how is distributed the remaining space */
  justify-content: space-between;
}
.flex-div-filter-position div:nth-of-type(1) { 
  flex-grow: 2; 
} 