#butInstall,
#butInstallCancel {
    border: 1px solid #fff;
    font-size: 1em;
    padding: 0.75em;
}
.googleMap,
.pitchButtons {
    cursor: pointer;
}
#wrapper,
body {
    overflow-x: hidden;
}
body,
h13 a {
    font-size: 100%;
    color: #ddd;
}
.ita,
h11 {
    font-style: italic;
}
.regTM10,
.regTM12,
.regTM14 {
    vertical-align: super;
}
.fontSz120 {
    font-size:120%;
}
.fontSz80 {
    font-size:80%;
}
#installContainer,
#pitchWrapper,
.center,
.f110,
h1,
h10,
h12,
h13,
h13 a,
h2,
h5,
h6,
h8,
h9 {
    text-align: center;
}
.centerImage {
    display: block;
    margin-left: auto;
    margin-right: auto;
    /* width: 70%; */
}

.button1 {
    display: inline-block;
    padding: 10px 20px;
    background-color: #4caf50;
    color: white;
    text-decoration: none;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.fS200 {
    font-size: 2em;
}
.fontWhite {
    color: #fff;
}
.fontBlack {
    color: #000;
}
.fontCharcoal {
    color: #36454f;
}
.kioskInstructions {
    font-size: 1.2em;
    text-align: center;
}
.bold {
    font-weight: bold;
}
.mR30 {
    margin-right: 30px;
}
.mR1 {
    margin-right: 1px;
}
.mR15 {
    margin-right: 15px;
}
#country,
#installContainer {
    background-color: #fff;
}
table.table1,
table.table2 {
    table-layout: fixed;
    background-color: #444;
    word-wrap: break-word;
}
.modal,
nav {
    position: fixed;
}
.exMov,
.form1 label {
    font-size: 90%;
}
p,
ul.MBmenu {
    padding: 0;
}
.menuList li,
.menuList ul,
ul#MB,
ul.MBmenu {
    list-style-type: none;
}
#t3 {
    padding: 8px 0;
}
#t2,
#t4 {
    width: 15%;
}
#butInstallCancel,
#table.table1,
table.table2 {
    background-color: #444;
}
#djCode,
#t3 {
    width: 70%;
}
#logo,
#logoWelcomeScreen {
    height: 43px;
    width: 288px;
    background: url(../../imgs/ALL.png) -3px -185px/340px 310px no-repeat;
    margin-bottom: 6px;
}
#djReg,
#installContainer,
#logo,
#logoWelcomeScreen {
    margin-left: auto;
    margin-right: auto;
}
#BTN li,
#publicReg {
    background: url(../../imgs/ALL.png) -208px -135px/340px 310px no-repeat;
}
#SHOUT,
.l,
table.table1,
table.table2 {
    word-wrap: break-word;
}
#BTN li,
#ML li,
.B28 li,
.ED li,
ol#posts {
    list-style: none;
}
.c,
.exCont,
.iC2,
.shim,
ul.MB2 li,
ul.MB2menu li {
    clear: both;
}
body {
    margin: 0 auto;
    background-color: #222;
    font-family: Helvetica, Arial, Verdana, sans-serif;
    overscroll-behavior-y: contain;
}
.hidden {
    display: none !important;
}
#installContainer {
    top: 1em;
    display: flex;
    justify-content: center;
    width: 94%;
    z-index: 10;
    border-color: #fff;
    padding: 4px;
    color: #000;
}
#butInstall {
    background-color: green;
    color: #fff;
}
#butInstallCancel {
    color: #fff;
}
.backToTop,
.googleMap {
    font-size: 12px;
    border-color: #fff;
    padding: 0.5px 2px;
    border-radius: 4px;
    border-width: thin;
    color: #fff;
    text-decoration: none;
}
#installContainer button:hover {
    background-color: #90ee90;
}
.modal {
    display: none;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.4);
}
#BTN li,
#ML li,
.B28 li,
.ED li {
    position: absolute;
}
.backToTop,
.googleMap,
.greyBG {
    background-color: #333;
}
.modal-content {
    margin: 15% auto;
}
.fullScreenCentered {
    width: 100%;
    height: 100%;
    display: table;
    text-align: center;
}
.btn100,
h8,
h9 {
    display: block;
}
.fullScreenCentered > .fullScreenCenteredChild {
    display: table-cell;
    vertical-align: middle;
    padding: 16px;
}
.backToTop {
    float: right;
}
.canceled,
.googleMap,
.reqMsg,
h3,
h3a {
    float: left;
}
#pitchWrapper {
    margin: 0 auto;
    width: 200px;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    justify-content: center;
    align-items: center;
    vertical-align: middle;
}
.pitchValueSize {
    font-size: 200%;
}
.pitchValueBorder {
    border: 2px solid orange;
    padding: 0 10px 4px;
    margin: 0 20px;
}
.pitchButtons {
    font-size: 300%;
    font-weight: 700;
}
.em2,
.pitchButtons2 {
    font-size: 2em;
}
.buttonSizeX2 {
    font-size: 1.5em;
    width: 200px;
    height: 50px;
}
img {
    border-style: none;
}
a {
    font-size: small;
    color: #affeb4;
}
#wrapper {
    background-color: #111;
}
* {
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: -moz-none;
    -o-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -ms-user-select: none;
    -webkit-tap-highlight-color: transparent;
}
input,
textarea {
    -webkit-user-select: text;
    -khtml-user-select: text;
    -moz-user-select: text;
    -o-user-select: text;
    user-select: text;
}
h1 {
    margin: 12px 0 0;
    font-size: 140%;
}
.f110,
h2 {
    font-size: 110%;
}
h3 {
    font-size: 22px;
    margin: 6px 0 6px 10px;
}
h3a {
    font-size: 18px;
    margin: 14px 0 0 10px;
}
h4 {
    font-weight: 400;
    font-size: 12px;
    margin-top: 4px;
}
.bld,
.grLinkBld,
.greentBoldFont,
.redBoldFont,
h8,
h9 {
    font-weight: 700;
}
h5 {
    font-size: 22px;
    margin: 12px 0 0 10px;
}
h6 {
    font-size: 19px;
    margin: 24px 0 0 10px;
}
h7 {
    font-size: 75%;
    color: #ccc;
}
h8 {
    font-size: 140%;
}
h9 {
    font-size: 250%;
    margin-top: 26px;
}
h10 {
    font-size: 140%;
}
h11 {
    font-size: 80%;
    color: #aaa;
}
h12 {
    font-size: 19px;
}
h13 {
    font-size: 120%;
}
h14 {
    color: #ddd;
}
.em1_1 {
    font-size: 1.1em;
}
.em1_25 {
    font-size: 1.25em;
}
.em1_5 {
    font-size: 1.5em;
}
.em1_75 {
    font-size: 1.75em;
}
.f80,
.f80W,
.f80dark {
    font-size: 80%;
}
#alphabet,
.bg222,
.formBG {
    background-color: #222;
}
.yel {
    color: #ff9;
}
.brYel {
    color: #ff0;
}
.blu,
nav a:active {
    color: #affeb4;
}
nav a:hover,
nav a:link,
nav a:visited {
    color: #f5f5f5;
}
.gry1 {
    color: #ccc;
}
.gry2 {
    color: #999;
}
.f80 {
    color: #ccc;
}
.f80W {
    color: #fff;
}
.f80dark {
    color: #555;
}
.grLink,
.grLinkBld {
    color: #affeb4;
    cursor: pointer;
}
.lh120 {
    line-height: 140%;
}
.regTM10 {
    font-size: 10px;
}
.regTM12 {
    font-size: 12px;
}
.regTM14 {
    font-size: 14px;
}
.form1 input,
.vM {
    vertical-align: middle;
}
.grLinkBld {
    text-decoration: none;
}
.greentBoldFont {
    color: #0f1;
}
.redBoldFont {
    color: red;
}
.blkYelBG {
    background-color: #ff0;
    color: #000;
    padding: 2px;
    font-weight: 400;
}
#titles,
.btn100 {
    background-color: #eee;
}
.w300,
nav a {
    padding: 10px;
}
.menuList a,
.nxt,
A.linkG {
    font-weight: 700;
}
.left,
ul.error {
    text-align: left;
}
#alphaRB,
.addBtn,
.btn100,
.error,
.form1,
.form1 input,
.nxt,
.reqF,
.suc,
nav a,
ul#MB,
ul.MBmenu {
    text-align: center;
}
.padW3 {
    width: 94%;
    padding: 10px 3% 0;
}
.padW3noTop {
    width: 94%;
    padding: 0 3%;
}
.btn100 {
    cursor: pointer;
    padding: 4px;
    color: #222;
    font-size: 85%;
    margin-top: 6px;
}
#alphabet,
.accountSettingsBTN,
.addBtn,
nav a {
    text-decoration: none;
    color: #fff;
}
#alphabet td,
.shim,
nav {
    background-color: #111;
}
#account,
#banned,
#venueSelect,
.main {
    display: none;
    position: absolute;
    top: 48px;
    left: 0;
    right: 0;
    bottom: 0;
}
#BTN,
#ML,
#djRegAndLike,
#logo,
#signInWithApple,
.B28,
.Tp,
.expFold {
    position: relative;
}
#BUY,
#CE,
#MAI,
#add,
#appSuccessfullyInstalled,
#banD,
#cC,
#contact,
#editFavsNotesDialog,
#ext,
#favs,
#favsDialog,
#gigForm,
#gigs,
#homeScreen,
#inL,
#inR,
#installationInstructionsScreen,
#kioskL,
#kioskLDJ,
#kioskR,
#kioskVenues,
#mAdd,
#mainMenu,
#mv1,
#notifications,
#privacyPolicy,
#registerDJ,
#registerGuestAccount,
#registerPublic,
#setUpLogin,
#req1,
#requests,
#searching,
#shows,
#songbook,
#subscribeOffBtn,
#subscribeOnBtn,
#suggest,
#suspended,
#termsAndConditions,
#trialMsg,
#venues,
#messageList,
#chartsSelector,
.XT,
.icons-container,
#unreadCountSpan,
.exCont,
.hide {
    display: none;
}
#t2,
#t3,
#t4,
nav li {
    display: table-cell;
}
#shout {
    display: none;
    width: 100%;
}
#sO1 {
    margin-top: 16px;
}
#sODD,
#sOT1 {
    width: 96%;
}
#deleteAccountPasswordCheck,
#login {
    display: none;
    padding-top: 0;
}
#signInWithApple {
    margin: 30px auto 0;
    width: 210px;
    cursor: pointer;
    display: block;
}
.mT10 {
    margin-top: 10px;
}
#codeSearchInstructions,
.mT20 {
    margin-top: 20px;
}
#djRegAndLike,
#hmOut {
    margin: 24px auto 13px;
    height: 48px;
}
.mT5 {
    margin-top: 5px;
}
.mT30 {
    margin-top: 30px;
}
.mT40 {
    margin-top: 40px;
}
.mT50 {
    margin-top: 50px;
}
.mTneg50 {
    margin-top: -50px;
}
.accountSettingsBTN {
    text-align: center;
    display: block;
    margin: 20px auto;
    line-height: 40px;
    -moz-border-radius: 12px;
    -webkit-border-radius: 12px;
    border-radius: 12px;
    height: auto;
    width: auto;
    max-width: 80%;
    font-size: 0.85em;
    border: 2px solid #ddd;
    cursor: pointer;
}
#match,
.reqF {
    width: 298px;
    margin: 0 auto;
}
.error,
.error2 {
    color: #ff7171;
}
#kioskAppIcons {
    display: block;
    width: 100%;
}
.reqF {
    display: none;
    font-size: 12pt;
}
.addBtn,
.canceled,
.shim,
nav {
    width: 100%;
}
#alphabet {
    font: 14pt/200% sans-serif;
}
#alphaRB {
    padding: 16px 0 0;
}
#alphabet td {
    cursor: pointer;
    width: 15%;
}
.shim {
    height: 20px;
}
.stopScroll {
    height: 100%;
    overflow: hidden;
}
table.table1 {
    width: 96%;
    margin-left: 2%;
    margin-right: 2%;
    word-break: break-all;
}
table.table2 {
    width: 90%;
    margin-left: 5%;
    margin-right: 5%;
}
#requestTXT,
#songKeywords,
.form1 input,
ul#MB li,
ul.MBmenu li {
    background-color: #fff;
}
.ui-dialog-titlebar-close {
    visibility: hidden;
}
nav {
    top: 0;
    margin: auto;
    z-index: 1000;
    display: table;
    border-collapse: collapse;
    border: 0;
}
nav ul {
    display: table-row;
}
nav li {
    margin: 0;
}
nav a {
    height: 22px;
    display: block;
    border: 0 solid red;
    margin: 0 1px;
    background: #444;
}
nav a:hover {
    background: #999;
}
.form1 {
    padding: 5px;
}
.form1 input {
    font-size: medium;
    border: 0;
    height: 38px;
    color: #333;
}
.field {
    padding: 4px 0 10px;
    display: block;
}
#requestTXT {
    width: 80%;
    padding: 3px;
}
A.linkG {
    color: #affeb4;
}
.errRnd {
    -moz-border-radius: 2px;
    -webkit-border-radius: 2;
    border-radius: 2;
    border: 1px solid #ff7171;
    padding: 6px;
}
.suc {
    color: #7dff9a;
}
ul.MBmenu {
    margin: 0;
}
ul.MB2menu {
    padding: 0;
    margin: 0;
}
ul#MB li,
ul.MBmenu li {
    border: 1px solid #000;
}
.MBmenu a,
.MBmenu a:active,
.MBmenu a:visited {
    text-decoration: none;
    display: block;
    padding: 12px;
    color: #111;
}
#titles,
ul.MB2 {
    display: none;
}
ul#MB,
ul.MB2 {
    padding: 0;
}
#MB a,
#MB a:active,
#MB a:visited {
    text-decoration: none;
    display: block;
    padding: 10px;
    color: #111;
}
.canceled {
    background-color: #dd7937;
    height: auto;
    margin: 2px 0 0;
    padding: 0;
}
.reqMsgCont {
    float: left;
    width: 81%;
}
.reqMsg {
    width: 89%;
    margin: 5px auto;
}
.addBtn,
.btnCont,
.nxt {
    float: right;
}
.btnCont {
    width: 19%;
    margin: 0;
    padding: 0;
}
.nxt {
    background-color: #454545;
    color: #bbb;
    width: 8%;
    height: 100px;
    line-height: 25px;
    box-shadow: 0 0 0 1px #bbb inset;
}
.addBtn,
.delBtn {
    height: 100px;
    line-height: 100px;
}
.addBtn {
    cursor: pointer;
    display: block;
    font-size: 135%;
    background-color: #6100d7;
    box-shadow: 0 0 0 2px #666 inset;
}
.delBtn,
.ok {
    cursor: pointer;
    text-decoration: none;
    color: #fff;
    font-size: 200%;
    background-color: #f06;
    float: right;
    width: 100%;
    text-align: center;
    box-shadow: 0 0 0 2px #666 inset;
    display: block;
}
.ok {
    height: 200px;
    line-height: 200px;
}
.exCont {
    float: right;
    width: 100%;
    background-color: #666;
}
.exDel,
.exMov {
    cursor: pointer;
    float: right;
    text-decoration: none;
    color: #fff;
    width: 19%;
    height: 66px;
    line-height: 66px;
}
.exDel {
    background-color: #f06;
    font-size: 160%;
    text-align: center;
    box-shadow: 0 0 0 2px #666 inset;
}
.exMov {
    background-color: #090;
    text-align: center;
    box-shadow: 0 0 0 2px #666 inset;
}
.addSng,
.exMN {
    color: #eee;
    width: 19%;
    height: 66px;
    font-size: 90%;
    line-height: 16px;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    box-shadow: 0 0 0 2px #666 inset;
    float: right;
}
.exMN {
    background-color: #454545;
}
.addSng {
    background-color: #369;
}
.buzz,
.expFold,
.sMov {
    color: #fff;
}
.expCont {
    background-color: #555;
    width: 95%;
    float: right;
    height: auto;
    margin: 2px 0 0;
    padding: 0;
}
.expFold {
    cursor: pointer;
    display: block;
    text-decoration: none;
    width: 100%;
    float: right;
    height: 100px;
    font-size: 135%;
    line-height: 100px;
    text-align: center;
    background-color: #6100d7;
    box-shadow: 0 0 0 2px #666 inset;
}
.expMsgCont {
    float: left;
    width: 75%;
}
#msgC {
    background-color: #fff;
}
.expMsg {
    width: 92%;
    margin: 5px auto;
}
.expBtnCont {
    float: right;
    width: 20%;
    margin: 0;
    padding: 0;
}
.buzz,
.expDelBtn,
.sMov {
    cursor: pointer;
    text-decoration: none;
    width: 100%;
    float: right;
    height: 66px;
    line-height: 66px;
    text-align: center;
    box-shadow: 0 0 0 2px #555 inset;
}
.sMov {
    display: block;
    background-color: #090;
}
.buzz {
    background-color: #6100d7;
}
.delBtnP,
.expDelBtn {
    color: #fff;
    font-size: 160%;
    background-color: #f06;
}
.ban,
.delBtnP {
    text-decoration: none;
    height: 66px;
    line-height: 66px;
    box-shadow: 0 0 0 2px #666 inset;
    width: 100%;
    text-align: center;
    display: block;
    float: right;
    cursor: pointer;
}
.ban {
    color: #eee;
    background-color: #111;
}
td {
    vertical-align: top;
}
.logMsg {
    background-color: #ff0;
    color: #111;
    margin: 0;
    padding: 2px;
    width: 100%;
    text-align: center;
}
#oD a,
.btn1 {
    color: #fff;
    text-decoration: none;
}
#t2,
.faqContent {
    text-align: left;
}
.menuList ul {
    margin: 0;
    padding: 0;
}
.menuList li {
    margin: 0;
    padding: 0 0 10px;
}
.menuList a {
    display: block;
    color: #affeb4;
    padding: 3px 3px 10px 17px;
    text-decoration: none;
}
.faqContent {
    clear: both;
    float: left;
}
.indentL {
    padding-left: 12px;
}

