html,body {
    overflow:hidden;
    height: 100%
}


html, body {
    /* margin-top:43px; */
    font-family: "Helevitica", "Arial";
    overflow-x: hidden !important;
}

.container {
    max-width: 100% !important;
    overflow-x: hidden !important;
}

#page {
   /* margin-top:55px; */
}

header {
    /* margin-bottom: 52px; */
}

.vc{
    height: 100%;
}

.vheader {
    background-color: darkorange;
    background-image: linear-gradient(darkorange,orange);
    background: darkorange;
    background: linear-gradient(darkorange,orange);
    padding-top:24px;
    height:56px;
    top: 0px;
    width: 100%;
}

.vheader-android {
    margin-top: 30px;
}

.vcenter {
    text-align: center !important;
}

.vheaderrow {
    margin-right: 5px;
    margin-left: 5px;
}

.vfooter {
    background-color: orange;
    background-image: linear-gradient(orange,darkorange);
    background: orange;
    background: linear-gradient(orange,darkorange);
    height: 70px;
    position: absolute;
    bottom: 0px;
    width: 100vw;
    z-index: 101;
}

.vfoottext {
    font-size: 10px;
    color: #333333;
    vertical-align: top;
    /* padding-left: 4px; */
}

.vfooterrow {
    margin-top: 5px;
}

.vtop{
    vertical-align: top !important;
}

.vnav {
    text-align: center;
    font-weight: bold;
    padding-top: 2px;
}

.vfnav{
    width:25%;
    font-size: 14px;
    color: #666666;
    cursor: pointer;
}

.vthead {
    background-color: #eeeeee;
    color: #777777;
    font-size: 14px;
    text-align: center;
    border-radius: 0px;
    padding:3px;
}

.vcontent{
}

.vtagline{
    padding-top: 15px;
    font-style: italic;
}

.vtable{
    display:table;
    width:100%;
    margin-bottom: 140px;
}

.vtable-profile {
    display:table;
    width:100%;
}

.vrow {
    display:table-row;
    width:100%;
}

.vcol {
    display: table-cell;
    padding: 4px 10px 4px 2px;
    border-bottom: 1px solid #DDDDDD;
    vertical-align: middle;
    text-align: left;
}

.vlogin{
    margin-top: 60px;
    text-align: center;
    padding-bottom: 90px;
}

/* vyb col styles */
.vname {
    font-size: 18px;
    color: #555555;
    font-weight: bold;
}

.vlistname{
    cursor:pointer;
}

.vstatus {
    vertical-align: top;
    padding: 5px 3px 5px 0px;
}

.vdesc {
    font-size: 13px;
    color: #888888;
}

.vcredit {
    font-size: 12px;
    color: #777777;
    opacity: 0.7;
    word-break: break-word;
}

.vlogdate {
    color: #777777;
    font-size: 16px;
    max-width: 120px;
    vertical-align: top;
}

.vlogsempty{
    text-align: center;
    color: #777777;
    font-size: 14px;
}

.vybsempty{
    cursor:pointer;
    text-align: center;
    color: #777777;

}

.vlogvybname {
    color: #666666;
    font-weight: bold;
    font-size: 18px;
    cursor:pointer;
}

.vlogdelta {
    text-align: right;
    vertical-align: middle;
    font-size: 16px;
}

.vlogfollowing {
    font-size: 18px;
    color: #888888;
    max-width: 60vw;
}

.vlogfrom{
    font-size: 16px;
    color: #AAAAAA;
    max-width: 60vw;
}

img.vdeltaimg{
    cursor:pointer;
    margin-top:3px;
}

div.vrightcol{
    vertical-align: top;
    text-align: center;
    width:45px;
}

.vdeltaclick{
    cursor:pointer;
}

.vimgopaque{
    opacity: 0.25;
}

.vlabel{
    font-size: 12px;
    font-weight: bold;
    color: #9999CC !important;
    vertical-align: middle;
    width: 10px;
    cursor: pointer;
}

.vslabel{
    font-size: 12px;
    font-weight: bold;
    color: #999999 !important;
    vertical-align: middle;
}

 .vfcol{
    padding-top: 10px;
    padding-bottom: 10px;
 }

 .vfdesc {
     font-size:14px;
     color: #666666;
 }

