.periodic-table {
    position: relative;
    width: 748px;
    font-family: 'Roboto', sans-serif;
    color: white;
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
    box-sizing: border-box;
    overflow: hidden;
}

.periodic-table:focus {
    outline: none;
}

.periodic-table .padding-container {
    padding: 3px;
}

.periodic-table .table-container {
    position: relative;
    margin:auto;
}

.periodic-table .table-container .pt-help {
    position: absolute;
    top: -57px;
    left: 5px;
}

.periodic-table .table-container .pt-help .pt-help-icon {
    font-size: 20px;
    color: #0085ca;
    width: 26px;
    height: 26px;
    line-height: 26px;
    text-align: center;
    border: 2px solid;
    border-radius: 50%;
    cursor: pointer;
}

.periodic-table .table-container .pt-help.pt-help-selected .pt-help-icon {
    color: black;
    background-color: white;
}

.periodic-table .table-container .pt-help .pt-help-icon:hover {
    background-color: #f7f7f7;
}

.periodic-table .table-container .pt-help .pt-help-content {
    position: absolute;
    top: 0;
    left: -5px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 742px;
    height: 448px;
    z-index: 10;
    background-color: #87d6f8;
    color: #3f3f3f;
}

.periodic-table .table-container .pt-help .pt-help-content div {
    max-width: 90%;
}

.periodic-table .table-container .pt-help.help-content-hidden .pt-help-content {
    visibility: hidden;
}

.periodic-table .table-line {
    display: block;
    white-space: nowrap;
    line-height: 0;
}

.periodic-table .table-element {
    box-sizing: border-box;
    position: relative;
    display: inline-block;
    height: 35px;
    width: 35px;
    line-height: 40px;
    background-color: #64B5F6;
    color: black;
    margin: 2px;
    text-align: center;
    vertical-align: middle;
    /*transition: color 0.3s, background-color 0.3s;*/
    overflow: hidden;
    cursor: default;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

.periodic-table .table-element.group {
    cursor: pointer;
}

.periodic-table .table-element.group.gr-i-selected {
    background-color: black;
    color: white;
}

.periodic-table .table-element.group.group-long {
    width: 113px;
}

.periodic-table .table-element.group.group-hidden {
    display: none;
}

.periodic-table .table-element.groups-switch {
    font-size: 10px;
    font-family: sans-serif;
    line-height: 10px;
    padding-top: 3px;
}

.periodic-table .table-element.groups-switch.pseudo-hover {
    height: 32px;
}

.periodic-table .table-element.groups-switch .groups-switch-active {
    font-weight: bold;
    text-decoration: underline;
}

.periodic-table .table-element.highlighted-selected {
    box-sizing: content-box;
    border: 2px solid black;
    margin: 0;
    background-color: white !important;
    color: black !important;
}

.periodic-table .info-panel {
    position: absolute;
    top: 42px;
    left: 118px;
    width: 388px;
    height: 112px;
    background-color: #fff;
    box-sizing: border-box;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    z-index: 10;
    /*transition: width ease 0.3s, height ease 0.3s, left ease 0.3s, top ease 0.3s;*/
}

.periodic-table .info-panel div.info-selected,
.periodic-table .info-panel tr.info-selected {
    box-shadow: 0 0 10px 2px black;
    background-color: black !important;
    color: white !important;
    border: 2px solid black;
}

.periodic-table .info-panel .title {
    background-color: #2E9CD4;
    color: black;
    text-align: center;
    font-size: 26px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    width: 250px;
}

.periodic-table .info-panel .title-info {
    padding: 3px;
    font-size: 12px;
    text-align: justify;
    color: black;
}

.periodic-table .info-panel .element-info {
    font-size: 14px;
    color: black;
    display: none;
    overflow: hidden;
}

.info-panel .title span:before {
    content: attr(enumber);
    line-height: 20px;
    font-size: 14px;
    vertical-align: top;
}
/*added styling for image credit line*/
.periodic-table .info-panel .element-credit {
    position: relative;
    top: -155;
    right: -188;
    font-size: 5px;
    color: black;
    transform: rotate(270deg);
    text-align-last: bottom;
    vertical-align: bottom;

}

/*moved image left to allow for credit line*/
.periodic-table .info-panel .element-image {
    position: absolute;
    display: flex;
    right: 10;
    top: 0;
    width: 125px;
    height: 74px;
    background-color: white;
    border: 1px solid gray;
    text-align: center;
    overflow: hidden;
}

.periodic-table .info-panel .element-image img {
    margin: auto;
    /*Added max width and max height because some images were getting cut off*/
    max-width: 100%;
    max-height: 100%;
}

.periodic-table .info-panel.info-initial .title {
    width: 100%;
}

.periodic-table .info-panel.info-initial .element-image {
    visibility: hidden;
}

.periodic-table .main-info {
    display: inline-block;
    margin: auto;
    padding-top: 3px;
    width: 335px;
    vertical-align: top;
}

.periodic-table .nowrap {
    white-space: nowrap;
}

.periodic-table .info-panel .label {
    font-weight: bold;
    /* 'Roboto' font becomes too large in bold weight on Safari/MacOS */
    font-family: sans-serif;
    /*Added padding to the left of the info in center box*/
    padding-left: 3px;
}

.periodic-table .info-panel table {
    text-align: left;
    width: 100%;
    white-space: normal;
    border-collapse: collapse;
    /*reduced line height to avoid text running below bottom of center box*/
    line-height: 14px;
}

.periodic-table .info-panel td {
    font-family: 'Roboto', sans-serif;
    width: 155px;
    height: 13px;
    /*reduced font size to avoid text running below bottom of center box*/
    font-size: 12px;
    padding: 0;
}

.periodic-table .info-panel .element-info sup {
    line-height: 0;
}

.periodic-table .table-element:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}

