@import url('https://fonts.googleapis.com/css?family=Alegreya');
@import url('https://fonts.googleapis.com/css?family=Lato&display=swap');
@import url('https://fonts.googleapis.com/css?family=IBM+Plex+Mono&display=swap');


/*
    Ethics Committee Theme
    [2020 Wikidot Theme]
    Theme by Laminade.
    Uses code by Stormbreath and Woedenaz, credit for those portions of code goes to them.
    Logo licensed under CC BY-SA 3.0.
*/

@supports(--css:variables) {

:root {
/* Intro */
    --theme-base: "nuscp"
    --theme-id: "ethics-committee-theme"
    --theme-name: "Ethic's Committee Theme";  
    --body-font: 'Lato', sans-serif;
    --title-font: 'Lato', sans-serif;
    --mono-font: 'IBM Plex Mono', monospace;


/* Header */
    --logo-image: url("http://scp-sandbox-3.wdfiles.com/local--files/component%3Aethics-committee-theme-viro/fas");
    --header-title: "The Ethics Committee";
    --header-subtitle: "FIAT JUSTITIA, ET PEREAT MUNDUS";
    --header-gradient-color-bottom: 75, 155, 181;
    --header-gradient-color-middle: 75, 167, 181;
    --header-gradient-color-top: 154, 226, 237;
    --diagonal-stripes: unset;
    --gradient-header: linear-gradient(to top,
          rgb(var(--header-gradient-color-bottom)) 0%,
          rgb(var(--header-gradient-color-middle)) 70%,
          rgb(var(--header-gradient-color-top)) 100%);

/* Colors */
    --pale-gray-monochrome: 204, 222, 221; /* EC's Quote Color (Light Blue)*/
    --light-pale-gray-monochrome: 244, 244, 244;
    --white-monochrome: 252, 252, 252;
    --gray-monochrome: 75, 75, 75;
    --swatch-menubg-light-color: 244, 244, 244;
    --bright-accent: 17, 196, 247;
    /* bright blue*/
    --medium-accent: 16, 178, 187;
    /* medium red */
    --dark-accent: 16, 139, 187;
    /* dark red */
    --newpage-color: 16, 139, 187; /* pale blue */

    --dark-gray-monochrome: var(--gray-monochrome);
    --swatch-topmenu-bg-color: var(--gray-monochrome);
    --swatch-topmenu-border-color: var(--gray-monochrome);
    --rating-module-button-color: var(--black-monochrome);
    --rating-module-text-color: var(--black-monochrome);
    --pale-accent: var(--dark-accent);  /* Visited Link Color*/
    --barColour: var(--medium-accent); /* Ayer's Info Module */
}

    --header-height-on-desktop: 11rem;
    --header-height-on-mobile: 7.5rem;
    --topbar-height-on-desktop: 1.875rem;
    --topbar-height-on-mobile: 3.5rem;

hr {
    background: none; 
    border-bottom: none;
    border-top: dashed 1px rgb(var(--dark-accent)) !important;
}

/* SIDE-BAR */

.page-rate-widget-box {
    background: linear-gradient(to top,
     rgba(var(--pale-gray-monochrome),1) 0%,
     rgba(var(--pale-gray-monochrome), 1) 100%);
    border-color: rgb(var(--gray-monochrome));
}
#page-content .rate-box-with-credit-button {
    background: linear-gradient(to top,
     rgba(var(--pale-gray-monochrome),1) 0%,
     rgba(var(--pale-gray-monochrome), 1) 100%);
    border-color: rgb(var(--gray-monochrome));
}
#page-content .rate-box-with-credit-button > .creditButton > p > a::before {
    background-color: rgb(var(--black-monochrome));
}

#page-content .rate-box-with-credit-button > .creditButton:hover {
    background: rgba(var(--bright-accent), 0.8);
}

#page-content .modalbox {
     background: rgb(var(--pale-gray-monochrome)) !important;
     color: rgb(var(--EC-text));
     border-radius: 0;
     box-shadow: 0 2px 6px rgba(var(--bright-accent), 0.5);
}

/* RECOLOR THE QUOTEBLOCK */
blockquote,
.blockquote {
    border-color: rgb(var(--dark-accent));
    background-color: rgb(var(--light-pale-gray-monochrome));
}

.code {
    border-color: rgb(var(--dark-accent));
}

#toc {
    border-color: rgb(var(--dark-accent));
    background-color: rgb(var(--light-pale-gray-monochrome));
    box-shadow: 0em 0.063em 0.125em rgba(0, 0, 0, 0.1);
    padding: 0 1em;
}

/* TRANSLATION BLOCK */
iframe.scpnet-interwiki-frame {
  filter: hue-rotate(140deg) brightness(150%);
  -webkit-filter: hue-rotate(140deg) brightness(150%);
}

