.periodicmain {background: #000;padding-top: 50px;}.tablepop .modal-title {font-size: 24px;font-weight: bold;}.tablepop .modal-body {font-weight: 500;}.procurtitle {text-align: center;color: #fff;margin-bottom: 7px;}.procurtitle h5 {margin: 0;}.procurtitle h2 {position: relative;margin: 5px 0 0;}.procurtitle h2:after {content: "";background: #ffd822;position: absolute;width: 130px;height: 2px;bottom: -15px;margin: auto;left: 0;right: 0;}.procurtitle h2 span {color: #ffd822;}.mainwrapper {width: 100%;margin: auto;position: relative }.mainwrapper>input {-webkit-appearance: none;appearance: none;position: fixed;left: 0;top: 0;width: 100%;height: 100%;visibility: hidden;opacity: 0;pointer-events: none;}.companylogo img {width: 70px;filter: brightness(10);position: relative;top: -5px;margin-top: -70px;}.cls1 ul, .cls2 ul, .cls4 ul {margin: 0;padding: 0;list-style: none;}.cls1 ul li {display: inline-block;font-size: 1vw;margin-bottom: 5px;color: #fff;width: 33.1%;}.cls1 ul li:nth-child(2) {text-align: center;position: relative;top: 210px;}.cls1 ul li:last-child {text-align: right;}.cls2 {position: relative;top: -154px;width: 180px }.cls2 ul li label {padding: 5px;}.cls2 ul li {color: #fff;font-size: 12px;margin-bottom: 5px;border: 1px solid #000;}.cls2 ul li:hover {border: 1px solid #fff;}.cls2 ul li i {margin-right: 3px;}.cls3 {font-size: 1vw;text-align: center;position: relative;top: -343px;color: #fff;left: -108px;}.cls4 {width: 425px;position: absolute;right: 0px;bottom: 123px;}.cls4 ul li {color: #fff;font-size: 11px;margin-bottom: 5px;}.cls4 ul li span:first-child {width: 120px;display: inline-block;border: 1px solid #fff;margin-right: 10px;text-align: center;}.cls4 ul li span:first-child label {padding: 15px 5px;}.cls4 ul li span:last-child {display: inline-block;position: absolute;font-size: 10px;line-height: 1.5;padding-top: 10px;}.periodic-table {display: grid;grid-gap: 5px;grid-template-columns: repeat(12, 1fr);}.element {position: relative;font-size: 0.8vw;padding-bottom: 100%;cursor: pointer;color: #fff;transition: 500ms;}.element .overlay {position: fixed;z-index: 1;left: 0;right: 0;top: 0;bottom: 0;background-color: #101318;opacity: 0;pointer-events: none;transition: 500ms;}.element .square {position: absolute;left: 0;top: 0;width: 100%;height: 100%;border: 5px solid;box-sizing: border-box;background: #101318;display: flex;flex-direction: column;justify-content: center;align-items: center;transition-property: transform, z-index, left, right, top, bottom;transition-duration: 100ms, 0ms, 200ms, 200ms, 200ms, 200ms;transition-delay: 0ms, 100ms, 0ms, 0ms, 0ms, 0ms;}.element .atomic-number {position: absolute;left: 0;top: 0;padding: 2px;}.element .atomic-symbol {position: absolute;right: 0;top: 0;padding: 2px;}.element .label {text-align: center;transition: 200ms;padding-top: 13px;}.element .symbol {font-size: 1.7vw;}.element .name {font-size: 10px;font-weight: 600 }.element .atomic-mass {position: absolute;left: 0;right: 0;bottom: 0;padding: 2px;text-align: center;}.element .atomic-weight {position: absolute;right: 0;top: 0;list-style: none;margin: 0;padding: 2px;opacity: 0;transition: 200ms;text-align: right;}.element .model {display: none;position: absolute;left: -500%;right: -500%;top: -500%;bottom: -500%;transform: scale(0.1);}.element .model .orbital {position: absolute;left: 0;right: 0;top: 0;bottom: 0;border: 5px solid;border-radius: 50%;opacity: 0.25;}.element .model .orbital:nth-child(1) {margin: 10%;animation-duration: 40s;}.element .model .orbital:nth-child(2) {margin: 15.5%;animation-duration: 34s;}.element .model .orbital:nth-child(3) {margin: 21%;animation-duration: 28s;}.element .model .orbital:nth-child(4) {margin: 26.5%;animation-duration: 22s;}.element .model .orbital:nth-child(5) {margin: 32%;animation-duration: 16s;}.element .model .orbital:nth-child(6) {margin: 37.5%;animation-duration: 10s;}.element .model .orbital:nth-child(7) {margin: 43%;animation-duration: 4s;}.element input[type=radio] {-webkit-appearance: none;appearance: none;position: absolute;z-index: 2;left: 0;top: 0;width: 100%;height: 100%;opacity: 0;cursor: pointer;outline: none;}.element input[type=radio].activate:hover~.square {z-index: 2;transform: scale(1.35);transition-delay: 0ms;outline: none;pointer-events: none;}.element input[type=radio].activate:checked~.square .atomic-weight {opacity: 1;transition: 500ms;}.element input[type=radio].activate:checked~.square .model {display: block;animation: fade-in;animation-duration: 1s;}.element input[type=radio].activate:checked~.square .orbital {animation-name: rotate;animation-timing-function: linear;animation-iteration-count: infinite;}.element input[type=radio].deactivate {position: fixed;display: block;z-index: 1;opacity: 0;pointer-events: none;}.element input[type=radio].deactivate:checked~.square {z-index: 1;}.placeholder {position: relative;z-index: -1;font-size: 1vw;padding-bottom: 100%;color: #fff;transition: 500ms;}.placeholder .square {position: absolute;left: 0;top: 0;width: 100%;height: 100%;border: 2px solid;box-sizing: border-box;display: flex;flex-direction: column;justify-content: center;align-items: center;opacity: 0.5;}.gap {position: relative;padding-bottom: 100%;transition: 500ms;}.procurement, .contract, .supplier, .category, .orderss, .invoice {color: #fff;}.procurement .square {color: #1B1B1C;border-color: #00FF68;background: #00FF68;}.contract .square {color: #fff;border-color: #2249FF;background: #2249FF;}.supplier .square {color: #fff;border-color: #FF7000;background: #FF7000;}.category .square {color: #1B1B1C;border-color: #D1D1D1;background: #D1D1D1;}.orderss .square {color: #1B1B1C;border-color: #FFD822;background: #FFD822;}.invoice .square {color: #fff;border-color: #5F5F60;background: #5F5F60;}.r1 {grid-row: 1;}.r2 {grid-row: 2;}.r3 {grid-row: 3;}.r4 {grid-row: 4;}.r5 {grid-row: 5;}.r6 {grid-row: 6;}.r7 {grid-row: 7;}.r8 {grid-row: 8;}.r9 {grid-row: 9;}.r10 {grid-row: 10;}.c1 {grid-column: 1;}.c2 {grid-column: 2;}.c3 {grid-column: 3;}.c4 {grid-column: 4;}.c5 {grid-column: 5;}.c6 {grid-column: 6;}.c7 {grid-column: 7;}.c8 {grid-column: 8;}.c9 {grid-column: 9;}.c10 {grid-column: 10;}.c11 {grid-column: 11;}.c12 {grid-column: 12;}.c13 {grid-column: 13;}.c14 {grid-column: 14;}.c15 {grid-column: 15;}.c16 {grid-column: 16;}.c17 {grid-column: 17;}.c18 {grid-column: 18;}@keyframes rotate {from {transform: rotate(0deg);}to {transform: rotate(360deg);}}@keyframes fade-in {from {opacity: 0;}to {opacity: 1;}}@keyframes noise {0%, 100% {background-position: 0 0;}10% {background-position: -5% -10%;}20% {background-position: -15% 5%;}30% {background-position: 7% -25%;}40% {background-position: 20% 25%;}50% {background-position: -25% 10%;}60% {background-position: 15% 5%;}70% {background-position: 0% 15%;}80% {background-position: 25% 35%;}90% {background-position: -10% 10%;}}.key {position: relative;z-index: 1;grid-row: 1;grid-column-start: 2;grid-column-end: 12;font-size: 0.8vw;line-height: 1.5;display: flex;align-items: center;pointer-events: none;user-select: none;text-align: center;}.ott {grid-column-start: 1;grid-column-end: none;}.key .row {position: relative;display: flex;width: 100%;justify-content: space-between;}.ott .row {display: inline;width: 60%;margin: auto;text-align: left;}.key .row label {cursor: pointer;transition: 120ms;pointer-events: all;font-size: 12px;border: 1px solid #000;padding: 5px 5px 5px 30px;}.ott .row label {width: 33%;display: inline-block;}.key .row label:hover {border: 1px solid #fff;}.key .procurement i {color: #00FF68;margin-right: 5px;font-size: 12px;background: #00FF68;}.key .contract i {color: #2249FF;margin-right: 5px;font-size: 12px;background: #2249FF;}.key .supplier i {color: #FF7000;margin-right: 5px;font-size: 12px;background: #FF7000;}.key .category i {color: #D1D1D1;margin-right: 5px;font-size: 12px;background: #D1D1D1;}.key .orderss i {color: #FFD822;margin-right: 5px;font-size: 12px;background: #FFD822;}.key .invoice i {color: #5F5F60;margin-right: 5px;font-size: 12px;background: #5F5F60;}#procurement-governance:checked~.periodic-table .element:not(.procurement), #contract-management:checked~.periodic-table .element:not(.contract), #supplier-management:checked~.periodic-table .element:not(.supplier), #category-management:checked~.periodic-table .element:not(.category), #order-management:checked~.periodic-table .element:not(.orderss), #invoice-management:checked~.periodic-table .element:not(.invoice), #financial-importance:checked~.periodic-table .element:not(.financial), #strategic-importance:checked~.periodic-table .element:not(.strategic), #operational-importance:checked~.periodic-table .element:not(.operational), #fundamentals-list:checked~.periodic-table .element:not(.fundamentals), #high-value:checked~.periodic-table .element:not(.hig), #noble-pursuits:checked~.periodic-table .element:not(.noble), #rare-yet:checked~.periodic-table .element:not(.rare), #procurement-governance:checked~.periodic-table .placeholder, #contract-management:checked~.periodic-table .placeholder, #supplier-management:checked~.periodic-table .placeholder:not(.supplier), #category-management:checked~.periodic-table .placeholder:not(.category), #order-management:checked~.periodic-table .placeholder, #invoice-management:checked~.periodic-table .placeholder, #financial-importance:checked~.periodic-table .placeholder, #strategic-importance:checked~.periodic-table .placeholder, #operational-importance:checked~.periodic-table .placeholder, #fundamentals-list:checked~.periodic-table .placeholder, #high-value:checked~.periodic-table .placeholder, #noble-pursuits:checked~.periodic-table .placeholder, #rare-yet:checked~.periodic-table .placeholder {opacity: 0.15;pointer-events: none;}#procurement-governance:checked~.periodic-table .key label:not(.procurement), #contract-management:checked~.periodic-table .key label:not(.contract), #supplier-management:checked~.periodic-table .key label:not(.supplier), #category-management:checked~.periodic-table .key label:not(.category), #order-management:checked~.periodic-table .key label:not(.orderss), #invoice-management:checked~.periodic-table .key label:not(.invoice), #financial-importance:checked~.periodic-table .key label:not(.financial), #strategic-importance:checked~.periodic-table .key label:not(.strategic), #operational-importance:checked~.periodic-table .key label:not(.operational), #fundamentals-list:checked~.periodic-table .key label:not(.fundamentals), #high-value:checked~.periodic-table .key label:not(.hig), #noble-pursuits:checked~.periodic-table .key label:not(.noble), #rare-yet:checked~.periodic-table .key label:not(.rare) {opacity: 0.65;}.category-toggle:not(#supplier-management):not(#category-management):checked~.periodic-table .gap {opacity: 0.5;}.category-toggle:checked~.category-cancel {visibility: visible;pointer-events: all;cursor: pointer;}.cls2 ul li label, .cls4 ul li span:first-child, .cls4 ul li span label {cursor: pointer;}.cls2 ul li:last-child, .cls4 ul li:last-child, .cls4 ul li span label, .cls2 ul li label {margin-bottom: 0;}@media screen and (max-width: 1366px) {.cls2 {top: -140px;}.cls1 ul li:nth-child(2) {top: 182px;}.cls4 {width: 368px;bottom: 121px;}.cls4 ul li {font-size: 10px;}.cls4 ul li span:first-child {width: 101px;}.cls4 ul li span:first-child label {padding: 12px 5px;}.cls4 ul li span:last-child {font-size: 9px;line-height: 1.4;padding-top: 0;}}@media screen and (max-width: 1024px) {.ott .row {width: 70%;}.cls4 {width: 310px;bottom: 105px;}.cls4 ul li span:first-child label {padding: 8.5px 5px;}.cls4 ul li span:last-child {font-size: 8px;line-height: 1.2;padding-top: 0;}.cls2 ul li {font-size: 10px;}.cls2 {top: -120px;width: 150px;}.cls3 {top: -265px;left: -80px;}.element .name {font-size: 9px }.cls1 ul li:nth-child(2) {top: 150px;}}@media screen and (max-width: 768px) {.cls1 ul li:nth-child(2) {top: 160px;}.mainwrapper-box {overflow: scroll;}.mainwrapper {width: 1000px;}.cls1 ul li, .element .atomic-number, .element .atomic-symbol {font-size: 10px;}.element .label {padding-top: 10px;}.cls3 {top: -275px;left: -86px;font-size: 10px;}.cls4 ul li {font-size: 10px;margin-bottom: 9px;}.cls4 ul li span:last-child {font-size: 9px;line-height: 1.3;}.cls4 {width: 330px;}}