/* #header{text-align:center;background-color:#252525} */

#titles {
    width: 100%;
    margin: 0 0 20px;
}
#t2 {
    cursor: pointer;
    padding: 8px 0 8px 6px;
    color: #007cbf;
    text-decoration: none;
    font-size: 80%;
}
#t3,
.songSearch input {
    color: #222;
    font-weight: 700;
}
#kF1,
#loggedName,
#messagesIcon {
    font-size: 85%;
}
#t3 {
    text-align: center;
}
#t4 {
    padding: 8px 6px 8px 0;
    text-align: right;
    color: #444;
}
#djCode,
#hmIn,
.btn1,
.editNotesBTN,
.f11,
.five_char_code,
.songSearch {
    text-align: center;
}
.btn1 {
    display: block;
    margin: 40px auto;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    line-height: 40px;
    height: 40px;
    width: 260px;
    background-color: #09f;
    font-size: 110%;
    border: 2px solid #ddd;
    cursor: pointer;
}

.bigBlueButton {
    color: #fff;
    text-decoration: none;
    display: block;
    margin: 40px auto;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    line-height: 40px;
    height: auto;
    width: 260px;
    background-color: #09f;
    font-size: 110%;
    border: 2px solid #ddd;
    cursor: pointer;
    padding: 10px; /* added padding for spacing */
}

