/*
  i wish this required CSS was better documented :(
  https://github.com/FezVrasta/popper.js/issues/674
  derived from this CSS on this page: https://popper.js.org/tooltip-examples.html
  */

 .popper,
 .tooltip {
   position: absolute;
   z-index: 9999;
   background: #41489B;
   color: black;
   width: 420px;
   border-radius: 3px;
   box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
   padding: 10px;
   /* text-align: center;*/
 }

 .style5 .tooltip {
   background: #1E252B;
   color: #FFFFFF;
   max-width: 420px;
   width: auto;
   font-size: .8rem;
   padding: .5em 1em;
 }

 .popper .popper__arrow,
 .tooltip .tooltip-arrow {
   width: 0;
   height: 0;
   border-style: solid;
   position: absolute;
   margin: 5px;
 }

 .tooltip .tooltip-arrow,
 .popper .popper__arrow {
   border-color: #FFC107;
 }

 .style5 .tooltip .tooltip-arrow {
   border-color: #1E252B;
 }

 .popper[x-placement^="top"],
 .tooltip[x-placement^="top"] {
   margin-bottom: 5px;
 }

 .popper[x-placement^="top"] .popper__arrow,
 .tooltip[x-placement^="top"] .tooltip-arrow {
   border-width: 5px 5px 0 5px;
   border-left-color: transparent;
   border-right-color: transparent;
   border-bottom-color: transparent;
   bottom: -5px;
   left: calc(50% - 5px);
   margin-top: 0;
   margin-bottom: 0;
 }

 .popper[x-placement^="bottom"],
 .tooltip[x-placement^="bottom"] {
   margin-top: 5px;
 }

 .tooltip[x-placement^="bottom"] .tooltip-arrow,
 .popper[x-placement^="bottom"] .popper__arrow {
   border-width: 0 5px 5px 5px;
   border-left-color: transparent;
   border-right-color: transparent;
   border-top-color: transparent;
   top: -5px;
   left: calc(50% - 5px);
   margin-top: 0;
   margin-bottom: 0;
 }

 .tooltip[x-placement^="right"],
 .popper[x-placement^="right"] {
   margin-left: 5px;
 }

 .popper[x-placement^="right"] .popper__arrow,
 .tooltip[x-placement^="right"] .tooltip-arrow {
   border-width: 5px 5px 5px 0;
   border-left-color: transparent;
   border-top-color: transparent;
   border-bottom-color: transparent;
   left: -5px;
   top: calc(50% - 5px);
   margin-left: 0;
   margin-right: 0;
 }

 .popper[x-placement^="left"],
 .tooltip[x-placement^="left"] {
   margin-right: 5px;
 }

 .popper[x-placement^="left"] .popper__arrow,
 .tooltip[x-placement^="left"] .tooltip-arrow {
   border-width: 5px 0 5px 5px;
   border-top-color: transparent;
   border-right-color: transparent;
   border-bottom-color: transparent;
   right: -5px;
   top: calc(50% - 5px);
   margin-left: 0;
   margin-right: 0;
 }

 /* The container */
 .containerbox {
   display: block;
   position: relative;
   padding-left: 35px;
   margin-bottom: 12px;
   cursor: pointer;
   font-size: 22px;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
 }

 /* Hide the browser's default checkbox */
 .containerbox input {
   position: absolute;
   opacity: 0;
   cursor: pointer;
   height: 0;
   width: 0;
 }

 /* Create a custom checkbox */
 .checkmark {
   position: absolute;
   top: 0;
   left: 0;
   height: 25px;
   width: 25px;
   background-color: #eee;
 }

 /* On mouse-over, add a grey background color */
 .containerbox:hover input~.checkmark {
   background-color: #ccc;
 }

 /* When the checkbox is checked, add a blue background */
 .containerbox input:checked~.checkmark {
   background-color: #2196F3;
 }

 /* Create the checkmark/indicator (hidden when not checked) */
 .checkmark:after {
   content: "";
   position: absolute;
   display: none;
 }

 /* Show the checkmark when checked */
 .containerbox input:checked~.checkmark:after {
   display: block;
 }

 /* Style the checkmark/indicator */
 .containerbox .checkmark:after {
   left: 9px;
   top: 5px;
   width: 5px;
   height: 10px;
   border: solid white;
   border-width: 0 3px 3px 0;
   -webkit-transform: rotate(45deg);
   -ms-transform: rotate(45deg);
   transform: rotate(45deg);
 }