.vparam{
    min-height: 20px;
    cursor: pointer;
    word-break: break-word;
 }

.vhide{
     display:none;
 }

.vinvisible{
    visibility: hidden;
}

.vpick:before{
    content:"\2713";
}

.vinput{
    border:none;
    margin:0px;
    padding:0px;
    cursor: text;
    width:100%
}

.vtextarea{
    border:none;
    margin:0px;
    padding:0px;
    cursor: text;
    background-color: #f2f2f2;
    resize: vertical;
    width: 100%;
    height: 4em;
}

.deltatrue {
    cursor:pointer;
}

.vback, .vadd{
    cursor:pointer;
    font-weight: bold;
    color: #666666;
}

.vback{
    text-align: left;
}
.vback:before{
    content: " < ";
}

.vadd{
    text-align: right;
    white-space: nowrap;
}

.vadd:before {
    content: " + vybit";
    font-size: 14px;
    cursor: pointer;
}

.vcancel,.vdone{
    color:#666666;
    cursor: pointer;
    font-size:14px !important;
}

.vbutton{
    text-align: center;
    padding: 5px;
}

.vybtest,.vybdelete, .vybaccept, .vybdecline{
    position: relative;
    left:-25px;
}

.vybshake {
    position: relative;
    animation: vybshakey 1s infinite;
}

.vybclick {
    cursor: pointer;
}

@keyframes vybshakey {
    6%   {left:-1px; }
    13%   {left:-2px; }
    19%   {left:-1px; }
    25%   {left:0px; }
    31%  {left: 1px;}
    38%   {left:2px; }
    44%  { left:1px;}
    50%   {left:0px; }
    56%   {left:-1px; }
    63%   {left:-2px; }
    69%   {left:-1px; }
    75%   {left:0px; }
    81%  {left: 1px;}
    88%   {left:2px; }
    94%  { left:1px;}
    100%   {left:0px; }
}

.vnone{
    cursor: auto;
}

.vlogout{
    width: 100%;
    text-align: center;
    margin-bottom: 45px;
}

.vyblogout {
    text-align: center;
}

.vassigned{
    color: #DDDDDD;
    cursor: initial;
}

.vpicked_sound{
    background-color: #EEEEEE;
}

.maintitle{
    overflow-x:hidden;
    white-space: nowrap;
    width:70%;
    font-size: 16px;
}

.vheadleft {
    /* padding-left: 15px; */
    text-align: left;
}

.vheadleft,.vheadright {
    width: 15%;
    font-size: 20px;
    white-space: nowrap;
}

.vheadright {
    float:right;
    /* padding-right: 15px; */
}

.vsplash {
    height: 100%;
    width: 100%;
    background-color: #ee8d31;
    text-align: center;
    vertical-align: center;
}

.vsplash_body{
    background-color: #e99c2c;
    background-image: url(images/vybit_logo.png);
    background-position: center top;
    background-repeat: no-repeat;
}

.vlogosplash{

}

.vscrollfull {
    overflow-y: scroll !important;
    height: calc(100vh - 83px);
    -webkit-overflow-scrolling: touch;
}

.vscrollfullpeeps {
    height: calc(100vh - 210px) !important;
}

.vscrolltophalf {
    overflow-y: scroll !important;
    height: calc(50vh - 53px);
    -webkit-overflow-scrolling: touch;
}

.vscrollbothalf {
    overflow-y: scroll !important;
    height: calc(50vh - 30px);
    -webkit-overflow-scrolling: touch;
}

.vbody{
    overflow: hidden;
}

.vpointer {
    cursor: pointer;
}

.vused {
    font-weight: bold;
    cursor: pointer;
}

.vfollow {
    color:darkgreen;
    font-weight: bold;
    font-size: 20px;
    width: 30px;
}

.vrowfollow {
    background-color: #e3ffe2;
}

.vimport {
}

.vremove {
}

.vsoundinfo{
    vertical-align: top;
}

.vsoundname, .vsounddesc {
    -ms-word-break: break-all;
    word-break: break-all;

    word-break: break-word;

    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
}

.vfirst{
}

.vplaceholder{
 font-size:12px;
 color: #d3d3d3;
}

.vset {
    font-size: 14px;
}

.vfootimg {
    vertical-align: top;
    height: 25px;
}

