@font-face {
    font-family: 'Roboto';
    src: url('/public/roboto/Roboto-Light.ttf');
}

@font-face {
    font-family: 'Roboto2';
    src: url('/public/roboto/Roboto-Regular.ttf');
}

html {
    scroll-behavior: smooth;
}

.header {
    position: fixed;
    top:0;
    left:0;
    height:50px;
    width:100%;
    padding:0;
    background: rgb(54,57,63);
    z-index: 2;
}

.footer {
    background-color: rgb(54,57,63);
}

.footerContainer {
    display: grid;
    max-width: 1024px;
    grid-template-columns: repeat(2, 1fr);
    margin: 0px auto;
    padding: 30px 0px;
    width: 75%;
    color: #ffffff;
    font-family: 'Roboto';
}

.footerContainer .footer-item i { 
    color: #ffffff;
    font-size: 30px;
    margin: 10px 5px;
}

.footerContainer .footer-item svg,
.footerContainer .footer-item img {
    width: 30px;
    height: 30px;
    margin: 7px 1px;
    display: inline-block;
    transform: translate(0px, 10px)
}

.footerContainer h2, .footerContainer h4 { margin: 0; }
.footerContainer .footer-item:nth-child(2) { text-align: right; }
.footerContainer .footer-item a { color: #ffffff; }
.footerContainer .footer-item a:visited { color: #ffffff; }
.footerContainer .footer-item a:hover { color: #ffffff; }
.footerContainer .footer-item a:active { color: #ffffff; }

#homepageheader {
    visibility: hidden;
    opacity: 0;
    transition: all 0.3s linear;
}

body {
    background-color: rgb(192, 192, 192);
    margin: 0;
}

body.darkmode {
    background-color: rgb(39, 42, 44);
    color: #ffffff;
}
.darkmode .popup-content,
.darkmode textarea,
.darkmode input {
    background-color: rgb(30, 32, 34);
    color: #ffffff;
}
.darkmode input[type="file"] {
    background-color: transparent;
}
.darkmode input:disabled {
    background-color: rgb(60, 62, 64);
    cursor: not-allowed;
}
select {
    background: url(data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0Ljk1IDEwIj48ZGVmcz48c3R5bGU+LmNscy0ye2ZpbGw6IzQ0NDt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPmFycm93czwvdGl0bGU+PHBvbHlnb24gY2xhc3M9ImNscy0yIiBwb2ludHM9IjEuNDEgNC42NyAyLjQ4IDMuMTggMy41NCA0LjY3IDEuNDEgNC42NyIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtMiIgcG9pbnRzPSIzLjU0IDUuMzMgMi40OCA2LjgyIDEuNDEgNS4zMyAzLjU0IDUuMzMiLz48L3N2Zz4=) no-repeat 100% 50%;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}
select.meta {
    border: 1px solid #555555;
}
.darkmode select {
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyMC4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCA0LjkgMTAiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDQuOSAxMDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4NCgkuc3Qwe2ZpbGw6I2ZmZmZmZjt9DQo8L3N0eWxlPg0KPHRpdGxlPmFycm93czwvdGl0bGU+DQo8cG9seWdvbiBjbGFzcz0ic3QwIiBwb2ludHM9IjEuNCw0LjcgMi41LDMuMiAzLjUsNC43ICIvPg0KPHBvbHlnb24gY2xhc3M9InN0MCIgcG9pbnRzPSIzLjUsNS4zIDIuNSw2LjggMS40LDUuMyAiLz4NCjwvc3ZnPg==) no-repeat 100% 50%;
    background-color: rgb(30, 32, 34);
    color: #ffffff;
}

a {
    text-decoration: none;
    cursor: pointer;
}

a:visited, a:hover, a:active { color: #000000; }
.darkmode a, .darkmode a:visited, .darkmode a:hover, .darkmode a:active { color: #ffffff; }

hr {
    border: 0;
    height: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

h4 {
    margin-block-start: 0.25em;
    margin-block-end: 0.25em;
}

br {
    margin: 20px 0;
    display: block;
    line-height: 20px;
    content: " ";
}

/* Pop up window */
.popup {
    display: none;
    position: fixed;
    z-index: 5;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.4);
}

.popup-content {
    position: relative;
    background-color: rgb(207, 207, 207);
    margin: 5% auto;
    width: 500px;
    top: -300px;
    opacity: 0;
    transition: top 0.4s, opacity 0.4s;
}
.popup-content.popup-shown {
    top: 0px;
    opacity: 1;
}

.popup-header {
    background-color: rgb(54,57,63);
    color: #ffffff;
}

.popup-header h2 {
    padding-top: 20px;
    padding-bottom: 20px;
    text-align: center;
    font-family: 'Segoe UI', Tahoma, Geneva, 'Segoe UI', sans-serif;
    font-size: 35px;
}

.popup-body {
    font-family: 'Roboto';
    margin-left: 20px;
    margin-right: 20px;
    padding-bottom: 20px;
}

.popup-actions {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.popup-actions input {
    flex: 1;
    text-align: center;
    padding: 10px 0px;
    font-size: 25px;
    cursor: pointer;
    border-top: 1px solid;
    border-left: 0.5px solid;
    border-right: 0.5px solid;
    border-bottom: 1px solid;
    transition-duration: 0.2s;
    font-family: 'Roboto';
    background-color: transparent;
}

.popup-actions input:hover {
    background-color: #555555;
    color: #ffffff;
}
.popup-actions input:disabled { cursor: not-allowed; }
.darkmode .popup-actions input:disabled { background-color: transparent; }

#spkPopup .popup-content {
    width: 90%;
}
#loginPopup .popup-body h3 { text-align: center; }
#loginPopup .popup-body .logininfo { 
    margin: 5px 0px;
    font-size: 20px;
}
#persistentform, #persistenthiveauth, #loginformhive, #loginformhiveauth, #loginformavalon, #loginformblurt { display: none; }
#hiveauthqr img, #persistenthiveauthqr img {
    margin-left: auto;
    margin-right: auto;
}

.warningbox {
    width: calc(100% - 24px);
    border: solid;
    border-width: 2px;
    border-radius: 5px;
    border-color: goldenrod;
    background-color: gold;
    color: #000000;
    margin-bottom: 15px;
    text-align: left;
    padding: 10px;
    font-size: 16px;
}

#refillnotify, #needsrefillnotify, #tusnotsupported, #avalondeprecation {
    margin-top: 15px;
    margin-left: auto;
    margin-right: auto;
    width: calc(100% - 200px);
    display: none;
}

.loginnetworks {
    border-collapse: collapse;
    width: 100%;
}

.loginnetworks tr {
    border: 1px solid #000000;
    cursor: pointer;
}

.loginnetworks tr:hover {
    background-color: rgb(54,57,63);
    color: #ffffff;
}

.loginnetworks tr td:nth-child(1) {
    text-align: left;
}

.loginnetworks tr td:nth-child(2) {
    min-width: 40px;
    text-align: right;
    padding-right: 12px;
}

.loginnetworks h4,
.loginnetworks h5 {
    margin-block-start: 0.25em;
    margin-block-end: 0.25em;
    margin-left: 10px;
}

.loginnetworks h4 {
    font-size: 20px;
}

.loginnetworks h5 {
    font-size: 12px;
}

.loginFields {
    width: 100%;
    height: 29px;
    border-radius: 5px;
    border: 1px solid #ccc;
    padding-left: 5px;
    font-size: 12px;
    margin-bottom: 10px;
    box-sizing: border-box;
}

.avalonKcLogin {
    display: none;
}

.sameUsername {
    margin-top: -7px;
    text-align: left;
    margin-left: 3px;
    margin-bottom: 7px;
    font-size: 12px;
    width: fit-content;
}

.redeemVoucherNavBtn {
    margin-top: 5px;
    text-align: left;
    margin-left: 3px;
    margin-bottom: -5px;
    font-size: 12px;
    width: fit-content;
}

#pymtMtd {
    width: 100px;
}