/* RECOLOR THE TABLES */
#page-content .wiki-content-table tr th {background-color: rgb(var(--medium-accent)); color: white; border-color: rgb(var(--black-monochrome));}

/* TABS */
.yui-navset .yui-nav,
.yui-navset .yui-navset-top .yui-nav {
    border-color: rgb(var(--gray-monochrome));
    box-shadow: 0 calc(0.0625rem * 5) 0 0 rgb(var(--gray-monochrome));
}
 
.yui-navset .yui-nav a,
.yui-navset .yui-navset-top .yui-nav a {
    /* tab background */
    border-color: transparent! important;
}
 
.yui-navset .yui-nav a:hover,
.yui-navset .yui-nav a:focus {
    background-color: rgb(var(--dark-accent));
    color: rgb(var(--white-monochrome));
}
 
.yui-navset .yui-nav li,
.yui-navset .yui-navset-top .yui-nav li {
    background-color: rgb(var(--EC-body));
    border-color: transparent;
    box-shadow: 0 0 0 0.0625rem rgb(var(--medium-accent));
}
 
/* Selected Tab */
.yui-navset .yui-nav .selected,
.yui-navset .yui-navset-top .yui-nav .selected {
    background-color: rgb(var(--medium-accent));
}
 
.yui-navset .yui-nav .selected a:focus,
.yui-navset .yui-nav .selected a:active {
    background-color: rgb(var(--bright-accent));
    color: rgb(var(--dark-accent));
}
 
.yui-navset .yui-nav .selected a:hover {
    background-color: rgb(var(--EC-subtitle));
    color: rgb(var(--white-monochrome));
}
 
.yui-navset .yui-content {
    background-color: rgba(var(--EC-body),0.25);
    /* content background color */
}
 
.yui-navset .yui-content,
.yui-navset .yui-navset-top .yui-content {
    border-color: rgb(var(--gray-monochrome));
    /* content border */
}
 