.vcreatevybbutton, .usesoundbutton {
    margin-top: 3px;
    font-size: 12px;
    cursor: pointer;
}

.vsearchtable{
    display:table;
    margin-bottom: 1px;
    width: 100%;
}

.vcolsearch{
    white-space: nowrap;
}

.vsearchimg{
    float:right;
    padding:2px;
    opacity: 0.2;
    cursor: pointer;
}
.vsearchinput{
    width: 90%;
    border: none;
    height: 50px;
    font-size: 18px;
}

.vsearchclear, .vsearchrefresh{
    opacity: 0.2;
    font-size:30px;
    font-weight: bold;
    vertical-align: middle;
    cursor: pointer;
}

.vcolrefresh {
    text-align: right !important;
}

div.vcreator {
    font-size: 14px;
    color: gray;
    text-decoration: none;
    word-break: break-word;
}

a:hover, a:visited, a:link, a:active
{
    text-decoration: none;
    color: cornflowerblue;
}

.vhidebutton{
    background-color: #d3d3d3;
    font-size: 10px;
    color: white;
    padding: 3px;
    cursor:pointer;
    margin-bottom: 5px;
    margin-top: 10px;
}

.vcopybutton{
    display:block;
    font-size:10px;
    vertical-align: middle;
    margin:2px;
    width: 55px;
}

.vinline{
    display: inline;
}

.vcolinvite {
    font-size: 13px;
    width: 100%;
}

.vinvitebutton {
    font-size: 10px;
}

.vpending {
    font-size: 13px;
    color: lightblue;
}

.vaccept{
    font-size: 13px;
    color: lightgreen;
    font-weight: bold;
}

.vremove{
    color: lightgrey;
}

.vdocs{
    height: 100%;
}

.vib{
    display:inline-block;
}

.vblock{
    display: block;
    padding-bottom: 10px;
}

.vshow {
    display: block !important;
}

.vstorelinks{
    width:100%;
    text-align: center;
    padding-bottom: 10px;
}

.vgs{
    padding-bottom:10px;
}

.vdocbox {
    height: calc(100vh - 240px) !important;
}

.vdocbox2{
    padding-top: 10px;
    height: calc(100vh - 140px) !important;
}

.vdochead{
    text-decoration: none !important;
    padding-left: 0px !important;
    outline: none !important;
    white-space: normal;
    text-align: left;
    color: #555555;
}

.vdocsethead{

}

.vdoclistitem{
    margin-bottom: 15px;
}

.vlist{
    type: circle;
}

.vsoundlist{
    list-style-type: none;
    line-height: 2rem;
}

.vsl_li{
    cursor: pointer;
    color: #9999CC;
}

.vterms{
    font-size: 10px;
    text-align: center;
}

.vwww{
    background: rgba(255, 255, 255, 0.3);
    background-image: url(images/vybit_bg_logo_white.png);
    background-position: 50% 45%;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100%;
}

.vwwwb{
    //TODO implement scss function to set vh to window.innerHeight
}

.vwwwc{

}

.vintro{
    text-align: center;
    font-weight: bold;
    font-size: 16px;
}

.veventlogcmd{
    text-align: center;
    color: blue;
    font-weight: bold;
}

.veventlog{
    padding: 10px;
    padding-bottom: 65px;
}

.vcard{
    background-color: transparent !important;
}

.vcard-header{
    background-color: rgba(0,0,0,.03);
    cursor: pointer;
}


.vscard-container {

    font-family: Arial, sans-serif;
    margin: 0;
    padding: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}
.vscard {
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    padding: 20px;
    width: 240px;
    color: #fff; /* Default text color for better contrast */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.vscard:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.vscard h2 {
    margin-top: 0;
    font-size: 1.5em;
}
.vscard p {
    font-size: 14px;
    margin: 10px 0;
}
.vscard .price {
    font-size: 17px;
    font-weight: bold;
    margin-top: 10px;
}
.vscard a {
    color: #fff;
    text-decoration: underline;
}
.vscard a:hover {
    text-decoration: none;
}
.vscard-free {
    background-color: #ffffff;
    color: #333; /* Dark text for white background */
    border: 1px solid #ccc;
}
.vscard-bronze {
    background-color: #cd7f32; /* Bronze color */
}
.vscard-silver {
    background-color: #c0c0c0; /* Silver color */
}
.vscard-gold {
    background-color: #ffd700; /* Gold color */
    color: #333; /* Darker text for readability on bright gold */
}
.vscard-platinum {
    background-color: #e5e4e2; /* Platinum color */
    color: #333; /* Darker text for readability */
}