#signuppay h6, #signuppay h4, #refillPopup h6, #refillPopup h4 {
    margin-block-start: 0.25em;
    margin-block-end: 0.25em;
}

#signupNetwork { margin-block-end: 0.75em; }
#signupcbmsg a { color: #000000; }
#signupcbmsg a:visited { color: #000000; }
#signupcbmsg a:hover { color: #000000; }
#signupcbmsg a:active { color: #000000; }

#hiveRecPayment, #hiveRecPaymentFields,
#HiveKeychainBtn, #HiveSignerBtn, #BlurtKeychainBtn { display: none; }
#hiveRecPaymentRecurrence { width: 200px; }
#hiveRecPaymentFrequency { width: 100px; }
#hiveRecPaymentRecurrence, #hiveRecPaymentFrequency {
    margin-bottom: 0px;
}

.tooltip {
    position: relative;
    display: inline-block;
}

.tooltip.tooltippm {
    display: block;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 140px;
    background-color: #555;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px;
    position: absolute;
    z-index: 1;
    bottom: 150%;
    left: 50%;
    margin-left: -75px;
    opacity: 0;
    transition: opacity 0.3s;
    font-family: 'Roboto';
}

.tooltiptext.tooltippm {
    width: 500px;
    left: 25%;
    bottom: 100%;
    font-size: 18px;
}

