/*
    Obflow Theme
    [2022 Wikidot Theme]
    By AI_Mayca
    Based on Penumbra by EstrellaYoshte
    Created for the SCP Foundation
    Logo licensed under CC BY SA 3.0
*/
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fira+Code&display=swap');

body {
    width: 100%;
    font-family: 'Roboto', sans-serif;
    color: #E9E9EB;
    background-color: #43506C;
    background-image: linear-gradient(
        to bottom,
        #2A3853, #2A3853 90px,
        #2A3853 90px, #43506C 200px,
        #43506C 200px, #43506C 100%);
    background-repeat: no-repeat;
}
#page-content { font-size: 0.9rem; }
#main-content {
    top: -1.2rem;
}

/* 滚轮↓ */
::-webkit-scrollbar {
  width: 9px;
  background: #transparent;
}
::-webkit-scrollbar-track {
  background: #43506C;
}
::-webkit-scrollbar-thumb {
  background: #E9E9EB;
  border: none;
}
::-webkit-scrollbar-thumb:hover {
  background: #EF4B4C;
}

/* root值↓ */
:root {
}

/* 版头↓ */
div#container-wrap {
     background-image: none;
}
div#header {
    height: 12rem;
    background-image: none;
}

/* 钟表倒转logo动画↓ */
div#extra-div-1::before {
    content: "";
    background: url('http://scpsandboxcn.wikidot.com/local--files/collab:mayca/logo_时间轰炸基准E9E9EB');
    animation:rotateImg 5s linear infinite;
}
div#extra-div-1::after {
    content: "";
    background: url('http://scpsandboxcn.wikidot.com/local--files/collab:mayca/logo_时间轰炸时针E9E9EB');
    animation:rotateImg 30s linear infinite;
}
div#extra-div-2::before {
    content: "";
    background: url('http://scpsandboxcn.wikidot.com/local--files/collab:mayca/logo_时间轰炸分针E9E9EB');
    animation:rotateImg 3s linear infinite;
}
div#extra-div-2::after {
    content: "";
    background: url('http://scpsandboxcn.wikidot.com/local--files/collab:mayca/logo_时间轰炸秒针E9E9EB');
    animation:rotateImg 0.3s linear infinite;
}
div#extra-div-1::before, div#extra-div-1::after, div#extra-div-2::before, div#extra-div-2::after {
    height: 164px;
    width: 80%;
    top: 0;
    left: 10%;
    position: absolute;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 50% 0%;
    z-index: -1;
    vertical-align: middle;
}
@keyframes rotateImg {
    0% {transform: rotate(0deg);}
    100% {transform: rotate(-360deg);}
}
#header h1, #header h2 { margin-left: 0; float: none; text-align: center; }
#header h1 { padding-top: 4rem; }
#header h2 { margin-top: 0.3rem; }
#header h1 span, #header h2 span { font-size: 0; display: none; }
#header h1 a::before, #header h2::before {
    color: #E9E9EB;
    font-family: 'Josefin Sans', '黑体', sans-serif;
    text-shadow: none;
}
#header h1 a::before {
    content: var(--header-title, "基金会时间部队");
    font-weight: 300;
    font-size: 1em;
    text-shadow: -1.5px -1.5px 0 #43506C, 1.5px -1.5px 0 #43506C, -1.5px 1.5px 0 #43506C, 1.5px 1.5px 0 #43506C, -1.5px 0 0 #43506C, 1.5px 0 0 #43506C, 0 1.5px 0 #43506C, 0 -1.5px 0 #43506C;
}
#header h2::before {
    content: var(--header-subtitle, "[未解─未知─未有]");
    font-weight: 600;
    font-size: 1.22em;
}

/* 账户样式↓ */
#login-status {
    color: transparent;
    transition: color 0.5s ease;
}
#login-status a {
    color: #EF4B4C;
}
#login-status ul a, #account-options {
    color: #E9E9EB;
    background: #43506C;
}
#login-status ul a:hover {
    color: #EF4B4C;
}
#login-status .printuser {
    color: #E9E9EB;
    opacity: 0;
    right: -3rem;
    transition: opacity 0.3s ease, right 0.5s ease;
    position: relative;
    z-index: -1;
}
#login-status:hover {
    color: #E9E9EB;
    transition: color 0.5s ease;
}
#login-status:hover .printuser {
    opacity: 1;
    right: 0;
    transition: opacity 0.5s ease, right 0.3s ease;
}

