﻿/*
//================================================

Finance Toolbar
Get real time stock market information about your favorite stocks. With mini-charts of the currency value.
Copyright (C) 2019 Stefan vd
www.stefanvd.net

This program is free software; you can redistribute it and/or
modify it under the terms of the GNU General Public License
as published by the Free Software Foundation; either version 2
of the License, or (at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU General Public License for more details.

You should have received a copy of the GNU General Public License
along with this program; if not, write to the Free Software
Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.


To view a copy of this license, visit http://creativecommons.org/licenses/GPL/2.0/

//================================================
*/

.dark{
--totl-primary-background:#232323;
--totl-primary-font-color:#fff;
--totl-body-background:#111111;
--totl-svg-fill-color:#fff;
--totl-svg-fill-color-hover:#474747;
--totl-primary-sidebar-background:#1c1c1c;
--totl-nav-background-hover:#474747;
--totl-nav-color:rgba(255,255,255,.882);
--totl-title-color:#fff;
--totl-title-border:1px solid #444444;
--totl-section-border:1px solid rgba(255,255,255,.12);
--totl-table-first-background:#212121;
--totl-table-first-color:#ffffff;
--totl-table-td-border:1px solid rgba(255,255,255,.12);
--totl-table-tr-background-hover:#424242;
--totl-table-tr-background-active:#4e4e4e;
--totl-dropmenu-li-background-hover:#424242;
--totl-dropmenu-li-background-active:#4e4e4e;
--totl-menu-background-hover:#474747;
--totl-select-not-background:#333;
--totl-select-background:rgba(244,244,244,.4);
--totl-select-option-color:rgba(255, 255, 255,.80);
--totl-select-option-checked-background:#292929 linear-gradient(0deg,#292929 0%,#292929 100%);
--totl-select-disable-background:#2e2e2e;
--totl-select-disable-color:rgba(255,255,255,.80);
--totl-select-disable-option:#292929 linear-gradient(0deg,#292929 0%,#292929 100%);
--totl-radio-label-border:2px solid #c7c7c7;
--totl-radio-label-background:rgba(0,0,0,1);
--totl-radio-checked-border:#4285f4;
--totl-radio-checked-disabled:#717171;
--totl-checkbox-label-background:rgba(0,0,0,1);
--totl-checkbox-label-border:2px solid #c7c7c7;
--totl-checkbox-checked:#4285f4;
--totl-checkbox-checked-disabled:#717171;
--totl-checkbox-checked-disabled-border:2px solid #717171;
--totl-range-background:#4285f4;
--totl-range-disabled-background:rgba(255,255,255,.54);
--totl-select-only-background:#111111;
--totl-select-only-color:rgba(255,255,255,.70);
--totl-select-only-border:1px solid rgba(255,255,255,.70);
--totl-select-only-border-focus:2px solid #4285f4;
--totl-select-only-border-top:0.375em solid rgba(255,255,255,.12);
--totl-select-only-hover-color:rgba(255,255,255,.80);
--totl-select-only-hover-border:2px solid rgba(255,255,255,1);
--totl-button-color:#fff;
--totl-button-background:rgba(244,244,244,.4);
--totl-button-background-active:rgba(158,158,158,.2);
--totl-button-background-hover:rgba(158,158,158,.4);
--totl-input-other-color:rgba(255,255,255,.7);
--totl-input-other-background:#111111;
--totl-input-other-multi-background:rgba(244,244,244,.4);
--totl-input-other-border:1px solid rgba(255,255,255,.70);
--totl-input-other-border-focus:2px solid #4285f4;
--totl-input-url-background:rgba(244,244,244,.4);
--totl-input-url-color:rgba(255,255,255,.80);
--totl-input-url-placeholder-color:#959595;
--totl-minitable-border:1px solid rgba(255,255,255,.12);
--totl-minitable-background-hover:#424242;
--totl-minitable-background-active:#4e4e4e;
--totl-minitable-tab-border:1px solid #444444;
--totl-input-url-disabled-background:#2e2e2e;
--totl-input-url-disabled-color:rgba(255,255,255,.80);
--totl-input-number-disabled-color:rgba(255,255,255,.50);
--totl-input-number-disabled-border:1px dotted rgba(255,255,255,.7);
--totl-input-number-hover-color:rgba(255,255,255,.7);
--totl-input-number-hover-border:2px solid rgba(255,255,255,1);
--totl-input-text-disabled-color:rgba(255,255,255,.80);
--totl-input-text-disabled-border:1px dotted rgba(0,0,0,.12);
--totl-button-disabled-color:rgba(255,255,255,.3);
--totl-button-disabled-background:rgba(255,255,255,.12);
--totl-sidebar-icon-background:rgba(255,255,255,.882);
--totl-subtitle-color:#717171;
--totl-card-background:#232323;
--totl-card-info:#4285f4;
}
.light{
--totl-primary-background:#fff;
--totl-primary-font-color:#000;
--totl-body-background:#fff;
--totl-svg-fill-color:#000;
--totl-svg-fill-color-hover:#ebebeb;
--totl-primary-sidebar-background:#f5f5f5;
--totl-nav-background-hover:#ebebeb;
--totl-nav-color:#373737;
--totl-title-color:#333;
--totl-title-border:1px solid #EEE;
--totl-section-border:1px solid rgba(0,0,0,0.12);
--totl-table-first-background:#fafafa;
--totl-table-first-color:#000000;
--totl-table-td-border:1px solid rgba(0,0,0,.12);
--totl-table-tr-background-hover:#EEEEEE;
--totl-table-tr-background-active:#F5F5F5;
--totl-dropmenu-li-background-hover:#EEEEEE;
--totl-dropmenu-li-background-active:#F5F5F5;
--totl-menu-background-hover:#ebebeb;
--totl-select-not-background:#fff;
--totl-select-background:#fff;
--totl-select-option-color:black;
--totl-select-option-checked-background:#eeeeee linear-gradient(0deg,#eeeeee 0%,#eeeeee 100%);
--totl-select-disable-background:rgba(0,0,0,.12);
--totl-select-disable-color:rgba(0,0,0,.54);
--totl-select-disable-option:#eeeeee linear-gradient(0deg,#eeeeee 0%,#eeeeee 100%);
--totl-radio-label-border:2px solid #656565;
--totl-radio-label-background:rgba(255,255,255,1);
--totl-radio-checked-border:#4285f4;
--totl-radio-checked-disabled:#b0b0b0;
--totl-checkbox-label-background:rgba(255,255,255,1);
--totl-checkbox-label-border:2px solid #656565;
--totl-checkbox-checked:#4285f4;
--totl-checkbox-checked-disabled:#b0b0b0;
--totl-checkbox-checked-disabled-border:2px solid #b0b0b0;
--totl-range-background:#4285f4;
--totl-range-disabled-background:rgba(0,0,0,.26);
--totl-select-only-background:#fff;
--totl-select-only-color:rgba(0,0,0,.54);
--totl-select-only-border:1px solid rgba(0,0,0,.42);
--totl-select-only-border-focus:2px solid #4285f4;
--totl-select-only-border-top:0.375em solid rgba(0,0,0,.12);
--totl-select-only-hover-color:rgba(0,0,0,.54);
--totl-select-only-hover-border:2px solid rgba(0,0,0,.87);
--totl-button-color:#000;
--totl-button-background:rgba(244,244,244,.4);
--totl-button-background-active:rgba(158,158,158,.2);
--totl-button-background-hover:rgba(158,158,158,.4);
--totl-input-other-color:rgba(0,0,0,.54);
--totl-input-other-background:#fff;
--totl-input-other-multi-background:#fff;
--totl-input-other-border:1px solid rgba(0,0,0,.42);
--totl-input-other-border-focus:2px solid #4285f4;
--totl-input-url-background:#fff;
--totl-input-url-color:#000;
--totl-input-url-placeholder-color:#909090;
--totl-minitable-border:1px solid rgba(255,255,255,.12);
--totl-minitable-background-hover:#EEEEEE;
--totl-minitable-background-active:#F5F5F5;
--totl-minitable-tab-border:1px solid #cccccc;
--totl-input-url-disabled-background:rgba(0,0,0,.12);
--totl-input-url-disabled-color:rgba(0,0,0,0.26);
--totl-input-number-disabled-color:rgba(0,0,0,.54);
--totl-input-number-disabled-border:1px dotted rgba(0,0,0,.42);
--totl-input-number-hover-color:rgba(0,0,0,.54);
--totl-input-number-hover-border:2px solid rgba(0,0,0,.87);
--totl-input-text-disabled-color:rgba(0,0,0,.80);
--totl-input-text-disabled-border:1px dotted rgba(0,0,0,.12);
--totl-button-disabled-color:rgba(0,0,0,.26);
--totl-button-disabled-background:rgba(0,0,0,.12);
--totl-sidebar-icon-background:#373737;
--totl-subtitle-color:#b0b0b0;
--totl-card-background:#fff;
--totl-card-info:#4285f4;
}