.bold-btn-text {
    font-weight: bold;
    font-size: 24px;
    line-height: 24px;
}

.regular-btn-text {
    font-size: 12px;
    line-height: 12px;
}


.B28,
.B28 li {
    height: 28px;
}
.recRnd,
.suggestionBox {
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
}
.B28 {
    margin: 0;
}
#BTN,
#BTN li,
#abc,
#favsBtn,
#fbLoginBtn,
#fbURL,
#gigG,
#loginSB,
#reqsBtn {
    height: 40px;
}
.B28 li {
    cursor: pointer;
    display: inline-block;
    background: url(../../imgs/ALL.png) 0 0/340px 310px no-repeat;
}

#header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 16px;
    background-color: #252525;
}

#homeB {
    left: 17px;
    top: 3px;
    background-position: -308px -104px;
    width: 22px;
    height: 28px;
    cursor: pointer;
}
#menuB {
    left: 60px;
    top: 3px;
    background-position: -136px -47px;
    width: 72px;
    height: 28px;
}

.icons-container {
    display: flex;
    align-items: center;
}

#messagesIcon {
    position: relative;
    display: flex;
    align-items: center;
    margin-right: 24px;
    cursor: pointer;
}

.unread-count {
    position: absolute;
    top: -10px;
    left: 0;
    background-color: red;
    color: white;
    padding: 2px 6px;
    border-radius: 50%;
    font-size: 12px;
    z-index: 1;
}