#account-topbutton {
    border: solid 1px #EF4B4C;
}

#footer, #footer a {
    background: transparent;
    color: #E9E9EB;
}
#license-area {
     color: #E9E9EB;
}

/* 搜索栏↓ */
#search-top-box {
    top: 2.2rem!important;
    right: 8px;
}
#search-top-box-form > input[type=submit] {
    border: solid 1px #E9E9EB;
    background: #2A3853!important;
    box-shadow: none;
    border-radius: 0;
    color: #E9E9EB;
    transition: color 0.15s linear;
}
#search-top-box-form input[type=submit]:hover {
    border: solid 1px #EF4B4C;
    box-shadow: none;
    color: #EF4B4C;
}
#search-top-box-form > input[type=text] {
    border: solid 1px #E9E9EB;
    background: #2A3853!important;
    box-shadow: none;
    border-radius: 0;
    color: #E9E9EB;
    opacity: 0;
    right: -3rem;
    transition: opacity 0.3s ease, right 0.5s ease;
    position: relative;
    z-index: -1;
}
#search-top-box-form:hover > input[type=text] {
    opacity: 1;
    right: 0;
    transition: opacity 0.5s ease, right 0.3s ease;
}

/* 顶栏↓ */
#top-bar {
     top: 12rem;
     display: flex;
     justify-content: center;
     right: 0;
}
#top-bar, #top-bar a {
     color: #E9E9EB;
     transition: color 0s;
}
#top-bar ul li ul {
    border-color: #EF4B4C;
    overflow: hidden;
}
#top-bar ul li.sfhover ul li a,
#top-bar ul li:hover ul li a {
   border-top-color: #43506C;
}
#top-bar ul li.sfhover a,
#top-bar ul li:hover a {
    background: #2A3853;
    color: #E9E9EB;
}
#top-bar ul li.sfhover a:hover,
#top-bar ul li:hover a:hover {
    background: #2A3853;
    color: #EF4B4C;
    transition: color 0.2s linear;
}

/* 侧栏↓ */
div#side-bar{
    background: #2A3853;
    clear: both;
    padding: .8em;
    border-radius: 0;
    box-shadow: none;
    overflow-x: hidden;
}

#side-bar .heading{
    color: #E9E9EB;
    font-family: 'Josefin Sans', '黑体', sans-serif;
    font-size: 0.94rem;
    border-bottom: solid 1px #E9E9EB;
}
#side-bar .side-block {
    border: transparent;
    border-radius: 0;
    box-shadow: none;
    background-color: #2A3853 !important;
}
.side-block .menu-item > .image {
    display: none;
}

#side-bar .collapsible-block-folded {
    background: none;
}
#side-bar .collapsible-block-link {
    margin-left: 0;
}
#side-bar .collapsible-block-unfolded-link {
    border-bottom: solid 1px #E9E9EB;
    padding-left: 15px;
}
#side-bar .collapsible-block-unfolded-link .collapsible-block-link,
#side-bar .collapsible-block-unfolded-link .collapsible-block-link:hover {
    color: #E9E9EB;
    font-family: 'Josefin Sans', '黑体', sans-serif;
    font-size: 0.94rem;
}

