
/* File data: default.css */


html{width:100%; height:100%; margin:0; padding:0;}
*{margin:0; padding:0; -webkit-tap-highlight-color: transparent; box-sizing: border-box;}
table{border-collapse:collapse; border-spacing:0;}
fieldset, img{border:0;}
sup{vertical-align:text-top;}
sub{vertical-align:text-bottom;}
input, textarea, select{font-family: inherit; font-size: inherit; font-weight: inherit; font-size: 100%;}
input[type='submit']{-webkit-appearance: none; appearance: none;}
select{background: #fff !important}
a, img{outline:0}
a{text-decoration: none;}
label{cursor:pointer;}
li{list-style:none}

.clear{clear:both; line-height:0 !important; font-size:0 !important; height:0 !important;}
.hidden{display:none;}

.editable p{padding:3px 0}
.editable ol, .editable ul{padding:7px 0 7px 15px}
.editable li{padding:3px 0}
.editable ol li{list-style:decimal; list-style-position:inside; margin-bottom:10px;}
.editable ul li{list-style:disc; list-style-position:inside;}
.editable td{padding:5px 10px}
.editable h1, .editable h2, .editable h3, .editable h4, .editable h5, .editable h6{padding:7px 0}
.editable h1{font-size:27px; line-height:29px;}
.editable h2{font-size:24px; line-height:26px;}
.editable h3{font-size:22px; line-height:24px;}
.editable h4{font-size:18px; line-height:20px;}
.editable h5{font-size:16px; line-height:18px;}
.editable h6{font-size:14px; line-height:16px;}

:root {
  --text-color: #232323;
  --button-background: #114b5f;
  --button-text-color: #f3f3f3;
  --button-hover-background: #286d83;
  --button-hover-text-color: #f3f3f3;
  --link-color: #128cb7;
  --higlight-color: #ea638c;
  --light-background: #fdffce;
  --contrast-in-list: #eaeaea;
}

@font-face {
  font-family: 'IkraSlab';
  src: url('/media/css/../fonts/IkraSlab.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Rubik';
  src: url('/media/css/../fonts/Rubik-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'RubikMedium';
  src: url('/media/css/../fonts/Rubik-Medium.ttf') format('truetype');
  font-style: normal;
}

@font-face {
  font-family: 'RubikSemiBold';
  src: url('/media/css/../fonts/Rubik-SemiBold.ttf') format('truetype');
  font-style: normal;
}

@font-face {
  font-family: 'RubikBold';
  src: url('/media/css/../fonts/Rubik-Bold.ttf') format('truetype');
  font-style: normal;
}
/* End of file */


/* File data: style.css */


/* Structure */
html{height:100%;}
body{height:100%; min-width: 360px; position: relative; color: var(--text-color); font: 18px/24px 'Rubik';
background: #f3f3f3 url(/media/css/../images/gradient.jpg) top repeat-x;}

#container{min-height: 100%; position: relative; overflow: hidden}
#sticky-footer-wrapper{padding: 0 0 250px 0; margin:0 auto; max-width:1400px;}
#header{position:relative; padding: 20px 0 0 0; display: flex; margin-bottom: 60px; align-items: center;}
#wrapper.restyle{display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 80px;}
#left-side{min-height:400px; width:300px; position:relative;}
#content{min-height:400px; width:calc(100% - 300px - 100px);}
#content.index{width:calc(100% - 300px - 180px);}
#footer{height:250px; background: url(/media/css/../images/pattern.png) top repeat-x; position: absolute; left: 0; bottom: 0; 
width: 100%;}
#overlay{width: 100%; height: 100%; position: fixed; z-index: 100; background: #3c3b36; opacity: 0.8;
display: none; top: 0; left: 0;}

/* Buttons */
.button{font: 18px/24px 'RubikMedium'; border-radius: 6px; background-color: var(--button-background); border: none; 
cursor: pointer; color: var(--button-text-color); transition: all 0.5s ease; outline: none; height: 54px;
padding: 0 24px; display: flex; align-items: center;}
.button:hover{background: var(--button-hover-background); color: var(--button-hover-text-color);}
.button.download{width:170px; display: flex; flex-direction: column; gap: 2px; align-items: center; justify-content: center;
padding: 0; height: 50px;}
.button.download span.add{font-size: 16px;}
.button.download span.version{font: 11px 'Rubik'; line-height: 100%;}
.button.github{background: url(/media/css/../images/github.svg) left 24px center no-repeat; padding-left: 64px; border-width: 2px;
border-color: var(--button-background); border-style: solid; color: var(--text-color); background-size: 30px 30px;}
.light-dark-mode{height: 32px; padding-left: 74px; background: url(/media/css/../images/light-mode.svg) left center no-repeat;
cursor: pointer; display: flex; align-items: center; font-size: 16px; color: var(--text-color); flex-shrink: 0;}

div.documentation{margin-bottom: 16px; font-family: 'RubikMedium';}
span.dots{background: url(/media/css/../images/dots.gif) no-repeat left center; padding-left:14px; display:block; color:#ff4343;}

/* Header */
#header > div.right{margin-left: auto; display: flex; align-items: center; gap: 20px;}
a.logo{width:90px; margin: 0 40px 0 0;}
a.logo img{display:block; width: 100%;}
#header-right-side{ width:calc(100% - 242px);}
.top-menu-button{width: 30px; height: 30px; background: url(/media/css/../images/burger-menu.svg) no-repeat; flex-shrink: 0;
background-size: contain; margin: 0; cursor: pointer; display: none}

div.search-section{width: 300px; position: relative;}
div.search-section .search-field{width: 450px; padding: 12px 42px 11px 8px; width: 100%; border: none; font-size: 16px;
border-radius: 6px; outline: none; background: #fff;}
div.search-section .search-button{height: 35px; width: 35px; background: url('/media/css/../images/search.svg') no-repeat center;
border: none; position: absolute; right: 5px; top: 4px; cursor: pointer;}

#top-menu{display: flex; gap: 20px;}
#top-menu > li{position: relative; height: 100%}
#top-menu li a{font-size: 16px; line-height: 20px; color: var(--text-color); transition: all 0.3s ease;}
#top-menu li.active a, #top-menu > li:hover > a{color: var(--higlight-color)}
#top-menu li.submenu > a{background: url(/media/css/../images/menu-closed.svg) no-repeat right center; padding-right:12px;}
#top-menu li ul{position: absolute; border-radius: 15px; z-index: 10; top: 29px; left: -30px; 
padding: 20px 30px 14px 30px; background: #c3ceda; width: 190px; display: none;}
#top-menu > li:hover ul{display: block;}
#top-menu li ul li{float: none; margin: 0 0 12px 0; list-style: none; line-height: 18px;}
#top-menu li ul li a{font: 16px/10px 'Rubik'}
#top-menu li ul li a:hover{color: #4ca0c5;}

#header div.socials{display: flex; gap: 20px; align-items: center;}
#header div.socials a{width: 36px; height: 36px;}
#header div.socials a.github{background: url(/media/css/../images/social-github.svg) no-repeat center;
background-size: contain;}
#header div.socials a.twitter{background: url(/media/css/../images/social-twitter.svg) no-repeat center;
background-size: contain;}

/* Mobile menu */
div.mobile-menu{width: 360px; height: 100%; overflow: auto; z-index: 1000; position: fixed; top: 0; overflow-y: auto;
background: #f3f3f3; padding: 12px 30px; left: 0; font-size: 16px; display: none; scrollbar-width: thin;}
div.mobile-menu div.menu-close{width: 24px; height: 24px; position: absolute; top: 16px; right: 16px; cursor: pointer;
background: url(/media/css/../images/close.svg) no-repeat center; background-size: contain}
div.mobile-menu div.inner{padding-top: 30px; display: flex; flex-direction: column; gap: 30px;}
div.mobile-menu div.buttons{display: flex; gap: 20px; align-items: center;}
div.mobile-menu div.buttons .button.download{display: flex !important;}
div.mobile-menu div.socials{gap: 20px !important;}
div.mobile-menu ul.main-menu{display: flex; flex-direction: column; gap: 24px; padding-bottom: 30px; border-bottom: 1px solid #dcdedf;}
div.mobile-menu ul.main-menu a{color: var(--text-color);}
div.mobile-menu ul.main-menu li.active a{color: var(--link-color);}

div.mobile-menu div.documentation-menu div.title{margin-bottom: 22px; font: 18px/24px 'RubikMedium';}
div.mobile-menu div.documentation-menu div.left-menu-section{padding-top: 10px;}
div.mobile-menu a.banner{display: flex;}
div.mobile-menu a.banner img{max-width: 100%;}

/* Left column */
#left-side .light-dark-mode{margin-bottom: 30px;}
#left-side-inside{margin-bottom: 30px;}
div.left-menu-section{margin:0 0 12px 0; font: 16px 'Rubik'; color: var(--higlight-color)}
div.left-menu-section span{cursor: pointer;}
div.left-menu-section span::after{display: inline-block;
transition: all 0.4s ease; content: ''; width: 16px; height: 16px; background: url(/media/css/../images/chevron-right.svg) no-repeat center;
background-size: contain; position: relative; bottom: -3px; margin-left: 3px;}
div.left-menu-section.opened span::after{transform: rotate(90deg);}

ul.left-menu{margin:-10px 0 14px 0; padding: 0; display:none;}
ul.left-menu.opened{display:block;}
ul.left-menu.hidden{display: none;}
ul.left-menu li{margin-bottom: 0; list-style:none;}
ul.left-menu li a{color:var(--text-color); padding:0; text-decoration: none; font: 16px/26px 'Rubik';
transition: all 0.3s ease;}
ul.left-menu li a:hover{color: var(--link-color)}
ul.left-menu li span.active a{color: var(--link-color); text-decoration:none;}
ul.left-menu ul{padding:3px 0 4px 15px;}
ul.left-menu li ul li{font-size:12px;}
ul.left-menu ul li.active{color:var(--link-color);}
ul.left-menu ul li.active a{background:none; color:var(--higlight-color); text-decoration:none;}

/* Main content */
#content-inside{border-radius: 6px;}
#content-inside h1{font: 40px/110% 'RubikMedium'; margin-bottom: 25px;}
#content-inside h2, #content-inside h3, div.form-header{font: 26px/120% 'RubikMedium'; margin-bottom: 16px; padding-top: 10px;}
#content-inside h1 + h2{padding: 0;}
#content-inside.text{background: #f3f3f3; padding: 40px 4%;}
#content-inside a{color: var(--link-color);}
#content-inside p{margin-bottom:12px;}
#content-inside p img{max-width: 100%}
#content-inside ol{margin-left: 30px;}
#content-inside ul{margin-left: 14px;}
#content-inside li{margin-bottom: 12px;}
#content-inside ol li{list-style: decimal outside; padding-left: 4px;}
#content-inside ul li{list-style: none; background: url(/media/css/../images/bullet.svg) top 10px left no-repeat; padding-left: 18px;
background-size: 5px 5px;}
#content-inside pre{margin-bottom:20px; overflow:auto; font-size: 16px; border-radius: 6px;}
#content-inside pre code{padding:20px 3%;}
#content-inside pre.basic{background: var(--text-color); color: var(--light-background); padding:20px 2%;}
#content-inside div.hint{background:#c1f7c0; margin-bottom:20px; border-radius: 6px;
padding:20px 3%;}
#content-inside div.composer{padding: 20px 3%; background: #333; color: #fff; margin-bottom: 20px; border-radius: 6px;}
#content-inside > *:last-child{margin-bottom: 0 !important;}
#content-inside.datatypes p > strong:first-child{color: var(--higlight-color);}
#content-inside.text ul li > strong:first-child{color: var(--link-color);}

#content-inside.index h2, #content-inside.index h3{font: 36px/40px 'IkraSlab'; color: var(--text-color); margin-bottom: 28px;}
#content-inside.index h2 span{color: var(--higlight-color);}
#content-inside.index h3{font-size: 30px; line-height: 34px;}

.admin-gallery{display: grid; grid-template-columns: 1fr 1fr 1fr; max-width: 100%; gap: 10px;
margin-bottom: 20px;}
.admin-gallery > *{max-width: 100%;}
.admin-gallery img{display: block; max-width: 100%;}

/* Search */
div.search-total-found{margin-bottom: 30px;}
div.search-results{display: flex; flex-direction: column; gap: 30px; margin-bottom: 40px;}
div.search-results div.search-name{margin-bottom: 6px;}
div.search-results div.search-name span.number{margin-right: 5px; font-family: 'RubikMedium';}
div.search-results span.search-found{background: #ffed9f; padding: 0 1px;}

/* Pagination */
div.pager{margin-bottom: 25px; display: flex; align-items: center;}
div.pager span{margin-right: 12px;}
div.pager a{padding:3px 10px 2px 10px; margin: 0 2px 0 0; border-radius:4px; display: inline-block; transition: all 0.3s ease;}
div.pager a.active, div.pager a:hover{background: var(--text-color); color:var(--higlight-color) !important;}

/* Footer */
#footer-inside{padding-top: 160px; max-width: 1400px; margin: 0 auto; display: flex; justify-content: space-between;}
#footer div.copyright p:first-child{margin-bottom: 10px;}
#footer div.copyright p.links{display: flex; gap: 20px;}
#footer div.copyright a{color: var(--link-color)}
#footer div.share > p{margin-bottom: 10px;}

/* Forms */
div.form-errors{background:#f8eded; max-width:650px; padding:16px 40px; border-radius: 6px; display: flex; flex-direction: column;
gap: 4px;}
div.form-errors p{color: #ff0000; margin: 0 !important;}
div.success{background:#c1f7c0; color:#12643e; padding: 16px 20px; max-width: 900px; border-radius: 6px;}
div.success.short{max-width: 500px;}

form.regular input[type='text'], form.regular select, form.regular textarea{border: 1px solid #ece6cd !important;
border-radius: 4px !important;}
form.regular div.field-input #send, form.regular #answer-button{width: auto !important; display: inline-flex; align-items: center;
padding: 0 25px !important;}
form.regular div.field-code input[type='text']{width: calc(100% - 140px) !important;}

/* Previous and next page links */
#wiki-bottom{width:100%; clear: both; padding:25px 0 0px 0; flex-wrap: wrap; display: flex; justify-content: space-between;}
#wiki-bottom p{margin-bottom:0}
#wiki-bottom .previous-page{width:49%}
#wiki-bottom .previous-page p{font-size: 14px;}
#wiki-bottom .next-page{width:49%; text-align:right;}
#wiki-bottom .next-page p{max-width: 100%; font-size: 14px;}
#wiki-bottom a.banner{margin: 30px auto 0 auto;}
#wiki-bottom a.banner img{display: block; max-width: 100%; border-radius: 6px;}

/* Main page content */
#index-content{height: 605px; background: url(/media/css/../images/banners/imac.png) right center no-repeat; position: relative; display: flex;
flex-direction: column; align-items: flex-start; gap: 40px; padding: 25px 48% 0 0; margin: -25px 0 120px 0;}
#index-content h1{font: 60px/68px 'IkraSlab'; color: var(--text-color); margin: 0; z-index: 30;}
#index-content h1 span{color: var(--higlight-color);}
#index-content h3{font: 24px/30px 'Rubik'; color: var(--text-color); margin: 0; z-index: 30;}
#index-content .light-dark-mode{margin-bottom: 40px;}
#index-content .buttons{display: flex; gap: 30px;}
#index-content > img.screenshot{position: absolute; z-index: 10;}
#index-content > img.screenshot.first{top: 50px; right: 545px;}
#index-content > img.screenshot.second{z-index: 20; top: 174px; right: 346px;}

ul.datatypes{margin: 0; padding: 0;}
ul.datatypes li{list-style: none; margin: 0 0 12px 0 !important;}

img.index-screenshot{margin-bottom: 60px; max-width: 930px; width: 100%; border-radius: 6px;}
div.index-texts ul.features{margin-bottom: 60px; margin-left: 14px;}
div.index-texts pre{margin-bottom: 30px !important;}
div.index-texts > *:last-child{margin-bottom: 0 !important;}

/* MV tracker banner */
a.mv-tracker-banner{position: absolute; right: 10px; top: 130px;}
a.mv-tracker-banner-left{display: block; margin-top: 15px;}
a.mv-tracker-banner-left img{display: block; max-width: 100%;}
a.mv-tracker-banner-bottom{display: none;}

/* Dark theme */
body.dark{background-color: #161616; background-image: url(/media/css/../images/dark/gradient-dark.jpg);}
body.dark{
  --text-color: #f3f3f3;
  --button-background: #4bbce2;
  --button-text-color: #232323;
  --button-hover-background: #3eb1d8;
  --button-hover-text-color: #232323;
  --link-color: #4bbce2;
  --higlight-color: #ea638c;
  --light-background: #242424;
  --contrast-in-list: #242424; 
}
body.dark #header div.socials a.github{background-image: url(/media/css/../images/dark/social-github.svg);}
body.dark #header div.socials a.twitter{background-image: url(/media/css/../images/dark/social-twitter.svg);}
body.dark .light-dark-mode{background-image: url(/media/css/../images/dark/dark-mode.svg);}
body.dark .button.github{background-image: url(/media/css/../images/dark/social-github.svg);}
body.dark #footer{background-image: url(/media/css/../images/dark/pattern.png);}
body.dark #content-inside ul li{background-image: url(/media/css/../images/dark/bullet.svg);}
body.dark #content-inside.text{background: #161616;}
body.dark #content-inside pre code{border: 1px solid #232c39;}
body.dark div.search-results span.search-found{background: #665f41;}
body.dark #content-inside div.hint{color: var(--button-text-color);}
body.dark #content-inside pre.basic{background: #282933; color: #fdffce;}
body.dark #wiki-bottom{background: none;}
body.dark div.pager a.active, body.dark div.pager a:hover{background: #ea638c; color: #f3f3f3 !important;}
body.dark div.mobile-menu{background: #161616;}
body.dark div.mobile-menu ul.main-menu{border-color: #232323;}
body.dark div.top-menu-button{background-image: url(/media/css/../images/dark/burger-menu.svg);}
body.dark div.mobile-menu div.menu-close{background-image: url(/media/css/../images/dark/close.svg);}
/* End of file */


/* File data: media.css */

@media screen and (max-width: 1460px)
{
    #sticky-footer-wrapper, #footer-inside{margin: 0 2.5%;}
    #header{margin-bottom: 45px;}
    #index-content{background-size: 35%; height: 45vw;}
    #index-content > img.screenshot.first{width: 20vw; right: 39%;}
    #index-content > img.screenshot.second{width: 25vw; right: 25%;}
}

@media screen and (max-width: 1350px)
{
    #wrapper.restyle{margin-bottom: 60px;}
    #header div.search-section.main{width: 170px;}
    #index-content h1{font-size: 46px; line-height: 52px;}
    #header > div.right, #header div.socials{gap: 10px;}
    #header div.socials a{width: 30px; height: 30px;}
    #header .button.download{height: 44px; gap: 0;}
    #index-content{margin-bottom: 100px;}
    #index-content .light-dark-mode{margin-bottom: 20px;}
    #content{width: calc(100% - 320px);}
    #content-inside.index h2, #content-inside.index h3{font-size: 30px; line-height: 34px;}
}

@media screen and (max-width: 1150px)
{
    #header div.search-section.main{display: none;}
}

@media screen and (max-width: 1000px)
{
    #header{padding-top: 10px; margin-bottom: 30px;}
    #header a.logo{width: 64px;}
    #top-menu, #left-side{display: none;}
    #content{width: 100% !important;}
    div.top-menu-button{display: inline-flex;}
    #index-content{gap: 20px; margin-bottom: 60px; height: auto;}
    #index-content > img.screenshot.first{top: 55px; right: 38%;}
    #index-content > img.screenshot.second{top: 130px;}
    #index-content .light-dark-mode{margin-bottom: 30px;}
    #index-content h1{font-size: 36px; line-height: 40px;}
    #index-content h3{font-size: 18px; line-height: 24px; max-width: 410px;}
    #index-content .buttons{gap: 10px;}
    
    /*
    a.mv-tracker-banner-bottom{display: block;}
    a.mv-tracker-banner-bottom img{display: block; max-width: 100%; margin: 0 auto;}
    */
}

@media screen and (max-width: 900px)
{
    body{font-size: 16px; line-height: 20px;}
    #wrapper.restyle{margin-bottom: 30px;}
    #content-inside pre{font-size: 15px;}
    #content-inside.index h2, #content-inside.index h3{font-size: 24px; line-height: 32px; margin-bottom: 18px;}

    #content-inside.text{padding: 25px 4% 0 4%;}
    #content-inside.text h1{margin-bottom: 20px; font-size: 34px;}
    #content-inside.text h2, #content-inside.text h3, div.form-header{margin-bottom: 14px; font-size: 24px;}
    #content-inside ul li{background-position-y: 8px;}

    div.pager{flex-wrap: wrap; gap: 8px;}
    div.pager span{margin: 0;}
}

@media screen and (max-width: 600px)
{
    #header .button.download{display: none;}
    #index-content{margin: 0 0 60px 0; padding: 0 0 250px 0; background-position: right bottom; background-size: 39%; height: auto;}
    #index-content .light-dark-mode{margin-bottom: 10px;}

    #index-content > img.screenshot.first{top: auto; bottom: 16%; right: 45%; width: 30vw;}
    #index-content > img.screenshot.second{top: auto; bottom: 10%; right: 28%; width: 34vw;}

    #content-inside.text h1{margin-bottom: 16px; font-size: 28px;}
    #content-inside.text h2, #content-inside.text h3, div.form-header{margin-bottom: 10px; font-size: 20px;}
    .button{font-size: 16px; height: 44px;}
    div.question p.question-params{display: flex; gap: 8px; flex-wrap: wrap;}
    div.question p.question-params *{margin: 0;}
    div.answers-list{gap: 10px !important;}

    form.regular{padding: 25px 5% !important;}
    div.form-errors{padding: 12px 5%;}
}

@media screen and (max-width: 500px)
{
    #footer-inside{flex-direction: column; align-items: flex-start; padding-top: 145px; gap: 10px;}
    #footer-inside div.share{display: flex; gap: 10px; align-items: center;}
    #footer div.share > p{margin: 0;}
}

@media screen and (max-width: 400px)
{
    #index-content{background-size: 50%;}
    #index-content > img.screenshot.first{bottom: 16%; right: 58%; width: 35vw;}
    #index-content > img.screenshot.second{bottom: 8%; right: 38%; width: 40vw;}    
}
/* End of file */


/* File data: github-dark.min.css */

pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}/*!
  Theme: GitHub Dark
  Description: Dark theme as seen on github.com
  Author: github.com
  Maintainer: @Hirse
  Updated: 2021-05-15

  Outdated base version: https://github.com/primer/github-syntax-dark
  Current colors taken from GitHub's CSS
*/.hljs{color:#c9d1d9;background:#0d1117}.hljs-doctag,.hljs-keyword,.hljs-meta .hljs-keyword,.hljs-template-tag,.hljs-template-variable,.hljs-type,.hljs-variable.language_{color:#ff7b72}.hljs-title,.hljs-title.class_,.hljs-title.class_.inherited__,.hljs-title.function_{color:#d2a8ff}.hljs-attr,.hljs-attribute,.hljs-literal,.hljs-meta,.hljs-number,.hljs-operator,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-id,.hljs-variable{color:#79c0ff}.hljs-meta .hljs-string,.hljs-regexp,.hljs-string{color:#a5d6ff}.hljs-built_in,.hljs-symbol{color:#ffa657}.hljs-code,.hljs-comment,.hljs-formula{color:#8b949e}.hljs-name,.hljs-quote,.hljs-selector-pseudo,.hljs-selector-tag{color:#7ee787}.hljs-subst{color:#c9d1d9}.hljs-section{color:#1f6feb;font-weight:700}.hljs-bullet{color:#f2cc60}.hljs-emphasis{color:#c9d1d9;font-style:italic}.hljs-strong{color:#c9d1d9;font-weight:700}.hljs-addition{color:#aff5b4;background-color:#033a16}.hljs-deletion{color:#ffdcd7;background-color:#67060c}
/* End of file */