.vspinner {
    position: absolute;
    top: 70px;
    left: 50%;
    margin-left: -12px;
    z-index: 100;
}

.vspinner2 {
    top: 100px;
}

.vloginmessage{
    position: absolute;
    top: 60px;
    width:100%;
    z-index: 10;
    text-align: center;
}

.vemailbutton {
    width: 220px;
    height: 42px;
    border-width: 2px;
    background-color: darkorange !important;
    border-color: black !important;
    color: black;
    border-radius: 1.0rem !important;
}

::placeholder, ::-webkit-input-placeholder{
    font-size: 15px;
    color: #DDDDDD;
}

div.vsdemo{
    display: inline-block;
    text-align: center;
    width: 310px;
}

input.vsdemo{
    padding: 0px 0px 0px 10px;
}

div.vsdemoimg{
    border-radius: 3px 0px 0px 3px;
    background-color: darkorange;
    padding: 2px;
}

img.vsdemo{
    height: 38px;
    width: 38px;
}

button.vsdemo {
    background-color: darkorange;
    width: 45px;
    padding: 0px;
    color: black;
}

span.vsdemoclear{
    cursor: pointer;
}

.vcode{
    background-color: #EEEEEE;
    padding: 3px;
}

.vli{
    margin: 20px;
}

.vsubscribe{
    background-color: darkorange;
    padding: 10px;
    color: black;
}

.vsubpre{
    color: black;
    background-color: darkorange;
    pointer-events: none;
}

.vsubimg{
    height: 38px;
    width: 38px;
    padding: 2px;
    float: left;
}

.vybsubimg{
    pointer-events: all;
}

.vsubdeltaimg{
    margin-top: -5px;
}

.vsubinvite{
    border: 1px solid gray;
    font-size: 10px;
}

.vsubcontent{
    color: black;
    background-color: transparent;
    text-align: left;
    pointer-events: none;
}

.vsubheadline{
    margin-top: 7px;
    display:inline-block;
    text-align: center;
    margin-left: 2px;
}

.vsubname{
    font-weight: bold;
    display:inline-block;
}

.vsubdesc{
    max-width:230px;
    pointer-events: none;
}

.vsublisten{
    color: grey;
    background-color: #e7e6ff;
}

.vsubcard{
    margin:15px;
}

.vsubscription{
    font-weight: bold;
}

.vsublink{
    text-decoration: none;
    color: white !important;
}

div.vsowner{
    display: inline-block;
    color: #444444;
    font-size: 13px;
}

.vnote{
    font-size:16px;
    padding: 3px;
    background-color: #EEEEEE;
    border-radius: 5px;
    margin-bottom: 2px;
}

.vclose{
    cursor: pointer;
}

.vlogimg{
    height: 100px;
    border-radius: 5px;
}

.vbtndelete{
    color: red;
    border: none;
    background-color: transparent;
}

img.vstore_image{
    margin:2px;
}

.vcard-body{
    padding:3px;
}

.vintegration{
    margin-left: 35px;
    padding: 3px;
    color: #9999CC;
    display: block;
}

.vnoresults{
    text-align: center;
    color: gray;
}

.vtabs{

}

.vtab{
    width: 33.3%;
    text-align: center;
    background-color: #EEEEEE !important;
    font-weight: bold;
    font-size: 10px;
    border-right: gray solid 1px !important;
    border-top: gray solid 1px !important;
    border-radius: 0px !important;
}

.vtab.active {
    background-color: white !important;
}

.vsounddel{
    font-size: 20px;
}

.vrmessage, .vumessage{
    min-height: 25px;
    color: darkgray;
    font-size: 14px;
}

.vwarning{
    color: darkorange;
}

.verror{
    color: darkred;
}

.vsbutton{
    font-size: 12px;
    margin: 1px;
}

.vindent{
    margin-left: 40px;
    margin-right: 40px;
}

.vmode{
    cursor: pointer;
    color: #666666;
    font-size: 20px;
}

