html,body{overflow-x:hidden}
#main{overflow-x:auto;}

.container-fluid{padding-left:30px;padding-right:30px}

.text-underline-dotted{text-decoration:underline;text-decoration-style:dotted}
.text-underline-dashed{text-decoration:underline;text-decoration-style:dashed}

.grid{
  display:grid;
  grid-template-columns: repeat( 18, minmax(80px, 1fr) );
  grid-template-areas: "alkali alkaline transition transition transition transition transition transition transition transition transition transition boron carbon pnictogen chalcogen halogen noble";
  grid-column-gap: 1px;
  grid-row-gap: 1px;
  justify-items: stretch;
}
.grid-item{
  display:block;
  position:relative;
}
#legend .grid-item{text-align:center;align-self: end;}
#legend .grid-item.transition{grid-area:transition}
.grid-item:hover{
  text-decoration:none
}
.grid-item .card{
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  -webkit-transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.grid-item .card::after {
  content: "";
  border-radius: 4px;
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  opacity: 0;
  -webkit-transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.element#example{position:relative;}
.element#example > *{transform:scale(2);}

.grid-item .card:hover,.grid-item .card.focus{
  -webkit-transform: scale(1.25, 1.25);
  transform: scale(1.25, 1.25);
  z-index:1;
  text-decoration:none
}
.grid-item .card:hover::after,.grid-item .card.focus::after {
  opacity: 1;
}
.grid-item .card.focus{
  box-shadow:0 0 10px 10px rgba(0, 155, 200, 0.8);
}

.o-0{opacity:0}
.o-25{opacity:0.25}
.o-50{opacity:0.5}
.o-75{opacity:0.75}
.o-100{opacity:1}

.o-h-100:hover{opacity:1}

.blockquote{border-width:3px!important}

.switch [type="checkbox"]:not(:checked), .switch [type="checkbox"]:checked {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.switch label input[type="checkbox"] {opacity: 0;width: 0;height: 0;}
.switch label .lever {
    content: "";
    display: inline-block;
    position: relative;
    width: 36px;
    height: 14px;
    background-color: rgba(0,0,0,0.38);
    border-radius: 15px!important;
    margin-right: 10px;
    -webkit-transition: background 0.3s ease;
    transition: background 0.3s ease;
    vertical-align: middle;
    margin: 0 16px;
}
.switch label .lever::before, .switch label .lever::after {
    content: "";
    position: absolute;
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 50%!important;
    left: 0;
    top: -3px;
    -webkit-transition: left 0.3s ease, background .3s ease, -webkit-box-shadow 0.1s ease, -webkit-transform .1s ease;
    transition: left 0.3s ease, background .3s ease, -webkit-box-shadow 0.1s ease, -webkit-transform .1s ease;
    transition: left 0.3s ease, background .3s ease, box-shadow 0.1s ease, transform .1s ease;
    transition: left 0.3s ease, background .3s ease, box-shadow 0.1s ease, transform .1s ease, -webkit-box-shadow 0.1s ease, -webkit-transform .1s ease;
}
.switch label .lever::after {
    background-color: #F1F1F1;
    -webkit-box-shadow: 0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12);
    box-shadow: 0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12);
}
.switch label input[type="checkbox"]:checked + .lever::before, .switch label input[type="checkbox"]:checked + .lever::after {
    left: 18px;
}
/* .grid-item:active,.grid-item:focus{grid-column-end:span 2;grid-row-end:span 2;z-index:1000} */

*{border-radius:0!important}
.element .title{float:right}
.element .number{float:left}
.element .card-header{padding:0}
.element .card-body{padding:0.25rem 0.25rem 0.0rem;}
.element .subtitle{font-size:0.75rem;clear:both}
.element p{margin-bottom:0.25rem;font-size:0.6875rem}

.element[data-group="1"]::before,
.element[data-group="18"]::after{
  display:block;
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  opacity:0.5;
  font-size:1.75em;
}
.element[data-group="1"]::before{left:-0.75em}
.element[data-group="18"]::after{right:-0.75em}
.element[data-group="1"]::before,
.element[data-group="18"]::after{
  content:attr(data-period)
}

.element.noble.gas .card{background-color:#007bff;border-color:#007bff;color:#fff}
.element.metal .card{background-color:#343a40;border-color:#343a40;color:#fff}
.element.metalloid .card{background-color:#cc6003;border-color:#cc6003;color:#fff}
.element.nonmetal .card{background-color:#17a2b8;border-color:#17a2b8;color:#fff}
.element.lanthanide .card{background-color:#262a2e;border-color:#262a2e;color:#fff}
.element.actinide .card{background-color:#1f2124;border-color:#1f2124;color:#fff}

.element.metal.metalloid .card{
  background: linear-gradient(45deg, #343a40 50%, #cc6003 50%);
  border-top-color:#cc6003;
  border-right-color:#cc6003;
  border-left-color:#343a40;
  border-bottom-color:#343a40;
}
.element.nonmetal.metalloid .card{
  background: linear-gradient(45deg, #cc6003 50%, #17a2b8 50%);
  border-top-color:#17a2b8;
  border-right-color:#17a2b8;
  border-left-color:#cc6003;
  border-bottom-color:#cc6003;
}

/* .element.metal.metalloid .card[data-angle]{background: linear-gradient(attr(data-angle,45deg), #343a40 50%, #cc6003 50%) !important}
.element.nonmetal.metalloid .card[data-angle]{background: linear-gradient(attr(data-angle,45deg), #343a40 50%, #cc6003 50%) !important} */

.element.unknown .card,
.element.metalloid.unknown .card,
.element.noble.gas.unknown .card{background-color:#6c757d;border-color:#6c757d}

.badge-warning-dark{background-color:#cc6003 !important;color:#fff!important}

.dark-theme{background-color:#1e2022;color:#fff}
/* .dark-theme .element.metal .card{background-color:#6c757d !important;color:#fff!important} */
.dark-theme .modal-content{background-color:#343a40}
.dark-theme .modal-header .close{color:#fff}
.dark-theme .modal-header .close:hover{color:#fff}

.element[data-phase="gas"] .title{color:#dc3545 !important}
.element[data-phase="liquid"] .title{color:#007bff !important}

.element.radioactive .card::after{content:" ";position:absolute;top:0;left:0;bottom:0;right:0;z-index:0;background-image:url(../images/radioactive.svg);background-position: center center;background-size:50%;background-repeat:no-repeat;opacity:0.15}
.element.radioactive .number{color:#ffc107 !important}

.minimalistic .element .card-title .title{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:2rem}
.minimalistic .element .card-title .number{position:absolute;top:25%;left:0}
.minimalistic .element .card-title .badge-light{background:transparent}
.minimalistic .element[data-phase="solid"] .card-title .badge-light{color:#fff !important}
.minimalistic .element.nav-item .card-title .badge-light{color:#fff !important}
.minimalistic .element .card-body{height:1;padding-bottom:75%}
.minimalistic .element .mass{position:absolute;bottom:0}
.minimalistic .element .shells{display:none}

.big-arrow{font-size:8rem;height:100%;position:absolute;bottom:0;left:50%;transform:translateX(-50%);}

#page-footer{color:#6c757d;background:#1e2022}
#page-footer *{border-color:#6c757d!important}
footer .social-media a{display:inline-block;width:100%;min-height:12.5vw;line-height:12.5vw;font-size:5vw;text-align:center}
footer .links ul{min-height:12.5vw}
footer a{color:#6c757d;transition:all 0.25s ease}
footer a:hover{color:#fff;text-decoration:none}
footer .social-media a.facebook:hover{background-color:#4267b2}
footer .social-media a.twitter:hover{background-color:#1da1f2}
footer .social-media a.youtube:hover{background-color:#f00}
footer .social-media a.instagram:hover{background-color:#111}

.modal-backdrop.show{opacity:0.8}

.offcanvas-collapse {
  padding-bottom:1rem;
  position: fixed;
  bottom: 100%;
  left: 0;
  width: 100%;
  height: 100%;
  overflow-y: scroll;
  visibility: hidden;
  background-color: #343a40;
  transition: visibility .3s ease-in-out, -webkit-transform .3s ease-in-out;
  transition: transform .3s ease-in-out, visibility .3s ease-in-out;
  transition: transform .3s ease-in-out, visibility .3s ease-in-out, -webkit-transform .3s ease-in-out;
}
.offcanvas-collapse.open {
  visibility: visible;
  -webkit-transform: translateY(100%);
  transform: translateY(100%);
}
.navbar-toggler{
  border-radius:100%!important;
  padding:2rem!important;
  background-color:#dddddd;
  position:relative;
  top:-3.5rem;
  opacity:0.5;
  transition: all ease-in-out 0.25s;
}
.navbar-toggler:hover{
  opacity:1;
  top:-3rem;
  -webkit-box-shadow: 0px 0px 10px 0px rgba(45,166,214,0.5);
  -moz-box-shadow: 0px 0px 10px 0px rgba(45,166,214,0.5);
  box-shadow: 0px 0px 10px 0px rgba(45,166,214,0.5);
}
.navbar-toggler > *{
  position:relative;
  top:1.5rem;
}

.youtube-link{
  position:absolute;top:0;left:0;color:#fff;text-shadow: 0px 0px 10px rgba(0,0,0,0.8);
}


.block-model{
  display:grid;
  grid-template-columns: repeat( 32, minmax(37px, 1fr) );
  grid-column-gap: 1px;
  grid-row-gap: 1px;
  justify-items: stretch;
  overflow-x: auto;
}
.grid-item{
  display:block;
  position:relative;
}

body:not(.dark-theme) .grid .element{filter:invert(95%) hue-rotate(180deg)}
body:not(.dark-theme) .grid .element img{filter:invert(95%) hue-rotate(180deg)}