.tooltip .tooltipshare {
    bottom: 120%;
    left: 90%;
    width: 100px;
}
  
.tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
}
  
.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}

.uploadpage {
    margin-left: auto;
    margin-right: auto;
    width: 700px;
}

#tab {
    text-align: center;
}

.tabs {
    font-size: 25px; 
    padding: 6px 6%;
    align-content: center
}

.tabs:hover {
    border-bottom: 2px solid #000000;
    cursor: pointer;
}
.darkmode .tabs:hover {
    border-bottom: 2px solid #ffffff;
}

#tabBasics {
    background-color: #2196F3;
}

#advanced, #subtitles {
    display: none;
}

#postBody {
    height: 200px;
}

#tagInfo1 {
    margin-block-start: -1em;
}

.tick-mark {
    position: relative;
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-left: -3px;
    margin-right: 10px;
}

.tick-mark::before {
    position: absolute;
    left: 0;
    top: 50%;
    height: 50%;
    width: 2px;
    background-color: black;
    content: "";
    transform: translateX(10px) rotate(-45deg);
    transform-origin: left bottom;
}

.tick-mark::after {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 2px;
    width: 100%;
    background-color: black;
    content: "";
    transform: translateX(10px) rotate(-45deg);
    transform-origin: left bottom;
}

.dropdownArrow {
    border: solid #ffffff;
    border-width: 0 3px 3px 0;
    display: inline-block;
    padding: 3px;
    transform: rotate(45deg) translate(0px,-5px);
    /* -webkit-transform: rotate(45deg) translate(0px,-5px); */
}

#dropdownArrowPlatform {
    transform: rotate(45deg) translate(-6px,-12px);
    /* -webkit-transform: rotate(45deg) translate(-6px,-12px); */
}

#dropdownbox2 {
    right: 116px;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    z-index: 1;
    right: 0px;
    transform: translate(0px,-17px);
}
  
  /* Links inside the dropdown */
.dropdown-content a {
    color: black;
    padding: 12px 16px;
    font-family: 'Roboto2';
    display: block;
}

.dropdown-content a:hover { background-color: #ddd }
.darkmode .dropdown-content a:hover { color: black; }

.curvedbox {
    width: 97.5%;
    border: solid;
    border-width: 2px;
    border-radius: 15px;
    margin-bottom: 10px;
    padding-left: 10px;
    padding-right: 10px;
}

#editingDraft {
    display: none;
    margin-bottom: 20px;
    padding: 10px;
}

#avalonZone {
    display: none;
}

.darkmode #avalonvw {
    background-color: #979797;
}

#avalonvwlabel {
    margin-block-start: 0.5em;
    margin-block-end: 0.5em;
}

.slidecontainer {
    width: 100%;
}

.rangeslider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 15px;
    border-radius: 5px;
    background: #979797;
    outline: none;
    -webkit-transition: .2s;
    transition: opacity .2s;
    margin-block-end: 1.5em;
}
  
.rangeslider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 25px;
    height: 25px;
    border-radius: 50%; 
    background: #2196F3;
    cursor: pointer;
}
  
.rangeslider::-moz-range-thumb {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: #2196F3;
    cursor: pointer;
}

#avalonhighvwalert {
    display: none;
}

.progressBack {
    width: 100%;
    background-color: #979797;
    border-radius: 5px;
    display: none;
}

.progressFront {
    width: 0%;
    height: 30px;
    background-color: #2196F3;
    border-radius: 5px;
    text-align: center;
    line-height: 30px;
    white-space: nowrap;
}