.yui-navset-left .yui-content {
    border-left-color: rgb(var(--gray-monochrome));
    /* different border color */
}
 
    .yui-navset .yui-nav,
    .yui-navset .yui-navset-top .yui-nav {
     --box-shadow: rgb(var(--dark-accent));
     -webkit-box-shadow: 0 -webkit-calc(0.0625rem * 5) 0 0 var(--box-shadow);
     -moz-box-shadow: 0 -moz-calc(0.0625rem * 5) 0 0 var(--box-shadow);
     box-shadow: 0 calc(0.0625rem * 5) 0 0 var(--box-shadow);
    }
 
    .yui-navset .yui-nav li,
    .yui-navset .yui-navset-top .yui-nav li {
     --box-shadow: rgb(var(--dark-gray-monochrome));
     -webkit-box-shadow: 0 0 0 .0625rem var(--box-shadow);
     -moz-box-shadow: 0 0 0 .0625rem var(--box-shadow);
     box-shadow: 0 0 0 .0625rem var(--box-shadow);
     -webkit-transition: background-color 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
     -o-transition: background-color 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
     -moz-transition: background-color 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
     transition: background-color 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
     overflow: hidden;
    }
 
    .yui-navset .yui-nav .selected,
    .yui-navset .yui-navset-top .yui-nav .selected {
     background-color: rgb(var(--gray-monochrome));
    }
 
    .yui-navset .yui-nav .selected a,
    .yui-navset .yui-nav .selected a em {
     background-color: rgba(0, 0, 0, 0) !important;
    }
 
    .yui-navset .yui-nav *,
    .yui-navset .yui-nav *:hover {
     -webkit-transition:
     color 100ms cubic-bezier(0.4, 0, 0.2, 1),
     background-color 200ms cubic-bezier(0.4, 0, 0.2, 1);
     -o-transition:
     color 100ms cubic-bezier(0.4, 0, 0.2, 1),
     background-color 200ms cubic-bezier(0.4, 0, 0.2, 1);
     -moz-transition:
     color 100ms cubic-bezier(0.4, 0, 0.2, 1),
     background-color 200ms cubic-bezier(0.4, 0, 0.2, 1);
     transition:
     color 100ms cubic-bezier(0.4, 0, 0.2, 1),
     background-color 200ms cubic-bezier(0.4, 0, 0.2, 1);
    }
 
    .yui-navset .yui-nav li:hover * {
     color: rgb(var(--white-monochrome));
    }
 
    .yui-navset .yui-nav a:hover,
    .yui-navset .yui-nav a:focus {
     background-color: rgba(var(--dark-accent), 0.1);
    }
 
    .yui-navset .yui-nav a::before,
    .yui-navset .yui-nav .selected a::before {
     content: " ";
     width: 125%;
     height: 100%;
     position: absolute;
     top: 0;
     background-color: rgb(var(--dark-accent), 1);
     opacity: 1;
     z-index: 0;
     -webkit-clip-path: polygon(0.00% .00%, 100% 0, 90% 100%, 0 100%);
     clip-path: polygon(0.00% .00%, 100% 0, 90% 100%, 0 100%);
     -webkit-transform: translateX(-webkit-calc(-100% - 4rem));
     -moz-transform: translateX(-moz-calc(-100% - 4rem));
     -ms-transform: translateX(calc(-100% - 4rem));
     -o-transform: translateX(calc(-100% - 4rem));
     transform: translateX(calc(-100% - 4rem));
     -webkit-transition: -webkit-transform 500ms cubic-bezier(0.4, 0, 0.2, 1);
     transition: -webkit-transform 500ms cubic-bezier(0.4, 0, 0.2, 1);
     -o-transition: -o-transform 500ms cubic-bezier(0.4, 0, 0.2, 1);
     -moz-transition: transform 500ms cubic-bezier(0.4, 0, 0.2, 1), -moz-transform 500ms cubic-bezier(0.4, 0, 0.2, 1);
     -moz-transition: transform 500ms cubic-bezier(0.4, 0, 0.2, 1), -moz-transform 500ms cubic-bezier(0.4, 0, 0.2, 1);
     transition: transform 500ms cubic-bezier(0.4, 0, 0.2, 1);
     transition: transform 500ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 500ms cubic-bezier(0.4, 0, 0.2, 1), -moz-transform 500ms cubic-bezier(0.4, 0, 0.2, 1), -o-transform 500ms cubic-bezier(0.4, 0, 0.2, 1);
     transition: transform 500ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 500ms cubic-bezier(0.4, 0, 0.2, 1), -moz-transform 500ms cubic-bezier(0.4, 0, 0.2, 1), -o-transform 500ms cubic-bezier(0.4, 0, 0.2, 1);
     pointer-events: none
    }
 
    .yui-navset .yui-nav a:hover::before,
    .yui-navset .yui-nav a:focus::before,
    .yui-navset .yui-nav .selected a:hover::before {
     -webkit-transform: translateX(0);
     -moz-transform: translateX(0);
     -ms-transform: translateX(0);
     -o-transform: translateX(0);
     transform: translateX(0)
    }
 
 /* Topbar */
    #top-bar div.top-bar > ul > li:hover,
    #top-bar div.mobile-top-bar > ul > li:hover {
     background-color: rgb(var(--gray-monochrome));
    }
 
    #top-bar div.top-bar > ul > li > a,
    #top-bar div.mobile-top-bar > ul > li > a {
     color: rgb(var(--white-monochrome)) !important;
    }
 
    #top-bar div.top-bar > ul > li > a::before,
    #top-bar div.top-bar > ul > li > a::after,
    #top-bar div.mobile-top-bar > ul > li > a::before,
    #top-bar div.mobile-top-bar > ul > li > a::after {
     background-color: rgb(var(--dark-accent));
    }
 
    #top-bar div.top-bar > ul > li:hover > a,
    #top-bar div.top-bar > ul > li:hover > a,
    #top-bar div.top-bar > ul > li.sfhover > a,
    #top-bar div.top-bar > ul > li.sfhover > a,
    #top-bar div.mobile-top-bar > ul > li:hover > a,
    #top-bar div.mobile-top-bar > ul > li:hover > a,
    #top-bar div.mobile-top-bar > ul > li.sfhover > a,
    #top-bar div.mobile-top-bar > ul > li.sfhover > a {
     color: rgb(var(--white-monochrome)) !important;
    }
 
    #top-bar div.top-bar > ul > li > ul,
    #top-bar div.mobile-top-bar > ul > li > ul {
     background-color: rgb(var(--dark-gray-monochrome));
     background-image: var(--gradient-header);
     -webkit-box-shadow: inherit;
     -moz-box-shadow: inherit;
     box-shadow: inherit;
    }
 
    #top-bar div.top-bar > ul > li > ul,
    #top-bar div.mobile-top-bar > ul > li > ul,
    #top-bar div.top-bar > ul > li > ul > li,
    #top-bar div.mobile-top-bar > ul > li > ul > li {
     border-color: rgb(var(--light-gray-monochrome));
    }
 
    #top-bar div.top-bar > ul > li > ul > li > a,
    #top-bar div.mobile-top-bar > ul > li > ul > li > a {
     font-weight: 600;
    }
 
    #top-bar div.top-bar > ul > li > ul > li > a::before,
    #top-bar div.top-bar > ul > li > ul > li > ul > li > a::before,
    #top-bar div.top-bar > ul > li > ul > li > a:hover::before,
    #top-bar div.mobile-top-bar > ul > li > ul > li > a::before,
    #top-bar div.mobile-top-bar > ul > li > ul > li > ul > li > a::before,
    #top-bar div.mobile-top-bar > ul > li > ul > li > a:hover::before {
     background-color: rgb(var(--dark-accent));
    }