/* =====================
   Variables
   ===================== */

   :root {

    /* Fonts */
    --ui-font-primary: 'Inter';
    --ui-font-secondary: 'Poppins';

    /* Background */
    --ui-app-surface: #F1F3F7;
    --ui-surface: #FFFFFF;
    --ui-surface-alt: #F5F5F5;
    --ui-surface-hover: #EFEFEF;
    --ui-surface-disabled: #EFEFEF;

    /* Text */
    --ui-on-surface: #1B1D1C;
    --ui-on-surface-subtle: #666565;
    --ui-on-surface-neutral: #7F7F7F;
    --ui-on-surface-muted: #999999;
    --ui-on-surface-disabled: #AFAFAF;

    /* Border */
    --ui-border: #D4D4D5;
    --ui-border-alt: #AFAFAF;
    --ui-border-disabled: #EAE9E9;

    /* Popup */
    --ui-surface-popup: #FFFFFF;

    /* Scrollbars */
    --ui-scrollbar: rgba(0,0,0,.2);
    --ui-scrollbar-hover: rgba(0,0,0,.3);

    /* Primary */
    --ui-primary: #258B74;
    --ui-primary-hover: #23A98A;
    --ui-primary-active: #114438;
    --ui-on-primary: #FFFFFF;
    --ui-primary-subtle: #D9F5EF;
    --ui-primary-subtle-hover: #E5F8F4;
    --ui-primary-subtle-active: #9BD7C9;
    --ui-primary-on-subtle: #00644E;

    /* Secondary */
    --ui-secondary: #EAE9E9;
    --ui-secondary-hover: #D4D4D5;
    --ui-secondary-active: #AFAFAF;
    --ui-on-secondary: #666565;
    --ui-secondary-subtle: #EAE9E9;
    --ui-secondary-subtle-hover: #D4D4D5;
    --ui-secondary-subtle-active: #AFAFAF;
    --ui-secondary-on-subtle: #666565;

    /* Tertiary */
    --ui-tertiary: #434d57;
    --ui-tertiary-hover: #4e5a65;
    --ui-tertiary-active: #384049;
    --ui-on-tertiary: #FFFFFF;
    --ui-tertiary-subtle: #a4b7c2;
    --ui-tertiary-subtle-hover: #b7bfc8;
    --ui-tertiary-subtle-active: #9aa6b2;
    --ui-tertiary-on-subtle: #FFFFFF;

    /* Info */
    --ui-info: #3399CC;
    --ui-info-hover: #5CADDD;
    --ui-info-active: #1F5C7A;
    --ui-on-info: #FFFFFF;
    --ui-info-subtle: #E1F0F7;
    --ui-info-subtle-hover: #EAF5FA;
    --ui-info-subtle-active: #C1E0F0;
    --ui-info-on-subtle: #1F5C7A;

    /* Success */
    --ui-success: #29A052;
    --ui-success-hover: #3FAA64;
    --ui-success-active: #196031;
    --ui-on-success: #FFFFFF;
    --ui-success-subtle: #D4ECDC;
    --ui-success-subtle-hover: #E9F5ED;
    --ui-success-subtle-active: #BEE2CB;
    --ui-success-on-subtle: #196031;

    /* Warning */
    --ui-warning: #FFAB00;
    --ui-warning-hover: #FFBC33;
    --ui-warning-active: #996700;
    --ui-on-warning: #000000;
    --ui-warning-subtle: #FFF2D9;
    --ui-warning-subtle-hover: #FFF6E5;
    --ui-warning-subtle-active: #FFE6B2;
    --ui-warning-on-subtle: #996700;

    /* Error */
    --ui-error: #ED4A42;
    --ui-error-hover: #F16E68;
    --ui-error-active: #8E2C28;
    --ui-on-error: #FFFFFF;
    --ui-error-subtle: #FCE4E3;
    --ui-error-subtle-hover: #FDEDEC;
    --ui-error-subtle-active: #FAC8C6;
    --ui-error-on-subtle: #8E2C28;

    /* Dark */
    --ui-dark: #1B1D1C;
    --ui-dark-hover: #333333;
    --ui-dark-active: #222222;
    --ui-on-dark: #FFFFFF;
}

/* =====================
   Fonts
   ===================== */

