/* ========================================================================= 
 people.extension.css :: main-4-extension                                  
                                                                           
 BEM model (Block-Element-Modifier)                                        
  .stick-man__head--small {                                                 
   stick-man__head--big   {                                                

 https://ishadeed.com/article/css-has-parent-selector/   has selector 
 https://codepen.io/lehonti/pen/OzoXVa  : listgroup as check-box, radio-box
/* ========================================================================= */

/*
https://css-irl.info/css-only-slide-up-caption-hover-effect/
*/

/*
.showme {
  opacity: 0;
  transform: translateY(100%);
  transition: transform 0.5s, opacity 0.5s;
}
*/


/* You can overwrite the corresponding bootstrap 5 css class:
Set translateY(-.5rem) to -2rem or -20px or whatever fit's your layout. You can also set background: white;
*/

/*--------------------------------------------------------
 floating - label

 <input> must come first so we can utilize a sibling selector (e.g., ~).

 <div class="form-floating mb-3">
  <input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
  <label for="floatingInput">Email address</label>
</div>
 --------------------------------------------------------*/
.form-floating>.form-control:focus~label,
.form-floating>.form-control:not(:placeholder-shown)~label,
.form-floating>.form-select~label {
  opacity: .85;
  transform: scale(.80) translateY(- 1rem) translateX(.2rem);  /* transform: scale(.85) translateY(- 1rem) translateX(.15rem); */
}

.son-div {
  padding: 8px 16px;
  border : 1px solid black ;  /* #fdd591  */
  margin-bottom: 5px;

  box-shadow: 0 1px 1px rgba(0,0,0,.65);
  border-radius: 0px;
  border: solid 1px #ddd;

  background: #eed ;      /* #fee8c3;  */
}

/* ----------------------------------------------------------- */
.clickhere:hover + .showme {
  opacity: 1;
  transform: translateY(0);
}

.son-hide {
  display: none;
  min-width :180px;  
  min-height:280px;  
}

.son-show-on-hover:hover + .son-hide {
  display: block;
  color: red;
}

html, body {
  height: 100%;
  margin: 0;
}


/* ----------  son-tree  -------------------------*/
.son-tree .parent, .son-tree .child {
  cursor: pointer;
}

.son-tree .parent {
  margin: 10px 1px;
/*  font-size: 1.3rem;  */
}

.son-tree .child-container {
   margin-left: 16px;
 /*  display: none;  */
}

.son-tree .child {
/* font-size: 1rem;  */
}

.son-tree input[type="checkbox"] {
  margin : 1px 5px 1px 1px ; 

}

/*
.son-tree .child_container.visible {
   display: block;
}

.son-tree .parent::before {
   content: "\25BA";
   margin-right: 10px;
}

.son-tree .child::before {
   content: "\25BA";
}
*/

/*
  <fieldset class="border border-primary rounded-0 p-2 m-1">
    <legend  class="float-none w-auto px-1 mx-1">Skillset: </legend>
*/

.son-fieldset {
  position: relative;
  border: 1px solid #ddd;
  padding: 18px 6px 6px 6px;
}

.son-fieldset h1 {
  position: absolute;
  top: 0;
  font-size: 17px;
  line-height: 1;
  margin: -9px 0 7px; /* half of font-size */
  background: #fff;
  padding: 0 3px;
}


.son-body { 
/*  background-color: #74EBD5;  */
  background: linear-gradient(to left, #56ab2f, #a8e063) ;
  font-size : 18px ;
/*  min-height: 100vh;  */
}


/*========================================================================= 
 list-group :  https://codepen.io/lehonti/pen/OzoXVa                                                           

<div class="container">
 <div class="list-group son-list-group">
  <input type="checkbox" name="CheckBoxInputName" value="Value1" id="CheckBox1" />
  <label class="list-group-item son-list-group-item" for="CheckBox1">Caption for CheckBox1</label>
  
  <input type="checkbox" name="CheckBoxInputName" value="Value2" id="CheckBox2" />
  <label class="list-group-item" for="CheckBox2">Caption for CheckBox2</label>
  
  <input type="checkbox" name="CheckBoxInputName" value="Value3" id="CheckBox3" />
  <label class="list-group-item" for="CheckBox3">Caption for CheckBox3</label>
  
  <input type="checkbox" name="CheckBoxInputName" value="Value4" id="CheckBox4" />
  <label class="list-group-item" for="CheckBox4">Caption for CheckBox4</label>
</div>

<br />

 <div class="list-group">
  
  <input type="radio" name="RadioInputName" value="Value1" id="Radio1" />
  <label class="list-group-item" for="Radio1">Caption for Radio1</label>
  
  <input type="radio" name="RadioInputName" value="Value2" id="Radio2" />
  <label class="list-group-item" for="Radio2">Caption for Radio2</label>
  
  <input type="radio" name="RadioInputName" value="Value3" id="Radio3" />
  <label class="list-group-item" for="Radio3">Caption for Radio3</label>
 </div>

</div>

/*-------------------------------------------------------
https://www.quackit.com/css/flexbox/tutorial/align_form_elements_with_flexbox.cfm

<div class="media">
  <img class="media-object">
  <div class="media-body">
    <h3 class="media-heading">...</h3>
    <p>...</p>
  </div>
</div>

<div class="media">
  <div class="media-object">&phone;</div>
                            &#x1F60E;
  <div class="media-body">
    <h3 class="media-heading">Organically Synthesized</h3>
    <p>Leverage agile frameworks to provide a robust synops 
      Iterative approaches to corporate strategy foster collaborative 
      thinking to further the overall value proposition.</p>
  </div>
</div>
--------------------------------------------------------*/
#stickey-footer {
   position: absolute;
   height: 100px ; 
   bottom: 0;
}

/*--------------------------------------------------------
 media                                                 
---------------------------------------------------------*/
.media {
   display: flex;
   align-items: flex-start;
   background: #F6F3EB;
   padding: 1em;
   border-radius: 3px;
   max-width: 24em;
 }
 
 .media-object {
   margin-right: 1em;
 }
 
 .media-body {
   flex: 1;
 }
 
 .media-heading {
   margin: 0 0 .5em;
 }