/** Default widget_boxes style */

.mode_popup{
  padding:1em;
}

.wims_widget_box {
  margin: 5px;
  max-width: 900px;
}

.wims_columns {
  display: flex;
  flex-wrap: wrap;
}

.wims_widget_box .title_box {
  border-radius: 5px 5px 0 0 ;
  border: 1px solid #BBB;
  border-bottom-width: 0;
  margin: 0;
  padding: .5em;
}

.wims_widget_box .title_box h1,
.wims_widget_box .title_box h2,
.wims_widget_box .title_box h3  {
  margin-top: 2px;
  margin-bottom: 0;
}

.wims_widget_box .title_box .wims_title {
  /* Text shadow for light text on dark background */
  /*text-shadow: -1px -1px 1px rgb(0 0 0 / .5), 1px 1px 1px rgb(0 0 0 / .5);*/
}

.wims_widget_box .box_content {
  display: block;
  background-color: #fff;
  margin: 0;
  padding: .5em;
  clear: both;
  /*text-align: center;*/
  border: 1px solid #BBB;
  border-radius: 0 0 5px 5px ;
  min-height: 6em;
  box-sizing: border-box;
}


/** details/summary html5 tags (accordions)  **/
details {
  margin-bottom: .5rem;
  padding: 0 .5rem .5rem .5rem;
  box-shadow: 0 .1rem 1rem -.5rem rgb(0 0 0 / .4);
}
details summary ~ div{
  opacity: 0;
  transform: translateY(-10px);
  transition: .6s opacity ease,.6s transform ease;
}
details[open] summary ~ div {
  opacity: 1;
  transform: translateY(0);
}

summary {
  padding: .5rem;
  margin: 0 -.5rem;
  cursor: pointer;
  transition: .4s background-color ease;
}
summary:hover::marker, summary:focus::marker{
  color: var(--wims_hlink_color);
}

details.wims_details {
  background-color: #4442;
}

.wims_details>summary {
  background-color: #4442;
  margin-bottom: .25em;
}

.wims_details>summary:hover, .wims_details>summary:focus{
  background-color: #4444;
}



/* Small screens */
@media only screen and (max-width: 40em) {
  .medium_size {
    width:100%;
    margin: 5px;
  }
}

/* Medium screens */
@media only screen and (min-width: 40.063em) and (max-width: 64em) {
  .medium_size {
    max-width: 40em;
    margin: .8em auto;
  }
}

/* Large screens */
@media only screen and (min-width: 64.063em) {
  .medium_size {
    width:50%;
    margin: 0;
    padding: .5em;
    box-sizing:border-box;
  }
  .side_col{width: 30%;}
  .main_col{width: auto;}
}