.uploadcontent {
    margin-top: 70px;
    padding-bottom: 20px;
    font-family: 'Roboto';
    font-size: 17px;
}

.uploadcontent h2 { font-size: 32px; }
.uploadcontent h3 { font-size: 21px; }

.docs {
    margin-top: 70px;
    margin-left: 50px;
    margin-right: 50px;
    padding-bottom: 20px;
    font-family: 'Roboto';
    word-wrap: break-word;
}

.docs a {
    text-decoration: underline;
}

.meta {
    width: 100%;
    height: 29px;
    border-radius: 5px;
    border: 1px solid #ccc;
    padding-left: 5px;
    font-size: 12px;
    box-sizing: border-box;
}
.darkmode .meta,
.darkmode textarea {
    border: 1px solid rgb(118, 124, 136);
}

textarea {
    width: 100%;
    height: 100px;
    resize: vertical;
    border-radius: 5px;
    border: 1px solid #ccc;
    padding-left: 5px;
    padding-top: 5px;
    font-size: 12px;
    box-sizing: border-box;
}

#newLanguageField {
    width: 100%;
}

.subtitleAdd {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}

.subtitleAddCol {
    display: table-cell;
    width: 230px;
}

.subtitleAddCol a {
    width: 100%;
    margin: 0px 10px;
}

/* Render uploaded subtitles list in a table */
.subList tr td {
    font-size: 15px;
}

.subListLang {
    width: 400px;
    text-align: left;
}

.subListPrev {
    width: 200px;
    padding-right: 5px;
}

.subListDel { width: 100px; }
.subPrevBtn { width: 150px; }
.subDelBtn { width: 80px; }

#logoBanner {
    height: 35px;
    vertical-align: middle;
}

#siteTitle {
    color: #ffffff;
    font-family: Impact, 'Arial Narrow Bold', sans-serif;
    margin-top: 5px;
    padding-left: 10px;
}

#headTitleText {
    display: inline-block;
    font-size: 28px;
    margin-left: 5px;
    color: #ffffff;
}

.title:visited {
    color: #ffffff;
}

#authButton, #modeBtn {
    position: absolute;
    top: 0px;
    right: 0px;
}

#platformBtn {
    position: absolute;
    top: 0px;
    right: 116px;
    width: 70px;
    padding: 0px 5px;
    text-align: center;
}

#platformBtn img {
    width: 30px;
    height: 30px;
    margin-top: 7.5px;
}

.platformLogo {
    display: none;
}

/* Beneficiaries */
#beneficiaryHeadingHive, #beneficiaryHeadingBlurt {
    margin-block-start: 0.25em;
    margin-block-end: 0.25em;
}

#newBeneficiaryUser {
    width: 253px;
}

#newBeneficiaryPercent {
    width: 57px;
}

#newBeneficiaryNetwork {
    line-height: 32px;
    height: 32px;
    width: 65px;
}

#appendBeneficiaryBtn,
#newAliasAdd {
    width: 40px;
    margin: 0px;
}

#beneficiariesDesc {
    margin-block-end: 0.5em;
}

.beneficiaryTableList { width: 100%; }
.beneficiaryTableList tr td { font-size: 16px; }

.beneficiaryAccLabel {
    text-align: left;
    width: 100%;
}

.beneficiaryDelBtn {
    width: 90px;
}

.totalBeneficiariesLabel {
    font-size: 16px;
    margin-block-start: 0.25em;
    font-weight: normal;
}

.hivemindCommunity h3,
.hivemindCommunity h5 {
    margin-block-start: 0.25em;
    margin-block-end: 0.5em;
}
.communitySelect {
    width: 300px;
}
#schedulepostdetails, #schedulepost, #scheduledStr { display: none; }
#scheduleposttime { width: 200px; }

/* Thumbnail swapper tool */
#thumbnailSwapper, #disabledPage {
    display: none;
}

#thumbnailSwapNoAvalon {
    margin-block-start: 1em;
    display: none;
}

#linkSubmitBtn {
    margin-top: 10px;
}

#linkResult {
    width: 100%;
}

#metaEditThumbnail {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin-top: 20px;
}

.metaEditThumbItm {
    display: table-cell;
    position: relative;
}

.metaEditThumbItm img {
    max-width: 220px;
    height: auto;
}