#top-bar div.open-menu a {
    border-radius: 0;
    box-shadow: none;
    color: #EF4B4C;
    background-color: #2A3853;
    border: solid 1px #2A3853;
}
/* 小于767px↓ */
@media (max-width: 767px) {
    #main-content {
        padding: 0;
        margin: 0 5%;
        border-left: none;
    }
    #page-title {
        margin-top: 0.7em;
    }
    #side-bar {
        background-color: #2A3853;
        left: -18.6em;
    }
    #side-bar:target {
        border: none;
        box-shadow: none;
    }
    #side-bar .close-menu {
        transition: width 0.5s ease-in-out 0.1s, opacity 1s ease-in-out 0s;
        display: block;
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0;
        right: 0;
        background: rgba(0,0,0,0.3);
        background-position: 18.6em 50%;
        z-index: -1;
        opacity: 0;
        pointer-events: none;
    }
    #side-bar:target .close-menu {
        width: calc(100% - 18.6em);
        right: 0;
        left: auto;
        opacity: 1;
        pointer-events: auto;
    }
    #side-bar:target .close-menu:hover {
        background: unset;
    }
    #page-content > hr, #page-content > .list-pages-box > .list-pages-item > hr {
        margin: 3em -5.5%;
    }
    #side-bar {
        top: 0;
    }
    #side-bar .heading,
    #side-bar .collapsible-block-folded,
    #side-bar .collapsible-block-unfolded-link {
        padding-left: 1em;
        margin-left: -1em;
    }
    #search-top-box {
        top: 107px;
    }
}

/* tab块↓ */
/* 基本样式 ↓*/
.yui-navset .yui-nav a,.yui-navset .yui-navset-top .yui-nav a{background-color:inherit;background-image:inherit}.yui-navset .yui-nav a:hover,.yui-navset .yui-nav a:focus{background:inherit;text-decoration:inherit}.yui-navset .yui-nav .selected a,.yui-navset .yui-nav .selected a:focus,.yui-navset .yui-nav .selected a:hover{color:inherit;background:inherit}.yui-navset .yui-nav,.yui-navset .yui-navset-top .yui-nav{border-color:inherit}.yui-navset li{line-height:inherit}
/* 自定义tab↓ */
.yui-navset .yui-nav,
.yui-navset .yui-navset-top .yui-nav {
     display: flex;
     flex-wrap: wrap;
     width: calc(100% - .125rem);
     margin: 0 auto;
     border-color: #E9E9EB;
     box-shadow: none;
}
.yui-navset .yui-nav a,
.yui-navset .yui-navset-top .yui-nav a {
     color: #E9E9EB;
     font-weight: bold;
     background-color: #2A3853;/* ←tab未选中背景色 */
     border: unset;
     box-shadow: none;
     box-shadow: none;
     transition: background-color 0.15s linear;
}
.yui-navset .yui-nav a:hover, .yui-navset .yui-nav a:focus {
     color: #2A3853;
     background-color: #E9E9EB;/* ←tab已选中背景色 */
}
.yui-navset .yui-nav li,
.yui-navset .yui-navset-top .yui-nav li {
     position: relative;
     display: flex;
     flex-grow: 2;
     max-width: 100%;
     margin: 0;
     padding: 0;
     color: #E9E9EB;
     background-color: #2A3853;
     border-color: transparent;
     box-shadow: none;
}
.yui-navset .yui-nav li a,
.yui-navset-top .yui-nav li a,
.yui-navset-bottom .yui-nav li a {
     display: flex;
     align-items: center;
     justify-content: center;
     width: 100%;
}
.yui-navset .yui-nav li em {
     border: unset;
}
.yui-navset .yui-nav a em,
.yui-navset .yui-navset-top .yui-nav a em {
     padding: 0.35em 0.75em;
     text-overflow: ellipsis;
     overflow: hidden;
     white-space: nowrap;
}
.yui-navset .yui-nav .selected,
.yui-navset .yui-navset-top .yui-nav .selected {
     flex-grow: 2;
     margin: 0;
     padding: 0;
     background-color: #E9E9EB;/* ←tab未选中背景色 */
}
.yui-navset .yui-nav .selected a,
.yui-navset .yui-nav .selected a em {
     border: none;
}
.yui-navset .yui-nav .selected a {
     width: 100%;
     color: #2A3853;
     font-weight: bold;
}
.yui-navset .yui-nav .selected a:focus,
.yui-navset .yui-nav .selected a:active {
     color: #2A3853;
     background-color: #E9E9EB;
}
.yui-navset .yui-content {
    background-color: #2A3853;
    box-shadow: none;
}
.yui-navset .yui-content,
.yui-navset .yui-navset-top .yui-content {
     padding: 0.5em;
     border: none;
}