/* Inter */
@font-face {
	font-family: 'Inter';
	src: url('fonts/inter/Inter-Light.woff2') format('woff2'),
		url('fonts/inter/Inter-Light.woff') format('woff');
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Inter';
	src: url('fonts/inter/Inter-LightItalic.woff2') format('woff2'),
		url('fonts/inter/Inter-LightItalic.woff') format('woff');
	font-weight: 300;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'Inter';
	src: url('fonts/inter/Inter-Regular.woff2') format('woff2'),
		url('fonts/inter/Inter-Regular.woff') format('woff');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Inter';
	src: url('fonts/inter/Inter-Italic.woff2') format('woff2'),
		url('fonts/inter/Inter-Italic.woff') format('woff');
	font-weight: normal;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'Inter';
	src: url('fonts/inter/Inter-Medium.woff2') format('woff2'),
		url('fonts/inter/Inter-Medium.woff') format('woff');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Inter';
	src: url('fonts/inter/Inter-MediumItalic.woff2') format('woff2'),
		url('fonts/inter/Inter-MediumItalic.woff') format('woff');
	font-weight: 500;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'Inter';
	src: url('fonts/inter/Inter-SemiBold.woff2') format('woff2'),
		url('fonts/inter/Inter-SemiBold.woff') format('woff');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Inter';
	src: url('fonts/inter/Inter-SemiBoldItalic.woff2') format('woff2'),
		url('fonts/inter/Inter-SemiBoldItalic.woff') format('woff');
	font-weight: 600;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'Inter';
	src: url('fonts/inter/Inter-Bold.woff2') format('woff2'),
		url('fonts/inter/Inter-Bold.woff') format('woff');
	font-weight: bold;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Inter';
	src: url('fonts/inter/Inter-BoldItalic.woff2') format('woff2'),
		url('fonts/inter/Inter-BoldItalic.woff') format('woff');
	font-weight: bold;
	font-style: italic;
	font-display: swap;
}

/* Poppins */
@font-face {
	font-family: 'Poppins';
	src: url('fonts/poppins/Poppins-Light.woff2') format('woff2'),
		url('fonts/poppins/Poppins-Light.woff') format('woff');
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Poppins';
	src: url('fonts/poppins/Poppins-Regular.woff2') format('woff2'),
		url('fonts/poppins/Poppins-Regular.woff') format('woff');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Poppins';
	src: url('fonts/poppins/Poppins-Medium.woff2') format('woff2'),
		url('fonts/poppins/Poppins-Medium.woff') format('woff');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Poppins';
	src: url('fonts/poppins/Poppins-SemiBold.woff2') format('woff2'),
		url('fonts/poppins/Poppins-SemiBold.woff') format('woff');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Poppins';
	src: url('fonts/poppins/Poppins-Bold.woff2') format('woff2'),
		url('fonts/poppins/Poppins-Bold.woff') format('woff');
	font-weight: bold;
	font-style: normal;
	font-display: swap;
}

/* Base */
*{box-sizing:border-box;outline:0}
html,body{height:100%;margin:0;padding:0;border:0;vertical-align:baseline}
body{line-height:1.5;background-color:var(--ui-app-surface);font-family:var(--ui-font-primary);font-weight:400;font-size:13px;color:var(--ui-on-surface);-webkit-overflow-scrolling:touch}
body,.smooth-container{scroll-behavior:smooth}
body.iframe-content{background-color:var(--ui-surface)}

/* Scrollbars */
::-webkit-scrollbar{width:11px;height:11px;background:var(--ui-surface)}
::-webkit-scrollbar-corner{background:var(--ui-surface)}
::-webkit-scrollbar-thumb{border-radius:10px;border:3px solid var(--ui-surface);background:var(--ui-scrollbar)}
::-webkit-scrollbar-thumb:hover{background:var(--ui-scrollbar-hover)}

/* Typography */
h1,h2,h3,h4,h5,h6{font-family:var(--ui-font-secondary);font-weight:600}
h1{font-size:20px;color:var(--ui-on-surface);margin:0}
h2{font-size:16px;color:var(--ui-on-surface)}
p{line-height:1.5;margin:15px 0}
strong{font-weight:600}

/* Links */
a{color:var(--ui-primary);text-decoration:none;cursor:pointer}
a:hover,a:focus{color:var(--ui-primary-hover);text-decoration:none}
a:active{color:var(--ui-primary-active)}