.metaEditOverlay {
    display: flex;
    align-items: center;
    position: absolute;
    bottom: 0;
    background: rgb(0, 0, 0);
    background: rgba(0, 0, 0, 0.5); /* Black see-through */
    color: #f1f1f1;
    width: 100%;
    height: 100%;
    transition: .5s ease;
    opacity:0;
    color: white;
    font-size: 20px;
    padding: 0px;
}

.metaEditOverlay p {
    width: 100%;
    text-align: center;
}

.metaEditThumb:hover .metaEditOverlay {
    opacity: 1;
}

.metaEditThumbItm svg {
    position: relative;
    margin: 0px 10px;
}

#metaEditArrow {
    width: 70px;
}

#metaEditArrowInner {
    position: absolute;
    display: flex;
    align-items: center;
    height: 100%;
}

#videoInfo {
    width: 470px;
    font-size: 15px;
    text-align: left;
    padding-left: 5px;
}

.uploadpage {
    display: none;
}

#yourFiles table tr td:nth-child(1),
#scheduledPublishes tbody tr td:nth-child(1),
#scheduledPublishes tbody tr td:nth-child(2) { text-align: left; }
#scheduledPublishes tbody tr td:nth-child(3) { text-align: center; }
#yourFiles table tr td:nth-child(2),
#refillHistoryTbl tbody tr td:nth-child(1),
#refillHistoryTbl tbody tr td:nth-child(2) { text-align: right; }
#yourFiles table thead tr td, #refillHistoryTbl thead tr td, #aliasList thead tr td, #scheduledPublishes thead tr td, #draftList thead tr td, #spkUploads thead tr td { font-size: 23px; }
#yourFiles table tbody tr td, #refillHistoryTbl tbody tr td, #aliasList tbody tr td, #scheduledPublishes tbody tr td, #draftList tbody tr td, #spkUploads tbody tr td { font-size: 16px; }
#yourFiles a { color: #000000; }
#yourFiles a:visited { color: #000000; }
#yourFiles a:hover { color: #000000; }
#yourFiles a:active { color: #000000; }
#yourFiles select { width: 150px; }
#refillHistoryTbl, #yourFiles table, #aliasList, #scheduledPublishes table, #draftList table, #spkUploads table { border-collapse: collapse; }
#refillHistoryTbl, #refillHistoryTbl tr, #refillHistoryTbl td,
#yourFiles table, #yourFiles table tr, #yourFiles table td,
#aliasList, #aliasList tr, #aliasList td,
#scheduledPublishes tr, #scheduledPublishes td,
#draftList tr, #draftList td, #spkUploads tr, #spkUploads td { border: 1px solid black; }
#newAliasUser, #newAliasKey { width: 95%; }
#newAliasNet { width: 100%; }
#newAlias td:nth-child(5) { width: 32px; }

/* Dark mode */
.darkmode #yourFiles a,
.darkmode #yourFiles a:visited,
.darkmode #yourFiles a:hover,
.darkmode #yourFiles a:active { color: #ffffff; }
.darkmode #refillHistoryTbl, .darkmode #refillHistoryTbl tr, .darkmode #refillHistoryTbl td,
.darkmode #yourFiles table, .darkmode #yourFiles table tr, .darkmode #yourFiles table td,
.darkmode #aliasList, .darkmode #aliasList tr, .darkmode #aliasList td,
.darkmode #scheduledPublishes table,
.darkmode #scheduledPublishes tr,
.darkmode #scheduledPublishes td,
.darkmode #draftList tr,
.darkmode #draftList td,
.darkmode #spkUploads tr,
.darkmode #spkUploads td { border: 1px solid #ffffff; }

#wcinfo h4 {
    font-size: 17px;
    margin-block-start: 0.25em;
    margin-block-end: 0.25em;
}

#gbdaysautobtns {
    display: grid;
    text-align: center;
    grid-template-columns: repeat(4, 1fr);
}

#gbdaysautobtns .grid-item a {
    padding: 6px 40px;
    font-size: 18px;
}

/* Get help page */
#getHelp h4 a { color: #000000; }
#getHelp h4 a:visited { color: #000000; }
#getHelp h4 a:hover { color: #000000; }
#getHelp h4 a:active { color: #000000; }

.darkmode #getHelp h4 a { color: #ffffff; }
.darkmode #getHelp h4 a:visited { color: #ffffff; }
.darkmode #getHelp h4 a:hover { color: #ffffff; }
.darkmode #getHelp h4 a:active { color: #ffffff; }