/* tab切换动画↓（by Croquembouc） */
.yui-navset .yui-content > div {
    display: block;
    top: 0;
    overflow: hidden;
    transform-origin: 0 0;
}
#page-content .yui-navset .yui-content > div[style*="none"] {
    display: block !important;
    flex: 0;
    max-height: 0;
    padding: 0 0.5em;
    border-width: 0;
    /* 以下过渡将影响tab-disappear */
    transition: padding 0s linear 0.5s,
          border-width 0s linear 0.5s,
          flex 0.5s cubic-bezier(.18,.51,.54,.9) 0s;
    animation: tab-disappear 0.5s ease-in-out 0s 1 both;
}
#page-content .yui-navset .yui-content > div[style*="block"] {
    display: block !important;
    flex: 1;
    max-height: 9999rem;
    /* The following transition affects the one that APPEARS */
    transition: padding 0s linear 0.5s,
          border-width 0s linear 0.5s,
          flex 0.5s cubic-bezier(.18,.51,.54,.9) 0.5s;
    animation: tab-appear 0.5s ease-in-out 0.5s 1 both;
}
@keyframes tab-disappear {
    0% { max-height: 9999rem; opacity: 1; }
    1% { max-height: 100vh; }
    100% { max-height: 0; opacity: 0; }
}
@keyframes tab-appear {
    0% { max-height: 0; opacity: 0; }
    99% { max-height: 100vh; }
    100% { max-height: 9999rem; opacity: 1; }
}

/* 信息栏↓ */
body {
     --barColour: #2A3853;
     --linkColour: #E9E9EB;
}
.info-container .collapsible-block-content {
     padding: 0 0.5em 30px;
}
.info-container .collapsible-block-content .wiki-content-table {
     width: 100%;
}

/* 信息栏补丁↓（by Monkatraz ）*/
#page-content .info-container .collapsible-block-folded, #page-content .info-container .collapsible-block-unfolded-link {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
    box-shadow: none;
}
#page-content .info-container .collapsible-block-link::before, #page-content .info-container .collapsible-block-unfolded-link::before {
    content: "";
    display: none;
}
#page-content .info-container .collapsible-block-content::after {
    display: none;
}

/* 著作信息块↓ */
#page-content .creditRate {
    margin: unset;
    margin-top: 4px;
    margin-bottom: 4px;
    margin-right: 3px;
}
#page-content .rate-box-with-credit-button {
    background-color: #2A3853;
    border: solid 2px #2A3853;
    border-radius: 0;
    box-shadow: 3px 0px 0px 0px #EF4B4C, -3px 0px 0px 0px #EF4B4C;
}
#page-content .rate-box-with-credit-button .creditButton p a {
    border-left-color: transparent;
}
#page-content .rate-box-with-credit-button .page-rate-widget-box .cancel {
    border-radius: 0;
}
#page-content .rate-box-with-credit-button .page-rate-widget-box .rate-points {
    border-left: 0;
}
.rate-box-with-credit-button .page-rate-widget-box .cancel a:hover {
    border-radius: 0;
}
#page-content .rate-box-with-credit-button .fa-info {
     color: #E9E9EB;
}
#page-content .rate-box-with-credit-button .fa-info:hover {
     color: #EF4B4C;
}
#page-content .creditButtonStandalone p a {
    background-color: #2A3853;
    border: solid 2px #2A3853;
    border-radius: 0;
    box-shadow: 3px 0px 0px 0px #EF4B4C;
    color: #E9E9EB;
}
#page-content .creditButtonStandalone p a:hover {
    color: #EF4B4C;
}
#page-content .modalbox {
     background: #43506C !important;
     color: #E9E9EB;
     box-shadow: none;
}
.close-credits,
.credit-back {
    filter: grayscale(100%) invert(100%) contrast(275%);
}

