li.green-check {
    list-style-image:url('/wp-content/plugins/fly-ti/images/icons/checkmark-green-16.png');    
}
li.red-x {
    list-style-image:url('/wp-content/plugins/fly-ti/images/icons/x-mark-red-16.png');   
}
li.orange-check {
    list-style-image:url('/wp-content/plugins/fly-ti/images/icons/checkmark-orange-16.png');   
}
li.orange-question {
    list-style-image:url('/wp-content/plugins/fly-ti/images/icons/question-mark-orange-16.png');    
}
li.gray-question {
    list-style-image:url('/wp-content/plugins/fly-ti/images/icons/question-mark-gray-16.png');   
}

/* First round of custom icons from Josh*/

.ft-icon_add_fly_to_box_1 {
  background: url('/wp-content/plugins/fly-ti/images/icons/fbf/add_fly_to_box_1.svg');
  height: 50px;
  width: 50px;
  background-repeat:no-repeat;
  display: block;

}

.ft-icon_subtract_fly_to_box_2 {
  background: url('/wp-content/plugins/fly-ti/images/icons/fbf/subtract_fly_to_box_2.svg');
  height: 50px;
  width: 50px;
  background-repeat:no-repeat;
  display: block;

}

.ft-icon_add_material_to_inventory_1 {
  background: url('/wp-content/plugins/fly-ti/images/icons/fbf/add_material_to_inventory_1.svg');
  height: 50px;
  width: 50px;
  background-repeat:no-repeat;
  display: block;

}

.ft-icon_add_material_to_inventory_2 {
  background: url('/wp-content/plugins/fly-ti/images/icons/fbf/add_material_to_inventory_2.svg');
  height: 50px;
  width: 50px;
  background-repeat:no-repeat;
  display: block;

}

.display-in-a-row {
  display: flex;
  flex-direction: row;
}
  
  .fly-box-btn {
    cursor: pointer; 
  }
  .fly-pattern-btn {
    cursor: pointer; 
  }
   /*.container-fly-box {
    display: none;
  }  */
  
  .container-fly-pattern {
    text-align: left;
    display: none;
    margin: 5;
  } 

  /* Container holding the image and the text */
.fly-container-300px {
    width: 100%;
    padding: 5px;
    background-color: lightgray;
    vertical-align: middle;
    position: relative;
    /*text-align: center; */
    color:black;
  }
  
  /* Bottom left text */
  .bottom-left {
    position: absolute;
    bottom: 8px;
    left: 16px;
  }

  /* Bottom left 'from the top' text */
   .bottom-left-250-from-top {
    position: absolute;
    top: 280px;
    left: 16px;
  }
  
  
  /* Top left text */
  .top-left {
    position: absolute;
    top: 8px;
    left: 16px;
  }
  
  /* Top right text */
  .top-right {
    position: absolute;
    top: 8px;
    right: 16px;
  }

  /* Bottom right 'from the top' text */
  .bottom-right-250-from-top {
    position: absolute;
    top: 280px;
    right: 16px;
  }
  
  /* Bottom right text */
  .bottom-right {
    position: absolute;
    bottom: 16px;
    right: 16px;
  }
  
  /* Centered text */
  .centered {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

li.material-info-popup {
    list-style-position: inside;
   /* background-color: gray; */
    
}

ul.fly-pattern-popup {
    margin: 0;
    padding: 0;
}

.hidden {
  display: none;
}

.green {
  color: green;
}

.red {
  color: red;
}

/* 300px Fly Display Accordians */
/* Style the buttons that are used to open and close the accordion panel */
.accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 8px;
  margin-top: 3px;
  margin-bottom: 3px;
  width: 100%;
  text-align: left;
  border: none;
  outline: none;
  transition: 0.4s;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .accordion:hover {
  background-color: #ccc;
}

/* Style the accordion panel. Note: hidden by default */
.panel {
  padding:  10px;
  background-color: white;
  /*display: none; */
  overflow: hidden;
}
/* adding +/- to buttons */
.accordion:after {
  content: '\02795'; /* Unicode character for "plus" sign (+) */
  font-size: 13px;
  color: #777;
  float: right;
  margin-left: 5px;
}

.active:after {
  content: "\2796"; /* Unicode character for "minus" sign (-) */
}


/* Styling for header dropdowns*/


div.ft-all-dropdowns-container {
  position: fixed;
  bottom: 0;
  width: 100%;
  z-index: 10;
  background-color: gray;
  z-index: 10;
  height: 100px;
  padding: 3px;
  margins: 3px;
  overflow: auto;
  min-width: 600px;

}
 

div.ft-dropdown-container {
  display: inline-block;
  position: relative;
  float: right;
  
}

div.ft-user-dropdown-class label {
 color: gray;
 font-size: small;
 font-weight: 150;
 padding: 0;
 margin: 0;
}

/*
div.ft-user-dropdown-class {
  display: inline-block;
}
*/

.ft-fly-box-icons {
  /*color: red; */
  /*font-size: 30px; */
  cursor: pointer;
  /*font-weight: 300; */
}

/********************** Buddyboss specific items ******************************/

/* Fly Thumbnail Control Icons */

.ft-fly-thumb-icons {
  /*color: red; */
  font-size: 30px;
  cursor: pointer;
  /*font-weight: 300; */
}

.ft-fly-thumb-icons:hover{
  color: green;
  /*font-weight: 300; */
}


meter {
  width: 100px;
  height: 20px;
}