#loggedName {
    display: flex;
    align-items: center;
    margin-right: 20px;
}

#loggedName img,
#messagesIcon img {
    width: auto; /* Set image dimensions to actual size */
    height: auto;
    max-width: 24px; /* Limit maximum width */
    max-height: 24px; /* Limit maximum height */
}

.message {
    border: 1px solid #ddd;
    border-radius: 7px;
    padding: 10px;
    margin-bottom: 10px !important; /* the bottom margin is ignired without important */
    background-color: #f9f9f9;
    position: relative;
}

.message-link[data-read-status="0"]::after {
    /* Your styles for the blue dot when the message is unread */
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: 12px;
    height: 12px;
    background-color: #1876f2;
    border-radius: 50%;
    margin-left: 5px; /* Adjust the spacing as needed */
    margin-right: 10px;
}

.createdAt {
    font-size: 0.75em;
    float: right;
}

/* Style for the button container */
.message-button-container {
  position: absolute;
  bottom: 0;
  right: 0;
  margin: 10px; /* Adjust spacing as needed */
}

/* Style for message "Delete" button */
.delete-button {
  background-color: #fff; /* Light gray background */
  color: #555; /* Medium dark black text color */
  border: 1px solid #555; /* Medium dark black border */
  border-radius: 5px; /* Rounded corners */
  padding: 3px 8px; /* Adjust padding as needed */
  cursor: pointer;
  font-size: 0.7em;
}