/* 评分模块↓ */
.page-rate-widget-box {
     margin: unset;
     border-radius: 0;
     border: solid 2px #2A3853;
     box-shadow: 3px 0px 0px 0px #EF4B4C, -3px 0px 0px 0px #EF4B4C;
     background-color: #2A3853;
     margin-top: 4px;
     margin-bottom:4px;
     margin-right: 3px;
}
.page-rate-widget-box .rate-points {
    background-color: #2A3853 !important;
    border: none;
    color: #E9E9EB !important;
    text-transform: capitalize;
}
.page-rate-widget-box .rateup,
.page-rate-widget-box .ratedown {
    background-color: #2A3853;
    border-top: none;
    border-bottom: none;
}
.page-rate-widget-box .rateup a,
.page-rate-widget-box .ratedown a {
    background: transparent;
    color: #E9E9EB;
}
.page-rate-widget-box .rateup a:hover,
.page-rate-widget-box .ratedown a:hover {
    background: #2A3853;
    color: #EF4B4C;
}
.page-rate-widget-box .cancel {
    background: transparent;
    background-color: #2A3853;
    border: none;
}
.page-rate-widget-box .cancel a {
    color: #E9E9EB;
}
.page-rate-widget-box .cancel a:hover {
    background: #2A3853;
    color: #EF4B4C;
}

/* 页面元素↓ */
.page-source, tt {
    font-family: "Fira Code", '幼圆', monospace;
    font-size: 0.87rem;
}
.code pre, .code p, .code {
    font-family: "Fira Code", '幼圆', monospace;
    font-size: 0.87rem;
    color: #2A3853;
}
h1 {
    color: #E9E9EB;
    font-family: 'Josefin Sans', '黑体', sans-serif;
    font-weight: bold;
}
h2, h3, h4, h5, h6 {
    color: #E9E9EB;
    font-family: 'Josefin Sans', '黑体', sans-serif;
    font-weight: bold;
}
#page-title {
    color: #E9E9EB;
    font-family: 'Josefin Sans', '黑体', sans-serif;
    font-size: 1.65rem;
    text-align: center;
    border-color: #E9E9EB;
}

/* 链接触发↓ */
a, a.newpage, a:visited,
#side-bar a:visited {
    color: #EF4B4C;
    transition: color 0.15s linear;
}
a:hover, a.newpage:hover, a:visited:hover, #side-bar a:visited:hover {
    color: #E9E9EB;
    text-decoration: none;
    background-color: #EF4B4C;
}
a.newpage { filter: hue-rotate(180deg); }
/* 边栏媒体、可折叠文件、ACS、信息按钮和Ayers模块的补丁，使链接不会被覆盖↓ */
#page-content .collapsible-block-folded a:hover, #page-content .collapsible-block-unfolded-link a:hover, #page-content .rate-box-with-credit-button .fa-info:hover, #side-bar .side-block.media a:hover, .danger-diamond a:hover {
    background: transparent;
}
.info-container .collapsible-block-folded .collapsible-block-link, .info-container .collapsible-block-link {
    background: var(--linkColour) !important;
}
hr {
    background-color: #E9E9EB;
}
blockquote, div.blockquote, #toc {
    background-color: #2A3853;
    border: solid 2px #43506C;
    box-shadow: -3px 0px 0px -0.1px #EF4B4C, 3px 0px 0px -0.1px #EF4B4C;
}
.code {
    background-color: #E9E9EB;
    border: solid 3px #43506C;
    box-shadow: none;
}
.scp-image-block {
    border: solid 8px #2A3853;
    border-bottom: solid 0px #2A3853;
    box-shadow: 0px 0.26rem 0px 0px #E9E9EB;
    box-sizing: border-box;
}
.scp-image-block .scp-image-caption {
    background-color: #2A3853;
    border: solid 4px #2A3853;
    color: #E9E9EB;
    font-size: 0.84rem;
}
.scp-image-block.block-left { margin-left: 0; }
.scp-image-block.block-right { margin-right: 0; }
@media (max-width: 540px) {
    .scp-image-block.block-left,
    .scp-image-block.block-right {
        float: none;
        clear: both;
        margin-left: auto;
        margin-right: auto;
    }
}
#page-content .wiki-content-table tr th {
    border: solid 1px #E9E9EB;
    color: #2A3853;
    background-color: #E9E9EB;/* ←表格标题边框 */
}
#page-content .wiki-content-table tr td {
    border: solid 1px #E9E9EB;/* ←表格内容边框 */
}