.periodic-table .table-element.pseudo-hover {
    border: 2px solid black;
    box-sizing: content-box;
    margin: 0;
}

.periodic-table .empty-element {
    visibility: hidden;
}

.periodic-table .group {
    background: #E3F2FD;
    color: black;
    line-height: 35px;
}

.periodic-table .atomic-number {
    font-size: 10px;
    line-height: 10px;
    position: absolute;
    left: 1px;
    /*moved down 1 px*/
    top: 1px;
}

.periodic-table .table-element .chemical-symbol {
    font-size: 16px;
    line-height: 16px;
    position: relative;
    top: 9px;
}

.periodic-table .table-element .atomic-weight {
    font-size: 10px;
    line-height: 10px;
    position: absolute;
    bottom: 0;
    width: 100%;
}

.periodic-table .control-panel {
    height: 30px;
    background-color: #E3F2FD;
    color: black;
    padding: 4px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
    text-align: center;
}

.periodic-table .control-btn {
    display: inline-block;
    font-size: 12px;
    background-color: #BBDEFB;
    color: black;
    border: none;
    margin: 0;
    box-sizing: border-box;
    padding-top: 8px;
    width: 120px;
    height: 30px;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
    vertical-align: middle;
}

.periodic-table .control-btn:hover,
.periodic-table .control-btn.btn-pseudo-hover {
    background-color: #90CAF9;
    color: black;
    box-shadow: 0 2px 4px rgba(0,0,0,0.16), 0 2px 4px rgba(0,0,0,0.23);
    border: 1px solid black;
    padding-top: 7px;
}

.periodic-table .control-btn.active {
    background-color: #007db8;
    color: #fff;
}

.periodic-table .control-btn:active,
.periodic-table .control-btn:focus {
    outline: none;
}

.periodic-table #pt_a11y_label {
    position: absolute;
    /* put accessibility region under the table */
    top: 10px;
    left: 10px;
    width: 1px;
    height: 1px;
    overflow: hidden;
    color: transparent;
}

.periodic-table .color-legend {
    color: black;
    padding: 4px 3px 0 3px;
    font-weight: bold;
}

.periodic-table .color-legend .items-holder {
    display: flex;
}

.periodic-table .color-legend .title {
    text-align: center;
    width: 100%;
    height: 13px;
}

.periodic-table .color-legend .item {
    font-size: 13px;
    font-family: sans-serif;
    flex: 1;
    text-align: center;
}

.periodic-table .color-legend .item.leg-i-family {
    flex: auto;
}

.periodic-table .color-legend .item.leg-i-family[title="Lanthanides"],
.periodic-table .color-legend .item.leg-i-family[title="Actinides"] {
    position: absolute;
    z-index: 1;
    left: 25px;
}

.periodic-table .color-legend .item.leg-i-family[title="Lanthanides"] {
    top: 383px;
}

.periodic-table .color-legend .item.leg-i-family[title="Actinides"] {
    top: 423px;
}

.periodic-table .color-legend .item.leg-i-family[title="Lanthanides"] .color,
.periodic-table .color-legend .item.leg-i-family[title="Actinides"] .color {
    display: none;
}

.periodic-table .color-legend .item.leg-i-selectable {
    cursor: pointer;
}

.periodic-table .color-legend .item.leg-i-selectable:hover,
.periodic-table .color-legend .item.leg-i-selectable.leg-i-selected {
    background-color: black;
    color: white;
}

.periodic-table .color-legend .item.leg-i-selectable.leg-i-selected:hover {
    background-color: lightgray;
    color: black;
}

.periodic-table .color-legend .item.leg-i-negativ {
    width: 50%;
}

.periodic-table .color-legend .item.leg-i-negativ:not(.long-item) span {
    width: initial;
}

.periodic-table .color-legend .item:not(.long-item) span {
    /*display: inline-block;*/
}

.periodic-table .color-legend .long-item {
    width: 200px;
}

.periodic-table .color-legend .color {
    display: inline-block;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    vertical-align: middle;
    box-sizing: border-box;
    background-color: red;
    margin-right: 4px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

.periodic-table .color-legend .gradient {
    display: inline-block;
    height: 15px;
    border-radius: 8px;
    width: 80px;
    vertical-align: middle;
    margin: 0 3px;
    background: rgb(3,169,244);
    background: -moz-linear-gradient(left,  rgba(3,169,244,1) 0%, rgba(228,0,0,1) 100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(3,169,244,1)), color-stop(100%,rgba(228,0,0,1)));
    background: -webkit-linear-gradient(left,  rgba(3,169,244,1) 0%,rgba(228,0,0,1) 100%);
    background: -o-linear-gradient(left,  rgba(3,169,244,1) 0%,rgba(228,0,0,1) 100%);
    background: -ms-linear-gradient(left,  rgba(3,169,244,1) 0%,rgba(228,0,0,1) 100%);
    background: linear-gradient(to right,  rgba(3,169,244,1) 0%,rgba(228,0,0,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#03a9f4', endColorstr='#e40000',GradientType=1 );
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

.periodic-table .color-legend .states-conditions {
    font-weight: normal;
    background-color: #87D6F8;
}