html{overflow:hidden}
body{min-width:1150px;min-height:800px;background:var(--totl-body-background);color:var(--totl-primary-font-color);font-family:Arial,sans-serif;cursor:default;font-size:13px}
#main-content{display:-webkit-box;position:absolute;left:0;right:0;top:0;bottom:0}
#mainview{padding-left:240px;margin:0;position:absolute;left:0;right:0;top:0;bottom:0;z-index:1;overflow:auto;margin-top:56px}
#mainview-content{box-sizing:border-box;max-width:1020px;min-width:600px;padding:0 24px;position:relative}
#managed-prefs-banner{background:#FFF59D;height:31px;width:100%;margin:0;padding:0;-webkit-user-select:none;-moz-user-select:none;user-select:none;color:black;position:relative;display:flex;align-items:center}
#managed-prefs-icon{float:left;display:inline-block;padding:8px 12px 2px 12px;height:21px;vertical-align:middle}
#managed-prefs-text{text-overflow:ellipsis;overflow:hidden;white-space:nowrap;display:inline-block;float:left;margin-right:30px}
#managed-prefs-text-close{float:right;display:table-cell;cursor:pointer;color:#000;font-size:18px;line-height:10px;margin:10px;background-repeat:no-repeat;background-position:center;position:absolute;top:0;right:0}
#navbar-container{background:var(--totl-primary-sidebar-background);bottom:0;display:block;left:0;position:fixed;top:0;width:240px;z-index:398}
#navbar-container>ul{-webkit-user-select:none;-moz-user-select:none;user-select:none;list-style-type:none;padding:0;margin:68px 0 0 0}
.navbar-item{color:var(--totl-nav-color);cursor:pointer;display:block;font-size:105%;outline:none;padding:7px 0}
.navbar-item:hover{background:var(--totl-nav-background-hover);color:var(--totl-primary-font-color)}
.navbar-item-selected{background:var(--totl-nav-background-hover);color:var(--totl-primary-font-color)}
ul#navbar li a{display:flex;align-items:center;margin-right:0;padding:12px 24px 12px 24px;font-size:105%;cursor:pointer}
ul#navbar li a svg{margin-right:24px;fill:var(--totl-sidebar-icon-background)}
#settings{-webkit-padding-end:24px;-webkit-user-select:none;-moz-user-select:none;user-select:none;color:#333;cursor:pointer;font-size:200%;font-weight:400;margin:0;padding-bottom:14px;padding-top:13px;text-align:end}
.page h2{-webkit-padding-end:24px;-webkit-user-select:none;-moz-user-select:none;user-select:none;color:var(--totl-title-color);font-size:200%;font-weight:400;margin:0;padding-bottom:4px;padding-top:13px}
.page{height:100%;width:100%;position:relative}
section{position:relative;-webkit-box-orient:horizontal;border-bottom:var(--totl-section-border);display:-webkit-box;margin-top:17px;padding-bottom:20px;width:100%}
section>h3{font-size:105%;font-weight:700;margin:0;vertical-align:middle;width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
section>div:only-of-type{-webkit-box-flex:1}
/* Hyperlinks */
#mainview-content section a{color:rgb(51, 103, 214);text-decoration:underline}
#mainview-content section a:active{color:rgb(51, 103, 214)}
#mainview-content section a:visited{color:rgb(51, 103, 214)}
#mainview-content section a:hover{color:rgb(51, 103, 214)}
.btnspace{margin:0 8px 0 0}
.grey-text{color:grey}
.hidden{display:none}
.item{font-style:italic}
.conboxselectionmax{width:200px;height:60px}
.conboxselection{width:200px;height:25px}
/* Search */
.search{position:relative;display:flex;width:100%;-webkit-user-select:none;-moz-user-select:none;user-select:none;margin-left:247px;margin-right:65px;font-size:18px;cursor:pointer;outline:none}
.search input{color:var(--totl-primary-font-color);background:var(--totl-primary-sidebar-background);border:0;border-radius:5px;height:35px;padding:10px 10px 10px 40px;box-sizing:border-box;outline:none;width:100%;max-width:975px}
.searchicon{position:absolute;top:5px;left:5px;height:20px;width:20px;padding:3px;border-radius:20px}
.searchicon:hover{background:var(--totl-svg-fill-color-hover);cursor:pointer}
.searchicon svg{fill:var(--totl-sidebar-icon-background)}
.searchfoundnothing{display:none}
/* Finance Toolbar app */
#financetoolbarappbox{height:75px;position:relative;background:#333333;border-radius:2px}
#apicon{position:absolute;top:18px;left:30px}
#apname{position:absolute;font-size:20px;top:25px;left:72px;color:#fff}
#aptllo{position:absolute;font-size:12px;top:28px;right:30px;color:#fff}
#apnt{position:absolute;font-size:12px;font-weight:700;color:#fff;text-transform:uppercase;top:60px;left:50px;cursor:pointer}
#apgetapp{position:absolute;font-size:12px;font-weight:700;color:#39F;text-transform:uppercase;top:60px;right:30px;cursor:pointer}
/* stocks */
#Stocklist{margin-left:0px}
#Stocklist input[type=url]{width:369px;float:left}
#Stocklist select{width:437px;margin-right:16px}
#Stocklistdouble{margin-left:0px}
#Stocklistdouble input[type=url]{width:369px;float:left}
#Stocklistdouble select{width:437px;margin-right:16px}
/* example bar */
@font-face{font-family:'Wallstreet';src:url('/wallstreet.eot');src:url('/wallstreet.ttf')format('truetype');font-weight:normal;font-style:normal}
@font-face{font-family:'jd_lcd_roundedregular';src:url('/jdlcdrounded-webfont.eot');src:url('/jdlcdrounded-webfont.eot?#iefix') format('embedded-opentype'),url('/jdlcdrounded-webfont.woff')format('woff'),url('/jdlcdrounded-webfont.ttf')format('truetype'),url('/jdlcdrounded-webfont.svg#jd_lcd_roundedregular')format('svg');font-weight:normal;font-style:normal}
#examplebar{position:relative;background:black;color:white;height:30px;width:100%;border:1px solid #3e3e3e}
#examplebar .world{-webkit-user-select:none;user-select:none;font-family:Webdings;cursor:pointer;left:0px;position: absolute;display:inline-block;width:63px;height:30px;color:rgba(255,255,255,.40);font-size:40px;padding-left:8px;vertical-align:top;top:-3px}
#examplebar #favorite{-webkit-user-select:none;user-select:none;vertical-align:top;margin-left:60px;padding-left:5px;width:240px;display:inline-block;height:30px;position:absolute;line-height:1.15;font-size:7px}
#examplebar #favorite div{-webkit-user-select:none;user-select:none;vertical-align:top;font-family:'Verdana';font-size:7px;font-variant:normal;font-stretch:normal;font-weight:normal;font-style:normal;line-height:2;display:inline-block;margin-left:2px}
#examplebar .arrowright{-webkit-user-select:none;user-select:none;cursor:pointer;right:0px;position:absolute;background:transparent;display:inline-block;height:30px;padding:0px;margin-left:5px;margin-right:5px;font-family:'jd_lcd_roundedregular';font-size:30px;font-variant:normal;font-stretch:normal;font-weight:normal;font-style:normal;line-height:1.15}
#examplebar .arrowleft{-webkit-user-select:none;user-select:none;cursor:pointer;position:absolute;background:transparent;display:inline-block;height:30px;padding:0px;margin-left:315px;margin-right:5px;font-family:'jd_lcd_roundedregular';font-size:30px;font-variant:normal;font-stretch:normal;font-weight:normal;font-style:normal;line-height:1.15}
#examplebar #stefanvdfinancemarquee{-webkit-user-select:none;user-select:none;overflow:hidden;white-space:nowrap;box-sizing:border-box;font-family:'jd_lcd_roundedregular';height:30px;font-size:30px;font-variant:normal;font-stretch:normal;font-weight:normal;font-style:normal;line-height:1.15;position:relative}
#examplebar #stefanvdfinancemarquee .moveeffect{position:absolute;right:0;overflow:hidden;white-space:nowrap;box-sizing:border-box;height:30px}
#examplebar #stefanvdfinancemarquee .moveeffect:hover{animation-play-state:paused}
#examplebar #stefanvdfinancemarquee a:link,#examplebar #stefanvdfinancemarquee a:visited,#examplebar #stefanvdfinancemarquee a:hover,#examplebar #stefanvdfinancemarquee a:active{background:transparent;font-family:'jd_lcd_roundedregular';font-size:30px;font-variant:normal;font-stretch:normal;font-weight:normal;font-style:normal;line-height:1.15;text-decoration:none}
#examplebar #stefanvdfinancemarquee div{background:transparent;display:inline-block;height:30px;padding:0px;font-family:'jd_lcd_roundedregular';font-size:30px;font-variant:normal;font-stretch:normal;font-weight:normal;font-style:normal;line-height:1.15}
#examplebar #stefanvdfinancemarquee div a:link,#examplebar #stefanvdfinancemarquee div a:visited,#examplebar #stefanvdfinancemarquee div a:hover,#examplebar  #stefanvdfinancemarquee div a:active{background:transparent;font-family:'jd_lcd_roundedregular';font-size:30px;font-variant:normal;font-stretch:normal;font-weight:normal;font-style:normal;line-height:1.15;color:white}
#examplebar #stefanvdfinancemarquee div span{background:transparent;margin-left:2px;font-family:'jd_lcd_roundedregular';font-size:30px;font-variant:normal;font-stretch:normal;font-weight:normal;font-style:normal;line-height:1.15}
#examplebar #stefanvdfinancemarquee .green a:link,#examplebar #stefanvdfinancemarquee .green a:visited,#examplebar #stefanvdfinancemarquee .green a:hover,#examplebar #stefanvdfinancemarquee .green a:active,#examplebar #favorite div .green{color:green}
#examplebar #stefanvdfinancemarquee .red a:link,#examplebar #stefanvdfinancemarquee .red a:visited,#examplebar #stefanvdfinancemarquee .red a:hover,#examplebar #stefanvdfinancemarquee .red a:active,#examplebar #favorite div .red{color:red}
#examplebar #stefanvdfinancemarquee .orange a:link,#examplebar #stefanvdfinancemarquee .orange a:visited,#examplebar #stefanvdfinancemarquee .orange a:hover,#examplebar #stefanvdfinancemarquee .orange a:active,#examplebar #favorite div .orange{color:orange}
#examplebar #stefanvdfinancemarquee .white a:link,#examplebar #stefanvdfinancemarquee .white a:visited,#examplebar #stefanvdfinancemarquee .white a:hover,#examplebar #stefanvdfinancemarquee .white a:active,#examplebar #favorite div .white{color:white}
#examplebar #stefanvdfinancemarquee .yellow a:link,#examplebar #stefanvdfinancemarquee .yellow a:visited,#examplebar #stefanvdfinancemarquee .yellow a:hover,#examplebar #stefanvdfinancemarquee .yellow a:active,#examplebar #favorite div .yellow{color:#FFCC00}
/* financetoolbar only */
#toolbarwhitelist{margin-left:30px}
#toolbarwhitelist input[type=url]{width:360px;float:left}
#toolbarwhitelist select{width:437px;margin-right:16px}
textarea{background-color:var(--totl-checkbox-label-background);border:var(--totl-checkbox-label-border);user-select:none;color:var(--totl-title-color);outline:none}
#apikey{width:300px}
/* html */
.sharemenu{position:absolute;right:0;margin-top:-27px;color:#666;font-size:11px}
.sharemenu div{display:inline-block;vertical-align:middle}
/* donation button */
.donatebutton{background:#FDD835;-webkit-user-select:none;-moz-user-select:none;user-select:none;color:#000;font-size:12px;min-width:7em;padding:2px 10px;text-decoration:none;text-transform:uppercase;box-shadow:0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12),0 2px 4px -1px rgba(0,0,0,.2)}
.donatebutton:hover{background:rgba(253,216,53,.6)}
/* load */
#productwelcomeimageload{display:block;margin-left:auto;margin-right:auto;padding-left:0;font-family:verdana;font-size:16px;color:#000;text-align:center}
#productwelcomeimageload .icon{display:flex;align-items:center;justify-content:center}
/* loading bar */
#loadinghelp{bottom:10px;position:absolute;right:15px}
#loading{position:fixed;width:100%;height:100%;z-index:500;background:rgba(255,255,255,1);margin:0;padding:0;left:0;top:0}
#loadingcenter{margin:20% auto;width:500px}
#progressbar{width:500px;height:5px;background-color:rgba(33,150,243,0.5);clear:both;margin:5px 0}
#progress{background:rgb(33,150,243);height:5px;width:0;max-width:100%;float:left;animation:progress 2s 1 forwards}
#pbaranim{height:5px;width:500px;overflow:hidden;opacity:.25}
@keyframes progress{to{width:500px}}
/* help text */
.helpwhatproblem{background:#FFF59D;color:#000;padding:10px;line-height:25px}
.videopreview{display:inline-block;float:left;padding-right:24px}
.videopreview iframe{width:480px;height:270px;box-shadow:0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12)}
.suggpanel{width:335px;position:relative;display:inline-block;float:left}
/* lamp */
#loadinglamp{margin-right:5px;vertical-align:-2px}
/* share box */
#shareboxyoutube{background:url(../images/youtube@2x.png)left top no-repeat;background:-webkit-image-set(url(../images/youtube.png) 1x,url(../images/youtube@2x.png) 2x);width:25px;height:18px;display:inline-block;background-size:cover;margin-left:10px;margin-right:10px;cursor:pointer}
#shareboxfacebook{background:url(../images/facebook@2x.png)left top no-repeat;background:-webkit-image-set(url(../images/facebook.png) 1x,url(../images/facebook@2x.png) 2x);width:18px;height:18px;display:inline-block;background-size:cover;margin-right:10px;cursor:pointer}
#shareboxtwitter{background:url(../images/twitter@2x.png)left top no-repeat;background:-webkit-image-set(url(../images/twitter.png) 1x,url(../images/twitter@2x.png) 2x);width:18px;height:18px;display:inline-block;background-size:cover;cursor:pointer}
#shareboxrate:hover,#shareboxyoutube:hover,#shareboxfacebook:hover,#shareboxtwitter:hover{opacity:.8;cursor:pointer}
.probox{top:-18px;position:absolute;background:#FDD835;color:black;font-size:12px;padding:2px 12px;border-radius:2px;display:inline-block}
.proboxtext{display:inline-flex;line-height:18px;padding:15px 15px 10px}
.proboxbutton,.proboxbutton:hover{background:#4285f4;color:white;margin-left:25px}
.proboxbutton:hover{opacity:.8}
/* Review box */
#reviewextensionbox{height:75px;position:relative;-webkit-user-select:none;-moz-user-select:none;user-select:none}
.stars{position:absolute;color:#ffce32;font-size:38px;top:0;left:30px}
#ayh{position:absolute;font-size:20px;font-weight:700;top:0;right:30px;color:var(--totl-primary-font-color)}
#tllo{position:absolute;font-size:16px;top:25px;right:30px;color:var(--totl-primary-font-color)}
#nt{position:absolute;font-size:12px;font-weight:700;color:var(--totl-primary-font-color);text-transform:uppercase;top:60px;left:50px;cursor:pointer}
#war{position:absolute;font-size:12px;font-weight:700;color:#39F;text-transform:uppercase;top:60px;right:30px;cursor:pointer}
/* Profile */
.cardokbutton{display:inline-block;-webkit-user-select:none;-moz-user-select:none;user-select:none;margin:8px 0;float:left;background:0 0;border:none;border-radius:2px;color:#2296f3;position:relative;height:36px;min-width:64px;padding:0 16px;font-family:"Roboto","Helvetica","Arial",sans-serif;font-size:14px;font-weight:500;text-transform:uppercase;letter-spacing:0;overflow:hidden;outline:none;cursor:pointer;text-decoration:none;text-align:center;line-height:36px;vertical-align:middle}
.cardokbutton:active{background-color:rgba(158,158,158,.4)}
.cardokbutton:hover{background-color:rgba(158,158,158,.2)}
.suggpanel .desprofile{display:block;min-height:85px}
.suggpanel .profile{background:var(--totl-card-background);display:inline-block;vertical-align:top;margin:0px;position:relative;padding:0;border-radius:2px;box-shadow:0 1px 3px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.24);transition:all 0.3s cubic-bezier(.25,.8,.25,1);width:100%;min-height:270px}
.suggpanel .profile:hover{box-shadow:0 14px 28px rgba(0,0,0,0.25),0 10px 10px rgba(0,0,0,0.22)}
.suggpanel .profile .cardactionbox{position:relative;display:inline-block;width:100%;height:50px}
.submitprofile{position:absolute;bottom:5px;margin:10px 0px}
.primarytitle{padding:24px 16px 0px 16px;font-size:16px;position:relative}
.subtitle{padding:0px 16px 16px 16px;font-size:13px;color:var(--totl-subtitle-color)}
.supporttitle{padding:0px 16px 16px 16px;font-size:13px;display:inline-block}
.endttitle{padding:0px 16px 24px 16px;font-size:13px}
/* tablet */
.introworks{display:inline-block;padding:24px 16px 0px 16px;position:relative;height:145px}
.introworks .step{height:30px;position:relative}
.introworks .step .stepdescription{font-size:13px;width:100%;text-align:left;float:left}
header{background:var(--totl-primary-background);color:var(--totl-primary-font-color);-webkit-user-select:none;-moz-user-select:none;user-select:none;width:100%;box-shadow:0 2px 5px rgba(0,0,0,.26);display:block;flex-direction:row;align-items:center;z-index:399;position:fixed}
header .messagehead{align-items:center;display:flex;width:100%;position:relative;margin:0;padding:0}
header .masterhead{min-height:56px;align-items:center;display:flex;position:relative;margin:0;padding:0 16px}
header .icon{position:relative;display:inline;margin:0;top:1px}
header .title{color:var(--totl-primary-font-color);-webkit-user-select:none;-moz-user-select:none;user-select:none;margin-left:54px;font-size:18px;position:absolute;top:17px;left:0;cursor:pointer}
header .rightmenu{position:absolute;width:24px;height:24px;top:6px;right:20px;padding:10px;border-radius:50%}
header .rightmenu svg{fill:var(--totl-svg-fill-color)}
header .rightmenu:hover{background:var(--totl-svg-fill-color-hover);cursor:pointer}
#dropmenu.hide{display:none}
#dropmenu.show{display:block}
#dropmenu ul{line-height:48px;list-style:none;margin:0;padding:0}
#dropmenu{box-shadow:0 2px 4px 0 rgba(0,0,0,0.16),0 2px 8px 0 rgba(0,0,0,0.12);position:absolute;top:42px;right:24px;width:200px;z-index:800;background:var(--totl-primary-background);padding:10px 0px}
#dropmenu svg{position:relative;top:3px;margin-right:10px;fill: var(--totl-sidebar-icon-background)}
#dropmenu ul li{height:48px;user-select:none;padding:0px 16px;color:var(--totl-primary-font-color);cursor:pointer}
#dropmenu ul li:hover{background-color:var(--totl-dropmenu-li-background-hover)}
#dropmenu ul li:active{background-color:var(--totl-dropmenu-li-background-active)}
#menu{-webkit-user-select:none;user-select:none;z-index:399;position:absolute;top:5px;left:5px;height:45px;width:45px;border-radius:50%}
#menu:hover{ background:var(--totl-menu-background-hover);cursor:pointer}
#menuToggle{height:12px;width:20px;border-radius:50%;position:absolute;top:0;bottom:0;margin:auto;left:0;right:0}
#menuToggle span{display:block;width:20px;height:2px;margin-bottom:3px;position:relative;background:var(--totl-primary-font-color)}
/* Mobile sidebar */
input[type=checkbox]:checked ~ #navbar-container{display:none}
input[type=checkbox]:checked ~ #mainview{padding-left:0px}
#darkpanel{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.4);opacity:0;transition:opacity 0.3s cubic-bezier(0,0,0.3,1);z-index:400;pointer-events:none}
#reveal-menu{display:none}
/* track */
input[type=range]{-webkit-appearance:none!important;-moz-appearance:none!important;appearance:none!important;width:100%;height:20px;background:transparent;border:none;border-radius:10px;transition:all 400ms;outline:none;padding:0;margin:0;cursor:pointer}
input[type=range]:focus{outline:none}
input[type=range]::-webkit-slider-runnable-track{width:100%;height:2px;background-color:var(--totl-range-background);border:none;border-radius:10px;transition:all 400ms;outline:none;padding:0;margin:0}
input[type=range]::-moz-range-track{width:100%;height:2px;background-color:var(--totl-range-background);border:none;border-radius:10px;transition:all 400ms;outline:none;padding:0;margin:0}
input[type=range]::-ms-track{width:100%;height:2px;background:transparent;border-color:transparent;border-width:6px 0;color:transparent}
input[type=range]::-ms-fill-lower{background-color:#4285f4;border:none;border-radius:10px;transition:all 400ms;outline:none;padding:0;margin:0}
input[type=range]::-ms-fill-upper{background-color:#4285f4;border:none;border-radius:10px;transition:all 400ms;outline:none;padding:0;margin:0}
/* thumb */
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none!important;-moz-appearance:none!important;appearance:none!important;transform:scale(0.75);width:20px;height:20px;border:none;background-color:var(--totl-range-background);border-radius:40px;box-shadow:0px 0px 0px green;transition:all 400ms;outline:none;margin-top:-9px}
input[type=range]::-moz-range-thumb{-webkit-appearance:none!important;-moz-appearance:none!important;appearance:none!important;transform:scale(0.75);width:20px;height:20px;border:none;background-color:var(--totl-range-background);border-radius:40px;box-shadow:0px 0px 0px green;transition:all 400ms;outline:none;margin-top:0px}
input[type=range]::-ms-thumb{-webkit-appearance:none!important;-moz-appearance:none!important;appearance:none!important;transform:scale(0.75);width:20px;height:20px;border:none;background:#4285f4;border-radius:40px;box-shadow:0px 0px 0px green;transition:all 400ms;outline:none;margin-top:0px}
/* thumb hover */
input[type=range]::-webkit-slider-thumb:hover{transform:scale(0.85)}
input[type=range]::-moz-range-thumb:hover{transform:scale(0.85)}
/* thumb active */
input[type=range]::-webkit-slider-thumb:active{transform:scale(1)}
input[type=range]::-moz-range-thumb:active{transform:scale(1)}
input[type=range]::-moz-focus-outer{border:0}
/* Disable */
input[type=range][disabled]::-webkit-slider-runnable-track{background-color:var(--totl-range-disabled-background)}
input[type=range][disabled]::-moz-range-track{background-color:var(--totl-range-disabled-background)}
input[type=range][disabled]::-webkit-slider-thumb{background-color:var(--totl-range-disabled-background)}
input[type=range][disabled]::-moz-range-thumb{background-color:var(--totl-range-disabled-background)}
/* sub */
.md-subin{transform:translateX(22px)}
.md-subgroup{display:inline-block;vertical-align:middle}
/* Color */
.md-color{position:relative;margin:16px 0;box-sizing:border-box;height:18px}
.md-color .input-color-container{position:relative;overflow:hidden;width:56px;height:16px;border:var(--totl-checkbox-label-border);border-radius:2px;display:inline-block;vertical-align:middle;margin-right:10px}
.md-color input[type=color]{position:absolute;right:-25px;top:-5px;width:102px;height:30px;border:none;margin:0;padding:0}
.md-color label div{vertical-align:middle;display:inline;box-sizing:border-box}
.md-color label{display:inline-block}
/* Checkbox */
.md-checkbox{position:relative;margin:16px 0;box-sizing:border-box;height:18px}
.md-checkbox label{cursor:pointer;box-sizing:border-box}
.md-checkbox label div{vertical-align:middle;display:inline;box-sizing:border-box}
.md-checkbox label::before,.md-checkbox label::after{content:"";position:absolute;left:0;top:0;box-sizing:border-box}
.md-checkbox label::before{width:20px;height:20px;background:var(--totl-checkbox-label-background);border:var(--totl-checkbox-label-border);border-radius:2px;cursor:pointer;transition:background 0.3s;box-sizing:border-box}
.md-checkbox input[type=checkbox]{outline:0;margin-right:15px;box-sizing:border-box;width:12px;height:12px;opacity:0;float:left}
.md-checkbox input[type=checkbox]:checked + label::before{background:var(--totl-checkbox-checked);border:none;box-sizing:border-box}
.md-checkbox input[type=checkbox]:checked + label::after{transform:rotate(-45deg);top:5px;left:4px;width:12px;height:6px;border:2px solid #fff;border-top-style:none;border-right-style:none;box-sizing:border-box}
.md-checkbox input[type=checkbox]:checked[disabled] + label::before{background:var(--totl-checkbox-checked-disabled);border:var(--totl-checkbox-checked-disabled-border)}
.md-checkbox input[type=checkbox][disabled] + label::before{border:var(--totl-checkbox-checked-disabled-border)}
/* Radio button */
.md-radio{position:relative;margin:16px 0;box-sizing:border-box;height:18px}
.md-radio label{cursor:pointer;box-sizing:border-box}
.md-radio label div{vertical-align:middle;display:inline;box-sizing:border-box}
.md-radio label::before,.md-radio label::after{content:"";position:absolute;left:0;top:0;box-sizing:border-box}
.md-radio label::before{width:20px;height:20px;background:var(--totl-radio-label-background);border:var(--totl-radio-label-border);border-radius:50%;transition:all .3s ease;transition-property:transform,border-color;box-sizing:border-box}
.md-radio input[type=radio]{outline:0;margin-right:10px;box-sizing:border-box;width:12px;height:12px;opacity:0} 
.md-radio input[type=radio]:checked + label:before{border-color:var(--totl-radio-checked-border);box-sizing:border-box}
.md-radio input[type=radio]:checked + label:after{transform:scale(1);top:5px;left:5px;width:10px;height:10px;border-radius:50%;background:var(--totl-radio-checked-border);box-sizing:border-box}
.md-radio input[type=radio]:checked[disabled] + label::before{border-color:var(--totl-radio-checked-disabled)}
.md-radio input[type=radio]:checked[disabled] + label::after{background:var(--totl-radio-checked-disabled)}
.md-radio input[type=radio][disabled] + label::before{border-color:var(--totl-radio-checked-disabled)}
/* Select Field */
select:not([multiple]){background:var(--totl-select-only-background);font-family:inherit;width:100%;padding:4px 16px;font-size:16px;color:var(--totl-select-only-color);border:none;border-bottom:var(--totl-select-only-border);border-radius:0} 
select:not([multiple]):hover{color:var(--totl-select-only-hover-color);border-bottom:var(--totl-select-only-hover-border)}
select:not([multiple])[disabled]{box-shadow:none;color:var(--totl-select-disable-color);border-bottom:var(--totl-input-number-disabled-border)}
/* Remove focus */
select:focus{outline:none;border-bottom:var(--totl-select-only-border-focus)}
/* Use custom arrow */
.md-selectfield label{display:none}
.md-selectfield select{-webkit-appearance:none;-moz-appearance:none;appearance:none}
.md-selectfield{font-family:'Roboto','Helvetica','Arial',sans-serif;position:relative}
.md-selectfield:after{position:absolute;top:0.75em;right:0.5em;width:0;height:0;padding:0;content:'';border-left:.25em solid transparent;border-right:.25em solid transparent;border-top:var(--totl-select-only-border-top);pointer-events:none}
/* Multi */
select[multiple]{background:var(--totl-select-background);box-shadow:0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);padding:6px 0;border:none;border-radius:0}
select[multiple] option{padding:8px 24px;font-size:13px;color:var(--totl-select-option-color)}
select[multiple]:focus option:checked{background:var(--totl-select-option-checked-background)}
select[multiple][disabled]{box-shadow:none;background-color:var(--totl-select-disable-background);color:var(--totl-select-disable-color)}
select[multiple][selected]:disabled,select option:checked,select option:checked[disabled]{background:var(--totl-select-disable-option);color:var(--totl-select-disable-color)}
/* button */
button{-webkit-user-select:none;-moz-user-select:none;user-select:none;background:0 0;border:none;border-radius:2px;color:var(--totl-button-color);position:relative;height:36px;margin:0;min-width:64px;padding:0 16px;display:inline-block;font-family:"Roboto","Helvetica","Arial",sans-serif;font-size:14px;font-weight:500;text-transform:uppercase;letter-spacing:0;overflow:hidden;will-change:box-shadow;transition:box-shadow .2s cubic-bezier(.4,0,1,1),background-color .2s cubic-bezier(.4,0,.2,1),color .2s cubic-bezier(.4,0,.2,1);outline:none;cursor:pointer;text-decoration:none;text-align:center;line-height:36px;vertical-align:middle;box-shadow:0 4px 5px 0 rgba(0,0,0,.14), 0 1px 10px 0 rgba(0,0,0,.12), 0 2px 4px -1px rgba(0,0,0,.2);background-color:var(--totl-button-background)}
button:active{background-color:var(--totl-button-background-active)}
button:hover{background-color:var(--totl-button-background-hover)}
/* number */
.md-number{position:relative;margin:16px 0;box-sizing:border-box;height:18px}
/* time */
.md-time{position:relative;margin:16px 0;box-sizing:border-box;height:18px}
/* input other */
input[type=url]::placeholder{color:var(--totl-input-url-placeholder-color)}
input[type=number]{width:40px}
input[type="time"],input[type="number"],input[type="password"],input[type="text"],input:not([type]){background:var(--totl-input-other-background);height:18px;padding:2px 5px;border-radius:0px;border:none;border-bottom:var(--totl-input-other-border);font-size:inherit;outline:none;font-size:12px;color:var(--totl-input-other-color)}
input[type="time"]:hover,input[type="number"]:hover,input[type="password"]:hover,input[type="text"]:hover,input:not([type]):hover{outline:none;border-bottom:var(--totl-input-number-hover-border);color:var(--totl-input-number-hover-color)}
input[type="time"]:focus,input[type="number"]:focus,input[type="password"]:focus,input[type="text"]:focus,input:not([type]):focus{border-bottom:var(--totl-input-other-border-focus)}
input[type=url]{background:var(--totl-input-url-background);color:var(--totl-input-url-color);padding:10px;box-shadow:0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);border:none;outline:none;font-size:13px}
/* special */
#websitezoomnumber,#screenzoomnumber,#screenzoomname{width:39px;padding:10px;background-color:var(--totl-input-other-multi-background);color:var(--totl-input-url-color);box-shadow:0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);border:none;outline:none;font-size:13px;height:auto}
#websitezoomnumber[disabled],#screenzoomnumber[disabled],#screenzoomname[disabled]{box-shadow:none;background-color:var(--totl-input-url-disabled-background);color:var(--totl-input-url-disabled-color)}
/* Disable url */
input[type=url][disabled]{box-shadow:none;background-color:var(--totl-input-url-disabled-background);color:var(--totl-input-url-disabled-color)}
/* Disable number */
input[type=number][disabled],input[type=password][disabled]{border:none;border-bottom:var(--totl-input-number-disabled-border);color:var(--totl-input-number-disabled-color)}
/* Disable text */
input[type=text][disabled]{border:none;border-bottom:var(--totl-input-text-disabled-border);color:var(--totl-input-text-disabled-color)}
/* Disable buttons */
button[disabled],input[type=button][disabled],input[type=submit][disabled],button[disabled]:hover,input[type=button][disabled]:hover,input[type=submit][disabled]:hover{box-shadow:none;background-color:var(--totl-button-disabled-background);color:var(--totl-button-disabled-color);cursor:default}
/* Modal */
#materialModal{font-family:Arial,sans-serif;position:absolute;top:0px;left:0px;width:100%;height:100%;background:rgba(0,0,0,0.5);display:table;z-index:1000}
#materialModalCentered{display:table-cell;vertical-align:middle;padding:20px}
#materialModalContent{border-radius:2px;padding:14px;position:relative;color:var(--totl-primary-font-color);background:var(--totl-primary-background);max-width:450px;min-height:200px;margin:auto;box-shadow:0px 10px 20px 0px rgba(0,0,0,0.4);box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;user-select:none}
#materialModalTitle{margin:10px;font-weight:bold;font-size:16px}
#materialModalText{margin:10px;margin-bottom:60px}
#materialModalButtons{width:calc(100% - 24px);position:absolute;bottom:0px}
.materialModalButton{-webkit-user-select:none;-moz-user-select:none;user-select:none;margin:8px 0;float:right;background:0 0;border:none;border-radius:2px;color:#2296f3;position:relative;height:36px;min-width:64px;padding:0 16px;font-family:"Roboto","Helvetica","Arial",sans-serif;font-size:14px;font-weight:500;text-transform:uppercase;letter-spacing:0;overflow:hidden;outline:none;cursor:pointer;text-decoration:none;text-align:center;line-height:36px;vertical-align:middle}
.materialModalButton:active{background-color:rgba(158,158,158,.4)}
.materialModalButton:hover{background-color:rgba(158,158,158,.2)}
#materialModal.hide,#materialModalRate.hide,#materialModalIntroduce.hide{opacity:0;transition:opacity 0.2s ease-out;pointer-events:none}
#materialModal.hide #materialModalCentered,#materialModalRate.hide #materialModalRateCentered,#materialModalIntroduce.hide #materialModalIntroduceCentered{transform:scale(0.8);transition:transform 0.2s ease-out}
#materialModal.show,#materialModalRate.show,#materialModalIntroduce.show{opacity:1;transition:opacity 0.2s ease-in}
#materialModal.show #materialModalCentered,#materialModalRate.show #materialModalRateCentered,#materialModalIntroduce.show #materialModalIntroduceCentered{transform:scale(1);transition:transform 0.2s ease-in}
#materialModalRateTitle{margin:24px;font-weight:bold;font-size:16px}
#materialModalRateText{margin:24px;margin-bottom:60px}
#materialModalRateButtons{width:calc(100% - 8px);position:absolute;bottom:0px}
#materialModalRateContent img{background:#ffcf00}
#materialModalIntroduceContent img{background:#4285f4}
#materialModalIntroduce,#materialModalRate{font-family:Arial,sans-serif;position:absolute;top:0px;left:0px;width:100%;height:100%;background:rgba(0,0,0,0.5);display:table;z-index:1000}
#materialModalIntroduceCentered,#materialModalRateCentered{display:table-cell;vertical-align:middle;padding:20px}
#materialModalIntroduceContent,#materialModalRateContent{padding:0px;position:relative;color:var(--totl-primary-font-color);background:var(--totl-primary-background);max-width:450px;min-height:385px;margin:auto;box-shadow:0px 10px 20px 0px rgba(0,0,0,0.4);box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;user-select:none;border-radius:15px;overflow:hidden}
#materialModalIntroduceTitle{margin:15px;font-size:18px;text-align:center}
#materialModalIntroduceText{margin:10px;margin-bottom:60px;text-align:center}
#materialModalIntroduceButtons{width:calc(100% - 12px);position:absolute;bottom:0px}
/* About */
.aboutbuttons button{margin:15px 10px 0 0;display:inline-block}
@keyframes slide-in{from{left:-280px}to{left:0}}
@keyframes slide-out{from{left:0}to{left:-280px}}
/* mobile */
@media only screen and (max-width:480px),
only screen and (max-device-width:480px){
  #navbar-container{z-index:401;box-shadow:0 0 16px rgba(0,0,0,.28);animation:slide-out 0.5s ease;animation-fill-mode:forwards}
  body{min-width:auto;min-height:auto}
  #mainview{padding-left:0px}
  #mainview-content{max-width:100%;min-width:100%}
  section{-webkit-box-orient:vertical}
  #loadingcenter{width:230px}
  #progressbar{width:230px}
  #dont-turn-off-the-lights{width:100%;height:auto}
  .suggpanel{width:100%}
  .videopreview{width:100%;padding-right:0}
  .videopreview iframe{width:100%;height:auto}
  #toolbarwhitelist{margin-left:0px}
  #toolbarwhitelist input[type=url]{width:85px;float:left}
  #toolbarwhitelist select{width:166px}
  #Stocklist{margin-left:0px}
  #Stocklist input[type=url]{width:85px;float:left}
  #Stocklist select{width:158px}
  #Stocklistdouble{margin-left:0px}
  #Stocklistdouble input[type=url]{width:85px;float:left}
  #Stocklistdouble select{width:158px}
  #ayh{font-size:12px;right:15px}
  #apicon{left:100px}
  #apname{left:142px}
  #aptllo{font-size:11px;top:5px;right:5px}
  .stars{font-size:24px;top:14px;left:15px}
  #nt{left:15px}
  #war{right:15px}
  #materialModalCentered,#materialModalRateCentered{padding:0}
  #materialModalContent,#materialModalRateContent{max-width:none;height:100%;border-radius:0}
  .dimrange{width:100%}
  .aboutbuttons button{margin:15px 0;display:block}
  /* for mobile only */
  input[type=checkbox]:checked ~ #navbar-container{display:block;animation:slide-in 0.5s ease;animation-fill-mode:forwards}
  input[type=checkbox]:checked ~ #darkpanel{opacity:1;display:block;pointer-events:auto}
}