html, body {height:100%; overflow:hidden;
}
body {
    -webkit-user-select: none; 
    display:flex;
    flex-direction: column;
    margin:0px;
    padding:0px;
    min-height:250px;
}

no-stretch {flex:none;}
//row {align-items:stretch;}

div {box-sizing:border-box;}

#launch-btn {
    padding:10px;
    font-size:10vw;
    font-family:'BonerLogo'; 
    text-transform:capitalize;
    
}

.title {
    cursor:pointer;
    //text-align:right;
    font-family: Century Gothic, Arial;
    //padding:10px 25px;
    //overflow:hidden;
    white-space: nowrap;
    background-color:#e6461a;;
    color:white;
    position:relative;
    //transition: background-color 0.5s;
    //-webkit-transition: background-color 0.5;
    cursor:pointer;
    font-size:16px;
    //height:42px;
    height:60px;
    //text-indent:-9000px;
    justify-content: flex-end;
    align-items: center;


}

.title #logo {
    background-image:url(../images/Patreon_logo_sm.svg);
    background-repeat: no-repeat;
    background-size: auto 40px;
    //background-size: contain;
    background-position: right 10px center;
    //background-position: right 0px center;
    min-width:120px;
    align-self: stretch;
    //min-height:20px;
    flex: 2;
    transition: all .5s;
}

.title #account {
    background-color: azure;
    height:40px;
    width:40px;
    margin:5px;
    border-radius:30px;
    cursor:pointer;
    flex:none;
    transform: scale(1);
    transition: transform .3s;
}

.title #account:hover {
    //border-width:1px;
    transform: scale(1.2);
}

@media all and (max-width: 260px) {
    .title #logo {background-size: auto 30px;}
}

#logo {
    //max-width:200px;
    max-width:250px;
    min-width:100px;
}

//.title:hover {background-color:cornflowerblue;}

.title .version {
    font-size:12px;
    position:relative;
    //bottom:6px;
    //left:50%;
    right:25px;
    top:12px;
    //margin-left:82px;
    //margin-left:30vw;
    height:0px;
    width:0px;
    //top:20px;
    display:inline-block;    
}

icon {
    display:inline-block;
    height: 16px;
    width: 16px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
.patreon{background-image: url(../images/Patreon_logo.svg);}

#link-account {cursor:pointer;}

.connecting .patreon {display:none;}
.connecting .loader {display:inline-block;}
.loader {display:none;}

[link] {height:22px;line-height: 14px;border:0px;}

.dark .link-icon{background-image:url(../images/patreon_logo_black.svg);}
.dark.connecting .link-icon {background-image:url(../images/radio_black.svg);  }

.link-icon {
    width:12px; 
    display:inline-block;
    vertical-align: top;
    height:12px;
    background-image:url(../images/patreon_logo.svg);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat; 
}
.connecting .link-icon {
    background-image:url(../images/radio.svg);    
}

.link-icon + span:not(:empty) {
    margin-left:5px;
}

button img {
    width:16px;
    vertical-align:top;    
}

option.divider {
    min-height:1px;
    background-color:#999;
    padding:0px;
    margin:2px 0px;
}


button.icon {
    //padding-left:20px;
    background-repeat: no-repeat;
    //background-position: calc(50% - 45px);
    background-position:center;
    background-size: 16px; 
    cursor:pointer;
    height:24px;
    min-width:24px;
}

#account-select {
    height:24px;
}

.title icon.patreon{
    margin:0px 2px;
    position:relative;
    top:-2px;
    vertical-align:middle;
}
/*.title .version span {
    position:relative;
    right:20px;
    
    
}*/

button[checked]{
    //background-color:red;
}


account-details {
    display:flex;
    position:relative;
    flex-direction: column;
    
}

#account-thumb{
    height:96px; 
    width:96px; 
    background-color:#1f1f1f; 
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    cursor:pointer;
}


toggle {
    background-color:#1f1f1f;
    outline:0;
    margin:2px;
    padding:5px;
    color:#d4d4d4;
    font-family: "Segoe UI";
    box-sizing:border-box;
    text-align:center;
    cursor:pointer;
}

toggle choice {
    display:none;
    cursor:inherit;

}
toggle choice[selected] {display:block;}

toggle:hover{background-color:#000000;}
toggle:active{color:#4dd2ff;}

#timecode-frames {
    height:23px;
    width:23px;
    font-weight:bold;
    text-align: center;
    padding:2px;
    cursor:pointer;
}

#patrons .processed {color:#3F3;}
#patrons .declined {color:#F00;}

//#rewards .load::before{
//    content:'b';
//    font-family: "Patronizer Icons";
//}


#timecode-frames:before {content:'f';}
#timecode-frames[checked] {background-color:red;}
#timecode-frames[checked]:before {content:'TC';}

footer {
    flex:none;
    height:20px;
    width:100%;
    display:flex;
    padding:2px;
    box-sizing: border-box;
    justify-content:space-between;
}

footer a:link {color:white;}

#main {transition: all .5s }
.blur {
    -webkit-filter:blur(2px);
}

loader, notice {
    position:absolute;
    top:0px;
    left:0;
    height:100%;
    width:100%;
    display:flex;
    flex-direction:column;
    align-items: center;
    justify-content: center;
    background-color: RGBA(38,38,38,.8)    
}

loader h2, notice h2 {
    text-align:center;
    font-style:italic;
    margin-top:10;
    //color:white;
    font-family:Gotham;
}

notice h2 {
    margin-left: 20px; margin-right:20px;
    font-style:italic;
    font-family:Gotham;
    text-align: left;
    
}


notice button {
    padding-left:10px;
    padding-right:10px;
}
.patreon_btn {
    padding-right:28px;
    background-image: url(../images/Patreon_logo.svg);
    background-repeat: no-repeat;
    background-size:16px;
    background-position: calc(100% - 5px) center;
    background-color:#e6461a;
    cursor:pointer;
}

.patreon_btn:hover {background-color:#ee6644;}

.patreon_btn:active {color:white;}

loader h2 img {
    position: relative;
    top:2px;
    vertical-align: baseline;
}

loader img.logo {width:90%;}


notice #notice-msg {margin-left: 20px; margin-right:20px; text-align: left;}
notice #notice-options {margin-top:10px;}

progress-bar {
    height:8px;
    //border:1px solid black;
    position:relative;
    width:90%;
    background-color: white;
    display:block;
    //box-sizing:border-box;
    //box-shadow: 10px black;
}
progress-bar span {
    position:relative;
    width:0%;
    height:100%;
    background-color:#e6461a;
    display:block;
    box-sizing: border-box;
}
progress-bar.animating span {transition: width 1s;}
//progress-bar:hover span {width:100%;}

.animate {opacity: 1;}
.animate.ng-hide-add, .animate.ng-hide-remove {
  transition: all linear 0.5s;
}
.animate.ng-hide {opacity: 0;}

[hidden] {display:none !important;}


@font-face {
    font-family:'Patronizer Icons';
    src: url('fonts/patronizer.ttf')  format('truetype');
}

@font-face {
    font-family:'Gotham';
    src: url('../fonts/GOTHIC.TTF')  format('truetype');
}