.authorizeBtn {
    margin-left: auto;
    margin-right: auto;
    width: fit-content;
}

#avalonAuthorizeBtn, #hiveAuthorizeBtn, #blurtAuthorizeBtn {
    display: none;
}

.darkmode #avalonAuthorizeBtn, .darkmode #hiveAuthorizeBtn {
    color: #ffffff;
}

/* Post Publish View */
.postpublishgrid {
    display: grid;
    text-align: center;
    grid-template-columns: repeat(2, 1fr);
}

.postpublishgrid .grid-item a {
    padding: 6px 40px;
    font-size: 18px;
}

#postpublishshare img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
}

/* Welcome page only */
#head {
    background-color: rgb(54,57,63);
    color: #ffffff;
    font-family: 'Segoe UI', Tahoma, Geneva, sans-serif;
    height: 100vh;
    width: 100%;
    display: table;
}

#head .textcontainer {
    vertical-align: middle;
    display: table-cell;
    transform: translate(0,20px);
}

#head h1 {
    font-size: 75px;
    margin-left: 50px;
    margin-right: 50px;
    margin-block-start: 0em;
    margin-block-end: 0em;
}

#head h3, #head h5 {
    font-size: 30px;
    margin-left: 50px;
    margin-right: 50px;
    font-weight: normal;
    font-family: 'Roboto';
}

#head .styledButton {
    border-color: #ffffff;
    color: #ffffff;
}

#head .styledButton:hover {
    color: rgb(54,57,63);
    background-color: #ffffff;
}

#head .headBtn {
    position: absolute;
    top: 20px;
    border: 2px solid #ffffff;
    border-radius: 32px;
    height: 32px;
    padding: 4px 10px;
    text-align: center;
    transition-duration: 0.2s;
    z-index: 2;
}

#head #authButton2 {
    right: 40px;
    width: 100px;
}

#head #apiSelector {
    right: 180px;
    width: 40px;
}

#head #apiSelector i {
    transform: scale(1.3, 1.3) translate(0px, 4px);
}

#head #authButton2:hover,
#head #apiSelector:hover,
#head #appTypeRect:hover {
    background-color: #ffffff;
    color: rgb(54,57,63);
}

#head #authButton2 p,
#head #apiSelector p,
#head #appTypeRect p {
    margin-block-start: 5px;
    margin-block-end: 5px;
}

#head #appTypeRect {
    right: 260px;
    width: 70px;
    display: none;
}

#head .scrollarrow {
    position: relative;
    margin: auto;
    width: 25px;
}

#head .scrollarrow span {
    display: block;
    opacity: 0;
    width: 20px;
    height: 20px;
    border-bottom: 1px solid #ffffff;
    border-right: 1px solid #ffffff;
    transform: rotate(45deg);
    animation: arrowAnimation 2.1s infinite;
}

#head .scrollarrow span:nth-child(1) { animation-delay: 0.7s; }
#head .scrollarrow span:nth-child(2) { animation-delay: 1.4s; }

@keyframes arrowAnimation {
    0% { opacity: 0; }
    50% { opacity: 1; }
    100% { opacity: 0; }
}

/* Signup/Login buttons */
.headerBtn {
    color: #ffffff;
    border-left: 2px solid #ffffff;
    font-family: 'Roboto2';
    font-size: 20px;
    height: 100%;
    padding: 0px 25px;
    transition-duration: 0.2s;
}

.headerBtn:hover, .darkmode .headerBtn:hover {
    color: rgb(54,57,63);
    background-color: #ffffff;
}

.headerBtn p,
.loginor,
.logindesc {
    margin-block-start: 10px;
    margin-block-end: 10px;
}

.styledButton {
    color: black;
    background-color: transparent;
    border: 2px solid #555555;
	display: inline-block;
	cursor: pointer;
	font-family: 'Roboto';
	font-size: 21px;
	padding: 15px 40px;
    margin: 5px;
    transition-duration: 0.2s;
    box-sizing: border-box;
}
.styledButton:hover {
    color: #ffffff;
	background-color:#555555;
}
.styledButton:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
.styledButtonSmall {
    padding: 6px 10px;
    font-size: 15px;
    border-width: 1px;
    text-align: center;
    border-radius: 5px;
}
.styledButtonFullWidth {
    width: 100%;
    margin: 0;
}
.darkmode .styledButton {
    border: 2px solid #ffffff;
    color: #ffffff;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}
.darkmode .styledButtonSmall {
    border: 1px solid #ffffff;
}
#uploadActions .styledButtonSmall {
    transform: translate(0px, 10px);
}
#buttons {
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 20px;
    width: 60vw;
}