/* 折叠块↓ */
#page-content .collapsible-block-folded, #page-content .collapsible-block-unfolded-link {
    background: #2A3853;
    transition: box-shadow 0.25s linear;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    padding-left: 1rem;
    padding-right: 1rem;
    width: min-content;
    white-space: nowrap;
    overflow: hidden;
    margin: auto;
}
#page-content .collapsible-block-link {
    text-decoration: none;
    color: #E9E9EB;
    font-weight: bold;
}
#page-content .collapsible-block-unfolded .collapsible-block-content {
    max-height: 0;
    animation: tab-appear 0.5s ease-in-out 0.5s 1 both;
}
#page-content .collapsible-block-folded:hover,
#page-content .collapsible-block-folded:hover + .collapsible-block-unfolded .collapsible-block-unfolded-link {
    box-shadow: 5px 0px 0px 0px #EF4B4C, -5px 0px 0px 0px #EF4B4C;
    transition: box-shadow 0.25s linear;
}
#page-content .collapsible-block-folded, #page-content .collapsible-block-unfolded-link {
    margin-top: 10px;
    margin-bottom: 10px;
}

/* 选中元素↓ */
::selection {
    background: #E9E9EB;
    color: #43506C;
}

/* 脚注块↓ */
.hovertip {
    font-size: 0.9rem;
    background-color: #2A3853 !important;
    border: solid 1px #EF4B4C !important;
}
.footnotes-footer {
    background-color: #2A3853;
    padding-left: 1.4rem;
    padding-right: 1.4rem;
    padding-bottom: 1.5rem;
    box-shadow: -0.24rem 0px 0px 0px #E9E9EB;
}
.footnotes-footer .title {
    color: #E9E9EB;
}
.footnote .f-footer, .equation .e-footer, .reference .r-footer {
    display: none;
}

/* Tags↓ */
#main-content .page-tags a {
    margin-top: 0.18rem;
}
.page-tags span {
    border-top: 1px solid #E9E9EB;
}

/* 页面弹窗↓ */
.owindow {
    background-color: #2A3853;
    border-color: #E9E9EB;
}
.owindow .modal-header {
    background-color: #2A3853;
}
.owindow .modal-body img {
    background-color: transparent !important;
}
.owindow .title {
    background-color: #2A3853;
    color: #E9E9EB;
    border-bottom: 1px solid #2F333C;
}
.owindow .button-bar a {
    background-color: #21252E;
    border-color: #E9E9EB;
    color: #E9E9EB;
}
.owindow .button-bar a:hover {
    background-color: #E9E9EB;
}

/* 编辑按钮↓ */
.buttons .btn {
    background-color: #2A3853;
    border-color: #E9E9EB;
    color: #E9E9EB;
    padding: 3px 5px;
}
.buttons .btn:hover {
    background-color: #E9E9EB;
    color: #2A3853;
}

/* 编辑锁信息块↓ */
#lock-info {
    background-color: #2A3853;
    border-color: #E9E9EB;
}

/* 页面来源、评级等的关闭按钮↓ */
a.action-area-close:hover {
    background-color: #2A3853;
}

/* 页面历史记录↓ */
.pager .current {
    background-color: #E9E9EB;
    border-color: #E9E9EB;
}