/* Hover effect for the button */
.delete-button:hover {
  background-color: #ddd; /* Lighter gray on hover */
}

.message-title {
    font-size: 0.9em; /* Adjust the font size as needed */
    text-align: left;
    line-height: 1.4;
    margin-top: 5px; /* Add some spacing between content and timestamp */
    margin-right: 15px;
    color: #000; /* Adjust the color as needed */
}

/* .message-content {
    font-size: 0.9em; 
    text-align: left;
    line-height: 1.4;
    margin-top: 10px; 
    margin-right: 15px;
    color: #000; 
    white-space: pre-line;
} */

.message-content {
    text-align: left;
    line-height: 1.4;
    margin-top: 10px; /* Add some spacing between content and timestamp */
    margin-right: 15px;
    color: #000; /* Adjust the color as needed */
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3; /* This will limit the content to 3 lines */
    -webkit-box-orient: vertical;
    white-space: normal; /* Use normal white-space handling */
}

.message-timestamp {
    font-size: 0.7em; /* Adjust the font size as needed */
    font-style: italic;
    text-align: left;
    color: #1876f2; /* Adjust the color as needed */
}

/* Clickable messages properties */
.message-link {
    text-decoration: none; /* Remove underlines */
    color: inherit; /* Inherit text color from parent */
}