#homepagePriceLbl, #signupButton { display: none; }

/* Homepage content */
#statsContainer {
    display: grid;
    text-align: center;
    font-family: 'Roboto2';
    font-size: 25px;
    padding: 40px;
    margin-bottom: 30px;
    background-color: #2196F3;
    color: #ffffff;
    grid-template-columns: repeat(3, 1fr);
}

#statsContainer .grid-item img { height: 80px; }
#statsContainer .grid-item p { margin: 0; }
#statsContainer .grid-item h1 { margin-block-end: 0; margin-block-start: 15px;}

.feature-heading {
    text-align: center;
    font-family: 'Segoe UI', Tahoma, Geneva, sans-serif;
    margin: 0px;
    font-size: 45px;
    padding: 40px 0px 15px;
}

.featureContainer {
    display: grid;
    text-align: left;
    font-family: 'Roboto';
    font-size: 17px;
    max-width: 1024px;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    padding: 25px 40px;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px 40px;
}

.featureContainer h3 {
    font-size: 26px;
    font-weight: bold;
    margin: 0;
}

.featureContainerHighlight {
    grid-template-columns: 40% 60%;
}

.feature-preview-img {
    width: 100%;
}

.testimonial {
    text-align: center;
    background-color: #2196F3;
    color: #ffffff;
    font-family: 'Roboto2';
    font-size: 25px;
    padding: 10px 70px;
}

