/*****************************************************
*  project: youtube revenue calculator               *
*  description: main style                           *
*  author: horans@gmail.com                          *
*  url: github.com/horans/youtube-revenue-calculator *
*  update: 180731                                    *
*****************************************************/
/* common */
/* csslint ignore:start */
:root { --white: #ffffff; --smoke: #fafafa; --light: #f5f5f5; --red: #57b792; --black: #111111; }
/* csslint ignore:end */
body { background-color: var(--smoke); color: var(--black); } /* csslint allow: known-properties */
.wf-active body { font-family: "Roboto", Arial, sans-serif; }
code { background-color: #eee; font-family: inherit; padding: 0 .25rem; }
main { overflow: hidden; position: relative; }
.transition, .transition::before, .transition::after { -webkit-transition: all ease-out .3s; -o-transition: all ease-out .3s; -moz-transition: all ease-out .3s; transition: all ease-out .3s; }
.text-center { text-align: center; }
.text-gray { opacity: .6; }
.text-red { color: var(--red); } /* csslint allow: known-properties */
.text-small { font-size: 14px; line-height: 1.29; }
/* panel */
.ytrc-panel { padding: 1rem; position: relative; }
/* icon */
.ytrc-tool { opacity: .4; position: absolute; right: 1rem; top: 1rem; }
.ytrc-tool:hover { opacity: 1; }
.ytrc-icon { background-position: center; background-repeat: no-repeat; background-size: contain; cursor: pointer; display: inline-block; height: 1.5rem; vertical-align: top; width: 1.5rem; }
.ytrc-icon-close { background-image: url("./asset/icon-close.svg"); }
.ytrc-icon-help { background-image: url("./asset/icon-help.svg"); }
.ytrc-icon-info { background-image: url("./asset/icon-info.svg"); cursor: default; opacity: .55; vertical-align: middle; }
.ytrc-icon-settings { background-image: url("./asset/icon-settings.svg"); }
/* content */
.ytrc-content { background-color: var(--smoke); max-height: 100vh; min-height: 100vh; overflow: hidden; padding-bottom: 3.75rem; padding-top: 3.75rem; } /* csslint allow: known-properties */
.ready .ytrc-content { max-height: none; overflow: auto; }
.ytrc-heading { line-height: 1.33; }
.ytrc-title { font-size: 30px; margin: 0; }
.ytrc-desc { font-size: 18px; margin-top: 10px; }
.ytrc-input { margin: 50px 25px 0; }
.ytrc-input-item { padding-bottom: 40px; }
.ytrc-input-slider { margin: 50px 0 40px; }
.ytrc-input-title { font-weight: bold; line-height: 1.25; margin-bottom: 10px; text-align: center; }
.ytrc-input-link { position: relative; }
.ytrc-input-error { bottom: 15px; left: 0; position: absolute; }
.ytrc-result { border-top: dashed 1px var(--smoke); padding: 29px 15px 50px; } /* csslint allow: known-properties */
.ytrc-result-title { font-size: 16px; font-weight: bold; line-height: 1.25; margin-bottom: 25px; }
.ytrc-result-number { color: #57b792; font-size: 30px; font-weight: bold; line-height: 1.33; } /* csslint allow: known-properties */
.ytrc-result-label { font-size: 20px; line-height: 1.2; }
.ytrc-result-border, .ytrc-result-border .ytrc-result-title { position: relative; }
.ytrc-result-border .ytrc-result-title { margin: 0 auto 25px; padding: 0 10px; width: 50%; z-index: 3; } /* csslint allow: box-model */
.ytrc-result-border .ytrc-result-title::after, .ytrc-result-border .ytrc-result-number::after { background-color: var(--smoke); content: ""; height: 100%; left: 0; position: absolute; top: 0; width: 100%; z-index: -1; } /* csslint allow: known-properties */
.ytrc-result-border .ytrc-result-number::after { background-color: transparent; border: 1px solid var(--red); border-radius: 5px; bottom: 0; content: ""; height: 76%; top: auto; z-index: 0; } /* csslint allow: box-model, known-properties */
.ytrc-output > .row > div:first-of-type .ytrc-result { border-top: none; padding-top: 30px; }
.highlight { margin-top: 40px; }
.highlight .ytrc-input-container { background-color: var(--white); border: solid 1px var(--red); } /* csslint allow: known-properties */
.highlight .ytrc-output-container { background-color: var(--red); color: var(--white); } /* csslint allow: known-properties */
.highlight .ytrc-result-number { color: var(--white); } /* csslint allow: known-properties */
.masthead-search-terms-border input { outline: none; } /* csslint allow: outline-none */
#masthead-search { max-width: 100%; } /* csslint allow: ids */
#masthead-search .search-btn-component .yt-uix-button-content { background: url('./asset/icon-search.svg') no-repeat center; background-size: 125%; } /* csslint allow: ids */
.noUi-connect { background-color:#57b792 } /* csslint allow: known-properties */
/* setting */
.ytrc-setting { background-color: var(--light); height: 100%; max-width: 100%; opacity: 0; padding: 1rem; position: absolute; right: 0; top: 0; -webkit-transform: translateX(100%); -moz-transform: translateX(100%); -ms-transform: translateX(100%); -o-transform: translateX(100%); transform: translateX(100%); width: 15rem; } /* csslint allow: box-model, known-properties */
.setting .ytrc-setting { opacity: 1; -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); z-index: 13; }
.ytrc-setting .pretty, .ytrc-appkey { font-size: .875rem; margin-bottom: .75rem; }
.ytrc-setting-input input { display: block; font-size: .75rem; line-height: 1.25; padding: .25rem .1rem; width: 100%; } /* csslint allow: box-model */
/* guide and loading */
.ytrc-guide, .ytrc-loading { background-color: var(--smoke); height: 100%; left: 0; position: absolute; top: 0; width: 100%; } /* csslint allow: box-model, known-properties */
.ytrc-guide { background-color: var(--white); -webkit-transform: translateY(-30%); -moz-transform: translateY(-30%); -ms-transform: translateY(-30%); -o-transform: translateY(-30%); transform: translateY(-30%) } /* csslint allow: box-model, known-properties */
.ytrc-guide, .ready .ytrc-loading { opacity: 0; z-index: -1; }
.guide .ytrc-guide, .ytrc-loading { opacity: 1; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); z-index: 12; }
.loading .ytrc-loading { opacity: .3; z-index: 12; }
.ready .ytrc-loading .ytp-spinner { opacity: 0; pointer-events: none; }
.setting .ytrc-loading { background-color: #000; background-color: rgba(0, 0, 0, 0.5); opacity: 1; z-index: 12; }
/* mobile */
@media(max-width: 767px) {
.ytrc-content { padding-bottom: 1rem; padding-top: 2.75rem; }
.highlight { margin-top: 20px; }
.ytrc-input { margin: 30px 0 0; }
.noUi-value-large { opacity: 0; }
.ytrc-result-border .ytrc-result-title { width: 85%; }
}