#messageScreen {
    display: none;
}

.lightBGScreen > div {
    background-color: #fff;
    margin: 0 10px;
    padding: 10px;
}

#iP {
    left: 96px;
    background-position: -3px -106px;
    height: 24px;
    width: 224px;
}
#homeGo {
    width: 47px;
    margin-left: 7px;
    cursor: pointer;
    background: url(../../imgs/ALL.png) -219px -44px/340px 310px no-repeat;
}
.five_char_code {
    width: 100%;
    margin: 15px 0;
    font-size: 24px;
    font-weight: 700;
}
#logo {
    display: block;
    top: 13px;
}
#hmIn {
    margin: 7% auto 8%;
}
#logoWelcomeScreen {
    display: block;
    top: 0;
    position: relative;
}
#hmOut,
.buttonContainer {
    width: 100%;
    display: block;
}
#BTN li,
#ML li,
#fbTemp,
.ED li {
    display: inline-block;
}
#fbLogin {
    height: 48px;
    width: 130px;
    background: url(../../imgs/ALL.png) -2px -44px/340px 310px no-repeat;
    margin: 0 auto;
    cursor: pointer;
}
#publicReg {
    height: 48px;
    width: 130px;
    margin: 0 auto;
    cursor: pointer;
}
#djRegAndLike {
    overflow: hidden;
    width: 96%;
}
#djReg {
    height: 46px;
    width: 202px;
    background: url(../../imgs/ALL.png) -4px -135px/340px 310px no-repeat;
    cursor: pointer;
}
#fbTemp {
    height: 21px;
    width: 72px;
    background: url(../../imgs/ALL.png) -228px -108px/340px 310px no-repeat;
    float: right;
    cursor: pointer;
    margin-right: 10px;
}
#BTN {
    margin: 4% 0;
}
#BTN li {
    cursor: pointer;
}
.buttonContainer {
    height: 40px;
    margin: 12px auto;
}
#tipTheDJDisclaimer,
.suggestionBox {
    background-color: #252525;
    margin: 30px auto 26px;
}
.buttonContainers20 {
    float: left;
    width: 20%;
}
.buttonContainers25 {
    float: left;
    width: 25%;
}
.buttonContainers40 {
    float: left;
    width: 40%;
}
.buttonContainers50 {
    float: left;
    width: 50%;
}
#abc {
    background: url(../../imgs/ALL.png) -3px -229px/340px 310px no-repeat;
    margin: 0 auto;
    width: 54px;
    cursor: pointer;
}
#loginSB {
    background: url(../../imgs/ALL.png) -224px -2px/340px 310px no-repeat;
    margin: 0 auto;
    width: 112px;
    cursor: pointer;
}
#favsBtn {
    background: url(../../imgs/ALL.png) -47px -2px/340px 310px no-repeat;
    margin: 0 auto;
    width: 45px;
    cursor: pointer;
}
#reqsBtn {
    background: url(../../imgs/ALL.png) -92px -2px/340px 310px no-repeat;
    margin: 0 auto;
    width: 45px;
    cursor: pointer;
}
#gigG {
    background: url(../../imgs/ALL.png) -138px -2px/340px 310px no-repeat;
    margin: 0 auto;
    width: 40px;
    cursor: pointer;
}
#fbURL {
    background: url(../../imgs/ALL.png) -182px -2px/340px 310px no-repeat;
    margin: 0 auto;
    width: 40px;
    cursor: pointer;
}
.suggestionBox {
    width: 70%;
    padding: 6px 0;
    border-radius: 10px;
    border: 1px solid #ddd;
}
#testimonials {
    margin: 50px 0 0;
}
#BTN #k1 {
    left: 72px;
    background-position: -400px 0;
    width: 220px;
}
.songSearch {
    padding: 2px 0 0 1px;
    background-color: #d4d0c8;
    color: #444;
}
.AD,
.DR,
.PD {
    padding-left: 14px;
}
.songSearch input {
    padding-left: 5px;
    font-size: medium;
    height: 30px;
}
#songKeywords {
    width: 70%;
    font-weight: 400;
    text-decoration: none;
}
.fNotesTitle {
    margin-bottom: 10px;
    color: #09f;
    font-size: 0.94em;
}
.fNotes {
    color: #aaa;
    font-size: 0.94em;
}
#favNotes {
    width: 98%;
    background: #fff;
}
#favsNotesEditTEXT {
    width: 92%;
    background: #fff;
}
.editNotesBTN {
    display: block;
    margin: 5px 0 3px -2px;
    line-height: 20px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    width: 100px;
    height: auto;
    font-size: 0.85em;
    color: #ccc;
    border: 1px solid #ccc;
    cursor: pointer;
    text-decoration: none;
}
#CX,
#DU,
#JA,
#ML,
#ML li {
    height: 20px;
}
.f11 {
    font-size: 11px;
    color: #999;
}
#pi {
    font-size: small !important;
}
.extrasButtonContainer {
    display: block;
    width: 100%;
    height: 20px;
    margin: 20px auto;
}
.buttonContainers33 {
    float: left;
    width: 33%;
}
.buttonContainers100 {
    float: left;
    width: 100%;
}
#JA {
    background: url(../../imgs/ZZ.png) -226px -119px/310px 375px no-repeat;
    margin: 0 auto;
    width: 85px;
    cursor: pointer;
}
#DU {
    background: url(../../imgs/ZZ.png) -90px -119px/310px 375px no-repeat;
    margin: 0 auto;
    width: 48px;
    cursor: pointer;
}
#CX {
    background: url(../../imgs/ZZ.png) 0 -119px/310px 375px no-repeat;
    margin: 0 auto;
    width: 88px;
    cursor: pointer;
}
#oD {
    margin: 4% 0 5%;
    padding-left: 5px;
    font: italic 1em sans-serif;
}
#match,
#oD2 {
    font-size: 12pt;
    text-align: center;
}
#lM {
    margin: 3% 0 0 -3px;
    width: 100%;
    text-align: center;
}
#oD2 a {
    font-size: 10pt;
    text-align: center;
    font-weight: 700;
    text-decoration: none;
}
#ML {
    margin: -14px 0 20px;
}
#ML li {
    background: url(../../imgs/ZZ.png) 0 0/310px 375px no-repeat;
}
#ML #mail {
    cursor: pointer;
    left: 5px;
    background-position: 0 -139px;
    width: 172px;
}
#tagMsg {
    text-align: center;
    padding: 20px;
    color: #abeffe;
}
#foundMsg,
.H {
    font-weight: 700;
    color: #feff97;
}
#foundMsg {
    text-align: center;
    margin: 0 0 24px;
}
ol#posts {
    margin: 10px 0 0;
    padding: 0;
}
ol#posts li {
    font: 11pt/1.2 sans-serif;
    border-bottom: 1px solid #333;
    padding: 18px 0 0 7px;
}
.TL {
    border-top: 1px solid #333;
}
.Tp {
    cursor: pointer;
    display: block;
    left: 3px;
    top: 27px;
    height: 32px;
    width: 81px;
    background: url(../../imgs/ZZ.png) -2px -162px/310px 375px no-repeat;
}
.adDiv {
    width: 280px;
    margin: 50px auto 70px;
}
.l {
    width: 250px;
    padding-right: 20px;
    float: left;
}
.fx,
.fx2 {
    position: relative;
    height: 25px;
    width: 36px;
    background: url(../../imgs/ZZ.png) -170px -83px/310px 375px no-repeat;
}
.fx,
.r1,
.r2,
.r3,
.z {
    float: right;
    cursor: pointer;
    display: block;
}
.A,
.T {
    margin-bottom: 10px;
}
.fx {
    margin-top: 8px;
    margin-right: 5%;
    margin-left: 4%;
}
.fx2 {
    margin: 0;
}
.r1,
.r11 {
    position: relative;
    height: 30px;
    width: 36px;
    background: url(../../imgs/ZZ.png) -89px -83px/310px 375px no-repeat;
}
.r1 {
    margin: 26px 6px 20px 0;
}
.r11 {
    margin: 0;
}
/* r22 is the button for the faq.html page in via /extPages */
.r2,
.r22 {
    /* background: url(../../imgs/ZZ.png) -3px -83px/310px 375px no-repeat; */
    background: url(/imgs/ZZ2.png) -202px -238px/310px 375px no-repeat;
    position: relative;
    height: 30px;
    width: 110px;
}

