.gi-collapse-card { margin: 8px; } .gi-collapse-card .ant-collapse { box-sizing: border-box; width: 100%; background-color: var(--component-background); border: none; border-radius: 8px; box-shadow: -1px -1px 4px 0 rgba(223, 223, 223, 0.5), -2px 2px 4px 0 rgba(244, 244, 244, 0.5), 2px 3px 8px 2px rgba(151, 151, 151, 0.05); } .gi-collapse-card .ant-collapse .ant-collapse-item { padding: 4px; border: none; } .gi-collapse-card .ant-collapse-content { padding: 4px; border: none; } .logo-container { background: #fff; } .tugraph-logo { height: 200px; } .tugraph-form-container { padding: 24px; } /* KEYFRAMES */ .spinner-box { display: flex; align-items: center; justify-content: center; width: 100%; height: 100vh; background-color: #1d2630; } @keyframes configure-clockwise { 0% { transform: rotate(0); } 25% { transform: rotate(90deg); } 50% { transform: rotate(180deg); } 75% { transform: rotate(270deg); } 100% { transform: rotate(360deg); } } @keyframes configure-xclockwise { 0% { transform: rotate(45deg); } 25% { transform: rotate(-45deg); } 50% { transform: rotate(-135deg); } 75% { transform: rotate(-225deg); } 100% { transform: rotate(-315deg); } } /* X-ROTATING BOXES */ .configure-border-1 { position: absolute; display: flex; align-items: center; justify-content: center; width: 115px; height: 115px; padding: 3px; background: #fb5b53; animation: configure-clockwise 3s ease-in-out 0s infinite alternate; } .configure-border-2 { left: -115px; display: flex; align-items: center; justify-content: center; width: 115px; height: 115px; padding: 3px; background: #3ff9dc; transform: rotate(45deg); animation: configure-xclockwise 3s ease-in-out 0s infinite alternate; } .configure-core { width: 100%; height: 100%; background-color: #1d2630; } .loading-text { position: absolute; color: #fff; font-weight: 700; font-size: 16px; } .graphinsight-container-extra { flex-shrink: 0; box-sizing: border-box; margin: 0px; background: var(--background-color); }