/* Sidebox移动端优化↓（courtesy of Woed） */
@media (max-width: 1290px) {
   .sidebox {
        width: auto;
        max-width: 65vw!important;
        border: none;
        padding-left: 0.4rem; padding-right: 0.4rem;
        top: 0.75rem;
        right: calc(((100vw - 45.8rem)/2) * -1);
        left: initial;
        -webkit-clip-path: inset(-0.125rem -0.25rem 0 calc(100% - 0.85rem));
        clip-path: inset(-0.125rem -0.25rem 0 calc(100% - 0.85rem));
        -webkit-transition: color 0.2s ease-in-out 0.1s, -webkit-box-shadow 0.5s ease-in-out 0.1s, -webkit-clip-path 0.5s ease-in-out 0.1s;
        transition: color 0.2s ease-in-out 0.1s, -webkit-box-shadow 0.5s ease-in-out 0.1s, -webkit-clip-path 0.5s ease-in-out 0.1s;
        -o-transition: color 0.2s ease-in-out 0.1s, box-shadow 0.5s ease-in-out 0.1s, clip-path 0.5s ease-in-out 0.1s;
        transition: color 0.2s ease-in-out 0.1s, box-shadow 0.5s ease-in-out 0.1s, clip-path 0.5s ease-in-out 0.1s;
        transition: color 0.2s ease-in-out 0.1s, box-shadow 0.5s ease-in-out 0.1s, clip-path 0.5s ease-in-out 0.1s, -webkit-box-shadow 0.5s ease-in-out 0.1s, -webkit-clip-path 0.5s ease-in-out 0.1s;
        overflow: visible;
    }
    .sidebox::before, .sidebox::after {
        content: "";
        position: absolute;
        right: 0;
    }
    .sidebox::before {
        top: calc(50% - 0.75rem);
        width: 0;
        height: 0;
        border-top: 0.75rem solid transparent;
        border-bottom: 0.75rem solid transparent;
        border-right: 0.75rem solid #E9E9EB;
        transition: border 0.1s ease-in-out 0.1s;
        z-index: 10;
    }
    .sidebox::after {
        top: 0;
        max-width: 0.75rem;
        width: 100%;
        height: 100%;
        box-shadow: 0.15rem 0 0 0 #E9E9EB;
        max-height: calc(100vh - 18rem);
        background-color: #2A3853;
        z-index: -1;
        transition: box-shadow 0.5s ease-in-out 0.1s, max-width 0.5s ease-in-out 0.1s;
    }
    .sidebox > * {
        opacity: 0;
        -webkit-transition: opacity 0.2s ease-in-out 0.2s;
        -o-transition: opacity 0.2s ease-in-out 0.2s;
        transition: opacity 0.2s ease-in-out 0.2s;
    }
    .sidebox:hover {
        overflow: visible;
        -webkit-clip-path: inset(-0.125rem -0.25rem 0 0);
        clip-path: inset(-0.125rem -0.25rem 0 0);
        -webkit-transition: color 0.5s ease-in-out 0.2s, right 0.5s ease-in-out 0.1s, -webkit-clip-path 0.5s ease-in-out 0.1s, -webkit-box-shadow 0.5s ease-in-out 0.1s;
        transition: color 0.5s ease-in-out 0.2s, right 0.5s ease-in-out 0.1s, -webkit-clip-path 0.5s ease-in-out 0.1s, -webkit-box-shadow 0.5s ease-in-out 0.1s;
        -o-transition: color 0.5s ease-in-out 0.2s, right 0.5s ease-in-out 0.1s, clip-path 0.5s ease-in-out 0.1s, box-shadow 0.5s ease-in-out 0.1s;
        transition: color 0.5s ease-in-out 0.2s, right 0.5s ease-in-out 0.1s, clip-path 0.5s ease-in-out 0.1s, box-shadow 0.5s ease-in-out 0.1s;
        transition: color 0.5s ease-in-out 0.2s, right 0.5s ease-in-out 0.1s, clip-path 0.5s ease-in-out 0.1s, box-shadow 0.5s ease-in-out 0.1s, -webkit-clip-path 0.5s ease-in-out 0.1s, -webkit-box-shadow 0.5s ease-in-out 0.1s;
    }
    .sidebox:hover::before {
        border-top: 0 solid transparent;
        border-bottom: 0 solid transparent;
    }
    .sidebox:hover::after {
        box-shadow: 0 -0.125rem 0 0 #E9E9EB;
        right: 0;
        max-width: 100%;
    }
    .sidebox:hover > * {
        opacity: 1;
    }
}
@media (max-width:768px) {
    .sidebox, .sidebox:hover {
        right: calc(((100vw - (100% - 3rem))/2) * -1 + 1.9rem);
    }
}