.siteseopro-setting-content { display:flex; } .siteseopro-tab-group { padding:0; } .siteseopro-license-table { background-color: #FFF; border-radius:5px; border: 1px solid #ccc; padding: 10px; } .siteseopro-btn-primary { background-color: #00308F; border: 1px solid #3d5afe; color: #FFF; } .siteseopro-btn-primary:hover, a.siteseopro-btn-primary:hover { background-color:#0529f7; transform: translateY(-1px); transition: background-color 0.6s, transform 0.4s; color:#FFF; } .siteseopro-btn { outline: none; border: none; border-radius: 3px; box-shadow: 1px 0 5px 0 #ccc; padding: 8px 10px; font-weight: bold; font-size:0.7rem; cursor:pointer; vertical-align:top; } a.siteseopro-btn { text-decoration: none; vertical-align:baseline; text-align:center; padding:5px 10px; } .siteseopro_license_notices { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 999; backdrop-filter: blur(1px); background-color: rgba(255, 255, 255, 0.5); padding-left:35%; padding-right:20%; padding-top:21%; } .spinner { display: none; } .spinner.is-active { display: inline-block; } .tab-content { display: none; } .tab-content.active { display: block; } .siteseo-analysis-block { clear: both; } .siteseo-audit-title { display:flex; align-items:center; gap: 10px; position: relative; } /* main below code*/ .siteseo-audit-title:focus { color: #191e23; border: none; box-shadow: none; outline-offset: -2px; outline: 1px dotted #555d66; } .siteseo-audit-title:hover { background: #f3f4f5; } .siteseo-audit-title { display:flex; position: relative; background: #fff; color: #1e1e1e; width: 100%; border: 0; margin: 0; padding: 15px 5px; line-height: unset; text-align: center; font-size: 14px; font-weight: 600; cursor: pointer; transition: all 300ms linear; } .description { padding: 0 1rem 0.5rem 1rem; display: none; width: 100%; } .siteseo-pro-fechtime { padding: 3px 12px; margin-top:5px; border-radius: 50px; display:inline-flex; justify-content:center; align-self:center; background: #00308f05; border:1px solid #00308f45; } .siteseo-pro-details { display:inline-flex; padding: 3px 17px; justify-content:center; align-self:center; border:1px solid #d3d3d3; border-radius: 50px; margin:10px 0; } .siteseopro-flex-wrapper { display: flex; justify-content:center; } .siteseo-circular-chart.siteseopro-flex-wrapper { display: flex; flex-flow: row nowrap; } .siteseo-single-chart { width: 33%; justify-content: space-around; } .siteseo-circular-chart { display: block; margin: 10px auto; max-width: 80%; max-height: 160px; } .siteseo-circle-bg { fill: none; stroke: #eee; stroke-width: 3.8; } .siteseo-circle { fill: none; stroke-width: 2.8; stroke-linecap: round; animation: siteseo-progress 1s ease-out forwards; } @keyframes siteseo-progress { 0% { stroke-dasharray: 0 100; } } .siteseo-percentage { fill: #666; font-family: sans-serif; font-size: 0.5em; text-anchor: middle; } .siteseo-circle { stroke: #3c9ee5; } .siteseo_notice { padding:10px,12px; margin-left:35%; background: #00308f05; border-radius:5px; border: 1px solid #00308f45; } .siteseo-inner-tab:hover { background-color:#f3f4f5; } .siteseo-pagespeed-input-wrapper{ display:flex; justify-content:center; gap:5px; align-items:center; } .siteseo-pagespeed-input-wrapper input { width: 35%; } #siteseopro-pagespeed-results ul.siteseo-inner-tabs{ width: unset !important; max-width: unset !important; padding: unset !important; } #siteseopro-pagespeed-results ul.siteseo-inner-tabs li{ padding: 0 20px; } .siteseo-audit-tabs{ display:flex; flex-direction:column; width: 50%; align-self:center; } .siteseo-ps-device-toggle{ cursor: pointer; display:flex; height:60px; width:100px; align-items:center; justify-content:center; border: 2px solid transparent background-color:transparent; } input[name=ps_device_type]:checked + label{ border-bottom: 2px solid #00308F !important; color: #00308F; } .siteseo-toggle-container{ display: flex; align-items: center; padding-left:20px; } .siteseo-toggle-switch{ position: relative; width: 47px; height: 20px; background-color: #ccc; border-radius: 20px; cursor: pointer; margin-right: 10px; transition: background-color 0.3s; } .siteseo-toggle-switch::before{ content: ''; position: absolute; width: 24px; height: 24px; background-color: white; border: 2px solid #ccc; border-radius: 50%; top: -4px; left: -2px; transition: 0.3s; } .siteseo-toggle-container span{ font-size: 14px; color: #555; font-weight: bold; } .siteseo-toggle-switch.active{ background-color: #003399; } .siteseo-toggle-switch.active::before{ left: 27px; border-color: #003399; } .siteseo-arrow{ margin-right: 5px; font-size: 14px; color: #555; font-weight: bold; } .siteseo-toggle-label{ font-style: italic; font-size: 11px; font-weight: normal; } .siteseo-arrow-icon{ font-size: 10%; padding-top:3px; } /* UTILITY CLASSES NOTE: WRITE ALL YOUR CSS ABOVE THIS */ .siteseo-flex{ display:flex; } .siteseo-justify-center{ justify-content:center; } .siteseo-direction-column{ flex-direction:column; } /* DO NOT WRITE ANY CSS AFTER THIS */