.testimonial a { color: #ffffff; }
.testimonial a:visited { color: #ffffff; }
.testimonial a:hover { color: #ffffff; }
.testimonial a:active { color: #ffffff; }

.updatesText {
    font-family: 'Roboto2';
    text-align: center;
    font-size: 20px;
    margin: 0px 60px;
}

#updatesContainer {
    display: flex;
    overflow-x: scroll;
    text-align: center;
    font-family: 'Roboto2';
    margin: 0px 50px;
}

.updatelogitem {
    display: table-cell;
    padding-right: 20px;
}

.updatelog {
    text-align: left;
    margin-left: auto;
    margin-right: auto;
    margin-top: 25px;
    padding: 20px;
    width: 300px;
    height: 220px;
    background-color: rgb(23, 31, 201);
    color: #ffffff;
    border-radius: 10px;
    position: relative;
}

.updatelog a { 
    color: #ffffff;
    font-size: 25px;
}
.updatelog a:visited { color: #ffffff; }
.updatelog a:hover { color: #ffffff; }
.updatelog a:active { color: #ffffff; }

.updatepayout {
    position: absolute;
    bottom: 30px;
}

.appDlBtn {
    text-align: center;
}

td {
    text-align: center;
    font-family: 'Roboto';
    font-size: 25px;
}

.icons {
    margin-top: 30px;
}

/* 404 page */
.notfoundmessage {
    font-family: 'Roboto2';
    font-size: 20px;
    text-align: center;
}

/* Switch */
.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
}

.switch.switchsmall {
    width: 50px;
    height: 26px;
}
  
.switch input { 
    opacity: 0;
    width: 0;
    height: 0;
}
  
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #979797;
    -webkit-transition: .4s;
    transition: .4s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
}

.slider.slidersmall:before {
    height: 20px;
    width: 20px;
    left: 3px;
    bottom: 3px;
}
  
input:checked + .slider {
    background-color: #2196F3;
}
  
input:focus + .slider {
    box-shadow: 0 0 1px #2196F3;
}
  
input:checked + .slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
}

input:checked + .slider.slidersmall:before {
    -webkit-transform: translateX(23px);
    -ms-transform: translateX(23px);
    transform: translateX(23px);
}
  
/* Rounded sliders */
  .slider.round {
    border-radius: 34px;
}
  
.slider.round:before {
    border-radius: 50%;
}

.switchtextsmall {
    display: inline;
    position: absolute;
    transform: translate(10px, -2px);
}

.poweruptext, .remembermelabel {
    display: inline;
    position: absolute;
    transform: translate(10px, -70%);
}

/* MOBILE */
@media screen and (max-width: 768px) {
    #head h1 {
        font-size: 35px;
        margin-left: 10px;
        margin-right: 10px;
    }

    #head h3 {
        font-size: 20px;
        margin-left: 10px;
        margin-right: 10px;
    }

    .feature-heading {
        font-size: 30px;
    }

    #statsContainer {
        font-size: 25px;
        grid-template-columns: 1fr;
        row-gap: 40px;
    }

    .featureContainer,
    .postpublishgrid {
        grid-template-columns: 1fr;
    }

    .updatesText {
        font-size: medium;
    }

    .footerContainer {
        grid-template-columns: 1fr;
        row-gap: 20px;
    }

    .footerContainer .footer-item:nth-child(2) { text-align: left; }

    td {
        font-size: 15px;
    }

    .uploadpage {
        margin-left: 15px;
        margin-right: 25px;
        width: auto;
    }

    .subtitleAdd {
        flex-direction: column;
    }

    .subtitleAddCol { width: 100%; }
    .subtitleAddCol a {
        width: 100%;
        margin: 5px 0px;
    }

    #chooseSubBtn {
        margin-top: 5px;
        margin-left: auto;
        margin-right: auto;
    }

    #uploadSubBtn {
        margin-left: auto;
        margin-right: auto;
    }

    .subListPrev a {
        font-size: 11px;
    }

    .subListDel a {
        font-size: 11px;
    }

    .subPrevBtn { width: 110px; }
    .subDelBtn { width: 70px; }

    .tooltiptext.tooltippm {
        font-size: 15px;
        width: 75%;
        left: 30%;
    }

    .tabs {
        padding: 6px 5%;
        font-size: 17px;
    }

    .popup-content {
        width: 85%;
    }

    #spkPopup .popup-content {
        width: 92%;
    }

    #linkResult {
        width: 100%;
    }

    #linkResult table tr td {
        display: table-row;
        width: 100%;
        word-break: break-all;
    }

    #yourFiles table tr td {
        text-overflow: ellipsis;
        overflow: hidden;
    }

    #yourFiles table tr td:nth-child(1) { max-width: 220px; }
    #yourFiles table tr td:nth-child(2) { width: 110px; }

    #gbdaysautobtns {
        grid-template-columns: repeat(2, 1fr);
    }

    #gbdaysautobtns .grid-item a {
        font-size: 14px;
        padding: 6px 30px;
    }

    .docs {
        margin-left: 30px;
        margin-right: 30px;
    }
}

@media screen and (max-width: 500px) {
    .popup-content,
    #spkPopup .popup-content {
        width: 100%;
    }

    #headTitleText {
        display: none;
    }

    #modeBtn {
        padding-left: 20px;
        padding-right: 20px;
    }

    #platformBtn {
        right: 106px;
        padding: 0px;
    }

    #dropdownbox2 {
        right: 106px;
    }

    #newBeneficiaryUser, #newBeneficiaryPercent, #newBeneficiaryNetwork, #appendBeneficiaryBtn {
        margin-block-start: 0.2em;
        margin-block-end: 0.2em;
    }

    #newBeneficiaryUser, #newBeneficiaryPercent { width: 100%; }
    #newBeneficiaryNetwork { width: 100%; }
    #appendBeneficiaryBtn { width: 100%; }
    .communitySelect { width: 100%; }

    #newAlias td {
        display: table-row;
        width: 100%;
        height: 36px;
    }

    #newAlias a { width: 190%; }
    #newAlias input { width: 200%; }
    #newAlias select { width: 207%; }

    .metaEditThumbItm img {
        width: 100%;
    }

    .metaEditThumbItm svg {
        width: 20px;
        height: 20px;
        margin: 0px 5px;
    }

    #metaEditArrow {
        width: 30px;
    }

    .docs {
        margin-left: 25px;
        margin-right: 25px;
    }
}

@media screen and (max-width: 360px) {
    .tabs {
        padding: 6px 3%;
    }

    #yourFiles table tr td:nth-child(1) { max-width: 160px; }
    .subPrevBtn { width: 95px; }
    .subDelBtn { width: 55px; }
}

* {
    -webkit-overflow-scrolling: touch;
}