.vinlinewrap {
    display: inline-flex;
    vertical-align: top;
    float: right;
    margin-left: 10px;
}

body.vnight, div.vnight, input.vnight, selector.vnight, label.vswitchlabel.vnight::before, a.nav-link.active.vnight{
    background-color: #222222 !important;
}

input.vnight, div.vnight, selector.vnight, option.vnight, a.nav-link.active.vnight, button.vcard.vnight{
    color: #AAAAAA !important;
}

div.vplaceholder, input.vnight::placeholder, input.vnight::-webkit-input-placeholder{
    color: #666666;
}

a.nav-link.active.vnight, a.nav-link.vnight:hover{
    border-bottom: none;
}

a.nav-link.vnight{
    background-color: #444444;
}

div.card-header.vnight, h2.vcard-header.vnight{
    background-color: #444444 !important;
}

button.vdochead.vnight{
    color: #888888;
}

.vcard:focus{
    box-shadow: none;
}

img.vbell{
    padding: 0px 3px 4px 3px;
}

div.vsounds {}

div.vusedby {
    font-weight:normal;
}

div.voverlay {
    position: absolute;
    height: 100%;
    width: 100%;
    background-color: white;
    opacity: 0.8;
    z-index: 100;
}

.vmod {

}

.vmod_status {
}

.vmod_message {
    margin-bottom: 10px;
}

.vmod_guide {

}

.vmod_modstatus {
    padding-right: 5px;
}

.vmod_button {
 font-size: 12px;
}

.vsubbutton {
    font-size: 10px;
    margin-top: 5px;
}

.vpublic, .vunlisted, .vprivate {
    font-size: 10px;
    font-weight: bold;
}

.vunlisted {
    color: #7677b8;
}

.vprivate {
    color: #4e507a;
}

.vpeeps {
    font-size: 11px;
    font-weight: bold;
    color: #aeb0e6;
}

.vreviewing {
    color: green;
}

.vapproved {
    color: blue;
}

.vrejected {
    color: red;
}

.vsettings-section, .vsettings-section::after, .vsettings-section::before{
    border-radius: 0px;
}

.vsettings-header,
.vsettings-header::before,
.vsettings-header::after,
.vsettings-header:focus,
.vsettings-header:hover,
vsettings-header:not(.collapsed) {
    color: #999999 !important;
    font-size: 12px;
    font-weight: bold;
    background-color: #EEEEEE !important;
    height: 30px;
    border: none;
    box-shadow: none !important;
    padding: 0px 5px 0px 5px;
}

.vsettings-section {
    display: table;
    width: 100%;
    padding-top: 0px;
}

.vsettings-spacer {
    height: 15px;
}

.vgear {
    position: relative;
    top: -2px;
    font-size: 20px;
}

.vlabel-no-wrap {
    white-space: nowrap;
}

.vts-table{
    background-color: #EEEEFF;
    width: 100%;
    max-width: 300px;
}

.vts-table-display {
    cursor: pointer;
}

.vts-label {
    color: #888888;
    word-break: normal;
    font-size: 0.8rem;
    background-color: #EEEEEE;
    font-weight: bold;
}

.vts-td-display {
    padding: 3px 10px 6px 3px;
    vertical-align: top;
    border: lightgrey solid 1px;
}

.vts-td{
    font-size: 12px;
    font-weight: bold;
    text-align: left;
    padding:3px;
    padding-bottom: 6px;
}

.vts-sel{
    padding:4px;
    margin: 3px;
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

.vts-sel::-webkit-scrollbar{
    display: none;
}

.vts-button {
    display: inline-block;
    font-size: 10px;
    margin: 3px;
    width: 60px;
}

.vts-help{
    color: cornflowerblue;
    cursor: pointer;
    text-align: center;
}

.vts-cancel{
    color: red;
    cursor: pointer;
}

.vts-input {
    border: lightgrey 1px solid;
    border-radius: 2px;
    cursor: text;
    width: 90%;
}

.vts-input-sm {
    width: 60px;
}

.vts-header{
    color: #888888;
    word-break: normal;
    font-size: 0.8rem;
    font-weight: bold;
}

.vts-instructions{
    font-weight: normal;
}

/* div {
    border: solid black 1px;
}

*/