/* Buttons */
.btn{background-color:var(--ui-primary);border:none;border-radius:8px;color:var(--ui-on-primary);padding:8px 10px;display:inline-block;font-size:13px}
.btn:hover,.btn:focus{background-color:var(--ui-primary-hover);color:var(--ui-on-primary)}
.btn:active{background-color:var(--ui-primary-active);color:var(--ui-on-primary)}

/* Alert */
.alert{border-radius:8px;color:var(--ui-error-on-subtle);background-color:var(--ui-error-subtle);border:1px solid var(--ui-error-subtle);padding:12px}

/* HR */
hr{margin:20px 0;border:0;border-top:1px solid var(--ui-border)}

/* Images */
.img-fluid{max-width:100%;height:auto}
.img-thumbnail{background:var(--ui-surface);border:1px solid var(--ui-border);padding:5px;border-radius:8px;max-width:1200px}

/* Floats */
.float-right{float:right}
.float-left{float:left}

/* Arrows */
.arrow-up{position:relative;display:inline-block;width:0;height:0;top:0;border-left:10px solid transparent;border-right:10px solid transparent;border-bottom:10px solid var(--ui-primary)}

/* Code */
code{background: rgba(255,204,153,.5)}
pre{background:rgba(51,153,204,.1);padding:20px;overflow:auto}
pre .blue,code .blue{color:#00f}
pre .aqua,code .aqua{color:#2b91af}
pre .red,code .red{color:#a31515}

/* Header */
header{display:block;width:100%;position:fixed}
header .header-top{background-color:var(--ui-primary);height:62px}
header .header-top .logo{margin:15px 0 0 20px;width:173px;height:31px}
header .header-bottom{display:block;float:left;width:100%;background-color:var(--ui-surface);border-bottom:1px solid var(--ui-border);overflow:hidden}
header .header-page-title{height:46px;text-decoration:none;display:block;float:left;position:relative;font-size:14px;color:var(--ui-primary-on-subtle);font-family:var(--ui-font-secondary);font-weight:600;background-color:var(--ui-primary-subtle);padding:13px 0 16px 20px}
header .header-page-title:after{left:100%;top:50%;border:solid transparent;content:" ";height:0;width:0;position:absolute;pointer-events:none;border-left-color:var(--ui-primary-subtle);border-top-color:var(--ui-primary-subtle);border-width:24px 15px;margin-top:-23px}
header .header-page-sub-title{font-size:13px;color:var(--ui-on-surface-subtle);display:block;float:left;padding:14px 0 0 30px}

/* Nav */
nav{display:block;float:left;width:250px;height:calc(100% - 189px);overflow:auto;position:fixed}
nav ul{list-style-type:none;margin:0;padding:0;height:100%;border-right:1px solid var(--ui-border)}
nav ul li a{display:block;color:var(--ui-primary);text-decoration:none;padding:9px 12px 7px;margin-right:-1px}
nav ul li a:hover,nav ul li a:focus{color:var(--ui-primary-hover)}
nav ul li.active a{color:var(--ui-on-surface);border-width:1px 0 1px 1px;border-color:var(--ui-border);font-weight:600;border-style:solid;border-radius:8px 0 0 8px;border-right:1px solid var(--ui-surface)}

/* Sub-Nav */
nav ul li>ul{border:none;max-height:0;overflow:hidden;transition:max-height 1s ease-out}
nav ul li:hover>ul{max-height:999px;transition:max-height 1s ease-in}
nav ul li.active>ul{max-height:999px}
nav ul li.active>ul li a{color:var(--ui-primary)}
nav ul li>ul li a{font-size:12px;line-height:1.5;border-radius:0!important;font-weight:400!important;padding:10px 0 10px 10px;margin-left:15px;margin-right:15px;border-bottom:1px solid var(--ui-border);border-left:none!important;border-top:none!important}
nav ul li>ul li:first-child a{padding-top:15px}
nav ul li>ul li.active a{color:var(--ui-on-surface)!important;font-weight:600!important}

/* Content */
section{display:block;padding:0 20px;position:absolute;top:129px;bottom:20px;right:0;left:0}
article{display:block;position:relative;height:100%;float:right;width:calc(100% - 280px)}
.container{background-color:var(--ui-surface);border-radius:12px;position:relative;height:100%;padding:20px}
.content{background-color:var(--ui-surface-alt);padding:5px 20px 20px;position:absolute;left:0;bottom:0;top:50px;right:0;overflow:auto;border-radius:12px}

/* Media Queries */
@media (max-width:1024px) {
	nav ul li > ul {
		overflow: auto
	}
}