.r2 {
    margin: 0px 6px 20px 0;
}
.r22 {
    margin: 0;
}
.quickStart {
    text-align: center;
    margin: 0 auto;
}
.r3 {
    position: relative;
    height: 30px;
    width: 36px;
    background: url(../../imgs/ZZ.png) -130px -83px/310px 375px no-repeat;
    margin: 26px 6px 20px 0;
}
.z,
.z2 {
    height: 30px;
    width: 36px;
    background: url(../../imgs/ZZ.png) -253px -83px/310px 375px no-repeat;
    position: relative;
}
.z {
    margin: 0 2% 0 0;
    top: 0;
}
.z2 {
    margin: 0;
}
.AD {
    color: #0f0;
}
.DR {
    color: #f90;
}
.PD {
    color: #ff0;
}
.f10,
.f13 {
    color: #999;
}
.reqCont {
    background-color: #333;
    width: 98%;
    float: left;
    height: auto;
    margin: 2px 1% 0;
    padding: 0;
}
.ED,
.ED li {
    height: 30px;
}
.recRnd {
    border-radius: 10px;
    border: 1px solid;
    padding: 6px;
}
#tip a,
.recRndPad10 {
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    padding: 10px;
}
.recRndPad10 {
    border-radius: 10px;
    border: 1px solid;
}
.f13 {
    font-size: 13px;
    text-align: center;
}
.bot1 {
    margin-bottom: 6px;
}
.f10 {
    font-size: 10px;
    text-align: justify;
}
#fbLoginBtn {
    position: relative;
    margin: 24px auto 0;
    width: 210px;
    cursor: pointer;
    display: block;
    top: 0;
    background: url(/imgs/ZZ.png) -2px -194px/310px 375px no-repeat;
}
.EH {
    cursor: Pointer;
    border: 1px solid #999;
    background-color: #111;
    padding: 5px;
    margin: 20px 19px 0;
    text-align: left;
}
.ED,
.iC2 {
    padding: 0;
}
.ED #i2 {
    background-position: 0 -30px;
}
.ED #i3 {
    background-position: 0 -60px;
}
.ED #i4 {
    background-position: 0 -90px;
}
.ED {
    position: relative;
    margin: 0;
    border: 0;
}
.ED li {
    width: 200px;
    background: url(../../imgs/E.png) 0 0/271px 120px no-repeat;
}
.iC2 {
    display: none;
    height: auto;
    margin: 12px auto 20px;
}
.darkBtn,
.multiView {
    font-style: normal;
    margin-left: 2px;
    cursor: pointer;
}
#MBfmenu a,
.MB2menu a,
.cPnt {
    cursor: pointer;
}
.cPntGreenUL {
    cursor: pointer;
    text-decoration: underline;
    color: #affeb4 !important;
}
.cPntGrnBld_UL {
    cursor: pointer;
    text-decoration: underline;
    font-weight: bold;
    font-size: 80%;
    color: #affeb4 !important;
}
.multiView {
    color: #ddd !important;
    border: 1px solid #aaa;
    padding: 1px 2px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
}
.darkBtn {
    color: #111 !important;
    border: 1px solid #111;
    padding: 0 1px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
}
#tip a {
    display: block;
    cursor: pointer;
    position: relative;
    margin: 32px auto 24px;
    height: 100px;
    width: 226px;
    background: url(../../imgs/ZZ.png) 20px -230px/310px 375px no-repeat;
    border-radius: 10px;
    border: 1px solid #ddd;
}
#tipTheDJDisclaimer {
    width: 90%;
    padding: 6px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    border: 1px solid #ddd;
}
#hideDJGuideBtn,
#tipTheDJSubmitBTN {
    width: 200px;
    height: 60px;
    font-size: 160%;
    cursor: pointer;
}
.ui-dialog .ui-dialog-buttonpane {
    text-align: center;
}

.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
    display: flex;
    justify-content: center;
}

.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset .ui-button {
    margin: 0 3.53px; /* Adjust margin to counteract jQuery UI's applied margin */
}

/* Convert Account Verification form */
.convertAccountCodeInputContainer {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

.convertAccountCodeInput {
    width: 200px;
    height: 40px;
    font-size: 24px;
    text-align: center;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.convertAccountButtonContainer {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

.convertAccountSubmitButton {
    padding: 10px 20px;
    font-size: 18px;
    border: none;
    border-radius: 4px;
    background-color: #007BFF;
    color: white;
    cursor: pointer;
}

.convertAccountSubmitButton:hover {
    background-color: #0056b3;
}

.redFont {
    color:red;
}

.CLK:hover {
    cursor:pointer;
}

@media all and (min-width: 1281px) {
    #inL,
    #inR {
        display: block;
        position: absolute;
        color: #eee;
        top: 0;
        width: 50%;
    }
    #inLC,
    #inRC {
        width: 90%px;
        height: 100%;
        text-align: center;
    }
    #nonScrollBG {
        position: fixed;
        bottom: 0;
        height: 100%;
        width: 100%;
        background: url(/imgs/crowd1.jpg) center center/cover no-repeat fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
    }
    #wrapper {
        height: 100%;
        position: relative;
        z-index: 2;
        background-color: #111;
        overflow-x: hidden;
        overflow-y: hidden;
        max-width: 320px;
        min-height: 480px;
        margin: 0 auto;
    }
    #inL {
        left: 0;
        padding-right: 160px;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }
    #inR {
        right: 0;
        height: 100%;
        padding-left: 160px;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }
    #inLC {
        margin: 0 5%;
    }
    #inRC {
        margin: 8px 5%;
    }
}